/*
 * gagarind.ru - главная. Система «сайт как работающая система».
 *
 * Собрано по стратегии (лестница Ханта + Шугерман + психология дорогого
 * B2B) и премиальной дизайн-системе. Продукт Дениса - навести порядок,
 * поэтому сам сайт обязан выглядеть как безупречно выстроенная система:
 * каждый отступ из шкалы 8px, единый вертикальный ритм, тонкие точные
 * линии, инженерная типографика, ноль случайностей и ноль трюков.
 *
 * ЖЁСТКИЕ ПРАВИЛА (нарушение = откат к «дёшево»):
 *  - любой padding/margin/gap только из --sp-*; не-кратные-8 только 4 и 12;
 *  - ~90% графит, ~7% зелёный (ТОЛЬКО кнопки-действия), ~3% оранжевый
 *    (ТОЛЬКО метки, tick, номера, подчёркивание ключа);
 *  - оранжевый никогда не body-текст на белом (контраст 3.4:1);
 *  - никаких хрупких эффектов (зерно, рисующиеся линии, параллакс) -
 *    они уже ломали страницу; контент виден всегда, без JS;
 *  - ни одной секции с пустым центром или одиноким блоком в широком ряду.
 */

/* ==================================================================
 * ШРИФТЫ (self-host, кириллица+латиница; в РФ Google Fonts троттлит)
 * ================================================================== */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap;
    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600 800; font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url('../fonts/inter-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
    src: url('../fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: 'JBMono'; font-style: normal; font-weight: 500 600; font-display: swap;
    src: url('../fonts/jbmono-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'JBMono'; font-style: normal; font-weight: 500 600; font-display: swap;
    src: url('../fonts/jbmono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+2000-206F, U+2212; }

/* ==================================================================
 * ТОКЕНЫ
 * ================================================================== */
:root {
    /* Графитовая рампа */
    --ink-900: #0F1419;
    --ink-800: #161C22;
    --ink-700: #232B33;
    --ink-600: #3A434D;
    --ink-500: #5B6570;
    --ink-400: #8A929B;
    --ink-300: #AEB4BB;
    --ink-200: #D6DADF;
    --ink-100: #E7EAED;
    --ink-050: #F1F3F5;

    /* Поверхности */
    --bg: #FFFFFF;
    --bg-subtle: #F5F7F9;
    --bg-inset: #EEF1F4;
    --bg-dark: #0F1419;
    --bg-dark-2: #161C22;

    /* Акценты. Один хроматический для действия, один для акцента. */
    --accent: #E2660C;
    --accent-strong: #C4560A;
    --accent-tint: #FCF1E8;
    --action: #2E7D46;
    --action-hover: #276B3C;
    --action-active: #215833;
    --action-ring: rgba(46, 125, 70, .32);

    /* Линии */
    --line: rgba(15, 20, 25, .10);
    --line-2: rgba(15, 20, 25, .16);
    --line-dark: rgba(255, 255, 255, .10);
    --line-dark-2: rgba(255, 255, 255, .16);

    /* Гарнитуры */
    --font-display: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-text: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'JBMono', ui-monospace, 'Cascadia Mono', monospace;

    /* Шкала кеглей */
    --fs-900: clamp(2.25rem, 1.55rem + 2.9vw, 3.75rem);   /* 36 -> 60 крючок */
    --fs-800: clamp(1.875rem, 1.35rem + 1.6vw, 2.75rem);  /* 30 -> 44 H2 */
    --fs-700: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);      /* 22 -> 32 */
    --fs-600: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);    /* 20 -> 24 H3 */
    --fs-500: clamp(1.0625rem, 0.98rem + 0.3vw, 1.3125rem);/* 17 -> 21 lead */
    --fs-400: clamp(1rem, 0.95rem + 0.18vw, 1.125rem);    /* 16 -> 18 body */
    --fs-300: 0.9375rem;   /* 15 small */
    --fs-200: 0.8125rem;   /* 13 eyebrow/mono/legal */

    --lh-tight: 1.06;
    --lh-h: 1.15;
    --lh-h3: 1.25;
    --lh-lead: 1.5;
    --lh-body: 1.6;
    --ls-tight: -0.02em;
    --ls-eyebrow: 0.08em;

    /* Отступы: шкала 8 (микрошаг 4/12) */
    --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px; --sp-16: 16px; --sp-24: 24px;
    --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;
    --sp-96: 96px; --sp-120: 120px;

    /* Единый вертикальный ритм */
    --section-y: clamp(4rem, 2rem + 5vw, 7.5rem);
    --section-y-lg: clamp(5rem, 2.5rem + 6vw, 8.75rem);
    --stack-h: clamp(2rem, 1.2rem + 2.2vw, 3rem);
    --stack: 24px;

    /* Сетка */
    --container: 1200px;
    --container-wide: 1320px;
    --container-narrow: 760px;
    --gutter: clamp(20px, 4vw, 40px);
    --gap: 24px; --gap-lg: 32px; --gap-sm: 16px;

    /* Радиусы */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

    /* Тени */
    --shadow-1: 0 1px 2px rgba(15, 20, 25, .05);
    --shadow-2: 0 4px 12px rgba(15, 20, 25, .06);
    --shadow-3: 0 12px 32px rgba(15, 20, 25, .08);
    --shadow-4: 0 24px 64px rgba(15, 20, 25, .10);

    /* Движение */
    --dur-fast: 120ms; --dur: 200ms; --dur-slow: 320ms;
    --ease: cubic-bezier(.2, .6, .2, 1);

    --header-h: 72px;
}

/* ==================================================================
 * СБРОС
 * ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body.gc {
    background: var(--bg);
    color: var(--ink-900);
    font-family: var(--font-text);
    font-size: var(--fs-400);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.gc.is-locked { overflow: hidden; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
    font-family: var(--font-display);
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
    font-weight: 700;
    /* Длинное слово переносим целиком по границе, БЕЗ дефиса-переноса. */
    overflow-wrap: break-word;
}
p { text-wrap: pretty; max-width: var(--container-narrow); overflow-wrap: break-word; }
a { color: inherit; }
:where(input, textarea, button, select) { font: inherit; }
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

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

/*
 * ЗАЩИТА ОТ ИНЛАЙНОВЫХ СТИЛЕЙ РОДИТЕЛЬСКОЙ ТЕМЫ.
 *
 * На внутренних страницах движок темы впрыскивает в <head> инлайновый
 * <style> вида «h1..h6 { font-family:'Muli'; text-transform:capitalize }».
 * Он той же специфичности, что теговые правила, и перебивал наш шрифт
 * и ломал регистр («Благодарим За Заявку»). Префикс body.gc поднимает
 * специфичность (класс > тег) - наши гарнитуры выигрывают при любом
 * порядке загрузки. На главной этот блок безвреден (родительского
 * инлайна там нет).
 */
body.gc h1, body.gc h2, body.gc h3, body.gc h4, body.gc h5, body.gc h6 {
    font-family: var(--font-display);
    text-transform: none;
}
body.gc, body.gc p, body.gc li, body.gc dd, body.gc dt,
body.gc input, body.gc textarea, body.gc select {
    font-family: var(--font-text);
}
body.gc .mono, body.gc .eyebrow, body.gc .chip, body.gc .gc-crumbs,
body.gc .rail__head, body.gc .rail__num, body.gc .stage__num,
body.gc .benefit__num, body.gc .gc-footer__title, body.gc [class$="__meta"] {
    font-family: var(--font-mono);
}
/* Кнопки: движок темы красит свои акцентные элементы почти в чёрный и
   цепляет наши. Перебиваем цвет и типографику кнопок под body.gc. */
body.gc .btn { font-family: var(--font-display); text-transform: none; }
body.gc .btn--primary { background: var(--action); color: #fff; border-color: transparent; }
body.gc .btn--primary:hover { background: var(--action-hover); color: #fff; }
body.gc .btn--ghost { background: transparent; color: var(--ink-900); }
body.gc .section--dark .btn--ghost { color: #fff; }
body.gc .btn--outline { background: transparent; color: var(--ink-900); }

.u-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.gc-skip {
    position: absolute; left: 0; top: 0; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%);
}
.gc-skip:focus {
    width: auto; height: auto; clip-path: none;
    left: 16px; top: 16px; z-index: 200;
    background: var(--ink-900); color: #fff;
    padding: 12px 20px; border-radius: var(--r-md);
    font-family: var(--font-display); font-weight: 600;
}

/* ==================================================================
 * СЕТКА И СЕКЦИИ
 * ================================================================== */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}
/* min-width:0 - защита от горизонтального переполнения на мобильном. */
.grid > * { min-width: 0; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--subtle { background: var(--bg-subtle); }
.section--dark { background: var(--bg-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, .80); }
.section--dark .eyebrow { color: rgba(255, 255, 255, .72); }

.section-head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-16);
    /*
     * rem, а не ch: ch считается от кегля САМОГО контейнера (17px body),
     * и 40ch давало ~340px - длинный H2 рвался на восемь строк. В rem
     * ширина честная, заголовок ложится в 2-4 строки.
     */
    max-width: 48rem;
    margin-bottom: var(--stack-h);
}
.section-head p { color: var(--ink-600); max-width: var(--container-narrow); }
.section--dark .section-head p { color: rgba(255, 255, 255, .80); }

/*
 * Блупринт-рамка контейнера: тонкие вертикальные линии по краям контента
 * на широких экранах. Дёшево, надёжно, работает на концепцию «система».
 */
.container--framed { position: relative; }
@media (min-width: 1280px) {
    .container--framed::before,
    .container--framed::after {
        content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line);
    }
    .container--framed::before { left: 0; }
    .container--framed::after { right: 0; }
    .section--dark .container--framed::before,
    .section--dark .container--framed::after { background: var(--line-dark); }
}

