/* happ-key.pics — «рентгеновский кабинет».

   Две схемы — две стороны одного кабинета:
   светлая — бланк лаборатории: белая бумага, синие графы, красная отметка отклонения;
   тёмная  — плёнка на негатоскопе: чёрно-синий фон, бело-голубое свечение.
   Сами снимки (панель разбора, шапка, подвал) — плёнка в обеих схемах.

   Дизайн-система
   цвет:      бумага/плёнка, чернила, графы, синие чернила (кнопки), красная отметка;
              зелёный/янтарь/красный — только статусы норма/сомнение/отклонение
   шрифты:    Pixelify — заголовки и вердикты (цифровая подпись снимка),
              NunitoS — текст, IosCM (Iosevka Charon Mono) — строки ключей, метки, графы
   размеры:   11/12/13/15/17/20/24/30/38/52
   отступы:   4/8/12/16/24/32/48/64
   радиусы:   2–4 px; границы 1 px, акцент 2–6 px; теней нет, кроме свечения плёнки

   Переменные --bg --card --ink --ink2 --ink3 --line --line2 --acc --acc-ink --acc-s
   --warn --warn-s и --rad читает сборщик темы кассы: только литеральные HEX. */
@import url('/fonts/faces.css');

:root {
  --bg: #F3F5F9;
  --card: #FFFFFF;
  --ink: #0F1B2D;
  --ink2: #394960;
  --ink3: #56657C;
  --line: #A9BCDA;
  --line2: #DCE5F1;
  --acc: #2B5FD9;
  --acc-ink: #FFFFFF;
  --acc-s: #E6EDFB;
  --warn: #C42B2B;
  --warn-s: #FBEAEA;
  --rad: 3px;

  --acc-h: #214DB8;
  --link: #1F4CC0;
  --rule: #2B5FD9;
  --band: #2B5FD9;
  --band-ink: #FFFFFF;
  --label-bg: #EEF3FB;
  --ok: #1D7A4E;
  --ok-s: #E4F3EA;
  --mid: #9A6208;
  --mid-s: #FBF0DC;

  --ff-d: 'Pixelify', 'NunitoS', system-ui, sans-serif;
  --ff: 'NunitoS', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-m: 'IosCM', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #04070D;
    --card: #0A1322;
    --ink: #DCEBFF;
    --ink2: #A3B6D3;
    --ink3: #7489A8;
    --line: #274266;
    --line2: #16263E;
    --acc: #2B5FD9;
    --acc-ink: #FFFFFF;
    --acc-s: #0F1F3B;
    --warn: #FF7B72;
    --warn-s: #2A1316;

    --acc-h: #3A70E8;
    --link: #8CC8FF;
    --rule: #3A6FD8;
    --band: #12294F;
    --band-ink: #DCEBFF;
    --label-bg: #0D1A2F;
    --ok: #6FD6A0;
    --ok-s: #0E2A1F;
    --mid: #E8B35A;
    --mid-s: #2A200E;
  }
}

