/* IBM Plex Sans (+ Arabic для ar/fa), OFL — свои копии в static/fonts; браузер грузит только нужные алфавиты (unicode-range) */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-ext-400-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-ext-600-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-ext-700-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1; }

/* Дизайн-токены: единый источник цветов, радиусов, теней, отступов и переходов (описание и правила — docs/design-system.md).
   Палитра — шкалы Tailwind; в компонентах — смысловые имена (--ink, --brand, --ok…), на шкалы — только там, где нужен оттенок */
:root {
  /* Палитра */
  --white: #fff;
  --black: #000;
  --slate-50: #f8fafc;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-600: #475569;
  --slate-900: #0f172a;
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-700: #1d4ed8;
  --blue-900: #1e3a8a;
  --indigo-100: #e0e7ff;
  --sky-50: #f0f9ff;
  --sky-200: #bae6fd;
  --green-50: #f0fdf4;
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-500: #22c55e;               /* овал и кнопка спуска камеры «всё в порядке» (на тёмном) */
  --green-700: #15803d;
  --green-900: #14532d;
  --amber-50: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-700: #b45309;
  --amber-900: #78350f;
  --red-25: #fffafa;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-700: #b91c1c;

  /* Смысловые цвета (контраст к белому: --ink 17.9, --muted 7.6, --brand 6.7, --ok 5.0, --warn 5.0, --bad 6.5) */
  --ink: var(--slate-900);
  --muted: var(--slate-600);
  --line: var(--slate-200);           /* разделители и рамки карточек — декоративные */
  /* Бумага: спокойный тёплый фон страницы; белое — только «листы» (кадр загрузки, лист измерений, карточки, поля) */
  --paper: #f6f5f1;                   /* фон страницы: --ink 16.4:1, --muted 6.9:1, --brand 6.1:1 */
  --paper-2: #eeede6;                 /* тональная ступень: полосы, подвал, подложки (--muted 6.4:1, --brand 5.7:1) */
  --bg: var(--paper-2);
  --brand: var(--blue-700);
  --brand-dark: var(--blue-900);
  --brand-soft: var(--blue-50);
  --ok: var(--green-700);
  --ok-bg: var(--green-100);
  --warn: var(--amber-700);
  --warn-bg: var(--amber-100);
  --bad: var(--red-700);
  --bad-bg: var(--red-100);
  --control-border: #8391a7;          /* рамка полей и флажков: 3.2:1 к белому (WCAG 1.4.11, нетекстовый контраст) */
  --focus: var(--blue-700);           /* кольцо фокуса: 6.7:1 к белому */
  --telegram: #0a6fae;                /* фирменный #229ed9 даёт 3.0:1 — для текста ссылки темнее: 5.4:1 к белому, 4.9:1 к --paper */
  /* Миллиметровка — только внутри «прибора» (кадр загрузки, поле листа измерений): клетка 8px, крупная 40px, линии ink 4.5 % / 9 % */
  --grid-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 8.5h40M0 16.5h40M0 24.5h40M0 32.5h40M8.5 0v40M16.5 0v40M24.5 0v40M32.5 0v40' stroke='rgb(15,23,42)' stroke-opacity='.045' fill='none'/%3E%3Cpath d='M0 .5h40M.5 0v40' stroke='rgb(15,23,42)' stroke-opacity='.09' fill='none'/%3E%3C/svg%3E");
  --template-red: #dc2626;            /* линии макушки и подбородка шаблона Госдепа */
  --template-green: #16a34a;          /* линия и полоса глаз шаблона */

  /* Тонкие линии: 1px с прозрачностью — ложатся на любой фон (белый, --bg, миллиметровку) одинаково */
  --hairline: rgb(15 23 42 / .08);    /* разделители внутри блока */
  --hairline-2: rgb(15 23 42 / .14);  /* рамки блоков и карточек в покое */
  --hairline-3: rgb(15 23 42 / .24);  /* наведение, выделенная рамка */

  /* Шрифт: 7 ступеней на странице, мельче 12px нет. На главной --fs-display, на внутренних — --fs-h1 */
  --fs-xs: .75rem;                    /* 12 — бейджи, мелкие подписи */
  --fs-sm: .875rem;                   /* 14 — подписи, примечания, служебное */
  --fs-base: 1rem;                    /* 16 — основной текст */
  --fs-lg: 1.125rem;                  /* 18 — лид, главная кнопка */
  --fs-xl: 1.25rem;                   /* 20 — h3, заголовки карточек */
  --fs-h2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);       /* 24 → 36 */
  --fs-h1: clamp(2rem, 1.4rem + 2.4vw, 3rem);            /* 32 → 48, внутренние страницы */
  --fs-display: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem); /* 38 → 72, заголовок главной */
  --lh-tight: 1.04;                   /* крупные заголовки */
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --ls-display: -.025em;              /* латиница и кириллица; ar/fa — 0 */
  --ls-heading: -.02em;
  --measure: 64ch;                    /* ширина строки текста */

  /* Радиусы: три ступени + таблетка */
  --radius-sm: 6px;                   /* бейджи, миниатюры, флажки, пункты меню */
  --radius-md: 10px;                  /* кнопки, поля, вложенные блоки */
  --radius-lg: 14px;                  /* карточки, кадры, крупные панели */
  --radius-full: 999px;

  /* Отступы: шаг 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --section-y: clamp(48px, 3vw + 36px, 96px);   /* вертикальный ритм секций главной */

  /* Тени — только у всплывающих слоёв (меню, уведомления, липкие панели). В покое — рамка --hairline-2 */
  --shadow-pop: 0 12px 32px -12px rgb(15 23 42 / .3);
  --shadow-bar: 0 -8px 24px -16px rgb(15 23 42 / .3);

  /* Движение: 120–300 мс, ease-out; только transform, opacity и цвета */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --transition-fast: var(--dur-1) var(--ease-out);
  --transition-normal: var(--dur-3) var(--ease-out);

  /* Размеры */
  --tap: 44px;                        /* минимальная цель нажатия на сенсорных экранах */
  --btn-h: 48px;                      /* обычная кнопка */
  --btn-big-h: 56px;                  /* главное действие экрана */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.skip-link { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--white); color: var(--brand); padding: 8px 14px; border-radius: var(--radius-md); }
.skip-link:focus { top: 8px; }
/* Режим высокой контрастности Windows: у кнопок и выбранной вкладки остаются рамки */
@media (forced-colors: active) {
  .btn { border: 1px solid ButtonText; }
  input[type="radio"]:checked + * , [aria-pressed="true"], [aria-current="step"] { outline: 2px solid Highlight; }
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: var(--fs-base)/var(--lh-body) "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", Tahoma, sans-serif; color: var(--ink); background: var(--paper); }
html:lang(ar) body, html:lang(fa) body { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", "Noto Sans Arabic", Tahoma, sans-serif; }
a { color: var(--brand); }
h1, h2, h3 { line-height: var(--lh-heading); margin: 0 0 .5em; text-wrap: balance; }
h1, h2 { font-weight: 600; }        /* тихие заголовки: размер держит иерархию, жирность — нет */
h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-heading); line-height: 1.1; }
h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-heading); }
h3 { font-size: var(--fs-xl); letter-spacing: -.01em; }
p, li { text-wrap: pretty; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.lead { font-size: var(--fs-lg); color: var(--muted); max-width: var(--measure); }
.note { color: var(--muted); font-size: var(--fs-sm); }
.center { text-align: center; }
.num, .price-big, .price, bdi { font-variant-numeric: tabular-nums; }

/* Навигация: в покое — тонкая линия снизу, без тени */
.nav { background: var(--paper); position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--hairline-2); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.logo { font-weight: 700; color: var(--ink); text-decoration: none; display: flex; gap: 8px; align-items: center; }
.logo-mark { background: var(--brand); color: var(--white); border-radius: var(--radius-sm); padding: 2px 7px; font-size: var(--fs-sm); }
.nav-links { display: flex; gap: 20px; align-items: center; }
.nav-links > a { color: var(--ink); text-decoration: none; font-size: var(--fs-sm); transition: color var(--transition-fast); }
.nav-links > a:hover { color: var(--brand); }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 36px; box-shadow: inset 0 0 0 1px var(--hairline-2); border-radius: var(--radius-sm); padding: 4px 10px; transition: box-shadow var(--transition-fast); font-size: var(--fs-sm); color: var(--ink); white-space: nowrap; }
.lang summary::-webkit-details-marker { display: none; }
.lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: var(--white); border: 1px solid var(--hairline-2); border-radius: var(--radius-md); min-width: 170px; z-index: 20; }
.lang li a { display: block; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.lang li a:hover { background: var(--bg); }
.lang li a[aria-current] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* Первый экран: бумажный фон без сетки; заголовок во всю ширину; слева — лид и кадр загрузки по шаблону Госдепа с метками обрезки,
   справа — «Лист измерений» (настоящий пример с замерами). Миллиметровка — только внутри кадра и поля листа */
.hero { padding: var(--space-12) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); max-width: 17ch; margin: 0 0 var(--space-6); }
/* На компьютере заголовок делит ширину с листом измерений — ступень --fs-display не выше 64px, чтобы на всех 11 языках было две строки */
@media (min-width: 861px) {
  .hero h1 { font-size: min(var(--fs-display), 4rem); max-width: none; }
  /* Заголовок и лид — над обеими колонками, ниже в одном ряду кадр и лист: они начинаются на одной линии
     и лист тянется до низа карточки с кадром — без пустоты под ним */
  .hero-grid { grid-template-areas: "title title" "lead lead" "tool sheet"; row-gap: 0; align-items: stretch; }
  .hero-main { display: contents; }
  .hero h1 { grid-area: title; }
  .hero .lead { grid-area: lead; }
  .hero .tool { grid-area: tool; }
  .hero .sheet { grid-area: sheet; display: flex; flex-direction: column; }
  .hero .sheet-body { flex: 1; }
}
.hero .lead { margin: 0 0 var(--space-8); color: var(--ink); font-size: var(--fs-lg); line-height: 1.55; max-width: 42ch; }
.badge { display: inline-block; background: var(--white); border: 1px solid var(--blue-200); color: var(--brand-dark); border-radius: var(--radius-full); padding: 4px 12px; font-size: var(--fs-sm); margin: 0 0 16px; }
.card { background: var(--white); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); padding: 24px; }
/* Заголовки внутри карточек и вердикт — нижняя ступень --fs-h2 (24px), а не размер секции */
.card h2, .verdict h2 { font-size: min(var(--fs-h2), 1.5rem); }
/* Метки обрезки по углам — как на листе для печати: линии продолжают края кадра наружу */
.tool { position: relative; background: var(--white); border: 1px solid var(--hairline-2); padding: var(--space-5); }
.tool::before { content: ""; position: absolute; inset: -15px; pointer-events: none; --m: var(--ink);
  background:
    linear-gradient(var(--m), var(--m)) left 0 top 13px / 10px 1px, linear-gradient(var(--m), var(--m)) left 13px top 0 / 1px 10px,
    linear-gradient(var(--m), var(--m)) right 0 top 13px / 10px 1px, linear-gradient(var(--m), var(--m)) right 13px top 0 / 1px 10px,
    linear-gradient(var(--m), var(--m)) left 0 bottom 13px / 10px 1px, linear-gradient(var(--m), var(--m)) left 13px bottom 0 / 1px 10px,
    linear-gradient(var(--m), var(--m)) right 0 bottom 13px / 10px 1px, linear-gradient(var(--m), var(--m)) right 13px bottom 0 / 1px 10px;
  background-repeat: no-repeat; }
