/* Hesper landing — "Agents say done. Hesper checks."
   Part 1: the app window and its surfaces, 1:1 with ADE (Palette.swift, daylight.css, v12-terminal, wave-4 contact sheets).
   Part 2: the landing layer (type, sections, motion). Tokens share the app's names; <html data-sun="morning|dusk"> lights both. */

/* ---------- the app's own palette (ADE Sources/HesperDesign/Tokens/Palette.swift + v12-terminal paper) ----------
   <html data-sun> picks the light. Every Hesper window on the page reads these, so the Sun control in the hero
   window re-lights the whole page. */
:root, :root[data-sun="morning"] {
  --h-bg: #F4F5F3; --h-card: #FFFFFF; --h-glass: rgba(255,255,255,.72); --h-pop: #FFFFFF;
  --h-ink: #22252A; --h-ink2: #4C5158; --h-ink3: #6A6E75; --h-warm: #A14E19;
  --h-signal: #E07A35; --h-wash: #FCEADB; --h-ready: #3C7C69; --h-error: #B4423A;
  --h-hover: rgba(34,37,42,.055); --h-press: rgba(34,37,42,.10); --h-hair: rgba(34,37,42,.10); --h-hair2: rgba(34,37,42,.18);
  --h-pool-warm: rgba(255,236,206,.85); --h-pool-cool: rgba(206,224,236,.8); --h-band: rgba(34,37,42,.028);
  --h-primary: #22252A; --h-on-primary: #FFFFFF;
  --t-bg: #F6F4EE; --t-ink: #2A2520; --t-dim: #6E6557; --t-acc: #A14E19; --t-sel: #F3DFAE;
  --t-add: #E4ECDA; --t-add-w: #CFE0C1; --t-del: #F4E0DA; --t-del-w: #EDC8BF; --t-err: #F2E4DF; --t-bar: #FBF8F1; --t-rule: #DDD3C2;
  --a1: #A63A2E; --a2: #3D6A38; --a3: #865E00; --a4: #2E5B88; --a5: #873E76; --a6: #286A6C; --a8: #7A7062;
  --h-shadow: 0 0 0 .5px rgba(0,0,0,.16), 0 50px 110px -40px rgba(30,20,10,.45), 0 2px 6px rgba(30,20,10,.06);
}
:root[data-sun="afternoon"] {
  --h-bg: #F6F1E7; --h-card: #FFFDF8; --h-glass: rgba(255,252,245,.70); --h-pop: #FFFDF8;
  --h-ink: #2A2620; --h-ink2: #574F42; --h-ink3: #706858; --h-warm: #934413;
  --h-signal: #D9692A; --h-wash: #FBE4D0; --h-ready: #4A7A5E; --h-error: #B0473A;
  --h-hover: rgba(70,45,10,.06); --h-press: rgba(70,45,10,.11); --h-hair: rgba(70,45,10,.11); --h-hair2: rgba(70,45,10,.2);
  --h-pool-warm: rgba(255,214,150,.75); --h-pool-cool: rgba(246,228,196,.8); --h-band: rgba(70,45,10,.03);
  --h-primary: #2A2620; --h-on-primary: #FFFDF8;
  --t-bg: #F7F3EA;
}
:root[data-sun="dusk"], .dusk {
  --h-bg: #1F1A16; --h-card: #2E251E; --h-glass: rgba(48,39,32,.70); --h-pop: #352A22;
  --h-ink: #F2E8DA; --h-ink2: #CFC2B0; --h-ink3: #A3968A; --h-warm: #F4AE72;
  --h-signal: #F2A15F; --h-wash: #3E2B1C; --h-ready: #8CC4A6; --h-error: #E3806F;
  --h-hover: rgba(242,232,218,.07); --h-press: rgba(242,232,218,.12); --h-hair: rgba(255,232,205,.10); --h-hair2: rgba(255,232,205,.2);
  --h-pool-warm: rgba(214,128,62,.16); --h-pool-cool: rgba(90,58,38,.4); --h-band: rgba(0,0,0,.12);
  --h-primary: #F2E8DA; --h-on-primary: #1F1A16;
  --t-bg: #241D18; --t-ink: #EADFCF; --t-dim: #A3968A; --t-acc: #F2A15F; --t-sel: #4A3A26;
  --t-add: #2E3A2A; --t-add-w: #3A4A33; --t-del: #3D2622; --t-del-w: #55302A; --t-err: #33251F; --t-bar: #2A221C; --t-rule: #43362C;
  --a1: #E8907E; --a2: #9CCB9A; --a3: #E2B86A; --a4: #8FB4E0; --a5: #D4A0CB; --a6: #86C6C3; --a8: #8A7D70;
  --h-shadow: inset 0 .5px 0 rgba(255,228,195,.07), 0 0 0 .5px rgba(0,0,0,.5), 0 50px 110px -40px rgba(0,0,0,.7);
}
.real, .ws { color: var(--h-ink); text-align: left; transition: background-color .6s ease, color .6s ease; }
.real kbd, .ws kbd { background: none; border: 0; padding: 0; font: 500 11px/1 var(--sans); color: var(--h-ink3); }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 8px; font: 500 12.5px/1 var(--sans); background: var(--h-hover); color: var(--h-ink); border: 0; white-space: nowrap; }
.btn.dark { background: var(--h-primary); color: var(--h-on-primary); } .btn.dark kbd { color: inherit; opacity: .65; }
.btn.plain { background: none; color: var(--h-ink2); }
.btn.ghost { background: none; box-shadow: inset 0 0 0 .5px var(--h-hair2); color: var(--h-ink2); }
button.btn { cursor: pointer; transition: transform .12s ease, background .2s ease; } button.btn:hover { filter: brightness(.97); } button.btn:active { transform: scale(.96); }

/* status glyph (StatusGlyph.swift, 12pt box) */
.g { width: 12px; height: 12px; flex: none; display: grid; place-items: center; }
.g i { display: block; border-radius: 50%; }
.g.asks i { width: 7px; height: 7px; background: var(--h-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-signal) 20%, transparent); }
.g.working i { width: 8px; height: 8px; box-shadow: inset 0 0 0 1.5px var(--h-ink2); }
.g.done i { width: 7px; height: 7px; background: var(--h-ready); }
.g.resting i { width: 7px; height: 7px; background: var(--h-ink3); }
.g.reconnecting i { width: 8px; height: 8px; border: 1.3px dashed var(--h-ink3); }
.g svg { width: 12px; height: 12px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g.proven svg { stroke: var(--h-ready); } .g.stopped svg { stroke: var(--h-error); }
.mk { width: 12px; height: 12px; flex: none; fill: var(--h-ink3); }

/* sidebar row (AgentRow) */
.row { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--h-ink); }
.row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .w { font-size: 11.5px; color: var(--h-ink3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row .w.asks-w { color: var(--h-warm); }
.row .w.no-w { color: var(--h-error); }
.g.checking i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--h-ink3); border-top-color: transparent; animation: spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .g.checking i { animation: none; border-top-color: var(--h-ink3); } }
.row.sel { background: var(--h-press); }

/* ---------- hero: the app window, drawn at its real size (1280 × 760 pt) and scaled to fit ---------- */
.hero .lede { max-width: 31em; }
.ws-frame { position: relative; max-width: 1180px; margin: clamp(22px, 2.4vw, 32px) auto 0; aspect-ratio: 1280 / 760; }
.ws { position: absolute; left: 0; top: 0; width: 1280px; height: 760px; transform: scale(var(--k, .92)); transform-origin: 0 0; overflow: hidden;
  border-radius: 14px; background: var(--h-bg); box-shadow: var(--h-shadow); font: 13px/1.4 var(--sans); outline: none; }
.ws-pool { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 420px at 16% 0%, var(--h-pool-warm) 0%, transparent 70%), radial-gradient(680px 460px at 84% 90%, var(--h-pool-cool) 0%, transparent 70%); transition: background .6s ease; }
.ws button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; text-align: left; }
.ws :focus-visible { outline: 2px solid color-mix(in srgb, var(--h-ink) 50%, transparent); outline-offset: 1px; }

