













/* BUG-305: tokens live in tokens.css (the single source of truth), pulled in via
   design-system.css's @import chain. This file is always linked alongside
   design-system.css (app/layout.tsx), so the trimmed :root copy that used to sit
   here was a redundant duplicate — and a drift risk, since it lagged the
   interior-page type scale added to tokens.css on 2026-07-04. Removed; every token
   below resolves from tokens.css. */

html,

body{color:var(--text);font-family:var(--f-sans);-webkit-font-smoothing:antialiased;min-height:100vh;font-variant-numeric:lining-nums;font-feature-settings:"ss01","cv11";}





/* hero */
.hero{max-width:var(--maxw);margin:0 auto;padding:248px 28px 100px;position:relative;overflow:visible;}
.hero::before{content:none;}
.hero-inner{position:relative;z-index:1;}
.hero-inner{display:grid;grid-template-columns:1fr;gap:48px;}
@media(min-width:960px){.hero-inner{grid-template-columns:1.15fr 1fr;gap:72px;align-items:start;}}

.hero-eyebrow{font-family:var(--f-mono);font-size:var(--t-micro);font-weight:700;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--green);display:flex;align-items:center;gap:10px;margin-bottom:26px;}
.hero-eyebrow .v{color:var(--dimmed);}
.hero h1{font-size:var(--t-hero);font-weight:800;line-height:1.02;letter-spacing:-0.03em;}
.hero h1 .g{color:var(--text);font-weight:800; /* Commander 2026-07-04: highlights bold site-wide */font-style:italic;
  background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0.02em 0.16em;border-radius:0.08em;}
.hero-sub{font-family:var(--f-lede);font-size:var(--t-lede);line-height:1.6;color:var(--text-2);margin-top:24px;max-width:30em;}
.hero-sub b{color:var(--text);font-weight:600;}
.hero-sub .dog{position:relative;white-space:nowrap;}
.hero-sub .dog .scribble{
  position:absolute;left:-2%;bottom:-0.42em;width:104%;height:0.55em;overflow:visible;pointer-events:none;
}
/* The highlighted opener ("Shopping for an EV, or already driving one?") is long.
   On narrow screens nowrap would run it off the edge, so let it wrap normally and
   drop the sharpie underline there (the scribble can only underline a single line
   cleanly). Desktop keeps the phrase on one line with the underline. */
@media(max-width:600px){
  .hero-sub .dog{white-space:normal;}
  .hero-sub .dog .scribble{display:none;}
}
.hero-sub .dog .scribble path{
  fill:none;stroke:var(--green);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:240;stroke-dashoffset:240;
  
}
.dog.draw .scribble path,.bet.draw .scribble path,.ws-bet.draw .scribble path,.p-bet.draw .scribble path{animation:scribbleIn .6s cubic-bezier(.6,.1,.4,1) forwards;}
@keyframes scribbleIn{to{stroke-dashoffset:0;}}

.command{display:flex;align-items:center;gap:0;margin-top:32px;max-width:520px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:7px 7px 7px 18px;
  transition:border-color .2s,box-shadow .2s;position:relative;}
.command::before{content:none;}
.command .prompt{font-family:var(--f-mono);color:var(--text);font-size:15px;display:inline-flex;align-items:center;flex-shrink:0;margin-right:8px;}
.command .prompt .cursor{animation:blink 1.1s steps(1) infinite;}
@keyframes blink{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}
/* Green border on hover (Commander 2026-08-19), echoing the cards' hover treatment
   so every interactive surface responds the same way. Lighter than the focus state
   (which adds the full-green edge + ring); :not(:focus-within) keeps them distinct. */
.command:hover:not(:focus-within){border-color:rgba(168,255,53,0.5);}
.command:focus-within{border-color:var(--green);box-shadow:0 0 0 4px var(--green-dim);}
.command:focus-within .prompt .cursor{display:none;}
.command input{flex:1;background:transparent;border:none;color:var(--text);font-family:var(--f-sans);
  font-size:17px;padding:12px 4px;min-width:0;}
.command input::placeholder{color:var(--dimmed);}
.command input:focus{outline:none;}
.command input:focus-visible{outline:none !important;}
.command kbd{font-family:var(--f-mono);font-size:11px;color:var(--muted);border:1px solid var(--line-2);margin-left:10px;
  border-radius:6px;padding:3px 7px;background:var(--surface);}
/* Solid CTA depth (Commander 2026-08-19): flat green reads cheap; Google gives its
   solid buttons dimensionality with a gradient + a real shadow. Green stays the
   brand green — a top-lit vertical gradient (lighter crown -> base -> deeper foot),
   a 1px inner top sheen, and a soft green lift + hairline drop shadow. */
