/* Hallmark · shape: Route, version 1 «route on the right» chosen by the owner 11.11.2026 (waves/landing-hero-critique.md, section 3): the answer and one action on the left, the course as a route on a canvas panel on the right, then one syllabus · genre: editorial · theme: custom (brand Kalinka, system B «Маршрут»; seven type sizes: 64/36, 48/32, figures 64/44, 28/22, 22/18, 18/17, 16) · job: sign up · hero: Split, text in seven columns, the route panel in five · nav: the shared guest bar of css/shell.css, sticky · footer: navy slab (css/shell.css), the canvas band moved to the close · imagery: brand canvas in the route panel and the close, a real lesson step as markup, the certificate sample, author portrait · signature: the course as one route of seven topics ending in the certificate, drawn once on load, and the same stations along the syllabus
 * axes: light/grotesk-sans/cool · posture: restrained · surface: absolute · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: V, the canvas lives in two places only (route panel, close), the rest is paper and navy */
/* Hallmark · waive 77 · the questions keep a reading measure of 62ch inside the full column · long answers read best in one column, as in the player */
/* Hallmark · answered word budget · the owner asked to show the whole course (02.11.2026): every topic is a closed row of the syllabus, the questions stay closed */
/* Посадочная v2 (решения владельца 11.11.2026, вариант 1 «Маршрут справа»): один левый край (контейнер 1200 px), семь
 * размеров шрифта, красный только на действии и на одной текущей станции программы. Тексты - словари route, lp
 * (статика RU = словарь, scripts/public-pages-check.py). Без скриптов всё читается: панель нарисована, строки
 * программы раскрываются нативным <details>. */

:root {
  --cap: 1328px;
  --bar-h: calc(var(--space-2xl) + var(--space-md));
  --line-w: 3px;
  --sec-pad: var(--space-3xl);
  --cert-w: 440px;
  --photo-w: 360px;
  /* Синяя вуаль над холстом бренда (синий руководства, 45%, сверка Fable v2 P2-1): холст виден, белые подписи держат
   * контраст не ниже 4,5:1 на любом фрагменте (сторож меряет по пикселям снимка панели без текста). */
  --veil: rgb(23 46 77 / 0.45);
  /* На телефоне подписи ложатся на светлые штрихи холста (замер сторожа 11.11.2026: 2,86:1 при 45%), поэтому под
   * подписями вуаль плотнее, к правому краю те же 45%. */
  --veil-text: rgb(23 46 77 / 0.72);

  --text-display: clamp(2.25rem, 4.445vw, 4rem);
  --text-section: clamp(2rem, 3.334vw, 3rem);
  --text-figure: clamp(2.75rem, 4.445vw, 4rem);
  --text-title: clamp(1.375rem, 1.945vw, 1.75rem);
  --text-lede: clamp(1.125rem, 1.53vw, 1.375rem);
}
html { scroll-padding-top: calc(var(--bar-h) + var(--space-md)); }

/* ---- шапка: общая .gbar, липкая ---- */
.gbar { position: sticky; inset-block-start: 0; z-index: var(--z-bar); }
.gbar__in { min-height: var(--bar-h); }
.gbar__logo img { height: 56px; }
.gbar__end > .btn--s { min-height: 44px; padding-inline: var(--space-md); }
/* «Начать» в шапке контуром, пока на экране главная кнопка первого экрана; красная, когда она ушла (js/route.js). */
.js .gbar:not(.is-past) .gbar__end > .btn--primary { border-color: var(--color-ink); background: var(--color-paper); color: var(--color-ink); }
.js .gbar:not(.is-past) .gbar__end > .btn--primary:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ---- общая форма секции ---- */
.sec { padding-block: var(--sec-pad); }
.sec__title { font-size: var(--text-section); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }

