/* Нейросети на дому · Родники — стили лендинга. Мобильная вёрстка по умолчанию, шире — в @media. */

/* Подменный шрифт заголовков, пока грузится Unbounded: системный жирный гротеск, растянутый до ширины
   Unbounded 700 (замер по h1: 46,3 em против 35,5 em у Arial Bold → 130 %). Заголовок не меняет число строк
   при подмене шрифта, и текст под ним не прыгает. Вертикальные метрики — как у Unbounded (995/245 на 1000),
   делённые на size-adjust. */
@font-face {
  font-family: 'Unbounded Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'),
    local('Liberation Sans Bold'), local('LiberationSans-Bold');
  font-weight: 600 700;
  size-adjust: 130%;
  ascent-override: 76.5%;
  descent-override: 18.8%;
  line-gap-override: 0%;
}

:root {
  --paper: #FBF3E4;
  --beige: #F7EBD6;
  --beige-deep: #F4E2C4;
  --sand: #EDD3A4;
  --card: #FFF8EC;
  --white: #FFFDF8;
  --navy: #1F2A44;
  --navy-2: #2A3756;
  --navy-deep: #161E33;
  --ink-soft: #4A5168;
  --mustard: #E3A52B;
  --mustard-hi: #F0BE55;
  --mustard-lo: #C98A16;
  --on-navy: #FBF3E4;
  --on-navy-soft: #C8CEDD;
  --err: #B3261E;
  --err-bg: #FFF1EE;
  --line: rgba(31, 42, 68, .14);
  --line-strong: rgba(31, 42, 68, .32);
  --shadow: 0 1px 0 rgba(31, 42, 68, .05), 0 14px 32px -16px rgba(31, 42, 68, .35);
  --font-head: 'Unbounded', 'Unbounded Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --gutter: 16px;
  --bar-h: 78px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* при переходе по Tab браузер оставляет место под закреплённой полосой (в 2 строки на 320–360 px ~84 px) */
  scroll-padding-bottom: calc(var(--bar-h) + 24px + env(safe-area-inset-bottom, 0px));
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--navy);
  background-color: var(--paper);
  /* бумажная крапинка без картинок */
  background-image:
    radial-gradient(rgba(31, 42, 68, .05) .7px, transparent 1.3px),
    radial-gradient(rgba(201, 138, 22, .07) 1px, transparent 1.7px);
  background-size: 19px 19px, 31px 31px;
  background-position: 0 0, 9px 14px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}

body.has-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); }

img { max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
}
p, li, figcaption { text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; }