/* Выбор документа — компактный сегмент в одну строку, короткие названия (tool.spec_short), полные — в title */
.spec { display: grid; grid-template-columns: repeat(3, auto); gap: 2px; padding: 3px; background: var(--paper-2); border-radius: var(--radius-md); }
.spec label { position: relative; display: grid; place-items: center; min-height: 40px; text-align: center; line-height: 1.2; white-space: nowrap; border-radius: var(--radius-sm); padding: 6px 8px; cursor: pointer; font-size: var(--fs-sm); color: var(--muted); transition: color var(--transition-fast), background var(--transition-fast); }
.spec label:hover { color: var(--ink); }
.spec label input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.spec label:has(input:checked) { background: var(--white); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--hairline-2); }
.spec label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Кадр загрузки 600×600 на миллиметровке. Компьютер: пустой кадр с силуэтом и линиями шаблона, главная кнопка поверх (пример — в листе рядом).
   Телефон и планшет (≤ 860px): в кадре настоящий пример, линии шаблона выходят за снимок на миллиметровку; кнопка — под кадром */
.drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 248px;
  margin-top: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); text-align: center; cursor: pointer; }
.drop-field { position: absolute; inset: 0; overflow: hidden; border: 1px dashed rgb(15 23 42 / .32); border-radius: var(--radius-md);
  background: var(--grid-paper) 0 0 / 40px 40px, var(--white); transition: background-color var(--transition-fast), border-color var(--transition-fast); }
.drop-guide { position: absolute; inset: 0; width: 100%; height: 100%; }
.drop-guide .g-head { fill: var(--paper-2); }
.drop-guide .g-eyes { fill: var(--template-green); opacity: .12; }
.drop-guide .g-limit { stroke: var(--template-red); stroke-width: 1; stroke-dasharray: 4 3; opacity: .6; }
.drop-guide .g-eyeline { stroke: var(--template-green); stroke-width: 1; opacity: .7; }
.drop-sample, .drop-tag { display: none; }
.drop-size, .drop-tag { position: absolute; top: 8px; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.drop-size { inset-inline-end: 10px; }
.drop-btn, .drop-hint { position: relative; }
.drop-btn { margin: 0 0 var(--space-2); width: 100%; }
.drop-btn svg { flex: none; }
.drop:hover .drop-btn { background: var(--brand-dark); }
.drop:hover .drop-field, .drop.over .drop-field { border-color: var(--brand); }
.drop.over .drop-field { background-color: var(--brand-soft); border-style: solid; }
.drop-hint { color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; background: rgb(255 255 255 / .85); border-radius: var(--radius-sm); padding: 0 6px; }
@media (max-width: 860px) {
  .drop { min-height: 0; padding: 0; justify-content: flex-start; gap: var(--space-1); }
  .drop-field { --fh: clamp(168px, 46vw, 300px); position: relative; display: block; width: 100%; height: var(--fh); }
  .drop-guide { display: none; }
  .drop-sample { display: block; position: absolute; top: 0; left: calc(50% - var(--fh) / 2); width: var(--fh); height: var(--fh); background: var(--white); box-shadow: 0 0 0 1px var(--hairline-2); }
  .drop-sample img, .drop-sample .tpl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .drop-size, .drop-tag { top: auto; bottom: 8px; }
  /* Подписи — в нижних углах, в полях миллиметровки по бокам снимка: «Пример» — у начала строки, размер — у конца (и в ar/fa) */
  .drop-tag { display: block; left: 8px; }
  .drop-size { right: 8px; }
  [dir="rtl"] .drop-tag { left: auto; right: 8px; }
  [dir="rtl"] .drop-size { right: auto; left: 8px; }
  .drop-size, .drop-tag { padding: 0 4px; border-radius: var(--radius-sm); background: rgb(255 255 255 / .9); }
  .drop-btn { margin: var(--space-3) 0 var(--space-1); }
  .drop-hint { font-size: var(--fs-xs); background: none; }
}
/* Узкий телефон (360px): подпись главной кнопки в одну строку на всех языках — без значка, 16px */
@media (max-width: 400px) { .drop-btn svg { display: none; } .drop .drop-btn { padding-inline: var(--space-3); font-size: var(--fs-base); } }
@media (max-width: 600px) { .drop-mouse { display: none; } }
.tool-more { display: grid; gap: 6px; margin-top: var(--space-3); }
.tool-more .studio-link { justify-self: center; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-sm); text-align: center; }
/* Факты под действием: только то, что правда, — бесплатно, удаляем, возврат; и цена открыто */
.tool-facts { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.trust { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--fs-sm); line-height: 1.4; }
.trust li { position: relative; padding-inline-start: 24px; }
.trust li:not(.indep)::before { content: ""; position: absolute; inset-inline-start: 2px; top: .3em; width: 10px; height: 6px; border: 2px solid var(--ok); border-top: 0; border-right: 0; transform: rotate(-45deg); }
/* Первым пунктом — кто мы: независимый сервис, подача только на официальном сайте. Знак «i» вместо галочки — это сведение, а не обещание */
.trust .indep { color: var(--ink); }
.trust .indep .icon { position: absolute; inset-inline-start: 0; top: .1em; width: 16px; height: 16px; color: var(--muted); }
.trust .indep a { color: var(--ink); font-weight: 600; }
.price-line { margin: var(--space-3) 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.price-line b { color: var(--ink); font-weight: 600; }

/* Лист измерений: белый лист в рамке 1px, поле с миллиметровкой и линейками, колонка замеров с нормой под каждым, вердикт — контурная таблетка */
.sheet { margin: 0; background: var(--white); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); overflow: hidden; }
.sheet-head, .sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px var(--space-4); }
.sheet-head { border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.sheet-head p { margin: 0; }
.sheet-head p:first-child { font-weight: 600; }
.sheet-spec { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sheet-foot { border-top: 1px solid var(--hairline); font-size: var(--fs-xs); color: var(--muted); flex-wrap: wrap; line-height: 1.4; }
.sheet-foot a { color: inherit; text-decoration-color: var(--hairline-3); }
.sheet-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(196px, 36%); }
.sheet-field { display: flex; flex-direction: column; justify-content: center; padding: 8px 16px 8px 0; background: var(--grid-paper) 0 0 / 40px 40px, var(--white); border-inline-end: 1px solid var(--hairline); }
.sheet-frame { position: relative; padding: 30px 0 20px 40px; }
.ruler { position: absolute; font-size: var(--fs-xs); line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.ruler span { position: absolute; }
.ruler-x { top: 2px; left: 40px; right: 0; height: 22px;
  background: repeating-linear-gradient(to right, var(--hairline-3) 0 1px, transparent 1px 10%) 0 100% / 100% 7px no-repeat,
    repeating-linear-gradient(to right, var(--hairline-2) 0 1px, transparent 1px 2%) 0 100% / 100% 4px no-repeat; }
.ruler-x span { top: 0; left: calc(var(--p) * 100%); transform: translateX(-50%); }
.ruler-x span:first-child { transform: none; }
.ruler-x span:last-child { transform: translateX(-100%); }
.ruler-y { left: 0; top: 30px; bottom: 20px; width: 40px;
  background: repeating-linear-gradient(to bottom, var(--hairline-3) 0 1px, transparent 1px 10%) 100% 0 / 7px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--hairline-2) 0 1px, transparent 1px 2%) 100% 0 / 4px 100% no-repeat; }
