html { overscroll-behavior-y: none; }
.edge-top { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-edge); height: max(12px, env(safe-area-inset-top)); background: var(--wd-edge-sky); pointer-events: none; }
.edge-top.scrolled { background: var(--bg); }
@supports (-webkit-touch-callout: none) { .edge-top { display: block; } }
/* Floating nav */
.nav { position: fixed; inset: 16px 24px auto; z-index: var(--z-nav); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.nav > * { pointer-events: auto; }
/* Without the logo pill, a soft fade keeps the header readable over content. */
.nav::before { content: ''; position: absolute; inset: -16px -24px -28px; z-index: -1; background: var(--nav-fade); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, var(--mask) 55%, transparent); mask-image: linear-gradient(to bottom, var(--mask) 55%, transparent); opacity: 0; transition: opacity .3s; pointer-events: none; }
.nav.scrolled::before { opacity: 1; }
.nav-pill { display: flex; gap: 2px; padding: 5px; border-radius: var(--onda-radius-pill); background: var(--glass); backdrop-filter: blur(14px); box-shadow: var(--onda-shadow-card); }
.nav-pill a { padding: 9px 14px; border-radius: var(--onda-radius-pill); font-size: var(--fs-ui); color: var(--muted); transition: background .2s, color .2s; }
.nav-pill a:hover { background: var(--ink-wash); color: var(--ink); }
.nav-pill a[aria-current="true"] { background: var(--soft-blue); color: var(--blue-2); }
.nav-actions { display: flex; gap: 8px; }

/* Hero */
body { background-image: radial-gradient(38% 30% at 18% 22%, var(--wd-glow), transparent 70%), radial-gradient(34% 28% at 84% 30%, var(--wd-glow), transparent 70%), radial-gradient(46% 30% at 52% 78%, var(--wd-glow), transparent 70%), linear-gradient(to bottom, var(--wd-sky-1), var(--wd-sky-2) 45%, var(--bg)); background-size: 100% 100lvh; background-repeat: no-repeat; }
.hero { --muted: var(--wd-muted); --crest-gap: 96px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; overflow: hidden; padding: 132px 0 0; }
.hero-inner { position: relative; z-index: var(--z-lift); max-width: var(--w-page); padding: 0 24px; text-align: center; display: grid; justify-items: center; gap: 28px; }
.hero h1 { font-size: var(--fs-h1); line-height: 1.06; }
.hero h1 .l1, .hero h1 .l2 { display: block; }
.hero h1 .l1 { color: var(--ink); }
@media (min-width: 1100px) { .hero h1 .l1, .hero h1 .l2 { white-space: nowrap; } }
.lede { max-width: 760px; font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-inner > * { animation: hero-in .8s var(--ease) both; }
.hero-inner > :nth-child(2) { animation-delay: .08s; }
.hero-inner > :nth-child(3) { animation-delay: .16s; }
@keyframes hero-in { from { opacity: .01; transform: translateY(18px); filter: blur(4px); } }
.hero-stage { position: relative; width: 100%; height: 434px; margin-top: -40px; display: flex; justify-content: center; align-items: flex-start; gap: 0; animation: hero-in 1s var(--ease) .4s both; }
.hero-scene { --crest: .633; position: absolute; left: 50%; top: 0; height: calc((100% - var(--crest-gap)) / var(--crest)); aspect-ratio: 2370 / 1770; min-width: 100%; transform: translateX(-50%); pointer-events: none; }
.hero-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 63%; }
.hero-scene-front { z-index: var(--z-lift); }
.hero-scene-front img { -webkit-mask: url("/landing/assets/hero/sea-front.svg") 50% 0 / 100% 100% no-repeat; mask: url("/landing/assets/hero/sea-front.svg") 50% 0 / 100% 100% no-repeat; }
.hs-phone { position: relative; z-index: var(--z-raise); flex: none; width: 300px; height: 600px; margin-top: 96px; padding: 14px 12px; border-radius: 44px; background: var(--paper); box-shadow: var(--onda-shadow-window), 0 0 0 8px var(--onda-ink); }
.hs-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 14px; }
.hs-bar b { font: 500 var(--fs-title)/1 var(--display); letter-spacing: var(--onda-logo-tracking); color: var(--ink); }
.hs-bar span { padding: 6px 10px; border-radius: var(--onda-radius-pill); background: var(--soft-blue); color: var(--blue-2); font: 600 var(--fs-meta)/1 var(--sans); }
.hs-feed { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hs-feed li, .hs-card .hs-bob { position: relative; overflow: hidden; border-radius: var(--onda-radius-card); }
.hs-feed img { display: block; width: 100%; height: 240px; object-fit: cover; }
.hs-card { position: relative; z-index: var(--z-raise); flex: none; width: 180px; margin: 222px 0 0; }
.hs-left { transform: rotate(-7deg) translateX(28px); }
.hs-right { margin-top: 232px; transform: rotate(6deg) translateX(-28px); }
.hs-bob { box-shadow: var(--shadow-cover); animation: bob 6s ease-in-out infinite; }
.hs-right .hs-bob { animation-duration: 6.8s; animation-delay: -2.6s; }
.hs-card img { display: block; width: 180px; height: 320px; object-fit: cover; }
.hs-feed li::after, .hs-bob::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--scrim)); pointer-events: none; }
.hs-feed span, .hs-bob span { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: var(--z-raise); font: 500 var(--fs-meta)/1.2 var(--sans); color: var(--on-emphasis); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stage .vr { position: absolute; left: 8px; top: 8px; z-index: var(--z-raise); display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: var(--onda-radius-pill); background: var(--onda-chip-bg); color: var(--onda-chip-fg); box-shadow: var(--onda-chip-shadow); font: 600 var(--fs-small)/1 var(--sans); font-style: normal; }
.hero-stage .vr svg { width: var(--icon-14); height: var(--icon-14); color: var(--blue); }
.hs-card .vr { font-size: var(--fs-ui); padding: 7px 11px 7px 9px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

/* Real hits found by Radar, drifting past under the hero. The edge fade belongs
   to the viewport, not the moving track: on the track it travels with the
   cards and turns whole covers translucent. */
.hits { position: relative; z-index: var(--z-lift); padding: 24px 0 96px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask) 48px, var(--mask) calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, var(--mask) 48px, var(--mask) calc(100% - 48px), transparent); }
.hits-title { text-align: center; font: 500 var(--fs-title)/1.2 var(--sans); letter-spacing: normal; color: var(--ink); margin: 0 0 28px; }
.hits-track { display: flex; width: max-content; padding: 6px 0 40px; animation: hits-run 60s linear infinite; }
.hits:hover .hits-track { animation-play-state: paused; }
@keyframes hits-run { to { transform: translateX(-50%); } }
.hits-row { list-style: none; margin: 0; padding: 0 10px; display: flex; gap: 20px; }
/* The card moves as one piece: the offset acts on the <li>, so the cover, its
   shade, the chip and the name never drift apart. Covers are not links, so
   they do not lift under the pointer. */