[hidden] { display: none !important; }
html:not(.js) .needs-js { display: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ic { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.sec--forma :focus-visible, .foot :focus-visible { outline-color: var(--mustard); }
.forma__card :focus-visible { outline-color: var(--navy); }
/* на синей панели «Ловилки» синее кольцо не видно: светлое, контраст с фоном ~13:1 */
.counter--navy :focus-visible { outline-color: var(--on-navy); }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.h2 { font-size: clamp(1.625rem, 1.2rem + 2vw, 2.75rem); }
.h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.25; }

.sec { position: relative; padding: 64px 0; }
.sec__sub { margin-top: 14px; max-width: 46ch; font-size: 1.2rem; color: var(--ink-soft); }

/* ---------- кнопки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 24px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 4px 0 var(--navy);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition-property: transform, box-shadow, background-color;
  transition-duration: .15s;
  transition-timing-function: ease-out;
}
.btn:hover { background: #fff; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--navy); }
.btn:focus-visible { outline-offset: 4px; }
.btn--mustard { background: var(--mustard); }
.btn--mustard:hover { background: var(--mustard-hi); }
.btn--navy { background: var(--navy); color: var(--on-navy); box-shadow: 0 4px 0 #0B1122; }
.btn--navy:hover { background: var(--navy-2); }
.btn--navy:active { box-shadow: 0 1px 0 #0B1122; }
.btn--line { background: var(--white); box-shadow: 0 3px 0 var(--navy); }
.btn--xl { min-height: 64px; padding: 14px 28px; font-size: 1.2rem; }
.btn--block { width: 100%; }
.btn[disabled] { cursor: progress; transform: translateY(2px); box-shadow: 0 2px 0 var(--navy); opacity: .8; }

.tolink {
  display: inline-block;
  padding: 12px 0;
  line-height: 1.35;
  font-weight: 800;
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--mustard);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.tolink .ic { margin-left: 6px; vertical-align: -.27em; transition: transform .2s var(--ease); }
.tolink:hover .ic { transform: translateX(3px); }

/* ---------- шапка ---------- */

.top { padding-top: 10px; }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.25;
}
.brand__sep { display: none; }
.brand__place { display: block; }
.brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mustard);
  box-shadow: inset 0 0 0 2px var(--navy);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.round-call {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-navy);
  box-shadow: 0 3px 0 #0B1122;
  transition-property: transform, box-shadow, background-color;
  transition-duration: .15s;
}
.round-call:hover { background: var(--navy-2); }
.round-call:active { transform: translateY(2px); box-shadow: 0 1px 0 #0B1122; }
.round-call .ic { width: 24px; height: 24px; }

/* ---------- первый экран ---------- */

.hero { padding: 6px 0 56px; }
.hero__grid { display: grid; gap: 14px; }
/* --pw — ширина портрета; облачко встаёт справа от головы и не заходит на лицо */
.hero__art { --pw: min(56%, 215px); order: -1; position: relative; }
.pop--hero { width: var(--pw); }

.sun {
  background: radial-gradient(circle at 34% 30%, var(--mustard-hi), var(--mustard) 58%, var(--mustard-lo));
  box-shadow: inset 0 -10px 0 rgba(31, 42, 68, .08);
}
.hero__house {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -12px;
  width: 34%;
  max-width: 150px;
  filter: drop-shadow(0 10px 10px rgba(31, 42, 68, .18));
}

.bubble {
  position: relative;
  padding: 12px 16px;
  border: 2px solid var(--navy);
  border-radius: 22px;
  background: var(--white);
  color: var(--navy);
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 4px 0 var(--navy);
}
.bubble::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 4px;
}
.bubble--hero {
  position: absolute;
  z-index: 3;
  top: 0;
  left: calc(var(--pw) * .74);
  right: 0;
  max-width: 240px;
  font-size: 1.125rem;
}
.bubble--hero::after { left: -11px; top: 26px; transform: rotate(45deg); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 6px 16px 6px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 800;
  font-size: 1.125rem;
}
.badge::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mustard); }

.hero__title { font-size: clamp(1.5rem, .95rem + 2.8vw, 2.9rem); line-height: 1.14; }
.squiggle {
  white-space: nowrap;
  padding-bottom: .16em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12' viewBox='0 0 40 12'%3E%3Cpath d='M0 6Q10 0 20 6T40 6' fill='none' stroke='%23E3A52B' stroke-width='3.6'/%3E%3C/svg%3E") repeat-x 0 100% / .9em .27em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hero__lead { margin-top: 12px; font-size: 1.125rem; }

.facts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 16px 0 0; padding: 0; list-style: none; }
.facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.facts .ic { color: var(--mustard-lo); }

.promise {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 14px 8px 8px;
  border: 2px dashed var(--mustard-lo);
  border-radius: 18px;
  background: var(--beige-deep);
  font-weight: 800;
  line-height: 1.3;
}
.promise__ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--mustard);
}
.promise__ic .ic { width: 20px; height: 20px; }

.hero__cta { display: grid; gap: 6px; margin-top: 18px; }
.hero__call { width: 100%; padding-left: 16px; padding-right: 16px; font-size: 1.125rem; }
.bignum {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 1.9rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--navy);
  text-decoration: none;
}
.bignum:hover { text-decoration: underline; text-decoration-color: var(--mustard); text-decoration-thickness: 3px; }
.hero__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

.socials { display: flex; gap: 14px; }
.soc {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 56px;
  color: var(--navy);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.125rem;
}
.soc__ic {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2C64B2;
  color: #fff;
  box-shadow: 0 3px 0 var(--navy);
  transition: transform .15s ease-out, box-shadow .15s ease-out;
}
.soc__ic .ic { width: 26px; height: 26px; }
.soc:active .soc__ic { transform: translateY(2px); box-shadow: 0 1px 0 var(--navy); }
.soc[data-max-url] .soc__ic { background: var(--navy); }

/* ---------- портреты «выходят из круга» ---------- */

/* Геометрия по картинке 1024×1536: круг с центром (512, 600) и радиусом 512. Ниже центра круга фигура
   обрезана его дугой, выше — видна целиком (голова и поднятая рука выходят за круг). Выше центра фигура
   нигде не касается краёв картинки, поэтому прямых срезов не видно. Нижние 424 px картинки пустые —
   их убирает отрицательный нижний отступ (проценты отступов считаются от ширины). */
