/* Hallmark · shape: one continuous flight from night into morning paper · genre: atmospheric · theme: custom · job: join · copy: verbatim · idea: "you fly through a brain at night, the experiment turns the lights off, morning asks what stayed" · vibe: "night flight, filaments, embers, then paper"
 * paper: oklch(14% 0.006 265) · accent: oklch(73% 0.16 38) · display: Onest · body: Onest · hero: corner-anchored poster over a WebGL field with one soma as the start control · nav: wordmark with two anchors, login at the far edge · footer: single row · imagery: the product, rendered live in WebGL · signature: the experiment dims the page and digits fill the night
 * axes: dark/grotesk-sans/warm · posture: poster · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R3 V5 · weakest: R, the owner asked for depth and motion; to pay for it the type stays one weight and the page has no decoration besides the field */
/* Hallmark · answered F8 · the owner asked for a flight with parallax, so the stops, the pinned strip and the dawn each own one scroll behaviour on their own section */
/* Hallmark · answered F6 · the flagged heading holds no figures, display figures in .price__num are tabular */
/* Hallmark · waive 39b · one round start control centred on the soma, keys of the live experiment · the soma is the picture of the first screen, pressing it starts the night */
/* Hallmark · waive 44a · copy on the lower edge of a poster hero, 298px above and 248px below at 1440 · the owner accepted this night poster as is, the words sit low so the soma and the fibres own the upper screen */
/* Hallmark · waive 85 · the user asked for a sign-up, job: join is in this stamp · the owner named this closing sign-up section himself, and over a URL the linter cannot read the stamp because the page CSP blocks its fetch */
/* Hallmark · dismissed F17 · the closing head shares its row with the price column on purpose, four lines of display type at 1440 are the poster the owner accepted, not a span that ran wide */
/* Hallmark · dismissed 3 · the side stripe marks an error of the sign-in code form, hidden until the worker or the start module reports one, the message the /start pages already show */
/* Hallmark · dismissed F4 · the second filled button is the code step of the same sign-in form, hidden until the email is sent, so the screen holds one filled button */
/* Hallmark · dismissed 77 · the linter counts the day block as one section, the page has hero, benefits, audience, route, strip, dawn, price, questions and footer */