.tb { position: relative; z-index: 4; height: 56px; display: flex; align-items: center; padding: 0 16px 0 12px; }
.tb .lights { margin-left: 8px; }
.tb-side { position: absolute; left: 220px; top: 15px; width: 28px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--h-ink2); transition: left .3s ease; }
.tb-side:hover { background: var(--h-hover); }
.tb-side svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ws.collapsed .tb-side { left: 96px; }
.tb-tabs { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; }
.tb-tabs button { height: 32px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--h-ink2); }
.tb-tabs button:hover { background: var(--h-hover); color: var(--h-ink); }
.tb-tabs button[aria-selected="true"] { color: var(--h-ink); background: color-mix(in srgb, var(--h-card) 78%, transparent); box-shadow: inset 0 0 0 .5px var(--h-hair), 0 1px 1px rgba(0,0,0,.05); }
.sig { width: 6px; height: 6px; border-radius: 50%; background: var(--h-signal); }
.tb-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.use { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--h-ink3); font-variant-numeric: tabular-nums; }
.use svg { width: 12px; height: 12px; fill: none; stroke: var(--h-ink3); stroke-width: 1.5; }
.sun { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--h-hover); }
.sun button { width: 32px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--h-ink3); }
.sun button:hover { color: var(--h-ink); }
.sun button[aria-pressed="true"] { color: var(--h-ink); background: color-mix(in srgb, var(--h-card) 85%, transparent); }
.sun svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.ws-main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 256px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); transition: grid-template-columns .3s ease; }
.ws.collapsed .ws-main { grid-template-columns: 0 minmax(0, 1fr); }
.col { position: relative; z-index: 3; padding: 66px 12px 12px; background: var(--h-band); box-shadow: inset -.5px 0 0 var(--h-hair); overflow: hidden; min-width: 0; }
.col-act { width: 100%; display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 8px; font-size: 13px; color: var(--h-ink2); }
.col-act:hover { background: var(--h-hover); color: var(--h-ink); }
.col-act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.col-act kbd { margin-left: auto; }
.col-proj { margin: 18px 0 2px; padding: 0 10px; height: 24px; display: flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; color: var(--h-ink2); }
.col .row { width: 100%; animation: row-in .4s cubic-bezier(.22,.8,.24,1) both; }
.col .row:hover { background: var(--h-hover); } .col .row.sel { background: var(--h-press); }
.col .row.focus .t { font-weight: 500; }
.fold { width: 100%; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; font-size: 12px; color: var(--h-ink3); border-radius: 8px; }
.fold:hover { background: var(--h-hover); }
.fold-list { padding-left: 18px; font-size: 12px; color: var(--h-ink3); }
.fold-list p { margin: 0; height: 24px; display: flex; align-items: center; }
@keyframes row-in { from { opacity: 0; transform: translateY(-5px); } }

.place { position: relative; z-index: 2; min-width: 0; min-height: 0; padding-top: 56px; display: flex; flex-direction: column; }
.ws.collapsed .col, .ws-frame.compact .col { visibility: hidden; padding: 0; }

/* Home (empty stage): greeting + the bottom composer */
.home { flex: 1; display: flex; flex-direction: column; width: min(720px, 100% - 64px); margin: 0 auto; padding: 72px 0 24px; }
.home .greet { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.022em; line-height: 1.15; }
.home .sub { margin: 6px 0 0; font-size: 15px; color: var(--h-ink2); }
.home .cmp { margin-top: auto; }
.home .sub b { font-weight: 400; color: var(--h-ink); }
.home-list .hl-h { margin: 0 0 6px; font-size: 12px; color: var(--h-ink3); }
.home-list .row { width: 100%; height: 36px; font-size: 14px; }
.cmp { margin-top: auto; border-radius: 20px; background: var(--h-card); box-shadow: 0 0 0 .5px var(--h-hair), 0 18px 40px -20px rgba(30,20,10,.35); padding: 16px 18px 12px 20px; }
.cmp textarea { display: block; width: 100%; min-height: 48px; resize: none; border: 0; outline: none; background: none; font: 16px/1.45 var(--sans); color: var(--h-ink); padding: 0; }
.cmp textarea::placeholder { color: var(--h-ink3); }
.cmp-ln { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 13px; color: var(--h-ink2); white-space: nowrap; }
.cmp-ln button { padding: 4px 6px; border-radius: 6px; } .cmp-ln button:hover { background: var(--h-hover); }
.cmp-ln button.lead { color: var(--h-ink); font-weight: 500; }
.cmp-ln .sep { color: var(--h-ink3); opacity: .6; }
.cmp-send { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center !important; padding: 0 !important; background: var(--h-hover) !important; color: var(--h-ink3); transition: background .2s ease, color .2s ease, transform .15s ease; }
.cmp-send.on { background: var(--h-primary) !important; color: var(--h-on-primary); }
.cmp-send svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cmp-hint { display: flex; justify-content: space-between; margin: 8px 14px 0; font-size: 12px; color: var(--h-ink3); }

/* the stage: panes (StagePane on TerminalCard), measured from the shipped app's wave-4 shots */
.stage { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 12px; padding: 4px 24px 24px 24px; }
.pane { position: relative; display: flex; flex-direction: column; min-height: 0; border-radius: 12px; background: color-mix(in srgb, var(--h-card) 62%, transparent);
  box-shadow: inset 0 0 0 1px var(--h-hair2); opacity: .94; transition: box-shadow .4s ease, opacity .3s ease; overflow: hidden; }
