/* Hallmark · shape: Workbench · genre: modern-minimal · theme: Cobalt, adjusted (deal 3/3, seed prompt-3feb·50fefcf5·2026-10-28·r0) · job: try · draw: manual (draw script failed on the theme header)
 * hero: Banner over a wide product panel · nav: floating bar · footer: mast with the legal documents and the operator line · imagery: the product built (a working checklist demo, a certificate check, a batch table) · signature: the checklist that assembles itself, first on its own, then as the visitor answers
 * axes: light/grotesk-sans/cool · posture: restrained, one cobalt band for the statement · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: P, a utility page argues little; the hero hands over a working answer instead of a promise, and the band carries one real, sourced fact */
/* Hallmark · theme adjusted on the user's request for a more current look: flat rounded buttons instead of keycaps, large radii and soft offset shadows instead of cut corners, Onest display because Familjen Grotesk has no Cyrillic */
/* Hallmark · no ASCII field: the genre refuses a code register as decoration when the product is not a developer tool */
/* Hallmark · waive 49b · footer links to legal documents wrap at 320px · legal document titles in the footer keep their full official names so a visitor finds the right policy */
/* Hallmark · dismissed F15 · the lookup report pairs a status card with a dense fact table and wants a tighter gap than the marketing splits */
/* Hallmark · dismissed 25 · the statement is one sentence set at the section size, not running prose */
/* tokens.css и base.css подключаются в страницах отдельными ссылками перед этим файлом, а не через @import:
   так у каждого файла своя версия ?v= и после выкладки браузер не держит старые (D-037) */

:root {
  --radius-card: 24px; --radius-tile: 20px; --radius-input: 12px; --radius-seg: 9px;
  --shadow-lift: 0 1px 2px oklch(21% 0.028 262 / 0.06), 0 12px 32px -8px oklch(30% 0.06 258 / 0.18);
  --shadow-seg: 0 1px 2px oklch(21% 0.028 262 / 0.12);
  --color-ok-wash: oklch(95.5% 0.04 150); --color-ok-ink: oklch(42% 0.11 150);
  --color-warn-wash: oklch(95.5% 0.05 85); --color-warn-ink: oklch(47% 0.11 70);
  --color-bad-wash: oklch(95.5% 0.03 27); --color-bad-ink: oklch(47% 0.17 27);
  --color-on-graphite-ok: oklch(80% 0.12 150); --color-on-graphite-warn: oklch(84% 0.12 85); --color-on-graphite-bad: oklch(76% 0.13 27);
  --nav-h: 64px;
}

/* ---------- buttons and inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid transparent; border-radius: var(--radius-input);
  font: 600 var(--text-md)/1 var(--font-display); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 6px 16px -6px var(--color-accent); }
.btn--primary:hover { background: var(--color-accent-deep); }
.btn--ghost { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-rule-2); }
.btn--ghost:hover { border-color: var(--color-ink-2); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.field {
  width: 100%; min-height: 52px; padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input);
  background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg);
  transition: border-color var(--dur-short) var(--ease-out);
}
.field:hover { border-color: var(--color-ink-2); }
.field:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; border-color: var(--color-focus); }

.segmented { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-3); border-radius: var(--radius-input); width: fit-content; max-width: 100%; }
.segmented__item {
  min-height: 44px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-seg);
  background: transparent; color: var(--color-ink-2); font: 600 var(--text-sm)/1 var(--font-display); cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.segmented__item:hover { color: var(--color-ink); }
.segmented__item:active { transform: scale(0.97); }
.segmented__item:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.segmented__item:disabled { color: var(--color-muted); cursor: not-allowed; }
.segmented__item[aria-checked="true"], .segmented__item[aria-selected="true"] { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-seg); }

.toggle { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; color: var(--color-ink-2); min-height: 44px; border-radius: var(--radius-input); }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--color-rule-2); transition: background-color var(--dur-short) var(--ease-out); }
.toggle__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-paper); box-shadow: var(--shadow-seg); transition: transform var(--dur-short) var(--ease-out); }
.toggle input:checked + .toggle__track { background: var(--color-accent); }
.toggle input:checked + .toggle__track::after { transform: translateX(18px); }
.toggle:hover .toggle__track { background: var(--color-muted); }
.toggle:hover input:checked + .toggle__track { background: var(--color-accent-deep); }
.toggle:focus-visible, .toggle:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }

.mono { font-family: var(--font-outlier); font-size: var(--text-md); }
a:not(.btn):not(.wordmark) { text-decoration-color: var(--color-rule-2); }
a:not(.btn):not(.wordmark):hover { text-decoration-color: var(--color-accent); }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding: var(--space-sm) var(--gutter) 0; }
.nav__bar {
  max-width: calc(var(--container) - 2 * var(--gutter)); margin-inline: auto; min-height: var(--nav-h);
  display: flex; align-items: center; gap: var(--space-lg); padding: 0 var(--space-xs) 0 var(--space-lg);
  background: var(--color-paper); border-radius: var(--radius-tile); box-shadow: var(--shadow-lift);
}
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); text-decoration: none; font: 700 var(--text-lg)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.wordmark__mark { width: 22px; height: 22px; background: var(--color-accent); border-radius: 7px; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-seg); }
.nav__links { display: flex; gap: var(--space-2xs); margin-inline-start: auto; }
.nav__links a { padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-seg); color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.nav__links a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- hero ---------- */
/* если hero влезает в экран, он занимает весь первый экран и стоит по центру; остальное после прокрутки */
.hero { padding-block: var(--space-2xl); min-height: calc(100svh - var(--nav-h) - var(--space-sm)); display: flex; flex-direction: column; justify-content: center; }
.hero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.hero h1 { max-width: 11ch; font-size: var(--text-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.04em; }
.hero__side { display: grid; gap: var(--space-lg); padding-bottom: var(--space-xs); }
.hero .lead { color: var(--color-ink-2); max-width: 32ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

.demo {
  margin-top: var(--space-2xl); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-paper); border-radius: var(--radius-card); box-shadow: var(--shadow-lift); overflow: hidden;
}
.demo__input { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-xl); background: var(--color-paper-2); border-right: var(--rule-hair) solid var(--color-rule); }
.demo__result { padding: var(--space-xl); display: grid; gap: var(--space-sm); align-content: start; }
.demo__label { color: var(--color-muted); font-size: var(--text-sm); }
.demo__questions { display: grid; gap: var(--space-2xs); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); align-items: baseline; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); }
.check__what { font: 600 var(--text-md)/1.3 var(--font-display); }
.check__doc { color: var(--color-ink-2); font-size: var(--text-sm); }
.check[data-added] { background: var(--color-accent-wash); }
.check[data-added] .check__what { color: var(--color-accent-deep); }
.check.is-in { animation: row-in var(--dur-long) var(--ease-out) both; }
@keyframes row-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.demo__foot { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-xs); }