.command button{margin-left:8px;background:linear-gradient(180deg,#B9FF61 0%,#A8FF35 48%,#93EC17 100%);color:var(--on-green);font-weight:700;font-size:15px;border:none;
  border-radius:11px;padding:13px 20px;cursor:pointer;display:flex;align-items:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 16px -6px rgba(168,255,53,0.5), 0 2px 5px -1px rgba(0,0,0,0.35);
  transition:transform .15s,background .2s,box-shadow .2s;white-space:nowrap;}
.command button:hover{transform:translateY(-1px);background:linear-gradient(180deg,#C6FF7A 0%,#B4FF48 48%,#A0FA2C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 22px -7px rgba(168,255,53,0.6), 0 2px 6px -1px rgba(0,0,0,0.35);}
/* Click/press inverts to white (Google-style), like their solid buttons do on
   interaction. Dark label stays for readability (lime-on-white is unreadable). */
.command button:active{transform:translateY(0);background:#fff;color:var(--on-green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 10px -5px rgba(0,0,0,0.45);}
.command button .arr{font-family:var(--f-mono);}
@media(max-width:560px){.command kbd{display:none;}}

/* Moonshot-style input bar (Commander 2026-07-28): the ZIP entry now wears the
   same lighter-dark, top-lit, bordered card treatment as the hero .agent card
   (their input "looks like our hero landing card, it has a border"). A bit
   larger + rounder so it reads as the primary action. The green focus ring +
   the labelled CTA stay. */
[data-theme="dark"] .command{
  background:
    radial-gradient(150% 200% at 50% -50%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.022) 34%, rgba(255,255,255,0) 68%),
    #0c0c0c;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--r-xl);
  padding:9px 9px 9px 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 30px 70px -42px rgba(0,0,0,0.8),
    0 0 60px -26px rgba(255,255,255,0.04);
}

.hero-meta{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:24px;}
.hero-meta .m{font-size:13px;font-weight:600;color:#fff;
  background:var(--text);border-radius:7px;padding:6px 12px;letter-spacing:0.01em;}
.hero-meta .m b{color:var(--text-2);font-weight:600;}

/* error line under command */
.cmd-err{font-size:13px;color:#ff7a7a;margin-top:10px;min-height:18px;padding-left:4px;}
/* privacy reassurance under the hero ZIP bar (revamp) */
.command-note{font-size:13px;color:var(--muted);margin-top:2px;padding-left:4px;max-width:520px;}

/* ===== agent scan panel — dark tool embedded in a light page ===== */
/* Commander 2026-07-17: elevated card treatment. On true-black the old dark
   drop-shadows were invisible (black on black) so the card read as flat. Depth
   now comes from LIGHT: a soft top-lit surface gradient (brighter at the top,
   as if lit from above), a bright 1px top-rim highlight (a bevelled edge), a card
   fill a hair above pure black, and a faint neutral halo that lifts it off the
   page — the Moonshot card language. No backdrop blur (that smears; see .nav). */
.agent{position:relative;
  /* Card grey-layering (Commander 2026-07-28) — a more defined Moonshot-style
     layered look: a clean lighter-grey band across the top fading down, over the
     existing top-lit radial + the near-black fill.
     Ambient energy (Commander 2026-08-19, adopt Google's larger-card treatment):
     a soft accent-green bloom rising from the bottom so the card reads alive, not
     dead-flat. On hover the card lifts, lights its border green, and the bloom
     intensifies — the same interaction language as the news cards. */
  background:
    radial-gradient(85% 55% at 50% 118%, rgba(168,255,53,0.09) 0%, rgba(168,255,53,0.028) 34%, rgba(168,255,53,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 16%, rgba(255,255,255,0) 34%),
    radial-gradient(140% 120% at 50% -25%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.022) 32%, rgba(255,255,255,0) 66%),
    #0c0c0c;
  border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-4xl);padding:0;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 40px 90px -40px rgba(0,0,0,0.8),
    0 0 70px -24px rgba(255,255,255,0.045);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;}
.agent:hover{
  transform:translateY(-5px);
  border-color:rgba(168,255,53,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -80px 120px -60px rgba(168,255,53,0.18),
    0 54px 108px -38px rgba(0,0,0,0.85),
    0 0 0 1px rgba(168,255,53,0.3),
    0 24px 64px -22px rgba(168,255,53,0.26);}
@media (prefers-reduced-motion: reduce){.agent:hover{transform:none;}}
.agent-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--card-line);position:relative;}
.agent-avatar{display:none;}
.agent-id{flex:1;min-width:0;}
.agent-name{font-family:var(--f-sans);font-size:14px;font-weight:600;color:var(--card-text);display:flex;align-items:center;gap:8px;}
.agent-name .role{font-family:var(--f-mono);font-size:10px;font-weight:400;color:var(--card-muted);letter-spacing:0.04em;display:inline-flex;align-items:center;gap:7px;}
.agent-name .role .rdot{width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0;}
.agent-status{font-family:var(--f-mono);font-size:10px;color:var(--green);letter-spacing:0.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;}
.agent-status .live{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green-glow);animation:breath 1.8s ease-out infinite;}
@keyframes breath{0%{box-shadow:0 0 0 0 var(--green-glow);}70%{box-shadow:0 0 0 7px rgba(168,255,53,0);}100%{box-shadow:0 0 0 0 rgba(168,255,53,0);}}
.agent-body{padding:20px;min-height:310px;display:flex;flex-direction:column;gap:10px;position:relative;font-family:var(--f-sans);transition:opacity 0.6s;opacity:1;}

.scan-for{font-family:var(--f-sans);font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-0.025em;color:var(--card-text);line-height:1.05;margin-bottom:4px;}

.log{font-family:var(--f-mono);font-size:11px;color:var(--card-text-2);display:flex;align-items:center;gap:8px;letter-spacing:0.02em;animation:logIn .5s var(--ease-standard);}
.log .ind{flex-shrink:0;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;font-size:10px;}
.log.thinking .ind{color:var(--green);animation:spin 1.2s linear infinite;}
.log.done{color:var(--card-muted);}
.log.done .ind{color:var(--green);}
.log .ms{color:var(--card-dimmed);margin-left:auto;font-size:9px;}
@keyframes logIn{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}

.found-head{font-family:var(--f-mono);font-size:10px;color:var(--card-muted);letter-spacing:0.08em;text-transform:uppercase;}

.fcard{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px;
  background:var(--card-surface);border:1px solid var(--card-line);border-radius:12px;
  animation:foundIn .55s var(--ease-standard);position:relative;overflow:hidden;}
.fcard::before{content:"";position:absolute;top:0;left:0;width:2px;height:100%;background:var(--green);}
.fcard .fc-l{flex:1;min-width:0;}
.fcard .fc-name{font-family:var(--f-sans);font-size:13px;font-weight:600;color:var(--card-text);margin-bottom:3px;}
.fcard .fc-sub{font-family:var(--f-mono);font-size:10px;color:var(--card-muted);letter-spacing:0.02em;}
.fcard .fc-amt{font-family:var(--f-num);font-size:14px;font-weight:600;color:var(--green);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;text-align:right;}
.fcard .fc-amt .q{display:block;font-family:var(--f-mono);font-size:9px;font-weight:400;color:var(--card-muted);margin-top:3px;letter-spacing:0.04em;}
@keyframes foundIn{from{opacity:0;transform:translateY(8px) scale(0.98);}to{opacity:1;transform:none;}}

.agent-summary{margin-top:6px;padding:14px;
  background:rgba(168,255,53,0.06);
  border:1px solid rgba(168,255,53,0.20);border-radius:12px;
  display:flex;justify-content:space-between;align-items:baseline;
  animation:foundIn .6s var(--ease-standard);}
.agent-summary .as-l{font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--card-muted);}
.agent-summary .as-r{font-family:var(--f-num);font-weight:800;font-size:26px;color:var(--green);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-0.02em;}
.agent-prompt{margin-top:auto;padding-top:14px;border-top:1px dashed var(--card-line-2);font-family:var(--f-mono);font-size:11px;color:var(--card-muted);}
.agent-prompt b{color:var(--card-text);font-weight:500;}
.agent-disc{font-family:var(--f-sans);font-size:10px;color:var(--card-muted);line-height:1.5;margin-top:10px;}
/* ===== differentiator: Available vs Qualified ===== */
/* ===== ENGINE SECTION (trimmed list + copy) ===== */
.engine{max-width:var(--maxw);margin:0 auto;padding:220px 28px 240px;}
.engine-stage{display:grid;grid-template-columns:1fr;gap:64px;align-items:center;}
@media(min-width:980px){.engine-stage{grid-template-columns:1fr 1fr;gap:96px;}}