.pane.focus { opacity: 1; }
.pane.asks { opacity: 1; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--h-signal) 75%, transparent), 0 0 0 3px color-mix(in srgb, var(--h-signal) 14%, transparent), 0 0 24px -2px color-mix(in srgb, var(--h-signal) 40%, transparent); }
.ph { display: flex; align-items: flex-start; gap: 8px; padding: 8px 8px 8px 12px; cursor: default; }
.ph .g { height: 18px; }
.ph-txt { flex: 1; min-width: 0; }
.ph-t { display: flex; align-items: center; gap: 8px; margin: 0; height: 18px; white-space: nowrap; overflow: hidden; }
.ph-t b { font-size: 13px; font-weight: 600; color: var(--h-ink2); overflow: hidden; text-overflow: ellipsis; }
.pane.focus .ph-t b { color: var(--h-ink); }
.tag { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; height: 17px; border-radius: 6px; font: 10.5px/1 var(--mono); color: var(--h-ink2); background: var(--h-hover); box-shadow: inset 0 0 0 .5px var(--h-hair); }
.tag svg { width: 9px; height: 9px; fill: var(--h-ink3); }
.ph-s { font-size: 12px; color: var(--h-ink3); overflow: hidden; text-overflow: ellipsis; }
.pane.asks .ph-s { color: var(--h-warm); }
.ph-m { margin: 1px 0 0; font-size: 12px; color: var(--h-ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-b { display: flex; gap: 4px; flex: none; }
.ph-b button { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: var(--h-ink2); }
.ph-b button:hover { background: var(--h-hover); }
.ph-b svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ask { margin: 0 8px 8px; padding: 12px; border-radius: 12px; background: var(--h-wash); animation: row-in .35s ease both; }
.ask p { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--h-ink); }
.ask code { font: 12.5px var(--mono); font-weight: 400; }
.ask div { display: flex; gap: 6px; }

/* the paper terminal: a real TUI grid (TerminalTheme+Palette), content recorded from claude 2.1 and codex 0.162 under tmux */
.term { position: relative; flex: 1; min-height: 0; margin: 0 4px 4px; display: flex; flex-direction: column; border-radius: 9px; background: var(--t-bg); padding: 8px 10px 6px;
  font: 12px/16px "SF Mono", ui-monospace, Menlo, monospace; color: var(--t-ink); white-space: pre; font-variant-ligatures: none; transition: background-color .6s ease, color .6s ease; overflow: hidden; }
.tx { flex: 1; min-height: 0; overflow: hidden; }
.tx > * { display: block; min-height: 16px; overflow: hidden; text-overflow: clip; animation: ln-in .2s ease both; }
.tin > * { display: block; min-height: 16px; overflow: hidden; }
.term .wrap { white-space: pre-wrap; }
@keyframes ln-in { from { opacity: 0; } }
.c-dim { color: var(--t-dim); } .c-b { font-weight: 700; } .c-acc { color: var(--t-acc); }
.c-r { color: var(--a1); } .c-g { color: var(--a2); } .c-y { color: var(--a3); } .c-bl { color: var(--a4); } .c-mg { color: var(--a5); } .c-cy { color: var(--a6); }
.l-add { background: var(--t-add); } .l-del { background: var(--t-del); } .w-add { background: var(--t-add-w); } .w-del { background: var(--t-del-w); }
.l-you { background: color-mix(in srgb, var(--t-ink) 6%, transparent); }
.rule { color: var(--a8); } .rule::after { content: "──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; }
.rule.dash::after { content: "╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌"; }
.mascot { color: #D97757; }
.term button.opt { all: unset; display: block; cursor: pointer; white-space: pre; border-radius: 2px; }
.term button.opt:hover { background: var(--t-sel); }
.tin-row { display: flex !important; }
.tin-row input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font: inherit; color: var(--t-ink); caret-color: var(--t-acc); padding: 0; }
.tin-row input::placeholder { color: var(--t-dim); }
.tright { text-align: right; }
.spin { display: inline-block; animation: spin 1.2s steps(6) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: absolute; z-index: 6; bottom: 36px; right: 36px; transform: translateY(6px); margin: 0; display: flex; gap: 10px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 999px; font-size: 12.5px; color: var(--h-ink); background: var(--h-pop); box-shadow: 0 0 0 .5px var(--h-hair), 0 10px 24px -10px rgba(0,0,0,.3); opacity: 0; transition: opacity .3s ease, transform .3s ease; white-space: nowrap; pointer-events: none; }
.toast.on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.toast button { height: 24px; padding: 0 10px !important; border-radius: 999px !important; background: var(--h-hover) !important; font-weight: 600 !important; font-size: 12px !important; }
.toast.plain { padding-right: 14px; }

/* other places: the approved ADE mockups themselves (public/app/*.html), shown under the window's own title bar */
.ws.on-place .ws-main { grid-template-columns: 0 minmax(0, 1fr); }
.ws.on-place .col, .ws.on-place .tb-side { visibility: hidden; }
.pl-frame { position: absolute; inset: 0; z-index: 1; border: 0; width: 100%; height: 100%; background: transparent; }
.place.framed { padding-top: 0; }



/* accounts picker rows (v13-accounts) */
.ap-h { margin: 8px 10px 4px; font-size: 12px; color: var(--h-ink3); }
.ap-row { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; font: inherit; color: var(--h-ink); text-align: left; cursor: pointer; }
div.ap-row { cursor: default; }
.ap-row:hover, .ap-row.on { background: var(--h-hover); }
.ap-t { display: flex; align-items: baseline; gap: 6px; font-size: 12px; color: var(--h-ink3); }
.ap-t b { font-size: 13.5px; font-weight: 500; color: var(--h-ink); }
.ap-ck { width: 12px; color: var(--h-ink); }
.ap-r { margin-left: auto; }
.ap-u { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 0 18px; font-size: 11.5px; color: var(--h-ink3); }
.ap-u i { font-style: normal; color: var(--h-ink2); }
.ap-u i.hot { color: var(--h-warm); }
.ap-u em { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--h-hover); position: relative; overflow: hidden; }
.ap-u em::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--h-ink3); }
.ap-u em.hot::after { background: var(--h-signal); }
.ap-add { margin: 4px 0 0; padding: 8px 10px; font-size: 13px; color: var(--h-ink2); }
.ap-foot { display: flex; justify-content: space-between; margin: 0; padding: 8px 10px 4px; border-top: .5px solid var(--h-hair); font-size: 12px; color: var(--h-ink3); }

/* phones: the hero window is a purpose-made crop — the sidebar alone, with the two "asks" rows amber */
.ws-frame.compact { height: 420px; aspect-ratio: auto; }
.ws-frame.compact .ws { width: 100%; height: 420px; transform: none; }
.ws-frame.compact .tb-tabs, .ws-frame.compact .use, .ws-frame.compact .tb-side { display: none; }
.ws-frame.compact .ws-main { grid-template-columns: minmax(0, 1fr) 0; }
.ws-frame.compact .col { visibility: visible; padding: 60px 10px 10px; box-shadow: none; background: none; }
.ws-frame.compact .place { display: none; }
.ws-frame.compact .toast { display: none; }


.ws-frame.compact .col-act { display: none; }
.ws-frame.compact .col { padding-top: 48px; }
.ws-frame.compact .col-proj:first-of-type { margin-top: 0; }
/* phones: the title bar keeps the lights, one "Agents" tab as the crop's label, and the light switch on the same row;
   only the focused row reads selected; the crop ends after the last full row in a fade, not mid-row */
