/* ============================================================
   askip — лендінг
   Бренд за AskIP Brand Book (2026): #461E86. Гарнітура одна — Inter
   (свідоме відхилення від брендбука, який називав Rubik + Open Sans).
   Мова макета — реєстр: волосяні лінійки, розрядка й табличні цифри.
   ============================================================ */

:root {
  /* ґрунт і чорнило — нейтралі з фіолетовим ухилом, не сірі «за замовчуванням» */
  --paper:      #ffffff;
  --paper-2:    #f7f6fa;
  --ink:        #16112b;
  --ink-2:      #4a4463;
  --ink-3:      #7a7490;
  --rule:       #e4e1ec;
  --rule-soft:  #eeecf4;

  --purple:      #461e86;
  --purple-deep: #33155f;
  --purple-wash: #f1ecfa;
  --night:       #17102e;
  --night-2:     #0f0a20;

  --warn: #a8661a;
  --good: #1e7a57;

  /* шкала відступів, крок 8 — усі вертикальні ритми беруться звідси */
  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;  --s5: 24px;
  --s6: 32px; --s7: 48px;  --s8: 64px;  --s9: 96px;  --s10: 128px;

  /* типографічна шкала */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   1.375rem;
  --t-2xl:  clamp(1.55rem, 3.2vw, 2.1rem);
  --t-3xl:  clamp(2.1rem, 5vw, 3.35rem);

  /* Один шрифт на весь сайт. Роль «реєстрового» набору тепер тримають
     не друга гарнітура, а розрядка й табличні цифри — Inter має і те, і те,
     і має повну кирилицю. */
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: Inter, -apple-system, BlinkMacSystemFont, sans-serif;

  --header-h: 68px;
  /* Одна міра на всю сторінку: аркуш продукту широкий, але лівий край
     у нього спільний із заголовками й рештою секцій. Дві різні обгортки
     давали дві різні ліві лінії — це найпомітніше з усіх зміщень. */
  --measure: 1200px;

  /* ---- поверхні й висота ----
     Три рівні глибини, і не більше. Рівень 0 — сама сторінка, без тіні.
     Рівень 1 — допоміжна поверхня всередині картки. Рівень 2 — головний
     аркуш продукту, єдиний по-справжньому піднятий об'єкт на сторінці.
     Якщо тінь буде на всьому, вона не означатиме нічого. */
  --surface:        #ffffff;
  --surface-2:      #faf9fc;
  --surface-border: rgba(22, 17, 43, .09);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --elev-1:
    0 1px 2px rgba(22, 17, 43, .04),
    0 2px 8px -2px rgba(22, 17, 43, .05);
  --elev-2:
    0 1px 2px rgba(22, 17, 43, .10),
    0 10px 26px -8px rgba(26, 12, 58, .22),
    0 36px 72px -28px rgba(26, 12, 58, .40);
  --elev-3:
    0 1px 2px rgba(22, 17, 43, .06),
    0 6px 16px -6px rgba(22, 17, 43, .12);

  /* ледь помітна грань зверху — саме вона читається як фізична поверхня */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .7);

  /* Перехльост картки на hero прибрано: продукт стоїть у своїй смузі,
     а не наїжджає на заголовок. */
  --overlap: 0px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Поля й кнопки шрифт від body НЕ успадковують — у них своя типова
   гарнітура браузера. Без цього рядка на сторінці лишається чужий Arial. */
input, button, select, textarea { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }

/* цифри, що стоять у стовпчик, мають бути однакової ширини */
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* моноширинного більше немає, тож рівність цифр тримаємо явно */
body { font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--s5); }
@media (min-width: 720px) { .wrap { padding-inline: var(--s6); } }
/* Вузькі блоки звужуються ЗСЕРЕДИНИ, а не центруванням обгортки:
   інакше вони злітають зі спільної лівої лінії набору. */

/* Перехід за якорем: секція заходить під шапку своїм верхнім полем (32 px),
   тож під шапкою видно лише її власний фон, а не смужку попередньої секції. */
section[id] { scroll-margin-top: calc(var(--header-h) - var(--s6)); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--purple); color: #fff; padding: var(--s3) var(--s5); border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 3px;
}

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

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.header-inner {
  display: flex; align-items: center; gap: var(--s5);
  min-height: var(--header-h);
}

/* Раніше від'ємні поля гасили падінг плашки, щоб на лівій лінії стояв
   САМ ЗНАК. Поки плашка була прозора, це працювало. Щойно вона стала
   видимою фіолетовою на білій шапці, її край поїхав лівіше за всю
   сторінку й почав читатись як перекіс. Тепер по лінії стоїть плашка. */
.brand {
  display: flex; align-items: center; line-height: 0;
  padding: var(--s2) var(--s3); margin-block: calc(var(--s2) * -1);
  border-radius: 6px; background: transparent;
  transition: background .25s ease;
}
.brand img { width: 84px; height: auto; }
/* Тут була вада: у стані is-solid мінявся колір ТЕКСТУ, але фон смуги
   лишався прозорим. На білих секціях це не впадало в око, а на фіолетових
   меню зливалося з ґрунтом і на нього наїжджав текст, що прокручувався
   під смугою. Смуга має бути непрозорою скрізь, крім hero. */
.site-header.is-solid {
  background: var(--paper);
  border-bottom-color: var(--rule);
}
.site-header.is-solid .brand { background: var(--purple); }

.nav { display: none; margin-left: auto; gap: var(--s5); align-items: center; }
.header-inner .cta-head { margin-left: auto; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .header-inner .cta-head { margin-left: 0; }
}
.nav a {
  color: rgba(255, 255, 255, .78); text-decoration: none;
  font-size: var(--t-sm); line-height: 1.2; padding-block: var(--s2);
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, .5); }
.site-header.is-solid .nav a { color: var(--ink-2); }
.site-header.is-solid .nav a:hover { color: var(--purple); border-bottom-color: var(--purple); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 500; font-size: var(--t-sm);
  line-height: 1.2; padding: var(--s3) var(--s5);
  background: var(--purple); color: #fff; border: 1px solid var(--purple);
  border-radius: 4px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--purple-deep); border-color: var(--purple-deep); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn--lg { font-size: var(--t-base); padding: var(--s4) var(--s6); }
.btn--light { background: #fff; color: var(--purple); border-color: #fff; }
.btn--light:hover { background: var(--purple-wash); border-color: var(--purple-wash); }
.btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.btn--line:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.site-header.is-solid .btn--line { color: #fff; background: var(--purple); border-color: var(--purple); }
.site-header.is-solid .btn--line:hover { background: var(--purple-deep); border-color: var(--purple-deep); }

/* Тиха кнопка: у hero вона свідомо НЕ конкурує з аркушем продукту. */
.btn--quiet {
  background: rgba(255, 255, 255, .09); color: #fff;
  border-color: rgba(255, 255, 255, .26);
}
.btn--quiet:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }

/* ---------------- hero ---------------- */

/* Hero тримає позицію, але не забирає весь екран: одразу під ним має
   з'явитися сам інструмент. Ґрунт і поле точок лишаються без змін. */
.hero {
  position: relative; isolation: isolate;
  /* На перший екран не повинен визирати край наступної секції: hero
     займає всю висоту вікна. svh, а не vh — щоб на мобільному панель
     браузера не з'їдала низ. */
  min-height: 100svh;
  display: grid; align-items: center;
  padding-top: var(--header-h);
  padding-bottom: var(--overlap);
  background: linear-gradient(178deg, var(--night) 0%, var(--night-2) 100%);
  color: #fff; overflow: hidden;
}

/* Ширину тут задають самі рядки (h1 22ch, лід 46ch), а НЕ обгортка:
   max-width на .hero-inner перебивав ширину .wrap і зсував увесь hero
   із лівої лінії сторінки на 270 px праворуч. */
.hero-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--s4);
  padding-block: var(--s9) var(--s8);
}
.hero-inner .status { margin-bottom: var(--s2); }
.hero-inner h1 { margin-bottom: var(--s2); }

.status {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: #b9a9dc;
}
.status::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #b9a9dc; animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status::before { animation: none; } }

.hero h1 {
  font-size: var(--t-3xl); font-weight: 600; line-height: 1.06;
  letter-spacing: -.025em; text-wrap: balance; max-width: 22ch;
}
.hero-lead {
  font-size: var(--t-lg); color: #c5b9dd; max-width: 46ch; line-height: 1.55;
}
.lb { display: none; }
@media (min-width: 640px) { .lb { display: inline; } }

.scroll-cue {
  position: absolute; bottom: var(--s6);
  left: max(var(--s5), calc((100% - var(--measure)) / 2 + var(--s5)));
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .45); text-decoration: none;
}
@media (min-width: 720px) {
  .scroll-cue { left: max(var(--s6), calc((100% - var(--measure)) / 2 + var(--s6))); }
}
.scroll-cue:hover { color: #fff; }
.scroll-cue::before {
  content: ""; width: 40px; height: 1px; background: currentColor;
}

/* ---------------- каркас секцій ---------------- */

.section { padding-block: var(--s9); }
.section--tint { background: var(--paper-2); }

.section-head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s7); max-width: 62ch; }
.eyebrow {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--purple);
}
.section h2 {
  font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -.02em;
  text-wrap: balance; max-width: 22ch;
}
.section-lead { color: var(--ink-2); max-width: 62ch; }

.reveal { }
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* ============================================================
   ПРОДУКТ — справжній пошук по реєстру.
   ============================================================ */

/* Аркуш свідомо виїжджає вгору на фіолетовий ґрунт hero і закінчується
   вже на світлій сторінці. Це прибирає вигляд «стосу прямокутних секцій»
   і робить продукт головним об'єктом, а не ще однією секцією. */
.stage {
  position: relative; z-index: 3;
  margin-top: calc(var(--overlap) * -1);
  padding-block: var(--s8);
}

/* ---------------- кейс ---------------- */

.case-grid { display: grid; gap: var(--s8); align-items: start; }
@media (min-width: 960px) { .case-grid { grid-template-columns: 1fr 1.15fr; gap: var(--s9); } }

