/* TetaLink — лендинг tetalink.com.
   Стиль: Organic Warm + Calm Gradient только в герое. Токены — /shared/tokens.css.
   Здесь только производные переменные, литералов цвета нет. */

:root {
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --measure: 66ch;
  --line-soft: color-mix(in srgb, var(--ink-3) 30%, transparent);
  --glow: color-mix(in srgb, var(--accent) 32%, transparent);
  --glow-night: color-mix(in srgb, var(--accent-light) 38%, transparent);
  --hero-wash-1: color-mix(in srgb, var(--accent-soft) 85%, transparent);
  --hero-wash-2: color-mix(in srgb, var(--clay-soft) 70%, transparent);
  --dot: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
p { margin: 0 0 var(--s-4); }
ul, ol { margin: 0; padding: 0; }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible { outline-color: var(--accent-light); }

.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 10; background: var(--surface); padding: 8px 16px; }

/* ---------- Типографика ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-3xl); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); line-height: 1.1; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-lg); line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--accent); }
.lead { font-size: var(--fs-lg); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.num { font-variant-numeric: lining-nums tabular-nums; }
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }

/* ---------- Каркас ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 128px); }
.section + .section { padding-top: 0; }
.section-head { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: clamp(32px, 5vw, 64px); }
.section-head p { color: var(--ink-2); margin: 0; font-size: var(--fs-lg); line-height: 1.55; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Шапка ---------- */
.site-header { position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; gap: var(--s-6); min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; min-height: 44px; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark .m-line { stroke: var(--ink-3); }
.brand-mark .m-dot { fill: var(--accent); }
.nav { display: flex; gap: var(--s-1); margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); padding: 10px 14px; border-radius: var(--r-pill); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--ink); background: var(--paper-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.head-actions { display: flex; align-items: center; gap: var(--s-2); }
.lang-switch { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); letter-spacing: 0.04em; padding: 0 12px; min-height: 44px; border-radius: var(--r-pill); display: inline-flex; align-items: center; }
.lang-switch:hover { color: var(--ink); background: var(--paper-2); }
.head-actions .lang-switch { min-width: 44px; justify-content: center; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, calc(100vw - 40px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: var(--s-2); display: grid; }
.menu-panel a { color: var(--ink); text-decoration: none; padding: 12px 14px; border-radius: var(--r-md); min-height: 44px; }
.menu-panel a:hover { background: var(--paper); }
.menu-panel .btn { margin-top: var(--s-2); }

/* ---------- Кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); font: 500 var(--fs-sm)/1 var(--font-ui); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); white-space: nowrap; }
.btn-primary { background: var(--accent); color: var(--surface); }
.btn-primary:hover { background: var(--accent-ink); color: var(--surface); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); }
.btn-sm { min-height: 44px; padding: 0 18px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; min-height: 44px; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Герой главной: Calm Gradient + билатеральная точка ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 80px);
  background:
    radial-gradient(60% 70% at 88% 8%, var(--hero-wash-1), transparent 70%),
    radial-gradient(50% 60% at 4% 96%, var(--hero-wash-2), transparent 70%),
    var(--paper);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.hero h1 { max-width: 13ch; }
.hero .lead { margin-top: var(--s-5); }
.hero .btn-row { margin-top: var(--s-6); }
.hero-aside { display: grid; gap: var(--s-4); padding-bottom: 8px; }
.hero-aside p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.fact { display: grid; gap: 2px; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.fact b { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-xl); line-height: 1.1; font-variant-numeric: lining-nums; color: var(--ink); }

.bls { margin-top: clamp(48px, 7vw, 96px); }
.bls-track { position: relative; height: 72px; container-type: inline-size; }
.bls-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line-soft); }
.bls-track::after { content: ""; position: absolute; left: 50%; top: calc(50% - 6px); height: 12px; border-left: 1px solid var(--line-soft); }
.bls-dot { position: absolute; left: 0; top: calc(50% - var(--dot) / 2); width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 7px var(--glow), 0 0 36px 8px var(--glow);
  animation: bls-sweep .8s cubic-bezier(.37, 0, .63, 1) infinite alternate; will-change: transform; }
@keyframes bls-sweep { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - var(--dot))); } }
.bls.is-paused .bls-dot { animation-play-state: paused; }
.bls-meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); }
.bls-meta p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 52ch; }
.bls-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 var(--fs-sm)/1 var(--font-ui); cursor: pointer; flex: none; }
.bls-toggle:hover { border-color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .bls-dot { animation: none !important; left: calc(50% - var(--dot) / 2); }
  .bls-toggle { display: none; }
}

/* ---------- Шапка внутренних страниц ---------- */
.page-hero { padding: clamp(32px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.page-hero h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem); max-width: 16ch; }
.page-hero .lead { margin-top: var(--s-5); max-width: 44ch; }
.page-hero .btn-row { margin-top: var(--s-6); }
.crumbs { font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--s-6); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: end; }