.ws-frame.compact .tb-tabs { display: flex; position: static; transform: none; margin-left: 8px; }
.ws-frame.compact .tb-tabs button:not([data-place="agents"]) { display: none; }
.ws-frame.compact .col .row.sel { background: none; }
.ws-frame.compact .fold { display: none; }
.ws-frame.compact { height: 440px; -webkit-mask-image: linear-gradient(#000 70%, transparent 100%); mask-image: linear-gradient(#000 70%, transparent 100%); }
.ws-frame.compact .ws { height: 440px; }


/* =====================================================================================================
   LANDING LAYER — "Agents say done. Hesper checks."
   Tokens are the app's daylight.css names. Two sun phases on <html data-sun>; `.dusk` pins a scene to dusk.
   Signal orange is the only accent and means "needs you" (plus the one italic word in the h1 and final h2).
   One painting (the Higgsfield morning) is the whole world: full-bleed in the hero, a warm band behind
   Needs-you, a sun crop on the proof panel, a lit hill crop on the accounts band, and graded to candle
   amber for dusk. Never a second image.
   One container: 1180px for every section (the hero window, the needs-you window, the trust rows and the
   maker card all share its left edge). A 720 reading column for the FAQ only.
   ===================================================================================================== */
:root {
  --bg: #F4F5F3; --card: #FFFFFF; --ink: #22252A; --ink-2: #4C5158; --ink-3: #6A6E75; --rule: #E5E4DF;
  --signal: #E07A35; --signal-wash: #FCEADB; --ready: #3C7C69; --error: #B4423A;
  --glass: rgba(255,255,255,.94); --glass-edge: rgba(255,255,255,.75); --glass-line: rgba(34,37,42,.08);
  --warm-mid: #F6EBE1; --peach: #FCEADB; --lilac: #E6DCE4;
  --paint: url(/media/hero-painting.webp);
  --display: "Instrument Sans", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif; /* inside app mockups */
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --shadow-card: 0 10px 30px rgba(30,35,45,.08);
  --card-edge: 0 0 0 .5px var(--h-hair);
  --gutter: clamp(16px, 4vw, 40px); --max: 1180px; --fade: 1.2s; --section-y: 128px;
  --page-bg: #F4F5F3;
  color-scheme: light;
}
:root[data-sun="dusk"] { --page-bg: #221B15; }
:root[data-sun="dusk"], .dusk {
  --bg: #221B15; --card: #352B23; --ink: #F2E8DA; --ink-2: #D4C6B3; --ink-3: #AA9C8F; --rule: #3E332A;
  --signal: #F2A15F; --signal-wash: #3E2B1C; --ready: #8CC4A6; --error: #E3806F;
  --glass: rgba(44,35,28,.94); --glass-edge: rgba(255,232,205,.14); --glass-line: rgba(255,232,205,.08);
  --warm-mid: #2A211B; --peach: #4A3422; --lilac: #2E2630;
  --shadow-card: 0 10px 30px rgba(0,0,0,.3);
  --card-edge: 0 0 0 1px #3A3028, inset 0 1px 0 rgba(255,228,195,.08);
  color-scheme: dark;
}
/* dusk cards: a lighter tone and a 1px rule, so edges never vanish brown on brown */
:root[data-sun="dusk"] .real.sheet, :root[data-sun="dusk"] .pf, :root[data-sun="dusk"] .qa-card, :root[data-sun="dusk"] .acc-pop, :root[data-sun="dusk"] .cont, :root[data-sun="dusk"] .founder, :root[data-sun="dusk"] .needs-stage {
  --h-card: #352B23; --h-pop: #3A2F26; }
:root[data-sun="dusk"] .ws, :root[data-sun="dusk"] .needs-stage { background: #2A221C; box-shadow: inset 0 0 0 1px rgba(255,235,210,.12), 0 0 0 .5px rgba(0,0,0,.5), 0 50px 110px -40px rgba(0,0,0,.7); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; font: 17px/1.55 var(--body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: color var(--fade) ease, background-color var(--fade) ease; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
code { font: .9em var(--mono); }
kbd { font: 500 .78em/1 var(--body); padding: .25em .5em; border-radius: 6px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ---------- type ---------- */
h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(44px, 4.3vw, 62px); line-height: 1.06; letter-spacing: -.03em; }
h2 { font-size: clamp(34px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -.025em; }
h2.big { font-size: clamp(36px, 3.6vw, 50px); line-height: 1.1; }
h2.center { text-align: center; }
em.hl { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--signal); font-size: 1.06em; letter-spacing: -.01em; transition: color var(--fade) ease; }
/* the one caption style on the page: 12px mono, .12em, ink-3; it sits under an artefact, never above a heading */
.fig { margin: 0; font: 500 12px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); max-width: none; text-wrap: balance; }
.fig.center { text-align: center; }
.eyebrow { margin: 0 0 18px; font: 500 12.5px/1.4 var(--body); letter-spacing: .01em; color: var(--ink-2); text-wrap: balance; }

.copy p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.copy h2 { margin-bottom: 20px; }
.copy p + p { margin-top: 14px; }
.copy.center { text-align: center; margin: 0 auto; }
.copy.center p { margin-left: auto; margin-right: auto; }
.small { font-size: 14px !important; line-height: 1.5; color: var(--ink-3) !important; }
p.small.center { text-align: center; max-width: 40em; margin: 28px auto 0; }
.small kbd { font-size: 11px; }
.lede { margin: 20px auto 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }

/* ---------- layout ---------- */
/* one rhythm: every section ends with --section-y of air and starts flush, so each gap on the page is the same */
.sec { position: relative; padding: 0 var(--gutter) var(--section-y); }
.wrap { max-width: var(--max); margin: 0 auto; }
.wrap.narrow { max-width: 720px; }
.wrap.two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(36px, 5vw, 64px); align-items: center; }
.wrap.two > .panel-cap { grid-column: 2; margin-top: -8px; }
.wrap.two.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.wrap.two.rev > .copy { order: 2; }
.needs { padding-top: 56px; }

/* ---------- the painting, reused ----------
   .hero-paint    = full-bleed, hills and all (the hero only).
   .paint.skyband = the top of the painting (clouds, lilac, peach) behind Needs-you, warmed to the peach of the hero.
   .paint.sun     = the sun and the horizon, zoomed, on the proof panel.
   .paint.hills   = the lit hills, wide, on the accounts band and the trust band.
   Dusk is the same painting graded to candle amber: a multiply layer at ~38 %, an amber sun low-left, the hills lit. */
.paint { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #ECE4DE var(--paint) 50% 60% / cover no-repeat;
  filter: saturate(1.22) contrast(1.06); transition: filter var(--fade) ease; }
.paint::before, .paint::after { content: ""; position: absolute; inset: 0; transition: opacity var(--fade) ease, background var(--fade) ease; }
.paint::before { background: radial-gradient(70% 60% at 14% 82%, rgba(255,190,130,.6), transparent 70%); mix-blend-mode: multiply; }
.paint::after { background: var(--peach); mix-blend-mode: multiply; opacity: .25; }
.paint.skyband { background-position: 50% 0; background-size: auto 185%; }
.paint.skyband::before { background: radial-gradient(60% 60% at 18% 100%, rgba(255,205,160,.8), transparent 70%), linear-gradient(180deg, rgba(252,234,219,.0), rgba(252,234,219,.5)); }
.paint.skyband::after { background: #F3D6C2; mix-blend-mode: multiply; opacity: .6; }
.paint.sun { background-size: cover; background-position: 12% 78%; filter: saturate(1.3) contrast(1.08); }
.paint.sun::before { background: radial-gradient(45% 45% at 18% 30%, rgba(255,196,140,.5), transparent 70%); }
.paint.sun::after { background: linear-gradient(180deg, rgba(252,234,219,.3) 0%, color-mix(in srgb, var(--peach) 70%, transparent) 55%, #F7DCC8 100%); mix-blend-mode: normal; opacity: .78; }
.paint.hills { background-position: 50% 92%; background-size: cover; }
.paint.hills::before { background: linear-gradient(180deg, rgba(255,210,170,.55), rgba(255,210,170,.15) 60%, transparent), radial-gradient(60% 70% at 10% 30%, rgba(255,190,130,.7), transparent 70%); mix-blend-mode: multiply; }
.paint.hills::after { background: linear-gradient(90deg, rgba(255,249,243,.72), rgba(255,249,243,.5) 42%, rgba(255,249,243,.1) 60%, transparent), linear-gradient(180deg, transparent 55%, rgba(252,226,206,.75)), var(--peach); mix-blend-mode: normal; opacity: .66; }
/* the wide band under "Hesper has no server of its own": the sun crop, saturated, with the lowest (khaki) hills lifted to peach */
.paint.hills.wide { background-position: 30% 70%; background-size: cover; filter: saturate(1.35) contrast(1.08); }
.paint.hills.wide::before { background: radial-gradient(50% 60% at 16% 40%, rgba(255,186,120,.7), transparent 70%), linear-gradient(180deg, rgba(240,196,176,.0), rgba(236,186,166,.5)); mix-blend-mode: multiply; }
.paint.hills.wide::after { background: linear-gradient(180deg, rgba(252,234,219,.55), rgba(252,234,219,.1) 45%, rgba(250,214,190,.75) 72%, #F8DCC6 100%), var(--peach); mix-blend-mode: normal; opacity: .62; }
:root[data-sun="dusk"] .paint, .dusk .paint, :root[data-sun="dusk"] .hero-paint { filter: brightness(.7) saturate(1.3) contrast(1.06); }
/* dusk grade: candle-warm plum in the sky, amber at the horizon, the ridgelines kept; never graphite or mauve */
:root[data-sun="dusk"] .paint::after, .dusk .paint::after, :root[data-sun="dusk"] .hero-paint::after { background: linear-gradient(180deg, #7A574A 0%, #A3734F 45%, #D29A5C 68%, #8A5A30 100%); mix-blend-mode: multiply; opacity: 1; }
:root[data-sun="dusk"] .paint::before, .dusk .paint::before, :root[data-sun="dusk"] .hero-paint::before { background: radial-gradient(50% 45% at 14% 76%, rgba(242,161,95,.9), rgba(242,161,95,.35) 40%, transparent 72%), linear-gradient(180deg, transparent 50%, rgba(242,161,95,.22) 72%, transparent 92%); mix-blend-mode: screen; }
:root[data-sun="dusk"] .paint.skyband::after { background: linear-gradient(180deg, #6B4A3E, #A3734F 55%, #C48A62); }
:root[data-sun="dusk"] .paint.sun::after { background: linear-gradient(180deg, #A3734F, #D9995A 60%, #8A5A30); }
:root[data-sun="dusk"] .paint.hills::after { background: linear-gradient(180deg, #C48A62, #8A5A30); }

/* ---------- nav pill (hides within the first 120px of scrolling down, returns on the way up) ----------
   A real surface: 86 % white (88 % dusk) plus blur, a hairline inside, and nothing above it in the tree carries a
   transform or filter while it rests, so the blur reads the page behind it. */
.pill-nav { position: fixed; top: 20px; left: 0; right: 0; z-index: 30; display: flex; justify-content: center; pointer-events: none; transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.pill-nav.hide { transform: translateY(-140%); opacity: 0; }
.pill-nav nav { pointer-events: auto; display: flex; align-items: center; gap: 2px; height: 44px; padding: 4px 4px 4px 8px; border-radius: 999px; background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(20,23,15,.04), 0 12px 30px -18px rgba(40,32,30,.35);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); transition: background var(--fade) ease; }
@supports not (backdrop-filter: blur(1px)) { .pill-nav nav { background: var(--card); } }
.pill-nav a { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 999px; font: 500 14px/1 var(--body); color: var(--ink-2); text-decoration: none; }
.pill-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pill-nav .pn-home { color: var(--ink); padding-left: 4px; margin-right: 8px; }
.pill-nav .pn-home img { border-radius: 6px; }
.pill-nav .pn-cta { margin-left: 8px; color: var(--bg); background: var(--ink); }
.pill-nav .pn-cta:hover { color: var(--bg); background: var(--ink); filter: brightness(1.15); }
@media (max-width: 720px) { .pill-nav nav > a:not(.pn-home):not(.pn-cta) { display: none; } .pill-nav { top: 12px; } .pill-nav nav { background: rgba(255,255,255,.92); } :root[data-sun="dusk"] .pill-nav nav { background: rgba(46,37,30,.92); } }

/* ---------- 1 · hero: the painting is the stage; the window rises from the hills and dissolves into the page ----------
   Layers: painting (0) → copy (1) → window (2). The window's lower part is masked over 160px into painted ground
   (peach, then the page bg), so the fold reads as the Dia slice and not as a clipped box. */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; padding: clamp(96px, 13vh, 136px) var(--gutter) 0; text-align: center; background: var(--bg); transition: background-color var(--fade) ease; }
.hero-paint { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: #ECE4DE var(--paint) 24% 230% / auto 118% no-repeat; filter: saturate(1.45) contrast(1.1); transition: filter var(--fade) ease; }
.hero-paint::before, .hero-paint::after { content: ""; position: absolute; inset: 0; transition: opacity var(--fade) ease, background var(--fade) ease; }
.hero-paint::before { background: radial-gradient(40% 30% at 12% 46%, rgba(255,176,110,.75), transparent 70%); mix-blend-mode: multiply; }  /* the sun, warmer */
.hero-paint::after { background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--peach) 70%, transparent) 66%, var(--peach) 86%); }  /* hills washed to peach */
/* the page bg takes over in the last 240px; drawn outside the filtered painting so the join is exact */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 240px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, transparent, var(--bg) 92%); transition: background var(--fade) ease; }
/* dusk hero: the same sun, low-left, as a soft amber radial, so the two phases share one world */
:root[data-sun="dusk"] .hero-paint { filter: brightness(.72) saturate(1.3) contrast(1.06); }
:root[data-sun="dusk"] .hero-paint::before { background: radial-gradient(42% 34% at 12% 48%, rgba(248,172,98,.95), rgba(242,161,95,.4) 45%, transparent 72%); mix-blend-mode: screen; }
:root[data-sun="dusk"] .hero-paint::after { background: linear-gradient(180deg, #6B4A3E 0%, #9C6C4B 40%, #CF935A 60%, #8A5A34 86%); mix-blend-mode: multiply; }
.hero-copy { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.hero h1 { max-width: 15ch; margin: 0 auto; }
.hero .lede { max-width: 36em; margin-bottom: 28px; color: var(--ink-2); }
.hero-note { margin: 14px auto 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); max-width: 40em; text-wrap: balance; }
.hero-proof { display: block; font-variant-numeric: tabular-nums; }
.hero-proof a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); }
:root[data-sun="dusk"] .hero-note, :root[data-sun="dusk"] .hero .lede, :root[data-sun="dusk"] .eyebrow { color: var(--ink); }
.hero-stage { position: relative; z-index: 2; max-width: var(--max); margin: clamp(32px, 4vw, 44px) auto 0; max-height: 500px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 170px), transparent); mask-image: linear-gradient(#000 calc(100% - 170px), transparent); }
.hero-stage .ws-frame { margin: 0 auto; }
.hero-stage .ws { box-shadow: var(--h-shadow); }
.hero-cap { position: relative; z-index: 1; margin: -22px auto 0; text-align: center; }
.hero-cap .cap-m { display: none; }
@media (hover: none), (max-width: 760px) { .hero-cap .cap-d { display: none; } .hero-cap .cap-m { display: inline; } }
@media (max-width: 760px) {
  .hero { min-height: 0; padding-top: 84px; }
  .hero-paint { background: #ECE4DE url(/media/hero-painting-m.webp) 20% 100% / auto 112% no-repeat; }
  .hero-paint::before { background: radial-gradient(40% 24% at 10% 58%, rgba(255,176,110,.7), transparent 70%); }
  :root[data-sun="dusk"] .hero-paint::before { background: radial-gradient(44% 26% at 10% 58%, rgba(248,172,98,.95), rgba(242,161,95,.4) 45%, transparent 72%); }
  .hero .lede { margin-bottom: 22px; }
  .eyebrow { margin-bottom: 14px; font-size: 12px; }
  .hero-note { font-size: 12.5px; }
  .hero-proof { display: none; }
  .hero-stage { margin-top: 28px; max-height: none; -webkit-mask-image: none; mask-image: none; }
  .hero-cap { margin-top: -24px; }
}

/* the waitlist field is drawn like the app's composer */
.waitlist-form { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; max-width: 560px; margin: 0 auto; padding: 8px 8px 8px 18px; border-radius: 20px; text-align: left;
  background: var(--h-card); box-shadow: 0 0 0 .5px var(--h-hair), 0 18px 40px -20px rgba(30,20,10,.35); transition: background-color var(--fade) ease; }
.waitlist-form:focus-within { box-shadow: 0 0 0 .5px var(--h-hair2), 0 0 0 4px color-mix(in srgb, var(--signal) 16%, transparent), 0 18px 40px -20px rgba(30,20,10,.35); }
.waitlist-form input[type=email], .post-signup input { font: 16px/1.4 var(--body); min-width: 0; padding: 10px 0; border: 0; background: transparent; color: var(--h-ink); }
.waitlist-form input::placeholder { color: var(--h-ink3); }
.waitlist-form input:focus { outline: none; }
.waitlist-form button, .post-signup button { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1 var(--body); padding: 12px 16px; border: 0; border-radius: 12px; background: var(--h-primary); color: var(--h-on-primary); cursor: pointer; transition: transform .2s cubic-bezier(.4,0,.2,1), filter .2s ease; white-space: nowrap; }
.waitlist-form button:hover { filter: brightness(1.12); }
.waitlist-form button:disabled { opacity: .7; cursor: default; transform: none; }
.trap { position: absolute; left: -9999px; }
.turnstile-slot:empty { display: none; }
/* The check runs invisibly; the slot takes no room unless Cloudflare asks the visitor for a click. */
.turnstile-slot:not(.needs-check) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.turnstile-slot, .form-status, .post-signup, .chips { grid-column: 1 / -1; }
.form-status { margin: 0; padding: 4px 0 2px; font-size: 14px; color: var(--h-ink2); }
.form-status:empty { display: none; }
.form-status.error { color: var(--h-error); }
.post-signup { display: grid; gap: 8px; padding: 6px 0 2px; font-size: 14px; color: var(--h-ink2); }
.post-signup > div { display: flex; gap: 6px; }
.post-signup input { background: var(--h-hover); color: var(--h-ink); flex: 1; padding: 8px 10px; border-radius: 10px; }
.share-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.share-row button { padding: 8px 12px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 4px; font: 500 12.5px/1 var(--sans); color: var(--h-ink2); }
.chips span { display: inline-flex; align-items: center; gap: 6px; }
.chips .chips-l, .chips .opt { color: var(--h-ink3); font-weight: 400; }
.chips svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 720px) {
  .waitlist-form { grid-template-columns: 1fr; padding: 8px; }
  .waitlist-form input[type=email] { padding: 10px 10px; }
  .waitlist-form button { justify-content: center; }
  .chips { padding: 0 6px; gap: 8px 14px; justify-content: center; flex-wrap: nowrap; font-size: 12px; }
  .chips .opt, .chips .chips-l { display: none; }
}

/* ---------- painted panel under a UI card (Fieldhand / Dia rule 16): the proof card and the accounts band get one ---------- */
.panel { position: relative; isolation: isolate; padding: clamp(20px, 3.4vw, 44px); border-radius: 34px; overflow: hidden; display: grid; gap: 16px; align-content: center;
  background: var(--warm-mid); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.02); transition: background var(--fade) ease; }
.panel > * { min-width: 0; position: relative; z-index: 1; }
.panel > .paint { position: absolute; z-index: 0; }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .03; pointer-events: none; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-sun="dusk"] .panel { box-shadow: inset 0 0 0 1px #3A3028, inset 0 1px 0 rgba(255,228,195,.06); }
.panel-cap { margin: 14px 0 0; padding: 0 6px; }

/* ---------- app surfaces reused across sections ---------- */
.real { font-family: var(--sans); }
.sheet { border-radius: 20px; background: var(--h-card); box-shadow: var(--card-edge), var(--shadow-card); padding: 24px 28px 22px; }
.sheet-h { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.014em; color: var(--h-ink); }
.sheet-p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--h-ink2); }
.sheet-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.sheet-acts .btn { height: 32px; font-size: 13px; }
.sheet .btn kbd { font: 500 11px/1 var(--sans); background: none; padding: 0; color: inherit; opacity: .6; }

/* ---------- 2 · proof: the card, the verdict, and the message Hesper writes (the sheet stepped right so it reads as a stack); then the named table ---------- */
.proof { padding-top: 72px; }
.voice { margin: 0 auto 72px; padding: 0; max-width: 760px; text-align: center; }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0; font: 400 clamp(21px, 2vw, 25px)/1.35 var(--display); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.voice figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-3); }
.voice figcaption a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); }
.proof-panel { gap: 24px; padding-bottom: clamp(16px, 2.4vw, 28px); }
.proof-panel .fix { margin: 0 -10px 0 56px; }
.land-anyway { font-weight: 500; color: var(--ink); }
.pf { padding: 14px 14px 12px; border-radius: 20px; background: var(--h-card); box-shadow: var(--card-edge), 0 24px 60px -30px rgba(30,20,10,.45); }
.pf-gl { margin: 0 0 4px; padding: 0 10px; font-size: 12.5px; color: var(--h-ink2); }
.pf-row { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 8px; font-size: 14.5px; color: var(--h-ink); }
.pf-row.sel { background: var(--h-press); }
.pf-row .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-row .w { font-size: 12.5px; color: var(--h-ink3); white-space: nowrap; }
.pf-row .w b { font-weight: 400; } .ok { color: var(--h-ready); } .no { color: var(--h-error); }
.pf-card { margin: 8px 0 4px 32px; padding: 14px 16px; border-radius: 12px; background: var(--h-bg); box-shadow: 0 0 0 .5px var(--h-hair); }
.pf-h { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: var(--h-ink); }
.pf-h .x { color: var(--h-error); font-size: 12px; }
.pf-n { font-size: 12px; font-weight: 400; color: var(--h-ink3); margin-left: auto; white-space: nowrap; }
.pf-why { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--h-ink2); }
.pf-acts { display: flex; flex-wrap: wrap; gap: 6px; }
[data-pf-card] { transition: opacity .5s ease, transform .6s cubic-bezier(.16,.84,.24,1), max-height .6s ease; max-height: 300px; overflow: hidden; }
.pf.pending [data-pf-card] { opacity: 0; transform: translateY(-8px); max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
.pf.pending [data-pf-word] { color: var(--h-ink3); }
.pf.pending [data-pf-glyph] svg { display: none; }
.pf.pending [data-pf-glyph]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--h-ink2); }
.fix { box-shadow: var(--card-edge), 0 24px 60px -30px rgba(30,20,10,.45); }
.fix-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--h-ink); }
.fix-msg code { font-size: 12px; }
.fix-meta { margin: 10px 0 0; font-size: 11.5px; color: var(--h-ink3); }
@media (max-width: 720px) { .proof-panel .fix { margin: 0; } .pf-card { margin-left: 0; } .pf-n { margin-left: 0; } .pf-h { flex-wrap: wrap; } .pf-row { gap: 8px; padding: 6px 8px; height: auto; flex-wrap: wrap; } .pf-row .t { white-space: normal; flex: 1 1 auto; } .pf-row .w { flex-basis: 100%; padding-left: 40px; margin-top: -4px; font-size: 11.5px; } .pf { padding: 10px; } }

