/* ───────────────────────── Tokens ─────────────────────────
   Ivory ground, ink type, one cherry. Dark theme swaps roles; cherry
   is only ever a fill on dark (with a fine ivory edge), never text. */
:root{
  --ground:#F4EFE6; --ground-2:#EEE7DC; --paper:#FBF8F3; --paper-2:#F2EDE5;
  --ink:#1B1113; --ink-2:#5E5250; --ink-3:#8E827D;
  --hair:rgba(27,17,19,.11); --hair-2:rgba(27,17,19,.06);
  --cherry:#621427; --ivory:#F5F0E8;
  --attn:#621427; --cherry-edge:0 0 0 0 transparent;
  --accent-fg:#621427; --accent-bg:transparent;
  --tint-in:#621427;
  --wash-1:rgba(98,20,39,.10); --wash-2:rgba(98,20,39,.07); --wash-3:rgba(98,20,39,.05);
  --night:#0C090A; --night-ink:#F5F0E8; --night-ink-2:rgba(245,240,232,.62); --night-hair:rgba(245,240,232,.14);
  --win:#FFFDFA; --win-bar:#FAF7F2; --win-side:#F3EFE9; --win-hair:rgba(27,17,19,.09);
  --win-sel:rgba(27,17,19,.055); --win-text:#1B1113; --win-text-2:#6C605C; --win-text-3:#A0958F; --win-field:#F5F1EB;
  --win-shadow:0 2px 6px rgba(40,14,20,.05), 0 28px 60px -14px rgba(60,20,30,.20), 0 70px 120px -50px rgba(60,20,30,.22);
  --term:#191415; --term-ink:#EFE8DF; --term-ink-2:#9B908B;
  --tl:#DDD6CE; --menubar:rgba(251,248,243,.82);
  --chip-shadow:0 0 0 1px rgba(27,17,19,.08), 0 1px 2px rgba(27,17,19,.05), 0 10px 28px -10px rgba(60,20,30,.22);
  --light-only:inline-block; --dark-only:none; --now-ring:transparent; --alert-edge:transparent;
  --grain-op:.06;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --serif:ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --gutter:clamp(16px, 4.2vw, 64px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131011; --ground-2:#0F0C0D; --paper:#1F1A1B; --paper-2:#292324;
    --ink:#F3EDE4; --ink-2:#B3A7A1; --ink-3:#817674;
    --hair:rgba(243,237,228,.13); --hair-2:rgba(243,237,228,.07);
    --attn:#F3EDE4; --cherry-edge:0 0 0 1px rgba(245,240,232,.55);
    --accent-fg:#F5F0E8; --accent-bg:#621427;
    --tint-in:#F3EDE4;
    --wash-1:rgba(98,20,39,.25); --wash-2:rgba(98,20,39,.17); --wash-3:rgba(98,20,39,.12);
    --night:#000000; --night-hair:rgba(245,240,232,.12);
    --win:#1C1819; --win-bar:#211C1D; --win-side:#252021; --win-hair:rgba(243,237,228,.09);
    --win-sel:rgba(243,237,228,.07); --win-text:#F1EBE3; --win-text-2:#A89D98; --win-text-3:#746A6B; --win-field:#262122;
    --win-shadow:0 2px 6px rgba(0,0,0,.3), 0 28px 60px -14px rgba(0,0,0,.6), 0 70px 120px -50px rgba(0,0,0,.7);
    --term:#0E0B0C; --tl:#3E3839; --menubar:rgba(31,26,27,.82);
    --chip-shadow:0 0 0 1px rgba(243,237,228,.10), 0 10px 28px -10px rgba(0,0,0,.6);
    --light-only:none; --dark-only:inline-block; --now-ring:rgba(245,240,232,.8); --alert-edge:rgba(245,240,232,.7);
    --grain-op:.09;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#131011; --ground-2:#0F0C0D; --paper:#1F1A1B; --paper-2:#292324;
  --ink:#F3EDE4; --ink-2:#B3A7A1; --ink-3:#817674;
  --hair:rgba(243,237,228,.13); --hair-2:rgba(243,237,228,.07);
  --attn:#F3EDE4; --cherry-edge:0 0 0 1px rgba(245,240,232,.55);
  --accent-fg:#F5F0E8; --accent-bg:#621427;
  --tint-in:#F3EDE4;
  --wash-1:rgba(98,20,39,.25); --wash-2:rgba(98,20,39,.17); --wash-3:rgba(98,20,39,.12);
  --night:#000000; --night-hair:rgba(245,240,232,.12);
  --win:#1C1819; --win-bar:#211C1D; --win-side:#252021; --win-hair:rgba(243,237,228,.09);
  --win-sel:rgba(243,237,228,.07); --win-text:#F1EBE3; --win-text-2:#A89D98; --win-text-3:#746A6B; --win-field:#262122;
  --win-shadow:0 2px 6px rgba(0,0,0,.3), 0 28px 60px -14px rgba(0,0,0,.6), 0 70px 120px -50px rgba(0,0,0,.7);
  --term:#0E0B0C; --tl:#3E3839; --menubar:rgba(31,26,27,.82);
  --chip-shadow:0 0 0 1px rgba(243,237,228,.10), 0 10px 28px -10px rgba(0,0,0,.6);
  --light-only:none; --dark-only:inline-block; --now-ring:rgba(245,240,232,.8); --alert-edge:rgba(245,240,232,.7);
  --grain-op:.09;
  color-scheme:dark;
}

/* ───────────────────────── Base ───────────────────────── */
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;  font-feature-settings:"ss01" 0}
main, header.top, footer.foot{position:relative; z-index:1}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
.only-light{display:var(--light-only)} .only-dark{display:var(--dark-only)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.serif{font-family:var(--serif); font-weight:400; letter-spacing:-.02em; font-variant-numeric:lining-nums}
.tnum{font-variant-numeric:tabular-nums}

/* Painterly wash: one soft cherry light, fixed behind the ivory pages */
.wash{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.wash .wt{position:absolute; inset:0; will-change:transform}
.wash i{position:absolute; border-radius:50%; will-change:transform}
.wash .wa{width:78vmax; height:66vmax; left:38vw; top:-30vmax; background:radial-gradient(closest-side, var(--wash-1), rgba(98,20,39,0) 100%); animation:drift-a 38s ease-in-out infinite alternate}
.wash .wb{width:56vmax; height:52vmax; left:-22vmax; top:34vh; background:radial-gradient(closest-side, var(--wash-2), rgba(98,20,39,0) 100%); animation:drift-b 46s ease-in-out infinite alternate}
.wash .wc{width:40vmax; height:34vmax; left:58vw; top:62vh; background:radial-gradient(closest-side, var(--wash-3), rgba(98,20,39,0) 100%); animation:drift-c 52s ease-in-out infinite alternate}
.wash .grain{position:absolute; inset:-50%; opacity:var(--grain-op); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .1  0 0 0 0 .05  0 0 0 0 .06  0 0 0 .9 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>")}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-9vw,7vh,0) scale(1.08)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(8vw,-6vh,0) scale(1.1)}}
@keyframes drift-c{from{transform:translate3d(0,0,0)} to{transform:translate3d(-6vw,-8vh,0)}}

/* ───────────────────────── Top bar ───────────────────────── */
header.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px var(--gutter) 0; position:absolute; top:0; left:0; right:0; z-index:5}
.lockup{display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.lockup img{width:30px; height:30px; border-radius:7px}
.lockup b{font-weight:600; font-size:17px; letter-spacing:-.02em}
.lockup span{color:var(--ink-3); font-size:14px; letter-spacing:-.005em}
.btn-quiet{appearance:none; border:0; background:transparent; font-size:15px; font-weight:500; letter-spacing:-.01em; padding:9px 16px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hair); cursor:pointer; color:var(--ink); transition:background .25s}
.btn-quiet:hover{background:var(--hair-2)}

/* ───────────────────────── Sentences ───────────────────────── */
.sentence{font-family:var(--sans); font-weight:600; word-spacing:.04em; letter-spacing:-.04em; line-height:1.06; color:var(--ink); text-align:center; text-wrap:balance; margin:0}
.hero-sentence{font-size:clamp(40px, 6.6vw, 172px); letter-spacing:-.045em}
.scene-sentence{font-size:clamp(35px, 5.3vw, 138px)}
.w{display:inline-block; overflow:hidden; padding:.1em .06em .17em; margin:-.1em -.06em -.17em; vertical-align:baseline}
.wi{display:inline-block; will-change:transform}
.w-accent .wi{color:var(--accent-fg); background:var(--accent-bg); border-radius:.16em; padding-inline:.04em}
.caret{display:inline-block; width:0; position:relative; vertical-align:baseline}
.caret::after{content:""; position:absolute; left:.05em; bottom:-.08em; width:.05em; height:.86em; background:var(--cherry); box-shadow:var(--cherry-edge); animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ───────────────────────── Chips (live UI inside a sentence) ───────────────────────── */
.chip{display:inline-flex; align-items:center; vertical-align:middle; position:relative; background:var(--paper); box-shadow:var(--chip-shadow);
  color:var(--ink); font-weight:500; letter-spacing:-.01em; word-spacing:normal; line-height:1.2; text-align:left; white-space:nowrap}
.chip .dot{display:inline-block; width:.5em; height:.5em; border-radius:50%; background:var(--cherry); box-shadow:var(--cherry-edge); flex:none}

/* hero chip: a real mini Waiting row */
.chip-wait{gap:max(12px,.14em); padding:max(11px,.15em) max(12px,.16em) max(11px,.15em) max(12px,.15em); border-radius:max(14px,.22em); margin-inline:.06em; top:-.09em}
.cw-ic{width:max(32px,.46em); height:max(32px,.46em); flex:none; color:var(--attn); display:grid; place-items:center; background:var(--hair-2); border-radius:30%}
.cw-ic svg{width:62%; height:62%}
.cw-main{display:flex; flex-direction:column; gap:max(2px,.03em); min-width:0}
.cw-l1{display:flex; align-items:baseline; gap:max(8px,.1em); font-size:max(15px,.22em); font-weight:600; letter-spacing:-.015em}
.cw-state{display:inline-flex; align-items:center; gap:.4em; color:var(--attn)}
.cw-state .dot{width:.46em; height:.46em; position:relative; top:-.02em}
.cw-age{color:var(--ink-3); font-weight:500}
.cw-who{color:var(--ink-3); font-weight:500; font-size:.86em}
.cw-l2{font-size:max(13px,.17em); color:var(--ink-2); font-weight:400; letter-spacing:-.005em}
.cw-btn{font-size:max(12.5px,.15em); font-weight:500; color:var(--ink); background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--hair); padding:.42em .9em; border-radius:.6em; flex:none; margin-left:max(4px,.06em); letter-spacing:-.005em}
.cw-ic .pulse{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}

/* scene chips */
.chip-pill{height:.84em; border-radius:999px; gap:.14em; padding:0 .3em 0 .11em; margin-inline:.05em; top:-.085em}
.chip-pill .label{font-size:.5em; font-weight:600; letter-spacing:-.03em}
.av{display:inline-grid; place-items:center; border-radius:50%; background:var(--cherry); color:var(--ivory); box-shadow:var(--cherry-edge); flex:none}
.av svg{width:64%; height:64%; transform:translate(4%,0)}
.chip-pill .av{width:.62em; height:.62em}
.chip-week{padding:0 .16em 0 .16em; gap:.1em}
.chip-week svg.spark{width:1.5em; height:.5em; overflow:visible}
.chip-week .ok{width:.4em; height:.4em; color:var(--ink)}
.chip-talk{padding:0 .07em; gap:.03em; height:.8em}
.seg-i{display:grid; place-items:center; width:.84em; height:.62em; border-radius:.2em; color:var(--ink-2)}
.seg-i svg{width:.42em; height:.34em}
.seg-i.on{background:var(--ink); color:var(--ground)}
.chip-health{padding:0 .28em 0 .2em; gap:.14em}
.chip-health .mb{position:relative; display:inline-grid; width:.42em; height:.42em; color:var(--ink); flex:none}
.chip-health .mb svg{width:100%; height:100%}
.chip-health .mb .dot{position:absolute; width:.19em; height:.19em; right:-.09em; top:-.07em; box-shadow:0 0 0 .035em var(--paper)}
.chip-health .label{font-size:.4em; font-weight:600; letter-spacing:-.02em}
.chip-health .label em{font-style:normal; color:var(--attn)}

/* ───────────────────────── Hero ───────────────────────── */
.hero{min-height:min(100svh, 1100px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px var(--gutter) 96px; gap:clamp(28px,4vh,44px); text-align:center}
.hero .sentence{max-width:15.5em}
.lede{max-width:34em; margin:0; text-wrap:balance; font-size:clamp(17px,1.4vw,28px); line-height:1.5; color:var(--ink-2); letter-spacing:-.012em}
.meta{margin:0; font-size:clamp(12px,.85vw,18px); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; justify-content:center}
.beta-status{padding:.45em 1em .42em; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hair); background:var(--hair-2); color:var(--ink-2); font-size:.92em; letter-spacing:.07em}
.meta b{font-weight:500; color:var(--ink-2)}
.cue{margin-top:clamp(8px,3vh,32px); width:1px; height:56px; background:linear-gradient(var(--hair), transparent); position:relative; overflow:hidden}
.cue::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:var(--ink-2); animation:cue 2.6s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{to{top:110%}}

/* ───────────────────────── Scenes ───────────────────────── */
.scene{position:relative}
.scene-pin{position:relative; padding-block:18vh 6vh}
.s-wrap{padding-inline:var(--gutter); display:flex; justify-content:center}
.s-wrap .sentence{max-width:14.5em}
.stage{display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vh,32px); padding:clamp(40px,7vh,72px) var(--gutter) 0}
.stage-fit{width:100%; display:flex; justify-content:center; transform-origin:50% 50%}
.panel{position:relative; width:min(var(--pw,920px), 100%); pointer-events:none}
.panel-skin{position:absolute; inset:0; border-radius:16px; background:var(--paper); opacity:0}
.panel-content{position:relative}
.caption{max-width:38em; margin:0; text-align:center; color:var(--ink-2); font-size:clamp(16px,1.2vw,25px); line-height:1.55; letter-spacing:-.01em; text-wrap:pretty}
.caption b{color:var(--ink); font-weight:600}
.replay{appearance:none; border:0; background:none; padding:4px 2px; margin-left:6px; color:var(--ink-3); font-size:.78em; cursor:pointer; display:none; align-items:center; gap:5px; vertical-align:1px; letter-spacing:0}
.replay svg{width:.95em; height:.95em}
.replay:hover{color:var(--ink)}
.kbd{font-family:var(--sans); font-size:.86em; padding:.08em .38em; border-radius:.35em; background:var(--paper); box-shadow:inset 0 0 0 1px var(--hair), 0 1px 0 var(--hair); color:var(--ink); white-space:nowrap}

/* ───────────────────────── Mac window kit (rebuilt, sample data) ───────────────────────── */
.win{position:relative; background:var(--win); border-radius:14px; box-shadow:var(--win-shadow); color:var(--win-text); font-size:14px; line-height:1.35; letter-spacing:-.006em; text-align:left; overflow:hidden; isolation:isolate}
.win::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px var(--win-hair); pointer-events:none; z-index:9}
.win-bar{display:flex; align-items:center; gap:18px; padding:12px 16px 11px; background:var(--win-bar); border-bottom:1px solid var(--win-hair); min-height:52px}
.tl{display:inline-flex; gap:8px; flex:none} .tl i{width:12px; height:12px; border-radius:50%; background:#FF5F57; box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)} .tl i:nth-child(2){background:#FEBC2E} .tl i:nth-child(3){background:#28C840}
.win-title{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.win-title b{font-size:13.5px; font-weight:600}
.win-title small{font-size:11.5px; color:var(--win-text-2)}
.win-bar .search{display:inline-flex; align-items:center; gap:6px; width:190px; padding:5px 9px; border-radius:8px; background:var(--win-field); box-shadow:inset 0 0 0 1px var(--win-hair); color:var(--win-text-3); font-size:12.5px; flex:none}
.win-bar .search svg{width:12px; height:12px}
.win-bar .sample{margin-left:auto; font-size:11px; color:var(--win-text-3); letter-spacing:.02em; white-space:nowrap}
.tag{display:inline-block; font-size:10.5px; font-weight:500; padding:1px 6px; border-radius:5px; background:var(--win-sel); color:var(--win-text-2); letter-spacing:.01em; vertical-align:1px; white-space:nowrap}
.tag-uf{background:var(--cherry); color:var(--ivory); box-shadow:var(--cherry-edge); font-weight:600}
.btn-s{display:inline-block; font-size:12.5px; font-weight:500; padding:4px 11px; border-radius:7px; background:var(--win-field); box-shadow:inset 0 0 0 1px var(--win-hair); white-space:nowrap; color:var(--win-text)}
.ic{width:16px; height:16px; flex:none}
.stack{display:grid} .stack > *{grid-area:1/1}
.cursor{position:absolute; left:0; top:0; width:22px; height:22px; z-index:20; opacity:0; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); will-change:transform}
.cursor svg{width:100%; height:100%; display:block}
.keys{position:absolute; z-index:19; display:flex; align-items:center; gap:6px; padding:7px 10px 7px 8px; border-radius:12px; background:var(--menubar); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 0 0 1px var(--win-hair), 0 14px 30px -12px rgba(40,10,20,.35); opacity:0; font-size:12.5px; color:var(--win-text-2); white-space:nowrap}
.kc{display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 6px; border-radius:7px; background:var(--win); color:var(--win-text); font-size:13.5px; font-weight:500; box-shadow:inset 0 0 0 1px var(--win-hair), 0 2px 0 var(--win-hair)}
.keys .kl{margin-left:4px}

/* Delegate window */
.wl{padding:6px 10px 10px}
.wl-h{font-size:12px; font-weight:600; color:var(--win-text-2); padding:12px 10px 8px; letter-spacing:.005em}
.wrow{display:flex; align-items:flex-start; gap:12px; padding:11px 10px; border-radius:10px; position:relative}
.wrow + .wrow::before{content:""; position:absolute; left:40px; right:10px; top:0; height:1px; background:var(--win-hair)}
.wrow.sel{background:var(--win-sel)} .wrow.sel::before, .wrow.sel + .wrow::before{opacity:0}
.wrow-ic{width:20px; height:20px; flex:none; margin-top:1px; color:var(--attn)}
.wrow-ic .stack{width:20px; height:20px; place-items:center}
.wrow-ic svg{width:18px; height:18px}
.wrow-ic .av{width:20px; height:20px}
.ring{position:absolute; inset:-3px; border-radius:50%; border:1.5px solid transparent; border-top-color:var(--cherry); opacity:0}
.wrow-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.wrow-l1{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:8px; row-gap:2px}
.wrow-l1 b{font-weight:600}
.wrow-l1 .t{font-weight:500}
.st{display:grid; font-size:13px; font-weight:500; white-space:nowrap}
.st > span{grid-area:1/1}
.st-a{color:var(--attn)} .st-b, .st-c{color:var(--win-text); opacity:0}
.st-b .av, .st-c .av{width:14px; height:14px; vertical-align:-2px; margin-right:5px}
.wrow-l2{display:grid; color:var(--win-text-2); font-size:13.5px}
.wrow-l2 > span{grid-area:1/1}
.wrow-l2 .a{opacity:0; color:var(--win-text)}
.wrow-l2 .a i{font-style:normal; color:var(--win-text-2)}
.wrow-act{flex:none; align-self:center}
.wrow-act .stack{justify-items:end}
.nobr{white-space:nowrap}
.wname{display:flex; align-items:baseline; flex-wrap:wrap; column-gap:8px; row-gap:2px; margin:6px 10px 2px; padding:9px 12px; border-radius:9px; background:var(--win-field); box-shadow:inset 0 0 0 1px var(--win-hair); color:var(--win-text-2); font-size:13px}
.wname-f{display:inline-flex; align-items:baseline; min-width:3.2em; color:var(--win-text); font-weight:600}
.wname-f .caret::after{background:var(--win-text); box-shadow:none}
.wname small{font-size:12px; color:var(--win-text-3)}
.wnote{display:flex; align-items:center; gap:8px; margin:4px 10px 2px 42px; padding:9px 12px; border-radius:9px; background:var(--win-field); color:var(--win-text-2); font-size:13px; opacity:0}
.wnote svg{width:13px; height:13px; color:var(--win-text); flex:none}
.wnote b{color:var(--win-text); font-weight:600}
.wnote .nk{display:inline-flex; gap:4px; flex:none}
.wnote .kc{min-width:20px; height:20px; font-size:11.5px; border-radius:5px; padding:0 4px}
.win-foot{display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:11px 20px; border-top:1px solid var(--win-hair); color:var(--win-text-2); font-size:12.5px; background:var(--win-bar)}
.win-foot .kc{min-width:20px; height:20px; font-size:11.5px; border-radius:5px; padding:0 4px}
.win-foot .sep{color:var(--win-text-3)}

/* Week-fit window */
.kpi{display:grid; grid-template-columns:1.7fr 1fr 1fr; margin:14px; border-radius:12px; background:var(--win-field); overflow:hidden}
.kpi > div{padding:14px 16px 15px; min-width:0}
.kpi > div + div{border-left:1px solid var(--win-hair)}
.kpi .lbl{font-size:12px; color:var(--win-text-2); margin-bottom:6px}
.kpi .verdict{display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; letter-spacing:-.012em}
.kpi .verdict .ic{width:17px; height:17px; color:var(--win-text)}
.kpi .sub{font-size:12.5px; color:var(--win-text-2); margin-top:5px}
.kpi .big{font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.1}
.pace{position:relative; margin:4px 14px 0; padding:4px 4px 0}
.pace-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 6px 0; font-size:12px; color:var(--win-text-2)}
.pace-svg{display:block; width:100%; height:auto; overflow:visible}
.pace-svg text{font-family:var(--sans); font-size:11px; fill:var(--win-text-3); letter-spacing:.01em}
.pace-svg .grid{stroke:var(--win-hair); stroke-width:1}
.pace-svg .limit{stroke:var(--win-text-2); stroke-width:1; stroke-dasharray:2 4}
.pace-svg .line{fill:none; stroke:var(--win-text); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.pace-svg .proj{fill:none; stroke:var(--win-text-2); stroke-width:1.8; stroke-dasharray:1 6; stroke-linecap:round}
.pace-svg .area{fill:var(--win-text); opacity:.05}
.pace-svg .gap{fill:var(--cherry); opacity:.16}
.pace-svg .head{fill:var(--cherry); fill-opacity:.07}
.pace-svg .gapline{stroke:var(--cherry); stroke-width:1.5}
.pace-svg .now{fill:var(--cherry); stroke:var(--now-ring); stroke-width:1.5}
.pace-svg .nowring{fill:none; stroke:var(--cherry); stroke-width:1.2; opacity:.35}
.pace-num{position:absolute; right:9%; top:25%; text-align:right; pointer-events:none}
.pace-num .serif{display:block; font-size:clamp(34px,4.2vw,54px); line-height:1; color:var(--win-text)}
.pace-num small{display:block; font-size:12.5px; color:var(--win-text-2); margin-top:4px}
.acc{padding:6px 14px 16px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:28px}
.acc-r{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 10px; padding:9px 4px; border-top:1px solid var(--win-hair)}
.acc-r .n{font-weight:600; display:flex; align-items:center; gap:7px}
.acc-r .bar{height:5px; border-radius:3px; background:var(--win-sel); position:relative; overflow:hidden}
.acc-r .bar i{position:absolute; inset:0; border-radius:inherit; background:var(--win-text); transform-origin:0 50%; transform:scaleX(var(--v))}
.acc-r .pct{font-size:12.5px; font-weight:500; min-width:3.2em; text-align:right}
.acc-r .rs{grid-column:1/-1; font-size:11.5px; color:var(--win-text-3); margin-top:-2px}

/* Talk window */
.win-talk .win-bar{gap:14px}
.seg{display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:var(--win-field); box-shadow:inset 0 0 0 1px var(--win-hair); margin-inline:auto}
.seg b{display:grid; place-items:center; width:38px; height:26px; border-radius:7px; color:var(--win-text-2); transition:background .25s, color .25s}
.seg b svg{width:18px; height:14px}
.seg b.on{background:var(--win); color:var(--win-text); box-shadow:0 1px 2px rgba(0,0,0,.12), inset 0 0 0 1px var(--win-hair)}
.talk{display:flex; height:448px}
.crew-body{display:flex}
.crew-body .wl{flex:1; min-width:0}
.side{width:168px; flex:none; background:var(--win-side); border-right:1px solid var(--win-hair); padding:12px 10px; display:flex; flex-direction:column; gap:2px; font-size:13px}
.side .it, .talk-side .it{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px}
.side .it.on{background:var(--win-sel); font-weight:600}
.side .it svg{width:15px; height:15px; color:var(--win-text-2)}
.side .it .av{width:15px; height:15px}
.side .it .c{margin-left:auto; font-size:11px; color:var(--win-text-3)}
.talk-side{width:180px; flex:none; background:var(--win-side); border-right:1px solid var(--win-hair); padding:14px 10px; display:flex; flex-direction:column; gap:2px; font-size:13px}
.talk-side .h{font-size:11px; font-weight:600; color:var(--win-text-3); padding:4px 8px 6px; letter-spacing:.01em}
.talk-side .it{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:7px}
.talk-side .it.on{background:var(--win-sel); font-weight:600}
.talk-side .it .c{margin-left:auto; font-size:11px; color:var(--win-text-3)}
.talk-side .it svg{width:15px; height:15px; color:var(--win-text-2)}
.talk-side .it .av{width:15px; height:15px}
.talk-side .gap{height:12px}
.panes{flex:1; display:flex; min-width:0; position:relative}
.pane{flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; background:var(--win); contain:layout paint}
.pane + .pane{border-left:1px solid var(--win-hair)}
.pane.p2, .pane.p3{flex-grow:0}
.pane-h{display:flex; align-items:center; gap:7px; padding:10px 14px; border-bottom:1px solid var(--win-hair); font-size:13px; white-space:nowrap; flex:none; position:relative; z-index:1; background:inherit}
.pane-h b{font-weight:600}
.pane-h small{color:var(--win-text-2); font-size:12px}
.pane-h .live{width:7px; height:7px; border-radius:50%; background:var(--win-text); flex:none}
.pane-h .idle{background:var(--win-text-3)}
.pane-b{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:14px 16px 10px; font-size:13.5px; line-height:1.45; min-width:220px; overflow:hidden}
.bub{align-self:flex-end; max-width:86%; background:var(--win-field); border-radius:14px; padding:8px 12px; box-shadow:inset 0 0 0 1px var(--win-hair)}
.who{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--win-text-2)}
.who .av{width:15px; height:15px}
.who .gl{width:15px; height:15px; display:grid; place-items:center; color:var(--win-text-2)} .who .gl svg{width:14px; height:14px}
.tool{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--win-text-2)}
.tool svg{width:11px; height:11px}
.pane-b code{font-family:var(--mono); font-size:.9em; background:var(--win-sel); padding:.05em .3em; border-radius:4px}
.comp{margin:0 12px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--win-hair); background:var(--win); padding:9px 10px 8px 12px; position:relative; min-width:200px}
.comp .ph{color:var(--win-text-3); font-size:13px}
.comp .ft{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:12px; color:var(--win-text-2)}
.comp .ft svg{width:12px; height:12px}
.mode{display:inline-flex; align-items:center; gap:5px; padding:2px 7px 2px 5px; border-radius:6px; position:relative}
.mode.hot{background:var(--win-sel)}
.mode .stack > span{white-space:nowrap}
.send{margin-left:auto; width:22px; height:22px; border-radius:50%; background:var(--win-text-3); opacity:.5}
.mode-menu{position:absolute; left:0; top:0; width:176px; padding:5px; border-radius:11px; background:var(--win); box-shadow:0 0 0 1px var(--win-hair), 0 18px 40px -12px rgba(30,10,15,.35); z-index:10; opacity:0; transform-origin:12% 100%; font-size:13px}
.mm-i{display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; color:var(--win-text)}
.mm-i svg{width:12px; height:12px; opacity:0}
.mm-i.cur svg{opacity:1}
.mm-i.hl{background:var(--win-text); color:var(--win)}
.mm-h{font-size:11px; color:var(--win-text-3); padding:4px 8px 3px; font-weight:600}
.pane.term{background:var(--term); color:var(--term-ink)}
.pane .veil{position:absolute; inset:0; z-index:3; background:var(--win); opacity:0; pointer-events:none}
.pane.term .pane-h{border-color:rgba(245,240,232,.08); color:var(--term-ink)}
.pane.term .pane-h small{color:var(--term-ink-2)}
.pane.term .pane-h .live{background:var(--term-ink)}
.tb{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:12px 14px 16px; font-family:var(--mono); font-size:12px; line-height:1.6; min-width:230px; white-space:pre-wrap}
.tb .d{color:var(--term-ink-2)}
.tb .q{color:var(--term-ink)}
.tb .t-wait{color:var(--term-ink); font-weight:600}
.tb .tw-dot{display:inline-block; width:.55em; height:.55em; border-radius:50%; background:var(--cherry); box-shadow:0 0 0 1px rgba(245,240,232,.55); margin-right:.55em; vertical-align:.05em}
.tb .tc{display:inline-block; width:.6em; height:1.15em; vertical-align:-.2em; background:var(--term-ink); animation:blink 1.05s steps(1) infinite}