/* ---------- Определение (главная) ---------- */
.define { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.define-text { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem); line-height: 1.3; letter-spacing: -0.01em; margin: 0; }
.define-text b { font-weight: 600; }
.define-side { display: grid; gap: var(--s-5); padding-top: 10px; }
.define-side p { margin: 0; color: var(--ink-2); }

/* ---------- Два пути (главная) ---------- */
.paths { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-5); }
.path { border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: var(--s-5); }
.path-a { background: var(--surface); border: 1px solid var(--line); }
.path-b { background: var(--paper-2); }
.path h3 { font-size: var(--fs-xl); font-weight: 500; line-height: 1.15; }
.path .price { font-family: var(--font-display); font-size: var(--fs-lg); font-variant-numeric: lining-nums; color: var(--ink); }
.path .price span { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--ink-2); }
.path .link-arrow { margin-top: auto; }
.ticks { list-style: none; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.ticks li .icon { color: var(--accent); margin-top: 3px; }
.ticks.no li .icon { color: var(--clay); }
.ticks b { color: var(--ink); font-weight: 600; }

/* ---------- «Ночь»: макет экрана сеанса ---------- */
.night { background: var(--night); color: var(--night-ink); }
.night h2, .night h3 { color: var(--night-ink); }
.night .muted, .night p { color: var(--night-ink-2); }
.night a { color: var(--accent-light); }
.night-section { padding-block: clamp(64px, 9vw, 120px); }
.night-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.night-notes { list-style: none; display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.night-notes li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; }
.night-notes .icon { color: var(--accent-light); width: 24px; height: 24px; }
.night-notes b { display: block; color: var(--night-ink); font-weight: 500; }
.night-notes span { color: var(--night-ink-2); font-size: var(--fs-sm); }

.mock { background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-xl); padding: 14px; display: grid; gap: 12px; font-size: var(--fs-xs); color: var(--night-ink-2); }
.mock-bar { display: flex; align-items: center; gap: 12px; padding: 4px 6px; flex-wrap: wrap; }
.mock-bar .live { display: inline-flex; align-items: center; gap: 6px; color: var(--night-ink); }
.mock-bar .live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-light); }
.mock-bar .sp { margin-left: auto; }
.mock-body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 12px; }
.mock-stage { position: relative; background: var(--night); border-radius: var(--r-lg); min-height: 260px; overflow: hidden; container-type: inline-size; }
.mock-stage::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; border-top: 1px dashed var(--night-line); }
.mock-dot { position: absolute; top: calc(50% - 11px); left: 68%; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 0 7px var(--glow-night), 0 0 40px 10px var(--glow-night); }
.mock-client { position: absolute; right: 12px; bottom: 12px; width: 120px; aspect-ratio: 4 / 3; border-radius: var(--r-md); background: var(--night-4); border: 1px solid var(--night-line); display: grid; place-items: center; color: var(--night-ink-2); }
.mock-client small { position: absolute; left: 8px; bottom: 6px; font-size: 11px; }
.mock-hint { position: absolute; left: 16px; top: 14px; right: 150px; color: var(--night-ink-2); line-height: 1.4; }
.mock-side { display: grid; gap: 10px; align-content: start; }
.mock-panel { background: var(--night-3); border-radius: var(--r-md); padding: 12px; display: grid; gap: 8px; }
.mock-panel .lbl { display: flex; justify-content: space-between; color: var(--night-ink-2); }
.mock-panel .lbl b { color: var(--night-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.mock-range { position: relative; height: 4px; border-radius: 4px; background: var(--night-4); }
.mock-range i { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border-radius: inherit; background: var(--accent-light); }
.mock-range i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--night-ink); }
.swatches { display: flex; gap: 8px; }
.swatches i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--night-3); }
.swatches i.on { box-shadow: 0 0 0 2px var(--night-ink); }
.sw-1 { background: var(--accent-light); } .sw-2 { background: var(--clay-soft); } .sw-3 { background: var(--night-ink); } .sw-4 { background: var(--warn); }
.mock-row { display: flex; align-items: center; gap: 8px; color: var(--night-ink); }
.mock-row .icon { width: 16px; height: 16px; color: var(--accent-light); }
.mock-switch { margin-left: auto; width: 30px; height: 18px; border-radius: 9px; background: var(--accent-light); position: relative; }
.mock-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--night); }
.mock-ctrl { display: flex; gap: 8px; }
.mock-ctrl span { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: var(--r-pill); background: var(--night-4); color: var(--night-ink); }
.mock-ctrl span.go { background: var(--accent-light); color: var(--night); }
.mock-ctrl .icon { width: 16px; height: 16px; }
.mock-sud { background: var(--night-3); border-radius: var(--r-md); padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.sud { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.sud span { height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--night-4); color: var(--night-ink-2); font-variant-numeric: tabular-nums; }
.sud span.was { box-shadow: inset 0 0 0 1px var(--night-ink-2); }
.sud span.now { background: var(--accent-light); color: var(--night); font-weight: 600; }
.mock-phases { display: flex; gap: 4px; }
.mock-phases i { flex: 1; height: 4px; border-radius: 2px; background: var(--night-4); }
.mock-phases i.done { background: var(--night-ink-2); }
.mock-phases i.cur { background: var(--accent-light); }

/* ---------- 8 фаз ---------- */
.phases { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 6vw, 96px); counter-reset: ph; }
.phases li { counter-increment: ph; display: grid; grid-template-columns: 56px 1fr; gap: 4px 16px; padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.phases li::before { content: counter(ph); grid-row: span 2; font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--accent); font-variant-numeric: lining-nums; }
.phases h3 { font-size: var(--fs-md); }
.phases p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }

/* ---------- Безопасность ---------- */
.safety { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.safety h3 { margin-bottom: var(--s-4); }
.help { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); display: grid; gap: var(--s-4); }
.help h3 { margin: 0; display: flex; gap: 10px; align-items: center; }
.help h3 .icon { color: var(--clay); width: 24px; height: 24px; }
.help p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.phone { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.phone a { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--ink); text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.phone a:hover { color: var(--accent); }

/* ---------- Тарифы ---------- */
.plans { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-5); align-items: stretch; }
.plan { border-radius: var(--r-xl); padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: var(--s-5); border: 1px solid var(--line); background: var(--surface); }
.plan-alt { background: transparent; }
.plan header { display: grid; gap: 6px; }
.plan h3 { font-size: var(--fs-xl); font-weight: 500; }
.plan .who { color: var(--ink-2); margin: 0; }
.price-big { font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.price-big small { font-family: var(--font-ui); font-size: var(--fs-sm); letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.plan .btn { align-self: flex-start; margin-top: auto; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 500; width: fit-content; }
.chip-clay { background: var(--clay-soft); color: var(--ink); }

/* ---------- Таблица сравнения ---------- */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; }
.compare caption { text-align: left; padding: 16px 20px 0; color: var(--ink-2); font-size: var(--fs-xs); }
.compare th, .compare td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); color: var(--ink); }
.compare tbody th { font-weight: 500; color: var(--ink); width: 38%; }
.compare td { color: var(--ink-2); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare .icon { color: var(--accent); }
.compare .no { color: var(--ink-3); }

/* ---------- FAQ ---------- */
.faq { max-width: 52rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 20px 0; min-height: 44px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--ink-3); transition: transform var(--t-mid) var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer { padding: 0 0 20px; max-width: var(--measure); color: var(--ink-2); }
.faq .answer p:last-child { margin: 0; }

/* ---------- Шаги / процесс (внутренние) ---------- */
.flow { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); counter-reset: fl; }
.flow li { counter-increment: fl; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr); gap: var(--s-5); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.flow h3 { display: flex; gap: 14px; align-items: baseline; }
.flow h3::before { content: counter(fl); font-family: var(--font-display); color: var(--accent); font-size: var(--fs-xl); line-height: 1; font-weight: 400; font-variant-numeric: lining-nums; min-width: 1.2em; }
.flow p { margin: 0; color: var(--ink-2); max-width: 60ch; }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sticky { position: sticky; top: 24px; }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); }
.tile { border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); display: grid; gap: var(--s-3); align-content: start; }
.tile h3 { display: flex; gap: 10px; align-items: center; }
.tile h3 .icon { color: var(--accent); width: 24px; height: 24px; }
.tile p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); }
.tile-plain { background: transparent; }
.tile-tint { background: var(--paper-2); border-color: transparent; }
.c-7 { grid-column: span 7; } .c-5 { grid-column: span 5; } .c-4 { grid-column: span 4; } .c-8 { grid-column: span 8; } .c-6 { grid-column: span 6; } .c-12 { grid-column: span 12; }

.note { border-radius: var(--r-lg); background: var(--clay-soft); padding: clamp(20px, 3vw, 28px); display: grid; grid-template-columns: 24px 1fr; gap: 14px; color: var(--ink); }
.note .icon { color: var(--clay); width: 24px; height: 24px; }
.note p { margin: 0; }
.note p + p { margin-top: 8px; }