.figure { position: relative; }
.figure img { position: relative; z-index: 1; display: block; width: 100%; }
.pop { position: relative; }
.pop__bg {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  padding-top: 100%;           /* квадрат: проценты padding считаются от ширины */
  margin-top: 8.59375%;        /* (600 − 512) / 1024 */
  border-radius: 50%;
}
.pop img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-bottom: -41.40625%;   /* −(1536 − 1112) / 1024 */
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 33.3333% at 50% 39.0625%, #000 99.4%, transparent 100%), linear-gradient(#000, #000);
  -webkit-mask-size: 100% 100%, 100% 39.0625%;
  -webkit-mask-position: 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse 50% 33.3333% at 50% 39.0625%, #000 99.4%, transparent 100%), linear-gradient(#000, #000);
  mask-size: 100% 100%, 100% 39.0625%;
  mask-position: 0 0, 0 0;
  mask-repeat: no-repeat;
}
.blob { background: var(--sand); }
.counter {
  position: relative;
  z-index: 2;
  border: 2px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.counter--navy { border-color: var(--navy); background: var(--navy); color: var(--on-navy); }

/* ---------- кто к вам придёт ---------- */

.sec--kto { background: var(--beige); }
.kto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46%;
  grid-template-areas:
    "title fig"
    "card card"
    "plates plates";
  align-items: center;
  column-gap: 8px;
}
.kto__title { grid-area: title; padding-bottom: 18px; }
.figure--kto { grid-area: fig; justify-self: end; width: 100%; max-width: 230px; margin-bottom: 18px; }
.kto__card { grid-area: card; display: grid; gap: 22px; padding: 26px 20px 24px; }
.kto__story { display: grid; gap: 14px; justify-items: start; }
.kto__lead { font-size: 1.2rem; font-weight: 700; }
.kto__story .btn { margin-top: 6px; }
.honest { display: grid; gap: 18px; padding-top: 22px; border-top: 2px dashed var(--line-strong); }
.honest__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.honest__list li { position: relative; padding-left: 30px; }
.honest__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mustard);
  box-shadow: 0 0 0 3px var(--beige-deep);
}
.realphoto { display: flex; align-items: center; gap: 16px; margin: 0; }
.realphoto img {
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--mustard);
  box-shadow: 0 0 0 2px var(--navy), 0 10px 20px -10px rgba(31, 42, 68, .5);
}
.realphoto figcaption {
  position: relative;
  padding-top: 26px;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.3;
  transform: rotate(-3deg);
}
.realphoto figcaption::before {
  /* стрелка «вот я» */
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  width: 46px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 22'%3E%3Cpath d='M44 18C32 4 17 2 5 9M5 9l8-6M5 9l9 4' fill='none' stroke='%231F2A44' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.plates { grid-area: plates; display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.plates li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 18px 8px 12px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--on-navy);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.2;
}
.plates .ic { width: 22px; height: 22px; color: var(--mustard); }

/* ---------- что сделаем за вечер ---------- */

.steps { display: grid; gap: 26px; margin: 34px 0 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; }
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 100px;
  bottom: -22px;
  border-left: 3px dashed var(--sand);
}
.step__pic {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  background: var(--card);
  border: 2px solid var(--line);
  box-shadow: var(--shadow);
}
.step__pic img { width: 82px; }
.step__body { display: grid; gap: 8px; padding-top: 4px; }
.step__body .h3 { display: flex; align-items: center; gap: 10px; }
.step__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mustard);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

/* кнопка-ролик, нарисованная стилями */
.playbub {
  position: relative;
  display: grid;
  place-items: center;
  width: 66px;
  height: 52px;
  border-radius: 18px;
  background: var(--navy);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .25);
}
.playbub::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: -9px;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: var(--navy) transparent transparent transparent;
}
.playbub__tri {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--mustard);
}

