/* HearAI site — «Звук рассвета», web edition (docs/45 §6.5, rebuilt round 9).
   Tokens are VERBATIM dawnLight (flutter/lib/core/theme/colors_dawn.dart); the §6.5 token
   gate (test_sibling_gate_site_hygiene, checks #16–#17) compares every hex AND every
   rgba() rgb-triple here against the dawnLight block — drift is a red CI.
   Contrast contract (FE-8 inherited): white on terracotta ≈ 3.4:1 → only ≥16px/600 UI text;
   terracotta small text on paper (≈2.8:1) is FORBIDDEN — on paper the accent lives in rules,
   fills and underlines; terracotta TEXT is legal on ink only (4.95:1, AA normal).
   No inline styles anywhere (CSP 'self', §6.6). */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter.woff2?v=9fc44f5b') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* dawnLight, one-to-one */
  --bg: #F5F1EA;
  --surface: #FFFFFF;
  --surface2: #FAF7F1;
  --primary: #0F2540;
  --primary-press: #1A3A5C;
  --accent: #D97757;
  --accent-press: #C4613F;
  --on-accent: #FFFFFF;
  --text: #0F2540;
  --text-muted: #546778;
  --text-tertiary: #5A6E82;
  --border: #E0D9CE;
  --success: #5B9A6F;
  --sos: #C94040;
  --focus-ring: #D97757;
  --disabled: #B9AB97;

  /* derived (no new hues — the §6.5 rgba gate enforces palette-only triples):
     warm shadows are ink at low alpha (HearaiElevation canon); on-ink text is
     paper at alphas (13.7:1 base, 8.3:1 at .72, 5.2:1 at .55). */
  --shadow-1: 0 2px 8px rgba(15, 37, 64, 0.06);
  --glow-accent: rgba(217, 119, 87, 0.16);
  --ink-line: rgba(245, 241, 234, 0.14);
  --on-ink: #F5F1EA;
  --on-ink-muted: rgba(245, 241, 234, 0.72);
  --on-ink-soft: rgba(245, 241, 234, 0.55);
  --paper-line: rgba(15, 37, 64, 0.08);
  --accent-fill: rgba(217, 119, 87, 0.10);
  --accent-fill2: rgba(217, 119, 87, 0.16);

  --radius-card: 20px;
  --radius-btn: 14px;
  --radius-pill: 999px;
  --container: 1160px;
  --container-narrow: 800px;
  --header-h: 68px;

  /* the 2026 layer (round 10): gradients BETWEEN palette stops, tinted (never
     black) shadows, spring physics. Every stop below is a dawnLight member —
     the §6.5 gate holds; every text gradient sits on ink where BOTH stops
     pass AA (terracotta 4.95:1, peach 7.56:1) — the contrast law holds. */
  --grad-accent: linear-gradient(120deg, #D97757 15%, #E8A598 95%);
  --grad-accent-deep: linear-gradient(160deg, #D97757 10%, #C4613F 100%);
  --grad-accent-fill: linear-gradient(140deg, rgba(217, 119, 87, 0.13), rgba(232, 165, 152, 0.20));
  --shadow-card: 0 1px 2px rgba(15, 37, 64, 0.05), 0 8px 24px rgba(15, 37, 64, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(15, 37, 64, 0.06), 0 20px 44px rgba(15, 37, 64, 0.13);
  --shadow-btn-accent: 0 6px 18px rgba(217, 119, 87, 0.32);
  --shadow-btn-accent-hover: 0 12px 28px rgba(217, 119, 87, 0.44);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --fs-display: clamp(34px, 5.2vw, 62px);
  --fs-h2: clamp(28px, 3.6vw, 44px);
  --fs-h3: 20px;
  --fs-lead: clamp(17px, 1.6vw, 19px);
  --fs-body: 16.5px;
  --sp-section: clamp(64px, 9vw, 120px);
  color-scheme: light;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
[hidden] {
  /* beats ANY class display — the hidden attribute is the single truth */
  display: none !important;
}
/* the modern scrollbar: quiet on paper, terracotta on intent */
* { scrollbar-color: var(--disabled) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--disabled);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
}
img, svg { vertical-align: middle; }
h1, h2, h3, h4 {
  font-family: inherit;
  color: inherit;
  margin: 0 0 16px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
:focus-visible {
  /* outline-only (2026-09-30 polish): the old box-shadow halo was silently
     clobbered by every shadow-bearing button (same-specificity shadow rules
     later in the file win) — a double ring that never rendered. The 2px
     terracotta outline alone passes 3:1 non-text contrast on BOTH worlds
     (4.95:1 on ink, on paper it borders ink elements); offset clears borders */
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
::selection { background: var(--accent-fill2); }
/* on ink the default 0.16-alpha wash is near-invisible — a stronger dip of the
   SAME hue (palette at an alpha, no new color) keeps selections readable there */
.hero ::selection, .cta-band ::selection, .page-head-ink ::selection,
.error-page--ink ::selection { background: rgba(217, 119, 87, 0.32); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow { max-width: var(--container-narrow); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--primary);
  color: var(--on-ink);
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* screen-reader-only text (utility): visible content for the a11y tree,
   invisible on canvas — the changelog's «История версий» h2 keeps the document
   outline honest (h1 → h2 → version h3s) without painting a heading */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── the shared header (byte-identical across content pages) ──────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 241, 234, 0.92);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--paper-line);
  transition: box-shadow 0.25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-1); }
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--primary);
}
.brand-mark { display: block; }
.brand-name {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 12px 0 10px;
  /* the underline GROWS from left — background-size animation, not border swap */
  background: linear-gradient(var(--accent), var(--accent)) left bottom / 0% 2px no-repeat;
  transition: color 0.2s var(--ease-out), background-size 0.3s var(--ease-out);
}
.site-nav a:hover {
  color: var(--primary);
  background-size: 100% 2px;
}
/* the standing underline of the CURRENT page (site.js sets aria-current by
   pathname match): same paint as hover, worn permanently — «где я» без охоты */
