.quiz--surface .quiz__bar i,.quiz--pale .quiz__bar i,.quiz--paper .quiz__bar i{background:var(--ink)}
.quiz--surface .quiz__foot,.quiz--pale .quiz__foot,.quiz--paper .quiz__foot{border-color:var(--line);color:var(--ink-2);opacity:1}
.quiz h3{color:inherit;font-size:var(--t-lg);margin-bottom:var(--s1)}
.quiz__sub{font-size:var(--t-sm);opacity:.72;margin-bottom:var(--s4)}
.quiz__bar{display:flex;gap:5px;margin-bottom:var(--s5)}
.quiz__bar i{flex:1;height:5px;border-radius:var(--r-pill);background:currentColor;opacity:.22;transition:opacity .25s}
.quiz__bar i.on{opacity:1}
.quiz__step{display:none}
.quiz__step.on{display:block;animation:q-in .22s var(--ease)}
@keyframes q-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quiz__q{font-size:var(--t-md);font-weight:700;margin-bottom:var(--s3)}
.quiz__opts{display:flex;flex-direction:column;gap:var(--s2)}
.quiz__opts.row{flex-direction:row;flex-wrap:wrap}
.quiz__opts.row .qopt{flex:1 1 calc(50% - 4px);justify-content:center;text-align:center}
/* Сегменты: 4 класса одной строкой. Компактнее плитки, читается как «выбери одно» */
.quiz__opts.seg{flex-direction:row;gap:6px}
.quiz__opts.seg .qopt{flex:1;min-width:0;justify-content:center;text-align:center;padding:15px 6px;
  font-size:var(--t-md);font-weight:700}
.qopt{display:flex;align-items:center;min-height:54px;padding:15px 18px;border:none;border-radius:var(--r-md);
  background:var(--paper);font-family:var(--f-text);font-size:var(--t-sm);font-weight:600;
  color:var(--paper-ink);cursor:pointer;text-align:left;transition:box-shadow var(--dur) var(--ease)}
.qopt:hover{box-shadow:0 0 0 3px currentColor}
.qopt.sel{box-shadow:0 0 0 3px var(--a)}
.quiz--accent .qopt.sel{box-shadow:0 0 0 3px var(--contrast)}
.qopt small{font-weight:500;color:var(--paper-hint);margin-left:6px}
.qopt[disabled]{opacity:.5;cursor:not-allowed}
/* [hidden] у любого элемента с display:flex/grid не работает без этой строки:
   у атрибутного UA-правила [hidden]{display:none} и классового .qopt{display:flex}
   одинаковая специфичность, а авторские стили всегда бьют стили браузера —
   кнопка оставалась видна с атрибутом hidden="" на себе. */
.qopt[hidden]{display:none}
/* Тач-зона 44px. Выбор варианта листает вперёд сам, кнопки «далее» нет — значит
   «назад» это ЕДИНСТВЕННЫЙ откат ошибочного ответа, а был он 54×28 на opacity .7.
   Замер на мобильном: в него попадали 20 раз из 25 при разбросе пальца ±14px,
   то есть исправить случайный выбор было сложнее, чем сделать его. */
.quiz__back{background:none;border:none;font-family:var(--f-text);font-size:var(--t-xs);font-weight:600;
  color:inherit;opacity:.85;cursor:pointer;margin-top:var(--s3);
  min-height:44px;display:inline-flex;align-items:center;padding:6px 12px 6px 0}
/* Назад вверху шага. Нужен там, где выбор варианта сам листает вперёд: кнопки «далее»
   на шаге нет, и внизу «назад» повисает в воздухе — единственный элемент под ответами. */
.quiz__back--top{margin:0 0 var(--s2);align-self:flex-start}
.quiz__foot{margin-top:auto;padding-top:var(--s4);border-top:1px solid;border-color:currentColor;
  font-size:var(--t-xs);opacity:.72}