/* мини-экран игры */
.mini {
  position: relative;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(#34436A, var(--navy));
}
.mini__score { position: absolute; right: 8px; top: 5px; font: 700 13px/1 var(--font-head); color: var(--mustard); }
.mini__drop { position: absolute; border-radius: 50%; }
.mini__drop--tomato { left: 12px; top: 12px; width: 13px; height: 13px; background: #E0533D; box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .18); }
.mini__drop--cuke { left: 50px; top: 24px; width: 8px; height: 17px; border-radius: 6px; background: #5DAA5A; transform: rotate(28deg); }
.mini__drop--berry { left: 30px; top: 30px; width: 10px; height: 11px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; background: #D83A5A; }
.mini__drop--bomb { left: 29px; top: 6px; width: 12px; height: 12px; background: #0B1122; box-shadow: 0 0 0 1.5px #5A6380; }
.mini__hero {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  border: 2px solid var(--mustard);
  background: var(--beige-deep);
}

.game {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50%;
  grid-template-areas:
    "say fig"
    "panel panel";
  align-items: start;
  column-gap: 6px;
  margin-top: 56px;
}
.bubble--game { z-index: 3; grid-area: say; margin: 6px -34px 0 0; font-size: 1.125rem; }
.bubble--game::after { right: -11px; top: 30px; transform: rotate(-135deg); }
.figure--game { grid-area: fig; justify-self: end; width: 100%; max-width: 250px; margin-bottom: 18px; }
.blob--game { background: var(--mustard); opacity: .5; }
.game__panel { grid-area: panel; display: grid; gap: 14px; justify-items: center; padding: 26px 18px 24px; text-align: center; }
.game__btn { width: 100%; max-width: 420px; }
.game__btn .ic { width: 1.4em; height: 1.4em; }
.game__hint { color: var(--on-navy-soft); font-size: 1.125rem; }
.game__hint.is-err { color: var(--mustard-hi); font-weight: 800; }
.game__btn[aria-busy="true"] { cursor: progress; opacity: .85; }

/* ---------- чего опасаются ---------- */

.sec--strahi { background: var(--beige); }
.fears { display: grid; gap: 30px; margin: 34px 0 0; padding: 0; list-style: none; }
.fear { display: grid; gap: 12px; }
.fear__q {
  position: relative;
  justify-self: end;
  max-width: 90%;
  padding: 14px 18px;
  border-radius: 22px 22px 6px 22px;
  background: var(--mustard);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  box-shadow: 0 3px 0 var(--mustard-lo);
}
.fear__a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: end; }
.fear__ava { width: 44px; height: 44px; border-radius: 50%; background: var(--beige-deep); border: 2px solid var(--navy); }
.fear__a p {
  padding: 14px 18px;
  border: 2px solid var(--line);
  border-radius: 22px 22px 22px 6px;
  background: var(--white);
  box-shadow: var(--shadow);
}

/* ---------- кому пригодится ---------- */

.who { display: grid; gap: 64px; margin: 84px 0 0; padding: 0; list-style: none; }
.who__card {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 86px 22px 24px;
  border: 2px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: var(--shadow);
  transition: border-color .2s ease-out;
}
.who__img { position: absolute; left: 14px; top: -62px; width: 140px; filter: drop-shadow(0 10px 10px rgba(31, 42, 68, .16)); }
.who__card.is-match { border-color: var(--mustard); box-shadow: 0 0 0 3px var(--mustard), var(--shadow); }
.who__note { margin-top: 30px; max-width: 54ch; font-size: 1.15rem; }
.who__note strong { font-family: var(--font-head); font-weight: 600; }

/* ---------- как пройдёт вечер ---------- */

.sec--kak { background: var(--beige); }
.kak { display: grid; gap: 30px; }
.tl { margin: 32px 0 0; padding: 0; list-style: none; counter-reset: tl; }
.tl li { position: relative; counter-increment: tl; padding: 0 0 28px 62px; }
.tl li::before {
  content: counter(tl);
  position: absolute;
  left: 0;
  top: -4px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mustard);
  box-shadow: 0 3px 0 var(--navy);
  font: 700 1.05rem/1 var(--font-head);
}
.tl li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 21px;
  top: 48px;
  bottom: 4px;
  border-left: 3px dotted var(--line-strong);
}
.tl li:last-child { padding-bottom: 0; }
.tl strong { font-weight: 800; }
.tl__tea { float: right; width: 112px; margin: -6px 0 6px 10px; filter: drop-shadow(0 8px 8px rgba(31, 42, 68, .15)); }

.prep { align-self: start; border: 2px solid var(--navy); border-radius: 26px; background: var(--card); box-shadow: 0 4px 0 var(--navy); }
.prep summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px 12px 22px;
  border-radius: 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.125rem;
}
.prep summary::-webkit-details-marker { display: none; }
.chev {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mustard);
}
.chev::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -7px 0 0 -5px;
  border-right: 3px solid var(--navy);
  border-bottom: 3px solid var(--navy);
  transform: rotate(45deg);
  transition: transform .2s var(--ease), margin .2s var(--ease);
}
.prep[open] .chev::before { margin-top: -3px; transform: rotate(-135deg); }
.checklist { display: grid; gap: 14px; margin: 0; padding: 4px 22px 24px; list-style: none; }
.checklist li { position: relative; padding-left: 40px; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--navy);
  border-radius: 8px;
  background: var(--white);
}