/* --- основа ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--ff);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
@media (prefers-color-scheme: dark) {
  /* Негатоскоп: свет из-за плёнки выходит сверху, к низу страница темнеет. */
  body { background: radial-gradient(1200px 520px at 50% -160px, #0D2143 0%, rgba(4, 7, 13, 0) 72%) no-repeat, var(--bg); }
}
img, svg { max-width: 100%; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong, b { font-weight: 700; }
code {
  font: 400 0.9em/1.4 var(--ff-m);
  background: var(--label-bg);
  border: 1px solid var(--line2);
  border-radius: 2px;
  padding: 0 4px;
  overflow-wrap: anywhere;
}
::selection { background: #7FC3FF; color: #04101F; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* На плёнке (шапка, снимок, подвал, панель) синий контур не виден — светлый. */
.hdr :focus-visible, .xr :focus-visible, .goto :focus-visible, .ftr :focus-visible, .gobar :focus-visible { outline-color: #9FD3FF; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--card); color: var(--ink); padding: 8px 12px; border: 2px solid var(--link); }
.skip:focus { left: 16px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* --- кнопки ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  font: 700 16px/1.2 var(--ff);
  border: 1px solid transparent; border-radius: var(--rad);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--go { background: var(--acc); color: var(--acc-ink); }
.btn--go:hover { background: var(--acc-h); color: var(--acc-ink); }
.btn--line { background: transparent; color: var(--link); border-color: var(--link); }
.btn--line:hover { background: var(--acc-s); }
.btn--glow {
  background: #0F2A50; color: #E4F1FF; border-color: #4A8FE0;
  box-shadow: 0 0 0 1px rgba(127, 195, 255, .12), 0 0 18px rgba(62, 142, 232, .32);
}
.btn--glow:hover { background: #16386A; }

/* --- шапка: полоса плёнки ------------------------------------------------------ */
.hdr { position: relative; z-index: 30; background: #06101F; color: #DCEBFF; border-bottom: 1px solid #1A2F50; }
.hdr__in { max-width: 1180px; margin: 0 auto; padding: 0 24px; min-height: 68px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 12px; color: #E4F1FF; text-decoration: none; min-width: 0; }
.brand__mark { width: 40px; height: 40px; flex: none; display: block; }
.brand__word { display: grid; gap: 2px; min-width: 0; }
.brand__row { font: 500 22px/1 var(--ff-d); letter-spacing: .01em; white-space: nowrap; }
.brand__row b { font-weight: 700; color: #E4F1FF; }
.brand__row i { font-style: normal; color: #7FC3FF; margin: 0 7px; }
.brand__row em { font-style: normal; color: #7FC3FF; }
.brand__tag { font: 400 10px/1.2 var(--ff-m); letter-spacing: .12em; color: #6E86A8; white-space: nowrap; }
.hdr__nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hdr__nav a { color: #A9C3E4; text-decoration: none; font: 600 15px/1 var(--ff); padding: 10px 10px; border-radius: 2px; }
.hdr__nav a:hover { color: #FFFFFF; background: rgba(127, 195, 255, .08); }
.hdr__nav a[aria-current="page"] { color: #FFFFFF; box-shadow: inset 0 -2px 0 #7FC3FF; }
.hdr__go { flex: none; min-height: 40px; padding: 8px 14px; font-size: 15px; }
.burger {
  display: none; flex: none;
  background: transparent; color: #DCEBFF; border: 1px solid #2A4468; border-radius: 2px;
  font: 700 12px/1 var(--ff-m); letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 12px; cursor: pointer;
}

/* --- главная: первый экран ------------------------------------------------------ */
.hero { padding: 36px 0 12px; }
.hero__in { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px; align-items: start; }
.hero__eye { margin: 4px 0 12px; font: 700 12px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.hero h1 { font: 500 clamp(30px, 3.1vw, 40px)/1.12 var(--ff-d); margin: 0 0 16px; letter-spacing: .005em; }
.hero__lead { margin: 0 0 20px; font-size: 18px; line-height: 1.55; color: var(--ink2); max-width: 36em; }
.hero__deal { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--rule); border-radius: var(--rad); padding: 16px 18px; }
.hero__offer { margin: 0 0 12px; font-size: 16.5px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.hero__indep { margin: 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; line-height: 1.5; color: var(--ink3); }

/* --- SIGNATURE: снимок ключа — плёнка в обеих схемах ------------------------------- */
.xr {
  position: relative;
  background: radial-gradient(130% 80% at 50% 0%, #11294B 0%, #0A1830 46%, #060F1E 100%);
  color: #DCEBFF;
  border: 1px solid #0B1A31;
  border-radius: 4px;
  padding: 14px 18px 16px;
}
@media (prefers-color-scheme: dark) {
  .xr { border-color: #2A4E80; box-shadow: 0 0 0 1px rgba(127, 195, 255, .06), 0 0 64px rgba(62, 142, 232, .16); }
}
.xr__top { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(127, 195, 255, .18); }
.xr__mk, .xruler__m {
  flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px solid #BFD9F5; border-radius: 1px; color: #E4F1FF;
  font: 700 12px/1 var(--ff-m);
}
.xr__t { margin: 0; font: 500 20px/1.1 var(--ff-d); color: #E4F1FF; }
.xr__id { margin-left: auto; font: 400 11px/1.2 var(--ff-m); letter-spacing: .1em; color: #7F98BD; text-align: right; }
.xr__lbl { display: block; margin-bottom: 6px; font: 400 12.5px/1.4 var(--ff-m); color: #9FB6D6; }
.xr__in {
  display: block; width: 100%; min-height: 104px; resize: vertical;
  background: #040A15; color: #E4F1FF;
  border: 1px solid #2A4468; border-radius: 3px;
  padding: 12px 14px;
  font: 400 15px/1.45 var(--ff-m);
  word-break: break-all; caret-color: #7FC3FF;
}
.xr__in::placeholder { color: #7189AD; }
.xr__in:focus { border-color: #7FC3FF; outline: none; box-shadow: 0 0 0 3px rgba(127, 195, 255, .22); }
.xr__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 12px; }
.xr__ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 400 12px/1 var(--ff-m); color: #8FA6C8; }
.xr__ex button {
  background: transparent; color: #BFD9F5; border: 1px dashed #3A5A86; border-radius: 2px;
  font: 400 12px/1 var(--ff-m); padding: 6px 8px; cursor: pointer;
}
.xr__ex button:hover { border-style: solid; color: #FFFFFF; }
.xr__mask { display: inline-flex; align-items: center; gap: 6px; font: 400 12px/1.3 var(--ff-m); color: #8FA6C8; cursor: pointer; }
.xr__mask input { accent-color: #7FC3FF; width: 16px; height: 16px; margin: 0; }
.xr a { color: #9FD3FF; }
.xr__warn {
  margin: 14px 0 0; padding: 10px 12px;
  border-left: 3px solid #F0B75A; background: rgba(240, 183, 90, .08);
  font-size: 14.5px; line-height: 1.5; color: #DCE8F8;
}
.xr__warn b { color: #F6D08E; }
.xr__out { margin-top: 14px; }
.xr__fine { margin: 12px 0 0; font: 400 11.5px/1.55 var(--ff-m); color: #7F98BD; }

/* пустая плёнка: анатомия ключа */
.xr__atlas { border: 1px dashed rgba(127, 195, 255, .26); border-radius: 3px; padding: 12px 14px; }
.xr__atlas-k { margin: 0 0 6px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: #7F98BD; }
.xr__bones { list-style: none; margin: 0; padding: 0; }
.xr__bones li {
  display: grid; grid-template-columns: minmax(0, 12em) 8.5em minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid rgba(127, 195, 255, .1);
}
.xr__bones code { background: none; border: 0; padding: 0; font-size: 13.5px; color: #E4F1FF; text-shadow: 0 0 10px rgba(127, 195, 255, .45); }
.xr__bones b { font: 700 11px/1.2 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: #9FD3FF; }
.xr__bones span { font-size: 13.5px; color: #9FB6D6; }
.xr__atlas-x { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #9FB6D6; }

/* проявленный снимок */
.xres__sample { margin: 0 0 12px; padding: 8px 10px; border: 1px dashed #F0B75A; font-size: 14px; color: #DCE8F8; }
.xres__sample b { color: #F6D08E; }
.xres__kind { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.xres__kind span { font: 400 11px/1 var(--ff-m); letter-spacing: .12em; color: #7F98BD; }
.xres__kind b { font: 500 20px/1.2 var(--ff-d); color: #E4F1FF; }
.xres__kind small { font-size: 13.5px; color: #9FB6D6; }
.xstrip { margin: 12px 0 0; }
.xstrip__s {
  margin: 0; padding: 10px 12px;
  background: #040A15; border: 1px solid #1E3558; border-radius: 3px;
  font: 400 14px/1.75 var(--ff-m); color: #CFE6FF; word-break: break-all;
}
.sg { border-radius: 2px; }
.sg--scheme { color: #9FD3FF; }
.sg--id { color: #FFFFFF; background: rgba(127, 195, 255, .14); }
.sg--sep { color: #6E86A8; }
.sg--host { color: #CFE6FF; background: rgba(127, 195, 255, .07); }
.sg--port { color: #9FD3FF; }
.sg--path { color: #9FB6D6; }
.sg--query { color: #8FB8E6; }
.sg--label { color: #B9CBE3; }
.sg--junk { color: #F0B75A; }
.sg.is-warn { text-decoration: underline dotted #F0B75A; text-underline-offset: 4px; }
.sg.is-bad { color: #FF9C94; background: rgba(255, 107, 97, .14); text-decoration: underline wavy #FF6B61; text-underline-offset: 4px; }
.xruler { display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px; gap: 8px; align-items: start; margin-top: 12px; }
.xruler__m.is-bad { border-color: #FF6B61; color: #FF9C94; box-shadow: 0 0 12px rgba(255, 107, 97, .5); }
.xruler__track { position: relative; padding-top: 4px; }
.xruler__bar { display: flex; gap: 1px; height: 14px; padding: 1px; background: #040A15; border: 1px solid #1E3558; }
.b { flex-basis: 0; min-width: 3px; height: 100%; }
.b--scheme { background: #5FA8F0; }
.b--id { background: #E4F1FF; }
.b--sep { background: #2A4468; }
.b--host { background: #9FD3FF; }
.b--port { background: #7FC3FF; }
.b--path { background: #6E9FD8; }
.b--query { background: #3E73C4; }
.b--label { background: #A9C3E4; }
.b--junk { background: #F0B75A; }
.b.is-warn { background: #F0B75A; }
.b.is-bad { background: #FF6B61; }
.xruler__ticks { position: relative; height: 18px; margin-top: 3px; }
.xruler__ticks span { position: absolute; top: 5px; transform: translateX(-50%); font: 400 10px/1 var(--ff-m); color: #6E86A8; }
.xruler__ticks span::before { content: ''; position: absolute; left: 50%; top: -6px; width: 1px; height: 4px; background: #4A6A94; }
.xruler__ticks span:first-child { transform: none; }
.xruler__ticks span:first-child::before { left: 0; }
.xstrip__legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 4px 0 0; font: 400 11px/1.3 var(--ff-m); color: #7F98BD; }
.xstrip__legend b { color: #FF9C94; font-weight: 700; }
.xparts { width: 100%; border-collapse: collapse; margin: 14px 0 0; }
.xparts caption { text-align: left; padding-bottom: 6px; font: 700 11px/1 var(--ff-m); letter-spacing: .12em; color: #7F98BD; }
.xparts th, .xparts td { padding: 8px 10px 8px 0; border-top: 1px solid rgba(127, 195, 255, .14); vertical-align: top; text-align: left; }
.xparts th { width: 9.5em; font: 700 11px/1.5 var(--ff-m); letter-spacing: .06em; color: #9FB6D6; }
.xparts code { background: none; border: 0; padding: 0; font-size: 13.5px; color: #E4F1FF; word-break: break-all; }
.xparts small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #8FA6C8; }
.xparts td:last-child { width: 1%; padding-right: 0; text-align: right; white-space: nowrap; }
.xparts tr.is-warn code { color: #F6D08E; }
.xparts tr.is-bad code { color: #FF9C94; }
.mk {
  display: inline-block; white-space: nowrap;
  font: 700 10.5px/1 var(--ff-m); letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 6px 3px; border: 1px solid currentColor; border-radius: 2px;
}
.xr .mk--ok { color: #74D6A6; }
.xr .mk--warn { color: #F0B75A; }
.xr .mk--bad { color: #FF7B72; }
.xr .mk--info { color: #9FD3FF; }
.xr .mk--none { color: #6E86A8; }
.xitems { list-style: none; margin: 14px 0 0; padding: 0; }
.xitem { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid rgba(127, 195, 255, .14); }
.xitem__n { font: 500 18px/1 var(--ff-d); color: #7FC3FF; }
.xitem.is-bad .xitem__n { color: #FF7B72; }
.xitem__t b { display: block; font: 700 11.5px/1.4 var(--ff-m); letter-spacing: .06em; color: #E4F1FF; }
.xitem__t code { background: none; border: 0; padding: 0; font-size: 13px; color: #9FD3FF; }
.xitem__x { grid-column: 2 / -1; font-size: 13.5px; line-height: 1.45; color: #9FB6D6; }
.xitems__more { margin: 8px 0 0; font-size: 13.5px; color: #9FB6D6; }
.xfinds { margin: 14px 0 0; }
.xfinds__k { margin: 0; font: 700 11px/1 var(--ff-m); letter-spacing: .12em; color: #7F98BD; }
.xfinds ul { list-style: none; margin: 6px 0 0; padding: 0; }
.xfinds li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid rgba(127, 195, 255, .12); }
.xfinds li .mk { margin-top: 3px; }
.xfinds p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #C9DAF0; }
.xfinds p b { color: #E4F1FF; }
.xfinds__none { margin: 6px 0 0; font-size: 14.5px; color: #9FB6D6; }
.xverd { margin-top: 14px; padding: 12px 14px; border: 1px solid #2A4468; border-left-width: 4px; border-radius: 2px; }
.xverd--ok { border-color: #2E7D5B; background: rgba(116, 214, 166, .07); }
.xverd--warn { border-color: #8A6A2E; background: rgba(240, 183, 90, .07); }
.xverd--bad { border-color: #9A3A36; background: rgba(255, 107, 97, .08); }
.xverd__k { margin: 0; font: 700 11px/1 var(--ff-m); letter-spacing: .12em; color: #8FA6C8; }
.xverd__t { margin: 6px 0 4px; font: 500 21px/1.2 var(--ff-d); color: #E4F1FF; }
.xverd--ok .xverd__t { color: #9BE8C2; }
.xverd--warn .xverd__t { color: #F6D08E; }
.xverd--bad .xverd__t { color: #FF9C94; }
.xverd__x { margin: 0; font-size: 14.5px; line-height: 1.5; color: #C9DAF0; }
.xverd__go { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; }
.xverd__go a { font-weight: 700; font-size: 15px; }

/* --- SIGNATURE: бланк анализов ---------------------------------------------------- */
.labs { margin: 28px 0 32px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; scroll-margin-top: 12px; }
.labs__band { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 20px; background: var(--band); color: var(--band-ink); }
.labs__form { font: 700 11px/1 var(--ff-m); letter-spacing: .14em; opacity: .85; }
.labs__t { margin: 0; font: 500 24px/1.2 var(--ff-d); }
.labs__meta { margin-left: auto; font: 400 12px/1.2 var(--ff-m); letter-spacing: .06em; opacity: .85; }
.labs__lead { margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line); color: var(--ink2); }
.labs__list { list-style: none; margin: 0; padding: 0; }
.lab { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(240px, auto); border-bottom: 1px solid var(--line2); transition: background-color .15s, opacity .15s; }
.lab::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.lab__n { display: grid; place-items: center; font: 500 30px/1 var(--ff-d); color: var(--link); background: var(--label-bg); border-right: 1px solid var(--line2); }
.lab__q { padding: 14px 18px; min-width: 0; }
.lab__name { margin: 0; font: 700 17px/1.3 var(--ff); }
.lab__how { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink2); }
.lab__norm { margin: 6px 0 0; font: 400 12.5px/1.45 var(--ff-m); color: var(--ink3); }
.lab__norm span { margin-right: 6px; font-weight: 700; letter-spacing: .08em; color: var(--link); }
.lab__opts { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; min-width: 0; margin: 0; padding: 14px 18px; border: 0; border-left: 1px dashed var(--line2); }
.lab__ask { float: left; width: 100%; margin: 0 0 2px; padding: 0; font: 700 14px/1.35 var(--ff); color: var(--ink); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px; min-height: 40px; padding: 8px 14px;
  background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-radius: var(--rad);
  font: 700 15px/1 var(--ff); cursor: pointer; user-select: none;
}
.opt span:hover { border-color: var(--link); color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.opt--y input:checked + span { background: var(--ok-s); border-color: var(--ok); color: var(--ok); }
.opt--n input:checked + span { background: var(--warn-s); border-color: var(--warn); color: var(--warn); }
.opt--s input:checked + span { background: var(--label-bg); border-color: var(--ink3); color: var(--ink); }
.opt--y input:checked + span::before { content: '✓'; margin-right: 6px; }
.opt--n input:checked + span::before { content: '!'; margin-right: 6px; }
.opt input:disabled + span { cursor: default; opacity: .6; }
.lab.is-y .lab__n { color: var(--ok); }
.lab.is-n { background: var(--warn-s); }
.lab.is-n::before { background: var(--warn); }
.lab.is-n .lab__n { color: var(--warn); background: transparent; }
.lab.is-next { background: var(--acc-s); }
.lab.is-next::before { background: var(--link); }
.lab.is-skip { opacity: .45; }
.lab.is-skip .lab__opts::after { content: 'не требуется'; align-self: center; font: 400 12px/1 var(--ff-m); letter-spacing: .06em; color: var(--ink3); }
.labs__out { padding: 18px 20px 12px; }
.labs__wait { margin: 0; color: var(--ink2); font-size: 15.5px; }
.labs__wait span, .concl__k { display: block; margin: 0 0 4px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .14em; color: var(--link); }
.labs__foot { margin: 0; padding: 0 20px 16px; }
.labs__reset { padding: 0; background: none; border: 0; font: 400 13px/1 var(--ff-m); color: var(--ink3); text-decoration: underline; cursor: pointer; }
.labs__reset:hover { color: var(--ink); }
.concl { position: relative; padding-right: 150px; min-height: 132px; }
.concl__t { margin: 0 0 6px; font: 500 26px/1.2 var(--ff-d); }
.concl--ok .concl__t { color: var(--ok); }
.concl--warn .concl__t { color: var(--mid); }
.concl--bad .concl__t { color: var(--warn); }
.concl__x { margin: 0 0 14px; color: var(--ink2); max-width: 64ch; }
.concl .concl__k { margin-top: 4px; }
.concl__todo { margin: 0 0 12px; padding-left: 22px; }
.concl__todo li { margin: 5px 0; }
.concl__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; }
.concl__links a { font-weight: 700; font-size: 15px; }
.concl__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 16px; margin-bottom: 6px; background: var(--acc-s); border: 1px solid var(--rule); border-radius: var(--rad); }
.concl__go p { flex: 1 1 320px; margin: 0; font-size: 15.5px; }
/* печать лаборатории */
.stamp { position: absolute; right: 0; top: -4px; width: 132px; height: 132px; transform: rotate(-12deg); opacity: .92; }
.stamp--ok { color: var(--link); }
.stamp--warn, .stamp--bad { color: var(--warn); }
.stamp text { fill: currentColor; font-family: var(--ff-m); font-weight: 700; }
.stamp__ring { font-size: 9.6px; letter-spacing: 1.1px; }
.stamp__w { font-size: 19px; letter-spacing: 1px; }
.stamp__w--long { font-size: 11.5px; letter-spacing: .4px; }

/* --- лист: статья как бланк ----------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 18px 0 10px; font: 400 12px/1.4 var(--ff-m); color: var(--ink3); }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs i { font-style: normal; color: var(--line); }
.crumbs span { color: var(--ink2); }
.sheet { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--rule); border-radius: 4px; margin: 0 0 48px; }
.sheet__hd { padding: 22px 28px 20px; border-bottom: 1px solid var(--line); }
.sheet__strip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.sheet__strip span + span { font-weight: 400; color: var(--ink3); }
.sheet__hd h1 { margin: 0 0 12px; font: 500 clamp(28px, 3.4vw, 42px)/1.12 var(--ff-d); max-width: 28ch; }
.sheet__lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink2); max-width: 68ch; }
.pre-rows { padding: 16px 28px; border-bottom: 1px solid var(--line); }
.pre-rows > * + * { margin-top: 14px; }
.fr { display: grid; grid-template-columns: 250px minmax(0, 1fr); border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.fr__k { padding: 22px 20px; background: var(--label-bg); border-right: 1px solid var(--line); }
.fr__k h2 { position: sticky; top: 16px; margin: 0; font: 500 20px/1.25 var(--ff-d); color: var(--ink); }
.fr__v { min-width: 0; padding: 22px 28px 24px; }
.fr__v > :first-child { margin-top: 0; }
.fr__v > :last-child { margin-bottom: 0; }
.fr__v p { margin: 0 0 14px; max-width: 70ch; }
.fr__v h3 { margin: 22px 0 8px; font: 700 18px/1.35 var(--ff); }
.ul, .ol { margin: 0 0 16px; padding-left: 22px; max-width: 70ch; }
.ul li, .ol li { margin: 6px 0; }
.ul li::marker, .ol li::marker { color: var(--link); }

/* протокол: шаги */
.proto { list-style: none; margin: 0 0 16px; padding: 0; }
.proto__i { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-top: 1px dashed var(--line2); }
.proto__i:first-child { border-top: 0; padding-top: 0; }
.proto__n { padding-top: 4px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .1em; color: var(--link); }
.proto__t { margin: 0 0 4px; font: 700 17px/1.35 var(--ff); }
.proto__b p { margin: 0 0 8px; }
.proto__b > :last-child { margin-bottom: 0; }
.proto__b ul { margin: 6px 0 0; padding-left: 20px; }

/* таблицы */
.tbl { margin: 0 0 18px; }
.tbl__cap { margin-bottom: 6px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--ink3); }
.tbl__sc { overflow-x: auto; border: 1px solid var(--line); border-radius: 2px; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line2); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl thead th { font: 700 11px/1.3 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: var(--link); background: var(--label-bg); border-bottom: 1px solid var(--line); }
.tbl tbody th { font-weight: 700; color: var(--ink); }

/* пометки на полях */
.note { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; margin: 0 0 18px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--link); border-radius: 2px; }
.note__k { padding-top: 3px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.note__t { margin: 0 0 4px; font-weight: 700; }
.note__b p { margin: 0 0 6px; }
.note__b > :last-child { margin-bottom: 0; }
.note--warn { border-left-color: var(--mid); background: var(--mid-s); }
.note--warn .note__k { color: var(--mid); }
.note--down { border-left-color: var(--warn); background: var(--warn-s); }
.note--down .note__k { color: var(--warn); }
.note--ok { border-left-color: var(--ok); background: var(--ok-s); }
.note--ok .note__k { color: var(--ok); }

/* вопросы */
.faq { margin: 0; }
.faq__i { padding: 12px 0; border-top: 1px dashed var(--line2); }
.faq__i:first-child { border-top: 0; padding-top: 0; }
.faq dt { margin: 0 0 4px; font: 700 17px/1.4 var(--ff); }
.faq dd { margin: 0; }
.faq dd p { margin: 0 0 6px; max-width: 70ch; }

/* коротко */
.ans { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 14px 16px; background: var(--acc-s); border: 2px solid var(--rule); border-radius: 2px; }
.ans__k { padding-top: 5px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .14em; color: var(--link); }
.ans__b p { margin: 0; font-size: 18px; line-height: 1.55; }
.ans__b ul { margin: 8px 0 0; padding-left: 20px; }

/* симптомы */
.signs { list-style: none; margin: 0 0 18px; padding: 0; }
.sign { display: grid; grid-template-columns: 124px minmax(0, 1fr); border: 1px solid var(--line); margin-top: -1px; }
.sign__at { padding: 12px; background: var(--label-bg); border-right: 1px solid var(--line); font: 700 11px/1.3 var(--ff-m); letter-spacing: .1em; color: var(--link); }
.sign__at small { display: block; margin-top: 4px; font: 400 12.5px/1.35 var(--ff); letter-spacing: 0; color: var(--ink3); }
.sign__b { padding: 12px 14px; min-width: 0; }
.sign__s { margin: 0 0 6px; font: 700 16.5px/1.4 var(--ff); }
.sign__m, .sign__d { margin: 0 0 4px; font-size: 15.5px; line-height: 1.5; }
.sign__m span, .sign__d span { display: inline-block; min-width: 5.6em; margin-right: 6px; font: 700 10.5px/1 var(--ff-m); letter-spacing: .1em; color: var(--ink3); }
.sign__d span { color: var(--link); }

/* нормы: signature в тексте статьи */
.norms { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.norms__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; background: var(--band); color: var(--band-ink); font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; }
.norms__hd a { color: inherit; font-weight: 400; letter-spacing: .04em; }
.norms__t { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; }
.norms__t th, .norms__t td { padding: 9px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line2); }
.norms__t thead th { font: 700 11px/1.3 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); background: var(--label-bg); border-top: 0; }
.norms__t tbody th { font-weight: 700; white-space: nowrap; }
.norms__n { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border: 1px solid var(--line); font: 500 14px/1 var(--ff-d); color: var(--link); }
.norms__t tr.is-here { background: var(--warn-s); }
.norms__t tr.is-here .norms__n { color: var(--warn); border-color: var(--warn); }
.norms__flag { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 2px; background: var(--warn); color: var(--card); font: 700 12px/1 var(--ff-m); }

/* видит / не видит */
.both { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 2px; }
.both__c { padding: 14px 16px; }
.both__c--yes { border-right: 1px solid var(--line); }
.both__k { font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; }
.both__c--yes .both__k { color: var(--ok); }
.both__c--no .both__k { color: var(--warn); }
.both ul { margin: 8px 0 0; padding-left: 18px; }
.both li { margin: 6px 0; font-size: 15.5px; line-height: 1.5; }

/* строки-ссылки */
.lrows { list-style: none; margin: 0; padding: 0; }
.lrows li { border-top: 1px solid var(--line2); }
.lrows li:first-child { border-top: 0; }
.lrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 6px; color: inherit; text-decoration: none; }
.lrow:hover { background: var(--label-bg); }
.lrow__t { font: 700 17px/1.35 var(--ff); color: var(--ink); }
.lrow:hover .lrow__t { color: var(--link); }
.lrow__s { grid-row: 2; font-size: 14.5px; color: var(--ink2); }
.lrow__go { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 20px; color: var(--link); }

/* направления: призывы */
.cta { margin: 18px 0; padding: 18px 22px; background: var(--acc-s); border: 1px solid var(--rule); border-left-width: 6px; border-radius: 2px; }
.sheet > .cta { margin: 24px 28px; }
.cta__tag { font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.cta__t { margin: 6px 0 8px; font: 500 24px/1.2 var(--ff-d); }
.cta__x { margin: 0 0 14px; max-width: 70ch; color: var(--ink2); }
.slip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 10px 14px; background: var(--card); border: 1px dashed var(--rule); border-radius: 2px; }
.slip__k { font: 700 11px/1.3 var(--ff-m); letter-spacing: .14em; color: var(--link); }
.slip__x { margin: 0; font-size: 15.5px; line-height: 1.5; }
.slip .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.goto {
  margin: 18px 0; padding: 14px 16px;
  background: radial-gradient(130% 90% at 50% 0%, #11294B 0%, #0A1830 55%, #060F1E 100%);
  color: #DCEBFF; border: 1px solid #0B1A31; border-radius: 3px;
}
.goto__k { font: 700 11px/1.3 var(--ff-m); letter-spacing: .14em; color: #7FC3FF; }
.goto__x { margin: 6px 0 12px; font-size: 15.5px; line-height: 1.5; color: #C9DAF0; }
.goto__x a { color: #9FD3FF; }
.goto .btn--line { color: #9FD3FF; border-color: #4A8FE0; }
.goto .btn--line:hover { background: rgba(127, 195, 255, .1); }
.pre { overflow-x: auto; padding: 12px 14px; background: #040A15; color: #CFE6FF; border-radius: 3px; font: 400 13.5px/1.6 var(--ff-m); white-space: pre-wrap; word-break: break-all; }

/* главная: опоры и два направления */
.pillars { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 2px; }
.pillar { padding: 14px 16px; border-bottom: 1px solid var(--line2); }
.pillar:nth-child(odd) { border-right: 1px solid var(--line2); }
.pillar:nth-last-child(-n+2) { border-bottom: 0; }
.pillar__k { font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.pillar p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; }
.offers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 18px; }
.offer { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; }
.offer--paid { border-color: var(--rule); border-top-width: 4px; }
.offer__k { font: 700 11px/1.3 var(--ff-m); letter-spacing: .14em; color: var(--link); }
.offer__p { margin: 0; }
.offer__p b { font: 500 32px/1 var(--ff-d); }
.offer__p span { margin-left: 8px; color: var(--ink2); }
.offer__l { list-style: none; margin: 0; padding: 0; }
.offer__l li { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-top: 1px dashed var(--line2); font-size: 15px; }
.offer__l li i { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.offer .btn { margin-top: auto; align-self: flex-start; }

/* --- касса ---------------------------------------------------------------------------- */
.paygrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); border-bottom: 1px solid var(--line); }
.kassa { min-width: 0; padding: 20px 24px; border-right: 1px solid var(--line); scroll-margin-top: 12px; }
.kassa__hd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.kassa__hd span + span { font-weight: 400; color: var(--ink3); }
.kassa__box { min-height: 420px; }
.kassa__fb { margin: 0; padding: 14px; border: 1px dashed var(--line); color: var(--ink2); font-size: 15px; }
.tariff { padding: 20px 22px; background: var(--label-bg); }
.tariff__k { margin: 0 0 8px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--link); }
.tariff__t { width: 100%; border-collapse: collapse; font-size: 15px; }
.tariff__t th, .tariff__t td { padding: 8px 0; text-align: left; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.tariff__t thead th { font: 700 10.5px/1.3 var(--ff-m); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.tariff__t td { text-align: right; padding-left: 10px; }
.tariff__t tbody td:nth-child(2) { font-weight: 700; }
.tariff__trial th, .tariff__trial td { color: var(--ok); }
.tariff__l { list-style: none; margin: 14px 0; padding: 0; }
.tariff__l li { position: relative; padding: 3px 0 3px 20px; font-size: 15px; }
.tariff__l li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.tariff__indep { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--ink2); }
.payback { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 16px 28px; background: var(--acc-s); border-bottom: 1px solid var(--line); }

/* --- хвост листа ------------------------------------------------------------------------- */
.also { padding: 18px 28px; }
.also__k { margin: 0; font: 700 11px/1.3 var(--ff-m); letter-spacing: .12em; color: var(--ink3); }
.also__l { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; }
.also__l a { display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--rad); text-decoration: none; font: 600 15px/1.35 var(--ff); }
.also__l a:hover { background: var(--acc-s); }
.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 28px 18px; border-top: 1px dashed var(--line2); font-size: 15px; }
.helpful__q { font-weight: 700; }
.helpful__btns { display: flex; gap: 8px; }
.helpful button { padding: 6px 14px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--rad); font: 700 14px/1.2 var(--ff); cursor: pointer; }
.helpful button:hover { border-color: var(--link); }
.helpful[data-done] button { opacity: .5; }
.helpful__thanks { color: var(--ink2); font-size: 14px; }

/* --- 404 -------------------------------------------------------------------------------------- */
.lost { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; margin: 40px 0 56px; }
.lost__film {
  display: flex; align-items: center; justify-content: space-between; aspect-ratio: 3 / 4; padding: 16px;
  background: radial-gradient(120% 80% at 50% 30%, #11294B 0%, #0A1830 50%, #060F1E 100%);
  color: #E4F1FF; border-radius: 4px;
}
.lost__film span { align-self: flex-start; display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #BFD9F5; font: 700 12px/1 var(--ff-m); }
.lost__film b { font: 500 56px/1 var(--ff-d); text-shadow: 0 0 22px rgba(127, 195, 255, .55); }
.lost h1 { margin: 0 0 12px; font: 500 clamp(28px, 3.4vw, 42px)/1.12 var(--ff-d); }
.lost .sheet__lead { margin-bottom: 16px; }

/* --- подвал: плёнка --------------------------------------------------------------------------- */
.ftr { background: #06101F; color: #A9C3E4; border-top: 1px solid #1A2F50; }
.ftr__in { max-width: 1180px; margin: 0 auto; padding: 40px 24px 28px; }
.ftr__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 24px 32px; }
.ftr__k { margin: 0 0 10px; font: 700 11px/1.3 var(--ff-m); letter-spacing: .14em; color: #7FC3FF; }
.ftr ul { list-style: none; margin: 0; padding: 0; }
.ftr li { margin: 6px 0; }
.ftr a { color: #C9DAF0; text-decoration: none; font-size: 15px; }
.ftr a:hover { color: #FFFFFF; text-decoration: underline; }
.ftr__disc { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #1A2F50; font-size: 14px; line-height: 1.6; color: #8FA6C8; max-width: 90ch; }
.ftr__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 18px; font: 400 12px/1.3 var(--ff-m); letter-spacing: .06em; color: #6E86A8; }
.ftr__bar a { font: inherit; color: #A9C3E4; }
.ftr__mk { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid #6E86A8; font-weight: 700; }
.ftr__cp { margin-left: auto; }

/* --- нижняя панель (телефон) --------------------------------------------------------------------- */
.gobar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #06101F; color: #E4F1FF; border-top: 1px solid #2A4468; transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.gobar[hidden] { display: none; }
.gobar.is-on { transform: none; visibility: visible; transition: transform .25s ease; }
.gobar__in { display: flex; align-items: center; gap: 10px; max-width: 1180px; margin: 0 auto; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.gobar__x-t { flex: 1; min-width: 0; }
.gobar__x-t b { display: block; font-size: 15px; line-height: 1.3; }
.gobar__x-t span { display: block; font-size: 12.5px; line-height: 1.3; color: #9FB6D6; }
.gobar .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.gobar__x { flex: none; width: 36px; height: 36px; background: none; color: #DCEBFF; border: 1px solid #2A4468; border-radius: 2px; font-size: 20px; line-height: 1; cursor: pointer; }
body.has-gobar { padding-bottom: 72px; }

/* --- адаптив ---------------------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .gobar { display: none !important; }
  body.has-gobar { padding-bottom: 0; }
}

@media (max-width: 1080px) {
  .hero__in { gap: 28px; }
  .fr { grid-template-columns: 210px minmax(0, 1fr); }
  .lab { grid-template-columns: 56px minmax(0, 1fr) minmax(220px, auto); }
}

@media (max-width: 980px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-top: 28px; }
  .hero__lead { max-width: 60ch; }
  .paygrid { grid-template-columns: minmax(0, 1fr); }
  .kassa { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .hdr__in { gap: 12px; min-height: 60px; padding: 0 16px; }
  .burger { display: inline-block; order: 3; }
  .hdr__go { margin-left: auto; }
  .hdr__nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: #06101F; border-bottom: 1px solid #1A2F50; padding: 6px 16px 12px;
  }
  .hdr__nav.is-open { display: flex; }
  .hdr__nav a { padding: 12px 4px; border-bottom: 1px solid #13243F; font-size: 16px; }
  .hdr__nav a[aria-current="page"] { box-shadow: inset 3px 0 0 #7FC3FF; padding-left: 12px; }
  .wrap { padding: 0 16px; }
  .fr { grid-template-columns: minmax(0, 1fr); }
  .fr__k { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .fr__k h2 { position: static; font-size: 19px; }
  .fr__v { padding: 16px 16px 20px; }
  .sheet__hd { padding: 18px 16px 16px; }
  .pre-rows { padding: 14px 16px; }
  .sheet > .cta { margin: 18px 16px; }
  .also, .helpful { padding-left: 16px; padding-right: 16px; }
  .payback { padding: 14px 16px; }
  .kassa { padding: 16px 12px; }
  .tariff { padding: 16px; }
  .lab { grid-template-columns: 48px minmax(0, 1fr); }
  .lab__n { grid-row: 1 / span 2; font-size: 24px; }
  .lab__q { padding: 12px 14px 6px; }
  .lab__opts { grid-column: 2; padding: 6px 14px 14px; border-left: 0; }
  .labs__band, .labs__lead { padding-left: 16px; padding-right: 16px; }
  .labs__meta { margin-left: 0; }
  .labs__out { padding: 16px 16px 10px; }
  .labs__foot { padding: 0 16px 14px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .ftr__grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .hero h1 { font-size: clamp(27px, 7.6vw, 34px); }
  .hero__lead { font-size: 17px; }
  .xr { padding: 12px 12px 14px; }
  .xr__id { display: none; }
  .xr__bones li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .xr__bones span { grid-column: 1 / -1; }
  .xparts th { width: 7.6em; }
  .xparts td:last-child { white-space: normal; }
  .pillars, .offers, .both { grid-template-columns: minmax(0, 1fr); }
  .pillar:nth-child(odd) { border-right: 0; }
  .pillar:nth-last-child(-n+2) { border-bottom: 1px solid var(--line2); }
  .pillar:last-child { border-bottom: 0; }
  .both__c--yes { border-right: 0; border-bottom: 1px solid var(--line); }
  .note, .ans, .sign { grid-template-columns: minmax(0, 1fr); }
  .note { gap: 4px; }
  .ans { gap: 6px; }
  .sign__at { border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .sign__at small { display: inline; margin: 0 0 0 8px; }
  .slip { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .slip .btn { justify-self: start; }
  .proto__i { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tbl table { min-width: 520px; }
  .sheet__lead { font-size: 17.5px; }
  .norms__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .norms__t tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--line2); }
  .norms__t tbody th { grid-column: 1 / -1; border-top: 0; padding-bottom: 2px; white-space: normal; }
  .norms__t td { border-top: 0; padding-top: 2px; font-size: 14px; }
  .norms__t td::before { display: block; font: 700 10px/1.4 var(--ff-m); letter-spacing: .1em; color: var(--ink3); }
  .norms__t td:nth-of-type(1)::before { content: 'НОРМА'; }
  .norms__t td:nth-of-type(2)::before { content: 'ОТКЛОНЕНИЕ'; }
  .concl { padding-right: 0; min-height: 0; }
  .stamp { position: relative; float: right; top: 0; width: 92px; height: 92px; margin: -6px -4px 6px 10px; }
  .lost { grid-template-columns: minmax(0, 1fr); }
  .lost__film { aspect-ratio: auto; height: 150px; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); }
  .ftr__cp { margin-left: 0; }
}

@media (max-width: 480px) {
  .brand__tag { display: none; }
  .brand__row { font-size: 19px; }
  .brand__mark { width: 34px; height: 34px; }
  .hdr__go { display: none; }
  .burger { margin-left: auto; }
  .hero__btns .btn { flex: 1 1 100%; }
  .xr__ctl { gap: 10px; }
  .xr__ctl .btn { flex: 1 1 100%; }
  .lab__opts .opt { flex: 1 1 30%; }
  .opt span { width: 100%; min-width: 0; padding: 8px 10px; }
  .offer__p b { font-size: 28px; }
  .cta { padding: 16px; }
  .cta .btn, .concl__go .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