/* ---------- 3 · needs you: a warm band (clouds only, no hills), the heading on clean page bg, the window floating on it ---------- */
.needs { padding-left: var(--gutter); padding-right: var(--gutter); isolation: isolate; }
.needs::before, .needs::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; transition: background var(--fade) ease; }
.needs::before { top: 0; height: 360px; background: linear-gradient(180deg, var(--bg) 0 22%, transparent); }
.needs::after { bottom: 0; height: 300px; background: linear-gradient(0deg, var(--bg) 0 14%, transparent); }
.needs .wrap, .needs-scene, .needs p.small, .needs .fig { position: relative; z-index: 2; }
.needs .copy.center { max-width: 680px; }
.needs .copy.center p { color: var(--ink); }
/* the scene: the window (sidebar + the asking pane) and the question card floating over its lower right, overhanging by 48px */
.needs-scene { max-width: var(--max); margin: clamp(40px, 5vw, 56px) auto 48px; }
.needs-stage { position: relative; display: grid; grid-template-columns: 256px minmax(0, 1fr); border-radius: 14px; overflow: hidden;
  background: var(--h-bg); box-shadow: var(--h-shadow); transition: background-color var(--fade) ease; }
.needs-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(620px 420px at 16% 0%, var(--h-pool-warm) 0%, transparent 70%), radial-gradient(680px 460px at 84% 90%, var(--h-pool-cool) 0%, transparent 70%); transition: background var(--fade) ease; }
.needs-cap { margin-top: 64px; }
.needs p.small.center { margin-top: 12px; }
.sbx { position: relative; z-index: 1; padding: 16px 12px; background: var(--h-band); box-shadow: inset -.5px 0 0 var(--h-hair); color: var(--h-ink); font-size: 13px; }
.sb-act { display: flex; align-items: center; gap: 8px; height: 28px; margin: 0; padding: 0 10px; border-radius: 8px; color: var(--h-ink2); }
.sb-act svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.sb-act kbd { margin-left: auto; }
.sb-proj { margin: 18px 0 2px; padding: 0 10px; height: 24px; display: flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .2px; color: var(--h-ink2); }
.sbx .row.flash { animation: flash 1.2s ease; }
@keyframes flash { 0% { background: color-mix(in srgb, var(--h-signal) 30%, var(--h-pop)); } 100% { background: var(--h-press); } }
.needs-work { position: relative; z-index: 1; min-width: 0; padding: 20px 24px 24px; display: grid; }
.needs-pane { height: 100%; min-height: 0; max-height: 440px; opacity: 1; }
.needs-pane .term .tx { overflow: hidden; }
.needs-pane .ask div .btn { height: 28px; font-size: 12.5px; }
.needs-pane .tag svg { width: 9px; height: 9px; fill: var(--h-ink3); }
.qa { position: absolute; right: 36px; bottom: -48px; width: min(440px, calc(100% - 72px)); margin: 0; z-index: 3; }
.qa-card { padding: 22px 24px 20px; border-radius: 20px; background: var(--h-card); box-shadow: var(--card-edge), 0 30px 70px -30px rgba(30,20,10,.45); color: var(--h-ink); }
.qa-meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--h-ink2); }
.qa-meta span:last-child { margin-left: auto; color: var(--h-ink3); }
.qa-h { margin: 12px 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.014em; }
.qa-q { margin: 0 0 14px; font-size: 15px; color: var(--h-ink2); }
.qa-opts { display: grid; gap: 6px; }
.qa-opts button { display: flex; gap: 12px; align-items: flex-start; padding: 9px 12px; border: 0; border-radius: 10px; background: var(--h-hover); font: inherit; text-align: left; color: var(--h-ink2); cursor: pointer; transition: background .2s cubic-bezier(.4,0,.2,1), opacity .3s ease; }
.qa-opts button:hover { background: var(--h-press); }
.qa-opts button kbd { margin-top: 2px; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; padding: 0; background: none; box-shadow: inset 0 0 0 .5px var(--h-hair2); font: 500 11px/1 var(--sans); color: var(--h-ink3); }
.qa-opts span { display: grid; font-size: 12.5px; }
.qa-opts b { font-weight: 500; font-size: 14px; color: var(--h-ink); }
.qa-opts button.picked { background: color-mix(in srgb, var(--h-ready) 16%, transparent); }
.qa.answered .qa-opts button:not(.picked) { opacity: .35; }
.qa-acts { display: flex; gap: 8px; margin-top: 14px; }
.qa-acts .btn { color: var(--h-ink2); }
@media (max-width: 760px) {
  .needs::before { height: 640px; background: linear-gradient(180deg, var(--bg) 0 58%, transparent); }
  .needs-scene { margin-bottom: 0; display: grid; gap: 16px; }
  .needs-stage { grid-template-columns: 1fr; min-height: 0; }
  .sbx { box-shadow: inset 0 -.5px 0 var(--h-hair); }
  .needs-work { display: none; }
  .qa { position: static; width: 100%; }
  .needs-cap { margin-top: 36px; }
}