.ruler-y span { right: 11px; top: calc(var(--p) * 100%); transform: translateY(-50%); white-space: nowrap; }
.ruler-y span:first-child { transform: none; }
.ruler-y span:last-child { transform: translateY(-100%); }
.specimen { position: relative; aspect-ratio: 1; background: var(--white); outline: 1px solid var(--hairline-2); overflow: hidden; }
.specimen img, .specimen .tpl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.t-band { fill: var(--template-green); opacity: .16; }
.t-eye { stroke: var(--template-green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.t-limit { stroke: var(--template-red); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.t-axis { stroke: var(--ink); stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.t-dim { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sheet-tag { position: absolute; top: var(--y); left: 8px; padding: 2px 7px; border-radius: 4px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; color: var(--white); white-space: nowrap; transform: translateY(calc(-100% - 3px)); }
.tag-red { background: var(--bad); }
.tag-green { background: var(--ok); }
.tag-ink { background: var(--ink); font-variant-numeric: tabular-nums; }
.tag-below { transform: translateY(4px); }
.tag-dim { left: auto; right: 48px; transform: translateY(-50%); }
.sheet-scan { position: absolute; inset: 0; border-top: 2px solid var(--template-green); opacity: 0; pointer-events: none; }
.readout { display: flex; flex-direction: column; }
.readout ul { flex: 1; list-style: none; margin: 0; padding: 0; }
.readout li { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; padding: 10px var(--space-3); border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.readout .k { font-weight: 600; line-height: 1.25; }
.readout .k small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); }
.readout .num, .readout .v { font-variant-numeric: tabular-nums; white-space: nowrap; }
svg.tick { width: 16px; height: 16px; color: var(--ok); flex: none; } /* значок ✓ — только svg: .tick не должен задеть ничего другого */
.sheet-verdict { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: var(--space-4); padding: 6px 14px 6px 12px;
  border: 1px solid rgb(21 128 61 / .45); border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.sheet-verdict i { width: 8px; height: 8px; border-radius: 50%; background: var(--template-green); }
/* Один проход сканера при загрузке; финальное состояние — статичное (fill-mode both) */
@media (prefers-reduced-motion: no-preference) {
  .sheet-scan { animation: sheet-scan .6s linear .1s both; }
  .specimen .tpl { animation: sheet-reveal .6s linear .1s both; }
  .specimen .sheet-tag { animation: sheet-fade var(--dur-2) var(--ease-out) both; animation-delay: calc(.1s + .6s * var(--t)); }
  .readout li { animation: sheet-rise 240ms var(--ease-out) both; animation-delay: calc(.2s + var(--i) * 40ms); }
  .sheet-verdict { animation: sheet-rise 240ms var(--ease-out) .6s both; }
}
@keyframes sheet-scan { 0% { transform: translateY(0); opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes sheet-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.busy { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 3px solid var(--blue-200); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { color: var(--bad); background: var(--bad-bg); border-radius: var(--radius-md); padding: 10px 12px; margin: 14px 0 0; }
.error .skipped { margin: 6px 0 0; padding-inline-start: 18px; font-size: var(--fs-sm); }

/* Результаты */
.results { padding: 40px 20px; }
.verdict { border-radius: var(--radius-lg); padding: 18px 22px; margin-bottom: 24px; border: 1px solid; }
.verdict p { margin: 0; }
.verdict.ready { background: var(--ok-bg); border-color: var(--green-300); }
.verdict.fixable { background: var(--brand-soft); border-color: var(--blue-300); }
.verdict.retake { background: var(--bad-bg); border-color: var(--red-300); }
.verdict.small { padding: 12px 16px; margin-bottom: 12px; }
/* Оценка снимка 0–100 справа от вердикта: число крупно, под ним — словом */
.verdict:has(.score:not([hidden])) { display: flex; gap: 16px; align-items: flex-start; }
.verdict-text { flex: 1; min-width: 0; }
.score { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 88px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--hairline-2); text-align: center; }
.score-label { font-size: var(--fs-xs); color: var(--muted); line-height: 1.2; }
.score-value { display: flex; align-items: baseline; gap: 1px; font-variant-numeric: tabular-nums; direction: ltr; }
.score-num { font-size: 1.75rem; line-height: 1.1; font-weight: 700; }
.score-of { font-size: var(--fs-sm); color: var(--muted); }
.score-band { font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; }
.score.great .score-num, .score.great .score-band { color: var(--ok); }
.score.good .score-num, .score.good .score-band { color: var(--brand); }
.score.risky .score-num, .score.risky .score-band { color: var(--warn); }
.score.bad .score-num, .score.bad .score-band { color: var(--bad); }
.verdict.small .score { min-width: 76px; padding: 6px 8px; }
.verdict.small .score-num { font-size: 1.375rem; }
.check .ai-note { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.results-grid, .fixed { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 32px; align-items: start; }
.photo-box { margin: 0; position: sticky; top: 80px; }
.photo-box figcaption { font-weight: 600; margin-bottom: 8px; }
.photo-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.photo-frame.square { aspect-ratio: 1; }
.photo-frame img, .photo-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.legend { color: var(--muted); font-size: var(--fs-sm); margin-top: 8px; }
.legend a { color: inherit; }
.example { margin: 22px 0 0; }
.example-title { font-weight: 600; margin: 0 0 8px; }
.results .example .photo-frame { max-width: 220px; }
.example-big { margin: 0; }
.example-big .photo-frame { max-width: 340px; }
.summary { font-weight: 600; margin: 0 0 8px; }
.group { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin: 20px 0 8px; }
.checks { list-style: none; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.check { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); align-items: start; }
.check:first-child { border-top: 0; }
.check p { margin: 4px 0 0; font-size: var(--fs-sm); }
.check .tip { color: var(--muted); }
.check .icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); }
.check .status { font-size: var(--fs-xs); font-weight: 600; }
.check.pass .icon { background: var(--ok-bg); color: var(--ok); }
.check.pass .status { color: var(--ok); }
.check.warn .icon { background: var(--warn-bg); color: var(--warn); }
.check.warn .status { color: var(--warn); }
.check.fail { background: var(--red-25); }
.check.fail .icon { background: var(--bad-bg); color: var(--bad); }
.check.fail .status { color: var(--bad); }

.card.fix { margin-top: 32px; }  /* только карточка «Исправить»: у строк отчёта li.check.fix тоже класс fix */
.batch { margin-bottom: 24px; padding: 18px; }
.batch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.batch-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.batch-cards { display: flex; gap: 10px; overflow-x: auto; padding: 12px 2px 4px; }
.batch-card { flex: 0 0 120px; display: grid; gap: 4px; padding: 6px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor: pointer; font: inherit; text-align: start; }
.batch-card.active { border-color: var(--brand); }
.batch-card img, .batch-wait { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.batch-badge { font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-sm); padding: 1px 6px; justify-self: start; }
.batch-badge.ready { background: var(--ok-bg); color: var(--ok); }
.batch-badge.fixable { background: var(--blue-100); color: var(--brand-dark); }
.batch-badge.retake { background: var(--bad-bg); color: var(--bad); }
.batch-badge.old { background: var(--warn-bg); color: var(--warn); }
.batch-name { font-size: var(--fs-xs); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Выбор из галереи: вопрос «один человек?», кадры выбранного человека */
.same-q { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--warn-bg); }
.same-pics { display: flex; gap: 10px; }
.same-pics figure { margin: 0; display: grid; gap: 2px; justify-items: center; font-size: var(--fs-xs); color: var(--muted); }
.same-pics img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-md); }
.same-actions { display: flex; gap: 6px; }
.person { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.person-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.person-name { font: inherit; font-weight: 600; border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: 4px 10px; min-width: 0; width: 14em; }
.person .note { margin: 6px 0; }
.faces { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px; align-items: flex-start; }
.face { flex: 0 0 104px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.face .face-move { margin-top: auto; }
.face-pick { display: grid; gap: 4px; padding: 4px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--white); cursor: pointer; font: inherit; position: relative; }
.face.chosen .face-pick { border-color: var(--brand); }
.face-pick img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.batch-badge.chosen { background: var(--brand); color: var(--white); }
.person-label { color: var(--ink); font-weight: 600; }
.face-old { position: absolute; top: 8px; inset-inline-start: 8px; font-size: var(--fs-xs); font-weight: 600; background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm); padding: 0 5px; }
.face-move { font: inherit; font-size: var(--fs-xs); color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.face.moving .face-pick { border-color: var(--warn); }
.move-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.fix-controls { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.fix-controls label { display: flex; flex-direction: column; font-size: var(--fs-sm); color: var(--muted); gap: 4px; }
select { font: inherit; padding: 9px 10px; border-radius: var(--radius-md); border: 1px solid var(--control-border); background: var(--white); }
.fixed { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
/* «Что мы сделали»: было → стало по отчётам; цифры табличные, стрелка разворачивается в RTL (.arrow) */
/* div.done, а не .done: тот же класс у пройденного этапа пути (li.done) — без уточнения его обводило рамкой и сдвигало */
div.done { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--hairline-2); border-radius: var(--radius-md); }
div.done h3 { margin: 0 0 4px; font-size: var(--fs-base); }
.done-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); line-height: 1.4; }
.done-list li { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--hairline); }
.done-list li:first-child { border-top: 0; }
.done-label { color: var(--muted); }
.done-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.done-value .arrow { margin: 0 6px; color: var(--muted); font-weight: 400; }
.done-value small { display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.bg-nudge { display: grid; gap: 8px; justify-items: start; margin: 10px 0 0; }
.bg-nudge .btn-ghost { background: var(--white); box-shadow: inset 0 0 0 1px var(--blue-300); }
.bg-nudge .btn-ghost:hover { background: var(--blue-100); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); background: var(--brand); color: var(--white); border: 0; border-radius: var(--radius-md); padding: 10px 20px; font: inherit; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--dur-1) var(--ease-out); }
.btn:hover { background: var(--brand-dark); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-big { margin-top: 18px; min-height: var(--btn-big-h); padding: 14px 28px; font-size: var(--fs-lg); }
/* Второстепенные кнопки — без заливки: белая с рамкой 1px (синий текст) и контурная на бумаге (текст чернилами). Рамка — inset-тенью, чтобы высота не менялась */
.btn-ghost { background: var(--white); color: var(--brand); box-shadow: inset 0 0 0 1px var(--hairline-3); }
.btn-ghost:hover { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--blue-300); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--control-border); }
.btn-line:hover { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-l { min-height: var(--btn-h); padding-inline: 20px; }
.manual { margin-top: 32px; }
.unlock { display: grid; gap: 18px; margin-top: 16px; }
.unlock h3 { margin: 0 0 4px; font-size: var(--fs-base); }
.unlock p { margin: 0 0 8px; }
.unlock-credit, .unlock-free, .unlock-buy { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; }
.unlock-credit { background: var(--ok-bg); border-color: var(--green-300); }
.unlock-free { background: var(--green-50); }
.unlock .row { display: flex; gap: 8px; flex-wrap: wrap; }
.unlock .row input { flex: 1 1 200px; width: auto; }
.unlock label.inline { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.pack { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; display: grid; gap: 6px; align-content: start; }
.pack-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pack .price { font-weight: 700; font-size: var(--fs-lg); color: var(--brand-dark); }
.pack .note { margin: 0; }
.pay-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.pay-buttons .btn { padding: 8px 12px; font-size: var(--fs-sm); }
.ready-wrap { padding-top: 24px; }
.ready { text-align: center; background: var(--ok-bg); border-color: var(--green-300); }
.ready .btn-big { margin-top: 6px; }
.print-link { margin: 14px 0 0; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding: 6px 0; }
.checklist label { display: flex; gap: 10px; align-items: baseline; cursor: pointer; }

.feedback { margin-top: 16px; font-size: var(--fs-sm); }
.feedback summary { cursor: pointer; color: var(--muted); }
.feedback form { display: grid; gap: 10px; margin-top: 10px; max-width: 520px; }
.feedback label { display: grid; gap: 4px; color: var(--muted); }
.feedback label.inline { display: flex; gap: 8px; align-items: baseline; }
textarea, input[type=email] { font: inherit; padding: 9px 10px; border-radius: var(--radius-md); border: 1px solid var(--control-border); background: var(--white); width: 100%; }
.error-text { color: var(--bad); }

.camera-btn { width: 100%; display: flex; gap: 8px; align-items: center; justify-content: center; min-height: var(--btn-h); }
.tg-link { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; justify-content: center; text-align: center; margin-top: 10px; font-size: var(--fs-sm); color: var(--telegram); text-decoration: none; font-weight: 600; }
.tg-link:hover { text-decoration: underline; }
.camera { position: fixed; inset: 0; z-index: 100; background: var(--black); display: flex; flex-direction: column;
  overscroll-behavior: contain; touch-action: none; } /* жесты на экране камеры не листают и не масштабируют страницу под ним */
.camera button { touch-action: manipulation; }
.camera-stage { position: relative; flex: 1; overflow: hidden; }
.camera-stage video, .camera-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera .mirror { transform: scaleX(-1); }
.camera-hint { color: var(--white); text-align: center; font-size: var(--fs-lg); font-weight: 600; margin: 0; padding: 12px 16px; background: rgba(15, 23, 42, .85); min-height: 1.6em; }
.camera-hint.ok { background: var(--ok); }
.camera-hint.bad { background: var(--bad); }
/* Мягкая пометка под подсказкой: камера с низким разрешением */
.camera-note { color: var(--white); text-align: center; font-size: var(--fs-sm); margin: 0; padding: 0 16px 10px; background: rgba(15, 23, 42, .85); }
.camera-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: var(--space-4); padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--ink); direction: ltr; }
.cam-round { width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .15); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.cam-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); inset-inline-start: 12px; width: var(--tap); height: var(--tap); background: rgb(15 23 42 / .55); }
/* Таймер: иконка и подпись «3 с», а не один значок — понятно, что это и на сколько */
.cam-timer { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 16px; border: 2px solid transparent; border-radius: var(--radius-full); background: rgb(255 255 255 / .15); color: var(--white); font: inherit; font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast); }
.cam-timer[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.cam-timer:disabled, .cam-shutter:disabled, .cam-round:disabled { opacity: .4; cursor: not-allowed; }
.cam-shutter { width: 72px; height: 72px; border-radius: 50%; border: 5px solid var(--white); background: rgb(255 255 255 / .25); cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.cam-shutter:active { background: var(--white); }
/* Всё в порядке — спуск «готов»: зелёное кольцо (как овал), но снимает только человек */
.cam-shutter.ready { border-color: var(--green-500); box-shadow: 0 0 0 4px rgb(34 197 94 / .35); }
/* Обратный отсчёт крупно поверх видео */
.cam-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--white); font-size: clamp(6rem, 30vmin, 12rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgb(0 0 0 / .55); }
.cam-count.ticking { animation: cam-tick 1s var(--ease-out); }
@keyframes cam-tick { from { transform: scale(1.25); opacity: 0; } 20% { transform: none; opacity: 1; } 85% { opacity: 1; } to { opacity: .2; } }
/* Стоп-кадр: весь кадр, который уйдёт на проверку, — без зеркала и без обрезки по краям экрана */
#cam-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--black); }
.cam-review { grid-template-columns: 1fr 1fr; gap: var(--space-3); align-items: stretch; padding-inline: max(16px, (100% - 520px) / 2); }
.cam-review .btn { width: 100%; min-height: var(--btn-h); padding-inline: 12px; }
.cam-retake { background: rgb(255 255 255 / .15); color: var(--white); }
.cam-retake:hover { background: rgb(255 255 255 / .25); }
.cam-use { background: var(--white); color: var(--brand-dark); }
.cam-use:hover { background: var(--blue-100); }
body.camera-open { overflow: hidden; }

.guide article { font-size: var(--fs-base); }
.guide article h2 { margin-top: 1.6em; font-size: var(--fs-xl); }
.guide article li { margin: 4px 0; }
.crumbs { margin: 0 0 12px; font-size: var(--fs-sm); }
.guide-cta { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin: 40px 0; background: var(--brand-soft); border-color: var(--blue-200); box-shadow: none; }
.guide-cta h2 { margin: 0 0 4px; font-size: var(--fs-xl); }
.guide-cta p { margin: 0; color: var(--muted); }
.guide-cta .btn-big { margin: 0; }
.guide-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.guide-list.cols { grid-template-columns: repeat(3, 1fr); }
.guide-list li { padding: 0; }
.guide-list a { font-weight: 600; font-size: var(--fs-lg); line-height: 1.4; color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-3); text-underline-offset: .25em; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); }
.guide-list a:hover { color: var(--brand); text-decoration-color: currentColor; }
.guide-list p { margin: 6px 0 0; color: var(--muted); font-size: var(--fs-sm); }

