/* ==========================================================================
   Ритм: публичный лендинг. Направление: Quiet Observatory (внутреннее имя,
   в интерфейс не попадает). Токены зеркалят src/styles/tokens.css (OKLCH):
   светлая emerald-champagne (тема владельца) и тёмная graphite-emerald.
   Один акцент (изумруд) <10% площади. Лайм живёт только точкой в вордмарке.
   ========================================================================== */

/* ---- шрифты: self-hosted woff2, SIL OFL 1.1 (см. fonts/LICENSES.md) ---- */
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/landing/fonts/sourceserif/source-serif-4-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/landing/fonts/sourceserif/source-serif-4-cyrillic-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/landing/fonts/sourceserif/source-serif-4-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/landing/fonts/onest/onest-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/landing/fonts/onest/onest-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/landing/fonts/unbounded/unbounded-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* метрики запасных гарнитур: до загрузки шрифта текст занимает столько же места (нет сдвига) */
@font-face { font-family: 'Serif Fallback'; src: local('Georgia'), local('Times New Roman'), local('DejaVu Serif');
  size-adjust: 93%; ascent-override: 98%; descent-override: 34%; line-gap-override: 0%; }
@font-face { font-family: 'Sans Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 101%; ascent-override: 97%; descent-override: 26%; line-gap-override: 0%; }

/* ---- токены ---- */

/* ---- токены (зеркало src/styles/tokens.css, язык тикета 28: сцена, стекло, тиснение, колесо) ---- */
:root {
  --font-serif: 'Source Serif 4', 'Serif Fallback', Georgia, serif;
  --font-sans: 'Onest', 'Sans Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', var(--font-sans);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-pop: cubic-bezier(0.34, 1.4, 0.64, 1);
  --d-fast: 120ms; --d-base: 200ms; --d-enter: 480ms;
  --t-s: 0.9375rem; --t-body: 1.0625rem;
  --t-lead: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
  --t-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --t-h2: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  --t-fact: clamp(3.5rem, 1.6rem + 4.4vw, 5.75rem);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --sec: clamp(72px, 4vw + 48px, 128px);
  --r-md: 14px; --r-lg: 22px;
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 76px;
}
:root, [data-theme='dark'] {
  color-scheme: dark;
  --bg: oklch(0.165 0.012 268); --bg-2: oklch(0.2 0.014 268); --surface: oklch(0.235 0.016 268);
  --ink: oklch(0.965 0.008 100); --ink-2: oklch(0.80 0.014 100); --ink-3: oklch(0.68 0.014 100);
  --line: oklch(1 0 0 / 0.09); --line-2: oklch(1 0 0 / 0.16);
  --accent: oklch(0.72 0.16 152); --accent-2: oklch(0.78 0.16 152); --accent-ink: oklch(0.2 0.03 155);
  --neg: oklch(0.74 0.16 25);
  --grain: 0.05;
  --sky-a: oklch(.15 .015 230); --sky-b: oklch(.20 .03 190); --sky-c: oklch(.34 .07 165);
  --glass-bg: oklch(.30 .02 200 / .22); --glass-edge: oklch(1 0 0 / .16);
  --emb-face: oklch(.34 .06 168); --emb-light: oklch(.78 .13 158 / .9); --emb-dark: oklch(0 0 0 / .9); --emb-cast: oklch(0 0 0 / .65);
  --hill-a: oklch(.24 .04 175); --hill-b: oklch(.15 .02 200);
  --word: oklch(.78 .11 160 / .30);
  --petal-l: .62; --petal-c: .11; --track: oklch(.30 .03 160 / .55); --hub: oklch(.24 .03 160);
  --scene-ink: var(--ink); --ink-glass: var(--ink-2);
  --wheel-base: oklch(.20 .03 175 / .8); --wheel-glow: oklch(.60 .14 160 / .55);
  --ground: var(--hill-b); --g-ink: oklch(0.965 0.008 100); --g-ink-2: oklch(0.80 0.014 100); --g-accent: oklch(0.78 0.16 152);
  --pill-solid: oklch(.235 .016 268 / .94);
  --area-l: 0.62; --area-c: 0.11;
}
[data-theme='light'] {
  color-scheme: light;
  --bg: oklch(0.955 0.028 82); --bg-2: oklch(0.935 0.032 82); --surface: oklch(0.985 0.012 85);
  --ink: oklch(0.27 0.06 165); --ink-2: oklch(0.42 0.05 165); --ink-3: oklch(0.5 0.04 160);
  --line: oklch(0.27 0.06 165 / 0.12); --line-2: oklch(0.27 0.06 165 / 0.2);
  --accent: oklch(0.42 0.1 165); --accent-2: oklch(0.36 0.09 165); --accent-ink: oklch(0.97 0.02 85);
  --neg: oklch(0.55 0.17 28);
  --grain: 0.035;
  --sky-a: oklch(.93 .04 150); --sky-b: oklch(.80 .07 165); --sky-c: oklch(.55 .09 168);
  --glass-bg: oklch(.99 .01 85 / .18); --glass-edge: oklch(1 0 0 / .7);
  --emb-face: oklch(.90 .05 155); --emb-light: oklch(1 0 0 / .95); --emb-dark: oklch(.46 .08 166 / .75); --emb-cast: oklch(.35 .08 168 / .35);
  --hill-a: oklch(.49 .09 168); --hill-b: oklch(.37 .09 168);
  --word: oklch(.40 .10 165 / .55);
  --petal-l: .70; --petal-c: .105; --track: oklch(.88 .03 160 / .45); --hub: oklch(.93 .03 160);
  --scene-ink: oklch(.27 .06 165); --ink-glass: color-mix(in oklab, var(--ink-2) 55%, var(--ink));
  --wheel-base: oklch(.84 .04 160 / .55); --wheel-glow: oklch(.95 .06 120 / .7);
  --ground: oklch(.34 .08 168); --g-ink: oklch(0.975 0.02 85); --g-ink-2: oklch(0.88 0.03 120); --g-accent: oklch(0.86 0.15 140);
  --pill-solid: oklch(.985 .012 85 / .94);
  --area-l: 0.77; --area-c: 0.06;
}
:root { --glass: var(--glass-bg); }

/* тёмная земля: текст и акцент одни в обеих темах; тиснение — как в тёмной теме */
.ground {
  --ink: var(--g-ink); --ink-2: var(--g-ink-2); --ink-3: var(--g-ink-2); --accent: var(--g-accent); --accent-ink: oklch(.2 .03 155);
  --line: oklch(1 0 0 / .12); --line-2: oklch(1 0 0 / .2); --glass: oklch(1 0 0 / .07); --glass-edge: oklch(1 0 0 / .16);
  --emb-face: oklch(.52 .1 165); --emb-light: oklch(.82 .13 158 / .9); --emb-dark: oklch(0 0 0 / .85); --emb-cast: oklch(0 0 0 / .6);
  background: var(--ground); color: var(--ink);
}

/* ---- база ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-body)/1.47 var(--font-sans); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; font-variant-numeric: proportional-nums; }
body::after { content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; background: url('/landing/noise.png'); opacity: var(--grain); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
b, strong { font-weight: 600; }
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--surface); color: var(--ink); padding: 12px 20px; border-radius: 999px; }
.skip:focus { top: 12px; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; text-wrap: balance; font-optical-sizing: auto; }
h1 { letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.028em; }
h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
.link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { color: var(--accent); }

/* ---- кнопка-пилюля (второстепенная: тарифы; главная — кольцевая .pa) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 0 28px; border-radius: 999px;
  color: var(--ink); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-edge);
  font: 500 var(--t-body)/1 var(--font-sans); letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), background-color var(--d-base) var(--ease-out); }
.btn:hover { background: color-mix(in oklab, var(--ink) 12%, transparent); }
.btn:active { transform: scale(.98); }
.btn--block { width: 100%; }
.plan--year .btn { background: var(--accent); color: var(--accent-ink); border-color: transparent; box-shadow: none; font-weight: 600; }
.plan--year .btn:hover { background: color-mix(in oklab, var(--accent) 88%, white); }

/* ---- шапка: поверх сцены — стекло над неподвижным небом; после прокрутки — плотные капсулы без размытия ---- */
.nav { position: fixed; z-index: 50; top: 16px; left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; pointer-events: none; }
.nav > *, .nav__right > * { pointer-events: auto; }
.nav__right { display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--scene-ink); text-decoration: none; border-radius: 999px; transition: background-color var(--d-base), padding var(--d-base) var(--ease-out); }
.brand b { color: var(--accent); font-weight: 800; }
.nav__pill, .toggle, .nav__start { background: var(--glass); border: 1px solid var(--glass-edge); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color var(--d-base); }
.nav__pill { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 1px 0 var(--glass-edge); }
.nav__pill a.l { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--scene-ink); opacity: .8; transition: opacity var(--d-fast), background-color var(--d-fast); }
.nav__pill a.l:hover, .nav__pill a.l.is-active { opacity: 1; background: color-mix(in oklab, var(--scene-ink) 10%, transparent); }
.toggle { display: flex; gap: 4px; padding: 4px; border-radius: 999px; }
.toggle button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--scene-ink); cursor: pointer; opacity: .7; transition: opacity var(--d-fast); }
.toggle button[aria-pressed='true'] { background: var(--surface); opacity: 1; box-shadow: 0 1px 2px oklch(0 0 0 / .1); color: var(--ink); }
.toggle button:hover { opacity: 1; }
.nav__start { display: grid; place-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; color: var(--scene-ink); }
.nav.scrolled .nav__pill, .nav.scrolled .toggle, .nav.scrolled .nav__start { background: var(--pill-solid); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line-2); }
.nav.scrolled .nav__pill a.l, .nav.scrolled .nav__start, .nav.scrolled .brand { color: var(--ink); }
.nav.scrolled .toggle button { color: var(--ink); }
.nav.scrolled .brand { padding: 0 16px; background: var(--pill-solid); border: 1px solid var(--line-2); }
.nav.scrolled .brand b { color: var(--accent); }

