/* =====================================================================
   STYLE.CSS  ·  the look of the site
   ---------------------------------------------------------------------
   Safe things to change:
   - The colours in :root just below (background, panels, text, accents)
   - Font sizes in the h1 / h2 rules
   You can ignore everything else unless you're feeling brave.
   ===================================================================== */
/* Auros: abyssal terminal, bioluminescent data orb */
  /* ---------------------------------------------------------------
     THEMES · pick one with CONFIG.theme in content.js
     (or preview any of them by adding ?theme=blush to the address)
     orb-* values are "r,g,b" for the background animation.
     --------------------------------------------------------------- */
  :root, :root[data-theme="abyss"]{
    --abyss:#012624; --deep:#011d1c; --kelp:#003734; --kelp-2:#04423e;
    --mist:#edfffe; --white:#ffffff; --silver:#bbc7c6; --slate:#707777;
    --phosphor:#fde9ff; --aqua:#cbfffc; --soft:#8fa9a6;
    --line:rgba(255,255,255,.1); --track:rgba(255,255,255,.08);
    --btn:#edfffe; --btn-ink:#012624;
    --glowA:#00524d; --glowB:#3a2140;
    --orb-back:0,130,124; --orb-front:203,255,252; --orb-edge:250,209,255; --orb-glint:255,255,255;
    --font:"Figtree",ui-sans-serif,system-ui,sans-serif;
    --font-head:"Bricolage Grotesque","Figtree",ui-sans-serif,sans-serif;
    --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  :root[data-theme="champagne"]{
    --abyss:#0f1020; --deep:#0b0c18; --kelp:#1b1d33; --kelp-2:#25284a;
    --mist:#f4efe4; --white:#fbf7ee; --silver:#c9c4d6; --slate:#7d7891;
    --phosphor:#e9c46a; --aqua:#e9c46a; --soft:#a79fbf;
    --line:rgba(255,255,255,.1); --track:rgba(255,255,255,.08);
    --btn:#e9c46a; --btn-ink:#1a1608;
    --glowA:#2a2b5c; --glowB:#4a3b1c;
    --orb-back:70,64,130; --orb-front:246,226,176; --orb-edge:233,196,106; --orb-glint:255,255,255;
    --font:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
    --font-head:"Syne","Instrument Sans",ui-sans-serif,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  :root[data-theme="blush"]{
    --abyss:#1c1018; --deep:#160c13; --kelp:#2a1824; --kelp-2:#3a2232;
    --mist:#fff1f4; --white:#fff7f9; --silver:#d9c3cb; --slate:#8f7380;
    --phosphor:#ffb4c6; --aqua:#ffb4c6; --soft:#c79aae;
    --line:rgba(255,255,255,.1); --track:rgba(255,255,255,.08);
    --btn:#ffb4c6; --btn-ink:#2a0f1a;
    --glowA:#4a1d36; --glowB:#2d1840;
    --orb-back:130,60,95; --orb-front:255,205,218; --orb-edge:255,180,198; --orb-glint:255,255,255;
    --font:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
    --font-head:"Familjen Grotesk",ui-sans-serif,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  :root[data-theme="kachow"]{
    --abyss:#f3eee6; --deep:#ebe4d9; --kelp:#ffffff; --kelp-2:#faf6ef;
    --mist:#2a2620; --white:#17140f; --silver:#4b463f; --slate:#958c80;
    --phosphor:#d62d1c; --aqua:#d62d1c; --soft:#9c948a;
    --line:rgba(0,0,0,.1); --track:rgba(0,0,0,.08);
    --btn:#d62d1c; --btn-ink:#ffffff;
    --glowA:#ffd8c6; --glowB:#f6e3b4;
    --orb-back:205,195,180; --orb-front:40,34,28; --orb-edge:214,45,28; --orb-glint:214,45,28;
    --font:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
    --font-head:"Space Grotesk",ui-sans-serif,sans-serif;
    --font-mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  }
  :root[data-theme="graphite"]{
    --abyss:#111214; --deep:#0c0d0f; --kelp:#1c1d21; --kelp-2:#26272c;
    --mist:#f2f2f2; --white:#ffffff; --silver:#b5b5ba; --slate:#76767e;
    --phosphor:#c6f432; --aqua:#c6f432; --soft:#8a8a92;
    --line:rgba(255,255,255,.1); --track:rgba(255,255,255,.08);
    --btn:#c6f432; --btn-ink:#111214;
    --glowA:#2a2d33; --glowB:#2f3a12;
    --orb-back:80,82,92; --orb-front:240,240,240; --orb-edge:198,244,50; --orb-glint:255,255,255;
    --font:"Familjen Grotesk",ui-sans-serif,system-ui,sans-serif;
    --font-head:"Familjen Grotesk",ui-sans-serif,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  }

  /* per-theme type tweaks (wide or quirky fonts need different sizing) */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font:400 16px/1.4 var(--font); color:var(--silver); background:var(--abyss);
    min-height:100dvh; display:flex; align-items:flex-start; justify-content:center;
    padding:20px 16px 28px; overflow-x:hidden; -webkit-tap-highlight-color:transparent;
  }
  #sky{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
  .glow{position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(90px); opacity:.5}
  .glow.a{width:460px; height:460px; left:-180px; top:-160px; background:radial-gradient(circle,var(--glowA) 0,transparent 70%)}
  .glow.b{width:420px; height:420px; right:-200px; bottom:-180px; background:radial-gradient(circle,var(--glowB) 0,transparent 70%); opacity:.35}

  .card{position:relative; z-index:2; width:100%; max-width:440px; background:transparent; border-radius:16px; padding:44px 8px 28px}

  .step{display:none; animation:in .5s cubic-bezier(.2,.8,.2,1)}
  .step.active{display:block}
  @keyframes in{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

  .badge,.kicker{font:500 11px/1 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); margin-bottom:18px}
  .badge{display:inline-flex; align-items:center; gap:10px}
  .badge i{width:6px; height:6px; border-radius:50%; background:var(--aqua); box-shadow:0 0 10px var(--aqua)}
  .kicker{display:flex; justify-content:space-between; gap:12px}
  .kicker b{font-weight:500; color:var(--mist)}

  h1,h2{font-family:var(--font-head); font-weight:500; color:var(--white); line-height:1; letter-spacing:-.04em}
  h1{font-size:46px}
  h2{font-size:34px; letter-spacing:-.035em}
  /* *text* in content.js: soft colour in headings, bright highlight in body text */
  h1 em, h2 em{font-style:normal; color:var(--soft)}
  p em, .tile em, li em.hl{font-style:normal; color:var(--white)}
  p.sub{color:var(--silver); margin-top:16px; font-size:15px; line-height:1.5}

  .btn{font:500 13px/1 var(--font); letter-spacing:.1em; text-transform:uppercase; border:0; cursor:pointer; border-radius:6px; padding:17px 22px;
    transition:transform .18s, background .2s, opacity .2s, filter .2s; touch-action:manipulation; user-select:none; -webkit-user-select:none}
  .btn:active{transform:scale(.97)}
  .btn *{pointer-events:none}
  .btn-primary{background:var(--btn); color:var(--btn-ink)}
  .btn-primary:hover{filter:brightness(1.05)}
  .btn-ghost{background:var(--kelp); color:var(--white)}
  .btn-ghost:hover{background:var(--kelp-2)}
  .btn-block{width:100%}
  .btn[disabled]{pointer-events:none}
  .btn-primary[disabled]{background:var(--kelp); color:var(--slate)}

  .yn{display:flex; gap:12px; align-items:center; margin-top:34px; min-height:64px}
  #yesBtn{padding:19px 36px; transition:transform .3s cubic-bezier(.3,1.6,.5,1); transform-origin:left center}
  #noBtn{white-space:nowrap; z-index:60; padding:19px 26px}
  #noBtn.loose{background:var(--kelp); position:fixed; outline:1px solid var(--line); transition:left .3s cubic-bezier(.3,1.3,.5,1), top .3s cubic-bezier(.3,1.3,.5,1)}
  #noBtn.caught{background:var(--btn); color:var(--btn-ink); animation:pop .55s}
  @keyframes pop{30%{transform:scale(1.15) rotate(-2deg)} 60%{transform:scale(.96) rotate(1deg)}}
  .taunt{min-height:22px; margin-top:18px; font-size:14px; color:var(--silver)}

  .opts{display:grid; gap:8px; margin-top:24px}
  .opts.days{grid-template-columns:repeat(3,1fr)}
  .opt{text-align:left; background:var(--kelp); border:0; border-radius:16px; padding:16px; cursor:pointer; font:inherit; color:inherit;
    outline:1px solid transparent; outline-offset:-1px; transition:background .2s, outline-color .2s; display:flex; gap:14px; align-items:flex-start}
  .opt:hover{background:var(--kelp-2)}
  .opt.sel{background:var(--kelp-2); outline-color:var(--aqua)}
  .opt .ico{font-size:22px; line-height:1.15; flex:none; width:28px; text-align:center}
  .opt b{display:block; font-weight:500; font-size:15px; color:var(--white)}
  .opt span{display:block; font-size:13px; color:var(--silver); margin-top:3px; line-height:1.45}
  .opt.day{flex-direction:column; align-items:center; text-align:center; gap:0; padding:18px 8px 16px}
  .opt.day .dow{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver)}
  .opt.day .num{font:500 44px/1 var(--font-head); letter-spacing:-.04em; color:var(--white); margin-top:8px}
  .opt.day.sel .num{color:var(--phosphor)}
  .opt.day .kind{font-size:12px; color:var(--slate); margin-top:6px}
  .opt.day.sel .kind{color:var(--silver)}
  .slots{display:flex; gap:8px; margin-top:12px; min-height:44px}
  .slots .chip{flex:1; margin:0}

  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
  .chip{border:0; background:var(--kelp); border-radius:6px; padding:13px 16px; font:500 14px var(--font); cursor:pointer; color:var(--white);
    outline:1px solid transparent; outline-offset:-1px; transition:.2s}
  .chip.sel{background:var(--kelp-2); outline-color:var(--aqua)}
  label.lbl{display:block; font:500 11px/1.3 var(--font); letter-spacing:.14em; text-transform:uppercase; margin-top:28px; color:var(--mist)}
  label.lbl em{font-style:normal; color:var(--slate); letter-spacing:.08em}
  input[type=text],textarea{width:100%; margin-top:10px; border:0; border-radius:6px; padding:14px;
    font:400 16px var(--font); color:var(--white); background:var(--abyss); outline:1px solid var(--line); outline-offset:-1px; resize:none; transition:outline-color .2s}
  input::placeholder,textarea::placeholder{color:var(--slate)}
  input:focus,textarea:focus{outline-color:var(--aqua)}
  .row{display:flex; gap:8px; margin-top:28px; position:sticky; bottom:0; z-index:5;
    padding:14px 0 calc(14px + env(safe-area-inset-bottom)); background:linear-gradient(to bottom, transparent, var(--abyss) 32%)}
  .row .btn-primary{flex:1}
  .row .btn-ghost:only-child{flex:1}

  .progress{display:flex; gap:4px; position:absolute; top:20px; left:28px; right:28px}
  .progress[hidden]{display:none}
  .progress i{flex:1; height:2px; border-radius:2px; background:var(--track); transition:background .4s}
  .progress i.on{background:var(--aqua)}

  .ticket{margin-top:26px; border-radius:16px; padding:6px 18px; background:var(--kelp)}
  .t-row{display:flex; justify-content:space-between; gap:16px; padding:13px 0; font-size:14px; border-bottom:1px solid var(--line)}
  .t-row:last-child{border-bottom:0}
  .t-row span:first-child{color:var(--silver); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding-top:2px}
  .t-row span:last-child{font-weight:500; text-align:right; color:var(--white)}
  .status{font-size:13px; margin-top:16px; color:var(--silver); min-height:18px}
  #textBtn{margin-top:14px; display:none; text-decoration:none; text-align:center}
  .fine{font-size:12px; color:var(--slate); margin-top:20px; line-height:1.5}

  #fx{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:100}
  .toast{pointer-events:none; position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px); opacity:0; z-index:120; white-space:nowrap;
    background:var(--kelp); color:var(--mist); padding:12px 18px; border-radius:6px; font-size:14px; transition:.3s; outline:1px solid var(--line)}
  .toast.show{opacity:1; transform:translateX(-50%)}

  /* ---------- slide layouts ---------- */
  .cover{padding-top:min(31vh,320px)}
  .cover .row{position:static; background:none; padding:0}
  .term{font:400 11px/1.4 var(--font-mono); color:var(--slate); margin:-6px 0 22px; display:flex; align-items:center; gap:6px}
  .term #termProg{color:var(--aqua); white-space:pre}
  .cover > .kicker{position:absolute; top:38px; left:0; right:0; margin:0; opacity:.85}
  @media (min-width:820px){ .cover > .kicker{top:44px} }
  .cover .mono.one{justify-content:center; text-align:center; margin-top:30px}
  .cover .mono.one span{text-transform:none; letter-spacing:.01em; font-size:13px; color:var(--silver); flex:none; max-width:75%}
  .cover .row{margin-top:30px!important}
  .term i{width:7px; height:13px; background:var(--aqua); opacity:.8; animation:blink 1s steps(2) infinite}
  @keyframes blink{50%{opacity:0}}
  .cover h1{font-size:50px}
  .cover .mono{font:500 11px var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--silver); margin-top:28px; display:flex; align-items:center; gap:12px}
  .cover .mono i{flex:1; height:1px; background:var(--aqua); opacity:.45}
  .stack{display:grid; gap:10px; margin-top:24px}
  .tile{background:var(--kelp); border-radius:16px; padding:18px 20px}
  .tile .big{font:500 44px/1 var(--font-head); letter-spacing:-.045em; color:var(--phosphor)}
  .tile .big.grad{color:var(--phosphor)}
  .tile p{font-size:15px; color:var(--silver); margin-top:8px; line-height:1.45}
  .tile q{display:block; font:500 11px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--silver); quotes:none; margin-bottom:10px}
  .tile .ans{font-size:15px; color:var(--mist); line-height:1.45}
  .foot{font-size:10px; line-height:1.6; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin-top:18px}
  .photos{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px}
  .photos.one{grid-template-columns:1fr}
  .ph{aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--kelp); display:flex; align-items:center; justify-content:center;
    color:var(--slate); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:10px}
  .ph.empty{outline:1px dashed rgba(203,255,252,.25); outline-offset:-1px}
  .ph img{width:100%; height:100%; object-fit:cover; display:block}
  .monogram{width:84px; height:84px; border-radius:16px; margin-top:22px; display:flex; align-items:center; justify-content:center;
    font:500 40px var(--font); letter-spacing:-.04em; color:var(--phosphor); background:var(--kelp)}
  .facts{list-style:none; margin-top:22px; display:grid; gap:0; border-top:1px solid var(--line)}
  .facts li{padding:13px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.45; color:var(--mist)}
  .facts li span{display:block; font:500 10px/1.4 var(--font); letter-spacing:.15em; text-transform:uppercase; color:var(--phosphor); margin-bottom:4px}
  .vs{margin-top:22px; border-radius:16px; overflow:hidden; background:var(--deep)}
  .vs .vr{display:grid; grid-template-columns:.8fr 1fr 1fr; border-top:1px solid var(--line)}
  .vs .vr:first-child{border-top:0}
  .vs .vr > div{padding:12px 12px; font-size:13px; line-height:1.35; color:var(--silver)}
  .vs .vr > div:last-child{background:var(--kelp); color:var(--white)}
  .vs .vl{font-size:10px!important; letter-spacing:.12em; text-transform:uppercase; color:var(--soft)!important; line-height:1.4!important; padding-top:14px!important}
  .vs .vh > div{font-size:10px; letter-spacing:.15em; text-transform:uppercase; color:var(--silver); padding-top:14px; padding-bottom:12px}
  .vs .vh > div:last-child{color:var(--phosphor)}
  .risks{list-style:none; margin-top:20px; display:grid; gap:14px; counter-reset:r}
  .risks li{counter-increment:r; display:flex; gap:14px; font-size:15px; line-height:1.45; color:var(--mist)}
  .risks li::before{content:counter(r,decimal-leading-zero); font:500 11px/2 var(--font); letter-spacing:.1em; color:var(--phosphor); flex:none; width:22px}
  .risks li em{font-style:normal; color:var(--silver); display:block; font-size:14px; margin-top:3px}
  .swipehint{margin-top:16px!important; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--slate); text-align:center; margin-top:16px}
  @media (max-width:380px){ h1,.cover h1{font-size:40px} h2{font-size:29px} .tile .big{font-size:38px} .card{padding:42px 2px 24px} }
  @media (min-width:820px){
    body{align-items:center; padding:48px 24px}
    .card{max-width:600px; padding:56px 0 24px}
    .progress{left:0; right:0; top:24px}
    h1{font-size:64px} .cover h1{font-size:68px} h2{font-size:48px}
    p.sub{font-size:17px}
    .tile p,.tile .ans,.facts li,.risks li{font-size:16px} .risks li em{font-size:15px}
    .vs .vr > div{font-size:14px; padding:14px}
    .cover{padding-top:min(36vh,330px)}
    .row{background:none; position:static; padding:0}
  }
  @media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

  /* ---------------------------------------------------------------
     BUTTON STYLES · CONFIG.buttonStyle in content.js
     --------------------------------------------------------------- */
  .btn.nav .ba{display:none}
  html:not([data-btn="block"]) .btn.nav{display:flex; align-items:center; justify-content:space-between; text-transform:none; letter-spacing:0}
  html:not([data-btn="block"]) .btn.nav .ba{display:flex}
  html:not([data-btn="block"]) .btn-primary.nav[disabled]{opacity:.35}

  /* outline: thin accent border, accent text, arrow on the right */
  html[data-btn="outline"] .btn-primary.nav{background:transparent; color:var(--btn); outline:1px solid var(--btn); outline-offset:-1px; border-radius:2px; font:500 16px var(--font); padding:17px 20px}
  html[data-btn="outline"] .btn-primary.nav[disabled]{background:transparent; color:var(--btn)}
  html[data-btn="outline"] .btn-ghost{border-radius:2px; background:transparent; outline:1px solid var(--line); outline-offset:-1px}

  /* split: dark panel with label, accent square with arrow inset on the right */
  html[data-btn="split"] .btn-primary.nav{background:var(--kelp); color:var(--white); border-radius:8px; font:500 16px var(--font); padding:8px 8px 8px 20px; min-height:56px}
  html[data-btn="split"] .btn-primary.nav .ba{width:40px; height:40px; border-radius:6px; background:var(--btn); color:var(--btn-ink); align-items:center; justify-content:center; font-size:18px; flex:none}
  html[data-btn="split"] .btn-primary.nav[disabled]{background:var(--kelp); color:var(--white)}
  html[data-btn="split"] .btn-ghost{border-radius:8px}

  /* terminal: command-line prompt with a blinking cursor */
  html[data-btn="terminal"] .btn-primary.nav{background:var(--deep); color:var(--white); outline:1px solid var(--line); outline-offset:-1px; border-radius:4px; font:400 15px var(--font-mono); padding:16px 16px; justify-content:flex-start; gap:2px; animation:termPulse 2.6s ease-in-out infinite}
  @keyframes termPulse{0%,100%{outline-color:var(--line)} 50%{outline-color:color-mix(in srgb, var(--btn) 70%, transparent)}}
  html[data-btn="terminal"] .btn-primary.nav .bl::before{content:"> "; color:var(--btn); white-space:pre}
  html[data-btn="terminal"] .btn-primary.nav .bc{width:9px; height:17px; background:var(--btn); margin-left:6px; animation:blink 1s steps(2) infinite}
  html[data-btn="terminal"] .btn-primary.nav .ba{white-space:nowrap; flex:none; margin-left:auto; font-size:11px; color:var(--btn); outline:1px solid color-mix(in srgb, var(--btn) 55%, transparent); border-radius:3px; padding:3px 7px}
  html[data-btn="terminal"] .btn-primary.nav[disabled]{background:var(--deep); color:var(--slate); animation:none; outline-color:var(--line)}
  html[data-btn="terminal"] .btn-primary.nav[disabled] .ba{color:var(--slate); outline-color:var(--line)}
  html[data-btn="terminal"] .btn-primary.nav[disabled] .bc{animation:none; opacity:.3}
  html[data-btn="terminal"] .btn-ghost{font:400 13px var(--font-mono); text-transform:lowercase; letter-spacing:0; border-radius:4px}

  /* compact stats: symbol on the left */
  .stack.compact .tile{display:flex; align-items:center; gap:18px; padding:18px 20px}
  .stack.compact .tile .big{font-size:30px; width:30px; text-align:center; flex:none; line-height:1}
  .stack.compact .tile p{margin:0}

  /* footnotes: fine print with an accent rule and asterisk, so it's noticed without shouting */
  .foot{position:relative; margin-top:22px; padding:2px 0 2px 16px; border-left:2px solid var(--btn);
    font:400 12px/1.55 var(--font-mono); letter-spacing:0; text-transform:none; color:var(--silver)}
  .foot::before{content:"*"; color:var(--btn); margin-right:6px; font-weight:500}

  /* status lights (stats items with light: `green` / `amber` / `red`) */
  .tile .light{width:14px; height:14px; border-radius:50%; flex:none; margin:0 8px 0 4px; background:var(--btn); box-shadow:0 0 10px var(--btn)}
  .tile .light.amber{background:#f2c94c; box-shadow:0 0 10px #f2c94c}
  .tile .light.red{background:#ff6b5b; box-shadow:0 0 10px #ff6b5b; animation:lightPulse 1.6s ease-in-out infinite}
  @keyframes lightPulse{50%{opacity:.45}}

  /* every slide fills the screen like the cover: title at the top, buttons at the bottom,
     content centred in between (so short slides don't leave a gap at the bottom) */
  .step.active:not(.cover){display:flex; flex-direction:column; min-height:calc(100dvh - 120px)}
  .step.active:not(.cover) > .row{margin-top:auto; padding-top:24px}
  .step.active[id^="d"]:not(.cover) > h2{margin-bottom:auto}
  .step.active[id^="d"]:not(.cover) > .row{margin-top:auto}
  .step.active[id^="d"]:not(.cover) > :is(.stack,.facts,.vs,.risks){margin-top:28px; margin-bottom:8px}
  .stack.compact{gap:12px}
  .stack.compact .tile{padding:24px 22px}
  @media (min-width:820px){ .step.active:not(.cover){min-height:auto} }

  /* fact rows: label on the left, text on the right, so 6 fit on one phone screen */
  .facts li{display:grid; grid-template-columns:84px 1fr; gap:14px; align-items:baseline; padding:8px 0; font-size:14.5px; line-height:1.36}
  .facts li span{margin:0; line-height:1.35}
  .step.active[id^="d"]:not(.cover) > .facts{margin-top:20px}

  /* trim the frame a little on phones so content-heavy slides fit without scrolling */
  @media (max-width:819px){
    body{padding-bottom:8px}
    .card{padding-bottom:6px}
    .step.active:not(.cover){min-height:calc(100dvh - 78px)}
    .step.active:not(.cover) > .row{padding-top:16px}
    .step.active[id^="d"]:has(.facts) > h2{font-size:27px}
    .vs .vr > div{padding:9px 10px; font-size:12.5px; line-height:1.32}
    .vs .vl{padding-top:10px!important}
    .vs .vh > div{padding-top:11px; padding-bottom:9px}
    .step.active[id^="d"]:has(.vs) > .kicker{margin-bottom:12px}
    .step.active[id^="d"]:has(.vs) > .vs{margin-top:16px!important}
    .step.active[id^="d"]:has(.facts) > .kicker{margin-bottom:12px}
    .step.active[id^="d"]:has(.facts) > .facts{margin-top:14px!important}
  }
  html[data-btn="terminal"] .row .btn-primary.nav.long .ba{display:none}
  html[data-btn="terminal"] .cover .row .btn-primary.nav.long .ba{display:flex}

  /* ---------- the ask: centred, with a quiet back link ---------- */
  #s-ask.active{justify-content:center}
  #s-ask.active > .kicker{position:absolute; top:38px; left:0; right:0; margin:0}
  #s-ask .taunt{min-height:22px}
  #s-ask #askBackRow{position:static!important; background:none!important; padding:0!important; margin-top:40px!important; justify-content:center}
  #s-ask #askBackRow .btn-ghost{background:none; outline:none; padding:8px 4px; color:var(--slate); font:400 12px var(--font-mono)!important; text-transform:lowercase!important; letter-spacing:0!important}
  #s-ask #askBackRow .btn-ghost::before{content:"← "; white-space:pre}
  #s-ask #askBackRow{display:flex; justify-content:center; width:100%}
  #s-ask #askBackRow .btn-ghost{flex:0 0 auto!important; width:auto!important; margin:0 auto; text-align:center; display:inline-flex; align-items:center; justify-content:center}

  /* date picker screens: options sit in the middle, not stuck to the top */
  #s-day.active > #dayOpts, #s-plan.active > #planOpts, #s-time.active > #timeChips{margin-top:auto}
  #s-day .opts.days{gap:10px}
  #s-day .opt.day{padding:22px 8px 20px}
  #s-day .opt.day .num{font-size:48px}
  #s-day .slots{margin-top:14px}
  #s-day .slots .chip{padding:15px 12px}

  /* "Other" day: a full-width card under the dates */
  #s-day .opt.day.other{grid-column:1/-1; flex-direction:row; align-items:center; text-align:left; gap:16px; padding:16px 18px}
  #s-day .opt.day.other .num{font-size:30px; width:30px; text-align:center; margin:0; color:var(--btn)}
  #s-day .opt.day.other b{display:block; font-weight:500; font-size:15px; color:var(--white)}
  #s-day .opt.day.other span{display:block; font-size:13px; color:var(--silver); margin-top:2px}
  #otherDay{margin-top:12px}

  /* line icons on the date ideas */
  .opt .ico.line{width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:none;
    color:var(--btn); background:color-mix(in srgb, var(--btn) 8%, transparent); outline:1px solid color-mix(in srgb, var(--btn) 22%, transparent); outline-offset:-1px}
  .opt .ico.line svg{width:22px; height:22px}
  .opt.sel .ico.line{background:var(--btn); color:var(--btn-ink); outline-color:var(--btn)}
  .opt:has(.ico.line){align-items:center}