/* ===========================================================================
   ORBDEMO : design tokens (locked from assets/avatar.png + assets/banner.png)
   ---------------------------------------------------------------------------
   Palette   : void purple   #12081C  (page bg, darker than the art so panels
                                        read as accents against it)
               deep purple   #2A0B3A  (tent shadow, panel gradients)
               robe violet   #6B3FA0  (sampled from the wizard's robe)
               violet glow   #9B5DE5  (borders / focus rings)
               gold trim     #C9A227  (sampled from the robe embroidery)
               gold soft     #E4C766  (buy button, highlights)
               ball green    #4ADE80  (sampled from the chart glowing inside
                                        the orb; success state, ROI readout)
               parchment     #E7C48C  (sampled from the banner's scroll)
               ink           #241208  (scroll text, ink-blot copy feedback)
   Type      : Cinzel 700/900, mystical serif display: headers, execute button
               Cormorant Garamond 400/500i/600, atmospheric flavor lines
               IBM Plex Mono 400/500/600, readout, CA, counters, disclaimer
               (self-hosted woff2 in assets/fonts, no runtime remote fetch)
   Spacing   : 4 . 8 . 12 . 16 . 24 . 32 . 48 . 64 . 96 (px)
   Radius    : 22px panels . 14px controls . 8px scroll . 999px pills/dots
   Motion    : "seep settle" cubic-bezier(.22,.9,.32,1). Watermark brightens
               for 1s on every EXECUTE click. prefers-reduced-motion disables
               everything non-essential and snaps to end state.
   =========================================================================== */

@font-face{font-family:"Cinzel";src:url("assets/fonts/cinzel-var.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Cormorant Garamond";src:url("assets/fonts/cormorant-500i.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}

:root{
  --clr-void:#12081C;
  --clr-void-2:#1B0E29;
  --clr-purple:#6B3FA0;
  --clr-purple-deep:#2A0B3A;
  --clr-violet-glow:#9B5DE5;
  --clr-gold:#C9A227;
  --clr-gold-soft:#E4C766;
  --clr-green:#4ADE80;
  --clr-green-deep:#1F7A46;
  --clr-parchment:#E7C48C;
  --clr-parchment-deep:#CBA25E;
  --clr-ink:#241208;
  --text-hi:#F3E9FF;
  --text-body:#C9B7DE;
  --text-faint:#9A87BA;
  --line:rgba(228,199,102,.18);
  --line-strong:rgba(228,199,102,.32);

  --font-display:"Cinzel",Georgia,serif;
  --font-flavor:"Cormorant Garamond",Georgia,serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --radius-lg:22px; --radius-md:14px; --radius-sm:8px; --radius-pill:999px;

  --ease:cubic-bezier(.22,.9,.32,1);
  --dur:380ms; --dur-fast:180ms; --dur-pulse:1000ms;
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur:1ms; --dur-fast:1ms; --dur-pulse:1ms; }
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; height:100%;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; min-height:100%;
  background:var(--clr-void);
  color:var(--text-body);
  font-family:var(--font-flavor);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1{margin:0;text-wrap:balance;}
p{margin:0;}

/* ---------- inline error banner (injected by head script) ---------- */
#boot-error-banner{
  position:fixed;inset:auto 0 0 0;z-index:9999;
  background:#3A0808;color:#FFE3D9;
  font:600 13px/1.5 var(--font-mono);
  padding:12px 16px;text-align:center;
  border-top:2px solid var(--clr-gold);
}

/* ===========================================================================
   WATERMARK: the terminal's own DEMO stamp, tiled edge to edge, fixed above
   the tent art and below the chrome. Brightens for a beat on every EXECUTE.
   =========================================================================== */
.watermark-svg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:4; pointer-events:none;
  opacity:.16; filter:brightness(1) saturate(1);
  transition:opacity var(--dur-pulse) var(--ease), filter var(--dur-pulse) var(--ease);
}
.watermark-svg.is-pulsing{ opacity:.62; filter:brightness(2) saturate(1.35); }
.demo-tile-text{
  font-family:var(--font-mono); font-weight:600; font-size:30px;
  letter-spacing:.06em;
  fill:rgba(243,233,255,.92);
}

/* ===========================================================================
   PAGE SCAFFOLD
   =========================================================================== */
.page{ min-height:100dvh; display:flex; flex-direction:column; }

/* ===========================================================================
   CHROME BAR
   =========================================================================== */
.chrome-bar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-6);
  background:rgba(18,8,28,.74);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.brand{ display:flex; align-items:center; gap:var(--sp-3); min-width:0; }
