/* landing.css — Fog waitlist landing page.
   Inherits design tokens from ../styles.css. Page-specific styling only. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;}
img{display:block;max-width:100%;}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* subtle warm texture — keeps the page tied to the parchment world */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(circle at 18% 12%, rgba(198,154,62,.05), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(79,135,168,.05), transparent 42%);
}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:1;}

/* ─── type helpers ─── */
.display{font-family:var(--font-display);font-weight:400;letter-spacing:.3px;line-height:1.04;}
.serif-italic{font-family:var(--font-old);font-style:italic;}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:9px;
}
.eyebrow.gold{color:var(--gold);}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.6;}

/* ─── buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-weight:700;font-size:16px;cursor:pointer;border:none;
  padding:15px 26px;border-radius:var(--radius-l);transition:transform .12s var(--ease-out),background .2s,box-shadow .2s;
  white-space:nowrap;text-decoration:none;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent);}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-ghost{background:transparent;color:var(--ink);padding:12px 18px;}
.btn-ghost:hover{color:var(--accent);}

/* ─── sticky header ─── */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:50;
  transition:background .3s,box-shadow .3s,backdrop-filter .3s;
}
.hdr.scrolled{background:rgba(244,240,232,.82);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 var(--line);}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:26px;letter-spacing:.5px;}
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--gold));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:var(--shadow-s);}
.brand-mark svg{width:18px;height:18px;}
.hdr .btn{padding:11px 20px;font-size:15px;}

/* ─── hero ─── */
.hero{position:relative;padding:130px 0 70px;overflow:hidden;}
.hero-glow{position:absolute;top:-12%;right:-6%;width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,154,62,.16),rgba(198,154,62,0) 62%);pointer-events:none;z-index:0;}
.hero-glow.two{left:-18%;right:auto;top:30%;width:680px;height:680px;
  background:radial-gradient(circle,rgba(79,135,168,.13),rgba(79,135,168,0) 62%);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:1;}
.hero h1{font-size:68px;margin:18px 0 0;}
.hero h1 em{font-style:normal;font-family:var(--font-old);font-style:italic;color:var(--accent);}
.hero-sub{font-size:20px;line-height:1.5;color:var(--ink-2);margin:22px 0 0;max-width:30em;text-wrap:pretty;}

/* signup form */
/* Desktop: email + submit on row 1, name/city on row 2. DOM order is
   email -> name/city -> submit (so keyboard/tab order fills fields then submits);
   grid areas place the button up on row 1 without changing DOM order. */
.signup{
  margin-top:30px;max-width:480px;
  display:grid;grid-template-columns:1fr auto;gap:10px;
  grid-template-areas:"email submit" "opt opt";
}
.signup > input[name="email"]{grid-area:email;}
.signup > button[type=submit]{grid-area:submit;}
.signup > .form-optional{grid-area:opt;display:flex;gap:10px;}
.signup > .form-err,.signup > .form-note{grid-column:1 / -1;}
.field{
  flex:1;min-width:0;font-family:var(--font-sans);font-size:16px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-l);
  padding:15px 18px;transition:border-color .2s,box-shadow .2s;
}
.field::placeholder{color:var(--faint);}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint);}
.form-note{font-size:13.5px;color:var(--ink-3);margin:12px 2px 0;display:flex;align-items:center;gap:7px;}
.form-note svg{width:15px;height:15px;flex-shrink:0;color:var(--up);}
.form-err{color:var(--down);font-size:13.5px;margin:10px 2px 0;display:none;}
.form-err.show{display:block;}

/* success state */
.success{display:none;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-2xl);
  padding:26px;max-width:480px;box-shadow:var(--shadow-s);animation:pop .45s var(--ease-pop);}
.success.show{display:block;}
@keyframes pop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
.success-badge{width:54px;height:54px;border-radius:var(--radius-pill);background:var(--up-bg);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.success-badge svg{width:28px;height:28px;color:var(--up);}
.success h3{font-family:var(--font-display);font-size:25px;margin:0 0 6px;font-weight:400;}
.success p{margin:0;color:var(--ink-2);font-size:15.5px;}
.success .pos{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-2);font-size:14.5px;color:var(--ink-3);}
.success .pos b{color:var(--accent);font-family:var(--font-display);font-size:19px;}