.site-nav a[aria-current="page"] {
  color: var(--primary);
  background-size: 100% 2px;
}

/* ── buttons — press physics, gradient body (the 2026-09-30 polish: the 2019
   shine sweep is gone — restraint reads newer than gloss; hovers are 0.16-0.2s) ── */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 48px;
  padding: 14px 28px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.16s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.96); } /* the squish — every button acknowledges the finger */
.btn-primary {
  background: var(--grad-accent-deep);
  color: var(--on-accent);
  box-shadow: var(--shadow-btn-accent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-accent-hover), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:active { transform: scale(0.96) translateY(0); }
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: rgba(15, 37, 64, 0.22);
}
.btn-secondary:hover {
  border-color: var(--primary);
  background: var(--surface);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.btn-ghost-ink {
  background: rgba(245, 241, 234, 0.06);
  color: var(--on-ink);
  border-color: rgba(245, 241, 234, 0.32);
}
.btn-ghost-ink:hover {
  background: rgba(245, 241, 234, 0.12);
  border-color: rgba(245, 241, 234, 0.55);
  transform: translateY(-1px);
}
.btn-header {
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14.5px;
  box-shadow: none;
}
.btn-lg {
  font-size: 17.5px;
  padding: 17px 34px;
}
/* the Clinic rung of the price ladder: ink button on terracotta (ink-on-terracotta
   4.95:1 — the one dark-on-warm pair the palette allows) */
.btn-ink {
  background: var(--primary);
  color: var(--on-ink);
  box-shadow: 0 6px 16px rgba(15, 37, 64, 0.30);
}
.btn-ink:hover {
  background: var(--primary-press);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 37, 64, 0.38);
}

/* text links: ink with a terracotta underline (terracotta-on-paper text is
   forbidden by the contrast contract — the underline carries the accent) */
.link-text {
  color: var(--primary);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.link-text:hover { text-decoration-color: var(--primary); }
.link-ink {
  color: var(--on-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link-ink:hover { text-decoration-color: var(--on-ink); }

/* ── hero — the ink overture (FinVest-caliber, dawnLight voice) ────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--on-ink);
  padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 7vw, 88px);
}
.hero::before {
  /* the dawn glow — one soft terracotta breath in the upper right, no new hue */
  content: '';
  position: absolute;
  top: -30%;
  right: -12%;
  width: 62%;
  height: 90%;
  background: radial-gradient(ellipse at center, var(--glow-accent) 0%, rgba(217, 119, 87, 0) 68%);
  pointer-events: none;
}

/* ── load choreography: the sound TURNS ON ──────────────────────────────
 * Pure CSS (no JS dependency — final state is the static design): the content
 * rises in staggered, the arcs bloom outward from the dot, the dawn-glow
 * drifts on a slow 16s breath. Calm timing — the product breathes, it does
 * not bounce. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes glow-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, 3%) scale(1.07); }
}
@keyframes soft-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.hero .kicker { animation: rise-in 0.7s var(--ease-out) 0.05s backwards; }
.hero h1 { animation: rise-in 0.8s var(--ease-out) 0.15s backwards; }
.hero .lead { animation: rise-in 0.8s var(--ease-out) 0.27s backwards; }
.hero .hero-actions { animation: rise-in 0.8s var(--ease-out) 0.39s backwards; }
.hero .hero-meta { animation: rise-in 0.8s var(--ease-out) 0.50s backwards; }
.hero .hero-stats { animation: rise-in 0.9s var(--ease-out) 0.62s backwards; }
.hero::before { animation: glow-drift 16s ease-in-out 1.4s infinite; }
.page-head-ink .kicker { animation: rise-in 0.6s var(--ease-out) 0.05s backwards; }
.page-head-ink h1 { animation: rise-in 0.7s var(--ease-out) 0.15s backwards; }
.page-head-ink p { animation: rise-in 0.7s var(--ease-out) 0.27s backwards; }
.hero .container { position: relative; }
.hero-inner {
  max-width: 700px;
}
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 650;
  line-height: 1.07;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  color: var(--on-ink);
}
/* gradient text — legal ONLY on ink (terracotta 4.95:1, peach 7.56:1, both AA).
   On paper both stops fail: there the accent is underline/rules only. */
.hero .accent, .cta-band .accent {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .accent, .cta-band .accent, .stat-value, .price-card-ink .price {
    color: var(--accent);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}
.hero .lead {
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--on-ink-muted);
  max-width: 640px;
  margin: 0 0 34px;
}
.hero .lead.lead-secondary {
  font-size: var(--fs-body-lg, 1.05rem);
  line-height: 1.65;
  max-width: 660px;
  margin: -22px 0 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
}
.hero-meta {
  font-size: 14.5px;
  color: var(--on-ink-soft);
  margin: 0;
}
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 18px;
}
.kicker::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  flex: none;
}
.hero .kicker, .page-head-ink .kicker { color: var(--accent); }


