/* Hallmark · genre: modern-minimal · macrostructure: Split Studio + ledger · theme: custom (экспертное заключение)
 * paper oklch(98.8% 0.003 40) · accent oklch(43% 0.135 22) бордовый · Geologica + Golos Text
 * enrichment: F5 annotated report (Tier A, CSS) · nav: N9 edge-aligned · footer: Ft4 dense colophon
 * tone: austere / institutional · audience: владельцы малого бизнеса · use: проверить сайт
 */

/* ---------- База ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
  scrollbar-color: var(--color-neutral) var(--color-paper-2);
}

::selection { background: var(--color-accent-tint); color: var(--color-accent-deep); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: var(--text-display-s); line-height: 1.08; letter-spacing: -0.028em; }
h2 { font-size: var(--text-2xl); line-height: 1.14; letter-spacing: -0.022em; }
h3 { font-size: var(--text-md); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-md); max-width: 66ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-deep); text-decoration-color: currentColor; }

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

.muted { color: var(--color-muted); }
.nowrap { white-space: nowrap; }
/* Только для скринридера */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Шапка ---------- */

.masthead { border-bottom: var(--rule-hair) solid var(--color-rule); }
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 68px;
}
.brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px var(--space-sm);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.15;
}
.brand:hover { color: var(--color-ink); }
/* Знак WS — тот же файл, что и фавиконка */
.brand__mark { grid-row: span 2; width: 40px; height: 40px; }
.brand__name { align-self: end; }
.brand__desc { align-self: start; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.02em; }
.brand__desc { font-size: var(--text-xs); color: var(--color-muted); }
.masthead__rkn { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; color: var(--color-ink); text-decoration: none; }
.masthead__rkn:hover { color: var(--color-accent); text-decoration: none; }
/* На телефоне ссылка о предписании уже есть в первом экране — второй акцент не нужен */
@media (max-width: 559px) { .masthead__rkn { display: none; } }

/* ---------- Первый экран: заголовок во всю ширину, под ним поле и отчёт ----------
   Элементы сетки в порядке DOM (он же порядок чтения и порядок одной колонки на телефоне):
   текст с полем и ходом проверки → краткий отчёт (пока проверки не было, скрыт) → блок о предписании → пример.
   На широком экране слева текст и блок о предписании, справа область «side»: пример, а после проверки
   на его месте — готовый отчёт (оба в одной области, одновременно не показываются). Вторая строка (1fr)
   забирает лишнюю высоту, поэтому текст не растягивается, а блок о предписании держится у низа области. */

.hero { padding-block: var(--space-xl) var(--space-section); }
.hero h1 { max-width: 24ch; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--space-lg); }
.hero__grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .hero { padding-top: var(--space-3xl); }
  .hero h1 { max-width: none; }
  .hero__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "text side" "urgent side";
    column-gap: var(--space-3xl);
    margin-top: var(--space-2xl);
  }
  .hero__text { grid-area: text; }
  .sample, .scan__result { grid-area: side; }
}

.hero__lead { margin: 0 0 var(--space-lg); font-size: var(--text-base); color: var(--color-muted); max-width: 34em; }
@media (min-width: 1024px) { .hero__lead { font-size: var(--text-md); margin-bottom: var(--space-xl); } }
.hero__text { display: flex; flex-direction: column; min-width: 0; }
.hero__note { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-muted); }

/* Короткий перечень проверок — только на широком экране, на телефоне сразу ниже идёт таблица */
.scope { display: none; }
@media (min-width: 1024px) {
  .scope { display: block; margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
}
.scope__title { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; }
.scope__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
/* Колонки по ширине подписей: длинные («Политика обработки данных») не переносятся */
@media (min-width: 1280px) { .scope__list { grid-template-columns: auto auto; justify-content: start; } }
.scope__list li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-xs); align-items: baseline; }
.scope__list li::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-left: 4px;
  border: solid var(--color-ink);
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Срочный путь: панель под текстом, на широком экране — внизу левой колонки, по нижнему краю области справа */
.urgent {
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  background: var(--color-paper-2);
  border-radius: var(--radius-lg);
}
.urgent__title { margin: 0 0 var(--space-xs); font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.015em; color: var(--color-ink); }
.urgent__text { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; }
/* Длинная подпись кнопки на узком экране переносится, а не вылезает за край */
.urgent .btn { white-space: normal; text-align: center; text-wrap: balance; }
@media (min-width: 1024px) { .urgent { grid-area: urgent; align-self: end; margin-top: 0; } .scope { margin-bottom: var(--space-xl); } }

