/* ================================================================
   Solunaria — дизайн-система сайта
   Эстетика: «звёздная эфемерида» — почти чёрное сине-ночное небо,
   тёплая бумага текста, звёздное золото и лунное серебро,
   приглушённая бирюза как единственный активный акцент.

   НОЧНАЯ ТЕМА (2026-08-07). Это не новый набор стилей, а переворот
   прежнего: имена всех переменных и все селекторы сохранены — меняются
   ЗНАЧЕНИЯ. Бумага и чернила поменялись местами, олива ушла в лунную
   бирюзу, бронза — в серебро, золото осталось золотом и перешло
   на цифры и цены. Точечные переопределения мест, где цвет был вбит
   константой, собраны одним блоком в конце файла.

   КОНТРАСТ (проверено на --paper #070a14, порог AA 4.5:1):
     --ink 15.9 · --ink-2 11.6 · --muted 7.1 · --gold 10.4
     --gold-deco 6.1 · --bronze 11.4 · --olive 10.9 · --hold 8.3
   ================================================================ */

:root{
  color-scheme: only dark;  /* ночная эстетика — авто-светлая тема ломает бренд */
  --header-h: 61px;        /* высота шапки; site.js уточняет по факту (шрифт/зум) */
  /* — палитра: имена прежние, значения ночные — */
  --paper:      #070a14;   /* фон страницы (было #f5f1e8) */
  --paper-deep: #0a0e1c;   /* подложки, чередование секций */
  --card:       #0e1425;   /* карточки */
  --ink:        #eae6dc;   /* основной текст — тёплая бумага */
  --ink-2:      #c2c6d2;   /* вторичный текст */
  --muted:      #949bab;   /* подписи, служебное — AA 7.1:1 на paper */
  --olive:      #7ecfc4;   /* фирменный акцент: лунная бирюза (была олива) */
  --olive-deep: #96ddd3;   /* светлее бирюзы — состояние hover на тёмном */
  --bronze:     #b9c6d8;   /* лунное серебро, ссылки в тексте — AA 11.4:1 */
  --gold:       #d9b877;   /* золото-ТЕКСТ (цифры, цены, теги) — AA 10.4:1 */
  --gold-deco:  #a98b52;   /* золото декоративное (линии, орнаменты, не текст) */
  --line:       rgba(196,208,232,.13);   /* линейки */
  --hairline:   rgba(196,208,232,.075);  /* тонкие внутренние линии */
  --hold:       #d99b6b;   /* мягкое предупреждение */
  --ok:         #8fc9a4;   /* успех, приглушённая зелень */

  /* — ночные добавления — */
  --void:       #04050b;   /* самый глубокий низ неба */
  --star:       #f4f2ea;   /* заголовки: чуть ярче основного текста */
  --aqua-ink:   #04121a;   /* текст НА бирюзовой заливке — 10.5:1 */
  --decor:      rgba(185,198,216,.26); /* эфемеридные числа-фактура (aria-hidden) */

  /* — типографика — */
  --f-display:  "Cormorant Garamond", "Cormorant Fallback", "Times New Roman", serif;
  --f-body:     "Lora", "Lora Fallback", Georgia, serif;
  --f-ui:       "Manrope", "Manrope Fallback", "Helvetica Neue", Arial, sans-serif;

  /* — размеры — */
  --w-max: 1160px;
  --w-text: 46rem;
  --r: 14px;               /* радиус карточек */
  --r-s: 9px;

  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 50px -24px rgba(0,0,0,.9);
  --shadow-page: 0 30px 80px -30px rgba(0,0,0,.95), 0 0 90px -30px rgba(126,207,196,.18);
}

/* P0-2 (регресс): Cormorant Garamond «1» на WebKit/iOS читается как «I»
   («11»→«II», «1 490 ₽»→«I 490 ₽»); font-variant-numeric:lining-nums не спасает —
   у сабсета либо нет lining-глифов, либо сама «1» неоднозначна. Пуленепробиваемо:
   подменяем ТОЛЬКО цифры, тире диапазонов и пробелы-разделители на Lora (чёткая
   серифная «1») ВНУТРИ display-семейства через unicode-range — буквы остаются
   Cormorant. Объявлено после fonts.css → выигрывает для пересекающихся кодпоинтов. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal; font-weight:400 700;
  src:url("../fonts/lora-500-latin.woff2") format("woff2");
  unicode-range:U+0030-0039, U+002C, U+002E, U+2013, U+2009, U+00A0;
  size-adjust:115%;
}

/* P0-6 / D8 (CLS на мобильных): запасные гарнитуры с метриками веб-шрифтов.
   Пока woff2 грузится, текст набирается системным шрифтом; при подмене (font-display:swap)
   строки не должны менять ширину и высоту. size-adjust выравнивает ширину знаков
   (средняя ширина a–z+пробел, замерено fontTools по latin-сабсетам), ascent/descent-override —
   высоту строки. Запасной «local()» — тот, что стоит в --f-* следующим; меняешь шрифт —
   пересчитай: size-adjust = xavg(веб)/xavg(запас), ascent = asc(веб)/size-adjust,
   descent = |desc(веб)|/size-adjust.
   Cormorant 0.4319/Times 0.4516 · Lora 0.5144/Georgia 0.4896 · Manrope 0.4914/Arial 0.4817. */
@font-face{font-family:"Cormorant Fallback"; src:local("Times New Roman"),local("TimesNewRomanPSMT");
  size-adjust:95.6%; ascent-override:96.7%; descent-override:30%; line-gap-override:0%}
@font-face{font-family:"Lora Fallback"; src:local("Georgia");
  size-adjust:105.1%; ascent-override:95.7%; descent-override:26.1%; line-gap-override:0%}
@font-face{font-family:"Manrope Fallback"; src:local("Arial"),local("ArialMT");
  size-adjust:102%; ascent-override:104.5%; descent-override:29.4%; line-gap-override:0%}

/* ---------------- база ---------------- */
*{box-sizing:border-box}
/* P1-4 регресс: .btn задаёт display:inline-flex и перебивает UA-правило
   [hidden]{display:none}. Без этого скрытая кнопка «Далее» на шаге оплаты
   оставалась видимой («мёртвая» кнопка). Приоритет hidden — над любым display. */
[hidden]{display:none!important}
html{scroll-behavior:smooth; background:var(--paper)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* короткие страницы (вход, 404) — подвал прижат к низу, а не висит посреди неба */
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}
body > main{flex:1 0 auto}
body > footer, body > .site-footer{flex:0 0 auto}
/* зерно поверх ночи — убирает бандинг градиентов. z-index:2, чтобы лечь
   и на фиксированное небо, и на контент (у неба z-index:0, у контента 1). */
body::before{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .72 0 0 0 0 .78 0 0 0 0 .92 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative; z-index:1}

/* ---------------- ночное небо ----------------
   Один общий canvas на страницу, рисует assets/js/starfield.js.
   canvas — заменяемый элемент: inset:0 его НЕ растягивает (width:auto берётся
   из intrinsic-размера). Нужны явные 100%, иначе небо схлопывается в 300×150. */
/* Высота — 100lvh (наибольшая высота вьюпорта), а не 100%: на телефоне
   адресная строка прячется при прокрутке, вьюпорт скачет на 60–100 px,
   и при height:100% холст менялся в размере — небо дёргалось. С lvh
   коробка холста постоянна, панель просто наезжает поверх неба.
   Первым идёт 100% — фолбэк для браузеров без lvh (там второй рубеж
   в starfield.js: мелкое изменение высоты не пересевает звёзды). */
#sky{position:fixed; inset:0; width:100%; height:100%; height:100lvh;
     z-index:0; pointer-events:none; display:block}