/* the compact sound figure (owner round 13): three TRUE semicircles from the mark's
 * proportions, sitting in the whitespace right of the lead — right edge aligned to
 * the stats grid's edge, never over text. Hidden below 1080px (text comes first). */
/* The CANONICAL full lockup (owner round 16): the startup-screen composition —
 * SoundArcs mark + «HearAI» wordmark («AI» in accent, w700 — splash_screen.dart)
 * + the tagline, in the canon Inter. Anchored to the hero's right edge (the
 * stats grid's right edge), vertically centered against the lead text; NEVER
 * overlapping: text caps at 640px and the lockup hides below 1220px (the
 * round-16 overlap cure — the old 300px figure + 720px text collided in the
 * 1080–1210 window). */
.hero-figure {
  /* POSITIONING CONTRACT (round-16 P0, the owner's «налезает» report): the
   * figure is a SIBLING of .hero-inner, child of .hero .container (the ONLY
   * positioned ancestor) — right:0 = the container's content edge = the stats
   * grid's right edge. It was previously INSIDE .hero-inner, whose own
   * position:relative made right:0 the TEXT block's edge → the lockup rendered
   * ON the text. Do not nest it back. */
  position: absolute;
  top: clamp(16px, 3vw, 40px);
  right: 0;
  width: 236px;
  margin: 0;
  text-align: center;
  animation: rise-in 1s var(--ease-out) 0.35s backwards;
}
.hero-figure svg {
  width: 132px;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* the canonical mark breathes (docs/hearai_logo_lockup1.svg + SoundArcsLoader,
 * 2026-09-25 owner round): 1400ms alternate — the outer arc grows +10%, the inner
 * +6%, both fade to 0.5; the dot rests. transform-box:view-box makes the px
 * origin speak viewBox units; the arc scale radiates from the dot centre (100,138). */
@keyframes hero-arc-breathe-outer {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.10); opacity: 0.5; }
}
@keyframes hero-arc-breathe-inner {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.06); opacity: 0.5; }
}
.hero-arc { transform-box: view-box; transform-origin: 100px 138px; }
.hero-arc--outer { animation: hero-arc-breathe-outer 1.4s linear infinite alternate; }
.hero-arc--inner { animation: hero-arc-breathe-inner 1.4s linear infinite alternate; }
.hero-lockup-word {
  display: block;
  /* canonical pull-up (docs/hearai_logo_lockup1.svg: dot-bottom → cap = 7.4/183 of
   * the mark width — the same math as hearaiMarkTextPullUp in the app): svg renders
   * 132px, whitespace under the dot ≈ 27.7px, canonical gap ≈ 4.9px → −23px */
  margin-top: -23px;
  font-size: 44px;
  /* the lockup canon is a LIGHT «Hear» + w700 «AI» (Manrope 300/700 in the file);
   * the site's Inter woff2 covers 400–700, so the light voice maps to regular 400 —
   * inside the file, never synthesized */
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--on-ink);
}
.hero-lockup-ai { color: var(--accent); font-weight: 700; }
.hero-figure figcaption {
  margin-top: 12px; /* 19/183 × mark width — the file's wordmark→tagline ratio */
  font-size: 13.5px;
  font-weight: 450;
  letter-spacing: 0.04em;
  color: var(--on-ink-soft);
}
@media (max-width: 1220px) {
  .hero-figure { display: none; }
}
/* the version rides UNDER the download button (round 13 owner + designer call: the
 * CTA says one thing; the version is quiet metadata) — one component, three pages */
.dl-subline {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: var(--on-ink-soft);
}
.dl-subline--center { text-align: center; margin: 12px 0 0; }
.dl-subline--paper { color: var(--text-tertiary); }

/* the stats strip — the hero's ground floor (real numbers, no counters) */
.hero-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--ink-line);
  padding-top: clamp(28px, 3.5vw, 40px);
}
.stat { padding: 0 26px; border-left: 1px solid var(--ink-line); }
.stat:first-child { padding-left: 0; border-left: none; }
/* stat values share the gradient voice (see .accent above — ink-only law) */
.hero .stat-value, .price-card-ink .price {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.stat-value {
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 650;
  white-space: nowrap; /* «350–700 тыс. ₽» — the ₽ must never wrap to its own line */
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-ink-soft);
  margin: 0;
}