/* ---- сцена: небо, холмы ---- */
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-a) 0%, var(--sky-b) 70%, var(--sky-c) 100%); }
[data-theme='dark'] .sky { background: radial-gradient(80% 70% at 27% 100%, var(--sky-c), transparent 70%), linear-gradient(180deg, var(--sky-a), var(--sky-b)); }
.hill { position: absolute; z-index: 2; left: -10%; right: -10%; bottom: -8vh; height: 24vh; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, var(--hill-a), var(--hill-b)); box-shadow: inset 0 1px 0 oklch(1 0 0 / .18); }
.hill--far { left: 35%; right: -35%; bottom: -12vh; height: 22vh; opacity: .9; }

/* ---- hero A «Восход» ---- */
.hero { position: relative; min-height: max(100svh, 720px); overflow: hidden; isolation: isolate; }
.hero__word { position: absolute; z-index: 0; left: 50%; right: 0; top: 12vh; text-align: center; white-space: nowrap; user-select: none;
  font-family: var(--font-serif); font-weight: 600; font-size: min(19vw, 290px); line-height: 1; letter-spacing: -0.05em; color: var(--word); }
.hero__word span { display: inline-block; animation: letter 1.1s var(--ease-pop) calc(.1s + var(--i) * .08s) both; }
@keyframes letter { from { opacity: 0; transform: translateY(.16em) rotate(-6deg); } to { opacity: 1; transform: none; } }
.hero__wheel { --ww: min(88vh, 58vw); position: absolute; z-index: 1; left: 72%; bottom: -34vh; width: var(--ww); margin-left: calc(var(--ww) / -2); animation: wheel-in 1.8s var(--ease-out) .15s both; }
@keyframes wheel-in { from { opacity: 0; transform: translateY(14%); } to { opacity: 1; transform: none; } }
.hero__wheel .wheel__glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, var(--wheel-glow), transparent 72%); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.hero__wheel .wheel__spin { position: relative; animation: turn 160s linear infinite; }
@keyframes turn { to { transform: rotate(360deg); } }
@supports (animation-timeline: scroll()) {
  .hero__wheel .wheel__spin { animation: turn linear both; animation-timeline: scroll(root); animation-range: 0 110vh; }
}
.hero__copy { position: relative; z-index: 3; width: min(640px, 100%); padding: clamp(120px, 19vh, 200px) var(--gutter) 0; }
.hero__copy h1 { font-size: clamp(2.6rem, 1rem + 3.4vw, 4.25rem); color: var(--scene-ink); }
.hero__lead { margin-top: 24px; max-width: 30em; font-size: var(--t-lead); line-height: 1.4; color: var(--ink-glass); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 36px; }
.hero .link { color: var(--scene-ink); }
.hero__trust { margin-top: 20px; font-size: 14px; color: var(--ink-glass); }
.hero__copy > * { animation: rise .9s var(--ease-out) both; }
.hero__copy > :nth-child(1) { animation-delay: .25s; } .hero__copy > :nth-child(2) { animation-delay: .35s; }
.hero__copy > :nth-child(3) { animation-delay: .45s; } .hero__copy > :nth-child(4) { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
/* заголовок героя виден сразу (иначе LCP ждёт конца появления); едет только по оси Y */
.hero__copy > h1 { animation-name: rise-y; animation-delay: 0s; }
@keyframes rise-y { from { transform: translateY(16px); } to { transform: none; } }

/* колесо: матовое, как на входе (свет — неподвижный слой поверх) */
.scene-wheel__svg { display: block; width: 100%; height: auto; overflow: visible; }
.scene-wheel__base { fill: var(--wheel-base); }
.scene-wheel__track { fill: var(--track); }
.scene-wheel__petal { fill: oklch(var(--petal-l) var(--petal-c) var(--h)); }
.scene-wheel__hub { fill: var(--hub); }
.scene-wheel__light { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(38% 30% at 34% 24%, oklch(1 0 0 / .14), transparent 70%), linear-gradient(150deg, oklch(1 0 0 / .07) 0%, transparent 42%, oklch(0 0 0 / .20) 100%); }
.scene-wheel__light::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px oklch(1 0 0 / .10), inset -14px -22px 50px oklch(0 0 0 / .22), inset 10px 14px 30px oklch(1 0 0 / .08); }
.petal__grow { transform-origin: 50px 50px; animation: petal-grow .9s var(--ease-out) calc(.45s + var(--i) * .07s) both; }
@keyframes petal-grow { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: none; } }