/* ---------- certificate ---------- */
.cert { padding-block: var(--section-gap) var(--section-gap-s); }
.cert__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.cert__text { display: grid; gap: var(--space-lg); }
.cert__text .lead { color: var(--color-ink-2); }
.cert__card {
  padding: var(--space-xl); display: grid; gap: var(--space-xs); border-radius: var(--radius-card);
  background: var(--color-ok-wash); transition: background-color var(--dur-long) var(--ease-out);
}
.cert__card[data-tone="warn"] { background: var(--color-warn-wash); }
.cert__card[data-tone="bad"] { background: var(--color-bad-wash); }
.cert__caption { color: var(--color-ink-2); font-size: var(--text-sm); }
.cert__number { color: var(--color-ink); }
/* Статус подстраивается под ширину карточки: длинное слово («Недействителен») уменьшается, а не рвётся по буквам. */
.cert__card { container-type: inline-size; }
.cert__status { margin-block: var(--space-md) var(--space-lg); font: 700 clamp(1.75rem, 11cqi, var(--text-display-s))/1.05 var(--font-display); letter-spacing: -0.04em; color: var(--color-ok-ink); overflow-wrap: normal; hyphens: manual; min-width: 0; text-wrap: balance; }
.cert__card[data-tone="warn"] .cert__status { color: var(--color-warn-ink); }
.cert__card[data-tone="bad"] .cert__status { color: var(--color-bad-ink); }
.cert__status.is-in { animation: row-in var(--dur-long) var(--ease-out) both; }
.cert__facts { margin: 0; display: grid; background: var(--color-paper); border-radius: var(--radius-tile); padding: var(--space-2xs) var(--space-lg); }
.cert__facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.cert__facts > div:last-child { border-bottom: 0; }
.cert__facts dt { color: var(--color-muted); font-size: var(--text-sm); }
.cert__facts dd { margin: 0; }

/* ---------- statement band ---------- */
.statement { padding-block: var(--section-gap-s); background: var(--color-accent); color: var(--color-accent-ink); }
.statement__text { font: 700 var(--text-section)/1.06 var(--font-display); letter-spacing: -0.035em; max-width: 24ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.statement__source { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-accent-ink); }
.statement__source a { color: inherit; text-decoration-color: currentColor; }
.statement__source a:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 3px; }

/* ---------- bento ---------- */
.parts { padding-block: var(--section-gap-l) var(--section-gap); }
.parts h2 { margin-bottom: var(--space-2xl); }
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.tile { display: grid; gap: var(--space-sm); align-content: start; min-height: 240px; padding: var(--space-xl); border-radius: var(--radius-tile); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.tile p { color: var(--color-ink-2); }
.tile--lead { grid-column: span 2; background: var(--color-paper); box-shadow: var(--shadow-lift); }
.tile__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-2xs); }
.tile__list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-accent-wash); }
.tile__list li span:first-child { font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-accent-deep); }
.tile__list li span:last-child { color: var(--color-ink-2); }
.tile__code { margin-top: auto; padding-top: var(--space-lg); font-size: var(--text-xl); color: var(--color-ink); }

/* ---------- brokers ---------- */
.brokers { padding-block: var(--section-gap-s); background: var(--color-graphite); color: var(--color-graphite-ink); }
.brokers__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.brokers h2 { color: var(--color-graphite-ink); max-width: 18ch; }
.brokers .lead { margin-top: var(--space-lg); color: var(--color-graphite-muted); max-width: 32ch; }
.batch { margin: 0; padding: var(--space-lg) var(--space-xl); border-radius: var(--radius-card); background: var(--color-graphite-2); border: var(--rule-hair) solid var(--color-graphite-glyph-1); overflow-x: auto; }
.batch__table { width: 100%; border-collapse: collapse; }
.batch__table th { text-align: left; font: 600 var(--text-sm)/1.3 var(--font-display); color: var(--color-graphite-muted); padding: 0 var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-graphite-glyph-2); }
.batch__table td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-graphite-glyph-1); vertical-align: middle; }
.batch__table td.mono { color: var(--color-graphite-ink); }
.batch__table tr:last-child td { border-bottom: 0; }
.status { display: inline-block; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font: 600 var(--text-sm)/1.3 var(--font-display); white-space: nowrap; background: var(--color-graphite-glyph-1); }
.status[data-tone="ok"] { color: var(--color-on-graphite-ok); }
.status[data-tone="warn"] { color: var(--color-on-graphite-warn); }
.status[data-tone="bad"] { color: var(--color-on-graphite-bad); }

