/* ── FuturesTradingBots ─ main.css ───────────────────────────────
   Dark quant-terminal storefront, catalog release r3.
   Chakra Petch (display) + Inter (prose) + JetBrains Mono (data)
   via Google Fonts; robust local fallbacks. Zero JavaScript.

   Neutrals are hue-shifted into the brand teal-black family
   (no stock framework hexes). Every fg/bg pair ≥ 4.5:1 (WCAG AA):
     text   #E9F2EE on bg/panel/raised = 16.9 / 15.6 / 14.5
     muted  #8FA8A1 on bg/panel/raised =  7.6 /  7.0 /  6.5
     faint  #738D85 on bg/panel/raised =  5.4 /  5.0 /  4.6
     accent #56C8A2 on bg/panel/raised =  9.3 /  8.6 /  8.0
       → covers .chip-verified text, .stable .pf cells, and PF
         hero/featured figures on panel (8.6) and on the raised
         row-hover background (8.0)
     pill-green: accent #56C8A2 on accent-dim composited over
       bg / panel / raised = 8.3 / 7.5 / 6.9
     on-accent #06231A on accent/accent-hi   =  8.1 /  9.6
     buy    #ED9B40 on bg/panel/raised       =  8.6 /  7.9 /  7.4
       → also covers .badge-special and .tag-off amber text, and
         .hot standout-stat values (7.9 on panel cells/boxes, 7.4
         on the raised row-hover background)
     .est values = muted #8FA8A1 (7.0 panel / 6.5 raised); the 11px
       .est-tag marker + .asym-note = faint #738D85 (5.0 panel /
       4.6 raised) — at or above the 11px type floor
     glossary: .gchip mint on panel 8.6; .gdef dd + .gleg muted on
       panel 7.0; .gloss-integrity text #E9F2EE on accent-dim
       composited over panel ≈ 13.6
     buy-ink #1F1102 on buy/buy-hi           =  8.2 /  9.9
     .was strike price = muted #8FA8A1: 7.0 on panel cards,
       6.5 on the raised buybox
     .chart-note / .spark-note / .chart-title
       captions = faint #738D85: 5.4 on bg / 5.0 on panel
     .chart-end / .ckey figures = text #E9F2EE (15.6 on panel)
       and muted #8FA8A1 (7.0 on panel)
     plan finder (plan.html): reuses text/muted/faint/mint pairs
       on bg/panel/raised only — no new pairs; chip checked state
       mint on rgba mint over raised ≥ 7.5 (same math as pill-green)
     book identity colors (owner-approved exception to the two-
       accent rule; data text stays mint/amber everywhere else):
       midas gold #E8C15C on panel 10.3 / raised 9.6 (AA)
       continuum cyan #5CC8E8 on panel 9.2 / raised 8.6 (AA)
       daylight sun-orange #FF9142 on panel 7.9 / raised 7.4 (AA)
       vault silver #C7D3DC on panel 11.7 / raised 10.9 (AA)
     flagship identity colors (same exception; name/emblem/chrome
       only — all ≥ 7.6 on panel): spartacus bronze #E3A857 8.5,
       alloy copper #F0907A 7.6, market-maker blue #7FB2FF 8.2,
       sterling silver #D9E3EA 13.7, abacus jade-lime #B4E369 12.0,
       pendulum orchid #E88FC6 7.8; DD medals: gold #E8C15C 10.3,
       neon green #7CFFB2 14.2 on panel (AA); themed product pages reuse
       these as the --buy channel: CTA ink #1F1102 on the darkest
       identity color (alloy copper) 6.6 — all ten pairs AA+
     gradient display names (.feat/.fcard/.special-card h4 links,
       .pack h3 / .books-head h3 links, .pdp-head h1): linear-gradient
       stops #E9F2EE / #56C8A2 / #6AD8B3 — every stop individually AA
       on every surface it can cross:
         #E9F2EE 16.9 / 15.6 / 14.5 on bg / panel / raised
         #56C8A2  9.3 /  8.6 /  8.0
         #6AD8B3 11.1 / 10.2 /  9.5
       gated behind @supports (background-clip: text); outside it the
       names keep their solid --text fallback.
     chart + sparkline strokes are decorative graphics
       (aria-hidden), exempt from text contrast.
   Non-text (WCAG 1.4.11 ≥ 3:1): interactive outline-button
   borders use --line-interactive #4E7168 = 3.6 on bg / 3.3 on
   panel; --line/--line-bright stay decorative hairlines only.
   The rgba(86,200,162,.45) mint outline on .chip-verified and
   .pill-green (≈2.7:1 on panel) is decorative — the AA-passing
   mint text carries the meaning.
   Amber (--buy) carries two owner-approved meanings: transactional
   — purchase CTAs and deal badges/flags/figures (BEST VALUE,
   "2 months free") — and exceptional-stat: the .hot standout-stat
   glow on verified stats (never on EST values). One decorative
   exception: the chromatic-split name hover flicks amber at 55%
   alpha as one of two 1px offset shadows — a transient hover-state
   flourish, not a meaning-bearing use (the AA text color carries
   the content).
   Red retired with the drawdown highlight — no red on the site.
   Mint (--accent) carries data, profit factors, and the
   VERIFIED status.
   ──────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg:     #051014;
  --panel:  #0A1A1F;
  --raised: #0F2129;

  /* hairlines (decorative) vs interactive borders (≥3:1 non-text) */
  --line:        rgba(143, 168, 161, .14);
  --line-bright: #2A423E;
  --line-interactive: #4E7168;

  /* foregrounds */
  --text:  #E9F2EE;
  --muted: #8FA8A1;
  --faint: #738D85;

  /* brand accent — mint terminal green: data, wins, status */
  --accent:     #56C8A2;
  --accent-hi:  #6AD8B3;
  --accent-dim: rgba(86, 200, 162, .08);
  --on-accent:  #06231A;

  /* commerce accent — amber: buy CTAs, deal badges/flags */
  --buy:     #ED9B40;
  --buy-hi:  #F4B066;
  --buy-ink: #1F1102;
  /* amber sub-tones as vars so identity-themed product pages can retint
     every transactional accent at once (see .pdp-theme) */
  --buy-soft: rgba(237, 155, 64, .10);
  --buy-line: rgba(237, 155, 64, .45);
  --buy-glow-soft: rgba(237, 155, 64, .27);
  --buy-glow-strong: rgba(237, 155, 64, .45);

  --mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --sans:    "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Chakra Petch", "Bahnschrift", "Avenir Next Condensed", ui-sans-serif, system-ui, sans-serif;

  /* type scale — 8 tokens + 3 display clamps; nothing below 11px */
  --fs-2xs: .6875rem;
  --fs-xs:  .75rem;
  --fs-sm:  .8125rem;
  --fs-md:  .875rem;
  --fs-lg:  .9375rem;
  --fs-xl:  1.0625rem;
  --fs-2xl: 1.5625rem;
  --fs-3xl: 2.125rem;
  --fs-h1:  clamp(1.875rem, 4.6vw, 3.25rem);
  --fs-net: clamp(1.5625rem, 2.6vw, 2.125rem);
  --fs-hero: clamp(2.375rem, 4vw, 3rem);

  /* spacing scale */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2.25rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;

  --maxw: 1120px;
  --header-h: 64px;   /* sticky header height — drives scroll-margin */
  --fast: 180ms;
  --ease: cubic-bezier(.25, .46, .45, .94);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* anchored sections clear the sticky header at every nav height */
section[id], main[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--on-accent);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--mono); font-size: var(--fs-sm); z-index: 99;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* visually hidden, still announced by assistive tech */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* inline icons — one stroke grammar everywhere: 1.5 / non-scaling */
.ic       { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.ic-check { width: 15px; height: 15px; flex-shrink: 0; margin-top: var(--sp-1); color: var(--accent); }
.ic-arrow { width: 13px; height: 13px; flex-shrink: 0; }
.ic-pp    { width: 12px; height: 12px; flex-shrink: 0; }

/* ── ticker: static system facts + pure-CSS pause control ──── */
.tickerbar {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.ticker-check {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
}
.ticker-pauselab {
  display: inline-flex; align-items: center;
  flex-shrink: 0;      /* the nowrap label must never shrink under its text */
  min-height: 44px; min-width: 44px;
  padding: 0 var(--sp-3);
  border-right: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.ticker-pauselab:hover { color: var(--text); }
.tp { display: inline-flex; align-items: center; gap: var(--sp-2); }
.tp-play { display: none; }
#ticker-pause:checked ~ .tickerbar .ticker-pauselab .tp-pause { display: none; }
#ticker-pause:checked ~ .tickerbar .ticker-pauselab .tp-play  { display: inline-flex; }
#ticker-pause:focus-visible ~ .tickerbar .ticker-pauselab { outline: 2px solid var(--accent); outline-offset: -2px; }
.ticker {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-left: var(--sp-4);
}
.ticker-track { display: inline-flex; }
.ticker-track span { display: inline-block; padding-right: var(--sp-7); }

/* ── header ────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: var(--header-h);
}
.brand {
  font-family: var(--mono);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: .06em;
  color: var(--text);
}
/* flex item: pad to a ≥44px tap target (38px + 2×4px = 46px) and
   cancel with a matching negative margin so the nav row never grows */
.brand {
  padding-block: var(--sp-1);
  margin-block: calc(-1 * var(--sp-1));
}
.brand:hover { text-decoration: none; }
/* wordmark lockup: candlestick-eyed bot mark + FUTURES / TRADINGBOTS.
   Accent lands on BOTS (the distinctive word); mint on the eyes is the
   data channel per the brand ledger. All fills come from classes - the CSP
   forbids inline style attributes. */
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand .bname { display: block; }
.brand .mk { color: var(--accent); }
.bmark { width: 1.5em; height: 1.5em; flex: none; }
.bmark-head { fill: none; stroke: var(--text); stroke-width: 1.6; }
.bmark-ant  { fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; }
.bmark-node { fill: var(--accent); }
.bmark-eye  { fill: var(--accent); }
.brand small {
  display: block;
  font-size: var(--fs-2xs); font-weight: 400;
  letter-spacing: .12em;   /* tuned so line 2 tracks line 1's width */
  color: var(--faint);
  margin-top: -2px;   /* optical */
}
.nav-links {
  display: flex; gap: var(--sp-5);
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .03em;
}
.nav-links a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-1);
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav-links a { white-space: nowrap; }
.nav-links a:hover { color: var(--accent); text-decoration: none; }

/* pure-CSS active state: mark the nav link whose section is the current :target */
body:has(#strategies:target) .nav-links a[href="#strategies"],
body:has(#packages:target)   .nav-links a[href="#packages"],
body:has(#how:target)        .nav-links a[href="#how"],
body:has(#faq:target)        .nav-links a[href="#faq"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

/* ── buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  border: 1px solid var(--line-interactive);
  color: var(--text);
  background: transparent;
  cursor: pointer;
  appearance: none;
  transition: border-color var(--fast) var(--ease),
              background   var(--fast) var(--ease),
              color        var(--fast) var(--ease),
              transform    var(--fast) var(--ease),
              box-shadow   var(--fast) var(--ease);
}
/* hover lift + soft glow in the button's border color */
.btn:hover {
  text-decoration: none;
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(86, 200, 162, .25);
}
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}
.btn-solid:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--on-accent);
  box-shadow: 0 0 16px rgba(86, 200, 162, .35);
}
/* purchase CTAs: the single warm element on a cool page */
.btn-buy {
  position: relative;
  overflow: hidden;
  background: var(--buy);
  border-color: var(--buy);
  color: var(--buy-ink);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.btn-buy:hover {
  background: var(--buy-hi);
  border-color: var(--buy-hi);
  color: var(--buy-ink);
  box-shadow: 0 0 16px rgba(237, 155, 64, .35);
}
/* sheen sweep strip — a translucent highlight that crosses the
   label without hiding it; invisible at rest, animated on hover
   only inside prefers-reduced-motion: no-preference (below) */
.btn-buy::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%;
  left: 0;
  width: 34%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .32) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg) translateX(-160%);
  opacity: 0;
  pointer-events: none;
}
.btn-sm { min-height: 38px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
/* compact screener-row CTA — still a ≥44px touch target.
   Amber OUTLINE, not fill: solid amber is reserved for the
   featured/flagship/bundle tiers so CTA weight follows the
   density gradient (#ED9B40 on --panel = 7.9:1, AA). */
.btn-row {
  min-height: 44px; padding: 0 var(--sp-3);
  font-size: var(--fs-2xs); white-space: nowrap;
  background: transparent;
  border-color: var(--buy);
  color: var(--buy);
}
.btn-row:hover {
  background: var(--buy);
  border-color: var(--buy);
  color: var(--buy-ink);
  box-shadow: 0 0 12px rgba(237, 155, 64, .3);
}

/* ── hero ──────────────────────────────────────────────────── */
.hero {
  border-bottom: 1px solid var(--line);
  /* faint vertical column rules — HUD grid, no dots, no glow */
  background-image: repeating-linear-gradient(
    to right,
    rgba(143, 168, 161, .05) 0 1px,
    transparent 1px 64px
  );
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-6);
}
.hero-grid > * { min-width: 0; }
.microlabel {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-5);
}
h1 {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
  margin-bottom: var(--sp-5);
  text-wrap: balance;
}
h1 .hl { color: var(--accent); }
.hero p.lede {
  color: var(--muted);
  font-size: var(--fs-xl);
  max-width: 34rem;
  margin-bottom: var(--sp-4);
}
/* origin story — second hero paragraph, quieter than the lede */
.hero p.origin {
  color: var(--muted);
  font-size: var(--fs-md);
  max-width: 34rem;
  margin-bottom: var(--sp-6);
}
.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* terminal panel */
.term {
  position: relative;
  border: 1px solid var(--line-bright);
  background: var(--panel);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  line-height: 1.75;
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
/* HUD corner ticks — one geometry everywhere: TL + BR, 1px */
.term::before, .term::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  pointer-events: none;
}
.term::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.term::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.term-bar {
  display: flex; justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--fs-2xs);
  letter-spacing: .05em;
}
.term-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); overflow-x: hidden; }
.term-body .cmd,
.term-body .out { white-space: pre-wrap; }
.term-body .cmd { color: var(--text); }
.term-body .cmd::before { content: "$ "; color: var(--muted); }
.term-body .out { color: var(--muted); }
.term-body .ok  { color: var(--accent); }
.term-body .num { color: var(--text); font-variant-numeric: tabular-nums; }
.cursor {
  display: inline-block; width: 8px; height: 15px;
  background: var(--accent);
  vertical-align: text-bottom;
}

/* ── hero: session rotation dial (decorative SVG) ──────────── */
.dial-wrap { display: flex; justify-content: center; }
.dial {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
}
.dial-outer {
  fill: none;
  stroke: var(--line-bright);
  stroke-width: 1;
}
/* fine tick marks: short dashes on a wide stroke read as radial ticks */
.dial-tickring {
  fill: none;
  stroke: var(--line-bright);
  stroke-width: 7;
  stroke-dasharray: 1.5 8.45;
}
/* session-handoff arcs: four dasharray quarters of one mid ring
   (r=118 → C≈741.4; 172 dash + 6.5° gap), mint at stepped opacities */
.dial-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 172 570;
}
.dial-arc-a { stroke-opacity: .9; }
.dial-arc-b { stroke-opacity: .62; }
.dial-arc-c { stroke-opacity: .42; }
.dial-arc-d { stroke-opacity: .26; }
.dial-label {
  font-family: var(--mono);
  /* SVG user units, not the type scale: 16 units of the 420-unit
     viewBox render ~11.4px at the 300px mobile dial cap (and 16px
     at full size), keeping session names at or above 11px */
  font-size: 16px;
  letter-spacing: .14em;
  fill: var(--faint);
}
.dial-hand line { stroke: var(--accent); stroke-width: 1.5; }
.dial-hub { fill: var(--accent); }
/* static at a pleasing angle; the sweep animation is opt-in only
   (see the prefers-reduced-motion: no-preference block below) */
.dial-hand {
  transform-box: view-box;
  transform-origin: center;
  transform: rotate(28deg);
}