/* ---- кольцевая главная кнопка (CSS из PrimaryAction, вариант header; кольцо крутится только transform) ---- */
.pa { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border: 0; padding: 0; text-decoration: none; cursor: pointer;
  font: 500 17px/1.2 var(--font-sans); color: var(--scene-ink); letter-spacing: -0.01em; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-fast) var(--ease-out), box-shadow var(--d-base) var(--ease-out); }
.pa--header { gap: 16px; min-height: 66px; padding: 7px 28px 7px 7px; border-radius: 999px; border: 1px solid var(--glass-edge); isolation: isolate; box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px oklch(0 0 0 / .18); }
.pa__bg { position: absolute; inset: 0; border-radius: inherit; background: var(--glass); pointer-events: none; z-index: -3; }
.pa--header:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--glass-edge), 0 26px 60px oklch(0 0 0 / .22); }
.pa--header:active { transform: scale(.98); }
.pa:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pa__ring { position: relative; display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; isolation: isolate; color: var(--accent); }
.pa__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -2;
  background: conic-gradient(from 0deg, oklch(.80 .17 158), oklch(.93 .10 95), oklch(.98 .02 100), oklch(.74 .14 195), oklch(.58 .17 150), oklch(.88 .13 125), oklch(.80 .17 158));
  box-shadow: 0 0 14px oklch(.78 .16 158 / .7), 0 0 30px oklch(.80 .12 130 / .35); animation: pa-ring 5s linear infinite; }