.pay-buttons .btn:disabled { opacity: .55; cursor: not-allowed; }

/* Помощник по заявке */
.progress { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 10px; }
.progress .bar { flex: 1; height: 6px; background: var(--line); border-radius: var(--radius-full); overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-full); }
details.passed { margin-top: 18px; }
details.passed > summary { cursor: pointer; color: var(--ok); font-weight: 600; padding: 10px 14px; border: 1px solid var(--green-200); background: var(--green-50); border-radius: var(--radius-md); list-style: none; }
details.passed > summary::-webkit-details-marker { display: none; }
details.passed > summary::before { content: "✓ "; }
details.passed[open] > summary { margin-bottom: 4px; }
.show-sm { display: none; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 40px; height: 36px; box-shadow: inset 0 0 0 1px var(--hairline-2); border-radius: var(--radius-sm); color: var(--ink); transition: box-shadow var(--transition-fast); }
.menu summary:hover, .lang summary:hover { box-shadow: inset 0 0 0 1px var(--hairline-3); }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: var(--white); border-radius: var(--radius-md); min-width: 220px; z-index: 30; }
.menu li a { display: block; padding: 11px 12px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; }
.menu li a:hover { background: var(--bg); }
.fix-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: var(--shadow-bar); }
.fix-bar .btn { width: 100%; margin: 0; }
.field .label { font-weight: 600; font-size: var(--fs-sm); }
.field .label .opt { font-weight: 400; color: var(--muted); }
.choices { display: grid; gap: 6px; }
.choices.row { display: flex; flex-wrap: wrap; }
.choice { font: inherit; text-align: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 9px 12px; cursor: pointer; color: var(--ink); display: flex; gap: 10px; align-items: center; }
.choice::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--control-border); flex: none; box-sizing: border-box; }
.choice:hover { border-color: var(--blue-300); }
.choice.on { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }
.choice.on::before { border: 5px solid var(--brand); }
.field.show-error .choices .choice { border-color: var(--red-300); }
.date-parts { display: flex; align-items: center; gap: 6px; }
.date-parts input { font: inherit; text-align: center; padding: 10px 6px; border-radius: var(--radius-md); border: 1px solid var(--control-border); background: var(--white); font-variant-numeric: tabular-nums; }
.date-parts .dd, .date-parts .mm { width: 4.2em; }
.date-parts .yyyy { width: 6em; }
.date-parts .sep { color: var(--muted); font-size: var(--fs-xl); }
.field.show-error .date-parts input { border-color: var(--red-300); background: var(--red-25); }
.country { position: relative; }
.country-list { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 4px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); max-height: 300px; overflow-y: auto; }
.country-list li { padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.country-list li.active, .country-list li:hover { background: var(--brand-soft); }
.country-list li.empty { color: var(--muted); cursor: default; }
.reader { background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 18px; }
.reader h3 { margin-top: 0; }
.import-box { margin: 16px 0 0; }
.import-box summary { cursor: pointer; font-weight: 600; }
.import-box[open] summary { margin-bottom: 8px; }
.import-text { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-sm); padding: 10px 12px; border: 1px solid var(--control-border); border-radius: var(--radius-md); background: var(--white); resize: vertical; margin: 4px 0 10px; }
.import-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.import-files { margin: 12px 0 0; }
.reader .consent { margin: 4px 0 10px; color: var(--ink); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.form-page { max-width: 1060px; }
.form-privacy { display: flex; gap: 8px; align-items: flex-start; background: var(--ok-bg); border-radius: var(--radius-md); padding: 10px 14px; font-size: var(--fs-sm); }
.form-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; margin: 20px 0; }
.form-steps { display: grid; gap: 4px; position: sticky; top: 80px; }
.form-step { display: flex; gap: 10px; align-items: center; text-align: start; background: none; border: 0; border-radius: var(--radius-md); padding: 9px 10px; font: inherit; cursor: pointer; color: var(--ink); }
.form-step:hover { background: var(--bg); }
.form-step.active { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600; }
.form-step .num { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-size: var(--fs-xs); flex: none; }
.form-step.active .num { background: var(--brand); color: var(--white); }
.form-card h2 { font-size: var(--fs-xl); }
.form-card h2:focus { outline: none; }  /* фокус на заголовок ставит скрипт при смене шага — опора для диктора, а не элемент управления */
.form-card h3 { margin: 22px 0 8px; font-size: var(--fs-base); }
.field { margin: 0 0 14px; }
.field label { display: block; font-weight: 600; font-size: var(--fs-sm); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field-help { margin: 2px 0 6px; color: var(--muted); font-size: var(--fs-sm); }
.field input, .field select { font: inherit; width: 100%; padding: 9px 10px; border-radius: var(--radius-md); border: 1px solid var(--control-border); background: var(--white); }
.field input:disabled { background: var(--bg); }
.field.show-error input, .field.show-error select { border-color: var(--red-300); background: var(--red-25); }
.field-warn { color: var(--warn); font-size: var(--fs-sm); margin: 4px 0 0; }
.field-warn:empty { display: none; }
.field-hint { font-size: var(--fs-sm); margin-top: 4px; }
.field-count { display: block; text-align: end; font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px; }
.field-count:empty { display: none; }
.field-hint:empty { display: none; }
.field-error { display: none; color: var(--bad); font-size: var(--fs-sm); margin: 4px 0 0; }
.field.show-error .field-error:not(:empty) { display: block; }
.field.show-error .label, .field.show-error > label { color: var(--bad); }
.btn-sm { padding: 4px 10px; font-size: var(--fs-sm); }
.check-inline { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); color: var(--muted); margin: -6px 0 14px; cursor: pointer; }
.person { border-inline-start: 1px solid var(--hairline-2); padding-inline-start: 14px; }
.callout { background: var(--brand-soft); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--fs-sm); }
.callout.warn { background: var(--warn-bg); }
.callout.ok { background: var(--ok-bg); }
.fix-text .callout.ok { margin: 0 0 12px; }
.form-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; }
.form-alert { flex-basis: 100%; margin: 0; background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-md); padding: 9px 12px; font-size: var(--fs-sm); font-weight: 600; }
.form-alert a { color: inherit; font-weight: 400; }
.single-name { margin: -8px 0 14px; font-size: var(--fs-sm); }
.form-summary { border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 16px; }
.form-summary.ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.form-summary.bad { background: var(--bad-bg); }
.form-summary.bad > p { margin: 0 0 8px; color: var(--bad); }
.form-summary.warn { background: var(--warn-bg); }
.form-summary.warn > p { margin: 0 0 8px; color: var(--amber-900); }
.form-summary ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.form-summary .btn { background: var(--white); }
.scan { border: 1px dashed var(--blue-300); border-radius: var(--radius-md); padding: 14px 16px; margin-top: 20px; }
.scan-preview { max-width: 100%; max-height: 360px; display: block; margin: 12px 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.photo-people { list-style: none; padding: 0; display: grid; gap: 8px; }
.photo-people .check-inline { display: inline-flex; margin: 0; color: var(--ink); }
.copy-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.copy-table th { text-align: start; font-weight: 500; color: var(--muted); width: 42%; padding: 6px 8px 6px 0; vertical-align: top; }
.copy-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); word-break: break-word; }
.copy-table td.missing { color: var(--bad); }
.copy-table td.empty { color: var(--muted); }
.copy-table td.select { color: var(--muted); }
.copy-table td.select b { color: var(--ink); font-weight: 600; }
.copy-table .bad-value { color: var(--ink); }
.copy-table .row-warn { color: var(--warn); margin-top: 2px; }
.copy-table td:last-child { width: 1%; white-space: nowrap; text-align: end; }
.checklist-card { margin: 20px 0; box-shadow: none; }
/* Запасное копирование (form.js copyText): поле вне глаз, 16px — чтобы iOS не увеличивал страницу при фокусе */
.copy-buffer { position: fixed; top: 0; inset-inline-start: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: var(--fs-base); }
.print-only { display: none; }
@media print {
  .nav, .footer, .route, .form-steps, .form-nav, .form-privacy, #form-import, #form-clear, .lead, h1, .copy-table .btn, .checklist-card + .field, .note,
  .status-banner, .screen-only, .form-summary ul, .form-card .progress, .callout.warn[role="status"] { display: none !important; }
  .print-only { display: block; }
  .print-head p { margin: 0 0 4px; }
  .form-layout { display: block; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .copy-section, .checklist-card { break-inside: avoid; }
}

/* Лендинг */
.section { padding: var(--section-y) 20px; }
.section > h2 { margin-bottom: var(--space-8); }
.section > h2:has(+ .lead) { margin-bottom: var(--space-3); }
.section + .section { padding-top: 0; }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
/* Шкала пути: одна линия и точки этапов, первая — синяя (с неё начинают); порядок держит положение, а не номера */
.steps::before { content: ""; position: absolute; inset-inline: 0; top: 5px; border-top: 1px solid var(--hairline-3); }
.steps li { position: relative; padding-top: var(--space-8); }
.steps li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper); }
.steps li:first-child::before { background: var(--brand); }
.steps h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.steps p { margin: 0; color: var(--muted); max-width: 38ch; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.ticks { padding: 0; list-style: none; }
.ticks li { padding-block: 5px; padding-inline-start: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 3px; top: calc(5px + .35em); width: 11px; height: 6px; border: 2px solid var(--ok); border-top: 0; border-right: 0; transform: rotate(-45deg); }
.template { margin: 0; }
.two-col .template-svg { max-width: 320px; }
.template-svg { width: 100%; max-width: 340px; display: block; margin: 0 auto; border-radius: var(--radius-md); }
.faq-list { border-bottom: 1px solid var(--hairline-2); }
.faq { border-top: 1px solid var(--hairline-2); }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: var(--space-4) 0; min-height: var(--tap); transition: color var(--transition-fast); }
.faq summary:hover { color: var(--brand); }
.faq[open] { padding-bottom: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-weight: 400; font-size: var(--fs-xl); line-height: 1; color: var(--muted); }
.faq[open] summary::after { content: "−"; }
.faq p { max-width: var(--measure); color: var(--muted); margin: 0; }
.page { padding: 48px 20px; max-width: 860px; }
.req-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; margin: 24px 0; }
.req-grid h2 { font-size: var(--fs-xl); margin-top: 8px; }

