/* ============================================================
   shainote — Landing sections
   Same design system as main.css (white + brand green, Inter)
   ============================================================ */

.section.alt { background: var(--surface); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto clamp(38px, 5vw, 60px); }
.section-head p { color: var(--muted); margin-top: .9rem; font-size: 1.06rem; }
.slot-note { display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-size:.8rem; font-weight:600; color: var(--brand-700); background: var(--tint); padding:.35rem .8rem; border-radius: var(--r-pill); }

/* ---- Social-proof: client logos ---- */
.proof { text-align:center; }
.proof .lbl { font-size:.9rem; color: var(--muted); font-weight:600; }
/* Infinite auto-scrolling logo marquee */
.marquee {
  position: relative; margin-top: 30px; overflow: hidden;
  /* В маске black означает «непрозрачно», а не цвет: это альфа-стоп, и палитра сюда не ходит. */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
}
.marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee-scroll 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Logos are trimmed to their content box, so display height == optical height.
   Three tiers keep cap-height/emblem weight consistent across shapes. */
.clogo {
  height: 32px; width:auto; max-width: 230px; object-fit: contain; display:block;
  margin-inline: clamp(26px, 3.2vw, 48px);
  filter: grayscale(1); opacity:.62;
  transition: filter .25s var(--ease-out), opacity .25s var(--ease-out);
}
/* emblem + text horizontal lockups: taller so their text matches the wordmarks */
.clogo.lockup { height: 46px; max-width: 150px; }
/* portrait / square emblems: tallest, pictorial weight balances the wordmarks */
.clogo.mark { height: 52px; max-width: 84px; }
.clogo:hover { filter: grayscale(0); opacity:1; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee { -webkit-mask-image:none; mask-image:none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 26px; }
  .clogo { transition:none; }
}

/* ---- Features grid ---- */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.feature { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 24px; transition: transform .2s var(--ease-out), box-shadow .2s; }
@media (hover: hover) { .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.feature .fic { width:48px; height:48px; border-radius:14px; background: var(--tint); display:grid; place-items:center; color: var(--brand-700); }
.feature h3 { font-size: var(--fs-title-xs); margin-top:18px; }
.feature p { color: var(--muted); font-size:.92rem; margin-top:8px; }

/* ---- Три акта на одной оси ----
   Ось связывает акты в одну встречу, а не в три разных. Маркер обведён цветом
   секции, поэтому линия проходит за ним и не рвётся. Панели шагов убраны: они
   повторяли крупные экраны, и секция говорила одно и то же дважды. */
.acts { list-style:none; margin:0; padding:0; position:relative; display:flex; flex-direction:column; gap: clamp(30px, 3.4vw, 46px); }
.acts::before { content:""; position:absolute; left:23px; top:26px; bottom:26px; width:2px; background: var(--line); }
.act-head { display:flex; align-items:flex-start; gap:24px; }
.act-n {
  width:48px; height:48px; flex:none; border-radius:50%;
  background: var(--ink); color:#fff; display:grid; place-items:center;
  font-weight:800; font-size:1.15rem; line-height:1;
  border:4px solid var(--surface); position:relative; z-index:1;
}
.act-head h3 { font-size:1.5rem; margin-top:6px; }
.act-head p { color: var(--muted); margin-top:8px; max-width:62ch; line-height:1.55; }
.act-show { margin-left:72px; margin-top:16px; }

/* ---- Карточка задачи ----
   Кадр ведёт карточку, под ним задача, результат и подпись «кому». Живёт только
   внутри ленты: ширину колонки и равную высоту даёт она, поэтому ни subgrid, ни
   :has() для фотополосы здесь больше не нужны — раньше карточка стояла в сетке
   .slices и то и другое было обязательным. */
.slice {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .2s var(--ease-out), box-shadow .2s;
}
@media (hover: hover) { .slice:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.slice-photo { aspect-ratio: 16/10; background: var(--surface); overflow:hidden; }
.slice-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.slice h3 { font-size: var(--fs-title-xs); padding:20px 20px 0; }
.slice p { color: var(--muted); font-size:.92rem; padding:8px 20px 20px; }

/* «Кому» — не абзац, а подпись: она возвращает в блок аудитории, ради которых
   раньше существовал целый второй ряд карточек. Полоса под две строки и по
   центру: у части карточек подпись переносится, и без фиксированной высоты
   линейки вставали лесенкой при выровненных низах. */
.slice .whom {
  margin-top: auto; padding: 12px 20px 18px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  border-top: 1px solid var(--line);
  min-height: 70px; display: flex; align-items: center;
}
.slice p:has(+ .whom) { padding-bottom: 12px; }

/* Лента задач со снапом.
   Стрелок нет намеренно: это родная горизонтальная прокрутка, поэтому она уже
   работает пальцем, колесом и трекпадом. tabindex делает её доступной с
   клавиатуры — без него скролл-контейнер без фокусируемых детей не получает
   фокус в части браузеров. */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 54px) / 4);   /* четыре в ряд при gap 18px */
  gap: 18px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 0;
  /* overflow-x:auto делает и вертикаль скроллируемой: поля дают место подъёму
     карточки на -4px и её тени, иначе появлялась бы лишняя вертикальная полоса. */
  padding: 6px 0 16px;
}
.rail > * { scroll-snap-align: start; }
.rail:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: var(--r-lg); }