/* Health: a slice of the Mac desktop */
.desk{position:relative; border-radius:16px; overflow:hidden; background:linear-gradient(170deg, var(--paper-2), var(--ground-2)); box-shadow:inset 0 0 0 1px var(--hair), var(--win-shadow); padding-bottom:30px; color:var(--win-text); text-align:left; font-size:14px; line-height:1.35}
.mbar{display:flex; align-items:center; justify-content:flex-end; gap:16px; height:30px; padding:0 14px; background:var(--menubar); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--win-hair); font-size:13px; font-weight:500; position:relative; z-index:6}
.mbar .l{margin-right:auto; display:flex; gap:18px; color:var(--win-text)}
.mbar .l span:not(:first-child){font-weight:400; color:var(--win-text-2)}
.mbar svg{display:block}
.mb-crew{position:relative; width:26px; height:22px; display:grid; place-items:center; border-radius:5px}
.mb-crew.on{background:var(--win-sel)}
.mb-crew svg{width:15px; height:15px}
.mb-crew .dot{position:absolute; width:7px; height:7px; right:2px; top:2px; border-radius:50%; background:var(--cherry); box-shadow:var(--cherry-edge), 0 0 0 2.5px var(--win-bar); transform:scale(0)}
.mb-crew .pr{position:absolute; width:7px; height:7px; right:2px; top:3px; border-radius:50%; border:1px solid var(--cherry); opacity:0}
.mbar .wifi{width:16px; height:16px} .mbar .batt{width:25px; height:13px}
.mbar .clock{min-width:112px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.mbar .clock .stack{justify-items:end}
.mpanel{position:absolute; top:36px; right:80px; width:320px; z-index:5; border-radius:14px; background:var(--win); box-shadow:0 0 0 1px var(--win-hair), 0 24px 50px -16px rgba(30,10,15,.4); padding:12px 12px 10px; opacity:0; transform-origin:85% 0}
.mp-h{display:flex; justify-content:space-between; align-items:baseline; font-weight:600; font-size:14px; padding:0 4px 8px}
.mp-h small{font-weight:400; font-size:11.5px; color:var(--win-text-2)}
.mp-alert{display:flex; gap:8px; align-items:flex-start; padding:8px; border-radius:8px; font-weight:600; font-size:13px; color:var(--attn)}
.mp-alert.hl{background:var(--win-sel)}
.mp-alert svg{width:15px; height:15px; flex:none; margin-top:1px}
.mp-card{margin-top:6px; border-radius:10px; background:var(--win-field); padding:10px 11px}
.mp-card .v{display:flex; gap:7px; align-items:center; font-weight:600; font-size:13px}
.mp-card .v svg{width:14px; height:14px}
.mp-card small{display:block; color:var(--win-text-2); font-size:11.5px; margin-top:3px}
.mp-sec{font-size:11px; font-weight:600; color:var(--win-text-3); padding:10px 4px 4px}
.mp-row{display:flex; align-items:flex-start; gap:9px; padding:4px 4px; font-size:13px; line-height:1.3}
.mp-row .sd{width:8px; height:8px; border-radius:50%; background:var(--win-text-2); margin-top:4px; flex:none}
.mp-row small{display:block; color:var(--win-text-2); font-size:11.5px}
.mp-kv{display:grid; grid-template-columns:1fr 1fr; gap:8px; border-top:1px solid var(--win-hair); margin-top:9px; padding-top:8px}
.mp-kv small{display:block; margin:0 0 1px}
.mp-kv b{font-size:15px; font-weight:600}
.mp-need{display:flex; gap:9px; align-items:flex-start; padding:8px 9px; border-radius:9px; background:var(--win-field); font-size:13px; line-height:1.3}
.mp-need svg{width:16px; height:16px; color:var(--attn); flex:none; margin-top:1px}
.mp-need b{display:block; font-weight:600}
.mp-need small{color:var(--win-text-2); font-size:11.5px}
.mp-foot{display:flex; justify-content:space-between; border-top:1px solid var(--win-hair); margin-top:8px; padding:8px 4px 0; font-size:13px}
.mp-foot small{color:var(--win-text-2); font-size:11.5px}
.win-health{position:relative; margin:26px 6% 0; transform-origin:50% 10%}
.hw-body{display:grid}
.hw-body > div{grid-area:1/1; min-width:0}
.hw-health{opacity:0; visibility:hidden}
.road-hero{display:flex; align-items:baseline; gap:12px; padding:16px 20px 10px; flex-wrap:wrap}
.road-pct{font-size:40px; line-height:1}
.road-t b{display:block; font-weight:600; font-size:14px}
.road-t small{font-size:12px; color:var(--win-text-2)}
.road-r{margin-left:auto; font-size:12px; color:var(--win-text-3)}
.road-bar{margin:0 20px; height:6px; border-radius:3px; background:var(--win-sel); position:relative; overflow:hidden}
.road-bar i{position:absolute; inset:0; background:var(--win-text); border-radius:inherit; transform-origin:0 50%; transform:scaleX(.48)}
.tracks{margin:16px 18px 18px; border-radius:12px; background:var(--win-field)}
.trk{display:grid; grid-template-columns:minmax(0,1fr) 34% 3.2em; align-items:center; gap:14px; padding:9px 14px; font-size:13px}
.trk + .trk{border-top:1px solid var(--win-hair)}
.trk small{display:block; font-size:11.5px; color:var(--win-text-2)}
.trk .bar{height:5px; border-radius:3px; background:var(--win-sel); position:relative; overflow:hidden}
.trk .bar i{position:absolute; inset:0; border-radius:inherit; background:var(--win-text); transform-origin:0 50%; transform:scaleX(var(--v))}
.trk b{font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.hl-tabs{display:flex; justify-content:center; padding:12px 0 4px}
.hl-tabs .seg b{width:auto; padding:0 12px; font-size:12.5px; font-weight:500}
.verd{margin:12px 18px 0; border-radius:12px; background:var(--win-field); overflow:hidden}
.verd-top{display:grid; padding:12px 14px}
.verd-top > div{grid-area:1/1; display:flex; gap:9px; align-items:flex-start}
.verd-top svg{width:17px; height:17px; flex:none; margin-top:1px}
.verd-top b{font-weight:600; font-size:14px; display:block}
.verd-top small{font-size:12px; color:var(--win-text-2)}
.verd-top .down b{color:var(--attn)}
.verd-top .ok{opacity:0}
.inc{display:grid; border-top:1px solid var(--win-hair); padding:10px 14px; font-size:13px; color:var(--win-text-2)}
.inc > div{grid-area:1/1; display:flex; align-items:center; gap:8px; opacity:0}
.inc .av{width:16px; height:16px; position:relative}
.inc .ring{inset:-3px}
.sig-h{font-size:12.5px; font-weight:600; padding:16px 20px 6px}
.sig{margin:0 18px 18px; border-radius:12px; background:var(--win-field)}
.sig-r{display:flex; align-items:center; gap:10px; padding:9px 14px}
.sig-r + .sig-r{border-top:1px solid var(--win-hair)}
.sig-r .nm{flex:1; min-width:0}
.sig-r .nm small{display:block; font-size:11.5px; color:var(--win-text-2)}
.sig-r .vals{display:flex; align-items:center; gap:8px; font-size:13px; white-space:nowrap}
.sig-r .vals .nrm{color:var(--win-text-2)}
.sig-r .vals .stack svg{width:15px; height:15px}
.sig-r .now2{display:grid; text-align:right} .sig-r .now2 > span{grid-area:1/1}
.sig-r .nc{font-size:12px; color:var(--win-text-2); text-align:right}

/* ───────────────────────── Dark room: portal ───────────────────────── */
.room{position:relative}
.room-pin{position:relative}
.room-tile{position:relative; background:var(--night); color:var(--night-ink); padding:clamp(80px,14vh,160px) var(--gutter) clamp(90px,14vh,150px); display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden}
.room-tile::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 34%, rgba(245,240,232,.07), rgba(245,240,232,0) 70%); pointer-events:none}
.feather-stage{position:relative; width:min(360px,70vw); aspect-ratio:1; display:grid; place-items:center}
.feather-fallback{width:min(300px,62vw); height:auto; border-radius:22%; box-shadow:0 0 0 1px var(--night-hair)}
.feather-3d{position:absolute; inset:0; width:100%; height:100%; display:none}
.room-copy{position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3vh,30px); margin-top:clamp(24px,5vh,56px)}
.room-statement{font-size:clamp(34px,min(5.6vw,8.4vh),150px); font-weight:600; letter-spacing:-.045em; line-height:1.04; margin:0; color:var(--night-ink); text-wrap:balance; max-width:12em}
.room-sub{max-width:33em; margin:0; font-size:clamp(15px,1.3vw,27px); text-wrap:balance; line-height:1.55; color:var(--night-ink-2); text-wrap:pretty}
.proof{display:flex; gap:clamp(24px,5vw,72px); justify-content:center; flex-wrap:wrap; margin-top:clamp(8px,2vh,20px)}
.proof div{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:6em}
.proof .serif{font-size:clamp(40px,min(5vw,7.4vh),120px); line-height:1; color:var(--night-ink)}
.proof small{font-size:clamp(12px,.8vw,18px); letter-spacing:.06em; text-transform:uppercase; color:var(--night-ink-2)}
.proof-note{margin:0; font-size:clamp(13px,.85vw,18px); color:var(--night-ink-2); max-width:34em; text-wrap:balance}