.factors-label{font-family:var(--f-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-2);margin-bottom:28px;font-weight:600;line-height:1.6;max-width:42ch;text-wrap:balance;}
.factors-label .g{color:var(--text);font-weight:800;font-style:normal;
  background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0.05em 0.3em;border-radius:0.12em;}
.factors-label .ld{width:7px;height:7px;border-radius:50%;background:var(--text);}
.factor-list{list-style:none;display:flex;flex-direction:column;gap:0;}
.factor-list li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);
  font-size:18px;color:var(--text-2);transition:opacity .5s ease, transform .5s ease;}
.factor-list li:last-child{border-bottom:none;}
.factor-list li .fk{font-family:var(--f-mono);font-size:11px;color:var(--muted);flex-shrink:0;width:18px;}
.factor-list li .ft{line-height:1.4;}
.factor-list li .ft .sub{color:var(--dimmed);font-size:14px;margin-left:2px;}
.factor-list li.swapping{opacity:0;transform:translateY(-6px);}

.engine-copy h2{font-size:clamp(40px,5.8vw,72px);font-weight:800;letter-spacing:-0.03em;line-height:1.02;margin-bottom:30px;}
.engine-copy h2 .g{color:var(--text);font-weight:800;font-style:italic;
  background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0.02em 0.16em;border-radius:0.08em;}
.engine-copy .lead{font-size:18px;line-height:1.65;color:var(--text-2);max-width:44ch;}
.engine-copy .ans-inline{position:relative;color:var(--text);font-weight:700;}
.engine-copy .ans-inline .ybscribble{position:absolute;left:-2%;bottom:-0.28em;width:104%;height:0.42em;overflow:visible;pointer-events:none;}
.engine-copy .ans-inline .ybscribble path{fill:none;stroke:var(--green);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:140;stroke-dashoffset:140;animation:scribbleIn .6s cubic-bezier(.6,.1,.4,1) .5s forwards;}
.engine-copy p{font-size:17px;line-height:1.65;color:var(--text-2);max-width:44ch;}
.engine-copy p.sub2{font-size:15px;color:var(--muted);margin-top:18px;}
.engine-copy p b{color:var(--text);font-weight:600;}

/* ===== CLOSE: pricing + CTA in one ===== */
.close{max-width:var(--maxw);margin:0 auto;padding:200px 28px 220px;text-align:center;}
.close h2{font-size:clamp(38px,5.4vw,72px);font-weight:800;letter-spacing:-0.03em;line-height:1.02;max-width:18ch;margin:0 auto;}
.close h2 .g{color:var(--green);font-weight:800;font-style:italic;}
.close-sub{font-family:var(--f-lede);font-size:18px;line-height:1.6;color:var(--text-2);margin:24px auto 0;max-width:52ch;}

.tiers{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;margin:44px auto 0;max-width:760px;}
.tier{display:flex;align-items:baseline;gap:12px;}
.tier .t-price{font-family:var(--f-num);font-size:24px;font-weight:800;letter-spacing:-0.02em;font-variant-numeric:lining-nums tabular-nums;}
.tier.free .t-price{color:var(--green);}
.tier.paid .t-price{color:var(--text);}
.tier .t-label{font-size:15px;color:var(--text-2);}
.tier .t-label b{color:var(--text);font-weight:600;}
.tier-div{width:1px;align-self:stretch;background:var(--line-2);display:none;}
@media(min-width:680px){.tier-div{display:block;}}

.close-cmd{margin:48px auto 0;max-width:520px;}
.close-fine{margin:22px auto 0;font-size:13px;color:var(--dimmed);max-width:46ch;line-height:1.55;}
.close-fine b{color:var(--text-2);font-weight:600;}

/* cookie notice */
/* UX-26: was a light cream fill patched dark. Now dark-native via the shared
   elevated material, so it matches the cards (and needs no [data-theme] patch). */
.cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:200;max-width:560px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;justify-content:space-between;
  background:var(--elev-fill);border:1px solid var(--elev-border);border-radius:var(--r-lg);padding:16px 20px;
  box-shadow:var(--elev-1);
  transition:opacity .4s ease, transform .4s ease;}
.cookie.hide{opacity:0;transform:translateY(16px);pointer-events:none;}
body:has(.cookie:not(.hide)){padding-bottom:90px;}
.cookie-txt{font-size:13px;line-height:1.5;color:var(--text-2);flex:1;min-width:220px;margin:0;}
.cookie-btns{display:flex;gap:10px;flex-shrink:0;}
.cookie-btns button{font-family:var(--f-sans);font-size:13px;font-weight:600;border-radius:var(--r-sm);padding:9px 16px;cursor:pointer;border:1px solid transparent;transition:all .15s;}
.ck-decline{background:transparent;border-color:var(--line-2);color:var(--text-2);}
.ck-decline:hover{color:var(--text);border-color:var(--faint);}
.ck-accept{background:var(--green-bright);color:var(--on-green);}
.ck-accept:hover{background:var(--green-deep);}

.diff{max-width:var(--maxw);margin:0 auto;padding:40px 28px 80px;}
.diff-head{max-width:760px;margin:0 auto 44px;text-align:center;}
.diff-head h2{font-size:clamp(30px,4.2vw,48px);font-weight:800;letter-spacing:-0.025em;line-height:1.08;}
.diff-head h2 .g{color:var(--green);font-weight:800;}
.diff-head h2 .wink{color:var(--text-2);font-weight:600;}
.diff-head p{font-size:17px;line-height:1.6;color:var(--text-2);margin-top:var(--sp-section-gap);}
.diff-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:880px){.diff-grid{grid-template-columns:1fr 1fr;gap:24px;align-items:start;}}