.brand-mark-img{ border-radius:10px; object-fit:cover; box-shadow:0 0 0 2px var(--line-strong); flex-shrink:0; }
.brand-word{ font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:.02em; color:var(--text-hi); white-space:nowrap; }
.brand-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); white-space:nowrap; }

.status-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:rgba(74,222,128,.12); color:#8FE3A8;
  border:1px solid rgba(74,222,128,.38);
  white-space:nowrap;
}
.status-dot{ width:7px; height:7px; border-radius:50%; background:var(--clr-green); box-shadow:0 0 0 4px rgba(74,222,128,.18); animation:dot-pulse 2.4s ease-in-out infinite; }
@keyframes dot-pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

.chrome-controls{ display:flex; align-items:center; gap:var(--sp-3); }
.icon-btn{ display:inline-flex; align-items:center; gap:8px; transition:transform var(--dur-fast) var(--ease); border-radius:var(--radius-pill); }
.icon-btn:hover{ transform:translateY(-2px); }
.icon-btn--x img{ width:30px; height:30px; }
.icon-btn--buy{
  background:linear-gradient(160deg,var(--clr-gold-soft),var(--clr-gold) 60%,#8a6a2f);
  color:var(--clr-ink); padding:6px 16px 6px 8px;
  box-shadow:0 10px 22px -12px rgba(201,162,39,.75);
}
.icon-btn--buy img{ width:24px; height:24px; }
.buy-label{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.04em; line-height:1.1; }
.buy-label small{ display:block; font-family:var(--font-mono); font-weight:500; font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }

/* ===========================================================================
   STAGE: the wizard's tent. Fixed-viewport feel; the only nav is EXECUTE.
   =========================================================================== */
.stage{
  position:relative; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-7) var(--sp-6);
  overflow-y:auto;
  background-image:url("assets/banner.png");
  background-size:cover; background-position:center 38%; background-repeat:no-repeat;
}
.stage-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%, rgba(18,8,28,.22) 0%, rgba(10,4,16,.84) 68%, rgba(7,3,12,.95) 100%);
}
.stage-grid{
  position:relative; z-index:3; width:100%; max-width:1180px;
  display:grid; grid-template-columns:1.35fr .85fr; gap:var(--sp-7);
  align-items:start;
}

.reveal{ opacity:0; transform:translateY(16px); transition:opacity 620ms var(--ease), transform 620ms var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- terminal panel ---------- */
.terminal-panel{
  background:linear-gradient(165deg, rgba(43,18,64,.88), rgba(18,8,28,.92));
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  padding:var(--sp-7) var(--sp-7);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.75), inset 0 0 0 1px rgba(155,93,229,.1);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.eyebrow{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--clr-green); margin:0 0 var(--sp-3); }
.terminal-panel h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(24px,3.2vw,38px); line-height:1.1; letter-spacing:-.01em; color:var(--text-hi); margin-bottom:var(--sp-4); }
.terminal-sub{ font-family:var(--font-flavor); font-style:italic; font-weight:500; font-size:clamp(16px,1.6vw,19px); line-height:1.55; color:var(--text-body); max-width:46ch; margin-bottom:var(--sp-6); }