/* Голос: расчёт токенов */
.calc { display: grid; gap: 0; border-top: 1px solid var(--line); }
.calc div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); }
.calc b { color: var(--ink); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

/* ---------- Статья ---------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.article-body { max-width: 44rem; }
.article-body h2 { font-size: var(--fs-xl); margin: clamp(48px, 6vw, 72px) 0 var(--s-4); scroll-margin-top: 24px; }
.article-body h3 { margin: var(--s-6) 0 var(--s-3); }
.article-body p, .article-body li { color: var(--ink-2); }
.article-body ul, .article-body ol { padding-left: 1.3em; display: grid; gap: 8px; margin-bottom: var(--s-4); }
.article-body li::marker { color: var(--accent); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body dfn { font-style: normal; font-weight: 600; color: var(--ink); }
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 3vw, 36px); }
.summary h2 { margin: 0 0 var(--s-4) !important; font-size: var(--fs-lg) !important; font-family: var(--font-ui); font-weight: 600; }
.summary ul { margin: 0; }
.toc { position: sticky; top: 24px; font-size: var(--fs-sm); display: grid; gap: var(--s-3); }
.toc b { font-weight: 600; }
.toc ol { list-style: none; display: grid; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px 16px; color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent); }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-2); font-size: var(--fs-sm); margin-top: var(--s-5); }
.meta-line span { display: inline-flex; align-items: center; gap: 8px; }
.phase-table td:first-child { font-family: var(--font-display); color: var(--accent); font-size: var(--fs-lg); width: 48px; }
.sources { font-size: var(--fs-sm); }
.sources li { word-break: break-word; }
blockquote { margin: var(--s-6) 0; padding: 0 0 0 var(--s-5); border-left: 1px solid var(--accent); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.45; color: var(--ink); }

/* ---------- Финал ---------- */
.closing { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.closing h2 { max-width: 14ch; }
.closing p { color: var(--ink-2); }

/* ---------- Подвал ---------- */
.site-footer { background: var(--paper-2); padding: clamp(48px, 6vw, 80px) 0 var(--s-6); margin-top: clamp(64px, 9vw, 128px); font-size: var(--fs-sm); color: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 2fr)) minmax(0, 3fr); gap: var(--s-6); }
.foot-grid h2 { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s-3); color: var(--ink); }
.foot-grid ul { list-style: none; display: grid; gap: 2px; }
.foot-grid a { color: var(--ink-2); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; }
.foot-grid a:hover { color: var(--accent); }
.foot-grid p { margin: var(--s-3) 0 0; max-width: 42ch; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* ---------- 404 ---------- */
.lost { min-height: 60vh; display: grid; align-content: center; gap: var(--s-5); padding-block: var(--s-9); }
.lost .bls { margin-top: var(--s-4); max-width: 520px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1080px) {
  .nav, .head-actions { display: none; }
  .menu { display: block; }
  .night-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .article { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .hero-grid, .page-hero-grid, .define, .paths, .safety, .plans, .split, .split-even, .closing { grid-template-columns: minmax(0, 1fr); }
  .phases { grid-template-columns: minmax(0, 1fr); }
  .flow li { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-5) 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > * { grid-column: auto; }
  .sticky { position: static; }
  .hero-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-aside > p { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .mock-body { grid-template-columns: minmax(0, 1fr); }
  .mock-stage { min-height: 200px; }
  .mock-hint { right: 16px; }
  .mock-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mock-sud { grid-template-columns: minmax(0, 1fr); }
  .bls-meta { align-items: flex-start; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .mock-side { grid-template-columns: minmax(0, 1fr); }
  .mock-client { width: 96px; }
  .sud span { height: 26px; font-size: 11px; }
  .btn-row .btn { flex: 1 1 100%; }
  .hero-aside { grid-template-columns: minmax(0, 1fr); }
}
.h-sm { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--ink-2); margin-bottom: var(--s-4); }
.mt { margin-top: var(--s-4); }
.mb { margin-bottom: var(--s-3); }
.more { margin-top: var(--s-6); }
.plan-title { font-size: var(--fs-xl); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-grid > .bls { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .hero-grid > .bls { order: 2; margin-top: var(--s-6); }
  .hero-aside { order: 3; }
}
@media (max-width: 480px) {
  .define-text { font-size: 1.375rem; }
  h1 { font-size: 2.375rem; }
}
.foot-bottom a { color: var(--ink-2); }
.foot-bottom a:hover { color: var(--accent); }
.legal { padding-bottom: var(--s-6); }
.legal .summary { margin-bottom: var(--s-4); }
.night h2 + p { margin-top: var(--s-4); }
.phase-table tbody th { width: 22%; }
.page-hero + .section { padding-top: 0; }
.hero h1 { max-width: 17ch; font-size: clamp(2.375rem, 1.4rem + 3.8vw, 4.5rem); }
.hero .bls { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 680px) { .mock-dot { left: 38%; } }