/* AYVI landing page — "Die markierte Zeile".
   The hero is a graphite sheet: a demo document, one selection and the AYVI panel right below it. The header shares its tokens.
   Below it the page is warm and bright; the only black objects are the product: the MacBook display, its notch and Pixel.
   Motion: surfaces grow between their states (transform, opacity, grid rows); everything is readable without motion. */


body.landing { background: var(--page); }
body.landing main { min-height: 0; }
.landing .wrap { width: min(calc(100% - 2.5rem), 84rem); }
.landing .anchor-alias { position: relative; top: -5rem; display: block; width: 0; height: 0; }
.landing main h2 { font-family: var(--display); font-size: clamp(2rem, 3.9vw, 3.35rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.landing main h3 { font-family: var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.landing p { text-wrap: pretty; }
.landing kbd {
  display: inline-grid; min-width: 1.9em; height: 1.75em; place-items: center; padding: 0 0.5em; margin: 0 0.08em;
  border: 1px solid var(--line-strong); border-radius: 0.42em; background: var(--surface); color: var(--ink);
  box-shadow: 0 1.5px 0 var(--line-strong), 0 2px 6px -3px rgb(40 30 20 / 25%);
  font: 600 0.82em/1 var(--font-sans); vertical-align: 0.08em;
}


/* ---------- Graphite tokens for the header and the hero (both themes) ---------- */
body.landing { background: linear-gradient(#121417, #121417) top / 100% 14rem no-repeat, var(--page); }
.landing .site-header, .sel-hero {
  --page: #121417; --page-2: #0f1113; --surface: #191c20; --ink: #ecebe7; --muted: #a9afb6; --line: #2d3238; --line-strong: #3b4148;
  --accent: #ff7a3d; --accent-soft: #3a2418; --focus: #8bc6ff; --button-ink: #ecebe7; --button-ink-h: #ffffff;
  --shadow: 0 14px 36px -8px rgb(0 0 0 / 60%), 0 2px 6px rgb(0 0 0 / 40%);
  color: var(--ink);
}
/* The header shares the hero's content edges. */
.landing .site-header { width: min(calc(100% - 2.5rem), 84rem); max-width: none; }

/* ---------- Product surface: shared by the hero panel and the notch island (always dark, like the app) ---------- */
.sel-hero, .stage {
  --dk-ink: #f2f1ee; --dk-muted: #b4b4ba; --dk-line: #2c2f35; --sel: rgb(255 122 61 / 30%);
  --del-bg: #3a2220; --del-ink: #ffaaa2; --add-bg: #1b3324; --add-ink: #8fdca5;
}
.sel-hero :focus-visible, .stage :focus-visible { outline: 2px solid #8bc6ff; outline-offset: 3px; border-radius: 8px; }
.demo-tag { display: inline-flex; flex: none; align-items: center; height: 1.3rem; padding: 0 0.45rem; border-radius: 5px; background: rgb(255 255 255 / 13%); color: #f2f1ee; font: 600 0.69rem/1 var(--font-sans); letter-spacing: 0.02em; white-space: nowrap; }
.view { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows 0.32s var(--ease-out), opacity 0.16s ease-out, visibility 0s 0.32s; }
.view > .view-in { min-height: 0; overflow: hidden; }
.view[data-active] { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows 0.32s var(--ease-out), opacity 0.24s ease-out 0.1s, visibility 0s; }
.view-pad { display: grid; gap: 0.7rem; padding: 0.85rem 1rem 1rem; }
.view .fig-sm { width: 1.6rem; height: 1.6rem; }
.view .row { display: flex; align-items: center; gap: 0.6rem; }
.view p { margin: 0; }
.s-title { font: 600 0.94rem/1.3 var(--display); color: var(--dk-ink); }
.s-text { font: 400 0.875rem/1.45 var(--font-sans); color: var(--dk-muted); }
.s-note { font: 400 0.75rem/1.4 var(--font-sans); color: var(--dk-muted); }
.s-actions, .s-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
.s-actions { gap: 0.5rem; }
.s-done { flex: 1 1 10rem; }
.chip {
  min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--dk-line); border-radius: 12px; background: #1d2025; color: var(--dk-ink);
  font: 600 0.875rem/1 var(--font-sans); cursor: pointer; transition: transform 0.16s var(--ease-out), background-color 0.16s, border-color 0.16s;
}
.chip:active { transform: scale(0.97); }
.chip.go { border-color: var(--accent-bright); background: var(--accent-bright); color: #1a0e07; }
.chip.ghost { background: transparent; }
.view .x { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.6rem -0.75rem -0.6rem auto; border: 0; border-radius: 10px; background: none; color: var(--dk-muted); cursor: pointer; }
.idle-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 2.9rem; padding: 0.1rem 0.4rem 0.1rem 0.75rem; font: 400 0.81rem/1.3 var(--font-sans); color: var(--dk-ink); }
.idle-row small { color: var(--dk-muted); font-size: inherit; }
.idle-row .chip { position: relative; min-height: 2.25rem; padding: 0 0.8rem; border-radius: 999px; }
.idle-row .chip::after { position: absolute; inset: -0.3rem 0; content: ""; }
.diff { overflow: hidden; border: 1px solid var(--dk-line); border-radius: 10px; font: 500 0.81rem/1.5 var(--font-mono); }
.diff > span { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); padding: 0.3rem 0.6rem 0.3rem 0; overflow-wrap: anywhere; color: var(--dk-muted); }
.diff > span::before { text-align: center; opacity: 0.8; content: ""; }
.diff .d-del { background: var(--del-bg); color: var(--del-ink); }
.diff .d-del::before { content: "−"; }
.diff .d-add { background: var(--add-bg); color: var(--add-ink); }
.diff .d-add::before { content: "+"; }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); animation: dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* ---------- Pixel, the vector figure (same drawing as the app; markup from scripts/landing_page.py) ---------- */
.fig-defs { position: absolute; }
.fig { display: block; flex: none; overflow: visible; }
.fig-wave, .fig-eyes-happy, .fig-mouth-smile { display: none; }
.fig:is([data-fig="greeting"], [data-fig="happy"]) :is(.fig-wave, .fig-mouth-smile) { display: inline; }
.fig:is([data-fig="greeting"], [data-fig="happy"]) :is(.fig-arm-rest, .fig-mouth-idle) { display: none; }
.fig[data-fig="happy"] .fig-eyes-happy { display: inline; }
.fig[data-fig="happy"] .fig-eyes { display: none; }
.fig-wave { transform: rotate(14deg); transform-box: view-box; transform-origin: 105px 56px; }
.fig-eyes { transform-box: view-box; transform-origin: 60px 67px; }
.fig.is-live .fig-eyes { animation: fig-blink 4.8s ease-in-out infinite; }
/* Wave: one gesture of about 1.5 s whose swings get smaller, with a slight lean of the whole figure, instead of a
   metronome. Nod: down, a small rebound, a second smaller dip. Sine-like easing per swing keeps both from snapping. */
.fig-body { transform-box: view-box; transform-origin: 60px 104px; }
.fig[data-play="wave"] .fig-wave { animation: fig-wave 1.5s cubic-bezier(0.37, 0, 0.63, 1) both; }
.fig[data-play="wave"] .fig-body { animation: fig-lean 1.5s cubic-bezier(0.37, 0, 0.63, 1) both; }
.fig[data-play="nod"] .fig-body { animation: fig-nod 0.95s cubic-bezier(0.37, 0, 0.63, 1) both; }
@keyframes fig-blink { 0%, 93%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(0.12); } }
@keyframes fig-wave {
  0%, 100% { transform: rotate(14deg); }
  13% { transform: rotate(-20deg); } 28% { transform: rotate(18deg); } 43% { transform: rotate(-16deg); }
  58% { transform: rotate(14deg); } 74% { transform: rotate(-7deg); }
}
@keyframes fig-lean { 0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(2.4deg); } 60% { transform: rotate(1.4deg); } }
@keyframes fig-nod {
  0%, 100% { transform: translateY(0); }
  26% { transform: translateY(8px); } 50% { transform: translateY(-1.5px); } 70% { transform: translateY(4.5px); } 88% { transform: translateY(-0.5px); }
}
[data-offscreen] .fig * { animation-play-state: paused; }

/* Document lines. Indentation comes from a class (i0–i12 = leading spaces); landing.js builds the same markup. */
.ln { display: block; padding-left: calc(var(--i, 0) * var(--indent, 1ch)); white-space: pre-wrap; overflow-wrap: anywhere; }
.ln.i1 { --i: 1; } .ln.i2 { --i: 2; } .ln.i3 { --i: 3; } .ln.i4 { --i: 4; } .ln.i5 { --i: 5; } .ln.i6 { --i: 6; }
.ln.i7 { --i: 7; } .ln.i8 { --i: 8; } .ln.i9 { --i: 9; } .ln.i10 { --i: 10; } .ln.i11 { --i: 11; } .ln.i12 { --i: 12; }
.ln > span { padding: 0.12em 0.2em; margin-inline: -0.2em; border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color 0.3s ease-out, color 0.3s ease-out; }
.ln .t-sel { background: var(--sel); color: #fff; }
.ln .t-del { background: var(--del-bg); color: var(--del-ink); text-decoration: line-through; text-decoration-thickness: 1px; }
.ln .t-add { background: var(--add-bg); color: var(--add-ink); }
.ln .t-new { background: rgb(143 220 165 / 16%); color: var(--add-ink); }

/* ---------- Hero: the marked line ---------- */
.sel-hero {
  position: relative; display: grid; align-items: center; min-height: min(calc(100dvh - 4.75rem), 58rem); padding-block: clamp(1.25rem, 5vh, 4rem) clamp(3rem, 8vh, 5.5rem);
  background: radial-gradient(60rem 40rem at 88% 82%, rgb(255 122 61 / 13%), transparent 62%) no-repeat, #121417;
}
.sel-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.sel-copy { grid-column: 1 / span 5; padding-top: 3.2rem; }
.sel-eyebrow { margin: 0; color: var(--muted); font-size: 0.875rem; font-weight: 600; }
.sel-eyebrow b { color: var(--accent); font-weight: 600; }
.sel-hero h1 { margin: clamp(0.9rem, 2.2vh, 1.4rem) 0 0; font-family: var(--display); font-size: clamp(2.2rem, 4.5vw, 4.1rem); font-weight: 700; line-height: 1.03; letter-spacing: -0.04em; text-wrap: balance; }
.sel-hero h1 mark { padding: 0 0.12em; margin: 0 -0.12em; border-radius: 0.12em; background: var(--sel); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sel-lead { max-width: 32rem; margin: clamp(0.9rem, 2.2vh, 1.4rem) 0 0; color: var(--muted); font-size: clamp(1.06rem, 1.4vw, 1.25rem); line-height: 1.45; }
.landing .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: clamp(1.25rem, 3vh, 2rem) 0 0; }
.landing .hero-actions .button { min-height: 3rem; padding-inline: 1.4rem; font-size: 1rem; }
.landing .button.ghost { background: transparent; }
.landing .button.ghost:hover { background: var(--surface); }
.sel-keys { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.94rem; }
.keys-btn { display: inline-flex; align-items: center; gap: 0.2rem; min-height: 2.75rem; padding: 0 0.3rem; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; cursor: pointer; vertical-align: middle; transition: transform 0.16s var(--ease-out); }
.keys-btn:active { transform: scale(0.96); }

.sel-sheet { grid-column: 7 / span 6; min-width: 0; }
/* One entrance on load. The text only settles a few pixels (it stays visible, so the first paint is the content);
   the demo sheet settles behind it. Nothing is ever hidden by the entrance, so a paused tab still shows everything. @starting-style needs no script and is ignored where unsupported. */
.sel-copy > * { transition: translate 0.6s var(--ease-out); }
.sel-copy > :nth-child(2) { transition-delay: 0.04s; }
.sel-copy > :nth-child(3) { transition-delay: 0.08s; }
.sel-copy > :nth-child(4) { transition-delay: 0.12s; }
.sel-copy > :nth-child(5) { transition-delay: 0.16s; }
.sel-sheet { transition: translate 0.7s var(--ease-out) 0.1s; }
@starting-style {
  .sel-copy > * { translate: 0 10px; }
  .sel-sheet { translate: 0 14px; }
}
.sel-sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding-bottom: 0.7rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.sel-tabs { display: inline-flex; gap: 0.25rem; }
.sel-tab { min-height: 2.75rem; padding: 0 0.75rem; white-space: nowrap; border: 0; border-radius: 10px; background: none; color: var(--muted); font: 600 0.94rem/1.15 var(--font-sans); cursor: pointer; transition: background-color 0.16s, color 0.16s, transform 0.16s var(--ease-out); }
.sel-tab:active { transform: scale(0.97); }
.sel-tab[aria-selected="true"] { background: var(--surface); color: var(--ink); }
.sel-tabs, .sel-file { flex: none; }
.sel-file { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; color: var(--muted); font: 500 0.81rem/1 var(--font-mono); }
.sel-doc { --indent: 0.75ch; color: #8b929c; font: 500 clamp(0.92rem, 1.2vw, 1.12rem)/1.85 var(--font-mono); }
.sel-doc[data-kind="text"] { font: 400 clamp(1.05rem, 1.5vw, 1.3rem)/1.6 var(--font-sans); }
.sel-selected { color: #fff; }
.sel-panel {
  position: relative; width: min(31rem, 100%); margin: 2.6rem 0 0.9rem clamp(0rem, 5%, 2.5rem); border: 1px solid var(--dk-line); border-radius: 18px; background: #07080a;
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / 80%), inset 0 0 0 1px rgb(255 255 255 / 3%); transition: width 0.32s var(--ease-out);
}
/* Pixel peeks over the panel's top edge: only the head shows, the rest stays behind the panel. */
.sel-buddy { position: absolute; right: 1.4rem; bottom: 100%; width: 3.4rem; height: 2.3rem; overflow: hidden; pointer-events: none; }
.sel-buddy .fig { width: 3.4rem; height: 3.4rem; }
[data-state="idle"] > .wrap .sel-buddy .fig { translate: 0 2.4rem; }
.sel-buddy .fig { transition: translate 0.3s var(--ease-out); }
.sel-panel::before { position: absolute; top: -7px; left: 26px; width: 12px; height: 12px; border: solid var(--dk-line); border-width: 1px 0 0 1px; background: #07080a; rotate: 45deg; content: ""; }
[data-state="idle"] > .wrap .sel-panel { width: min(17rem, 100%); }
[data-state="working"] > .wrap .sel-panel { width: min(20rem, 100%); }
.sel-note { max-width: 34rem; margin: 1.5rem 0 0; color: var(--muted); font-size: 0.81rem; }

/* ---------- Notch stage: the optional notch view on a recreated MacBook display ---------- */
.stage { margin: 0 0 clamp(2.5rem, 5vw, 4rem); }
.nb-mac {
  position: relative; display: flex; height: clamp(27rem, 44vw, 36rem); padding: 12px 12px 0; border-radius: 28px 28px 0 0; background: #0a0a0b;
  box-shadow: 0 0 0 2px #bdb8ae, 0 0 0 3px #8d887f, 0 40px 80px -30px rgb(60 30 10 / 45%);
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent);
}
.nb-screen { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: 16px 16px 0 0; background: radial-gradient(120% 80% at 50% 118%, #d2571c 0%, #6b2a10 28%, #201713 58%, #111214 100%); }
.nb-menubar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 2rem; padding: 0 1rem; color: #ecebe7; font-size: 0.75rem; font-weight: 500; }
.nb-menubar > span { display: inline-flex; align-items: center; gap: 1.1rem; }
.nb-island {
  position: absolute; z-index: 2; top: 0; left: 50%; width: 29.5rem; max-width: calc(100% - 1.25rem); border-radius: 0 0 24px 24px; background: #000; color: var(--dk-ink);
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 60%); translate: -50% 0; transition: width 0.32s var(--ease-out);
}
/* Pixel leans out from behind the notch island and waves. The clip edge is the island's own edge, so the figure reads as
   coming out of the notch; in the compact state it slides back in. */
.nb-peek { position: absolute; top: 0.4rem; left: 100%; width: 6.5rem; height: 6.5rem; margin-left: -1.5rem; clip-path: inset(-1rem -3rem -2rem 1.5rem); pointer-events: none; }
.nb-peek .fig { width: 6.5rem; height: 6.5rem; rotate: 8deg; transition: translate 0.34s var(--ease-out); }
.stage[data-state="idle"] .nb-peek .fig { translate: -110% 0; }
.nb-cam { height: 1.75rem; transition: height 0.32s var(--ease-out); }
.stage[data-state="idle"] .nb-island { width: 25rem; }
.stage[data-state="idle"] .nb-cam { height: 0; }
.stage[data-state="working"] .nb-island { width: 21.5rem; }
.stage[data-state="explain"] .nb-island { width: 32.5rem; }
.stage[data-state="review"] .nb-island { width: 35rem; }
.stage[data-state="applied"] .nb-island { width: 31rem; }
.nb-window { position: absolute; top: 3.75rem; left: 50%; width: min(45rem, 100% - 3rem); border: 1px solid var(--dk-line); border-radius: 12px; background: #16181c; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 70%); translate: -50% 0; }
.nb-titlebar { display: flex; align-items: center; gap: 0.5rem; height: 2.4rem; padding: 0 0.9rem; border-bottom: 1px solid var(--dk-line); color: var(--dk-muted); font-size: 0.75rem; }
.nb-titlebar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3d44; }
.nb-titlebar span { margin-left: 0.5rem; }
.nb-code { padding: 0.9rem 1rem 2.5rem; color: #c9cfd8; font: 500 0.875rem/1.72 var(--font-mono); counter-reset: n; }
.nb-code .ln { position: relative; margin-left: 2.6rem; counter-increment: n; }
.nb-code .ln::before { position: absolute; left: -2.6rem; width: 1.6rem; color: #6c727c; text-align: right; content: counter(n); }
.stage-caption { margin-top: 1rem; }
.stage-label { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--muted); font-size: 0.875rem; }
.stage-label .demo-tag { background: var(--ink); color: var(--page); }

/* Notch and panel */
.surface-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
.surface h3 { margin-top: 1.75rem; font-size: 1.6rem; }
.surface ul { margin: 0.9rem 0 0; padding: 0; list-style: none; }
.surface li { position: relative; padding: 0.7rem 0 0.7rem 1.4rem; border-top: 1px solid var(--line); color: var(--ink); }
.surface li::before { position: absolute; left: 0; top: 1.28rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line-strong); content: ""; }
.surface p { margin: 1rem 0 0; }

/* Who answers */
.routes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.route { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.5rem clamp(1.5rem, 5vw, 5rem); padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.route h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
.route-where { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0; font-size: 0.92rem; font-weight: 600; }
.route-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.route.is-local .route-where { color: var(--good); }
.route.is-local .route-dot { background: var(--good); }
.route.is-cloud .route-where { color: var(--accent); }
.route.is-cloud .route-dot { background: var(--accent); }
.route.is-off .route-where { color: var(--muted); }
.route.is-off .route-dot { border: 1.5px dashed var(--muted); }
.route.is-off h3 { color: var(--muted); }
.route-detail { margin: 0; color: var(--muted); max-width: 40rem; }

/* Setup and status */
.setup { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.reqs { margin: 2rem 0 0; border-top: 1px solid var(--line-strong); }
.reqs > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 0.3rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.reqs dt { font-weight: 650; }
.reqs dd { margin: 0; color: var(--muted); }
.status-card { padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.status-title { margin: 0; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.hero-availability { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.hero-availability li + li { border-top: 1px solid var(--line); }
.hero-availability a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; padding: 0.85rem 0; color: var(--ink); text-decoration: none; }
.hero-availability a:hover strong { text-decoration: underline; }
.hero-availability span:not(.download-device-label) { color: var(--muted); font-size: 0.92rem; }
.hero-availability small { grid-column: 1 / -1; color: var(--muted); }
.download-device-label { display: none; }
.is-current-platform .download-device-label { display: block; grid-column: 1 / -1; color: var(--accent); font-size: 0.75rem; font-weight: 700; }
.availability-note { margin: 1rem 0 0; padding: 1rem; border-radius: var(--radius-md); background: var(--page-2); color: var(--muted); font-size: 0.92rem; }
.availability-note strong { display: block; margin-bottom: 0.2rem; color: var(--ink); }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list details:first-child { border-top: 1px solid var(--line-strong); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6rem; padding: 0.9rem 0;
  font-size: 1.08rem; font-weight: 600; list-style: none; cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-25%); transition: transform 0.25s var(--ease-out); content: ""; }
.faq-list details[open] summary::after { transform: rotate(225deg) translateY(-25%); }
.faq-list details p { max-width: 42rem; margin: 0 0 1.25rem; color: var(--muted); }

/* Closing */
.closing-band { position: relative; padding-block: var(--space-section); overflow: clip; border-top: 1px solid var(--line); }
.closing-band::before { position: absolute; inset: 10% auto auto 0; width: 40rem; height: 30rem; background: radial-gradient(closest-side, rgb(255 255 255 / 90%), transparent); content: ""; pointer-events: none; }
.closing-grid { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.pixel-stage {
  --f: 14px; position: relative; display: grid; width: clamp(12rem, 22vw, 17rem); height: clamp(9rem, 15vw, 11.5rem); place-items: end center; padding: 0 0 clamp(1.2rem, 2vw, 1.8rem);
  margin: calc(-1 * var(--space-section)) 0 0; border: 0; border-radius: 0 0 44px 44px; background: #000; cursor: pointer;
  box-shadow: 0 40px 60px -36px rgb(40 30 20 / 55%); transition: transform 0.3s var(--ease-out);
}
.pixel-stage::before, .pixel-stage::after { position: absolute; top: 0; width: var(--f); height: var(--f); content: ""; background: radial-gradient(circle at 0 100%, transparent calc(var(--f) - 0.5px), #000 var(--f)); }
.pixel-stage::before { right: 100%; transform: scaleX(-1); }
.pixel-stage::after { left: 100%; }
.pixel-stage .fig-xl { width: clamp(5.5rem, 10vw, 8rem); height: auto; }
.closing-copy h2 { max-width: 16ch; }
.closing-copy > p:not(.hero-actions):not(.links) { max-width: 34rem; margin: 1.1rem 0 0; color: var(--muted); font-size: 1.08rem; }

/* Mascot "Pixel": frames of the app's own sprite (assets/mascot-states.svg, 24 frames, from design/mascot/mascot.json). */
.mascot {
  --m: 2rem; display: block; flex: none; width: var(--m); height: var(--m);
  background: url("mascot-states.svg") 0 0 / calc(var(--m) * 24) var(--m) no-repeat; image-rendering: pixelated;
}
.mascot[data-mascot="idle"] { animation: pixel-idle 5.6s step-end infinite; }
.mascot[data-mascot="working"] { animation: pixel-working 0.667s step-end infinite; }
.mascot[data-mascot="success"] { animation: pixel-success 0.75s step-end forwards; }
.mascot[data-mascot="greeting"] { animation: pixel-greeting 0.78s step-end forwards; }
@keyframes pixel-idle {
  0%, 44%, 100% { background-position-x: 0; }
  45% { background-position-x: calc(var(--m) * -2); }
  48% { background-position-x: 0; }
  70% { background-position-x: calc(var(--m) * -1); }
  92% { background-position-x: 0; }
}
@keyframes pixel-working {
  0% { background-position-x: calc(var(--m) * -4); }
  25%, 75% { background-position-x: calc(var(--m) * -5); }
  50% { background-position-x: calc(var(--m) * -6); }
  100% { background-position-x: calc(var(--m) * -4); }
}
@keyframes pixel-success {
  0% { background-position-x: calc(var(--m) * -9); }
  16.6% { background-position-x: calc(var(--m) * -10); }
  33.3% { background-position-x: calc(var(--m) * -11); }
  50% { background-position-x: calc(var(--m) * -12); }
  66.6% { background-position-x: calc(var(--m) * -13); }
  83.3%, 100% { background-position-x: calc(var(--m) * -14); }
}
@keyframes pixel-greeting {
  0% { background-position-x: calc(var(--m) * -17); }
  14.3% { background-position-x: calc(var(--m) * -18); }
  28.6% { background-position-x: calc(var(--m) * -19); }
  42.9% { background-position-x: calc(var(--m) * -20); }
  57.1% { background-position-x: calc(var(--m) * -21); }
  71.4% { background-position-x: calc(var(--m) * -22); }
  85.7%, 100% { background-position-x: calc(var(--m) * -23); }
}
[data-offscreen] .mascot, [data-offscreen] .ivy-spinner, [data-offscreen] .sym-work svg { animation-play-state: paused; }
[data-offscreen] .mascot, [data-offscreen] .dots i { animation-play-state: paused; }

/* ---------- Sub navigation after the hero ---------- */
.hero-subnav {
  position: fixed; top: 0.75rem; left: 50%; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(calc(100% - 1.5rem), 34rem); min-height: 3.4rem; padding: 0.4rem 0.45rem 0.4rem 0.9rem;
  border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / 78%);
  box-shadow: 0 10px 30px -14px rgb(40 30 20 / 35%); backdrop-filter: blur(16px) saturate(1.3);
  opacity: 0; transform: translate(-50%, -140%); transition: opacity 0.25s ease, transform 0.45s var(--ease-out);
}
:root[data-theme="dark"] .hero-subnav { background: rgb(25 28 32 / 85%); }
.hero-subnav.is-visible { opacity: 1; transform: translate(-50%, 0); }
.hero-subnav-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.hero-subnav-brand img { width: 1.6rem; height: 1.6rem; }
.hero-subnav-cta { display: inline-flex; min-height: 2.5rem; align-items: center; padding: 0 1.05rem; border-radius: 999px; background: var(--button-ink); color: var(--page); font-size: 0.88rem; font-weight: 600; text-decoration: none; }

/* ---------- Bands ---------- */
.band { position: relative; padding-block: var(--space-section); }
.band-quiet { background: var(--page-2); }
.band-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); align-items: end; gap: 1.5rem clamp(2rem, 5vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.band-head p { max-width: 36rem; margin: 0; color: var(--muted); font-size: 1.08rem; }
.band-more, .band-note { margin: 2rem 0 0; }
.band-note { color: var(--muted); font-size: 0.95rem; }


/* ---------- Hover refinements (devices that hover) ---------- */
@media (hover: hover) and (pointer: fine) {
  .pixel-stage:hover { transform: translateY(3px); }
  .chip:hover { border-color: #5a5f68; }
  .chip.go:hover { border-color: #ff8b55; background: #ff8b55; }
  .view .x:hover, .sel-tab:hover { color: var(--dk-ink); }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .sel-hero { align-items: start; }
  .sel-grid { display: block; }
  .sel-copy { padding-top: 0; }
  .sel-keys { display: none; }
  .sel-sheet { margin-top: 1.75rem; }
  .sel-panel { margin-left: 0; }
}
@media (max-width: 860px) {
  .band-head, .surface-pair, .setup, .faq-wrap, .route { grid-template-columns: minmax(0, 1fr); }
  .band-head { gap: 1rem; }
  .route { gap: 0.6rem; }
  .closing-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* The display becomes a flat close-up: island and window flow below each other, nothing is cropped. */
  .nb-mac { height: auto; padding: 9px 9px 0; border-radius: 22px 22px 0 0; -webkit-mask-image: none; mask-image: none; }
  .nb-screen { padding-bottom: 0.9rem; border-radius: 13px 13px 0 0; }
  .nb-menubar { display: none; }
  .nb-island, .stage[data-state] .nb-island { position: relative; left: auto; width: calc(100% - 1.25rem); margin-inline: auto; translate: none; }
  .stage[data-state="idle"] .nb-island { width: calc(100% - 3rem); }
  .nb-window { position: relative; top: auto; left: auto; width: auto; margin: 4.1rem 0.6rem 0; translate: none; }
  /* On phones Pixel comes out below the island and stands in the gap above the editor window. */
  .nb-peek { top: 100%; right: 1.1rem; left: auto; width: 4.4rem; height: 4.4rem; margin: -0.5rem 0 0; clip-path: inset(0.5rem -2rem -1rem -2rem); }
  .nb-peek .fig { width: 4.4rem; height: 4.4rem; rotate: none; }
  .stage[data-state="idle"] .nb-peek .fig { translate: 0 -110%; }
  .nb-code { --indent: 0.5ch; padding: 0.6rem 0.6rem 0.9rem; font-size: 0.78rem; }
  .nb-code .ln { margin-left: 1.8rem; }
  .nb-code .ln::before { left: -1.8rem; width: 1.2rem; }
  .nb-code [data-doc-before] .ln:nth-child(-n+5) { display: none; }
}
@media (max-width: 560px) {
  .landing .wrap { width: calc(100% - 2rem); }
  .sel-hero { padding-top: 1rem; }
  .landing .hero-actions .button { flex: 1 1 auto; padding-inline: 1rem; }
  .sel-sheet { margin-top: 1.5rem; }
  .sel-sheet-head { align-items: flex-start; flex-direction: column; gap: 0.5rem; margin-bottom: 0.8rem; }
  .sel-tabs { display: grid; flex: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .landing .site-header { width: calc(100% - 2rem); }
  .sel-tab { padding: 0.3rem 0.4rem; font-size: 0.84rem; white-space: normal; text-wrap: balance; }
  .sel-doc { --indent: 0.6ch; font-size: 0.82rem; line-height: 1.8; }
  .sel-doc[data-kind="text"] { font-size: 1rem; }
  .reqs > div { grid-template-columns: minmax(0, 1fr); }
  .hero-subnav-brand span { font-size: 0.86rem; }
}

/* ---------- Reduced motion: every state stays reachable, nothing travels ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion keeps a short crossfade between states and drops everything that travels or resizes. */
  .view, .view[data-active] { transition: opacity 0.15s ease; }
  .nb-island, .nb-cam, .sel-panel, .chip, .sel-tab, .keys-btn, .ln > span, .hero-subnav, .pixel-stage { transition: none; }
  .sel-copy > *, .sel-sheet { transition: none; }
  .mascot, .dots i, .fig * { animation: none !important; }
  .nb-peek .fig, .sel-buddy .fig { transition: none; }
  .dots i { opacity: 1; }
}
.closing-copy { padding-top: clamp(0.5rem, 2.5vw, 2.5rem); }

/* Graphite theme: the hero already is graphite; the daylight glow of the closing band becomes a faint reflection. */
:root[data-theme="dark"] .closing-band::before { opacity: 0.05; }
:root[data-theme="dark"] .pixel-stage { box-shadow: 0 0 0 1px #2c2d31; }
:root[data-theme="dark"] .nb-mac { box-shadow: 0 0 0 2px #3b4148, 0 40px 80px -30px rgb(0 0 0 / 70%); }
:root[data-theme="dark"] body.landing { background: var(--page); }