/* ── hero spectrum — Ling-6 acoustic frequency test (Phase 8.1, docs/55) ── */
.hero-spectrum {
  position: relative;
  margin-top: clamp(40px, 5.5vw, 68px);
  border-top: 1px solid var(--ink-line);
  padding-top: clamp(28px, 4vw, 44px);
}
.spectrum-header {
  max-width: 720px;
  margin-bottom: 22px;
}
.spectrum-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 8px;
}
.spectrum-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.spectrum-title {
  font-size: var(--fs-h3);
  font-weight: 650;
  color: var(--on-ink);
  margin: 0 0 10px;
}
.spectrum-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-ink-muted);
  margin: 0;
}
.spectrum-nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
.spectrum-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 6px;
  border-radius: var(--radius-btn);
  background: rgba(245, 241, 234, 0.05);
  border: 1px solid var(--ink-line);
  color: var(--on-ink-muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.16s var(--ease-out), box-shadow 0.2s ease;
}
.spectrum-tab:hover {
  background: rgba(245, 241, 234, 0.10);
  color: var(--on-ink);
  transform: translateY(-1px);
}
.spectrum-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.spectrum-tab.active {
  background: var(--grad-accent-fill);
  border-color: var(--accent);
  color: var(--on-ink);
  box-shadow: 0 4px 16px rgba(217, 119, 87, 0.28);
}
.sound-letter {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--on-ink);
}
.sound-freq {
  font-size: 0.75rem;
  color: var(--on-ink-soft);
  font-variant-numeric: tabular-nums;
}
.spectrum-display {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: center;
  background: rgba(245, 241, 234, 0.04);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 32px);
}
.spectrum-visual {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}
.spectrum-canvas {
  width: 100%;
  height: auto;
  overflow: visible;
}
.spectrum-axis {
  fill: rgba(245, 241, 234, 0.55);
  font-size: 0.75rem;
  font-family: inherit;
}
.spectrum-wave {
  transition: d 0.4s var(--ease-spring);
}
.spectrum-fill {
  transition: d 0.4s var(--ease-spring);
}
.spectrum-marker {
  transition: cx 0.4s var(--ease-spring), cy 0.4s var(--ease-spring);
}
.spectrum-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.spectrum-info-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spectrum-zone-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.spectrum-sound-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--on-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.spectrum-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--on-ink-muted);
  margin: 0;
}
.spectrum-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-line);
}
.spectrum-meta-item {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--on-ink-soft);
}
.spectrum-meta-item b {
  color: var(--on-ink);
}
@media (max-width: 900px) {
  .spectrum-nav { grid-template-columns: repeat(3, 1fr); }
  .spectrum-display { grid-template-columns: 1fr; }
}


/* ── sections: the paper movement ──────────────────────────────────────── */
.section { padding: var(--sp-section) 0; }
/* the bridge pause right after the ink hero: a breath, not a room */
.section-bridge { padding: clamp(44px, 6vw, 76px) 0; }
.section-tint { background: var(--surface2); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head .titles { max-width: 640px; }
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 650;
  margin: 0;
}
.section-head .aside-lead {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 340px;
  margin: 0 0 6px;
}

/* the bridge statement — one calm sentence between numbers and the product */
.bridge {
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 550;
  line-height: 1.5;
  letter-spacing: -0.01em;
  max-width: 880px;
  margin: clamp(36px, 5vw, 56px) auto 0;
  text-align: center;
  color: var(--primary);
}
.bridge::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin: 26px auto 0;
}
/* the bridge INSIDE a left-aligned section (not its own full-width band):
 * same calm typography, but anchored to the section's left edge so the CTA
 * below it reads as the section's continuation */
.bridge--left {
  max-width: 880px;
  /* bottom gap: the section CTA row below (.cta-actions) has NO top margin —
     without this the button hugs the closing line (owner 2026-10-02) */
  margin: clamp(36px, 5vw, 56px) 0 34px;
  text-align: left;
}
/* owner 2026-09-30 (the «кривая черта» ruling): the in-section variant carries
   NO accent line at all — the CTA button right below IS the separator; a 56px
   dash floating between text and button read as noise across several rounds */
.bridge--left::after { content: none; }

/* ── grids & cards ────────────────────────────────────────────────────── */
.grid {
  display: grid;
  gap: 22px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 30px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out);
}
/* the card/shot/icon HOVER trio moved under the hover-capable media below —
   on touch a :hover lift only sticks after tap (the «залипший лифт» artifact) */
.section-tint .card { background: var(--surface); }
.card h3, .card-step h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
  margin: 0 0 10px;
}
.card p:last-child, .card ul:last-child { margin-bottom: 0; }

/* numbered steps — the hairline matrix (one shared border, calm rhythm) */
.steps-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
/* the 4-step variant (/specialists «Как подключиться», 2026-09-25): a fixed 3-col
 * grid would orphan the 4th card into an empty row — same hairline look, 4 across */
.steps-matrix.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card-step {
  background: var(--surface);
  padding: 34px 30px 38px;
}
.card-step:hover { box-shadow: none; transform: none; border-color: transparent; }
.step-number {
  display: block;
  font-size: 46px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  margin-bottom: 22px;
  font-variant-numeric: tabular-nums;
}
.card-step h3 { margin-bottom: 10px; }
.card-step p { color: var(--text-muted); margin: 0; }