@font-face { font-family: "Onest Variable"; src: url("fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest Variable"; src: url("fonts/onest-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest Variable"; src: url("fonts/onest-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; 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: "Noto Sans Thai Variable"; src: url("fonts/noto-sans-thai-thai-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Noto Sans Devanagari Variable"; src: url("fonts/noto-sans-devanagari-devanagari-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: "Noto Sans Arabic Variable"; src: url("fonts/noto-sans-arabic-arabic-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px; --space-5xl: 208px;
  --fs: 1.0625rem; --lh: 1.55;
  --lh-hero: 1; --lh-head: 1.04; --track-hero: -0.038em; --track-head: -0.03em; --track-text: -0.012em;
  --text-sm: 0.9375rem; --text-md: var(--fs); --text-lg: 1.25rem; --text-xl: 1.5rem;
  --text-hero: clamp(3rem, 7.6vw, 7.4rem);
  --text-offer: min(clamp(2.5rem, 5vw, 5rem), 9.2vw);
  --text-stop: clamp(2.1rem, 5.6vw, 5.5rem);
  --text-section: clamp(2.5rem, 4.6vw, 4.75rem);
  --text-price: clamp(5rem, 20vw, 20rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms; --dur-slow: 900ms; --dur-reveal: 1500ms;
  --container: 1400px; --gutter: 64px;
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --radius-card: 22px; --radius-field: 999px; --radius-pill: 999px;
  --flow: -1;

  --color-night: oklch(14% 0.006 265);
  --color-night-2: oklch(19.5% 0.007 265);
  --color-night-3: oklch(27% 0.008 265);
  --color-scrim: oklch(14% 0.006 265 / 0.66);
  --color-star: oklch(95% 0.006 95);
  --color-star-2: oklch(80% 0.008 95);
  --color-fiber: oklch(68% 0.014 240);
  --color-ember: oklch(77% 0.15 42);
  --color-ember-ink: oklch(82% 0.11 48);
  --color-on-ember: oklch(18% 0.03 40);
  --color-paper: oklch(96.8% 0.007 95);
  --color-ink: oklch(20.5% 0.006 265);
  --color-ink-2: oklch(40% 0.01 265);
  --color-rule: oklch(87% 0.009 95);
  --color-accent: oklch(58% 0.18 33);
  --color-accent-deep: oklch(50% 0.16 33);
  --color-accent-ink: oklch(99% 0.005 95);
  --btn-fill: var(--color-ember);
  --btn-ink: var(--color-on-ember);
  --btn-hover: var(--color-ember-ink);
  --font-sans: "Onest Variable", ui-sans-serif, system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  color-scheme: light dark;
}

/* Письма, где нельзя сжимать буквы и нужна высота строки под знаки над и под строкой. */
:root:lang(zh) { --font-sans: "Onest Variable", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; --lh: 1.7; --lh-hero: 1.16; --lh-head: 1.22; --track-hero: 0; --track-head: 0; --track-text: 0; }
:root:lang(th) { --font-sans: "Onest Variable", "Noto Sans Thai Variable", sans-serif; --lh: 1.7; --lh-hero: 1.34; --lh-head: 1.34; --track-hero: 0; --track-head: 0; --track-text: 0; }
:root:lang(hi) { --font-sans: "Onest Variable", "Noto Sans Devanagari Variable", sans-serif; --fs: 1.125rem; --lh: 1.75; --lh-hero: 1.34; --lh-head: 1.32; --track-hero: 0; --track-head: 0; --track-text: 0; }
:root:lang(ar) { --font-sans: "Onest Variable", "Noto Sans Arabic Variable", sans-serif; --fs: 1.125rem; --lh: 1.8; --lh-hero: 1.34; --lh-head: 1.36; --track-hero: 0; --track-head: 0; --track-text: 0; --flow: 1; }

/* Китайские заголовки рвутся у знаков препинания, а не посреди слова. */
:root:lang(zh) :is(h1, h2, h3) { word-break: keep-all; }

/* Первый экран тёмный в обеих схемах: его токены --color-night и --color-star от схемы не зависят. Ниже рассвета страница идёт по схеме. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(18.6% 0.003 265);
    --color-ink: oklch(93.5% 0.006 95);
    --color-ink-2: oklch(80% 0.008 95);
    --color-rule: oklch(31% 0.005 265);
    --color-accent: oklch(71% 0.19 36);
    --color-accent-deep: oklch(79% 0.13 42);
    --color-accent-ink: oklch(19% 0.012 265);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--color-night); scroll-behavior: smooth; scrollbar-color: var(--color-night-3) var(--color-night); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: transparent; color: var(--color-star); font-family: var(--font-body); font-size: var(--text-md); line-height: var(--lh); -webkit-font-smoothing: antialiased; caret-color: var(--color-ember); text-rendering: optimizeLegibility; }
::selection { background: var(--color-ember); color: var(--color-on-ember); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
:focus-visible { outline: 2px solid var(--color-star); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* Высота большого экрана: панель браузера на телефоне схлопывается, а холст остаётся на месте. */
.sky { position: fixed; inset-block-start: 0; inset-inline-start: 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
main, .bar { position: relative; }

.bar { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4; display: flex; align-items: center; gap: var(--space-xl); min-height: 84px; padding-inline: var(--edge); }
.bar__mark { font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.langs { display: flex; gap: var(--space-md); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.langs a, .langs span, .bar__login { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; white-space: nowrap; text-decoration: none; color: var(--color-star-2); font-size: var(--text-sm); transition: color var(--dur-short) var(--ease-out); }
.langs [aria-current] { color: var(--color-star); }
.langs a:hover, .bar__login:hover { color: var(--color-star); }
.bar__login { margin-inline-start: auto; }

/* ---- первый экран ---- */
.hero, .stage { color-scheme: dark; }
.hero { position: relative; min-height: 100dvh; display: grid; align-items: end; padding-block: 120px var(--space-xl); padding-inline: var(--edge); }
.hero__copy { position: relative; display: grid; gap: var(--space-lg); max-width: min(60rem, 72%); }
.hero__head { font-size: var(--text-offer); line-height: var(--lh-hero); font-weight: 300; letter-spacing: var(--track-hero); }
.hero .lede { max-width: 44ch; }
.ln { display: block; overflow: clip; overflow-clip-margin: 0.16em; padding-block-end: 0.08em; margin-block-end: -0.08em; }
.ln > span { display: block; }
.lede { font-size: var(--text-lg); line-height: 1.38; color: var(--color-star-2); max-width: 32ch; }
:root:lang(zh) .lede, :root:lang(th) .lede, :root:lang(hi) .lede, :root:lang(ar) .lede { line-height: var(--lh); }

.join { position: relative; display: grid; gap: var(--space-xs); max-width: 36rem; }
.join__label { font-size: var(--text-sm); color: var(--color-star-2); }
.join__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.join__input { height: 52px; padding-inline: var(--space-lg); border: 1px solid var(--color-star-2); border-radius: var(--radius-field); background: var(--color-night); min-width: 0; transition: border-color var(--dur-short) var(--ease-out); }
.join__input::placeholder { color: var(--color-star-2); }
.join__input[aria-invalid] { border-color: var(--color-ember); }
.join__hint { min-height: 1lh; font-size: var(--text-sm); color: var(--color-ember-ink); }
.join__note { font-size: 0.8125rem; line-height: 1.45; color: var(--color-star-2); max-width: 34rem; }
:root:lang(hi) .join__note, :root:lang(ar) .join__note, :root:lang(th) .join__note { font-size: var(--text-sm); line-height: 1.6; }
.join__trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding-inline: var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--btn-fill); color: var(--btn-ink); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--small { height: 44px; padding-inline: var(--space-lg); }

/* ---- сома: кнопка, к которой сходятся волокна ---- */
.exp { position: absolute; inset-block-start: 46%; inset-inline-end: 21%; }
.exp:focus { outline: none; }
html:not(.js) .exp { visibility: hidden; }
.soma { position: relative; display: grid; place-items: center; width: 148px; height: 148px; margin-block-start: -74px; margin-inline-end: -74px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; cursor: pointer; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-long) var(--ease-out); }
.soma__ring { position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--color-star-2); transition: transform var(--dur-long) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.soma__word { position: absolute; inset-block-start: calc(100% + var(--space-md)); inset-inline: -4rem; text-align: center; font-size: var(--text-lg); font-weight: 400; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.soma:hover .soma__ring { transform: scale(1.06); border-color: var(--color-ember); }
.soma:active { transform: scale(0.97); }
/* Подпись стоит над волокнами, вне тихой области текста: держится на той же тени, что цена в финале. */
.exp__cap { position: absolute; inset-block-start: calc(74px + var(--space-xl) + var(--space-lg)); inset-inline-end: calc(min(18rem, 20vw) / -2); width: min(18rem, 20vw); text-align: center; font-size: var(--text-sm); color: var(--color-star-2); text-shadow: 0 0 10px var(--color-night), 0 0 22px var(--color-night); }

/* ---- сцена опыта: страница гаснет, цифры занимают ночь ---- */
.stage { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: var(--space-xl) var(--gutter); background: var(--color-scrim); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.stage > [data-phase] { grid-area: 1 / 1; }
.stage__status { position: absolute; inset-block-start: var(--space-xl); inset-inline: var(--gutter) calc(var(--gutter) + 7rem); font-size: var(--text-lg); color: var(--color-star-2); min-height: 1lh; }
.stage__close { position: absolute; inset-block-start: var(--space-lg); inset-inline-end: var(--gutter); min-height: 44px; padding-inline: var(--space-md); background: none; border: 1px solid var(--color-night-3); border-radius: var(--radius-pill); color: var(--color-star-2); font-size: var(--text-sm); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.stage__close:hover { color: var(--color-star); border-color: var(--color-star-2); }
html[data-demo-phase="show"] .stage, html[data-demo-phase="input"] .stage, html[data-demo-phase="feedback"] .stage, html[data-demo-phase="result"] .stage { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }
html[data-demo-phase="show"] .soma, html[data-demo-phase="input"] .soma, html[data-demo-phase="feedback"] .soma, html[data-demo-phase="result"] .soma { opacity: 0; pointer-events: none; }
.hero__copy, .exp__cap, .bar, .gain, .who, .flight, .strip, .dawn, .day, .eve { transition: opacity var(--dur-slow) var(--ease-out); }
html[data-demo-phase="show"] :is(.hero__copy, .exp__cap, .bar, .gain, .who, .flight, .strip, .dawn, .day, .eve),
html[data-demo-phase="input"] :is(.hero__copy, .exp__cap, .bar, .gain, .who, .flight, .strip, .dawn, .day, .eve),
html[data-demo-phase="feedback"] :is(.hero__copy, .exp__cap, .bar, .gain, .who, .flight, .strip, .dawn, .day, .eve),
html[data-demo-phase="result"] :is(.hero__copy, .exp__cap, .bar, .gain, .who, .flight, .strip, .dawn, .day, .eve) { opacity: 0; pointer-events: none; }

.js .exp [data-phase] { visibility: hidden; }
.js .exp[data-state="show"] [data-phase="show"],
.js .exp[data-state="input"] [data-phase="input"],
.js .exp[data-state="feedback"] [data-phase="input"],
.js .exp[data-state="result"] [data-phase="result"] { visibility: visible; }
html:not(.js) .stage { display: none; }

.stage__digit { font-size: min(70dvh, 62vw); line-height: 1; font-weight: 200; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; text-align: center; color: var(--color-star); }
.stage__input { display: grid; justify-items: center; gap: var(--space-xl); width: 100%; }
.exp__slots { display: flex; justify-content: center; gap: var(--space-sm); }
.exp__slot { width: clamp(30px, 6.4vw, 92px); height: clamp(64px, 12vw, 150px); display: grid; place-items: center; border-block-end: 1px solid var(--color-star-2); font-size: clamp(2rem, 6vw, 5.5rem); font-weight: 200; font-variant-numeric: tabular-nums; }
.exp__slot.is-next { border-color: var(--color-ember); }
.exp[data-state="feedback"][data-verdict="miss"] .exp__slot { color: var(--color-ember-ink); }
.stage__pad { display: grid; grid-template-columns: repeat(9, 64px) minmax(88px, auto) 64px minmax(104px, auto); gap: var(--space-xs); justify-content: center; }
.key { height: 64px; min-width: 0; padding-inline: var(--space-xs); border: 1px solid var(--color-night-3); border-radius: var(--radius-pill); background: var(--color-night-2); font-size: var(--text-xl); font-weight: 300; font-variant-numeric: tabular-nums; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.key:hover:not(:disabled) { background: var(--color-night-3); }
.key:active:not(:disabled) { transform: scale(0.95); }
.key:disabled { color: var(--color-star-2); cursor: not-allowed; }
.key--ctl, .key--go { font-size: 0.8125rem; font-weight: 500; }
.key--go { background: var(--color-ember); border-color: var(--color-ember); color: var(--color-on-ember); }
.key--go:hover:not(:disabled) { background: var(--color-ember-ink); }
.key--go:disabled { background: var(--color-night-2); border-color: var(--color-night-3); color: var(--color-star-2); cursor: not-allowed; }

.stage__result { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; width: 100%; max-width: var(--container); }
.score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-md); }
.score__l { grid-column: 1 / -1; font-size: var(--text-xl); color: var(--color-star-2); }
.score b { font-size: min(52dvh, 34vw); line-height: 1; font-weight: 200; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.score__u { font-size: var(--text-section); font-weight: 300; letter-spacing: -0.02em; }
.stage__side { display: grid; gap: var(--space-lg); }
.stage__line { font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem); line-height: 1.25; font-weight: 300; letter-spacing: var(--track-text); }
.stage__note { color: var(--color-star-2); }
.stage__after { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; }
.link { background: none; border: 0; padding: 0; min-height: 44px; color: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }

.scale { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-star-2); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-star-2); }
.scale span { text-align: center; }
.scale i { position: absolute; inset-block-start: -7px; inset-inline-start: calc(100% / 14 + var(--at, 0) * (100% - 100% / 7)); width: 13px; height: 13px; margin-inline-start: -6.5px; border-radius: var(--radius-pill); background: var(--color-ember); }
.scale--seven i { --at: 0.667; }

/* ---- польза и для кого: те же строки на ночи, что у программы, без рамок ---- */
.gain, .who { padding-block-start: var(--space-5xl); }
.gain__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); }
.gain h2, .who h2 { font-size: var(--text-section); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
.who h2 { margin-block-end: var(--space-2xl); }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-xl); margin: 0; padding: 0; list-style: none; text-shadow: 0 0 10px var(--color-night), 0 0 22px var(--color-night); }
.who .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Заголовок и строка на общих рядах: абзацы соседних пунктов начинаются на одной линии, даже если заголовок в две строки. */
.points li { display: grid; grid-row: span 2; grid-template-rows: subgrid; gap: var(--space-sm); padding-block-start: var(--space-md); border-block-start: 1px solid var(--color-night-3); }
.points h3 { font-size: var(--text-xl); line-height: max(1.24, var(--lh-head)); font-weight: 300; letter-spacing: var(--track-text); }
.points p { color: var(--color-star-2); text-wrap: balance; }

/* ---- программа: остановки в темноте ---- */
.flight { padding-block: var(--space-5xl) var(--space-4xl); }
.flight__head { display: grid; gap: var(--space-md); max-width: 42rem; margin-block-end: var(--space-4xl); }
.flight__head h2 { font-size: var(--text-section); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
.flight__head p { font-size: var(--text-lg); line-height: 1.38; color: var(--color-star-2); max-width: 34ch; }
:root:lang(zh) .flight__head p, :root:lang(th) .flight__head p, :root:lang(hi) .flight__head p, :root:lang(ar) .flight__head p { line-height: var(--lh); }
.route { display: grid; row-gap: var(--space-4xl); }
.route li { position: relative; display: grid; gap: var(--space-xs); max-width: 54rem; }
.route li:nth-child(4n + 2) { margin-inline-start: 26%; }
.route li:nth-child(4n + 3) { margin-inline-start: 8%; }
.route li:nth-child(4n) { margin-inline-start: 38%; }
.route__n { font-size: var(--text-lg); color: var(--color-ember-ink); font-variant-numeric: tabular-nums; }
.route h3 { font-size: var(--text-stop); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
.route p { font-size: var(--text-lg); color: var(--color-star-2); }

/* ---- лента урока ---- */
.strip__lead { flex: none; display: grid; gap: var(--space-md); width: min(30rem, 76vw); }
.strip__title { font-size: var(--text-section); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
.how__title { margin-block-start: var(--space-md); font-size: var(--text-md); font-weight: 400; color: var(--color-star); }
.how { display: grid; gap: var(--space-xs); counter-reset: how; }
.how li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: var(--space-xs); color: var(--color-star-2); counter-increment: how; }
.how li::before { content: counter(how); color: var(--color-ember-ink); font-variant-numeric: tabular-nums; }
.strip__track { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); max-width: var(--container); margin-inline: auto; padding: var(--space-3xl) var(--gutter); }
.sheet { flex: none; display: flex; flex-direction: column; gap: var(--space-md); width: 100%; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-night-2); border: 1px solid var(--color-night-3); }
.sheet__cap { display: grid; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-star-2); }
.sheet__bar { display: block; height: 2px; border-radius: var(--radius-pill); background: var(--color-night-3); overflow: clip; }
.sheet__bar i { display: block; height: 100%; width: 100%; background: var(--color-ember); transform-origin: left center; transform: scaleX(var(--p, 0.11)); transition: transform var(--dur-long) var(--ease-out); }
[dir="rtl"] .sheet__bar i { transform-origin: right center; }
.sheet__text { font-size: clamp(1.35rem, 1.3vw + 1rem, 2rem); line-height: 1.28; font-weight: 300; letter-spacing: var(--track-text); min-height: 6.5lh; }
:root:lang(zh) .sheet__text, :root:lang(th) .sheet__text, :root:lang(hi) .sheet__text, :root:lang(ar) .sheet__text { line-height: 1.5; }
.sheet__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-start: auto; }
html:not(.js) [data-teaser-next] { display: none; }
.chip { padding-block: var(--space-2xs); padding-inline: var(--space-sm); border: 1px solid var(--color-night-3); border-radius: var(--radius-pill); font-size: var(--text-sm); }
.sheet__big { font-size: var(--text-xl); overflow-wrap: anywhere; }
.sheet__big bdi { font-size: clamp(7rem, 15vw, 15rem); line-height: 1; font-weight: 200; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.sheet__small { font-size: var(--text-sm); color: var(--color-star-2); }
.sheet__q { font-size: var(--text-xl); line-height: 1.24; letter-spacing: var(--track-text); }
:root:lang(zh) .sheet__q, :root:lang(th) .sheet__q, :root:lang(hi) .sheet__q, :root:lang(ar) .sheet__q { line-height: 1.5; }
.sheet__a { font-size: var(--text-lg); line-height: 1.42; font-weight: 300; color: var(--color-star); }
:root:lang(th) .sheet__a, :root:lang(hi) .sheet__a, :root:lang(ar) .sheet__a { line-height: var(--lh); }
.typer { opacity: 0; transition: opacity 260ms linear; }
.typer.is-on { opacity: 1; }

/* ---- рассвет ---- */
/* Без движения, без скрипта: строка на ночи и короткий спуск к бумаге. */
.dawn { padding-block: var(--space-3xl) var(--space-5xl); padding-inline: var(--edge); background: linear-gradient(to bottom, transparent 60%, var(--color-paper)); }
.dawn__line { max-width: 11em; font-size: var(--text-section); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
:root:lang(ar) .dawn__line { font-size: var(--text-stop); }
/* keep-all не рвёт восемь знаков после запятой: на 320 они шире экрана. */
:root:lang(zh) .dawn__line { font-size: min(var(--text-section), 11vw); }

/* ---- день ---- */
.day { position: relative; background: var(--color-paper); color: var(--color-ink); --color-star-2: var(--color-ink-2); --btn-fill: var(--color-accent); --btn-ink: var(--color-accent-ink); --btn-hover: var(--color-accent-deep); }
.day :focus-visible { outline-color: var(--color-accent-deep); }
.day ::selection { background: var(--color-accent); color: var(--color-accent-ink); }
.price { padding-block: var(--space-4xl) var(--space-3xl); overflow: clip; }
.price__num { font-size: var(--text-price); line-height: 0.92; font-weight: 200; letter-spacing: -0.055em; white-space: nowrap; font-variant-numeric: tabular-nums; margin-inline-start: -0.04em; }
.price__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: var(--space-xl); align-items: center; margin-block-start: var(--space-xl); padding-block-start: var(--space-lg); border-block-start: 1px solid var(--color-ink); }
.price__row h3 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.25rem); line-height: 1.08; font-weight: 400; letter-spacing: -0.02em; }
:root:lang(zh) .price__row h3, :root:lang(th) .price__row h3, :root:lang(hi) .price__row h3, :root:lang(ar) .price__row h3 { line-height: var(--lh-head); letter-spacing: 0; }
.price__row p { color: var(--color-ink-2); }
.faq { padding-block: var(--space-4xl); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-xl); }
.faq h2 { font-size: var(--text-section); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
details { border-block-start: 1px solid var(--color-rule); }
details:last-child { border-block-end: 1px solid var(--color-rule); }
summary { display: flex; align-items: center; min-height: 68px; padding-block: var(--space-sm); font-size: var(--text-lg); text-wrap: balance; letter-spacing: var(--track-text); cursor: pointer; list-style: none; transition: color var(--dur-short) var(--ease-out); }
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--color-accent-deep); }
details p { padding-block-end: var(--space-lg); color: var(--color-ink-2); max-width: 60ch; text-wrap: balance; }
.foot { padding-block: var(--space-xl); border-block-start: 1px solid var(--color-rule); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs) var(--space-xl); font-size: var(--text-sm); color: var(--color-ink-2); }
.foot__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-xl); margin: 0; padding: 0; list-style: none; }
.foot__row a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.foot__mark { font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); }