.label { display: block; margin-bottom: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
.label__opt { font-weight: 400; color: var(--color-muted); }
.check__row { display: grid; gap: var(--space-xs); }
@media (min-width: 560px) and (max-width: 1023px), (min-width: 1280px) {
  .check__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
  .check__row .field { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .check__row .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
}
.check__error, .lf__error { margin: var(--space-xs) 0 0; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }

/* ---------- Поля и кнопки ---------- */

.field {
  width: 100%;
  min-height: 54px;
  padding: var(--space-sm) var(--space-md);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-neutral);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field--area { min-height: 96px; resize: vertical; line-height: 1.45; }
.field::placeholder { color: var(--color-placeholder); opacity: 1; }
.field:hover { border-color: var(--color-ink); }
.field:focus { outline: none; border-color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-ink); }
.field[aria-invalid="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.field:disabled { background: var(--color-paper-2); color: var(--color-muted); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: var(--space-sm) var(--space-lg);
  font: inherit;
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-accent); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-accent-deep); color: var(--color-paper); text-decoration: none; }
.btn--ghost { min-height: 46px; padding: var(--space-xs) var(--space-md); background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); text-decoration: none; }
.btn--light { background: var(--color-on-band); color: var(--color-ink); }
.btn--light:hover { background: var(--color-paper); color: var(--color-ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.65; cursor: progress; }
.btn--wide { width: 100%; }

/* ---------- Проверка: ход и краткий отчёт ----------
   Ход — под полем адреса, в левой колонке: тонкая линия и одна строка текста (.scan).
   Отчёт — отдельный элемент сетки первого экрана (.scan__result): на телефоне сразу под полем,
   на широком экране справа, на месте примера. Карточка в грамматике примера: шапка с адресом,
   волосяные строки реестра, серая нижняя часть с действием. Статус всегда текстом и формой значка,
   не только цветом: нарушение — бордовый круг, риск — кольцо, в порядке — галочка, не проверено — пунктир. */

.scan { min-width: 0; scroll-margin-bottom: var(--space-2xl); }
/* У кнопок и ссылок свой display, поэтому атрибут hidden отдельно закреплён и внутри отчёта */
.scan [hidden], .scan__result [hidden] { display: none; }

.scan__track { position: relative; height: 2px; margin-top: var(--space-lg); overflow: hidden; background: var(--color-rule); }
.scan__track::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: var(--color-accent);
  animation: scan-run 1.6s var(--ease-in-out) infinite;
}
@keyframes scan-run { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) { .scan__track { display: none; } }

.scan__state { margin: 0; font-weight: 600; }
.scan__state:not(:empty) { margin-top: var(--space-lg); }
.scan__track:not([hidden]) + .scan__state { margin-top: var(--space-sm); }
.scan__state.is-problem { color: var(--color-accent); }
.scan__sub { display: block; margin-top: var(--space-2xs); font-size: var(--text-sm); font-weight: 400; color: var(--color-muted); }
.scan__hint { margin: var(--space-2xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.scan__hint:empty { display: none; }
.scan__action { margin-top: var(--space-md); }

.scan__result {
  container-type: inline-size;
  margin-top: var(--space-lg);
  scroll-margin-top: var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px oklch(21% 0.008 40 / 0.05), 0 28px 56px -28px oklch(21% 0.008 40 / 0.22);
  overflow: hidden;
}
.scan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-md);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.scan__site { min-width: 0; font-size: var(--text-md); letter-spacing: -0.015em; }
.scan__time { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.scan__body { padding: var(--space-lg) var(--space-md) var(--space-xs); }
.scan__verdict {
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.22;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.scan__extra { margin: var(--space-xs) 0 0; font-size: var(--text-sm); color: var(--color-muted); }
.scan__list { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: var(--rule-strong) solid var(--color-rule-strong); }

.scan__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-areas: "mark name" "mark st";
  column-gap: var(--space-sm);
  row-gap: 2px;
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.scan__name { grid-area: name; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); line-height: 1.35; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.scan__st { grid-area: st; font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted); }
.scan__status { font-weight: 650; }
.is-violation .scan__status { color: var(--color-accent-deep); }
.is-risk .scan__status { color: var(--color-accent); }
.is-ok .scan__status { font-weight: 400; color: var(--color-ink); }
.is-unknown .scan__status { font-weight: 600; color: var(--color-muted); }
/* Широкая карточка (планшет): название и статус в одну строку */
@container (min-width: 30rem) {
  .scan__row { grid-template-columns: 1.5rem minmax(0, 1fr) auto; grid-template-areas: "mark name st"; align-items: center; column-gap: var(--space-md); }
  .scan__st { text-align: right; }
}

/* Значок статуса: 1.5rem, как номера в примере. Восклицательный знак — два слоя фона от центра */
.scan__mark {
  grid-area: mark;
  position: relative;
  align-self: start;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-repeat: no-repeat;
}
.is-violation .scan__mark,
.is-risk .scan__mark {
  --mk: var(--color-paper);
  background-image: linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk));
  background-size: 2px 8px, 2.4px 2.4px;
  background-position: center 30%, center 78%;
}
.is-violation .scan__mark { background-color: var(--color-accent); }
.is-risk .scan__mark { --mk: var(--color-accent); background-color: var(--color-paper); border: 2px solid var(--color-accent); }
.is-ok .scan__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 11px;
  border: solid var(--color-ink);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -62%) rotate(45deg);
}
.is-unknown .scan__mark { border: 1.5px dashed var(--color-neutral); }
.is-unknown .scan__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 2px; background: var(--color-muted); transform: translate(-50%, -50%); }
@container (min-width: 30rem) { .scan__mark { align-self: center; } }