/* ==================================================================
 * ТИПОГРАФИЧЕСКИЕ РОЛИ
 * ================================================================== */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-200);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-500);
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--accent); flex: 0 0 auto; }

.h1 { font-size: var(--fs-900); line-height: var(--lh-tight); font-weight: 800; }
.h2 { font-size: var(--fs-800); line-height: var(--lh-h); }
.h3 { font-size: var(--fs-600); line-height: var(--lh-h3); }
.lead { font-family: var(--font-text); font-weight: 500; font-size: var(--fs-500); line-height: var(--lh-lead); color: var(--ink-600); }
.small { font-size: var(--fs-300); }
.mono {
    font-family: var(--font-mono); font-weight: 500;
    font-size: var(--fs-200); letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase; color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}
.section--dark .mono { color: rgba(255, 255, 255, .70); }

/* Подчёркивание ключевого слова - единственный «текстовый» оранжевый. */
.u-mark {
    background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat;
    padding-bottom: 2px;
}

/* ==================================================================
 * КНОПКИ И ССЫЛКИ
 * ================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    height: 56px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn--primary { background: var(--action); color: #fff; box-shadow: var(--shadow-2); }
.btn--primary:hover { background: var(--action-hover); box-shadow: var(--shadow-3); color: #fff; }
.btn--primary:active { background: var(--action-active); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink-900); background: var(--ink-050); }
.section--dark .btn--ghost { color: #fff; border-color: var(--line-dark-2); }
.section--dark .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .06); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/*
 * Текстовая ссылка-действие. ВАЖНО: сбрасываем стиль <button> - иначе
 * браузер рисует серо-зелёную рамку-коробку, которая выбивается из стиля.
 * Зелёный тут не используем (он только для главных кнопок): текст графит,
 * стрелка - оранжевый акцент.
 */