/* ───────────────────────── Fine print, pricing, FAQ ───────────────────────── */
.sheet{position:relative; z-index:2; background:var(--ground); border-radius:clamp(28px,4vw,48px) clamp(28px,4vw,48px) 0 0; margin-top:calc(-1 * clamp(28px,4vw,48px)); overflow:hidden}
.sheet::before{content:""; position:absolute; width:70vmax; height:60vmax; right:-24vmax; top:-18vmax; border-radius:50%; background:radial-gradient(closest-side, var(--wash-2), rgba(98,20,39,0)); pointer-events:none}
.sheet::after{content:""; position:absolute; width:60vmax; height:50vmax; left:-24vmax; bottom:10%; border-radius:50%; background:radial-gradient(closest-side, var(--wash-3), rgba(98,20,39,0)); pointer-events:none}
.sheet > *{position:relative; z-index:1}
.sec{padding:clamp(88px,14vh,190px) var(--gutter) 0; max-width:max(1180px, 64vw); margin:0 auto}
.sec-title{font-size:clamp(34px,4.4vw,112px); font-weight:600; letter-spacing:-.042em; line-height:1.05; margin:0; text-wrap:balance}
.fine{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(32px,6vw,96px); margin-top:clamp(40px,7vh,72px)}
.fine article{padding:28px 0 32px; border-top:1px solid var(--hair); display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto 1fr; align-content:start; gap:6px 18px}
.fine .fi{width:40px; height:40px; border-radius:11px; background:var(--paper); box-shadow:var(--chip-shadow); display:grid; place-items:center; color:var(--ink); grid-row:1/3}
.fine .fi svg{width:19px; height:19px}
.fine h3{margin:0; font-size:clamp(19px,1.5vw,32px); font-weight:600; letter-spacing:-.022em; line-height:1.25; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-top:7px}
.fine p{margin:0; color:var(--ink-2); font-size:clamp(16px,1.1vw,23px); line-height:1.55; max-width:30em}
.soon{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hair); color:var(--ink-2)}