.scan__cta { padding: var(--space-lg) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.scan__more { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-ink); }
.scan__cta .chip:not([hidden]) { display: block; width: fit-content; margin-top: var(--space-sm); }
/* Полный отчёт: кнопка занята, пока PDF готовится; готов — ссылка на скачивание; не вышло — строка */
.scan__pdf .btn[aria-disabled="true"]:hover { background: var(--color-accent); }
.scan__pdf .btn { white-space: normal; text-align: center; text-wrap: balance; }
.scan__nopdf { margin: 0; font-size: var(--text-sm); font-weight: 600; }
/* Исправление — отдельный путь для тех, кто не справляется сам */
.scan__fix { margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.scan__fine { margin: var(--space-md) 0 0; font-size: var(--text-xs); line-height: 1.45; color: var(--color-muted); }
@media (min-width: 560px) {
  .scan__head, .scan__cta { padding-inline: var(--space-lg); }
  .scan__body { padding-inline: var(--space-lg); }
}

/* Проверка готова (.has-scan на .hero): пример уходит, его место занимает настоящий отчёт.
   Два отчёта рядом сбивали с толку, поэтому пример скрыт на любой ширине. На телефоне порядок задаёт DOM:
   поле → отчёт → блок о предписании. На широком экране отчёт — справа от верха текста, это самый высокий
   элемент сетки, поэтому он не липкий (липкий отчёт выше экрана не дал бы дочитать нижнюю часть);
   перечень «Что проверяется» повторял бы отчёт и скрыт, блок о предписании встаёт под полем. */
.has-scan .sample { display: none; }
@media (min-width: 1024px) {
  .has-scan .scope { display: none; }
  .has-scan .scan__result { align-self: start; margin-top: 0; }
  .has-scan .urgent { align-self: start; margin-top: var(--space-xl); }
}

/* Строки отчёта проступают по очереди — тот же ход, что у выносок в примере */
@media (prefers-reduced-motion: no-preference) {
  .scan__row { animation: scan-row var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes scan-row { from { opacity: 0; transform: translateY(0.4rem); } }

/* ---------- Отчёт: результат проверки с обезличенной схемой сайта ---------- */

/* Подпись над карточкой — в той же грамматике, что «Что проверяется» слева */
.sample { display: flex; flex-direction: column; margin: var(--space-2xl) 0 0; min-width: 0; }
@media (min-width: 1024px) { .sample { margin-top: 0; } }
.sample__cap { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
/* Карточка тянется до низа левой колонки; лишняя высота уходит в серую
   область со схемой (схема по центру), а не в пустоту под расшифровкой */
.report {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px oklch(21% 0.008 40 / 0.05), 0 28px 56px -28px oklch(21% 0.008 40 / 0.22);
  overflow: hidden;
}
.report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
.report__domain { min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.015em; }
.report__count {
  flex-shrink: 0;
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-deep);
  background: var(--color-accent-tint);
  border-radius: var(--radius-sm);
}
.report__shot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  container-type: inline-size;
  padding: var(--space-md);
  background: var(--color-paper-2);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 560px) { .report__shot { padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl); } }

/* Схема сайта: всё в em от ширины контейнера, масштабируется целиком.
   Серые плашки — содержимое без значения; в полный вид нарисованы только нарушения. */
.mock {
  font-family: var(--font-body);
  font-size: calc(100cqw / 40);
  line-height: 1.3;
  color: var(--color-mock-ink);
  background: var(--color-mock-bg);
  border: 0.08em solid var(--color-mock-line);
  border-radius: 0.5em;
  overflow: hidden;
  display: grid;
}
.mock__google { --fs: 0.78; }
.mock__check { --fs: 0.72; }
.mock__net { --fs: 0.74; }
.mock__cookie { --fs: 0.78; }
.sk { display: block; height: 0.6em; border-radius: 0.3em; background: var(--color-mock-skel); }
.sk--logo { width: 5.5em; height: 1.3em; background: var(--color-mock-skel-2); }
.sk--h { width: 16em; height: 1.35em; background: var(--color-mock-skel-2); }
.sk--short { width: 10.5em; }
.sk--p { width: 13em; margin-top: 0.5em; }
.sk--ft { width: 9em; height: 0.8em; margin-bottom: 0.3em; background: var(--color-mock-skel-2); }

.mock__head { display: flex; align-items: center; gap: 1.4em; padding: 0.9em 1.3em; }
.mock__nav { display: flex; gap: 1em; }
.mock__nav .sk { width: 2.8em; height: 0.5em; }
.mock__google {
  position: relative;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45em 0.8em;
  font-size: calc(var(--fs) * 1em);
  font-weight: 600;
  white-space: nowrap;
  background: var(--color-mock-bg);
  border: 0.1em solid var(--color-mock-line);
  border-radius: 0.35em;
}
.mock__g { font-weight: 800; color: var(--color-mock-brand); }
.mock__band { display: grid; gap: 0.5em; padding: 1.6em 1.4em 4.4em; background: var(--color-mock-band); }
.mock__body {
  display: grid;
  grid-template-columns: 19em minmax(0, 1fr);
  gap: 1.6em;
  padding: 0 1.4em 1.6em;
  margin-top: -3.1em;
}
.mock__form {
  display: grid;
  gap: 0.55em;
  padding: 1.1em;
  background: var(--color-mock-bg);
  border-radius: 0.5em;
  box-shadow: 0 0.2em 1.2em oklch(27% 0.02 250 / 0.1);
}
.mock__input { height: 2.1em; border: 0.1em solid var(--color-mock-line); border-radius: 0.35em; }
.mock__check {
  position: relative;
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: 0.5em;
  align-items: center;
  padding: 0.2em 0;
  font-size: calc(var(--fs) * 1em);
  line-height: 1.25;
}
.mock__box { position: relative; width: 1.1em; height: 1.1em; border-radius: 0.2em; background: var(--color-mock-brand); }
.mock__box::after {
  content: "";
  position: absolute;
  left: 0.36em;
  top: 0.14em;
  width: 0.3em;
  height: 0.58em;
  border: solid var(--color-mock-bg);
  border-width: 0 0.13em 0.13em 0;
  transform: rotate(45deg);
}
.mock__btn { width: 7em; height: 2.1em; border-radius: 0.35em; background: var(--color-mock-skel-2); }
.mock__net {
  position: relative;
  align-self: end;
  display: grid;
  gap: 0.25em;
  padding: 0.8em 0.9em;
  font-size: calc(var(--fs) * 1em);
  font-variant-numeric: tabular-nums;
  background: var(--color-mock-bg);
  border: 0.1em solid var(--color-mock-line);
  border-radius: 0.4em;
}
.mock__net-h { margin-bottom: 0.2em; font-weight: 700; color: var(--color-mock-muted); }
.mock__cookie {
  display: flex;
  align-items: center;
  gap: 0.8em;
  padding: 0.85em 1.3em;
  font-size: calc(var(--fs) * 1em);
  color: var(--color-mock-on-dark);
  background: var(--color-mock-dark);
}
.mock__cookie-t { margin-right: auto; }
/* Место, где должна быть кнопка «Отклонить», — бледный контур с подписью */
.mock__slot {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.5em 1.1em;
  font-weight: 600;
  color: var(--color-mock-muted);
  border: 0.1em dashed var(--color-mock-muted);
  border-radius: 0.35em;
}
.mock__ok { padding: 0.5em 1.1em; font-weight: 700; color: var(--color-mock-dark); background: var(--color-mock-on-dark); border-radius: 0.35em; }

/* На узкой ширине схема крупнее и в одну колонку, чтобы обведённый текст читался */
@container (max-width: 520px) {
  .mock { font-size: calc(100cqw / 28); }
  .mock__google, .mock__cookie { --fs: 0.9; }
  .mock__check, .mock__net { --fs: 0.92; }
  .mock__form { grid-template-columns: minmax(0, 1fr); }
  .mock__nav { display: none; }
  .sk--h { width: 14em; }
  .mock__body { grid-template-columns: minmax(0, 1fr); gap: 1.4em; }
  .mock__net { justify-self: start; }
}

/* Выноска: рамка вокруг нарушения и номер */
.hl {
  position: absolute;
  inset: -0.45em;
  border: 0.14em solid var(--color-accent);
  border-radius: 0.45em;
  pointer-events: none;
  transition: box-shadow var(--dur-md) var(--ease-out), opacity var(--dur-md) var(--ease-out);
}
.mock__google .hl, .mock__check .hl, .mock__net .hl { font-size: calc(1em / var(--fs)); }
.mock__slot .hl { inset: -0.35em; }
.hl b {
  position: absolute;
  top: -0.95em;
  left: -0.95em;
  width: 1.75em;
  height: 1.75em;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95em;
  color: var(--color-paper);
  background: var(--color-accent);
  border-radius: 50%;
}
/* У краёв схемы номер ставится сбоку, иначе рамка его обрежет */
.mock__google .hl b,
.mock__slot .hl b { top: 50%; left: -2.2em; transform: translateY(-50%); }

/* Связь расшифровки со схемой: выбранный пункт оставляет свою рамку, остальные гаснут */
.mock[data-active] .hl { opacity: 0.18; }
.mock[data-active="1"] .hl[data-n="1"],
.mock[data-active="2"] .hl[data-n="2"],
.mock[data-active="3"] .hl[data-n="3"],
.mock[data-active="4"] .hl[data-n="4"] { opacity: 1; box-shadow: 0 0 0 0.3em color-mix(in oklch, var(--color-accent) 22%, transparent); }

.findings {
  list-style: none;
  margin: 0;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  display: grid;
  gap: var(--space-2xs) var(--space-lg);
  counter-reset: finding;
}
@media (min-width: 640px) { .findings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.findings li {
  counter-increment: finding;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  padding: var(--space-xs);
  margin-inline: calc(var(--space-xs) * -1);
  font-size: var(--text-sm);
  line-height: 1.4;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.findings li:hover, .findings li:focus-visible { background: var(--color-paper-2); }
.findings li.is-active { background: var(--color-accent-tint); }
.findings li::before {
  content: counter(finding);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--color-paper);
  background: var(--color-accent);
  border-radius: 50%;
}

/* Одна сцена: выноски проставляются по очереди, когда отчёт виден.
   Заливка только backwards: после анимации прозрачность снова задаёт выбор пункта. */
@media (prefers-reduced-motion: no-preference) {
  .js .exhibit:not(.is-play) .hl { opacity: 0; }
  .js .exhibit.is-play .hl { animation: hl-in var(--dur-slow) var(--ease-out) backwards; animation-delay: calc(250ms + var(--n) * 420ms); }
  .js .exhibit:not(.is-play) .report__count { opacity: 0; }
  .js .exhibit.is-play .report__count { animation: fade-in var(--dur-md) var(--ease-out) backwards; animation-delay: calc(250ms + 4 * 420ms); }
}
@keyframes hl-in {
  from { opacity: 0; transform: scale(1.12); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Секции ---------- */

.section { padding-block: var(--space-section); }
.section--grey { background: var(--color-paper-2); }
.section + .section:not(.section--grey):not(.section--accent) { border-top: var(--rule-hair) solid var(--color-rule); }
.section--grey + .section, .section--accent + .section { border-top: 0; }
.section__h { margin-bottom: var(--space-xl); }

/* Диптих: заголовок слева, содержание справа */
.duo { display: grid; gap: var(--space-xl); }
/* Колонки не растягиваются под широкое содержимое (таблица cookie прокручивается внутри себя) */
.duo > * { min-width: 0; }
@media (min-width: 900px) {
  .duo { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
  .duo__head { position: sticky; top: var(--space-xl); }
}
.duo__head p { margin-top: var(--space-md); max-width: 30ch; }

/* Предписание: тёмная полоса, календарь слева, текст справа */
.section--accent { background: var(--color-band); color: var(--color-on-band); }
.section--accent p { color: var(--color-on-band-muted); }
.section--accent h2 { margin-bottom: var(--space-lg); color: var(--color-on-band); }
/* Длинная подпись кнопки на узком экране переносится, а не вылезает за край */
.section--accent .btn { margin-top: var(--space-md); white-space: normal; text-align: center; text-wrap: balance; }
.section--accent :focus-visible { outline-color: var(--color-on-band); } /* бордовая рамка фокуса на бордовом не видна */
.split { display: grid; gap: var(--space-2xl); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
  .split__proof { order: -1; }
}
.cal { margin: 0; max-width: 440px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; font-variant-numeric: tabular-nums; }
.cal__dow { text-align: center; font-size: var(--text-xs); color: var(--color-on-band-muted); padding-bottom: var(--space-2xs); }
/* Даты ставит main.js по московской дате; разметка без скриптов — запасной вариант (цифры 1–10, «вых»).
   Состояние читается не только цветом: рамка (рабочий день срока), заливка (выходной, праздник),
   две подписи («сегодня», «срок») и приглушённые дни до и после срока. Подписи — в углах клетки, число по центру. */
.cal__day {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-on-band);
  border: var(--rule-hair) solid var(--color-band-rule);
  border-radius: var(--radius-sm);
}
.cal__n { line-height: 1; }
.cal__m, .cal__tag {
  position: absolute;
  inset-inline: 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1;
  white-space: nowrap;
}
.cal__m { top: 4px; color: var(--color-on-band-muted); }
.cal__tag { bottom: 4px; }
.cal__day.is-off { border-color: transparent; background: var(--color-band-2); color: var(--color-on-band-muted); }
/* Сегодня: двойная белая рамка вместо тонкой. Идёт после .is-off, чтобы рамка осталась и у выходного */
.cal__day.is-today { border-color: var(--color-on-band); box-shadow: inset 0 0 0 1px var(--color-on-band); color: var(--color-on-band); }
.cal__day.is-last { background: var(--color-on-band); border-color: var(--color-on-band); color: var(--color-ink); }
.cal__day.is-last .cal__m { color: var(--color-muted); }
/* До сегодняшнего дня и после срока: без рамки, приглушены (число ≈ 3,9:1, выходной ≈ 3,6:1 на бордовом) */
.cal__day.is-past, .cal__day.is-after { border-color: transparent; opacity: 0.6; }
@media (max-width: 420px) {
  .cal__grid { gap: 4px; }
  .cal__day { font-size: var(--text-base); }
  .cal__m, .cal__tag { font-size: 0.5625rem; }
  .cal__m { top: 3px; }
  .cal__tag { bottom: 3px; }
}
/* 320–340px: клетка ≈ 37px, «сегодня» в 9px в неё не помещается */
@media (max-width: 340px) {
  .cal__day { font-size: var(--text-sm); }
  .cal__m, .cal__tag { font-size: 0.5rem; letter-spacing: -0.01em; }
  .cal__m { top: 2px; }
  .cal__tag { bottom: 2px; }
}
.cal figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-on-band-muted); max-width: 46ch; }

/* Реестр: требования и прейскурант в одной грамматике.
   Без строки подписей: требование ведёт, норма закона — тихой строкой под ним,
   описание справа. Колонки 4:7 совпадают с диптихами страницы. */
.ledger { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong) solid var(--color-rule-strong); }
.ledger__row {
  display: grid;
  gap: var(--space-xs) var(--space-3xl);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}
@media (min-width: 860px) {
  /* Первая колонка одной ширины в обеих таблицах: описания начинаются с одной вертикали */
  .ledger__row { --lead-w: calc((100% - var(--space-3xl)) * 4 / 11); grid-template-columns: var(--lead-w) minmax(0, 1fr); align-items: baseline; padding-block: var(--space-xl); }
  .ledger--prices .ledger__row { grid-template-columns: var(--lead-w) minmax(0, 1fr) auto; }
}
.ledger__lead { display: grid; gap: var(--space-2xs); margin: 0; }
.ledger__name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-md); letter-spacing: -0.015em; line-height: 1.3; }
.ledger__law { font-size: var(--text-sm); color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.ledger__what { margin: 0; color: var(--color-muted); max-width: 60ch; }
.ledger__sum {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
@media (min-width: 860px) { .ledger__sum { text-align: right; } }
@media (max-width: 859px) {
  .ledger--prices .ledger__row { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .ledger--prices .ledger__what { grid-column: 1 / -1; grid-row: 2; }
  .ledger--prices .ledger__sum { grid-column: 2; grid-row: 1; font-size: var(--text-lg); }
}
.ledger__what .chip { display: block; width: fit-content; }
.chip {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-deep);
  background: var(--color-accent-tint);
  border-radius: var(--radius-sm);
}

/* Как это работает: настоящая последовательность, поэтому номера */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 0 var(--space-xl);
}
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Шаг — сетка: в первой строке номер и (после проверки) пометка, ниже заголовок и текст на всю ширину */
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--rule-strong) solid var(--color-rule-strong);
}
.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.steps h3 { grid-column: 1 / -1; margin: var(--space-lg) 0 var(--space-xs); }
.steps p { grid-column: 1 / -1; color: var(--color-muted); max-width: 36ch; }
/* Пометки появляются после бесплатной проверки (main.js): первый шаг пройден, второй — следующий.
   Текстом, цвет только подкрепляет */