.readout{
  position:relative; overflow:hidden;
  min-height:84px; display:flex; align-items:center; gap:var(--sp-4);
  background:rgba(8,3,13,.55); border:1px solid rgba(155,93,229,.3); border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-5); margin-bottom:var(--sp-6);
}
.readout-icon{
  flex-shrink:0; display:inline-flex; opacity:0; transform:scale(.5);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.readout-icon svg circle{ fill:none; stroke:var(--clr-green); stroke-width:2.5; }
.readout-icon svg .check-path{ stroke:var(--clr-green); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; transition:stroke-dashoffset 420ms var(--ease) 120ms; }
.readout.is-success .readout-icon{ opacity:1; transform:scale(1); }
.readout.is-success .readout-icon svg .check-path{ stroke-dashoffset:0; }
.readout-text{ font-family:var(--font-mono); font-size:14.5px; color:var(--text-hi); letter-spacing:.01em; }
.readout.is-success .readout-text{ color:var(--clr-green); }
.cursor{ animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.readout-roi{
  margin-left:auto; font-family:var(--font-mono); font-weight:600; font-size:22px; color:var(--clr-green);
  opacity:0; transform:translateY(4px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-shadow:0 0 18px rgba(74,222,128,.55);
}
.readout.is-success .readout-roi{ opacity:1; transform:none; }

.execute-btn{
  width:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:16.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--clr-ink);
  background:linear-gradient(160deg,#8FE3A8,var(--clr-green) 55%,var(--clr-green-deep));
  border-radius:var(--radius-md); padding:18px 24px;
  box-shadow:0 18px 34px -16px rgba(74,222,128,.55), inset 0 0 0 1px rgba(255,255,255,.28);
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.execute-btn:hover{ transform:translateY(-2px); box-shadow:0 22px 40px -16px rgba(74,222,128,.65), inset 0 0 0 1px rgba(255,255,255,.3); }
.execute-btn:active{ transform:translateY(0) scale(.98); }
.execute-btn:focus-visible{ outline:2px solid var(--clr-gold-soft); outline-offset:3px; }

.counter-row{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px dashed var(--line);
  font-family:var(--font-mono);
}
.counter-label{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.counter-value{
  font-size:25px; font-weight:600; color:var(--clr-gold-soft); font-variant-numeric:tabular-nums;
  transition:transform var(--dur-fast) var(--ease);
}
.counter-value.is-ticked{ transform:scale(1.16); }

/* ---------- CA scroll ---------- */
.scroll-wrap{ display:flex; flex-direction:column; gap:var(--sp-4); align-self:center; }
.scroll-caption{ font-family:var(--font-flavor); font-style:italic; font-weight:500; font-size:13px; color:var(--text-faint); text-align:center; }
.scroll{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:6px;
  margin:0 var(--sp-4); padding:var(--sp-5) var(--sp-6);
  background:linear-gradient(180deg,#EFD9A4,var(--clr-parchment-deep) 90%);
  border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px rgba(36,18,8,.25), 0 20px 40px -20px rgba(0,0,0,.7);
  text-align:left;
  transition:transform var(--dur-fast) var(--ease);
}
.scroll:hover{ transform:translateY(-2px); }
.scroll::before,.scroll::after{
  content:""; position:absolute; top:-9px; width:22px; height:calc(100% + 18px);
  border-radius:var(--radius-pill);
  background:radial-gradient(circle at 35% 30%, #E9CB86, #8a6a2f 70%, #5b431c 100%);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.6);
}
.scroll::before{ left:-11px; }
.scroll::after{ right:-11px; }
.scroll-ink-blot{
  position:absolute; inset:0; border-radius:var(--radius-sm);
  background:radial-gradient(circle at var(--ix,50%) var(--iy,50%), rgba(20,8,4,.92) 0%, rgba(20,8,4,.72) 45%, transparent 72%);
  opacity:0; transform:scale(.15);
  transform-origin:var(--ix,50%) var(--iy,50%);
  transition:opacity 520ms var(--ease), transform 760ms var(--ease);
}
.scroll.is-copied .scroll-ink-blot{ opacity:1; transform:scale(1); }
.scroll-label{ position:relative; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#5b3d16; transition:color var(--dur) var(--ease); }
.scroll.is-copied .scroll-label{ color:#8FE3A8; }
.scroll-ca{ position:relative; font-family:var(--font-mono); font-size:14px; font-weight:600; color:var(--clr-ink); word-break:break-all; transition:color var(--dur) var(--ease); }
.scroll.is-copied .scroll-ca{ color:#F3E9FF; }

/* ===========================================================================
   BELOW-FOLD DEPTH: lore, ledger, testimonials, upsell parody, FAQ.
   Hero mechanic stays a fixed-viewport tent scene above; these sections are
   normal document flow, each a full-width band with its own tint so the
   page reads like turning pages further into the tent rather than a second
   copy of the hero.
   =========================================================================== */
.section-inner{ max-width:880px; margin:0 auto; padding:0 var(--sp-6); }
.eyebrow--center{ text-align:center; }
.lore-section,.ledger-section,.testimonial-section,.upsell-section,.faq-section{
  position:relative; padding:var(--sp-9) 0; border-top:1px solid var(--line);
}
.lore-section h2,.ledger-section h2,.testimonial-section h2,.upsell-section h2,.faq-section h2{
  font-family:var(--font-display); font-weight:900; text-align:center;
  font-size:clamp(24px,2.8vw,36px); line-height:1.15; color:var(--text-hi);
  max-width:640px; margin:0 auto var(--sp-6);
}

/* ---------- THE TENT (lore) ---------- */
.lore-section{ background:radial-gradient(ellipse at 50% -10%, rgba(107,63,160,.24), transparent 62%), var(--clr-void-2); }
.lore-inner{ max-width:680px; }
.lore-body p{ font-family:var(--font-flavor); font-size:18px; line-height:1.7; color:var(--text-body); margin-bottom:var(--sp-5); }
.lore-body p:first-of-type::first-letter{
  font-family:var(--font-display); font-weight:900; font-size:3.2em; line-height:.78;
  float:left; padding:4px var(--sp-2) 0 0; color:var(--clr-gold-soft);
}
.lore-quote{
  margin:var(--sp-6) 0; padding:var(--sp-5) var(--sp-6);
  border-left:3px solid var(--clr-gold);
  font-family:var(--font-flavor); font-style:italic; font-weight:500; font-size:20px; line-height:1.6;
  color:var(--clr-gold-soft);
  background:rgba(201,162,39,.06); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}

/* ---------- THE LEDGER (real stats) ---------- */
.ledger-section{ background:var(--clr-void); }
.ledger-section .section-inner{ text-align:center; }
.ledger-sub{ font-family:var(--font-flavor); font-style:italic; font-size:16px; color:var(--text-faint); max-width:52ch; margin:0 auto var(--sp-7); }
.ledger-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.ledger-tile{
  display:flex; flex-direction:column; gap:var(--sp-2); align-items:center;
  padding:var(--sp-6) var(--sp-4);
  background:linear-gradient(165deg, rgba(43,18,64,.7), rgba(18,8,28,.7));
  border:1px solid var(--line); border-top:2px solid var(--clr-green);
  border-radius:var(--radius-md);
}
.ledger-value{ font-family:var(--font-mono); font-weight:600; font-size:clamp(28px,4vw,38px); color:var(--clr-gold-soft); font-variant-numeric:tabular-nums; }
.ledger-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }

/* ---------- READINGS FROM THE FAITHFUL (testimonials) ---------- */
.testimonial-section{ background:linear-gradient(180deg, var(--clr-void-2), rgba(42,11,58,.55)); }
.testimonial-section .section-inner{ max-width:960px; }
.testimonial-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6) var(--sp-5); }
.testimonial-card{
  position:relative; margin:0;
  padding:var(--sp-5) var(--sp-5) var(--sp-4);
  background:linear-gradient(180deg,#EFD9A4,var(--clr-parchment-deep) 92%);
  border-radius:6px 6px 4px 4px;
  box-shadow:0 20px 34px -22px rgba(0,0,0,.65);
  transform:rotate(var(--tilt,-1.1deg));
}
.testimonial-card:nth-child(even){ --tilt:1.3deg; }
.testimonial-card:nth-child(3){ --tilt:1.6deg; }
.testimonial-card::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE7A8, var(--clr-gold) 70%, #6b4e1e 100%);
  box-shadow:0 3px 6px -2px rgba(0,0,0,.6);
}
.stars{ color:var(--clr-gold); font-size:14px; letter-spacing:.1em; margin-bottom:var(--sp-3); }
.testimonial-card blockquote{ margin:0 0 var(--sp-3); font-family:var(--font-flavor); font-style:italic; font-weight:500; font-size:16.5px; line-height:1.55; color:var(--clr-ink); }
.testimonial-card figcaption{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#5b3d16; }

/* ---------- ASCEND TO THE FULL SEANCE (upsell parody) ---------- */
.upsell-section{ background:var(--clr-void-2); }
.upsell-sub{ font-family:var(--font-flavor); font-style:italic; font-size:16px; text-align:center; color:var(--text-faint); margin-bottom:var(--sp-7); }
.tier-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); align-items:start; }
.tier-card{
  position:relative;
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:linear-gradient(165deg, rgba(43,18,64,.85), rgba(18,8,28,.92));
  border:1px solid var(--line-strong); border-radius:var(--radius-lg);
  box-shadow:0 24px 44px -28px rgba(0,0,0,.7);
}
.tier-card--featured{
  border-color:var(--clr-gold);
  box-shadow:0 30px 56px -26px rgba(201,162,39,.4), inset 0 0 0 1px rgba(228,199,102,.22);
  transform:translateY(-10px);
}
.tier-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill);
  background:linear-gradient(160deg,var(--clr-gold-soft),var(--clr-gold)); color:var(--clr-ink);
}
.tier-name{ font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text-hi); margin:0 0 var(--sp-1); }
.tier-price{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; color:var(--clr-green); margin:0 0 var(--sp-5); }
.tier-list{ list-style:none; margin:0 0 var(--sp-6); padding:0; display:flex; flex-direction:column; gap:var(--sp-2); }
.tier-list li{ font-family:var(--font-flavor); font-size:15px; line-height:1.5; color:var(--text-body); padding-left:var(--sp-4); position:relative; }
.tier-list li::before{ content:"\2726"; position:absolute; left:0; top:1px; color:var(--clr-gold); font-size:11px; }
.tier-btn{
  width:100%; padding:12px 16px;
  font-family:var(--font-mono); font-weight:600; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-hi); background:rgba(155,93,229,.14); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tier-btn:hover{ transform:translateY(-2px); background:rgba(155,93,229,.24); }
.tier-response{
  margin:var(--sp-3) 0 0; min-height:0; font-family:var(--font-flavor); font-style:italic; font-size:13.5px; color:var(--clr-gold-soft);
  max-height:0; overflow:hidden; opacity:0; transition:opacity var(--dur) var(--ease), max-height var(--dur) var(--ease);
}
.tier-response.is-shown{ max-height:80px; opacity:1; margin-top:var(--sp-3); }

/* ---------- QUESTIONS ASKED AT THE TENT FLAP (FAQ) ---------- */
.faq-section{ background:var(--clr-void); }
.faq-section .section-inner{ max-width:760px; }
.faq-list{ display:flex; flex-direction:column; gap:var(--sp-3); }
.faq-item{
  background:rgba(43,18,64,.4); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-5);
}
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:700; font-size:15.5px; color:var(--text-hi);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-icon{ flex-shrink:0; width:18px; height:18px; position:relative; }
.faq-icon::before,.faq-icon::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--clr-gold-soft);
  transform:translate(-50%,-50%);
}
.faq-icon::before{ width:12px; height:2px; }
.faq-icon::after{ width:2px; height:12px; transition:transform var(--dur-fast) var(--ease); }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-item p{
  margin:var(--sp-4) 0 0; padding-top:var(--sp-4); border-top:1px dashed var(--line);
  font-family:var(--font-flavor); font-size:15.5px; line-height:1.65; color:var(--text-body);
}