.pricing{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,6vw,96px); align-items:center}
.pricing .lead p{color:var(--ink-2); font-size:clamp(16.5px,1.3vw,26px); max-width:24em; margin:22px 0 0; line-height:1.55}
.card{background:var(--paper); border-radius:28px; box-shadow:var(--chip-shadow), 0 40px 80px -40px rgba(60,20,30,.25); padding:clamp(28px,3.4vw,44px)}
.card-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.card-top .lockup img{width:36px; height:36px; border-radius:9px}
.ex{font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); padding:5px 10px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--hair)}
.price{display:flex; align-items:baseline; gap:10px; margin:30px 0 0; flex-wrap:wrap}
.price .serif{font-size:clamp(76px,7.4vw,170px); line-height:.9; letter-spacing:-.035em}
.price span:last-child{font-size:18px; color:var(--ink-2)}
.price-note{margin:0; color:var(--ink-3); font-size:14px}
.card ul{list-style:none; margin:26px 0 30px; padding:0; display:grid; gap:0}
.card li{display:flex; gap:12px; align-items:baseline; padding:.7em 0; border-top:1px solid var(--hair-2); font-size:clamp(16px,1vw,21px); line-height:1.4}
.card li svg{width:14px; height:14px; flex:none; position:relative; top:2px; color:var(--ink)}
.card li small{color:var(--ink-3); font-size:13px; margin-left:auto; white-space:nowrap; padding-left:10px}
.btn-cherry{appearance:none; border:0; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:17px 22px; border-radius:16px; background:var(--cherry); color:var(--ivory); font-size:17px; font-weight:600; letter-spacing:-.015em; cursor:pointer; box-shadow:var(--cherry-edge), 0 10px 24px -12px rgba(98,20,39,.7); transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.btn-cherry:hover{transform:translateY(-1px)}
.btn-cherry:focus-visible{outline-color:var(--ink)}
.card .fine-print{margin:14px 0 0; font-size:13px; color:var(--ink-3); text-align:center}

.faq{max-width:max(880px, 50vw)}
.faq-list{margin-top:clamp(32px,5vh,56px); border-bottom:1px solid var(--hair)}
.faq details{border-top:1px solid var(--hair)}
.faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 2px; font-size:clamp(18px,1.4vw,29px); font-weight:600; letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:28px; height:28px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px var(--hair); position:relative; transition:transform .45s cubic-bezier(.2,.7,.2,1), background .3s}
.faq summary i::before, .faq summary i::after{content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; background:var(--ink); transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg); background:var(--hair-2)}
.faq .ans{padding:0 48px 26px 2px; color:var(--ink-2); font-size:clamp(16px,1.1vw,23px); line-height:1.6; max-width:40em}
.faq .ans p{margin:0}