/* Финальный призыв: короткая фраза и одна кнопка на синем — последнее, что видно перед подвалом */
.final-cta { background: var(--brand); color: var(--white); padding: var(--section-y) 0; margin-top: var(--section-y); }
.final-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-16); align-items: end; }
.final-cta h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); max-width: 20ch; }
.final-cta p { margin: 0; color: var(--blue-100); font-size: var(--fs-lg); max-width: 48ch; }
.final-actions { display: grid; gap: var(--space-3); justify-items: center; }
.final-actions .btn-big { margin: 0; background: var(--white); color: var(--brand-dark); min-width: 18rem; }
.final-actions .btn-big:hover { background: var(--blue-100); }
.final-actions .tg-link { margin: 0; color: var(--white); font-weight: 600; }
.final-actions .tg-link .tg-handle { color: var(--blue-100); }
main:has(> .final-cta:last-child) + .footer { margin-top: 0; }  /* финальный призыв — вплотную к подвалу */

.footer { background: var(--bg); border-top: 1px solid var(--hairline); padding: var(--space-12) 0 var(--space-8); margin-top: var(--space-16); font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.footer-brand .logo { margin-bottom: var(--space-3); }
.footer-brand .disclaimer { margin: 0; color: var(--muted); max-width: 40ch; }
.footer-h { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 0 0 var(--space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-col a { color: var(--muted); text-decoration: none; transition: color var(--transition-fast); overflow-wrap: anywhere; }
.footer-col a:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }

/* Закреплённая кнопка на телефоне: появляется, когда кадр загрузки ушёл с экрана (app.js); у отчёта и готового фото — своя панель */
.cta-bar { display: none; }
@media (max-width: 600px) {
  .cta-bar { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 39; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper); border-top: 1px solid var(--hairline-2); box-shadow: var(--shadow-bar);
    transform: translateY(110%); visibility: hidden; transition: transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
  .cta-bar.on { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
  .cta-bar .btn { width: 100%; margin: 0; }
}

@media (max-width: 860px) {
  .hero-grid, .results-grid, .fixed, .two-col, .req-grid, .packs { grid-template-columns: 1fr; }
  .steps, .guide-list.cols, .form-layout { grid-template-columns: 1fr; }
  .steps { gap: var(--space-6); }
  .steps::before { top: 8px; bottom: 8px; inset-inline-start: 5px; inset-inline-end: auto; border-top: 0; border-inline-start: 1px solid var(--hairline-3); }
  .steps li { padding: 0; padding-inline-start: 32px; }
  .steps li::before { top: 6px; }
  .steps h3 { margin: 0 0 var(--space-1); font-size: var(--fs-lg); }
  .form-steps { position: static; display: flex; overflow-x: auto; }
  .form-step { flex: none; }
  .photo-box { position: static; }
  .hide-sm { display: none; }
  .show-sm { display: block; }
  .nav-links { gap: 12px; }
}

/* Письмо справа налево (ar, fa): раскладка зеркалится сама, а снимок и шаблон поверх него — нет */
[dir="rtl"] .photo-frame, [dir="rtl"] .template-svg { direction: ltr; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; }
/* Арабское письмо: без трекинга и с запасом по высоте строки — точки и огласовки не должны задевать соседнюю строку */
:root:lang(ar), :root:lang(fa) { --ls-display: 0; --ls-heading: 0; --lh-tight: 1.3; --lh-heading: 1.35; }
[dir="rtl"] .arrow { display: inline-block; transform: scaleX(-1); }

/* Телефон: главное действие — на первом экране, меньше прокрутки, крупные цели для пальца */
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .nav .wrap { min-height: 56px; }
  .nav-links { gap: 8px; }
  .lang summary { padding: 6px 8px; }
  .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec label { padding: 4px; min-height: var(--tap); }
  .tool-facts { margin-top: var(--space-4); }
  .card { padding: 16px; border-radius: var(--radius-md); }
  .section { padding: var(--section-y) 16px; }
  .section + .section { padding-top: 0; }
  .final-grid { grid-template-columns: 1fr; }
  .final-actions { justify-items: stretch; }
  .final-actions .btn-big { min-width: 0; }
  .results { padding: 20px 16px 90px; }
  .results .example { display: none; }
  .verdict { padding: 14px 16px; }
  .check { padding: 10px 12px; grid-template-columns: 24px 1fr; }
  .check .status { grid-column: 2; }
  /* Компактно: поле и кнопка в строку; flex-basis поля в столбце превращался в высоту 200px */
  .guide-cta, .form-cta { flex-direction: column; align-items: stretch; text-align: start; }
  .btn-big { width: 100%; text-align: center; }
  .page { padding: 24px 16px; }
  .form-page h1 { font-size: var(--fs-h2); }
  .form-page .lead { display: none; }
  .form-privacy { font-size: var(--fs-sm); padding: 8px 12px; }
  .form-layout { margin: 12px 0; gap: 12px; }
  .form-steps { margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .form-step { padding: 7px 10px; font-size: var(--fs-sm); }
  .form-card { padding: 16px; }
  .person { padding-inline-start: 10px; }
  .form-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; margin: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: var(--shadow-bar); gap: 10px; }
  .form-nav .btn { flex: 1; text-align: center; padding: 13px; }
  .form-typing .form-nav { display: none; }  /* открыта клавиатура — панель не закрывает поле и список стран (form.js) */
  .form-page { padding-bottom: 90px; }
  .choice { padding: 12px 14px; }
  .btn-sm { padding: 8px 12px; }
  .copy-table, .copy-table tbody, .copy-table tr { display: block; }
  .copy-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .copy-table th { grid-column: 1 / -1; width: auto; padding: 0; font-size: var(--fs-sm); }
  .copy-table td { border: 0; padding: 0; }
  .copy-table td:last-child { width: auto; }
  .packs { grid-template-columns: 1fr; }
  .footer-col ul { gap: 0; }
}
#results, #fixed, #fix, #form-card, #check, #pricing, #waitlist, #faq { scroll-margin-top: 72px; }

/* Баннер статуса регистрации */
.status-banner { background: var(--warn-bg); font-size: var(--fs-sm); }
.status-banner .wrap { display: flex; gap: 10px; align-items: center; padding-block: 8px; flex-wrap: wrap; }
.status-banner span { flex: 1 1 260px; }
.status-banner a { font-weight: 600; white-space: nowrap; }
.status-banner button { background: none; border: 0; font-size: var(--fs-xl); line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }
/* Выбор фона */
.bg-choice { display: grid; gap: 8px; margin: 12px 0; }
.bg-option { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; background: var(--white); }
.bg-option:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.bg-option input { margin-top: 4px; accent-color: var(--brand); }
.bg-option span { display: grid; gap: 2px; }
.bg-option small { color: var(--muted); font-size: var(--fs-sm); }
#bg-bad .btn-sm { margin-inline-start: 6px; }
.guarantee, .guarantee-note { display: flex; gap: 8px; align-items: flex-start; }
.guarantee { margin: 14px 0; font-size: var(--fs-sm); color: var(--ok); }
#save-photos { margin-inline-start: 8px; }
@media (max-width: 600px) { #save-photos { margin: 10px 0 0; } }
@media (max-width: 600px) {
  .status-banner { font-size: var(--fs-xs); line-height: 1.4; }
  .status-banner .wrap { padding-block: 6px; gap: 6px; }
  .status-banner span { flex-basis: 100%; }
  .badge { font-size: var(--fs-xs); padding: 3px 10px; }
}

/* Свои чекбоксы и радиокнопки вместо системных (семантика и клавиатура — родные) */
input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 0;
  border: 2px solid var(--control-border); background: var(--white); display: inline-grid; place-content: center; cursor: pointer; vertical-align: -4px;
  transition: border-color var(--transition-fast), background var(--transition-fast); }
input[type="checkbox"] { border-radius: var(--radius-sm); }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked { background: var(--brand); border-color: var(--brand); }
input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border: 2.5px solid var(--white); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
input[type="radio"]:checked { border: 6px solid var(--brand); }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--brand); }
.spec label input[type="radio"] { width: 16px; height: 16px; }
.spec label input[type="radio"]:checked { border-width: 5px; }
/* Чипы-варианты («Что не так?») */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chip { font: inherit; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: var(--radius-full); padding: 6px 12px; cursor: pointer; }
.chip:hover { border-color: var(--blue-300); }
.chip.fail { border-color: var(--red-200); }
.chip.warn { border-color: var(--amber-200); }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--white); }
.chip.more { color: var(--brand); border-style: dashed; }
.fb-label { color: var(--muted); }
.shake { animation: shake var(--dur-3) var(--ease-out); }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Всплывающее сообщение */
.toast { position: fixed; inset-inline: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; max-width: 480px; margin: 0 auto;
  background: var(--ink); color: var(--white); border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--fs-sm); box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.toast.show { opacity: 1; transform: none; }