.skywash{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  height:100%; height:100lvh;
  background:
    radial-gradient(130% 78% at 50% -14%, rgba(64,96,166,.28) 0%, rgba(30,44,86,.14) 38%, transparent 66%),
    radial-gradient(80% 55% at 84% 14%, rgba(126,207,196,.09) 0%, transparent 56%),
    radial-gradient(90% 70% at 8% 96%, rgba(112,80,150,.11) 0%, transparent 58%),
    linear-gradient(180deg, #060916 0%, var(--paper) 42%, var(--void) 100%);
}

body{overflow-x:clip} /* страховка от горизонтального скролла; первопричины тоже чинятся */

h1,h2,h3,.display{font-family:var(--f-display); font-weight:500; line-height:1.14; margin:0 0 .5em; letter-spacing:.005em;
  overflow-wrap:break-word; hyphens:auto} /* «конфиденциальности» на 320px */
h1{font-size:clamp(2.5rem,5.6vw,4.3rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.35rem; font-weight:600}
p{margin:.4em 0 1em}
a{color:var(--bronze); text-decoration:none; transition:color .2s}
a:hover{color:var(--olive-deep)}
img{max-width:100%; height:auto; display:block} /* height:auto — иначе HTML-атрибут height искажает пропорции при CSS-width */
[id]{scroll-margin-top:84px} /* якоря не ныряют под sticky-шапку */

/* доступность: skip-link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:0 0 10px 0;
  font-family:var(--f-ui); font-size:.9rem;
}
.skip-link:focus{left:0}

/* табличные lining-цифры для метрик и цен */
.fact b, .price-card .price, .order-summary .total .v, .price-line, .calc-total{
  font-variant-numeric:lining-nums tabular-nums;
}
::selection{background:rgba(107,106,74,.22)}

:focus-visible{outline:2px solid var(--olive); outline-offset:3px; border-radius:2px}

.container{max-width:var(--w-max); margin:0 auto; padding:0 clamp(18px,4vw,40px)}

/* надзаголовок-«колонтитул» */
.overline{
  font-family:var(--f-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--olive);
  display:flex; align-items:center; gap:.9em; margin-bottom:1.1rem;
}
.overline::before{content:""; width:2.2em; height:1px; background:var(--olive); opacity:.55}
.overline.center{justify-content:center}
.overline.center::after{content:""; width:2.2em; height:1px; background:var(--olive); opacity:.55}

.lead{font-size:1.16rem; color:var(--ink-2); max-width:var(--w-text)}
.small, small{font-size:.85rem}
.muted{color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}

/* ---------------- кнопки ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--f-ui); font-size:.95rem; font-weight:600; letter-spacing:.01em;
  padding:.95em 1.8em; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:background .22s,color .22s,border-color .22s,box-shadow .22s;
  text-align:center; min-height:48px; user-select:none;
}
.btn-primary{background:var(--ink); color:var(--paper)}
.btn-primary:hover{background:var(--olive-deep); color:#f7f4ec}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--olive); color:var(--olive-deep)}
.btn-olive{background:var(--olive); color:#f7f4ec}
.btn-olive:hover{background:var(--olive-deep); color:#f7f4ec}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn .arr{transition:transform .22s}
.btn:hover .arr{transform:translateX(3px)}

/* ---------------- шапка ----------------
   ВАЖНО (регресс P0-1): фон шапки — rgba, НЕ color-mix. На старом iOS Safari
   (<16.2) color-mix() не парсится → свойство отбрасывается → шапка становится
   прозрачной, и на внутренних страницах тёмная CTA-кнопка «висит» осиротело.
   rgba(245,241,232,.86) === color-mix(in srgb, #f5f1e8 86%, transparent),
   но поддерживается везде. Плюс сплошной фолбэк на случай без backdrop-filter. */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#eee9dd;                     /* сплошной фолбэк, если нет backdrop-filter */
  background:rgba(245,241,232,.86);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header{background:#f2eee3}         /* без блюра — почти непрозрачный тон */
}
.site-header.scrolled{border-bottom-color:var(--hairline)}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:14px clamp(18px,4vw,40px); max-width:var(--w-max); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand svg{width:34px; height:34px; color:var(--olive)}
.brand .word{
  font-family:var(--f-display); font-weight:600; font-size:1.28rem;
  letter-spacing:.24em; text-transform:uppercase;
}
.brand .word i{font-style:normal; color:var(--olive)}
.nav{display:flex; gap:clamp(14px,2.4vw,30px); align-items:center}
.nav a{
  font-family:var(--f-ui); font-size:.86rem; font-weight:500; color:var(--ink-2);
  letter-spacing:.03em; padding:12px 2px; border-bottom:1px solid transparent; /* цель ≥44px с зазором */
}
.nav a:hover{color:var(--ink); border-bottom-color:var(--gold)}
/* --- вход: кнопки соцсетей + разделитель «или» --- */
.oauth-btns{display:flex; flex-direction:column; gap:10px}
.btn-oauth{display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:.7em 1.2em; border:1px solid var(--line); border-radius:var(--r,10px);
  background:var(--card); color:var(--ink); font-family:var(--f-ui); font-weight:600;
  font-size:.92rem; transition:border-color .2s, background .2s}
.btn-oauth:hover{border-color:var(--olive); background:var(--paper-deep); color:var(--ink)}
.or-sep{display:flex; align-items:center; gap:14px; margin:20px 0; color:var(--muted);
  font-family:var(--f-ui); font-size:.78rem; letter-spacing:.04em}
.or-sep::before,.or-sep::after{content:""; flex:1; height:1px; background:var(--hairline)}
/* вход/кабинет — тише основного меню, но не теряется */
.nav .nav-account{color:var(--olive); font-weight:600}
.nav .nav-account:hover{color:var(--olive-deep); border-bottom-color:var(--olive)}
.nav .btn{padding:.62em 1.35em; min-height:40px; font-size:.86rem}
.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink);
  min-width:44px; min-height:44px; align-items:center; justify-content:center}
/* Порог бургера. ИЗМЕРЕНО: единое меню (бренд + 6 пунктов + «Войти» + CTA + поля)
   влезает в одну строку начиная с ~900px; на 861–899px появляется горизонтальный
   скролл. Поэтому 900px, а не прежние 860. Меняешь состав меню — перемерь порог:
   test_nav_mobile.py проверяет одну строку (по ЦЕНТРАМ ссылок — высоты у пунктов
   разные из-за align-items:center, по top мерить нельзя) и отсутствие hscroll. */
@media (max-width:900px){
  /* Шторка-меню включается ТОЛЬКО когда site.js реально повесил обработчик
     (html.nav-ready). Иначе меню осталось бы «уехавшим вверх» (translateY(-130%))
     без единого способа его открыть — ровно этот баг ловил владелец на iPhone. */
  /* Закрытие — ДЕТЕРМИНИРОВАННОЕ (visibility+pointer-events), а НЕ translateY(-130%):
     процент считается от собственной высоты меню, и короткие меню внутренних страниц
     (1–2 ссылки) не «докрывали» шапку — шторка зависала прямо над бургером и съедала
     тапы. Теперь высота меню ни на что не влияет. */
  .nav-ready .nav{position:fixed; inset:var(--header-h,57px) 0 auto 0; background:var(--paper);
       flex-direction:column; padding:18px 24px 26px; gap:16px; border-bottom:1px solid var(--line);
       align-items:flex-start; box-shadow:0 24px 40px -20px rgba(35,34,28,.25);
       max-height:calc(100dvh - var(--header-h,57px)); overflow-y:auto;
       visibility:hidden; opacity:0; transform:translateY(-10px); pointer-events:none;
       transition:transform .28s ease, opacity .28s ease, visibility 0s linear .28s}
  .nav-ready .nav.open{visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
       transition:transform .28s ease, opacity .28s ease, visibility 0s}
  .nav-ready .nav-toggle{display:inline-flex}
  /* Фолбэк без JS: ссылки просто в потоке шапки и доступны. */
  html:not(.nav-ready) .nav{flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; padding-bottom:4px}
  html:not(.nav-ready) .nav-toggle{display:none}
  /* P0-6 / D8: до site.js (он defer) меню в потоке раздувало шапку до 365–416px, после
     nav-ready схлопывало до 73px — и вся страница прыгала на ~340px (CLS 0.33–0.40, замер
     Lighthouse). Теперь при html.js (boot.js, синхронно) шапка с первого кадра имеет
     финальную высоту: бургер резервирует место (невидим), меню лежит поверх, вне потока.
     Защита «меню доступно без site.js» сохранена: без JS вообще (нет .js) работает
     фолбэк выше; если JS есть, а site.js не пришёл за 3 с, меню само проявляется
     оверлеем под шапкой (CSS-анимация, без скрипта) — ссылки кликабельны. */
  html.js:not(.nav-ready) .nav-toggle{display:inline-flex; visibility:hidden}
  html.js:not(.nav-ready) .nav{position:absolute; top:100%; left:0; right:0; z-index:60;
       background:#080c18; padding:18px 24px 26px; justify-content:flex-start;
       visibility:hidden; animation:nav-failsafe 0s linear 3s forwards}
}
@keyframes nav-failsafe{to{visibility:visible}}
@media (prefers-reduced-motion:reduce){.nav-ready .nav{transition:none}}

/* ---------------- секции ---------------- */
.section{padding:clamp(64px,9vw,120px) 0}
.section.tint{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-deep) 14%,var(--paper-deep) 86%,var(--paper) 100%)}
.section-head{max-width:var(--w-text); margin-bottom:clamp(30px,4vw,52px)}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center}

/* появление при скролле */
/* reveal прячется ТОЛЬКО когда boot.js подтвердил JS (класс .js на <html>).
   Если скрипт не догрузился (перехват-прокси срезал, CSP, кэш) — контент виден. */
.reveal{transition:opacity .7s ease,transform .7s ease}
.js .reveal{opacity:0; transform:translateY(22px)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none}}