/* ── stats strip ───────────────────────────────────────────── */
.stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.stats > li {
  padding: var(--sp-5);
  border-left: 1px solid var(--line);
  min-width: 0;
}
.stats > li:first-child { border-left: 0; }
.stats b {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-2xl);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.stats span {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── sections ──────────────────────────────────────────────── */
section { border-bottom: 1px solid var(--line); padding: var(--sp-6) 0; }
.hero { padding: 0; }                    /* hero spacing lives on .hero-grid */
.sec-head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);  /* HUD rule under every section head */
}
.sec-head .idx {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .1em;
}
.sec-head h2 {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sec-head .note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  letter-spacing: .04em;
}
/* ── stat glossary panel: HOW TO READ THE STATS ────────────── */
.glossary {
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: var(--sp-5);
}
.gloss-title {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.gloss-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-5);
  padding: var(--sp-4);
}
.gdef { min-width: 0; }
.gdef dt { margin-bottom: var(--sp-2); }
.gchip {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px solid rgba(86, 200, 162, .45);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}
.gdef dd {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--muted);
  letter-spacing: .02em;
}
/* legend: the three cell states used across the site */
.gloss-legend {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}
.gleg {
  display: inline-flex; align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: .04em;
}
.gsample {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--line-bright);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}
/* integrity strip — mint left edge, slightly emphasized */
.gloss-integrity {
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--accent-dim);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* ── chips: markets + validation status ────────────────────── */
.chip {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
}
.chip-mkt {
  border: 1px solid var(--line-bright);
  background: var(--raised);
  color: var(--muted);
}
/* single uniform verification badge — mint outline, AA mint text
   on bg (9.3), panel (8.6), and raised row-hover (8.0) */
.chip-verified {
  border: 1px solid rgba(86, 200, 162, .45);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

/* special-offer badge — amber, per the commerce-accent rule.
   #ED9B40 text on bg 8.6 / panel 7.9 (AA). The glow pulse is
   opt-in only (prefers-reduced-motion: no-preference) and finite
   (2 cycles ≈ 4.4s < 5s, WCAG 2.2.2). */
.badge-special {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: none;
  line-height: 1.2;
  background: var(--bg);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--buy);
  background: transparent;
  color: var(--buy);
  padding: var(--sp-1) var(--sp-2);
  white-space: nowrap;
}
/* small static deal tag — same amber pair, never animated */
.tag-off {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--buy);
  color: var(--buy);
  padding: 2px var(--sp-2);
  white-space: nowrap;
}
/* struck anchor price — muted 7.0 on panel / 6.5 on raised (AA) */
.was {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-decoration: line-through;
}
.price .was { font-size: var(--fs-lg); margin-right: var(--sp-2); }
.feat-price .was { font-size: var(--fs-sm); }

/* months-green badge — mint pill (sheet-sourced data only) */
.pill-green {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--accent-dim);
  border: 1px solid rgba(86, 200, 162, .45);
  color: var(--accent);
  padding: 2px 8px;
  white-space: nowrap;
}

/* ── tier heads inside #strategies ─────────────────────────── */
.tier-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}
.glossary + .tier-head { margin-top: 0; }
.tier-head .tier-tag {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: .12em;
}
.tier-head h3 {
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tier-head .note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .04em;
}

/* ── featured band: 4 compact profit-factor cards ──────────── */
.featured {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.featured > * { min-width: 0; }
.feat {
  position: relative;
  border: 1px solid rgba(86, 200, 162, .45);
  background: var(--panel);
  padding: var(--sp-4);
  display: flex; flex-direction: column;
  gap: var(--sp-2);
}
/* HUD corner ticks — same geometry as .term */
.feat::before, .feat::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  pointer-events: none;
}
.feat::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.feat::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
/* DOM puts the h4 first (so heading-jump screen-reader nav still
   reaches the stat); flex order restores the stat-first visual stack */
.feat-fig {
  order: -2;
  font-family: var(--mono);
  font-size: var(--fs-hero);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.feat-figlabel {
  order: -1;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.feat h4 {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  margin-top: var(--sp-1);
}
.feat-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.feat-sub {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--muted);
  flex-grow: 1;
}
.feat-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.feat-price .now { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.feat-price .per { font-size: var(--fs-2xs); color: var(--faint); letter-spacing: .06em; }
.feat .btn-buy { width: 100%; }

/* ── tier 1: flagship cards ────────────────────────────────── */
.flagships {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.flagships > * { min-width: 0; }
.fcard {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  transition: border-color var(--fast) var(--ease),
              transform    var(--fast) var(--ease);
}
.fcard:hover {
  border-color: rgba(86, 200, 162, .45);
  transform: translateY(-2px);
}
.fcard-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.fcard-id { min-width: 0; }
.fcard h4 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--display);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}
.fmeta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.fmeta-note {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .04em;
}
.fhero {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}
.fhero b {
  font-family: var(--mono);
  font-size: var(--fs-net);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fhero span {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.fcard p.desc {
  font-size: var(--fs-md);
  color: var(--muted);
  margin-bottom: var(--sp-2);
}
.fcard .desc em { color: var(--text); font-style: italic; }
/* bottom-anchor the data block: any leftover card height collects
   ABOVE .fstats (never mid-card), so stats/price/CTA rows align
   across the row of cards */
.flagships .fcard .fstats { margin-top: auto; }
/* orphan card (odd count): span the full row with a horizontal
   variant so it never stretches awkwardly at card width */
.flagships .fcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 769px) {
  .flagships .fcard:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "top   top"
      "desc  spark"
      "desc  note"
      "stats stats"
      "price cta";
    column-gap: var(--sp-6);
  }
  .flagships .fcard:last-child:nth-child(odd) .fcard-top   { grid-area: top; }
  .flagships .fcard:last-child:nth-child(odd) .desc        { grid-area: desc; margin-bottom: 0; }
  .flagships .fcard:last-child:nth-child(odd) .spark       { grid-area: spark; margin-top: 0; align-self: end; }
  .flagships .fcard:last-child:nth-child(odd) .spark-note  { grid-area: note; }
  .flagships .fcard:last-child:nth-child(odd) .fstats      { grid-area: stats; margin-top: var(--sp-4); }
  .flagships .fcard:last-child:nth-child(odd) .price-row   { grid-area: price; align-self: center; }
  .flagships .fcard:last-child:nth-child(odd) .cta-row     { grid-area: cta; align-self: center; }
}

/* ── homepage sparklines (decorative, aria-hidden) ─────────── */
.spark {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: var(--sp-3);
}
/* caption sits fully BELOW the svg — labels never overlap the plot */
.spark-note {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .06em;
  margin-top: var(--sp-1);
}
.spark-key { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-3); }

/* ── NY Open Pro special deal card (full-width, tier 1) ────── */
.special-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--sp-5) var(--sp-6);
  border: 1px solid rgba(237, 155, 64, .45);   /* restrained amber: deal element */
  background: var(--panel);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
.special-card > * { min-width: 0; }
/* amber HUD corner ticks — same geometry as .term / .feat */
.special-card::before, .special-card::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  pointer-events: none;
}
.special-card::before { top: -1px; left: -1px; border-top: 1px solid var(--buy); border-left: 1px solid var(--buy); }
.special-card::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--buy); border-right: 1px solid var(--buy); }
.special-card h4 {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
}
.special-main { display: flex; flex-direction: column; }
.special-main .fmeta { margin-bottom: var(--sp-2); }
.special-main .desc {
  font-size: var(--fs-md);
  color: var(--muted);
  margin: var(--sp-2) 0;
}
/* bottom-anchor the engine rows: leftover column height collects
   above the stats, mirroring the grid cards */
.special-main .desc + .fstats { margin-top: auto; }
.special-side { display: flex; flex-direction: column; }
.special-side .fhero { align-items: flex-start; text-align: left; }
.special-side .fhero b { font-size: var(--fs-hero); }
.special-side .price-row { margin-top: auto; padding-top: var(--sp-3); }

/* per-card stat row — sheet values only */
.fstats {
  display: flex; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.fstat {
  flex: 1 1 6.5rem;
  min-width: 0;
  border: 1px solid var(--line-bright);
  padding: var(--sp-2) var(--sp-3);
}
.fstat b {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.fstat span {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
/* price + CTA rows */
.price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline;
  gap: var(--sp-2);
}
.price .now {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
}
.price .per {
  font-size: var(--fs-xs);
  color: var(--faint);
  letter-spacing: .06em;
}
.cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.cta-row .btn {
  width: 100%;
  padding: 0 var(--sp-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
}
.cta-row .btn-buy { font-size: var(--fs-sm); min-height: 48px; }
/* ghost link: muted label, but the border stays ≥3:1 (1.4.11) */
.cta-row .btn:not(.btn-buy) { border-color: var(--line-interactive); color: var(--muted); }
.cta-row .btn:not(.btn-buy):hover { border-color: var(--accent); color: var(--accent); }

/* ── tiers 2–3: terminal screener tables ───────────────────── */
/* the wrapper scrolls (keyboard-focusable region); the PAGE never
   scrolls horizontally — .stable's min-width lives inside it */
/* right-edge scroll affordance: narrow viewports only (see the
   929px block below) — desktop shows no fade and no hint because
   the table fits without scrolling there */
.screener {
  overflow-x: auto;
  /* positioning context: keeps the sr-only caption/header spans
     (position: absolute) inside the scroller instead of letting
     them extend the page's horizontal scrollWidth on mobile */
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
}
/* mobile-only "scroll →" hint above each screener */
.scroll-hint {
  display: none;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
  margin-bottom: var(--sp-2);
}
/* one-line EST legend repeated above the tier-3 screener, where
   most EST values sit — muted #8FA8A1 on bg = 7.6 (AA) */
.est-note {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: var(--sp-2);
}
.stable {
  width: 100%;
  /* widened for the dual-name cell (nickname + actual name); the
     wrapper already scrolls at these widths, so extra width is free */
  min-width: 1040px;
  /* separate borders (not collapse) so the sticky first column keeps
     its own bottom border while the row scrolls behind it */
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.stable thead th {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line-bright);
  white-space: nowrap;
}
.stable thead th:first-child { text-align: left; }
.stable tbody td,
.stable tbody th {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--line);
  text-align: right;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.stable tbody tr:last-child td,
.stable tbody tr:last-child th { border-bottom: 0; }
.stable tbody tr:hover td,
.stable tbody tr:hover th { background: var(--raised); }
.stable tbody th[scope="row"] { text-align: left; white-space: normal; }
/* profit factor is the selling point — mint + semibold.
   #56C8A2 on --panel = 8.6:1, on --raised row-hover = 8.0:1 (AA). */
.stable .pf {
  color: var(--accent);
  font-weight: 600;
}
/* sticky System column: readers keep context while the row scrolls.
   Works because .stable uses border-collapse: separate — each th
   carries its own bottom border, so the hairline travels with the
   sticky cell instead of shearing off. Solid --panel background
   (raised on row hover) hides the cells sliding underneath. */
.stable tbody th[scope="row"],
.stable thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--panel);
}
/* ── stat provenance: EST estimates + standout-stat glow ────
   Shared with the product pages' .record tables and chart heads. */
/* standout stat — owner-approved second meaning of amber
   (amber = transactional OR exceptional-stat): amber value,
   subtle amber ring, faint amber glow. #ED9B40 = 7.9 on panel,
   7.4 on the raised row-hover background (AA). */
/* number-only standout: amber glyph glow, never a box or ring */
.hot,
.stable tbody td.hot,
.record td.hot {
  color: var(--buy);
  font-weight: 600;
  box-shadow: none;
  text-shadow: 0 0 10px rgba(237, 155, 64, .28);
}
.fstat.hot,
.gsample.hot {
  border-color: var(--line);
  box-shadow: none;
  color: var(--buy);
  text-shadow: 0 0 10px rgba(237, 155, 64, .28);
}
/* category leader: the single best value per column glows violet */
.lead,
.stable tbody td.lead,
.fstat b.lead {
  color: #9D5CFF;   /* deep violet, 6.6 on panel, AA */
  font-weight: 700;
  box-shadow: none;
  text-shadow: 0 0 6px rgba(157, 92, 255, .65), 0 0 18px rgba(157, 92, 255, .35);
}
/* bare featured-band figures glow on the glyphs, not a box */
.feat-fig.hot {
  color: var(--buy);
  box-shadow: none;
  text-shadow: 0 0 10px rgba(237, 155, 64, .25);
}
/* low-win-rate framing note under a card's stat row */
.asym-note {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .04em;
  margin-top: var(--sp-2);
}
.sys { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 15rem; }
.sys-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.sys-name {
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}
.sys-desc {
  font-family: var(--sans);
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .01em;
  white-space: normal;
}
.mark-feat {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.price-cell { font-weight: 700; }
.price-cell .per {
  font-size: var(--fs-2xs);
  font-weight: 400;
  color: var(--faint);
  letter-spacing: .04em;
}
.cta-cell { text-align: right; }

/* strategies section footer: delivery + required disclaimer */
.sec-footnote {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.delivery-line {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--accent);
  letter-spacing: .04em;
  margin-bottom: var(--sp-3);
}
.disclaim-sm {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--muted);
  max-width: 60rem;
}

/* ── bundles ───────────────────────────────────────────────── */
.packs-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.packs-2 > * { min-width: 0; }
.pack {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-5);
  display: flex; flex-direction: column;
  position: relative;
  transition: border-color var(--fast) var(--ease);
}
.pack:hover { border-color: var(--line-bright); }
.pack.popular { border-color: var(--accent); background: var(--raised); }
.pack.popular:hover { border-color: var(--accent-hi); }
/* HUD corner ticks anchor the featured tier — TL + BR, 1px */
.pack.popular::before, .pack.popular::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  pointer-events: none;
}
.pack.popular::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.pack.popular::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
/* deal flag — amber, per the commerce-accent rule */
.pack .flag {
  position: absolute; top: -1px; right: -1px;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  background: var(--buy);
  color: var(--buy-ink);
  padding: var(--sp-1) var(--sp-2);
  font-weight: 700;
}
.pack h3 {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--sp-4);
}
.pack .amount {
  font-family: var(--mono);
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.pack .amount small { font-size: var(--fs-md); font-weight: 400; color: var(--faint); }
.pack .sub { font-size: var(--fs-md); color: var(--muted); margin-bottom: var(--sp-5); }
.pack ul {
  list-style: none;
  flex-grow: 1;
  margin-bottom: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.pack li {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
  font-size: var(--fs-md);
  color: var(--muted);
}
.pack .btn { width: 100%; }

/* full-width thin annual banner */
.banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-bright);
  background: var(--raised);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  text-align: center;
}
.banner b { color: var(--buy); font-weight: 700; }  /* deal figure = commerce amber, 7.4:1 on raised */

/* ── how it works ──────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.steps > * { min-width: 0; }
.step {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-5);
  transition: border-color var(--fast) var(--ease);
}
.step:hover { border-color: var(--line-bright); }
.step-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.step-top .ic { color: var(--accent); }
.step .n {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--faint);
  letter-spacing: .1em;
}
.step h3 {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.step p { font-size: var(--fs-md); color: var(--muted); }

/* ── security ──────────────────────────────────────────────── */
.sec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.sec-grid > * { min-width: 0; }
.fact {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-5);
  transition: border-color var(--fast) var(--ease);
}
.fact:hover { border-color: var(--line-bright); }
.fact > .ic { color: var(--accent); margin-bottom: var(--sp-3); }
.fact h3 {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.fact p { font-size: var(--fs-md); color: var(--muted); }

/* ── faq ───────────────────────────────────────────────────── */
.faq details {
  border: 1px solid var(--line);
  background: var(--panel);
  margin-bottom: var(--sp-2);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  transition: background var(--fast) var(--ease);
}
.faq summary:hover { background: var(--raised); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  content: "+" / "";     /* decorative for screen readers */
  font-family: var(--mono);
  color: var(--accent);
  font-size: var(--fs-lg);
  flex-shrink: 0;
}
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq details[open] summary::after {
  content: "−";
  content: "−" / "";
}
.faq details p {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  font-size: var(--fs-md);
  color: var(--muted);
  max-width: 52rem;
}

/* ── footer ────────────────────────────────────────────────── */
footer { padding: var(--sp-7) 0; }
.foot-links {
  display: flex; flex-wrap: wrap;
  gap: 0 var(--sp-5);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  margin-bottom: var(--sp-5);
}
.foot-links a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--muted);
  transition: color var(--fast) var(--ease);
}
.foot-links a:hover { color: var(--text); }
.disclaimer {
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--muted);
  max-width: 60rem;
  margin-bottom: var(--sp-6);
}
.disclaimer strong { color: var(--text); font-weight: 600; }
.copyright {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--faint);
  letter-spacing: .05em;
}