/* ---------- сколько стоит ---------- */

.cena {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  grid-template-areas:
    "fig title"
    "card card"
    "small small";
  align-items: center;
  column-gap: 12px;
}
.figure--cena { grid-area: fig; width: 100%; max-width: 240px; margin-bottom: 18px; }
.blob--cena { background: var(--beige-deep); box-shadow: inset 0 0 0 3px var(--sand); }
.cena__title { grid-area: title; padding-bottom: 18px; }
/* до компьютера колонка рядом с портретом узкая (180 px на 375): вопрос — рядом с портретом,
   ответ «Всего 5 000 ₽ за бесценный опыт» — строкой во всю ширину под ними */
@media (max-width: 899px) {
  .cena { grid-template-areas: "fig title" "price price" "card card" "small small"; }
  .cena__title { display: contents; }
  .cena__title .h2 { grid-area: title; align-self: center; padding-bottom: 18px; }
  .price { grid-area: price; margin: 0 0 24px; }
}
.price { margin-top: 14px; }
.price__num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 3.6vw, 3.6rem);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.nw { white-space: nowrap; }
.price__per { display: inline-block; margin-top: 10px; padding: 2px 14px; border-radius: 999px; background: var(--mustard); font-weight: 800; }

.ticket { grid-area: card; padding: 26px 20px 24px; }
.incl { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.incl li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.incl__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--navy);
  color: var(--mustard);
}
.incl__ic .ic { width: 22px; height: 22px; }
.incl__img { width: 52px; filter: drop-shadow(0 4px 4px rgba(31, 42, 68, .15)); }

.ticket__cut { position: relative; height: 0; margin: 26px -20px; border-top: 3px dashed var(--line-strong); }
.ticket__cut::before, .ticket__cut::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--line);
}
.ticket__cut::before { left: -15px; clip-path: inset(0 0 0 50%); }
.ticket__cut::after { right: -15px; clip-path: inset(0 50% 0 0); }

/* до 560 px печать стоит над текстом: в две колонки на 320–360 px текст сжимался до 72–112 px и рвал слова */
.guarantee { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; justify-items: center; align-items: center; text-align: center; }
.stamp { position: relative; width: 190px; transform: rotate(-9deg); }
.stamp img { display: block; width: 100%; filter: drop-shadow(0 8px 8px rgba(31, 42, 68, .2)); }
.stamp__txt {
  position: absolute;
  inset: 22% 16%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.125rem;
  line-height: 1.12;
  text-align: center;
  color: var(--navy);
}
.guarantee__txt { max-width: 26ch; font-family: var(--font-head); font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
.pay { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 700; }
.pay .ic { color: var(--mustard-lo); width: 28px; height: 28px; }
.cena__cta { display: grid; gap: 6px; justify-items: center; margin-top: 22px; }
.cena__cta .btn { width: 100%; }
.cena__small { grid-area: small; margin-top: 22px; font-size: 1rem; color: var(--ink-soft); }

/* ---------- вопросы ---------- */

.sec--faq { background: var(--beige); }
.faq { display: grid; gap: 12px; margin-top: 30px; }
.faq__item { border: 2px solid var(--line); border-radius: 22px; background: var(--card); transition: border-color .2s ease-out; }
.faq__item[open] { border-color: var(--navy); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 64px;
  padding: 12px 14px 12px 20px;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item p { padding: 0 20px 20px; }
.plus { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--beige-deep); transition: background-color .2s ease-out; }
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 3px;
  margin: -1.5px 0 0 -7px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .2s var(--ease);
}
.plus::after { transform: rotate(90deg); }
.faq__item[open] .plus { background: var(--mustard); }
.faq__item[open] .plus::after { transform: rotate(0deg); }

/* ---------- форма ---------- */

.sec--forma { margin-top: 18px; padding-bottom: 72px; background: var(--navy); color: var(--on-navy); }
.sec--forma::before {
  /* фестончатый край, как у навеса */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 18px;
  background: radial-gradient(circle at 50% 100%, var(--navy) 17.5px, transparent 18px) 0 0 / 36px 18px repeat-x;
}
.forma {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "fig"
    "card"
    "alt";
}
.forma__intro { grid-area: intro; }
.forma__lead { margin-top: 14px; font-size: 1.2rem; color: var(--on-navy-soft); }
.figure--forma { grid-area: fig; justify-self: end; width: 46%; max-width: 200px; margin: 22px 6% 18px 0; }
.blob--forma { background: var(--mustard); }
.bubble--forma { position: absolute; z-index: 2; right: 90%; top: 4%; white-space: nowrap; font-size: 1.125rem; }
.bubble--forma::after { right: -11px; top: 14px; transform: rotate(-135deg); }
.forma__card { grid-area: card; padding: 26px 20px 24px; color: var(--navy); border-color: transparent; }