.hits-row li { position: relative; width: 160px; display: grid; gap: 8px; }
.hits-row li:nth-child(even) { transform: translateY(18px); }
.hits-row li > img { width: 160px; height: 284px; object-fit: cover; border-radius: var(--onda-radius-card); box-shadow: var(--shadow-cover); }
.hits-row li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; border-radius: 0 0 var(--onda-radius-card) var(--onda-radius-card); background: linear-gradient(transparent, var(--scrim)); pointer-events: none; }
.hits-row li > span { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: var(--z-raise); font: 500 var(--fs-meta)/1.2 var(--sans); color: var(--on-emphasis); text-shadow: 0 1px 6px var(--scrim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The ×N chip: one element with the app's cover chip (--onda-chip-*); the
   landing draws its large variant (13px, 14px flame). */
.hits-row .vr { position: absolute; left: 10px; top: 10px; z-index: var(--z-raise); display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: var(--onda-radius-pill); background: var(--onda-chip-bg); color: var(--onda-chip-fg); box-shadow: var(--onda-chip-shadow); font: 600 var(--fs-small)/1 var(--sans); font-style: normal; }
.hits-row .vr svg { width: var(--icon-14); height: var(--icon-14); color: var(--blue); }

/* Section heads */
section { padding: 120px 24px; }
.section-head { max-width: var(--w-page); margin: 0 auto 56px; display: grid; gap: 18px; }
.section-head.center { text-align: center; justify-items: center; }
.section-head h2, .agent-card h2, .author-card h2, .final h2 { font-size: var(--fs-h2); line-height: 1.06; }
.section-head h2 span, .agent-card h2 span, .author-card h2 span, .final h2 span { display: block; }
.section-head p { max-width: 560px; font-size: var(--fs-lead); color: var(--muted); }

/* Demo: the stage is tall, the window pins, scroll scrubs the scene. Tall
   scroll stages use lvh: vh/svh follow the phone toolbar and would resize the
   page mid-scroll; lvh does not. */
.demo { padding-top: 40px; }
.demo .section-head { margin-bottom: 36px; }
.stage { position: relative; height: 300vh; height: 300lvh; }
.stage.unpinned { height: auto; }
.stage-pin { position: sticky; top: 84px; display: grid; gap: 18px; }
.stage.unpinned .stage-pin { position: static; }
.demo-steps { list-style: none; max-width: 1080px; width: 100%; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.demo-steps li { display: grid; gap: 10px; font-size: var(--fs-body); color: var(--muted); transition: color .3s; }
.demo-steps li span { font: var(--fs-meta) var(--mono); margin-right: 10px; }
.demo-steps i { display: block; height: 2px; border-radius: var(--onda-radius-pill); background: var(--line); overflow: hidden; }
.demo-steps b { display: block; height: 100%; width: 0; background: var(--blue); }
.demo-steps li.on { color: var(--ink); }

.pd { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.pd-all { background: var(--ink); } .pd-a { background: var(--pa); } .pd-b { background: var(--pb); } .pd-c { background: var(--pc); }
.caret { display: none; width: 1.5px; height: 17px; background: var(--blue); margin-left: 1px; animation: blink 1s steps(1) infinite; }
.mini-note .caret, .sc-note .caret { display: inline-block; }
@keyframes blink { 50% { opacity: 0; } }
.app.wv { position: relative; max-width: 1080px; height: 560px; margin: 0 auto; border-radius: var(--onda-radius-card-lg); overflow: hidden; color: var(--wv-ink); background: linear-gradient(to bottom, var(--wv-sky-1), var(--wv-sky-2) 55%, var(--wv-sky-3)); box-shadow: var(--onda-shadow-window); font-variant-numeric: tabular-nums; isolation: isolate; }
.app.wv::before { content: ''; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(40% 32% at 18% 22%, var(--wv-glow), transparent 70%), radial-gradient(36% 30% at 82% 30%, var(--wv-glow), transparent 70%), radial-gradient(44% 34% at 56% 92%, var(--wv-glow), transparent 70%); filter: blur(30px); }
.wv-top { display: flex; align-items: center; gap: 14px; padding: 16px 26px; }
.wv-logo { font: 500 20px/1 var(--display); letter-spacing: var(--onda-logo-tracking); }
.wv-logo i { font-style: normal; color: var(--wv-accent); }
.wv-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--onda-radius-pill); background: var(--wv-frost); box-shadow: inset 0 0 0 1px var(--wv-frost-line); font-size: var(--fs-small); color: var(--wv-ink); white-space: nowrap; }
.wv-pill svg { width: 15px; height: 15px; color: var(--wv-muted); }
.wv-projsw .pd-all { background: var(--wv-muted); }
.wv-me { margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wv-frost); box-shadow: inset 0 0 0 1px var(--wv-frost-line); font-size: var(--fs-small); font-weight: 600; }
.wv-today { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; padding: 10px 26px 0; }
.wv-date, .wv-of { font-size: var(--fs-small); color: var(--wv-muted); }
.wv-big { margin-top: 4px; font: 500 64px/.95 var(--display); letter-spacing: var(--onda-display-tracking); }
.wv-big small { font-size: .42em; letter-spacing: 0; }
.wv-of { margin-top: 10px; }
.wv-fact { position: relative; height: 20px; margin-top: 14px; font-size: var(--fs-small); color: var(--wv-muted); }
.wv-fact > span { position: absolute; inset: 0; transition: opacity .25s; }
.wv-ok { color: var(--wv-ok); }
.wv-scan { opacity: 0; }
.wv-scan.on { opacity: 1; }
.wv-scan.on + .wv-ok { opacity: 0; }
.wv .spin { color: var(--wv-accent); }
.wv-wave { margin-top: 26px; }
.wv-wave p { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: var(--fs-meta); color: var(--wv-muted); }
.wv-wave b { color: var(--wv-ink); font-weight: 600; }
.wv-days { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 3px; height: 110px; border-bottom: 1px solid var(--wv-hair); }
.wv-days i { display: block; height: 30%; border-radius: 6px 6px 0 0; background: color-mix(in oklab, var(--wv-accent) 28%, transparent); }
.wv-days i:nth-child(2) { height: 38%; } .wv-days i:nth-child(3) { height: 22%; } .wv-days i:nth-child(4) { height: 46%; } .wv-days i:nth-child(5) { height: 34%; } .wv-days i:nth-child(6) { height: 18%; } .wv-days i:nth-child(7) { height: 40%; } .wv-days i:nth-child(8) { height: 52%; } .wv-days i:nth-child(9) { height: 28%; } .wv-days i:nth-child(10) { height: 64%; } .wv-days i:nth-child(11) { height: 36%; } .wv-days i:nth-child(12) { height: 26%; } .wv-days i:nth-child(13) { height: 44%; }
.wv-days i[data-bar] { height: 30%; background: var(--wv-accent); }
.wv-feed { min-width: 0; }
.wv-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--onda-radius-pill); background: var(--wv-frost); box-shadow: inset 0 0 0 1px var(--wv-frost-line); }
.wv-tabs span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: var(--onda-radius-pill); font-size: var(--fs-small); font-weight: 500; color: var(--wv-muted); }
.wv-tabs .on { background: var(--wv-sel); color: var(--wv-ink); }
.wv-tabs em { font-style: normal; font-weight: 400; }
.wv-thead, .wv-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 96px 84px 88px 118px; gap: 14px; align-items: center; }
.wv-thead { margin-top: 14px; padding: 8px 10px; border-bottom: 1px solid var(--wv-hair); font-size: var(--fs-meta); color: var(--wv-muted); }
.wv-thead span:nth-child(n+3) { text-align: right; }
.wv-thead .on { color: var(--wv-ink); font-weight: 500; }
.wv-row { padding: 10px; border-bottom: 1px solid var(--wv-hair); }
.wv-row > img { width: 42px; height: 66px; object-fit: cover; border-radius: 6px; align-self: start; }
.wv-main { min-width: 0; display: grid; gap: 2px; }
.wv-meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--wv-muted); }
.wv-meta b { color: var(--wv-ink); font-weight: 600; font-size: var(--fs-small); }
.wv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wv-ink); }
.wv-ph { font-size: var(--fs-ui); font-weight: 500; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv-pl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--wv-muted); }
.wv-pl .pd { width: 7px; height: 7px; }
.wv-note { display: flex; align-items: center; gap: 6px; height: 0; overflow: hidden; opacity: 0; font-size: var(--fs-small); transition: height .3s var(--ease), opacity .3s; }
.wv-note svg { flex: none; width: 13px; height: 13px; color: var(--wv-muted); }
.wv-note.show { height: 20px; opacity: 1; }
.wv-note.focus .caret { display: inline-block; background: var(--wv-accent); }
.wv-num { text-align: right; font-size: var(--fs-body); font-weight: 500; }
.wv-k { color: var(--wv-accent-ink); }
.wv-phone { display: none; }
.wv-plan { justify-self: end; display: inline-grid; height: 36px; padding: 0 14px; border-radius: var(--onda-radius-pill); background: var(--wv-frost); box-shadow: inset 0 0 0 1px var(--wv-frost-line); font-size: var(--fs-small); font-weight: 500; transition: background .2s, transform .15s; }
.wv-plan > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; transition: opacity .2s; }
.wv-plan svg { width: 15px; height: 15px; }
.wv-plan .wv-plan-on { opacity: 0; }
.wv-plan.is-on { background: var(--wv-sel); box-shadow: none; }
.wv-plan.is-on .wv-plan-on { opacity: 1; }
.wv-plan.is-on .wv-plan-off { opacity: 0; }
.wv-plan.press { transform: scale(.94); }
.wv-row:nth-child(n+6) { opacity: .5; }
/* Its frames follow the scroll (landing.js), so it is not the CSS strip. */
.spin { color: var(--blue); }
.wv-new { overflow: hidden; max-height: 0; padding-block: 0; opacity: 0; border-bottom-color: transparent; }
.wv-new.in { border-bottom-color: var(--wv-hair); }
.wv-dock { position: absolute; left: 50%; bottom: 18px; z-index: var(--z-lift); display: flex; align-items: center; gap: 2px; height: 54px; padding: 5px; border-radius: var(--onda-radius-pill); background: var(--wv-glass); backdrop-filter: blur(20px) saturate(1.2); box-shadow: var(--wv-shadow); transform: translateX(-50%); }
.wv-dock > span { display: inline-flex; align-items: center; gap: 7px; height: 100%; padding: 0 14px; border-radius: var(--onda-radius-pill); font-size: var(--fs-small); font-weight: 500; color: var(--wv-muted); white-space: nowrap; }
.wv-dock svg { width: 18px; height: 18px; }
.wv-dock .on { background: var(--wv-sel); color: var(--wv-ink); }
.wv-dock em { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--onda-radius-pill); background: var(--wv-accent-fill); color: var(--on-emphasis); font-style: normal; font-size: var(--fs-meta); line-height: 1; }
.wv-dock .wv-add { margin-left: 6px; background: var(--wv-accent-fill); color: var(--on-emphasis); transition: transform .15s; }
.wv-add.press, .wv-btn.press { transform: scale(.94); }
.app.wv::after { content: ''; position: absolute; inset: auto 0 0; height: 120px; z-index: var(--z-raise); background: linear-gradient(to bottom, transparent, var(--wv-sky-3)); pointer-events: none; }
.wv-scrim { position: absolute; inset: 0; z-index: var(--z-menu); display: grid; place-items: center; background: var(--wv-scrim); opacity: 0; pointer-events: none; transition: opacity .25s; }
.wv-scrim.open { opacity: 1; }
.wv-sheet { display: grid; gap: 14px; width: min(560px, calc(100% - 32px)); padding: 26px; border-radius: var(--onda-radius-card-lg); background: var(--wv-surface); box-shadow: var(--wv-shadow); transform: translateY(12px) scale(.98); transition: transform .3s var(--ease); }
.wv-scrim.open .wv-sheet { transform: none; }
.wv-sheet-h { font: 500 24px/1.2 var(--sans); }
.wv-lbl { display: grid; gap: 6px; font-size: var(--fs-small); color: var(--wv-muted); }
.wv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wv-field { position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: var(--onda-radius-pill); box-shadow: inset 0 0 0 1px var(--wv-hair); font-size: var(--fs-ui); color: var(--wv-ink); }
.wv-field.focus { box-shadow: inset 0 0 0 1px var(--wv-hair), 0 0 0 2px var(--wv-accent); }
.wv-field.focus .caret { display: inline-block; background: var(--wv-accent); }
.wv-sel { justify-content: space-between; }
.wv-sel span { display: inline-flex; align-items: center; gap: 8px; }
.wv-sel svg { width: 16px; height: 16px; color: var(--wv-muted); }
.wv-sheet-note { font-size: var(--fs-small); line-height: 1.45; color: var(--wv-muted); }
.wv-acts { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 4px; }
.wv-quiet { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; font-size: var(--fs-ui); font-weight: 500; color: var(--wv-muted); }
.wv-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--onda-radius-pill); background: var(--wv-accent-fill); color: var(--on-emphasis); font-size: var(--fs-ui); font-weight: 500; transition: transform .15s; }
.wv .cursor svg { fill: var(--wv-ink); stroke: var(--wv-sky-1); }
.cursor { position: absolute; left: 0; top: 0; z-index: var(--z-cursor); width: 22px; height: 22px; transform: translate(900px, 500px); transition: transform .35s var(--ease); pointer-events: none; filter: drop-shadow(0 2px 3px var(--shade)); }
.cursor svg { width: 22px; height: 22px; fill: var(--ink); stroke: var(--on-emphasis); stroke-width: 1.5; }
.cursor.click svg { transform: scale(.85); transition: transform .12s; }