.quiz .legal{color:inherit;opacity:.62;margin-top:var(--s3)}
/* margin-top:auto у подвала съедается на узком экране, и линия подвала ложилась
   вплотную к юр-строке (замер на 390 и 360: зазор 0 px при 29 на десктопе).
   Гарантированный зазор задаём снизу юр-строки — auto продолжает добирать остаток. */
.quiz .legal:has(+ .quiz__foot){margin-bottom:var(--s4)}
.quiz .legal a{color:inherit;text-decoration:underline}

.field{width:100%;min-height:54px;padding:15px 18px;border:none;border-radius:var(--r-md);
  font-family:var(--f-text);font-size:var(--t-md);background:var(--paper);color:var(--paper-ink);margin-bottom:var(--s2)}
.field::placeholder{color:var(--paper-hint)}
select.field{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23616262' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center}
.card .field{box-shadow:inset 0 0 0 1.5px var(--line)}
.field-err{font-size:var(--t-xs);font-weight:600;color:var(--hot-deep);margin:-2px 0 var(--s2);display:none}
.field-err.on{display:block}
.quiz--surface .field-err,.quiz--pale .field-err,.quiz--paper .field-err{color:var(--hot-deep)}
.quiz:not(.quiz--surface):not(.quiz--pale):not(.quiz--paper) .field-err{color:#ffb3a0}

/* -------------------------------------------------------------- 14. FAQ */
.faq{display:flex;flex-direction:column;gap:var(--s2)}
.faq details{background:var(--surface);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:var(--t-md);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-size:24px;font-weight:800;
  color:var(--a);flex:none;transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s3)}

/* ------------------------------------------------- 15. STICKY / MODAL / FOOT */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--page);
  border-top:1px solid var(--line);padding:10px var(--s3);display:flex;gap:var(--s3);
  align-items:center;justify-content:space-between;transform:translateY(110%);transition:transform .25s var(--ease)}
.sticky-cta.on{transform:none}
@media(min-width:760px){.sticky-cta{display:none}}
.modal{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:var(--s3)}
.modal.on{display:flex}
.modal__box{background:var(--page);border-radius:var(--r-xl);padding:var(--s7) var(--s5);
  width:100%;max-width:440px;max-height:92vh;overflow:auto;position:relative}
.modal__x{position:absolute;top:14px;right:14px;width:44px;height:44px;border:none;border-radius:50%;
  background:var(--surface);color:var(--ink-2);font-size:20px;cursor:pointer;line-height:1}
/* Просмотр картинки во весь экран. Нужен там, где превью физически нечитаемо:
   скрины отчёта 1440px отдаются в ленте подтверждений по 208px, текст внутри
   выходит порядка полутора пикселей — на телефоне это «что-то есть», а не пруф.
   Коробка под картинку шире обычной модалки и без внутренних полей. */
.modal__box--shot{max-width:min(96vw,900px);padding:0;background:none;overflow:visible}
.modal__box--shot img{display:block;width:100%;height:auto;border-radius:var(--r-lg)}
.modal__box--shot .modal__x{top:-52px;right:0;background:var(--page)}
.cl__proofs > *{cursor:zoom-in}

.footer{padding:var(--s8) var(--s2) var(--s6);color:var(--ink-3);font-size:var(--t-xs);line-height:1.5}
.footer a{color:var(--ink-2)}
.footer__row{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:space-between;margin-bottom:var(--s5)}

/* ------------------------------------------------------------ 16. УТИЛИТЫ */
.hide{display:none!important}
@media(max-width:759px){.d-only{display:none!important}}
@media(min-width:760px){.m-only{display:none!important}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}   /* плавная прокрутка от якорей оставалась включённой */*{animation:none!important;transition:none!important}}

/* ============================================================================
   17. ШИРОКИЙ КВИЗ (quizw) — один вопрос на экран
   Вопрос слева крупно, ответы справа списком. Единственное действие на экране.
   ========================================================================== */