/* ---------------- герой ---------------- */
.hero{position:relative; overflow:hidden; padding:clamp(56px,8vw,110px) 0 clamp(64px,8vw,110px)}
.hero .sun{
  position:absolute; z-index:0; pointer-events:none;
  width:min(58vw,760px); aspect-ratio:1; border-radius:50%;
  right:max(-140px,-12vw); top:-18%;
  background:radial-gradient(circle at 50% 45%,
    rgba(236,196,124,.5) 0%, rgba(238,208,150,.32) 34%, rgba(224,205,166,.16) 58%, transparent 72%);
}
.hero .mist{
  position:absolute; z-index:0; inset:auto 0 0 0; height:46%;
  background:linear-gradient(180deg,transparent, rgba(154,147,132,.14) 60%, rgba(154,147,132,.2));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000);
  mask-image:linear-gradient(180deg,transparent,#000);
  pointer-events:none;
}
.hero .inner{
  position:relative; z-index:1; display:grid; align-items:center;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,6vw,84px);
}
.hero h1{margin-bottom:.35em}
.hero h1 em{font-style:italic; color:var(--olive-deep)}
.hero .actions{display:flex; gap:14px; flex-wrap:wrap; margin:1.6rem 0 1.2rem}
.hero .foot{font-size:.84rem; color:var(--muted); max-width:34rem; border-top:1px solid var(--hairline); padding-top:14px}

.bookframe{position:relative; justify-self:center; width:min(100%,380px)}
.bookframe .page{
  border-radius:4px 12px 12px 4px; overflow:hidden; background:var(--card);
  box-shadow:var(--shadow-page); transform:rotate(1.6deg);
  border:1px solid rgba(35,34,28,.08);
}
.bookframe .page img{width:100%; height:auto}
.bookframe::before{ /* стопка страниц позади */
  content:""; position:absolute; inset:12px -10px -12px 10px; z-index:-1;
  background:var(--paper-deep); border:1px solid var(--line); border-radius:6px 14px 14px 6px;
  transform:rotate(-1.2deg);
}
.bookframe figcaption{
  margin-top:16px; text-align:center; font-size:.8rem; color:var(--muted);
  font-family:var(--f-ui); letter-spacing:.02em;
}
@media (max-width:900px){
  .hero .inner{grid-template-columns:1fr}
  .bookframe{width:min(78%,320px)}
}

/* строка фактов */
.factrow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(40px,6vw,72px);
}
.fact{padding:22px 26px; border-left:1px solid var(--hairline)}
.fact:first-child{border-left:0}
.fact b{font-family:var(--f-display); font-size:2rem; font-weight:600; display:block; color:var(--olive-deep)}
.fact span{font-family:var(--f-ui); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
@media (max-width:760px){
  .factrow{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--hairline)}
}

/* ---------------- «что это» карточки ---------------- */
.cards3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media (max-width:900px){.cards3{grid-template-columns:1fr}}
.card{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r);
  padding:30px 28px; box-shadow:var(--shadow-card);
}
.card .glyph{width:40px; height:40px; color:var(--olive); margin-bottom:18px}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-2); font-size:.98rem; margin-bottom:0}

/* ---------------- как это работает ---------------- */
.steps{counter-reset:step; display:grid; gap:0; max-width:760px}
.step-row{
  display:grid; grid-template-columns:64px 1fr; gap:22px; padding:26px 0;
  border-top:1px solid var(--hairline); position:relative;
}
.step-row:last-child{border-bottom:1px solid var(--hairline)}
.step-row .num{
  counter-increment:step; font-family:var(--f-display); font-size:2rem; font-weight:500;
  color:var(--gold);
}
.step-row .num::before{content:counter(step,decimal-leading-zero)}
.step-row h3{font-size:1.2rem; margin-bottom:.25em}
.step-row p{color:var(--ink-2); font-size:.97rem; margin:0; max-width:36rem}

/* ---------------- галерея ---------------- */
.gallery-strip{
  display:flex; gap:22px; overflow-x:auto; padding:12px 4px 26px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.gallery-strip figure{
  margin:0; flex:0 0 auto; width:min(62vw,300px); scroll-snap-align:center;
  cursor:zoom-in; transition:transform .25s;
}
.gallery-strip figure:hover{transform:translateY(-6px)}
.gallery-strip img{
  width:100%; border:1px solid rgba(35,34,28,.1); border-radius:6px;
  box-shadow:var(--shadow-card); background:#fff;
}
.gallery-strip figcaption{
  margin-top:10px; font-family:var(--f-ui); font-size:.76rem; letter-spacing:.04em;
  color:var(--muted); text-align:center;
}
.gallery-note{font-size:.84rem; color:var(--muted); max-width:44rem}

/* лайтбокс (доступный modal: prev/next/счётчик/подпись/focus-trap) */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background:rgba(28,27,22,.92); padding:max(3vh, env(safe-area-inset-top)) 4vw;
}
.lightbox.open{display:flex}
.lightbox figure{margin:0; display:flex; flex-direction:column; align-items:center; gap:12px; max-width:100%}
.lightbox img{
  max-height:min(84vh, 84dvh); max-width:min(90vw, 720px); width:auto; height:auto;
  border-radius:4px; box-shadow:0 30px 90px rgba(0,0,0,.5); background:#fff; cursor:zoom-out;
}
.lightbox figcaption{
  color:#cfc8b4; font-family:var(--f-ui); font-size:.82rem; letter-spacing:.03em; text-align:center;
}
.lightbox .lb-count{color:#a59d88; font-family:var(--f-ui); font-size:.75rem; letter-spacing:.12em}
.lightbox .close{
  position:absolute; top:max(10px, env(safe-area-inset-top)); right:14px; background:none; border:0; color:#e8e2d2;
  font-size:2rem; line-height:1; cursor:pointer; font-family:var(--f-ui); padding:10px 14px; min-height:48px;
}
.lightbox .lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(245,241,232,.09); border:1px solid rgba(245,241,232,.25); color:#efe9d8;
  width:52px; height:52px; border-radius:50%; cursor:pointer; font-size:1.4rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.lightbox .lb-nav:hover{background:rgba(245,241,232,.2)}
.lightbox .lb-nav:focus-visible{outline:2px solid #efe9d8; outline-offset:3px}
.lightbox .lb-prev{left:max(10px, env(safe-area-inset-left))}
.lightbox .lb-next{right:max(10px, env(safe-area-inset-right))}
@media (max-width:640px){
  .lightbox .lb-nav{width:44px; height:44px; bottom:max(12px, env(safe-area-inset-bottom)); top:auto; transform:none}
  .lightbox .lb-prev{left:22vw} .lightbox .lb-next{right:22vw}
  .lightbox img{max-height:74dvh}
}

/* ---------------- цены ---------------- */
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr}}
.price-card{
  background:var(--card); border:1px solid var(--hairline); border-radius:var(--r);
  padding:34px 30px 30px; display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-card); transition:transform .25s, box-shadow .25s;
}
.price-card:hover{transform:translateY(-4px)}
.price-card.featured{border-color:var(--olive); box-shadow:0 2px 4px rgba(35,34,28,.06), 0 22px 54px -16px rgba(85,84,58,.3)}
.price-card .badge{
  position:absolute; top:-13px; left:30px; background:var(--olive); color:#f5f2e8;
  font-family:var(--f-ui); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px;
}
.price-card h3{font-size:1.5rem; margin-bottom:.15em}
.price-card .vol{font-family:var(--f-ui); font-size:.8rem; color:var(--muted); letter-spacing:.04em; margin-bottom:18px}
.price-card .price{font-family:var(--f-display); font-size:2.3rem; font-weight:600; color:var(--ink); margin-bottom:4px}
.price-card .price small{font-size:1.1rem; font-weight:500; color:var(--muted)}
.price-card ul{list-style:none; margin:18px 0 26px; padding:0; flex:1}
.price-card li{
  padding:8px 0 8px 26px; position:relative; font-size:.95rem; color:var(--ink-2);
  border-top:1px solid var(--hairline);
}
.price-card li::before{
  content:"✦"; position:absolute; left:2px; top:8px; color:var(--gold-deco); font-size:.8rem;
}
.price-card li.no{color:var(--muted)}
.price-card li.no::before{content:"—"; color:var(--line)}
.price-card .btn{width:100%}