/* ── card hover: lift + border brighten + ambient shadow ───── */
.feat, .fcard, .pack, .step, .fact, .special-card {
  transition: border-color var(--fast) var(--ease),
              transform    var(--fast) var(--ease),
              box-shadow   var(--fast) var(--ease);
}
.feat:hover, .fcard:hover, .pack:hover, .step:hover, .fact:hover, .special-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .75);
}
.feat:hover         { border-color: rgba(86, 200, 162, .7); }
.special-card:hover { border-color: rgba(237, 155, 64, .7); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); padding-block: var(--sp-7); }
  .featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gloss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > li:nth-child(3) { border-left: 0; }
  .stats > li { border-top: 1px solid var(--line); }
  .stats > li:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 768px) {
  .btn-sm { min-height: 44px; }            /* ≥44px touch targets on mobile */
  .flagships { grid-template-columns: minmax(0, 1fr); }
  .packs-2 { grid-template-columns: minmax(0, 1fr); }
  .special-card { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* scroll affordance appears only once the screener can scroll:
   the "scroll →" hint plus a right-edge mint fade with a
   panel-colored cover attached `local` to the content — the cover
   slides over the fade and hides it once the table is scrolled to
   (or already at) its end. Pure CSS, no JS.
   Breakpoint = real scroll threshold: .sys{min-width:15rem} plus
   nowrap cells push the tables' intrinsic widths past .stable's
   880px minimum, to 922px (tier 2) and 940px (tier 3). So:
   940px table + 2px border + 48px wrap padding = 990px, plus up
   to ~17px of classic Windows scrollbar ≈ 1007px — the tables
   can scroll below that, so the hint/fade show below 1007. */
@media (max-width: 1006px) {
  .scroll-hint { display: block; }
  .screener {
    background:
      linear-gradient(to left, var(--panel) 35%, rgba(10, 26, 31, 0)) right center / 48px 100% no-repeat local,
      linear-gradient(to left, rgba(86, 200, 162, .14), rgba(86, 200, 162, 0)) right center / 34px 100% no-repeat scroll,
      var(--panel);
  }
}

@media (max-width: 640px) {
  :root { --header-h: 108px; }             /* wrapped two-row header */
  .steps, .sec-grid { grid-template-columns: minmax(0, 1fr); }
  .gloss-grid { grid-template-columns: minmax(0, 1fr); }
  .nav {
    flex-wrap: wrap;
    min-height: 0;
    padding: var(--sp-2) 0;
    gap: var(--sp-1) var(--sp-5);
  }
  .nav .btn-sm { margin-left: auto; }      /* keep the CTA right-aligned */
  .nav-links {                             /* nav wraps below the brand — never hidden */
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0 var(--sp-4);
  }
  section { padding: var(--sp-7) 0; }
  .sec-head { flex-wrap: wrap; }
  .sec-head .note { display: none; }
  .stats > li { padding: var(--sp-4); }
  .term { font-size: var(--fs-2xs); }
  .dial { max-width: 300px; }              /* dial centered, ≤300px on mobile */
  .spark { height: 56px; }                 /* shorter sparklines on phones */
  .featured { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .tier-head { margin: var(--sp-6) 0 var(--sp-4); }
  /* cap the sticky System column on phones so data columns stay
     visible beside it while the row scrolls. width: 1px forces the
     COLUMN to min-content (~192px: the 10.5rem .sys cap + cell
     padding) — without it, auto table layout pours .stable's 880px
     surplus into column 1 and the sticky column balloons to ~235px,
     covering most of a phone-width scroller */
  .sys { width: 10.5rem; min-width: 0; }
  .stable tbody th[scope="row"],
  .stable thead th:first-child { width: 1px; }
  .stable tbody td,
  .stable tbody th { padding: var(--sp-2) var(--sp-3); }
}

@media (max-width: 480px) {
  section { padding: var(--sp-5) 0; }      /* tighter section rhythm on phones */
  .hero-grid { padding-block: var(--sp-6); gap: var(--sp-6); }
  .cta-row { grid-template-columns: minmax(0, 1fr); }
  .price-row { align-items: flex-start; }
  .fcard-top { flex-direction: column; }
  .fglyph { align-self: flex-start; width: 64px; min-width: 0; aspect-ratio: auto; height: 64px; }
  .fhero { align-items: flex-start; text-align: left; }
}

/* keep the header at two rows max — no third wrap line */
@media (max-width: 420px) {
  .nav-links { font-size: var(--fs-2xs); gap: 0 var(--sp-3); }
  .brand { font-size: var(--fs-md); }
  .btn-sm { padding: 0 var(--sp-3); }
}

/* below ~332px the links can wrap to a third row: tighten,
   and raise the anchor offset to clear the taller header */
@media (max-width: 344px) {
  :root { --header-h: 136px; }
  .nav-links { gap: 0 var(--sp-2); letter-spacing: 0; }
}

/* ── motion: opt-in only ───────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: tick 60s linear infinite; will-change: transform; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
  .cursor { animation: blink 1.1s steps(1) infinite; }
  .dial-hand { animation: dial-sweep 40s linear infinite; }
  /* subtle amber glow pulse on the special-offer badge — finite:
     2 cycles ≈ 4.4s, under the 5s WCAG 2.2.2 threshold */
  .badge-special { animation: special-pulse 2.2s var(--ease) 2; }
  /* gentle standout-stat glow pulse — same finite budget; the box
     and figure variants keep each shape's resting shadow form */
  .hot { animation: hot-pulse 2.2s var(--ease) 2; }
  /* one control pauses page animation (WCAG 2.2.2): the
     #ticker-pause checkbox is a direct child of <body> before the
     tickerbar and <main>, so :checked reaches the ticker track,
     the dial sweep, the badge pulse, and the stat glow (plus the
     card streak/caret and tick breathe — see the motion block near
     the end of this file). Sole exemption: the .btn-buy sheen, a
     600ms one-shot that only runs on hover/focus. */
  #ticker-pause:checked ~ * .ticker-track,
  #ticker-pause:checked ~ * .dial-hand,
  #ticker-pause:checked ~ * .badge-special,
  #ticker-pause:checked ~ * .hot { animation-play-state: paused; }
  /* sheen sweep across purchase CTAs on hover/focus */
  .btn-buy:hover::after,
  .btn-buy:focus-visible::after { animation: sheen 600ms var(--ease); }
}
@keyframes tick {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes blink { 50% { opacity: 0; } }
@keyframes dial-sweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes special-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 155, 64, 0); }
  50%      { box-shadow: 0 0 12px 1px rgba(237, 155, 64, .4); }
}
@keyframes hot-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(237, 155, 64, .35), 0 0 10px rgba(237, 155, 64, .18); }
  50%      { box-shadow: inset 0 0 0 1px rgba(237, 155, 64, .5),  0 0 16px rgba(237, 155, 64, .32); }
}
@keyframes hot-pulse-box {
  0%, 100% { box-shadow: 0 0 10px rgba(237, 155, 64, .18); }
  50%      { box-shadow: 0 0 16px rgba(237, 155, 64, .32); }
}
@keyframes hot-pulse-fig {
  0%, 100% { text-shadow: 0 0 10px rgba(237, 155, 64, .25); }
  50%      { text-shadow: 0 0 14px rgba(237, 155, 64, .45); }
}
@keyframes sheen {
  from { transform: skewX(-18deg) translateX(-160%); opacity: 1; }
  to   { transform: skewX(-18deg) translateX(460%);  opacity: 1; }
}

/* reduced motion: static final state everywhere */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .ticker-check, .ticker-pauselab { display: none; }  /* nothing to pause */
  .ticker { padding-left: var(--sp-5); }
}

/* ── product pages (strategies/*.html) ─────────────────────── */
.crumbs {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--faint);
  padding: var(--sp-4) 0 0;
}
.crumbs a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  /* inline box: vertical padding never moves the line box — it only
     grows the clickable area (16px text + 2×16px = 48px ≥ 44, 2.5.8) */
  padding-block: var(--sp-4);
}
.crumbs a:hover { color: var(--text); }
.crumbs .sep { padding: 0 var(--sp-2); color: var(--faint); }

.pdp { padding: var(--sp-6) 0 var(--sp-8); }
.pdp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-5);
  align-items: start;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.pdp-head h1 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin-bottom: var(--sp-2);
  text-wrap: balance;
}
.pdp-meta { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-2); }
.pdp-note {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}
.pdp-hero {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.pdp-hero b {
  display: block;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.02em;
}
.pdp-hero span {
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.pdp-desc { color: var(--muted); max-width: 62ch; margin-bottom: var(--sp-5); font-size: var(--fs-lg); }

.pdp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.pdp-cols > * { min-width: 0; }

/* left column of a product page: chart panel + record table */
.pdp-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

/* ── equity chart panel (product pages + homepage sparklines) ─
   OWNER RULE: chart graphics never overlap text — the head row
   sits fully ABOVE the svg and the note fully BELOW it. */
.chart-panel {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  margin: 0;
}
.chart-panel svg {
  display: block;
  width: 100%;
  height: 190px;
}
.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.chart-title {
  margin-right: auto;   /* pushes the net figure + legend right */
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.chart-end {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
/* legend chips with small line swatches */
.ckey {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}
.ckey-line {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--accent);
  flex-shrink: 0;
}
.ckey-line-2 { border-top-style: dashed; opacity: .75; }
/* chart strokes — mint data lines on the panel */
.cline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cline-2 { stroke-dasharray: 5 4; stroke-opacity: .75; }
.carea { stroke: none; }
.czero {
  stroke: rgba(143, 168, 161, .28);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.chart-note {
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .02em;
  margin-top: var(--sp-2);
}
.record { border: 1px solid var(--line); background: var(--panel); }
.record-title {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.record table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.record th {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.record tbody th { width: 40%; }
.record td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.record tbody tr:last-child th, .record tbody tr:last-child td { border-bottom: 0; }
.record-note {
  font-size: var(--fs-xs);
  color: var(--faint);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}

.buybox {
  border: 1px solid var(--line-bright);
  background: var(--raised);
  padding: var(--sp-5) var(--sp-4);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
}
.buybox .price { margin-bottom: var(--sp-2); }
.buybox .annual {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: var(--sp-4);
  display: block;
}
.buybox .btn-buy { width: 100%; min-height: 48px; margin-bottom: var(--sp-3); }
.buybox ul { list-style: none; margin: var(--sp-4) 0 0; }
.buybox li {
  display: flex; gap: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--muted);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--line);
}
.xsell {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--faint);
}
.xsell a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.xsell a:hover { color: var(--accent); }

.pdp-disclaim {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}

.backlink {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--muted);
  min-height: 44px;
}
.backlink:hover { color: var(--accent); text-decoration: none; }

/* linked system names in screener tables + featured/flagship cards */
a.sys-link { color: var(--text); }
a.sys-link:hover { color: var(--accent); text-decoration: none; }
a.sys-link:hover .sys-name { text-decoration: underline; text-underline-offset: 3px; }
/* screener rows: the name link is a ~23px text line — pad it to a
   ≥44px tap target (2.5.8) and cancel the padding with a matching
   negative margin so row height and layout never shift (flex items
   align by margin box, which stays the original 23px) */
.stable a.sys-link {
  padding-block: var(--sp-3);
  margin-block: calc(-1 * var(--sp-3));
}
/* card headings: the name link is an inline box, so vertical padding
   grows the tap target (~20px text + 2×12px = 44px) without moving
   the heading's line box — chips row below stays where it is and,
   being later in the DOM, still wins hit-testing over the overlap */
.feat h4 a.sys-link, .fcard h4 a.sys-link,
.special-card h4 a.sys-link, .pack h3 a.sys-link {
  padding-block: var(--sp-3);
}

/* bundle product pages: included-list */
.included { border: 1px solid var(--line); background: var(--panel); }
.included li {
  display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-md);
  color: var(--muted);
  list-style: none;
}
.included li:last-child { border-bottom: 0; }
.included .inc-name {
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}
.included .inc-price { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--faint); white-space: nowrap; }
.included-scroll { max-height: 30rem; overflow-y: auto; }
/* phone widths: the long Book price strings ("G13 SingleDay Book ·
   $1,499/mo solo") overflow the panel as a nowrap span — let the
   row wrap and the price break so the page never scrolls sideways */
@media (max-width: 560px) {
  .included li { flex-wrap: wrap; }
  .included .inc-price { white-space: normal; }
}