/* icon cards («для кого», «что внутри») */
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--grad-accent-fill);
  margin-bottom: 18px;
}
.icon-wrap svg {
  display: block;
  transition: transform 0.3s var(--ease-out);
}
.card-icon p { color: var(--text-muted); }

/* check / cross lists (trust cards) */
.list-check, .list-cross {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-check li, .list-cross li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  color: var(--text-muted);
}
.list-check li:last-child, .list-cross li:last-child { margin-bottom: 0; }
.list-check li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--success);
}
.list-cross li::before {
  content: '✕';
  position: absolute;
  left: 1px;
  top: 0;
  font-weight: 700;
  color: var(--sos);
}

/* methodology: badges + the pull-quote */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 34px;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 550;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.badge:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── bento science atlas — 116 evidence-based sources (Phase 8.3, docs/55) ── */
.bento-science-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin: 36px 0 44px;
}
.bento-science-card {
  grid-column: span 5;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: clamp(24px, 3.5vw, 34px);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), border-color 0.2s ease;
}
.bento-science-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(217, 119, 87, 0.32);
}
.bento-card-large {
  grid-column: span 7;
}
.bento-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.bento-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--accent-fill);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
.bento-school-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.bento-science-card h3 {
  font-size: 1.25rem;
  font-weight: 650;
  color: var(--primary);
  margin: 0 0 10px;
  line-height: 1.3;
}
.bento-lead {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.bento-authors {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  margin: 0 0 16px;
}
.bento-authors b {
  color: var(--text);
}
.bento-disclosure {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.bento-summary {
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: color 0.16s ease;
}
.bento-summary::-webkit-details-marker {
  display: none;
}
.bento-summary:hover {
  color: var(--accent-press);
}
.bento-summary::after {
  content: '↓';
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}
.bento-disclosure[open] .bento-summary::after {
  transform: rotate(180deg);
}
.bento-list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.bento-list li {
  margin-bottom: 8px;
}
.bento-list li:last-child {
  margin-bottom: 0;
}
.bento-list b {
  color: var(--text);
}
@media (max-width: 900px) {
  .bento-science-card,
  .bento-card-large {
    grid-column: span 12;
  }
}

.quote {
  position: relative;
  font-size: clamp(18px, 2vw, 21px);
  font-weight: 550;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 34px 38px 30px 74px;
  margin: 0;
  box-shadow: var(--shadow-1);
}
.quote::before {
  content: '«';
  position: absolute;
  left: 26px;
  top: 8px;
  font-size: 76px;
  font-weight: 650;
  line-height: 1.2;
  color: var(--accent);
  opacity: 0.55;
}


/* ── examples: a session fragment and the specialist report (round 13) ── */
.chat-card { display: flex; flex-direction: column; gap: 12px; }
.chat-line { max-width: 88%; border-radius: 14px; padding: 11px 15px; font-size: 15px; line-height: 1.55; }
.chat-line--hear {
  align-self: flex-start;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-line--parent {
  align-self: flex-end;
  background: var(--accent-fill);
  border-bottom-right-radius: 4px;
}
.chat-line b { font-weight: 650; }
.chat-card-meta {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
}
.report-card dt {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 14px 0 4px;
}
.report-card dt:first-child { margin-top: 0; }
.report-card dd { margin: 0; color: var(--text-muted); font-size: 15px; }
.report-card .report-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-tertiary);
}


/* the interface gallery (round 13, owner's real screenshots): tall phone frames
 * in one row, lazy, captioned. The 562x1280 JPGs ride the ?v= pipeline. */
.shots-head { margin: clamp(36px, 5vw, 52px) 0 22px; }
.shots-head h3 { font-size: 22px; font-weight: 650; margin: 0 0 6px; }
.shots-head p { margin: 0; color: var(--text-muted); font-size: 15px; }
.shots-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}
.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px -6px rgba(15, 37, 64, 0.12), 0 2px 8px -1px rgba(15, 37, 64, 0.04);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  background: var(--surface2);
}
@media (hover: hover) {
  .shot:hover img {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -8px rgba(15, 37, 64, 0.16), 0 4px 12px -2px rgba(217, 119, 87, 0.12);
    border-color: var(--accent);
  }
}
.shot figcaption {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.shot figcaption b { color: var(--text); font-weight: 650; }
@media (max-width: 980px) {
  .shots-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .shots-row { grid-template-columns: 1fr 1fr; gap: 14px; }
  .shot figcaption { font-size: 12.5px; }
}

/* ── pricing ──────────────────────────────────────────────────────────── */
.price-card {
  display: flex;
  flex-direction: column;
}
.price-card h3 { font-size: 17px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.price-card .price {
  font-size: 34px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 6px 0 20px;
  font-variant-numeric: tabular-nums;
}
.price-period {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-muted);
}
.price-card ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.price-card li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: var(--text-muted);
}
.price-card li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--success);
}
.price-card .btn { margin-top: auto; }
.price-note {
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  margin: 26px 0 0;
}
/* the Pro emphasis: the INVERTED card — visual weight without pressure words,
   wearing the 2026 glow ring (terracotta halo at card depth) */