.pa__ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; z-index: -1; background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--surface) 92%, white), var(--surface)); box-shadow: inset 0 1px 2px oklch(1 0 0 / .4), inset 0 -2px 6px oklch(0 0 0 / .12); }
.pa__glow { position: absolute; left: -6px; top: 50%; width: 72px; height: 72px; margin-top: -36px; border-radius: 50%; background: radial-gradient(closest-side, oklch(.78 .15 158 / .75), transparent); filter: blur(8px); pointer-events: none; z-index: -1; }
[data-ring-paused] .pa__ring::before { animation-play-state: paused; }
@keyframes pa-ring { to { transform: rotate(360deg); } }

/* ---- тиснение (kit Emboss) для крупных чисел ---- */
.emb { color: var(--emb-face); font-weight: 600;
  text-shadow: -.008em -.008em 0 var(--emb-light), -.014em -.014em .006em var(--emb-light), .008em .01em 0 var(--emb-dark), .016em .02em .008em var(--emb-dark), .03em .06em .08em var(--emb-cast); }

/* ---- полоса цифр на земле ---- */
.facts { padding-block: clamp(72px, 8vw, 128px); }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6) var(--s-7); }
.fact { position: relative; padding-top: var(--s-5); }
.fact::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; background: var(--line-2); }
.fact::after { content: ''; position: absolute; inset: 0 0 auto; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out) .15s; }
.fact__num { font: 600 var(--t-fact)/1 var(--font-serif); letter-spacing: -0.04em; white-space: nowrap; }
.fact__num i { font-style: normal; font-weight: 300; margin-inline: 0.03em; }
.fact dd { text-wrap: balance; margin-top: var(--s-4); max-width: 22ch; line-height: 1.4; color: var(--ink); }
.fact--wide dd { max-width: 46ch; }
.wbar { display: flex; font-size: 0; gap: 4px; margin-top: var(--s-5); height: 8px; }
.wbar span { flex: 15; border-radius: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out); }
.wbar span:nth-child(-n+2) { flex: 35; }
.wbar span:nth-child(2) { opacity: 0.72; } .wbar span:nth-child(3) { opacity: 0.5; } .wbar span:nth-child(4) { opacity: 0.32; }
.js .fact { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
.js .facts.is-in .fact { opacity: 1; transform: none; }
.js .facts.is-in .fact::after { transform: scaleX(1); }
.js .facts.is-in .wbar span { transform: none; }
.js .facts.is-in .wbar span:nth-child(2) { transition-delay: .15s; } .js .facts.is-in .wbar span:nth-child(3) { transition-delay: .3s; } .js .facts.is-in .wbar span:nth-child(4) { transition-delay: .45s; }
.js .facts.is-in .fact:nth-child(2) { transition-delay: .1s; } .js .facts.is-in .fact:nth-child(3) { transition-delay: .2s; } .js .facts.is-in .fact:nth-child(4) { transition-delay: .3s; }

/* ---- экран продукта: стеклянная рамка, фиксированное соотношение (слот под тикет 25) ---- */
.product { padding-block: var(--sec) 0; }
.product__title { max-width: 18ch; font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5rem); line-height: 1.04; letter-spacing: -0.028em; }
.product__lead { margin-top: var(--s-5); max-width: 46ch; font-size: var(--t-lead); color: var(--ink-2); }
.product__frame { position: relative; margin-top: var(--s-8); aspect-ratio: 1440 / 892; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 24px 48px -8px oklch(0.2 0.02 160 / 0.28), inset 0 1px 0 var(--glass-edge); }
.product__frame::after { content: ''; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.product__img, .product__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.product__img--dark { display: none; }
[data-theme='dark'] .product__img--light { display: none; }
[data-theme='dark'] .product__img--dark { display: block; }
.js .product__frame[data-reveal] { transform: translateY(40px) scale(.96); transform-origin: 50% 0; transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .product__frame[data-reveal].in { transform: none; }

/* ---- экраны разделов: сетка 2x2 ---- */
.screens { padding-block: var(--sec) 0; }
.screens__title { max-width: 20ch; font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4rem); line-height: 1.06; letter-spacing: -0.026em; }
.screens__lead { margin-top: var(--s-5); max-width: 46ch; font-size: var(--t-lead); color: var(--ink-2); }
.screens__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); margin-top: var(--s-8); }
.shot { margin: 0; }
.shot__frame { position: relative; aspect-ratio: 1440 / 893; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 18px 36px -10px oklch(0.2 0.02 160 / 0.26), inset 0 1px 0 var(--glass-edge); }
.shot__frame::after { content: ''; position: absolute; inset: auto 0 0; height: 18%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.shot__img, .shot__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot__img--dark { display: none; }
[data-theme='dark'] .shot__img--light { display: none; }
[data-theme='dark'] .shot__img--dark { display: block; }
.shot figcaption { margin-top: var(--s-3); font-size: var(--t-s); color: var(--ink-2); }
.shot figcaption b { color: var(--ink); font-weight: 600; }

/* ---- ролики: 9:16, играют только во вьюпорте ---- */
.motion { padding-block: var(--sec) 0; }
.motion__title { max-width: 18ch; font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4rem); line-height: 1.06; letter-spacing: -0.026em; }
.motion__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-8); }
.clip { margin: 0; }
.clip__frame { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: 0 18px 36px -10px oklch(0.2 0.02 160 / 0.26), inset 0 1px 0 var(--glass-edge); }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip figcaption { margin-top: var(--s-3); font-size: var(--t-s); color: var(--ink-2); }