/* social proof row */
.proof{display:flex;align-items:center;gap:14px;margin-top:26px;}
.avatars{display:flex;}
.avatars span{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--bg);margin-left:-11px;
  box-shadow:var(--shadow-s);}
.avatars span:first-child{margin-left:0;}
.proof-txt{font-size:14.5px;color:var(--ink-2);}
.proof-txt b{color:var(--ink);}

/* ─── phone frame (marketing) ─── */
.phone{
  --w:312px; width:var(--w); flex-shrink:0; position:relative;
  border-radius:calc(var(--w) * .135);
  padding:calc(var(--w) * .03);
  background:linear-gradient(152deg,#46464d 0%,#17171a 42%,#0d0d0f 58%,#34343b 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 1.5px 2px rgba(255,255,255,.16) inset,
    0 -1px 2px rgba(0,0,0,.5) inset,
    0 40px 80px -24px rgba(20,18,15,.55),
    0 12px 28px -12px rgba(20,18,15,.42);
}
.phone-screen{
  position:relative; border-radius:calc(var(--w) * .105); overflow:hidden;
  aspect-ratio:390 / 844; background:#e9e6df;
  box-shadow:0 0 0 2.5px #000;
}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.phone-screen .img-dark{display:none;}
html.dark .phone-screen .img-light{display:none;}
html.dark .phone-screen .img-dark{display:block;}

/* Real device captures (screen recordings / screenshots from the shipping iOS app).
   The footage already contains the device status bar and Dynamic Island, so these
   phones drop the drawn `.island` in the markup — two stacked islands read as a mistake. */
.capture-video{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  background:#d6bf97;
}
html.dark .capture-video{background:#15110b;}
.phone-screen .capture-video.img-dark{display:none;}
html.dark .phone-screen .capture-video.img-light{display:none;}
html.dark .phone-screen .capture-video.img-dark{display:block;}

/* ─── store badges (pre-launch placeholders) ─── */
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;}
.stores.centred{justify-content:center;}
.store-badge{
  display:inline-flex;align-items:center;gap:11px;
  padding:9px 18px 9px 15px;border-radius:var(--radius-l);
  border:1.5px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:default;user-select:none;
}
.store-badge svg{width:22px;height:22px;flex-shrink:0;opacity:.8;}
.store-txt{display:flex;flex-direction:column;line-height:1.15;font-weight:700;font-size:15.5px;letter-spacing:.2px;}
.store-txt small{font-weight:500;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;opacity:.65;}
.final .store-badge{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:rgba(255,255,255,.82);}
/* live gameplay iframe — fixed app size, scaled to fit the screen by JS.
   Hidden by default (GIF fallback shows); revealed by JS only when the page
   is SERVED over http(s) — Babel can't compile from file:// locally. */
.phone-screen .gameplay-frame{
  display:none;position:absolute;top:0;left:0;width:390px;height:844px;border:0;
  transform-origin:top left;pointer-events:none;background:#d6bf97;
}
html.dark .phone-screen .gameplay-frame{background:#15110b;}
.phone-screen.use-live .gameplay-frame{display:block;}
.phone-screen.use-live .gameplay-gif{display:none !important;}
.phone .island{
  position:absolute;top:calc(var(--w) * .035);left:50%;transform:translateX(-50%);
  width:30%;height:calc(var(--w) * .036);background:#000;border-radius:var(--radius-pill);z-index:5;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.hero .phone{margin:0 auto;transform:rotate(1.2deg);}
.hero .phone-wrap{position:relative;z-index:1;perspective:1400px;}

/* floating chips around hero phone */
.float-chip{position:absolute;z-index:4;background:var(--surface);border-radius:var(--radius-l);
  box-shadow:var(--shadow-m);padding:11px 15px;display:flex;align-items:center;gap:10px;
  font-size:13.5px;font-weight:600;animation:floaty 5s ease-in-out infinite;}
.float-chip .ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;}
.float-chip small{display:block;font-size:11px;color:var(--ink-3);font-weight:500;}
.fc-1{top:14%;left:-6%;animation-delay:0s;}
.fc-2{bottom:16%;right:-7%;animation-delay:1.5s;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ─── stat band ─── */
.band{background:var(--ink);color:#fff;padding:30px 0;position:relative;z-index:1;}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center;}
.band .n{font-family:var(--font-display);font-size:42px;line-height:1;}
.band .n .serif-italic{color:var(--gold);}
.band .l{font-size:14px;color:rgba(255,255,255,.62);margin-top:8px;}
.band-div{width:1px;background:rgba(255,255,255,.14);}

/* ─── feature sections ─── */
.feature{padding:90px 0;position:relative;z-index:1;}
.feature:nth-child(even of .feature){background:var(--surface-2);}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.feature.flip .feat-copy{order:2;}
.feat-copy h2{font-size:46px;margin:16px 0 0;}
.feat-copy h2 em{font-style:normal;font-family:var(--font-old);font-style:italic;color:var(--accent);}
.feat-copy p{font-size:18.5px;line-height:1.6;color:var(--ink-2);margin:20px 0 0;max-width:30em;text-wrap:pretty;}
.feat-list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px;}
.feat-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:var(--ink);}
.feat-list .tick{width:24px;height:24px;border-radius:8px;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.feat-list .tick svg{width:14px;height:14px;}
.feat-phone{display:flex;justify-content:center;position:relative;}
.feature .phone{--w:300px;}
.feature.flip .phone{transform:rotate(-1.5deg);}
.feature .phone{transform:rotate(1.5deg);}
.feat-halo{position:absolute;width:120%;height:120%;top:-10%;left:-10%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(79,135,168,.10),transparent 60%);}
.feature.flip .feat-halo{background:radial-gradient(circle,rgba(198,154,62,.13),transparent 60%);}

/* big pull question */
.pull{padding:96px 0;text-align:center;position:relative;z-index:1;}
.pull .q{font-family:var(--font-display);font-size:54px;line-height:1.1;max-width:16em;margin:0 auto;}
.pull .q em{font-family:var(--font-old);font-style:italic;color:var(--accent);}
.pull .sub{font-size:19px;color:var(--ink-2);margin:24px auto 0;max-width:34em;text-wrap:pretty;}

/* ─── how it works ─── */
.how{padding:90px 0;position:relative;z-index:1;}
.how-head{text-align:center;margin-bottom:54px;}
.how-head h2{font-size:44px;margin:14px 0 0;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.step{background:var(--surface);border-radius:var(--radius-2xl);padding:32px;box-shadow:var(--shadow-s);
  position:relative;overflow:hidden;}
.step-n{font-family:var(--font-display);font-size:18px;color:var(--accent);}
.step-ic{width:56px;height:56px;border-radius:16px;background:var(--accent-tint);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin:14px 0 18px;}
.step-ic svg{width:30px;height:30px;}
.step h3{font-family:var(--font-display);font-size:24px;font-weight:400;margin:0 0 8px;}
.step p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55;}

/* ─── final CTA ─── */
.final{padding:100px 0;position:relative;z-index:1;overflow:hidden;}
.final-card{background:linear-gradient(160deg,#26303a,#1b2229);color:#fff;border-radius:32px;
  padding:64px 56px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-l);}
.final-card::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(circle at 78% 20%,rgba(198,154,62,.28),transparent 45%),
             radial-gradient(circle at 15% 90%,rgba(79,135,168,.3),transparent 45%);}
.final-card>*{position:relative;z-index:1;}
.final-card .eyebrow{color:var(--gold);}
.final-card h2{font-family:var(--font-display);font-weight:400;font-size:50px;line-height:1.08;margin:16px auto 0;max-width:16em;}
.final-card h2 em{font-family:var(--font-old);font-style:italic;color:var(--gold);}
.final-card p{color:rgba(255,255,255,.7);font-size:18px;margin:18px auto 0;max-width:34em;}
.final .signup{margin:30px auto 0;}
.final .field{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff;}
.final .field::placeholder{color:rgba(255,255,255,.5);}
.final .field:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(198,154,62,.2);background:rgba(255,255,255,.16);}
.final .btn-primary{background:var(--gold);color:#26303a;box-shadow:0 6px 16px rgba(198,154,62,.4);}
.final .btn-primary:hover{background:#d3a948;}
.final .form-note{color:rgba(255,255,255,.6);}
.final .form-note svg{color:var(--gold);}
.final .success{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff;}
.final .success h3{color:#fff;}
.final .success p{color:rgba(255,255,255,.72);}
.final .success .pos{border-color:rgba(255,255,255,.15);color:rgba(255,255,255,.65);}
.final .success .pos b{color:var(--gold);}
.final .success-badge{background:rgba(198,154,62,.2);}
.final .success-badge svg{color:var(--gold);}

/* ─── FAQ ─── */
.faq{padding:80px 0 100px;position:relative;z-index:1;}
.faq-head{text-align:center;margin-bottom:46px;}
.faq-head h2{font-size:42px;margin:0;}
.faq-list{max-width:760px;margin:0 auto;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{list-style:none;cursor:pointer;padding:24px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:19px;font-weight:600;font-family:var(--font-sans);}
.qa summary::-webkit-details-marker{display:none;}
.qa .plus{width:26px;height:26px;flex-shrink:0;position:relative;transition:transform .25s;}
.qa .plus::before,.qa .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px;}
.qa .plus::before{top:50%;left:2px;right:2px;height:2.4px;transform:translateY(-50%);}
.qa .plus::after{left:50%;top:2px;bottom:2px;width:2.4px;transform:translateX(-50%);transition:opacity .25s;}
.qa[open] .plus::after{opacity:0;}
.qa-body{padding:0 4px 26px;color:var(--ink-2);font-size:16.5px;line-height:1.6;max-width:62ch;}

/* ─── footer ─── */
.foot{background:var(--ink);color:rgba(255,255,255,.66);padding:54px 0 40px;position:relative;z-index:1;}
.foot-in{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;flex-wrap:wrap;}
.foot .brand{color:#fff;}
.foot-tag{font-family:var(--font-old);font-style:italic;font-size:16px;color:rgba(255,255,255,.5);margin-top:8px;}
.foot-links{display:flex;gap:26px;font-size:14.5px;}
.foot-links a{text-decoration:none;opacity:.8;}
.foot-links a:hover{opacity:1;color:#fff;}
.foot-copy{margin-top:34px;font-size:13px;color:rgba(255,255,255,.4);}

/* ─── sticky mobile CTA ─── */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(244,240,232,.92);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--line),0 -8px 24px rgba(33,30,26,.06);
  display:none;}
.sticky-cta .btn{width:100%;}

/* ─── reveal-on-scroll ─── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}.float-chip{animation:none;}}

/* ─── responsive ─── */
@media (max-width:920px){
  .hero h1{font-size:54px;}
  .hero-grid{grid-template-columns:1fr;gap:46px;text-align:center;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .signup,.proof{margin-left:auto;margin-right:auto;}
  .proof{justify-content:center;}
  .feat-grid{grid-template-columns:1fr;gap:40px;}
  .feature .feat-copy{order:2 !important;text-align:center;}
  .feat-copy p{margin-left:auto;margin-right:auto;}
  .feat-list{align-items:center;}
  .feat-list li{text-align:left;}
  .steps{grid-template-columns:1fr;}
  .band-grid{gap:10px;}
}
@media (max-width:620px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .hero{padding:104px 0 50px;}
  .hero h1{font-size:42px;}
  .hero-sub{font-size:18px;}
  .feat-copy h2{font-size:34px;}
  .pull .q{font-size:34px;}
  .final-card{padding:44px 24px;}
  .final-card h2{font-size:34px;}
  .how-head h2,.faq-head h2{font-size:32px;}
  .band .n{font-size:32px;}
  /* Mobile: single column stacking straight from DOM order -> email, name, city, submit. */
  .signup{display:flex;flex-direction:column;}
  .signup > .form-optional{flex-direction:column;}
  .signup > button[type=submit]{width:100%;}
  .hdr .hdr-cta{display:none;}
  .sticky-cta{display:block;}
  .float-chip{display:none;}
  .band-div{display:none;}
  .final{padding:70px 0;}
}

/* ════════════════ HEADER ACTIONS + THEME TOGGLE ════════════════ */
.hdr-actions{display:flex;align-items:center;gap:12px;}
.theme-toggle{
  width:42px;height:42px;border-radius:var(--radius-pill);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);background:transparent;border:1.5px solid var(--line);
  cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .12s var(--ease-out);
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-3);}
.theme-toggle:active{transform:scale(.92);}
.theme-toggle svg{width:20px;height:20px;display:block;}
.theme-toggle .ic-sun{display:none;}
.theme-toggle .ic-moon{display:block;}
html.dark .theme-toggle .ic-moon{display:none;}
html.dark .theme-toggle .ic-sun{display:block;}

/* ════════════════ DARK MODE ════════════════
   Same Unmapped aesthetic, inverted into warm-dark tones.
   Most of the page reads design tokens, so we remap them here and
   patch only the few elements that hard-code a light/dark color. */
html.dark{
  color-scheme:dark;
  --ink:#ece5d8;        /* primary text — warm off-white */
  --ink-2:#b7af9f;      /* secondary */
  --ink-3:#8b8474;      /* tertiary */
  --faint:#6e6757;      /* hints / meta */
  --bg:#17140f;         /* warm near-black canvas */
  --surface:#221d16;    /* cards, sheets, fields */
  --surface-2:#1c1812;  /* alt / nested surface */
  --line:rgba(236,229,216,.12);
  --line-2:rgba(236,229,216,.07);
  --fill-soft:rgba(236,229,216,.07);
  --fill-track:rgba(236,229,216,.12);
  --accent:#6ba6c7;     /* slate blue, lifted for dark */
  --accent-d:#5b95b6;
  --accent-tint:rgba(107,166,199,.16);
  --gold:#d6ac57;       /* warm gold, lifted */
}
html.dark body{background:var(--bg);color:var(--ink);}
/* warm ambient texture a touch stronger on dark */
html.dark body::before{
  opacity:.7;
  background:
    radial-gradient(circle at 18% 10%, rgba(214,172,87,.07), transparent 42%),
    radial-gradient(circle at 84% 80%, rgba(107,166,199,.08), transparent 44%);
}
/* header / sticky glass */
html.dark .hdr.scrolled{background:rgba(23,20,15,.82);box-shadow:0 1px 0 var(--line);}
html.dark .sticky-cta{
  background:rgba(23,20,15,.92);
  box-shadow:0 -1px 0 var(--line),0 -8px 24px rgba(0,0,0,.45);
}
/* floating / raised elements need an edge once warm-ink shadows vanish on dark */
html.dark .float-chip{border:1px solid var(--line);}
html.dark .phone{box-shadow:
  0 0 0 1px rgba(255,255,255,.06) inset,
  0 1.5px 2px rgba(255,255,255,.12) inset,
  0 40px 80px -24px rgba(0,0,0,.6),
  0 0 0 1px rgba(236,229,216,.06);}
/* footer stays a deep warm panel (its bg uses --ink in light mode) */
html.dark .foot{background:#100d0a;color:rgba(236,229,216,.62);}
/* final CTA: keep it a spotlight, warmed to match the palette */
html.dark .final-card{
  background:linear-gradient(160deg,#2b2619,#1d1910);
  box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(0,0,0,.55);
}
html.dark .final .btn-primary{color:#241f12;}