/* ---- первый экран: текст слева, маршрут справа ---- */
.hero { padding-block: var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-2xl); align-items: center; }
.hero__head { font-size: var(--text-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.hero__lede { max-width: 46ch; margin-block-start: var(--space-lg); font-size: var(--text-lede); line-height: 1.42; color: var(--color-ink-2); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-block-start: var(--space-xl); }
.hero__more { display: inline-flex; align-items: center; min-height: 44px; }
.hero__time { margin-block-start: var(--space-md); font-size: var(--text-label); color: var(--color-muted); }

/* Панель маршрута: холст бренда под синей вуалью, белая линия и семь станций, финал абрикосовым, бонус после пунктира. */
.panel { position: relative; isolation: isolate; overflow: hidden; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-ink); color: var(--color-on-ink); }
.panel__canvas { position: absolute; inset: 0; z-index: -1; display: block; }
.panel__canvas img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.panel__canvas::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.panel__route { display: grid; gap: var(--space-xs); }
.panel__stop { position: relative; padding-inline-start: var(--space-xl); }
.panel__stop::before { content: ""; position: absolute; z-index: 1; inset-inline-start: 0; inset-block-start: calc(50% - 8px); width: 16px; height: 16px; border: var(--line-w) solid var(--color-on-ink); border-radius: 50%; background: var(--color-ink); }
.panel__stop::after { content: ""; position: absolute; inset-inline-start: 6.5px; inset-block: 50% calc(-50% - var(--space-xs)); width: var(--line-w); background: var(--color-on-ink); }
.panel__stop:last-child::after { display: none; }
.panel__stop a { display: flex; align-items: center; min-height: 44px; color: var(--color-on-ink); font-weight: 500; line-height: 1.25; text-decoration: none; text-underline-offset: 0.24em; }
.panel__stop a:hover { text-decoration: underline; }
.panel a:focus-visible { outline-color: var(--color-highlight); }
.panel__stop--end::before { border-color: var(--color-highlight); background: var(--color-highlight); }
.panel__stop--end a { font-weight: 600; }
.panel__stop--end::after { inset-block-end: calc(-50% - var(--space-xs) - var(--space-md)); width: 0; border-inline-start: var(--line-w) dashed var(--color-on-ink); background: none; }
.panel__stop--bonus { margin-block-start: var(--space-md); }
.panel__stop--bonus a { font-size: var(--text-label); }
/* Линия рисуется сверху вниз при загрузке (0,9 с); без скриптов и при reduced-motion нарисована сразу. */
@media (prefers-reduced-motion: no-preference) {
  .js .panel__route { animation: panel-draw var(--dur-slow) var(--ease-out) both; }
  @keyframes panel-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}

/* ---- программа: семь тем и бонус строками ---- */
.prog { background: var(--color-paper-2); }
.prog__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--space-2xl); align-items: start; }
.prog__head { position: sticky; inset-block-start: calc(var(--bar-h) + var(--space-xl)); }
.prog__lead { max-width: 34ch; margin-block-start: var(--space-lg); color: var(--color-ink-2); text-wrap: pretty; }
.prog__list { position: relative; border-block-end: 1px solid var(--color-rule); }
.prog__list::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 8.5px; width: var(--line-w); background: var(--color-rule-strong); }
.prog__row { position: relative; border-block-start: 1px solid var(--color-rule); }
.prog__row > details > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--space-lg); row-gap: var(--space-2xs); align-items: baseline; min-height: 44px; padding-block: var(--space-lg); padding-inline-start: var(--space-xl); list-style: none; cursor: pointer; }
.prog__row > details > summary::-webkit-details-marker { display: none; }
.prog__row > details > summary::after { content: "+"; grid-column: 3; grid-row: 1; color: var(--color-ink); font-size: var(--text-title); font-weight: 600; line-height: 1; }
.prog__row > details[open] > summary::after { content: "\2212"; }
.prog__stop { position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--space-lg) + var(--text-title) * 0.62 - 10px); width: 20px; height: 20px; border: var(--line-w) solid var(--color-rule-strong); border-radius: 50%; background: var(--color-paper-2); transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.prog__row.is-past .prog__stop { border-color: var(--color-ink); background: var(--color-ink); }
.prog__row.is-now .prog__stop { border-color: var(--color-accent); background: var(--color-accent); }
.prog__name { grid-column: 1; grid-row: 1; font-size: var(--text-title); font-weight: 600; line-height: 1.2; text-wrap: balance; }
.prog__row > details > summary:hover .prog__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prog__meta { grid-column: 2; grid-row: 1; font-size: var(--text-label); color: var(--color-muted); white-space: nowrap; }
.prog__fact { grid-column: 1 / -1; max-width: 62ch; color: var(--color-ink-2); text-wrap: pretty; }
/* Фраза темы: в строке на компьютере, в раскрытии на телефоне (сверка Fable v2, P2-2), копия в раскрытии скрыта. */
.prog__fact--more { display: none; }
.prog__more { padding-block-end: var(--space-lg); padding-inline-start: var(--space-xl); }
.prog__mods { display: grid; gap: var(--space-sm); }
.prog__mod { max-width: 62ch; }
.prog__mod-name { font-weight: 500; }
.prog__dur { font-size: var(--text-label); color: var(--color-muted); white-space: nowrap; }
.prog__mod-text { display: block; margin-block-start: var(--space-2xs); color: var(--color-ink-2); }
.prog__lessons { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-xs); padding-inline-start: var(--space-lg); color: var(--color-ink-2); }
.prog__lessons li { list-style: disc; }
.prog__note, .ai__desc { max-width: 62ch; margin-block-start: var(--space-md); color: var(--color-ink-2); }
.ai__desc { margin-block-start: 0; }
.ai__meta { margin-block-start: var(--space-xs); font-size: var(--text-label); color: var(--color-muted); }