/* keepsake печать */
.keepsake{
  margin-top:26px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  background:linear-gradient(120deg,#2b2a23,#3a382c); color:#e9e3d2;
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-page);
}
.keepsake .img{min-height:260px; background-size:cover; background-position:center}
.keepsake .body{padding:clamp(28px,4vw,46px)}
.keepsake h3{color:#f2edda; font-size:1.7rem}
.keepsake p{color:#c9c2ac; font-size:.98rem; max-width:34rem}
.keepsake .price-line{
  font-family:var(--f-display); font-size:1.5rem; color:#e9dfc2; margin:14px 0 20px;
}
.keepsake .btn{background:#e9e3d2; color:#2b2a23}
.keepsake .btn:hover{background:#fff; color:#2b2a23}
@media (max-width:800px){.keepsake{grid-template-columns:1fr}.keepsake .img{min-height:200px}}

.soon-row{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:26px}
@media (max-width:800px){.soon-row{grid-template-columns:1fr}}
.soon-card{
  border:1px dashed var(--line); border-radius:var(--r); padding:24px 26px;
  color:var(--ink-2); background:transparent;
}
.soon-card .tag{
  font-family:var(--f-ui); font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); display:inline-block; margin-bottom:8px;
}
.soon-card h3{font-size:1.2rem; margin-bottom:.2em}
.soon-card p{font-size:.9rem; margin:0; color:var(--muted)}

.price-note{margin-top:22px; font-size:.84rem; color:var(--muted); max-width:46rem}

/* ---------------- полнота данных ---------------- */
.data-table{max-width:880px; border:1px solid var(--hairline); border-radius:var(--r);
  overflow:hidden; background:var(--card); box-shadow:var(--shadow-card)}
.dt-row{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:18px;
  padding:18px 24px; border-top:1px solid var(--hairline); font-size:.95rem; color:var(--ink-2)}
.dt-row:first-child{border-top:0}
.dt-row b{color:var(--ink); font-family:var(--f-display); font-size:1.08rem; font-weight:600}
.dt-head{background:var(--paper-deep); font-family:var(--f-ui); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:12px; padding-bottom:12px}
@media (max-width:640px){.dt-row{grid-template-columns:1fr; gap:6px}.dt-head span:last-child{display:none}}

/* карточка «Вопросы книге» */
.qa-card{
  margin-top:26px; display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  border:1px solid var(--hairline); border-left:3px solid var(--olive); border-radius:var(--r);
  background:var(--card); padding:26px 28px; box-shadow:var(--shadow-card); flex-wrap:wrap;
}

/* ---------------- этика ---------------- */
.ethics-list{max-width:820px}
.ethic{
  display:grid; grid-template-columns:56px 1fr; gap:20px; padding:24px 0;
  border-top:1px solid var(--hairline); align-items:start;
}
.ethic:last-child{border-bottom:1px solid var(--hairline)}
.ethic svg{width:30px; height:30px; color:var(--olive); margin-top:4px}
.ethic h3{font-size:1.15rem; margin-bottom:.2em}
.ethic p{margin:0; color:var(--ink-2); font-size:.95rem; max-width:40rem}

/* ---------------- FAQ ---------------- */
.faq{max-width:780px}
.faq details{border-top:1px solid var(--hairline)}
.faq details:last-child{border-bottom:1px solid var(--hairline)}
.faq summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 2px; position:relative;
  font-family:var(--f-display); font-size:1.22rem; font-weight:600;
  transition:color .2s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-family:var(--f-display); font-size:1.6rem; font-weight:400; color:var(--gold-deco);
  transition:transform .25s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq summary:hover{color:var(--olive-deep)}
.faq .a{padding:0 8px 22px 2px; color:var(--ink-2); font-size:.97rem; max-width:42rem}

/* ---------------- финальный CTA ---------------- */
.cta-final{position:relative; overflow:hidden; text-align:center; padding:clamp(80px,11vw,150px) 0}
.cta-final .moon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(70vw,560px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(236,214,164,.35), rgba(224,205,166,.12) 55%, transparent 70%);
}
.cta-final h2{font-size:clamp(2.2rem,4.5vw,3.4rem); max-width:22ch; margin:0 auto .4em}
.cta-final p{max-width:36rem; margin:0 auto 1.8rem; color:var(--ink-2)}

/* ---------------- подвал ---------------- */
.site-footer{border-top:1px solid var(--line); background:var(--paper-deep); font-size:.9rem}
.site-footer .inner{
  max-width:var(--w-max); margin:0 auto; padding:52px clamp(18px,4vw,40px) 40px;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr); gap:40px;
}
@media (max-width:820px){.site-footer .inner{grid-template-columns:1fr}}
.site-footer h3,.site-footer h4{
  font-family:var(--f-ui); font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin-bottom:2px}
.site-footer li a{display:inline-block; padding:7px 0} /* тач-цель ≥30px, зазор между ссылками */
.site-footer a{color:var(--ink-2)}
.site-footer a:hover{color:var(--olive-deep)}
.site-footer .disclaimer{font-size:.8rem; color:var(--muted); line-height:1.6}
.site-footer .brandline{display:flex; align-items:center; gap:10px; margin-bottom:14px; color:var(--olive)}
.site-footer .brandline .word{font-family:var(--f-display); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ink)}
.site-footer .bottom{
  border-top:1px solid var(--line); font-size:.78rem; color:var(--muted);
}
.site-footer .bottom .inner2{
  max-width:var(--w-max); margin:0 auto;
  padding:16px clamp(18px,4vw,40px) max(16px, env(safe-area-inset-bottom));
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.site-footer .bottom a{display:inline-block; padding:6px 2px}

/* ================================================================
   ФОРМЫ / МАСТЕР ЗАКАЗА
   ================================================================ */
label{display:block; font-family:var(--f-ui); font-size:.82rem; font-weight:600;
      letter-spacing:.03em; color:var(--ink-2); margin:0 0 6px}
label .opt{font-weight:500; color:var(--muted)}
input[type=text],input[type=date],input[type=time],input[type=email],select,textarea{
  width:100%; padding:12px 14px; font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  transition:border-color .2s, box-shadow .2s; min-height:48px;
}
textarea{resize:vertical; line-height:1.55}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--olive); box-shadow:0 0 0 3px rgba(107,106,74,.14)}
input.invalid{border-color:#a3542e; box-shadow:0 0 0 3px rgba(163,84,46,.12)}
.field{margin-bottom:18px}
.field .hint{font-size:.8rem; color:var(--muted); margin-top:5px; font-family:var(--f-ui)}
.field .err{display:none; font-size:.8rem; color:#a3542e; margin-top:5px; font-family:var(--f-ui)}
.field.show-err .err{display:block}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}

/* анкета по человеку в семейном комплекте — свёрнуто по умолчанию, §2.6 */
.fam-anketa{border:1px solid var(--line); border-radius:10px; margin-bottom:14px; background:var(--card)}
.fam-anketa summary{padding:14px 18px; cursor:pointer; font-family:var(--f-display); font-weight:600; font-size:1.05rem}
.fam-anketa summary .opt{font-family:var(--f-ui); font-weight:500; font-size:.82rem; color:var(--muted)}
.fam-anketa-body{padding:0 18px 16px}

/* чекбоксы согласий */
.check{
  display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start;
  padding:16px; border:1px solid var(--hairline); border-radius:var(--r-s);
  background:var(--card); margin-bottom:12px; cursor:pointer; transition:border-color .2s;
}
.check:hover{border-color:var(--olive)}
.check input{width:18px; height:18px; margin-top:3px; accent-color:var(--olive); cursor:pointer}
.check span{font-size:.92rem; color:var(--ink-2); line-height:1.55}
.check.req span::after{content:" *"; color:var(--bronze)}

/* карточки-выборы (radio cards) */
.choice-grid{display:grid; gap:14px}
.choice-grid.c2{grid-template-columns:1fr 1fr}
.choice-grid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:700px){.choice-grid.c2,.choice-grid.c3{grid-template-columns:1fr}}
.choice{
  border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;
  background:var(--card); cursor:pointer; position:relative;
  transition:border-color .2s, box-shadow .2s, transform .2s; min-height:44px;
}
.choice:hover{border-color:var(--olive)}
.choice.sel{border-color:var(--olive); box-shadow:0 0 0 1px var(--olive), 0 14px 34px -14px rgba(85,84,58,.35)}
.choice .t{font-family:var(--f-display); font-size:1.18rem; font-weight:600; display:block; margin-bottom:2px}
.choice .d{font-size:.85rem; color:var(--muted); font-family:var(--f-ui)}
.choice .p{font-family:var(--f-display); font-weight:600; font-size:1.15rem; color:var(--olive-deep); margin-top:8px; display:block}
.choice.disabled{opacity:.55; cursor:not-allowed}
.choice .mini-tag{
  position:absolute; top:-10px; right:16px; background:var(--gold); color:#fff;
  font-family:var(--f-ui); font-size:.62rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 10px; border-radius:999px;
}
.choice .mini-tag.rec{background:var(--olive)}

/* мастер: раскладка */
.wizard-wrap{display:grid; grid-template-columns:minmax(0,8fr) minmax(0,4fr); gap:clamp(28px,4vw,56px); align-items:start}
/* P0-3: grid-элементы имеют min-width:auto → длинный чип файла раздувал колонку
   и рвал макет. min-width:0 разрешает усечение .nm внутри. */