/* ---------- plans ---------- */
.prices { padding-block: var(--section-gap) var(--section-gap-l); }
.prices h2 { margin-bottom: var(--space-2xl); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.plan { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.plan__price { font: 700 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.plan__price span { display: block; margin-top: var(--space-xs); font: 400 var(--text-md)/1.3 var(--font-body); letter-spacing: 0; color: var(--color-muted); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); color: var(--color-ink-2); align-content: start; }
.plan__list li { padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
.plan .btn { width: 100%; }
.plan--lead { background: var(--color-graphite); color: var(--color-graphite-ink); border-color: var(--color-graphite); box-shadow: var(--shadow-lift); }
.plan--lead h3 { color: var(--color-graphite-ink); }
.plan--lead .plan__price span, .plan--lead .plan__list { color: var(--color-graphite-muted); }
.plan--lead .plan__list li { border-top-color: var(--color-graphite-glyph-2); }
.prices__terms { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); max-width: 70ch; }

/* ---------- footer ---------- */
.footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__mast { font: 700 var(--text-display)/0.95 var(--font-display); letter-spacing: -0.045em; overflow-wrap: break-word; min-width: 0; max-width: 12ch; }
.footer__grid { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
.footer__col { display: grid; gap: var(--space-sm); align-content: start; }
.footer__col h2 { font: 600 var(--text-md)/1.3 var(--font-display); letter-spacing: 0; max-width: none; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer__col a { color: var(--color-ink-2); }
.footer__col a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.footer__col p { color: var(--color-ink-2); }
.footer__legal { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); display: grid; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- program band ---------- */
.footer:has(.partners) { padding-bottom: 0; }
.partners { margin-top: var(--space-2xl); padding-block: var(--space-xl); background: var(--color-graphite); color: var(--color-graphite-muted); }
.partners__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.partners__text { font-size: var(--text-sm); max-width: 40ch; }
.partners__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-xl) var(--space-2xl); }
.partners__logos img { height: 52px; width: auto; }

/* ---------- document lookup ---------- */
.lookup { padding-block: var(--space-2xl) var(--section-gap); }
.lookup__head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.lookup__head h1 { font-size: var(--text-display-s); max-width: 16ch; }
.lookup__head .lead { color: var(--color-ink-2); }
.lookup__form { display: grid; gap: var(--space-sm); max-width: 880px; }
.lookup__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); }
.lookup__hint { color: var(--color-muted); font-size: var(--text-sm); }
.lookup__out { margin-top: var(--space-2xl); }
.lookup__msg { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink-2); max-width: 880px; }
.lookup__msg--error { background: var(--color-bad-wash); color: var(--color-bad-ink); }
.lookup__msg--empty { background: var(--color-warn-wash); color: var(--color-warn-ink); }
.report { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl); align-items: start; animation: row-in var(--dur-long) var(--ease-out) both; }
.report__status { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
.report__since { color: var(--color-ink-2); margin-top: calc(-1 * var(--space-md)); }
.flags { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.flags li { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper); }
.flags li[data-tone="bad"] { color: var(--color-bad-ink); }
.flags li[data-tone="warn"] { color: var(--color-warn-ink); }
.flags li[data-tone="info"] { color: var(--color-ink-2); }
.report__actions { margin-top: var(--space-lg); display: grid; gap: var(--space-xs); justify-items: start; }
.report__note { color: var(--color-ink-2); font-size: var(--text-sm); }
.report__body { display: grid; gap: var(--space-xl); }
.report__facts { border: var(--rule-hair) solid var(--color-rule); }
.report__facts dd { overflow-wrap: anywhere; }
.report__protocols h2 { font-size: var(--text-xl); margin-bottom: var(--space-md); }
.protocols { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.protocols li { display: grid; gap: var(--space-2xs); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-paper-2); }
.protocols__meta { color: var(--color-ink-2); font-size: var(--text-sm); }
.report__source { color: var(--color-muted); font-size: var(--text-sm); }
.nav__links a[aria-current="page"] { background: var(--color-paper-2); color: var(--color-ink); }

/* ---------- document picker ---------- */
.pick { margin-top: 0; }
.pick__side { gap: var(--space-lg); }
.pick__step, .pick__chosen { display: grid; gap: var(--space-sm); align-content: start; }
.pick__groups { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.pick__group {
  width: 100%; display: grid; gap: var(--space-3xs); justify-items: start; padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-input); background: var(--color-paper);
  color: var(--color-ink); text-align: left; cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.pick__group:hover { border-color: var(--color-accent); box-shadow: var(--shadow-seg); }
.pick__group:active { background: var(--color-accent-wash); }
.pick__group:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pick__group-name { font: 600 var(--text-md)/1.3 var(--font-display); }
.pick__codes { color: var(--color-ink-2); font-size: var(--text-sm); }
.pick__note, .pick__empty { color: var(--color-ink-2); }
/* пока товар не выбран, каталог занимает всю ширину */
.pick[data-mode="browse"] { grid-template-columns: minmax(0, 1fr); }
.pick[data-mode="browse"] .pick__side { border-right: 0; padding: var(--space-xl); }
.pick[data-mode="browse"] .pick__step { gap: var(--space-md); }
.pick[data-mode="browse"] .field { max-width: 560px; }
.pick__catalog, .pick__search { display: grid; gap: var(--space-md); align-content: start; }
.pick__search .btn { justify-self: start; }
.pick__path { color: var(--color-ink-2); font-size: var(--text-sm); }

.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3xs) var(--space-2xs); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-muted); }
.crumbs li + li::before { content: "›"; color: var(--color-muted); }
.crumbs button { min-height: 32px; padding: 0 var(--space-xs); margin-inline: calc(-1 * var(--space-xs)); border: 0; border-radius: var(--radius-seg); background: transparent; color: var(--color-accent-deep); font: inherit; font-size: var(--text-sm); cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 3px; }
.crumbs button:hover { text-decoration-color: var(--color-accent); background: var(--color-paper); }
.crumbs button:active { background: var(--color-paper-3); }
.crumbs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.crumbs [aria-current] { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }

.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-sm); }
.tile-btn {
  width: 100%; height: 100%; min-height: 120px; display: grid; align-content: start; gap: var(--space-2xs); justify-items: start;
  padding: var(--space-md) var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-tile);
  background: var(--color-paper); color: var(--color-ink); text-align: left; cursor: pointer;
  transition: border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.tile-btn:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lift); }
.tile-btn:active { transform: scale(0.99); }
.tile-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tile-btn__name { font: 600 var(--text-lg)/1.25 var(--font-display); max-width: 100%; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tile-btn__desc { color: var(--color-ink-2); font-size: var(--text-sm); }
.tile-btn__count { margin-top: auto; padding-top: var(--space-xs); color: var(--color-accent-deep); font-size: var(--text-sm); font-weight: 600; }
.pick[data-mode="browse"] .pick__groups { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); grid-auto-rows: 1fr; gap: var(--space-sm); }

.pick__chosen { padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.pick__chosen .btn { justify-self: start; }
/* без вопросов (гость или товар без уточнений) линия под товаром ни к чему не ведёт */
.pick__chosen:has(+ .pick__questions:is([hidden], :empty)) { padding-bottom: 0; border-bottom: 0; }
.pick__chosen-name { font: 600 var(--text-lg)/1.25 var(--font-display); }
.pick__questions { display: grid; gap: var(--space-md); }
.pick__q { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-xs); min-width: 0; }
.pick__q-text { padding: 0; font-weight: 600; color: var(--color-ink); }
.pick__q-help { color: var(--color-ink-2); font-size: var(--text-sm); }
.pick__q .segmented__item { display: inline-flex; align-items: center; min-width: 72px; justify-content: center; }
.pick__q .segmented__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick__q .segmented__item:has(input:checked) { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-seg); }
.pick__q .segmented__item:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pick__result, .pick__body { gap: var(--space-lg); }
.pick__body { display: grid; }
.pick__count { font: 700 var(--text-xl)/1.2 var(--font-display); }
.pick__kind { display: grid; gap: var(--space-xs); }
.pick__kind h3 { font-size: var(--text-md); color: var(--color-ink-2); font-weight: 600; max-width: none; }
.pick__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-md); }
.pick__item-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); align-items: baseline; }
.pick__req { font-weight: 600; color: var(--color-ink); }
.pick__meta, .pick__expl { color: var(--color-ink-2); }
.pick__basis { color: var(--color-muted); font-size: var(--text-sm); }
.pick__badge { justify-self: start; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-seg); background: var(--color-warn-wash); color: var(--color-warn-ink); font-size: var(--text-sm); font-weight: 600; }
.pick__preview { margin-bottom: var(--space-lg); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-warn-wash); color: var(--color-warn-ink); max-width: 880px; }
.pick__foot { display: grid; gap: var(--space-sm); justify-items: start; padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }

/* ---------- legal pages ---------- */
.doc { padding-block: var(--space-2xl) var(--section-gap); }
.doc__body { max-width: 72ch; display: grid; gap: var(--space-md); }
.doc__body h1 { font-size: var(--text-display-s); max-width: 18ch; }
.doc__body h2 { font-size: var(--text-xl); margin-top: var(--space-lg); max-width: none; }
.doc__note { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-warn-wash); color: var(--color-warn-ink); }
.doc__body ul { margin: 0; padding-left: var(--space-lg); display: grid; gap: var(--space-2xs); }

