/* Главная страница Обход24 (obhod24.ru). Отдельно от кабинета: свои токены и сетка. */
/* 0.49.53 Шкала золотого сечения. Шрифты: 12.6 / 16 / 20.4 / 25.9 / 33 / 41.9 / 53.3 / 67.8 px — шаг √φ, через ступень ×1,618
   (16 → 25.9 → 41.9 → 67.8). Отступы: 4 6 8 10 13 16 20 26 33 42 53 68 86 110 140 178 px. Читаемый текст не мельче 16 px,
   12.6 — только подписи прописными, метки и сноски. Вне шкалы — только нарисованные иллюстрации (план объекта, таблички QR,
   рамки телефонов, строка браузера) и выверенные выравнивания с пояснением рядом. Две колонки — 1 : 1,618, где это не ломает
   смысл (сравнение «до/после» остаётся симметричным). Проверка: tests/release_04953.test.cjs. */
  /* Шрифты лежат на нашем сервере: без запросов к Google и передачи адресов посетителей за рубеж. */
  @font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;
    src:url(/fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2");
    unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:"Golos Text";font-style:normal;font-weight:400 900;font-display:swap;
    src:url(/fonts/golos-text-latin-wght-normal.woff2) format("woff2");
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+20BD,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
    src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2212}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
  @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500 600;font-display:swap;
    src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20BD,U+2212}
  html,body{margin:0}
  img{max-width:100%}
  [hidden]{display:none!important}
  :root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  /* ══ токены ══════════════════════════════════════════════════════════
     Светлая тема основная: страницу смотрят днём с рабочего ноутбука.
     Тёмная описана отдельно и подобрана, а не получена инверсией.       */
  :root{
    --paper:#EDF2F3;  --surface:#FFFFFF;  --surface-2:#F5F9FA;  --sunken:#E4ECEE;
    --ink:#081619;    --ink-2:#475C62;    --ink-3:#7A9096;
    --line:#D6E0E2;   --line-2:#E8EEEF;
    --brand:#08535B;  --brand-2:#0C7F89;  --brand-wash:#DFEDEE; --brand-ink:#FFFFFF;
    --signal:#D8471D; --signal-wash:#FBE6DF;
    --ok:#17834A;     --ok-wash:#DEF1E6;
    --warn:#C2410C;   --warn-wash:#FFEDD5;
    --bad:#BE2C23;    --bad-wash:#FAE2E0;
    --cta-bg:#08535B; --cta-ink:#FFFFFF; --cta-face:rgba(255,255,255,.13); --cta-edge:rgba(255,255,255,.26);
    --shadow:0 1px 2px rgba(8,22,25,.05), 0 10px 26px -12px rgba(8,22,25,.16);
    --shadow-lg:0 2px 5px rgba(8,22,25,.07), 0 44px 76px -34px rgba(8,22,25,.4);
    --r:14px;
    color-scheme:light;
  }
  /* «стекло» макетов — одинаково тёмное в обеих темах: это снимок экрана */
  :root{
    --sc:#07161A; --sc-2:#0D2126; --sc-3:#112B31;
    --sc-line:#1A373E; --sc-ink:#E9F1F2; --sc-ink-2:#8FA9AF;
    --sc-ok:#1BA35F; --sc-ok-t:#5FD79A; --sc-warn:#E0A020; --sc-warn-t:#F0B84B;
    --sc-bad:#D6342C; --sc-bad-t:#FF8A7E; --sc-cy:#3FC2CC; --sc-cy-t:#8FE3EA;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#061214;  --surface:#0C1D20;  --surface-2:#112A2E; --sunken:#09191C;
      --ink:#E6EFF0;    --ink-2:#9BB3B8;    --ink-3:#6C868C;
      --line:#1C363B;   --line-2:#152C31;
      --brand:#43C7D1;  --brand-2:#65DDE4;  --brand-wash:#0D3238; --brand-ink:#05191C;
      --calc-brand:#0C7F89;
      --signal:#FF7548; --signal-wash:#32140C;
      --ok:#42C079;     --ok-wash:#0C2B1D;
      --warn:#E9B13F;   --warn-wash:#30240B;
      --bad:#F4655A;    --bad-wash:#32120F;
      --cta-bg:#0C363C; --cta-ink:#E6EFF0; --cta-face:rgba(255,255,255,.07); --cta-edge:rgba(255,255,255,.15);
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -12px rgba(0,0,0,.65);
      --shadow-lg:0 2px 5px rgba(0,0,0,.55), 0 44px 76px -34px rgba(0,0,0,.85);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --paper:#061214;  --surface:#0C1D20;  --surface-2:#112A2E; --sunken:#09191C;
    --ink:#E6EFF0;    --ink-2:#9BB3B8;    --ink-3:#6C868C;
    --line:#1C363B;   --line-2:#152C31;
    --brand:#43C7D1;  --brand-2:#65DDE4;  --brand-wash:#0D3238; --brand-ink:#05191C;
      --calc-brand:#0C7F89;
    --signal:#FF7548; --signal-wash:#32140C;
    --ok:#42C079;     --ok-wash:#0C2B1D;
    --warn:#E9B13F;   --warn-wash:#30240B;
    --bad:#F4655A;    --bad-wash:#32120F;
    --cta-bg:#0C363C; --cta-ink:#E6EFF0; --cta-face:rgba(255,255,255,.07); --cta-edge:rgba(255,255,255,.15);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -12px rgba(0,0,0,.65);
    --shadow-lg:0 2px 5px rgba(0,0,0,.55), 0 44px 76px -34px rgba(0,0,0,.85);
    color-scheme:dark;
  }

  *{box-sizing:border-box}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:"Golos Text","IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
    font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  }
  .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Consolas,monospace}
  /* Отметка сборки: по ней сразу видно, какая версия лежит на сервере. */
  .build{font-size:12.6px;opacity:.55;letter-spacing:.02em}
  h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em}
  p{margin:0}
  a{color:inherit}
  a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
    outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

  .wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:16px}
  /* Переход по якорю: надпись раздела встаёт на 36 px ниже шапки — на любой
     ширине. 36 (зазор) + --nav-h (шапка) + 7 (надпись поднята над линейкой),
     минус собственный отступ раздела, который и так опускает содержимое. */
  section[id]:not(#top){
    scroll-margin-top:calc(var(--nav-h) + 43px + env(safe-area-inset-top,0px) - clamp(40px,5vw,72px));
  }
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
  .wrap-narrow{max-width:840px}
  section{padding-block:clamp(42px,5vw,68px)}
  /* Полоса раздела: фон, на котором лежит надпись, берётся из --band,
     иначе она не «разрежет» линейку на затенённых полосах. */
  :root{--band:var(--paper)}
  section.band{background:var(--sunken);--band:var(--sunken)}

  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;margin:0 0 13px;
    font-family:"IBM Plex Mono",monospace;font-size:12.6px;font-weight:500;
    letter-spacing:.2em;text-transform:uppercase;color:var(--brand);
  }
  /* линейка над заголовком заменяет разделители: структура без лишней высоты */
  .sec-head{position:relative;border-top:1px solid var(--line);padding-top:26px;
            margin-bottom:clamp(26px,2.8vw,42px)}
  .sec-head .eyebrow{position:absolute;top:-7px;left:0;margin:0;
                     background:var(--band);padding-right:20px}
  .hero .eyebrow::before{content:"";width:22px;height:2px;background:var(--sc-cy);border-radius:2px}
  .h2{font-size:clamp(25.9px,4.6vw,41.9px);font-weight:800;line-height:1.05}
  .lede{margin-top:20px;max-width:64ch;color:var(--ink-2);font-size:clamp(16px,1.6vw,20.4px)}
  /* 0.47.8 Текст под заголовком раздела: удобная длина строки (около 85 знаков), без узкой колонки и без строк во всю ширину; переносы без висячих слов. */
  .sec-head .lede{max-width:49rem;text-wrap:pretty}

  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:inherit;font-size:16px;font-weight:600;line-height:1;
    padding:13px 20px;border-radius:11px;border:1px solid transparent;white-space:nowrap;
    text-decoration:none;cursor:pointer;transition:transform .14s ease,filter .14s ease,border-color .14s ease,color .14s ease;
  }
  .btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
  .btn-primary{background:#D8471D;color:#fff}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn-sm{padding:10px 16px;font-size:16px}

  /* ══ шапка ══ */
  .nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;
       background:var(--paper);border-bottom:1px solid var(--line);
       transition:background .3s ease,border-color .3s ease,color .3s ease}
  @supports (backdrop-filter:blur(2px)){
    .nav.solid{background:color-mix(in srgb, var(--paper) 86%, transparent);backdrop-filter:blur(14px)}
  }
  /* над тёмным героем шапка растворяется; класс solid ставит скрипт при
     прокрутке. Без скрипта шапка просто всегда плотная — тоже читаемо. */
  .nav.clear{background:transparent;border-bottom-color:transparent}
  .nav.clear .brand{color:#fff}
  .nav.clear .brand svg{color:var(--sc-cy)}
  .nav.clear .nav-links a{color:rgba(233,241,242,.78)}
  .nav.clear .nav-links a:hover{color:#fff}
  .nav.clear .themer{border-color:rgba(233,241,242,.26);color:rgba(233,241,242,.78)}
  .nav.clear .themer:hover{color:#fff;border-color:#fff}
  .nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
  .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20.4px;
         letter-spacing:-.025em;text-decoration:none;flex:0 0 auto;color:var(--ink)}
  .brand svg{display:block;color:var(--brand)}
  .nav-links{display:flex;gap:26px;margin-left:auto;font-size:16px;color:var(--ink-2)}
  .nav-links a{text-decoration:none;position:relative;padding-block:4px;white-space:nowrap}
  .nav-links a:hover{color:var(--brand)}
  @media (max-width:900px){.nav-links{display:none}}
  .nav-cta{margin-left:auto}
  @media (min-width:901px){.nav-cta{margin-left:0}}
  .nav-cta .short{display:none}
  .themer{flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:1px solid var(--line);
          background:transparent;color:var(--ink-2);cursor:pointer;display:grid;place-items:center}
  .themer:hover{color:var(--brand);border-color:var(--brand)}
  @media (max-width:560px){
    .nav-in{gap:10px}
    .nav-cta .full{display:none}
    .nav-cta .short{display:inline}
  }

  /* ══ герой ══ */
  /* Тёмный намеренно: продукт живёт ночью. Дальше страница раскрывается
     в светлое — это ритм, а не случайность. */
  .hero{
    position:relative;background:var(--sc);color:var(--sc-ink);overflow:hidden;
    padding-block:clamp(53px,7vw,110px) clamp(86px,11vw,140px);
    /* Шапка — это --nav-h высоты (кнопки входа и по 20 px сверху и снизу) ПЛЮС её
       нижняя линия в 1 px. Тянуть надо на всё вместе с линией, иначе сверху остаётся полоска фона страницы: в тёмной теме она почти
       не видна, а в светлой это заметная белая нитка. */
    margin-top:calc(-1 * (var(--nav-h) + 1px + env(safe-area-inset-top,0px)));
    /* Содержимое героя стоит там же, где в 0.43 при шапке 64 px. */
    padding-top:calc(clamp(110px,10.5vw,140px) + var(--nav-h) - 68px);
  }
  .hero::before{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      radial-gradient(74% 56% at 20% 4%, rgba(63,194,204,.13), transparent 64%),
      radial-gradient(64% 52% at 94% 78%, rgba(27,163,95,.10), transparent 70%);
  }
  /* технический растр — как подложка плана объекта */
  .hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.55;
    background-image:linear-gradient(#12303700 1px,transparent 1px),
                     linear-gradient(90deg,#123037 1px,transparent 1px),
                     linear-gradient(#123037 1px,transparent 1px);
    background-size:100% 100%,68px 68px,68px 68px;
    -webkit-mask-image:radial-gradient(76% 68% at 46% 26%,#000,transparent 76%);
            mask-image:radial-gradient(76% 68% at 46% 26%,#000,transparent 76%);
  }
  .hero > .wrap{position:relative;z-index:1}
  /* Карточка плана выровнена по верху заголовка: так она читается как
     часть одной композиции, а не висит сбоку. */
  /* 0.49.60 Текст 55%, живой план 45% (1,222 : 1). */
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.222fr) minmax(0,1fr);
             gap:clamp(26px,4vw,53px);align-items:start}
  .hero-grid > .plancard{margin-top:44px}
  @media (max-width:1040px){.hero-grid > .plancard{margin-top:0}}
  @media (max-width:1040px){.hero-grid{grid-template-columns:1fr;gap:42px}}

  .hero .eyebrow{color:var(--sc-cy);opacity:.95}
  .hero .eyebrow::before{background:var(--sc-cy)}
  .pulse{width:8px;height:8px;border-radius:50%;background:var(--sc-ok);flex:0 0 auto;
         box-shadow:0 0 0 0 rgba(27,163,95,.55);animation:beat 2.6s ease-out infinite}
  @keyframes beat{70%{box-shadow:0 0 0 9px rgba(27,163,95,0)}100%{box-shadow:0 0 0 0 rgba(27,163,95,0)}}

  /* Кегль растёт медленнее ширины: во второй строке заголовка длинные слова,
     и на ноутбучных ширинах он иначе рассыпался на шесть строк.
     text-wrap:balance из общего правила выравнивал длины строк и оставлял
     «Без» одиноко висеть на своей строке — здесь нужна обычная заливка. */
  h1{font-size:clamp(33px,5.4vw,67.8px);font-weight:900;line-height:.98;letter-spacing:-.04em;
     color:#fff;text-wrap:normal}
  h1 em::before{content:"\A";white-space:pre}
  h1 em{font-style:normal;
        background:linear-gradient(94deg,var(--sc-cy) 0%,#8FE3EA 46%,#4FD6A0 100%);
        -webkit-background-clip:text;background-clip:text;
        color:transparent;-webkit-text-fill-color:transparent}
  .hero .lede{color:rgba(233,241,242,.76);font-size:clamp(16px,1.8vw,20.4px);max-width:50ch}
  .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:33px}
  .hero .btn-ghost{color:#fff;border-color:rgba(233,241,242,.3)}
  .hero .btn-ghost:hover{border-color:var(--sc-cy);color:var(--sc-cy)}
  .hero-note{margin-top:20px;font-size:16px;color:rgba(233,241,242,.6);
             display:flex;align-items:flex-start;gap:10px;max-width:52ch}
  .hero-note svg{flex:0 0 auto;color:var(--sc-ok);margin-top:3px}

  /* плитки фактов наезжают на границу тёмного и светлого */
  .facts-wrap{position:relative;z-index:3;margin-top:clamp(-86px,-8vw,-53px)}
  .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
         box-shadow:var(--shadow-lg)}
  @media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}.fact b{font-size:20.4px}}
  @media (max-width:440px){.fact{padding:16px 13px}.fact b{font-size:16px;text-wrap:balance}
                           .fact span{font-size:12.6px}}
  .fact{background:var(--surface);padding:20px 20px}
  .fact b{display:block;font-size:25.9px;font-weight:800;letter-spacing:-.03em}
  .fact span{display:block;margin-top:3px;font-size:12.6px;color:var(--ink-3);line-height:1.35}

  /* ══ сравнение стоимости ══ */
  .versus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:780px){.versus{grid-template-columns:1fr}}
  .vs-card{border-radius:var(--r);padding:26px;border:1px solid var(--line);background:var(--surface)}
  .vs-card.old{background:var(--sunken)}
  .vs-card.new{border-color:var(--brand);box-shadow:var(--shadow)}
  .vs-tag{font-family:"IBM Plex Mono",monospace;font-size:12.6px;letter-spacing:.16em;
          text-transform:uppercase;color:var(--ink-3)}
  .vs-card.new .vs-tag{color:var(--brand)}
  .vs-sum{font-size:clamp(33px,4.2vw,41.9px);font-weight:900;letter-spacing:-.035em;margin:13px 0 4px}
  .vs-sub{color:var(--ink-3);font-size:16px}
  .vs-list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px;font-size:16px;color:var(--ink-2)}
  .vs-list li{display:flex;gap:10px;align-items:flex-start}
  .m{flex:0 0 auto;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
     margin-top:1px;font-size:12.6px;font-weight:700}
  .m.no{background:var(--bad-wash);color:var(--bad)}
  .m.yes{background:var(--ok-wash);color:var(--ok)}

  /* ══ калькулятор ══ */
  .calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:16px;align-items:stretch}
  @media (max-width:860px){.calc{grid-template-columns:1fr}}
  .calc-in,.calc-out{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px}
  .calc-out{background:var(--calc-brand,var(--brand));color:#FFFFFF;border-color:var(--calc-brand,var(--brand))}
  .fld{margin-bottom:20px}
  .fld:last-child{margin-bottom:0}
  .fld label{display:flex;align-items:baseline;gap:10px;font-size:16px;color:var(--ink-2);margin-bottom:10px}
  .fld label b{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:20.4px;font-weight:600;color:var(--ink);
               font-variant-numeric:tabular-nums}
  input[type=range]{width:100%;accent-color:var(--brand);height:24px;cursor:pointer}
  .fld .hint{font-size:12.6px;color:var(--ink-3);margin-top:6px}
  .out-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  @media (max-width:520px){.out-grid{grid-template-columns:1fr}}
  .out-k{font-family:"IBM Plex Mono",monospace;font-size:12.6px;letter-spacing:.14em;
         text-transform:uppercase;opacity:.75}
  .out-v{font-size:clamp(25.9px,3.4vw,33px);font-weight:800;letter-spacing:-.03em;margin-top:6px;
         font-variant-numeric:tabular-nums}
  .out-n{font-size:12.6px;opacity:.75;margin-top:4px;line-height:1.4}
  .bar2{margin-top:20px;display:grid;gap:13px}
  .bar2 .b{display:grid;gap:6px}
  .bar2 .b .lab{display:flex;font-size:12.6px;opacity:.9}
  .bar2 .b .lab span:last-child{margin-left:auto;font-family:"IBM Plex Mono",monospace;
                                font-variant-numeric:tabular-nums}
  .bar2 .b .tr{height:12px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
  .bar2 .b .tr i{display:block;height:100%;border-radius:99px;background:rgba(255,255,255,.5);
                 transition:width .35s cubic-bezier(.4,0,.2,1)}
  .bar2 .b.us .tr i{background:#fff}
  .save{margin-top:26px;padding-top:20px;border-top:1px solid var(--cta-edge)}
  .save .out-v{font-size:clamp(25.9px,4.4vw,41.9px)}
  .calc-foot{max-width:72ch;margin-top:16px;font-size:12.6px;color:var(--ink-3);line-height:1.5}
  .out-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  @media (max-width:700px){.out-grid.three{grid-template-columns:1fr}}

  /* ══ шаги ══ */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
         border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  @media (max-width:920px){.steps{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:520px){.steps{grid-template-columns:1fr}}
  .step{background:var(--surface);padding:26px 20px}
  .step .n{font-family:"IBM Plex Mono",monospace;font-size:12.6px;font-weight:600;color:var(--signal);letter-spacing:.1em}
  .step h3{margin:13px 0 8px;font-size:20.4px;font-weight:700}
  .step p{font-size:16px;color:var(--ink-2);line-height:1.5}

  .qrsheet{margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
           padding:26px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:33px;align-items:center}
  @media (max-width:760px){.qrsheet{grid-template-columns:minmax(0,1fr);gap:20px}}
  .qrsheet h3{font-size:20.4px;font-weight:700;margin-bottom:8px}
  .qrsheet p{font-size:16px;color:var(--ink-2);max-width:68ch}

  /* ══ снимки кабинета ══
     Это настоящие экраны, снятые в сервисе на демонстрационных данных.
     Светлая и тёмная версия лежат рядом; браузер грузит только видимую. */
  :root .on-light{display:block}
  :root .on-dark{display:none}
  :root[data-theme="dark"] .on-light{display:none}
  :root[data-theme="dark"] .on-dark{display:block}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .on-light{display:none}
    :root:not([data-theme="light"]) .on-dark{display:block}
  }
  figure{margin:0}
  .win,.herowin{border-radius:16px;overflow:hidden;background:var(--sc);border:1px solid var(--sc-line);
       box-shadow:var(--shadow-lg);user-select:none;-webkit-user-select:none}
  :root[data-theme="light"] .win,.win{border-color:var(--line)}
  .win-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#050F12;
           border-bottom:1px solid var(--sc-line)}
  .win-bar i{width:10px;height:10px;border-radius:50%;background:#254249;flex:0 0 auto}
  .win-bar .url{margin-left:10px;flex:1;max-width:340px;background:var(--sc-2);border:1px solid var(--sc-line);
       border-radius:7px;padding:4px 11px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
       color:var(--sc-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .herowin img{display:block}
  .win img,.herowin img{width:100%;height:auto;aspect-ratio:16/10;vertical-align:top}

  /* В герое — окно кабинета, слегка развёрнутое к заголовку. */
  .herowin{position:relative;margin-top:33px;box-shadow:0 44px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(63,194,204,.08)}
  .herowin::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
    box-shadow:inset 0 0 70px -24px rgba(63,194,204,.25)}
  @media (min-width:1041px){
    .herowin{transform:perspective(1800px) rotateY(-7deg) rotateX(2deg);transform-origin:left center;margin-right:-26px}
  }
  @media (max-width:1040px){.herowin{margin-top:0}}


  /* лист табличек — бумага, поэтому одинаково светлый в обеих темах */
  .sheet{background:#fff;border:1px solid #D6E0E2;border-radius:10px;padding:8px;box-shadow:var(--shadow)}
  .sheet img{display:block;width:100%;height:auto;border-radius:4px}

  /* телефоны: настоящие экраны в простой рамке */
  .phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);
          align-items:start;justify-items:center}
  @media (max-width:880px){.phones{grid-template-columns:repeat(3,minmax(220px,1fr));justify-items:start;
     overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;margin-inline:-16px;padding-inline:16px;scrollbar-width:thin}
     .phone-wrap{scroll-snap-align:center}}
  .phone-wrap{width:100%;max-width:290px}
  .phone{position:relative;border:8px solid #0A1A1E;border-radius:36px;overflow:hidden;background:var(--sc);
         box-shadow:var(--shadow-lg),0 0 0 1px var(--sc-line);user-select:none;-webkit-user-select:none}
  .phone img{width:100%;height:auto;aspect-ratio:540/1169;vertical-align:top}
  .shot-cap{margin-top:13px;font-size:12.6px;color:var(--ink-3);text-align:center}

  .themer .i-moon{display:none}
  :root[data-theme="dark"] .themer .i-sun{display:none}
  :root[data-theme="dark"] .themer .i-moon{display:block}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .themer .i-sun{display:none}
    :root:not([data-theme="light"]) .themer .i-moon{display:block}
  }

  .notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
  @media (max-width:780px){.notes{grid-template-columns:1fr}}
  .note{border-left:2px solid var(--brand);padding-left:16px}
  .note b{display:block;font-size:16px;font-weight:700;margin-bottom:4px}
  .note p{font-size:16px;color:var(--ink-2);line-height:1.5}

  /* ══ возможности ══ */
  .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
  @media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:560px){.grid-3{grid-template-columns:1fr}}
  .feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
  .feat .ic{width:36px;height:36px;border-radius:10px;background:var(--brand-wash);color:var(--brand);
            display:grid;place-items:center;margin-bottom:13px}
  .feat h3{font-size:20.4px;font-weight:700;margin-bottom:8px}
  .feat p{font-size:16px;color:var(--ink-2);line-height:1.5}

  /* ══ сравнение ══ */
  /* Наша колонка — приподнятая белая карточка на затенённой полосе.
     Ряды одной высоты: разнобой по высоте и был главной неаккуратностью. */
  .duel{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr) minmax(0,1fr);
        column-gap:0;align-items:stretch}
  @media (max-width:1040px){.duel{grid-template-columns:minmax(0,196px) minmax(0,1fr) minmax(0,1fr)}
                          .duel > *{padding-inline:16px;font-size:16px}}
  .duel > *{display:flex;align-items:center;min-height:54px;padding:10px 20px;font-size:16px;
            line-height:1.4}
  .d-crit{color:var(--ink-2)}
  .d-a{color:var(--ink-3);border-bottom:1px solid var(--line)}
  .d-b{color:var(--ink);font-weight:600;background:var(--surface);
       border-inline:1px solid var(--brand);border-bottom:1px solid var(--line-2);gap:10px}
  .d-b + .d-crit{border-top:0}
  .duel .hd{min-height:0;padding-bottom:13px;padding-top:0;align-items:flex-end;
            font-family:"IBM Plex Mono",monospace;font-size:12.6px;letter-spacing:.14em;
            text-transform:uppercase;font-weight:500;color:var(--ink-3)}
  .duel .hd.d-b{color:var(--brand);font-weight:600;padding-top:20px;
                border-top:1px solid var(--brand);border-bottom:1px solid var(--line-2);
                border-radius:14px 14px 0 0;box-shadow:0 -14px 30px -24px rgba(8,22,25,.5)}
  .duel .ft{min-height:0;padding-top:20px;padding-bottom:0;border-bottom:0}
  .duel .ft.d-b{padding:16px 20px 20px;border-top:0;border-bottom:1px solid var(--brand);
                border-radius:0 0 14px 14px;display:block}
  .duel .ft.d-b .btn{width:100%}
  .duel .ft.sum{grid-column:1 / 3;color:var(--ink-3);font-size:16px;align-items:flex-start}
  .d-b .tick{width:16px;height:16px;border-radius:5px;background:var(--brand);color:var(--brand-ink);
             display:grid;place-items:center;font-size:9.5px;font-weight:700;flex:0 0 auto}
  .d-a .dash{width:16px;height:16px;display:grid;place-items:center;color:var(--ink-3);
             opacity:.6;flex:0 0 auto;margin-right:10px;font-size:13px}
  .d-crit{border-bottom:1px solid var(--line)}
  .duel .hd.d-crit,.duel .hd.d-a{border-bottom:1px solid var(--line)}

  @media (max-width:800px){
    .duel{grid-template-columns:1fr;row-gap:0}
    .duel > *{padding:10px 16px;min-height:0}
    .duel .hd{display:none}
    .d-crit{font-weight:700;color:var(--ink);background:var(--surface-2);border-bottom:0;
            border-radius:12px 12px 0 0;margin-top:13px;padding-top:13px;font-size:16px}
    .d-a{border:1px solid var(--line);border-top:0;border-bottom:0;padding-block:12px}
    .d-b{border:1px solid var(--brand);border-radius:0 0 12px 12px;padding-block:12px}
    .duel .ft.sum{grid-column:auto;padding-top:20px}
    .duel .ft.d-b{border-radius:12px;margin-top:6px}
  }

  /* ══ тарифы ══ */
  .price{margin:0;font-size:41.9px;font-weight:900;letter-spacing:-.035em;line-height:1}
  .tariff{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:16px;align-items:stretch}
  @media (max-width:940px){.tariff{grid-template-columns:minmax(0,1fr)}}
  .tariff-main,.tariff-extras{border-radius:var(--r);padding:26px;display:flex;flex-direction:column;min-width:0}
  .tariff-main{background:var(--surface);border:1px solid var(--brand);box-shadow:var(--shadow)}
  .tariff-tag{margin:0 0 20px;font-family:"IBM Plex Mono",monospace;font-size:12.6px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
  .tariff-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .tariff-step{padding:20px 20px;display:grid;gap:10px;align-content:start;min-width:0}
  .tariff-step+.tariff-step{border-left:1px solid var(--line);background:var(--brand-wash)}
  .tariff-who{margin:0;font-size:16px;color:var(--ink-2);line-height:1.4}
  .tariff-who b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
  .tariff-year{white-space:nowrap}
  .feat-link{display:inline-flex;align-items:center;gap:6px;margin-top:13px;font-size:16px;font-weight:600;color:var(--brand);text-decoration:none}
  .feat-link::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
  .feat-link:hover{text-decoration:underline;text-underline-offset:3px}
  .tariff-feats{list-style:none;margin:20px 0 26px;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px 20px;font-size:16px;color:var(--ink-2)}
  .tariff-feats li{display:flex;gap:10px;min-width:0}
  .tariff-feats li::before{content:"✓";color:var(--ok);font-weight:700;flex:0 0 auto}
  .tariff-cta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:13px 20px}
  .tariff-cta span{font-size:16px;color:var(--ink-3)}
  /* «Дополнительно»: тёмная панель с плитками-переключателями; отмеченное уходит в заявку. */
  .tariff-extras{position:relative;overflow:hidden;isolation:isolate;background:var(--cta-bg);color:var(--cta-ink);border:1px solid var(--cta-edge);box-shadow:var(--shadow)}
  .tariff-extras::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(90% 60% at 100% 0%,rgba(67,199,209,.28),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(216,71,29,.16),transparent 65%),
      linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/24px 24px}
  .x-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:16px}
  .x-head h3{margin:0;font-size:20.4px;font-weight:800;letter-spacing:-.01em}
  .x-head p{margin:0;font-size:16px;opacity:.72}
  .x-list{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .x-item{position:relative;width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;gap:8px 13px;align-items:start;text-align:left;
    padding:13px 13px 13px;border-radius:12px;border:1px solid var(--cta-edge);background:var(--cta-face);color:inherit;font:inherit;cursor:pointer;
    transition:transform .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease}
  .x-item:hover{transform:translateY(-2px);border-color:rgba(143,227,234,.55);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
  .x-item:focus-visible{outline:2px solid #8FE3EA;outline-offset:2px}
  .x-item[aria-pressed="true"]{border-color:#8FE3EA;background:rgba(143,227,234,.16)}
  .x-ic{grid-row:1/3;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(143,227,234,.14);color:#8FE3EA}
  .x-txt{min-width:0;padding-right:26px}
  .x-txt b{display:block;font-size:16px;font-weight:700;line-height:1.3;margin-bottom:3px}
  .x-txt span{display:block;font-size:16px;line-height:1.4;opacity:.9}
  .x-price{grid-column:2;justify-self:start;font-style:normal;font-size:12.6px;font-weight:700;letter-spacing:.01em;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.1);white-space:nowrap}
  .x-check{position:absolute;top:13px;right:13px;width:22px;height:22px;border-radius:6px;border:2px solid rgba(143,227,234,.7);transition:background-color .16s ease,border-color .16s ease}
  .x-item[aria-pressed="true"] .x-check{border-color:#8FE3EA;background:#8FE3EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2305191C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
  .x-foot{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
  .x-talk{background:rgba(255,255,255,.1);color:var(--cta-ink);border-color:rgba(143,227,234,.6)}
  .x-talk:hover{background:rgba(143,227,234,.18);border-color:#8FE3EA}
  .x-count{min-width:22px;height:22px;display:inline-grid;place-items:center;padding:0 6px;border-radius:99px;background:#8FE3EA;color:#05191C;font-size:12.6px;font-weight:800}
  .x-hint{font-size:12.6px;opacity:.7}
  /* 0.49.17 «Обсудить» on the line of «Начать бесплатно»: under that button sit 12px and two lines of the note (three below 1180px),
     so the right footer keeps the same room under its button. The hint stays beside the button and wraps inside its own column. */
  @media (min-width:941px){.x-foot{flex-wrap:nowrap;padding-bottom:87px}.x-hint{min-width:0}}
  @media (min-width:941px) and (max-width:1180px){.x-foot{padding-bottom:87px}.tariff-cta>span{min-height:63px}}
  @media (max-width:1180px) and (min-width:941px){.x-list{grid-template-columns:minmax(0,1fr)}}
  @media (max-width:540px){.tariff-main,.tariff-extras{padding:20px}.tariff-steps{grid-template-columns:minmax(0,1fr)}.tariff-step+.tariff-step{border-left:0;border-top:1px solid var(--line)}.x-list{grid-template-columns:minmax(0,1fr)}.tariff-cta .btn,.x-talk{width:100%}}

  /* ══ сегменты ══ */
  .segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);
        border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  @media (max-width:1000px){.segs{grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (max-width:520px){.segs{grid-template-columns:1fr}}
  .seg{background:var(--surface);padding:20px 20px}
  .seg b{display:block;font-size:20.4px;font-weight:700;margin-bottom:8px}
  .seg p{font-size:16px;color:var(--ink-2);line-height:1.5}

  /* ══ вопросы ══ */
  /* 0.49.55 The whole question row is the tap area (at least 44px): the padding moved from the block to the question itself. */
  details.q{border-bottom:1px solid var(--line);padding:0}
  details.q[open]{padding-bottom:20px}
  details.q[open] summary{padding-bottom:0}
  details.q summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;gap:13px;padding:20px 0;
                    align-items:center}
  details.q summary::-webkit-details-marker{display:none}
  details.q summary::after{content:"+";margin-left:auto;color:var(--brand);font-size:20.4px;font-weight:400;line-height:1}
  details.q[open] summary::after{content:"–"}
  details.q p{margin-top:10px;color:var(--ink-2);font-size:16px;max-width:72ch}

  /* ══ призыв ══ */
  .cta{background:var(--cta-bg);color:var(--cta-ink);border-radius:20px;padding:clamp(26px,4vw,53px);
       display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);gap:clamp(26px,4vw,42px);
       align-items:start}
  @media (max-width:880px){.cta{grid-template-columns:minmax(0,1fr)}}
  @media (max-width:420px){
    .cta{padding:20px 20px}
  }
  .cta h2{font-size:clamp(25.9px,3.5vw,41.9px);font-weight:800;line-height:1.08}
  .cta p{margin-top:13px;opacity:.85;max-width:52ch;font-size:16px}
  .cta-act{display:flex;flex-direction:column;gap:10px;min-width:0}
  .next{margin-top:33px;display:grid;gap:13px}
  .next .t{font-family:"IBM Plex Mono",monospace;font-size:12.6px;letter-spacing:.18em;
           text-transform:uppercase;opacity:.65}
  .next li{display:grid;grid-template-columns:26px 1fr;gap:13px;align-items:start;font-size:16px;opacity:.92}
  .next ol{list-style:none;margin:0;padding:0;display:grid;gap:13px}
  .next .n{font-family:"IBM Plex Mono",monospace;font-size:12.6px;font-weight:600;opacity:.6;padding-top:2px}

  /* ── форма заявки ── */
  .lead{background:var(--surface);color:var(--ink);border-radius:14px;padding:20px;
        display:grid;gap:13px}
  .lead h3{font-size:20.4px;font-weight:700}
  .lead .sub{font-size:16px;color:var(--ink-3);margin-top:-6px}
  .f{display:grid;gap:6px}
  .f label{font-size:12.6px;color:var(--ink-2)}
  .f label .req{color:var(--signal)}
  .lead input[type=text],.lead input[type=tel],.lead textarea{
    width:100%;font-family:inherit;font-size:16px;color:var(--ink);
    background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 13px;
  }
  .lead textarea{min-height:74px;resize:vertical;line-height:1.45}
  .lead input:focus,.lead textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}
  .lead input[aria-invalid="true"]{border-color:var(--bad);background:var(--bad-wash)}
  .f .err{font-size:12.6px;color:var(--bad);min-height:0}
  /* 0.49.11 Пустая строка ошибки не занимает места: под полями и перед кнопкой ровные отступы.
     Ошибка стоит сразу под своим полем (отступ абзаца из .cta p ей не нужен),
     ошибка согласия — вплотную к галке, а не посередине до кнопки. */
  .lead .err{margin:0;opacity:1;max-width:none}
  .lead .err:empty{display:none}
  .lead > .err{font-size:12.6px;color:var(--bad);margin-top:-8px}
  .f2{display:grid;grid-template-columns:1fr 1fr;gap:13px} /* 0.49.11 тот же шаг, что между полями */
  @media (max-width:420px){.f2{grid-template-columns:1fr}}
  .agree{display:flex;gap:10px;align-items:flex-start;font-size:12.6px;color:var(--ink-3);line-height:1.45;
         border-radius:10px;padding:10px 10px;margin-inline:-10px;
         transition:background .18s ease, box-shadow .18s ease}
  .agree input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--brand);flex:0 0 auto}
  .agree a{color:var(--brand)}
  /* Галка согласия — единственное поле, которое человек пропускает молча.
     Подсвечиваем весь блок, а не только надпись под ним: иначе не замечают. */
  .agree.bad{background:var(--bad-wash);box-shadow:inset 0 0 0 1px var(--bad);color:var(--ink-2)}
  .agree.bad input{outline:2px solid var(--bad);outline-offset:2px;border-radius:4px}
  /* ловушка для роботов: человек её не видит и не наводит на неё фокус */
  .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .lead button[type=submit]{width:100%;background:#D8471D;color:#fff;border:0;border-radius:11px;
    padding:13px;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
  .lead button[type=submit]:hover{filter:brightness(1.07)}
  .lead button[type=submit][disabled]{opacity:.6;cursor:default;filter:none}
  .lead-msg{font-size:16px;line-height:1.5;padding:13px 13px;border-radius:10px;display:grid;gap:8px}
  .lead-msg.ok{background:var(--ok-wash);color:var(--ok)}
  .lead-msg.warn{background:var(--warn-wash);color:var(--warn)}
  .lead-msg b{font-weight:700}

  footer{border-top:1px solid var(--line);padding-block:26px 33px;color:var(--ink-3);font-size:16px}
  .foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-2);text-decoration:none}
  .foot a:hover{color:var(--brand);text-decoration:underline}
  .foot{display:flex;flex-wrap:wrap;gap:13px 26px;align-items:center;justify-content:space-between}
  .foot-legal{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
  .foot .copy{color:var(--ink-2);font-weight:600}
  @media (max-width:640px){.foot{display:grid;gap:20px}.foot-legal{display:grid;gap:10px}}
  .disclaimer{margin-top:16px;font-size:12.6px;color:var(--ink-3);line-height:1.55;max-width:88ch}

  @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

  /* ── живой план на первом экране ── */
  .plancard{background:rgba(9,32,37,.72);border:1px solid var(--sc-line);border-radius:16px;
        overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.85)}
  .plancard-h{display:flex;align-items:center;gap:9px;padding:12px 14px;
          border-bottom:1px solid var(--sc-line);font-size:12.5px;font-weight:600;color:#fff}
  .plancard-h span{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
               letter-spacing:.14em;text-transform:uppercase;color:var(--sc-ink-2);font-weight:400}
  .plancard svg.plan{display:block;width:100%;height:auto}
  /* 0.49.25 План перерисовывается каждый кадр. Своим слоем и с границей раскладки он не тянет
     за собой перерисовку карточки, её теней и страницы вокруг, поэтому прокрутка мимо него ровная. */
  .plancard{contain:layout paint}
  .plancard svg.plan{will-change:transform}
  .plancard-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sc-line)}
  .plancard-foot div{padding:11px 13px;border-left:1px solid var(--sc-line)}
  .plancard-foot div:first-child{border-left:0}
  .plancard-foot b{display:block;font-size:16px;font-weight:700;color:#fff;
               font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .plancard-foot span{display:block;margin-top:2px;font-size:10.5px;color:var(--sc-ink-2);
                  font-family:"IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}

  /* Всё на плане двигает один скрипт от одной фазы: и след, и сотрудник,
     и цвета меток. Раньше след вела CSS-анимация, а сотрудника SMIL —
     два разных таймера, и он понемногу отставал от линии. */
  .plan .dot{transition:fill .3s ease}
  .plan #heroMiss,.plan #heroInc{transition:opacity .3s ease}
  .plan #heroFeedDot{transition:fill .3s ease}
  .plan.go .walker{opacity:1}
  .plan .walker{opacity:0}
  .plancard{position:relative}
  .plancard::after{
    content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
    box-shadow:inset 0 0 60px -20px rgba(63,194,204,.22);
  }
  @media (prefers-reduced-motion:reduce){ .plan .walker{opacity:1} }
  /* ── нарисованные QR-таблички в «Запуске» ── */
  .qrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0;width:100%}
  /* Карточки листа — сетка одинаковых ячеек: и сам код, и подпись под ним
     занимают одно и то же место, иначе лист выглядит собранным наспех. */
  .qr-card{background:#fff;border:1px solid #D6E0E2;border-radius:9px;padding:9px;text-align:center;
           min-width:0;display:grid;grid-template-rows:1fr auto;gap:6px}
  .qr-card svg{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:3px}
  .qr-card span{display:block;font-family:"IBM Plex Mono",monospace;font-size:8.5px;line-height:1.25;
                letter-spacing:.04em;color:#475C62;min-height:2.5em;
                display:flex;align-items:center;justify-content:center;text-align:center}
  /* 0.44.5 Таблички меньше: лист читается как образец, а не занимает полблока. */
  @media (min-width:761px){.qrsheet{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:42px;padding:26px 33px}}
  @media (max-width:760px){.qrs{max-width:312px}}
  .qrs{gap:10px}
  .qr-card{padding:9px}
  .qr-card span{font-size:9px}
  @media (max-width:760px){.qr-card{padding:9px}.qr-card span{font-size:8.5px;letter-spacing:.02em}}
  /* ── вход: две кнопки, как на прежней главной; цвета одинаковые в обеих темах ── */
  .entry{display:flex;gap:10px;flex:0 0 auto}
  .entry-card{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 13px 8px 10px;border-radius:12px;
    color:#EEFBFC;text-decoration:none;box-shadow:0 4px 15px rgba(0,0,0,.13);transition:filter .15s ease,transform .15s ease}
  .worker-entry{background:#176745;border:1px solid #318B68}
  .company-entry{background:#0C6673;border:1px solid #26939F}
  .entry-card:hover{filter:brightness(1.12)}
  .entry-card:active{transform:translateY(1px)}
  .entry-card:focus-visible{outline:2px solid #6FE0E8;outline-offset:2px}
  .entry-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.08);color:#A5F1DA;flex:0 0 auto}
  .entry-tx{display:grid;min-width:0}
  .entry-card strong{font-size:16px;font-weight:700;line-height:1.3;white-space:nowrap}
  .entry-card small{font-size:12.6px;line-height:1.35;color:#B4D7DB;white-space:nowrap}
  .entry-arrow{font-size:16px;line-height:1;color:#CBF3EE;margin-left:2px}
  @media (max-width:1240px){.entry-card small{display:none}.entry-card{min-height:44px}}
  @media (max-width:1180px) and (min-width:561px){.nav-links{display:none}.nav-in .themer{margin-left:auto}}
  @media (max-width:1480px) and (min-width:1181px){.nav-links{gap:20px;font-size:16px}.nav-in{gap:16px}}
  .nav-end{display:contents}
  /* 0.44.5 Кнопки входа как в 0.43, шапка по ним: 20 px сверху и снизу. Высота кнопок задана точно,
     чтобы шапка, сдвиг героя и якоря считались от одной переменной --nav-h. */
  :root{--nav-h:94px}
  @media (max-width:1240px){:root{--nav-h:88px}}
  @media (max-width:560px){:root{--nav-h:64px}}
  @media (min-width:561px){.entry-card{min-height:0;height:calc(var(--nav-h) - 40px)}}
  /* 0.44.5 Компоновка шапки на широком экране: логотип слева, кнопки входа справа, а разделы и кнопка темы
     одной группой посередине. От последнего раздела до темы столько же, сколько между разделами:
     отступ ссылки (--lp) + промежуток (--lg) + отступ ссылки, то есть у темы margin-left = --lg + --lp. */
  @media (min-width:1181px){
    .nav .wrap{max-width:1180px;padding-inline:16px}
    /* 0.49.60 Между разделами 18 px (по 9 с каждой стороны), а не 12: в меню пять пунктов, «Кому» убран — этот раздел сразу под первым экраном.
       Больше нельзя: кнопки входа вышли бы за правый край содержимого страницы (при 10 — на 9 px). */
    .nav-in{gap:0;--lp:9px;--lg:0px}
    .nav-links{margin-left:auto;gap:var(--lg);padding-left:16px}
    /* Свободное место делится поровну; справа добавлен отступ ссылки, чтобы до текста первого раздела
       и от темы до кнопок входа на глаз было одинаково. */
    .nav-links a{padding:8px var(--lp);border-radius:999px;transition:background .15s ease,color .15s ease}
    .nav-links a:hover{background:color-mix(in srgb, var(--brand) 9%, transparent)}
    .nav.clear .nav-links a:hover{background:rgba(233,241,242,.08)}
    .nav-in .themer{margin-left:calc(var(--lg) + var(--lp))}
    .entry{margin-left:auto;padding-left:calc(16px + var(--lp))}
  }
  @media (max-width:560px){
    /* На телефоне шапка в две строки и не липнет: кнопки входа нужны наверху, а не поверх текста. */
    .nav,.nav.solid,.nav.clear{position:relative;top:auto;background:var(--sc);border-bottom:1px solid var(--sc-line);backdrop-filter:none}
    .nav .brand{color:#fff}.nav .brand svg{color:var(--sc-cy)}
    .nav .themer{border-color:rgba(233,241,242,.26);color:rgba(233,241,242,.78)}
    .hero{margin-top:0;padding-top:26px}
    .nav-in{flex-wrap:wrap;height:auto;padding-block:10px 13px;row-gap:13px}
    .nav-in .themer{margin-left:auto}
    .entry{order:3;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .entry-card{min-height:58px;padding:10px 10px;gap:8px}
    .entry-card small{display:block;font-size:12.6px}
    .entry-card strong{font-size:16px;white-space:normal}
    .entry-arrow{margin-left:auto}
  }

  /* 0.44.4 Кнопка «Наверх» в правом нижнем углу, как на прежней главной. */
  .to-top{position:fixed;right:24px;bottom:24px;z-index:55;display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;
          border:1px solid #D6E0E2;border-radius:12px;background:#DFEDEE;color:#081619;box-shadow:0 6px 24px rgba(8,22,25,.1);
          font-family:inherit;font-size:12.6px;font-weight:600;line-height:1;cursor:pointer}
  .to-top[hidden]{display:none}
  .to-top>span:first-child{font-size:20.4px;line-height:1}
  .to-top:hover{border-color:var(--brand);color:var(--brand)}
  .to-top:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .to-top{border-color:#347982;background:rgba(16,51,58,.96);color:#D4F7F8;box-shadow:0 6px 24px rgba(0,0,0,.33)}
    :root:not([data-theme="light"]) .to-top:hover{background:#19515B;color:#fff}}
  :root[data-theme="dark"] .to-top{border-color:#347982;background:rgba(16,51,58,.96);color:#D4F7F8;box-shadow:0 6px 24px rgba(0,0,0,.33)}
  :root[data-theme="dark"] .to-top:hover{background:#19515B;color:#fff}
  @media (max-width:760px){.to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:48px;padding:10px 13px}}
  @media print{.to-top{display:none!important}}

  /* ══ 0.44.6 элементы прошлой главной ══ */
  /* «Сводка в офисе, маршрут в телефоне»: кабинет и телефон исполнителя на одном снимке. */
  .look{position:relative;margin-top:33px;padding:0 clamp(53px,13vw,178px) clamp(26px,4vw,53px) 0}
  .look figure{margin:0}
  .look-desk .win{box-shadow:var(--shadow-lg)}
  .look-desk .win img{aspect-ratio:1600/1111}
  .look-phone{position:absolute;right:0;bottom:0;width:clamp(128px,19vw,262px)}
  .look-phone .phone{border-width:clamp(5px,.7vw,8px);border-radius:clamp(22px,2.6vw,36px)}
  @media (max-width:560px){.look{padding:0;display:flex;justify-content:center}.look-desk{display:none}.look-phone{position:static;width:min(262px,72vw)}}
  /* «Кому подходит»: карточки с иконкой, как сегменты на прошлой главной. */
  .segs{gap:13px;background:none;border:0;border-radius:0;overflow:visible}
  .seg{border:1px solid var(--line);border-radius:var(--r);padding:20px}
  .seg-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;
          background:var(--brand-wash);color:var(--brand);margin-bottom:13px}
  .seg b{font-size:20.4px}
  .seg p{font-size:16px}
  
  /* 0.49.6 «Как это работает» как «Посмотреть кабинет» в первом экране: тёмная кнопка со светлой рамкой, видна в обеих темах. */
  /* 0.49.7 Как «Посмотреть кабинет» в первом экране: прозрачная, с заметной рамкой; в светлой теме рамка и текст тёмные. */
  .btn-outline{background:transparent;color:var(--ink);border-color:rgba(7,22,26,.38)}
  .btn-outline:hover{border-color:var(--brand);color:var(--brand)}
  :root[data-theme="dark"] .btn-outline{color:#fff;border-color:rgba(233,241,242,.3)}
  :root[data-theme="dark"] .btn-outline:hover{border-color:var(--sc-cy);color:var(--sc-cy)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .btn-outline{color:#fff;border-color:rgba(233,241,242,.3)}
    :root:not([data-theme="light"]) .btn-outline:hover{border-color:var(--sc-cy);color:var(--sc-cy)}
  }
  /* 0.49.7 Пример отчёта заказчику под «Возможностями»: две страницы веером и ссылка на PDF. */
  .repsheet{scroll-margin-top:calc(var(--nav-h) + 24px + env(safe-area-inset-top,0px));margin-top:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
            display:grid;grid-template-columns:minmax(0,1fr);gap:26px;padding:20px;align-items:center}
  @media (min-width:761px){.repsheet{grid-template-columns:minmax(0,1fr) minmax(0,1.618fr);gap:53px;padding:33px 42px}}
  /* 0.49.9 Box ends where the back sheet ends: the space under the sheets equals the space above them. */
  .rep-pages{position:relative;display:block;width:100%;max-width:300px;aspect-ratio:300/331;margin-inline:auto}
  .rep-pages img{position:absolute;width:74%;height:auto;border-radius:4px;background:#fff;
                 box-shadow:0 1px 2px rgba(8,22,25,.12),0 18px 34px -16px rgba(8,22,25,.45);transition:transform .25s ease}
  .rep-back{right:2%;top:4%;transform:rotate(5deg);opacity:.96}
  .rep-front{left:2%;top:0;transform:rotate(-3deg)}
  .rep-pages:hover .rep-front{transform:rotate(-4deg) translateY(-4px)}
  .rep-pages:hover .rep-back{transform:rotate(7deg) translateX(4px)}
  .rep-pages:focus-visible{outline:2px solid var(--brand);outline-offset:6px;border-radius:8px}
  .rep-text h3{font-size:20.4px;font-weight:700;margin-bottom:8px}
  .rep-text>p{font-size:16px;color:var(--ink-2);max-width:56ch}
  .rep-list{list-style:none;margin:13px 0 0;padding:0;display:grid;gap:8px;font-size:16px;color:var(--ink-2)}
  .rep-list li{display:grid;grid-template-columns:18px 1fr;gap:8px}
  .rep-list li::before{content:"✓";color:var(--ok,#1BA35F);font-weight:700}
  .rep-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px}
  /* 0.49.9 Room on both sides: a browser that draws the text wider than it measured still keeps it inside the frame. */
  .rep-actions .btn{padding-inline:33px;min-width:220px}
  .rep-note{font-size:12.6px;color:var(--ink-3)}
  @media (prefers-reduced-motion:reduce){.rep-pages img{transition:none}}
  /* 0.49.16 Same text as «Оставьте контакт…» above, and the same 47px from the list as the list has from that text. */
  .cta .mailme{margin-top:42px;font-size:16px;opacity:.85}
  .mailme a{color:inherit;text-decoration:underline;text-underline-offset:3px}
  .foot-end{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}

  /* 0.49.3 Скриншоты кабинета и приложения увеличиваются по нажатию.
     Окно просмотра одинаково тёмное в обеих темах: это снимок экрана, как «стекло» макетов. */
  .zoomable{cursor:zoom-in;outline:none}
  .zoomable:focus-visible{box-shadow:0 0 0 3px var(--brand-2)}
  .lightbox{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 16px 24px;
            background:rgba(3,10,12,.9);opacity:0;transition:opacity .2s ease;touch-action:pan-y pinch-zoom}
  .lightbox[hidden],.lightbox button[hidden]{display:none}
  .lightbox.open{opacity:1}
  .lightbox img{display:block;max-width:min(calc(100vw - 140px),1600px);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);width:auto;height:auto;object-fit:contain;
                border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);transform:scale(.97);transition:transform .2s ease;
                cursor:default;user-select:none;-webkit-user-select:none}
  .lightbox.open img{transform:none}
  .lightbox img.lb-phone{border-radius:26px}
  .lightbox button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
                   border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
                   font:400 26px/1 system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
  .lightbox button:hover{background:rgba(255,255,255,.2)}
  .lightbox button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .lb-close{top:max(10px,env(safe-area-inset-top,0px));right:12px}
  .lb-prev,.lb-next{top:50%;margin-top:-20px}
  .lb-prev{left:12px}.lb-next{right:12px}
  .lb-cap{margin:0;text-align:center;color:rgba(255,255,255,.82);font-size:16px;line-height:1.3}
  .lb-cap:empty{display:none}
  @media (max-width:640px){.lb-prev,.lb-next{top:auto;bottom:max(8px,env(safe-area-inset-bottom,0px));margin-top:0}
     .lightbox{padding:64px 12px calc(76px + env(safe-area-inset-bottom,0px))}
     .lightbox img{max-width:calc(100vw - 24px);max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}}
  html.lb-lock,html.lb-lock body{overflow:hidden}

  /* На телефоне экраны приложения — карусель: один экран по центру, соседние выглядывают, точки под ней. */
  .phone-dots{display:none}
  @media (max-width:880px){
    .phones{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70vw,280px);justify-items:center;
            gap:18px;padding-inline:calc(50% + 16px - min(35vw,140px));margin-inline:-16px;scroll-padding-inline:0;
            scrollbar-width:none;overscroll-behavior-x:contain}
    .phones::-webkit-scrollbar{display:none}
    .phone-wrap{max-width:none;scroll-snap-align:center;scroll-snap-stop:always;transition:opacity .25s ease,transform .25s ease}
    .phones.carousel .phone-wrap:not(.current){opacity:.55;transform:scale(.94)}
    .phone-dots{display:flex;justify-content:center;gap:4px;margin-top:6px}
    .phone-dots button{width:44px;height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
    .phone-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line);transition:width .2s ease,background .2s ease}
    .phone-dots button[aria-current="true"]::before{width:22px;border-radius:4px;background:var(--brand-2)}
  }

/* 0.49.4 Инструкция установки на самой главной */
.install-sheet{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(3,10,12,.72);overflow-y:auto}
.install-sheet[hidden],.install-sheet [hidden]{display:none}
.install-card{position:relative;width:min(460px,100%);margin:auto;padding:26px 26px 26px;border-radius:20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-lg);display:grid;gap:13px}
.install-card h2{margin:4px 0 0;font-size:25.9px;line-height:1.15;letter-spacing:-.01em}
.install-card h3{margin:6px 0 4px;font-size:20.4px}
.install-card p{margin:0}
.install-card ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2);font-size:16px;line-height:1.5}
.install-icon{width:56px;height:56px;border-radius:14px}
.install-lead{color:var(--ink-2);font-size:16px;line-height:1.5}
.install-muted{color:var(--ink-3);font-size:12.6px;line-height:1.5}
.install-address{font-size:12.6px;color:var(--ink-2)}
.install-address strong{color:var(--ink)}
.install-note{padding:10px 13px;border-radius:12px;background:var(--warn-wash);color:var(--ink);font-size:16px}
.install-card .btn{width:100%;justify-content:center}
.install-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);font-size:25.9px;line-height:1;cursor:pointer}
.install-x:hover{background:var(--sunken);color:var(--ink)}
.install-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:480px){.install-card{padding:26px 20px 20px;border-radius:18px}.install-card h2{font-size:25.9px}}

  /* ══ 0.49.53 ══ */
  /* «Сколько это стоит в месяц» — вторая часть раздела «Цена вопроса» */
  .calc-head{margin:68px 0 26px}
  .calc-head h3{margin:0;font-size:25.9px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
  .calc-head p{margin:10px 0 0;max-width:49rem;font-size:16px;color:var(--ink-2);text-wrap:pretty}
  @media (max-width:760px){.calc-head{margin-top:42px}}
  /* «Возможности»: шесть карточек на виду, ещё две по нажатию (0.49.60) */
  .feat-more{margin-top:16px}
  .feat-more>summary{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 20px;border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;list-style:none}
  .feat-more>summary::-webkit-details-marker{display:none}
  .feat-more>summary::after{content:"+";font-size:20.4px;line-height:1;color:var(--brand)}
  .feat-more[open]>summary::after{content:"\2212"}
  .feat-more>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  .feat-more>.grid-3{margin-top:16px}
  /* Лозунг — заголовок финального блока, по строке на фразу */
  .cta h2.slogan span{display:block}

/* 0.49.60 Доверие отдельной полосой под тарифом: это не функция продукта, а условия работы. */
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:26px;
       background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.trust-item{background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:4px}
.trust-item b{font-size:16px;font-weight:700}
.trust-item span{font-size:16px;color:var(--ink-2);line-height:1.45}
@media (max-width:760px){.trust{grid-template-columns:1fr}}
/* 0.49.60 Откуда сравнение: под выводом, мелко. */
.duel .ft.sum>span{display:flex;flex-direction:column;gap:8px}
.duel-src{font-size:12.6px;line-height:1.5;color:var(--ink-2)}