.link-action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-8);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-300);
    color: var(--ink-900);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}
.link-action svg { width: 16px; height: 16px; color: var(--accent); transition: transform var(--dur) var(--ease); }
.link-action:hover { color: var(--ink-600); }
.link-action:hover svg { transform: translateX(4px); }
.link-action:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.cta-note { font-size: var(--fs-200); color: var(--ink-500); margin-top: var(--sp-12); }
.section--dark .cta-note { color: rgba(255, 255, 255, .60); }

.bridge {
    display: block;
    margin-top: var(--stack-h);
    font-family: var(--font-mono);
    font-size: var(--fs-200);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-500);
}

/* ==================================================================
 * ХЕДЕР
 * ================================================================== */
.gc-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(1px)) {
    .gc-header { background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: saturate(160%) blur(12px); }
}
.gc-header__in {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-32);
}
.gc-logo { display: inline-flex; align-items: center; line-height: 0; flex: 0 0 auto; }
.gc-logo img { height: 40px; width: auto; }

.gc-nav { display: flex; gap: var(--sp-32); margin-inline: auto; }
.gc-nav a {
    font-family: var(--font-text);
    font-weight: 500;
    font-size: 15px;
    color: var(--ink-700);
    text-decoration: none;
    white-space: nowrap;
    padding: 4px 0;
    background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat;
    transition: color var(--dur) var(--ease), background-size var(--dur) var(--ease);
}
.gc-nav a:hover, .gc-nav a:focus-visible { color: var(--ink-900); background-size: 100% 2px; }

.gc-header__cta { flex: 0 0 auto; }
.gc-burger {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto;
    background: none; border: 0; cursor: pointer; padding: 0;
}
.gc-burger span { display: block; height: 2px; background: var(--ink-900); border-radius: 2px; }

/* ==================================================================
 * 1. HERO
 *
 * Композиция 7/5, обе колонки заполнены. Слева текст-масса, справа -
 * тёмная панель-рельс (тяжёлый якорь, тизер метода). Центр не пустой.
 * Содержимое панели центрировано по вертикали - никакого space-between,
 * который в прошлой версии создавал внутреннюю пустоту.
 * ================================================================== */