/* «Когда пригодится»: questions on the left switch a live answer on the right,
   cycling by themselves until the visitor picks one (spacefs-style tabs). */
.jobs { padding-bottom: 40px; }
.job-tabs { max-width: var(--w-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: stretch; }
.job-track.pinned .job-tabs { position: sticky; top: 120px; }
.job-list { display: grid; align-content: center; gap: 4px; }
.job-list button { position: relative; display: flex; align-items: baseline; gap: 18px; padding: 22px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font: 500 var(--fs-h3)/1.2 var(--sans); color: var(--muted); cursor: pointer; transition: color .5s var(--ease); }
.job-list button:last-child { border-bottom: 1px solid var(--line); }
.job-list button[aria-selected="true"] { color: var(--ink); }
.job-list button[aria-selected="true"] .num { color: var(--blue); }
.job-list .num { flex: none; width: 28px; }
.job-list .q { display: inline-block; transition: transform .5s var(--ease); }
.job-list button[aria-selected="true"] .q { transform: translateX(8px); }
.job-list i { position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.job-track:not(.pinned) .job-list button[aria-selected="true"] i { transform: scaleX(1); }
/* No card behind the answer: text and the live scene sit on the page. */
.job-panels { position: relative; min-height: 340px; }
.job-panel { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 16px; align-content: start; padding: 8px 0 0; animation: job-in .5s var(--ease); }
.job-panel > p { font-size: var(--fs-lead); color: var(--ink); max-width: 440px; }
@keyframes job-in { from { opacity: 0; transform: scale(.9); } }
.job-art { display: grid; align-content: start; justify-items: start; gap: 8px; }
.job-panel .mini-note .type { animation: typeOnce 1.6s .5s steps(16) forwards; }
.job-float { grid-auto-flow: column; justify-content: start; align-items: end; gap: 26px; padding: 14px 0 22px; }
.fc { margin: 0; display: grid; justify-items: center; gap: 12px; }
.fc-cover { display: block; width: 96px; height: 150px; object-fit: cover; border-radius: var(--onda-radius-card); box-shadow: var(--shadow-cover); animation: bob 5s ease-in-out infinite; }
.fc:nth-child(2) .fc-cover { animation-duration: 5.8s; animation-delay: -2s; }
.fc:nth-child(3) .fc-cover { animation-duration: 5.3s; animation-delay: -3.5s; }
.fc figcaption { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font: 500 var(--fs-title)/1 var(--display); letter-spacing: var(--onda-display-tracking); color: var(--blue); }
.plat-word { flex: none; font: var(--fs-meta)/1 var(--mono); letter-spacing: 0; color: var(--muted); }
.fc .plat-word { flex-basis: 100%; text-align: center; }
/* Platform marks up to 16px: Simple Icons in currentColor, as in the app. */
.plat-mark { flex: none; width: var(--icon-16); height: var(--icon-16); }
.jt { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; width: min(100%, 440px); padding: 10px 0 0; }
.jt-lines { display: grid; gap: 4px; font-size: var(--fs-ui); line-height: 1.4; }
.jt-lines span { opacity: 0; animation: pop .45s var(--ease) forwards; }
.jt-lines .jt-h { display: flex; align-items: center; gap: 6px; font: var(--fs-meta) var(--mono); color: var(--muted); animation-delay: 0s; }
.jt-lines span:nth-child(2) { animation-delay: .3s; } .jt-lines span:nth-child(3) { animation-delay: .7s; } .jt-lines span:nth-child(4) { animation-delay: 1.1s; }

.reels { padding-top: 80px; }
.reel-row { list-style: none; max-width: var(--w-page); margin: 0 auto; padding: 0; display: flex; justify-content: center; gap: 32px; }
.reel-card { width: 260px; display: grid; align-content: start; gap: 8px; }
.reel-frame { position: relative; aspect-ratio: 9 / 16; border-radius: var(--onda-radius-card-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-cover); }
.reel-start, .reel-frame video { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--ink); }
.reel-start { cursor: pointer; }
.reel-start img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.reel-start:hover img { transform: scale(1.03); }
.reel-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--glass-strong); box-shadow: var(--onda-shadow-raised); }
.reel-play::after { content: ""; position: absolute; left: 26px; top: 22px; width: 22px; height: 24px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.reel-q { margin-top: 10px; font: 500 var(--fs-title)/1.25 var(--sans); }

.reels-cta { display: grid; justify-items: center; gap: 12px; margin-top: 40px; text-align: center; }

/* Feature rows: a live preview of each point; hover or (on touch) the row in
   the middle of the screen picks it. The scenes are decoration (aria-hidden):
   the rows themselves are plain text, not controls. */
.rows { position: relative; list-style: none; max-width: var(--w-page); margin: 0 auto; padding: 0 46% 0 0; }
.rows li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 16px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); cursor: default; }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.num { font: var(--fs-small) var(--mono); color: var(--muted); }
.rows li .num { grid-row: 1; }
.rows li.active .num { color: var(--blue); }
.rows h3 { font: 500 var(--fs-h3)/1.15 var(--sans); color: var(--muted); transition: color .3s, transform .4s var(--ease); }
.rows li.active h3 { color: var(--ink); }
.rows li > p { grid-column: 2; max-width: 460px; font-size: var(--fs-body); color: var(--muted); opacity: .6; transition: opacity .3s; }
.rows li.active > p { opacity: 1; }
.scene { position: absolute; top: var(--scene-top, 0px); right: 0; width: 42%; height: 420px; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 32px; border-radius: var(--onda-radius-card-lg); background: linear-gradient(to bottom, var(--wd-sky-1), var(--wd-sky-2) 55%, var(--wd-sky-3)); box-shadow: var(--onda-shadow-raised); opacity: 0; transform: translateY(8px) scale(.98); pointer-events: none; transition: opacity .35s, transform .45s var(--ease), top .5s var(--ease); }
.rows li.active .scene { opacity: 1; transform: none; }
.scene * { animation-play-state: paused; }
.rows li.active .scene.play * { animation-play-state: running; }
.sc-head { font: var(--fs-small) var(--mono); color: var(--muted); }
.sc-head .spinner { color: var(--blue); }
.sc-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 280px; }
.sc-check li { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-radius: var(--onda-radius-control); background: var(--wd-frost); box-shadow: var(--wd-ring); font: var(--fs-small) var(--mono); }
.sc-check span { display: inline-flex; align-items: center; gap: 10px; }
.sc-check img { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.sc-check b { color: var(--blue); opacity: 0; animation: tick .4s .3s forwards; }
.sc-check li:nth-child(1) b { animation-delay: .3s; }
.sc-check li:nth-child(2) b { animation-delay: .75s; }
.sc-check li:nth-child(3) b { animation-delay: 1.2s; }
.sc-check li:nth-child(4) b { animation-delay: 1.65s; }
.sc-check li:nth-child(5) b { animation-delay: 2.1s; }
@keyframes tick { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.sc-foot { font-size: var(--fs-small); color: var(--muted); }
.sc-bars { display: grid; gap: 16px; width: 300px; justify-self: center; }
.sc-bars div { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.sc-bars strong { color: var(--ink); font: 500 var(--fs-ui) var(--mono); }
.sc-bars i { grid-column: 1 / -1; height: 8px; border-radius: var(--onda-radius-pill); background: var(--soft-blue); position: relative; overflow: hidden; }
.sc-bars i::after { content: ''; position: absolute; inset: 0 auto 0 0; border-radius: var(--onda-radius-pill); background: var(--blue); width: 0; animation: grow 1.4s .2s var(--ease) forwards; }
.sc-bars .b1::after { --w: 1.4%; background: var(--muted); }
.sc-bars .b2::after { --w: 100%; }
@keyframes grow { to { width: var(--w); } }
.sc-ratio { justify-self: center; font: 500 var(--fs-num-xl)/1 var(--display); letter-spacing: var(--onda-display-tracking); color: var(--blue); opacity: 0; animation: pop .5s 1.4s var(--ease) forwards; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.scene-3 .mini-rows { width: 260px; }
.scene-3 .p1 { animation: pillA 4s infinite; } .scene-3 .p2 { animation: pillB 4s infinite; }
.scene-3 .r.a, .scene-3 .r.c { animation: fadeRow 4s infinite; }
.sc-menu { position: relative; width: 240px; display: grid; gap: 6px; }
.sc-mark { justify-self: start; display: inline-grid; padding: 8px 16px; font-weight: 500; border-radius: var(--onda-radius-pill); background: var(--wd-frost); box-shadow: var(--wd-ring); font-size: var(--fs-small); animation: markFill .2s .6s forwards; }
.sc-mark b { grid-area: 1 / 1; font-weight: 500; }
.sc-mark .on { opacity: 0; animation: markOn .2s .6s forwards; }
.sc-mark .off { animation: markOff .2s .6s forwards; }
@keyframes markOn { to { opacity: 1; } }
@keyframes markOff { to { opacity: 0; } }
@keyframes markFill { to { background: var(--blue); color: var(--on-emphasis); box-shadow: none; } }
.sc-drop { display: flex; gap: 2px; padding: 3px; border-radius: var(--onda-radius-pill); background: var(--wd-frost); box-shadow: var(--wd-ring); font-size: var(--fs-small); opacity: 0; animation: pop .3s 1s forwards; }
.sc-drop span { padding: 6px 12px; border-radius: var(--onda-radius-pill); color: var(--muted); white-space: nowrap; }
.sc-drop .on { background: var(--paper); color: var(--ink); box-shadow: var(--onda-shadow-float); }
.sc-note { display: flex; align-items: center; width: 240px; height: 38px; padding: 0 12px; border-radius: var(--onda-radius-control); background: var(--wd-frost); box-shadow: var(--wd-ring); font-size: var(--fs-small); }
.sc-note .type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: typeOnce 1.6s 1.4s steps(16) forwards; }
@keyframes typeOnce { to { width: 16ch; } }
.sc-term { width: 320px; padding: 10px 14px; border-radius: var(--onda-radius-control); background: var(--ink); color: var(--term-fg); font: var(--fs-meta) var(--mono); }
.sc-term .dim { color: var(--term-dim); }
.sc-csv { width: 320px; border-collapse: collapse; font: var(--fs-meta) var(--mono); }
.sc-csv th { text-align: left; font-weight: 400; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--line); }
.sc-csv td { padding: 7px 8px; border-bottom: 1px solid var(--line); }
.sc-csv tr:not(:first-child) { opacity: 0; animation: pop .35s forwards; }
.sc-csv tr:nth-child(2) { animation-delay: .5s; } .sc-csv tr:nth-child(3) { animation-delay: .8s; } .sc-csv tr:nth-child(4) { animation-delay: 1.1s; }

/* The braille spinner, as in the app: a CSS strip of eight frames, no JS. */
.spinner { display: inline-block; width: 1ch; height: 1em; overflow: hidden; vertical-align: text-bottom; font-family: var(--mono); line-height: 1; }
.spinner-strip { display: inline-block; width: 1ch; line-height: 1; word-break: break-all; animation: spin-frames .8s steps(8) infinite; }
@keyframes spin-frames { to { transform: translateY(-8em); } }

/* Use-case cards. The cards are not links, so nothing lifts under the pointer. */
.cards { max-width: var(--w-page); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { display: grid; align-content: start; gap: 12px; padding: 22px 14px 28px; border-radius: var(--onda-radius-card-lg); background: var(--glass); box-shadow: var(--onda-shadow-raised); }
.card > h3 { font: 500 var(--fs-card)/1.2 var(--sans); padding: 0 14px; margin-top: 8px; }
.card > p { padding: 0 14px; font-size: var(--fs-body); color: var(--muted); }
.card-art { height: 200px; display: grid; place-items: center; overflow: hidden; border-radius: var(--onda-radius-card); background: linear-gradient(to bottom, var(--wd-sky-1), var(--wd-sky-2) 55%, var(--wd-sky-3)); }
.card-art.paused *, .card-art.paused { animation-play-state: paused !important; }
.mini-hit { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--onda-radius-card); background: var(--wd-frost); box-shadow: var(--onda-shadow-float); animation: float 5s ease-in-out infinite; }
.mini-hit img { width: 56px; height: 84px; object-fit: cover; border-radius: var(--onda-radius-control); }
.mini-ratio { font: 500 var(--fs-num)/1 var(--display); letter-spacing: var(--onda-display-tracking); color: var(--blue); }
.mini-meta { font: var(--fs-meta) var(--mono); color: var(--muted); margin-top: 6px; }
@keyframes float { 50% { transform: translateY(-6px); } }
.art-client { align-content: center; gap: 14px; }
.pills { display: flex; gap: 6px; padding: 4px; border-radius: var(--onda-radius-pill); background: var(--wd-frost); box-shadow: var(--wd-ring); }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--onda-radius-pill); font-size: var(--fs-small); }
.art-client .p1 { animation: pillA 5s infinite; } .art-client .p2 { animation: pillB 5s infinite; }
@keyframes pillA { 0%, 45% { background: var(--soft-blue); color: var(--blue); } 50%, 95% { background: transparent; color: var(--ink); } }
@keyframes pillB { 0%, 45% { background: transparent; color: var(--ink); } 50%, 95% { background: var(--soft-blue); color: var(--blue); } }
/* fadeRow collapses rows to height 0; the list keeps the height of all four
   rows so the collapse never reflows the page (on phones .scene is in flow and
   the whole page below it jumped 78px every 4 s). */