/* ---- история: колесо в липкой сцене, шаги справа ---- */
.story { padding-block: var(--sec) 0; --pane: calc(100svh - var(--nav-h)); }
.story__title { max-width: 18ch; font-size: clamp(2.5rem, 1.2rem + 4.4vw, 5rem); line-height: 1.04; letter-spacing: -0.028em; }
.story__grid { margin-top: var(--s-7); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--s-9); align-items: start; }
.story__stage { position: sticky; top: var(--nav-h); height: var(--pane); display: grid; place-items: center; }
.story__stage .wheel--story { width: min(100%, 540px, calc(var(--pane) - 48px)); }
.wheel--story { container-type: inline-size; position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--wheel-base); box-shadow: 0 30px 60px -12px oklch(0 0 0 / .35); margin: 0; }
[data-theme='light'] .wheel--story { background: oklch(.86 .04 160); }
.wheel--story .wheel__svg { position: absolute; inset: 3%; width: 94%; height: 94%; overflow: visible; will-change: transform; }
.wheel__hub { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; gap: 2px; }
.wheel__name { font-size: clamp(0.625rem, 3.4cqi, 0.9375rem); font-weight: 500; color: var(--ink-2); min-height: 1.3em; }
.wheel__num { font: 600 clamp(2rem, 12cqi, 5rem)/0.95 var(--font-serif); letter-spacing: -0.03em; color: var(--ink); }
.wheel__delta { margin-top: .4cqi; white-space: nowrap; font-size: clamp(0.5625rem, 3cqi, 0.875rem); font-weight: 600; color: var(--neg); min-height: 1.3em; }
.g-track { fill: var(--track); }
.g-ring { fill: none; stroke: var(--line-2); stroke-width: 1; transform-origin: 200px 200px; transform: rotate(-90deg); }
.g-hub { fill: var(--hub); stroke: oklch(0 0 0 / .25); stroke-width: 1.2; }
.wheel--story .petal { fill: oklch(var(--area-l) var(--area-c) var(--h)); stroke: oklch(1 0 0 / .22); stroke-width: 1; transform-origin: 200px 200px; transition: fill .45s var(--ease-out), opacity .5s var(--ease-out); }
.wheel--story .petal.is-on { fill: var(--accent); }
.wheel--story.dim .petal:not(.is-on) { opacity: .55; }
.wheel--story.split .petal.is-on { opacity: .1; }
.wheel__split { position: absolute; inset: 3%; pointer-events: none; will-change: transform; }
.wheel__wedge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; opacity: 0; transform: scale(.86); will-change: transform; }
.wheel__wedge path { fill: var(--accent); }
.g-ghost path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .6; transition: stroke-dashoffset 1.1s var(--ease-out) calc(var(--gi) * 45ms); }
.wheel:not(.weeks) .g-ghost path { transition-duration: .4s; transition-delay: 0s; }
.g-delta { fill: var(--neg); opacity: 0; transition: opacity .5s var(--ease-out); }
.g-delta-line { fill: none; stroke: var(--neg); stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s var(--ease-out); }
.wheel.weeks .g-ghost path { stroke-dashoffset: 0; }
.wheel.weeks .g-delta { opacity: 1; transition-duration: .6s; transition-delay: .85s; }
.wheel.weeks .g-delta-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-out) .35s; }
@container (max-width: 320px) { .wheel__delta-long { display: none; } .wheel__name { font-size: .5625rem; letter-spacing: -.01em; } }
.steps { padding-bottom: 15svh; }
.step { min-height: 56svh; display: flex; flex-direction: column; justify-content: center; max-width: 34rem; padding-block: var(--s-6); }
.step h3 { font-size: clamp(2.5rem, 1.4rem + 2.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.025em; }
.step p { margin-top: var(--s-5); font-size: var(--t-lead); line-height: 1.42; letter-spacing: -0.012em; }
.step p b { color: var(--ink); }
.js .step { transform: translateY(10px); transition: transform .6s var(--ease-out); }
/* цвет текста шага — кроссфейд по opacity слоёв .tone поверх (app.js), а не transition color: та перерисовывала корневой слой (тикет 33).
   Текст в DOM один (сам узел, тон «выкл», всегда opacity 1); слои — пустые копии разметки, глифы из ::before { content: attr(data-t) } */
.js .step h3, .js .step p, .js .calc dt, .js .calc dd { position: relative; }
.js .step h3, .js .step p, .js .step p > b, .js .calc dt, .js .calc dd { color: var(--ink-3); }
.tone { display: block; position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease-out); pointer-events: none; user-select: none; }
.tone [data-t]::before { content: attr(data-t); }
.step.wc .tone { will-change: opacity; } /* слои тонов композитятся только у шага, который сейчас проявляется или гаснет (app.js) */
.calc .tone { transition-duration: .35s; }
.step .tone--on { color: var(--ink); }
.step .tone--on b, .step .calc__sum .tone--on, .step .tone--hl { color: var(--accent); }
.step.is-on .tone--on, .step.is-on .calc div.hl .tone--hl { opacity: 1; }
/* строка подсвечена: слой «вкл» уходит без анимации, когда «hl» уже проявился — иначе три слоя глифов утолщают текст */
.step.is-on .calc div.hl .tone--on { opacity: 0; transition: opacity 0s .35s; }
.js .step.is-on { opacity: 1; transform: none; }
.calc { margin-top: var(--s-5); border-top: 1px solid var(--line-2); }
.calc div { position: relative; display: flex; justify-content: space-between; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--line); }
.calc div::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.calc div.hl::after { transform: scaleX(1); }
.calc dd { font-weight: 600; }
.calc__sum { border-bottom: 0 !important; } .calc__sum dt, .calc__sum dd { font-weight: 600; }