.hero { background: var(--bg); }
.hero__grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-24);
    max-width: 640px;
}
.hero__hook { font-size: var(--fs-900); line-height: var(--lh-tight); font-weight: 800; color: var(--ink-900); }
.hero__h1 { font-size: var(--fs-700); line-height: var(--lh-h3); font-weight: 700; color: var(--ink-900); }
.hero__lead { max-width: 52ch; }
.hero__cta { display: flex; flex-direction: column; align-items: flex-start; }
.hero__trust {
    display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16);
    font-family: var(--font-mono); font-size: var(--fs-200);
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}
.hero__trust span { display: inline-flex; align-items: center; gap: var(--sp-16); }
.hero__trust span::after { content: "·"; color: var(--ink-300); }
.hero__trust span:last-child::after { content: none; }

/* Панель-рельс */
.rail {
    align-self: stretch;
    background: var(--ink-900);
    border-radius: var(--r-xl);
    padding: var(--sp-40);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* центр по вертикали, БЕЗ растяжки строк */
    gap: var(--sp-24);
    box-shadow: var(--shadow-3);
}
.rail__head {
    font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-200);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: rgba(255, 255, 255, .60);
}
.rail__list { list-style: none; display: grid; gap: 0; }
.rail__item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--sp-16);
    align-items: baseline;
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--line-dark);
}
.rail__item:first-child { border-top: 0; }
.rail__num {
    font-family: var(--font-mono); font-weight: 600; font-size: 1rem;
    color: var(--accent); font-variant-numeric: tabular-nums;
}
.rail__label { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: #fff; }
.rail__foot { font-size: var(--fs-200); color: rgba(255, 255, 255, .60); }

/* ==================================================================
 * 2. ABOUT - зеркало-диагностика + рефрейм вины
 * ================================================================== */
.symptoms { list-style: none; display: grid; gap: 0; }
.symptoms li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--sp-16);
    align-items: start;
    padding: var(--sp-16) 0;
    border-top: 1px solid var(--line);
    max-width: none;
    color: var(--ink-700);
}
.symptoms li:last-child { border-bottom: 1px solid var(--line); }
.symptoms li::before {
    content: ""; margin-top: .6em; width: 16px; height: 2px; background: var(--accent);
}
.reframe {
    background: var(--bg-dark);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(24px, 2.5vw, 32px);
    display: flex; flex-direction: column; gap: var(--sp-16);
    align-self: start;
}
.reframe__lead { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); line-height: var(--lh-h3); color: #fff; }
.reframe p { color: rgba(255, 255, 255, .80); max-width: none; }

/* ==================================================================
 * 3. ВЫГОДЫ (тёмная) - 3 колонки
 * ================================================================== */
.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-lg); }
.benefit { display: flex; flex-direction: column; gap: var(--sp-12); padding-top: var(--sp-24); border-top: 2px solid var(--line-dark-2); }
.benefit__num { font-family: var(--font-mono); font-weight: 600; font-size: 1.125rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.benefit h3 { color: #fff; }
.benefit p { color: rgba(255, 255, 255, .80); max-width: none; }

/* ==================================================================
 * 4. МЕТОД - таймлайн 5 этапов
 * ================================================================== */
.timeline { display: grid; }
.stage {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: var(--sp-24);
    padding-block: var(--sp-32);
    border-top: 1px solid var(--line);
}
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage__num {
    font-family: var(--font-mono); font-weight: 600; font-size: 1.25rem;
    color: var(--accent); font-variant-numeric: tabular-nums;
}
.stage__body { display: flex; flex-direction: column; gap: var(--sp-12); }
.stage__body p { max-width: var(--container-narrow); }
.stage__tags { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-4); }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 var(--sp-12);
    border: 1px solid var(--line); border-radius: var(--r-full);
    font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-600);
}
.method-cta { margin-top: var(--stack-h); }

/* ==================================================================
 * 5. RESULTS - артефакты + видео
 * ================================================================== */
.artifacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.artifact {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(20px, 2vw, 24px);
    display: flex; flex-direction: column; gap: var(--sp-12);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.artifact:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.artifact__ico { width: 24px; height: 24px; color: var(--action); flex: 0 0 auto; }
.artifact h3 { font-size: var(--fs-400); font-weight: 700; line-height: var(--lh-h3); }
.artifact p { font-size: var(--fs-300); color: var(--ink-500); max-width: none; }

.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--stack-h); }
.video figure { margin: 0; }
.video__frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border: 1px solid var(--line); border-radius: var(--r-md);
    overflow: hidden; background: var(--ink-800); cursor: pointer;
    display: grid; place-items: center; padding: 0;
}
.video__frame::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(160deg, #1B2229, #0F1419);
    z-index: 0;
}
.video__play {
    position: relative; z-index: 1;
    width: 64px; height: 64px; border-radius: var(--r-full);
    background: #fff; display: grid; place-items: center;
    box-shadow: var(--shadow-3);
}
.video__play::before {
    content: ""; margin-left: 4px;
    border-style: solid; border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent var(--accent);
}
.video figcaption { margin-top: var(--sp-12); font-size: var(--fs-300); color: var(--ink-600); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }

.results-note {
    margin-top: var(--stack-h);
    padding-top: var(--sp-24);
    border-top: 1px solid var(--line);
    font-size: var(--fs-300);
    color: var(--ink-500);
}

/* ==================================================================
 * 6. ВОЗРАЖЕНИЯ - 2x2
 * ================================================================== */
.objections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.objection {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 2.5vw, 32px);
    display: flex; flex-direction: column; gap: var(--sp-12);
}
.objection__q { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); line-height: var(--lh-h3); color: var(--ink-900); }
.objection p { max-width: none; color: var(--ink-600); }
.fit-note {
    margin-top: var(--gap);
    background: var(--bg-subtle);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    padding: clamp(20px, 2vw, 24px) clamp(24px, 2.5vw, 32px);
}
.fit-note p { max-width: none; color: var(--ink-700); }
.fit-note b { color: var(--ink-900); font-weight: 600; }

/* ==================================================================
 * 7. ЭКСПЕРТЫ (светлая - разбиваем тёмную кляксу в конце)
 * ================================================================== */
.expert-lead { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap-lg); align-items: stretch; margin-bottom: var(--gap-lg); }
.expert-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 2.5vw, 32px);
    display: flex; flex-direction: column; gap: var(--sp-16);
}
.expert-card__top { display: flex; align-items: center; gap: var(--sp-16); }
.avatar {
    width: 72px; height: 72px; border-radius: var(--r-lg);
    display: grid; place-items: center; flex: 0 0 auto;
    background: var(--ink-050); color: var(--ink-900);
    font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
    border: 1px solid var(--line);
}
.avatar--lg { width: 96px; height: 96px; font-size: 2rem; }
.expert-card h3 { font-size: var(--fs-600); }
.expert-card__role { color: var(--ink-600); max-width: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.expert-quote {
    background: var(--bg-dark);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(28px, 3vw, 40px);
    display: flex; flex-direction: column; justify-content: center; gap: var(--sp-16);
}
.expert-quote p { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); line-height: var(--lh-h3); color: #fff; max-width: none; }
.expert-quote cite { font-style: normal; font-family: var(--font-mono); font-size: var(--fs-200); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .60); }

.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

/* ==================================================================
 * 8. ЗАЯВКА (тёмная, белая форма-карточка)
 * ================================================================== */
.cta-grid { display: grid; grid-template-columns: 6fr 6fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.offer { display: flex; flex-direction: column; gap: var(--sp-24); }
.offer .list { list-style: none; display: grid; gap: var(--sp-16); }
.offer .list li { position: relative; padding-left: 32px; color: rgba(255, 255, 255, .85); max-width: none; }
.offer .list li::before {
    content: ""; position: absolute; left: 0; top: .55em;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D46' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-4);
    padding: clamp(24px, 3vw, 40px);
    display: flex; flex-direction: column; gap: var(--sp-20, 20px);
}
.form-card__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); color: var(--ink-900); }
.field { display: flex; flex-direction: column; gap: var(--sp-8); margin-bottom: var(--sp-16); }
.label { font-size: var(--fs-300); font-weight: 500; color: var(--ink-700); }
.input, .textarea {
    width: 100%; min-height: 56px; padding: 16px;
    border: 1px solid var(--ink-200); border-radius: var(--r-md);
    background: #fff; font-size: 1.0625rem; color: var(--ink-900);
    font-family: var(--font-text);
    transition: border-color var(--dur), box-shadow var(--dur);
}
.textarea { min-height: 112px; line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.input:focus-visible, .textarea:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-ring); }
.agreement {
    display: flex; gap: var(--sp-12); align-items: flex-start;
    font-size: var(--fs-200); color: var(--ink-500); line-height: 1.45;
    margin-bottom: var(--sp-16);
}
.agreement input[type=checkbox] { accent-color: var(--action); width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.agreement a { color: var(--action); }

/* ==================================================================
 * ПОДВАЛ
 * ================================================================== */
.gc-footer { background: var(--bg-dark); color: #fff; padding-block: var(--sp-64) var(--sp-48); border-top: 1px solid var(--line-dark); }
.gc-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--gap-lg); }
.gc-footer__brand img { height: 40px; width: auto; margin-bottom: var(--sp-16); }
.gc-footer p, .gc-footer li { color: rgba(255, 255, 255, .70); max-width: none; }
.gc-footer__title { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-200); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: var(--sp-16); }
.gc-footer ul { list-style: none; display: grid; gap: var(--sp-12); }
.gc-footer a { color: rgba(255, 255, 255, .80); text-decoration: none; }
.gc-footer a:hover { color: #fff; }
.gc-footer__req { font-size: var(--fs-300); line-height: 1.55; }
.gc-footer__bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-16);
    margin-top: var(--sp-48); padding-top: var(--sp-24);
    border-top: 1px solid var(--line-dark);
    font-size: var(--fs-200); color: rgba(255, 255, 255, .55);
}