/* ---- вечер: бумага уходит вверх, под ней снова ночь и та же клетка; запись стоит на весь экран ---- */
.eve { position: relative; color-scheme: dark; }
.eve__dusk { height: 80dvh; background: linear-gradient(to bottom, var(--color-paper), transparent); background: linear-gradient(to bottom, var(--color-paper) 6%, var(--color-ember) 44%, transparent); }
.finale { position: relative; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); align-items: end; column-gap: var(--space-2xl); padding-block: var(--space-3xl) var(--space-xl); padding-inline: var(--edge); }
.finale__copy { display: grid; gap: var(--space-lg); max-width: 56rem; }
.finale__head { font-size: var(--text-hero); line-height: var(--lh-hero); font-weight: 300; letter-spacing: var(--track-hero); }
/* Восемь широких знаков: крупнее они не влезают в строку, и точка уходит на свою. */
:root:lang(zh) .finale__head { font-size: min(clamp(2.5rem, 6.2vw, 6rem), 10.5vw); }
.finale__side { display: grid; justify-items: center; align-self: center; text-align: center; text-shadow: 0 0 10px var(--color-night), 0 0 22px var(--color-night); }
.finale__hub { width: 148px; height: 148px; }
.finale__price { margin-block-start: var(--space-md); font-size: var(--text-stop); line-height: 1; font-weight: 200; letter-spacing: -0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finale__sub { margin-block-start: var(--space-xs); font-size: var(--text-sm); color: var(--color-star-2); }

/* ---- страницы записи и политика: тот же плакат на ночи, текст на бумаге ---- */
.notice { position: relative; min-height: calc(100dvh - 124px); display: grid; align-items: end; padding-block: 120px var(--space-2xl); padding-inline: var(--edge); }
.notice--short { min-height: 0; padding-block-end: var(--space-xl); }
.notice__copy { display: grid; gap: var(--space-lg); justify-items: start; max-width: 56rem; }
.notice__head { font-size: var(--text-section); line-height: var(--lh-head); font-weight: 300; letter-spacing: var(--track-head); }
.notice .lede { max-width: 44ch; }
.notice form { margin: 0; }
/* ---- вход кодом (/start*, коммерческий план §00.4): почта, затем код на том же месте ---- */
.start { display: grid; gap: var(--space-md); inline-size: 100%; max-width: 36rem; }
.msg { padding: var(--space-sm) var(--space-md); border-radius: 14px; border-inline-start: 4px solid var(--color-ember); background: var(--color-night-2); color: var(--color-star); }
.start__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-lg); }
.start__more form { margin: 0; }
.start__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-star-2); font: inherit; font-size: var(--text-sm); text-decoration: underline; text-underline-offset: 0.26em; cursor: pointer; transition: color var(--dur-short) var(--ease-out); }
.start__link:hover { color: var(--color-star); }
.start__link:disabled { opacity: 0.5; cursor: not-allowed; }
/* Ссылка на политику в строке согласия: поле касания 44 px, высота строки не меняется (как .doc a). */
.join__note a { display: inline-block; padding-block: var(--space-md); margin-block: calc(-1 * var(--space-md)); color: inherit; text-underline-offset: 0.2em; }
.doc { max-width: 44rem; margin-inline: auto; padding-block: var(--space-2xl) var(--space-3xl); padding-inline: var(--gutter); }
.doc h2 { margin-block: var(--space-xl) var(--space-xs); font-size: var(--text-xl); line-height: 1.3; font-weight: 500; }
.doc p { color: var(--color-ink-2); }
/* Цель касания 44 px у ссылки в строке: поле растёт, высота строки не меняется. */
.doc a { display: inline-block; padding-block: var(--space-sm); margin-block: calc(-1 * var(--space-sm)); color: var(--color-ink); text-underline-offset: 0.2em; }