/* Переключатель количества */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.stepper .step { font: inherit; font-size: var(--fs-xl); width: 52px; height: 48px; border: 0; background: var(--bg); cursor: pointer; color: var(--brand); }
.stepper .step:disabled { color: var(--slate-300); cursor: default; }
.stepper .count { min-width: 56px; text-align: center; font-size: var(--fs-xl); font-weight: 700; }
.btn.danger { background: var(--bad); color: var(--white); border-color: var(--bad); }
/* Чекбокс в строке с текстом — по первой строке, а не по базовой линии */
.checklist label, .check-inline, label.inline, .feedback label.inline, .unlock label.inline { align-items: flex-start !important; }
.checklist label input, .check-inline input, label.inline input { margin-top: 2px; }

/* Пример выбора из галереи: сетка «как в телефоне» → строки по людям, лучший кадр отмечен */
/* Компьютер: доска не шире 480px, заголовок и текст — одним блоком по центру её высоты (без пустого поля над заголовком) */
.gallery-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". stage" "head stage" "text stage" ". stage"; column-gap: var(--space-16); }
.gd-head { grid-area: head; }
.gd-text { grid-area: text; }
.gd-stage { grid-area: stage; }
.gd-head h2 { margin-bottom: 0; }
.gd-text .btn { margin-top: 8px; }
.gd-text .note { margin-top: 10px; }
.gd-stage { display: grid; gap: 12px; align-content: start; }
.gd-switch { display: flex; gap: 6px; justify-content: center; }
.gd-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: var(--radius-lg); background: var(--bg); }
.gd-shot { margin: 0; position: relative; border-radius: var(--radius-md); overflow: hidden; border: 3px solid transparent; transition: border-color var(--dur-3) var(--ease-out), opacity var(--dur-3) var(--ease-out); }
.gd-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: filter var(--dur-3) var(--ease-out); }
.gd-shot figcaption { position: absolute; inset: auto 6px 6px; display: flex; justify-content: center; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
.gd-why { font-size: var(--fs-sm); line-height: 1.2; text-align: center; font-weight: 600; background: var(--bad-bg); color: var(--bad); border-radius: var(--radius-sm); padding: 1px 6px; }
.gd-board[data-state="after"] .gd-shot figcaption { opacity: 1; transition-delay: 450ms; }
.gd-board[data-state="after"] .gd-shot.best { border-color: var(--brand); }
.gd-board[data-state="after"] .gd-shot:not(.best) img { filter: grayscale(.6) brightness(.9); }
.gd-board[data-state="after"] [data-who="dad"] { grid-row: 1; }
.gd-board[data-state="after"] [data-who="mom"] { grid-row: 2; }
.gd-board[data-state="after"] [data-who="kid"] { grid-row: 3; }
.gd-board[data-state="after"] [data-rank="0"] { grid-column: 1; }
.gd-board[data-state="after"] [data-rank="1"] { grid-column: 2; }
.gd-board[data-state="after"] [data-rank="2"] { grid-column: 3; }
@media (max-width: 820px) {
  .gallery-demo { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "head" "stage" "text"; row-gap: 16px; }
  .gd-board { padding: 8px; gap: 6px; }
  .gd-why { font-size: var(--fs-xs); }
}

/* Исправимое в исходном отчёте — не «Проблема»: сделаем сами */
.check.fix .icon { background: var(--blue-100); color: var(--brand-dark); }
.check.fix .status { color: var(--brand-dark); }
/* Итог перехода по ссылке из письма и оплаты — в начале страницы, в потоке (не закрывает заголовок, а сдвигает его);
   при прокрутке липнет под шапкой, пока не закроют */
.notice { position: sticky; top: 72px; z-index: 40; width: min(720px, 100% - 32px); margin: 12px auto 0; display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius-md); background: var(--ok-bg); color: var(--green-900); border: 1px solid var(--green-300); box-shadow: var(--shadow-pop); }
.notice.warn { background: var(--warn-bg); color: var(--amber-900); border-color: var(--amber-300); }
.notice span { flex: 1; }
.notice button { border: 0; background: none; font-size: var(--fs-xl); line-height: 1; cursor: pointer; color: inherit; padding: 0 4px; }
.ready-photo { width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); display: block; margin: 0 auto 12px; border: 1px solid var(--line); }
.buy-email { display: grid; gap: 4px; font-weight: 600; margin: 4px 0 12px; }
.buy-email input { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--control-border); border-radius: var(--radius-md); }
.buy-email small { font-weight: 400; }
/* Якоря (#check, #gallery-demo…) не прячутся под закреплённой шапкой */
[id] { scroll-margin-top: 80px; }