/* ---------- 5 · accounts: one painted band that hugs its content; the forecast, the continue card and the picker overhang its right edge ---------- */
.band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center;
  padding: 48px 48px; border-radius: 34px; background: var(--warm-mid); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4); transition: background var(--fade) ease; }
.band > .paint { position: absolute; border-radius: 34px; z-index: 0; }
.band > * { min-width: 0; }
.band-copy { position: relative; z-index: 1; }
.band-copy p { color: var(--ink); }
.band-copy p.small { color: var(--ink-2) !important; }
:root[data-sun="dusk"] .band { box-shadow: inset 0 0 0 1px #3A3028, inset 0 1px 0 rgba(255,228,195,.06); }
.acc-stage { position: relative; z-index: 1; width: min(440px, 100%); margin: 0 0 0 auto; display: grid; gap: 12px; }
.accounts .panel-cap { max-width: var(--max); }
.acc-pop .ap-row { padding: 6px 10px; }
.forecast { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px 10px 12px; border-radius: 12px; background: var(--h-wash); color: var(--h-ink); font-size: 13px; box-shadow: 0 0 0 .5px color-mix(in srgb, var(--h-signal) 25%, transparent); }
.acc-pop { width: 100%; padding: 6px; border-radius: 14px; background: var(--h-pop); box-shadow: var(--card-edge), 0 24px 50px -20px rgba(0,0,0,.35); color: var(--h-ink); font-size: 13px; }
.ap-u em::after { transition: width 1.2s cubic-bezier(.16,.84,.24,1); }
.acc-stage:not(.filled) .ap-u em::after { width: 0 !important; }
.cont { width: 100%; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--h-card); box-shadow: var(--card-edge), 0 24px 50px -24px rgba(0,0,0,.35); color: var(--h-ink); position: relative; z-index: 1; }
.cont-h { margin: 0; font-size: 15px; font-weight: 600; }
.cont-p { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--h-ink2); }
.cont-f { margin: 8px 0 0; font-size: 12px; color: var(--h-ink3); }
@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; border-radius: 24px; }
  .acc-stage { margin: 0 auto; width: 100%; }
  .ap-t { flex-wrap: wrap; }
  .ap-r { flex-basis: 100%; margin-left: 18px; }
}