/* ---- три числа на одной линии ---- */
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); margin-block-start: var(--space-xl); }
.fig { padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-rule-strong); }
.fig__n { font-size: var(--text-figure); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig__what { max-width: 30ch; margin-block-start: var(--space-xs); color: var(--color-ink-2); text-wrap: pretty; }

/* ---- попробуйте: тренажёр, шаг урока, калькулятор ---- */
.trainer { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: var(--space-2xl); margin-block-start: var(--space-xl); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.trainer__who { font-size: var(--text-label); color: var(--color-ink-2); }
.trainer__quote { margin-block-start: var(--space-sm); font-size: var(--text-title); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; text-wrap: pretty; }
.trainer__form { display: grid; gap: var(--space-md); }
.trainer__answers { display: grid; gap: var(--space-xs); border: 0; }
.plate { display: flex; align-items: center; gap: var(--space-sm); min-height: 56px; padding: var(--space-xs) var(--space-md); border: 1.5px solid var(--color-rule-strong); border-radius: var(--radius-control); background: var(--color-paper); line-height: 1.35; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.plate:hover { border-color: var(--color-muted); }
.plate input { flex: none; width: 20px; height: 20px; accent-color: var(--color-ink); }
.plate:has(input:checked) { border-color: var(--color-highlight); background: var(--color-highlight-soft); }
.trainer__send { justify-self: start; }
.trainer__form .quiz__result { font-size: var(--text-nav); line-height: 1.4; }
.trainer__form .quiz__result:empty { display: none; }
.trainer__form[data-state] .quiz__result { padding: var(--space-sm) var(--space-md); border: 1.5px solid transparent; border-radius: var(--radius-control); }
.trainer__form[data-state="right"] .quiz__result { background: var(--color-good-soft); color: var(--color-ink); }
.trainer__form[data-state="right"] .plate:has(input:checked) { border-color: var(--color-good); background: var(--color-good-soft); }
.trainer__form[data-state="wrong"] .quiz__result, .trainer__form[data-state="none"] .quiz__result { border-color: var(--color-ink); background: var(--color-paper); }
.trainer__form[data-state="wrong"] .plate:has(input:checked) { border-color: var(--color-ink); background: var(--color-paper); }

.try__cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); align-items: start; margin-block-start: var(--space-lg); }
.lstep__card { padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: var(--shadow-card); }
.lstep__label { font-size: var(--text-label); font-weight: 500; color: var(--color-muted); }
.lstep__title { margin-block-start: var(--space-xs); font-size: var(--text-title); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.lstep__body { margin-block-start: var(--space-md); color: var(--color-ink-2); }
.lstep__body p + p, .lstep__body p + ul, .lstep__body ul + p { margin-block-start: var(--space-sm); }
.lstep__body ul { padding-inline-start: var(--space-lg); }
.lstep__body ul li { list-style: disc; }
.lstep__src { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-rule); font-size: var(--text-label); color: var(--color-muted); }
.lstep__src a { color: var(--color-ink); }
/* Ссылка на открытый урок - строка всей секции, не подпись к шагу 14.1 (сверка Fable v2, P1-2). */
.try__foot { margin-block-start: var(--space-md); }
.try__foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* Калькулятор налогов продавца (js/deal-calc.js, поля и data-out прода): на виду цена и итог, остальное в «Подробностях». */
.calc { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); }
.calc__title { font-size: var(--text-title); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.calc__field { display: grid; gap: var(--space-2xs); }
.calc__field label, .calc legend { font-size: var(--text-label); font-weight: 500; }
.calc input[type="text"], .calc input[type="date"] { width: 100%; min-width: 0; height: var(--btn-h); padding-inline: var(--space-md); border: 1.5px solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); font-size: var(--text-nav); font-variant-numeric: tabular-nums; }
.calc input:focus-visible { outline-offset: 0; }
.calc input:disabled { opacity: 0.55; cursor: not-allowed; }
.calc__out { display: grid; gap: var(--space-2xs); }
.calc__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); }
.calc__total { font-size: var(--text-section); font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc__unit { font-weight: 500; }
.calc__share { font-size: var(--text-label); color: var(--color-ink-2); }
.calc__status { font-size: var(--text-label); font-weight: 500; color: var(--color-accent); }
.calc__status:empty { display: none; }
.calc[data-invalid] .calc__result, .calc[data-invalid] .calc__share, .calc[data-invalid] .calc__table { opacity: 0.4; }
.calc__more { border-block-start: 1px solid var(--color-rule); }
.calc__more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 44px; padding-block: var(--space-xs); font-weight: 500; list-style: none; cursor: pointer; }
.calc__more > summary::-webkit-details-marker { display: none; }
.calc__more > summary::after { content: "+"; color: var(--color-ink); font-size: var(--text-title); font-weight: 600; line-height: 1; }
.calc__more[open] > summary::after { content: "\2212"; }
/* Закрытые подробности без коробки: иначе их невидимое содержимое считается высотой карточки. */
.calc__more:not([open]) > :not(summary) { display: none; }
.calc__inputs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md); margin-block: var(--space-xs) var(--space-md); }
.calc__inputs > .calc__field:first-child, .calc__seg, .calc__check { grid-column: 1 / -1; }
.calc__seg { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs); min-width: 0; border: 0; }
.calc__seg legend { float: left; width: 100%; margin-block-end: var(--space-2xs); }
.calc__opt { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border: 1.5px solid var(--color-rule-strong); border-radius: var(--radius-control); background: var(--color-paper); cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.calc__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.calc__opt:hover { border-color: var(--color-muted); }
.calc__opt:has(input:checked) { border-color: var(--color-highlight); background: var(--color-highlight-soft); }
.calc__opt:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.calc__check { display: flex; align-items: flex-start; gap: var(--space-xs); min-height: 44px; padding-block: var(--space-2xs); cursor: pointer; }
.calc__check input { flex: none; width: 20px; height: 20px; margin-block-start: 0.2em; accent-color: var(--color-ink); }
.calc__table { width: 100%; border-collapse: collapse; font-size: var(--text-label); }
.calc__table th { padding: var(--space-xs) var(--space-md) var(--space-xs) 0; font-weight: 400; text-align: start; }
.calc__table td { padding-block: var(--space-xs); font-weight: 500; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc__table tr > * { border-block-start: 1px solid var(--color-rule); }

/* ---- кто ведёт курс ---- */
.author { background: var(--color-paper-2); }
.author__grid { display: grid; grid-template-columns: var(--photo-w) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: center; }
.author__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 8%; border-radius: var(--radius-card); }
.author__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 14rem)); column-gap: var(--space-lg); margin-block-start: var(--space-xl); }
.author__fact { padding-block-start: var(--space-sm); border-block-start: 1px solid var(--color-rule-strong); }
.author__n { font-size: var(--text-figure); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.author__what { color: var(--color-ink-2); }
.author__press { max-width: 46ch; margin-block-start: var(--space-lg); color: var(--color-ink-2); }
.author__links { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); margin-block-start: var(--space-md); }
.author__links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---- конец маршрута на синем: сертификат и анкета ---- */
.cert { background: var(--color-ink); color: var(--color-on-ink); }
.cert__grid { display: grid; grid-template-columns: var(--cert-w) minmax(0, 1fr); column-gap: var(--space-2xl); align-items: start; margin-block-start: var(--space-xl); }
.cert__sample { width: var(--cert-w); max-width: 100%; }
.cert__sample img { display: block; width: 100%; height: auto; border-radius: var(--space-2xs); }
.cert__sample figcaption { margin-block-start: var(--space-xs); font-size: var(--text-label); color: var(--color-on-ink-2); }
.cert__side { display: grid; gap: var(--space-2xl); }
.cert__block + .cert__block { padding-block-start: var(--space-2xl); border-block-start: 1px solid var(--color-ink-2); }
.cert__h { font-size: var(--text-title); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
.cert__text { max-width: 46ch; margin-block-start: var(--space-sm); color: var(--color-on-ink-2); text-wrap: pretty; }
.cert__job { display: inline-flex; align-items: center; min-height: 44px; margin-block-start: var(--space-xs); color: var(--color-on-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.24em; }
.cert__job:hover { color: var(--color-highlight); }
.verify { display: grid; gap: var(--space-xs); max-width: 30rem; margin-block-start: var(--space-lg); }
.verify label { font-size: var(--text-label); font-weight: 500; }
.verify__row { display: flex; gap: var(--space-xs); }
.verify input { flex: 1; min-width: 0; height: var(--btn-h); padding-inline: var(--space-md); border: 1.5px solid var(--color-on-ink); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-nav); }
.verify input::placeholder { color: var(--color-muted); }
.cert .btn--ghost, .close .btn--ghost { border-color: var(--color-on-ink); color: var(--color-on-ink); }
.cert .btn--ghost:hover, .close .btn--ghost:hover { background: var(--color-on-ink); color: var(--color-ink); }
.cert :focus-visible, .close :focus-visible { outline-color: var(--color-highlight); }

/* ---- вопросы ---- */
.faq__list { margin-block-start: var(--space-xl); border-block-end: 1px solid var(--color-rule); }
.faq details { border-block-start: 1px solid var(--color-rule); }
.faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); min-height: 44px; padding-block: var(--space-md); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--color-ink); font-size: var(--text-title); font-weight: 600; line-height: 1; }
.faq details[open] > summary::after { content: "\2212"; }
.faq summary h3 { font-size: var(--text-lede); font-weight: 500; line-height: 1.3; }
.faq summary:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.faq .answer { max-width: 62ch; padding-block-end: var(--space-lg); color: var(--color-ink-2); }
.faq .answer a { color: var(--color-ink); font-weight: 500; }
.faq .answer a[href^="https://kalinka-thailand.ru"] { white-space: nowrap; }