/* Галерея: причина под кадром, «лучший по проверке», загрузка отчёта кадра, список пропущенных файлов */
.face-why { font-size: var(--fs-xs); font-weight: 600; color: var(--bad); line-height: 1.25; }
.batch-badge.best-auto { background: var(--indigo-100); color: var(--brand-dark); }
.face.loading .face-pick::after { content: ""; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--blue-200); border-top-color: var(--brand); animation: spin .8s linear infinite; }
#batch-note p { margin: 4px 0; }
#batch-note .skipped { margin: 4px 0 0; padding-inline-start: 18px; font-size: var(--fs-sm); color: var(--muted); }
#person-old { margin: 6px 0; }

/* На сенсорных экранах «перетащите» не к месту — показываем «нажмите, чтобы выбрать» */
@media (hover: none) and (pointer: coarse) { .drop-mouse { display: none; } }
/* Цели нажатия на телефоне — от 44px */
@media (max-width: 600px) {
  .footer-col a { display: inline-block; padding: 10px 0; }
  .chip { min-height: 40px; }
  .feedback summary { display: inline-block; padding: 10px 0; }
}

/* Путь: проверка → готовое фото → заявка → подача. В отчёте полоса липкая — видно, где ты, пока листаешь отчёт и оплату */
.route ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.route li { position: relative; }
.route li + li::before { content: ""; position: absolute; top: 13px; inset-inline-start: calc(-50% + 20px); width: calc(100% - 40px); height: 2px; background: var(--line); }
.route li.done + li::before { background: var(--green-300); }
.route a { display: grid; justify-items: center; gap: 4px; padding: 0 4px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.25; text-align: center; text-decoration: none; }
.route a:hover .name { text-decoration: underline; }
.route .num { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); background: var(--white); border: 2px solid var(--line); }
.route .active a { color: var(--ink); font-weight: 600; }
.route .active .num { background: var(--brand); border-color: var(--brand); color: var(--white); box-shadow: 0 0 0 4px var(--blue-100); }
.route .done a { color: var(--ok); }
.route .done .num { background: var(--ok-bg); border-color: var(--green-300); font-size: 0; }
.route .done .num::before { content: "✓"; font-size: var(--fs-sm); }
.route .warn a { color: var(--warn); }
.route .warn .num { background: var(--warn-bg); border-color: var(--amber-300); color: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); font-size: 0; }
.route .warn .num::before { content: "!"; font-size: var(--fs-sm); }
.results .route { position: sticky; top: 60px; z-index: 9; margin: -16px 0 20px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.results .photo-box { top: 140px; }
/* Внутри отчёта якоря не прячутся под липкими шапкой и полосой пути: --sticky-h — их настоящая высота (app.js stickyHeight).
   #results в селекторе — чтобы перебить общее правило #fixed, #fix { scroll-margin-top: 72px } */
#results [id] { scroll-margin-top: calc(var(--sticky-h, 140px) + 12px); }
.form-page .route { max-width: 640px; margin: 0 0 24px; }
.next-step { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--green-50); border-color: var(--green-300); box-shadow: none; }
.next-step h2 { margin: 0 0 6px; font-size: var(--fs-xl); }
.next-step p { margin: 0 0 6px; max-width: 620px; }
.next-actions { display: grid; gap: 8px; }
.next-actions .btn { margin: 0; text-align: center; }
.ready-wrap .next-step { margin-top: 16px; text-align: start; }
.steps a { display: inline-block; margin-top: 10px; font-weight: 600; text-decoration: none; }
.steps a:hover { text-decoration: underline; }
@media (max-width: 860px) {
  .steps a { margin-top: 4px; }
}
@media (max-width: 600px) {
  .route a { font-size: var(--fs-xs); gap: 3px; padding: 0 2px; }
  .route .num { width: 24px; height: 24px; font-size: var(--fs-xs); }
  .route li + li::before { top: 11px; inset-inline-start: calc(-50% + 16px); width: calc(100% - 32px); }
  .results .route { top: 56px; margin: -8px -16px 14px; padding: 8px 16px; }
  .results .photo-box { top: auto; }
  #results [id] { scroll-margin-top: calc(var(--sticky-h, 112px) + 12px); }
  .form-page .route { margin-bottom: 14px; }
  .next-step { flex-direction: column; align-items: stretch; }
  .next-actions .btn-big { margin: 0; }
}

/* Доступность (docs/design-system.md → QA). Фокус с клавиатуры — одно заметное кольцо на всём интерактивном */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
.camera :focus-visible { outline-color: var(--white); }
/* Сенсорный экран: цели нажатия не меньше 44px */
@media (pointer: coarse) {
  .btn-sm, .chip, .lang summary, .menu summary, .route a, .face-move, .person-name { min-height: var(--tap); }
  .btn-sm, .chip { display: inline-flex; align-items: center; justify-content: center; }
  .face-move { display: block; width: 100%; }
  .notice button, .status-banner button, #toast button { min-width: var(--tap); min-height: var(--tap); }
  /* Помощник: строки «No … Name» / «Birth City Unknown», вкладки шагов и страны в списке — тоже от 44px */
  .check-inline { padding-block: 12px; margin-block: -14px 2px; }
  .form-step { min-height: var(--tap); }
  .country-list li { min-height: var(--tap); display: flex; align-items: center; }
  .status-banner button { margin-block: -12px; }  /* зона нажатия 44px, а баннер не становится выше */
  .menu summary { width: var(--tap); }
  .hero-text .gd-link { padding-block: 10px; }
}
/* «Уменьшить движение»: без плавной прокрутки, переходов и анимаций (спиннер крутится — это индикатор работы) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *:not(.spinner), *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Иконки и поверхности браузера — в цветах системы */
.icon { flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.guarantee .icon, .guarantee-note .icon, .form-privacy .icon { margin-top: .15em; }
.status-banner .icon { color: var(--warn); }
::selection { background: var(--blue-100); color: var(--ink); }
input, textarea { caret-color: var(--brand); }
a { text-underline-offset: .18em; text-decoration-thickness: 1px; }

.gd-switch .chip { border: 0; background: var(--paper-2); }
.gd-switch .chip.on { background: var(--ink); color: var(--white); }
.lang[open] ul { box-shadow: var(--shadow-pop); }
.menu[open] ul { box-shadow: var(--shadow-pop); }
.tg-handle { font-weight: 400; }

/* ===== Главная: сдержанные секции на бумаге (смысл — docs/design-system.md → «Главная»). Один акцент на экран — синяя кнопка ===== */

/* Регистрация DV и лист ожидания — тихая полоса тоном бумаги после цен (на главной вместо верхнего баннера) */
.band { background: var(--paper-2); padding: var(--space-12) 0; }
.band-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6) var(--space-16); align-items: end; }
.band h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); max-width: 28ch; }
.band p { margin: 0; color: var(--muted); max-width: 56ch; }
.band a { color: var(--ink); }
.band form { display: flex; gap: 8px; flex-wrap: wrap; }
.band input { flex: 1 1 200px; width: auto; min-height: var(--btn-h); }
.band .btn { min-height: var(--btn-h); }
.band .note { flex-basis: 100%; margin: 0; }

   (увеличение не больше 1.45×), выровнен по линии глаз с готовым фото 600×600 */