.col{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;background:var(--surface);position:relative;}
.col.available{}
.col.qualified{border-color:rgba(168,255,53,0.28);
  background:linear-gradient(180deg, rgba(168,255,53,0.05), rgba(255,255,255,0.02));
  box-shadow:0 0 0 1px var(--green-dim), 0 30px 70px -30px rgba(0,0,0,0.6);}
.col-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.col.available .col-tag{color:var(--muted);}
.col.qualified .col-tag{color:var(--green);}
.col-tag .dot{width:6px;height:6px;border-radius:50%;}
.col.available .col-tag .dot{background:var(--faint);}
.col.qualified .col-tag .dot{background:var(--green);}
.col-sub{font-size:13px;color:var(--dimmed);margin-bottom:18px;line-height:1.45;}

.drow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--line);position:relative;}
.drow:last-of-type{border-bottom:none;}
.drow .d-l{min-width:0;flex:1;}
.drow .d-name{font-size:14px;font-weight:600;color:var(--text);}
.drow .d-meta{font-family:var(--f-mono);font-size:10px;color:var(--muted);margin-top:4px;letter-spacing:0.02em;}
.drow .d-amt{font-family:var(--f-num);font-size:15px;font-weight:700;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums;}
.col.available .d-amt{color:var(--text-2);}
.col.qualified .d-amt{color:var(--green);}
/* a struck/voided amount on the available side */
.drow.void .d-name,.drow.void .d-meta{color:var(--dimmed);}
.drow.void .d-amt{color:var(--dimmed);text-decoration:line-through;text-decoration-color:rgba(255,255,255,0.3);}

/* hand-scrawled green flag on a problem row */
.flag{position:relative;display:inline-block;margin-top:9px;margin-left:2px;font-family:var(--f-sans);
  font-size:12.5px;font-weight:600;color:var(--green);font-style:italic;
  transform:rotate(-1.4deg);transform-origin:left center;padding-bottom:3px;letter-spacing:0.01em;}
.flag::before{content:"\21B3";font-style:normal;font-weight:700;font-size:13px;line-height:1;color:var(--green);margin-right:6px;display:inline-block;transform:rotate(2deg);}
.flag .uline{position:absolute;left:18px;right:-3px;bottom:-2px;height:7px;overflow:visible;pointer-events:none;}
.flag .uline path{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:0.85;}

.dtotal{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;padding-top:18px;border-top:1px dashed var(--line-2);}
.dtotal .dt-l{font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);}
.dtotal .dt-r{font-family:var(--f-num);font-weight:900;letter-spacing:-0.03em;font-variant-numeric:lining-nums tabular-nums;}
.col.available .dtotal .dt-r{font-size:30px;color:var(--text-2);}
.col.available .dtotal .dt-note{display:block;font-family:var(--f-sans);font-size:11px;font-weight:400;font-style:italic;color:var(--green);text-align:right;margin-top:3px;letter-spacing:0;text-transform:none;}
.col.qualified .dtotal .dt-r{font-size:34px;color:var(--green);}
.col.qualified .dtotal .dt-note{display:block;font-family:var(--f-sans);font-size:11px;font-weight:400;color:var(--muted);text-align:right;margin-top:3px;letter-spacing:0;text-transform:none;}
.diff-foot{max-width:680px;margin:32px auto 0;text-align:center;font-size:13px;color:var(--dimmed);line-height:1.55;}

/* ===== FAQ ===== */
.faq{max-width:var(--maxw);margin:0 auto;padding:80px 28px 80px;}
.faq-inner{display:grid;grid-template-columns:1fr;gap:48px;}
@media(min-width:920px){.faq-inner{grid-template-columns:0.7fr 1.3fr;gap:80px;align-items:start;}}
.faq-head{position:sticky;top:120px;}
.faq-eyebrow{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.faq-eyebrow .ld{width:7px;height:7px;border-radius:50%;background:var(--text);}
.faq-head h2{font-size:clamp(34px,4.4vw,52px);font-weight:800;letter-spacing:-0.03em;line-height:1.04;}
.faq-head h2 .g{color:var(--text);font-weight:800;font-style:italic;
  background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0.02em 0.16em;border-radius:0.08em;}
.faq-head p{font-size:15px;line-height:1.6;color:var(--muted);margin-top:20px;max-width:30ch;}
@media(max-width:920px){.faq-head{position:static;}}
.faq-list{display:flex;flex-direction:column;}
.faq-item{border-top:1px solid var(--line);}
.faq-item:last-child{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:24px 0;font-family:var(--f-sans);font-size:clamp(17px,1.6vw,20px);font-weight:600;
  color:var(--text);letter-spacing:-0.01em;line-height:1.4;transition:color .15s;}
.faq-q:hover{color:var(--text);}
.faq-q .ico{flex-shrink:0;width:22px;height:22px;position:relative;margin-top:4px;}
.faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;background:var(--green-deep);
  border-radius:2px;transition:transform .3s var(--ease-out),opacity .2s;}
.faq-q .ico::before{top:50%;left:3px;right:3px;height:2.5px;transform:translateY(-50%);}
.faq-q .ico::after{left:50%;top:3px;bottom:3px;width:2.5px;transform:translateX(-50%);}
.faq-item.open .faq-q .ico::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease-out);}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a-inner{padding:0 0 26px;max-width:60ch;overflow:hidden;}
.faq-a-inner p{font-size:16px;line-height:1.68;color:var(--text-2);}
.faq-a-inner p b{color:var(--text);font-weight:600;}
.faq-a-inner a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--green);
  padding-bottom:1px;transition:background .15s;}
.faq-a-inner a:hover{background:var(--green-dim);}

/* ===== mobile overflow fixes ===== */
@media(max-width:600px){
  .hero{padding:80px 20px 60px;}
  .hero h1{letter-spacing:-0.02em;}
  .agent-body{min-height:200px;}
  .command{flex-wrap:wrap;padding:10px;max-width:100%;}
  /* The dark card treatment above sets padding:9px 9px 9px 20px at (0,2,0)
     specificity, which outranks this media rule's (0,1,0) — media queries add
     no specificity. Re-assert symmetric mobile padding under the live theme so
     the wrapped input/button aren't inset 20px on one side only. */
  [data-theme="dark"] .command{padding:10px;}
  .command .prompt{display:none;}
  .command input{flex:1 1 100%;font-size:16px;padding:10px 6px;}
  .command button{margin-left:0;width:100%;justify-content:center;}
  .engine{padding:60px 20px 70px;}
  .close{padding:60px 20px 70px;}
  .cost-section{padding:60px 20px 70px;}
  .nav{padding:18px 0;}
  html{scroll-padding-bottom:100px;}
}
@media(max-width:380px){
  .command button{font-size:14px;padding:12px 14px;}
}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;}
  .scribble path,.ybscribble path{stroke-dashoffset:0 !important;}
}