/* ---- «где ломаются трекеры» ---- */
.ledger { margin-top: var(--sec); background: var(--bg-2); padding-block: var(--sec); }
.ledger h2 { max-width: 20ch; }
.ledger__rows { margin-top: var(--s-8); }
.lrow { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-8); padding-block: var(--s-7); border-top: 1px solid var(--line-2); align-items: start; }
.lrow:last-child { border-bottom: 1px solid var(--line-2); }
.lrow__q p { font: 400 clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem)/1.22 var(--font-serif); letter-spacing: -0.018em; text-wrap: balance; }
.lrow__ans { font-size: var(--t-lead); line-height: 1.42; color: var(--ink-2); letter-spacing: -0.012em; padding-top: .5em; }
.lrow__ans strong { color: var(--accent); display: block; font-weight: 600; margin-bottom: 4px; }

/* ---- данные: стеклянные ячейки на небе ---- */
.data { position: relative; isolation: isolate; padding-block: var(--sec); color: var(--scene-ink); }
.data > .sky { z-index: -1; }
.data h2 { max-width: 20ch; }
.bento { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: var(--s-4); }
.cell { padding: var(--s-6); border-radius: var(--r-lg); background: color-mix(in oklab, var(--surface) 22%, transparent); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px oklch(0 0 0 / .1);
  display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cell h3 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.cell p { color: var(--ink-glass); line-height: 1.45; }
.cell--big { grid-column: 1 / 7; grid-row: 1 / 3; padding: clamp(28px, 3vw, 48px); justify-content: flex-end; gap: var(--s-5); }
.cell--big h3 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.25rem); line-height: 1.05; letter-spacing: -0.025em; max-width: 16ch; }
.cell--big p { font-size: var(--t-lead); line-height: 1.42; color: var(--scene-ink); max-width: 34ch; }
.cell__links { display: flex; gap: var(--s-5); font-weight: 500; }
.cell:nth-child(2) { grid-column: 7 / 10; } .cell:nth-child(3) { grid-column: 10 / 13; }
.cell:nth-child(4) { grid-column: 7 / 10; } .cell:nth-child(5) { grid-column: 10 / 13; }
.data .link { color: var(--scene-ink); }