.mini-rows { display: grid; gap: 6px; width: 220px; align-content: start; min-height: calc(4 * 26px + 3 * 6px); }
.r { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 10px 0 24px; overflow: hidden; border-radius: var(--onda-radius-xs); background: var(--wd-frost); box-shadow: var(--wd-ring); font: var(--fs-meta)/1 var(--mono); color: var(--muted); transition: all .4s; }
.r::before { content: ''; position: absolute; left: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; }
.r.a::before { background: var(--pa); } .r.b::before { background: var(--pb); } .r.c::before { background: var(--pc); }
.r em { font-style: normal; } .r strong { font-weight: 500; color: var(--blue); }
.art-client .r.a, .art-client .r.c { animation: fadeRow 5s infinite; }
@keyframes fadeRow { 0%, 45% { opacity: 1; height: 26px; } 50%, 95% { opacity: 0; height: 0; margin-top: -6px; } }
.mini-note { width: 230px; display: grid; gap: 10px; padding: 14px; border-radius: var(--onda-radius-card); background: var(--wd-frost); box-shadow: var(--onda-shadow-float); }
.mini-mark { justify-self: start; padding: 7px 14px; border-radius: var(--onda-radius-pill); background: var(--blue); color: var(--on-emphasis); font-size: var(--fs-small); font-weight: 500; }
.mini-note p { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--onda-radius-control); background: var(--wd-frost); box-shadow: var(--wd-ring); font-size: var(--fs-small); }
.mini-note .type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; animation: type 5s steps(16) infinite; }
@keyframes type { 0%, 10% { width: 0; } 55%, 100% { width: 16ch; } }