/* ---- кадр для соцсетей: tools/build-og.mjs ---- */
.og { overflow: clip; }
.og__mark { position: fixed; inset-block-end: 64px; inset-inline-start: 72px; font-size: 92px; line-height: 1; font-weight: 300; letter-spacing: -0.038em; }
.og__hub { position: fixed; inset-block-start: 44%; inset-inline-end: 22%; width: 2px; height: 2px; padding: 0; border: 0; background: none; }

/* ---- движение ---- */
@media (prefers-reduced-motion: no-preference) {
  .ln > span { animation: line-up var(--dur-reveal) var(--ease-out) both; }
  .ln:nth-child(2) > span { animation-delay: 240ms; }
  .lede, .join, .start { animation: soft-in var(--dur-reveal) var(--ease-out) 620ms both; }
  /* Вход кодом проявляется целиком; шаг кода сменяет шаг почты сразу: из display: none проявление началось бы заново и прятало поле 2 с. */
  .start .join { animation: none; }
  /* Подпись стоит сразу: она самый крупный текст первого экрана на телефоне, и проявление сдвигало LCP на 2 с. */
  .soma { animation: soft-in var(--dur-reveal) var(--ease-out) 900ms backwards; }
  .soma__ring::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--color-ember); animation: ring-out 3.6s var(--ease-out) infinite; }
  @keyframes ring-out { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.5); opacity: 0; } }
  @keyframes line-up { from { transform: translate3d(0, 110%, 0); } to { transform: none; } }
  @keyframes soft-in { from { opacity: 0; } to { opacity: 1; } }

  .js .dawn { display: grid; place-items: start; min-height: 240dvh; padding-block: 0; background: none; }
  .js .dawn__line { position: sticky; top: 16dvh; }
  .js .day { background: transparent; }
  .js .faq, .js .foot, .js .price { background: var(--color-paper); }

  @media (min-width: 60rem) {
    .js .strip { height: 340dvh; }
    .js .strip__pin { position: sticky; top: 0; height: 100dvh; overflow: clip; display: flex; align-items: center; }
    .js .strip__track { display: flex; align-items: stretch; gap: var(--space-2xl); max-width: none; margin-inline: 0; padding: 0 var(--gutter); width: max-content; will-change: transform; }
    .js .strip__lead { align-self: center; align-content: center; }
    .js .sheet { width: min(44rem, 62vw); min-height: min(30rem, 70dvh); }
    .js .sheet--score { width: min(30rem, 42vw); }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .route li { animation: stop linear both; animation-timeline: view(); }
    @keyframes stop { 0% { opacity: 0.08; transform: translate3d(0, 44px, 0); } 32% { opacity: 1; transform: none; } 72% { opacity: 1; transform: none; } 100% { opacity: 0.08; transform: translate3d(0, -44px, 0); } }
    [data-rise] { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes rise { from { opacity: 0; transform: translate3d(0, 48px, 0); } to { opacity: 1; transform: none; } }
    .js .dawn { view-timeline: --dawn block; }
    .js .dawn__line { animation: fade-out linear both; animation-timeline: --dawn; animation-range: cover 43% cover 52%; }
    @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
    @media (min-width: 60rem) {
      .js .strip { view-timeline: --strip block; }
      .js .strip__track { animation: strip-go linear both; animation-timeline: --strip; animation-range: contain 2% contain 98%; }
      @keyframes strip-go { to { transform: translate3d(calc(var(--shift, 0px) * var(--flow)), 0, 0); } }
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ---- телефон ---- */
@media (max-width: 60rem) {
  :root { --gutter: 16px; --space-5xl: 112px; --space-4xl: 88px; --space-3xl: 64px; }
  .bar { flex-wrap: wrap; gap: 0 var(--space-md); min-height: 0; padding-block-start: var(--space-xs); }
  .langs { order: 3; flex: 0 0 100%; overflow-x: auto; scrollbar-width: none; }
  /* Сома стоит в потоке над текстом: форма с согласием выше макета и наехала бы на неё. */
  .hero { align-content: end; align-items: stretch; gap: var(--space-lg); padding-block: 116px var(--space-lg); }
  .hero__copy { max-width: none; gap: var(--space-md); }
  .hero .lede { max-width: none; font-size: var(--text-md); }
  /* Кольцо как в финале, рядом слово запуска и подпись: заголовок курса длиннее, а кнопка записи обязана войти в экран. */
  .exp { position: relative; inset: auto; order: -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-md); }
  .soma { width: 96px; height: 96px; margin: 0; }
  .soma__word { inset-block-start: 0; inset-inline: calc(100% + var(--space-md)) auto; text-align: start; }
  .exp__cap { position: static; width: auto; padding-block-start: calc(var(--text-lg) * var(--lh) + var(--space-xs)); text-align: start; }
  .stage__pad { grid-template-columns: repeat(3, minmax(0, 76px)); gap: var(--space-xs); }
  .exp__slots { gap: var(--space-2xs); }
  .exp__slot { width: clamp(26px, 6.4vw, 92px); }
  .key { height: 56px; padding-inline: var(--space-3xs); }
  .stage__input { gap: var(--space-lg); }
  .stage__result { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-content: center; }
  .score b { font-size: 34dvh; }
  .gain__grid, .points, .who .points { grid-template-columns: minmax(0, 1fr); }
  .points { row-gap: var(--space-xl); }
  .route { row-gap: var(--space-xl); }
  .route li, .route li:nth-child(n) { margin-inline-start: 0; }
  .price__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); justify-items: start; }
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__list { flex-direction: column; align-items: flex-start; }
  .sheet { padding: var(--space-lg); }
  .sheet__text { min-height: 8.5lh; }
  .strip__lead { width: 100%; }
  .eve__dusk { height: 56dvh; }
  /* Экран телефона короче: сцена сжимается, форма целиком остаётся в кадре. */
  .finale { grid-template-columns: minmax(0, 1fr); align-content: space-between; row-gap: var(--space-md); padding-block: var(--space-lg); }
  .finale__copy { gap: var(--space-md); }
  .finale__head { font-size: var(--text-section); line-height: var(--lh-head); }
  .finale__side { order: -1; align-self: start; }
  .finale__hub { width: 96px; height: 96px; }
  .finale__price { margin-block-start: var(--space-xs); font-size: 2.25rem; }
  .finale__sub { margin-block-start: var(--space-2xs); }
  .finale .lede { max-width: none; font-size: var(--text-md); }
}
@media (max-width: 30rem) {
  .join__row { grid-template-columns: minmax(0, 1fr); }
}
/* Телефон листает пальцем, длинные участки полёта там пусты: рассвет и остановки короче. */
@media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
  .js .dawn { min-height: 170dvh; }
  .js .dawn__line { top: 14dvh; }
}
@supports (animation-timeline: view()) {
  @media (max-width: 60rem) and (prefers-reduced-motion: no-preference) {
    .js .dawn__line { animation-range: cover 28% cover 40%; }
  }
}