/* Стили страниц /new. Собраны из страницы франшизы; новые компоненты — в конце. */
@font-face{font-family:Onest;src:url(fonts/onest-800.woff2) format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Onest;src:url(fonts/onest-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url(fonts/golos-text-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url(fonts/golos-text-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Golos Text";src:url(fonts/golos-text-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}

@layer tokens, base, layout, components, motion, responsive;

@layer tokens {
  :root{
    /* брендбук · полоса 10 */
    --city-blue:#1464E8; --deep-city:#10283C; --city-cyan:#19C6E6;
    --clean-white:#F8FBFC; --city-mist:#EAF4F8; --steel:#71818D;
    /* знак: на светлом — тёмный квадрат со светлым кольцом */
    --mark-bg:#10283C; --mark-fg:#F8FBFC;
    --st-free:#12A150; --st-cycle:#1464E8; --st-pickup:#C77700; --st-error:#C0392B;
    /* производные · дизайн-код §4.1 */
    --steel-ink:#5D6A74; --blue-press:#1155C5; --ink-free:#0E793C; --ink-pickup:#A36200;
    --ink-error:#C0392B;

    --font-display:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
    --font-text:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;

    --fs-display:clamp(30px,6.4vw,76px);
    --fs-h1:clamp(30px,4.6vw,54px);
    --fs-h2:clamp(25px,3.2vw,38px);
    --fs-h3:clamp(18px,1.6vw,22px);
    --fs-lead:clamp(17px,1.4vw,20px);
    --fs-body:16px; --fs-small:14px;

    --r-card:14px; --r-btn:99px; --r-chip:10px; --r-sheet:20px;
    --hdr-h:72px;   /* высота шапки: меню и прокрутка к якорям считают от неё */

    --wrap:1180px;
    --gutter:clamp(20px,5vw,40px);
    --section-y:clamp(56px,8vw,120px);

    --surface:#FFFFFF;
    --surface-2:var(--city-mist);
    --hairline:rgba(16,40,60,.10);
    --hairline-2:rgba(16,40,60,.16);
    --shadow:0 1px 2px rgba(16,40,60,.06),0 8px 24px rgba(16,40,60,.06);
    --shadow-lg:0 2px 6px rgba(16,40,60,.08),0 18px 48px rgba(16,40,60,.10);
    /* тень плавающей кнопки: она висит над страницей без подложки,
       поэтому отрыв показывает только тень и она заметно плотнее --shadow-lg */
    --shadow-float:0 2px 8px rgba(16,40,60,.16),0 14px 34px rgba(16,40,60,.26);
    --ease:cubic-bezier(.2,.6,.2,1);
  }
  /* контекст тёмного полотна · дизайн-код §4.1 */
  .on-deep{
    --blue-up:#7FA9F2; --free-up:#4DB87C; --pickup-up:#DBA759; --error-up:#D67E75;
    --hairline:rgba(248,251,252,.16);
    --hairline-2:rgba(248,251,252,.26);
    --surface-2:rgba(248,251,252,.07);
    /* знак инвертируется: светлый квадрат с тёмным кольцом, точка та же */
    --mark-bg:#F8FBFC; --mark-fg:#10283C;
    background:var(--deep-city); color:var(--clean-white);
  }
}

@layer base {
  *,*::before,*::after{box-sizing:border-box}
  /* Любой наш display перебивает браузерное [hidden]{display:none} — и элемент,
     скрытый атрибутом из JS, остаётся на экране. Барьер на весь документ. */
  [hidden]{display:none !important}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body{
    margin:0;background:var(--clean-white);color:var(--deep-city);
    font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;line-height:1.55;
    -webkit-font-smoothing:antialiased;overflow-x:clip;
  }
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;line-height:1.06;margin:0}
  h3,h4{font-weight:700;letter-spacing:-.02em;line-height:1.2}
  p{margin:0;text-wrap:pretty}
  a{color:inherit;text-decoration:none}
  img,svg{max-width:100%;display:block}
  button,input,select,textarea{font:inherit;color:inherit}
  :where(a,button,input,textarea,summary,[tabindex]):focus-visible{
    outline:2px solid var(--city-blue);outline-offset:2px;border-radius:4px;
  }
  .on-deep :where(a,button,input,textarea,summary):focus-visible{outline-color:var(--blue-up)}
  ::selection{background:var(--city-blue);color:#fff}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

@layer layout {
  .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
  .sec{padding-block:var(--section-y)}
  /* шапка липкая: без этого переход по ссылке меню прячет верх секции
     под ней — проверено, съедало 68 px */
  :where(section,main)[id]{scroll-margin-top:calc(var(--hdr-h) + 10px)}
  .sec--tight{padding-block:clamp(40px,5vw,72px)}
  .stack>*+*{margin-block-start:var(--gap,16px)}
  .grid{display:grid;gap:20px}
  .head{max-width:62ch;margin-block-end:clamp(28px,3.6vw,52px)}
  .head h2{font-size:var(--fs-h2);margin-block-end:14px}
  .head p{font-size:var(--fs-lead);color:var(--steel-ink)}
  .on-deep .head p{color:#C4D2DC}
}

@layer components {
  .eyebrow{
    font-family:var(--font-text);font-size:12.5px;font-weight:600;
    text-transform:uppercase;letter-spacing:.12em;color:var(--steel-ink);
    display:flex;align-items:center;gap:10px;margin-block-end:14px;
  }
  .on-deep .eyebrow{color:#9FB3C2}
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--city-blue);flex:0 0 auto}
  .on-deep .eyebrow::before{background:var(--city-cyan)}

  /* ——— знак и вордмарк · брендбук, полоса 02 ———
     Все размеры выведены из одной переменной --mark, пропорции сняты
     с эталона в брендбуке и не должны меняться поштучно:
       сторона знака            --mark
       радиус скругления        28% стороны   (в SVG rx=28 при viewBox 100)
       кольцо: внешний Ø        56.5% стороны, штрих 8.5% (осевая r=24)
       полудиск снизу           r=15.3, центр КОНЦЕНТРИЧЕН кольцу (50,50), хорда y=53
                                просвет до кольца 4.45% — одинаковый по всей дуге
       точка: Ø 10.5%,  центр   83.8% / 16.2% — в углу, кольца не касается
       отступ знак → вордмарк   34.7% стороны
       кегль вордмарка          59.4% стороны (x-height Onest = 31.3% стороны)
       трекинг вордмарка        −3%
     Менять только --mark. Ничего не позиционировать вручную. */
  .lockup{--mark:36px;display:inline-flex;align-items:center;gap:calc(var(--mark) * .347)}
  .mark{width:var(--mark);height:var(--mark);flex:0 0 auto;display:block}
  .wordmark{
    font-family:var(--font-display);font-weight:800;
    font-size:calc(var(--mark) * .594);
    letter-spacing:-.03em;line-height:1;white-space:nowrap;
  }
  /* локация — после вертикальной черты, в вордмарк не входит */
  .lockup .loc{
    font-size:calc(var(--mark) * .36);color:var(--steel-ink);
    display:flex;align-items:center;gap:calc(var(--mark) * .25);
  }
  .lockup .loc::before{content:"";width:1px;height:calc(var(--mark) * .47);background:var(--hairline-2)}
  /* локап внутри заголовка: кегль вордмарка приравнен к h2,
     сам знак получает свой размер из той же пропорции 59,4% — вручную ничего не двигаем */
  .h2--lockup{display:flex;flex-wrap:wrap;align-items:center;gap:.06em .3em}
  .lockup--h2{--mark:calc(var(--fs-h2) * 1.684)}

  /* ——— кнопки · §7.5 ——— */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--font-text);font-weight:600;font-size:16px;
    padding:15px 26px;min-height:52px;border-radius:var(--r-btn);
    border:1px solid transparent;cursor:pointer;text-align:center;
    transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
  }
  .btn--primary{background:var(--city-blue);color:#fff}
  .btn--primary:hover{background:var(--blue-press)}
  .btn--primary:active{transform:translateY(1px)}
  .btn--ghost{background:transparent;color:var(--deep-city);border-color:var(--hairline-2)}
  .btn--ghost:hover{border-color:var(--city-blue);color:var(--city-blue)}
  .on-deep .btn--ghost{color:var(--clean-white)}
  .on-deep .btn--ghost:hover{border-color:var(--blue-up);color:var(--blue-up)}
  .btn--wide{width:100%}
  .linkline{
    display:inline-flex;align-items:center;gap:7px;font-weight:500;
    color:var(--city-blue);border-bottom:1px solid transparent;transition:border-color .16s var(--ease);
  }
  .linkline:hover{border-bottom-color:currentColor}
  /* Ссылка внутри бегущего текста. .linkline для этого не годится: он
     inline-flex, а такой элемент не переносится по строкам — длинная ссылка
     в абзаце вылезла бы за колонку. Подчёркивание обязательно: в согласии
     и в юрблоке текст приглушённый, и одним цветом ссылку не отличить. */
  .textlink{color:var(--city-blue);text-decoration:underline;text-underline-offset:3px}
  .on-deep .textlink{color:var(--blue-up)}
  .on-deep .linkline{color:var(--blue-up)}

  /* ——— шапка ——— */
  header{
    position:sticky;top:0;z-index:60;background:rgba(248,251,252,.86);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-block-end:1px solid transparent;transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
  }
  header.is-stuck{border-block-end-color:var(--hairline);box-shadow:0 1px 0 rgba(16,40,60,.03)}
  .nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,20px);height:var(--hdr-h)}
  /* 1,7vw вместо 1,8: «Клиенты» шире «Острова» на странице-референсе,
     и на 900px строка меню вылезала из колонки на 4 px. На широких
     экранах разница в зазоре — полтора пикселя, её не видно. */
  .nav__links{display:none;gap:clamp(14px,1.7vw,26px);margin-inline-start:auto}
  .nav__links a{font-size:14.5px;color:var(--steel-ink);white-space:nowrap;transition:color .16s var(--ease)}
  .nav__links a:hover{color:var(--deep-city)}
  .nav__cta{display:none;margin-inline-start:12px;white-space:nowrap;padding:12px 18px;min-height:46px;font-size:15px}
  .burger{
    margin-inline-start:auto;width:48px;height:48px;display:grid;place-items:center;
    background:transparent;border:1px solid var(--hairline-2);border-radius:var(--r-btn);cursor:pointer;
  }
  .burger span{display:block;width:18px;height:2px;background:var(--deep-city);position:relative;transition:.2s var(--ease)}
  .burger span::before,.burger span::after{
    content:"";position:absolute;left:0;width:18px;height:2px;background:var(--deep-city);transition:.2s var(--ease);
  }
  .burger span::before{top:-6px}.burger span::after{top:6px}
  body.menu-open .burger span{background:transparent}
  body.menu-open .burger span::before{top:0;transform:rotate(45deg)}
  body.menu-open .burger span::after{top:0;transform:rotate(-45deg)}
  .menu{
    display:none;position:fixed;inset:var(--hdr-h) 0 0;z-index:55;background:var(--clean-white);
    padding:24px var(--gutter) calc(28px + env(safe-area-inset-bottom));
    flex-direction:column;gap:6px;overflow-y:auto;
  }
  body.menu-open .menu{display:flex}
  body.menu-open{overflow:hidden}
  .menu a{padding:15px 0;font-size:19px;font-weight:500;border-block-end:1px solid var(--hairline)}
  .menu .btn{margin-block-start:18px}

  /* ——— первый экран ——— */
  .hero{position:relative;overflow:hidden;isolation:isolate}
  .hero__bg{position:absolute;inset:0;z-index:-2}
  .hero__bg img{width:100%;height:100%;object-fit:cover}
  /* на телефоне текст лежит поперёк всего кадра — подложка сплошная */
  .hero__bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(16,40,60,.90) 0%,rgba(16,40,60,.80) 42%,rgba(16,40,60,.90) 78%,rgba(16,40,60,.95) 100%);
  }
  .hero__inner{padding-block:clamp(30px,7vw,92px) clamp(32px,6vw,84px)}
  .hero h1{font-size:clamp(32px,6.6vw,78px);max-width:24ch;margin-block:clamp(12px,2vw,18px) clamp(14px,2.2vw,20px);text-wrap:balance}
  .hero h1 em{font-style:normal;color:var(--city-cyan)}
  .head h2 em{font-style:normal;color:var(--city-blue)}
  .hero__lead{font-size:var(--fs-lead);color:#C4D2DC;max-width:56ch}
  .hero__cta{display:flex;flex-direction:column;gap:10px;margin-block-start:clamp(20px,3vw,30px)}
  .hero__note{font-size:var(--fs-small);color:#9FB3C2;margin-block-start:16px}
  /* хвост лида дублирует заметку ниже и секцию «Что берём на себя»;
     на узких экранах из-за него кнопка уходила под адресную строку */
  .lead-tail{display:none}
  @media (min-width:600px){ .lead-tail{display:inline} }

  .figs{
    display:grid;grid-template-columns:1fr;gap:1px;background:var(--hairline-2);
    border:1px solid var(--hairline-2);border-radius:var(--r-sheet);overflow:hidden;margin-block-start:34px;
  }
  .fig{background:rgba(16,40,60,.55);padding:22px 20px}
  .fig b{
    display:block;font-family:var(--font-display);font-weight:800;
    font-size:clamp(30px,4.4vw,44px);letter-spacing:-.035em;line-height:1;
    font-variant-numeric:tabular-nums;
  }
  .fig span{display:block;font-size:var(--fs-small);color:#A9BECD;margin-block-start:9px;line-height:1.4}
  /* на телефоне герой и так полтора экрана — оставляем две главные цифры */
  .fig--more{display:none}

  /* призыв стоит сразу под результатом: это пик готовности,
     а ближайшая форма — через семь секций */
  .out__cta{display:grid;gap:10px;border-top:1px solid var(--hairline);padding-top:20px}
  .out__cta p{font-size:13px;line-height:1.5;color:#A9BECD}

  /* ——— карточки ——— */
  .card{
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
    padding:26px 24px;
  }
  .on-deep .card{background:rgba(248,251,252,.05);border-color:var(--hairline)}
  .card h3{font-size:var(--fs-h3);margin-block:14px 10px}
  .card p{font-size:15px;color:var(--steel-ink);line-height:1.6}
  .on-deep .card p{color:#B8C8D4}
  .ico{
    width:44px;height:44px;border-radius:var(--r-chip);background:var(--surface-2);
    display:grid;place-items:center;color:var(--city-blue);
  }
  .on-deep .ico{color:var(--city-cyan)}
  .ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

  /* ——— калькулятор ——— */
  .calc{display:grid;gap:20px}
  /* светлая карточка внутри тёмной секции — цвет текста возвращаем явно */
  .calc__controls{
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-sheet);
    padding:clamp(22px,3vw,32px);color:var(--deep-city);
  }
  .ctrl+.ctrl{margin-block-start:26px}
  .ctrl__top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-block-end:12px}
  .ctrl__top label{font-weight:500;font-size:15px}
  /* Цвет зависит от САМОЙ поверхности, а не от секции: карточка калькулятора
     светлая внутри тёмной секции, панель проверки — тёмная внутри светлой. */
  .calc__controls .ctrl__val{color:var(--city-blue)}
  .fit__panel .ctrl__val{color:var(--blue-up)}
  .ctrl__val{
    font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;color:var(--city-blue);white-space:nowrap;
  }
  .ctrl__hint{font-size:13px;color:var(--steel-ink);margin-block-start:9px}
  .ctrl__lbl{font-weight:500;font-size:15px}
  .segs{display:grid;gap:8px}
  .seg{
    display:grid;gap:3px;text-align:left;cursor:pointer;font:inherit;
    padding:13px 15px;border-radius:var(--r-chip);
    background:#fff;border:1px solid var(--hairline-2);color:var(--deep-city);
    transition:border-color .16s var(--ease),background .16s var(--ease),color .16s var(--ease);
  }
  .seg b{font-weight:600;font-size:14.5px}
  .seg span{font-size:12.5px;color:var(--steel-ink)}
  .seg:hover{border-color:var(--city-blue)}
  .seg.is-on{background:var(--city-blue);border-color:var(--city-blue);color:#fff}
  .seg.is-on span{color:rgba(255,255,255,.94)}
  .out__grid{margin:0;display:grid;gap:22px}
  /* высота 44px — минимальная тап-цель; сама дорожка остаётся 6px */
  input[type=range]{
    -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;display:block;
  }
  input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--city-mist)}
  input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--city-mist)}
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--city-blue);
    border:3px solid #fff;box-shadow:0 1px 5px rgba(16,40,60,.28);margin-top:-10px;
  }
  input[type=range]::-moz-range-thumb{
    width:26px;height:26px;border-radius:50%;background:var(--city-blue);
    border:3px solid #fff;box-shadow:0 1px 5px rgba(16,40,60,.28);
  }
  /* Тёмный лист внутри светлой секции: все цвета внутри заданы светлыми
     по тёмному, поэтому фон и разделители объявляем здесь, а не наследуем
     от секции. Правило стоит ниже .card и перебивает его белый фон. */
  .calc__out{
    --blue-up:#7FA9F2; --hairline:rgba(248,251,252,.16);
    background:var(--deep-city);border-color:transparent;color:var(--clean-white);
    border-radius:var(--r-sheet);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:22px;
  }
  .calc__out .linkline{color:var(--blue-up)}
  .out__row{display:grid;gap:5px}
  .out__row dt{font-size:var(--fs-small);color:#A9BECD}
  .out__row dd{
    margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;
    font-variant-numeric:tabular-nums;line-height:1;
  }
  .out__main dd{font-size:clamp(38px,6vw,60px);color:var(--city-cyan)}
  .out__sub{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .out__sub dd{font-size:clamp(21px,2.6vw,27px)}
  .payback{border-top:1px solid var(--hairline);padding-top:20px}
  /* оговорка идёт второй строкой подписи, а не в скобках подряд:
     в одну строку «Окупаемость вложений» переставала читаться */
  .out__hint{display:block;font-size:12.5px;line-height:1.4;color:#93A9B9;margin-block-start:4px}
  .payback dd{font-size:clamp(26px,3.4vw,34px)}
  /* потолок пропускной способности островка: два барабана физически
     не сделают больше 1 152 стирок в месяц даже в режиме 24/7 */
  .capwarn{
    display:flex;gap:11px;align-items:flex-start;
    background:rgba(214,126,117,.14);border:1px solid rgba(214,126,117,.45);
    border-radius:var(--r-card);padding:13px 15px;
    font-size:14px;line-height:1.45;font-weight:500;color:#F0C4BF;
  }
  .capwarn svg{
    width:20px;height:20px;flex:0 0 auto;margin-block-start:1px;
    fill:none;stroke:var(--error-up,#D67E75);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  }
  .disclaimer{font-size:13px;line-height:1.55;color:#93A9B9}

  /* ——— таблица сценариев ——— */
  .tablewrap{overflow-x:auto;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--surface)}
  /* на телефоне таблица становится шестью карточками по пять строк —
     показываем осторожный, базовый и сильный сценарий, остальное по кнопке */
  .row--more{display:none}
  .tablewrap.is-open .row--more{display:block}
  .tablewrap__more{
    display:block;width:100%;min-height:44px;margin-block-start:6px;
    background:none;border:0;border-top:1px solid var(--hairline);
    font:inherit;font-size:14.5px;font-weight:500;color:var(--city-blue);cursor:pointer;
  }
  .tablewrap.is-open .tablewrap__more{display:none}
  table{border-collapse:collapse;width:100%;min-width:560px;font-variant-numeric:tabular-nums}
  th,td{padding:14px 18px;text-align:right;font-size:15px;border-block-start:1px solid var(--hairline);white-space:nowrap}
  th:first-child,td:first-child{text-align:left}
  thead th{
    border-block-start:0;font-family:var(--font-text);font-weight:600;font-size:13px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--steel-ink);
  }
  tbody tr.is-base{background:var(--city-mist)}
  tbody tr.is-base td{font-weight:600}
  /* подсветка строки под курсором: глазу легче держать строку от левого
     числа до окупаемости. Только там, где строка и правда строка, —
     ниже 900px она превращается в карточку, и подсвечивать нечего. */
  @media (hover:hover) and (min-width:900px){
    tbody tr{transition:background-color .14s var(--ease)}
    tbody tr:hover{background:var(--city-mist)}
    tbody tr.is-base:hover{background:#DCEDF5}
  }
  /* До 900px таблица из пяти колонок не читается — разворачиваем каждую строку
     в карточку. Разметка остаётся таблицей: это важно для скринридеров и поиска. */
  @media (max-width:899px){
    .tablewrap{border:0;background:transparent;overflow:visible}
    table{min-width:0;width:100%}
    thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
    tbody tr{
      display:block;background:var(--surface);border:1px solid var(--hairline);
      border-radius:var(--r-card);padding:4px 16px 10px;margin-block-end:10px;
    }
    tbody tr.is-base{border-color:var(--city-blue);background:var(--city-mist)}
    tbody td{
      display:flex;justify-content:space-between;align-items:baseline;gap:16px;
      text-align:right;border:0;padding:10px 0;font-size:14.5px;white-space:normal;
    }
    tbody td::before{
      content:attr(data-label);color:var(--steel-ink);text-align:left;
      font-weight:400;white-space:nowrap;
    }
    tbody td+td{border-block-start:1px solid var(--hairline)}
    tbody td:first-child{
      font-family:var(--font-display);font-weight:800;font-size:23px;
      letter-spacing:-.03em;justify-content:flex-start;gap:10px;padding-block:12px 10px;
    }
    /* Заголовок карточки — число стирок. Без подписи оно читалось бы как
       безымянное «400», поэтому подпись остаётся, но своим кеглем,
       а не кеглем крупного числа. */
    tbody td:first-child::before{
      font-family:var(--font-text);font-weight:400;font-size:14.5px;
      letter-spacing:0;align-self:center;
    }
    tbody td:first-child{flex-wrap:wrap}
    .perday{flex-basis:100%;margin-inline-start:0;margin-block-start:2px}
    tbody tr.is-base td{font-weight:600}
  }

  /* Пояснение «сколько это в день»: месяц считаем за 30 дней, числа округлены.
     Своим кеглем и цветом, иначе спорит с главным числом строки. */
  .perday{
    font-family:var(--font-text);font-weight:400;font-size:13.5px;
    letter-spacing:0;color:var(--steel);margin-inline-start:8px;white-space:nowrap;
  }

  .tag{
    display:inline-block;padding:3px 9px;border-radius:var(--r-chip);background:var(--city-blue);
    color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.04em;margin-inline-start:8px;vertical-align:1px;
  }

  /* ——— секция-«лист»: отступает от краёв, читается как карточка ———
     Приём drinkit: крупный радиус и воздух до края окна. Нужен один-два раза
     на страницу — на всех секциях он превращается в обои. */
  .sec--sheet{
    /* поле одинаковое со всех четырёх сторон: иначе скруглённый угол листа
       упирается в прямой угол полноширинной секции — стык выглядит браком */
    margin:clamp(10px,1.6vw,22px);border-radius:clamp(22px,3vw,36px);
    background:var(--city-mist);
  }
  /* Цифры первого экрана лежат прямо на кадре: ни внешней рамки, ни плашек.
     Читаются они за счёт нижнего градиента подложки — у него нет границы,
     на которой глаз спотыкается. */
  .figs--top{margin-block:clamp(24px,3.2vw,36px) 0}
  .hero .figs{border:0;border-radius:0;background:transparent;gap:0}
  .hero .fig{background:transparent;padding:0}
  /* строки в ячейках длиннее одних цифр, поэтому шкала начинается ниже
     обычной: иначе на планшете «0 ₽ на запуск» ломается на три строки */
  .hero .fig b{font-size:clamp(24px,3.2vw,42px)}
  /* единица при сумме — мельче числа, но той же строкой */
  .hero .fig b small{font-size:.56em;font-weight:inherit;letter-spacing:-.02em}
  /* подписи лежат на кадре без плашки: тон светлее обычного и кегль крупнее */
  .hero .fig span{color:#CEDCE6;font-size:16px}
  .hero .fig+.fig{
    margin-block-start:20px;padding-block-start:20px;
    border-block-start:1px solid rgba(248,251,252,.14);
  }

  /* ——— IT-решение: список слева, макет телефона справа ———
     Экран приложения свёрстан, а не картинка: он остаётся резким на любом
     экране и весит ноль. Внутренний слой нарисован в реальных 375 px
     и сжимается трансформом — так пропорции совпадают с приложением. */
  .it{display:grid;gap:clamp(30px,4vw,52px);align-items:start}
  /* ——— слайдер тезисов ———
     Без JS все девять пунктов идут подряд обычным списком; скрипт снимает
     hidden с управления, добавляет .is-carousel и показывает по одному.
     Слайды лежат в одной ячейке сетки, поэтому высота блока равна самому
     длинному пункту и при перелистывании не скачет. */
  .slides__track{list-style:none;padding:0;margin:0;display:grid;gap:0}
  .slide{
    padding-block:16px;border-block-start:1px solid var(--hairline);
    color:var(--steel-ink);
  }
  .slide:first-child{border-block-start:0;padding-block-start:0}
  .slide b{display:block;font-size:16px;color:var(--deep-city);margin-block-end:5px}
  .slide p{font-size:15px;line-height:1.55}

  .slides.is-carousel .slides__track > *{grid-area:1 / 1}
  .slides.is-carousel .slide{
    border-block-start:0;padding-block:0;
    opacity:0;visibility:hidden;
  }
  .slides.is-carousel .slide.is-on{opacity:1;visibility:visible}
  .slides.is-carousel .slide b{
    font-family:var(--font-display);letter-spacing:-.02em;line-height:1.15;
    font-size:clamp(22px,2.4vw,30px);margin-block-end:14px;
  }
  .slides.is-carousel .slide p{font-size:clamp(16.5px,1.4vw,20px);line-height:1.5;max-width:44ch}

  /* полоса и стрелки идут под текстом столбиком: в одну строку стрелки
     уезжали к правому краю колонки и читались как чужой элемент */
  .slides__ui{
    display:grid;justify-items:start;gap:16px;
    margin-block-start:clamp(24px,3vw,34px);
  }
  .slides__bar{display:flex;gap:5px;width:100%;max-width:320px}
  .slides__bar i{
    flex:1;height:3px;border-radius:99px;background:var(--hairline-2);
    overflow:hidden;position:relative;
  }
  .slides__bar i::after{
    content:"";position:absolute;inset:0;width:0;
    background:var(--city-blue);border-radius:inherit;
  }
  .slides__bar i.is-done::after{width:100%}
  .slides__bar i.is-now::after{animation:slide-fill var(--slide-time,4s) linear forwards}
  /* курсор над блоком — заливка замирает там, где была, и оттуда же идёт
     дальше: CSS-анимация при play-state:paused сохраняет позицию */
  .slides.is-held .slides__bar i.is-now::after{animation-play-state:paused}
  @keyframes slide-fill{from{width:0}to{width:100%}}

  .slides__nav{display:flex;gap:8px;flex:0 0 auto}
  .slides__arrow{
    width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
    border:1px solid var(--hairline-2);border-radius:var(--r-btn);
    background:transparent;color:var(--deep-city);
    transition:border-color .16s var(--ease),color .16s var(--ease);
  }
  .slides__arrow:hover{border-color:var(--city-blue);color:var(--city-blue)}
  .slides__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

  /* Ширина экрана числом без единиц: её же делим на 375 для scale(),
     а calc(272px / 375) дал бы длину — трансформ просто не применится.
     Переменная живёт на .phone, а не на корпусе: подпись под корпусом —
     его сосед, и оттуда её не видно (колонка распухала до ширины подписи). */
  .it__shot{margin:0;justify-self:center;max-width:100%}
  .it__shot img{width:100%;height:auto;display:block}

  /* строка «заголовок слева, знак справа» — у «Кто мы» и «Технологий» */
  .headrow{display:grid;gap:clamp(18px,2.6vw,28px);margin-block-end:clamp(28px,3.6vw,52px)}
  .headrow .head{margin-block-end:0}
  .headrow__mark{--mark:clamp(64px,8vw,116px);justify-self:end}
  /* в «Технологиях» знак на 15% меньше, чем в «Кто мы» */
  #it .headrow__mark{--mark:clamp(54px,6.8vw,99px)}

  /* полоса регионов набора */
  .regions{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;
    margin-block-start:18px;font-size:var(--fs-small);
  }
  .regions__lbl{color:#9FB3C2;margin-inline-end:4px}
  .regions__city{
    padding:7px 13px;border-radius:99px;font-weight:500;color:var(--clean-white);
    background:rgba(248,251,252,.08);border:1px solid rgba(248,251,252,.18);
  }

  /* абзац про приложение в панели островка */
  .island__lead--app{font-size:15.5px;margin-block-end:22px}
  /* ссылка на страницу острова под описанием: главная ведёт на форматы */
  .island__more{margin:0;font-size:15.5px}

  /* ——— запуск: тёмная полоса во всю ширину ———
     До 28 сентября заголовок и лента шагов лежали в скруглённой тёмной
     карточке внутри контейнера. По решению заказчика фон тянется на всю
     ширину экрана и без скругления, как у остальных тёмных секций.
     Карточка осталась обёрткой: на ней .on-deep и появление. */
  /* поля — общие для секций (.sec): 28 сентября полоса запуска
     приведена к формату остальных секций, свой отступ снят */
  #launch{background:var(--deep-city)}
  .steps-card{border-radius:0;padding:0}
  /* соседняя тёмная секция слилась бы с полосой запуска в одно полотно */
  .on-deep + #launch, #launch + .on-deep{border-block-start:1px solid rgba(248,251,252,.12)}
  .steps-card .head p{color:#C4D2DC}
  /* оговорка под лентой шагов: пять недель — это островок, зал считается
     иначе. Отделена линией, чтобы не читалась как шестой шаг. */
  .steps__note{
    display:flex;gap:11px;align-items:flex-start;max-width:70ch;
    margin-block-start:clamp(20px,2.6vw,30px);
    padding-block-start:clamp(18px,2.4vw,24px);
    border-block-start:1px solid rgba(248,251,252,.14);
    font-size:14.5px;line-height:1.55;color:#C4D2DC;
  }
  .steps__note svg{
    width:19px;height:19px;flex:0 0 auto;margin-block-start:2px;
    fill:none;stroke:var(--city-cyan);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  }

  /* ——— вкладки моделей дохода ———
     Без JS панели идут подряд и читаются как три подраздела: полосу
     переключателей показывает скрипт, он же прячет лишние панели. */
  .tabs{margin-block-start:clamp(22px,3vw,32px)}
  /* до 600 px переключатель стоит столбиком: три названия в строку
     не помещаются даже на 375 px */
  .tabs__bar{
    position:relative;display:flex;flex-direction:column;gap:6px;padding:6px;
    margin-block-end:clamp(20px,2.6vw,28px);
    background:var(--surface);border:1px solid var(--hairline);
    border-radius:var(--r-sheet);
  }
  /* бегунок под активной вкладкой — он же синяя заливка кнопки */
  .tabs__thumb{
    position:absolute;left:0;top:0;z-index:0;border-radius:99px;
    background:var(--city-blue);pointer-events:none;
  }
  .tabs__thumb.is-ready{
    transition:transform .34s var(--ease),width .34s var(--ease),height .34s var(--ease);
  }
  .tab{
    position:relative;z-index:1;flex:1 1 auto;cursor:pointer;
    font:inherit;font-size:15px;font-weight:600;color:var(--steel-ink);
    padding:13px 16px;min-height:48px;
    border:0;border-radius:var(--r-btn);background:transparent;
    transition:color .2s var(--ease);
  }
  .tab:hover{color:var(--deep-city)}
  .tab.is-on{color:#fff}
  .tab.is-on:hover{color:#fff}

  /* панель въезжает с той стороны, куда ушёл выбор */
  @keyframes panel-in-right{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}
  @keyframes panel-in-left{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
  .panel.is-from-right,.slide.is-from-right{animation:panel-in-right .3s var(--ease) both}
  .panel.is-from-left,.slide.is-from-left{animation:panel-in-left .3s var(--ease) both}
  .panel{display:grid;gap:clamp(18px,2.4vw,26px)}
  /* разделитель нужен только версии без JS, где панели идут подряд.
     С вкладками соседство в DOM сохраняется, и линия вылезала над второй
     и третьей панелью, хотя предыдущая скрыта */
  .tabs:not(.is-tabbed) .panel+.panel{
    margin-block-start:clamp(26px,3.4vw,40px);padding-block-start:clamp(24px,3vw,34px);
    border-block-start:1px solid var(--hairline);
  }
  .panel__head h3{font-size:var(--fs-h3);margin-block-end:10px}
  /* при работающих вкладках название панели повторяет активную вкладку —
     оставляем его только скринридеру и версии без JS */
  .is-tabbed .panel__head h3{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;
  }
  /* заголовок-локап второй панели не повторяет название вкладки —
     его оставляем на месте */
  .is-tabbed .panel__head h3.h2--lockup{
    position:static;width:auto;height:auto;overflow:visible;
    clip-path:none;white-space:normal;margin-block-end:12px;
  }
  .panel__lead{font-size:var(--fs-lead);line-height:1.5;max-width:66ch}
  .panel__tag{
    margin-block-start:14px;font-size:13px;font-weight:500;color:var(--city-blue);
  }
  /* ——— «Паушальный взнос — 0 рублей» ———
     Плашка на подложке в каждой вкладке: это первое возражение
     франшизного покупателя, и снимать его надо до цифр расчёта.
     Набор дисплейный, как у сумм; сумма синим — на mist это 4,68,
     выше порога AA для крупного начертания. */
  .zerofee{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
    margin-block-start:clamp(20px,2.6vw,28px);
    background:var(--city-mist);border-radius:var(--r-sheet);
    padding:clamp(18px,2.4vw,26px) clamp(20px,2.8vw,30px);
    font-family:var(--font-display);font-weight:800;
    letter-spacing:-.03em;line-height:1.05;
    font-size:clamp(21px,2.7vw,33px);color:var(--deep-city);
  }
  .zerofee b{font-weight:inherit;color:var(--city-blue);white-space:nowrap}
  /* условие акции — текстовым начертанием и мельче: это оговорка к сумме,
     а не часть оффера. На mist steel-ink даёт 4,97 — выше порога AA. */
  .zerofee__cond{
    font-family:var(--font-text);font-weight:600;font-size:15.5px;
    letter-spacing:0;line-height:1.4;color:var(--steel-ink);
  }
  /* подзаголовок внутри панели: второй расчёт под первым */
  .panel__sub{margin-block-start:clamp(26px,3.4vw,40px)}
  .panel__sub h4{font-size:var(--fs-h3);margin-block-end:10px}
  .panel__sub p{font-size:15.5px;line-height:1.6;color:var(--steel-ink);max-width:66ch}
  /* знак в заголовке панели считается от кегля h3, а не h2 */
  .lockup--h3{--mark:calc(var(--fs-h3) * 1.684)}

  /* ——— разделение ответственности ——— */
  /* колонки тянутся до общей высоты: это две карточки с фоном, и разная
     высота читается как брак, а не как «столько и содержимого» */
  .split{display:grid;gap:20px}
  .split__col{border-radius:var(--r-sheet);padding:clamp(24px,3vw,32px)}
  .split__col--us{background:var(--deep-city);color:var(--clean-white)}
  .split__col--you{background:var(--surface);border:1px solid var(--hairline)}
  .split__col h3{font-size:var(--fs-h3);margin-block-end:6px}
  .split__col .sub{font-size:var(--fs-small);color:var(--steel-ink);margin-block-end:20px}
  .split__col--us .sub{color:#9FB3C2}
  .ticks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
  /* Пункт — обычный блок текста, галочка стоит в отступе слева. Раньше пункт
     был flex с gap 12px, и любой тег внутри текста (подсветка, <b>, ссылка)
     становился отдельным flex-элементом: перед «;» в «…под остров; с проходом»
     вставал зазор в 12 px. tools/check-page.js, проверка ticks. */
  .ticks li{position:relative;padding-inline-start:32px;font-size:15px;line-height:1.5}
  .ticks svg{position:absolute;inset-inline-start:0;top:0;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--ink-free);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .split__col--us .ticks svg{stroke:var(--free-up,#4DB87C)}
  .split__col--you .ticks svg{stroke:var(--ink-free)}

  /* ——— шаги запуска ——— */
  .steps{list-style:none;padding:0;margin:0;display:grid;gap:0;counter-reset:s}
  /* линия-змейка живёт только в двухколоночной раскладке; в колонке
     пустой <svg> занял бы в потоке свои дефолтные 300×150 */
  .steps__line{display:none}
  .step{position:relative;padding:0 0 30px 46px;counter-increment:s}
  .step::before{
    content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;
    font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:-.04em;
    font-variant-numeric:tabular-nums;color:var(--city-blue);
    width:28px;height:28px;border-radius:50%;border:1.5px solid var(--city-blue);
    display:grid;place-items:center;background:var(--clean-white);z-index:1;
  }
  /* Последний шаг зелёный — это финиш: «запуск и первые клиенты».
     Кружок светлый, поэтому берём тёмный зелёный --ink-free (5,29
     на clean-white), а не --free-up: тот рассчитан на светлый текст
     по тёмному и даёт здесь 2,39. Привязка к :last-child, а не
     к пятому: добавите шаг — зелёным станет он. */
  .steps .step:last-child::before{color:var(--ink-free);border-color:var(--ink-free)}
  .step::after{content:"";position:absolute;left:13.5px;top:26px;bottom:0;width:1px;background:var(--hairline-2)}
  .step:last-child{padding-block-end:0}
  .step:last-child::after{display:none}
  .step h3{font-size:17px;margin-block-end:6px}
  .step p{font-size:15px;color:var(--steel-ink);line-height:1.55}
  .on-deep .step p{color:#C4D2DC}
  .on-deep .step .when{color:#BCCDD9}
  .step .when{
    display:inline-block;margin-block-start:9px;font-size:13px;font-weight:600;
    padding:4px 10px;border-radius:var(--r-chip);background:var(--surface-2);color:var(--steel-ink);
  }

  /* ——— галерея ——— */
  /* full-bleed без отрицательных margin — не может переполнить вьюпорт */
  .gal{
    display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-inline:var(--gutter);
    scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .gal::-webkit-scrollbar{display:none}
  /* внутри вкладки галерея лежит в контентной колонке: внешний гуттер
     ей уже задан .wrap, свой добавлять не нужно */
  .panel .gal{padding-inline:0}
  .gal figure{margin:0;scroll-snap-align:center;border-radius:var(--r-card);overflow:hidden;background:var(--city-mist);position:relative}
  .gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
  .gal figcaption{
    position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;font-size:13px;color:#fff;
    background:linear-gradient(180deg,transparent,rgba(16,40,60,.86));
  }
  /* стрелки галереи: без них часть посетителей увидит три кадра из шести */
  .galwrap{position:relative}
  .galnav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    width:44px;height:44px;border-radius:50%;display:none;place-items:center;cursor:pointer;
    background:rgba(248,251,252,.94);border:1px solid var(--hairline-2);color:var(--deep-city);
    box-shadow:var(--shadow);transition:background-color .18s var(--ease),transform .18s var(--ease);
  }
  .galnav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .galnav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
  .galnav[disabled]{opacity:.35;pointer-events:none}
  .galnav--prev{inset-inline-start:max(8px,calc((100% - var(--wrap))/2 - 22px))}
  .galnav--next{inset-inline-end:max(8px,calc((100% - var(--wrap))/2 - 22px))}
  .gal:focus-visible{outline:2px solid var(--city-blue);outline-offset:3px}

  /* Ловушка для ботов. Не display:none и не hidden: часть ботов такие
     поля игнорирует. Уводим за край экрана — для человека невидимо,
     для скринридера закрыто через aria-hidden на обёртке. */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* необязательные поля формы свёрнуты */
  .form__more{border-top:1px solid var(--hairline);padding-block-start:14px}
  .form__more summary{
    cursor:pointer;font-size:14.5px;font-weight:500;color:var(--city-blue);
    list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  }
  .form__more summary::-webkit-details-marker{display:none}
  .form__more summary::before{
    content:"";width:9px;height:9px;flex:0 0 auto;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);margin-block-start:-4px;transition:transform .2s var(--ease);
  }
  .form__more[open] summary::before{transform:rotate(-135deg);margin-block-start:2px}
  .form__more-in{display:grid;gap:16px;padding-block-start:14px}

  /* ——— остров: фото на фоне под приглушающим фильтром, текст — в панели.
     Фильтр сам по себе читаемость не гарантирует: где кабинка светлая,
     белый текст пропал бы. Панель — гарантия, фильтр — настроение. */
  .island{position:relative;overflow:hidden;isolation:isolate}
  .island__bg{position:absolute;inset:0;z-index:-2}
  .island__bg img{width:100%;height:100%;object-fit:cover;object-position:56% 50%}
  /* на телефоне текст идёт поперёк всего кадра — подложка сплошная */
  .island__bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(16,40,60,.88),rgba(16,40,60,.82));
  }
  /* полотно с фото не нуждается в общем вертикальном поле секции:
     оно добавляло к блоку 185 px пустого кадра сверху и снизу */
  #island{padding-block:clamp(44px,6.1vw,72px)}
  .island__head{margin-block-end:clamp(18px,2.4vw,26px)}
  .island__head h2{font-size:var(--fs-h2);margin-block-end:0}
  .island__lead{font-size:var(--fs-lead);color:#C4D2DC;margin-block-end:20px}
  .island__spec{gap:11px;padding-block-start:18px;border-block-start:1px solid rgba(248,251,252,.14)}
  .island__col .island__lead:last-child{margin-block-end:0}
  .island__spec svg{stroke:var(--city-cyan)}
  .island__note{font-size:13px;line-height:1.5;color:#93A9B9;margin-block-start:16px}

  /* две цифры формата: сколько стоит запуск и за сколько он возвращается.
     Стоят в углу блока и не спорят с заголовком — это справка, а не оффер */
  .keyfigs{display:flex;flex-wrap:wrap;row-gap:14px;margin:0}
  .keyfigs>div{display:grid;gap:6px;align-content:start}
  .keyfigs>div+div{
    margin-inline-start:clamp(20px,2.8vw,36px);padding-inline-start:clamp(20px,2.8vw,36px);
    border-inline-start:1px solid var(--hairline-2);
  }
  .keyfigs dt{font-size:var(--fs-small);color:var(--steel-ink);line-height:1.3}
  .keyfigs dd{
    margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;line-height:1;
    font-size:clamp(26px,3vw,36px);color:var(--deep-city);
  }
  .on-deep .keyfigs dt{color:#A9BECD}
  .on-deep .keyfigs dd{color:var(--clean-white)}
  .island__figs{margin-block-start:26px}
  #full .keyfigs{margin-block-start:clamp(24px,3vw,32px)}

  .gal__note{
    font-size:13px;color:var(--steel-ink);line-height:1.5;
    margin-block:16px clamp(26px,3.4vw,40px);
  }

  /* ——— лист расчёта (формат 7 млн) ———
     Тёмная поверхность внутри светлой секции: цвета задаём от поверхности,
     а не от секции — иначе текст наследует тёмный по светлому. */
  .calcsheet{
    --blue-up:#7FA9F2;
    background:var(--deep-city);color:var(--clean-white);
    border-radius:var(--r-sheet);padding:clamp(24px,3.4vw,40px);
    display:grid;gap:clamp(22px,2.6vw,30px);justify-items:start;
  }
  .calcsheet__head{display:grid;gap:8px}
  .calcsheet__head h3{font-size:var(--fs-h3);color:var(--clean-white)}
  .calcsheet__head p{font-size:14.5px;color:#A9BECD;line-height:1.55;max-width:52ch}

  /* лесенка: каждая строка — один шаг расчёта */
  .ladder{list-style:none;margin:0;padding:0;display:grid;width:100%;counter-reset:none}
  .ladder li{
    display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;
    gap:4px 16px;padding-block:15px;border-block-start:1px solid rgba(248,251,252,.14);
  }
  /* подпись и число на одной строке: иначе девять строк на телефоне становятся восемнадцатью */
  .ladder li:not(.is-input) .ladder__lbl{flex:1 1 0;min-width:0}
  .ladder li:not(.is-input) .ladder__val{flex:0 0 auto}
  /* итог набран крупно: на узком экране он не оставляет подписи места,
     поэтому до 480px строка складывается в две */
  .ladder li.is-total .ladder__lbl{flex:1 1 100%}
  .ladder li:first-child{border-block-start:0;padding-block-start:0}
  .ladder__lbl{font-size:15px;line-height:1.45;color:#C4D2DC;flex:1 1 15rem}
  .ladder__lbl b{font-weight:600;color:var(--clean-white)}
  .ladder__val{
    font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
    font-variant-numeric:tabular-nums;white-space:nowrap;
    font-size:clamp(19px,2.2vw,24px);color:var(--clean-white);
  }
  /* прайс сети — четыре строки перед расчётом */
  .price{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:10px}
  .price li{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px 16px;
    background:rgba(248,251,252,.06);border-radius:var(--r-chip);padding:13px 15px;
  }
  .price li>span{font-size:14.5px;line-height:1.4;color:#C4D2DC}
  .price b{
    font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;font-size:17px;color:var(--clean-white);white-space:nowrap;
  }
  .price .tag{background:var(--city-cyan);color:var(--deep-city);vertical-align:2px}

  /* выбор сценария · тот же .seg, но на тёмной поверхности:
     цвета задаём от поверхности, а не от секции */
  .modes{width:100%;display:grid;gap:12px}
  .modes__lbl{font-size:var(--fs-small);color:#A9BECD}
  .calcsheet .seg{
    background:rgba(248,251,252,.06);border-color:rgba(248,251,252,.18);
    color:var(--clean-white);
  }
  .calcsheet .seg span{color:#A9BECD}
  .calcsheet .seg:hover{border-color:var(--blue-up)}
  .calcsheet .seg.is-on{background:var(--city-blue);border-color:var(--city-blue);color:#fff}
  .calcsheet .seg.is-on span{color:rgba(255,255,255,.94)}

  /* строка с ползунком: ползунок и подсказка занимают всю ширину строки */
  .ladder .is-input{padding-block-end:8px}
  .ladder .is-input input[type=range]{flex:1 0 100%;margin-block-start:2px}
  .ladder .is-input input[type=range]::-webkit-slider-runnable-track{background:rgba(248,251,252,.18)}
  .ladder .is-input input[type=range]::-moz-range-track{background:rgba(248,251,252,.18)}
  .ladder .is-input input[type=range]::-webkit-slider-thumb{border-color:var(--deep-city)}
  .ladder .is-input input[type=range]::-moz-range-thumb{border-color:var(--deep-city)}
  /* Подпись обязана занять всю строку, иначе она встаёт справа от числа.
     max-width:52ch этому мешал: базис 100% упирался в предел и подпись
     умещалась рядом с цифрой. Полная ширина берётся через min-width,
     а читаемая длина строки — отступом справа при border-box. */
  .ladder__hint{
    flex:1 0 100%;min-width:100%;box-sizing:border-box;
    padding-inline-end:max(0px,calc(100% - 52ch));
    font-size:13px;line-height:1.5;color:#93A9B9;
  }
  .ladder .is-total{
    border-block-start:2px solid var(--city-cyan);
    margin-block-start:8px;padding-block-start:20px;align-items:baseline;
  }
  .ladder .is-total .ladder__lbl{color:var(--clean-white);font-weight:600;font-size:16px}
  .ladder .is-total .ladder__val{font-size:clamp(30px,4.6vw,46px);color:var(--city-cyan)}

  /* три итога: год · вложения · окупаемость */
  .sums{display:grid;gap:12px;width:100%;margin:0}
  .sums>div{
    background:rgba(248,251,252,.06);border-radius:var(--r-card);
    padding:16px 18px;display:grid;gap:6px;
  }
  .sums dt{font-size:var(--fs-small);color:#A9BECD}
  .sums dd{
    margin:0;font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;line-height:1;
    font-size:clamp(21px,2.6vw,28px);color:var(--clean-white);
  }
  .sums>div:last-child dd{color:var(--city-cyan)}

  /* пояснения к расчёту */
  .checks{list-style:none;margin:0;padding:0;display:grid;gap:11px;width:100%}
  .checks li{
    position:relative;padding-inline-start:20px;
    font-size:14.5px;line-height:1.55;color:#B8C8D4;max-width:64ch;
  }
  .checks li::before{
    content:"";position:absolute;inset-block-start:.58em;inset-inline-start:0;
    width:7px;height:7px;border-radius:50%;background:var(--city-cyan);
  }
  .calcsheet .disclaimer{max-width:64ch}

  /* ——— группа компаний ——— */
  .group{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-block-start:8px}
  .group__tile{
    background:#fff;border-radius:var(--r-card);min-height:96px;
    display:grid;place-items:center;padding:18px 16px;gap:10px;text-align:center;
  }
  .group__tile img{height:var(--h,26px);width:auto;max-width:100%;object-fit:contain}
  .group__tile span{font-size:12.5px;line-height:1.4;color:var(--steel-ink)}
  /* Плитка белая внутри тёмной секции: знак и вордмарк задаём от плитки.
     Иначе .on-deep вывернет квадрат в светлый по белому, а .group__tile span
     перебьёт кегль вордмарка своими 12,5px. */
  .group__tile .lockup{--mark-bg:#10283C;--mark-fg:#F8FBFC}
  .group__tile .wordmark{
    font-family:var(--font-display);font-weight:800;
    font-size:calc(var(--mark) * .594);letter-spacing:-.03em;line-height:1;
    color:var(--deep-city);
  }
  /* при нечётном числе плиток последняя занимает строку целиком */
  .group__tile:last-child:nth-child(odd){grid-column:1 / -1}

  .rating{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--surface-2);border-radius:var(--r-card);padding:18px 20px;
  }
  .rating b{
    font-family:var(--font-display);font-weight:800;font-size:32px;letter-spacing:-.03em;
    font-variant-numeric:tabular-nums;line-height:1;
  }
  .rating .stars{color:#F5A623;font-size:15px;letter-spacing:.09em}
  .rating .meta{font-size:13px;color:#A9BECD;display:grid;gap:3px}

  /* реквизиты живут в светлом футере — цвета берём из светлого контекста,
     мелкий юридический текст обязан проходить AA (§10) */
  .req{font-size:13.5px;line-height:1.6;color:var(--steel-ink);display:grid;gap:7px}
  .req b{color:var(--deep-city);font-weight:600;font-family:var(--font-text);font-size:14px}
  .req dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}
  .req dt{color:var(--steel-ink);opacity:.85}
  .req dd{margin:0;color:var(--deep-city);font-variant-numeric:tabular-nums}
  .req a{border-bottom:1px solid var(--hairline-2)}
  .req a:hover{color:var(--city-blue);border-bottom-color:currentColor}

  /* ——— проверка помещения ——— */
  .fit__panel{
    background:var(--deep-city);border-radius:var(--r-sheet);
    padding:clamp(22px,3vw,32px);display:grid;gap:24px;
  }
  .fit__out{display:grid;gap:14px}
  .fit__nums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fit__num{background:rgba(248,251,252,.07);border-radius:var(--r-card);padding:14px 16px}
  .fit__num b{
    display:block;font-family:var(--font-display);font-weight:800;font-size:26px;
    letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
  }
  .fit__num span{display:block;font-size:12.5px;color:#A9BECD;margin-block-start:7px;line-height:1.35}
  .verdict{
    --dot:11px; --verdict-fs:19px; --verdict-lh:1.55;
    display:flex;gap:13px;align-items:flex-start;
    border-radius:var(--r-card);padding:16px 18px;background:rgba(248,251,252,.07);
    border:1px solid var(--hairline-2);
  }
  /* Кружок центрируется по строке заголовка, а не по подобранному на глаз
     отступу: половина строки минус половина кружка. Меняете кегль или
     интерлиньяж заголовка — правьте токены выше, отступ пересчитается сам. */
  .verdict__dot{
    width:var(--dot);height:var(--dot);border-radius:50%;flex:0 0 auto;
    margin-block-start:calc((var(--verdict-fs) * var(--verdict-lh) - var(--dot)) / 2);
    background:var(--free-up);
  }
  .verdict.is-no .verdict__dot{background:var(--error-up)}
  .verdict b{display:block;font-family:var(--font-display);font-weight:800;font-size:var(--verdict-fs);line-height:var(--verdict-lh);letter-spacing:-.02em;color:var(--free-up)}
  .verdict.is-no b{color:var(--error-up)}
  /* Подпись лежит в своей колонке рядом с кружком — селектор обязан её
     различать: голый `.verdict span` (0,1,1) бил по кружку и перебивал
     его отступ, кружок съезжал вверх на 4 px. */
  .verdict div span{display:block;font-size:14px;color:#C4D2DC;margin-block-start:5px;line-height:1.45}
  .fit__formula{font-size:13px;color:#9FB3C2;line-height:1.5}
  .fit__formula code{
    font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;
    color:var(--clean-white);background:rgba(248,251,252,.09);padding:2px 7px;border-radius:6px;
  }

  .warn{
    border-radius:var(--r-card);background:var(--surface);
    border:1px solid var(--hairline);border-left:3px solid var(--ink-error);
    padding:22px 24px;
  }
  .warn h3{font-size:var(--fs-h3);color:var(--ink-error);margin-block-end:14px}
  .warn ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
  .warn li{display:flex;gap:11px;font-size:15px;line-height:1.5;color:var(--deep-city)}
  .warn li::before{content:"—";color:var(--ink-error);flex:0 0 auto}

  .offer{
    display:grid;gap:16px;align-items:center;
    background:var(--city-mist);border-radius:var(--r-sheet);padding:clamp(22px,3vw,30px);
  }
  .offer h3{font-size:var(--fs-h3)}
  .offer p{font-size:15px;color:var(--steel-ink);line-height:1.55}

  /* ——— FAQ ——— */
  .faq{border-block-start:1px solid var(--hairline)}
  .faq details{border-block-end:1px solid var(--hairline)}
  .faq summary{
    padding:22px 44px 22px 0;font-weight:600;font-size:17px;cursor:pointer;
    list-style:none;position:relative;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
    border-right:2px solid var(--city-blue);border-bottom:2px solid var(--city-blue);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s var(--ease);
  }
  .faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
  .faq .answer{padding-block-end:24px;max-width:74ch;color:var(--steel-ink);font-size:15.5px;line-height:1.62}

  /* ——— форма ——— */
  .form{display:grid;gap:16px}
  .field{display:grid;gap:7px}
  .field label{font-size:var(--fs-small);font-weight:500;color:#C4D2DC}
  .field input,.field select,.field textarea{
    width:100%;padding:14px 15px;font-size:16px;border-radius:var(--r-chip);
    background:rgba(248,251,252,.07);border:1px solid var(--hairline-2);color:var(--clean-white);
    transition:border-color .16s var(--ease),background .16s var(--ease);
  }
  .field input::placeholder,.field textarea::placeholder{color:#7E93A3}
  .field input:focus,.field select:focus,.field textarea:focus{
    background:rgba(248,251,252,.11);border-color:var(--blue-up);
  }
  .field select option{background:var(--deep-city);color:var(--clean-white)}
  .field textarea{min-height:96px;resize:vertical}
  .consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:#A9BECD;line-height:1.5;
    padding-block:6px;cursor:pointer;min-height:44px}
  .consent input{width:20px;height:20px;flex:0 0 auto;margin-top:1px;accent-color:var(--city-blue)}
  #formMsg{border-radius:var(--r-card);padding:16px 18px;font-size:14.5px;line-height:1.55}
  #formMsg.ok{background:rgba(77,184,124,.14);border:1px solid rgba(77,184,124,.4);color:#DDF3E6}
  #formMsg.fail{background:rgba(214,126,117,.14);border:1px solid rgba(214,126,117,.4);color:#F3DEDC}
  #formMsg a{color:var(--blue-up);border-bottom:1px solid currentColor}

  /* ——— sticky CTA (моб.) · §6.2б ——— */
  /* Полоса без подложки: над контентом висит только сама кнопка,
     читаемость даёт её собственная тень, а не белое поле под ней.
     pointer-events снят с контейнера, иначе прозрачная полоса
     перехватывала бы касания по тексту страницы. */
  .stickybar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:transparent;border:0;pointer-events:none;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .24s var(--ease);
  }
  .stickybar .btn{pointer-events:auto;box-shadow:var(--shadow-float)}
  .stickybar.is-on{transform:none}
  .stickybar .btn{min-height:52px}

  footer{padding-block:clamp(44px,5vw,72px) 0}
  .foot__top{display:grid;gap:26px;padding-block-end:34px}
  /* телефон и почта — основные тап-цели футера: 44px даже на телефоне */
  .foot__nav{font-size:15px;display:grid}
  .foot__nav a{display:inline-flex;align-items:center;min-height:40px;width:fit-content}
  .foot__nav br{display:none}
  .i-tg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .foot__tg{margin-block-end:16px;padding-inline:22px}
  .foot__contacts{font-size:15px;display:grid}
  .foot__contacts a{display:inline-flex;align-items:center;min-height:44px;width:fit-content}
  .foot__slogan{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em}
  /* Точка слогана — фирменная: тот же City Cyan, что точка на знаке,
     и на светлом фоне, и на тёмном. Контраст точки к белому 1,97 —
     ниже AA, но это знак препинания из фирменного написания, а не
     текст: фраза читается и не зависит от него. Согласованное
     отступление, §6.1 дизайн-кода. */
  .slogan-dot{color:var(--city-cyan)}
  .foot__legal{
    border-block-start:1px solid var(--hairline);padding-block:22px calc(26px + env(safe-area-inset-bottom));
    font-size:13px;color:var(--steel-ink);display:grid;gap:8px;
  }
}

@layer motion {
  .reveal{opacity:0;transform:translateY(18px)}
  .is-in{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .reveal[data-d="1"].is-in{transition-delay:.07s}
  .reveal[data-d="2"].is-in{transition-delay:.14s}
  .reveal[data-d="3"].is-in{transition-delay:.21s}
  .reveal[data-d="4"].is-in{transition-delay:.28s}

  /* line-draw иконок · §9.2 */
  .ico svg path,.ico svg circle,.ico svg rect,.ico svg line,.ico svg polyline{
    stroke-dasharray:var(--len,90);stroke-dashoffset:var(--len,90);
  }
  .is-in .ico svg path,.is-in .ico svg circle,.is-in .ico svg rect,
  .is-in .ico svg line,.is-in .ico svg polyline{
    stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) .12s;
  }

  /* галочки списков · тот же line-draw, что у иконок услуг.
     --i проставляет JS: пункты выходят лесенкой, а не пачкой. */
  .ticks svg polyline,.ticks svg path,.ticks svg line{
    stroke-dasharray:var(--len,26);stroke-dashoffset:var(--len,26);
  }
  .is-in .ticks svg polyline,.is-in .ticks svg path,.is-in .ticks svg line,
  .ticks.is-in svg polyline,.ticks.is-in svg path,.ticks.is-in svg line{
    stroke-dashoffset:0;
    transition:stroke-dashoffset .42s var(--ease) calc(.06s * var(--i,0) + .1s);
  }
  .ticks li{opacity:0;transform:translateX(-7px)}
  .is-in .ticks li,.ticks.is-in li{
    opacity:1;transform:none;
    transition:opacity .38s var(--ease) calc(.06s * var(--i,0)),
               transform .38s var(--ease) calc(.06s * var(--i,0));
  }

  /* иконка отзывается на наведение: штрих прочерчивается заново.
     Плитка только слегка темнеет — карточка не кликабельна,
     и подсвечивать её как кнопку нельзя. */
  .ico{transition:background-color .22s var(--ease)}
  .ico svg{transition:transform .25s var(--ease)}
  @keyframes redraw{from{stroke-dashoffset:var(--len,90)}to{stroke-dashoffset:0}}
  .card:hover .ico,.card:focus-within .ico{background:#DCEBF4}
  .on-deep .card:hover .ico,.on-deep .card:focus-within .ico{background:rgba(248,251,252,.13)}
  .card:hover .ico svg,.card:focus-within .ico svg{transform:scale(1.06)}
  .card:hover .ico svg>*{animation:redraw .55s var(--ease) both}
  .card:hover .ico svg>:nth-child(2){animation-delay:.07s}
  .card:hover .ico svg>:nth-child(3){animation-delay:.14s}

  /* пункты и кадры выходят лесенкой */
  .step{opacity:0;transform:translateY(12px)}
  .is-in .step{
    opacity:1;transform:none;
    transition:opacity .45s var(--ease) calc(.07s * var(--i,0)),
               transform .45s var(--ease) calc(.07s * var(--i,0));
  }
  .gal figure{opacity:0;transform:translateY(14px)}
  .gal.is-in figure{
    opacity:1;transform:none;
    transition:opacity .5s var(--ease) calc(.06s * var(--i,0)),
               transform .5s var(--ease) calc(.06s * var(--i,0));
  }
  .checks li::before{transform:scale(0)}
  .is-in .checks li::before{
    transform:scale(1);transition:transform .3s var(--ease) calc(.06s * var(--i,0) + .15s);
  }

  .cyandot{
    width:9px;height:9px;border-radius:50%;background:var(--city-cyan);display:inline-block;
  }
  .is-in .cyandot{animation:pulse 1.5s var(--ease) 1}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.65}}

  /* прогресс-дуга в карточке машины */
  .arc circle:last-child{
    stroke-dasharray:126;stroke-dashoffset:126;
  }
  .is-in .arc circle:last-child{transition:stroke-dashoffset 1.1s var(--ease) .2s;stroke-dashoffset:38}

  /* змейка дорожной карты прочерчивается вместе с появлением карточки;
     длину штриха проставляет скрипт — она зависит от вёрстки */
  .is-in .steps__line path{stroke-dashoffset:0 !important}
  .steps__line path{transition:stroke-dashoffset 1.1s var(--ease) .1s}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;animation-iteration-count:1 !important;
      transition-duration:.01ms !important;scroll-behavior:auto !important;
    }
    .reveal{opacity:1 !important;transform:none !important}
    .ticks li,.step,.gal figure{opacity:1 !important;transform:none !important}
    .ico svg *,.ticks svg *{stroke-dashoffset:0 !important}
    .checks li::before{transform:scale(1) !important}
    .steps__line path{stroke-dashoffset:0 !important}
    .arc circle:last-child{stroke-dashoffset:38 !important}
  }
}

@layer responsive {
  /* mobile-first: выше — база 320–599 · §6.2а */
  @media (min-width:480px){
    .ladder li.is-total .ladder__lbl{flex:1 1 0}
  }
  @media (min-width:600px){
    .figs{grid-template-columns:repeat(2,1fr)}
    .fig--more{display:block}
    .tabs__bar{flex-direction:row;border-radius:99px}
    .tab{padding-inline:clamp(10px,1.6vw,20px)}
    /* цифры героя лежат прямо на кадре: вместо рамки сетки — волосяные
       линии между ячейками, слева в ряду и сверху во втором ряду */
    .hero .figs{column-gap:clamp(18px,2.6vw,30px);row-gap:20px}
    .hero .fig+.fig{margin-block-start:0;padding-block-start:0;border-block-start:0}
    .hero .fig:nth-child(even){
      padding-inline-start:clamp(18px,2.6vw,30px);
      border-inline-start:1px solid rgba(248,251,252,.14);
    }
    .hero .fig:nth-child(n+3){
      padding-block-start:20px;border-block-start:1px solid rgba(248,251,252,.14);
    }
    /* нечётная последняя ячейка встаёт во всю строку, а не сиротой слева */
    .hero .figs > .fig:nth-child(3):last-child{grid-column:1 / -1}
    .row--more{display:block}
    .tablewrap__more{display:none}

    .hero__cta{flex-direction:row;align-items:center}
    .hero__cta .btn{flex:0 0 auto}
    .grid--2{grid-template-columns:repeat(2,1fr)}
    .grid--3{grid-template-columns:repeat(2,1fr)}
    /* четыре карточки «почему это работает у вас» держим 2×2 на всех
       ширинах: в ряд по четыре колонка сужается до 20 символов */
    .grid--4{grid-template-columns:repeat(2,1fr)}
    .gal{grid-auto-columns:62%}
    .form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  }
  /* планшет в портрете уже достаточно широк для двух колонок калькулятора */
  @media (min-width:768px){
    /* без align-items:start: это две поверхности рядом — светлая карточка
       с ползунками и тёмный лист результата. Разная высота читается
       как брак, §6.1 дизайн-кода */
    .calc{grid-template-columns:1.05fr .95fr}
    /* три итога в ряд — только когда число целиком влезает в карточку */
    .sums{grid-template-columns:repeat(3,1fr)}
    .price{grid-template-columns:repeat(2,1fr)}
    .calcsheet .segs{grid-template-columns:repeat(3,1fr)}
  }
  /* Пять карточек клиентов в двух колонках дают сироту в последнем ряду.
     На 1200px+ раскладка 2+3 своя, здесь — последняя карточка во всю ширину. */
  @media (min-width:600px) and (max-width:1199px){
    .grid--clients>:last-child:nth-child(odd){grid-column:1 / -1}
  }
  @media (min-width:900px){
    /* ——— островок: текст расступается, чтобы человек в кадре был виден ———
       Заголовок сверху, описание в левых 2/5, состав — в правом нижнем
       квадранте. Центр кадра (человек у машины) не закрывается ничем,
       и подложка там почти прозрачная. */
    .island__bg::after{
      background:
        /* левая колонка под заголовком и описанием */
        linear-gradient(90deg,rgba(16,40,60,.92) 0%,rgba(16,40,60,.86) 26%,
                              rgba(16,40,60,.52) 40%,rgba(16,40,60,.16) 52%,
                              rgba(16,40,60,.04) 66%,rgba(16,40,60,.04) 100%),
        /* правый нижний угол под списком */
        linear-gradient(to top left,rgba(16,40,60,.92) 0%,rgba(16,40,60,.74) 24%,
                                    rgba(16,40,60,0) 50%),
        /* общий тон, чтобы светлые пятна кадра не били по глазам */
        linear-gradient(180deg,rgba(16,40,60,.32) 0%,rgba(16,40,60,.06) 34%,
                               rgba(16,40,60,.10) 58%,rgba(16,40,60,.38) 100%);
    }
    .island .wrap{
      /* высоту секции задаёт содержимое, а не кадр: поля и интервалы
         подобраны так, чтобы после обрезки фото осталось в прежней крупности */
      min-height:clamp(504px,52vw,700px);
      display:grid;grid-template-columns:2fr 1fr 2fr;grid-template-rows:auto 1fr auto;
      column-gap:clamp(20px,2.4vw,32px);row-gap:clamp(12px,1.6vw,20px);
      padding-block:clamp(24px,2.8vw,36px);
    }
    .it{
      /* слайд короткий, кадр высокий — выравниваем по центру, иначе текст
         прижимается к верху и под ним висит пустая половина колонки */
      /* слайд короткий, кадр высокий — выравниваем по центру, иначе текст
         прижимается к верху и под ним висит пустая половина колонки */
      align-items:center;
      /* колонка кадра уже текстовой на 20%: сам кадр выходит примерно
         на 10% меньше прежнего и на столько же снижает высоту секции */
      grid-template-columns:1fr .61fr;
      column-gap:clamp(18px,2.2vw,32px);
    }
    .headrow{
      grid-template-columns:minmax(0,1fr) auto;align-items:start;
      column-gap:clamp(28px,4vw,56px);
    }
    .island__head{grid-column:1 / 3;grid-row:1;margin-block-end:0}
    .island__col{grid-column:1;grid-row:2;align-self:start}
    .island__spec{grid-column:3;grid-row:3;align-self:end;border-block-start:0;padding-block-start:0;gap:9px}
    /* левый нижний угол: под описанием, на той же линии, что состав справа */
    .island__figs{grid-column:1;grid-row:3;align-self:end;margin-block-start:0}
    /* на десктопе — плавающая пилюля по центру: путь до заявки из любой секции
       без взгляда в шапку. Логика показа та же: после героя, до формы. */
    .stickybar{
      left:50%;right:auto;bottom:18px;width:auto;
      padding:0;
      transform:translate(-50%,calc(100% + 30px));
    }
    .stickybar.is-on{transform:translate(-50%,0)}
    .stickybar .btn{min-height:48px;padding-inline:26px;width:auto}
    .nav__links{display:flex}
    .nav__cta{display:inline-flex}
    .burger{display:none}
    .menu{display:none !important}
    .split{grid-template-columns:1fr 1fr}
    .gal{grid-auto-columns:47%}
    .galnav{display:grid}
    .row--more{display:table-row}
    .foot__top{grid-template-columns:1.4fr 1fr 1fr}
    .hero__inner{max-width:none}
    /* первый экран живёт в той же колонке 1180px, что шапка и секции:
       без этого на широких экранах текст героя уезжал к краю окна */
    /* текст держится левой половины — поверх пилона, а правая половина
       кадра остаётся почти открытой: человек и модуль должны читаться */
    /* На высоком окне кадр режется по бокам, и пара уезжает в левую,
       затемнённую под текст половину. 62% держат обе фигуры в открытой
       части; на широком коротком окне обрезка вертикальная, и это
       правило ничего не меняет. */
    .hero__bg img{object-position:62% center}
    .hero__bg::after{
      background:
        /* плотность держится до 48% ширины — там заканчивается текстовая
           колонка — и дальше уходит так же быстро, как раньше: на фигуре
           справа значения те же, что были (58% .56, 70% .34, 100% .14) */
        linear-gradient(90deg,rgba(16,40,60,.96) 0%,rgba(16,40,60,.94) 30%,
                              rgba(16,40,60,.86) 52%,rgba(16,40,60,.70) 59%,
                              rgba(16,40,60,.40) 68%,rgba(16,40,60,.18) 82%,
                              rgba(16,40,60,.08) 100%),
        /* нижняя тень нужна только под строкой цифр (83–92% высоты):
           до двух третей кадр открыт, дальше короткий уход в тень */
        linear-gradient(180deg,rgba(16,40,60,.24) 0%,rgba(16,40,60,.04) 30%,
                               rgba(16,40,60,.04) 66%,rgba(16,40,60,.30) 74%,
                               rgba(16,40,60,.74) 82%,rgba(16,40,60,.90) 90%,
                               rgba(16,40,60,.94) 100%);
    }
    /* Колонка шире строки «Сдайте часть помещения» на крупном кегле:
       при 56px она требует 682 px, при 594 ломалась пополам. Высота героя
       при этом не падает — её держит min-height, а освободившиеся две
       строки уходят в отступ над таблицей цифр (margin-block-start:auto). */
    .hero{min-height:min(96vh,960px);display:grid;align-items:stretch}
    .hero__inner{display:flex;flex-direction:column}
    .hero__text{max-width:min(700px,64%);margin-inline-end:auto}
    .hero .figs{margin-block-start:auto}
    .hero h1{font-size:clamp(36px,3.8vw,56px);max-width:none}
    /* ——— дорожная карта змейкой ———
       Номера идут по центру, подписи попеременно слева и справа, каждый номер
       сдвинут в сторону своей подписи — линия между ними получается змейкой.
       Саму линию рисует скрипт: высоты строк зависят от текста, в CSS их
       не вычислить. Ниже 900px раскладка остаётся колонкой. */
    .steps-wrap{position:relative}
    .steps__line{
      display:block;position:absolute;inset:0;width:100%;height:100%;
      overflow:visible;pointer-events:none;
    }
    .steps__line path{
      fill:none;stroke:var(--hairline-2);stroke-width:1.5;
      stroke-linecap:round;stroke-linejoin:round;
    }
    .on-deep .steps__line path{stroke:rgba(248,251,252,.22)}
    .steps{
      --dot:45px;--shift:26px;--snake:1;
      grid-template-columns:1fr 1fr;column-gap:0;
      row-gap:clamp(2px,.28vw,4px);
    }
    .steps .step{padding:0}
    .steps .step::after{display:none}
    /* кружок с номером вдвое крупнее базового — он же узел змейки */
    .steps .step::before{
      width:var(--dot);height:var(--dot);font-size:21px;border-width:2px;
    }
    .steps .step:nth-child(odd){
      grid-column:1;text-align:right;
      padding-inline-end:calc(var(--shift) + var(--dot) + 16px);
    }
    .steps .step:nth-child(even){
      grid-column:2;text-align:left;
      padding-inline-start:calc(var(--shift) + var(--dot) + 16px);
    }
    .steps .step:nth-child(1){grid-row:1}
    .steps .step:nth-child(2){grid-row:2}
    .steps .step:nth-child(3){grid-row:3}
    .steps .step:nth-child(4){grid-row:4}
    .steps .step:nth-child(5){grid-row:5}
    /* строка у каждого шага своя: без неё шаг из правой колонки встаёт
       в первую свободную клетку сверху. В схемах с ремонтом шагов шесть,
       запас до восьми — tools/check-page.js, проверка steps */
    .steps .step:nth-child(6){grid-row:6}
    .steps .step:nth-child(7){grid-row:7}
    .steps .step:nth-child(8){grid-row:8}
    .steps .step:nth-child(odd)::before{
      left:auto;right:var(--shift);transform:translateX(50%);
    }
    .steps .step:nth-child(even)::before{
      left:var(--shift);right:auto;transform:translateX(-50%);
    }
    #about .figs{grid-template-columns:repeat(3,1fr)}
  }
  /* Четыре цифры в ряд — только с 1100px. На 950px колонка выходит 200px,
     и подпись «пункт под ключ: оборудование, монтаж…» ломается на четыре
     строки, а «3 000» разрывается пополам. До 1100px держим 2×2. */
  @media (min-width:1100px){
    .hero .figs{grid-template-columns:repeat(4,1fr);row-gap:0}
    .hero .fig:nth-child(n+3){padding-block-start:0;border-block-start:0}
    .hero .fig+.fig{
      padding-inline-start:clamp(14px,2.2vw,26px);
      border-inline-start:1px solid rgba(248,251,252,.14);
    }
    .hero .fig:first-child{padding-inline-start:0}
    /* три цифры вместо четырёх (зал): три колонки, без пустой четвёртой */
    .hero .figs:has(> .fig:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
    .hero .figs > .fig:nth-child(3):last-child{grid-column:auto}
  }
  @media (min-width:1200px){
    .grid--3{grid-template-columns:repeat(3,1fr)}
    /* пять карточек клиентов: две широкие сверху, три снизу — без сироты в углу */
    .grid--clients{grid-template-columns:repeat(6,1fr)}
    .grid--clients>*{grid-column:span 2}
    .grid--clients>:nth-child(-n+2){grid-column:span 3}
    /* на широких экранах галерея выравнивается по контентной колонке */
    .gal{grid-auto-columns:39%;padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2 + var(--gutter)))}
  }
  /* ландшафт телефона · §6.2а: кнопка первого экрана обязана быть видна
     без скролла, поэтому герой ужимается — заголовок, подводка и поля */
  @media (max-height:480px) and (orientation:landscape){
    /* 72px шапки — это 18% экрана в ландшафте; ужимаем её и знак */
    :root{--section-y:40px;--hdr-h:56px}
    header .lockup{--mark:30px}
    .hero{min-height:0}
    .hero__inner{padding-block:20px}
    .hero h1{font-size:clamp(24px,3.1vw,32px);margin-block:8px 10px}
    .hero__lead{font-size:15px;line-height:1.45}
    .lead-tail{display:none}
    .hero__cta{margin-block-start:16px}
    .hero__cta .btn{min-height:46px;padding-block:11px}
    .hero__note{margin-block-start:10px}
    .figs{margin-block-start:22px}
  }
}

/* ═══════════════ новые компоненты сайта /new ═══════════════
   Всё выше — стили страницы франшизы как есть, без правок: на них
   собраны блоки, перенесённые с действующих страниц. Ниже — только
   то, чего там не было. Токены те же, новых цветов и радиусов нет. */
@layer components {
  /* развилка «что у вас есть» на главной: строки-ссылки во всю ширину.
     Строками, а не сеткой карточек: пять вариантов в три колонки дают
     ряд 3 + 2, и последняя пара выглядит недовёрстанной. */
  .paths{display:grid;gap:12px}
  .path{
    display:grid;gap:6px 28px;padding:22px 24px;color:inherit;
    background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
    transition:border-color .16s var(--ease);
  }
  .path:hover{border-color:var(--city-blue)}
  .path:focus-visible{outline:2px solid var(--city-blue);outline-offset:2px}
  .path h3{font-size:var(--fs-h3)}
  .path p{font-size:15px;color:var(--steel-ink);max-width:64ch}
  /* На телефоне подпись переносится: без этого длинная подпись («Подробнее
     о полноразмерной прачечной →») раздвигала сетку и страница уезжала вбок
     на 46 px при 375. В одну строку она стоит только справа от текста строки,
     где колонка ей по размеру (правило ниже, от 600 px). */
  .paths{grid-template-columns:minmax(0,1fr)}
  .path__go{color:var(--city-blue);font-weight:600}
  @media (min-width:900px){
    .path{grid-template-columns:minmax(0,1fr) auto;align-items:center}
    .path__go{grid-row:1 / span 2;grid-column:2;white-space:nowrap}
  }

  /* карточки форматов: цена сверху, ссылка прижата к низу, ряд одной высоты */
  .card--fmt{display:flex;flex-direction:column;gap:10px}
  .card--fmt h3{margin:0}
  .card__price{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
    font-size:clamp(22px,2.4vw,30px);line-height:1.1;font-variant-numeric:tabular-nums}
  .card__price small{display:block;margin-top:6px;font:500 14px/1.4 var(--font-text);color:var(--steel-ink);letter-spacing:0}
  .card--fmt .linkline{margin-top:auto;padding-top:8px}

  /* таблица примера: по ширине содержимого, заголовки и подписи сценариев
     в две строки — решение заказчика от 26 сентября, таблица была шире текста */
  .tablewrap--compact{width:fit-content;max-width:100%}
  .tablewrap--compact table{min-width:0}
  .tablewrap--compact th{white-space:normal;line-height:1.3;vertical-align:bottom}
  .tablewrap--compact .perday{display:block;margin:3px 0 0}

  /* короткий пояснительный абзац под таблицей примера */
  .tablenote{margin-top:14px;font-size:13px;line-height:1.55;color:var(--steel-ink);max-width:80ch}
}
@layer components {
  /* таблица из фраз, а не чисел: разрешаем перенос, иначе строка уезжает вбок */
  .tablewrap--text table{min-width:0}
  .tablewrap--text th,.tablewrap--text td{white-space:normal;text-align:left;vertical-align:top}
}