/* ===========================================================================
   ORBTOY : design tokens (locked from assets/avatar.png + assets/banner.png,
   ui-ux-pro-max "Micro-interactions / industrial slate" search as the
   starting foundation, overridden to the brief's black/silver/blue)
   ---------------------------------------------------------------------------
   Palette   : void black   #0B0D10  (page background, the desk-at-night mood)
               panel        #171B21  (raised chrome surfaces)
               ink          #0A0C0E  (plate outline, deepest shadow)
               steel-100/300/500/700 (brushed metal ramp, sampled off the
                 clamp bracket and wingnut screws in avatar.png)
               blue         #1C8FD1  (sampled 15,113,165 off the 8-ball's
                 liquid window, brightened for UI legibility)
               paper        #EDE6D6  (the one warm surface, receipt section
                 only, so it reads as a printed slip dropped on a black desk)
   Type      : Space Grotesk 500/700, display, the chrome / all UI text
               Spectral 500/600 italic, the prediction window and receipt
                 headline, an "oracle" serif against everything else being
                 a clean industrial sans
               JetBrains Mono 400/500/700, CA, ticker, counters, line items
               (self-hosted woff2 in assets/fonts, no runtime remote fetch)
   Spacing   : 4 . 8 . 12 . 16 . 24 . 32 . 48 . 64 . 96 . 128 (px)
   Radius    : 20px panels . 14px controls . 8px tags . 999px pills/buttons
   Motion    : "shake" cubic-bezier(.36,.07,.19,.97) 560ms on the ball,
               "window flip" 170ms out / 170ms in on the prediction text,
               420ms panels, linear infinite ticker marquee.
               prefers-reduced-motion disables all of it and snaps to end
               state (ticker text still shows, just static, no scroll).
   =========================================================================== */