/* ---------- one reveal, only with script ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .check.is-in, .cert__status.is-in { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .btn:active, .segmented__item:active { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .nav__links { display: none; } /* на узком экране ссылки открываются кнопкой «Меню», см. блок ниже */
  .nav__bar { justify-content: space-between; }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__head, .demo, .cert__grid, .brokers__grid, .footer__grid, .partners__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .partners__logos { justify-content: flex-start; }
  .report { grid-template-columns: minmax(0, 1fr); }
  .report__status { position: static; }
  .demo { gap: 0; }
  .demo__input { border-right: 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .bento, .plans { grid-template-columns: minmax(0, 1fr); }
  .tile--lead { grid-column: auto; }
  .tile { min-height: 0; }
}
@media (max-width: 40rem) {
  .nav { padding-inline: var(--space-xs); }
  .nav__bar { padding-left: var(--space-md); }
  .wordmark { font-size: var(--text-md); }
  .demo__input, .demo__result, .cert__card, .tile, .plan { padding: var(--space-lg); }
  .check, .tile__list li, .cert__facts > div, .pick__item-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .pick__foot .btn { width: 100%; }
  .hero__actions .btn { width: 100%; }
  .batch { padding: var(--space-md) var(--space-lg); }
  .batch__table thead { display: none; }
  .batch__table tr { display: grid; gap: var(--space-xs); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-graphite-glyph-1); }
  .batch__table td { padding: 0; border: 0; }
  .batch__table td.mono { overflow-wrap: anywhere; }
}
@media (max-width: 40rem) { .partners__logos img { height: 40px; } .lookup__row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 22rem) { .wordmark__name { display: none; } }
.cert__cta { justify-self: start; }
.nowrap { white-space: nowrap; }
.pick__jump { display: none; }
@media (max-width: 60rem) { .pick__jump:not([hidden]) { display: inline-flex; width: 100%; } }
.pick__result { scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }
@media (max-width: 40rem) {
  .pick[data-mode="browse"] .pick__side { padding: var(--space-lg); }
  .tile-btn { min-height: 0; padding: var(--space-md); }
  .tile-btn__count { padding-top: 0; }
}

/* ---------- picker: free summary, glossary hints, locked plan ---------- */
.pick__summary { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-input); background: var(--color-accent-wash); }
.pick__summary h3, .pick__locked h3 { font-size: var(--text-lg); max-width: none; }
.pick__summary p { color: var(--color-ink); line-height: 1.55; }
.term {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px;
  border-radius: 3px;
}
.term:hover { color: var(--color-accent-deep); }
.term:active { background: var(--color-accent-wash); }
.term:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.term[aria-expanded="true"] { color: var(--color-accent-deep); background: var(--color-accent-wash); }
.term-pop {
  position: absolute; z-index: var(--z-dropdown); display: grid; gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-lift); color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.5;
}
.term-pop__title { font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }
.pick__glossary { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-lg); } /* как общий отступ до линии снизу (gap .pick__body) */
.pick__glossary summary { cursor: pointer; font-weight: 600; color: var(--color-ink); min-height: 44px; display: flex; align-items: center; border-radius: var(--radius-seg); }
.pick__glossary summary:hover { color: var(--color-accent-deep); }
.pick__glossary summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.pick__glossary dl { margin: var(--space-sm) 0 0; display: grid; gap: var(--space-2xs) var(--space-md); }
.pick__glossary dt { font-weight: 600; color: var(--color-ink); margin-top: var(--space-xs); }
.pick__glossary dd { margin: 0; color: var(--color-ink-2); }
.pick__locked { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); border-radius: var(--radius-input); border: 2px dashed var(--color-rule-2); background: var(--color-paper); }
.pick__locked-lead { color: var(--color-ink-2); }
.pick__locked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); width: 100%; }
.pick__locked-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); font-weight: 600; color: var(--color-ink); }
.pick__locked-kind { color: var(--color-muted); font-weight: 400; font-size: var(--text-sm); }
/* замок рисуем рамкой и дужкой, без иконочного шрифта */
.pick__lock { position: relative; width: 12px; height: 10px; margin-top: 6px; border-radius: 2px; background: var(--color-muted); }
.pick__lock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 8px; height: 8px; border: 2px solid var(--color-muted); border-bottom: 0; border-radius: 5px 5px 0 0; box-sizing: border-box; }
.pick__badge--paid { background: var(--color-accent-wash); color: var(--color-accent-deep); }
@media (max-width: 40rem) {
  .pick__summary, .pick__locked { padding: var(--space-md); }
  .pick__locked .btn { width: 100%; }
  .pick__locked-list li { grid-template-columns: auto minmax(0, 1fr); }
  .pick__locked-kind { grid-column: 2; }
}
/* колонка результата не должна расти шире экрана из-за длинной кнопки */
.pick__result, .pick__body { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.pick__locked .btn, .pick__foot .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: var(--space-sm); }
/* display: flex у summary убирает стандартный треугольник: рисуем свой знак раскрытия */
.pick__glossary summary { list-style: none; justify-content: space-between; gap: var(--space-sm); }
.pick__glossary summary::-webkit-details-marker { display: none; }
.pick__glossary summary::after { content: "+"; font: 400 var(--text-xl)/1 var(--font-body); color: var(--color-accent-deep); }
.pick__glossary[open] summary::after { content: "−"; }
/* карточки товаров в ряду одной высоты, пометка «Не проверено» всегда внизу */
.pick__groups > li { display: flex; }
.pick__group { display: flex; flex-direction: column; align-items: flex-start; height: 100%; }
.pick__group > .pick__badge { margin-top: auto; } /* отступ сверху даёт gap кнопки */
@media (max-width: 40rem) { .pick[data-mode="browse"] .pick__groups { grid-auto-rows: auto; } }
/* плитки разделов: одной высоты, число товаров и пометка внизу */
.tiles { grid-auto-rows: 1fr; }
.tile-btn { display: flex; flex-direction: column; align-items: flex-start; }
.tile-btn__foot { margin-top: auto; padding-top: var(--space-sm); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); }
.tile-btn__foot .tile-btn__count { margin-top: 0; padding-top: 0; }
@media (max-width: 40rem) { .tiles { grid-auto-rows: auto; } .tile-btn__foot { padding-top: var(--space-xs); } }
.tiles > li { display: flex; }