/* витяг */
.extract { border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); }
.extract > * + * { border-top: 1px solid var(--rule-soft); }
.ex-row { padding: var(--s5); }

.ex-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3);
  padding: var(--s3) var(--s5); background: var(--paper-2); border-radius: 6px 6px 0 0;
}
.ex-head b { color: var(--purple); font-weight: 500; }

.ex-mark { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.ex-mark h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -.01em; }
.ex-mark .classes { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-3); }

/* вимірювальна шкала замість кільця */
.gauge { display: grid; gap: var(--s3); }
.gauge-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.gauge-val { font-family: var(--mono); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.gauge-val small { font-size: 1rem; color: var(--ink-3); margin-left: 2px; }
.gauge-label { font-size: var(--t-sm); color: var(--ink-2); text-align: right; }
.gauge-label b { display: block; font-family: var(--display); font-weight: 500; color: var(--ink); font-size: var(--t-base); }

.scale { position: relative; height: 26px; }
.scale-track { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule); }
.scale-fill { position: absolute; top: 0; left: 0; height: 3px; background: var(--purple); }
.scale-mark { position: absolute; top: -3px; width: 1px; height: 9px; background: var(--purple); }
.scale-ticks {
  position: absolute; top: 12px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .04em;
}

.ex-title {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s4);
}

.marks { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.marks th {
  text-align: left; font-family: var(--mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-soft);
}
.marks th:last-child, .marks td:last-child { text-align: right; }
.marks td { padding-block: var(--s3); border-bottom: 1px solid var(--rule-soft); }
.marks tr:last-child td { border-bottom: 0; }
.marks .m-cls, .marks .m-val { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.marks .m-val { color: var(--ink); }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; font-size: var(--t-sm); color: var(--ink-2); }
.checks b { color: var(--ink); font-weight: 600; }
.flag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; white-space: nowrap;
}
.flag--warn { color: var(--warn); background: #a8661a14; }
.flag--good { color: var(--good); background: #1e7a5714; }

.ex-foot { font-size: var(--t-xs); color: var(--ink-3); padding: var(--s4) var(--s5); }

/* ---------------- колода екранів ---------------- */

.flag--mid { color: var(--ink-2); background: #16112b0f; }

/* Ліворуч — перелік екранів (він же навігація), праворуч — сам екран.
   Обидві колонки несуть зміст: порожнього стовпця тут бути не повинно. */
.deck-nav { list-style: none; margin: 0; padding: 0; display: grid; }
.deck-nav li { border-top: 1px solid var(--rule); }
.deck-nav li:last-child { border-bottom: 1px solid var(--rule); }
.deck-nav button {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4);
  width: 100%; text-align: left; padding: var(--s4) 0;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
}
.deck-nav .n {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.deck-nav .t { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); letter-spacing: -.01em; }
.deck-nav .d { grid-column: 2; color: var(--ink-2); font-size: var(--t-sm); }
.deck-nav button:hover .t { color: var(--purple-deep); }
.deck-nav [aria-selected="true"] .n { color: var(--purple); }
.deck-nav [aria-selected="true"] .t { color: var(--purple-deep); }
/* Позначка активного — колір і рамка знизу, а не смужка збоку:
   будь-який виносний елемент зліва зламав би спільну лінію набору. */
.deck-nav li[data-on] { border-top-color: var(--purple); }

.deck-stage { display: grid; gap: var(--s4); align-content: start; }

/* Неактивні картки виводимо з потоку, а не складаємо в один осередок сітки:
   інакше рамка кожної тягнеться до висоти найдовшої й під короткою
   зяє порожнеча на пів екрана. */
.deck-cards { position: relative; }
.deck-card { width: 100%; transition: opacity .26s ease, transform .26s ease; }
.js .deck-card:not(.is-on) {
  position: absolute; top: 0; left: 0;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) { .deck-card { transition: none; } }

/* Без JS картки просто лягають одна під одну — нічого не ховаємо. */
html:not(.js) .deck-cards { display: grid; gap: var(--s6); }
html:not(.js) .deck-bar, html:not(.js) .deck-nav { display: none; }

/* Ліва колонка не має обриватися на середині екрана. */
.deck-note {
  display: grid; gap: var(--s3); margin-top: var(--s5);
  font-size: var(--t-sm); color: var(--ink-2); max-width: 46ch;
}
.deck-note b { color: var(--ink); font-weight: 600; }

.deck-bar {
  display: flex; align-items: center; gap: var(--s4);
  padding-top: var(--s2);
}
.deck-count {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.deck-count b { color: var(--purple); font-weight: 400; }
.deck-arrow {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--paper);
  color: var(--ink-2); cursor: pointer; font-size: var(--t-sm); line-height: 1;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.deck-arrow:hover { border-color: var(--purple); color: var(--purple); background: var(--purple-wash); }
.deck-arrow:last-of-type { margin-left: auto; }

/* рядки-документи й сповіщення всередині екранів */
.rows { display: grid; }
.rows > div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s4);
  align-items: baseline; padding-block: var(--s3);
  border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm);
}
.rows > div:last-child { border-bottom: 0; }
.rows small { display: block; color: var(--ink-3); font-size: var(--t-xs); }
.feed { display: grid; gap: var(--s4); }
.feed > div { display: grid; gap: var(--s1); }
.feed .f-top {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple);
}
.feed .f-body { font-size: var(--t-sm); color: var(--ink); }
.feed .f-body b { font-weight: 600; }
.feed .f-foot { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------------- реєстр можливостей ---------------- */

.caps { display: grid; }
.caps details { border-top: 1px solid var(--rule); }
.caps details:last-of-type { border-bottom: 1px solid var(--rule); }
.caps summary {
  cursor: pointer; list-style: none;
  display: grid; gap: var(--s2) var(--s6); align-items: baseline;
  padding-block: var(--s5);
}
.caps summary::-webkit-details-marker { display: none; }
@media (min-width: 760px) { .caps summary { grid-template-columns: minmax(0, 15rem) 1fr auto; } }
@media (max-width: 759px) { .caps summary { grid-template-columns: 1fr auto; } .caps .cap-d { grid-column: 1 / -1; } }
.cap-t { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); letter-spacing: -.01em; }
.cap-d { color: var(--ink-2); font-size: var(--t-sm); max-width: 60ch; }
.cap-x {
  font-family: var(--mono); color: var(--purple); font-size: var(--t-lg);
  line-height: 1; justify-self: end;
}
.caps details[open] .cap-x::after { content: "–"; }
.caps .cap-x::after { content: "+"; }
.cap-body { padding-bottom: var(--s6); display: grid; gap: var(--s3); }
/* Ті самі треки, що й у summary (третій — під знак «+»), інакше текст
   опису і вміст рядка мають різну ширину й праві краї розходяться. */
@media (min-width: 760px) {
  .cap-body { grid-template-columns: minmax(0, 15rem) 1fr auto; column-gap: var(--s6); }
  .cap-body::after { content: ""; width: 1ch; }
}
.cap-label {
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* мініатюри результату */
.art {
  border: 1px solid var(--rule); border-radius: 5px; background: var(--paper-2);
  padding: var(--s4) var(--s5); display: grid; gap: var(--s3); max-width: 46rem;
}
.art-rows { display: grid; gap: 0; }
.art-rows div {
  display: grid; grid-template-columns: 1fr auto auto; gap: var(--s4);
  align-items: baseline; padding-block: var(--s2);
  border-bottom: 1px solid var(--rule-soft); font-size: var(--t-sm);
}
.art-rows div:last-child { border-bottom: 0; }
.art-rows i { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.art-rows b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 400; color: var(--ink); }
.art-quote {
  border-left: 2px solid var(--warn); padding-left: var(--s4);
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6;
}
.art-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.art-list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; }
.art-list li::before { content: "✓"; color: var(--good); font-size: var(--t-xs); }
.art-alert { display: grid; gap: var(--s2); background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: var(--s4); }
.art-alert .a-top {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--purple);
}
.art-alert .a-body { font-size: var(--t-sm); color: var(--ink); }
.art-alert .a-foot { font-size: var(--t-xs); color: var(--ink-3); }
.art-cap { font-size: var(--t-xs); color: var(--ink-3); }

.note { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s5); max-width: 62ch; }