/* ===========================================================================
   DISCLAIMER STRIP: fixed at the foot, never hidden.
   =========================================================================== */
.disclaimer-strip{
  position:relative; z-index:10;
  background:rgba(10,4,16,.94);
  border-top:1px solid var(--line);
  padding:var(--sp-4) var(--sp-6) var(--sp-5);
}
.disclaimer{ margin:0 0 var(--sp-2); font-family:var(--font-mono); font-size:11.5px; line-height:1.6; color:var(--text-faint); max-width:900px; }
.footer-meta{
  display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);
}
#canary{ color:var(--clr-gold-soft); }
#canary.is-ok{ color:var(--clr-green); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:920px){
  .stage-grid{ grid-template-columns:1fr; }
  .scroll-wrap{ order:-1; }
  .terminal-panel{ padding:var(--sp-6); }
  .tier-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .tier-card--featured{ transform:none; order:-1; }
}

@media (max-width:640px){
  .chrome-bar{ padding:var(--sp-3) var(--sp-4); flex-wrap:wrap; row-gap:10px; }
  .brand-tag{ display:none; }
  .status-chip{ font-size:9.5px; padding:5px 10px; }
  .buy-label small{ display:none; }
  .icon-btn--buy{ padding:6px 12px 6px 8px; }
  .stage{ padding:var(--sp-6) var(--sp-4); }
  .terminal-panel{ padding:var(--sp-5); }
  .readout{ flex-wrap:wrap; }
  .readout-roi{ margin-left:0; width:100%; }
  .disclaimer-strip{ padding:var(--sp-4); }
  .lore-section,.ledger-section,.testimonial-section,.upsell-section,.faq-section{ padding:var(--sp-7) 0; }
  .section-inner{ padding:0 var(--sp-4); }
  .ledger-grid{ grid-template-columns:1fr; gap:var(--sp-4); }
  .testimonial-grid{ grid-template-columns:1fr; }
  .testimonial-card{ transform:none; }
  .lore-body p{ font-size:16.5px; }
}

@media (max-width:400px){
  .brand-word{ font-size:16px; }
  .chrome-controls{ gap:var(--sp-2); }
  .counter-value{ font-size:21px; }
  .execute-btn{ font-size:14.5px; padding:16px 18px; }
}

/* ===========================================================================
   SUCCESS SPARK PARTICLES: brief burst from the execute button on a win.
   =========================================================================== */
.spark-layer{ position:fixed; width:0; height:0; z-index:50; pointer-events:none; }
.spark{
  position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px;
  border-radius:50%;
  background:radial-gradient(circle, #F3E9FF, var(--clr-green) 60%, transparent 75%);
  animation:spark-fly 720ms var(--ease) forwards;
  animation-delay:var(--delay,0ms);
  opacity:0;
}
@keyframes spark-fly{
  0%{ opacity:0; transform:translate(0,0) scale(.4); }
  15%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--dx),var(--dy)) scale(1); }
}
@media (prefers-reduced-motion:reduce){ .spark-layer{ display:none; } }