@font-face{font-family:"Space Grotesk";src:url("assets/fonts/spacegrotesk-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Grotesk";src:url("assets/fonts/spacegrotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Spectral";src:url("assets/fonts/spectral-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Spectral";src:url("assets/fonts/spectral-500italic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Spectral";src:url("assets/fonts/spectral-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jetbrainsmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jetbrainsmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jetbrainsmono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  --clr-void:#0B0D10;
  --clr-void-2:#12151A;
  --clr-panel:#171B21;
  --clr-panel-2:#1D222A;
  --clr-ink:#0A0C0E;
  --clr-steel-100:#EDEFF1;
  --clr-steel-300:#C7CDD4;
  --clr-steel-500:#8A929C;
  --clr-steel-700:#4A5560;
  --clr-blue:#1C8FD1;
  --clr-blue-deep:#0F5E8C;
  --clr-blue-dim:rgba(28,143,209,.16);
  --clr-green:#34D399;
  --clr-paper:#EDE6D6;
  --clr-paper-2:#E4DBC6;
  --clr-paper-ink:#2B2620;

  --text-hi:#F1F3F5;
  --text-body:#9CA3AC;
  --text-faint:#5C636B;
  --line:rgba(199,205,212,.12);
  --line-strong:rgba(199,205,212,.24);

  --font-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-serif:"Spectral",Georgia,serif;
  --font-mono:"JetBrains 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; --sp-10:128px;

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

  --ease:cubic-bezier(.16,.84,.32,1);
  --ease-shake:cubic-bezier(.36,.07,.19,.97);
  --dur-panel:420ms; --dur-shake:560ms; --dur-flip:170ms;

  --ticker-h:34px;
  --rail-h:64px;
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur-panel:1ms; --dur-shake:1ms; --dur-flip:1ms; }
}

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

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

img{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3{color:var(--text-hi);font-family:var(--font-display);margin:0;text-wrap:balance;}
p{margin:0;}
ol,ul{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--clr-blue);
  margin:0 0 var(--sp-3);
}

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

/* ===========================================================================
   TICKER RAIL: the permanent cost-comparison strip. Sticky above everything
   else, always visible per the brief, styled like a stock-ticker tape.
   =========================================================================== */
.ticker-rail{
  position:sticky; top:0; z-index:110;
  height:var(--ticker-h);
  background:var(--clr-ink);
  border-bottom:1px solid rgba(28,143,209,.3);
  overflow:hidden;
  display:flex; align-items:center;
}
.ticker-track{
  display:flex; white-space:nowrap;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--clr-steel-300);
  animation:ticker-scroll 34s linear infinite;
  will-change:transform;
}
.ticker-track span{ padding-right:0; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; overflow-x:auto; }
}

/* ===========================================================================
   DESK RAIL: brand + nav controls, sticky under the ticker.
   =========================================================================== */
.desk-rail{
  position:sticky; top:var(--ticker-h); z-index:100;
  height:var(--rail-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-5);
  background:rgba(11,13,16,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-panel) var(--ease), box-shadow var(--dur-panel) var(--ease);
}
.desk-rail.is-scrolled{ border-color:var(--line-strong); box-shadow:0 12px 28px -18px rgba(0,0,0,.7); }

.brand{ display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; }
.brand-mark-icon{ border-radius:6px; }
.brand-mark{ font-weight:700; font-size:18px; letter-spacing:-.01em; color:var(--text-hi); }
.brand-sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }

.rail-controls{ display:flex; align-items:center; gap:var(--sp-3); }
.icon-btn{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; border-radius:var(--radius-pill);
  padding:8px; transition:transform var(--dur-panel) var(--ease), background var(--dur-panel) var(--ease);
}
.icon-btn:hover{ transform:translateY(-2px); background:var(--clr-panel); }
.buy-btn{
  background:var(--clr-panel-2); color:var(--text-hi);
  padding:8px 16px 8px 10px;
  font-weight:700; font-size:13px;
  border:1px solid var(--line-strong);
}
.buy-btn:hover{ background:var(--clr-blue-deep); border-color:var(--clr-blue); }
.buy-btn .wingnut-icon{ transition:transform 420ms var(--ease-shake); }
.buy-btn:hover .wingnut-icon{ transform:rotate(50deg); }
.buy-btn:active .wingnut-icon{ transform:rotate(95deg); }

/* ===========================================================================
   STAGE: the fixed desk-mount scene. This IS the page's main identity.
   =========================================================================== */
.stage{
  position:relative;
  min-height:min(92vh,860px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  padding:var(--sp-8) var(--sp-4) var(--sp-9);
}
.stage-bg{
  position:absolute; inset:0;
  background-image:url("assets/banner-clean.png");
  background-size:cover; background-position:center 42%;
  z-index:0;
}
.stage-vignette{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 44%, rgba(11,13,16,0) 0%, rgba(11,13,16,.55) 72%, rgba(11,13,16,.92) 100%),
    linear-gradient(180deg, rgba(11,13,16,.55) 0%, rgba(11,13,16,.15) 22%, rgba(11,13,16,.15) 60%, rgba(11,13,16,.85) 100%);
}
.stage-content{
  position:relative; z-index:2;
  width:100%; max-width:720px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:var(--sp-6);
}
.stage-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--clr-blue); margin:0;
}
.stage-title{
  font-weight:700; font-size:clamp(26px,4.4vw,44px); line-height:1.08; letter-spacing:-.01em;
  max-width:18ch;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}

/* ---------- the ball ---------- */
.rig-stack{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); }

.ball-hit{
  position:relative;
  width:clamp(190px,30vw,320px);
  aspect-ratio:595/694;
  display:block;
  padding:0; margin:0;
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.ball-shadow{
  position:absolute; inset:0; width:100%; height:100%;
  filter:blur(2px); opacity:.001; pointer-events:none;
}
.ball-img{
  position:relative; width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));
  transform-origin:50% 88%;
}
.ball-hit.is-shaking .ball-img{
  animation:ball-shake var(--dur-shake) var(--ease-shake);
}
@keyframes ball-shake{
  0%{ transform:rotate(0deg) translateX(0); }
  12%{ transform:rotate(-7deg) translateX(-7px); }
  26%{ transform:rotate(6deg) translateX(8px); }
  40%{ transform:rotate(-5deg) translateX(-6px); }
  54%{ transform:rotate(4deg) translateX(5px); }
  68%{ transform:rotate(-3deg) translateX(-3px); }
  82%{ transform:rotate(2deg) translateX(2px); }
  100%{ transform:rotate(0deg) translateX(0); }
}
@media (prefers-reduced-motion:reduce){
  .ball-hit.is-shaking .ball-img{ animation:none; }
}