/* ── 404 ───────────────────────────────────────────────────── */
.err-wrap {
  min-height: 60vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-8) 0;
}
.err {
  max-width: 34rem; width: 100%;
}
.err .term { box-shadow: none; }
.err-code {
  font-family: var(--display);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.err-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

@media (max-width: 820px) {
  .pdp-cols { grid-template-columns: 1fr; }
  .buybox { position: static; }
}
@media (max-width: 640px) {
  .chart-panel svg { height: 150px; }      /* shorter equity charts on phones */
}
@media (max-width: 560px) {
  .pdp-head { grid-template-columns: 1fr; }
  .pdp-hero { text-align: left; }
}

/* stats strip: market symbols stay on one line like the other cells */
.stats .oneline { white-space: nowrap; }
@media (max-width: 400px) {
  .stats .oneline { letter-spacing: .06em; } /* stays >= 11px; tighter tracking fits 360px cells */
}
@media (max-width: 300px) {
  .stats { grid-template-columns: minmax(0, 1fr); } /* single column below reflow target */
}

/* ── the books: premium band ───────────────────────────────── */
.pack-books {
  position: relative;
  border: 1px solid var(--line-interactive);
  background: var(--raised);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.pack-books::before, .pack-books::after {
  content: ""; position: absolute; width: 10px; height: 10px;
}
.pack-books::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.pack-books::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.books-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.books-head h3 {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.pack-books .sub { color: var(--muted); max-width: 52ch; margin-bottom: var(--sp-4); }

/* ── the book deck: four in-house engines, each with its own identity.
   Colors are an owner-approved exception to the two-accent rule — ledger
   pairs in the header table. Stretched .bk-name link = whole card clickable. */
.bookdeck {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.bookcard {
  --bk: #C7D3DC;
  --bk-soft: rgba(199, 211, 220, .14);
  --bk-line: rgba(199, 211, 220, .38);
  --bk-glow: rgba(199, 211, 220, .22);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: var(--sp-4);
  border: 1px solid var(--bk-line);
  background: radial-gradient(130% 90% at 50% 0%, var(--bk-soft), transparent 58%), var(--panel);
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.bk-midas     { --bk: #E8C15C; --bk-soft: rgba(232, 193, 92, .15); --bk-line: rgba(232, 193, 92, .40); --bk-glow: rgba(232, 193, 92, .26); }
.bk-continuum { --bk: #5CC8E8; --bk-soft: rgba(92, 200, 232, .13); --bk-line: rgba(92, 200, 232, .38); --bk-glow: rgba(92, 200, 232, .24); }
.bk-daylight  { --bk: #FF9142; --bk-soft: rgba(255, 145, 66, .14); --bk-line: rgba(255, 145, 66, .40); --bk-glow: rgba(255, 145, 66, .26); }
.bk-vault     { --bk: #C7D3DC; --bk-soft: rgba(199, 211, 220, .12); --bk-line: rgba(199, 211, 220, .36); --bk-glow: rgba(199, 211, 220, .22); }
.bookcard:hover, .bookcard:focus-within {
  border-color: var(--bk);
  box-shadow: 0 0 24px var(--bk-glow), inset 0 0 22px var(--bk-soft);
  transform: translateY(-2px);
}
/* sheen sweep in the book's own color on hover */
.bookcard::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, var(--bk-soft) 48%, transparent 64%);
  transform: translateX(-130%);
  pointer-events: none;
}
.bk-emblem {
  width: 46px; height: 46px;
  color: var(--bk);
  filter: drop-shadow(0 0 7px var(--bk-glow));
  margin-bottom: 3px;
}
.bookcard .bk-name {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--bk);
  text-decoration: none;
}
.bookcard .bk-name::after { content: ""; position: absolute; inset: 0; }  /* whole card clicks */
.bookcard:hover .bk-name, .bookcard:focus-within .bk-name { color: var(--bk); text-shadow: 0 0 10px var(--bk-glow); }
.bk-epithet {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bk);
  opacity: .78;
}
.bk-price {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
}
.bk-price small { font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); letter-spacing: .06em; }
/* mini variant (plan page) */
.bookdeck-mini { gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.bookdeck-mini .bookcard { padding: var(--sp-3); }
.bookdeck-mini .bk-emblem { width: 32px; height: 32px; }
.bookdeck-mini .bk-name { font-size: var(--fs-md); }
.bookdeck-mini .bk-epithet { display: none; }
@media (max-width: 900px) {
  .bookdeck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  .bookdeck { grid-template-columns: minmax(0, 1fr); }
  .bookdeck-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ambient emblem motion — gated, and wired into the pause control */
@media (prefers-reduced-motion: no-preference) {
  .bookcard::after { transition: transform .9s var(--ease); }
  .bookcard:hover::after, .bookcard:focus-within::after { transform: translateX(130%); }
  .bk-continuum .bk-orbit {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: bk-spin 18s linear infinite;
  }
  .bk-daylight .bk-rays {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: bk-sunspin 22s linear infinite;
  }
  .bk-midas .bk-ray { animation: bk-twinkle 4.4s ease-in-out infinite; }
  .bk-vault .bk-wheel {
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition: transform .7s var(--ease);
  }
  .bk-vault:hover .bk-wheel, .bk-vault:focus-within .bk-wheel { transform: rotate(32deg); }
  #ticker-pause:checked ~ * .bk-orbit,
  #ticker-pause:checked ~ * .bk-rays,
  #ticker-pause:checked ~ * .bk-ray { animation-play-state: paused; }
}
@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-sunspin {
  0%   { transform: rotate(0deg) scale(1); opacity: .85; }
  25%  { transform: rotate(90deg) scale(1.05); opacity: 1; }
  50%  { transform: rotate(180deg) scale(1); opacity: .85; }
  75%  { transform: rotate(270deg) scale(1.05); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: .85; }
}
@keyframes bk-twinkle {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.books-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.books-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
@media (max-width: 480px) {
  .books-ctas { width: 100%; }
  .books-ctas .btn { flex: 1 1 auto; }
}

/* ── browse-by-edge collections ────────────────────────────── */
.collections {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.collection { border: 1px solid var(--line); background: var(--panel); }
.col-title {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.collection ul { list-style: none; }
.collection li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.collection li:last-child { border-bottom: 0; }
.col-name {
  font-family: var(--display);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text);
}
.collection a.sys-link { display: inline-flex; align-items: center; min-height: 44px; }
.col-stat {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 960px) { .collections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .collections { grid-template-columns: minmax(0, 1fr); } }

/* ── $10k simulation placeholders + daily calendar ─────────── */
.record .tbd {
  color: var(--faint);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .1em;
  border-bottom: 1px dashed var(--line-bright);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
}
.cal-wd {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  color: var(--faint);
  text-align: center;
  padding-bottom: var(--sp-1);
}
.cal-day {
  aspect-ratio: 1.6 / 1;
  border: 1px dashed var(--line);
  background: var(--bg);
}

/* ── books: internal designations + exclusive/sold chips ───── */
.bk-int {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  color: var(--faint);
}
.chip-excl {
  border-color: rgba(237, 155, 64, .55);
  color: var(--buy);
  background: rgba(237, 155, 64, .08);
  box-shadow: 0 0 8px rgba(237, 155, 64, .15);
}
.chip-sold {
  border-color: rgba(86, 200, 162, .4);
  color: var(--accent);
}
.included li.inc-exclusive {
  background: rgba(237, 155, 64, .04);
  border-left: 2px solid rgba(237, 155, 64, .5);
}
.included li .chip { margin-right: var(--sp-2); flex-shrink: 0; }
.pack ul li.li-note { color: var(--faint); padding-left: 0; }
.pack ul li.li-note span { font-style: normal; }

/* (the on-page finder quiz moved to plan.html — see PLAN region below) */

/* ── per-product glyphs: one minimal mark per strategy, muted mint at
   rest, riding the amber hover state with the name it sits beside */
.glyph { flex: none; }
/* tier tables: the glyph gets its own cell — a bordered chip standing
   beside the whole name + description block, not inline with the name */
.sys { display: flex; flex-direction: row; align-items: center; gap: var(--sp-3); }
.sys-txt { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.gcell { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.g-row { width: 36px; height: 36px; color: rgba(86, 200, 162, .60); }
.stable tbody tr:hover .g-row { color: var(--buy); filter: drop-shadow(0 0 5px rgba(237, 155, 64, .45)); }
.fglyph {
  flex: none;
  align-self: stretch;      /* height = the name + chips + dates block */
  aspect-ratio: 1;
  width: auto;
  min-width: 76px;
  max-width: 132px;
}
.g-flag {
  width: 100%; height: 100%;
  color: var(--fc, var(--accent));
  filter: drop-shadow(0 0 6px var(--fc-soft, rgba(86, 200, 162, .25)));
}
.fcard:hover .g-flag { filter: drop-shadow(0 0 11px var(--fc-glow, rgba(86, 200, 162, .45))); }

/* really low max drawdowns wear medals: gold for exceptional (<= $2k),
   neon green for excellent (<= $5k) — thresholds live in the generators */
.dd-gold, .stable tbody td.dd-gold, .wtile.dd-gold .wv, .fstat b.dd-gold {
  color: #E8C15C;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(232, 193, 92, .55), 0 0 16px rgba(232, 193, 92, .25);
}
.dd-neon, .stable tbody td.dd-neon, .wtile.dd-neon .wv, .fstat b.dd-neon {
  color: #7CFFB2;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(124, 255, 178, .50), 0 0 16px rgba(124, 255, 178, .22);
}
/* each flagship stars the stat that makes it a flagship (rank-picked) */
.fstat { position: relative; }
.fstat-star {
  border: 1px solid var(--fc-line, rgba(86, 200, 162, .4));
  background: radial-gradient(120% 120% at 50% 0%, var(--fc-soft, rgba(86, 200, 162, .1)), transparent 70%);
  box-shadow: 0 0 14px var(--fc-soft, rgba(86, 200, 162, .12));
}
.fstat-star .star-tag {
  position: absolute;
  top: -8px; right: 6px;
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--fc, var(--accent));
  background: var(--panel);
  padding: 0 5px;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes fg-breathe {
    0%, 100% { opacity: .8; }
    50%      { opacity: 1; }
  }
}
.g-plan { width: 28px; height: 28px; color: var(--accent); margin-top: 2px; }

/* ── plan-finder banner: lives inside the sticky header, on screen
   at all times; mint = navigation, not commerce */
.nav-plan { color: var(--accent) !important; }
/* strategies dropdown: pure hover/focus menu with a hover bridge */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop > a { display: inline-flex; align-items: center; gap: 5px; }
.nav-caret { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.nav-drop:hover .nav-caret, .nav-drop:focus-within .nav-caret { transform: rotate(180deg); }
.nav-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 230px;
  padding: var(--sp-2);
  background: var(--panel);
  border: 1px solid var(--line-bright);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(86, 200, 162, .08);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  z-index: 60;
}
.nav-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
}
.nav-menu a {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  color: var(--muted);
  text-decoration: none;
}
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--raised); color: var(--accent); }
.nav-menu a b { color: var(--accent); font-weight: 700; margin-right: 6px; letter-spacing: .08em; }
/* THE BOOKS: the tab that does not belong. Obsidian and old gold,
   misregistered double frame, slow ember breathing. */
.nav-books {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #E8C15C !important;
  padding: 8px 4px;
  text-shadow: 0 0 8px rgba(232, 193, 92, .35);
}
.nav-books::after {
  content: "";
  width: 6px; height: 6px;
  background: #E8C15C;
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(232, 193, 92, .6);
}
.nav-books .nav-ember { display: none; }
.nav-books:hover { color: #F5DFA6 !important; text-shadow: 0 0 12px rgba(232, 193, 92, .55); }
@media (prefers-reduced-motion: no-preference) {
  .nav-books .nav-ember { animation: books-ember 5.6s ease-in-out infinite; }
  @keyframes books-ember {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }
  #ticker-pause:checked ~ * .nav-books .nav-ember { animation-play-state: paused; }
}
.hero .hero-ctas, .hero .cta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  width: 100%;
  grid-column: 1 / -1;   /* spans the copy AND the carousel columns */
  margin-top: var(--sp-2);
}
.hero .hero-ctas .btn, .hero .cta-row .btn {
  min-height: 60px;
  font-size: var(--fs-md);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-5);
  border-color: rgba(86, 200, 162, .45);
  background-image: linear-gradient(180deg, rgba(86, 200, 162, .07), transparent 70%);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.hero .hero-ctas .btn:hover, .hero .cta-row .btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px rgba(86, 200, 162, .16);
}
.hero .hero-ctas .btn .ic-arrow { transition: transform .2s var(--ease); }
.hero .hero-ctas .btn:hover .ic-arrow { transform: translate(3px, -3px); }
@media (max-width: 560px) { .hero .hero-ctas, .hero .cta-row { grid-template-columns: minmax(0, 1fr); } }
.plan-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: 12px var(--sp-4);
  border-top: 1px solid rgba(86, 200, 162, .35);
  background: linear-gradient(90deg, rgba(86, 200, 162, .16), rgba(86, 200, 162, .05) 48%, rgba(86, 200, 162, .12)), var(--bg);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: .04em;
  color: var(--text);
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.plan-banner, .plan-banner:hover, .plan-banner:focus-visible { text-decoration: none; }
.plan-banner:hover { background-color: var(--panel); }

/* ── legal pages (terms / privacy) ── */
.legal { max-width: 76ch; padding: var(--sp-6) 0 var(--sp-7); }
.legal h1 {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: var(--sp-2);
}
.legal .updated {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-5);
}
.legal h2 {
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.legal h2 .n {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--accent);
  letter-spacing: .14em;
  margin-right: var(--sp-2);
}
.legal p, .legal li { color: var(--muted); line-height: 1.65; font-size: var(--fs-sm); }
.legal p + p { margin-top: var(--sp-2); }
.legal ul { margin: var(--sp-2) 0 var(--sp-2) 1.2em; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--accent); }
.legal strong { color: var(--text); }

/* ── Discord button: compact, sits beside Get access ── */
.btn-discord { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ic-discord { width: 17px; height: 17px; }
.btn-discord:hover .ic-discord { filter: drop-shadow(0 0 5px rgba(86, 200, 162, .5)); }

/* Footer Discord CTA: compact blurple pill living INSIDE .foot-links so it
   aligns with the footer link row (owner request 2026-08-22 - replaced a large
   centred button on its own line). Distinct class from the header's
   .btn-discord, which is a different (mint, nav-hidden-on-mobile) button. */
.foot-discord {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: #5865F2;
  font-family: var(--display);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s var(--ease);
}
.foot-links a.foot-discord { color: #FFFFFF; min-height: 36px; }
.foot-discord .ic-discord { width: 15px; height: 15px; }
.foot-discord:hover { background: #6B77F5; color: #FFFFFF; text-decoration: none; }
.nav-mob-panel a.mob-books:hover { color: #F5DFA6; background: #14100A; }

/* the sizing menu's historical-return projection: big purple, underlined,
   impossible to miss */
.ro-ret, .ro-out b.ro-ret, .rodd b.ro-ret {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15em;
  line-height: 1.1;
  color: #7CFFB2;   /* neon green, 14.2 on panel — same tone as the DD medals */
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(124, 255, 178, .70);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-shadow: 0 0 7px rgba(124, 255, 178, .55), 0 0 18px rgba(86, 200, 162, .30);
}

/* ── mobile burger nav (details/summary, zero-JS) ── */
.nav-mob { display: none; position: relative; margin-left: var(--sp-2); }
.nav-mob summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line-bright); background: var(--raised); }
.nav-mob summary::-webkit-details-marker { display: none; }
.burger { display: flex; flex-direction: column; gap: 4px; }
.burger i { display: block; width: 18px; height: 2px; background: var(--accent); transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-mob[open] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mob[open] .burger i:nth-child(2) { opacity: 0; }
.nav-mob[open] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mob-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 250px;
  background: var(--panel);
  border: 1px solid var(--line-bright);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .55);
  padding: var(--sp-2);
  z-index: 70;
}
.nav-mob-panel a {
  display: block;
  padding: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.nav-mob-panel a:last-child { border-bottom: 0; }
.nav-mob-panel a:hover { background: var(--raised); color: var(--accent); }
@media (max-width: 960px) {
  .nav-links, .btn-discord { display: none; }
  .nav-mob { display: block; }
}
.pb-tag {
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 11px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  white-space: nowrap;
}
.pb-copy b { color: var(--accent); font-weight: 700; }
.pb-go {
  border: 1px solid var(--accent);
  background: rgba(86, 200, 162, .12);
  color: var(--accent);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.plan-banner:hover .pb-go {
  background-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 16px rgba(86, 200, 162, .45);
}
@media (max-width: 800px) { .pb-copy { display: none; } }

/* ── PLAN (plan.html): the standalone finder. Questions left (sticky),
   result panels right; radios + :has() reveal exactly one recommendation
   per answer combo. No :has() support -> panels stay hidden and the
   .pr-wait prompts remain: the accepted fallback. */
.plan-hero {
  padding: var(--sp-8) 0 var(--sp-6);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 130% at 50% 0%, rgba(86, 200, 162, .07), transparent 62%);
}
.plan-kicker {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.plan-hero h1 {
  font-family: var(--display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
}
.plan-hero .mint { color: var(--accent); }
.plan-sub { color: var(--muted); max-width: 64ch; margin-top: var(--sp-3); line-height: 1.6; }
#plan {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-4);
}
.plan-prog { display: flex; gap: 6px; margin-bottom: var(--sp-5); }
.pp { height: 4px; flex: 1; background: var(--line-bright); transition: background-color .35s var(--ease), box-shadow .35s var(--ease); }
#plan:has(.pq-scope input:checked) .pp-1,
#plan:has(.pq-budget input:checked) .pp-2,
#plan:has(#s4:checked) .pp-2,
#plan:has(.pq-temp input:checked) .pp-3,
#plan:has(#s3:checked):has(.pq-budget input:checked) .pp-3,
#plan:has(#s4:checked) .pp-3,
#plan:has(.pq-exec input:checked) .pp-4 {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(86, 200, 162, .45);
}
.pq {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: var(--sp-5);
  margin-bottom: var(--sp-3);
  min-inline-size: auto;
  overflow: hidden;
  max-height: 820px;
  transition: max-height .45s var(--ease), padding .28s var(--ease),
              background-color .28s var(--ease), border-color .28s var(--ease);
}
.pq-edit { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pq-editlab { display: none; }
.pq-close { display: none; }
.pq:not(:has(input:checked)) { border-color: rgba(86, 200, 162, .4); }
/* float pulls the legend off the fieldset border into normal flow —
   this is what keeps question text from colliding with box outlines */
.pq legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: var(--sp-3);
  font-family: var(--display);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.pq legend + * { clear: both; }
.pq-n {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  margin-right: var(--sp-2);
}
.pq-hint {
  clear: both;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
  max-width: 52ch;
}
.pq-opts { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.pq-radio { position: absolute; opacity: 0; pointer-events: none; }
.pq-opt {
  display: block;
  border: 1px solid var(--line-bright);
  background: var(--raised);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.pq-opt b { display: block; font-weight: 600; font-size: var(--fs-sm); color: var(--text); }
.pq-opt span { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; line-height: 1.45; }
.pq-opt:hover { border-color: rgba(86, 200, 162, .55); }
.pq-radio:checked + .pq-opt {
  border-color: var(--accent);
  background-color: #0F2321;
}
.pq-radio:focus-visible + .pq-opt { outline: 2px solid var(--accent); outline-offset: 2px; }
/* answered steps compact IMMEDIATELY (height tween) — collapse never
   waits for blur, so a click on the next step can't land on moved
   ground. Click a collapsed row to reopen it; 'done' closes. */
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope { max-height: 54px; padding: var(--sp-2) var(--sp-4); background: var(--raised); border-color: var(--line); box-shadow: none; }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope legend { float: left; width: auto; margin: 0; font-size: var(--fs-sm); }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-hint { display: none; }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-opts { display: inline-flex; clear: none; gap: var(--sp-2); margin-left: var(--sp-3); vertical-align: middle; }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-radio:not(:checked) + .pq-opt { display: none; }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-radio:checked + .pq-opt { padding: 3px 10px; background: transparent; box-shadow: none; border-color: rgba(86, 200, 162, .55); pointer-events: none; }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-radio:checked + .pq-opt b { font-size: var(--fs-xs); }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-radio:checked + .pq-opt span { display: none; }
#plan:has(.pq-scope input:checked):not(:has(#ed-scope:checked)) .pq-scope .pq-editlab { display: block; position: absolute; inset: 0; cursor: pointer; z-index: 3; }
#plan:has(#ed-scope:checked) .pq-scope .pq-close {
  display: inline-block; position: absolute; top: var(--sp-3); right: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(86, 200, 162, .5); padding: 3px 10px; cursor: pointer; z-index: 3;
}
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget { max-height: 54px; padding: var(--sp-2) var(--sp-4); background: var(--raised); border-color: var(--line); box-shadow: none; }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget legend { float: left; width: auto; margin: 0; font-size: var(--fs-sm); }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-hint { display: none; }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-opts { display: inline-flex; clear: none; gap: var(--sp-2); margin-left: var(--sp-3); vertical-align: middle; }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-radio:not(:checked) + .pq-opt { display: none; }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-radio:checked + .pq-opt { padding: 3px 10px; background: transparent; box-shadow: none; border-color: rgba(86, 200, 162, .55); pointer-events: none; }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-radio:checked + .pq-opt b { font-size: var(--fs-xs); }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-radio:checked + .pq-opt span { display: none; }
#plan:has(.pq-budget input:checked):not(:has(#ed-budget:checked)) .pq-budget .pq-editlab { display: block; position: absolute; inset: 0; cursor: pointer; z-index: 3; }
#plan:has(#ed-budget:checked) .pq-budget .pq-close {
  display: inline-block; position: absolute; top: var(--sp-3); right: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(86, 200, 162, .5); padding: 3px 10px; cursor: pointer; z-index: 3;
}
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp { max-height: 54px; padding: var(--sp-2) var(--sp-4); background: var(--raised); border-color: var(--line); box-shadow: none; }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp legend { float: left; width: auto; margin: 0; font-size: var(--fs-sm); }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-hint { display: none; }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-opts { display: inline-flex; clear: none; gap: var(--sp-2); margin-left: var(--sp-3); vertical-align: middle; }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-radio:not(:checked) + .pq-opt { display: none; }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-radio:checked + .pq-opt { padding: 3px 10px; background: transparent; box-shadow: none; border-color: rgba(86, 200, 162, .55); pointer-events: none; }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-radio:checked + .pq-opt b { font-size: var(--fs-xs); }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-radio:checked + .pq-opt span { display: none; }
#plan:has(.pq-temp input:checked):not(:has(#ed-temp:checked)) .pq-temp .pq-editlab { display: block; position: absolute; inset: 0; cursor: pointer; z-index: 3; }
#plan:has(#ed-temp:checked) .pq-temp .pq-close {
  display: inline-block; position: absolute; top: var(--sp-3); right: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(86, 200, 162, .5); padding: 3px 10px; cursor: pointer; z-index: 3;
}
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec { max-height: 54px; padding: var(--sp-2) var(--sp-4); background: var(--raised); border-color: var(--line); box-shadow: none; }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec legend { float: left; width: auto; margin: 0; font-size: var(--fs-sm); }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-hint { display: none; }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-opts { display: inline-flex; clear: none; gap: var(--sp-2); margin-left: var(--sp-3); vertical-align: middle; }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-radio:not(:checked) + .pq-opt { display: none; }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-radio:checked + .pq-opt { padding: 3px 10px; background: transparent; box-shadow: none; border-color: rgba(86, 200, 162, .55); pointer-events: none; }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-radio:checked + .pq-opt b { font-size: var(--fs-xs); }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-radio:checked + .pq-opt span { display: none; }
#plan:has(.pq-exec input:checked):not(:has(#ed-exec:checked)) .pq-exec .pq-editlab { display: block; position: absolute; inset: 0; cursor: pointer; z-index: 3; }
#plan:has(#ed-exec:checked) .pq-exec .pq-close {
  display: inline-block; position: absolute; top: var(--sp-3); right: var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  border: 1px solid rgba(86, 200, 162, .5); padding: 3px 10px; cursor: pointer; z-index: 3;
}
.plan-results { min-width: 0; margin: var(--sp-5) 0 0; }
#plan a, .plan-results a { text-decoration: none; }
#plan a:hover, .plan-results a:hover { text-decoration: none; }
.pr { display: none; }
.pr + .pr { margin-top: var(--sp-4); }
@media (prefers-reduced-motion: no-preference) {
  .pq, .pr { animation: q-in .5s var(--ease) both; }
  @keyframes q-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}
.pr-card {
  position: relative;
  border: 1px solid var(--line-interactive);
  background: var(--panel);
  padding: var(--sp-5);
}
.pr-card::before, .pr-card::after { content: ""; position: absolute; width: 10px; height: 10px; }
.pr-card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.pr-card::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.pr-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pr-gchip {
  flex: none;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fc-line, var(--line-bright));
  background: radial-gradient(120% 120% at 50% 0%, var(--fc-soft, rgba(86, 200, 162, .10)), transparent 70%), var(--raised);
}
.pr-gchip .g-plan { width: 34px; height: 34px; color: var(--fc, var(--accent)); margin: 0; }
.pr-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-name {
  font-family: var(--display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--text);
  text-decoration: none;
}
.pr-card[class*=" fc-"] .pr-name { color: var(--fc); }
a.pr-name:hover { color: var(--accent); }
.pr-card[class*=" fc-"] a.pr-name:hover { color: var(--fc-hi, var(--accent)); text-shadow: 0 0 12px var(--fc-glow, rgba(86, 200, 162, .3)); }
.pr-real { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); letter-spacing: .05em; }
.pr-price {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--buy);
  white-space: nowrap;
}
.pr-price small { font-size: var(--fs-2xs); font-weight: 400; color: var(--muted); }
.pr-price .was { font-size: var(--fs-sm); font-weight: 400; color: var(--faint); margin-right: 6px; }
.pr-why {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--fc, var(--accent));
  background: var(--raised);
}
.pr-why a, .pr-alt a { color: var(--accent); }
.pr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.prs {
  border: 1px solid var(--line-bright);
  background: var(--raised);
  padding: var(--sp-3);
}
.prs b { display: block; font-family: var(--mono); font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin-bottom: 2px; }
.prs span {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pr-trio { list-style: none; margin: 0 0 var(--sp-3); }
.pr-trio li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
}
.pr-trio .pr-name { font-size: var(--fs-md); }
.pr-trio .pr-real { flex-basis: 100%; order: 4; padding-left: 25px; }
.pr-trio .pr-mini { margin-left: auto; font-family: var(--mono); font-size: var(--fs-2xs); color: var(--muted); }
.pr-trio .pr-solo { font-family: var(--mono); font-size: var(--fs-xs); color: var(--faint); }
.pr-alt { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.pr-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pr-ctas .btn { justify-content: center; min-height: 48px; }
@media (max-width: 480px) { .pr-ctas { grid-template-columns: minmax(0, 1fr); } }
.pr-exec { margin-top: var(--sp-4); }
.pmt {
  border: 1px solid rgba(86, 200, 162, .40);
  background: linear-gradient(180deg, rgba(86, 200, 162, .06), transparent 60%), var(--panel);
  padding: var(--sp-4) var(--sp-5);
}
.pmt-title {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: var(--sp-2);
}
.pmt-copy { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin-bottom: var(--sp-3); }
.pmt-steps { margin: 0 0 var(--sp-3) 1.3em; font-family: var(--mono); font-size: var(--fs-xs); color: var(--text); }
.pmt-steps li { margin-bottom: 4px; }
.pmt-cta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.pmt-disc { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--faint); letter-spacing: .06em; }
.pmt-manual { border-color: var(--line-bright); background: var(--panel); }
.pmt-manual .pmt-title { color: var(--muted); }
.plan-update {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  color: var(--faint);
  letter-spacing: .08em;
  padding: var(--sp-2) 0 var(--sp-6);
}
/* what-separates panel now lives in the buy rail */
.pdp-side .sep-panel { margin-top: var(--sp-4); }
@media (max-width: 480px) {
  .pq-opts, .pr-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pr-head { flex-wrap: wrap; }
  .pr-price { margin-left: 0; flex-basis: 100%; }
}