/* Author */
.author-card { max-width: var(--w-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.author-quote { margin: 0; }
.author-quote blockquote { margin: 0; font-size: var(--fs-quote); line-height: 1.55; }
.author-quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.author-credit { display: grid; gap: 2px; }
.author-name { font-weight: 500; }
.author-role { font-size: var(--fs-ui); color: var(--muted); }
.articles { padding-top: 0; }
.articles-card { max-width: var(--w-page); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 48px; align-items: start; }
.articles-card h2 { font-size: var(--fs-h2); line-height: 1.06; }
.articles-card h2 span { display: block; }
.articles-head { display: grid; justify-items: start; gap: 24px; }
.articles-list { list-style: none; margin: 0; padding: 0; }
.articles-list li { position: relative; display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--line); }
.articles-list li:last-child { border-bottom: 1px solid var(--line); }
.articles-list a { font: 500 var(--fs-h3)/1.25 var(--sans); color: var(--ink); text-decoration: none; }
.articles-list a::after { content: ""; position: absolute; inset: 0; }
.articles-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.articles-list p { margin: 0; font-size: var(--fs-ui); color: var(--muted); }

/* Agent card */
.agent-card { position: relative; overflow: hidden; max-width: var(--w-page); margin: 0 auto; display: grid; gap: 18px; padding: 48px; border-radius: var(--onda-radius-card-lg); background: var(--paper); box-shadow: var(--onda-shadow-raised); }
.agent-card > :not(.wave) { position: relative; z-index: var(--z-raise); }
.agent-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.agent-top p { margin-top: 14px; color: var(--muted); max-width: 520px; }
.agent-actions { display: flex; flex-direction: column; gap: 10px; flex: none; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; }
.tags li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: var(--onda-radius-pill); box-shadow: var(--ring); font-size: var(--fs-small); color: var(--muted); }
.tags img { width: var(--icon-16); height: var(--icon-16); }
.prompt-status { min-height: 1em; font-size: var(--fs-ui); color: var(--blue); }
.prompt-status:empty { display: none; }
.prompt-details summary, .terms summary { cursor: pointer; font-size: var(--fs-ui); color: var(--muted); }
.prompt-box { margin: 14px 0 0; padding: 20px; max-height: 320px; overflow: auto; border-radius: var(--onda-radius-card); background: var(--bg); box-shadow: var(--ring); font: var(--fs-meta)/1.6 var(--mono); white-space: pre-wrap; }