.price-card-ink {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-ink);
  box-shadow: 0 24px 48px rgba(15, 37, 64, 0.28), 0 0 0 1px rgba(217, 119, 87, 0.28),
    0 0 44px rgba(217, 119, 87, 0.14);
}
.price-card-ink:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 28px 56px rgba(15, 37, 64, 0.30), 0 0 0 1px rgba(217, 119, 87, 0.40),
    0 0 60px rgba(217, 119, 87, 0.20);
}
.price-card-ink .price-period { color: var(--on-ink-muted); }
.price-card-ink li { color: var(--on-ink-muted); }
.price-card-ink li::before { color: var(--accent); }
.price-card-ink .btn-primary { background: var(--accent); }
/* the top rung: Clinic in terracotta — the canonical COLOR LADDER (owner round 12:
   a black card in the middle read as "recommended"; white → ink → terracotta reads
   as a ladder of tiers instead). Text on terracotta is INK (4.95:1 — AA); white
   text here would be 2.77:1 and is forbidden. */
.price-card-terra {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary);
  box-shadow: 0 18px 40px rgba(217, 119, 87, 0.35);
}
.price-card-terra:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 24px 52px rgba(217, 119, 87, 0.45);
}
.price-card-terra .price,
.price-card-terra li,
.price-card-terra li::before,
.price-card-terra .price-period { color: var(--primary); }
.price-card-terra h3 { color: var(--primary); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-list { display: grid; gap: 12px; }
.faq-list details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-list details[open] {
  border-color: rgba(217, 119, 87, 0.55);
  box-shadow: var(--shadow-card);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 24px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  border-radius: 14px;
  transition: background 0.25s ease;
}
.faq-list summary:hover { background: var(--surface2); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  font-size: 19px;
  font-weight: 500;
  color: var(--text-muted);
  transition: transform 0.28s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.faq-list details[open] summary::after {
  content: '−';
  transform: rotate(180deg);
  border-color: var(--accent);
  color: var(--accent-press);
}
@keyframes answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.faq-list details[open] p {
  animation: answer-in 0.3s var(--ease-out) both;
}
.faq-list details p {
  padding: 0 24px 22px;
  margin: 0;
  color: var(--text-muted);
  max-width: 720px;
}
/* the 2026 native accordion: where the platform can interpolate to
   auto height (Chrome 129+), the answer slides open for real; everywhere
   else the opacity fade above stands — progressive, never broken */
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  .faq-list details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete;
  }
  .faq-list details[open]::details-content { block-size: auto; }
}

/* ── the CTA band (ink) ───────────────────────────────────────────────── */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--on-ink);
  padding: var(--sp-section) 0;
}
.cta-band::before {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -12%;
  width: 55%;
  height: 95%;
  background: radial-gradient(ellipse at center, var(--glow-accent) 0%, rgba(217, 119, 87, 0) 68%);
  pointer-events: none;
}
.cta-band .container {
  position: relative;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 auto 18px;
  max-width: 760px;
}
.cta-sub {
  font-size: var(--fs-lead);
  color: var(--on-ink-muted);
  max-width: 560px;
  margin: 0 auto 34px;
}
.cta-actions {
  /* Alignment is owned by the CONTEXT: centered inside .cta-band (where the
   * heading and sub are centered too), start-aligned everywhere else — a
   * section's CTA sits under its left-aligned content, never floating
   * sideways (owner 2026-09-30: the button must sit UNDER the closing line). */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.cta-band .cta-actions { justify-content: center; }
.cta-meta { font-size: 14.5px; color: var(--on-ink-soft); margin: 0; }

/* ── footer (ink) ─────────────────────────────────────────────────────── */
.site-footer {
  background: var(--primary);
  color: var(--on-ink-muted);
  padding: clamp(48px, 6vw, 72px) 0 34px;
  border-top: 1px solid var(--ink-line);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; /* 4th col = Материалы (2026-09-25 SEO round) */
  gap: 44px;
  margin-bottom: 42px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: flex; align-items: center; gap: 10px; }
.footer-name {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--on-ink);
}
.footer-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: var(--on-ink-soft);
  max-width: 300px;
  margin: 0;
}
.footer-col h3 {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  margin: 0 0 16px;
}
.footer-col a {
  display: block;
  font-size: 14.5px;
  color: var(--on-ink-muted);
  text-decoration: none;
  padding: 10px 0;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--on-ink); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 28px;
  border-top: 1px solid var(--ink-line);
  padding-top: 24px;
  font-size: 12.5px;
  color: var(--on-ink-soft);
}
.footer-bottom p { margin: 0; }

/* ── inner pages: the ink head band ─────────────────────────────────────
 * The inner-page hero shares the FRONT-PAGE hero canon (owner 2026-09-30):
 * same paddings, same kicker metrics (12px caps), same display size and
 * rhythm (h1 22px gap → lead 34px gap → actions). It differed before only
 * because `.page-head-ink p` (0,1,1) silently overrode `.kicker` (0,1,0) —
 * the kicker rendered at lead size with zero margins and the whole stack
 * glued together. The kicker override below restores its canon explicitly. */