/* ── PLAN reveal logic ── */
.pq-budget, .pq-temp, .pq-exec { display: none; }
#plan:has(#s1:checked) .pq-budget,
#plan:has(#s2:checked) .pq-budget,
#plan:has(#s3:checked) .pq-budget { display: block; }
#plan:has(#s1:checked):has(.pq-budget input:checked) .pq-temp,
#plan:has(#s2:checked):has(.pq-budget input:checked) .pq-temp { display: block; }
#plan:has(#s1:checked):has(.pq-temp input:checked) .pq-exec,
#plan:has(#s2:checked):has(.pq-temp input:checked) .pq-exec,
#plan:has(#s3:checked):has(.pq-budget input:checked) .pq-exec,
#plan:has(#s4:checked) .pq-exec { display: block; }
#plan:has(#s1:checked):has(#b1:checked):has(#t1:checked) #r-s1-b1-t1 { display: block; }
#plan:has(#s1:checked):has(#b1:checked):has(#t2:checked) #r-s1-b1-t2 { display: block; }
#plan:has(#s1:checked):has(#b1:checked):has(#t3:checked) #r-s1-b1-t3 { display: block; }
#plan:has(#s1:checked):has(#b2:checked):has(#t1:checked) #r-s1-b2-t1 { display: block; }
#plan:has(#s1:checked):has(#b2:checked):has(#t2:checked) #r-s1-b2-t2 { display: block; }
#plan:has(#s1:checked):has(#b2:checked):has(#t3:checked) #r-s1-b2-t3 { display: block; }
#plan:has(#s1:checked):has(#b3:checked):has(#t1:checked) #r-s1-b3-t1 { display: block; }
#plan:has(#s1:checked):has(#b3:checked):has(#t2:checked) #r-s1-b3-t2 { display: block; }
#plan:has(#s1:checked):has(#b3:checked):has(#t3:checked) #r-s1-b3-t3 { display: block; }
#plan:has(#s1:checked):has(#b4:checked):has(#t1:checked) #r-s1-b4-t1 { display: block; }
#plan:has(#s1:checked):has(#b4:checked):has(#t2:checked) #r-s1-b4-t2 { display: block; }
#plan:has(#s1:checked):has(#b4:checked):has(#t3:checked) #r-s1-b4-t3 { display: block; }
#plan:has(#s2:checked):has(#b1:checked):has(#t1:checked) #r-s2-b1-t1 { display: block; }
#plan:has(#s2:checked):has(#b1:checked):has(#t2:checked) #r-s2-b1-t2 { display: block; }
#plan:has(#s2:checked):has(#b1:checked):has(#t3:checked) #r-s2-b1-t3 { display: block; }
#plan:has(#s2:checked):has(#b2:checked):has(#t1:checked) #r-s2-b2-t1 { display: block; }
#plan:has(#s2:checked):has(#b2:checked):has(#t2:checked) #r-s2-b2-t2 { display: block; }
#plan:has(#s2:checked):has(#b2:checked):has(#t3:checked) #r-s2-b2-t3 { display: block; }
#plan:has(#s2:checked):has(#b3:checked):has(#t1:checked) #r-s2-b3-t1 { display: block; }
#plan:has(#s2:checked):has(#b3:checked):has(#t2:checked) #r-s2-b3-t2 { display: block; }
#plan:has(#s2:checked):has(#b3:checked):has(#t3:checked) #r-s2-b3-t3 { display: block; }
#plan:has(#s2:checked):has(#b4:checked):has(#t1:checked) #r-s2-b4-t1 { display: block; }
#plan:has(#s2:checked):has(#b4:checked):has(#t2:checked) #r-s2-b4-t2 { display: block; }
#plan:has(#s2:checked):has(#b4:checked):has(#t3:checked) #r-s2-b4-t3 { display: block; }
#plan:has(#s3:checked):has(#b1:checked) #r-s3-small { display: block; }
#plan:has(#s3:checked):has(#b2:checked) #r-s3-big,
#plan:has(#s3:checked):has(#b3:checked) #r-s3-big,
#plan:has(#s3:checked):has(#b4:checked) #r-s3-big { display: block; }
#plan:has(#s4:checked) #r-s4 { display: block; }
#plan:has(.pq-scope input:checked):has(#e1:checked) #r-e1 { display: block; }
#plan:has(.pq-scope input:checked):has(#e2:checked) #r-e2 { display: block; }

/* ── typography effects: name treatments + eye-draw accents ──
   All effects are class-driven (CSP: no style="" anywhere), all
   animation assignments live inside prefers-reduced-motion:
   no-preference, and the global reduce block above still nukes
   every animation/transition. Contrast for the gradient stops is
   ledgered in the header table. */

a.sys-link { cursor: pointer; }

/* chromatic-split hover on plain (non-gradient) name spans:
   1px amber / mint dual offset — a subtle CRT color-fringe flick.
   Amber here is a decorative hover flourish (see header note). */
.sys-name, .col-name, .included .inc-name {
  transition: text-shadow 150ms var(--ease);
}
a.sys-link:hover .sys-name,
a.sys-link:hover .col-name,
a.sys-link:hover .inc-name {
  text-shadow: 1px 0 rgba(237, 155, 64, .55), -1px 0 rgba(86, 200, 162, .7);
}
/* collections + bundle included-lists underline on hover like tables */
a.sys-link:hover .col-name,
a.sys-link:hover .inc-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* terminal prompt mark on featured + flagship card names — a mono
   ">" in mint; blinks caret-style only while the card is hovered.
   -webkit-text-fill-color is re-opaqued here because the gradient
   block below sets it transparent on the parent and it inherits. */
.feat h4 a.sys-link::before,
.fcard h4 a.sys-link::before {
  content: ">";
  content: ">" / "";     /* decorative for screen readers (FAQ +/− pattern) */
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
  margin-right: .35em;
}

/* gradient-fill display names — Apple-glow style mint sweep.
   text-shadow is invisible on background-clip:text (it paints
   behind the transparent fill and can smear), so the phosphor
   glow is a drop-shadow FILTER on the element instead. Outside
   @supports the names keep their solid --text color. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .feat h4 a.sys-link,
  .fcard h4 a.sys-link,
  .special-card h4 a.sys-link,
  .books-head h3 a.sys-link,
  .pack h3 a.sys-link,
  .pdp-head h1 {
    background-image: linear-gradient(100deg, #E9F2EE 15%, #56C8A2 60%, #6AD8B3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* resting filter mirrors the hover list's shape (brightness +
       drop-shadow) so the two states interpolate — mismatched
       filter-function lists snap instead of easing */
    filter: brightness(1) drop-shadow(0 0 14px rgba(86, 200, 162, .25));
    transition: filter 150ms var(--ease);
  }
  /* gradient text can't take text-shadow or a visible underline —
     hover reads as a brightness lift + tighter phosphor glow */
  .feat h4 a.sys-link:hover,
  .fcard h4 a.sys-link:hover,
  .special-card h4 a.sys-link:hover,
  .books-head h3 a.sys-link:hover,
  .pack h3 a.sys-link:hover {
    color: transparent;
    filter: brightness(1.18) drop-shadow(0 0 10px rgba(86, 200, 162, .45));
  }
}

/* light-streak sweep on featured/flagship cards: the cards' HUD
   corner ticks own ::before/::after, so the streak is the card's
   own background layer — a slanted translucent mint strip parked
   off-canvas, swept across once per hover (animation assignment is
   motion-gated below). Backgrounds sit behind all content by
   definition: text readability is untouched. */