.window-text{
  position:absolute;
  left:18.6%; top:14.2%; width:63%; height:14.5%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:clamp(9px,1.7vw,13.5px); line-height:1.15; letter-spacing:.01em;
  color:#F4FAFF;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 0 10px rgba(0,0,0,.75);
  padding:0 4%;
  pointer-events:none;
  transition:transform var(--dur-flip) var(--ease), opacity var(--dur-flip) var(--ease);
  transform-style:preserve-3d;
}
.window-text.is-flipping{ transform:rotateX(88deg); opacity:0; }
.window-text.is-flipping-in{ animation:window-in var(--dur-flip) var(--ease) both; }
@keyframes window-in{
  from{ transform:rotateX(-88deg); opacity:0; }
  to{ transform:rotateX(0deg); opacity:1; }
}

.ball-hint{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint);
  transition:opacity 420ms var(--ease);
}
.ball-hint.is-hidden{ opacity:0; }

/* ---------- CA plate, engraved on the clamp bracket ---------- */
.ca-plate{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:var(--sp-3) var(--sp-5);
  background:linear-gradient(180deg,var(--clr-steel-300) 0%,var(--clr-steel-500) 100%);
  border:1px solid rgba(10,12,14,.5);
  border-radius:var(--radius-sm);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.35), 0 10px 22px -12px rgba(0,0,0,.7);
  cursor:pointer;
  max-width:92vw;
  transition:transform 160ms var(--ease), box-shadow var(--dur-panel) var(--ease);
}
.ca-plate:hover{ transform:translateY(-1px); }
.ca-plate:active{ transform:translateY(1px); }
.ca-plate-label{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(10,12,14,.55);
}
.ca-plate-row{ display:flex; align-items:center; gap:var(--sp-2); }
.ca-screw{ transition:transform 420ms var(--ease-shake); flex-shrink:0; }
.ca-plate.is-copied .ca-screw{ transform:rotate(70deg); }
.ca-text{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(12px,3vw,15px);
  color:var(--clr-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  white-space:nowrap;
}
.ca-state{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(10,12,14,.6);
}
.ca-plate.is-copied{ box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 3px rgba(0,0,0,.35), 0 0 0 2px var(--clr-green); }
.ca-plate.is-copied .ca-state{ color:#0E6B45; font-weight:700; }

/* ---------- readouts ---------- */
.readout-row{ display:flex; gap:var(--sp-6); flex-wrap:wrap; justify-content:center; }
.readout{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:var(--sp-3) var(--sp-5);
  background:rgba(23,27,33,.72);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  backdrop-filter:blur(6px);
}
.readout-label{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint);
}
.readout-value{
  font-family:var(--font-mono); font-weight:700; font-size:clamp(24px,4vw,34px);
  color:var(--clr-blue); font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(28,143,209,.5);
}
.readout--minor .readout-value{ font-size:clamp(16px,2.4vw,20px); color:var(--clr-steel-300); text-shadow:none; }
.readout-value.is-ticking{ animation:tick-pulse 360ms var(--ease); }
@keyframes tick-pulse{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}

/* ===========================================================================
   SECTION SCAFFOLD
   =========================================================================== */
section{ max-width:1180px; margin:0 auto; padding:var(--sp-9) var(--sp-5); }
.section-head{ max-width:64ch; margin:0 auto var(--sp-7); text-align:center; }
.section-head h2{ font-weight:700; font-size:clamp(26px,3.4vw,38px); line-height:1.1; letter-spacing:-.01em; }
.section-sub{ margin-top:var(--sp-3); font-size:15px; color:var(--text-body); line-height:1.65; }

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

/* ===========================================================================
   RECEIPT: the itemized rig invoice, printed-paper treatment on a black page
   =========================================================================== */
.receipt-paper{
  max-width:640px; margin:0 auto;
  background:var(--clr-paper);
  color:var(--clr-paper-ink);
  border-radius:2px;
  padding:var(--sp-6) var(--sp-6) var(--sp-7);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  position:relative;
  font-family:var(--font-mono);
}
.receipt-paper::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:14px;
  background:
    linear-gradient(135deg,transparent 50%,var(--clr-void) 50%) 0 0/14px 14px repeat-x,
    linear-gradient(-135deg,transparent 50%,var(--clr-void) 50%) 0 0/14px 14px repeat-x;
  background-position:0 0, 7px 0;
}
.receipt-top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(43,38,32,.6);
  padding-bottom:var(--sp-4); margin-bottom:var(--sp-4);
  border-bottom:1px dashed rgba(43,38,32,.35);
}
.receipt-lines{ display:flex; flex-direction:column; gap:10px; }
.receipt-lines li{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  font-size:13px;
  border-bottom:1px dotted rgba(43,38,32,.28);
  padding-bottom:8px;
}
.receipt-lines li span:first-child{ color:rgba(43,38,32,.85); }
.receipt-lines li span:last-child{ font-weight:700; white-space:nowrap; }
.receipt-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:2px solid var(--clr-paper-ink);
  font-weight:700; font-size:16px;
}
.receipt-divider{ height:1px; background:repeating-linear-gradient(90deg,rgba(43,38,32,.4) 0 6px,transparent 6px 12px); margin:var(--sp-5) 0; }
.receipt-lines--toy li{ border-bottom:none; padding-bottom:0; }
.receipt-total--savings{ color:var(--clr-blue-deep); border-top:2px dashed var(--clr-paper-ink); }
.receipt-foot{ margin-top:var(--sp-4); font-size:11px; color:rgba(43,38,32,.6); line-height:1.6; }