.quizw{background-color:var(--page);border-radius:var(--r-xl);padding:var(--s6) var(--s5);
  display:grid;gap:var(--s6);position:relative;overflow:hidden}
@media(min-width:900px){.quizw{grid-template-columns:1fr 1.02fr;gap:var(--s8);padding:var(--s7) var(--s7)}}
.quizw__l{display:flex;flex-direction:column}
.quizw__r{display:flex;flex-direction:column}
/* Вопрос — главный объект экрана, поэтому он плакатного кегля, а не «как в форме».
   Под коротким вопросом колонка пустовала; закрывать пустоту цветным скрином
   продукта пробовали — он перетягивает внимание и приносит на бумагу четыре
   лишних цвета. Вес колонке даёт сам вопрос, ниже — одна строка «зачем спрашиваем». */
.quizw__q{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(30px,4.4vw,58px);margin-top:var(--s5);text-wrap:balance}
.quizw__note{font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s5);max-width:34ch}
.quizw__hint{font-size:var(--t-sm);color:var(--ink-3);margin-bottom:var(--s4)}
.quizw__deco{margin-top:auto;padding-top:var(--s6)}
.quizw__foot{margin-top:auto;padding-top:var(--s6)}

/* Степпер: кружки с цифрами. Тот же приём «цифра», что и везде.
   Акцент несёт ТОЛЬКО активный шаг. Пройденные и будущие — нейтральные:
   когда акцентом красились все три кружка, соединители и все обводки ответов,
   на экране получалось шесть пятен одного цвета и текущий шаг терялся. */
.stepper{display:flex;align-items:center}
.stepper i{width:38px;height:38px;flex:none;border-radius:50%;background:transparent;color:var(--ink-3);
  box-shadow:inset 0 0 0 1.5px var(--control);
  font-family:var(--f-display);font-weight:800;font-size:var(--t-sm);font-style:normal;
  display:flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease)}
.stepper i.on{background:var(--a);color:var(--a-on);box-shadow:none}
.stepper s{width:24px;height:2px;background:var(--control);text-decoration:none;flex:none}

/* Ответы списком: радио + заголовок + уточнение */
.qlist{display:flex;flex-direction:column;gap:4px}
.qlist{--qlist-bg:transparent}
.grid-tex .qlist{--qlist-bg:var(--surface)}   /* на клетке строки получают подложку */
.qlist button{display:flex;gap:14px;align-items:flex-start;background:var(--qlist-bg);border:none;cursor:pointer;
  text-align:left;font-family:inherit;padding:13px 12px;border-radius:var(--r-md);
  transition:background var(--dur) var(--ease);color:inherit}
.qlist button:hover{background:var(--surface-2)}
/* Выбранная строка обязана отличаться от подложки, а не только кружком.
   На клетке подложка есть у всех строк — значит выбор берёт вложенный тон. */
.grid-tex .qlist button.sel{background:var(--surface-2)}
/* Невыбранные — нейтральный контур. Акцент появляется в момент выбора,
   иначе четыре акцентных кружка сразу выглядят как четыре выбранных ответа. */
.qlist .rd{width:21px;height:21px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--control);
  margin-top:3px;transition:box-shadow var(--dur) var(--ease)}
.qlist .sq{border-radius:6px}
/* Внутреннее кольцо — цвета подложки выбранной строки, не страницы:
   на бумаге и в тёмной теме строка окрашена в --surface, а не в --page. */
.qlist button.sel .rd{background:var(--a);box-shadow:inset 0 0 0 4px var(--surface)}
.qlist button.sel{background:var(--surface)}
.qlist b{display:block;font-size:var(--t-lg);font-weight:600;line-height:1.25}
.qlist small{display:block;font-size:var(--t-sm);color:var(--ink-2);margin-top:2px}
.qlist button[disabled]{opacity:.4;pointer-events:none}