/* ---- цена на земле ---- */
.price { padding-block: var(--sec); }
.price h2 { max-width: 20ch; }
.plans { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: clamp(28px, 3vw, 44px); border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 var(--glass-edge); min-width: 0;
  transition: translate .45s var(--ease-out), border-color .3s var(--ease-out); }
@media (hover: hover) { .plan:hover { translate: 0 -5px; border-color: color-mix(in oklch, var(--accent) 55%, transparent); } }
.plan--year { background: oklch(1 0 0 / .11); border-color: color-mix(in oklch, var(--accent) 70%, transparent); }
.plan__name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); min-height: 36px; font-size: var(--t-h3); }
.plan__badge { font: 600 var(--t-s)/1 var(--font-sans); letter-spacing: 0; color: var(--accent-ink); background: var(--accent); padding: 7px 12px; border-radius: 999px; }
.plan__price { margin-top: var(--s-5); display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); white-space: nowrap; }
.plan__price span { font-size: clamp(3.5rem, 2.4rem + 3.6vw, 5.5rem); line-height: 1; font-weight: 600; letter-spacing: -0.035em; color: oklch(.82 .09 160); text-shadow: -.008em -.008em 0 var(--emb-light), -.014em -.014em .006em var(--emb-light), .008em .01em 0 var(--emb-dark), .016em .02em .008em var(--emb-dark), .03em .06em .08em var(--emb-cast); }
.plan__price em { font-style: normal; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); font-weight: 400; }
.plan__price small { font: 400 var(--t-body)/1 var(--font-sans); color: var(--ink-2); margin-left: 4px; }
.plan__sub { margin-top: var(--s-3); color: var(--ink-2); min-height: 3em; }
.plan__list { margin-block: var(--s-5) var(--s-6); border-top: 1px solid var(--line-2); flex: 1; }
.plan__list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
@supports (grid-template-rows: subgrid) {
  .plans { grid-template-rows: repeat(5, auto); }
  .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .plan__sub { min-height: 0; }
}
.price__note { text-wrap: pretty; margin-top: var(--s-6); max-width: 60ch; font-size: var(--t-s); line-height: 1.55; color: var(--ink-2); }
.price .link { color: var(--ink); }

/* ---- FAQ ---- */
.faq { padding-block: var(--sec); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
.faq h2 { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq__list { border-top: 1px solid var(--line-2); }
details { border-bottom: 1px solid var(--line-2); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); min-height: 72px; padding-block: var(--s-4); font: 500 clamp(1.125rem, 1rem + .5vw, 1.375rem)/1.3 var(--font-sans); letter-spacing: -0.015em; transition: color .2s; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat; transition: transform .3s var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--accent); }
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
  details[open]::details-content { block-size: auto; }
  details p { transition: opacity .4s var(--ease-out) .05s, transform .5s var(--ease-out); }
  @starting-style { details[open] p { opacity: 0; transform: translateY(-8px); } }
}
details p { padding-bottom: var(--s-5); max-width: 60ch; line-height: 1.55; color: var(--ink-2); }