.wizard-wrap > *{min-width:0}
@media (max-width:940px){.wizard-wrap{grid-template-columns:1fr}}
.wizard-progress{
  display:flex; gap:6px; margin:0 0 30px; font-family:var(--f-ui);
}
.wizard-progress .seg{flex:1; height:3px; border-radius:2px; background:var(--line); position:relative; transition:background .3s}
.wizard-progress .seg.done{background:var(--olive)}
.wizard-progress .seg.cur{background:var(--gold)}
.wizard-steplabel{font-family:var(--f-ui); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.wstep{display:none}
.wstep.on{display:block; animation:stepin .4s ease}
@keyframes stepin{from{opacity:0; transform:translateX(14px)}to{opacity:1; transform:none}}
.wstep h2{font-size:clamp(1.6rem,2.8vw,2.1rem)}
.wstep .sub{color:var(--ink-2); margin-bottom:26px; max-width:38rem}
.wizard-nav{display:flex; justify-content:space-between; gap:14px; margin-top:34px; padding-top:22px; border-top:1px solid var(--hairline)}
.wizard-nav .back{background:none; border:0; cursor:pointer; font-family:var(--f-ui); font-size:.9rem; color:var(--muted); padding:12px 6px}
.wizard-nav .back:hover{color:var(--ink)}

/* сводка заказа */
.order-summary{
  position:sticky; top:88px; background:var(--card); border:1px solid var(--hairline);
  border-radius:var(--r); padding:26px 26px 22px; box-shadow:var(--shadow-card);
}
.order-summary h3{font-size:1.05rem; font-family:var(--f-ui); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-size:.75rem}
.order-summary .rows{border-top:1px solid var(--hairline)}
.order-summary .row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--hairline); font-size:.92rem}
.order-summary .row .k{color:var(--ink-2); flex:0 0 auto}
.order-summary .row .v{font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere}
.order-summary .total{display:flex; justify-content:space-between; padding:16px 0 4px; align-items:baseline}
.order-summary .total .k{font-family:var(--f-ui); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.order-summary .total .v{font-family:var(--f-display); font-size:1.9rem; font-weight:600; color:var(--ink)}
.order-summary .note{font-size:.76rem; color:var(--muted); margin-top:10px; line-height:1.5}

/* информационные плашки (фолбэк-фон rgba → color-mix; Safari <16.2 без color-mix) */
.notice{
  border-left:3px solid var(--gold); background:#f6f1e4; background:color-mix(in srgb, var(--gold) 8%, var(--card));
  padding:14px 18px; border-radius:0 var(--r-s) var(--r-s) 0; font-size:.9rem; color:var(--ink-2);
  margin:16px 0;
}
.notice.olive{border-left-color:var(--olive); background:#f2f1e6; background:color-mix(in srgb, var(--olive) 7%, var(--card))}
.notice.warn{border-left-color:var(--hold); background:#f6efe8; background:color-mix(in srgb, var(--hold) 7%, var(--card))}

/* вспомогательные */
.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}
.linklike{background:none; border:0; cursor:pointer; color:var(--bronze); font:inherit;
  text-decoration:underline; padding:4px 6px; min-height:auto}
.linklike:hover{color:var(--olive-deep)}

/* комбобокс места рождения */
.combobox{position:relative}
.combobox .cb-list{
  position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px);
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-s);
  box-shadow:var(--shadow-card); max-height:280px; overflow-y:auto; margin:0; padding:6px; list-style:none;
}
.combobox .cb-list[hidden]{display:none}
.combobox .cb-opt{padding:10px 12px; border-radius:6px; cursor:pointer; font-size:.95rem}
.combobox .cb-opt .sub{display:block; font-size:.78rem; color:var(--muted); font-family:var(--f-ui)}
.combobox .cb-opt:hover, .combobox .cb-opt[aria-selected=true]{background:var(--paper-deep)}
.combobox .cb-state{padding:10px 12px; color:var(--muted); font-size:.85rem; font-family:var(--f-ui)}
.badge-rec{display:inline-block; font-family:var(--f-ui); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--olive-deep);
  background:rgba(107,106,74,.12); padding:2px 8px; border-radius:999px; vertical-align:middle; margin-left:4px}
.place-ok{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-ui); font-size:.78rem;
  color:var(--ok); margin-top:5px}
.place-free{color:var(--muted); font-size:.78rem; font-family:var(--f-ui); margin-top:5px}

/* сегмент-выбор точности времени */
.segs{display:flex; flex-wrap:wrap; gap:8px}
.segs .seg-btn{
  border:1px solid var(--line); background:var(--card); border-radius:999px; cursor:pointer;
  font-family:var(--f-ui); font-size:.82rem; font-weight:600; color:var(--ink-2); padding:9px 14px;
  min-height:40px; transition:border-color .2s, background .2s, color .2s;
}
/* выбранное состояние: точность времени — кнопки-переключатели (aria-pressed),
   пол — настоящая радиогруппа (aria-checked). Вид одинаковый. */
.segs .seg-btn[aria-pressed=true],
.segs .seg-btn[aria-checked=true]{border-color:var(--olive); background:rgba(107,106,74,.1); color:var(--olive-deep)}
.time-extra{margin-top:12px}

/* история фамилий */
.nh-row{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr) 40px; gap:10px;
  align-items:start; margin-bottom:10px;
}
@media (max-width:640px){.nh-row{grid-template-columns:1fr 1fr; }
  .nh-row .nh-note{grid-column:1/-1}}
.nh-row .rm{background:none; border:0; cursor:pointer; color:var(--muted); font-size:1.1rem; padding:12px 6px}
.nh-row .rm:hover{color:var(--hold)}
.nh-add{margin-top:2px}

/* список файлов/ссылок (P0-3: min-width:0 в flex-цепочке — иначе длинное имя
   файла без пробелов раздувает строку и рвёт контейнер за оба края). */
.filelist{list-style:none; margin:10px 0 0; padding:0; max-width:100%}
.filelist li{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--hairline);
  border-radius:var(--r-s); background:var(--card); margin-bottom:8px; font-size:.9rem;
  max-width:100%; min-width:0;
}
/* .nm — усечение серединой делает JS (renderBioLists); тут страховка ellipsis */
.filelist li .nm{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.filelist li .sz{flex:0 0 auto; color:var(--muted); font-family:var(--f-ui); font-size:.78rem; white-space:nowrap}
.filelist li .rm{flex:0 0 auto; background:none; border:0; cursor:pointer; color:var(--muted); font-size:1.05rem; padding:6px 8px; min-height:auto}
.filelist li .rm:hover{color:var(--hold)}
.filelist li.uploading{opacity:.6}
.urlrow{display:flex; gap:10px; max-width:100%}
.urlrow input{min-width:0}
.urlrow input{flex:1}

/* «что после оплаты» */
.afterpay{margin:8px 0 18px; padding-left:1.3em; color:var(--ink-2); font-size:.95rem}
.afterpay li{margin-bottom:8px}
.afterpay b{color:var(--ink)}

/* семейный калькулятор */
.calc{border:1px solid var(--hairline); border-radius:var(--r); background:var(--card);
  padding:24px; box-shadow:var(--shadow-card)}
.calc .stepper{display:flex; align-items:center; gap:14px; margin:10px 0 18px}
.calc .stepper button{
  width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:var(--paper);
  font-size:1.3rem; cursor:pointer; color:var(--ink); transition:border-color .2s;
}
.calc .stepper button:hover{border-color:var(--olive)}
.calc .stepper button:disabled{opacity:.35; cursor:not-allowed}
.calc .stepper .n{font-family:var(--f-display); font-size:2rem; font-weight:600; min-width:2ch; text-align:center}
.calc .breakdown{border-top:1px solid var(--hairline); margin-top:6px}
.calc .breakdown .row{display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--hairline); font-size:.92rem; color:var(--ink-2)}
.calc .breakdown .row .v{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)}
.calc .calc-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:14px}
.calc .calc-total .t{font-family:var(--f-ui); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.calc .calc-total .v{font-family:var(--f-display); font-size:1.9rem; font-weight:600}
.calc .disc-badge{display:inline-block; background:var(--olive); color:#f5f2e8; font-family:var(--f-ui);
  font-size:.7rem; font-weight:700; letter-spacing:.1em; padding:4px 10px; border-radius:999px; margin-left:10px; vertical-align:middle}

/* P1-5: реестр героев — чипы «Ваши герои» */
.your-heroes{margin:0 0 20px; padding:16px 18px; border:1px solid var(--hairline);
  border-radius:var(--r); background:var(--card)}
.your-heroes .yh-title{font-family:var(--f-ui); font-size:.82rem; font-weight:600;
  color:var(--ink-2); margin:0 0 12px}
.your-heroes .chips{display:flex; flex-wrap:wrap; gap:10px}
.prof-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  border:1px solid var(--line); background:var(--paper); border-radius:999px;
  padding:9px 18px; cursor:pointer; min-height:44px; transition:border-color .2s, background .2s;
  font-family:var(--f-body);
}
.prof-chip:hover{border-color:var(--olive); background:rgba(107,106,74,.06)}
.prof-chip .pc-name{font-weight:600; color:var(--ink); font-size:.95rem}
.prof-chip .pc-meta{font-family:var(--f-ui); font-size:.72rem; color:var(--muted)}

/* upsell (S1): крестик в правый верхний угол, зона 44×44 */
#relUpsell{position:relative; padding-right:56px}
#relUpsellClose{position:absolute; top:8px; right:8px; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  min-height:44px; padding:0}
#relUpsellClose:hover{background:rgba(35,34,28,.06)}