/* Подложка кампании: бледный фон вместо белого, карточки становятся белыми.
   Самый дешёвый способ дать экрану лицо, когда иллюстратора нет. */
[data-bg="tint"]{background-color:var(--a-pale);--surface:var(--page)}
[data-theme="night"][data-bg="tint"],
[data-theme="night"] [data-bg="tint"],
.slab [data-bg="tint"]{--surface:#262937}
[data-bg="tint"] .quizw{box-shadow:none}
/* Подложка кампании сама покрашена в --a-pale — бледная карточка на ней исчезает
   (тот же дефект, что ловили у «Базового» тарифа на серо-синем фоне). Плотнее
   красить нельзя: замер показал 2.22 у текста --a-deep на такой заливке.
   Поэтому блок держит форму контуром, а не пятном — как выключенная кнопка
   и активная пилюля переключателя срока. */
[data-bg="tint"] .card--pale,[data-bg="tint"] .picker__more,[data-bg="tint"] .factchip{
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--a) 38%,transparent)}

/* ============================================================================
   18. ПИКЕР ПРЕПОДАВАТЕЛЕЙ (picker) — список слева, карточка справа
   ========================================================================== */
.picker{display:grid;gap:var(--gap)}
@media(min-width:900px){.picker{grid-template-columns:.6fr 1fr;align-items:start}}
.picker__list{display:flex;flex-direction:column;gap:var(--s2)}
.picker__i{display:flex;align-items:center;gap:14px;background:var(--page);border-radius:var(--r-pill);
  padding:8px 20px 8px 8px;border:2px solid transparent;cursor:pointer;text-align:left;
  font-family:inherit;color:inherit;transition:border-color var(--dur) var(--ease)}
.picker__i b{display:block;font-size:var(--t-md);font-weight:700;line-height:1.2}
.picker__i span{display:block;font-size:var(--t-sm);color:var(--ink-2)}
.picker__i.on{border-color:var(--a)}
.picker__more{background:var(--a-pale);color:var(--a-deep);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);font-size:var(--t-sm);font-weight:600;line-height:1.35}
.picker__card{background:var(--page);border-radius:var(--r-xl);padding:var(--s6);display:grid;gap:var(--s5)}
@media(min-width:760px){.picker__card{grid-template-columns:1fr .78fr;align-items:center}}
.picker__card h3{font-size:clamp(22px,2.4vw,30px)}
/* Портрет в карточке — вырезанный PNG на диске цвета роли. Диск убирает разнобой
   студийных фонов: у всех преподавателей подложка одна и та же. */