/* Нормы Госдепа одной таблицей «Параметр / Норма / Пример» (строки — тонкие линии); последняя группа — что проверяете только вы (пустой флажок) */
.norms-head h2 { margin: 0 0 var(--space-3); }
.norms-head .lead { margin: 0; max-width: 60ch; }
.table-wrap { overflow-x: auto; margin-top: var(--space-8); max-width: 960px; }
.norms-table { width: 100%; border-collapse: collapse; }
.norms-table th, .norms-table td { padding-block: 12px; padding-inline: 0 var(--space-4); text-align: start; vertical-align: baseline; border-bottom: 1px solid var(--hairline); }
.norms-table thead th { padding-top: 0; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); border-bottom-color: var(--hairline-3); }
.norms-table tbody th { font-weight: 600; }
.norms-table td { color: var(--muted); }
.norms-table td.val { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.norms-table td:last-child, .norms-table th:last-child { width: 24px; padding-inline-end: 0; }
.norms-table .tick { vertical-align: middle; }
.norms-table .grp th { padding-block: var(--space-8) var(--space-2); font-size: var(--fs-sm); color: var(--ink); border-bottom-color: var(--hairline-2); }
.norms-table tbody .grp:first-child th { padding-top: var(--space-4); }
.norms-table .self-rows td { position: relative; width: auto; padding-inline-start: 30px; color: var(--ink); }
.norms-table .self-rows td::before { content: ""; position: absolute; inset-inline-start: 0; top: 14px; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--white); }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: var(--space-4); font-weight: 600; }

/* Цены — строки: что входит · цена · действие; выгодная строка отмечена контурным бейджем, без второй заливки */
.pricing > h2 { margin: 0; }
.price-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; border-top: 1px solid var(--hairline-3); }
.price-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px 240px; gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-bottom: 1px solid var(--hairline-2); }
.price-title { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 4px; }
.price-what h3 { margin: 0; font-size: var(--fs-xl); }
.price-what ul { list-style: none; margin: 0; padding: 0; color: var(--muted); font-size: var(--fs-sm); }
.price-big { font-size: var(--fs-h2); font-weight: 600; margin: 0; letter-spacing: var(--ls-heading); line-height: 1.1; }
.price-per { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.price-badge { color: var(--ink); border: 1px solid var(--hairline-3); font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-full); padding: 2px 10px; }
.price-row .btn { width: 100%; margin: 0; min-height: var(--btn-h); padding: 10px 20px; font-size: var(--fs-base); }
.pay-methods { margin-top: var(--space-5); color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: var(--fs-sm); }
.pay-methods .method { border: 1px solid var(--hairline-2); border-radius: var(--radius-full); padding: 4px 12px; color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }
.pay-methods a.method:hover { border-color: var(--hairline-3); background: var(--white); }
/* Гарантия — крупной фразой на тональной подложке, условия и ссылка рядом */
.guarantee-box { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4) var(--space-10); align-items: center; margin-top: var(--space-10); padding: var(--space-8); background: var(--paper-2); border-radius: var(--radius-lg); }
.guarantee-box h3 { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: 600; text-wrap: balance; }
.guarantee-box h3 .icon { width: .9em; height: .9em; margin-top: .12em; color: var(--ok); }
.guarantee-box p { margin: 0 0 var(--space-2); font-size: var(--fs-sm); }
.guarantee-box a { font-size: var(--fs-sm); font-weight: 600; }

/* Вопросы 4 + 8: слева заголовок и Telegram (липкие), справа список */
.faq-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8) var(--space-16); align-items: start; }
.faq-side { position: sticky; top: 92px; }
.faq-side h2 { margin: 0; }
.faq-side p { margin: var(--space-4) 0 0; color: var(--muted); max-width: 34ch; }
.faq-side .tg-link { display: inline-flex; justify-content: flex-start; min-height: var(--tap); margin-top: var(--space-2); text-align: start; }
.faq-list { border-top: 1px solid var(--hairline-3); }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero-main { display: contents; }
  .hero h1 { margin: 0; }
  .hero .tool { order: 1; }
  .hero .lead { order: 2; margin: 0; max-width: var(--measure); }
  .hero .sheet { order: 3; }
  /* Тот же пример уже в кадре загрузки — в листе остаются замеры с нормами и вердикт */
  .sheet-field { display: none; }
  .sheet-body { grid-template-columns: minmax(0, 1fr); }
  .band { margin-top: var(--space-12); }
  .band-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .faq-side { position: static; }
  .price-row { grid-template-columns: minmax(0, 1fr) 140px 200px; }
  .guarantee-box { grid-template-columns: minmax(0, 1fr); }
  .faq-section { grid-template-columns: minmax(0, 1fr); }
}
/* Планшет: заголовок, кадр, лид и лист — одной колонкой одной ширины, по левому краю заголовка */
@media (min-width: 601px) and (max-width: 860px) { .hero-grid > *, .hero-main > * { max-width: 640px; } }
@media (max-width: 600px) {
  .hero { padding-top: var(--space-5); }
  .hero h1 { margin: 0; }
  .hero .tool { padding: var(--space-3); }
  .hero-grid { gap: var(--space-5); }
  .sheet-head { padding-inline: var(--space-3); }
  .sheet-spec { display: none; }
  .sheet-body { grid-template-columns: minmax(0, 1fr); }
  .sheet-field { padding: var(--space-3); border-inline-end: 0; border-bottom: 1px solid var(--hairline); }
  .ruler, .tag-dim { display: none; }
  .sheet-frame { padding: 0; }
  .readout li { padding: 10px var(--space-3); }
  .readout li.xs { display: none; }
  .sheet-verdict { margin: var(--space-3); }
  .sheet-foot { padding-inline: var(--space-3); }
  .band { padding: var(--space-8) 0; }
  .band h2 { font-size: var(--fs-xl); }
  .band input { flex: 3 1 140px; min-width: 0; }
  .norms-table { font-size: var(--fs-sm); }
  .norms-table th, .norms-table td { padding-inline-end: var(--space-3); }
  .norms-table .grp th { padding-top: var(--space-6); }
  .norms-table th, .norms-table td { padding-block: 10px; }
  .norms-table .self-rows td::before { top: 12px; }
  /* Колонки примера — на компьютере; на телефоне те же числа есть в листе измерений первого экрана */
  .norms-table .ex { display: none; }
  .norms-table td:nth-child(2) { padding-inline-end: 0; }
  .price-row { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); padding: var(--space-5) 0; }
  .price-what { grid-column: 1 / -1; }
  .price-big { font-size: var(--fs-xl); }
  .price-row .btn { width: auto; }
  .guarantee-box { padding: var(--space-6) var(--space-5); }
  .guarantee-box h3 { font-size: var(--fs-xl); }
}

/* Открыт отчёт или готовое фото (body.result-on, app.js): лид и лист примера с чужим «Готово к подаче» прячем — результат сразу под кадром загрузки.
   «Проверить другое фото» снимает класс, лендинг возвращается */
.result-on .hero .lead, .result-on .hero .sheet { display: none; }
.result-on .hero-grid { grid-template-columns: minmax(0, 640px); }
.result-on .hero { padding-bottom: 0; }

/* Цели нажатия от 44px и без сенсорного экрана на узкой ширине: меню, язык, ссылки шагов */
@media (max-width: 600px) {
  .menu summary { width: var(--tap); height: var(--tap); }
  .lang summary { min-height: var(--tap); }
}
.steps a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Телефон: страница не длиннее 8 экранов — без повторов. Тексты шагов повторяют первый экран, «До и после» и строку о Госдепе —
   на телефоне остаются названия шагов и ссылки; подзаголовки групп норм — на компьютере; «Сервис» в подвале повторяет меню */
@media (max-width: 600px) {
  /* Шаги — два на два: точка, название, ссылка */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .steps::before { display: none; }
  .steps li { padding: 0; padding-top: var(--space-5); }
  .steps li::before { top: 0; box-shadow: none; }
  .steps h3 { font-size: var(--fs-base); }
  .steps p { display: none; }
  .steps a { margin-top: 0; font-size: var(--fs-sm); }
  .section .lead, .norms-head .lead { font-size: var(--fs-base); }
  .norms-table th, .norms-table td { padding-block: 8px; }
  .norms-table .self-rows td::before { top: 10px; }
  .section > h2 { margin-bottom: var(--space-5); }
  .hero .lead { font-size: var(--fs-base); }
  .norms-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }  /* подписи колонок очевидны, остаются для чтения с экрана */
  .faq-side p, .faq-side .tg-link { display: none; }  /* Telegram — в финальном призыве ниже */
  .faq-section { gap: var(--space-5); }
  .faq summary { padding: var(--space-3) 0; }
  .readout li { padding-block: 8px; }
  .price-row { padding: var(--space-4) 0; }
  .price-what h3 { font-size: var(--fs-lg); }
  .norms-table tbody:not(.self-rows) .grp { display: none; }
  .norms-table .self-rows .grp th { padding-top: var(--space-6); }
  .gd-board { width: 100%; max-width: 252px; margin-inline: auto; }
  .gd-switch { display: none; }  /* «Галерея → результат» проигрывается сама при показе */
  .guarantee-box { margin-top: var(--space-6); gap: var(--space-3); }
  .guarantee-box h3 { font-size: var(--fs-lg); }
  .guide-list { gap: var(--space-3); }
  .guide-list a { font-size: var(--fs-base); }
  .band { padding: var(--space-6) 0; }
  .footer-grid > .footer-col:first-of-type { display: none; }
  .footer { padding-top: var(--space-8); }
}