.page-head-ink {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--on-ink);
  padding: clamp(72px, 10vw, 128px) 0 clamp(56px, 7vw, 88px);
}
.page-head-ink::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 50%;
  height: 120%;
  background: radial-gradient(ellipse at center, var(--glow-accent) 0%, rgba(217, 119, 87, 0) 68%);
  pointer-events: none;
}
.page-head-ink .container { position: relative; }
.page-head-ink .kicker {
  /* restore the shared kicker canon (.kicker loses the .page-head-ink p override) */
  font-size: 12px;
  margin: 0 0 18px;
  max-width: none;
}
.page-head-ink h1 {
  font-size: var(--fs-display);
  font-weight: 650;
  line-height: 1.07;
  letter-spacing: -0.022em;
  max-width: 980px;
  margin: 0 0 22px;
}
.page-head-ink p {
  font-size: var(--fs-lead);
  line-height: 1.68;
  color: var(--on-ink-muted);
  max-width: 640px;
  margin: 0 0 34px;
}

/* ── download page ────────────────────────────────────────────────────── */
.download-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
  padding: clamp(44px, 6vw, 72px) 24px clamp(64px, 8vw, 96px);
}
.download-layout h2 { font-size: 24px; font-weight: 650; margin: 40px 0 18px; }
.install-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}
.install-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 62px;
}
.install-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-press);
  font-size: 17px;
  font-weight: 650;
}
.install-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19.5px;
  top: 44px;
  bottom: 4px;
  width: 1px;
  background: var(--border);
}
.install-steps li { color: var(--text-muted); }
.sha-block {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  font-size: 14px;
  color: var(--text-muted);
}
.sha-block p { margin: 0 0 8px; }
.sha-block code {
  display: block;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  word-break: break-all;
  color: var(--primary);
}
.ios-block {
  margin-top: 36px;
  padding: 24px 26px;
  border-radius: 14px;
  background: var(--surface2);
  border: 1px solid var(--border);
}
.ios-block h3 { font-size: 17px; font-weight: 650; margin: 0 0 8px; }
.ios-block p { margin: 0; color: var(--text-muted); }
.qr-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  padding: 28px;
  text-align: center;
}
.qr-caption {
  font-size: 13.5px;
  color: var(--text-tertiary);
  margin: 14px 0 0;
}

/* ── changelog ────────────────────────────────────────────────────────── */
.changelog-wrap { padding: clamp(40px, 5vw, 64px) 24px clamp(64px, 8vw, 96px); }
.loading-arcs {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 56px 0;
}
.loading-arcs span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.25;
  animation: arc-pulse 1.2s ease-in-out infinite;
}
.loading-arcs span:nth-child(2) { animation-delay: 0.2s; }
.loading-arcs span:nth-child(3) { animation-delay: 0.4s; }
@keyframes arc-pulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-6px); }
}
.changelog-fallback { color: var(--text-muted); }
.changelog-list, #changelog {
  display: grid;
  gap: 20px;
  max-width: var(--container-narrow);
  margin: 0 auto;
}
.version-card {
  position: relative;
  padding: 24px 28px 24px 62px;
}
.version-card::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 29px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 2;
}
.version-card::after {
  content: '';
  position: absolute;
  left: 28.5px;
  top: 42px;
  bottom: -22px;
  width: 1px;
  background: var(--border);
  z-index: 1;
}
.version-card:last-child::after { display: none; }
.version-card h3 { font-size: 18px; font-weight: 650; margin: 0 0 10px; line-height: 1.35; }
.version-card ul { margin: 0; padding-left: 20px; color: var(--text-muted); }
.version-card li { margin-bottom: 6px; }
.version-card li:last-child { margin-bottom: 0; }