.feat, .fcard {
  background-image: linear-gradient(105deg,
    rgba(86, 200, 162, 0) 0%,
    rgba(86, 200, 162, .12) 50%,
    rgba(86, 200, 162, 0) 100%);
  background-size: 40% 220%;
  background-repeat: no-repeat;
  background-position: -80% 40%;
}

/* #1 featured card (.feat-lead, The Verdict): the resting ticks
   grow + gain a static mint halo so the eye lands there first —
   same TL/BR 1px mint grammar as .term/.pack-books, just louder. */
.feat-lead { border-color: rgba(86, 200, 162, .75); }
.feat-lead::before, .feat-lead::after {
  width: 18px; height: 18px;
  box-shadow: 0 0 10px rgba(86, 200, 162, .3);
}

/* "Best value · RoDD" collection: mint left edge + TOP VALUE tag */
.col-value {
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 16px rgba(86, 200, 162, .14);
}
.col-value .col-title { color: var(--accent); border-bottom-color: rgba(86, 200, 162, .35); }

/* section heads: static 24px mint rule under each h2 that extends
   to 48px while the section is hovered — quiet downward eye-draw */
.sec-head h2 { position: relative; }
.sec-head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 24px; height: 2px;
  background: var(--accent);
  transition: width var(--fast) var(--ease);
}
section:hover .sec-head h2::after { width: 48px; }

/* motion assignments — opt-in only, same doctrine as the block
   above. Hover-triggered animations (streak, caret) follow the
   .btn-buy sheen precedent: user-initiated, ends on un-hover —
   but caret-blink loops for as long as the pointer rests, so the
   hover-run pair also honors the global #ticker-pause control.
   The books-band tick breathe is ambient, so it wires into the
   same control like the ticker/dial. */
@media (prefers-reduced-motion: no-preference) {
  .feat:hover, .fcard:hover { animation: card-streak 700ms var(--ease) 1; }
  .feat:hover h4 a.sys-link::before,
  .fcard:hover h4 a.sys-link::before { animation: caret-blink 1.1s steps(1) infinite; }
  .pack-books::before, .pack-books::after { animation: tick-breathe 4s var(--ease) infinite; }
  #ticker-pause:checked ~ * .feat:hover,
  #ticker-pause:checked ~ * .fcard:hover,
  #ticker-pause:checked ~ * .feat:hover h4 a.sys-link::before,
  #ticker-pause:checked ~ * .fcard:hover h4 a.sys-link::before,
  #ticker-pause:checked ~ * .pack-books::before,
  #ticker-pause:checked ~ * .pack-books::after { animation-play-state: paused; }
}
@keyframes card-streak {
  from { background-position: -80% 40%; }
  to   { background-position: 180% 40%; }
}
@keyframes caret-blink { 50% { opacity: 0; } }
@keyframes tick-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(86, 200, 162, 0); }
  50%      { box-shadow: 0 0 9px 1px rgba(86, 200, 162, .32); }
}

/* ══ SELECTION CART ═══════════════════════════════════════════
   Pure CSS: checkboxes drive counters (count + summed price) and
   :has() reveals the matching line. No JavaScript, no storage.
   Requires .cart to be the last child of #strategies for counter scope. */
#strategies { counter-reset: cart 0 total 0; }

.add-cb { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; min-width: 44px; padding: 0 var(--sp-3);
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-interactive); background: transparent;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.add-btn:hover { color: var(--accent); border-color: var(--accent); }
.add-cb:focus-visible + .add-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.add-ico { width: 9px; height: 9px; position: relative; flex-shrink: 0; }
.add-ico::before, .add-ico::after {
  content: ""; position: absolute; background: currentColor;
}
.add-ico::before { left: 0; top: 4px; width: 9px; height: 1px; }
.add-ico::after  { top: 0; left: 4px; width: 1px; height: 9px; transition: opacity var(--fast) var(--ease); }
.add-cb:checked + .add-btn { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.add-cb:checked + .add-btn .add-ico::after { opacity: 0; }   /* plus becomes a minus */
.add-cb:checked + .add-btn .add-txt { visibility: hidden; }
.add-cb:checked + .add-btn .add-txt::before { content: "Added"; visibility: visible; }
.add-cell { text-align: right; white-space: nowrap; }
.add-btn-card { width: 100%; margin-bottom: var(--sp-2); }


.cart {
  display: none;
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 60;
  width: min(21rem, calc(100vw - 2 * var(--sp-5)));
  border: 1px solid var(--accent); background: var(--panel);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .85), 0 0 24px rgba(86, 200, 162, .12);
}
#strategies:has(.add-cb:checked) .cart { display: block; }   /* appears only once something is added */
.cart-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line);
  background: var(--raised);
}
.cart-title {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
}
.cart-count {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .1em; color: var(--muted);
}
.cart-count::after { content: counter(cart) " selected"; }
.cart-lines { list-style: none; max-height: 13rem; overflow-y: auto; }
.cart-lines .cl { display: none; }
/* CARTGEN:reveal (regenerated by _tools/rebuild_index.py) */
.cl-name {
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text);
}
.cl-price {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cart-foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.cart-total { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cart-tlabel {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-right: auto;
}
.cart-sum {
  font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1;
}
.cart-sum::before { content: "$"; }
.cart-sum::after { content: counter(total); }
.cart-per { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--faint); }
.cart-hint { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-3); }
.cart-go { width: 100%; }
.cart-note {
  display: block; margin-top: var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--faint);
}

/* dual naming: techy nickname + the actual strategy name */
.sys-real, .card-real {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .06em;
  color: var(--faint); white-space: nowrap;
}
.card-real { margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); white-space: normal; }

@media (max-width: 640px) {
  .cart { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); width: auto; }
  .cart-lines { max-height: 9rem; }
  .sys-real { white-space: normal; }
}

/* ══ WHY SYSTEMATIC: versus + pillars ═══════════════════════ */
.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
  margin-bottom: var(--sp-6);
}
.vs-col { border: 1px solid var(--line); background: var(--panel); padding: var(--sp-5) var(--sp-4); }
.vs-manual { opacity: .82; }
.vs-system { border-color: var(--line-interactive); background: var(--raised); position: relative; }
.vs-system::before, .vs-system::after { content: ""; position: absolute; width: 12px; height: 12px; }
.vs-system::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.vs-system::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.vs-head { margin-bottom: var(--sp-4); }
.vs-tag {
  display: inline-block; margin-bottom: var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--line); padding: 2px 8px;
}
.vs-tag-on { color: var(--accent); border-color: rgba(86, 200, 162, .45); background: var(--accent-dim); }
.vs-head h3 {
  font-family: var(--display); font-size: var(--fs-2xl); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em;
}
.vs-col ul { list-style: none; }
.vs-col li {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-md); color: var(--muted);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line);
}
.vs-col li:first-child { border-top: 0; }
.vs-manual li { padding-left: 1.1rem; position: relative; }
.vs-manual li::before {
  content: ""; position: absolute; left: 0; top: 1.05em;
  width: 8px; height: 1px; background: var(--faint);
}
.vs-arrow { display: flex; align-items: center; color: var(--accent); }
.vs-arrow svg { width: 26px; height: 26px; }

.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.pillar { border: 1px solid var(--line); background: var(--panel); padding: var(--sp-5) var(--sp-4); transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.pillar:hover { border-color: var(--line-interactive); transform: translateY(-2px); }
.pillar .ic { color: var(--accent); margin-bottom: var(--sp-3); }
.pillar h3 {
  font-family: var(--display); font-size: var(--fs-lg); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--sp-2);
}
.pillar p { font-size: var(--fs-md); color: var(--muted); }

@media (max-width: 960px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .vs-arrow { transform: rotate(90deg); justify-content: center; }
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
}

/* cart: collapse control */
.cart-cb { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cart-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0;
  cursor: pointer; color: var(--muted);
}
.cart-toggle:hover { color: var(--accent); }
.cart-cb:focus-visible + .cart .cart-toggle { outline: 2px solid var(--accent); outline-offset: -2px; }
.cart-chev {
  width: 10px; height: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--fast) var(--ease);
}
#cart-collapse:checked + .cart .cart-chev { transform: rotate(-135deg) translate(-2px, -2px); }
#cart-collapse:checked + .cart .cart-lines,
#cart-collapse:checked + .cart .cart-hint,
#cart-collapse:checked + .cart .cart-note { display: none; }
#cart-collapse:checked + .cart .cart-foot { padding-top: var(--sp-3); }

/* screener name cell: natural text wrapping so every row behaves the same */
.sys-name-row { display: block; }
.sys-name-row > * { vertical-align: middle; }
.sys-name-row .chip { display: inline-block; margin-top: 2px; }
.sys-real { display: inline; margin-left: var(--sp-2); margin-right: var(--sp-1); white-space: normal; }
.stable tbody th[scope="row"] .sys { min-width: 0; }

/* uniform name-cell width keeps row heights even once dual names wrap */
.stable tbody th[scope="row"], .stable thead th:first-child { width: 26rem; }
@media (max-width: 640px) {
  .stable tbody th[scope="row"], .stable thead th:first-child { width: 13rem; }
}

/* ══ VALIDATED-CATALOG COMPONENTS ════════════════════════════ */
/* window tile sets (best window / full 2024+) */
.winset { border: 1px solid var(--line); background: var(--panel); }
.win-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.win-h-2 { border-top: 1px solid var(--line); }
.win-tag {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint);
}
.win-tag-best { color: var(--accent); }
.win-tag-eng { color: var(--accent); }
.win-range { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--faint); letter-spacing: .04em; }
.wtiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: transparent;   /* empty grid remainder is plain background */
}
.wtile {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: var(--sp-3) var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
}
.wk {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.wv {
  font-family: var(--mono); font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.15;
}
.wtile.hot .wv { color: var(--buy); text-shadow: 0 0 12px rgba(237, 155, 64, .22); }

/* RoDD sizing menu — radios styled as a notched slider, pure CSS */
.rodd {
  border: 1px solid var(--line-interactive);
  background: var(--raised);
  padding: var(--sp-4);
  position: relative;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.rodd::before, .rodd::after { content: ""; position: absolute; width: 10px; height: 10px; }
.rodd::before { top: -1px; left: -1px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.rodd::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.rodd-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.rodd-title {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.rodd-fig {
  font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1;
}
.rodd-why { font-size: var(--fs-md); color: var(--muted); margin-bottom: var(--sp-4); }
.rodd-why b { color: var(--text); font-weight: 600; }
.ro-r { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ro-track {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--line-bright);
  margin-bottom: var(--sp-3);
}
.ro-notch {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: 0 0 var(--sp-2); min-height: 44px;
  cursor: pointer; user-select: none;
  color: var(--faint);
  transition: color var(--fast) var(--ease);
}
.ro-notch:hover { color: var(--text); }
.ro-tick { width: 1px; height: 10px; background: var(--line-bright); }
.ro-amt {
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
/* checked notch highlight — pair each radio to its notch position */
.ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1),
.ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2),
.ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3),
.ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4),
.ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5),
.ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6) {
  color: var(--accent);
}
.ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1) .ro-tick,
.ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2) .ro-tick,
.ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3) .ro-tick,
.ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4) .ro-tick,
.ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5) .ro-tick,
.ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6) .ro-tick {
  background: var(--accent); width: 3px; box-shadow: 0 0 8px rgba(86, 200, 162, .5);
}
.ro-r:focus-visible ~ .ro-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.ro-outs { min-height: 3.4rem; }
.ro-out { display: none; font-size: var(--fs-md); color: var(--muted); }
.ro-out b { color: var(--text); font-variant-numeric: tabular-nums; }
.ro-r:nth-of-type(1):checked ~ .ro-outs .ro-out-1,
.ro-r:nth-of-type(2):checked ~ .ro-outs .ro-out-2,
.ro-r:nth-of-type(3):checked ~ .ro-outs .ro-out-3,
.ro-r:nth-of-type(4):checked ~ .ro-outs .ro-out-4,
.ro-r:nth-of-type(5):checked ~ .ro-outs .ro-out-5,
.ro-r:nth-of-type(6):checked ~ .ro-outs .ro-out-6 { display: block; }
.ro-flag {
  display: inline-block; margin-right: var(--sp-2);
  font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .12em;
  padding: 1px 7px; border: 1px solid currentColor;
}
/* state tinting: the whole menu shifts when an unfit size is selected */
.rodd:has(.ro-amb:checked) {
  border-color: rgba(237, 155, 64, .55);
  box-shadow: inset 0 0 0 1px rgba(237, 155, 64, .12), 0 0 18px rgba(237, 155, 64, .08);
}
.rodd:has(.ro-amb:checked) .ro-flag { color: var(--buy); }
.rodd:has(.ro-red:checked) {
  border-color: rgba(224, 101, 95, .65);
  box-shadow: inset 0 0 0 1px rgba(224, 101, 95, .14), 0 0 18px rgba(224, 101, 95, .10);
}
.rodd:has(.ro-red:checked) .ro-flag { color: #E0655F; }
.rodd:has(.ro-red:checked) .rodd-title,
.rodd:has(.ro-red:checked) .rodd-fig { color: #E0655F; }
.ro-note { margin-top: var(--sp-3); font-family: var(--mono); font-size: var(--fs-2xs); color: var(--faint); }

/* legs grid */
.legs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 1px; background: var(--line); border-top: 1px solid var(--line);
}
.leg {
  background: var(--panel); padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.leg-n { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--accent); }
.leg-name {
  font-family: var(--display); font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text);
}

/* what-separates + warnings */
.sep-panel .sep-list { list-style: none; padding: var(--sp-2) 0; }
.sep-list li {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-md); color: var(--muted);
}
.warn-box {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  border: 1px solid rgba(237, 155, 64, .5);
  border-left: 3px solid var(--buy);
  background: rgba(237, 155, 64, .05);
  padding: var(--sp-3) var(--sp-4);
}
.warn-box .ic { color: var(--buy); flex-shrink: 0; }
.warn-box p { font-size: var(--fs-md); color: var(--text); }

@media (max-width: 560px) {
  .wtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ro-track { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; }
  .ro-notch { border-top: 1px solid var(--line-bright); }
}

/* RoDD selector: obvious segmented-button affordance */
@media (prefers-reduced-motion: no-preference) {
}
.ro-track { gap: var(--sp-1); border-top: 0; }
.ro-notch {
  border: 1px solid var(--line-interactive);
  background: var(--panel);
  padding: var(--sp-2) 0;
  justify-content: center;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.ro-notch:hover { border-color: var(--accent); color: var(--accent); }
.ro-tick { display: none; }
.ro-amt { font-size: var(--fs-xs); font-weight: 600; }
.ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1),
.ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2),
.ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3),
.ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4),
.ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5),
.ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6) {
  background: rgba(237, 155, 64, .14);
  border-color: var(--buy);
  box-shadow: 0 0 12px rgba(237, 155, 64, .35);
}

/* blatant interactivity signaling on the RoDD pane */
.chip-interactive {
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 9px;
  background: var(--buy); color: var(--buy-ink);
  white-space: nowrap;
}
.rodd-head { flex-wrap: wrap; }
.rodd-head .rodd-title { margin-right: auto; }
.ro-notch { padding: var(--sp-3) 0; cursor: pointer; }
.ro-notch:active { transform: translateY(1px); }
.ro-amt { font-size: var(--fs-sm); }
@media (prefers-reduced-motion: no-preference) {
    .rodd { animation: rodd-intro 1.1s var(--ease) 2; }
  @keyframes rodd-intro {
    0%, 100% { box-shadow: 0 0 0 0 rgba(86, 200, 162, 0); }
    50% { box-shadow: 0 0 0 3px rgba(86, 200, 162, .28), 0 0 24px rgba(86, 200, 162, .18); }
  }
}
#ticker-pause:checked ~ * .rodd { animation-play-state: paused; }

/* selected notch: amber text to match the fill */
.ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1) .ro-amt,
.ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2) .ro-amt,
.ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3) .ro-amt,
.ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4) .ro-amt,
.ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5) .ro-amt,
.ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6) .ro-amt { color: var(--buy); font-weight: 700; }