footer.foot{padding:clamp(120px,18vh,200px) var(--gutter) 40px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px}
.foot-lock{display:flex; flex-direction:column; align-items:center; gap:14px}
.foot-lock img{width:84px; height:84px; border-radius:20px; box-shadow:0 20px 40px -20px rgba(60,20,30,.35)}
.foot-lock b{font-size:clamp(30px,3vw,40px); font-weight:600; letter-spacing:-.035em; line-height:1}
.foot-lock span{color:var(--ink-3); font-size:16px}
.foot small{display:block; color:var(--ink-3); font-size:13px; line-height:1.6; max-width:40em}
.foot .row{display:flex; gap:10px 22px; flex-wrap:wrap; justify-content:center; margin-top:40px; padding-top:22px; border-top:1px solid var(--hair-2); width:min(760px,100%)}

/* Beta note */
dialog.note{border:0; padding:0; background:transparent; max-width:min(440px, calc(100vw - 32px)); width:100%; color:var(--ink)}
dialog.note::backdrop{background:rgba(20,12,14,.32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.note-card{background:var(--paper); border-radius:22px; padding:28px; box-shadow:0 0 0 1px var(--hair), 0 40px 80px -30px rgba(30,10,15,.5)}
.note-card h3{margin:14px 0 8px; font-size:22px; letter-spacing:-.025em}
.note-card p{margin:0 0 20px; color:var(--ink-2); font-size:16px; line-height:1.55}
.note-card img{width:44px; height:44px; border-radius:11px}
.note-card button{appearance:none; border:0; padding:11px 18px; border-radius:12px; background:var(--ink); color:var(--ground); font-weight:600; font-size:15px; cursor:pointer}

/* ───────────────────────── Motion mode (JS + GSAP present, motion allowed) ───────────────────────── */
.motion .scene-pin{height:100svh; padding:0; overflow:clip}
.motion .s-wrap{position:absolute; inset:0; align-items:center; z-index:3; pointer-events:none}
.motion .stage{position:absolute; inset:0; justify-content:center; padding:clamp(64px,9vh,96px) var(--gutter) clamp(28px,5vh,56px); z-index:2}
.motion .panel{padding:140px; margin:-140px; box-sizing:content-box}
.motion .panel-skin{inset:140px}
.motion .caption{opacity:0}
.motion .replay{display:inline-flex}
.motion .room-pin{height:100svh; overflow:clip}
.motion .room-tile{position:absolute; inset:0; padding:0; justify-content:center; will-change:clip-path}
.motion .feather-stage{position:absolute; inset:0; width:auto; aspect-ratio:auto}
.motion .feather-3d{display:block}
.motion .feather-fallback{position:absolute; left:50%; top:var(--f-mid,30%); width:var(--f-size,260px); height:auto; transform:translate(-50%,-50%)}
.motion.gl-on .feather-fallback{display:none}
.motion .room-copy{position:absolute; left:var(--gutter); right:var(--gutter); top:46svh; margin:0}
.motion .room-tile::after{content:""; position:absolute; inset:0; background:radial-gradient(50% 42% at 50% 26%, rgba(245,240,232,.06), rgba(245,240,232,0) 70%); pointer-events:none}
.motion .room-tile::before{opacity:0}
.pre .hero-sentence, .pre header.top, .pre .hero .lede, .pre .hero .meta, .pre .hero .cue{visibility:hidden}
.hero-sentence .pending{display:none}
.hero-sentence .chip.pending + .br-chip{display:none}
.motion .hero .lede, .motion .hero .meta, .motion .hero .cue, .motion header.top{opacity:0}

/* Static (reduced motion / no JS): panels show their final state */
.rm .cursor, .rm .keys, .rm .replay{display:none}

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 880px){
  .talk-side, .side{display:none}
  .acc{grid-template-columns:minmax(0,1fr)}
  .acc-r:nth-child(n+4){display:none}
  .pricing{grid-template-columns:minmax(0,1fr)}
  .fine{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 720px){
  .br-wide, .br-chip{display:none}
  body{font-size:16px}
  .lockup span{display:none}
  .meta{flex-direction:column; align-items:center}
  .hero{padding-top:108px; min-height:min(100svh,860px)}
  .hero .sentence{max-width:100%}
  .chip-wait{display:flex; width:100%; margin:.12em 0 .16em; white-space:normal; top:0; font-size:40px}
  .chip-wait .cw-main{flex:1}
  .chip-wait .cw-l2{white-space:normal; line-height:1.35}
  .chip-wait .cw-btn{align-self:center}
  .s-wrap .sentence{max-width:100%}
  .win{font-size:13px; border-radius:12px}
  .win-bar{padding:10px 12px; gap:12px; min-height:46px}
  .tl i{width:10px; height:10px}
  .tl{gap:6px}
  .win-bar .sample, .win-bar .search{display:none}
  .wl{padding:4px 4px 8px}
  .wrow{padding:10px 8px; gap:10px}
  .wrow + .wrow::before{left:36px}
  .wrow-act{display:none}
  .wnote{margin-left:36px; margin-right:6px}
  .wname{margin:4px 6px 2px}
  .win-foot{padding:10px 14px; font-size:12px}
  .kpi{grid-template-columns:1fr 1fr; margin:10px}
  .kpi .kpi-a{grid-column:1/-1; border-bottom:1px solid var(--win-hair)}
  .kpi .kpi-b{border-left:0 !important}
  .pace{margin:0 8px}
  .pace-num{right:4%; top:14%}
  .pace-num .serif{font-size:34px}
  .acc{padding:4px 10px 12px}
  .talk{height:600px}
  .comp .ph{display:none}
  .comp .ft{margin-top:0}
  .comp{padding:7px 10px}
  .pane-h{padding:8px 12px}
  .tb{padding:8px 12px 10px; font-size:11.5px}
  .pane-b .tool{display:none}
  .pace-num{position:static; text-align:left; padding:10px 6px 0; display:flex; align-items:baseline; gap:10px}
  .pace-num small{margin:0}
  .pace-head span:last-child{display:none}
  .pace-svg text{font-size:25px}
  .pace-svg .wf-grid text:first-of-type{font-size:22px}
  .caption{text-wrap:balance}
  .panes{flex-direction:column}
  .pane + .pane{border-left:0; border-top:1px solid var(--win-hair)}
  .pane-b, .tb{min-width:0}
  .pane-b{padding:10px 12px 8px; gap:7px; font-size:13px}
  .comp{margin:0 10px 10px; min-width:0}
  .seg b{width:34px; height:24px}
  .win-talk .win-bar .win-title{display:none}
  .desk{border-radius:14px; padding-bottom:14px}
  .mbar .l span:nth-child(n+4){display:none}
  .mbar .l{gap:12px}
  .mbar .wifi, .mbar .batt{display:none}
  .mbar .clock{min-width:0}
  .ck-d{display:none}
  .proof{gap:14px 20px}
  .proof div{min-width:0}
  .proof small{font-size:11px; letter-spacing:.04em}
  .room.compact .room-sub{display:none}
  .mpanel{right:10px; left:10px; width:auto}
  .win-health{margin:14px 10px 0}
  .sig-r .nrm{display:none}
  .sig-r:last-child{display:none}
  .verd{margin:10px 12px 0} .sig{margin:0 12px 14px} .sig-h{padding:14px 14px 6px}
  .fine article{grid-template-columns:36px 1fr; gap:4px 14px}
  .fine .fi{width:36px; height:36px}
  .faq .ans{padding-right:8px}
  .card li small{display:none}
}
@media (max-width: 380px){
  .meta{font-size:11.5px}
  .meta{flex-direction:column; align-items:center}
  .cw-btn{display:none}
}
@media (prefers-reduced-motion: reduce){
  .wash i, .cue::after, .caret::after, .cw-ic .pulse, .tb .tc{animation:none}
}

/* SITE1 shared navigation, legal measure and accessibility */
.site-nav{display:flex;align-items:center;gap:18px;font-size:15px;flex:none}
.site-nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.site-nav a:hover,.foot a:hover{text-decoration:underline}
.btn-cherry{text-decoration:none}
.skip{position:absolute;left:16px;top:-100px;z-index:100;background:var(--paper);padding:12px}
.skip:focus{top:10px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:center}
.foot p{margin:0;max-width:60em;overflow-wrap:anywhere;font-size:14px;color:var(--ink-2)}
.foot small{color:var(--ink-2)}
.legal{max-width:720px;margin:auto;padding:140px 24px 40px;overflow-wrap:anywhere}
.legal h1{font-size:clamp(38px,5vw,64px);line-height:1.08;letter-spacing:-.04em;margin:0 0 24px}
.legal h2{font-size:24px;line-height:1.25;margin:40px 0 14px;letter-spacing:-.025em}
.legal p,.legal li{line-height:1.7;color:var(--ink-2)}
.legal strong{color:var(--ink)}
.legal a{text-underline-offset:4px}
.legal .banner{padding:14px 18px;border:1px solid var(--hair);border-radius:14px;color:var(--ink)}
.legal .price{margin:28px 0}
.legal .btn-cherry{width:fit-content;margin:28px 0}
.legal ul{padding-left:22px}
.coming{font-size:14px;font-weight:600;color:var(--ink)}
.card .price-note{margin:18px 0 0;color:var(--ink-2);overflow-wrap:anywhere}
.card .fine-print{color:var(--ink-2)}
.kpi{grid-template-columns:1fr}.kpi .kpi-a{border-bottom:0}
.foot{overflow-wrap:anywhere}
@media(max-width:720px){
 header.top{padding-top:16px;gap:12px}.site-nav{gap:12px;font-size:14px}
 .card li small{display:block;white-space:normal;padding-left:0}
 .card li{flex-wrap:wrap}.win-foot{overflow-wrap:anywhere}
 .legal{padding:116px 16px 24px}.hero .meta{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
/* Let stacked sample conversations grow instead of clipping their text. */
.rm .talk{height:auto}
.rm .panes{flex-wrap:wrap}
.rm .pane{overflow:visible;contain:none;min-width:0}
.rm .pane-b,.rm .tb{overflow:visible;flex:none;min-height:180px}
@media(max-width:880px){.rm .panes{flex-direction:column}.rm .pane{flex:1 0 auto!important}}

.rm .wash i,.rm .cue::after,.rm .caret::after,.rm .cw-ic .pulse,.rm .tb .tc{animation:none}

.motion .scene.panel-open .s-wrap{visibility:hidden}