/* Pricing */
.plans { list-style: none; max-width: var(--w-page); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.plan { display: grid; align-content: start; gap: 18px; padding: 32px; border-radius: var(--onda-radius-card-lg); background: var(--glass); box-shadow: var(--ring); }
.plan-lead { background: var(--paper); box-shadow: var(--onda-shadow-lead); }
.plan h3 { font: 500 var(--fs-lead) var(--sans); }
.price { font: 500 var(--fs-num-lg)/1 var(--display); letter-spacing: var(--onda-display-tracking); }
.price-text { font-size: var(--fs-num); }
.price span { font: 400 var(--fs-body) var(--sans); letter-spacing: 0; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--fs-body); }
.plan ul li { display: grid; grid-template-columns: 22px 1fr; }
.plan ul li::before { content: '✓'; color: var(--blue); }
.plan .btn { justify-self: start; }
.small { font-size: var(--fs-small); color: var(--muted); }
.terms { max-width: var(--w-page); margin: 24px auto 0; }
.terms div { display: grid; gap: 6px; margin-top: 12px; font-size: var(--fs-ui); color: var(--muted); }
.terms a { text-decoration: underline; text-underline-offset: 3px; }

/* Final call to action */
.final { text-align: center; display: grid; justify-items: center; gap: 28px; padding-top: 40px; padding-bottom: 160px; }
/* 32px is a recorded exception (S-5): the closing card is identity, one step
   above --onda-radius-card-lg. */