.field { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; margin: 0 0 8px; padding: 0; font-weight: 800; font-size: 1.125rem; }
.field__input {
  display: block;
  width: 100%;
  min-height: 58px;
  padding: 12px 16px;
  border: 2px solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  color: var(--navy);
  font: 700 1.2rem/1.3 var(--font-body);
  transition-property: border-color, box-shadow, background-color;
  transition-duration: .15s;
  transition-timing-function: ease-out;
}
.field__input::placeholder { color: #676D81; font-weight: 600; opacity: 1; }
.field__input:hover { border-color: var(--navy); }
.field__input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(227, 165, 43, .6); }
.field__input[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
.field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .22); }
.field__hint { margin-top: 8px; font-size: 1.125rem; color: var(--ink-soft); }
.field__err {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  color: var(--err);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.35;
}
.field__err::before {
  content: "!";
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--err);
  color: #fff;
  font-size: .85rem;
}

.chips__row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 18px;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font-weight: 800;
  transition-property: background-color, color, border-color;
  transition-duration: .15s;
  pointer-events: none;
}
.chip:hover span { border-color: var(--navy); }
.chip input:checked + span { border-color: var(--navy); background: var(--navy); color: var(--on-navy); }
.chip input:checked + span::before {
  content: "";
  width: 10px;
  height: 6px;
  margin: -3px 2px 0 0;
  border-left: 3px solid var(--mustard);
  border-bottom: 3px solid var(--mustard);
  transform: rotate(-45deg);
}
.chip input:focus-visible + span { outline: 3px solid var(--navy); outline-offset: 3px; }