/* ===== Cost section (replaces engine) ===== */
.cost-section{max-width:var(--maxw);margin:0 auto;padding:120px 28px 150px;}
.cost-section .eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:20px;}
.cost-section .cost-head{font-size:var(--t-section);font-weight:800;letter-spacing:-0.03em;line-height:1.04;max-width:none;}
.cost-section .cost-head .accent{background:var(--green);padding:0.02em 0.14em;border-radius:0.07em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-style:italic;font-weight:800;}
.cost-section .cost-sub{font-family:var(--f-lede);font-size:18px;line-height:1.6;color:var(--text-2);margin-top:var(--sp-section-gap);max-width:70ch;}
.cost-section .bet{position:relative;white-space:nowrap;font-weight:700;color:var(--text);}
.cost-section .bet .scribble{position:absolute;left:-2%;bottom:-0.42em;width:104%;height:0.55em;overflow:visible;pointer-events:none;}
.cost-section .bet .scribble path{fill:none;stroke:var(--green);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;}
.cost-section .symptom-list{margin-top:72px;display:flex;flex-direction:column;gap:56px;}
.cost-section .symptom{display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start;position:relative;}
.cost-section .symptom::before{content:"";position:absolute;top:-28px;left:0;width:280px;height:1px;background:linear-gradient(to right,rgba(22,21,16,0.45),rgba(22,21,16,0));}
.cost-section .symptom:first-child::before{display:none;}
.cost-section .symptom-cost{padding-top:0;}
.cost-section .symptom-content{padding-top:0;}
.cost-section .symptom-cost-num{font-family:var(--f-num);font-size:60px;font-weight:800;color:var(--text);letter-spacing:-0.03em;line-height:0.95;display:block;font-variant-numeric:lining-nums tabular-nums;}
.cost-section .symptom-cost-label{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-top:8px;}
.cost-section .symptom-title{font-size:24px;font-weight:700;letter-spacing:-0.01em;margin-bottom:12px;}
.cost-section .symptom-body{font-size:16px;line-height:1.6;color:var(--text-2);max-width:64ch;}
.cost-section .news-wrap{margin-top:90px;}
.cost-section .news-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;transition:opacity 0.4s ease;opacity:1;}

.cost-section .news-card{background:#fff;border-radius:var(--r-3xl);overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,0.28);}
.cost-section .news-card-header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ededed;}
.cost-section .nc-left{display:flex;align-items:center;gap:9px;}
.cost-section .news-circle{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:11px;}
/* News-card type aligned to the SITE's own conventions (Commander 2026-07-28) —
   the cards were styled like literal news articles, so their type read as
   out-of-place newspaper voice. Now Inter display for the headline (the site's
   tight tracking) + the site's mono-eyebrow style for the tag / section / byline
   labels, so the cards speak in the site's voice, not a newspaper's. */