/* субъекты (семья) */
.subject-card{
  border:1px solid var(--hairline); border-radius:var(--r); padding:22px; margin-bottom:16px;
  background:var(--card); position:relative;
}
.subject-card .rm{
  position:absolute; top:12px; right:12px; background:none; border:0; cursor:pointer;
  color:var(--muted); font-size:1.2rem; line-height:1; padding:6px 10px; min-height:auto;
}
.subject-card .rm:hover{color:var(--hold)}
.subject-card h4{font-family:var(--f-ui); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); margin:0 0 14px}
.add-subject{
  width:100%; border:1px dashed var(--line); background:none; border-radius:var(--r);
  padding:16px; font-family:var(--f-ui); font-size:.9rem; font-weight:600; color:var(--olive);
  cursor:pointer; transition:border-color .2s, background .2s; min-height:48px;
}
.add-subject:hover{border-color:var(--olive); background:rgba(107,106,74,.05)}

/* ================================================================
   СТАТУС ЗАКАЗА
   ================================================================ */
.track{max-width:640px}
.track-steps{list-style:none; margin:26px 0; padding:0}
.track-steps li{
  display:grid; grid-template-columns:34px 1fr; gap:16px; padding:0 0 30px; position:relative;
}
.track-steps li::before{ /* линия */
  content:""; position:absolute; left:16px; top:30px; bottom:2px; width:1px; background:var(--line);
}
.track-steps li:last-child::before{display:none}
.track-steps .dot{
  width:33px; height:33px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-ui); font-size:.72rem;
  color:var(--muted); z-index:1; transition:all .3s;
}
.track-steps li.done .dot{background:var(--olive); border-color:var(--olive); color:#f4f1e6}
.track-steps li.cur .dot{border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px rgba(171,138,82,.15); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(171,138,82,.12)}50%{box-shadow:0 0 0 7px rgba(171,138,82,.2)}}
.track-steps h3{font-size:1.1rem; margin:4px 0 2px}
.track-steps li.pending h3{color:var(--muted); font-weight:500}
.track-steps p{margin:0; font-size:.88rem; color:var(--muted)}
.status-panel{
  border:1px solid var(--hairline); border-radius:var(--r); padding:28px; background:var(--card);
  box-shadow:var(--shadow-card); margin-top:10px;
}
.status-panel.held{border-color:color-mix(in srgb, var(--hold) 40%, var(--hairline))}
code.oid{
  font-family:ui-monospace,Menlo,monospace; font-size:.86em; background:var(--paper-deep);
  padding:2px 8px; border-radius:6px; color:var(--olive-deep); word-break:break-all;
}

/* ================================================================
   ПРОЗА / ПРАВОВЫЕ СТРАНИЦЫ
   ================================================================ */
.prose{max-width:var(--w-text)}
.prose h2{font-size:1.7rem; margin-top:2.2em}
.prose h3{font-size:1.2rem; margin-top:1.8em}
.prose ul{padding-left:1.2em; color:var(--ink-2)}
.prose li{margin-bottom:.5em}
.prose p{color:var(--ink-2)}
.prose .lead-first::first-letter{
  font-family:var(--f-display); font-size:3.4em; float:left; line-height:.82;
  padding:.08em .12em 0 0; color:var(--olive);
}
.doc-status{
  display:inline-block; font-family:var(--f-ui); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--hold);
  border:1px solid color-mix(in srgb, var(--hold) 45%, transparent);
  padding:5px 12px; border-radius:999px; margin-bottom:18px;
}
hr.orn{border:0; text-align:center; margin:2.4em 0; overflow:visible}
hr.orn::after{content:"✦ ✦ ✦"; color:var(--gold-deco); font-size:.8rem; letter-spacing:1em; padding-left:1em}

/* page-hero для внутренних страниц */
.page-hero{padding:clamp(48px,7vw,90px) 0 clamp(20px,3vw,36px)}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.page-hero .lead{margin-top:6px}

/* ================================================================
   НОЧНАЯ ТЕМА — точечные переопределения и новые компоненты
   (2026-08-07)

   Выше по файлу всё, что берёт цвет из переменных, уже ночное: имена
   переменных сохранены, значения перевёрнуты. Здесь собрано только то,
   где цвет был вбит константой светлой темы, плюс компоненты, которых
   в бумажной версии не было. Блок идёт последним — при равной
   специфичности выигрывает он.

   ВАЖНО про фон секций: небо — фиксированный canvas под контентом.
   Любой НЕПРОЗРАЧНЫЙ фон на всю ширину его перекрывает, поэтому
   чередование секций и подвал переведены на полупрозрачные подложки.
   ================================================================ */

::selection{background:rgba(126,207,196,.26); color:var(--star)}
:focus-visible{outline-color:var(--olive)}

/* заголовки чуть ярче основного текста */
h1,h2,h3,.display{color:var(--star)}
strong,b,em{color:var(--ink)}

/* --- кнопки: заливка бирюзой, текст тёмный (10.5:1) --- */
.btn-primary{background:var(--olive); color:var(--aqua-ink);
  box-shadow:0 10px 34px -16px rgba(126,207,196,.6)}
.btn-primary:hover{background:var(--olive-deep); color:var(--aqua-ink);
  box-shadow:0 14px 44px -14px rgba(126,207,196,.75)}
.btn-olive{background:var(--olive); color:var(--aqua-ink)}
.btn-olive:hover{background:var(--olive-deep); color:var(--aqua-ink)}
.btn-ghost{color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--olive); color:var(--olive)}
.btn-gold{background:transparent; color:var(--gold); border-color:rgba(217,184,119,.42)}
.btn-gold:hover{border-color:var(--gold); background:rgba(217,184,119,.08); color:var(--gold)}
.skip-link{background:var(--olive); color:var(--aqua-ink); font-weight:600}
/* ПОЙМАНО АУДИТОМ КОНТРАСТА: `.nav a` (0,1,1) перебивает `.btn-primary` (0,1,0),
   и текст CTA в шапке становился --ink-2 на бирюзе — 1.06:1, нечитаемо. */
.nav a.btn-primary, .nav a.btn-primary:hover{color:var(--aqua-ink); border-bottom-color:transparent}
.nav a.btn-ghost, .nav a.btn-ghost:hover{border-bottom-color:transparent}
.nav a{white-space:nowrap}
.nav .btn{flex:0 0 auto; white-space:nowrap}