/* ---------- 6 · also inside: eight rows in two columns, the two crops side by side so the rows stay level ---------- */
.rows { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 64px); }
.rows li { display: grid; grid-template-columns: minmax(38px, auto) minmax(0, 1fr); align-items: start; gap: 14px; padding: 20px 0; border-top: 1px solid var(--rule); }
.rows li:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
.rows .cap { min-width: 30px; height: 30px; padding: 0 7px; margin-top: -3px; display: grid; place-items: center; border-radius: 8px; background: var(--card); color: var(--ink); font: 500 12px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: inset 0 0 0 .5px var(--ink-3), 0 1.5px 0 var(--ink-3); transition: background-color var(--fade) ease; }
.rows p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.rows p b { font-weight: 500; color: var(--ink); }
.rows li > div { min-width: 0; }
.crop { margin: 12px 0 2px; padding: 10px 12px; border-radius: 10px; background: var(--t-bg); box-shadow: inset 0 0 0 .5px var(--h-hair); font: 12px/1.6 var(--mono); color: var(--t-ink); display: flex; flex-wrap: wrap; gap: 2px 16px; transition: background-color var(--fade) ease; }
.crop .crop-k { color: var(--t-dim); flex-basis: 100%; }
.crop i { font-style: normal; margin-right: 4px; }
.crop.talk { display: grid; gap: 4px; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; }
.crop.talk b { font-weight: 600; color: var(--h-warm); }
.crop.talk .reply { padding-left: 14px; color: var(--t-dim); }
.crop.talk .reply b { color: var(--t-dim); }
.crop.talk code { font-size: 11.5px; }
.hear { font: 500 inherit; border: 0; background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.hear[aria-pressed="true"] { color: var(--signal); }
@media (max-width: 760px) { .rows { grid-template-columns: 1fr; margin-top: 32px; } .rows li:nth-last-child(-n+2) { border-bottom: 0; } .rows li:last-child { border-bottom: 1px solid var(--rule); } }

/* ---------- 7 · trust: the painting returns full-bleed (the hills, 480px) under the one headline; the facts, then one card for the maker and what shipped ---------- */
.trust-band { position: relative; isolation: isolate; min-height: 480px; margin: 0 calc(-1 * var(--gutter)); display: grid; place-items: center; padding: 96px var(--gutter); overflow: hidden; }
.trust-band::before, .trust-band::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 140px; pointer-events: none; transition: background var(--fade) ease; }
.trust-band::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.trust-band::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }
.trust-band .copy { position: relative; z-index: 2; max-width: 640px; }
.trust-band .copy h2 { margin-bottom: 16px; }
.trust .statement { font-size: 17px; color: var(--ink); max-width: 34em; }
.facts { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.facts li { padding: 20px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.facts li b { font-weight: 500; color: var(--ink); }
/* one card, two columns, one hairline between: the person on the left, the ledger on the right, tops aligned */
.maker { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: 56px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px var(--rule), 0 24px 60px -30px rgba(30,20,10,.3); transition: background-color var(--fade) ease; }
.founder { margin: 0; padding: 30px 36px 28px 32px; }
.founder blockquote { margin: 0; }
.founder blockquote p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.founder figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--ink-2); }
.founder .face { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 .5px var(--rule); }
.founder .who { min-width: 0; font-size: 13.5px; }
.founder .who b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); }
.founder .links { margin-left: auto; display: flex; gap: 14px; font-size: 13px; white-space: nowrap; }
.founder .links a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); }
.founder .links a:hover { color: var(--ink); }
.shipped-block { padding: 30px 32px 28px; border-left: 1px solid var(--rule); }
.shipped-block .fig { margin-bottom: 6px; }
.shipped { list-style: none; margin: 0; padding: 0; }
.shipped li { display: grid; grid-template-columns: 44px 56px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.shipped .ver { font: 400 20px/1 var(--display); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.shipped time { font: 500 12px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.shipped .what { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* ---------- 8 · faq (the one 720 reading column); it ends 96px before the dusk ramp ---------- */
.faq { padding-bottom: 96px; }
.faq .copy h2 { margin-bottom: 12px; }
.faq-list { margin-top: 36px; border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; min-height: 56px; font: 500 17px/1.4 var(--body); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--ink-3); font: 300 24px/1 var(--display); transition: transform .25s cubic-bezier(.4,0,.2,1); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: none; }

/* ---------- 9 · final CTA and footer: the same painting at evening. Candle-warm, never graphite. ----------
   The ridgelines stay readable, a low amber sun glows behind the card, and the ticket's notches are cut with a
   mask so the painting itself shows through them. The page bg eases into the dusk painting over ~320px. */
.final-scene { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); background: #2A1F17; }
/* the painting lifted to candle amber: the sun low-left stays visible, the horizon glows, the hills are lit rather than muddied */
.final-scene > .paint { background-position: 40% 68%; background-size: auto 150%; filter: brightness(.92) saturate(1.5) contrast(1.08); }
.final-scene > .paint::after { background: linear-gradient(180deg, #8C6250 0%, #B8805A 38%, #E2A868 66%, #A86E3C 100%); opacity: .85; }
.final-scene > .paint::before { background: radial-gradient(46% 44% at 50% 78%, rgba(255,196,120,.95), rgba(246,170,96,.45) 42%, transparent 72%), radial-gradient(34% 34% at 14% 72%, rgba(255,186,110,.8), transparent 70%), linear-gradient(180deg, transparent 40%, rgba(248,176,100,.24) 68%, transparent 94%); mix-blend-mode: screen; }
/* the ramp from the FAQ paper into the painting: long and warm (paper → peach → apricot), never a grey fade */
.final-scene::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 420px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 80%, #FBD9BF) 26%, color-mix(in srgb, var(--page-bg) 45%, #F2B98C) 54%, color-mix(in srgb, var(--page-bg) 14%, #D9925C) 78%, transparent); transition: background var(--fade) ease; }
:root[data-sun="dusk"] .final-scene::before { height: 360px; background: linear-gradient(180deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 70%, #5A3B26) 40%, color-mix(in srgb, var(--page-bg) 25%, #8C5A34) 72%, transparent); }
.final { position: relative; z-index: 2; padding: clamp(150px, 16vw, 230px) var(--gutter) clamp(56px, 7vw, 88px); text-align: center; }
.final-card { position: relative; max-width: 820px; margin: 0 auto; }
.final-card::before { content: ""; position: absolute; inset: -30% -18%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(50% 50% at 50% 48%, rgba(255,196,120,.6), rgba(248,172,98,.2) 45%, transparent 70%); }
/* the ticket: a glassier, lighter fill than the painting, an amber hairline, and a candle glow behind the headline; no backdrop blur (Chrome paints a blurred copy through the notch mask) */
.ticket { position: relative; z-index: 1; padding: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 64px); border-radius: 32px;
  background: radial-gradient(60% 50% at 50% 12%, rgba(255,196,120,.16), transparent 70%), rgba(60,48,40,.78);
  box-shadow: inset 0 0 0 1px rgba(255,190,120,.42), inset 0 1px 0 rgba(255,228,195,.28), 0 40px 90px -40px rgba(20,10,4,.7);
  -webkit-mask: radial-gradient(circle 20px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 20px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 20px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 20px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.final h2 { font-size: clamp(36px, 3.8vw, 52px); max-width: 14ch; margin: 0 auto; }
.final .lede { margin: 16px auto 32px; max-width: 34em; }
.final .waitlist-form { background: var(--h-pop); box-shadow: 0 0 0 1px #4A3B2E, inset 0 1px 0 rgba(255,228,195,.08), 0 18px 40px -20px rgba(0,0,0,.5); }
.final .hero-note { color: var(--ink-2); max-width: 34em; margin-left: auto; margin-right: auto; }
.footer { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 24px; padding: 20px var(--gutter) 40px; font-size: 13px; color: var(--ink-2); }
.footer > span:first-child { color: var(--ink); font-weight: 500; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .final-scene > .paint { background-image: url(/media/hero-painting-m.webp); background-size: cover; }
  .final-scene::before { height: 280px; background: linear-gradient(180deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 70%, #FBD9BF) 30%, color-mix(in srgb, var(--page-bg) 30%, #E0A070) 65%, transparent); }
  :root[data-sun="dusk"] .final-scene::before { height: 280px; background: linear-gradient(180deg, var(--page-bg) 0%, color-mix(in srgb, var(--page-bg) 60%, #5A3B26) 45%, transparent); }
  .final { padding-top: 150px; }
}

/* ---------- phones ---------- */
@media (max-width: 760px) {
  :root { --section-y: 72px; }
  /* phones carry the verdict, not every receipt: the fix sheet, the two small crops and the second project group are desktop-only */
  .proof-panel .fix, .rows .crop, .sbx .sb-proj + .row ~ .sb-proj, .sbx .sb-proj + .row ~ .sb-proj ~ .row, .proof .desk { display: none; }
  .wrap.two { grid-template-columns: 1fr; gap: 28px; }
  .wrap.two > .panel-cap { grid-column: 1; }
  .wrap.two.rev { grid-template-columns: 1fr; }
  .wrap.two.rev > .copy { order: 0; }
  .land-panel { padding: 16px; }
  .proof .cap-d { display: none; }
  .proof { padding-top: 56px; }
  .voice { margin-bottom: 56px; }
  .needs { padding-top: 48px; }
  .copy p { font-size: 16.5px; line-height: 1.5; }
  .lede { font-size: 17px; }
  .panel { padding: 16px; border-radius: 24px; }
  .trust-band { min-height: 0; padding: 72px var(--gutter); }
  .facts { grid-template-columns: 1fr; margin-top: 40px; }
  .facts li { padding: 14px 0; }
  .maker { grid-template-columns: 1fr; margin-top: 40px; }
  .founder { padding: 22px 20px 20px; }
  .founder .links { margin-left: 0; width: 100%; }
  .founder figcaption { flex-wrap: wrap; }
  .shipped-block { padding: 20px; border-left: 0; border-top: 1px solid var(--rule); }
  .shipped li { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; }
  .shipped time { grid-column: 2; } .shipped .what { grid-column: 2; }
  .faq { padding-bottom: 64px; }
}

/* ---------- motion ---------- */
.motion-ok [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(0,0,.2,1), transform .7s cubic-bezier(0,0,.2,1); transition-delay: var(--d, 0ms); }
.motion-ok [data-reveal].in, .motion-ok.revealed [data-reveal] { opacity: 1; transform: none; }
.motion-ok .hero-copy > * { animation: rise .9s cubic-bezier(0,0,.2,1) both; }
.motion-ok .hero-copy > :nth-child(2) { animation-delay: 80ms; } .motion-ok .hero-copy > :nth-child(3) { animation-delay: 160ms; } .motion-ok .hero-copy > :nth-child(4) { animation-delay: 240ms; } .motion-ok .hero-copy > :nth-child(5) { animation-delay: 300ms; }
.motion-ok .hero-stage { animation: rise 1.1s cubic-bezier(0,0,.2,1) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- the other pages (changelog, privacy) share this sheet ---------- */
.masthead { max-width: 760px; margin: 0 auto; padding: 28px var(--gutter); display: flex; justify-content: space-between; align-items: center; }
.page { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 60px; }
.privacy-copy h1 { font-size: clamp(36px, 5vw, 56px); margin: 20px 0; }
.privacy-copy p, .privacy-copy li { color: var(--ink-2); }
.footer.page { padding-top: 30px; background: var(--bg); color: var(--ink-3); }
.wordmark { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 500; }
.wordmark img { border-radius: 7px; }
.nav-cta { text-decoration: none; font-size: 14px; font-weight: 500; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); }

.proof .cap-m { display: none; }
@media (max-width: 760px) { .proof .cap-m { display: inline; } }

/* dusk: the painted panels and the sky band stay candle-lit, not mud; the final glow sits behind the ticket */
:root[data-sun="dusk"] .panel > .paint, :root[data-sun="dusk"] .band > .paint { filter: brightness(.86) saturate(1.4) contrast(1.06); }
:root[data-sun="dusk"] .paint.skyband { filter: brightness(.8) saturate(1.35) contrast(1.06); }
:root[data-sun="dusk"] .paint.skyband::after { background: linear-gradient(180deg, #5E4036, #9C6C4B 55%, #C48A62); }
.final-scene > .paint::before { background: radial-gradient(50% 46% at 50% 56%, rgba(255,200,124,.95), rgba(246,170,96,.45) 42%, transparent 72%), radial-gradient(34% 34% at 14% 72%, rgba(255,186,110,.8), transparent 70%), linear-gradient(180deg, transparent 30%, rgba(248,176,100,.22) 60%, transparent 94%); mix-blend-mode: screen; }
.final-card::before { background: radial-gradient(50% 50% at 50% 42%, rgba(255,200,124,.7), rgba(248,172,98,.25) 45%, transparent 70%); }