/* ---- финал: рассвет с кольцевой кнопкой ---- */
.finale { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(96px, 10vw, 180px) clamp(180px, 22vh, 260px); color: var(--scene-ink); }
.finale .hill { height: 20vh; bottom: -10vh; } .finale .hill--far { height: 18vh; bottom: -12vh; }
.finale__in { position: relative; z-index: 3; }
.finale__word { position: absolute; z-index: 0; left: 50%; right: 0; top: 50%; translate: 0 -62%; text-align: center; white-space: nowrap; user-select: none;
  font-family: var(--font-serif); font-weight: 600; font-size: min(19vw, 290px); line-height: 1; letter-spacing: -0.05em; color: var(--word); }
@media (max-width: 859px) { .finale__word { display: none; } }
.finale h2 { max-width: 18ch; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 5rem); line-height: 1.04; }
.finale p { margin-top: var(--s-5); max-width: 34ch; font-size: var(--t-lead); color: var(--ink-glass); }
.finale .pa { margin-top: var(--s-7); }

/* ---- подвал ---- */
.foot { padding-block: var(--s-7); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-7); }
.foot .brand { color: var(--ink); }
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-inline: auto; }
.foot__links a { font-size: var(--t-s); color: var(--ink-2); text-decoration: none; padding-block: 12px; }
.foot__links a:hover { color: var(--ink); text-decoration: underline; }
.foot small { font-size: var(--t-s); color: var(--ink-2); }

/* ---- reveal: чистое усиление, базовое состояние видимо без JS ---- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 80ms), transform .8s var(--ease-out) calc(var(--i, 0) * 80ms); }
.js .plan[data-reveal] { transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 100ms), transform .8s var(--ease-out) calc(var(--i, 0) * 100ms), translate .45s var(--ease-out), border-color .3s var(--ease-out); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .cell[data-reveal] { transition: opacity .7s var(--ease-out) calc(var(--i, 0) * 80ms), transform .8s var(--ease-out) calc(var(--i, 0) * 80ms); }
html:not(.js) .story__stage { display: none; }

/* ---- адаптив ---- */
@media (max-width: 1023px) { .facts__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fact--wide { grid-column: 1 / -1; order: -1; } .story__grid { gap: var(--s-7); } }
@media (max-width: 1199px) {
  .bento .cell--big { grid-column: 1 / -1; grid-row: auto; }
  .cell:nth-child(n+2) { grid-column: span 6 !important; }
  .cell--big { min-height: 320px; }
}
@media (max-width: 859px) {
  .nav__pill { display: none; }
  .hero__word { display: none; }
  .hero__wheel { --ww: 132vw; left: 50%; bottom: -40vw; }
  .hill { height: 14vh; bottom: -6vh; } .hill--far { height: 13vh; bottom: -9vh; }
  .hero__copy { padding-top: 112px; }
  .hero__copy h1 { font-size: clamp(2.35rem, 9.6vw, 3.4rem); }
  .hero__lead { margin-top: 16px; font-size: 1.0625rem; }
  .hero__cta { margin-top: 24px; }
  .pa--header { padding-right: 22px; gap: 12px; font-size: 16px; }
  .hero__trust { margin-top: 14px; }
  .story__grid { grid-template-columns: 1fr; gap: 0; }
  .story__stage { top: 0; height: auto; z-index: 5; background: var(--bg); padding-block: calc(var(--nav-h) + var(--s-3)) var(--s-7); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .story__stage .wheel--story { width: min(220px, 30svh); }
  .story__stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: -24px; height: 24px; background: linear-gradient(var(--bg), transparent); pointer-events: none; }
  .step { min-height: 0; padding-block: var(--s-7); scroll-margin-top: 280px; }
  .step h3 { font-size: clamp(2.25rem, 8vw, 2.75rem); }
  .js .step { opacity: 1; transform: none; }
  .steps { padding-bottom: 32svh; }
  .lrow { grid-template-columns: 1fr; gap: var(--s-5); }
  .plans { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .faq h2 { position: static; }
  .foot__links { margin-inline: 0; }
  .facts__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .product__frame { aspect-ratio: 780 / 814; }
  .shot__frame { aspect-ratio: 780 / 814; }
  .screens__grid { grid-template-columns: 1fr; }
  .motion__row { display: flex; gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-bottom: var(--s-3); scroll-padding-inline: var(--gutter); }
  .clip { flex: 0 0 min(64vw, 280px); scroll-snap-align: start; }
  .finale .hill { height: 12vh; }
}
@media (max-width: 639px) {
  .cell:nth-child(n+2) { grid-column: 1 / -1 !important; }
  .fact dd { font-size: var(--t-s); }
  .fact__num { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .finale .pa { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .fact, .js [data-reveal] { opacity: 1; transform: none; }
  .js .fact::after { transform: scaleX(1); }
}