/* ===========================================================================
   LEDGER: recurring/hidden-cost panel, a software-billing look on dark glass
   to contrast against the printed-paper receipt above it.
   =========================================================================== */
.ledger-panel{
  max-width:640px; margin:0 auto;
  background:var(--clr-panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  padding:var(--sp-6) var(--sp-6) var(--sp-7);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.8);
  font-family:var(--font-mono);
}
.ledger-top{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4);
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint);
  padding-bottom:var(--sp-4); margin-bottom:var(--sp-4);
  border-bottom:1px solid var(--line-strong);
}
.ledger-lines{ display:flex; flex-direction:column; gap:10px; }
.ledger-lines li{
  display:flex; justify-content:space-between; gap:var(--sp-4);
  font-size:13px; color:var(--text-body);
  border-bottom:1px dotted var(--line);
  padding-bottom:8px;
}
.ledger-lines li span:last-child{ font-weight:700; white-space:nowrap; color:var(--text-hi); }
.ledger-total{
  display:flex; justify-content:flex-end; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:2px solid var(--line-strong);
  font-weight:700; font-size:16px; color:var(--text-hi);
}
.ledger-total span:first-child{ margin-right:auto; font-weight:500; font-size:13px; color:var(--text-body); }
.ledger-total-sub{ font-weight:500; font-size:11px; color:var(--text-faint); }
.ledger-total--year{ border-top:none; padding-top:0; color:var(--clr-blue); }
.ledger-divider{ height:1px; background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 12px); margin:var(--sp-5) 0; }
.ledger-total--toy{ color:var(--clr-green); border-top:2px dashed var(--line-strong); padding-top:var(--sp-3); }
.ledger-foot{ margin-top:var(--sp-4); font-size:11px; color:var(--text-faint); line-height:1.6; }

/* ===========================================================================
   METHOD: three-step workshop tags
   =========================================================================== */
.method-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6);
}
.method-steps li{
  display:flex; flex-direction:column; gap:var(--sp-3);
  padding:var(--sp-5);
  border:1px dashed var(--line-strong);
  border-radius:var(--radius-md);
  background:var(--clr-panel);
}
.step-index{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--clr-void); border:1px solid var(--clr-blue);
  font-family:var(--font-mono); font-size:12px; color:var(--clr-blue);
}
.method-steps h3{ font-weight:700; font-size:18px; color:var(--text-hi); }
.method-steps p{ font-size:14px; color:var(--text-body); line-height:1.6; }

/* ===========================================================================
   SPECS: pseudo-technical spec sheet, "engineering notes" tone
   =========================================================================== */
.spec-sheet{
  max-width:820px; margin:0 auto; display:flex; flex-direction:column;
  border:1px solid var(--line-strong); border-radius:var(--radius-md); overflow:hidden;
}
.spec-row{
  display:grid; grid-template-columns:200px 1fr; gap:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--line);
  background:var(--clr-panel);
}
.spec-row:nth-child(even){ background:var(--clr-panel-2); }
.spec-row:last-child{ border-bottom:none; }
.spec-row dt{ margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--clr-blue); }
.spec-row dd{ margin:0; font-size:14px; color:var(--text-body); line-height:1.6; }
.spec-row code{ font-family:var(--font-mono); font-size:12.5px; background:rgba(28,143,209,.14); color:var(--clr-blue); padding:1px 5px; border-radius:4px; }
.specs-note{ max-width:64ch; margin:var(--sp-6) auto 0; text-align:center; font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--text-hi); line-height:1.6; }