.steps__flag {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.3;
  border: var(--rule-hair) solid transparent;
  border-radius: var(--radius-sm);
}
.steps__flag[hidden] { display: none; }
.steps__flag--done { color: var(--color-ink); border-color: var(--color-neutral); }
.steps__flag--done::before {
  content: "";
  width: 5px;
  height: 9px;
  margin: -2px 2px 0 1px;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.steps__flag--next { color: var(--color-accent-deep); background: var(--color-accent-tint); border-color: color-mix(in oklch, var(--color-accent) 30%, transparent); }

/* Вопросы */
.faq { border-top: var(--rule-strong) solid var(--color-rule-strong); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: -0.015em;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--color-accent); }
.faq summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform var(--dur-md) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--space-lg); color: var(--color-muted); }
@media (prefers-reduced-motion: no-preference) {
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--dur-md) var(--ease-out), content-visibility var(--dur-md) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* Заявка */
.panel {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
}
@media (min-width: 560px) { .panel { padding: var(--space-xl); } }
.lf { margin-bottom: var(--space-md); }

.tick {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  line-height: 1.45;
  cursor: pointer;
}
.tick input {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-neutral);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tick input:hover { border-color: var(--color-ink); }
.tick input:checked { background: var(--color-ink); border-color: var(--color-ink); }
.tick input:checked::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid var(--color-paper);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.tick input[aria-invalid="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-tint); }
.panel .btn { margin-top: var(--space-md); }
.panel__status { margin: var(--space-sm) 0 0; font-size: var(--text-sm); font-weight: 600; }
.panel__status:empty { display: none; }
.panel__status.is-error { color: var(--color-accent); }
.panel__status.is-note { color: var(--color-muted); font-weight: 400; }
.panel.is-sent > :not(.lead-form__done) { display: none; }
.lead-form__done h2 { margin-bottom: var(--space-sm); }

.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Подвал: плотный колофон с реквизитами ---------- */

.footer {
  padding-block: var(--space-2xl) var(--space-3xl);
  font-size: var(--text-sm);
  color: var(--color-muted);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.footer__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); } }