.wl-form { display: grid; gap: var(--s5); max-width: 620px; }
.wl-row { display: grid; gap: var(--s3); grid-template-columns: 1fr auto; }
@media (max-width: 460px) { .wl-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--t-sm); color: #c5b9dd; }
.field .opt { color: #8c81a8; }
.fields { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .fields { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }

/* Тільки форми waitlist стоять на темному ґрунті. Пробник у світлій
   секції має власні стилі — тому селектор навмисно НЕ глобальний. */
.wl-form input[type="email"], .wl-form input[type="text"], .wl-form select {
  width: 100%; font-family: inherit; font-size: var(--t-base); line-height: 1.4;
  padding: var(--s3) var(--s4);
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 4px;
}
.wl-form input::placeholder { color: #8c81a8; }
.wl-form input:focus, .wl-form select:focus { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); }
.wl-form select option { color: var(--ink); }

.consent { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start; font-size: var(--t-sm); color: #c5b9dd; cursor: pointer; }
/* margin: 0 обов'язковий — типове поле браузера зсувало чекбокс на 4 px
   праворуч від лівої лінії форми, і це було видно. */
.consent input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: #fff; }
.msg { font-size: var(--t-sm); min-height: 1.4em; }
.msg.ok { color: #8fe0bd; }
.msg.err { color: #ffb3b3; }

.done { display: grid; gap: var(--s2); padding: var(--s5); border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; }
.done b { font-family: var(--display); font-weight: 500; font-size: var(--t-lg); }
.done span { color: #c5b9dd; font-size: var(--t-sm); }

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

.site-footer { background: var(--night); color: #8c81a8; padding-block: var(--s8); }


/* ============================================================
   Уточнення під продуктову подачу
   ============================================================ */

/* Форма в hero лишається робочою, але звужена й притишена:
   головний об'єкт сторінки — інструмент, а не збір адрес. */
.wl-form--slim { max-width: 420px; gap: var(--s3); margin-top: var(--s2); }
.wl-form--slim input[type="email"] { padding: 10px var(--s4); font-size: var(--t-sm); }
.wl-form--slim .btn { padding: 10px var(--s4); }

/* Мікровзаємодії: тільки підйом на пару пікселів і трохи більше тіні. */
.btn, .caps summary {
  transition: transform .16s ease, box-shadow .16s ease,
              background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* Заголовки всередині продукту — без верхнього регістру: суцільні капітелі
   на кожному блоці читаються як шаблон, а не як інтерфейс. */
.ex-title {
  text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--ink-3);
}


/* Розгорнутий рядок «Можливостей» — звичайний текст, без імітації
   результату. Вигадані відсотки суперечили б самому продукту, який
   свідомо не виставляє оцінок. */
.cap-text { display: grid; gap: var(--s3); max-width: 60ch; font-size: var(--t-sm); color: var(--ink-2); }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
ul.plain li { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; }
ul.plain li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--purple); opacity: .5; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Прокручена, але ще над hero — темний ґрунт під колір самого hero.
   Після hero спрацьовує .is-solid і смуга стає світлою. */
.site-header.is-scrolled:not(.is-solid) {
  background: var(--night);
  border-bottom-color: rgba(255, 255, 255, .10);
}


/* ============================================================
   v3: дві дії в hero, модалка запису з анкетою, bento-можливості,
   мобільне меню.
   ============================================================ */


/* ---- демо: заголовок над аркушем ---- */

.stage { padding-top: var(--s9); }
.stage .section-head h2 {
  font-size: var(--t-2xl); line-height: 1.14; letter-spacing: -.02em; text-wrap: balance;
}

/* ---- bento ---- */

.bento { display: grid; gap: var(--s4); }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--wide { grid-column: 1 / -1; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .tile--wide { grid-column: span 2; }
}

.tile {
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6); background: var(--surface);
  border: 1px solid var(--surface-border); border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--elev-3); border-color: #461e8633; }
@media (prefers-reduced-motion: reduce) { .tile:hover { transform: none; } }

/* Широка плитка — фірмова: темний ґрунт hero, щоб головна можливість
   читалась першою навіть боковим зором. */
.tile--wide {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(126, 82, 220, .35), transparent 55%),
    linear-gradient(160deg, var(--night), var(--night-2));
  color: #fff; border-color: transparent;
}
.tile.tile--wide p { color: #c5b9dd; }
.tile--wide .tile-ico { background: rgba(255, 255, 255, .1); color: #fff; }

.tile-ico {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; background: var(--purple-wash); color: var(--purple);
}
.tile-ico svg {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.tile h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.01em; margin-top: var(--s2); }
.tile p { color: var(--ink-2); font-size: var(--t-sm); max-width: 52ch; }
.tile-art { margin-top: auto; padding-top: var(--s3); }
.tile-cap { font-size: var(--t-xs) !important; color: var(--ink-3) !important; }

.tile-art--match {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3);
  font-size: var(--t-lg); font-weight: 600;
}
.tile-art--match .q, .tile-art--match .r {
  padding: var(--s2) var(--s4); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.tile-art--match .r { background: #fff; color: var(--purple); border-color: #fff; }
.tile-art--match .eq {
  font-size: var(--t-xs); font-weight: 400; color: #b9a9dc; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: var(--s2);
}
.tile-art--match .eq::before, .tile-art--match .eq::after {
  content: ""; width: 18px; height: 1px; background: currentColor;
}
.tile-link {
  color: #fff; font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  align-self: flex-start; border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.tile-link:hover { border-bottom-color: #fff; }

.tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tags span {
  padding: 4px var(--s3); border-radius: 999px; font-size: var(--t-xs);
  background: var(--purple-wash); color: var(--purple-deep);
}
.tile .plain { font-size: var(--t-sm); color: var(--ink-2); }
.checks-mini { list-style: none; margin: 0; padding: var(--s3) 0 0; display: grid; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.checks-mini li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: baseline; }
.checks-mini li::before { content: "✓"; color: var(--good); font-size: var(--t-xs); }

/* ---- мобільне меню ---- */

.burger {
  display: inline-grid; place-content: center; gap: 6px;
  width: 42px; height: 42px; padding: 0; margin-left: calc(var(--s3) * -1);
  background: transparent; border: 0; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1.5px; background: #fff; transition: transform .2s ease; }
.site-header.is-solid .burger span { background: var(--ink); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (min-width: 900px) { .burger, .mnav { display: none !important; } }

.mnav { border-top: 1px solid rgba(255, 255, 255, .1); background: var(--night); }
.mnav .wrap { display: grid; padding-block: var(--s3) var(--s5); }
.mnav a {
  color: #fff; text-decoration: none; font-size: var(--t-lg);
  padding-block: var(--s3); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header.is-solid .mnav { background: var(--paper); border-top-color: var(--rule); }
.site-header.is-solid .mnav a { color: var(--ink); border-bottom-color: var(--rule-soft); }
/* відкрите меню над прозорою шапкою hero потребує ґрунту */
.menu-open .site-header:not(.is-solid) { background: var(--night); }

@media (max-width: 899px) {
  .header-inner { gap: var(--s3); }
  .cta-head { padding: 10px var(--s4); }
}
@media (max-width: 380px) {
  .brand img { width: 72px; }
}

/* ---- модалка запису ---- */

.wl-dialog {
  width: min(560px, calc(100vw - 2 * var(--s4)));
  max-height: calc(100svh - 2 * var(--s4));
  padding: 0; border: 0; border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--elev-2); overflow: auto;
}
.wl-dialog::backdrop { background: rgba(15, 10, 32, .62); backdrop-filter: blur(4px); }
.wl-dialog[open] { animation: dlg-in .22s ease; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .wl-dialog[open] { animation: none; } }

.wl-dialog-body { padding: var(--s6) var(--s5) var(--s5); display: grid; gap: var(--s3); }
@media (min-width: 560px) { .wl-dialog-body { padding: var(--s7) var(--s7) var(--s6); } }
.wl-dialog h2 { font-size: var(--t-2xl); letter-spacing: -.02em; line-height: 1.15; }
.wl-dialog-lead { color: var(--ink-2); font-size: var(--t-sm); margin-bottom: var(--s3); }
.wl-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); font-size: 26px; line-height: 1; cursor: pointer;
}
.wl-close:hover { background: var(--paper-2); color: var(--ink); }

/* Форма в модалці світла: перебиваємо темні стилі .wl-form. */
.wl-form--modal { gap: var(--s4); max-width: none; }
.wl-form--modal .field label { color: var(--ink-2); }
.wl-form--modal .field .opt { color: var(--ink-3); }
.wl-form--modal input[type="email"], .wl-form--modal input[type="text"] {
  background: var(--paper); color: var(--ink); border-color: var(--rule);
}
.wl-form--modal input::placeholder { color: var(--ink-3); }
.wl-form--modal input:focus { background: var(--paper); border-color: var(--purple); outline: none; }
.wl-form--modal .btn { justify-self: stretch; }
.consent--light { color: var(--ink-2); }
.consent--light input { accent-color: var(--purple); }
.wl-dialog .msg.err { color: #b42318; }
.wl-dialog .msg.ok { color: var(--good); }
.wl-dialog .done { border-color: var(--rule); background: var(--paper-2); }
.wl-dialog .done span { color: var(--ink-2); }

/* ---- анкета другого кроку ---- */

.profile { display: grid; gap: var(--s5); }
.profile-lead { font-size: var(--t-sm); color: var(--ink-2); }
.q { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s2); min-width: 0; }
.q legend { font-weight: 500; font-size: var(--t-sm); margin-bottom: var(--s2); padding: 0; }
.picks { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pick { position: relative; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick span {
  display: inline-block; padding: 7px var(--s3); border-radius: 999px;
  border: 1px solid var(--rule); font-size: var(--t-xs); line-height: 1.3; color: var(--ink-2);
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.pick:hover span { border-color: var(--ink-3); }
.pick input:checked + span { border-color: var(--purple); background: var(--purple); color: #fff; }
.pick input:focus-visible + span { outline: 2px solid var(--purple); outline-offset: 2px; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.btn--text {
  background: transparent; border-color: transparent; color: var(--ink-3);
}
.btn--text:hover { background: transparent; border-color: transparent; color: var(--ink); }

/* ---- мобільна щільність ---- */
@media (max-width: 719px) {
  .hero { min-height: auto; }
  .hero-inner { padding-block: var(--s8) var(--s8); }
  .stage { padding-top: var(--s8); }
  .section { padding-block: var(--s8); }
  .section-head { margin-bottom: var(--s6); }
  .tile { padding: var(--s5); }
  .tile-art--match { font-size: var(--t-base); gap: var(--s2); }
  .tile-art--match .eq::before, .tile-art--match .eq::after { width: 10px; }
}

/* ============================================================
   Хто стоїть за AskIP: два «світи» фірм на всю ширину.
   Головний візуал — гігантський знак фірми, обрізаний краєм екрана.
   Наведення розширює половину (flex-grow) і проявляє знак; друга
   стискається, розмивається й знебарвлюється. Лише CSS.
   Текст у половинах стоїть на сітці сайту: лівий — по лівому краю
   .wrap, правий — по правому.
   ============================================================ */

.owners { color: #fff; }

/* відступ, що ставить текст на край сітки сайту */
.realms { --edge: max(var(--s5), calc((100vw - var(--measure)) / 2 + var(--s6))); }

.realms { display: flex; height: clamp(540px, 48vw, 680px); }
.realm {
  position: relative; overflow: hidden; isolation: isolate;
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: flex-end;
  color: #fff; text-decoration: none;
  transition: flex-grow .8s cubic-bezier(.22, .8, .24, 1), filter .5s ease, opacity .5s ease;
}
.realm--nf {
  background:
    radial-gradient(70% 80% at 20% 40%, rgba(25, 166, 183, .16), transparent 70%),
    #001737;
  padding: var(--s7) var(--s6) var(--s7) var(--edge);
}
.realm--nl {
  background:
    radial-gradient(70% 80% at 80% 40%, rgba(192, 146, 94, .18), transparent 70%),
    #140f0b;
  justify-content: flex-end; text-align: right;
  padding: var(--s7) var(--edge) var(--s7) var(--s6);
}

/* гігантський знак: виходить за край, у спокої ледь видно */
.realm-mark {
  position: absolute; z-index: -1; top: 50%; height: 104%; width: auto;
  opacity: .14;
  transition: transform .9s cubic-bezier(.22, .8, .24, 1), opacity .6s ease;
}
/* знаки тиснуться до центрального шва й обрізані ним — текст лишається вільним */
.realm--nf .realm-mark { right: -34%; transform: translateY(-50%); }
.realm--nl .realm-mark { left: -30%; transform: translateY(-50%); height: 112%; opacity: .3; }

.realm-body { display: grid; gap: var(--s4); max-width: 30ch; position: relative; transition: filter .5s ease, opacity .5s ease; }

/* притінення неактивної половини — під заголовком, над фоном */
.realm::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(6, 5, 12, .5); opacity: 0; transition: opacity .5s ease;
}
.realm-body { z-index: 1; }

/* заголовок, розрізаний швом: обидві половини притиснуті до центру */
.realm-title {
  position: absolute; z-index: 2; top: var(--s8);
  font-size: clamp(1.9rem, 3.5vw, 3.2rem); font-weight: 600; line-height: 1.08;
  letter-spacing: -.025em; color: #fff; white-space: nowrap;
}
.realm--nf .realm-title { right: var(--s5); text-align: right; }
.realm--nl .realm-title { left: var(--s5); text-align: left; }
.realm-eyebrow {
  display: block; margin-bottom: var(--s3);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
/* у другій половині підпис невидимий: він лише тримає рядок на одній лінії з першим */
.realm-eyebrow--ghost { visibility: hidden; }
.realm--nl .realm-body { justify-items: end; }
.realm-body img { height: 44px; width: auto; }
.realm--nl .realm-body img { height: 58px; }
.realm-desc { font-size: var(--t-sm); line-height: 1.55; color: rgba(255, 255, 255, .62); transition: color .4s ease; }
.realm-link {
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .04em; color: #fff;
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
}

@media (hover: hover) {
  .realms:hover .realm:hover, .realms:focus-within .realm:focus-visible { flex-grow: 1.7; }
  /* розмиваємо знак і опис, але не заголовок — речення має читатися завжди */
  .realms:hover .realm:not(:hover) :is(.realm-mark, .realm-body),
  .realms:focus-within .realm:not(:focus-visible):not(:hover) :is(.realm-mark, .realm-body) {
    filter: blur(4px) grayscale(1); opacity: .35;
  }
  .realms:hover .realm:not(:hover)::after,
  .realms:focus-within .realm:not(:focus-visible):not(:hover)::after { opacity: 1; }
  .realm:hover .realm-mark, .realm:focus-visible .realm-mark { opacity: .95; }
  .realm--nf:hover .realm-mark, .realm--nf:focus-visible .realm-mark { transform: translate(-10%, -50%) scale(1.03); opacity: .88; }
  .realm--nl:hover .realm-mark, .realm--nl:focus-visible .realm-mark { transform: translate(14%, -50%) scale(1.03); }
  .realm:hover .realm-desc, .realm:focus-visible .realm-desc { color: rgba(255, 255, 255, .85); }
  .realm:hover .realm-link, .realm:focus-visible .realm-link { opacity: 1; transform: none; }
}
.realm:focus-visible { outline: 2px solid #b9a9dc; outline-offset: -6px; }

/* дотик: без наведення знак трохи помітніший, посилання видно одразу */
@media (hover: none) {
  .realm--nf .realm-mark { opacity: .16; }
  .realm--nl .realm-mark { opacity: .36; }
  .realm-link { opacity: 1; transform: none; }
}

@media (max-width: 719px) {
  .realms { flex-direction: column; height: auto; }
  .realm { min-height: 380px; }
  .realm-title { top: var(--s7); font-size: 1.9rem; white-space: normal; }
  .realm--nf .realm-title { right: auto; left: var(--s5); text-align: left; }
  .realm--nl .realm-title { left: var(--s5); }
  .realm-eyebrow--ghost { display: none; }
  .realm--nl { justify-content: flex-start; text-align: left; }
  .realm--nl .realm-body { justify-items: start; }
  .realm--nf, .realm--nl { padding: var(--s7) var(--s5); }
  .realm-mark { height: 105%; }
  .realm--nl .realm-mark { height: 112%; }
}

/* Телефон: роль курсора бере прокрутка (assets/realms-v1.js) —
   активна та половина, що посередині екрана; сусідня притухає. */
@media (max-width: 719px) {
  .realms.has-active .realm:not(.is-active) :is(.realm-mark, .realm-body) {
    filter: grayscale(1); opacity: .35;
  }
  .realms.has-active .realm:not(.is-active)::after { opacity: 1; }
  .realm--nf.is-active .realm-mark { opacity: .36; transform: translate(-6%, -50%) scale(1.03); }
  .realm--nl.is-active .realm-mark { opacity: .8; transform: translate(12%, -50%) scale(1.03); }
  .realm.is-active .realm-desc { color: rgba(255, 255, 255, .85); }
}

@media (prefers-reduced-motion: reduce) {
  .realm, .realm-mark, .realm-body, .realm::after, .realm-desc, .realm-link { transition: none; }
}

/* ============================================================
   Демо пошуку: рядок пошуку, список збігів ліворуч, марка праворуч.
   Біла картка в нашій типографіці; фіолетовий — лише акцент.
   ============================================================ */

.demo {
  background: var(--surface); border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg); box-shadow: var(--elev-2), var(--edge);
  overflow: hidden;
}
.demo.is-loading .demo-body { opacity: .55; transition: opacity .2s ease; }

/* рядок пошуку */
.demo-bar {
  display: grid; gap: var(--s4); align-items: end;
  padding: var(--s5) var(--s5); background: var(--night); color: #fff;
}
@media (min-width: 760px) {
  .demo-bar { grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; padding: var(--s5) var(--s6); }
}
.demo-q { display: grid; gap: var(--s1); }
.demo-q label { font-size: var(--t-xs); color: #a99cc9; }
.demo-q input {
  width: 100%; padding: var(--s2) 0; border: 0; border-bottom: 1.5px solid rgba(255, 255, 255, .35);
  background: transparent; color: #fff; font: 500 var(--t-xl) / 1.3 var(--display); letter-spacing: -.01em;
  border-radius: 0;
}
.demo-q input::placeholder { color: rgba(255, 255, 255, .4); font-weight: 400; }
.demo-q input:focus { outline: none; border-bottom-color: #fff; }
.demo-cls select {
  width: 100%; height: 52px; padding: 0 var(--s4); font: inherit; font-size: var(--t-sm);
  color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-sm);
}
.demo-cls select option { color: var(--ink); }
.demo-go { gap: var(--s2); height: 52px; background: #fff; color: var(--purple); border-color: #fff; border-radius: var(--radius-sm); }
.demo-go:hover { background: var(--purple-wash); border-color: var(--purple-wash); }

/* тіло: список + картка */
.demo-body { display: grid; min-height: 520px; }
@media (min-width: 760px) { .demo-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.demo-list { border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; }
.demo-list-head {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-sm); color: var(--ink-2);
}
.demo-list-head b { color: var(--ink); }
.demo-mine { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; white-space: nowrap; }
.demo-mine input { accent-color: var(--purple); }
.demo-items { list-style: none; margin: 0; padding: 0; flex: 1; }
.demo-item {
  width: 100%; display: grid; grid-template-columns: 76px 1fr; gap: var(--s4); align-items: center;
  padding: var(--s3) var(--s5); background: none; border: 0; border-bottom: 1px solid var(--rule-soft);
  border-left: 3px solid transparent; text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background .15s ease;
}
.demo-item:hover { background: var(--paper-2); }
.demo-item.is-on { background: var(--purple-wash); border-left-color: var(--purple); }
.demo-thumb {
  position: relative; width: 76px; height: 56px; display: grid; place-items: center; overflow: hidden;
  background: #fff; border: 1px solid var(--rule); border-radius: 6px;
}
/* поки логотип вантажиться (або якщо його немає) — назва текстом */
.demo-thumb img { display: none; max-width: 92%; max-height: 88%; object-fit: contain; }
.demo-thumb.has-img img { display: block; }
.demo-thumb b { font-size: 10px; font-weight: 600; text-align: center; padding: 0 4px; line-height: 1.15; overflow-wrap: anywhere; color: var(--ink-2); }
.demo-thumb.has-img b { display: none; }
.demo-item-t { display: grid; gap: 2px; min-width: 0; }
.demo-item-t > b { font-weight: 600; font-size: var(--t-base); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-item-t > span { font-size: var(--t-xs); color: var(--ink-3); }
.demo-tag { justify-self: start; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2) !important; }
.demo-tag.is-hot { background: #fbefe0; color: #8a5312 !important; }
.demo-pager {
  display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5);
  font-size: var(--t-xs); color: var(--ink-3);
}
.demo-pager span { margin-right: auto; }
.demo-pager button {
  width: 32px; height: 32px; border: 1px solid var(--rule); border-radius: 6px; background: #fff;
  color: var(--ink-2); cursor: pointer; font-size: 18px; line-height: 1;
}
.demo-pager button:hover:not([disabled]) { border-color: var(--purple); color: var(--purple); }
.demo-pager button[disabled] { opacity: .35; cursor: default; }
.demo-empty { padding: var(--s6) var(--s5); color: var(--ink-2); font-size: var(--t-sm); }

/* картка марки */
.demo-detail { padding: var(--s5) var(--s6) var(--s6); min-width: 0; }
.demo-back { display: none; }
.demo-detail-head { font-size: var(--t-sm); color: var(--ink-3); padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-soft); margin-bottom: var(--s5); }
.demo-detail-head b { color: var(--ink); }
.demo-card { display: grid; gap: var(--s5); }
@media (min-width: 1000px) { .demo-card { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } }
.demo-img {
  aspect-ratio: 1; max-width: 220px; display: grid; place-items: center; padding: var(--s4);
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-md); box-shadow: var(--elev-1);
}
.demo-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.demo-img span { font: 600 var(--t-xl) / 1.2 var(--display); text-align: center; overflow-wrap: anywhere; }
.demo-img.has-img span { display: none; }
.demo-info h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.demo-kind { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s1); }
.demo-info dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: var(--s4) 0 0; font-size: var(--t-sm); }
.demo-info dt { color: var(--ink-3); }
.demo-info dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.demo-info mark { background: #fbefe0; color: #8a5312; padding: 0 4px; border-radius: 3px; }
.demo-st { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: var(--t-xs); font-weight: 500; }
.demo-st--ok { background: #e3f3ec; color: var(--good); }
.demo-st--wait { background: var(--purple-wash); color: var(--purple); }
.demo-st--off { background: var(--paper-2); color: var(--ink-3); }

.demo-tabs { display: flex; gap: var(--s5); margin-top: var(--s6); border-bottom: 1px solid var(--rule); }
.demo-tabs button {
  padding: var(--s3) 0; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-size: var(--t-sm); color: var(--ink-3); cursor: pointer;
}
.demo-tabs [aria-selected="true"] { color: var(--ink); border-bottom-color: var(--purple); font-weight: 500; }
.demo-panel { padding-top: var(--s4); font-size: var(--t-sm); }
.demo-live { color: var(--ink-3); display: flex; align-items: center; gap: var(--s2); }
.demo-live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: pulse 1.6s ease-in-out infinite; }
.demo-progress { color: var(--ink-2); margin-bottom: var(--s3); }
.demo-progress span { color: var(--ink-3); }
.demo-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: st; }
.demo-stages li {
  counter-increment: st; display: grid; grid-template-columns: 22px 1fr auto; gap: var(--s3); align-items: baseline;
  color: var(--ink-3);
}
.demo-stages li::before {
  content: counter(st); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--rule); font-size: 11px;
}
.demo-stages li.is-done { color: var(--ink); }
.demo-stages li.is-done::before { content: "✓"; background: var(--good); border-color: var(--good); color: #fff; }
.demo-stages li.is-current { color: var(--purple); font-weight: 500; }
.demo-stages li.is-current::before { border-color: var(--purple); color: var(--purple); }
.demo-stages li.is-stopped { color: var(--warn); }
.demo-stages li.is-stopped::before { content: "!"; border-color: var(--warn); color: var(--warn); }
.demo-stages em { font-style: normal; font-size: var(--t-xs); color: inherit; opacity: .8; }
.demo-crit { list-style: none; margin: 0; padding: 0; display: grid; }
.demo-crit li { display: flex; justify-content: space-between; padding: var(--s2) 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink-2); }
.demo-crit b { color: var(--purple); font-weight: 400; }
.demo-note { margin-top: var(--s4); color: var(--ink-2); max-width: 60ch; }

.demo-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5);
  padding: var(--s3) var(--s5); border-top: 1px solid var(--rule-soft); background: var(--paper-2);
  font-size: var(--t-xs); color: var(--ink-3);
}
.demo-limits summary { cursor: pointer; color: var(--ink-2); }
.demo-limits p { margin-top: var(--s2); max-width: 60ch; }

/* телефон: список і картка по черзі */
@media (max-width: 759px) {
  .demo-body { min-height: 0; }
  .demo-list { border-right: 0; }
  .demo-detail { display: none; padding: var(--s4) var(--s5) var(--s5); }
  .demo.is-detail .demo-list { display: none; }
  .demo.is-detail .demo-detail { display: block; }
  .demo-back {
    display: inline-block; margin-bottom: var(--s3); padding: 0; background: none; border: 0;
    font: inherit; font-size: var(--t-sm); color: var(--purple); cursor: pointer;
  }
  .demo-img { max-width: 160px; }
  .demo-list-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .demo-live .dot { animation: none; } }

/* ============================================================
   Hero: заголовок ліворуч, дії праворуч, під ними — демонстрація
   процесу з чотирьох карток над хвилястою лінією (hero-steps-v1.js).
   ============================================================ */

.hero {
  /* hero займає рівно висоту вікна; сцена бере решту місця під заголовком
     і зменшується, якщо його бракує (hero-steps: fit()) */
  display: flex; flex-direction: column; min-height: 100svh; padding-bottom: var(--s4);
  /* stretch, а не базове center: інакше сцена стискається до ширини карток
     і лінія шляху обривається, не доходячи до країв екрана */
  align-items: stretch;
}
/* hero ширший за решту сторінки — як у референсі, майже від краю до краю;
   шапка тієї ж ширини, щоб логотип стояв на одній лінії із заголовком */
.hero .wrap, .site-header > .wrap { max-width: 1480px; }
.hero-top {
  display: grid; gap: var(--s6); align-items: end;
  padding-top: clamp(var(--s5), 5vh, var(--s8));
}
@media (min-width: 900px) { .hero-top { grid-template-columns: minmax(0, 1fr) auto; } }
.hero-copy .status { margin-bottom: var(--s4); }
.hero h1 {
  /* залежить і від ширини, і від висоти вікна: на низьких екранах менший */
  font-size: clamp(2.2rem, min(5vw, 7.6vh), 4.6rem); font-weight: 700; line-height: 1.02;
  letter-spacing: -.035em; max-width: none; text-wrap: wrap;
}
.hero-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4) var(--s6); margin-top: clamp(var(--s3), 2vh, var(--s5));
}
.hero-lead { color: #a993f0; font-size: clamp(1.05rem, min(1.6vw, 2.4vh), 1.45rem); max-width: none; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-actions .btn { gap: var(--s2); padding: 14px var(--s5); font-size: var(--t-base); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }

/* ---- сцена ---- */
.hsteps { position: relative; flex: 1; margin-top: clamp(var(--s3), 2vh, var(--s5)); }
/* Масштаб сцени під висоту вікна ставить JS; опора — верх по центру.
   padding-top — запас під активну картку: вона вища за свій рядок
   і виростає вгору, а не налазить на підзаголовок. */
.hs-cols { transform-origin: 50% 0; padding-top: 84px; }
.hs-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.hs-line-base { fill: none; stroke: rgba(185, 169, 220, .5); stroke-width: 2; stroke-dasharray: 8 8; }
.hs-line-done {
  fill: none; stroke: #a07cf4; stroke-width: 3.5; stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.22, .8, .24, 1);
}
html:not(.js) .hs-line, .hsteps:not(.is-live) .hs-line { display: none; }

/* проміжок між колонками росте з шириною екрана: картки не злипаються */
.hs-cols { position: relative; z-index: 1; display: flex; gap: clamp(36px, 3.6vw, 64px); align-items: flex-start; }
.hs-col {
  flex: 1 1 0; min-width: 0; display: grid; justify-items: center;
  grid-template-rows: 312px 34px auto auto;
  padding-top: var(--dy, 0px);
  transition: flex-grow .8s cubic-bezier(.22, .8, .24, 1);
}
.hs-col[data-i="1"] { --dy: 0px; }
.hs-col[data-i="2"] { --dy: 64px; }
.hs-col[data-i="3"] { --dy: 34px; }
.hs-col[data-i="4"] { --dy: 4px; }
.hs-col.is-on { flex-grow: 1.55; }
.hs-stem { width: 2px; background: rgba(185, 169, 220, .55); height: 100%; }

/* ---- картки: спокій — темний контур, активна — біла й більша ---- */
.hs-card {
  align-self: end; width: 92%; max-width: 290px; position: relative;
  padding: var(--s5); border-radius: 16px; cursor: pointer; color: #fff;
  background: rgba(255, 255, 255, .03); border: 1.5px solid rgba(185, 169, 220, .55);
  transform: scale(.94); transform-origin: 50% 100%; opacity: .78;
  transition: transform .7s cubic-bezier(.22, .8, .24, 1), opacity .5s ease, background .5s ease,
              color .5s ease, border-color .5s ease, box-shadow .5s ease, max-width .7s ease;
}
.hs-col.is-on .hs-card {
  width: 100%; max-width: 440px; transform: none; opacity: 1;
  background: #fff; color: var(--ink); border-color: transparent;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1);
}
.hs-card--decision { clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.hs-card--decision::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 27px; height: 27px;
  background: linear-gradient(225deg, transparent 50%, rgba(185, 169, 220, .55) 50%);
}

.hs-title { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); font-weight: 600; font-size: 1rem; }
/* значки в заголовку картки не стискаються й не налазять на текст */
.hs-title > .hs-ico, .hs-title > .hs-doc-ico { flex: none; }
.hs-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(127, 119, 221, .12); }
.hs-ico svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hs-meta { font-size: var(--t-sm); opacity: .72; margin-top: var(--s2); }
.hs-title[for] { cursor: text; }
/* справжнє поле: можна ввести свою назву й перейти до демо пошуку */
.hs-field {
  margin-top: var(--s4); padding: var(--s2) var(--s2) var(--s2) var(--s4); border-radius: 12px;
  border: 1.5px solid rgba(185, 169, 220, .6); display: flex; align-items: center; gap: var(--s2);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.hs-field input {
  flex: 1; min-width: 0; padding: var(--s1) 0; border: 0; background: transparent; color: inherit;
  font: 600 1.75rem / 1.2 var(--display); letter-spacing: -.02em;
}
.hs-field input:focus { outline: none; }
.hs-field input::placeholder { color: inherit; opacity: .4; }
.hs-field:focus-within { border-color: #a07cf4; box-shadow: 0 0 0 4px rgba(160, 124, 244, .25); }
.hs-col.is-on .hs-field { border-color: var(--purple); }
.hs-go {
  flex: none; padding: 10px 14px; border-radius: 9px; border: 0; cursor: pointer;
  background: var(--purple); color: #fff; font: 500 var(--t-sm) / 1 var(--sans); white-space: nowrap;
  transition: background .2s ease;
}
.hs-go:hover { background: var(--purple-deep); }
.hs-col:not(.is-on) .hs-go { background: rgba(255, 255, 255, .12); }
/* у неактивній (вужчій) картці кнопка — лише стрілка, щоб назва не обрізалась */
.hs-col:not(.is-on) .hs-go-t { display: none; }
.hs-big { font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: var(--s3); }
.hs-mid { font-size: 1.4rem; font-weight: 700; margin-top: var(--s3); }

.hs-rows { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; }
.hs-rows li {
  display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s3) 0; border-top: 1px solid rgba(127, 119, 221, .18);
  opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .4s ease;
}
.hs-col.is-on .hs-rows li { opacity: 1; transform: none; }
.hs-col.is-on .hs-rows li:nth-child(2) { transition-delay: .35s; }
.hs-col.is-on .hs-rows li:nth-child(3) { transition-delay: .7s; }
.hs-col:not(.is-on) .hs-rows li { opacity: .45; transform: none; }
/* у неактивній (вужчій) картці позначки збігу не вміщаються — ховаємо їх,
   вони з'являються, коли картка стає активною й широкою */
.hs-col:not(.is-on) .hs-rows li:not(.hs-lawyer) { grid-template-columns: 30px minmax(0, 1fr); }
.hs-col:not(.is-on) .hs-rows li:not(.hs-lawyer) em { display: none; }
.hs-rows li > span { min-width: 0; }
.hs-rows b { display: block; font-size: .95rem; }
.hs-rows small { display: block; font-size: 12px; opacity: .7; }
.hs-rows em {
  font-style: normal; font-size: 12px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: rgba(127, 119, 221, .12);
}
.hs-rows li.hs-lawyer { display: block; padding: 0; }
.hs-lawyer a {
  display: grid; grid-template-columns: 34px 1fr auto; gap: var(--s3); align-items: center;
  padding: var(--s3) var(--s2); margin: 0 calc(var(--s2) * -1); border-radius: 10px;
  color: inherit; text-decoration: none; transition: background .2s ease;
}
.hs-lawyer a:hover { background: rgba(127, 119, 221, .1); }
.hs-lawyer small { color: var(--purple); opacity: 1 !important; font-weight: 500; }
.hs-col:not(.is-on) .hs-lawyer small { color: inherit; }
.hs-lawyer em { background: none; font-size: 18px; }
.hs-sun { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: currentColor; }
.hs-sun--open circle { fill: none; }
/* значок документа — SVG (файл із загнутим кутом і рядками) */
.hs-doc-ico {
  width: 22px; height: 22px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}
.hs-sub { font-size: 12px; opacity: .7; margin-top: 2px; }
/* поля документа: заява й рішення виглядають як справжні бланки */
.hs-fields {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--s3);
  margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px dashed currentColor;
  font-size: 12px; line-height: 1.35;
}
.hs-fields dt { opacity: .6; }
.hs-fields dd { margin: 0; font-weight: 500; }
.hs-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s3); font-size: 11.5px; }
.hs-checks span { padding: 3px 9px; border-radius: 999px; background: rgba(70, 30, 134, .1); font-weight: 500; }
.hs-checks span:first-child { background: #e3f3ec; color: var(--good); }
/* на темній неактивній картці — світлі напівпрозорі плашки */
.hs-col:not(.is-on) .hs-checks span { background: rgba(255, 255, 255, .08); }
.hs-col:not(.is-on) .hs-checks span:first-child { background: rgba(143, 224, 189, .14); color: #8fe0bd; }
/* на кроці 3 поля заяви з'являються по черзі — як заповнення */
.hs-col.is-on .hs-card--app .hs-fields > * { animation: hs-in .4s ease both; }
.hs-col.is-on .hs-card--app .hs-fields > :nth-child(n+3) { animation-delay: .2s; }
.hs-col.is-on .hs-card--app .hs-fields > :nth-child(n+5) { animation-delay: .4s; }
.hs-col.is-on .hs-card--app .hs-fields > :nth-child(n+7) { animation-delay: .6s; }
.hs-col.is-on .hs-card--app .hs-checks { animation: hs-in .4s ease .9s both; }
@keyframes hs-in { from { opacity: 0; transform: translateY(4px); } }
/* Печатка: як справжній штамп — подвійне коло, напис по колу, R у центрі,
   легкий нахил. На кроці 4 «опускається» з відскоком. */
.hs-seal {
  position: absolute; right: 14px; bottom: 10px; width: 74px; height: 74px;
  color: var(--purple); overflow: visible;
  opacity: 0; transform: rotate(-14deg) scale(1.9);
  /* зникає одразу, разом із карткою */
  transition: opacity .2s ease, transform .2s ease;
}
.hs-seal-ring { fill: none; stroke: currentColor; stroke-width: 3.2; }
.hs-seal-ring--thin { stroke-width: 1.6; }
.hs-seal-arc { fill: currentColor; font: 700 8.6px/1 var(--sans); letter-spacing: 1.15px; }
.hs-seal-r { fill: currentColor; font: 700 24px/1 var(--sans); }
.hs-col.is-on .hs-seal {
  opacity: .92; transform: rotate(-14deg);
  /* з'являється з затримкою — коли картка вже розгорнулась — і з відскоком */
  transition: opacity .25s ease .6s, transform .55s cubic-bezier(.3, 1.6, .5, 1) .6s;
}
/* текст під печаткою не залазить під неї */
.hs-col.is-on .hs-card--decision .hs-meta { padding-right: 84px; }

/* ---- точки й підписи ---- */
.hs-dot {
  width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer;
  background: var(--night); border: 3px solid #b9a9dc; margin-top: -2px;
  transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
}
.hs-col.is-past .hs-dot { background: #a07cf4; border-color: #a07cf4; }
.hs-col.is-on .hs-dot {
  transform: scale(1.5); background: #fff; border-color: #a07cf4;
  box-shadow: 0 0 0 5px rgba(160, 124, 244, .35);
}
.hs-label { margin-top: var(--s5); text-align: center; color: #c5b9dd; font-size: 1.05rem; line-height: 1.35; transition: color .4s ease; }
.hs-label b { display: block; font-size: 1.05rem; color: #fff; font-weight: 600; }
.hs-col.is-on .hs-label { color: #fff; font-weight: 600; }

/* ---- нижня смуга ---- */
.hs-bar { display: none; }
.hs-mobile-steps { display: none; }

/* ---- планшет: картки вужчі, вміст компактніший ---- */
@media (max-width: 1099px) {
  .hs-col { grid-template-rows: 300px 32px auto auto; }
  .hs-card { padding: var(--s4); }
  .hs-big { font-size: 1.9rem; }
  .hs-rows li { grid-template-columns: 28px 1fr; }
  .hs-rows em { display: none; }
  .hs-go-t { display: none; }      /* у вужчій картці кнопка — лише стрілка */
  .hs-field input { font-size: 1.4rem; }
}

/* ---- телефон: одна активна картка, під нею — смуга кроків ---- */
@media (max-width: 759px) {
  .hero-top { padding-top: var(--s7); }
  .hero { min-height: 0; }
  .hero-row { flex-direction: column; align-items: stretch; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
  .hs-line { display: none; }
  .hs-cols { display: block; }
  .hsteps.is-live .hs-col { display: none; }
  .hsteps.is-live .hs-col.is-on { display: block; padding: 0; }
  .hsteps:not(.is-live) .hs-col { display: block; margin-bottom: var(--s4); padding: 0; }
  .hs-stem, .hs-dot, .hs-label { display: none; }
  .hs-card, .hs-col.is-on .hs-card { max-width: none; transform: none; }
  .hs-card { min-height: 390px; }
  .hs-rows em { display: inline; }
  .hs-rows li { grid-template-columns: 30px 1fr auto; }
    .hs-bar { display: flex; margin-top: var(--s4); }
  .hs-mobile-steps { display: flex; gap: var(--s2); }

  .hs-mobile-steps button {
    min-width: 44px; height: 34px; border-radius: 999px; padding: 0 var(--s3); cursor: pointer;
    border: 1.5px solid rgba(185, 169, 220, .5); background: transparent; color: #c5b9dd; font: inherit; font-size: var(--t-xs);
  }
  .hs-mobile-steps .is-past { border-color: #a07cf4; color: #fff; }
  .hs-mobile-steps .is-on { background: #fff; border-color: #fff; color: var(--purple); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-col, .hs-card, .hs-rows li, .hs-seal, .hs-line-done, .hs-dot { transition: none; }
  .hs-col.is-on .hs-card--app .hs-fields > *, .hs-col.is-on .hs-card--app .hs-checks { animation: none; }
}

/* Низькі екрани (ноутбук зі збільшеним масштабом, браузер на пів екрана):
   верх hero компактніший, щоб сцені лишилось місце й hero вміщався цілим. */
@media (min-width: 760px) and (max-height: 760px) {
  .hero-copy .status { display: none; }
  .hero h1 { font-size: clamp(2rem, min(4.6vw, 7.2vh), 4.6rem); }
  .hero-row { margin-top: var(--s3); flex-wrap: nowrap; }
  .hero-lead { font-size: 1rem; }
  .hero-actions { flex-wrap: nowrap; }
  .hero-actions .btn { padding: 10px var(--s4); font-size: var(--t-sm); white-space: nowrap; }
  .hsteps { margin-top: var(--s2); }
  .hs-cols { padding-top: 72px; }
}
@media (min-width: 760px) and (max-width: 1099px) and (max-height: 760px) {
  .hero-row { flex-wrap: wrap; }
}

/* ============================================================
   Меню: поточний розділ підкреслений; CTA зі стрілкою.
   ============================================================ */
.nav a[aria-current] { color: #fff; border-bottom-color: rgba(255, 255, 255, .7); }
.site-header.is-solid .nav a[aria-current] { color: var(--purple); border-bottom: 2px solid var(--purple); }
.cta-head { gap: var(--s2); }
.site-header:not(.is-solid) .cta-head { background: #fff; color: var(--purple); border-color: #fff; }
.site-header:not(.is-solid) .cta-head:hover { background: var(--purple-wash); border-color: var(--purple-wash); }

/* ============================================================
   Можливості: класи МКТП — пігулки з номером у колі.
   ============================================================ */
.cls-chips { list-style: none; margin: 0; padding: var(--s3) 0 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.cls-chips li {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px 12px 4px 4px; border-radius: 999px;
  background: var(--purple-wash); color: var(--purple-deep);
  font-size: var(--t-xs); font-weight: 500;
}
.cls-chips b {
  min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 999px; background: var(--purple); color: #fff;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ============================================================
   Демо: відсотки в «За чим порівнюють».
   ============================================================ */
.demo-crit b { font-weight: 600; font-variant-numeric: tabular-nums; }
.demo-crit li.is-main {
  margin-bottom: var(--s2); padding: var(--s3) var(--s4); border: 0; border-radius: 10px;
  background: var(--purple-wash); color: var(--purple-deep); font-weight: 600;
}
.demo-crit li.is-main b { font-size: 1.15rem; }

/* ============================================================
   Ранній доступ: текст ліворуч, світла картка форми праворуч,
   лінія шляху з лівого краю впирається в картку.
   ============================================================ */
.wl2 { background: var(--night); color: #fff; padding-block: var(--s9); overflow: hidden; }
.wl2-grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 960px) { .wl2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s8); } }
.wl2-copy { position: relative; }
.wl2-copy .eyebrow { color: #b9a9dc; letter-spacing: .2em; }
.wl2 h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; margin-top: var(--s4); }
.wl2-lead { color: #a993f0; font-size: clamp(1.05rem, 1.5vw, 1.35rem); margin-top: var(--s5); max-width: 30ch; }
.wl2-cta { font-weight: 600; font-size: var(--t-lg); margin-top: var(--s6); }
.wl2-line { display: none; }
@media (min-width: 960px) {
  /* від лівого краю екрана до лівого краю картки */
  .wl2-line {
    --edge: max(var(--s5), calc((100vw - var(--measure)) / 2 + var(--s6)));
    display: block; position: absolute; left: calc(-1 * var(--edge)); right: calc(-1 * var(--s8));
    bottom: -84px; height: 70px; pointer-events: none;
  }
  .wl2-line svg { width: 100%; height: 100%; overflow: visible; }
  .wl2-line path { fill: none; stroke: #a993f0; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .wl2-line i {
    position: absolute; right: -7px; top: calc(50 / 80 * 100% - 7px); width: 14px; height: 14px;
    border-radius: 50%; background: var(--night); border: 2.5px solid #a993f0;
  }
}
.wl2-card {
  position: relative; background: #f1ecfa; color: var(--ink);
  border-radius: 14px; padding: var(--s7) var(--s6) var(--s6);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
}
.wl2-card::before { /* фіолетовий акцент угорі */
  content: ""; position: absolute; top: 0; left: 0; width: 22%; height: 5px;
  background: var(--purple); border-radius: 14px 0 0 0;
}
.wl2-card h3 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 700; letter-spacing: -.02em; }
.wl2-sub { color: #7d68b8; font-size: var(--t-lg); margin-top: var(--s2); }
.wl2-form { margin-top: var(--s6); gap: var(--s4); }
.wl2-form .field label { color: var(--ink); font-weight: 500; font-size: var(--t-base); }
.wl2-input { position: relative; }
.wl2-input svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px;
  fill: none; stroke: var(--purple); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8;
}
.wl2-form .wl2-input input[type="email"] { padding: 16px 16px 16px 52px; font-size: var(--t-lg); background: #fff; border-color: #cfc4ea; border-radius: 6px; }
.wl2-form .consent { font-size: var(--t-base); color: var(--ink); }
.wl2-form .consent input { width: 22px; height: 22px; }
.wl2-privacy { color: #6c4fb0; font-size: var(--t-sm); justify-self: start; }
.wl2-go { justify-content: space-between; gap: var(--s4); padding: 18px var(--s5); border-radius: 6px; font-size: var(--t-lg); }
.wl2-note { color: #7d68b8; font-size: var(--t-sm); }
/* анкета другого кроку в світлій картці */
.wl2-card .profile .btn--text { color: var(--ink-3); }
.wl2-card .done { border-color: #cfc4ea; background: #fff; }
.wl2-card .done span { color: var(--ink-2); }
.wl2-card .msg.err { color: #b42318; }

/* ============================================================
   FAQ: ліворуч заголовок і «Не знайшли відповіді?», праворуч —
   вкладки за темами й акордеон; відкрите питання — біла картка.
   ============================================================ */
.faq2 { background: #f4f1fb; }
.faq2-grid { display: grid; gap: var(--s7); }
@media (min-width: 960px) { .faq2-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--s8); } }
.faq2-side { display: flex; flex-direction: column; }
.faq2 h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; margin-top: var(--s4); max-width: 12ch; }
.faq2-lead { color: #7d68b8; font-size: clamp(1.1rem, 1.8vw, 1.6rem); margin-top: var(--s5); max-width: 22ch; }
.faq2-ask { margin-top: auto; padding-top: var(--s6); border-top: 1.5px solid var(--purple); display: grid; gap: var(--s2); max-width: 26rem; }
@media (max-width: 959px) { .faq2-ask { margin-top: var(--s6); } }
.faq2-ask b { font-size: var(--t-lg); }
.faq2-ask a { color: var(--purple); justify-self: start; }

.faq2-tabs { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); border-bottom: 1px solid #d6cdec; margin-bottom: var(--s4); }
.faq2-tabs [role="tablist"] { display: flex; gap: var(--s6); overflow-x: auto; }
.faq2-tabs button {
  padding: var(--s3) var(--s3) var(--s4); margin-bottom: -1px; background: none; border: 0; cursor: pointer;
  border-bottom: 2.5px solid transparent; font: inherit; font-size: var(--t-base); color: var(--ink-3); white-space: nowrap;
}
.faq2-tabs [aria-selected="true"] { color: var(--purple); border-bottom-color: var(--purple); font-weight: 600; }
.faq2-count { color: #8f84b0; font-size: var(--t-sm); padding-bottom: var(--s4); white-space: nowrap; }
/* без JS вкладок немає — теми йдуть одна під одною з підзаголовками */
.faq2-panel-t { font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: var(--s6) 0 var(--s2); }
.faq2.is-tabbed .faq2-panel-t { display: none; }
.faq2:not(.is-tabbed) .faq2-tabs { display: none; }

.faq2-item { border-bottom: 1px solid #d6cdec; transition: background .2s ease; }
.faq2-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s5); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600;
}
.faq2-item summary::-webkit-details-marker { display: none; }
.faq2-item summary::after { content: "+"; color: var(--purple); font-size: 1.6rem; font-weight: 300; line-height: 1; }
.faq2-item[open] { background: #fff; border-radius: 8px; border-bottom-color: transparent; box-shadow: 0 6px 24px -12px rgba(26, 12, 58, .18); }
.faq2-item[open] summary::after { content: "–"; }
.faq2-a { padding: 0 var(--s5) var(--s5); display: grid; gap: var(--s3); }
.faq2-a p { color: var(--ink-2); max-width: 70ch; }
.faq2-link { color: var(--purple); justify-self: start; }

/* ============================================================
   Футер: лінія шляху над логотипом, дві колонки посилань.
   ============================================================ */
.f2 { position: relative; background: var(--night); color: #fff; padding: var(--s9) 0 var(--s6); overflow: hidden; }
.f2-line { position: absolute; left: 0; top: var(--s6); width: min(320px, 30vw); height: 76px; overflow: visible; }
.f2-line path { fill: none; stroke: #a993f0; stroke-width: 1.5; }
.f2-line circle { fill: var(--night); stroke: #a993f0; stroke-width: 2.5; }
.f2-grid { display: grid; gap: var(--s7); }
@media (min-width: 900px) { .f2-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); } }
.f2-brand img { width: clamp(150px, 16vw, 220px); }
.f2-brand p { font-size: clamp(1.2rem, 2vw, 1.75rem); line-height: 1.3; margin-top: var(--s5); }
.f2-col { display: grid; gap: var(--s3); align-content: start; }
.f2-col h3 { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: #a993f0; margin-bottom: var(--s2); }
.f2-col a, .f2-col p { color: #fff; text-decoration: none; font-size: var(--t-base); justify-self: start; }
.f2-col a:hover { color: #c9b8ff; }
.f2-ext { border-bottom: 1px solid rgba(255, 255, 255, .6); }
.f2-mail { margin-top: var(--s4); }
.f2-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  margin-top: var(--s8); padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, .14);
  color: #a99cc9; font-size: var(--t-sm);
}
.f2-top { color: #c9b8ff; text-decoration: none; }
.f2-top:hover { color: #fff; }

/* вкладки FAQ і заголовок раннього доступу не розпирають колонку на телефоні */
.faq2-grid > *, .wl2-grid > * { min-width: 0; }
.faq2-tabs [role="tablist"] { min-width: 0; scrollbar-width: none; }
.faq2-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
@media (max-width: 759px) {
  .faq2-count { display: none; }
  .faq2-tabs [role="tablist"] { gap: var(--s4); }
  .faq2-item summary { padding: var(--s4); }
  .faq2-a { padding: 0 var(--s4) var(--s4); }
  .wl2 h2 { font-size: 2.3rem; }
  .wl2-card { padding: var(--s6) var(--s5) var(--s5); }
  .f2-line { width: 140px; }
}

/* ============================================================
   FAQ: відкриті питання не злипаються.
   ============================================================ */
.faq2-item[open] { margin: var(--s3) 0; }
.faq2-item[open] + .faq2-item[open] { margin-top: var(--s4); }
.faq2-item summary:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* ============================================================
   «Рутину — ШІ. Рішення — з юристом.»: цінності + вкладки етапів.
   ============================================================ */
.ask2 { background: #f4f1fb; }
.ask-head { display: grid; gap: var(--s5) var(--s8); align-items: end; }
@media (min-width: 960px) { .ask-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.ask2 .eyebrow { letter-spacing: .2em; }
.ask2 h2 { font-size: clamp(2.3rem, 4.8vw, 4.2rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; margin-top: var(--s4); max-width: none; }
.ask-lead { color: var(--ink-2); font-size: var(--t-lg); max-width: 46ch; }
.ask-values { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; gap: var(--s4); }
@media (min-width: 760px) { .ask-values { grid-template-columns: repeat(3, 1fr); } }
.ask-values li { display: grid; gap: var(--s1); padding-top: var(--s4); border-top: 2px solid var(--purple); }
.ask-values b { font-size: var(--t-xl); font-weight: 700; color: var(--purple); }
.ask-values span { color: var(--ink-2); font-size: var(--t-sm); }

.ask-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s8); border-bottom: 1px solid #d6cdec; }
.ask-tabs button {
  padding: var(--s4) var(--s2); margin-bottom: -1px; background: none; border: 0; cursor: pointer;
  border-bottom: 3px solid transparent; font: inherit; font-size: var(--t-lg); color: var(--ink-3);
}
.ask-tabs [aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--purple); }
.ask2:not(.is-tabbed) .ask-tabs { display: none; }
.ask2:not(.is-tabbed) .ask-panel + .ask-panel { margin-top: var(--s5); }

.ask-panel { margin-top: var(--s5); background: #fff; border: 1px solid #d6cdec; border-radius: 6px; overflow: hidden; }
.ask-ctx { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s5) var(--s6); border-bottom: 1px solid #e6e0f3; }
.ask-ctx span { display: grid; gap: 2px; font-size: var(--t-xl); font-weight: 500; }
.ask-ctx small, .ask-get small { font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.ask-ctx em { font-style: normal; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }
.ask-split { display: grid; }
@media (min-width: 900px) { .ask-split { grid-template-columns: 1.1fr 1fr; } }
.ask-ai { padding: var(--s6); }
.ask-law { padding: var(--s6); background: var(--night); color: #fff; }
.ask-split h3 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -.02em; }
.ask-sub { color: #7d68b8; margin-top: var(--s1); }
.ask-law .ask-sub { color: #a993f0; }
.ask-ai ul { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; }
.ask-ai li { display: flex; gap: var(--s5); align-items: center; padding: var(--s4) 0; border-bottom: 1px solid #e6e0f3; }
.ask-ai li:last-child { border-bottom: 0; }
.ask-ai li span { display: grid; gap: 2px; }
.ask-ai li strong { font-weight: 600; font-size: var(--t-lg); }
.ask-ai li small { color: var(--ink-3); font-size: var(--t-sm); }
.ask-num { min-width: 2.2em; font-size: 2rem; font-weight: 700; color: var(--purple); font-variant-numeric: tabular-nums; }
.ask-foot { margin-top: var(--s3); color: var(--ink-3); font-size: var(--t-sm); }
.ask-law ol { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s4); }
.ask-law li { display: flex; gap: var(--s5); align-items: center; font-size: var(--t-lg); }
.ask-law li b { min-width: 2.2em; font-size: 2rem; font-weight: 700; color: #a993f0; }
.ask-note { margin-top: var(--s6); color: #a993f0; font-size: var(--t-lg); }
.ask-get {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: var(--s5) var(--s6); background: #efeaf9; border-top: 1px solid #e6e0f3;
  color: var(--ink); text-decoration: none;
}
.ask-get span { display: grid; gap: 2px; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; }
.ask-get i { font-style: normal; font-size: 1.8rem; color: var(--purple); transition: transform .2s ease; }
.ask-get:hover i { transform: translateX(4px); }
@media (max-width: 759px) {
  .ask-tabs { grid-template-columns: none; display: flex; overflow-x: auto; scrollbar-width: none; }
  .ask-tabs button { white-space: nowrap; padding-inline: var(--s3); font-size: var(--t-base); }
  .ask-ctx, .ask-ai, .ask-law, .ask-get { padding: var(--s5); }
  .ask-ctx { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Порядок: темна колонка ліворуч, кроки «ваш крок → результат».
   ============================================================ */
.ord { display: grid; background: #fff; }
@media (min-width: 960px) {
  .ord { grid-template-columns: max(340px, calc((100% - var(--measure)) / 2 + 420px)) 1fr; }
  /* біла смуга під обома колонками — інакше темна панель зливається з темною секцією запису нижче */
  .ord { padding-bottom: var(--s8); }
  .ord-side { border-bottom-right-radius: 28px; }
}
.ord-side { background: var(--night); color: #fff; display: flex; }
.ord-side-in {
  display: flex; flex-direction: column; width: 100%;
  padding: var(--s9) var(--s6) var(--s8) max(var(--s5), calc((100vw - var(--measure)) / 2 + var(--s6)));
}
.ord-side .eyebrow { color: #b9a9dc; letter-spacing: .2em; }
.ord h2 { font-size: clamp(2.3rem, 4.2vw, 3.8rem); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; margin-top: var(--s4); }
.ord-lead { color: #a993f0; font-size: var(--t-xl); margin-top: var(--s5); max-width: 22ch; }
.ord-lawyer { margin-top: auto; padding-top: var(--s7); display: grid; gap: var(--s2); max-width: 30ch; }
.ord-lawyer::before { content: ""; width: 120px; height: 1.5px; background: rgba(185, 169, 220, .6); margin-bottom: var(--s4); }
.ord-lawyer b { font-size: var(--t-lg); }
.ord-lawyer span { color: #a993f0; }
.ord-go { margin-top: var(--s6); align-self: flex-start; gap: var(--s3); padding: 14px var(--s5); font-size: var(--t-base); }
.ord-main { padding: var(--s9) max(var(--s5), calc((100vw - var(--measure)) / 2 + var(--s6))) var(--s8) var(--s7); }
.ord-cols {
  display: grid; grid-template-columns: 60px minmax(0, 1.25fr) 40px minmax(0, 1fr); gap: var(--s4);
  font-size: var(--t-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s5);
}
.ord-cols span:first-child { grid-column: 2; }
.ord-cols span:last-child { grid-column: 4; }
.ord-list { list-style: none; margin: 0; padding: 0; }
.ord-list li {
  display: grid; grid-template-columns: 60px minmax(0, 1.25fr) 40px minmax(0, 1fr); gap: var(--s4);
  align-items: center; padding: var(--s6) 0; border-bottom: 1px solid #e6e0f3;
}
.ord-list li.is-last { background: #f1ecfa; border-bottom: 0; margin-inline: calc(-1 * var(--s4)); padding-inline: var(--s4); }
.ord-n { align-self: start; padding-top: 6px; color: var(--purple); font-weight: 600; font-size: var(--t-lg); }
.ord-step h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.ord-step p { color: #7d68b8; margin-top: var(--s2); max-width: 34ch; }
.ord-arrow { font-style: normal; color: #7d68b8; font-size: 1.5rem; }
.ord-res { font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: 600; }
.ord-note { margin-top: var(--s4); text-align: right; color: var(--ink-3); font-size: var(--t-sm); }
@media (max-width: 959px) {
  .ord-side-in { padding: var(--s8) var(--s5); }
  .ord-main { padding: var(--s7) var(--s5); }
}
@media (max-width: 759px) {
  .ord-cols { display: none; }
  .ord-list li { grid-template-columns: 40px 1fr; gap: var(--s2) var(--s3); }
  .ord-arrow { display: none; }
  .ord-res { grid-column: 2; color: var(--purple); }
  .ord-res::before { content: "→ "; }
  .ord-note { text-align: left; }
}

/* ============================================================
   Футер: посилання без підкреслень; юридичні посилання внизу.
   ============================================================ */
.f2-ext { border-bottom: 0; }
.f2-col a { transition: color .15s ease; }
.f2-legal { display: flex; flex-wrap: wrap; gap: var(--s5); margin-right: auto; margin-left: var(--s7); }
.f2-legal a { color: #a99cc9; text-decoration: none; }
.f2-legal a:hover { color: #fff; }
@media (max-width: 759px) {
  .f2-bottom { flex-wrap: wrap; }
  .f2-legal { margin: 0; order: 3; width: 100%; }
}
/* посилання в тексті згоди */
.consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   Юридичні сторінки (/oferta, /privacy): спокійний текстовий макет.
   ============================================================ */
.legal-page { background: #f4f1fb; }
.legal-top { background: var(--night); }
.legal-top-in { display: flex; justify-content: space-between; align-items: center; min-height: var(--header-h); }
.legal-brand img { width: 96px; height: auto; }
.legal-back { color: #c9b8ff; text-decoration: none; font-size: var(--t-sm); }
.legal-back:hover { color: #fff; }
.legal { max-width: 820px; padding-block: var(--s8) var(--s9); }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-top: var(--s3); }
.legal-sub { color: var(--ink-2); font-size: var(--t-lg); margin-top: var(--s2); }
.legal-meta { color: var(--ink-3); font-size: var(--t-sm); margin-top: var(--s3); }
.legal-note { margin: var(--s6) 0; padding: var(--s5); background: #fff; border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.legal h2 { font-size: var(--t-xl); font-weight: 700; margin: var(--s7) 0 var(--s3); }
.legal p { color: var(--ink-2); margin-top: var(--s3); }
.legal ul { margin: var(--s3) 0 0; padding-left: 1.2em; display: grid; gap: var(--s2); color: var(--ink-2); }
.legal a { color: var(--purple); }
.legal mark.todo { background: #fff1a8; color: #6b4e00; padding: 0 4px; border-radius: 3px; font-weight: 600; }
.legal-foot { background: var(--night); color: #a99cc9; padding-block: var(--s6); font-size: var(--t-sm); }
.legal-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); }
.legal-foot nav { display: flex; flex-wrap: wrap; gap: var(--s5); }
.legal-foot a { color: #c9b8ff; text-decoration: none; }
.legal-foot a:hover { color: #fff; }