.cost-section .nc-outlet{font-family:var(--f-sans);color:#161510;font-weight:700;font-size:15px;letter-spacing:-0.01em;}
.cost-section .nc-url{font-family:var(--f-mono);color:#9a9a96;font-size:11px;letter-spacing:0.02em;}
.cost-section .news-body{padding:20px 22px 22px;}
.cost-section .nc-tagrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cost-section .nc-tag{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#fff;background:#161510;padding:3px 8px;border-radius:4px;}
.cost-section .nc-section{font-family:var(--f-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#999;}
.cost-section .nc-headline{font-family:var(--f-sans);font-size:19px;font-weight:700;line-height:1.28;color:#111;letter-spacing:-0.02em;}
.cost-section .nc-meta{font-family:var(--f-mono);font-size:11px;color:#888;letter-spacing:0.02em;margin-top:10px;padding-bottom:14px;border-bottom:1px solid #eee;}
.cost-section .nc-excerpt{font-family:var(--f-sans);font-size:14px;line-height:1.55;color:#444;margin-top:14px;}
.cost-section .nc-link{font-family:var(--f-sans);display:inline-block;font-size:13px;font-weight:700;margin-top:16px;color:#161510;letter-spacing:0.01em;}
.cost-section .news-dots{display:flex;gap:8px;justify-content:center;margin-top:30px;}
.cost-section .dot{width:8px;height:8px;border-radius:50%;background:rgba(22,21,16,0.2);cursor:pointer;transition:background 0.3s;}
.cost-section .dot.on{background:var(--text);}
/* Dark theme (live): the light-theme dot fill above is near-black on #000 —
   invisible carousel dots. Recolor the inactive dot to a faint white. */
[data-theme="dark"] .cost-section .dot{background:rgba(255,255,255,0.22);}
/* Same light-theme-on-dark bug as the dots: the symptom-row divider gradient is
   near-black (rgba(22,21,16,...)), invisible on #000. Recolor to a faint white
   hairline so the dividers between symptom rows actually read on the live theme. */
[data-theme="dark"] .cost-section .symptom::before{background:linear-gradient(to right,rgba(255,255,255,0.2),rgba(255,255,255,0));}
@media(max-width:860px){.cost-section .news-grid{grid-template-columns:1fr;}.cost-section .symptom{grid-template-columns:1fr;gap:14px;}}

/* Dark news cards (Commander 2026-07-28): the white "clippings" broke the dark
   Moonshot aesthetic. Recolor to dark, but with the FULL elevated card language
   (§6) so they have depth and life, not a flat dark rectangle: a top-lit grey
   band + top-lit radial over near-black, a bright 1px top-rim highlight + neutral
   halo + deep shadow, and a gentle hover lift. Credibility survives in the
   content (outlet, domain, byline, headline), not the white background. */
[data-theme="dark"] .cost-section .news-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 16%, rgba(255,255,255,0) 34%),
    radial-gradient(140% 120% at 50% -25%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.022) 32%, rgba(255,255,255,0) 66%),
    #0c0c0c;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 40px 90px -40px rgba(0,0,0,0.8),
    0 0 70px -24px rgba(255,255,255,0.045);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Commander 2026-08-19: on hover the card "stands up" and lights its border the
   accent green, matching the reference cards — a stronger lift + a green rim/glow
   instead of the faint white edge. */
[data-theme="dark"] .cost-section .news-card:hover{
  transform:translateY(-6px);
  border-color:var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 54px 104px -38px rgba(0,0,0,0.85),
    0 0 0 1px rgba(168,255,53,0.35),
    0 20px 56px -22px rgba(168,255,53,0.28);
}
[data-theme="dark"] .cost-section .news-card:hover .nc-link{color:var(--green);}
@media (prefers-reduced-motion: reduce){
  [data-theme="dark"] .cost-section .news-card:hover{transform:none;}
}
[data-theme="dark"] .cost-section .news-card-header{border-bottom-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .cost-section .nc-outlet{color:var(--text);}
[data-theme="dark"] .cost-section .nc-url{color:var(--muted);}
[data-theme="dark"] .cost-section .nc-tag{background:rgba(255,255,255,0.12);color:var(--text);}
[data-theme="dark"] .cost-section .nc-section{color:var(--muted);}
[data-theme="dark"] .cost-section .nc-headline{color:var(--text);}
[data-theme="dark"] .cost-section .nc-meta{color:var(--muted);border-bottom-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .cost-section .nc-excerpt{color:var(--text-2);}
[data-theme="dark"] .cost-section .nc-link{color:var(--text);transition:color .22s ease;}


/* ===== Section: Pricing ===== */
/* Match the universal section width (Commander 2026-08-19): every other section
   (.engine / .cost-section / .close / .wordspin-section) constrains at the SECTION
   level with max-width:var(--maxw)+margin:auto, so their content sits inside the
   1600px measure with the 28px gutter. Pricing was the outlier — it put max-width
   on .pricing-inner only, leaving the section full-width, so its content ran wider
   than the rest. Constrain the section itself so pricing lines up with the hero. */
.pricing-section{background:var(--bg);max-width:var(--maxw);margin:0 auto;padding:140px 28px 160px;}
.pricing-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.pricing-head{font-size:var(--t-section);font-weight:800;letter-spacing:-0.03em;line-height:1.05;color:var(--text);margin-bottom:var(--sp-section-gap);}
.pricing-head .accent{background:var(--green);color:#161510;padding:0.02em 0.14em;border-radius:0.07em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-weight:800;font-style:italic;}
.pricing-sub{font-family:var(--f-lede);font-size:17px;line-height:1.65;color:var(--text-2);margin-bottom:36px;max-width:44ch;}
.pricing-guarantee{font-size:13px;line-height:1.5;color:var(--muted);font-weight:500;
  margin-bottom:14px;max-width:46ch;}
/* Revamp WS1: differentiator folded in from the removed Advantage bento. */
.pricing-diff{font-size:14px;line-height:1.6;color:var(--muted);margin:14px 0 26px;max-width:46ch;}
.pricing-price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:32px;}
.pricing-price{font-size:clamp(52px,6vw,80px);font-weight:800;letter-spacing:-0.04em;color:var(--text);line-height:1;}
.pricing-once{font-size:13px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--muted);}
.pricing-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(180deg,#B9FF61 0%,#A8FF35 48%,#93EC17 100%);color:var(--on-green);font-weight:700;font-size:15px;padding:14px 28px;border-radius:var(--r-pill);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 16px -6px rgba(168,255,53,0.5), 0 2px 5px -1px rgba(0,0,0,0.35);
  transition:background .2s,transform .15s,box-shadow .2s;}
.pricing-cta:hover{transform:translateY(-1px);background:linear-gradient(180deg,#C6FF7A 0%,#B4FF48 48%,#A0FA2C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 22px -7px rgba(168,255,53,0.6), 0 2px 6px -1px rgba(0,0,0,0.35);}
.pricing-cta:active{transform:translateY(0);background:#fff;color:var(--on-green);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 3px 10px -5px rgba(0,0,0,0.45);}
.hub-preview-wrap{position:relative;}
/* Commander 2026-07-17: same elevated card language as .agent (top-lit gradient +
   bright top rim + neutral halo) — dark shadows are invisible on true black. */
.hub-preview{position:relative;
  /* Card grey-layering (Commander 2026-07-28) — matches .agent's defined top band.
     Ambient energy (Commander 2026-08-19) — same accent-green bloom + hover lift
     as .agent, so the two big cards read alive and consistent. */
  background:
    radial-gradient(85% 55% at 50% 118%, rgba(168,255,53,0.09) 0%, rgba(168,255,53,0.028) 34%, rgba(168,255,53,0) 62%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 16%, rgba(255,255,255,0) 34%),
    radial-gradient(140% 120% at 50% -25%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.022) 32%, rgba(255,255,255,0) 66%),
    #0c0c0c;
  padding:28px 24px 28px;border:1px solid rgba(255,255,255,0.10);border-radius:var(--r-4xl);overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.015),
    0 40px 90px -40px rgba(0,0,0,0.8),
    0 0 70px -24px rgba(255,255,255,0.045);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;}
.hub-preview:hover{
  transform:translateY(-5px);
  border-color:rgba(168,255,53,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -80px 120px -60px rgba(168,255,53,0.18),
    0 54px 108px -38px rgba(0,0,0,0.85),
    0 0 0 1px rgba(168,255,53,0.3),
    0 24px 64px -22px rgba(168,255,53,0.26);}
@media (prefers-reduced-motion: reduce){.hub-preview:hover{transform:none;}}
.hp-tag{font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--green);margin-bottom:14px;}
.hp-greeting{font-size:19px;font-weight:700;color:var(--card-text);letter-spacing:-0.01em;margin-bottom:3px;}
.hp-vehicle{font-size:12px;color:var(--card-muted);margin-bottom:22px;}
.hp-profile{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--card-line);}
.hp-profile-label{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--card-muted);margin-bottom:10px;}
.hp-prow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.04);}
.hp-prow:last-child{border-bottom:none;}
.hp-pk{font-size:11px;color:var(--card-muted);}
.hp-pv{font-size:11px;font-weight:500;color:var(--card-text);}
.hp-expand-row{margin-top:5px;border-bottom:none !important;cursor:default;}
.hp-expand-label{font-size:10px;font-weight:600;color:rgba(168,255,53,0.55);letter-spacing:0.02em;}
.hp-expand-chevron{font-size:12px;color:rgba(168,255,53,0.55);}
.hp-amount-label{font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--card-muted);margin-bottom:5px;}
.hp-amount{font-family:var(--f-num);font-size:clamp(36px,4vw,52px);font-weight:800;letter-spacing:-0.03em;color:var(--green);line-height:1;margin-bottom:22px;font-variant-numeric:lining-nums tabular-nums;}
.hp-stats{display:flex;gap:24px;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--card-line);}
.hp-stat{display:flex;flex-direction:column;gap:3px;}
.hp-stat-num{font-size:15px;font-weight:700;color:var(--card-text);line-height:1;}
.hp-stat-num.urgent{color:var(--green);}
.hp-stat-label{font-size:10px;color:var(--card-muted);}
.hp-programs{display:flex;flex-direction:column;}
.hp-program{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--card-line);}
.hp-program:last-child{border-bottom:none;}
.hp-prog-name{font-size:13px;color:var(--card-text-2);}
.hp-prog-amt{font-size:13px;font-weight:700;color:var(--green);}

@media(max-width:860px){.pricing-inner{grid-template-columns:1fr;gap:52px;}}
@media(max-width:600px){.pricing-section{padding:100px 22px 120px;}.hub-preview-wrap{display:none;}}


/* ===== Section 5 — word-spin close ===== */
.wordspin-section{max-width:var(--maxw);margin:0 auto;padding:150px 28px 170px;}
@media(max-width:600px){.wordspin-section{padding:110px 22px 120px;}.ws-headline{letter-spacing:-0.02em;}}
.ws-inner{max-width:none;}
.ws-headline{font-size:var(--t-hero);font-weight:800;letter-spacing:-0.03em;line-height:1.02;}
.ws-headline .ws-word{display:inline-block;color:var(--text);font-weight:800;font-style:italic;
  background:var(--green);box-decoration-break:clone;-webkit-box-decoration-break:clone;
  padding:0.02em 0.16em;border-radius:0.08em;
  transition:opacity .28s ease, transform .28s ease;}
.ws-prose{font-size:18px;line-height:1.6;color:var(--text-2);max-width:60ch;margin:var(--sp-section-gap) 0 0;}
.ws-prose .ws-bet{position:relative;white-space:nowrap;font-weight:700;color:var(--text);}
.ws-prose .ws-bet .scribble{position:absolute;left:-2%;bottom:-0.42em;width:104%;height:0.55em;overflow:visible;pointer-events:none;}
.ws-prose .ws-bet .scribble path{fill:none;stroke:var(--green);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;}
.wordspin-section .command{margin:44px 0 0;max-width:480px;}
.wordspin-section .cmd-err{margin-top:12px;}


/* ===== scroll reveal + energy ===== */
[data-reveal]{opacity:0;transform:translateY(32px);scroll-margin-top:80px;
  transition:opacity .9s var(--ease-emphasized), transform .9s var(--ease-emphasized);}
[data-reveal].revealed{opacity:1;transform:none;}
/* Staggered children: each direct child cascades in with a slight delay so the
   section "unfolds" rather than popping in as a single block (Google AI Studio
   pattern). The children get their own translateY on top of the section's slide. */
[data-reveal] > *{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease-emphasized), transform .7s var(--ease-emphasized);}
[data-reveal].revealed > *{opacity:1;transform:none;}
[data-reveal].revealed > *:nth-child(1){transition-delay:.05s;}
[data-reveal].revealed > *:nth-child(2){transition-delay:.12s;}
[data-reveal].revealed > *:nth-child(3){transition-delay:.19s;}
[data-reveal].revealed > *:nth-child(4){transition-delay:.26s;}
[data-reveal].revealed > *:nth-child(5){transition-delay:.33s;}
[data-reveal].revealed > *:nth-child(6){transition-delay:.4s;}
[data-reveal].revealed > *:nth-child(n+7){transition-delay:.45s;}
/* A deep-link to a data-reveal section (e.g. /#pricing) scrolls there before the
   scroll observer has marked it .revealed, leaving it at opacity:0 — a black void.
   Force any hash-targeted section (and its neighbours around the scroll position)
   visible immediately so the link never lands on nothing. */
[data-reveal]:target,[data-reveal]:target > *{opacity:1 !important;transform:none !important;transition-delay:0s !important;}
@media(prefers-reduced-motion:reduce){[data-reveal],[data-reveal] > *{opacity:1;transform:none;transition:none;}}

/* button micro-motion: lift + arrow nudge */
.command button,.nav-cta{transition:transform .2s var(--ease-emphasized), box-shadow .2s ease, background .15s ease;}
.command button:hover,.nav-cta:hover{transform:translateY(-2px);}
.command button .arr{display:inline-block;transition:transform .2s ease;}
.command button:hover .arr{transform:translateX(4px);}
.nav-links a{transition:color .15s ease;}

/* Pricing "$89" scribble underline (the .p-bet accent in the pricing sub). */
.pricing-sub .p-bet{position:relative;white-space:nowrap;font-weight:700;color:var(--text);}
.pricing-sub .p-bet .scribble{position:absolute;left:-2%;bottom:-0.42em;width:104%;height:0.55em;overflow:visible;pointer-events:none;}
.pricing-sub .p-bet .scribble path{fill:none;stroke:var(--green);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;}

/* BUG-236: classes that replace former inline style="" attributes on the React
   app-router routes, so the app-router CSP can drop style-src 'unsafe-inline'
   (the static/revenue-path CSP keeps it). Values are byte-for-byte the former
   inline styles — no visual change. This file is linked only by app/layout.tsx,
   so these never reach the static pages. */
.scan-log-list{display:flex;flex-direction:column;gap:6px;}
.scan-hr{border-top:1px dashed var(--line-2);margin:8px 0px 4px;}
.prompt-arrow{color:var(--green);}
.rch-news{justify-content:space-between;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.06);}
.as-flush{margin:0;}
.rep-note{font-size:12px;color:var(--muted);text-align:center;margin-top:18px;line-height:1.5;text-wrap:balance;max-width:52ch;margin-left:auto;margin-right:auto;}
.inline-link{font-weight:600;border-bottom:1px solid var(--faint);}
.footer-addr-line{display:block;}