.final-card { position: relative; overflow: hidden; width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 110px 24px; border-radius: 32px; --muted: var(--wd-muted); background: radial-gradient(40% 40% at 20% 25%, var(--wd-glow), transparent 70%), radial-gradient(36% 40% at 82% 70%, var(--wd-glow), transparent 70%), linear-gradient(to bottom, var(--wd-sky-1), var(--wd-sky-2) 55%, var(--wd-sky-3)); box-shadow: var(--shadow-final); display: grid; justify-items: center; gap: 26px; }
.final-card > :not(.wave) { position: relative; z-index: var(--z-raise); }

/* One line system, three drawings: the wave band, topographic contours on the
   agent card, rings spreading from the final call to action. */
.wave { position: absolute; inset: 0 -12%; background: url("/landing/assets/wave-hero.svg") 50% 50% / cover no-repeat; pointer-events: none; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-5%); } to { transform: translateX(5%); } }
.wave-agent { background-image: url("/landing/assets/texture-topo.svg"); background-size: 900px auto; background-position: 100% 30%; animation: none; opacity: .7;
  -webkit-mask-image: linear-gradient(to right, transparent 35%, var(--mask) 75%); mask-image: linear-gradient(to right, transparent 35%, var(--mask) 75%); }
.wave-final { inset: 0; background-image: url("/landing/assets/texture-rings.svg"); background-size: 1500px auto; background-position: 50% 50%; opacity: .5; animation: rings 9s ease-in-out infinite alternate;
  -webkit-mask-image: radial-gradient(ellipse 48% 54% at 50% 50%, transparent 62%, var(--mask) 100%); mask-image: radial-gradient(ellipse 48% 54% at 50% 50%, transparent 62%, var(--mask) 100%); }
@keyframes rings { from { transform: scale(1); } to { transform: scale(1.06); } }
.wave-band { position: relative; inset: auto; display: block; height: 260px; margin: -40px 0 0; overflow: hidden; background: none; animation: none; opacity: .6;
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--mask) 35%, var(--mask) 65%, transparent); mask-image: linear-gradient(to bottom, transparent, var(--mask) 35%, var(--mask) 65%, transparent); }
.wave-band::before { content: ''; position: absolute; inset: 0 -12%; background: url("/landing/assets/wave-hero.svg") 50% 50% / 1800px auto no-repeat; animation: drift 26s ease-in-out infinite alternate; }
/* Ambient particles behind the whole page, taking over from the hero ribbon. */
.page-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .6s; }
.page-field.on { opacity: 1; }
main, footer { position: relative; z-index: var(--z-raise); }

/* Scroll reveal. Hidden only where scripts run (no inline bootstrap under the
   CSP). If landing.js never arrives, the fallback animation shows everything
   at 2.5 s; landing.js marks <html> reveal-ready and takes over. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); transition-delay: var(--d, 0s); animation: reveal-fallback 0s 2.5s forwards; }
  .reveal.seen { opacity: 1; transform: none; filter: none; animation: none; }
  .reveal-ready .reveal { animation: none; }
}
@keyframes reveal-fallback { to { opacity: 1; transform: none; filter: none; } }

/* Offscreen animations stop: nothing composites frames nobody sees. */
.paused, .paused *, .paused *::before, .paused *::after, .paused::before, .paused::after { animation-play-state: paused !important; }

@media (max-height: 820px) and (min-width: 901px) { .app.wv { height: 520px; } .wv-days { height: 80px; } .wv-big { font-size: 52px; } }

/* Feature rows, pointer devices: the spacefs pattern. Rows stay a plain
   three-column list; one small card follows the cursor with a spring and a
   velocity tilt, and crossfades to the hovered row's scene. */
@media (min-width: 901px) and (hover: hover) {
  .rows.peeking { padding-right: 0; }
  .rows.peeking > li { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 360px); gap: 24px 40px; padding: 34px 0; }
  .rows.peeking > li > p { grid-column: 3; opacity: 1; transition: color .5s ease-out; }
  .rows.peeking > li:hover > p { color: var(--ink); }
  .rows.peeking > li > h3 { color: var(--ink); transition: transform .5s ease-out; }
  .rows.peeking > li:hover h3 { transform: translateX(8px); }
  .rows.peeking > li .num { color: var(--muted); }
  .peek { position: absolute; top: 0; left: 0; z-index: var(--z-peek); pointer-events: none; will-change: transform; }
  .peek-card { position: relative; margin: -128px 0 0 32px; width: 320px; height: 230px; overflow: hidden; border-radius: var(--onda-radius-card-lg); background: linear-gradient(to bottom, var(--wd-sky-1), var(--wd-sky-2) 55%, var(--wd-sky-3)); box-shadow: var(--onda-shadow-raised); opacity: 0; transform: scale(.9); transition: opacity .25s ease-out, transform .3s var(--ease); }
  .peek.on .peek-card { opacity: 1; transform: none; }
  .peek .scene { inset: 0 auto auto 0; width: 420px; height: 302px; padding: 22px; transform: scale(.762); transform-origin: 0 0; border-radius: 0; background: none; box-shadow: none; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; }
  .peek .scene.active { opacity: 1; visibility: visible; transition: opacity .3s ease-out; }
  .peek .scene-1 { gap: 12px; }
  .peek .scene-1 .sc-check li:nth-child(n+5) { display: none; }
}