/* ---- закрытие на холсте ---- */
.close { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--space-3xl); background: var(--color-ink); color: var(--color-on-ink); }
.close__canvas { position: absolute; inset: 0; z-index: -1; display: block; }
.close__canvas img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 62%; }
.close__canvas::after { content: ""; position: absolute; inset: 0; background: var(--veil); }
.close__title { max-width: 20ch; }
.close__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-xl); }
.close__time { margin-block-start: var(--space-md); font-size: var(--text-label); color: var(--color-on-ink-2); }
.foot { border-block-start: 1px solid var(--color-ink-2); }

/* Низкое окно (сверка Fable v2, P2-5): поля первого экрана 40, чтобы панель не срезалась в 1280x680. */
@media (max-height: 45rem) and (min-width: 56.26rem) {
  .hero { padding-block: var(--space-xl); }
}

/* ---- планшет: программа одной колонкой; первый экран в две колонки до 900 px, ниже панель не шире 560 px ---- */
@media (max-width: 64rem) {
  .prog__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .prog__head { position: static; }
  .try__cards { grid-template-columns: minmax(0, 1fr); }
  :root { --photo-w: 280px; --cert-w: 360px; }
}

@media (max-width: 56.25rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .panel { max-width: 35rem; }
}

/* ---- телефон ---- */
@media (max-width: 48rem) {
  :root { --sec-pad: var(--space-2xl); --cert-w: 315px; --bar-h: var(--space-2xl); }
  .gbar__logo img { height: 44px; }
  .hero { padding-block: var(--space-xl) 0; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__more { justify-content: center; }
  .panel__canvas::after { background: linear-gradient(90deg, var(--veil-text) 0 80%, var(--veil) 100%); }
  .panel { max-width: none; margin-inline: calc(-1 * var(--gutter-l)) calc(-1 * var(--gutter-r)); padding: var(--space-xl) var(--gutter-r) var(--space-xl) var(--gutter-l); border-radius: 0; }
  .prog__row > details > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .prog__row > details > summary::after { grid-column: 2; }
  .prog__meta { grid-column: 1 / -1; grid-row: 2; }
  .prog__fact--row { display: none; }
  .prog__fact--more { display: block; margin-block-end: var(--space-sm); }
  .figs { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .trainer { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-md); }
  .trainer__send { justify-self: stretch; }
  .lstep__card, .calc { padding: var(--space-lg) var(--space-md); }
  .calc__inputs { grid-template-columns: minmax(0, 1fr); }
  .author__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .author__photo { max-width: var(--photo-w); }
  .cert__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .verify__row { flex-wrap: wrap; }
  .verify input { flex-basis: 100%; }
  .verify .btn { flex: 1; }
  .close__actions .btn { flex: 1; }
}
@media (max-width: 23rem) { :root { --cert-w: 260px; } }