/* ---------- кабинет клиента: вход, регистрация, кабинет, цены, помощь ---------- */
.btn--danger { background: var(--color-paper); color: var(--color-bad-ink); border-color: var(--color-bad-ink); box-shadow: none; }
.btn--danger:hover { background: var(--color-bad-wash); }
.btn--danger:active { background: var(--color-bad-wash); }

/* формы входа и регистрации компактнее остального сайта: поля ниже, заголовок меньше */
/* форма по центру первого экрана, подвал только после прокрутки */
.auth { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; padding-block: var(--space-2xl); }
.auth__card { max-width: 460px; margin-inline: auto; display: grid; gap: var(--space-sm); padding: var(--space-lg) var(--space-xl) var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-lift); }
.auth__card--wide { max-width: 560px; }
.auth__card h1 { font-size: var(--text-3xl); }
.auth__card .field { min-height: 44px; font-size: var(--text-md); }
.auth__lead { color: var(--color-ink-2); }
.auth__field { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; border: 0; min-width: 0; }
.auth__optional { color: var(--color-muted); font-weight: 400; }
.auth__hint { color: var(--color-muted); font-size: var(--text-sm); }
.auth__alt { color: var(--color-ink-2); }
.auth__msg { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-bad-wash); color: var(--color-bad-ink); }
.auth__msg[data-tone="ok"] { background: var(--color-ok-wash); color: var(--color-ok-ink); }
.auth__msg ul { margin: var(--space-2xs) 0 0; padding-left: var(--space-lg); }
.auth__msg .btn { display: flex; margin-top: var(--space-sm); }.auth__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm); align-items: start; color: var(--color-ink-2); cursor: pointer; }
.auth__check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-accent); }
.auth__check input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.auth__card > .btn { width: 100%; }
/* «Кто вы»: три варианта поровну в один ряд, без переноса одной кнопки на вторую строку */
.auth__segment .segmented, .acct__form .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; }
.auth__segment .segmented__item, .acct__form .segmented__item { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-xs); }
.auth__segment .segmented__item input, .acct__form .segmented__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.auth__segment .segmented__item:has(input:checked), .acct__form .segmented__item:has(input:checked) { background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-seg); }
.auth__segment .segmented__item:has(input:focus-visible), .acct__form .segmented__item:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.acct { padding-block: var(--space-2xl) var(--section-gap); }
.acct__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-md); margin-bottom: var(--space-xl); }
.acct__head h1 { font-size: var(--text-display-s); max-width: none; }
.acct__head .lead { color: var(--color-ink-2); }
.acct__head-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.acct__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-xl); }
.acct__stat { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-lg); border-radius: var(--radius-tile); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.acct__stat-value { font: 700 var(--text-xl)/1.2 var(--font-display); }
.acct__section { display: grid; gap: var(--space-md); padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.acct__section h2 { font-size: var(--text-xl); max-width: none; }
.acct__section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-sm); }
.acct__note { color: var(--color-ink-2); max-width: 72ch; }
.acct__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.acct__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-md); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.acct__row-main { display: grid; gap: var(--space-3xs); min-width: 0; }
.acct__row-title { font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.acct__row-meta { color: var(--color-muted); font-size: var(--text-sm); }
.acct__empty { padding: var(--space-md); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink-2); }
.acct__chip { padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-seg); font-size: var(--text-sm); font-weight: 600; background: var(--color-ok-wash); color: var(--color-ok-ink); white-space: nowrap; }
.acct__chip[data-tone="warn"] { background: var(--color-warn-wash); color: var(--color-warn-ink); }
.acct__chip[data-tone="bad"] { background: var(--color-bad-wash); color: var(--color-bad-ink); }
.acct__add { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: var(--space-sm); }
.acct__add .field { font-size: var(--text-md); }
.acct__forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: stretch; }
.acct__form { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-tile); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.acct__form h3 { font-size: var(--text-lg); max-width: none; }
.acct__form .btn { justify-self: start; }
/* карточки одной высоты, кнопка прижата к низу: у соседних карточек кнопки на одной линии */
.acct__form { display: flex; flex-direction: column; }
.acct__form > .btn { margin-top: auto; align-self: flex-start; }
/* у legend свой отступ браузера: выравниваем подпись «Кто вы» с остальными подписями полей */
.auth__field > legend { padding: 0; margin-bottom: var(--space-2xs); }
.acct__form .field { font-size: var(--text-md); }
.acct__danger { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: start; }
.acct__delete summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--space-md); border-radius: var(--radius-input); color: var(--color-bad-ink); font-weight: 600; }
.acct__delete summary::-webkit-details-marker { display: none; }
.acct__delete summary:hover { background: var(--color-bad-wash); }
.acct__delete summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.acct__delete form { display: grid; gap: var(--space-sm); max-width: 420px; margin-top: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-tile); border: var(--rule-hair) solid var(--color-bad-ink); background: var(--color-paper); }
.acct__delete .btn { justify-self: start; }