/* ==================================================================
 * ВОССТАНОВЛЕННЫЕ БЛОКИ ОРИГИНАЛЬНОГО КОНТЕНТА
 * ================================================================== */

/* Нумерованная опись направлений в hero */
.hero-index { list-style: none; display: grid; gap: 0; counter-reset: hi; max-width: 560px; border-top: 1px solid var(--line); }
.hero-index li {
    counter-increment: hi;
    display: grid; grid-template-columns: 36px 1fr; gap: var(--sp-16); align-items: baseline;
    padding: var(--sp-12) 0; border-bottom: 1px solid var(--line); max-width: none; color: var(--ink-700);
}
.hero-index li::before {
    content: "0" counter(hi);
    font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-200);
    letter-spacing: .06em; color: var(--accent);
}

/* Кому подходит */
.about-theses { display: flex; flex-direction: column; gap: var(--sp-24); }
.about-thesis { max-width: none; color: var(--ink-700); }
.about-thesis b { color: var(--ink-900); font-weight: 600; }
.industries { display: flex; flex-direction: column; gap: var(--sp-16); align-self: start; }
.industries__label { color: var(--ink-500); }
.industries__list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.industries__list li {
    padding: var(--sp-16) 0; border-bottom: 1px solid var(--line);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); color: var(--ink-900); max-width: none;
}

/* Подсписок этапа */
.stage__list { list-style: none; display: grid; gap: var(--sp-8); margin-top: var(--sp-4); }
.stage__list li { position: relative; padding-left: 24px; color: var(--ink-600); font-size: var(--fs-300); max-width: var(--container-narrow); }
.stage__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 2px; background: var(--accent); }

/* Цитата в выгодах (тёмная секция) */
.benefit-quote {
    margin-top: var(--stack-h);
    padding-top: var(--sp-32);
    border-top: 1px solid var(--line-dark);
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs-700); line-height: var(--lh-h3);
    color: #fff; max-width: 30ch;
}

/* 8 результатов */
.results-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.result-card {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(20px, 2vw, 24px); display: flex; flex-direction: column; gap: var(--sp-12);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.result-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
.result-card__num { font-family: var(--font-mono); font-weight: 600; font-size: 1rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.result-card h3 { font-size: var(--fs-400); font-weight: 700; line-height: var(--lh-h3); color: var(--ink-900); }
.result-card p { font-size: var(--fs-300); color: var(--ink-500); max-width: none; }

/*
 * Эксперт Денис. Фото - КРУГЛОЕ в исходнике (вырезано кругом, углы
 * прозрачные), поэтому и рамка круглая: круг в квадрате выглядел как
 * случайность. Чистый крупный круг с тонким кольцом и мягкой тенью -
 * «серого прямоугольника сзади» нет.
 */
.expert-lead-grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; margin-bottom: var(--stack-h); }
.expert-photo { margin: 0; text-align: center; }
.expert-photo img {
    width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 1px var(--line), var(--shadow-3);
}
.expert-photo figcaption { margin-top: var(--sp-16); color: var(--ink-500); }
.expert-body { display: flex; flex-direction: column; gap: var(--sp-12); }
.expert-body__h {
    font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-200);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-500);
    border-top: 1px solid var(--line); padding-top: var(--sp-16); margin-top: var(--sp-8);
}

/* Команда - карточки с фото */
.team-card {
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: clamp(24px, 2.5vw, 32px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-12);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.team-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-2); }
/* Круглые фото и здесь: круг в исходнике - значит круглая рамка, крупнее. */
.team-card__photo {
    width: 128px; height: 128px; border-radius: 50%; object-fit: cover;
    background: transparent; box-shadow: 0 0 0 1px var(--line), var(--shadow-1);
    margin-bottom: var(--sp-8);
}
.team-card__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-500); color: var(--ink-900); }
.team-card__role { color: var(--ink-600); max-width: none; margin-bottom: auto; }