/* ===========================================================================
   TESTIMONIALS: parody quote cards
   =========================================================================== */
.quote-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); max-width:920px; margin:0 auto; }
.quote-card{
  margin:0; padding:var(--sp-5);
  background:var(--clr-panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  display:flex; flex-direction:column; gap:var(--sp-4);
}
.quote-card blockquote{ margin:0; font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--text-hi); line-height:1.6; }
.quote-card figcaption{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); }

/* ===========================================================================
   FAQ: native details/summary accordion, no JS required to function
   =========================================================================== */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-3); }
.faq-item{
  background:var(--clr-panel);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-5);
}
.faq-item summary{
  cursor:pointer; font-weight:700; font-size:15px; color:var(--text-hi);
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--font-mono); font-size:18px; color:var(--clr-blue); flex-shrink:0;
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ margin-top:var(--sp-3); font-size:14px; color:var(--text-body); line-height:1.65; }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.site-footer{ border-top:1px solid var(--line); background:var(--clr-void-2); }
.footer-inner{
  max-width:1180px; margin:0 auto;
  padding:var(--sp-8) var(--sp-5) var(--sp-6);
  display:grid; grid-template-columns:1.2fr .8fr; gap:var(--sp-8);
}
.footer-brand .brand-mark{ font-size:20px; }
.footer-desc{ margin-top:var(--sp-3); max-width:44ch; font-size:14px; color:var(--text-body); line-height:1.65; }
.footer-ca{
  margin-top:var(--sp-5);
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-mono); font-size:13px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:8px 14px; cursor:pointer; color:var(--clr-steel-300);
  transition:border-color var(--dur-panel) var(--ease), color var(--dur-panel) var(--ease);
}
.footer-ca:hover{ border-color:var(--clr-blue); color:var(--text-hi); }
.footer-ca.is-copied{ border-color:var(--clr-green); color:var(--clr-green); }
.footer-controls{ display:flex; flex-direction:column; gap:var(--sp-5); align-items:flex-start; }
.footer-nav{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.footer-nav a{ font-family:var(--font-mono); font-size:12px; text-decoration:none; color:var(--text-faint); }
.footer-nav a:hover{ color:var(--clr-steel-300); }
.footer-social{ display:flex; gap:var(--sp-3); }
.footer-social .icon-btn img{ width:30px;height:30px; }

.footer-meta{
  max-width:1180px; margin:0 auto;
  padding:var(--sp-5) var(--sp-5) var(--sp-7);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-3);
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
}
#canary{ color:var(--clr-blue); }
#canary.is-ok{ color:var(--clr-green); }

.disclosure{
  max-width:1180px; margin:0 auto;
  padding:0 var(--sp-5) var(--sp-8);
  font-size:12px; color:var(--text-faint); line-height:1.7; max-width:70ch;
}

.brand-logo{ border-radius:8px; flex-shrink:0; display:inline-block; vertical-align:middle; }
.footer-brand .brand-logo{ margin-bottom:var(--sp-3); display:block; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:920px){
  .method-steps{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; }
  .quote-grid{ grid-template-columns:1fr; }
  .spec-row{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:640px){
  :root{ --rail-h:56px; }
  .desk-rail{ padding:0 var(--sp-4); }
  .brand-sub{ display:none; }
  .buy-btn span{ display:none; }
  .buy-btn{ padding:8px; }
  .stage{ padding:var(--sp-7) var(--sp-3) var(--sp-8); min-height:min(94vh,720px); }
  .stage-content{ gap:var(--sp-5); }
  section{ padding:var(--sp-7) var(--sp-4); }
  .readout-row{ gap:var(--sp-4); }
  .readout{ padding:var(--sp-3) var(--sp-4); }
  .receipt-paper{ padding:var(--sp-5) var(--sp-5) var(--sp-6); }
  .ledger-panel{ padding:var(--sp-5) var(--sp-5) var(--sp-6); }
  .ledger-total{ justify-content:space-between; }
  .ledger-total span:first-child{ margin-right:0; }
}

@media (max-width:400px){
  .ca-plate{ padding:var(--sp-3) var(--sp-4); }
  .ca-text{ font-size:11px; }
}