.pricing__plans { margin-bottom: var(--space-xl); }
.pricing__plans--two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.plan h2 { font-size: var(--text-xl); max-width: none; }
.pricing__sub { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.pricing__extra { display: grid; gap: var(--space-xs); max-width: 72ch; margin-bottom: var(--space-lg); }
.pricing__extra h2 { font-size: var(--text-xl); }
.pricing__extra p { color: var(--color-ink-2); }
.pricing__note { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-warn-wash); color: var(--color-warn-ink); max-width: 880px; margin-bottom: var(--space-md); }

.faq { display: grid; gap: var(--space-xs); max-width: 880px; }
.faq__item { border-radius: var(--radius-input); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 56px; padding: var(--space-sm) var(--space-lg); font: 600 var(--text-md)/1.3 var(--font-display); border-radius: var(--radius-input); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font: 400 var(--text-xl)/1 var(--font-body); color: var(--color-accent-deep); }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { color: var(--color-accent-deep); }
.faq__item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq__item p { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-ink-2); max-width: 72ch; }

/* вход с аккаунтом в подборе и проверке сертификата */
.gate { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); border-radius: var(--radius-input); background: var(--color-accent-wash); }
.gate h3 { font-size: var(--text-lg); max-width: none; }
.gate p { color: var(--color-ink-2); }
.gate__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pick__result-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-md); }
.pick__save { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: center; justify-content: flex-end; }
.pick__save-msg { color: var(--color-ok-ink); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .acct__summary, .acct__forms, .pricing__plans--two { grid-template-columns: minmax(0, 1fr); }
  .acct__add { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .auth__card { padding: var(--space-lg); }
  .acct__row { grid-template-columns: minmax(0, 1fr) auto; }
  .acct__row .btn { grid-column: 1 / -1; justify-self: start; }
  .nav__cta { display: none; }
}
.doc__meta { color: var(--color-ink-2); font-size: var(--text-sm); }
.doc__num { font-variant-numeric: tabular-nums; color: var(--color-muted); margin-right: var(--space-2xs); }
.doc__body p { max-width: 72ch; }

/* ---------- шапка: кнопка «Меню» на телефоне и планшете ---------- */
.nav__menu { display: none; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border: 0; border-radius: var(--radius-seg); background: transparent; color: var(--color-ink); font: 600 var(--text-sm)/1 var(--font-display); cursor: pointer; }
.nav__menu:hover { background: var(--color-paper-2); }
.nav__menu:active { background: var(--color-paper-3); }
.nav__menu:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__menu-icon, .nav__menu-icon::before, .nav__menu-icon::after, .nav__menu-icon span { display: block; width: 16px; height: 2px; border-radius: 1px; background: var(--color-ink); }
.nav__menu-icon { position: relative; height: 12px; background: transparent; }
.nav__menu-icon::before, .nav__menu-icon::after, .nav__menu-icon span { position: absolute; left: 0; content: ""; }
.nav__menu-icon::before { top: 0; }
.nav__menu-icon span { top: 5px; }
.nav__menu-icon::after { bottom: 0; }
.nav__mobile-only { display: none; }
@media (max-width: 60rem) {
  .nav__bar { position: relative; gap: var(--space-xs); }
  .nav__menu { display: inline-flex; margin-inline-start: auto; }
  .nav.is-open .nav__links {
    display: grid; position: absolute; top: calc(100% + var(--space-xs)); left: 0; right: 0; z-index: var(--z-dropdown);
    gap: var(--space-3xs); padding: var(--space-xs); border-radius: var(--radius-tile); background: var(--color-paper); box-shadow: var(--shadow-lift);
  }
  .nav.is-open .nav__links a { padding: var(--space-sm) var(--space-md); font-size: var(--text-md); }
  .nav.is-open .nav__mobile-only { display: block; }
}
@media (max-width: 40rem) {
  .wordmark { font-size: var(--text-sm); gap: var(--space-xs); }
  .wordmark__mark { width: 18px; height: 18px; border-radius: 6px; }
  .nav__menu { padding: 0 var(--space-xs); }
}
@media (max-width: 26rem) { .nav__menu { font-size: 0; gap: 0; } .nav__menu-icon { margin: 0 var(--space-2xs); } }
.crumbs li { white-space: nowrap; }
.hero__note { color: var(--color-muted); font-size: var(--text-sm); margin-top: calc(-1 * var(--space-sm)); }

/* ---------- подбор: доработки по разбору UX ---------- */
.pick__guest { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink-2); }
.pick__unanswered { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-warn-wash); color: var(--color-warn-ink); }
.pick__save-msg[data-tone="bad"] { color: var(--color-bad-ink); }
/* новый пункт после ответа на вопрос: короткая подсветка */
.pick__item.is-new, .pick__locked-list li.is-new { animation: is-new 2.4s var(--ease-out) both; }
@keyframes is-new { 0%, 40% { background: var(--color-accent-wash); box-shadow: 0 0 0 2px var(--color-accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .pick__item.is-new, .pick__locked-list li.is-new { animation: none; box-shadow: 0 0 0 2px var(--color-accent); }
}
/* sticky внутри карточки работает только без overflow: hidden */
.pick { overflow: clip; }
@media (min-width: 60.01rem) {
  /* закреплённая панель не тянется по высоте, поэтому серый фон и линию колонки рисует сама карточка (колонки 5fr и 7fr без зазора) */
  .pick[data-mode="chosen"] { background: linear-gradient(to right, var(--color-paper-2) calc(500% / 12), var(--color-rule) 0 calc(500% / 12 + 1px), var(--color-paper) 0); }
  .pick[data-mode="chosen"] .pick__side { background: none; border-right: 0; }
  .pick[data-mode="chosen"] .pick__side { position: sticky; top: calc(var(--nav-h) + var(--space-lg)); align-self: start; max-height: calc(100dvh - var(--nav-h) - var(--space-xl)); overflow-y: auto; }
}
@media (max-width: 60rem) {
  /* выбранный товар на телефоне: заголовок страницы короче, кнопка к результату всегда под рукой */
  .lookup:has(.pick[data-mode="chosen"]) .lookup__head { margin-bottom: var(--space-lg); }
  .lookup:has(.pick[data-mode="chosen"]) .lookup__head .lead { display: none; }
  .lookup:has(.pick[data-mode="chosen"]) .lookup__head h1 { font-size: var(--text-2xl); }
  .pick__jump:not([hidden]) { position: sticky; bottom: var(--space-md); z-index: var(--z-raised); box-shadow: var(--shadow-lift); }
}

/* ---------- формы и кабинет: доработки по разбору UX ---------- */
.auth__field-error { color: var(--color-bad-ink); font-size: var(--text-sm); }
.auth__check .auth__field-error { grid-column: 2; }
.field[aria-invalid="true"], .auth__check input[aria-invalid="true"] { border-color: var(--color-bad-ink); outline-color: var(--color-bad-ink); }
.acct__skeleton { width: 5ch; border-radius: var(--radius-seg); background: var(--color-paper-3); animation: skeleton 1.2s ease-in-out infinite alternate; }
@keyframes skeleton { from { opacity: 0.5; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .acct__skeleton { animation: none; } }
.acct__undo { margin-left: var(--space-xs); padding: 0; border: 0; background: none; color: var(--color-accent-deep); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.acct__undo:hover { color: var(--color-ink); }
.acct__undo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.acct__undo:disabled { color: var(--color-muted); cursor: default; }
.site-note { max-width: calc(var(--container) - 2 * var(--gutter)); margin: var(--space-md) auto 0; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-input); background: var(--color-ok-wash); color: var(--color-ok-ink); }
@media (max-width: 60rem) { .site-note { margin-inline: var(--gutter); } }
.report__advice { margin-top: calc(-1 * var(--space-sm)); font-weight: 600; color: var(--color-ink); }
.pricing__back { margin-bottom: var(--space-md); }
.pricing__current { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-input); background: var(--color-accent-wash); color: var(--color-ink); width: fit-content; max-width: 100%; }

/* ---------- демо-оплата: окно поверх страницы цен ---------- */
.pay { width: min(480px, calc(100vw - 2 * var(--gutter))); padding: var(--space-xl); border: 0; border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-lift); }
.pay::backdrop { background: color-mix(in srgb, var(--color-ink) 45%, transparent); }
.pay[open] { display: grid; gap: var(--space-md); }
.pay h2 { font-size: var(--text-xl); max-width: none; }
.pay__demo { justify-self: start; padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-seg); background: var(--color-warn-wash); color: var(--color-warn-ink); font-size: var(--text-sm); font-weight: 600; }
.pay__price { font: 700 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pay__what { color: var(--color-ink); }
.pay__note { color: var(--color-muted); font-size: var(--text-sm); }
.pay__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pay__actions [hidden] { display: none; }
@media (max-width: 40rem) { .pay { padding: var(--space-lg); } .pay__actions .btn { width: 100%; } }
.about__form { display: grid; gap: var(--space-sm); }
.about__form .pay__actions { margin-top: var(--space-xs); }
.plan h3 { font-size: var(--text-xl); max-width: none; }

/* ---------- демонстрационный режим (DEMO_RUN): полоска над шапкой и окно-предупреждение ---------- */
.demo-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: var(--space-2xs) var(--space-sm); padding: var(--space-xs) var(--gutter); background: var(--color-warn-wash); color: var(--color-warn-ink); font-size: var(--text-sm); text-align: center; }
.demo-bar button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.demo-bar button:hover { color: var(--color-ink); }
.demo-bar button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) { .demo-bar { padding-inline: var(--space-md); } .demo-bar__long { display: none; } }
.demo-run { width: min(560px, calc(100vw - 2 * var(--space-md))); max-height: calc(100dvh - 2 * var(--space-md)); overflow-y: auto; }
.demo-run__list { display: grid; gap: var(--space-xs); margin: 0; padding-left: 1.2em; color: var(--color-ink-2); }

/* ---------- переносы строк: без одного-двух слов, висящих на последней строке ---------- */
/* короткие подписи и заголовки делим поровну, длинный текст просто не оставляет слово в одиночестве */
p, li, dd, dt, td, th, label, summary, legend, figcaption { text-wrap: balance; }
/* длинный текст (юридические страницы) делить поровну не нужно: только не оставлять слово в одиночестве */
.doc__body p, .doc__body li { text-wrap: pretty; }
.btn, .check__what, .check__doc, .pick__req, .pick__group-name, .pick__chosen-name, .pick__locked-kind,
.acct__row-title, .acct__stat-value, .plan__price span, .crumbs, .demo__label, .pay__demo { text-wrap: balance; }