/* ── Dark-landing fixes (Commander 2026-07 dark experiment) ─────────────────
   Only apply on the landing (the one route that sets data-theme="dark"). */
/* Green highlight blocks keep DARK text on the always-light green fill; in dark
   mode --text flips to white and washes the text out. (.pricing-head .accent
   already hard-codes #161510, so it is correct in both themes.) */
[data-theme="dark"] .hero h1 .g,
[data-theme="dark"] .cost-head .accent,
[data-theme="dark"] .ws-headline .ws-word { color: #161510; }
/* UX-26: the cookie banner is now dark-native (elevated material on .cookie), so
   the old [data-theme="dark"] .cookie patch is retired. */

/* ── Founding Beta ─────────────────────────────────────────────────────────
   Announcement bar, pricing strikethrough + FREE badge, and feedback card.
   Remove this block (and the matching markup) when the beta period ends. */

.beta-bar{background:#0a0a0a;border-bottom:1px solid rgba(168,255,53,0.12);
  padding:10px 28px;text-align:center;font-size:13px;line-height:1.4;position:relative;}
.beta-bar-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  justify-content:center;gap:0;}
.beta-bar-tag{color:#A8FF35;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;font-size:11px;}
.beta-bar-sep{color:rgba(255,255,255,0.2);margin:0 10px;font-weight:300;}
.beta-bar-text{color:rgba(255,255,255,0.6);font-weight:400;}
.beta-bar-close{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:rgba(255,255,255,0.25);cursor:pointer;
  padding:6px;font-size:18px;line-height:1;transition:color .15s;}
.beta-bar-close:hover{color:rgba(255,255,255,0.6);}
@media(max-width:600px){
  .beta-bar{padding:9px 44px 9px 16px;}
  .beta-bar-sep{display:none;}
  .beta-bar-inner{flex-wrap:wrap;gap:4px;}
}

/* Pricing: green-marker strikethrough on $89 + FREE badge */
.pricing-price-row.beta{flex-wrap:wrap;gap:8px 16px;}
.pricing-price.beta-strike{position:relative;color:rgba(255,255,255,0.3);}
.pricing-price.beta-strike::after{content:'';position:absolute;
  left:-6px;right:-6px;top:52%;height:5px;
  background:rgba(168,255,53,0.6);transform:rotate(-2.5deg);border-radius:3px;}
.beta-free-badge{display:flex;flex-direction:column;justify-content:center;}
.beta-free-label{font-size:clamp(28px,3.6vw,44px);font-weight:800;
  color:#A8FF35;letter-spacing:-0.02em;line-height:1;}
.beta-free-sub{font-size:11px;font-weight:600;letter-spacing:0.05em;
  text-transform:uppercase;color:rgba(255,255,255,0.45);margin-top:4px;}

/* Hub feedback card (willingness-to-pay test) */
.beta-feedback{max-width:680px;margin:48px auto 0;padding:28px 24px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:14px;
  text-align:center;}
.beta-feedback-q{font-size:15px;font-weight:600;color:var(--text);margin-bottom:16px;}
.beta-feedback-opts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.beta-feedback-btn{background:transparent;border:1px solid var(--border);color:var(--text);
  font-family:var(--f-sans);font-size:13px;font-weight:600;padding:9px 20px;
  border-radius:10px;cursor:pointer;transition:all .15s;}
.beta-feedback-btn:hover{border-color:rgba(168,255,53,0.35);color:#A8FF35;}
.beta-feedback-btn.selected{background:rgba(168,255,53,0.12);border-color:rgba(168,255,53,0.4);color:#A8FF35;}
.beta-feedback-thanks{font-size:13px;color:var(--muted);margin-top:14px;display:none;}
.beta-feedback.answered .beta-feedback-opts{opacity:0.4;pointer-events:none;}
.beta-feedback.answered .beta-feedback-thanks{display:block;}

/* ===== "View a Sample Rebate Hub" text links ===== */
.sample-link{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-sans);font-size:13px;font-weight:600;
  color:var(--green);text-decoration:none;margin-top:10px;
  transition:color .15s, opacity .15s;}
.sample-link:hover{opacity:0.8;}
.sample-link .arr{font-size:15px;transition:transform .15s;}
.sample-link:hover .arr{transform:translateX(3px);}
.pricing-sample{display:flex;width:fit-content;margin-top:18px;}

/* ===== Roxy floating card overlay (pricing section) ===== */
.roxy-float{position:absolute;bottom:70px;left:-95px;width:420px;z-index:10;
  background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 40%),#111111;
  border:1px solid rgba(168,255,53,0.35);border-radius:16px;padding:14px 18px 12px;
  box-shadow:0 0 40px -10px rgba(168,255,53,0.22),0 0 80px -20px rgba(168,255,53,0.10),
    0 20px 50px -15px rgba(0,0,0,0.7),inset 0 1px 0 rgba(255,255,255,0.07);
  animation:roxy-fade-in 0.6s ease both;}
@keyframes roxy-fade-in{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.roxy-float-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.roxy-float-dot{width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 8px rgba(168,255,53,0.5);flex-shrink:0;}
.roxy-float-name{font-size:11px;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--green);}
.roxy-float-msg{font-family:var(--f-sans);font-size:14px;line-height:1.5;
  color:rgba(255,255,255,0.88);margin-bottom:10px;}
.roxy-float-actions{display:flex;justify-content:flex-end;gap:10px;}
.roxy-float-btn{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-sans);font-size:12px;font-weight:600;padding:7px 16px;
  border-radius:var(--r-pill);border:none;cursor:pointer;transition:all .18s ease;
  text-decoration:none;}
.roxy-float-btn.primary{background:var(--green);color:var(--on-green);
  box-shadow:0 2px 10px -3px rgba(168,255,53,0.45);}
.roxy-float-btn.primary:hover{background:var(--green-deep);transform:translateY(-1px);
  box-shadow:0 4px 14px -3px rgba(168,255,53,0.55);}
@media(max-width:1100px){.roxy-float{left:-40px;width:360px;}}
@media(max-width:860px){.roxy-float{position:relative;left:0;bottom:auto;width:100%;margin-top:16px;}}
@media(max-width:600px){.roxy-float{display:none;}}