.footer p { margin: 0 0 var(--space-xs); }
.footer__brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.02em; color: var(--color-ink); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer a { color: var(--color-muted); text-decoration: none; }
.footer a:hover { color: var(--color-accent); text-decoration: underline; text-decoration-color: currentColor; }
.linklike {
  padding: 0;
  font: inherit;
  color: var(--color-muted);
  background: none;
  border: 0;
  text-decoration: none;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.linklike:hover { color: var(--color-accent); text-decoration: underline; }

/* ---------- Документы: политика, согласие, cookie ----------
   Режим чтения. Тот же диптих, что у вопросов и заявки: слева содержание,
   справа текст узкой колонкой. Разделы документа — настоящая нумерация. */

.doc { padding-block: var(--space-xl) var(--space-section); }
@media (min-width: 1024px) { .doc { padding-top: var(--space-3xl); } }
.doc__head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.doc__head h1 { font-size: var(--text-2xl); }
.doc__meta { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.doc__draft {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-deep);
  background: var(--color-accent-tint);
  border-radius: var(--radius-sm);
}
.doc__toc { font-size: var(--text-sm); }
.doc__toc p { margin: 0 0 var(--space-sm); font-weight: 600; }
.doc__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.doc__toc a { color: var(--color-muted); text-decoration: none; }
.doc__toc a:hover { color: var(--color-accent); text-decoration: underline; }
@media (max-width: 899px) { .doc__toc { display: none; } }

.doc__body { max-width: 46rem; border-top: var(--rule-strong) solid var(--color-rule-strong); }
.doc__body section { padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); scroll-margin-top: var(--space-md); }
.doc__body h2 { margin-bottom: var(--space-md); font-size: var(--text-lg); letter-spacing: -0.015em; }
.doc__body p, .doc__body li { color: var(--color-ink); }
.doc__body ul, .doc__body ol { margin: 0 0 var(--space-md); padding-left: 1.25em; }
.doc__body li { margin-bottom: var(--space-2xs); max-width: 64ch; }
.doc__body li::marker { color: var(--color-subtle); }
.doc__law { color: var(--color-subtle); }
.doc__body .doc__h3 { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-base); letter-spacing: -0.005em; }
/* Цель обработки: данные, основание, срок — короткая карточка-реестр */
.doc__facts { display: grid; gap: var(--space-2xs) var(--space-lg); margin: 0 0 var(--space-lg); }
.doc__facts dt { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); }
.doc__facts dd { margin: 0 0 var(--space-xs); max-width: 64ch; }
@media (min-width: 560px) {
  .doc__facts { grid-template-columns: 9rem minmax(0, 1fr); align-items: baseline; }
  .doc__facts dd { margin: 0; }
}
.doc__facts + p { margin-top: var(--space-lg); }
.footer a[aria-current="page"] { color: var(--color-ink); }
.doc__table-wrap { overflow-x: auto; margin-bottom: var(--space-md); }
.doc__table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--text-sm); }
.doc__table th, .doc__table td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; text-align: left; vertical-align: top; border-bottom: var(--rule-hair) solid var(--color-rule); }
.doc__table th { font-weight: 600; }
.doc__body code { font-family: inherit; font-weight: 600; white-space: nowrap; }
.doc__body .btn { margin-top: var(--space-xs); }