.offer__contacts { color: rgba(255, 255, 255, .75); }
.offer__contacts a { color: #fff; text-decoration: none; }
.offer__contacts a:hover { color: var(--accent); }

@media (max-width: 1024px) {
    .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .expert-lead-grid { grid-template-columns: 280px 1fr; }
}
@media (max-width: 768px) {
    .results-grid { grid-template-columns: 1fr; }
    .expert-lead-grid { grid-template-columns: 1fr; }
    .expert-photo img { max-width: 260px; }
    .about-theses, .industries { grid-column: 1 / -1 !important; }
}

/* ==================================================================
 * ШИРОКИЙ ЭКРАН: контейнер капается, поля - ровный фон, не пустота
 * ================================================================== */
/* (контейнер уже max-width 1200/1320; тёмные секции - фон edge-to-edge) */

/* ==================================================================
 * АДАПТИВ
 * ================================================================== */
@media (max-width: 1024px) {
    :root { --header-h: 64px; }
    .gc-nav, .gc-header__cta { display: none; }
    .gc-burger { display: flex; }
    /* Мобильное меню-панель */
    .gc-nav.is-open {
        display: flex; flex-direction: column; gap: 0;
        position: absolute; left: 0; right: 0; top: 100%;
        background: var(--bg); border-bottom: 1px solid var(--line);
        padding: var(--sp-8) var(--gutter) var(--sp-24); margin: 0;
    }
    .gc-nav.is-open a { padding: var(--sp-16) 0; border-bottom: 1px solid var(--line); font-size: 16px; }

    .hero__grid, .expert-lead, .cta-grid { grid-template-columns: 1fr; }
    .hero__grid { gap: var(--sp-40); }
    .benefits, .team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .artifacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gc-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap-sm); }
    .benefits { grid-template-columns: 1fr; gap: var(--gap); }
    .objections { grid-template-columns: 1fr; }
    .videos { grid-template-columns: 1fr; }
    .team { grid-template-columns: 1fr; }
    .cta-grid { gap: var(--sp-32); }

    /* Тёмная панель метода в hero: меньше внутренний отступ на телефоне. */
    .rail { padding: var(--sp-24); border-radius: var(--r-lg); }
    /* Видео на телефоне - в один столбец, крупнее. */
    .videos { gap: var(--sp-16); }
    /* Форма и оффер не жмутся к краям. */
    .form-card { padding: var(--sp-24); }
    /* Заголовок секции и лид не расползаются во всю ширину на мобиле. */
    .section-head { max-width: 100%; }
    /* Список направлений в hero: номер ближе к тексту. */
    .hero-index li { grid-template-columns: 28px 1fr; gap: var(--sp-12); }
}

@media (max-width: 600px) {
    .stage { grid-template-columns: 1fr; gap: var(--sp-8); }
    .artifacts { grid-template-columns: 1fr; }
    .gc-footer__grid { grid-template-columns: 1fr; gap: var(--sp-32); }
}

@media (max-width: 480px) {
    /* Переносы по слогам («внедре-нию», «эффективно-сти») выглядели грубо -
       убраны. От переполнения защищает overflow-wrap выше. */
    .btn { width: 100%; height: 52px; }
    .hero__cta { align-self: stretch; }
    .hero__cta .btn { width: 100%; }
}

/* ==================================================================
 * ДВИЖЕНИЕ (необязательное, безопасная деградация: без JS всё видно)
 * ================================================================== */
/*
 * ⚠ ПОЯВЛЕНИЕ ПО СКРОЛЛУ УБРАНО. Даже с безопасной деградацией оно
 * оставляло блоки полупрозрачными при быстрой прокрутке/тайминге
 * IntersectionObserver - тот же класс дефекта «контент не виден», что
 * уже злил заказчика. Контент на дорогой странице обязан быть виден
 * всегда и сразу. Класс .reveal оставлен в разметке, но ничего не прячет.
 */
.reveal { opacity: 1; transform: none; }

@media (forced-colors: active) {
    .container--framed::before, .container--framed::after { display: none; }
}