/* --- шапка --- */
.site-header{background:#080b16; background:rgba(7,10,20,.72);
  backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header{background:#080c17}
}
.brand svg{color:var(--gold)}
.brand .word i{color:var(--olive)}
.nav a:hover{color:var(--star); border-bottom-color:var(--gold-deco)}
.nav-ready .nav{background:#080c18; box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
/* Порог бургера. ИЗМЕРЕНО заново для ночной шапки: трекинг марки шире,
   и на 960px меню ломалось во вторую строку. Меняешь меню — перемерь. */
@media (max-width:1120px){
  .nav-ready .nav{position:fixed; inset:var(--header-h,61px) 0 auto 0; flex-direction:column;
    padding:18px 24px 26px; gap:14px; border-bottom:1px solid var(--line); align-items:flex-start;
    max-height:calc(100dvh - var(--header-h,61px)); overflow-y:auto;
    visibility:hidden; opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:transform .28s ease, opacity .28s ease, visibility 0s linear .28s}
  .nav-ready .nav.open{visibility:visible; opacity:1; transform:translateY(0); pointer-events:auto;
    transition:transform .28s ease, opacity .28s ease, visibility 0s}
  .nav-ready .nav-toggle{display:inline-flex}
  html:not(.nav-ready) .nav{flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; padding-bottom:4px}
  html:not(.nav-ready) .nav-toggle{display:none}
}

/* --- секции: подложки полупрозрачные, иначе перекрывают небо --- */
.section.tint{background:linear-gradient(180deg,transparent 0%,rgba(10,14,28,.72) 12%,
  rgba(10,14,28,.72) 88%,transparent 100%)}
.site-footer{background:rgba(4,6,13,.72)}
.card,.price-card{background:linear-gradient(180deg, rgba(20,27,47,.86), rgba(12,17,32,.86));
  border-color:var(--line)}
.card .glyph{color:var(--gold)}
.data-table,.qa-card,.status-panel,.order-summary,.calc,.subject-card,.fam-anketa,
.your-heroes,.combobox .cb-list{background:rgba(14,20,37,.78)}
.check,.choice{background:rgba(14,20,37,.62)}
.dt-head{background:rgba(196,208,232,.045)}

/* --- герой бумажной версии (оставлен для внутренних страниц) --- */
.hero .sun{background:radial-gradient(circle at 50% 45%,
  rgba(126,207,196,.11) 0%, rgba(96,132,190,.10) 30%, rgba(60,74,132,.06) 52%, transparent 70%)}
.hero .mist{background:linear-gradient(180deg,transparent, rgba(10,16,34,.35) 60%, rgba(4,6,13,.55))}
.hero h1 em{color:var(--gold)}
.fact b{color:var(--gold)}
.bookframe .page{border-color:rgba(196,208,232,.14)}
.bookframe .page img{filter:brightness(.8) saturate(.86) contrast(1.04)}
.cta-final .moon{background:radial-gradient(circle, rgba(148,184,236,.14),
  rgba(126,207,196,.07) 48%, transparent 68%)}

/* --- галерея и лайтбокс --- */
.gallery-strip img{border-color:rgba(196,208,232,.16); background:#0b0f1c;
  filter:brightness(.93) contrast(1.02); transition:filter .25s, box-shadow .25s}
.gallery-strip figure:hover img{filter:none;
  box-shadow:0 28px 66px -22px rgba(0,0,0,.95), 0 0 0 1px rgba(126,207,196,.3)}
.lightbox{background:rgba(3,4,9,.95)}
.lightbox img{background:#0b0f1c; box-shadow:0 30px 90px rgba(0,0,0,.8)}
.lightbox figcaption{color:var(--ink-2)}
.lightbox .lb-count{color:var(--muted)}
.lightbox .close{color:var(--ink)}
.lightbox .lb-nav{background:rgba(196,208,232,.07); border-color:rgba(196,208,232,.22); color:var(--ink)}
.lightbox .lb-nav:hover{background:rgba(126,207,196,.2)}
.lightbox .lb-nav:focus-visible{outline-color:var(--olive)}

/* --- цены, печать, значки --- */
.price-card .price{color:var(--gold)}
.price-card.featured{border-color:rgba(126,207,196,.38);
  box-shadow:var(--shadow-card), 0 0 70px -30px rgba(126,207,196,.55)}
.price-card:hover{border-color:rgba(196,208,232,.24)}
.price-card .badge{background:var(--olive); color:var(--aqua-ink)}
.soon-card{background:rgba(14,20,37,.4)}
.soon-card .price{color:var(--gold)}
.keepsake{background:linear-gradient(120deg,#0c1120,#141c31); border:1px solid var(--line); color:var(--ink)}
.keepsake .img{filter:brightness(.62) saturate(.85)}
.keepsake h3{color:var(--star)}
.keepsake p{color:var(--ink-2)}
.keepsake .price-line{color:var(--gold)}
.keepsake .btn{background:transparent; color:var(--gold); border-color:rgba(217,184,119,.42)}
.keepsake .btn:hover{background:rgba(217,184,119,.08); color:var(--gold); border-color:var(--gold)}
.choice .mini-tag,.soon-card .tag,.mini-tag{background:rgba(217,184,119,.14); color:var(--gold);
  border:1px solid rgba(217,184,119,.3)}
.badge-rec{background:rgba(126,207,196,.14); color:var(--olive)}
.calc .disc-badge{background:rgba(126,207,196,.15); color:var(--olive);
  border:1px solid rgba(126,207,196,.35)}
.calc .stepper .n,.calc .calc-total .v,.order-summary .total .v{color:var(--gold)}
.calc .stepper button{background:rgba(6,9,18,.7); color:var(--ink)}
.calc .stepper button:hover{border-color:var(--olive); color:var(--olive)}

/* --- формы --- */
input[type=text],input[type=date],input[type=time],input[type=email],input[type=password],
input[type=url],select,textarea{background:rgba(6,9,18,.75); color:var(--ink)}
input::placeholder,textarea::placeholder{color:#6f7688}
input:focus,select:focus,textarea:focus{background:rgba(8,12,23,.9);
  box-shadow:0 0 0 3px rgba(126,207,196,.16)}
input.invalid{border-color:var(--hold); box-shadow:0 0 0 3px rgba(217,155,107,.14)}
.field .err{color:var(--hold)}
.check:hover{border-color:rgba(126,207,196,.4)}
.check.req span::after{color:var(--gold)}
.choice:hover{border-color:rgba(126,207,196,.45)}
.choice.sel{background:rgba(126,207,196,.07);
  box-shadow:0 0 0 1px rgba(126,207,196,.35), 0 18px 44px -22px rgba(126,207,196,.5)}
.choice .t{color:var(--star)}
.choice .p{color:var(--gold)}
.segs .seg-btn{background:rgba(14,20,37,.6)}
.segs .seg-btn:hover{border-color:rgba(126,207,196,.4); color:var(--ink)}
.segs .seg-btn[aria-pressed=true],.segs .seg-btn[aria-checked=true]{
  background:rgba(126,207,196,.12); color:var(--olive)}
.add-subject:hover{background:rgba(126,207,196,.06)}
.subject-card h4{color:var(--olive)}
.prof-chip{background:rgba(14,20,37,.7)}
.prof-chip:hover{background:rgba(126,207,196,.07)}
.prof-chip .pc-name{color:var(--ink)}
#relUpsellClose:hover{background:rgba(196,208,232,.08)}
.combobox .cb-opt:hover,.combobox .cb-opt[aria-selected=true]{background:rgba(126,207,196,.1)}
.notice{background:rgba(217,184,119,.07)}
.notice.olive{background:rgba(126,207,196,.07)}
.notice.warn{background:rgba(217,155,107,.08)}
.notice.ok{border-left:3px solid var(--ok); background:rgba(143,201,164,.08);
  padding:14px 18px; border-radius:0 var(--r-s) var(--r-s) 0; font-size:.9rem;
  color:var(--ink-2); margin:16px 0}
.wizard-progress .seg.done{background:var(--olive)}
.btn-oauth{background:rgba(14,20,37,.7); color:var(--ink)}
.btn-oauth:hover{border-color:var(--olive); background:rgba(126,207,196,.07); color:var(--ink)}

/* --- статус заказа --- */
.track-steps li.done .dot{background:var(--olive); border-color:var(--olive); color:var(--aqua-ink)}
.track-steps .dot{background:rgba(14,20,37,.9)}
.status-panel.held{border-color:rgba(217,155,107,.35)}
code.oid{background:rgba(196,208,232,.08); color:var(--olive)}

/* --- проза --- */
.prose a{border-bottom:1px solid rgba(185,198,216,.3)}
.prose a:hover{border-bottom-color:var(--olive)}
.prose .lead-first::first-letter{color:var(--gold)}
.prose h2{color:var(--star)}
hr.orn::after{content:"✦ ✧ ✦"; letter-spacing:.9em}

/* ================================================================
   КЛАССЫ ВХОДА И КАБИНЕТА
   login.html и account.html писались отдельной сессией и используют
   .wrap/.eyebrow/.lede/.fine/.err-msg, которых в бумажной site.css
   не было вовсе — страницы отдавались браузерными дефолтами.
   Определяем их здесь, иначе в ночной теме это заметно вдвойне.
   ================================================================ */
.wrap{max-width:var(--w-max); margin:0 auto; padding:0 clamp(18px,4vw,40px)}
.eyebrow{font-family:var(--f-ui); font-size:.71rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--olive); display:flex; align-items:center;
  gap:.9em; margin-bottom:1.05rem}
.eyebrow::before{content:""; width:2.2em; height:1px; background:currentColor; opacity:.5}
.lede{font-size:1.1rem; color:var(--ink-2); max-width:var(--w-text)}
.fine{font-size:.85rem; color:var(--muted); line-height:1.6}
.err-msg{font-size:.8rem; color:var(--hold); margin-top:5px; font-family:var(--f-ui)}
/* карточка формы входа */
main .wrap[style*="440px"], main .wrap[style*="460px"]{
  background:rgba(14,20,37,.72); border:1px solid var(--line); border-radius:var(--r);
  padding:clamp(28px,4vw,40px); box-shadow:var(--shadow-card); position:relative; overflow:hidden}
/* переключатель пола (gender.js) — тех же правил, что .segs .seg-btn */
.gender-btn{border:1px solid var(--line); background:rgba(14,20,37,.6); border-radius:999px;
  cursor:pointer; font-family:var(--f-ui); font-size:.82rem; font-weight:600; color:var(--ink-2);
  padding:9px 14px; min-height:40px; transition:border-color .2s, background .2s, color .2s}
.gender-btn:hover{border-color:rgba(126,207,196,.4); color:var(--ink)}
.gender-btn[aria-checked=true],.gender-btn[aria-pressed=true],.gender-btn.sel{
  border-color:var(--olive); background:rgba(126,207,196,.12); color:var(--olive)}

/* ================================================================
   ДЕКОР: язык символических систем
   Эфемеридные ленты, номера секций в градусах, лента одиннадцати
   систем. Только цифры и латиница: пиктограммы планет и знаков
   (U+2609, U+2648…) в наших сабсетах отсутствуют, а системный фолбэк
   даёт разный вес на разных ОС.
   ================================================================ */
.ephem{font-family:var(--f-ui); font-size:.66rem; font-weight:500; letter-spacing:.2em;
  color:var(--decor); white-space:nowrap; overflow:hidden; display:flex; gap:1.9em;
  justify-content:center; user-select:none; font-variant-numeric:lining-nums tabular-nums}
.ephem span{flex:0 0 auto}
.ephem.left{justify-content:flex-start}
.ephem-rail{position:absolute; top:0; bottom:0; writing-mode:vertical-rl;
  font-family:var(--f-ui); font-size:.62rem; letter-spacing:.34em; color:var(--decor);
  user-select:none; pointer-events:none; display:flex; align-items:center; gap:2.4em;
  font-variant-numeric:lining-nums tabular-nums}
.ephem-rail.l{left:clamp(8px,1.6vw,22px)}
.ephem-rail.r{right:clamp(8px,1.6vw,22px)}
@media (max-width:1100px){.ephem-rail{display:none}}
.sec-num{font-family:var(--f-ui); font-size:.7rem; font-weight:600; letter-spacing:.18em;
  color:var(--gold-deco); display:block; margin-bottom:.6rem;
  font-variant-numeric:lining-nums tabular-nums}
.divider{border:0; height:1px; margin:0; position:relative;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}
.divider::after{content:"✦"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--paper); color:var(--gold-deco); font-size:.7rem; padding:0 12px}
.overline.gold{color:var(--gold)}

/* лента одиннадцати систем: на ≥1160px держит одну строку, ниже — прокрутка */
.sys-strip{display:flex; flex-wrap:nowrap; gap:clamp(9px,1.4vw,18px); align-items:center;
  justify-content:center; padding:20px 0; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none}
.sys-strip::-webkit-scrollbar{display:none}
.sys-strip .s{display:flex; align-items:center; gap:7px; color:var(--muted); flex:0 0 auto;
  font-family:var(--f-ui); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap}
.sysglyph{width:19px; height:19px; color:var(--gold-deco); flex:0 0 auto}
@media (max-width:900px){.sys-strip{justify-content:flex-start; padding-left:2px}}

/* ================================================================
   ГЕРОЙ «КОМЕТА» — полноэкранная марка на звёздном небе
   ================================================================ */
.hero-a{
  min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(34px,6vh,86px) 0 clamp(52px,8vh,100px);
}
.hero-a .halo{position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:min(148vw,1500px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(126,207,196,.11) 0%, rgba(96,132,190,.10) 26%,
    rgba(60,74,132,.07) 46%, transparent 68%)}
.hero-a .mark{width:clamp(46px,5.2vw,64px); height:auto; color:var(--gold);
  margin:0 auto 20px; opacity:.95}
.hero-a .wordmark{font-family:var(--f-display); font-weight:600; color:var(--star);
  font-size:clamp(2.3rem,8vw,5.9rem); line-height:1; letter-spacing:.24em;
  text-transform:uppercase; margin:0 0 .3em; padding-left:.24em;
  text-shadow:0 0 60px rgba(180,205,255,.18)}
.hero-a .wordmark i{font-style:normal; color:var(--olive)}
.hero-a .tagline{font-family:var(--f-display); font-style:italic;
  font-size:clamp(1.1rem,2.1vw,1.6rem); color:var(--gold); margin:0 0 1.3rem; letter-spacing:.03em}
.hero-a .lead{max-width:37rem; margin:0 auto 2rem; color:var(--ink-2);
  font-size:1.03rem; line-height:1.68}
.hero-a .btn{padding:1.05em 2.6em; font-size:1rem}
.hero-a .foot{margin:2rem auto 0; max-width:43rem; font-size:.76rem;
  color:var(--muted); line-height:1.6; border:0; padding:0}
.hero-a .scrollhint{margin-top:clamp(20px,3.4vh,44px); font-family:var(--f-ui); font-size:.64rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:9px}
.hero-a .scrollhint::after{content:""; width:1px; height:34px;
  background:linear-gradient(180deg,var(--gold-deco),transparent);
  animation:hintdrop 3.4s ease-in-out infinite}
@keyframes hintdrop{0%,100%{opacity:.35; transform:scaleY(.7)}50%{opacity:1; transform:scaleY(1)}}
.hero-a .ephem-bottom{position:absolute; left:0; right:0; bottom:18px; padding:0 20px}
/* низкие экраны: подсказка убирается, герой остаётся «одним кадром» */
@media (max-height:760px){
  .hero-a .scrollhint{display:none}
  .hero-a .foot{margin-top:1.5rem}
}
/* мобильный: ИЗМЕРЕНО — при базовых размерах герой 804px против 737px полезной
   высоты iPhone X, и подсказка уезжала за сгиб */
@media (max-width:640px){
  .hero-a{padding:26px 0 38px}
  .hero-a .mark{width:42px; margin-bottom:14px}
  .hero-a .tagline{font-size:1.05rem; margin-bottom:1.05rem}
  .hero-a .lead{font-size:.95rem; line-height:1.62; margin-bottom:1.7rem; max-width:30rem}
  .hero-a .btn{padding:1em 2.2em}
  .hero-a .foot{font-size:.71rem; line-height:1.55; margin-top:1.5rem}
  .hero-a .ephem-bottom{display:none}
}
/* автопереносы нужны в прозе на 320px, но в заголовке героя дают «голо-сов» */
.hero h1{hyphens:manual}
/* ПОЙМАНО АУДИТОМ: `.choice .mini-tag.rec` (0,3,0) перебивает заливку моего
   `.mini-tag` (0,2,0) и оставляет золотой текст на бирюзе — 1.05:1. */
.choice .mini-tag.rec,.mini-tag.rec{background:var(--olive); color:var(--aqua-ink); border-color:transparent}

/* Базовая геометрия полей в бумажной версии перечисляла только
   text/date/time/email — password и url оставались браузерными дефолтами
   (на входе это видно сразу: узкая рамка вместо поля). Дополняем. */
input[type=password],input[type=url],input[type=tel],input[type=number],input[type=search]{
  width:100%; padding:12px 14px; font-family:var(--f-body); font-size:1rem;
  border:1px solid var(--line); border-radius:var(--r-s); min-height:48px;
  transition:border-color .2s, box-shadow .2s, background .2s;
}

/* ================================================================
   SITE-P0-3 · первый экран и доверие (тема не меняется, Д56)
   ================================================================ */
.hero-a .hero-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(28px,5vw,72px); align-items:center; text-align:left; width:100%}
.hero-a .hero-title{font-family:var(--f-display); font-weight:600; color:var(--star);
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.08; letter-spacing:0; margin:0 0 .5em;
  text-shadow:0 0 60px rgba(180,205,255,.18); hyphens:manual}
.hero-a .hero-copy .lead{margin:0 0 1.8rem; max-width:34rem}
.hero-a .proofs{list-style:none; margin:1.6rem 0 0; padding:0; max-width:34rem;
  font-family:var(--f-ui); font-size:.95rem; line-height:1.5; color:var(--ink-2)}
.hero-a .proofs li{position:relative; padding:5px 0 5px 22px}
.hero-a .proofs li::before{content:""; position:absolute; left:2px; top:.95em; width:8px; height:8px;
  border-radius:50%; background:var(--gold-deco)}
.hero-a .proofs a{color:var(--star); text-decoration:underline; text-underline-offset:3px}
.hero-a .hero-copy .foot{margin:1.4rem 0 0; max-width:34rem; font-size:.875rem; line-height:1.55}
.hero-spread{margin:0; justify-self:center; width:min(100%,440px)}
.hero-spread .spread{display:flex; border-radius:4px; overflow:hidden; box-shadow:var(--shadow-page);
  border:1px solid rgba(196,208,232,.16); background:#0b0f1c}
.hero-spread .spread img{display:block; width:50%; height:auto}
.hero-spread .spread img+img{border-left:1px solid rgba(0,0,0,.35)}
.hero-spread figcaption{margin-top:12px; text-align:center; font-family:var(--f-ui);
  font-size:.875rem; color:var(--muted)}
@media (max-width:900px){
  .hero-a .hero-grid{grid-template-columns:1fr; gap:28px}
  .hero-spread{width:min(100%,380px)}
}
@media (max-width:640px){
  .hero-a .hero-title{font-size:clamp(1.7rem,7.4vw,2.1rem)}
  .hero-a .hero-copy .lead{font-size:.98rem}
  .hero-a .hero-copy .foot{font-size:.875rem}
}
/* дисклеймеры ≥ 14 px (D13); цвет --muted = 7.1:1 на фоне страницы */
.site-footer .disclaimer{font-size:.875rem}
.site-footer .disclaimer a{text-decoration:underline; text-underline-offset:3px} /* link-in-text-block */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media (max-width:760px){.fit-grid{grid-template-columns:1fr}}
.fit-grid ul{margin:0; padding-left:1.2em; color:var(--ink-2); font-size:.98rem}
.fit-grid li{margin-bottom:.6em}
.fit-yes h3{color:var(--ok)} .fit-no h3{color:var(--hold)}

/* методология: паспорт расчётов */
.data-table.passport{max-width:none; margin:18px 0 8px}
.passport .dt-row{grid-template-columns:minmax(0,3fr) minmax(0,9fr); font-size:.92rem}
@media (max-width:640px){.passport .dt-row{grid-template-columns:1fr}}