.check { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.check input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 1px 0 0;
  border: 2px solid var(--navy);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: background-color .15s ease-out;
}
.check input:checked { background: var(--navy); }
.check input:checked::after {
  content: "";
  width: 13px;
  height: 7px;
  margin-top: -3px;
  border-left: 3px solid var(--mustard);
  border-bottom: 3px solid var(--mustard);
  transform: rotate(-45deg);
}
.check input[aria-invalid="true"] { border-color: var(--err); background: var(--err-bg); }
.check label { font-size: 1.125rem; line-height: 1.45; cursor: pointer; }
.check a { font-weight: 800; text-decoration-color: var(--mustard-lo); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.lead__note { margin-top: 12px; text-align: center; font-size: 1.125rem; color: var(--ink-soft); }

.fail {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 18px;
  border: 2px solid var(--err);
  border-radius: 20px;
  background: var(--err-bg);
  font-weight: 700;
}
.fail a:not(.btn) { font-weight: 800; white-space: nowrap; }
.fail__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fail__btns .btn { flex: 1 1 140px; min-height: 52px; padding: 10px 16px; }

.done { display: grid; gap: 10px; justify-items: center; padding: 18px 4px; text-align: center; }
.done:focus { outline: none; }
.done__ic {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--mustard);
  box-shadow: 0 4px 0 var(--navy);
}
.done__ic .ic { width: 38px; height: 38px; }
.done__big { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.done a { font-weight: 800; white-space: nowrap; }

.forma__alt { grid-area: alt; display: grid; gap: 6px; margin-top: 26px; font-size: 1.15rem; }
.forma__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 800;
  color: var(--mustard);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.forma__phone { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- подвал ---------- */

.foot { padding: 34px 0 40px; background: var(--navy-deep); color: var(--on-navy-soft); font-size: 1rem; }
.foot__in { display: grid; gap: 4px; }
.foot__name { font-family: var(--font-head); font-weight: 600; color: var(--on-navy); }
.foot a { display: inline-flex; align-items: center; min-height: 48px; color: var(--on-navy); font-weight: 700; text-decoration-color: var(--mustard); text-underline-offset: 4px; }
.foot__note { margin-top: 6px; }

/* ---------- закреплённая полоса ---------- */

.bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 10px;
  padding: 10px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  border-top: 2px solid var(--line);
  background: rgba(251, 243, 228, .97);
  box-shadow: 0 -10px 28px -12px rgba(31, 42, 68, .35);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .28s var(--ease), visibility 0s linear .28s;
}
.bar.is-on { transform: none; visibility: visible; transition: transform .28s var(--ease), visibility 0s; }
.bar .btn { min-height: 52px; padding: 8px 12px; font-size: 1.05rem; box-shadow: 0 3px 0 var(--navy); }
.bar .btn--navy { box-shadow: 0 3px 0 #0B1122; }

/* ---------- появление при прокрутке (только если движение не отключено) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .sun { animation: sun-in .9s var(--ease) both; }
  .bubble--hero { animation: pop-in .45s .55s var(--ease) both; transform-origin: 0 40%; }
  @media (min-width: 900px) { .bubble--hero { transform-origin: 20% 100%; } }
  .hero__house { animation: hop-in .7s .35s var(--ease) both; }

  .motion [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s ease-out, transform .7s var(--ease); }
  .motion [data-reveal].is-in { opacity: 1; transform: none; }
  .motion .step:nth-child(2), .motion .fear:nth-child(2), .motion .who__card:nth-child(2) { transition-delay: .08s; }
  .motion .step:nth-child(3), .motion .fear:nth-child(3), .motion .who__card:nth-child(3) { transition-delay: .16s; }
  .motion .fear:nth-child(4) { transition-delay: .24s; }
  /* scale не больше 1.2: печать 190 px в повороте иначе шире экрана 320 px (гориз. прокрутка до появления) */
  .motion .stamp[data-reveal] { transform: rotate(-24deg) scale(1.2); transition: opacity .25s ease-out .15s, transform .45s cubic-bezier(.3, 1.5, .5, 1) .15s; }
  .motion .stamp[data-reveal].is-in { transform: rotate(-9deg); }
}

@keyframes sun-in { from { transform: scale(.82); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-in { from { transform: scale(.7) translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hop-in { 0% { transform: translateY(26px); opacity: 0; } 60% { transform: translateY(-5px); opacity: 1; } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .bar, .bar.is-on { transition: none; }
}

/* ---------- узкие телефоны ---------- */

@media (max-width: 359px) {
  .brand { font-size: .85rem; }
  .brand__mark { display: none; }
  /* 18 px и на 320 px: облачко шире (заходит на плечо, не на лицо), иначе «Здравствуйте!» рвётся посередине */
  .hero__art { --pw: 52%; }
  .bubble--hero { left: calc(var(--pw) * .7); padding: 10px 10px 10px 12px; }
  .hero__house { width: 28%; bottom: -16px; }
  .bar .btn { font-size: 1rem; }
}

/* ---------- шире телефона ---------- */

@media (min-width: 560px) {
  :root { --gutter: 24px; }
  .brand__sep { display: inline; }
  .brand__place { display: inline; }
  .hero__art { --pw: 300px; }
  .hero__lead { font-size: 1.2rem; }
  .bubble--hero { top: 26px; left: calc(var(--pw) * .78); right: auto; width: 230px; max-width: none; }
  .hero__house { width: 30%; max-width: 190px; bottom: 0; }
  .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
  .hero__call { width: auto; padding-left: 28px; padding-right: 28px; font-size: 1.2rem; white-space: nowrap; }
  .bignum { white-space: nowrap; }
  .hero__more { flex: 1 1 100%; justify-content: flex-start; gap: 8px 28px; }
  .figure--kto, .figure--game, .figure--cena { max-width: 270px; }
  .bubble--game { margin-right: -24px; }
  .fears { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 24px; }
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 80px 22px; }
  .cena__cta { justify-items: start; }
  .cena__cta .btn { width: auto; }
  .guarantee { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; justify-items: start; text-align: left; }
}

/* ---------- компьютер ---------- */

@media (min-width: 900px) {
  :root { --gutter: 40px; }
  body { font-size: 1.1875rem; }
  .sec { padding: 104px 0; }
  .h3 { font-size: 1.25rem; }

  .top { padding-top: 18px; }
  .brand { font-size: 1.05rem; }

  .hero { padding: 10px 0 96px; }
  .hero__grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); align-items: center; gap: 32px; }
  .hero__title { font-size: clamp(2.4rem, 1rem + 2.6vw, 2.9rem); }
  /* колонка 307–409 px: справа от головы облачку тесно, поэтому оно над головой, хвостик смотрит вниз на лицо */
  .hero__art { --pw: min(360px, 90%); order: 0; padding-top: 104px; }
  .bubble--hero { top: 0; left: auto; right: 0; width: 230px; }
  .bubble--hero::after { left: 34px; top: auto; bottom: -11px; transform: rotate(-45deg); }
  .hero__house { right: -12px; bottom: 0; width: 170px; max-width: none; }
  .hero__lead { font-size: 1.35rem; max-width: 34ch; }
  .facts li { font-size: 1.05rem; }
  .promise { display: inline-flex; }
  .hero__cta { margin-top: 30px; }

  .kto {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "title fig"
      "plates fig"
      "card card";
    align-items: end;
    column-gap: 40px;
  }
  .kto__title { padding-bottom: 18px; }
  .plates { margin: 0 0 40px; }
  .figure--kto { max-width: 320px; margin-bottom: 32px; }
  .kto__card { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 0; padding: 44px 44px 40px; }
  .kto__story { padding-right: 40px; }
  .honest { padding: 0 0 0 40px; border-top: 0; border-left: 2px dashed var(--line-strong); align-content: start; }
  .realphoto img { width: 168px; height: 168px; }

  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
  .step { grid-template-columns: 1fr; gap: 18px; }
  .step:not(:last-child)::before { left: 120px; right: -20px; top: 56px; bottom: auto; border-left: 0; border-top: 3px dashed var(--sand); }
  .step__pic { width: 110px; height: 110px; }
  .step__pic img { width: 96px; }
  .mini { width: 90px; height: 90px; }
  .mini__hero { width: 34px; height: 34px; margin-left: -17px; }

  .game { grid-template-columns: minmax(0, 1fr) 300px minmax(0, .55fr); grid-template-areas: "say fig ." "panel panel panel"; max-width: 980px; margin: 80px auto 0; column-gap: 24px; }
  .bubble--game { align-self: center; margin: 0; font-size: 1.15rem; }
  .figure--game { max-width: 300px; margin-bottom: 28px; justify-self: center; }
  .game__panel { padding: 36px 32px 32px; }

  .fears { margin-top: 48px; gap: 44px 40px; }
  .fear__q { font-size: 1.15rem; }

  .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 110px; }
  .who__img { width: 150px; top: -70px; }

  .kak { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 64px; align-items: start; }
  .prep { position: sticky; top: 24px; margin-top: 8px; }
  .tl__tea { width: 130px; }

  .cena {
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 48px;
  }
  .figure--cena { max-width: 320px; margin-bottom: 32px; }
  .cena__title { padding-bottom: 32px; }
  .ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "incl guar"
      "incl pay"
      "incl cta";
    column-gap: 48px;
    padding: 48px 44px 40px;
  }
  .incl { grid-area: incl; gap: 22px; align-content: start; }
  .ticket__cut { display: none; }
  .guarantee { grid-area: guar; padding-left: 48px; margin-left: -48px; border-left: 3px dashed var(--line-strong); }
  .pay { grid-area: pay; padding-left: 48px; margin-left: -48px; border-left: 3px dashed var(--line-strong); padding-top: 22px; margin-top: 0; }
  .cena__cta { grid-area: cta; padding-left: 48px; margin-left: -48px; border-left: 3px dashed var(--line-strong); padding-top: 22px; margin-top: 0; }
  .guarantee { grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; text-align: center; }

  .faq-wrap { max-width: 900px; }

  .sec--forma { padding-bottom: 110px; }
  .forma {
    grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
    grid-template-areas:
      "intro fig"
      "alt card";
    column-gap: 72px;
  }
  .forma__intro { align-self: end; padding-bottom: 56px; }
  .figure--forma { margin: 0 14% 24px 0; max-width: 210px; }
  .forma__card { padding: 36px 34px 30px; }
  .forma__alt { align-self: start; margin-top: 0; }

  .foot__in { grid-template-columns: auto auto; justify-content: space-between; column-gap: 40px; }

  /* на компьютере — тонкая полоса во всю ширину, а не «таблетка» поверх текста: под неё есть место (has-bar) */
  :root { --bar-h: 70px; }
  .bar { grid-template-columns: auto auto; justify-content: center; gap: 14px; padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .bar .btn { min-height: 48px; padding: 6px 28px; }
}

/* ---------- широкий экран: колонка гарантии ~520 px, печать снова слева от текста ---------- */

@media (min-width: 1180px) {
  .guarantee { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; justify-items: start; text-align: left; }
}

/* ---------- узкий компьютер 900–1179 px: «познакомимся» (≈9,8 em) не влезало в колонку и рвалось ---------- */

@media (min-width: 900px) and (max-width: 1179px) {
  .forma { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 48px; }
  .forma .h2 { font-size: min(2.5rem, calc((100vw - 600px) / 9.8)); }
}