/* ==================================================================
 * ВИДЕО-ЛАЙТБОКС
 *
 * Видео открывается ВО ВСПЛЫВАЮЩЕМ ОКНЕ с крестиком, а не разворачивается
 * на месте без возможности закрыть. Клик по фону и Esc тоже закрывают.
 * ================================================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    place-items: center;
    padding: clamp(16px, 4vw, 48px);
    background: rgba(15, 20, 25, .82);
    backdrop-filter: blur(4px);
}
.lightbox.is-open { display: grid; }
.lightbox__box {
    position: relative;
    width: min(1100px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}
.lightbox__inner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ink-900);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-4);
}
.lightbox__inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Экран-заглушка, когда YouTube недоступен (из России без VPN). */
.lightbox__msg {
    position: absolute; inset: 0;
    display: grid; place-content: center; justify-items: center; gap: var(--sp-16);
    padding: clamp(24px, 4vw, 48px); text-align: center; color: #fff;
}
.lightbox__msg svg { width: 40px; height: 40px; color: var(--ink-400); }
.lightbox__msg h3 { color: #fff; font-size: var(--fs-600); }
.lightbox__msg p { color: rgba(255, 255, 255, .72); max-width: 46ch; }
.lightbox__msg .btn { margin-top: var(--sp-8); }

/* Подсказка под видео (на случай, если ролик чёрный, но проба прошла). */
.lightbox__hint { color: rgba(255, 255, 255, .72); font-size: var(--fs-300); text-align: center; }
.lightbox__hint a { color: var(--accent); }
.lightbox__hint[hidden] { display: none; }

.lightbox__close {
    position: absolute;
    top: calc(-1 * var(--sp-48));
    right: 0;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: none; border: 0; cursor: pointer;
    color: #fff;
    z-index: 2;
}
.lightbox__close::before, .lightbox__close::after {
    content: ""; position: absolute; width: 26px; height: 2px; background: #fff; border-radius: 2px;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
    .lightbox__close { top: calc(-1 * var(--sp-40)); right: 0; }
}

/* ==================================================================
 * МОДАЛКИ ЭКСПЕРТОВ (разметка из parts/home-modals.php)
 * ================================================================== */
.gc .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 190;
    background: rgba(15, 20, 25, .6);
    backdrop-filter: blur(3px);
    overflow-y: auto;
    padding: clamp(16px, 5vh, 64px) 16px;
}
.gc .modal.is-open { display: block; }
.gc .modal-dialog { max-width: 720px; margin: 0 auto; }
.gc .modal-dialog.modal-md { max-width: 560px; }
.gc .modal-content {
    background: var(--bg);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-4);
    padding: clamp(24px, 3vw, 40px);
}
.gc .modal-header {
    display: block;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-16);
    margin-bottom: var(--sp-24);
}
.gc .modal-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-600); color: var(--ink-900); }
.gc .modal-header .close {
    float: right; margin-left: var(--sp-16);
    width: 40px; height: 40px;
    background: none; border: 1px solid var(--line); border-radius: var(--r-md);
    font-size: 22px; line-height: 1; color: var(--ink-600); cursor: pointer;
}
.gc .modal-header .close:hover { border-color: var(--ink-900); color: var(--ink-900); }
.gc .modal-body { color: var(--ink-700); }
.gc .modal-body p { max-width: none; margin-bottom: var(--sp-16); }
.gc .modal-body h4, .gc .modal-body h5 {
    font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-200);
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-500);
    margin: var(--sp-24) 0 var(--sp-8);
}
.gc .modal-body img {
    width: 160px; border-radius: var(--r-md); background: var(--ink-050);
    float: left; margin: 0 var(--sp-24) var(--sp-16) 0;
}
.gc .modal-body a { color: var(--action); }
.gc .modal form {
    clear: both; margin-top: var(--sp-24); padding-top: var(--sp-24);
    border-top: 1px solid var(--line); display: grid; gap: var(--sp-12); max-width: 440px;
}
.gc .modal form input[type=text], .gc .modal form input[type=tel], .gc .modal form input[type=email], .gc .modal form textarea {
    width: 100%; min-height: 52px; padding: 14px;
    border: 1px solid var(--ink-200); border-radius: var(--r-md);
    background: #fff; font-size: 16px; color: var(--ink-900); font-family: var(--font-text);
}
.gc .modal form input[type=submit], .gc .modal form button[type=submit] {
    justify-self: start; min-height: 52px; padding: 0 28px; border: 0;
    border-radius: var(--r-md); background: var(--action); color: #fff;
    font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer;
}
.gc .modal form input[type=checkbox] { width: 20px; height: 20px; margin-right: 8px; accent-color: var(--action); vertical-align: -3px; }
.gc .modal form label { font-size: var(--fs-300); color: var(--ink-500); }
@media (max-width: 560px) {
    .gc .modal-body img { float: none; width: 120px; margin: 0 0 var(--sp-16); }
}