.picker__photo{width:100%;max-width:270px;aspect-ratio:1;border-radius:50%;object-fit:cover;
  object-position:center top;justify-self:center;
  background:radial-gradient(70% 60% at 50% 95%,color-mix(in srgb,var(--a) 78%,#fff),
    color-mix(in srgb,var(--a) 92%,#121026))}
.rate{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--ink-2);margin:var(--s3) 0 var(--s4)}
.rate b{background:var(--sun-pale);color:var(--sun-deep);border-radius:8px;padding:3px 9px;font-weight:800}
.plus-list{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:var(--t-md)}
.plus-list li{position:relative;padding-left:26px}
.plus-list li::before{content:"✦";position:absolute;left:0;color:var(--a);font-size:14px;top:2px}
.say{background:var(--surface);border-radius:var(--r-lg);padding:var(--s4);font-size:var(--t-sm);
  line-height:1.45;margin-top:var(--s5)}

/* ============================================================================
   19. ЛЕНТА (rail) — горизонтальный скролл карточек
   ========================================================================== */
.rail{display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);scrollbar-width:thin}
.rail > *{flex:0 0 250px;scroll-snap-align:start}
.rail-card{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;display:flex;flex-direction:column}
.rail-card img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center top;
  background:linear-gradient(177deg,color-mix(in srgb,var(--rail-c,var(--warm)) 80%,#121026),
    color-mix(in srgb,var(--rail-c,var(--warm)) 88%,#fff))}
.rail-card__b{padding:var(--s4) var(--s5) var(--s5)}
.rail-card__b h3{font-size:var(--t-md);margin-bottom:4px}
.rail-card__b span{font-size:var(--t-xs);color:var(--ink-2);display:block}

/* ============================================================================
   20. КЛАССИФАЙД (classified) — профиль специалиста в формате маркетплейса
   Тест гипотезы: родитель, привыкший к Профи.ру и Авито, читает знакомую карточку.
   Мимикрируем под ФОРМАТ, не под чужой бренд: логотип, цвета и домен наши.
   ========================================================================== */
.classified{background-color:var(--page);border-radius:var(--r-xl);padding:var(--s6) var(--s5);display:grid;gap:var(--s6)}
/* Без min-width:0 колонка грида не даёт сжаться ленте подтверждений — страница едет вбок. */
.classified > *{min-width:0}
@media(min-width:900px){.classified{grid-template-columns:1fr 290px;gap:var(--s8);padding:var(--s7)}}

.cl__head{display:flex;gap:var(--s5);align-items:flex-start}
.cl__head > *{min-width:0}
/* На телефоне аватар 136px забирает почти всю ширину: текстовой колонке остаётся
   128–196px, имя «Катерина Валерьевна» (нужно 243px) ломается на две строки на ЛЮБОЙ
   мобильной ширине, строка о лицензии — на четыре-пять, шапка вырастает со 136 до 318px.
   Уменьшать лицо нельзя (бан системы: лицо мельче 100px не ставим), поэтому колонки
   складываем: фото сверху, текст под ним во всю ширину. На Авито и Профи карточка
   на телефоне складывается ровно так — формат мимикрии не страдает. */
@media(max-width:559px){
  .cl__head{display:block}
  .cl__head .cl__ava{margin-bottom:var(--s4)}
}
.cl__ava{width:136px;height:136px;flex:none;border-radius:var(--r-lg);object-fit:cover;
  object-position:center top;
  background:linear-gradient(177deg,color-mix(in srgb,var(--a) 80%,#121026),color-mix(in srgb,var(--a) 88%,#fff))}
.cl__name{font-family:var(--f-display);font-size:clamp(23px,2.5vw,30px);font-weight:800;letter-spacing:-.02em}
.cl__online{font-size:var(--t-sm);color:var(--ink-2);margin-top:4px;display:flex;align-items:center;gap:7px}
.cl__online::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--done)}
.cl__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s4)}
.cl__rate{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-lg);font-weight:700}
.cl__rate::before{content:"★";color:var(--sun);font-size:19px}
.cl__reviews{font-size:var(--t-md);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Подчёркнутый счётчик отзывов без обработчика — единственный на странице элемент,
   который выглядит ссылкой и ей не является. В формате классифайда «225 отзывов»
   это первое, куда тычет палец; мёртвый тап там подтачивает весь приём мимикрии. */
.cl__reviews--flat{text-decoration:none;cursor:default}
.cl__verify{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:var(--t-sm);color:var(--ink-2);margin-top:var(--s3)}
.cl__verify svg{width:17px;height:17px;fill:none;stroke:var(--done);stroke-width:2.2}

/* Плашка акции с уголком-флажком слева — узнаваемая деталь классифайдов */
.cl__promo{position:relative;background:var(--page);border:1.5px solid var(--sun);border-radius:var(--r-md);
  padding:14px 18px 14px 22px;font-size:var(--t-sm);margin-top:var(--s5)}
.cl__promo b{position:absolute;left:14px;top:-13px;background:var(--sun);color:#3d3600;
  border-radius:7px;padding:4px 10px;font-size:12.5px;font-weight:800}

/* Лента подтверждений: скрины переписок, дипломы, сертификаты */
.cl__proofs{display:flex;gap:var(--s2);overflow-x:auto;margin-top:var(--s5);padding-bottom:6px;scrollbar-width:thin}
/* Тот же капкан специфичности, что у .qopt и .rise: display:flex тем же весом бьёт
   встроенное [hidden]{display:none}. Лента прячется, когда у преподавателя нет
   ни одного подтверждения на его предмет. */
.cl__proofs[hidden]{display:none}
.cl__proofs > *{flex:0 0 208px;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.cl__proofs img{width:100%;height:100%;object-fit:cover;object-position:left top}
.cl__about{margin-top:var(--s5);font-size:var(--t-md);line-height:1.55}
.cl__about p + p{margin-top:var(--s3)}
.cl__about ul{list-style:none;margin-top:var(--s3);display:flex;flex-direction:column;gap:6px}
.cl__about li{position:relative;padding-left:20px}
.cl__about li::before{content:"—";position:absolute;left:0;color:var(--ink-3)}

/* Правая колонка: действие и условия */
.cl__side{display:flex;flex-direction:column;gap:var(--s5)}
@media(min-width:900px){.cl__side{position:sticky;top:var(--s5);align-self:start}}
.cl__kv b{display:block;font-family:var(--f-display);font-size:var(--t-md);font-weight:800;margin-bottom:5px}
.cl__kv span{font-size:var(--t-md);color:var(--ink-2);display:flex;align-items:center;gap:8px}
.cl__kv span i{width:9px;height:9px;border-radius:50%;background:var(--hot);flex:none;font-style:normal}
.cl__note{font-size:var(--t-sm);color:var(--ink-2);line-height:1.45}

/* Шапка-полоса «заполните детали задачи» — приём классифайда, тянет в квиз */
/* Правило системы (Влад, 21.08): чёрный прямоугольник со скруглением — это ТОЛЬКО кнопка.
   Плашка была чёрной капсулой, то есть буквально формой главной кнопки: на мобильном она
   стоит над карточкой и читалась как огромный CTA, а настоящая кнопка рядом терялась.
   Теперь бледно-акцентная и со скруглением 16 — заметна, но ни цветом, ни формой не кнопка. */
.cl__bar{background:var(--a-pale);color:var(--a-deep);border-radius:var(--r-md);
  padding:14px 18px;font-size:var(--t-md);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cl__bar a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ============================================================================
   21. ЗАИМСТВОВАННЫЕ ПАТТЕРНЫ (21st.dev), переложенные на наши токены
   Ни одной внешней зависимости: у оригиналов React + Tailwind + framer-motion,
   здесь — чистый CSS на переменных системы. Мотив берём, графику — свою.
   ========================================================================== */

/* 21.1 ШАПКА. Закрывает дыру: страница без шапки не собирается, а в гайде её не было.
   Три состояния: наверху прозрачная, при скролле вниз — подложка и сжатие,
   при скролле вверх — возвращается. На мобиле — выдвижная панель. */
.hdr{position:sticky;top:0;z-index:40;background:transparent;transition:
     background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),padding var(--dur) var(--ease)}
.hdr__in{display:flex;align-items:center;gap:var(--s5);padding:18px 0;transition:padding var(--dur) var(--ease)}
.hdr[data-stuck]{background:var(--page);box-shadow:inset 0 -1px 0 var(--line)}
.hdr[data-stuck] .hdr__in{padding:10px 0}
.hdr[data-hide]{transform:translateY(-100%);transition:transform .25s var(--ease)}
.hdr__nav{display:none;gap:var(--s5);margin-left:auto}
@media(min-width:900px){.hdr__nav{display:flex}}
.hdr__nav a{color:var(--ink-2);text-decoration:none;font-size:var(--t-sm);font-weight:600;white-space:nowrap}
.hdr__nav a:hover{color:var(--ink)}
.hdr__cta{margin-left:auto;display:none}