/* Ниже 1100px четыре карточки по 190px — текст в них уже не живёт. Лента
   становится настоящей лентой: две видны, третья подглядывает. */
@media (max-width: 1100px) { .rail { grid-auto-columns: 46%; } }

/* На узком видна одна карточка и край следующей — подгляд и есть подсказка, что
   лента листается. Лента выходит в поля контейнера: обрезанная карточка у самого
   края экрана читается как продолжение, а обрезанная внутри поля — как ошибка. */
@media (max-width: 860px) {
  .rail {
    grid-auto-columns: 78%;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
}

/* ---- Окно Zoom ----
   Палитра здесь ЧУЖАЯ и намеренно: это снимок другого приложения, и красить его
   в наш зелёный значит выдавать чужое за своё. Переменные заперты в компоненте —
   за его пределами эти цвета не используются никогда. Наш зелёный остаётся ровно
   в одном месте: плитке бота, потому что бот — наш. */
.zoomwin {
  --zm-bg:#0f1012; --zm-tile:#1f2023; --zm-bar:#18191c;
  --zm-line:rgba(255,255,255,.09); --zm-txt:#e9eaec; --zm-dim:#9aa0a6;
  --zm-share:#3ec06a; --zm-end:#e02d2d; --zm-live:#ff5c5c;
  --zm-chip:rgba(0,0,0,.55); --zm-oncount:#06210f;
  background: var(--zm-bg); color: var(--zm-txt);
  border-radius: var(--r-md); overflow:hidden; box-shadow: var(--shadow-lg);
}
.zw-top { display:flex; align-items:center; gap:.9rem; padding:9px 14px; font-size:.74rem; border-bottom:1px solid var(--zm-line); }
.zw-rec { display:inline-flex; align-items:center; gap:.35rem; font-weight:600; }
.zw-rec i { width:7px; height:7px; border-radius:50%; background: var(--zm-live); flex:none; }
.zw-ttl { color: var(--zm-dim); margin-inline:auto; font-weight:500; }
.zw-view { display:inline-flex; align-items:center; gap:.35rem; color: var(--zm-dim); white-space:nowrap; }

.zw-stage { display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; padding:6px; }
.zt { position:relative; margin:0; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background: var(--zm-tile); }
.zt img { width:100%; height:100%; object-fit:cover; display:block; }
.zt figcaption {
  position:absolute; left:7px; bottom:7px; z-index:2;
  display:inline-flex; align-items:center; gap:.3rem;
  background: var(--zm-chip); color:#fff;
  font-size:.72rem; font-weight:500; padding:.16rem .45rem; border-radius: var(--r-micro);
}
.zt figcaption .mic { display:inline-flex; color:#fff; opacity:.9; }
/* Активный говорящий — рамка, как в самом Zoom. Она же объясняет, откуда в
   транскрипте берётся имя спикера. */
.zt.is-speaking { outline:2px solid var(--zm-share); outline-offset:-2px; }
.zt-bot { display:grid; place-items:center; align-content:center; gap:.45rem; background:#17181a; }
.zt-bot .zt-mark { color: var(--brand); }
.zt-bot .zt-state { font-size:.72rem; font-weight:500; color: var(--zm-dim); }

.zw-bar { display:flex; align-items:center; gap:1.4rem; padding:8px 14px; background: var(--zm-bar); border-top:1px solid var(--zm-line); }
.zw-grp { display:flex; align-items:center; gap:1.15rem; }
.zw-mid { margin-inline:auto; }
.zw-b { display:inline-flex; flex-direction:column; align-items:center; gap:.15rem; color: var(--zm-txt); }
.zw-i { position:relative; display:inline-flex; align-items:flex-end; gap:1px; }
.zw-i .cv { opacity:.65; margin-bottom:3px; }
.zw-i em { position:absolute; top:-5px; right:4px; font-style:normal; font-size:.72rem; font-weight:700; background: var(--zm-share); color: var(--zm-oncount); border-radius: var(--r-pill); padding:0 .28rem; }
.zw-b b { font-size:.72rem; font-weight:500; color: var(--zm-dim); white-space:nowrap; }
.zw-b.is-share { color: var(--zm-share); }
.zw-b.is-share b { color: var(--zm-share); }
.zw-b.is-rec .zw-i { color: var(--zm-live); }
.zw-end { margin-left:.4rem; background: var(--zm-end); color:#fff; font-size:.74rem; font-weight:600; padding:.4rem .9rem; border-radius:6px; white-space:nowrap; }

@media (max-width: 900px) {
  .zw-b b { display:none; }
  .zw-grp { gap:.9rem; }
  .zw-bar { gap:.8rem; padding:8px 10px; }
}
@media (max-width: 760px) {
  .zw-ttl { display:none; }
  .zw-stage { grid-template-columns: 1fr 1fr; }
  .zt-bot { grid-column: 1 / -1; aspect-ratio: 16/6; }
  .zw-b.is-share, .zw-b.is-rec, .zw-mid .zw-b:first-child { display:none; }
}

/* ---- Панели кабинета: транскрипт и сводка ----
   Раньше это был один экран в две колонки. Разведены по актам: каждая половина
   показывается там, где о ней речь, и её не нужно искать глазами в общем окне. */
.mv-panel {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding:20px 22px 22px; display:flex; flex-direction:column; gap:14px;
  box-shadow: var(--shadow-md);
}
.mv-panel.is-result { background: var(--surface); }
.mv-colhead { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.mv-h { display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.92rem; color: var(--ink); }
.mv-h svg { color: var(--brand-700); }
.mv-meta { font-size:.78rem; color: var(--muted); }
.mv-exp { font-size:.72rem; font-weight:600; color: var(--muted); border:1px solid var(--line-strong); border-radius: var(--r-pill); padding:.22rem .6rem; white-space:nowrap; }
.mv-badge { display:inline-flex; align-items:center; gap:.35rem; align-self:flex-start; padding:.22rem .55rem; border-radius: var(--r-pill); background: var(--tint); color: var(--brand-700); font-size:.72rem; font-weight:600; }

.mv-turns { display:grid; gap:12px; }
.mv-turn { display:grid; gap:3px; }
.mv-t { font-size:.82rem; font-weight:600; color: var(--ink); }
.mv-t b { color: var(--brand-700); font-weight:700; margin-right:.35rem; }
.mv-turn p { font-size:.82rem; color: var(--text-soft); line-height:1.5; }
.mv-turn .kz { color: var(--brand-700); font-weight:600; }

.mv-secs { display:grid; gap:14px; }
.mv-sec { display:grid; gap:4px; }
.mv-sec b { font-size:.78rem; font-weight:700; color: var(--ink); }
.mv-sec p, .mv-sec li { font-size:.82rem; color: var(--text-soft); line-height:1.5; }
.mv-sec ul { margin:0; padding-left:1.1rem; display:grid; gap:3px; }

@media (max-width: 760px) {
  .acts::before { display:none; }
  .act-head { gap:16px; }
  .act-n { width:40px; height:40px; border-width:0; }
  .act-head h3 { margin-top:5px; font-size:1.15rem; }
  .act-show { margin-left:0; }
  .mv-panel { padding:16px; }
}

/* ---- Split (text + media) ---- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items:center; }
.split-rev .split-media { order: -1; }  /* desktop: alternate — media on the left */
.split .lead2 { color: var(--muted); margin-top:1rem; font-size:1.06rem; }
.pointlist { display:flex; flex-direction:column; gap:1.1rem; margin-top:1.7rem; }
.point { display:flex; gap:.85rem; }
.point .pic { width:30px; height:30px; border-radius: var(--r-xs); background: var(--tint); display:grid; place-items:center; color: var(--brand-700); flex:none; }
.point b { font-weight:600; display:block; }
.point span { color: var(--muted); font-size:.9rem; }

.media-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 22px; }
.media-title { font-size:.78rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color: var(--muted); margin-bottom:14px; }

/* language visual
   Четыре таблетки языков сняты: они выглядели кнопками и не нажимались —
   обещание взаимодействия, которого нет. Осталась легенда: она объясняет
   подсветку и ничего не обещает. */
.legend { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin:0 0 14px;
  font-size:.78rem; font-weight:600; color: var(--muted); }
.legend i { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:.4rem; vertical-align:-1px; }
.legend .d-kz { background: var(--brand-700); }
.legend .d-ru { background: var(--line-strong); }
.legend .sep { color: var(--line-strong); }
.dline { display:flex; gap:.65rem; padding:.55rem 0; border-top:1px solid var(--line); }
.dline:first-of-type { border-top:0; }
.dava { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:700; color:#06251f; flex:none; }
.dtxt { font-size:.9rem; color: var(--text-soft); line-height:1.45; }
.dtxt .kz { color: var(--brand-700); font-weight:600; }
.dtxt .nm { display:block; font-weight:600; color: var(--ink); font-size:.8rem; margin-bottom:2px; }

/* «В протоколе» — вторая половина панели. Распознавание само по себе не закрывает
   возражение «ну расшифровали, а дальше что»: под репликами показано, что из них
   получается, разделами настоящего кабинета. */
.to-prot { display:flex; align-items:center; gap:.6rem; margin:16px 0 10px;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); }
.to-prot::after { content:""; flex:1; height:1px; background: var(--line); }
.prot { background: var(--surface); border-radius: var(--r-md); padding:14px 16px; display:grid; gap:8px; }
.prot-row { display:grid; grid-template-columns:auto 1fr; gap:.4rem .8rem; align-items:start; }
.prot-row b { font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--ink); white-space:nowrap; padding-top:.15rem; }
.prot-row span { font-size:.9rem; color: var(--text-soft); line-height:1.45; }
@media (max-width: 520px) {
  .prot-row { grid-template-columns:1fr; gap:.15rem; }
  .prot-row b { padding-top:0; }
}

/* before/after glossary */
.ba { display:flex; flex-direction:column; gap:14px; }
.ba-block { border:1px solid var(--line); border-radius:14px; padding:16px; }
.ba-block.after { border-color: rgba(73,165,152,.35); background: var(--tint); }
.ba-tag { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); }
.ba-block.after .ba-tag { color: var(--brand-700); }
.ba-block p { margin-top:8px; font-size:.9rem; line-height:1.55; color: var(--text-soft); }
.ba .q { color: var(--caution); font-weight:600; }
.ba .ok { color: var(--brand-700); font-weight:600; }

/* ---- Security ---- */
.sec-cards { display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.sec-card { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:26px; }
.sec-card .sic { width:46px; height:46px; border-radius:12px; background: var(--ink); display:grid; place-items:center; color:#fff; }
.sec-card h3 { font-size:1.05rem; margin-top:16px; }
.sec-card p { color: var(--muted); font-size:.9rem; margin-top:8px; }
/* Tier marker: names the plan a security promise belongs to, so no claim on this
   page outruns what the pricing table actually sells. */
.sec-tier {
  display:inline-flex; align-items:center; margin-top:10px;
  padding:.26rem .6rem; border-radius: var(--r-pill);
  background: var(--tint); color: var(--brand-700);
  font-size:.72rem; font-weight:700; white-space:nowrap;
}
.sec-tier.all { background: var(--surface); color: var(--muted); }
.sec-badge .sec-tier { margin:0 0 0 .15rem; padding:.18rem .5rem; }
.sec-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:34px; }
.sec-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius: var(--r-pill); background:#fff; border:1px solid var(--line); font-weight:600; font-size:.82rem; box-shadow: var(--shadow-xs); }
.sec-badge svg { color: var(--brand-600); flex:none; }

/* ---- Comparison ---- */
/* The table needs 620px to stay a table; the wrap scrolls at every width where it
   doesn't fit, not only below the 620px breakpoint (that gap put 12px of the page
   itself off-screen between 621 and 652). */
.compare-wrap { max-width: 920px; margin:0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare { border:1px solid var(--line); border-radius: var(--r-lg); overflow:hidden; background:#fff; min-width: 620px; }
.crow { display:grid; grid-template-columns: 1.5fr 1fr 1fr; align-items:center; }
.crow + .crow { border-top:1px solid var(--line); }
.crow > div { padding: 15px 20px; }
.crow.head { background: var(--surface); font-weight:700; font-size:.95rem; }
.crow.head .c-us { color: var(--brand-700); }
.c-feat { font-weight:600; }
.c-cloud, .c-us { display:flex; align-items:flex-start; gap:.5rem; font-size:.9rem; color: var(--text-soft); }
.c-us { background: var(--tint); height:100%; align-items:center; font-weight:600; color: var(--ink); }
.c-cloud svg { color: var(--muted); flex:none; margin-top:2px; }
.c-us svg { color: var(--brand-600); flex:none; margin-top:2px; }

/* ---- Use-cases ---- */
.uses { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:18px; }
/* Отраслей три: карточка «Команды с требованиями к ИБ» была не отраслью, а
   критерием, и пересказывала соседнюю секцию про данные. */
.uses.uses-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.use { border:1px solid var(--line); border-radius: var(--r-lg); padding:22px; background:#fff; transition: transform .2s var(--ease-out), box-shadow .2s; }
@media (hover: hover) { .use:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.use .uic { width:44px; height:44px; border-radius:12px; background: var(--tint); display:grid; place-items:center; color: var(--brand-700); }
.use h3 { margin-top:14px; font-size: var(--fs-title-xs); }
.use p { color: var(--muted); font-size:.92rem; margin-top:6px; }

/* ---- Pricing ---- */
.seg { display:inline-flex; background:#fff; border:1px solid var(--line); border-radius: var(--r-pill); padding:4px; box-shadow: var(--shadow-xs); }
.seg button { border:0; background:transparent; padding:.55rem 1.2rem; border-radius: var(--r-pill); font-weight:600; font-size:.92rem; color: var(--muted); display:inline-flex; align-items:center; gap:.5rem; transition: background .2s, color .2s; }
.seg button.active { background: var(--ink); color:#fff; }
.seg .save { font-size:.72rem; font-weight:700; color: var(--brand-200); }
.seg button:not(.active) .save { color: var(--brand-700); }
.seg-wrap { display:flex; justify-content:center; margin-bottom:38px; }

/* Six bands — name, description, figure, unit, action, list — pinned to shared rows,
   so prices and buttons line up across plans whatever the copy length. */
/* minmax(0,1fr), а не 1fr: `1fr` — это `minmax(auto,1fr)`, поэтому колонка не
   могла стать уже своего min-content. На 1024px четыре тарифа переставали
   помещаться и выносили всю страницу в горизонтальный скролл на 36px. */
.plans { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:18px; }
.plan { overflow-wrap:break-word; border:1px solid var(--line); border-radius: var(--r-lg); padding:26px 22px; background:#fff; position:relative; grid-row: span 6; display:grid; grid-template-rows: subgrid; row-gap:18px; }
@supports not (grid-template-rows: subgrid) { .plan { display:flex; flex-direction:column; gap:18px; } }
.plan.popular { border-color: var(--brand); box-shadow: var(--shadow-md); }
.plan-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); background: var(--brand-700); color:#fff; font-size:.72rem; font-weight:700; padding:.3rem .8rem; border-radius: var(--r-pill); white-space:nowrap; }
.plan h3 { font-size: var(--fs-title-xs); }
.plan .p-desc { color: var(--muted); font-size:.85rem; }
.plan .price { font-size:1.9rem; font-weight:800; letter-spacing:-0.02em; line-height:1.05; overflow-wrap:break-word; }
.plan .price small { font-size:.82rem; color: var(--muted); font-weight:500; letter-spacing:0; }
/* Кнопка в карточке тарифа — своя, уменьшенная. Общая `.btn` запрещает перенос
   (`white-space: nowrap`), и «Начать бесплатно (7 дней)» — 25 знаков — не влезала:
   на 1024px колонка тарифа даёт 173px под содержимое, а строка с полями просила
   209px и уезжала за кромку карточки. Здесь перенос разрешён, кегль снижен до
   .85rem, боковые поля ужаты. На широком экране строка одна; в узкой колонке она
   складывается надвое, `text-wrap: balance` делит её поровну, а subgrid держит
   все четыре кнопки на одной полосе — разной высоты не будет. */
.plan .btn {
  justify-content:center; text-align:center;
  white-space:normal; text-wrap:balance;
  font-size:.85rem; padding:.68rem .9rem; line-height:1.3;
}
.plan ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.65rem; }
.plan li { display:flex; gap:.55rem; font-size:.92rem; color: var(--text-soft); }
.plan li svg { color: var(--brand-600); flex:none; margin-top:3px; }
/* Состав тарифа — один элемент сетки, а не два-четыре: .plan приколот к шести
   общим полосам через subgrid, и «Условия для бизнеса» вторым списком выбили бы
   Team из общего ряда. Заголовки групп («Включено:», «Включает всё, что есть в Team, а также:») Team, а также:»)
   пришли с боевого сайта и объясняют, что тариф наследует предыдущий. */
.plan .p-feats { display:flex; flex-direction:column; gap:14px; }
.plan .p-incl { font-size:.78rem; font-weight:700; color: var(--ink); }
.plan .p-feats .p-incl + ul { margin-top:-4px; }

/* Между 1000 и 1200px четыре тарифа стоят в самой тесной своей раскладке: на
   1024px под содержимое карточки остаётся 173px, и там переносится всё подряд.
   Ужимаем зазор и боковые поля — карточка забирает обратно 14px, и строки
   встают так, как задуманы. Ниже 1000px сетка и так уходит в две колонки. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .plans { gap:14px; }
  .plan { padding:22px 16px; }
  .plan li { font-size:.88rem; }
  .plan .price { font-size:1.7rem; }
}

/* The unit belongs to the figure above it, not to the 18px band rhythm. */
.p-unit { font-size:.78rem; color: var(--muted); margin-top:-13px; }


/* ---- FAQ ---- */
.faq { max-width: 800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; }
.faq-item.open { border-color: var(--brand-200); }
.faq-q { width:100%; text-align:left; padding:18px 22px; background:transparent; border:0; font-weight:600; font-size:1.02rem; color: var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.faq-q .fchev { color: var(--muted); flex:none; transition: transform .25s var(--ease-out); }
.faq-item.open .fchev { transform: rotate(180deg); color: var(--brand-600); }
/* Answers are open by default; the collapse only exists once JS can reopen them. */
.faq-a { display:grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-out); color: var(--muted); font-size:.95rem; line-height:1.6; }
.faq-a > p { overflow:hidden; margin:0; padding:0 22px 18px; }
.js .faq-a { grid-template-rows: 0fr; }
.js .faq-a > p { padding-bottom:0; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-item.open .faq-a > p { padding-bottom:18px; }

/* ---- Final CTA ---- */
/* Подпись. Полоса перестала быть центрированной плитой: текст ушёл влево, справа
   освобождено поле под литеру. Радиальную подсветку сняли — она спорила со знаком
   и нарушала правило плоской заливки. */
.cta-band { position:relative; overflow:hidden; background: var(--ink); color:#fff; border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 76px) clamp(24px, 22vw, 300px) clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px); }
.cta-band > * { position:relative; z-index:1; }
.cta-band h2 { color:#fff; max-width: 17ch; }   /* размер держит .h2; дубль здесь был невалиден (`1.3rem+2.4vw` без пробелов) и молча отбрасывался */
.cta-band p { color: var(--on-dark-soft); margin: 1rem 0 0; max-width: 48ch; font-size:1.08rem; }
.cta-band .hero-ctas { justify-content:flex-start; margin-top:2.2rem; }  /* .hero-ctas центрирует — здесь левый край общий с текстом */
/* Литера выше полосы в полтора раза и вылезает за правый край: обрезка и делает её
   фактурой, а не картинкой. 16 % зелёного — оттиск, который не трогает контраст
   белого заголовка (13.4 → 11.9 в месте наложения). */
.cta-mark { position:absolute; right:-6%; top:50%; transform:translateY(-50%); height:118%;
  color: rgba(73,165,152,.16); z-index:0; pointer-events:none; }
.cta-mark svg { display:block; height:100%; width:auto; overflow:visible; }
/* На узком боковое поле съело бы строку. Литера уходит вниз-вправо и обрезается
   нижним углом — подпись под текстом, а не рядом с ним. */
@media (max-width: 760px) {
  .cta-band { padding: clamp(40px, 6vw, 76px) clamp(24px, 5vw, 64px) clamp(112px, 26vw, 168px); }
  .cta-band h2 { max-width: none; }
  .cta-mark { right:-4%; top:auto; bottom:-16%; transform:none; height:auto; width:66%; }
  .cta-mark svg { height:auto; width:100%; }
}
.btn-light { background:#fff; color: var(--ink); }
.btn-light:hover { background: var(--brand-50); }

/* ---- Footer ---- */
.footer { background: var(--ink); color: var(--on-dark-soft); padding-block: clamp(48px,6vw,72px) max(30px, env(safe-area-inset-bottom, 0px)); }
.footer-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
/* .footer a below sets display:block on every link — the wordmark is not a nav link
   and must stay a lockup, or the mark stacks above the name. */
.footer a.brand { display:inline-flex; padding:0; }
.footer-brand .brand { color:#fff; }
.footer-brand .brand-name { color:#fff; }
.footer-brand .brand-mark { background: var(--brand-700); box-shadow:none; }  /* та же плашка, что в шапке */
.footer-tag { color: var(--on-dark-soft); font-size:.92rem; margin-top:14px; max-width: 30ch; line-height:1.55; }
/* Эндорсмент: продукт вышел из платформы, и доверие рынка принадлежит ей, а не ему. */
.by-shai { margin-top:14px; color: var(--on-dark-soft); }   /* inherits the .92rem footer step */
.by-shai b { color:#fff; font-weight:700; }
.by-shai:hover { color:#fff; }
.footer h3 { color:#fff; font-size:.82rem; letter-spacing:.02em; margin-bottom:1rem; text-transform:uppercase; }   /* h3, не h4: под h2 финальной полосы четвёртый уровень давал разрыв иерархии */
.footer a { color: var(--on-dark-soft); display:block; padding:.32rem 0; font-size:.92rem; }
.footer a:hover { color:#fff; }
/* Residency credentials. Both marks ship as white SVGs made for dark grounds, so
   they sit straight on the footer — a plaque behind them would only hide them. */
.residency {
  display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.8rem;
  border-top:1px solid rgba(255,255,255,.1); margin-top:2.6rem; padding-top:1.5rem;
}
.res-lbl { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color: var(--on-dark-faint); }
/* Sized by optical weight, not by box: the AIFC wordmark fills its artboard,
   the Astana Hub lockup does not. */
.res-logo { width:auto; opacity:.88; }
.res-logo.hub { height:30px; }
.res-logo.aifc { height:24px; }
.residency + .footer-bot { border-top:0; margin-top:1.4rem; padding-top:0; }

.footer-bot { border-top:1px solid rgba(255,255,255,.1); margin-top:2.6rem; padding-top:1.5rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.85rem; color: var(--on-dark-faint); }
.footer-bot a { display:inline; color: var(--on-dark-faint); }
.footer-bot a:hover { color:#fff; }

/* scroll reveal (class added by JS only when supported) */
.rise { opacity: 0; transform: translateY(22px); }
.in-view { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* ============ Touch ============ */
/* Keyed to the pointer, not the viewport: a touchscreen laptop needs the same
   targets as a phone, and a narrow desktop window does not. */
@media (pointer: coarse) {
  .footer a:not(.brand) { padding-block: .68rem; }   /* 34px → 46px */
  /* .footer-bot a стоит display:inline — вертикальный padding не растит бокс,
     поэтому здесь ссылка становится строчно-блочной. */
  .footer-bot a { display: inline-block; padding-block: .55rem; }   /* 28px → 46px */
  .seg button { padding-block: .78rem; }         /* 41px → 45px */
  /* The colour reveal lives on hover, which a finger never has */
  .clogo { opacity: .78; }
}

/* ============ Responsive ============ */
@media (max-width: 1000px) {
  .features, .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Три карточки в две колонки дают сироту — трёхчастные сетки на странице
     (.sec-cards) складывается сразу в одну, и отрасли идут за ней. */
  .uses.uses-3 { grid-template-columns: 1fr; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec-cards { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split .split-text { order: -1; }   /* mobile: text always first for reading order */
  .split .split-media { order: 0; }
}
@media (max-width: 620px) {
  .features, .uses, .plans { grid-template-columns: 1fr; }
  /* A five-row comparison read sideways is not a comparison. Each criterion becomes
     its own card, with both answers labelled underneath it. */
  .compare-wrap { overflow-x: visible; }
  .compare { min-width: 0; border: 0; background: transparent; display: grid; gap: 12px; }
  .crow { grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
  .crow.head { display: none; }
  .crow > div { padding: 12px 16px; }
  .c-feat { font-weight: 700; border-bottom: 1px solid var(--line); }   /* inherits the 16px body step */
  .c-cloud, .c-us { display: grid; grid-template-columns: 16px 1fr; gap: .45rem .6rem; align-items: start; height: auto; }
  .c-cloud::before, .c-us::before {
    content: attr(data-label); grid-column: 1 / -1;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  }
  .c-cloud::before { color: var(--muted); }
  .c-us::before { color: var(--brand-700); }
  .cta-band .hero-ctas .btn { flex: 1 1 auto; justify-content:center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bot { flex-direction: column; align-items:flex-start; }
  /* Label takes its own line so both marks sit level instead of stepping */
  .res-lbl { flex-basis: 100%; }
  .residency { gap: .7rem 1.4rem; }
  .res-logo.hub { height:26px; }
  .res-logo.aifc { height:21px; }
}