/* a red (unfit) notch shows red ONLY while it is the selected one */
.ro-r.ro-red:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1),
.ro-r.ro-red:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2),
.ro-r.ro-red:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3),
.ro-r.ro-red:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4),
.ro-r.ro-red:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5),
.ro-r.ro-red:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6) {
  background: rgba(224, 101, 95, .14);
  border-color: #E0655F;
  box-shadow: 0 0 12px rgba(224, 101, 95, .35);
}
.ro-r.ro-red:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1) .ro-amt,
.ro-r.ro-red:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2) .ro-amt,
.ro-r.ro-red:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3) .ro-amt,
.ro-r.ro-red:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4) .ro-amt,
.ro-r.ro-red:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5) .ro-amt,
.ro-r.ro-red:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6) .ro-amt {
  color: #E0655F; font-weight: 700;
}

/* best-window pane: separated + glowing */
.winset-best {
  border-color: rgba(86, 200, 162, .55);
  box-shadow: 0 0 18px rgba(86, 200, 162, .16), inset 0 0 0 1px rgba(86, 200, 162, .10);
}
.winset-best .win-h { border-bottom-color: rgba(86, 200, 162, .3); }
.winset + .winset { margin-top: var(--sp-3); }

/* screener rows: whole-rectangle amber glow on hover, no underline */
.stable tbody td, .stable tbody th[scope="row"] {
  transition: background .28s var(--ease), box-shadow .28s var(--ease);  /* flowy hover between rows */
}
.stable tbody tr:hover > td,
.stable tbody tr:hover > th[scope="row"],
.stable tbody tr:has(.add-cb:checked) > td,
.stable tbody tr:has(.add-cb:checked) > th[scope="row"] {
  border-bottom-color: transparent;
  background-color: #182221;  /* panel + 6% amber, solid for the sticky column; column glows stay layered above via background-image */
  box-shadow: inset 0 1px 0 rgba(237, 155, 64, .40), inset 0 -1px 0 rgba(237, 155, 64, .40);
}
.stable tbody tr:hover > th[scope="row"] { box-shadow: inset 0 1px 0 rgba(237, 155, 64, .40), inset 0 -1px 0 rgba(237, 155, 64, .40), inset 1px 0 0 rgba(237, 155, 64, .40); }
.stable tbody tr:hover > td:last-child { box-shadow: inset 0 1px 0 rgba(237, 155, 64, .40), inset 0 -1px 0 rgba(237, 155, 64, .40), inset -1px 0 0 rgba(237, 155, 64, .40); }
.stable tbody tr:hover .sys-name { color: var(--buy); text-shadow: 0 0 10px rgba(237, 155, 64, .3); }
.stable a.sys-link:hover { text-decoration: none; }
.stable a.sys-link:hover .sys-name { text-decoration: none; }

/* RoDD values: the leader (.lead, violet) grammar in mint — bold figure,
   aurora text glow. The column itself carries no wash. */
.stable tbody td.pf:not(.lead) {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 5px rgba(86, 200, 162, .50), 0 0 15px rgba(86, 200, 162, .26), 0 0 30px rgba(86, 200, 162, .10);
}
/* the RoDD header: drop the dotted abbr underline, box and bold it */
.stable thead abbr[title] {
  text-decoration: none;
  border: 1px solid rgba(86, 200, 162, .55);
  color: var(--accent);
  font-weight: 700;
  padding: 2px 7px;
  cursor: help;
}

/* whole row is the click target: the name link stretches over the row;
   Add + Get access float above it */
.stable tbody tr { position: relative; }
.stable tbody th[scope="row"] .sys-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.stable .act-cell { position: relative; z-index: 2; }
.act-cell { text-align: center; white-space: nowrap; min-width: 122px; }
.act-cell .btn-row { display: flex; justify-content: center; width: 100%; margin-bottom: var(--sp-2); }
.act-cell .add-btn { width: 100%; justify-content: center; }

/* browse-by-edge rows: amber hover glow, flowy, whole-row click */
.collection li { position: relative; transition: background .28s var(--ease), box-shadow .28s var(--ease); }
.collection li:hover {
  background-color: #182221;
  box-shadow: inset 0 1px 0 rgba(237, 155, 64, .35), inset 0 -1px 0 rgba(237, 155, 64, .35);
}
.collection li:hover .col-name { color: var(--buy); text-shadow: 0 0 10px rgba(237, 155, 64, .3); }
.collection a.sys-link::after { content: ""; position: absolute; inset: 0; }
.collection a.sys-link:hover { text-decoration: none; }
.collection a.sys-link:hover .col-name { text-decoration: none; }

/* flagship + featured cards: whole-card click, name glows amber on card hover */
.fcard, .feat { position: relative; }
.fcard h4 a.sys-link::after, .feat h4 a.sys-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fcard .add-btn-card, .fcard .cta-row, .feat .add-btn-card, .feat .btn { position: relative; z-index: 2; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fcard:hover h4 a, .feat:hover h4 a, .special-card:hover h4 a {
    background-image: linear-gradient(100deg, var(--buy), var(--buy-hi));
  }
}
.fcard:hover h4 a, .feat:hover h4 a { filter: drop-shadow(0 0 12px rgba(237, 155, 64, .35)); }

/* ── flagship identity colors — same grammar as the book deck (owner-
   approved exception to the two-accent rule; ledger in the header).
   Data stats stay mint/amber/violet; only the card chrome, name, and
   emblem carry the identity. Cards without a skin fall back to mint. */
