/* Лендинг /besplatnyj-sajt («сайт бесплатно», «сайт за 0 рублей»). Строится на b2b.css, service.css
   и builder.css; здесь только первый экран с чеком и сетки, которых нет у соседей.
   Сцена с чеком тёмная в обеих темах, как сцены /konstruktor, сам чек всегда «бумажный». */

.fre_hero { padding: 120px 0 72px; }
.fre_hero_grid { display: grid; gap: 40px; align-items: center; }
.fre_hero_grid > * { min-width: 0; }
.fre_hero .svc_crumbs { margin-bottom: 20px; flex-wrap: wrap; }
.fre_hero .svc_crumbs a + a::before { content: '/'; margin-right: var(--b2b-sp-2); opacity: 0.5; }
.fre_hero .bld_title { margin-top: 0; max-width: 15ch; }
.fre_hero_lead { margin: 20px 0 28px; max-width: 48ch; color: var(--secondary); font-size: 16px; line-height: var(--b2b-lh); }
.fre_hero .svc_actions { margin: 0; }
.fre_trust { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--secondary); font-size: 14px; line-height: 20px; }
.fre_trust li { display: flex; align-items: center; gap: 8px; }
.fre_trust .bld_ico_sm { color: var(--accent); }

.fre_stage {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; place-items: center; min-height: 440px; padding: 40px 16px 48px;
  border-radius: var(--b2b-radius); background: var(--bld-screen);
  box-shadow: inset 0 0 0 1px var(--bld-win-edge);
}
.fre_stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgba(11, 12, 11, 0.5), transparent 80%); }

/* Чек: тень на обёртке, потому что маска с зубчатым краем обрезала бы box-shadow. */
.fre_check_wrap { width: min(100%, 340px); rotate: -1.5deg; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.55)); }
.fre_check {
  padding: 24px 22px 34px; background: #f7f6f1; color: #171917;
  font-family: var(--bld-mono); font-size: 13px; line-height: 20px;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
}
.fre_check p { margin: 0; color: inherit; }
.fre_check_head { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px dashed rgba(23, 25, 23, 0.35); text-align: center; }
.fre_check_head b { font-family: var(--primary-font); font-size: 17px; letter-spacing: -0.01em; }
.fre_check_head span { font-size: 11.5px; opacity: 0.6; }
.fre_check_rows { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 7px; }
.fre_check_rows li { display: flex; align-items: baseline; gap: 6px; }
.fre_check_rows span { min-width: 0; }
.fre_check_rows i { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(23, 25, 23, 0.4); translate: 0 -3px; }
.fre_check_rows b { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.fre_check_total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed rgba(23, 25, 23, 0.35); }
.fre_check_total span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.fre_check_total b { font-family: var(--primary-font); font-size: 44px; line-height: 1; letter-spacing: -0.04em; }
.fre_check_foot { margin-top: 12px !important; text-align: center; font-size: 11.5px; opacity: 0.6; }

.fre_included { gap: 12px; }

@media (min-width: 768px) {
  .fre_included { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .fre_hero { padding-top: 140px; }
  .fre_hero_grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; }
  .fre_hero_lead { font-size: 17px; line-height: 28px; }
  .fre_stage { min-height: 540px; }
  .fre_steps.b2b_steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--b2b-sp-7); }
}
@media (min-width: 1100px) {
  .fre_included { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .fre_check_wrap { rotate: none; }
}