/* ── legal document pages ─────────────────────────────────────────────── */
.doc-wrap { padding: clamp(40px, 5vw, 64px) 24px clamp(72px, 9vw, 110px); }
.noscript-note {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 28px;
}
.doc-body {
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}
.doc-body h1 {
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
}
.doc-body h2 {
  font-size: 22px;
  font-weight: 650;
  margin: 44px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.doc-body h3 { font-size: 18px; font-weight: 650; margin: 30px 0 10px; }
.doc-body h4 { font-size: 16px; font-weight: 650; margin: 24px 0 8px; }
.doc-body p { margin: 0 0 14px; }
/* doc-body links (2026-09-25, the SEO guides): the legal texts carried NO links, so
 * these anchors fell through to the global `a { color: inherit }` — visually plain
 * text, an invisible affordance. Same design language as .link-text (contrast
 * contract: the underline carries the accent, the text stays ink). */
.doc-body a {
  color: var(--accent-hover);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.doc-body a:hover {
  color: var(--primary);
  text-decoration-color: var(--primary);
}
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 26px; }
.doc-body li { margin-bottom: 7px; }
.doc-body li > ul, .doc-body li > ol { margin: 6px 0 4px; } /* a nested list hugs its item */
/* RU dash lists («— пункт» in the legal texts): the marker IS the dash — the source's
   typographic voice, not a disc. text-muted for the glyph passes the paper contrast
   law (≈5.2:1); the item text stays --text. */
.doc-body ul.dash { list-style: none; padding-left: 2px; }
.doc-body ul.dash > li { position: relative; padding-left: 24px; }
.doc-body ul.dash > li::before {
  content: '—';
  position: absolute;
  left: 2px;
  color: var(--text-muted);
}
.doc-body ul.dash ul.dash > li::before { content: '·'; left: 10px; } /* nesting: dot, not a second dash */
.doc-body hr { border: none; border-top: 1px solid var(--border); margin: 34px 0; }
.doc-body strong { font-weight: 650; }
.doc-body code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}
.table-wrap { overflow-x: auto; margin: 0 0 20px; }
.doc-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.doc-body th {
  text-align: left;
  font-weight: 650;
  background: var(--surface2);
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.doc-body td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.doc-body tr:last-child td { border-bottom: none; }
.doc-error {
  background: var(--surface);
  border: 1px solid rgba(217, 119, 87, 0.5);
  border-radius: 12px;
  padding: 22px 26px;
  color: var(--text-muted);
}

/* ── error pages (404 / 50x) ──────────────────────────────────────────── */
.error-page {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px 24px;
}
.error-page--ink {
  background: var(--primary);
  color: var(--on-ink);
}
.error-page--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--glow-accent) 0%, rgba(217, 119, 87, 0) 60%);
  pointer-events: none;
}
.error-page--ink { position: relative; overflow: hidden; }
.error-page > * { position: relative; }
.error-mark { margin-bottom: 26px; opacity: 0.9; }
.error-page h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 650;
  margin: 0 0 14px;
}
.error-page p {
  font-size: 17.5px;
  color: var(--text-muted);
  max-width: 520px;
  margin: 0 0 30px;
}
.error-page--ink p { color: var(--on-ink-muted); }

/* ── reveal-on-scroll (progressive: invisible only when .js says so) ──── */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
}
.js .reveal.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.js .reveal.d1.in-view { transition-delay: 0.09s; }
.js .reveal.d2.in-view { transition-delay: 0.18s; }
.js .reveal.d3.in-view { transition-delay: 0.27s; }

/* the lift trio (was: in-place :hover rules — on touch they stuck after tap) */
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    border-color: rgba(217, 119, 87, 0.45);
  }
  .card:hover .icon-wrap svg { transform: scale(1.06); }
  .shot:hover img { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .grid-3, .steps-matrix { grid-template-columns: 1fr 1fr; }
  .steps-matrix.cols-4 { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .stat:nth-child(3) { border-left: none; padding-left: 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .download-layout { grid-template-columns: 1fr; }
  .qr-block { max-width: 420px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  /* 5 nav items + brand + CTA don't fit below this — the CTA stays (2026-09-25:
     the «Специалистам» item joined; at 620 the row already overflowed with 4) */
  .site-nav { display: none; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .steps-matrix, .steps-matrix.cols-4 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 0 0 0 18px; }
  .stat:nth-child(3) { padding-left: 18px; }
  .footer-bottom { flex-direction: column; }
  .quote { padding: 28px 26px 24px 58px; }
  .quote::before { left: 18px; font-size: 60px; }
  .card { padding: 24px 22px; }
  .card.version-card { padding: 22px 18px 22px 56px; }
  .card.version-card::before { left: 20px; top: 26px; width: 8px; height: 8px; }
  .card.version-card::after { left: 23.5px; top: 38px; bottom: -22px; }
}

/* ── print: legal pages print clean, chrome-free ──────────────────────── */
@media print {
  .site-header, .site-footer, .skip-link, .cta-band { display: none; }
  body { background: #FFFFFF; color: var(--text); font-size: 12pt; }
  .doc-body { max-width: none; }
  .doc-body table, .doc-body th, .doc-body td { border: 1px solid var(--border); }
}

/* ── the master motion kill-switch (2026 a11y canon) ─────────────────────
 * One blanket instead of a growing list of per-rule exceptions: reduced
 * motion collapses every animation/transition to nothing, instantly leaving
 * the FINAL static state. Calm by default, still for those who need still. */
/* the tired-evening reader: when the OS asks for MORE contrast, the muted and
   tertiary text snap to full ink — token reassignment only, no new colors */
@media (prefers-contrast: more) {
  :root { --text-muted: var(--text); --text-tertiary: var(--text); }
}

@media (prefers-reduced-motion: reduce) {
  /* the breathing arcs must REST at full opacity (the universal 0.01ms rule would
   * freeze them mid-breath at the faded/scaled end-state) */
  .hero-arc--outer, .hero-arc--inner { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* YM noscript pixel (analytics loader, 2026-09-09) — hidden off-canvas by CLASS,
   never an inline attribute: the CSP silently strips presentational attributes,
   which would leave the 1×1 tracking img visibly inline at the page top for
   JS-off visitors. Stamped/erased together with the counter ID
   (tools/site_set_analytics.py). */
.ym-pixel { position: absolute; left: -9999px; }