@media (max-width: 900px) {
  .nav { inset: 12px 12px auto; }
  .nav::before { inset: -12px -12px -24px; background: var(--nav-fade-dense); }
  .nav-pill { display: none; }
  /* «Войти» stays in the header on phones, as a plain link beside the CTA. */
  .nav-login { padding: 0 10px; background: transparent; box-shadow: none; }
  .nav-login:hover:not(:disabled) { background: transparent; transform: none; }
  section { padding: 80px 16px; }
  .hero { --crest-gap: 72px; padding: 108px 0 0; }
  .hero-inner { padding: 0 16px; }
  .hero-stage { height: 354px; margin-top: -24px; }
  .hs-phone { margin-top: 64px; width: 220px; height: 470px; border-radius: 36px; padding: 10px 9px; box-shadow: var(--onda-shadow-window), 0 0 0 6px var(--onda-ink); }
  .hs-feed img { height: 180px; }
  .hs-card { width: 112px; margin-top: 160px; }
  .hs-card img { width: 112px; height: 200px; }
  .hs-left { transform: rotate(-7deg) translateX(34px); }
  .hs-right { margin-top: 210px; transform: rotate(6deg) translateX(-34px); }
  .hs-card .vr { font-size: var(--fs-small); padding: 5px 9px 5px 7px; }
  .hero-scene { aspect-ratio: 1000 / 1770; }
  .hero-scene-front img { -webkit-mask-size: 237% 100%; mask-size: 237% 100%; }
  .lede { font-size: var(--fs-base); }
  .hits { padding: 8px 0 64px; }
  .hits-track { animation-duration: 45s; }
  .hits-row li, .hits-row li > img { width: 124px; }
  .hits-row li > img { height: 220px; }
  .hits-row li::after { height: 70px; }

  .stage { height: 260vh; height: 260lvh; }
  .stage-pin { top: 72px; gap: 10px; }
  .demo-steps { gap: 10px; }
  .demo-steps li { font-size: var(--fs-meta); }
  .demo-steps li span { display: block; }
  .app.wv { height: 560px; border-radius: var(--onda-radius-card); }
  .wv-top { padding: 12px 14px; gap: 10px; }
  .wv-logo { font-size: 18px; }
  .wv-today { grid-template-columns: 1fr; gap: 12px; padding: 0 14px; }
  .wv-anchor { display: block; }
  .wv-date { display: none; }
  .wv-big { font-size: 40px; }
  .wv-of { margin-top: 4px; }
  .wv-anchor > .wv-fact { margin-top: 6px; font-size: var(--fs-meta); white-space: nowrap; }
  .wv-wave { margin-top: 10px; }
  .wv-days { height: 40px; gap: 2px; }
  .wv-tabs span { padding: 0 10px; font-size: var(--fs-meta); }
  .wv-thead { display: none; }
  .wv-row { grid-template-columns: 38px minmax(0, 1fr) 40px; column-gap: 12px; row-gap: 2px; padding: 10px 0; }
  .wv-row > img { grid-row: 1 / span 2; width: 38px; height: 60px; }
  .wv-main { grid-column: 2; grid-row: 1; }
  .wv-num:not(.wv-k) { display: none; }
  .wv-k { grid-column: 2; grid-row: 2; text-align: left; font-size: var(--fs-small); }
  .wv-k .wv-phone { display: inline; }
  .wv-klabel { color: var(--wv-muted); font-weight: 400; }
  .wv-plan { grid-column: 3; grid-row: 1 / span 2; align-self: center; width: 40px; height: 40px; padding: 0; justify-content: center; }
  .wv-plan > span { justify-content: center; font-size: 0; gap: 0; }
  .wv-ph { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--fs-small); }
  .wv-dock { left: 10px; right: 10px; bottom: 10px; height: 60px; justify-content: space-between; transform: none; }
  .wv-dock > span { position: relative; flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 0 4px; font-size: var(--fs-meta); }
  .wv-dock em { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; }
  .wv-dock .wv-add { margin-left: 4px; }
  .wv-sheet { gap: 10px; padding: 18px; }
  .wv-sheet-h { font-size: 20px; }
  .wv-row2 { gap: 8px; }
  .wv-sel { gap: 4px; padding: 0 10px 0 12px; font-size: var(--fs-small); }
  .wv-sheet-note { font-size: var(--fs-meta); }
  .wv-quiet { padding: 0 10px; }

  .job-tabs { grid-template-columns: 1fr; gap: 20px; }
  .job-list button { padding: 16px 0; gap: 12px; }
  .job-panels { min-height: 360px; }
  .reels { padding-top: 56px; }
  .reel-row { justify-content: start; gap: 16px; margin: 0 -16px; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; }
  .reel-row::-webkit-scrollbar { display: none; }
  .reel-card { flex: none; width: min(68vw, 260px); scroll-snap-align: start; }

  /* Feature scenes stay open on phones: collapsing the previous one pulled the
     next row into view and made the list skip items while scrolling. */
  .rows { padding-right: 0; }
  .scene { position: static; grid-column: 1 / -1; width: auto; height: auto; margin-top: 12px; padding: 24px 16px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; opacity: 1; transform: none; transition: none; }
  .scene > * { width: min(100%, 300px); max-width: none; }
  .scene.play * { animation-play-state: running; }
  .scene-3 .pills, .sc-ratio { width: auto; }
  .scene-3 .mini-rows { width: 100%; max-width: 300px; }
  .sc-term { overflow-wrap: anywhere; }

  .cards, .plans { grid-template-columns: 1fr; }
  .author-card, .articles-card { grid-template-columns: 1fr; gap: 24px; }
  .agent-card { padding: 28px; }
  .agent-top { flex-direction: column; align-items: stretch; }
  .agent-actions .btn { width: 100%; }
  .final-card { padding: 72px 18px; border-radius: var(--onda-radius-card-lg); }
  .wave-band { height: 160px; }
  .wave-band::before { background-size: 1100px auto; }
  .wave-agent { background-size: 600px auto; -webkit-mask-image: linear-gradient(to bottom, transparent 55%, var(--mask) 100%); mask-image: linear-gradient(to bottom, transparent 55%, var(--mask) 100%); }
  .wave-final { background-size: 1100px auto; -webkit-mask-image: radial-gradient(ellipse 85% 42% at 50% 50%, transparent 70%, var(--mask) 100%); mask-image: radial-gradient(ellipse 85% 42% at 50% 50%, transparent 70%, var(--mask) 100%); }

  .prompt-details summary, .terms summary { display: flex; align-items: center; min-height: 44px; }
  .terms a { display: inline-block; padding: 10px 0; margin: -10px 0; }
}
@media (max-width: 380px) {
  .job-panels { min-height: 420px; }
  .job-float { gap: 14px; }
  .fc-cover, .jt .fc-cover { width: 80px; height: 125px; }
  .jt { grid-template-columns: 80px 1fr; gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  /* The braille spinner is a meaning, not decoration: it keeps turning. */
  .spinner-strip { animation: spin-frames .8s steps(8) infinite !important; }
  .stage { height: auto; }
  .stage-pin { position: static; }
  .hits { overflow-x: auto; }
  .hits-row[aria-hidden] { display: none; }
  .sc-check b, .sc-drop, .sc-ratio, .sc-csv tr, .jt-lines span { opacity: 1 !important; }
  .sc-bars .b1::after { width: 1.4%; } .sc-bars .b2::after { width: 100%; }
  .sc-note .type, .job-panel .mini-note .type { width: 16ch; }
  .reel-start img { transition: none; }
}