.fc-spartacus            { --fc: #E3A857; --fc-hi: #F0C083; --fc-soft: rgba(227, 168, 87, .14); --fc-line: rgba(227, 168, 87, .38); --fc-glow: rgba(227, 168, 87, .34); }
.fc-the-alloy            { --fc: #F0907A; --fc-hi: #F7B3A2; --fc-soft: rgba(240, 144, 122, .13); --fc-line: rgba(240, 144, 122, .38); --fc-glow: rgba(240, 144, 122, .34); }
.fc-ny-open-pro          { --fc: #7FB2FF; --fc-hi: #A8CBFF; --fc-soft: rgba(127, 178, 255, .13); --fc-line: rgba(127, 178, 255, .38); --fc-glow: rgba(127, 178, 255, .34); }
.fc-silver-830-reversal  { --fc: #D9E3EA; --fc-hi: #F2F7FA; --fc-soft: rgba(217, 227, 234, .11); --fc-line: rgba(217, 227, 234, .34); --fc-glow: rgba(217, 227, 234, .30); }
.fc-china-orb            { --fc: #B4E369; --fc-hi: #CDF096; --fc-soft: rgba(180, 227, 105, .12); --fc-line: rgba(180, 227, 105, .36); --fc-glow: rgba(180, 227, 105, .32); }
.fc-the-midas            { --fc: #E8C15C; --fc-hi: #F5DFA6; --fc-soft: rgba(232, 193, 92, .14); --fc-line: rgba(232, 193, 92, .40); --fc-glow: rgba(232, 193, 92, .32); }
.fc-the-continuum        { --fc: #5CC8E8; --fc-hi: #9ADFF2; --fc-soft: rgba(92, 200, 232, .13); --fc-line: rgba(92, 200, 232, .38); --fc-glow: rgba(92, 200, 232, .32); }
.fc-the-daylight         { --fc: #FF9142; --fc-hi: #FFB27E; --fc-soft: rgba(255, 145, 66, .14); --fc-line: rgba(255, 145, 66, .40); --fc-glow: rgba(255, 145, 66, .32); }
.fc-the-ledger           { --fc: #C7D3DC; --fc-hi: #E6EDF2; --fc-soft: rgba(199, 211, 220, .12); --fc-line: rgba(199, 211, 220, .36); --fc-glow: rgba(199, 211, 220, .30); }
.fc-afternoon-reversion  { --fc: #E88FC6; --fc-hi: #F4B8DC; --fc-soft: rgba(232, 143, 198, .13); --fc-line: rgba(232, 143, 198, .38); --fc-glow: rgba(232, 143, 198, .34); }
.fcard[class*=" fc-"] {
  border-color: var(--fc-line);
  background: radial-gradient(130% 80% at 50% 0%, var(--fc-soft), transparent 55%), var(--panel);
}
.fcard[class*=" fc-"]:hover {
  border-color: var(--fc);
  box-shadow: 0 0 22px var(--fc-glow);
}
.fcard[class*=" fc-"] h4 a.sys-link::before { color: var(--fc); -webkit-text-fill-color: var(--fc); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fcard[class*=" fc-"] h4 a.sys-link {
    background-image: linear-gradient(100deg, #E9F2EE 10%, var(--fc) 55%, var(--fc-hi));
    filter: brightness(1) drop-shadow(0 0 14px var(--fc-soft));
  }
  .fcard[class*=" fc-"]:hover h4 a.sys-link {
    background-image: linear-gradient(100deg, var(--fc), var(--fc-hi));
  }
}
.fcard[class*=" fc-"]:hover h4 a.sys-link { filter: drop-shadow(0 0 12px var(--fc-glow)); }

/* ── identity-themed product pages (flagships + books): body carries
   pdp-theme + the product's fc- skin. Retinting --buy swaps every
   transactional accent (GET ACCESS, OUR PICK, price, add) into the
   identity color; the wash, title, mark, and hero follow. Data mint,
   leader violet, and red states are untouched. */
.pdp-theme {
  --buy: var(--fc);
  --buy-hi: var(--fc-hi);
  --buy-soft: var(--fc-soft);
  --buy-line: var(--fc-line);
  --buy-glow-soft: var(--fc-glow);
  --buy-glow-strong: var(--fc-glow);
  background: radial-gradient(72% 38rem at 50% 0%, var(--fc-soft), transparent 72%), var(--bg);
}
.pdp-theme .pdp-head { display: flex; align-items: flex-start; gap: var(--sp-4); }
.pdp-theme .pdp-id { min-width: 0; margin-right: auto; }
.pdp-mark {
  flex: none;
  width: 74px;
  height: 74px;
  color: var(--fc);
  filter: drop-shadow(0 0 9px var(--fc-glow));
  margin-top: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .pdp-mark { animation: fg-breathe 5.4s ease-in-out infinite; }
  #ticker-pause:checked ~ * .pdp-mark { animation-play-state: paused; }
}
/* fg-breathe is opacity-only; the drop-shadow stays static */
.pdp-theme .pdp-head h1 { color: var(--fc); text-shadow: 0 0 18px var(--fc-glow); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pdp-theme .pdp-head h1 {
    background-image: linear-gradient(100deg, #E9F2EE 8%, var(--fc) 52%, var(--fc-hi));
    text-shadow: none;
    filter: brightness(1) drop-shadow(0 0 16px var(--fc-glow));
  }
}
.pdp-theme .pdp-hero b { color: var(--fc); text-shadow: 0 0 20px var(--fc-glow); }
.pdp-theme .buybox {
  border-color: var(--fc-line);
  background-image: radial-gradient(130% 90% at 50% 0%, var(--fc-soft), transparent 60%);
  box-shadow: 0 0 26px var(--fc-soft);
}
.pdp-theme .rodd { border-color: var(--fc-line); }

/* ── hero cover-flow v7: two explicit modes, zero focus tricks.
   AUTO (#cf-0, the default): the ring steps every 5s, dots ride the same
   clock, hovering pauses in place. Clicking any pane or dot checks that
   strategy: the ring rotates to it with a cascade (back mover first,
   incoming front lands last — reads as cycling, never teleporting) and
   HOLDS until the play pill re-checks #cf-0. Radios are position:fixed so
   focusing them can never scroll the page. */
.hero, #hero { overflow-x: clip; }
.coverflow { position: relative; }
.cf-r { position: fixed; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; margin: 0; }
.cf-stage {
  position: relative;
  height: 396px;
  perspective: 1150px;
  transform-style: preserve-3d;
}
.cf-pane {
  position: absolute;
  left: 50%; top: 50%;
  width: 242px; height: 318px;
  margin: -159px 0 0 -121px;
  border: 1px solid var(--fc-line, var(--line-bright));
  background: radial-gradient(120% 100% at 50% 0%, var(--fc-soft, rgba(86, 200, 162, .10)), transparent 65%), var(--panel);
  transition: transform 1s cubic-bezier(.22, .9, .26, 1), opacity .55s var(--ease), box-shadow .3s var(--ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.cf-link {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  text-align: center;
  text-decoration: none;
}
.cf-pick { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.cf-pane:hover { border-color: var(--fc, var(--accent)); box-shadow: 0 0 26px var(--fc-glow, rgba(86, 200, 162, .3)); }
.cf-glyph { width: 96px; height: 96px; color: var(--fc, var(--accent)); filter: drop-shadow(0 0 8px var(--fc-glow, rgba(86, 200, 162, .3))); }
.cf-name {
  font-family: var(--display);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.15;
  color: var(--fc, var(--accent));
}
.cf-stat {
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* resting ring — the base pose and no-motion fallback */
.cf-pane:nth-child(1) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; }
.cf-pane:nth-child(2) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; }
.cf-pane:nth-child(3) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; }
.cf-pane:nth-child(4) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; }
.cf-pane:nth-child(5) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; }
.cf-pane:nth-child(6) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; }
/* a selection rotates the ring to that strategy and holds it */
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(1) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; transition-delay: .26s, .26s, 0s; }
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(2) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(3) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(4) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; transition-delay: 0s, 0s, 0s; }
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(5) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(6) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-1:checked ~ .cf-stage .cf-pane:nth-child(1) .cf-pick { display: none; }
#cf-1:checked ~ .cf-dots .cf-dot:nth-child(1)::after { opacity: 1; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(1) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(2) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; transition-delay: .26s, .26s, 0s; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(3) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(4) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(5) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; transition-delay: 0s, 0s, 0s; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(6) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-2:checked ~ .cf-stage .cf-pane:nth-child(2) .cf-pick { display: none; }
#cf-2:checked ~ .cf-dots .cf-dot:nth-child(2)::after { opacity: 1; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(1) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(2) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(3) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; transition-delay: .26s, .26s, 0s; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(4) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(5) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(6) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; transition-delay: 0s, 0s, 0s; }
#cf-3:checked ~ .cf-stage .cf-pane:nth-child(3) .cf-pick { display: none; }
#cf-3:checked ~ .cf-dots .cf-dot:nth-child(3)::after { opacity: 1; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(1) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; transition-delay: 0s, 0s, 0s; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(2) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(3) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(4) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; transition-delay: .26s, .26s, 0s; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(5) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(6) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-4:checked ~ .cf-stage .cf-pane:nth-child(4) .cf-pick { display: none; }
#cf-4:checked ~ .cf-dots .cf-dot:nth-child(4)::after { opacity: 1; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(1) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(2) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; transition-delay: 0s, 0s, 0s; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(3) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(4) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(5) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; transition-delay: .26s, .26s, 0s; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(6) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-5:checked ~ .cf-stage .cf-pane:nth-child(5) .cf-pick { display: none; }
#cf-5:checked ~ .cf-dots .cf-dot:nth-child(5)::after { opacity: 1; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(1) { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(2) { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(3) { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; transition-delay: 0s, 0s, 0s; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(4) { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; transition-delay: .06s, .06s, 0s; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(5) { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; transition-delay: .12s, .12s, 0s; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(6) { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; transition-delay: .26s, .26s, 0s; }
#cf-6:checked ~ .cf-stage .cf-pane:nth-child(6) .cf-pick { display: none; }
#cf-6:checked ~ .cf-dots .cf-dot:nth-child(6)::after { opacity: 1; }
.cf-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  position: relative;
  z-index: 7;
}
.cf-dot {
  position: relative;
  width: 13px; height: 13px;
  border: 1px solid var(--fc, var(--accent));
  background: transparent;
  cursor: pointer;
  transition: transform .2s var(--ease);
}
.cf-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fc, var(--accent));
  box-shadow: 0 0 10px var(--fc-glow, rgba(86, 200, 162, .4));
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.cf-dot:hover { transform: scale(1.25); box-shadow: 0 0 8px var(--fc-glow, rgba(86, 200, 162, .3)); }
.cf-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 15px;
  margin-left: var(--sp-2);
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: box-shadow .2s var(--ease), opacity .2s var(--ease);
}
.cf-play-ico {
  width: 0; height: 0;
  border-left: 6px solid var(--accent);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.cf-play:hover { box-shadow: 0 0 10px rgba(86, 200, 162, .4); }
#cf-0:checked ~ .cf-dots .cf-play { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .coverflow:has(#cf-0:checked) .cf-pane { animation: cf-cycle 30s var(--ease) infinite; }
  .coverflow:has(#cf-0:checked) .cf-dot::after { animation: dot-cycle 30s var(--ease) infinite; }
  .coverflow:has(#cf-0:checked) .cf-pane:nth-child(2), .coverflow:has(#cf-0:checked) .cf-dot:nth-child(2)::after { animation-delay: -25s; }
  .coverflow:has(#cf-0:checked) .cf-pane:nth-child(3), .coverflow:has(#cf-0:checked) .cf-dot:nth-child(3)::after { animation-delay: -20s; }
  .coverflow:has(#cf-0:checked) .cf-pane:nth-child(4), .coverflow:has(#cf-0:checked) .cf-dot:nth-child(4)::after { animation-delay: -15s; }
  .coverflow:has(#cf-0:checked) .cf-pane:nth-child(5), .coverflow:has(#cf-0:checked) .cf-dot:nth-child(5)::after { animation-delay: -10s; }
  .coverflow:has(#cf-0:checked) .cf-pane:nth-child(6), .coverflow:has(#cf-0:checked) .cf-dot:nth-child(6)::after { animation-delay: -5s; }
  @keyframes cf-cycle {
    0.00% { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; }
    13.17% { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; }
    16.67% { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; }
    29.83% { transform: translateX(-196px) translateZ(-215px) rotateY(-30deg); opacity: 1; }
    33.33% { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; }
    46.50% { transform: translateX(-252px) translateZ(-400px) rotateY(-34deg); opacity: .28; }
    50.00% { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; }
    63.17% { transform: translateX(0) translateZ(-530px) rotateY(0deg); opacity: .14; }
    66.67% { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; }
    79.83% { transform: translateX(252px) translateZ(-400px) rotateY(34deg); opacity: .28; }
    83.33% { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; }
    96.50% { transform: translateX(196px) translateZ(-215px) rotateY(30deg); opacity: 1; }
    100% { transform: translateX(0) translateZ(0) rotateY(0deg); opacity: 1; }
  }
  @keyframes dot-cycle {
    0%     { opacity: 1; }
    13.17% { opacity: 1; }
    16.67% { opacity: 0; }
    96.50% { opacity: 0; }
    100%   { opacity: 1; }
  }
  .coverflow:hover .cf-pane, .coverflow:hover .cf-dot::after,
  #ticker-pause:checked ~ * .cf-pane,
  #ticker-pause:checked ~ * .cf-dot::after { animation-play-state: paused; }
}
@media (max-width: 1100px) {
  .cf-stage { transform: scale(.80); transform-origin: center; height: 330px; }
}
@media (max-width: 760px) {
  .cf-stage { transform: scale(.60); height: 260px; }
}

/* ── SITE SYSTEMS (keep OUTSIDE the cover-flow block above — that block
   gets excised wholesale when the carousel is regenerated) ── */
/* render-on-approach: below-fold sections skip layout/paint offscreen */
/* #packages excluded: the fixed starter popup lives inside it and
   cv's paint containment would clip it offscreen */
#why, #how { content-visibility: auto; contain-intrinsic-size: auto 930px; }
#security { content-visibility: auto; contain-intrinsic-size: auto 600px; }
#faq { content-visibility: auto; contain-intrinsic-size: auto 1050px; }
.creed { content-visibility: auto; contain-intrinsic-size: auto 510px; }
/* free scrolling by owner request; scroll-padding still offsets anchor
   jumps under the sticky header */
html { scroll-padding-top: calc(var(--header-h) + 58px); }
#flagships, #tier-2, #tier-3, #edge, #books { scroll-margin-top: calc(var(--header-h) + 64px); }

/* ── THE STANDARD: framed slab in the site's display grammar ── */
.creed { padding: var(--sp-6) 0; }
.creed-frame {
  position: relative;
  border: 1px solid rgba(86, 200, 162, .35);
  background: radial-gradient(90% 130% at 50% 0%, rgba(86, 200, 162, .06), transparent 60%), var(--panel);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: 0 0 40px rgba(86, 200, 162, .06);
}
.creed-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(86, 200, 162, .12);
  pointer-events: none;
}
.creed-frame::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.creed-tag {
  position: absolute;
  top: -9px; left: var(--sp-5);
  font-family: var(--mono);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent);
  background: var(--bg);
  padding: 2px 10px;
  border: 1px solid rgba(86, 200, 162, .45);
}
.creed-text {
  font-family: var(--display);
  font-size: clamp(1.55rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: uppercase;
  max-width: 44ch;
  text-wrap: balance;
  color: var(--text);
}
.creed-text .hl {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(86, 200, 162, .40);
}
.creed-text .hl-strong {
  color: #F2FBF7;
  text-shadow: 0 0 14px rgba(233, 242, 238, .28);
}
.creed-nots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
}
.creed-nots span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(86, 200, 162, .35);
  background: var(--raised);
  padding: 9px 16px;
}
.creed-nots span::before {
  content: "✕";
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(86, 200, 162, .5);
}

/* the session clock, re-homed at the foot of How-access */
/* Session clock now lives in the HERO, directly above the flagship carousel
   (owner request 2026-08-22 - moved out of #how, explanatory caption dropped;
   the dial speaks for itself). .hero-visual stacks the two so the carousel
   keeps its own size and simply sits lower. */
/* Session clock lives in the 01 / Strategies section head (owner request
   2026-08-22 - hero reverted to its original carousel-only layout). It sits
   at the right end of the existing header row, so it costs NO extra vertical
   space: the row simply grows to the dial's height. Decorative only
   (aria-hidden), and hidden on small screens where the row must stay compact. */
.sec-head-dial { align-items: center; }
.sec-head .sec-dial {
  margin-left: auto;
  width: auto;
  flex: none;
  align-self: center;
}
.sec-head .sec-dial .dial { width: 88px; height: 88px; max-width: 88px; }
/* At 88px the SYDNEY/SHANGHAI/FRANKFURT/NEW YORK labels scale to ~3.4px -
   illegible fuzz, and under the 11px type floor. Drop them here; the ring,
   session arcs and sweep hand still carry the idea. */
.sec-head .sec-dial .dial-label { display: none; }
@media (max-width: 760px) {
  .sec-head .sec-dial { display: none; }
}

/* mobile flagship glyph: fixed 64px (must sit AFTER the stretch base in
   the cascade — the 480px block earlier in the file loses that fight) */
@media (max-width: 480px) {
  .fglyph { align-self: flex-start; width: 64px; height: 64px; min-width: 0; aspect-ratio: auto; }
}
@media (max-width: 560px) {
  .pdp-mark { width: 54px; height: 54px; }
}

/* lightning flicker on category leaders — irregular, electric, gated */
@media (prefers-reduced-motion: no-preference) {
  /* aurora breathe: two shadow layers crossfade on offset rhythms, so the
     glow drifts and swells instead of snapping — electric, never choppy */
  /* opacity-only breathe over a STATIC text-shadow — animating the
     shadow itself repainted every leader cell on every frame */
  .lead, .stable tbody td.lead, .fstat b.lead {
    animation: lead-breathe 9.6s ease-in-out infinite;
  }
  /* RoDD figures keep a static glow: animating 14 text-shadows repainted
     the tables every frame and lagged the page; the violet leader keeps
     the living aurora */
  @keyframes lead-breathe {
    0%, 100% { opacity: .78; }
    22%      { opacity: 1; }
    34%      { opacity: .88; }
    58%      { opacity: .97; }
    76%      { opacity: .82; }
  }
}
#ticker-pause:checked ~ * .lead,
#ticker-pause:checked ~ * .stable tbody td.lead { animation-play-state: paused; }

/* ── starter special pop-up (index): bottom-left, dismissible ── */
.pop-cb { position: absolute; width: 1px; height: 1px; opacity: 0; }
.special-pop {
  position: fixed; left: var(--sp-5); bottom: var(--sp-5); z-index: 60;
  width: min(19rem, calc(100vw - 2 * var(--sp-5)));
  border: 1px solid var(--buy);
  background: var(--panel);
  padding: var(--sp-4);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .85), 0 0 24px rgba(237, 155, 64, .18);
}
#pop-dismiss:checked ~ .special-pop { display: none; }
.special-pop .badge-special { position: static; display: inline-block; margin-bottom: var(--sp-3); }
.pop-line { font-family: var(--display); font-size: var(--fs-xl); font-weight: 700; text-transform: uppercase; margin-bottom: var(--sp-2); }
.pop-line b { color: var(--buy); }
.pop-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.pop-go { width: 100%; }
.pop-close {
  position: absolute; top: 0; right: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); z-index: 1;
}
.pop-close:hover { color: var(--text); }
#pop-dismiss:focus-visible ~ .special-pop .pop-close { outline: 2px solid var(--accent); outline-offset: -2px; }
.pop-x { width: 11px; height: 11px; position: relative; }
.pop-x::before, .pop-x::after { content: ""; position: absolute; left: 5px; top: 0; width: 1px; height: 15px; background: currentColor; }
.pop-x::before { transform: rotate(45deg); }
.pop-x::after { transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .special-pop { animation: pop-in .5s var(--ease) both; animation-delay: .8s; }
  @keyframes pop-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (max-width: 640px) {
  .special-pop { left: var(--sp-3); bottom: var(--sp-3); width: calc(100vw - 2 * var(--sp-3)); }
  #strategies:has(.add-cb:checked) ~ * .special-pop { display: none; }  /* cart takes the stage on phones */
}

/* three-tile bundles grid (starter + all-access + pick-3) */
.packs-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
.pack-starter { border-color: var(--buy); position: relative; box-shadow: 0 0 18px rgba(237, 155, 64, .12); }
.pack-starter .badge-special { position: absolute; top: calc(-1 * var(--sp-2)); left: var(--sp-4); background: var(--raised); }
@media (max-width: 960px) { .packs-3 { grid-template-columns: minmax(0, 1fr); } }

/* recommended size: heavy emphasis */
.ro-notch { position: relative; }
.ro-notch-rec { border-color: var(--buy-line); }
.ro-notch-rec .ro-amt { font-weight: 700; }
/* the amber emphasis rides the selection: our pick is checked by default,
   click elsewhere and the highlight leaves — the OUR PICK tag stays */
.ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1).ro-notch-rec,
.ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2).ro-notch-rec,
.ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3).ro-notch-rec,
.ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4).ro-notch-rec,
.ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5).ro-notch-rec,
.ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6).ro-notch-rec {
  border-color: var(--buy);
  background: var(--buy-soft);
  box-shadow: 0 0 12px var(--buy-glow-soft);
}
.ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1).ro-notch-rec .ro-amt,
.ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2).ro-notch-rec .ro-amt,
.ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3).ro-notch-rec .ro-amt,
.ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4).ro-notch-rec .ro-amt,
.ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5).ro-notch-rec .ro-amt,
.ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6).ro-notch-rec .ro-amt { color: var(--buy); }
.ro-rec {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: .1em; line-height: 1;
  padding: 2px 6px;
  background: var(--buy); color: var(--buy-ink);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  /* the glow pulse only rides the notch while it is the selected one */
  .ro-r:nth-of-type(1):checked ~ .ro-track .ro-notch:nth-child(1).ro-notch-rec,
  .ro-r:nth-of-type(2):checked ~ .ro-track .ro-notch:nth-child(2).ro-notch-rec,
  .ro-r:nth-of-type(3):checked ~ .ro-track .ro-notch:nth-child(3).ro-notch-rec,
  .ro-r:nth-of-type(4):checked ~ .ro-track .ro-notch:nth-child(4).ro-notch-rec,
  .ro-r:nth-of-type(5):checked ~ .ro-track .ro-notch:nth-child(5).ro-notch-rec,
  .ro-r:nth-of-type(6):checked ~ .ro-track .ro-notch:nth-child(6).ro-notch-rec { animation: rec-glow 2.4s var(--ease) infinite; }
  @keyframes rec-glow {
    0%, 100% { box-shadow: 0 0 8px var(--buy-glow-soft); }
    50% { box-shadow: 0 0 18px var(--buy-glow-strong); }
  }
}
#ticker-pause:checked ~ * .ro-notch-rec { animation-play-state: paused; }
.ro-track { padding-top: 10px; }
.ro-flag-rec { color: var(--accent); border-color: var(--accent); }

/* right rail: buybox + RoDD sizing menu stacked, sticky as a unit */
.pdp-side {
  display: flex; flex-direction: column; gap: var(--sp-4);
  position: sticky; top: calc(var(--header-h) + var(--sp-4));
  align-self: start;
  min-width: 0;
}
.pdp-side .buybox { position: static; top: auto; }
.pdp-side .rodd { padding: var(--sp-4) var(--sp-3); }
.pdp-side .rodd-fig { font-size: var(--fs-xl); }
@media (max-width: 820px) {
  .pdp-side { position: static; }
}

/* CARTGEN:rules — generated from catalog2.json; do not hand-edit */
#add-spartacus:checked + .add-btn { counter-increment: cart 1 total 509; }
#add-the-alloy:checked + .add-btn { counter-increment: cart 1 total 469; }
#add-silver-830-reversal:checked + .add-btn { counter-increment: cart 1 total 249; }
#add-china-orb:checked + .add-btn { counter-increment: cart 1 total 249; }
#add-afternoon-reversion:checked + .add-btn { counter-increment: cart 1 total 239; }
#add-30m-structure-reclaim:checked + .add-btn { counter-increment: cart 1 total 199; }
#add-es-pullback-fade:checked + .add-btn { counter-increment: cart 1 total 189; }
#add-lunch-break-fade:checked + .add-btn { counter-increment: cart 1 total 189; }
#add-vwap-band-fade:checked + .add-btn { counter-increment: cart 1 total 179; }
#add-silver-midday-range-fade:checked + .add-btn { counter-increment: cart 1 total 159; }
#add-friday-orb:checked + .add-btn { counter-increment: cart 1 total 159; }
#add-830-range-fade:checked + .add-btn { counter-increment: cart 1 total 159; }
#add-frankfurt-continuation:checked + .add-btn { counter-increment: cart 1 total 149; }
#add-pool-milestone-pullback:checked + .add-btn { counter-increment: cart 1 total 129; }
#add-830-news-fade:checked + .add-btn { counter-increment: cart 1 total 129; }
#add-1030-fade:checked + .add-btn { counter-increment: cart 1 total 139; }
#add-the-vise-25:checked + .add-btn { counter-increment: cart 1 total 139; }
#add-cme-reopen-snap:checked + .add-btn { counter-increment: cart 1 total 119; }
#add-ny-open-pro:checked + .add-btn { counter-increment: cart 1 total 349; }
#add-the-vise:checked + .add-btn { counter-increment: cart 1 total 119; }
#strategies:has(#add-spartacus:checked) .cl-spartacus,
#strategies:has(#add-the-alloy:checked) .cl-the-alloy,
#strategies:has(#add-silver-830-reversal:checked) .cl-silver-830-reversal,
#strategies:has(#add-china-orb:checked) .cl-china-orb,
#strategies:has(#add-afternoon-reversion:checked) .cl-afternoon-reversion,
#strategies:has(#add-30m-structure-reclaim:checked) .cl-30m-structure-reclaim,
#strategies:has(#add-es-pullback-fade:checked) .cl-es-pullback-fade,
#strategies:has(#add-lunch-break-fade:checked) .cl-lunch-break-fade,
#strategies:has(#add-vwap-band-fade:checked) .cl-vwap-band-fade,
#strategies:has(#add-silver-midday-range-fade:checked) .cl-silver-midday-range-fade,
#strategies:has(#add-friday-orb:checked) .cl-friday-orb,
#strategies:has(#add-830-range-fade:checked) .cl-830-range-fade,
#strategies:has(#add-frankfurt-continuation:checked) .cl-frankfurt-continuation,
#strategies:has(#add-pool-milestone-pullback:checked) .cl-pool-milestone-pullback,
#strategies:has(#add-830-news-fade:checked) .cl-830-news-fade,
#strategies:has(#add-1030-fade:checked) .cl-1030-fade,
#strategies:has(#add-the-vise-25:checked) .cl-the-vise-25,
#strategies:has(#add-cme-reopen-snap:checked) .cl-cme-reopen-snap,
#strategies:has(#add-ny-open-pro:checked) .cl-ny-open-pro,
#strategies:has(#add-the-vise:checked) .cl-the-vise {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line);
}