/* ---------- Согласие на cookie ----------
   Полоса внизу экрана: тонкая линия сверху, как под шапкой, белое поле.
   «Принять» — основная кнопка, «Отклонить» — контурная той же ширины и высоты:
   отказ всегда виден и доступен одним нажатием. Требования равного веса кнопок
   в законе РФ нет (решение владельца 2026-09-30). */

.consent {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  padding-block: var(--space-md);
  background: var(--color-paper);
  border-top: var(--rule-hair) solid var(--color-rule);
  box-shadow: 0 -18px 40px -24px oklch(21% 0.008 40 / 0.25);
}
.consent[hidden] { display: none; }
.consent__row { display: grid; gap: var(--space-md); }
.consent__text { font-size: var(--text-sm); line-height: 1.5; }
.consent__text p { max-width: 72ch; }
.consent__state { margin-top: var(--space-2xs); font-weight: 600; }
.consent__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); }
.consent__actions .btn { min-width: 0; min-height: 46px; padding-block: var(--space-xs); }
@media (min-width: 860px) {
  .consent { padding-block: var(--space-lg); }
  .consent__row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xl); align-items: center; }
  .consent__actions { grid-template-columns: repeat(2, 9.5rem); }
}
/* Пока полоса открыта, низ страницы не прячется под ней */
.has-consent body { padding-bottom: var(--consent-h, 0px); }
@media (prefers-reduced-motion: no-preference) {
  .consent:not([hidden]) { animation: consent-in var(--dur-md) var(--ease-out); }
}
@keyframes consent-in { from { transform: translateY(100%); } to { transform: none; } }