/* ============================================================================
   IGNITION — design system
   Institutional fintech: deep navy-ink, a single refined gold accent, emerald
   reserved for gains. True glassmorphism. Built for trust, not hype.
   Vanilla CSS, no build step. Rebrand by editing the tokens below + markup.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* base surfaces — cool navy-ink with a consistent cool tint between layers */
  --bg:           #05080e;
  --bg-2:         #0a1018;
  --surface:      #0b111b;
  --surface-2:    #0e1522;
  --surface-3:    #121a2a;
  --line:         rgba(139, 163, 196, 0.14);
  --line-strong:  rgba(139, 163, 196, 0.28);

  /* text — cool neutral, single gray family */
  --text:         #e9eef5;
  --text-soft:    #c3cedd;
  --muted:        #8fa2ba;
  /* WCAG AA floor: fineprint, table dates, footer risk line and chart axis text
     all render in --faint on --bg #090c15 — the old #525c73 was ~2.9:1, i.e. the
     exact text a skeptic needs (risk copy) was the hardest to read. */
  --faint:        #7e8ca0;

  /* ONE accent — a desaturated honey-gold. Premium + credible, not alarm-red. */
  --accent:       #e8a13c;   /* gold */
  --accent-2:     #c8862e;   /* deep amber (for gradient depth, no red) */
  --accent-3:     #f2b95a;   /* light gold / spark */
  --accent-soft:  rgba(232, 161, 60, 0.12);
  --accent-line:  rgba(232, 161, 60, 0.42);
  /* Flat: --flame is a solid accent, not a three-stop gradient. It is consumed
     by ~8 rules (buttons, gain pills, tier chips, chart swatches, the scanner
     core); flattening it here flattens all of them consistently instead of
     leaving some gradient and some solid. */
  --flame:        var(--accent);
  --flame-soft:   var(--accent-soft);

  /* market semantics — emerald is the "your money went up" color: trust + reward */
  --up:           #39d98a;
  --up-bright:    #55e8a4;
  --up-soft:      rgba(46, 224, 143, 0.14);
  --up-line:      rgba(46, 224, 143, 0.40);
  --up-glow:      none;   /* flat: status is colour, not a halo */
  --success:      var(--up);
  --down:         #ff5d6b;

  /* FLAT DOCTRINE — surfaces are solid colour + one hairline. No gradient
     fill, no blur, no glow. These tokens stay defined because ~40 rules still
     reference them; they now resolve to flat values, so a stray .glass cannot
     reintroduce depth. */
  --glass:        var(--surface-2);
  --glass-strong: var(--surface-3);
  --glass-edge:   none;
  --blur:         none;

  /* type */
  --font-display: "Archivo", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;

  /* ---- TYPE SCALE -------------------------------------------------------
     ONE scale, ratio ~1.25. Every font-size in this file must resolve to a
     step. Before this existed the sheet carried 63 distinct font-sizes and a
     tag meant different sizes on different pages: h1 was 54px on index and
     70px on performance; h2 ran 24 / 43 / 58px; and on how-it-works an h3
     (29px) rendered LARGER than the h2 (24px) above it. A tag has to mean one
     size everywhere or hierarchy stops carrying information. */
  --fs-xs:        0.75rem;                                    /* 12 — mono micro-label */
  --fs-sm:        0.8125rem;                                  /* 13 — caption, table cell */
  --fs-base:      0.9375rem;                                  /* 15 — UI text */
  --fs-body:      1rem;                                       /* 16 — prose */
  --fs-md:        1.0625rem;                                  /* 17 — emphasised body */
  --fs-lg:        clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);  /* 17→19 — lead */
  --fs-xl:        clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); /* 19→22 — h3 */
  --fs-2xl:       clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);   /* 26→36 — h2 */
  --fs-3xl:       clamp(2rem, 1.6rem + 1.9vw, 2.875rem);      /* 32→46 — h1 */
  --fs-4xl:       clamp(2.375rem, 1.8rem + 2.8vw, 3.75rem);   /* 38→60 — hero only */

  /* aliases so existing rules keep resolving while they migrate to --fs-* */
  --text-hero:    var(--fs-4xl);
  --text-h2:      var(--fs-2xl);
  --text-h3:      var(--fs-xl);
  --text-lead:    var(--fs-lg);

  /* line-height belongs to the size, not to the element */
  --lh-tight:     1.12;   /* display */
  --lh-snug:      1.35;   /* headings, short UI */
  --lh-body:      1.65;   /* prose */

  /* ---- SPACE SCALE ------------------------------------------------------
     4px base. Replaces 81 distinct padding values and 36 distinct gaps. */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */

  /* ONE vertical beat for every section on every page. Was 0 / 16 / 86 / 96 /
     112 / 160px inside a single scroll, which reads as accidental rather than
     composed — and 160px top plus 160px bottom put 320px of dead air between
     adjacent sections. */
  --space-section: clamp(3.5rem, 2.4rem + 3.4vw, 5.5rem);

  /* ONE card padding and ONE radius. .step / .feature / .cond / .stat carried
     four paddings and two radii for the same visual role — that is the
     "some boxes are big, some are small" symptom at its source. */
  --pad-card:      clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  --radius:        8px;
  --radius-sm:     4px;
  --radius-lg:     10px;
  --radius-pill:   999px;

  /* ---- MEASURE + CONTAINER ---------------------------------------------
     Prose ran to 156 characters per line on index and the full 1200px
     container on how-it-works. 60–75ch is the readable band; --measure caps
     every text block that is not deliberately full-bleed. */
  --measure:       68ch;
  --measure-tight: 56ch;
  /* Matches --v2-maxw. These were 1120 and 1240, and since nav/footer use .wrap
     while every v2 section uses .v2-wrap, the two most persistent elements on
     the page were inset 60px further than everything between them (measured at
     1440px: content edge 93, nav and footer edge 153). One width, one edge. */
  --maxw:          1240px;
  --gutter:        clamp(1.25rem, 1rem + 1.6vw, 2rem);

  /* flat: no drop shadows. Elevation is carried by the hairline alone. */
  --shadow:        none;
  --shadow-glow:   0 0 0 1px var(--line);

  /* z-index scale */
  --z-nav: 100; --z-overlay: 200; --z-skip: 300;

  /* motion */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --snap:         cubic-bezier(0.7, 0, 0.3, 1);
  --ice:          #9cc3e6;
  --t-slow:       1.1s;
  --drift:        22s;
  --dur:          .6s;
}

/* reusable true-glass surface */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge), var(--shadow);
}

/* visible keyboard focus everywhere (accessibility) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius:var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* skip link for keyboard users */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-skip);
  background: var(--accent); color: #14110a; padding: var(--s-3) var(--s-4);
  border-radius:var(--radius); font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* ---- HEADING SYSTEM ------------------------------------------------------
   A tag maps to exactly one step of the scale, site-wide. Page-level rules may
   restyle colour or spacing but must not reassign size — that is what let h2
   mean 24px in one section and 58px in the next.

   Optical letter-spacing: tracking is negative at display sizes and returns to
   0 by ~20px. A single -0.02em applied to every heading (the old rule) is too
   loose at 46px and visibly too tight at 19px, which is most of what "the
   finishing of the font is not good" is describing. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-2xl); line-height: 1.18;            letter-spacing: -0.02em;  }
h3 { font-size: var(--fs-xl);                                letter-spacing: -0.012em; }
h4 { font-size: var(--fs-md);                                letter-spacing: -0.006em; }
h5, h6 { font-size: var(--fs-base); letter-spacing: 0; }

/* Display type never goes below 600. The hero previously set font-weight:200
   on Space Grotesk at 60-105px; a hairline stroke at that size is what reads
   as unfinished on a dark background, because antialiasing thins light-on-dark
   strokes further. */
h1, h2 { font-synthesis-weight: none; }

p { margin: 0; text-wrap: pretty; line-height: var(--lh-body); }

/* Prose never exceeds the readable measure unless a rule opts out explicitly.
   :not() keeps table cells, nav, buttons and grid captions out of it. */
p:not([class]) { max-width: var(--measure); }
/* tabular figures everywhere numbers matter */
.mono, table, .num, .money-num, .stat, .gain-pill, .price, .tape-item { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

/* Flat ground. The page sits on one solid colour — no corner washes, no film
   grain overlay. Two large radial gradients plus a turbulence-noise layer over
   the whole viewport is texture the content never asked for, and the grain in
   particular is what gives flat type a slightly soft, unresolved edge. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background: var(--bg);
}
body::after { content: none; }

/* -------------------------------------------------------------- utilities -- */
/* ---- CONTAINER -----------------------------------------------------------
   ONE gutter, ONE max-width, so every page shares a single left edge. Measured
   on index.html at 1440px, content was starting at four different x positions
   (113 / 122 / 131 / 173px) because sections applied their own inline padding
   on top of .wrap. Sections must contribute vertical rhythm only; horizontal
   position belongs to .wrap alone. */
.wrap      { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gutter) * 2), 1320px);      margin-inline: auto; }

.section { padding-block: var(--space-section); position: relative; }
/* A section may not add horizontal padding — that is what broke the shared
   edge. Vertical overrides stay legal. */
.section { padding-inline: 0; }
/* Neutralise the stacked per-page top-padding overrides (0 / 16 / 86 / 96px)
   so the vertical beat is uniform. */
.section + .section { padding-block-start: var(--space-section); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .26em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); opacity: .7; }
/* Flat: the emphasis word is a solid accent, not a clipped gradient. A
   gradient across text also loses contrast at its dark end, so this reads
   better as well as flatter. */
.gradient-text {
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: var(--accent-3);
}
.lead { font-size: var(--fs-lg); color: var(--text-soft); max-width: var(--measure-tight); line-height: 1.55; }
/* .fineprint is a small-print role; it was inheriting lead sizing in places
   and rendering at 20.8px, i.e. larger than body text. */
.fineprint { font-size: var(--fs-sm); color: var(--faint); max-width: var(--measure); line-height: 1.6; }
.mono { font-family: var(--font-mono); }
/* Centred text still obeys the measure. A centred paragraph left to fill the
   1120px container runs ~143 characters per line, and centred text is harder
   to track back to the next line than left-aligned, so an over-long centred
   line is the worst of both. */
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
p.center, .center > p { max-width: var(--measure); margin-inline: auto; }

/* -------------------------------------------------------------- buttons --- */
/* Flat buttons: solid fill, no gradient, no drop shadow, no lift on hover.
   State is carried by colour alone, which keeps the row of buttons optically
   still — the old translateY(-2px) made adjacent CTAs jump against each other. */
.btn {
  --pad: .8rem 1.35rem;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--pad); border-radius: var(--radius-pill); font-weight: 600;
  font-size: var(--fs-base); border: 1px solid transparent; position: relative;
  line-height: 1.2;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #171004; box-shadow: none; }
.btn-primary:hover { background: var(--accent-3); box-shadow: none; transform: none; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(255,255,255,.05); border-color: var(--line-strong); transform: none; }
.btn-lg { --pad: .95rem 1.75rem; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: sticky; top: 0; z-index: 100;
  /* HEAT: solid night-steel bar, no blur (glass banned site-wide) */
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent); }
.nav-inner { display: flex; align-items: center; gap: var(--s-5); height: 72px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; font-size:var(--fs-md); letter-spacing: -.01em; }
.brand .spark { width: 28px; height: 28px; flex: none; }
.brand b { font-weight: 700; color: var(--accent); }
.brand .spark + span { white-space: nowrap; }
.nav-links { display: flex; gap: var(--s-1); margin-left: auto; }
.nav-links a {
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); font-size:var(--fs-base);
  color: var(--text-soft); transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); background: rgba(255,255,255,.06); }
.nav-cta { display: flex; align-items: center; gap: var(--s-2); margin-left: .4rem; }
/* 44x44 minimum: on a phone this is the only control that opens the menu, and
   it was rendering 40x42. */
.nav-toggle { display: none; background: none; border: 0; color: var(--text); padding: var(--s-2); min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta { margin-left: 0; }
  .nav.open .nav-links {
    display: flex; position: absolute; inset: 72px 0 auto 0; flex-direction: column;
    gap: 0; padding: var(--s-2) var(--s-4) var(--s-4); background: var(--bg-2); border-bottom: 1px solid var(--line);
  }
  .nav.open .nav-links a { padding: var(--s-4) var(--s-4); }
}
@media (max-width: 640px) {
  .nav-inner { gap: var(--s-3); }
  .brand { font-size:var(--fs-body); gap: var(--s-2); }
  .brand .spark { width: 24px; height: 24px; }
}

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; padding-block: clamp(3.5rem, 2rem + 7vw, 7rem) clamp(3rem, 2rem + 4vw, 5rem); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-badge {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(255,255,255,.02);
  font-size:var(--fs-sm); color: var(--text-soft); margin-bottom: 1.6rem;
}
.hero-badge .tag { background: var(--accent-soft); color: var(--accent-3); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size:var(--fs-xs); }
.hero h1 { font-size: var(--text-hero); font-weight: 700; }
.hero h1 .line { display: block; }
.hero p.lead { margin-top: 1.5rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: 2.2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); margin-top: 2.4rem; color: var(--muted); font-size:var(--fs-base); }
.hero-trust b { color: var(--text); font-family: var(--font-display); }
.hero-trust .dot { color: var(--accent); }

/* hero scanner visual */
.scanner {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 460px; margin-inline: auto;
  border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--line); box-shadow: none; overflow: hidden;
}
.scanner .ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1px solid var(--line); }
.scanner .ring.r1 { width: 86%; height: 86%; }
.scanner .ring.r2 { width: 60%; height: 60%; }
.scanner .ring.r3 { width: 34%; height: 34%; }
.scanner .sweep {
  position: absolute; inset: 0; border-radius: 50%;
  /* One flat hairline sweeping the dial, instead of a glowing conic wedge. */
  background: none;
  border-top: 1px solid var(--accent-line);
  animation: sweep 6s linear infinite;
}
@keyframes sweep { to { transform: rotate(360deg); } }
.scanner .core {
  position: absolute; inset: 0; margin: auto; width: 30%; height: 30%; border-radius: 50%;
  background: var(--accent); box-shadow: none;
  display: grid; place-items: center;
}
.scanner .core span { font-family: var(--font-display); font-weight: 700; color: #1a0b02; font-size:var(--fs-xl); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.scanner .blip {
  position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--up);
  box-shadow: none; opacity: 0; animation: blip 4.2s var(--ease) infinite;
}
.scanner .blip.b1 { top: 24%; left: 70%; animation-delay: .8s; }
.scanner .blip.b2 { top: 64%; left: 30%; animation-delay: 2.1s; }
.scanner .blip.b3 { top: 72%; left: 66%; animation-delay: 3.2s; }
@keyframes blip { 0%,70%,100% { opacity: 0; transform: scale(.4); } 78% { opacity: 1; transform: scale(1.3); } 90% { opacity: .6; } }
.scanner-tag {
  position: absolute; left: 12px; bottom: 12px; right: 12px; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--muted);
}
.scanner-tag .live { color: var(--up); display: inline-flex; align-items: center; gap: var(--s-2); }
.scanner-tag .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: none; animation: pulse 1.6s infinite; }

/* ----------------------------------------------------------- ticker tape -- */
.tape { border-block: 1px solid var(--line); background: var(--bg-2); overflow: hidden; padding-block: .85rem; }
.tape-track { display: flex; gap: var(--s-7); width: max-content; animation: marquee 38s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tape-item { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size:var(--fs-base); color: var(--text-soft); }
.tape-item .tk { color: var(--text); font-weight: 600; }
.tape-item .gain { color: var(--up); font-weight: 600; }

/* --------------------------------------------------------------- section heads */
.section-head { max-width: var(--measure); margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--s-3); }
.section-head p { margin-top: var(--s-4); color: var(--text-soft); font-size: var(--fs-lg); max-width: var(--measure); }
.section-head.center p { margin-inline: auto; }

/* ---- CARD DOCTRINE -------------------------------------------------------
   .stat / .step / .feature / .cond are the same visual role: a bordered box
   holding a label and a short body. They previously carried four different
   paddings (2rem 1.8rem · 1.6rem · 1.2rem 1.3rem · clamp(1.4,3vw,2.4)) and two
   radii (10px · 14px · 0), which is what makes a page read as assembled rather
   than designed. One padding token, one radius, one hairline, flat fill. */
.stat, .step, .feature, .cond {
  padding: var(--pad-card);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
/* No lift on hover: the border does the work. Translating a card on hover
   shifts its neighbours' optical baseline and is the single biggest source of
   "this feels like a template". */
.step:hover, .feature:hover, .cond:hover { border-color: var(--line-strong); transform: none; }

/* ONE grid rhythm and TWO breakpoints for every card grid. These four grids
   previously broke at 520 / 600 / 760 / 860 / 900px, so at most widths some
   had collapsed to one column while others had not — the visible symptom of
   "the alignment is not done properly". */
.stats, .steps, .features, .formula { display: grid; gap: var(--s-4); }
.stats    { grid-template-columns: repeat(4, 1fr); }
.steps    { grid-template-columns: repeat(3, 1fr); }
.features { grid-template-columns: repeat(3, 1fr); }
.formula  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .stats, .formula { grid-template-columns: repeat(2, 1fr); }
  .steps, .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .stats, .steps, .features, .formula { grid-template-columns: 1fr; }
}

/* stats: the number is the only display-scale element in the group */
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: -0.025em; }
.stat .sub { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--up); margin-top: var(--s-1); }
.stat .lbl { color: var(--muted); margin-top: var(--s-2); font-size: var(--fs-base); }

/* steps */
.step { position: relative; overflow: hidden; }
.step .n { font-family: var(--font-mono); color: var(--accent); font-size: var(--fs-xs); letter-spacing: .2em; }
/* .step h2 exists because ticker_pages.py emits the card title as an h2;
   it must be pinned to the h3 step or the global 36px h2 applies. */
.step h2, .step h3 { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-xl); line-height: 1.35; letter-spacing: -.012em; }
.step p  { color: var(--text-soft); font-size: var(--fs-base); }
.step .icon { width: 40px; height: 40px; border-radius: var(--radius); background: var(--accent-soft); display: grid; place-items: center; margin-bottom: var(--s-4); color: var(--accent-3); }

/* features */
.feature .fi { color: var(--accent); margin-bottom: var(--s-3); }
.feature h3  { margin-bottom: var(--s-2); }
.feature p   { color: var(--muted); font-size: var(--fs-base); }

/* the 8-condition "formula" chips */
.cond .c { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent); letter-spacing: .15em; }
.cond .t { margin-top: var(--s-2); font-weight: 600; color: var(--text); font-size: var(--fs-base); }
.cond .d { margin-top: var(--s-1); color: var(--muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------- track / table -- */
/* overflow:hidden is CORRECT here and must stay: it clips the rounded corners.
   Horizontal scrolling for the ~1310px results table is already handled one
   level in, by .tr-scroll, which is overflow-x:auto. A 2026-08-17 audit briefly
   "fixed" a clipping bug here that did not exist -- the probe had used
   closest('.tr-table-wrap'), which skips PAST .tr-scroll and reads this
   element's overflow instead. The columns were always reachable. */
.tr-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.tr-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-4) var(--s-4); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.tr-toolbar .filter { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip {
  padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); border: 1px solid var(--line);
  background: transparent; color: var(--text-soft); font-size:var(--fs-sm); transition: all .2s;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-3); }
.tr-toolbar .count { margin-left: auto; font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--muted); }
/* Long tables scroll inside a bounded box with the header row FROZEN, so the column
   meanings stay visible however far you scroll. Solid header bg (the card is glass). */
.tr-scroll { max-height: min(72vh, 860px); overflow: auto; overscroll-behavior: contain; }
/* NO INNER VERTICAL SCROLLER ON A PHONE. `max-height:72vh` turned the track
   record into a ~585px box holding ~57,000px of rows: a scroll gesture over the
   table moved the TABLE, not the page, so the reader was stuck in a window that
   "just keeps going down" and could not get past it. On a small screen the
   table flows with the document instead and the page scrolls normally. The
   horizontal scroller stays -- the columns genuinely are wider than a phone --
   and `touch-action: pan-x` keeps a vertical swipe with the page while a
   sideways drag still pans the columns. */
@media (max-width: 900px) {
  .tr-scroll {
    max-height: none; overflow-y: visible; overflow-x: auto;
    overscroll-behavior-x: contain; touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }
}
.tr-scroll table.tr thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line-strong);
}
/* ticker search (dashboard positions) */
.pos-search {
  width: clamp(140px, 24vw, 230px); padding: var(--s-2) var(--s-3);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--text); font-family: var(--font-mono); font-size:var(--fs-sm); letter-spacing: .04em;
  transition: border-color .15s, background .15s;
}
.pos-search::placeholder { color: var(--faint); text-transform: none; letter-spacing: 0; }
.pos-search:focus { outline: none; border-color: var(--accent-line); background: var(--surface); }
table.tr { width: 100%; border-collapse: collapse; font-size:var(--fs-base); }
table.tr th, table.tr td { padding: var(--s-4) var(--s-4); text-align: left; }
table.tr thead th {
  font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); cursor: pointer; user-select: none; white-space: nowrap;
}
table.tr thead th:hover { color: var(--text); }
table.tr thead th .arrow { opacity: .4; font-size:var(--fs-xs); }
table.tr thead th.sorted .arrow { opacity: 1; color: var(--accent); }
table.tr tbody tr { border-bottom: 1px solid var(--line); transition: background .2s; }
table.tr tbody tr:hover { background: rgba(255,255,255,.025); }
table.tr tbody tr:last-child { border-bottom: 0; }
/* free-tier locked positions: blurred, inert teaser rows + an unlock CTA row */
table.tr tbody tr.locked { filter: blur(4.5px); opacity: .5; pointer-events: none; user-select: none; }
table.tr tbody tr.pos-unlock-row,
table.tr tbody tr.pos-unlock-row:hover { filter: none; opacity: 1; background: transparent; }
table.tr tbody tr.pos-unlock-row td { text-align: center; padding-top: 1.2rem; font-size:var(--fs-sm); color: var(--muted); }
table.tr tbody tr.pos-unlock-row b { color: var(--text-soft); }
.tk-cell { display: flex; align-items: center; gap: var(--s-3); }
.tk-cell .sym { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-body); letter-spacing: -.01em; }
.tk-cell .flag { font-size:var(--fs-xs); color: var(--muted); }
td.price { font-family: var(--font-mono); color: var(--text-soft); }
td.peak { font-family: var(--font-mono); color: var(--text); }
.gain-pill { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-weight: 600; padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); background: var(--up-soft); color: var(--up); white-space: nowrap; }
.gain-pill.big { background: var(--accent-soft); color: var(--accent-3); }
.gain-pill.huge { background: var(--flame); color: #1a0b02; }
.split-mark { color: var(--muted); font-size: .72em; cursor: help; }
.status-sold, .status-open { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--font-mono); font-weight: 600; font-size:var(--fs-sm); padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); white-space: nowrap; }
.status-sold { background: var(--up-soft); color: var(--up); }
.status-exp { background: rgba(136,147,168,.12); color: var(--muted); }
.status-stop { background: rgba(255,107,107,.12); color: #ff6b6b; }
.status-open { background: rgba(224, 164, 60, .12); color: var(--accent-3); }
.note-cell { color: var(--muted); font-size:var(--fs-base); max-width: 30ch; }
@media (max-width: 640px) {
  table.tr thead { display: none; }
  .sort-hint { display: none; } /* no headers on mobile → no sorting to explain */
  table.tr, table.tr tbody, table.tr tr, table.tr td { display: block; width: 100%; }
  table.tr tr { padding: var(--s-4) var(--s-4); }
  table.tr td { padding: var(--s-1) 0; }
  table.tr td.note-cell { max-width: none; }
  table.tr td::before { content: attr(data-l); font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-right: .6rem; }
  .tk-cell { padding-bottom: .4rem; }
}

/* featured win cards (landing) */
.wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .wins { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .wins { grid-template-columns: 1fr; } }
.win {
  position: relative; padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden; transition: border-color .2s var(--ease);
}
.win:hover { transform: none; border-color: var(--line-strong); }
.win::after { content: none; }          /* sliding gradient top-rule removed */
.win-top { display: flex; justify-content: space-between; align-items: flex-start; }
.win .sym { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); }
.win .date { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--faint); margin-top: var(--s-1); }
.win .big-gain { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: -0.03em; margin: var(--s-3) 0 var(--s-1); }
.win .arrow-row { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--fs-base); color: var(--text-soft); margin-top: var(--s-3); }
.win .arrow-row .a { color: var(--muted); }
.win .arrow-row .p { color: var(--up); }
.win .blurb { color: var(--muted); font-size: var(--fs-base); margin-top: var(--s-3); }

/* --------------------------------------------------------------- pricing -- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); align-items: stretch; }
.pricing.two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
@media (max-width: 900px) { .pricing, .pricing.two { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }
/* Same card doctrine as .step / .feature / .cond: one padding, one radius,
   flat fill, border-only state. */
.plan {
  display: flex; flex-direction: column; padding: var(--pad-card); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); position: relative;
  transition: border-color .2s var(--ease);
}
.plan:hover { transform: none; border-color: var(--line-strong); }
/* The featured plan is marked by its border and badge alone — a tinted
   gradient panel next to two flat ones is the "some boxes look different for
   no structural reason" problem. */
.plan.featured { border-color: var(--accent); background: var(--surface); box-shadow: none; }
.plan .badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #171004; font-size: var(--fs-xs); font-weight: 700; padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); font-family: var(--font-mono); letter-spacing: .08em; }
.plan h3 { font-size: var(--fs-xl); }
/* The headline is a word now ("Free"), not a two-character price, so the row
   is allowed to wrap and the figure is sized to fit rather than overflow. */
.plan .price { margin: var(--s-4) 0 var(--s-1); display: flex; align-items: baseline; gap: var(--s-1); flex-wrap: wrap; }
.plan .price .amt { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2xl); line-height: 1.05; letter-spacing: -0.03em; }
.plan .price .per { color: var(--muted); font-size: var(--fs-base); }
.plan .sub { color: var(--muted); font-size: var(--fs-base); min-height: 1.4em; }
.plan ul { margin: var(--s-5) 0; display: grid; gap: var(--s-3); }
.plan li { display: flex; gap: var(--s-2); color: var(--text-soft); font-size: var(--fs-base); }
.plan li svg { flex: none; color: var(--accent); margin-top: .15rem; }
.plan li.off { color: var(--faint); }
.plan li.off svg { color: var(--faint); }
.plan .btn { margin-top: auto; }
.bill-toggle { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--radius-pill); margin: 0 auto 2.4rem; }
.bill-toggle button { border: 0; background: none; color: var(--text-soft); padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); font-size:var(--fs-base); transition: all .2s; }
.bill-toggle button.active { background: var(--accent-soft); color: var(--accent-3); }
.bill-toggle .save { font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--up); }

/* ----------------------------------------------------------------- faq ---- */
.faq { max-width: 800px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) var(--s-1); cursor: pointer; list-style: none; font-family: var(--font-display); font-size:var(--fs-md); font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: .3s; color: var(--accent); }
.qa[open] summary .pm { transform: rotate(45deg); background: var(--accent-soft); border-color: var(--accent); }
.qa .ans { padding: 0 var(--s-1) var(--s-5); color: var(--text-soft); max-width: 68ch; }

/* Testimonial styles removed on purpose: this site earns trust with checkable
   receipts, never quotes/stars — don't resurrect them. */

/* ------------------------------------------------------------- cta band --- */
.cta-band { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(2rem, 4vw, 3.25rem); text-align: center; overflow: hidden; background: var(--surface); }
.cta-band::before { content: none; }
.cta-band > * { position: relative; }
.cta-band h2 { font-size: var(--text-h2); }
.cta-band p { color: var(--text-soft); font-size: var(--text-lead); margin: 1.1rem auto 2rem; max-width: 50ch; }
.cta-band .hero-cta { justify-content: center; }

/* ------------------------------------------------------------- disclaimer - */
.disclaimer { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); padding: var(--s-5) var(--s-5); }
.disclaimer p { color: var(--muted); font-size:var(--fs-sm); line-height: 1.7; }
.disclaimer b { color: var(--text-soft); }

/* ----------------------------------------------------------------- footer - */
.footer { border-top: 1px solid var(--line); padding-block: 3.5rem 2.5rem; margin-top: var(--space-section); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-6); }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); } }
.footer h2, .footer h3, .footer h4 { font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; font-weight: 500; }
.footer a { color: var(--text-soft); font-size:var(--fs-base); display: block; padding: var(--s-1) 0; transition: color .2s; }
.footer a:hover { color: var(--accent); }
.footer .brand { margin-bottom: 1rem; }
.footer .tag { color: var(--muted); font-size:var(--fs-base); max-width: 34ch; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--faint); font-size:var(--fs-sm); }

/* --------------------------------------------------------------- modal ---- */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(4,5,8,.74); backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--s-4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal { width: min(440px, calc(100vw - 2.4rem)); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: var(--s-6); box-shadow: var(--shadow); transform: translateY(14px) scale(.98); transition: transform .3s var(--ease); }
.modal-overlay.open .modal { transform: none; }
.modal h3 { font-size:var(--fs-xl); }
.modal p { color: var(--text-soft); margin-top: .6rem; font-size:var(--fs-base); }
.modal form { margin-top: 1.4rem; display: grid; gap: var(--s-3); }
.modal input { width: 100%; padding: var(--s-4) var(--s-4); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font-size:var(--fs-body); }
.modal input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.modal .close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; color: var(--muted); font-size:var(--fs-xl); line-height: 1; }
.modal-wrap { position: relative; }
.modal .ok { display: none; text-align: center; }
.modal.done .ok { display: block; }
.modal.done form, .modal.done > p, .modal.done > h3 { display: none; }
.modal .ok .check { width: 54px; height: 54px; margin: 0 auto 1rem; border-radius: 50%; background: var(--up-soft); color: var(--up); display: grid; place-items: center; }
.fineprint { color: var(--faint); font-size:var(--fs-sm); text-align: center; margin-top: .4rem; }

/* ------------------------------------------------------------- reveal ----- */
[data-reveal] { opacity: 0; transition: opacity .9s var(--ease); }  /* HEAT: quiet dissolve; distinct moves live on [data-cam] */
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-delay="1"] { transition-delay: .08s; }
[data-reveal][data-delay="2"] { transition-delay: .16s; }
[data-reveal][data-delay="3"] { transition-delay: .24s; }

/* --------------------------------------------------- performance page ---- */
.money-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,4vw,3.5rem); align-items: center; }
@media (max-width: 900px) { .money-hero { grid-template-columns: 1fr; } }
.money-num { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-4xl); line-height: 1; letter-spacing: -.03em; }
.money-sub { display: flex; gap: var(--s-2); align-items: baseline; margin-top: .8rem; color: var(--text-soft); font-size:var(--fs-body); }
.money-sub .from { color: var(--muted); }
.money-sub .delta { color: var(--up); font-family: var(--font-display); font-weight: 600; }
.dual-stat { display: flex; align-items: stretch; gap: var(--s-5); margin-top: 1.5rem; }
.dual-stat > span { display: flex; flex-direction: column; gap: var(--s-1); }
.dual-stat i { font-style: normal; font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dual-stat b { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-2xl); color: var(--text); }
.dual-stat b.dgreen { color: var(--up); text-shadow: var(--up-glow); }
.dual-stat .dsep { width: 1px; background: var(--line); align-self: stretch; }
@media (max-width: 640px) { .dual-stat { gap: var(--s-4); } .dual-stat .dsep { display: none; } }

.perf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 640px) { .perf-stats { grid-template-columns: 1fr 1fr; } }
.perf-stats .stat .num { font-size:var(--fs-2xl); }
.perf-stats .stat .num.up { color: var(--up); }

/* equity chart card */
.chart-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(1.2rem, 2.5vw, 2rem); }
.chart-head { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: flex-end; margin-bottom: 1.2rem; }
.chart-head h3 { font-size: var(--text-h3); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size:var(--fs-base); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-soft); }
.chart-legend .sw { width: 22px; height: 3px; border-radius:var(--radius-sm); }
.chart-legend .sw.port { background: var(--flame); }
.chart-legend .sw.sp { background: var(--muted); }
.chart-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.seg { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg-2); }
.seg button { border: 0; background: none; color: var(--text-soft); padding: var(--s-2) var(--s-4); border-radius: var(--radius-pill); font-size:var(--fs-base); font-weight: 500; transition: all .2s; white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent-soft); color: var(--accent-3); }

/* Product switch: same control as .seg, tighter, so it reads as a state
   toggle rather than navigation. It is NOT in the nav: it sits on the few
   things it actually changes. That list is now just the TRACK-RECORD table --
   the member dashboard's two copies (the alert board and the positions table)
   were removed on 2026-08-14 when both books started rendering together, since
   a switch that changes nothing is worse than no switch. It must stay visible
   at every width wherever it does remain: a display:none here would strand
   mobile users on whichever book happened to load. */
.prod-seg { padding: var(--s-1); }
.prod-seg button { padding: var(--s-1) var(--s-3); font-size:var(--fs-sm); }
.seg-sm button { padding: var(--s-1) var(--s-2); font-size:var(--fs-xs); }

/* ── BOOK MARKERS ──────────────────────────────────────────────────────────
   The member dashboard shows BOTH books at once (the product switch used to
   hide one of them). These are the one visual vocabulary that says which book
   a thing belongs to, and the SAME two colours appear in three places: the
   panel headings on the alert board, the two curves in the equity chart, and
   the Book column of the positions table.

   THE COLOURS ARE HARDCODED ON PURPOSE. #2ee08f and #4fc3d9 are the exact
   stroke colours drawChart() paints the two curves with, and a badge that
   drifts from its own line is worse than no badge. They are NOT var(--up) /
   var(--accent): --up means "this position is winning", which would make every
   large-cap row read as a loss. If drawChart's strokes change, change these. */
.book-badge {
  display: inline-flex; align-items: center; gap: var(--s-1);
  font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .09em;
  text-transform: uppercase; font-weight: 600; white-space: nowrap;
  padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.book-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.book-badge.sc { background: rgba(46,224,143,.13); color: #2ee08f; border-color: rgba(46,224,143,.28); }
.book-badge.sc::before { background: #2ee08f; }
.book-badge.lc { background: rgba(79,195,217,.13); color: #4fc3d9; border-color: rgba(79,195,217,.30); }
.book-badge.lc::before { background: #4fc3d9; }

/* The legend: the badges on their own, as a key rather than a label on a row. */
.book-legend { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* The same identity on a panel heading, where the words "Small Cap" are already
   right there and a badge repeating them would just be noise. */
.book-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: .5rem; vertical-align: middle; flex: none;
}
.book-dot.sc { background: #2ee08f; box-shadow: 0 0 0 3px rgba(46,224,143,.16); }
.book-dot.lc { background: #4fc3d9; box-shadow: 0 0 0 3px rgba(79,195,217,.16); }

/* The Book cell is a label, not data: keep it narrow and never let it wrap.
   DESKTOP ONLY, deliberately. Under 760px .tr collapses to stacked cards where
   `table.tr td` is display:block/width:100%, and this selector outranks it
   (0,2,1 vs 0,1,2) -- so an unscoped width:1% squeezed the whole Book row into a
   3px sliver with the badge spilling out of it. Shrink-to-fit is a table-layout
   idea and has no meaning once the cells stop being cells. */
@media (min-width: 641px) {
  .tr td[data-l="Book"] { white-space: nowrap; width: 1%; }
}

/* Launch pricing: the old price struck through, $0 beside it. The strike is a
   real <span>, not a pseudo-element, so screen readers still read the price it
   replaces rather than announcing a bare $0. */
/* BUG: this was .42em. .was is a SIBLING of .amt inside .price, not a child of
   it, so the em resolved against .price's inherited 16px and the struck-through
   original price rendered at 6.7px -- illegible, on the one element whose whole
   job is to show what the reader is saving. Sized from the scale instead. */
.plan .price .was {
  font-size: var(--fs-md); font-weight: 600; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: var(--down); margin-right: var(--s-2);
}
.plan .launch-note {
  display: inline-block; margin: .1rem 0 .6rem; padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-pill); background: var(--accent-soft);
  color: var(--accent-3); font-size:var(--fs-xs); font-weight: 600;
  letter-spacing: .02em;
}

/* Hero trust row: names which book the figures belong to, so the numbers
   can never be read as Large Cap's. */
.hero-trust .ht-note { color: var(--muted); font-size:var(--fs-sm); opacity: .85; }

/* Log in / join toggle on the auth card. Reuses .seg for the pill look. */
.auth-mode { display: flex; width: 100%; margin: 0 0 1rem; }
.auth-mode button { flex: 1; font-size:var(--fs-sm); padding: var(--s-2) var(--s-2); }

/* Sign-up product chooser. Radios styled as cards: the whole row is the hit
   target, and :has() lifts the selected card so the choice is obvious without
   a JS class. Falls back to the plain radio if :has() is unsupported. */
.plan-pick { border: 0; padding: 0; margin: .2rem 0 .9rem; }
.plan-pick legend { font-size:var(--fs-sm); color: var(--muted); padding: 0 0 var(--s-2); }
.plan-opt {
  display: grid; grid-template-columns: auto 1fr; column-gap: .6rem;
  align-items: start; padding: var(--s-2) var(--s-3); margin-bottom: .4rem;
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.plan-opt:hover { border-color: var(--accent); }
.plan-opt input { margin-top: .2rem; grid-row: span 2; }
.plan-opt__b { font-weight: 600; font-size:var(--fs-base); }
.plan-opt__d { grid-column: 2; color: var(--muted); font-size:var(--fs-sm); line-height: 1.4; }
/* Selected state is a JS class. NO :has() here, deliberately.
   :has() paints the first render correctly but never invalidates when a radio
   changes -- and because :has() takes the specificity of its argument, the
   stale rule (0,4,2) outranked .plan-opt.is-picked (0,2,0). The result was
   inverted: click "Large Cap only" and "Both" stayed lit. Measured, not
   guessed. Without JS the native radio dot still shows the choice, which is
   the honest fallback. */
.plan-opt.is-picked {
  border-color: var(--accent); background: var(--accent-soft);
}
.plan-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-pick__note { color: var(--muted); font-size:var(--fs-xs); margin: .35rem 0 0; }

/* Method page: the two jump links under the hero, and the marker that opens
   each product's section so the page reads as two equal halves rather than
   one method with an appendix. */
.method-jump { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: 1.4rem; }
.method-mark { border-top: 1px solid var(--line); padding-top: 1.6rem; margin: 2.4rem 0 .4rem; }
.method-mark h2 { margin: .3rem 0 .5rem; }
.method-mark p { color: var(--muted); max-width: 62ch; margin: 0; }

/* Alert-board header: the row title on the left, the product switch on the
   right. The switch sits here because this row is where the two books are
   explained side by side. */
.dash-boardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin: 0 0 1rem;
}
.dash-boardhead__t { margin: 0; font-size:var(--fs-body); letter-spacing: .01em; }

/* Sub-headings inside the Small Cap card, where Coiled and Speculative now
   live together instead of owning a card each. */
.alx-h {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 1.35rem 0 .25rem; font-size:var(--fs-md);
}
.alx-h:first-of-type { margin-top: .35rem; }
.alx-sub { font-size:var(--fs-sm); color: var(--muted); margin: 0 0 .7rem; line-height: 1.45; }

/* Large Cap card: states that there is no book yet, in place of a table. */
.alx-empty { padding: var(--s-1) 0 var(--s-1); }
.alx-empty p { font-size:var(--fs-sm); line-height: 1.6; margin: 0 0 .8rem; color: var(--text-soft); }
.alx-empty p:last-child { margin-bottom: 0; }

/* Positions header: title, product switch and search on one line. */
.dash-card-head--pos { flex-wrap: wrap; gap: var(--s-3); }
.pos-head-tools { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.pos-prod { color: var(--muted); font-weight: 500; }
.pos-prod b { color: var(--accent-3); }
@media (max-width: 640px) {
  .dash-card-head--pos, .pos-head-tools { width: 100%; }
  .pos-head-tools .pos-search { flex: 1 1 100%; }
}

/* Large Cap has no live data yet: any view scoped to it says so plainly
   rather than rendering an empty widget that looks broken. */
.lc-empty { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1rem; color: var(--muted); }
.lc-empty b { color: var(--text-soft); display: block; margin-bottom: .5rem; font-size:var(--fs-body); }
#range-seg button { font-family: var(--font-mono); }
.peak-note { display: flex; gap: var(--s-2); align-items: baseline; padding: var(--s-3) var(--s-4); margin-bottom: 1rem; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius:var(--radius); color: var(--text-soft); font-size:var(--fs-base); }
.peak-note b { color: var(--accent-3); font-weight: 600; }
/* compact chart legend (replaces the bulky descriptive paragraph) */
.peak-legend { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); padding: var(--s-3) var(--s-4); margin: 0 0 1rem; border: 1px solid var(--line); border-radius:var(--radius); background: rgba(255,255,255,.02); font-size:var(--fs-sm); color: var(--muted); }
.peak-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.peak-legend b { color: var(--text-soft); font-weight: 600; }
.peak-legend .lg-sw { width: 18px; height: 3px; border-radius:var(--radius-sm); flex: none; }
.peak-legend .lg-sw.green { background: #2ee08f; }
/* Large Cap: dashed, matching the #4fc3d9 stroke drawChart uses. Dashed
   because the line is not a record yet -- it is a placeholder for one. */
/* Solid, matching the stroke drawChart now paints. It was dashed while the Large
   Cap line was a flat placeholder; the line is real data now, and a dashed key
   next to a solid line reads as "this one is hypothetical". */
.peak-legend .lg-sw.lc { background: #4fc3d9; }
.peak-legend .lg-sw.sp { background: var(--muted); height: 0; border-top: 2px dashed var(--muted); }
.peak-legend .lg-base { margin-left: auto; color: var(--text-soft); }
@media (max-width: 640px) { .peak-legend .lg-base { margin-left: 0; flex-basis: 100%; padding-top: .4rem; border-top: 1px solid var(--line); } }
/* dashboard legend sits in a narrower column than the performance page — stack it
   vertically, one series per row, with the dollar values aligned in a right column. */
#d-chart-legend { flex-direction: column; align-items: stretch; gap: var(--s-2); line-height: 1.4; }
#d-chart-legend li { display: flex; align-items: baseline; gap: var(--s-2); width: 100%; }
#d-chart-legend li .lg-sw { align-self: center; }
#d-chart-legend li b.mono { margin-left: auto; white-space: nowrap; color: var(--text); }
#d-chart-legend .lg-base { margin-left: 0; display: block; padding-top: .55rem; margin-top: .1rem; border-top: 1px solid var(--line); color: var(--muted); font-size:var(--fs-xs); }
#equity-chart { width: 100%; height: auto; display: block; }
.ec-grid { stroke: var(--line); stroke-width: 1; }
.ec-ylbl { fill: var(--faint); font-family: var(--font-mono); font-size:var(--fs-sm); text-anchor: end; }
.ec-xlbl { fill: var(--faint); font-family: var(--font-mono); font-size:var(--fs-sm); text-anchor: middle; }
.ec-port { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ec-sp { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 5; opacity: .8; }
.ec-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.ec-dot-sp { fill: var(--muted); stroke: var(--bg); stroke-width: 2; }
.ec-endlbl { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-body); }
.ec-endlbl-port { fill: var(--accent-3); }
.ec-endlbl-sp { fill: var(--muted); font-size:var(--fs-base); font-weight: 500; }

/* draw-in animation for the portfolio line */
.ec-port { stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: draw 2.2s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.status { font-family: var(--font-mono); font-size:var(--fs-sm); }
.status.st-real { color: var(--up); }
/* STILL RUNNING. Gold, not grey: this shared --muted with st-exp, so the moment
   open positions joined the public record an OPEN row was the same colour as an
   expired one. Same gold as .status-open on the member dashboard -- one book, one
   vocabulary, whichever surface a reader is on. */
.status.st-open { color: var(--accent-3); }
/* The live group, tinted just enough to scan as a block without turning the record
   into two tables. Deliberately faint: these rows are not the record, they are what
   is happening to it right now. */
.tr tr.row-open { background: rgba(224, 164, 60, .05); }
.tr tr.row-open td { border-bottom-color: rgba(224, 164, 60, .18); }
/* Losing outcomes read as losses at a glance — a stop is red, an expired window is
   neutral grey. The record table shows every closed trade, so these carry real weight. */
.status.st-stop { color: #ff6b6b; }
.status.st-exp { color: var(--muted); }
.tr td .up { color: var(--up); }
.tr td .down { color: #ff6b6b; }
.tr td small { opacity: .75; font-size: .8em; }

.method { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (max-width: 640px) { .method { grid-template-columns: 1fr; } }
.method .m { padding: var(--pad-card); border: 1px solid var(--line); border-radius:var(--radius); background: var(--surface); }
.method .m h3, .method .m h4 { font-family: var(--font-display); font-size:var(--fs-body); margin-bottom: .4rem; display: flex; gap: var(--s-2); align-items: center; }
.method .m h3 span, .method .m h4 span { color: var(--accent); font-family: var(--font-mono); font-size:var(--fs-sm); }
.method .m p { color: var(--muted); font-size:var(--fs-base); }

/* page hero (sub pages) */
.page-hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2rem, 4vw, 3.5rem); }
/* Interior page titles use the h1 step (32→46px). The old clamp topped out at
   4.4rem/70px, which made an interior page's title larger than the homepage
   hero's — the same tag meaning two different things depending on the page. */
.page-hero h1 { font-size: var(--fs-3xl); }
.page-hero p { margin-top: 1.2rem; }
.breadcrumb { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--muted); margin-bottom: 1.2rem; }
.breadcrumb a:hover { color: var(--accent); }

/* ============================================================================
   GLASSMORPHISM PASS — unify floating cards as true glass (translucent fill +
   backdrop blur + 1px inner edge highlight). Data tiles (.stat) stay solid
   navy panels for an institutional, dashboard feel.
   ========================================================================== */
/* FLAT SURFACE PASS (was the glassmorphism pass).
   Every panel is one solid colour plus the hairline it already has. The old
   rule stacked a translucent two-stop fill, an inset edge highlight and a 50px
   drop shadow on eleven different components — three depth cues on a surface
   that is not actually floating. */
.step, .feature, .win, .plan, .cond, .quote, .trust-card,
.chart-card, .cta-band, .method .m, .tr-table-wrap, .scanner,
.disclaimer, .qa-wrap {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.plan.featured { background: var(--surface); box-shadow: none; }
.modal { background: var(--surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.feature { background: var(--surface); }

/* trust pillar cards (replaces fabricated testimonials) */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-card { padding: var(--pad-card); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s var(--ease); }
.trust-card:hover { transform: none; border-color: var(--line-strong); }
.trust-card .ti { width: 40px; height: 40px; border-radius: var(--radius); background: var(--accent-soft); display: grid; place-items: center; color: var(--accent-3); margin-bottom: var(--s-4); }
.trust-card h3 { margin-bottom: var(--s-2); }
.trust-card p { color: var(--text-soft); font-size: var(--fs-base); }
.trust-card .verify { margin-top: 1rem; font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--accent); display: inline-flex; align-items: center; gap: var(--s-2); }

/* provenance strip */
.provenance { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3) var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-pill); margin-inline: auto; max-width: max-content; }
.provenance span { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-soft); font-size:var(--fs-base); }
.provenance svg { color: var(--accent); flex: none; }
@media (max-width: 640px) { .provenance { border-radius: var(--radius); } }

/* legal / long-form pages */
.legal { max-width: 800px; margin-inline: auto; }
.legal h2 { font-size:var(--fs-xl); margin: 2.4rem 0 .8rem; scroll-margin-top: 90px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--text-soft); font-size:var(--fs-base); line-height: 1.75; margin-bottom: .9rem; }
.legal ul { padding-left: 1.2rem; list-style: disc; }
.legal .updated { color: var(--faint); font-family: var(--font-mono); font-size:var(--fs-sm); }

/* 404 */
.notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.notfound .code { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-4xl); line-height: 1; }

/* ============================================================================
   DELIGHT LAYER — earned dopamine. Green-glowing gains, satisfying count-ups,
   spotlight hover, a tasteful confetti burst on signup. Tasteful, not casino.
   ========================================================================== */

/* gains glow green — the reward signal */
.gain-pill { box-shadow: var(--up-glow); }
.gain-pill.big, .gain-pill.huge { box-shadow: none; }
.win .big-gain, .money-num, .stat .num.up, .money-sub .delta { text-shadow: 0 0 30px rgba(46, 224, 143, .18); }
.tape-item .gain { text-shadow: var(--up-glow); }

/* count-ups flash bright on landing, then settle */
@keyframes countLand { 0% { filter: brightness(1.9); } 100% { filter: brightness(1); } }
.count-land { animation: countLand .7s var(--ease); }

/* upward pulse on the live win chip */
.live-win { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill); border: 1px solid var(--up-line); background: var(--up-soft); color: var(--up); font-family: var(--font-mono); font-size:var(--fs-sm); font-weight: 500; }
.live-win .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: var(--up-glow); animation: pulse 1.6s var(--ease) infinite; }
.live-win .arw { animation: floatUp 1.8s var(--ease) infinite; }
@keyframes floatUp { 0%,100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(-3px); opacity: 1; } }

/* The cursor-following glow border and its companion wash are removed. Two
   mouse-tracked radial gradients per card is exactly the kind of effect that
   signals "template" rather than "considered" — and it fires on ~30 cards.
   Hover state is the border, on every card, everywhere. */
.spotlight { position: relative; }
.spotlight::before, .spotlight::after { content: none; }
.win.spotlight:hover, .trust-card.spotlight:hover { border-color: var(--line-strong); }

/* No shine sweep across the primary button. */
.btn-primary { overflow: visible; }
.btn-primary::after { content: none; }

/* confetti canvas overlay */
#confetti { position: fixed; inset: 0; z-index: 250; pointer-events: none; }

/* waitlist success — celebratory bounce-in */
@keyframes popIn { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.modal.done .ok .check { animation: popIn .55s var(--ease) both; box-shadow: var(--up-glow); }
.modal.done .ok h3 { animation: popIn .5s var(--ease) .1s both; }

/* No shimmer sweep across the headline — the accent word is a solid colour now
   and a permanently animating headline is restless rather than elegant. */
.hero h1 .gradient-text, .page-hero h1 .gradient-text, .money-num { animation: none; }

/* rotating live-win chip — fades as it cycles real wins */
.live-win b { transition: opacity .35s var(--ease); }
.live-win.swap b { opacity: 0; }

/* magnetic buttons get a smooth spring back */
.btn-lg { transition: transform .3s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s; }

/* inline form error (no window.alert, ever) */
.form-error { color: var(--down); font-size:var(--fs-sm); margin-top: -.2rem; min-height: 1.1em; }

@media (prefers-reduced-motion: reduce) {
  .live-win .dot, .live-win .arw, .btn-primary::after, .count-land,
  .hero h1 .gradient-text, .page-hero h1 .gradient-text, .money-num { animation: none; }
  #confetti { display: none; }
}

/* ============================================================================
   ACCOUNTS — login + member dashboard (customer interface)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.btn-text { background: none; border: 0; color: var(--muted); font-size:var(--fs-base); padding: var(--s-3); width: 100%; margin-top: .4rem; transition: color .2s; }
.btn-text:hover { color: var(--text); }

/* tier chip */
.tier-chip { font-family: var(--font-mono); font-size:var(--fs-xs); font-weight: 600; letter-spacing: .08em; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); vertical-align: middle; margin-left: .3rem; }
.tier-chip.free { background: rgba(173,190,230,.12); color: var(--text-soft); }
.tier-chip.pro { background: var(--flame); color: #1a1206; }

/* login */
.auth-wrap { min-height: 72vh; display: grid; place-items: center; padding-block: clamp(2rem,5vw,4rem); }
.auth-card { width: min(440px, 100%); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--pad-card); text-align: center; }
.auth-spark { width: 56px; height: 56px; margin: 0 auto var(--s-4); border-radius: var(--radius); background: var(--accent-soft); display: grid; place-items: center; }
.auth-card h1 { font-size: var(--fs-2xl); }
.auth-sub { color: var(--text-soft); margin-top: .6rem; }
.auth-card form { margin-top: 1.6rem; display: grid; gap: var(--s-3); text-align: left; }
.auth-card input { width: 100%; padding: var(--s-4) var(--s-4); border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font-size:var(--fs-body); }
.auth-card input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-fine { color: var(--faint); font-size:var(--fs-sm); margin-top: 1.2rem; }
.auth-fine a { color: var(--muted); } .auth-fine a:hover { color: var(--accent); }
.auth-success { margin-top: 1.6rem; text-align: center; animation: fade-in .4s ease; }
.auth-success-title { font-size:var(--fs-xl); font-weight: 600; color: var(--up, #2ee08f); margin-bottom: .6rem; }
.auth-success-body { color: var(--text-soft); margin-bottom: .8rem; }
.auth-success-body strong { color: var(--text); }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* dashboard layout */
.dash-head { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: flex-end; margin-bottom: 1.4rem; }
.dash-hi { color: var(--muted); font-size:var(--fs-base); }
.dash-head h1 { font-size:var(--fs-3xl); margin-top: .2rem; }
.dash-email { color: var(--faint); font-size:var(--fs-sm); margin-top: .3rem; }
.dash-head-right { display: flex; align-items: center; gap: var(--s-4); }
.dash-head-right .tier-chip { font-size:var(--fs-xs); padding: var(--s-1) var(--s-3); }

.dash-live { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-4); border: 1px solid var(--up-line); border-radius: var(--radius); font-size:var(--fs-base); color: var(--text-soft); margin-bottom: 1.6rem; }
.dash-live.idle { border-color: var(--line); }
.ls-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--up); box-shadow: var(--up-glow); animation: pulse 1.6s var(--ease) infinite; flex: none; }
.dash-live.idle .ls-dot { background: var(--faint); box-shadow: none; animation: none; }

.dash-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: var(--s-5); align-items: stretch; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
/* explainer card above the three alert columns */
.dash-explainer { padding: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: 1.4rem; }
.dash-explainer .dx-head h2 { font-size:var(--fs-xl); margin-bottom: .5rem; }
.dash-explainer .dx-head p { color: var(--muted); font-size:var(--fs-base); line-height: 1.6; max-width: 78ch; }
.dash-explainer .dx-head b { color: var(--text-soft); }
.sig-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin: 1.3rem 0; padding: 0; }
@media (max-width: 1040px) { .sig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sig-grid { grid-template-columns: 1fr; } }
.sig-grid li { display: flex; gap: var(--s-3); align-items: flex-start; }
.sig-n { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size:var(--fs-xs); font-weight: 700; color: var(--accent-3, #e0a43c); background: var(--accent-soft); border: 1px solid var(--accent-line); margin-top: .1rem; }
.sig-grid li div { display: flex; flex-direction: column; gap: var(--s-1); }
.sig-grid li b { font-size:var(--fs-sm); color: var(--text); }
.sig-grid li span { font-size:var(--fs-sm); color: var(--muted); line-height: 1.45; }
.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: 1.1rem; }
@media (max-width: 640px) { .cs-split { grid-template-columns: 1fr; } }
.cs-card { padding: var(--pad-card); border-radius:var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.cs-card.coiled { border-color: rgba(224,164,60,.35); background: rgba(224,164,60,.05); }
.cs-card.spec { border-color: rgba(106,166,255,.3); background: rgba(106,166,255,.05); }
.cs-card h3 { font-size:var(--fs-md); display: flex; align-items: center; gap: var(--s-2); margin-bottom: .4rem; }
.cs-card p { font-size:var(--fs-sm); color: var(--text-soft); line-height: 1.55; }
.cs-card b { color: var(--text); }
.dx-foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size:var(--fs-sm); color: var(--muted); }
.dx-foot b { color: var(--text-soft); }
/* top row: three equal-height columns (coiled · speculative · account) */
.dash-top3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-5); align-items: stretch; }
@media (max-width: 1040px) { .dash-top3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .dash-top3 { grid-template-columns: 1fr; } }
.dash-col-sub { font-size:var(--fs-sm); color: var(--muted); margin: -.5rem 0 1.1rem; line-height: 1.45; }
.al-dot { display: inline-block; width: .56rem; height: .56rem; border-radius: 50%; vertical-align: middle; margin-right: .15rem; }
.al-dot.coiled { background: var(--accent, #e0a43c); box-shadow: none; }
.al-dot.spec { background: #6aa6ff; box-shadow: none; }
.al-why { display: block; font-size:var(--fs-sm); color: var(--text-soft); margin-top: .25rem; }
.al-when { display: block; font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--muted); margin-top: .2rem; }
.al-freshness { font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .02em; margin: -.15rem 0 .6rem; opacity: .85; }
.al-stamps { display: block; }
.al-stamps .al-when { margin-top: .15rem; }
.al-expand { display: block; width: 100%; margin-top: .7rem; padding: var(--s-2); background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius:var(--radius); color: var(--accent-3, #e0a43c); font-family: var(--font-mono); font-size:var(--fs-xs); font-weight: 600; letter-spacing: .03em; cursor: pointer; transition: background .15s, border-color .15s; }
.al-expand:hover { background: var(--accent-soft); border-color: var(--accent-line); }
.al-quality { font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); margin-left: .45rem; }
.al-quality.prime { background: rgba(224,164,60,.16); color: var(--accent-3, #e0a43c); }
.al-quality.strong { background: rgba(106,166,255,.14); color: #6aa6ff; }
.al-quality.near { background: rgba(46,224,143,.14); color: var(--up, #2ee08f); }
.al-quality.illiq { background: rgba(255,107,107,.14); color: #ff6b6b; }
.al-quality.base { background: rgba(255,255,255,.06); color: var(--muted); }
.al-quality.held { background: rgba(148,163,184,.18); color: #cbd5e1; }
.al-quality.ev, .ev-mark { background: rgba(168,120,255,.16); color: #b794ff; font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); margin-left: .45rem; white-space: nowrap; }
/* status-tag legend (dashboard explainer + positions note) */
.tag-key { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.tag-key h3 { font-size:var(--fs-md); margin: 0 0 .5rem; }
.tag-key-lead { color: var(--text-soft); margin: 0 0 .7rem; }
.tag-key-plan { background: rgba(224,164,60,.10); border: 1px solid rgba(224,164,60,.28); border-radius:var(--radius); padding: var(--s-3) var(--s-4); margin: 0 0 1rem; font-size:var(--fs-base); color: var(--text); }
.tag-key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tag-key-list li { display: flex; align-items: flex-start; gap: var(--s-3); font-size:var(--fs-base); color: var(--text-soft); }
.tag-key-list li > span:first-child { flex: 0 0 auto; margin-top: .12rem; white-space: nowrap; }
.tag-key-list li > span:last-child { flex: 1; }
.tag-key-odds { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px dashed var(--line); font-size:var(--fs-base); color: var(--text-soft); line-height: 1.6; }
.tag-key-odds .al-odds { margin-right: .35rem; }
.pos-tag-note { font-size:var(--fs-sm); color: var(--muted); margin: -.3rem 0 .9rem; line-height: 1.9; }
.pos-tag-note .pos-setup { margin: 0 .12rem; }
/* alert-column sort control */
.alert-sort { display: flex; align-items: center; gap: var(--s-2); margin: 1.4rem 0 .7rem; flex-wrap: wrap; }
.alert-sort .as-label { font-size:var(--fs-sm); color: var(--muted); margin-right: .2rem; }
.as-btn { font-family: var(--font-mono); font-size:var(--fs-sm); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text-soft); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.as-btn:hover { border-color: var(--accent, #e0a43c); color: var(--text); }
.as-btn.active { background: rgba(224,164,60,.16); border-color: var(--accent, #e0a43c); color: var(--accent, #e0a43c); font-weight: 700; }
.as-dir { font-size:var(--fs-sm); color: var(--muted); user-select: none; margin-left: .1rem; }
.al-locked-note { font-size:var(--fs-sm); color: var(--muted); margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.al-locked-note b { color: var(--text-soft); }
.al-unlock-link { color: var(--accent-3, #e0a43c); cursor: pointer; text-decoration: underline; font-weight: 600; }
/* Member dashboard runs wider than the marketing pages so the portfolio chart +
   table get room to breathe (left column ≈ the track-record table width). */
/* The dashboard shares the site container. It was min(100% - 2.4rem, 1460px),
   i.e. 1226px at left 19 while the nav above it was 1120px at left 72: the two
   most prominent horizontal edges on the page disagreeing by 53px. */
.dash.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); }
#d-equity-chart { max-height: 340px; }
.dash-main, .dash-side { display: grid; gap: var(--s-5); }
.dash-card { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--pad-card); }
.dash-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.1rem; }
.dash-muted { color: var(--muted); font-size:var(--fs-base); }
a.dash-muted:hover { color: var(--accent); }

/* alert rows */
.alert-row { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.alert-row:last-child { border-bottom: 0; }
.al-left { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
/* rank + explosion-odds + the four numbers + plain-English why bullets */
.al-rank { font-family: var(--font-mono); font-weight: 700; font-size:var(--fs-sm); color: var(--muted); margin-right: .45rem; }
.al-odds { font-family: var(--font-mono); font-size:var(--fs-xs); font-weight: 700; letter-spacing: .04em; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); margin-left: .5rem; }
.al-odds.hi { background: rgba(74,222,128,.16); color: #4ade80; }
.al-odds.mid { background: rgba(224,164,60,.16); color: var(--accent, #e0a43c); }
.al-odds.lo { background: rgba(136,147,168,.14); color: var(--muted); }
.odds-trend { font-family: var(--font-mono); font-size:var(--fs-xs); font-weight: 700; letter-spacing: .03em; margin-left: .3rem; white-space: nowrap; }
.odds-trend.down { color: #f87171; }
.odds-trend.up { color: #4ade80; }
.odds-trend.flat { color: var(--muted); }
.al-nums { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-family: var(--font-mono); font-size:var(--fs-xs); color: var(--text-soft); margin: .1rem 0 .05rem; }
.al-nums b { color: var(--text); font-weight: 700; }
.al-nums b.up { color: #4ade80; } .al-nums b.down { color: #f87171; }
.al-why-list { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.al-why-list li { position: relative; padding-left: .95rem; font-size:var(--fs-sm); line-height: 1.35; color: var(--text-soft); }
.al-why-list li::before { content: "•"; position: absolute; left: .1rem; color: var(--accent, #e0a43c); }
/* holdings: setup-status badge + why sub-line + alert time */
.pos-tk-wrap { display: flex; flex-direction: column; gap: var(--s-1); }
.pos-badges { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; }
.pos-setup { font-family: var(--font-mono); font-size:var(--fs-xs); font-weight: 700; letter-spacing: .03em; padding: var(--s-1) var(--s-2); border-radius: var(--radius-pill); }
.pos-setup.coiled { background: rgba(224,164,60,.16); color: var(--accent, #e0a43c); }
.pos-setup.igniting { background: rgba(74,222,128,.16); color: #4ade80; }
.pos-setup.broke { background: rgba(248,113,113,.15); color: #f87171; }
.pos-setup.extended { background: rgba(74,222,128,.14); color: #4ade80; }
.pos-setup.basing { background: rgba(148,163,184,.16); color: #94a3b8; }
.pos-setup.cooled { background: rgba(251,191,36,.15); color: #fbbf24; }
.pos-why { font-size:var(--fs-xs); line-height: 1.3; color: var(--text-soft); max-width: 30ch; }
.pos-time { display: block; font-size:var(--fs-xs); color: var(--muted); margin-top: .1rem; }
.al-tk { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-md); }
/* wrap badges to a new line as WHOLE units (never split a badge's text across two lines);
   row-gap keeps wrapped lines tidy; works the same on desktop + mobile. */
.al-row-top { display: flex; flex-wrap: wrap; align-items: center; row-gap: .35rem; }
.al-odds, .pos-setup, .al-quality, .odds-trend { white-space: nowrap; flex: 0 0 auto; }
.al-tag { display: inline-block; font-size:var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: var(--s-1) var(--s-2); border-radius: 999px; margin-left: .5rem; vertical-align: middle; }
.al-tag.coiled { background: rgba(224,164,60,.14); color: var(--accent); border: 1px solid rgba(224,164,60,.35); }
.al-tag.spec { background: rgba(136,147,168,.12); color: var(--muted); border: 1px solid rgba(136,147,168,.28); }
.al-right { display: flex; align-items: center; gap: var(--s-3); }
.al-score { font-family: var(--font-mono); font-size:var(--fs-sm); color: var(--accent-3); }
.al-follow { background: none; border: 0; color: var(--muted); font-size:var(--fs-md); line-height: 1; transition: color .2s, transform .2s; }
.al-follow:hover { transform: scale(1.2); color: var(--accent); }
.al-follow.on { color: var(--accent); }
.locked-stack { position: relative; margin-top: .4rem; filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; -webkit-mask: linear-gradient(#000, transparent); mask: linear-gradient(#000, transparent); }
.unlock { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-top: -2.2rem; position: relative; padding: var(--s-4); border: 1px solid var(--accent-line); border-radius: var(--radius); background: var(--accent-soft); }
.unlock p { font-size:var(--fs-sm); margin-top: .2rem; max-width: 40ch; }

/* portfolio mini */
.dash-port { display: flex; gap: var(--s-4); align-items: stretch; }
.dash-port > div { display: flex; flex-direction: column; gap: var(--s-1); }
.dash-port i { font-style: normal; font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dash-port b { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-2xl); }
.dash-port b.dgreen { color: var(--up); text-shadow: var(--up-glow); }
.dash-port .dsep { width: 1px; background: var(--line); }
.dash-following { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* plan card */
.plan-card .plan-top { display: flex; justify-content: space-between; align-items: center; }
.plan-card .plan-top h2 { font-size:var(--fs-md); }
.plan-price { display: flex; align-items: baseline; gap: var(--s-1); margin: .8rem 0 .3rem; }
.plan-price b { font-family: var(--font-display); font-weight: 700; font-size:var(--fs-3xl); line-height: 1; }
.plan-price span { color: var(--muted); font-size:var(--fs-base); }
.plan-have { display: grid; gap: var(--s-2); margin: 1.2rem 0; }
.plan-have li { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--text-soft); font-size:var(--fs-base); }
.plan-have li.off { color: var(--faint); }
.plan-have svg { flex: none; margin-top: .15rem; }
.plan-upsell { padding: var(--s-4); border: 1px solid var(--accent-line); border-radius:var(--radius); background: var(--accent-soft); margin-bottom: 1rem; }
.plan-upsell b { color: var(--accent-3); }
.plan-upsell p { font-size:var(--fs-sm); margin-top: .2rem; }

/* settings rows + switch */
.dash-row { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.dash-row:last-of-type { border-bottom: 0; }
.switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--surface-3); position: relative; cursor: pointer; transition: background .25s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); }
.switch:checked { background: var(--up); }
.switch:checked::after { transform: translateX(18px); }

/* Scanner countdown chip (anticipation) — gold variant of .live-win */
.scan-count { margin-top: .9rem; color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.scan-count .dot { background: var(--accent); box-shadow: none; }

/* ==========================================================================
   HEAT LAYER — cinematic system (design/cinematic/compiled-spec.md)
   Steel-blue night · sodium lamps · stillness → decisive action
   ========================================================================== */

/* dossier micro-label voice */
.k-label{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-xs);line-height:1;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* corner-tick surveillance frame (visual-elements) */
.panel-ticks{position:relative}
.panel-ticks::before,.panel-ticks::after{content:"";position:absolute;width:12px;height:12px;opacity:.5;pointer-events:none}
.panel-ticks::before{top:-1px;left:-1px;border-top:2px solid var(--ice);border-left:2px solid var(--ice)}
.panel-ticks::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--ice);border-right:2px solid var(--ice)}

/* tabular data discipline */
table,.mono,.al-nums,.gain-pill,[data-stat],.stat .num{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------- camera entrances -- */
/* ONE entrance for the whole site: a short opacity fade with a small vertical
   offset. Nothing scales and nothing blurs.

   WHY: the seven camera entrances were the real cause of the "alignment is not
   done properly" report. dolly held a section at scale(.9) and rack at
   scale(.97) until it was revealed, so a full-width section measured 1283px
   inside a 1440px viewport and its content edge sat 56px right of every other
   section's. During the transition the edge slides horizontally into place, so
   the page visibly re-aligns itself as you scroll. An entrance must never
   change an element's horizontal geometry.

   The vertical offset is 12px, not 26-42px, because a large offset reads as
   the layout settling rather than content arriving. */
[data-cam]{will-change:opacity}
[data-cam],
[data-cam="fade"],
[data-cam="crane"],
[data-cam="curtain"],
[data-cam="steadicam"],
[data-cam="rack"],
[data-cam="dolly"],
[data-cam="burst"]{
  opacity:0;transform:translateY(12px);filter:none;clip-path:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
[data-cam].in{opacity:1;transform:none;clip-path:none;filter:none}
[data-cam="stagger"]>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-cam="stagger"].in>*{opacity:1;transform:none}
[data-cam="stagger"].in>*:nth-child(1){transition-delay:0ms}
[data-cam="stagger"].in>*:nth-child(2){transition-delay:60ms}
[data-cam="stagger"].in>*:nth-child(3){transition-delay:120ms}
[data-cam="stagger"].in>*:nth-child(4){transition-delay:180ms}
[data-cam="stagger"].in>*:nth-child(5){transition-delay:240ms}
[data-cam="stagger"].in>*:nth-child(6){transition-delay:300ms}
[data-cam="stagger"].in>*:nth-child(7){transition-delay:360ms}
[data-cam="stagger"].in>*:nth-child(n+8){transition-delay:420ms}
@media (prefers-reduced-motion:reduce){
  [data-cam],[data-cam]>*{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}}

/* -------------------------------------------------------------- homepage --
   FLAT HERO. The previous treatment stacked twelve radial-gradient "city
   lights" on a drifting animation, two coloured light pools, a 17rem ghost
   watermark, two clip-path skylines and a 2px letterbox frame behind the
   headline. Each pass added spectacle without removing the last one, and the
   result is the specific thing the site was described as looking like.
   Flat design earns attention with type and space, so the decoration is
   switched off at the source rather than tuned down. */
.hero-night { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero-night .pool-a,
.hero-night .pool-b,
.hero-night .lights,
.hero-night .ghost,
.hero-night .sky-far,
.hero-night .sky-near,
#city-lights,
.cine-bar { display: none !important; }

.hero-night .hero-grid { position: relative; z-index: 1; }
/* Display weight never drops below 600 — see the heading system. The hero
   previously rendered Space Grotesk at weight 200/300 across 60px+. */
.hero-night h1 { font-weight: 600; }
.hero-night h1 b, .hero-night h1 .gradient-text { font-weight: 700; }

/* Flat cards: hover changes the border only. The noir crawl painted a hard
   10-12px black offset block on hover, which is depth by definition. */
.card-noir { transition: border-color .2s var(--ease); }
.card-noir:hover { box-shadow: none; border-color: var(--line-strong); }

/* --------------------------------------------- performance: the Ledger -- */
.page-hero{border-bottom:1px solid var(--line)}
.money-hero .dual-stat b{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.tr thead th{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.tr tbody tr{border-bottom:1px solid var(--line)}
.tr tbody tr:hover{background:#111b2a}                      /* slate lift, no glow */

/* ------------------------------------------- dashboard: the Command Post -- */
#d-live{border-left:3px solid var(--accent);position:relative;overflow:hidden}
#d-live::after{content:"";position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
  background:none;animation:none}
@keyframes sweep{from{left:-40%}to{left:110%}}
@media (prefers-reduced-motion:reduce){#d-live::after{animation:none}}
@media (min-width:1041px){.dash-top3{grid-template-columns:1.15fr 1fr .85fr}} /* unequal dossier rails */
.alert-row{border-left:3px solid var(--line-strong);padding-left:.8rem;margin-bottom:2px;
  border-bottom:1px solid var(--line)}
.alert-row:has(.al-quality.prime){border-left-color:var(--accent)}   /* fresh lamp rail */
.dash-card{border-radius:var(--radius)}

/* --------------------------------------------------- blog: the Case Files -- */
.file-list{list-style:none;margin:0;padding:0}
.file-list li{display:grid;grid-template-columns:110px 1fr;gap: var(--s-4);padding: var(--s-4) 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.file-list time{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--faint)}
blockquote,.pull{border-left:3px solid var(--accent-2);padding: var(--s-2) 0 var(--s-2) var(--s-4);
  font-weight:300;font-style:italic;color:var(--text-soft)}

/* ==========================================================================
   HEAT LAYER 2 — the spectacle pass (canvas city, skyline, monumental title)
   ========================================================================== */

/* living city canvas — fades up like a projector warming */
#city-lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  opacity:0;animation:projector 2.4s var(--ease) .2s forwards}
@keyframes projector{to{opacity:1}}
@media (prefers-reduced-motion:reduce){#city-lights{animation:none;opacity:1}}

/* skyline silhouettes on the horizon — two depth planes */
.hero-night .sky-far,.hero-night .sky-near{position:absolute;left:0;right:0;bottom:0;pointer-events:none}
.hero-night .sky-far{height:120px;background:#070c15;opacity:.9;
  clip-path:polygon(0 62%,4% 62%,4% 38%,9% 38%,9% 55%,14% 55%,14% 24%,16% 24%,16% 55%,22% 55%,22% 44%,27% 44%,27% 60%,33% 60%,33% 30%,35% 30%,35% 14%,37% 14%,37% 30%,39% 30%,39% 60%,46% 60%,46% 40%,52% 40%,52% 56%,58% 56%,58% 20%,60% 20%,60% 56%,66% 56%,66% 46%,72% 46%,72% 62%,78% 62%,78% 34%,80% 34%,80% 62%,86% 62%,86% 50%,92% 50%,92% 28%,94% 28%,94% 58%,100% 58%,100% 100%,0 100%)}
.hero-night .sky-near{height:74px;background:#05080e;
  clip-path:polygon(0 70%,6% 70%,6% 42%,11% 42%,11% 66%,19% 66%,19% 52%,26% 52%,26% 72%,34% 72%,34% 36%,36% 36%,36% 72%,45% 72%,45% 58%,54% 58%,54% 74%,62% 74%,62% 44%,64% 44%,64% 26%,66% 26%,66% 44%,68% 44%,68% 74%,77% 74%,77% 60%,85% 60%,85% 40%,87% 40%,87% 70%,95% 70%,95% 54%,100% 54%,100% 100%,0 100%)}
.hero-night .sky-near::before{content:"";position:absolute;inset:-2px 0 auto;height:1px;
  background:none}

/* Hero title. Sized from the scale (--fs-4xl, 38→60px) instead of the old
   6rem/96px "monumental" override, and no longer forced to 78vh — a hero that
   claims most of the viewport pushes the first real content below the fold on
   every laptop. */
.hero-night .hero-grid { min-height: 0; align-items: center; padding-bottom: 0; }
.hero-night h1 { font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: -0.028em; font-weight: 600; }
.hero-night h1 b, .hero-night h1 .gradient-text { font-weight: 700; }
.hero-night p.lead { max-width: var(--measure-tight); }
.hero-eyebrow { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); color: var(--muted); }
.hero-eyebrow .hx-tick { width: 24px; height: 1px; background: var(--accent); box-shadow: none; flex: 0 0 auto; }

/* ticker tape — the data crawl: edge-faded, amber separators */
.tape{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  background:var(--bg);border-block:1px solid var(--line-strong)}
.tape-item .tk{color:var(--ice);font-weight:700}
.tape-item .gain{color:var(--up)}

/* Stat numerals sit on the scale like everything else. The old rule set 3.8rem
   /61px here while the base rule set 3.4rem/54px, so the same component
   rendered at two sizes depending on which page it appeared on. */
.stats .num { font-family: var(--font-mono); font-size: var(--fs-2xl); letter-spacing: -0.035em; line-height: 1.05; }
.stats .stat { position: relative; }
.stats .stat::after { content: none; }        /* animated gradient underline removed */

/* The oversized ghost numerals behind the 8-condition chips forced
   overflow:hidden on every card and clipped real content at narrow widths.
   The chips are already numbered in the markup. */
#how .cond::before { content: none; }
#how .cond { overflow: visible; }

/* evidence wins — flat, border-only state */
.win { border-left: 2px solid var(--line-strong); transition: border-color .2s var(--ease); }
.win:hover { box-shadow: none; border-left-color: var(--accent); transform: none; }

/* pricing — no light pool */
#pricing .pricing { position: relative; }
#pricing .pricing::before { content: none; }

/* mobile: keep the vista composed */
@media (max-width:640px){
  .hero-night .hero-grid{min-height:72vh;padding-bottom:3.2rem}
  .hero-night .ghost{font-size:var(--fs-4xl);bottom:8%}
  .hero-night .sky-far{height:80px}.hero-night .sky-near{height:52px}
}

/* ==========================================================================
   HEAT LAYER 3 — max pass: the film opens, the title rises, the lamp breathes
   ========================================================================== */

/* cinema bars — one-time opening, pure overlay, never blocks input */
.cine-bar{position:fixed;left:0;right:0;height:9vh;background:#000;z-index:9998;
  pointer-events:none;animation:cineOpen 1.5s var(--snap) .55s forwards}
.cine-top{top:0;transform-origin:top}
.cine-bot{bottom:0;transform-origin:bottom}
@keyframes cineOpen{to{transform:scaleY(0)}}

/* Headline lines are plain blocks. The staged rise held the h1 at opacity:0
   until an IntersectionObserver fired, which puts the single most important
   sentence on the page behind a JS dependency for no design gain. */
.hero-night h1 .line { display: block; opacity: 1; transform: none; transition: none; }

/* The pulsing glow on the hero CTA is removed: a button that breathes is the
   loudest possible contradiction of a flat, calm surface. */
.hero-night .btn-primary { animation: none; }

/* parallax layers move on transform — keep them composited */
.hero-night #city-lights,.hero-night .sky-far,.hero-night .ghost{will-change:transform}

/* ==========================================================================
   HEAT LAYER 4 — the Command Deck (dashboard rebuild) + interior atmosphere
   Discipline: one gap token drives ALL dashboard rhythm; hairline panels;
   the member's first screen is LIVE DATA, never a lecture.
   ========================================================================== */

:root{--dgap:clamp(1.05rem,1.6vw,1.5rem)}

/* ---- atmosphere behind every interior page hero + the dashboard ---------- */
/* Interior pages and the dashboard sit on flat ground. The two stacked radial
   washes tinted one corner blue and the opposite corner amber, which made a
   plain background look unevenly lit rather than intentional. */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before { content: none; }
.page-hero > * { position: relative; }
.dash { position: relative; }
.dash::before { content: none; }

/* ---- rhythm: ONE vertical beat for the whole deck ------------------------ */
.dash>*+*{margin-top:var(--dgap)}
.dash .dash-grid,.dash .dash-top3{gap:var(--dgap)}

/* ---- command header ------------------------------------------------------ */
.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap: var(--s-5);
  padding-bottom:1.3rem;border-bottom:1px solid var(--line)}
.dash-hi{display:flex;align-items:center;gap: var(--s-3);color:var(--ice);margin:0 0 .55rem}
.dash-head h1{font-size:var(--fs-3xl);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.dash-email{margin-top:.35rem;color:var(--faint);font-size:var(--fs-sm)}
.dash-head-right{display:flex;align-items:center;gap: var(--s-3);padding-bottom:.3rem}
.tier-chip{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.22em;text-transform:uppercase;
  padding: var(--s-2) var(--s-3);border-radius:var(--radius);border:1px solid var(--accent-line);
  color:var(--accent-3);background:var(--accent-soft)}

/* ---- live status spine --------------------------------------------------- */
.dash-live{display:flex;align-items:center;gap: var(--s-3);padding: var(--s-4) var(--s-5);
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.55}
.dash-live .ls-dot{width:9px;height:9px;border-radius:50%;background:var(--up);flex:0 0 auto;
  box-shadow: none;animation:lsPulse 2.4s var(--ease) infinite}
@keyframes lsPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.dash-live .ls-dot{animation:none}}

/* ---- alert board bar ----------------------------------------------------- */
.board-bar{display:flex;align-items:baseline;justify-content:space-between;gap: var(--s-4);flex-wrap:wrap;
  margin-bottom:calc(var(--dgap) * -.35)}
.board-title{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em}
.board-title::after{content:"";display:inline-block;width:38px;height:2px;margin:0 0 .22rem .7rem;
  vertical-align:middle;background:var(--line-strong)}
.alert-sort{display:flex;align-items:center;gap: var(--s-2);margin:0}
.as-label{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.as-btn{font-family:var(--font-mono);font-size:var(--fs-xs);padding: var(--s-2) var(--s-3);border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer;
  transition:color .25s,border-color .25s,background .25s}
.as-btn:hover{color:var(--text);border-color:var(--line-strong)}
.as-btn.active{color:var(--accent-3);border-color:var(--accent-line);background:var(--accent-soft)}
.as-dir{color:var(--accent-3);cursor:pointer;padding: var(--s-1) var(--s-2)}

/* ---- panels: one surface doctrine, real padding -------------------------- */
.dash-card{padding:var(--pad-card)}
.dash-card-head{display:flex;justify-content:space-between;align-items:baseline;gap: var(--s-4);
  margin:0 0 .95rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.dash-card-head h2{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap: var(--s-2)}
.dash-col-sub{font-size:var(--fs-sm);color:var(--muted);line-height:1.55;margin:0 0 1.05rem}

/* ---- alert tiles: dossier cards, aligned numbers, breathing room --------- */
.alert-row{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);margin:0 0 .7rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.alert-row:hover{border-color:var(--line-strong);transform:translateY(-2px);
  box-shadow:8px 10px 24px -14px rgba(0,0,0,.7)}
.alert-row:last-child{margin-bottom:0}
.al-row-top{gap: var(--s-2) var(--s-2);margin-bottom:.45rem}
.al-tk{font-family:var(--font-mono);font-weight:700;font-size:var(--fs-body);letter-spacing:.01em}
.al-rank{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--faint);margin-right:.15rem}
.al-nums{background:rgba(5,8,14,.55);border:1px solid var(--line);border-radius:calc(var(--radius) - 4px);
  padding: var(--s-2) var(--s-3);margin:.5rem 0 .4rem;gap: var(--s-1) var(--s-4)}
.al-nums b{color:var(--text)}
.al-why-list{margin:.55rem 0 .2rem;padding-left:1.05rem;display:grid;gap: var(--s-1)}
.al-why-list li{font-size:var(--fs-sm);line-height:1.5;color:var(--text-soft)}
.al-why-list li::marker{color:var(--accent)}
.al-stamps{display:flex;flex-wrap:wrap;gap: var(--s-1) var(--s-4);margin-top:.45rem}
.al-freshness{margin:.1rem 0 .85rem}

/* ---- chart panel ---------------------------------------------------------- */
.peak-legend{display:grid;gap: var(--s-2);font-size:var(--fs-sm)}
#d-equity-chart{margin-top:.4rem;border-top:1px solid var(--line);padding-top:.9rem}

/* ---- positions table ------------------------------------------------------ */
.pos-search{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);font-family:var(--font-mono);font-size:var(--fs-sm);padding: var(--s-2) var(--s-3);min-width:180px}
.pos-search:focus{outline:none;border-color:var(--accent-line);box-shadow:0 0 0 3px var(--accent-soft)}
.tr tbody td{padding-block:.85rem}
.tr tbody tr{transition:background .2s}
.pos-tag-note{font-size:var(--fs-sm);line-height:1.9;color:var(--faint);margin:0 0 1rem}

/* ---- the field guide: collapsed reference, not a lecture ------------------ */
details.dash-explainer{padding:0;overflow:hidden}
details.dash-explainer summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap: var(--s-4);
  padding: var(--s-4) var(--s-5);user-select:none;transition:background .25s}
details.dash-explainer summary::-webkit-details-marker{display:none}
details.dash-explainer summary:hover{background:var(--surface-2)}
details.dash-explainer .dx-sum{font-weight:600;font-size:var(--fs-body);display:flex;align-items:center;gap: var(--s-2)}
details.dash-explainer .dx-arrow{color:var(--accent-3);transition:transform .3s var(--ease);font-style:normal}
details.dash-explainer[open] .dx-arrow{transform:rotate(180deg)}
details.dash-explainer>*:not(summary){padding-inline:clamp(1.25rem,2vw,1.6rem)}
details.dash-explainer[open]{padding-bottom:1.4rem}
.sig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap: var(--s-4);margin:1.1rem 0;padding:0;list-style:none}
.sig-grid li{display:flex;gap: var(--s-3);align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius);padding: var(--s-3) var(--s-4)}
.sig-grid .sig-n{font-family:var(--font-mono);font-weight:700;color:var(--accent-3);
  border:1px solid var(--accent-line);border-radius:50%;width:26px;height:26px;flex:0 0 auto;
  display:grid;place-items:center;font-size:var(--fs-xs)}
.sig-grid b{display:block;margin-bottom:.2rem}
.sig-grid span:not(.sig-n){font-size:var(--fs-sm);color:var(--muted);line-height:1.5}

/* ---- responsive discipline ------------------------------------------------ */
@media (max-width:640px){
  .dash-head{flex-direction:column;align-items:flex-start}
  .dash-head-right{padding-bottom:0}
  .board-bar{margin-bottom:0}
}
@keyframes signalArrive{
  0%{box-shadow:0 0 0 0 rgba(232,161,60,.45)}
  55%{box-shadow:0 0 0 16px rgba(232,161,60,0)}
  100%{box-shadow:0 0 0 0 rgba(232,161,60,0)}}
@keyframes dotRing{0%{transform:scale(.5);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ---- price motion: gains pulse warm, losses pulse cool ----------------------- */
@keyframes flashUp{0%{background:rgba(15,157,99,.28)}100%{background:transparent}}
@keyframes flashDown{0%{background:rgba(31,111,255,.22)}100%{background:transparent}}
.val-flash-up{animation:flashUp 1.1s var(--ease);border-radius:var(--radius-sm)}
.val-flash-down{animation:flashDown 1.1s var(--ease);border-radius:var(--radius-sm)}

/* ---- charts: draw themselves, glow where it matters --------------------------- */
#d-equity-chart path[fill="none"],#equity-chart path[fill="none"]{
  stroke-dasharray:2800;stroke-dashoffset:2800;animation:ecDraw 1.9s var(--ease) forwards}
#d-equity-chart path[fill^="url"],#equity-chart path[fill^="url"]{
  opacity:0;animation:ecArea 1.2s var(--ease) .9s forwards}
@keyframes ecDraw{to{stroke-dashoffset:0}}
@keyframes ecArea{to{opacity:1}}
#d-equity-chart circle,#equity-chart circle{filter:drop-shadow(0 0 6px rgba(15,157,99,.8))}
@media (prefers-reduced-motion:reduce){
  #d-equity-chart path,#equity-chart path{animation:none;stroke-dashoffset:0;opacity:1}}

/* DARK signal arrival — the ripple survives the light-theme revert (owner kept dark) */
.alert-row:has(.al-quality.prime){animation:signalArrive 1.4s var(--snap)}
@media (prefers-reduced-motion:reduce){.alert-row:has(.al-quality.prime){animation:none}}

/* numbers provenance — the printed reason a headline figure moved */
.prov-note{font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.7;color:var(--faint);
  max-width:62ch;margin:.8rem auto 0;letter-spacing:.02em}

/* ---- Large Cap alert cards: the same dossier shell as the small-cap board ----
   The Large Cap column used to emit a bare `.al-row`, a class with no rule
   anywhere in this file, so that book rendered as three unstyled spans beside a
   column of proper cards. It now reuses .alert-row and only adds what is
   genuinely different: the book's own colour rail and its two extra badges.
   Flat doctrine — solid surfaces, one hairline, no gradient or glow. */
.alert-row.lc-row { border-left-color: #4fc3d9; }
.al-quality.lcband { background: rgba(79,195,217,.14); color: #4fc3d9; }
.al-quality.pending { background: rgba(224,164,60,.14); color: var(--accent-3, #e0a43c); }
/* A masked pick still reads as a row, not as a broken fetch: the padlock keeps
   the ticker's weight but drops to muted so it is never mistaken for a name. */
.al-tk-locked { color: var(--muted); font-size:var(--fs-base); letter-spacing: 0; }
.lc-board .alert-row:last-of-type { margin-bottom: .7rem; }

/* ---- dashboard section jump bar --------------------------------------------
   Both books render on one page (owner 2026-08-14), which made the page long:
   two alert columns, a chart, a plan card, then a table carrying every position
   in both books. This bar NAVIGATES, it never filters — every chip scrolls to a
   section that is always rendered. Sticks below the 72px site nav. */
.dash-jump {
  position: sticky; top: 72px; z-index: 20;
  display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center;
  margin: 0 0 1.4rem; padding: var(--s-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dash-jump a {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
}
.dash-jump a:hover { color: var(--text); background: var(--surface-3, rgba(255,255,255,.05)); }
.dash-jump a.active { color: var(--text); border-color: var(--line-strong); background: var(--surface-3, rgba(255,255,255,.06)); }
.dash-jump a b { font-weight: 700; color: var(--text-soft); }
.dash-jump a:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
/* Anchored sections must clear BOTH sticky bars (72px nav + ~48px jump bar). */
[id^="sec-"] { scroll-margin-top: 132px; }
/* On a phone the five chips wrapped to three lines: a 128px sticky bar eating a
   sixth of the screen on every scroll, and a scroll-margin that no longer
   matched it. One row that scrolls sideways instead keeps the sticky cost to
   ~40px, so the anchors land where the reader expects. */
@media (max-width: 700px) {
  .dash-jump {
    gap: var(--s-1); padding: var(--s-1);
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .dash-jump::-webkit-scrollbar { display: none; }
  .dash-jump a { padding: var(--s-2) var(--s-2); font-size: var(--fs-xs); flex: 0 0 auto; }
  [id^="sec-"] { scroll-margin-top: 124px; }
}

/* ---- positions table: book filter ------------------------------------------
   NOT the old product switch. That switch was a global mode that blanked the
   other book everywhere; this is a view control on one table, it defaults to
   Both, and it is one click to undo. It exists because the shared table mixes
   two books' rows and a reader looking for the Large Cap ones had no way to
   isolate them beyond sorting the Book column. */
.book-filter { display: inline-flex; gap: var(--s-1); padding: var(--s-1); border: 1px solid var(--line); border-radius: var(--radius-pill); }
.bf-btn {
  display: inline-flex; align-items: center; gap: var(--s-1);
  background: none; border: 0; cursor: pointer;
  padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size:var(--fs-xs); letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.bf-btn:hover { color: var(--text); }
.bf-btn.active { color: var(--text); background: var(--surface-3, rgba(255,255,255,.07)); }
.bf-btn b { color: var(--text-soft); font-weight: 700; }
.bf-btn:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* ---- guide cards: a library, not a list ------------------------------------
   The guides index was eleven identical text blocks -- kicker, heading,
   paragraph, link -- so nothing distinguished one guide from another and there
   was nothing to look at. Each card now leads with flat inline-SVG cover art
   keyed on its slug (page_graphics.guide_cover), so the same guide always wears
   the same picture. Flat by construction: solid fills, one hairline, no
   gradient and no glow. */
.guide-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.guide-card .guide-card-body { padding: var(--pad-card, 1.4rem); display: flex; flex-direction: column; flex: 1 1 auto; }
.guide-card .guide-card-body p:last-child { margin-top: auto; padding-top: .9rem; }
.pg-cover {
  position: relative; display: block; aspect-ratio: 392 / 210;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.pg-cover svg { display: block; width: 100%; height: 100%; }
.pg-cover-tag {
  position: absolute; left: .8rem; bottom: .7rem;
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-soft);
  background: var(--bg); border: 1px solid var(--line);
  padding: .2rem .5rem; border-radius: var(--radius-pill);
}
/* The kicker is on the cover; repeating it under the art is noise. */
.guide-card .guide-card-body .n { display: none; }
.guide-card h2, .guide-card h3 { margin: 0 0 .5rem; font-size: var(--fs-md); line-height: 1.3; }
.guide-card:hover .pg-cover { border-bottom-color: var(--line-strong); }

/* ---- nav: make the bar actually fit a phone --------------------------------
   At 375px the row measured brand 172 + CTA 126 + toggle 44 + two 12px gaps =
   366px inside a 331px bar, so the hamburger hung 12px off the right edge and
   the whole page gained a horizontal scroll. The wordmark is `white-space:
   nowrap` (correctly -- "IGNITION ALERTS" must never break across two lines),
   which means nothing in the row could give, so the overflow had to come out of
   the last item. Shrink the two flexible things instead and the toggle stays on
   screen with room to spare. */
@media (max-width: 460px) {
  .nav-inner { gap: var(--s-2); min-width: 0; }
  .brand { font-size: .92rem; letter-spacing: -.02em; min-width: 0; flex: 0 1 auto; }
  .brand .spark { width: 22px; height: 22px; }
  .nav-cta .btn { padding: .5rem .7rem; font-size: .8rem; }
}
/* Last-resort guard: no page on this site may scroll sideways. A phone that
   pans horizontally is what "the text is going up and down and not aligned"
   actually looks like from the reader's side. */
html, body { overflow-x: clip; }

/* ============================================================================
   V2 — TWO ENGINES
   ----------------------------------------------------------------------------
   The layer that carries "Ignition — <page> v2.dc.html" onto the live site.
   It is additive and namespaced `v2-`: nothing above this line changes meaning,
   so the generated blog/ and stocks/ pages keep rendering as they did.

   WHAT IT DELIBERATELY REVERSES. The flat doctrine above bans gradient, blur,
   glow and shadow. The v2 designs use all four, and use them as identity rather
   than decoration: the gold gradient IS the call to action, the ember field IS
   the small-cap engine, the green glow under the equity line IS "this is the
   money". Every marketing page and the dashboard are redrawn to v2 in the same
   pass, so this is a whole-system change, not a landing-page exemption. The
   doctrine's real point survives: ONE gradient, ONE glow recipe, ONE blur, all
   declared here as tokens and never re-mixed at the call site.

   TYPE. The rule "a tag means one size site-wide" still holds for h1/h2/h3 —
   this layer never reassigns a bare tag. v2 display type is a set of ROLE
   classes (.v2-d1/.v2-d2/.v2-d3/.v2-h2) bound to tokens, because "hero", "page
   title" and "engine name" are three different jobs that reuse one element.
   ========================================================================== */
:root {
  /* ---- the two books, as light sources ---------------------------------
     Small Cap is the ember, Large Cap the cold drifter. #4fc3d9 is already the
     Large Cap stroke in drawChart and the .book-badge.lc chip, so the charts,
     the record table and these pages now agree on one blue. */
  --sc:        #ff6b1a;
  --sc-2:      #ff8f45;
  --sc-soft:   rgba(255, 107, 26, .10);
  --sc-line:   rgba(255, 107, 26, .35);
  --sc-edge:   rgba(255, 107, 26, .42);
  --lc:        #4fc3d9;
  --lc-2:      #7fd9e8;
  --lc-soft:   rgba(79, 195, 217, .10);
  --lc-line:   rgba(79, 195, 217, .30);
  --lc-edge:   rgba(79, 195, 217, .42);

  /* ---- the one gradient, the one glow, the one blur --------------------- */
  --v2-gold:      linear-gradient(120deg, #f2b95a, #e8a13c 55%, #c8842c);
  --v2-gold-lift: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 50px -12px rgba(232,161,60,.55);
  --v2-gold-sm:   inset 0 1px 0 rgba(255,255,255,.35), 0 10px 30px -10px rgba(232,161,60,.5);
  --v2-panel:     linear-gradient(180deg, #0b111b, #080d15);
  --v2-blur:      blur(18px) saturate(150%);
  --v2-hairline:  rgba(139, 163, 196, .22);   /* section divider, above --line */
  --v2-hair-soft: rgba(139, 163, 196, .09);   /* row divider inside a panel   */

  /* ---- container + rhythm ----------------------------------------------
     1240px, wider than the 1120px --maxw above: the fork, the ledger and the
     four-up stat rail all need the extra room to stay in one row at 1280px. */
  --v2-maxw:    1240px;
  --v2-sec:     clamp(4.5rem, 3rem + 5vw, 8rem);
  --v2-sec-sm:  clamp(3rem, 2.2rem + 3vw, 5rem);
  --v2-sec-top: clamp(5rem, 3rem + 8vw, 8rem);

  /* ---- v2 display scale (roles, not tags) ------------------------------- */
  --v2-fs-d1:   clamp(3rem, 2rem + 5.5vw, 6.5rem);     /* landing hero        */
  --v2-fs-d2:   clamp(2.6rem, 1.8rem + 4vw, 5.2rem);   /* inner page title    */
  --v2-fs-d3:   clamp(2.6rem, 2rem + 3.4vw, 5rem);     /* Explosive/Relentless*/
  --v2-fs-h2:   clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
  --v2-fs-h2l:  clamp(2.2rem, 1.6rem + 2.6vw, 3.8rem);
  --v2-fs-h2s:  clamp(1.8rem, 1.4rem + 1.8vw, 2.8rem);
  --v2-fs-stat: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem);
  --v2-fs-kick: .75rem;    /* mono eyebrow  — 12px floor, was .72 (11.5px) */
  --v2-fs-micro: .75rem;   /* mono label    — 12px floor, was .68 (10.9px) */
}

/* ---------------------------------------------------------------- chrome -- */
/* The v2 header is a translucent blurred bar. Kept `sticky`, not `fixed` as
   drawn: sticky reserves its own space, so the 39 generated pages that share
   this partial do not each need a body top-padding they never asked for. */
.nav {
  background: rgba(5, 8, 14, .72);
  -webkit-backdrop-filter: var(--v2-blur);
  backdrop-filter: var(--v2-blur);
  border-bottom: 1px solid rgba(139, 163, 196, .12);
}
.nav.scrolled { background: rgba(5, 8, 14, .86); border-bottom-color: var(--line-strong); }

/* The gold CTA is the one gradient, and .btn-primary is shared by every page —
   which is the point: one button, everywhere. */
.btn-primary { background: var(--v2-gold); color: #171004; box-shadow: var(--v2-gold-sm); }
.btn-primary:hover { background: var(--v2-gold); filter: brightness(1.06); box-shadow: var(--v2-gold-lift); }
.btn-ghost { background: rgba(255,255,255,.04); }
.btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(233,238,245,.5); }

/* ------------------------------------------------------------ primitives -- */
.v2-wrap { width: min(100% - (var(--gutter) * 2), var(--v2-maxw)); margin-inline: auto; }
.v2-sec  { padding-block: var(--v2-sec); position: relative; }
.v2-sec--sm   { padding-block: var(--v2-sec-sm); }
.v2-sec--top  { padding-block: var(--v2-sec-top) var(--v2-sec-sm); }
.v2-sec--alt  { background: var(--surface); }
.v2-sec--rule { border-top: 1px solid var(--v2-hairline); }

/* eyebrow: mono, wide-tracked, with a gold rule leading into it */
.v2-kicker {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono); font-size: var(--v2-fs-kick);
  letter-spacing: .28em; text-transform: uppercase; color: var(--muted);
}
.v2-kicker::before { content: ""; width: 26px; height: 1px; background: var(--accent); flex: none; }
.v2-kicker.is-center { justify-content: center; }

.v2-d1, .v2-d2, .v2-d3, .v2-h2 {
  font-family: var(--font-display); font-weight: 800; margin: 0;
  text-wrap: balance; font-synthesis-weight: none;
}
.v2-d1 { font-size: var(--v2-fs-d1); line-height: .98; letter-spacing: -.032em; max-width: 14ch; }
.v2-d2 { font-size: var(--v2-fs-d2); line-height: 1;   letter-spacing: -.03em;  max-width: 17ch; }
.v2-d3 { font-size: var(--v2-fs-d3); line-height: .95; letter-spacing: -.03em;  }
.v2-h2 { font-size: var(--v2-fs-h2); line-height: 1.05; letter-spacing: -.025em; }
.v2-h2.is-lg    { font-size: var(--v2-fs-h2l); line-height: 1; letter-spacing: -.028em; }
.v2-h2.is-sm    { font-size: var(--v2-fs-h2s); }
.v2-h2.is-tight { max-width: 22ch; }

.v2-lead {
  margin: var(--s-5) 0 0; color: var(--text-soft);
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); line-height: 1.65; max-width: 56ch;
}
.v2-body   { margin: 0; color: var(--text-soft); font-size: var(--fs-body); line-height: 1.7; max-width: 62ch; }
.v2-note   { margin: 0; color: var(--faint); font-size: var(--fs-sm); line-height: 1.65; max-width: 90ch; }
.v2-strong { color: var(--text); }
.v2-mono   { font-family: var(--font-mono); }

/* pill buttons — the v2 shapes, used on the v2 pages; .btn stays for the rest */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: 1rem 1.9rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-body); line-height: 1.2;
  border: 1px solid transparent; white-space: nowrap; font-family: var(--font-body);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease),
              border-color .3s var(--ease), background .3s var(--ease);
}
.v2-btn--gold { background: var(--v2-gold); color: #171004; box-shadow: var(--v2-gold-lift); }
.v2-btn--gold:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 24px 70px -10px rgba(232,161,60,.7); }
.v2-btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,.04); }
.v2-btn--ghost:hover { border-color: rgba(233,238,245,.5); transform: translateY(-2px); }
.v2-btn--sc { border-color: var(--sc-edge); color: var(--sc-2); background: rgba(255,107,26,.08); padding: .8rem 1.5rem; font-size: .92rem; }
.v2-btn--lc { border-color: var(--lc-edge); color: var(--lc-2); background: rgba(79,195,217,.08); padding: .8rem 1.5rem; font-size: .92rem; }
.v2-btn--sc:hover, .v2-btn--lc:hover { transform: translateY(-2px); }
.v2-btn--sm { padding: .9rem 1.7rem; font-size: .95rem; }
.v2-btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-6); }
.v2-btn-row.is-center { justify-content: center; }

/* status chips: LIVE (green, pulsing) / EARNING ITS RECORD (gold) */
.v2-chip { /* size from the token, not a literal: was 0.66rem = 10.6px */
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .2rem .55rem; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .14em;
  text-transform: uppercase; border: 1px solid currentColor;
}
.v2-chip.is-live { color: var(--up); border-color: rgba(57,217,138,.4); }
.v2-chip.is-soon { color: var(--accent-3); border-color: rgba(232,161,60,.45); }
.v2-chip.is-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; animation: v2Pulse 1.8s ease infinite;
}
@keyframes v2Pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* the panel: one radius, one hairline, one fill, with a book-coloured spine */
.v2-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: clamp(1.4rem, 2.5vw, 2.2rem);
}
.v2-panel--deep { background: var(--v2-panel); border-radius: 12px; }
.v2-panel--sc   { border-left: 3px solid var(--sc); }
.v2-panel--lc   { border-left: 3px solid var(--lc); }
.v2-panel--gold { border-color: rgba(232,161,60,.38); background: rgba(232,161,60,.07); }
.v2-eng {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--v2-fs-kick);
  letter-spacing: .22em; text-transform: uppercase;
}
.v2-eng.is-sc { color: var(--sc-2); }
.v2-eng.is-lc { color: var(--lc-2); }

/* ------------------------------------------------------------ hero (v2) --- */
.v2-hero {
  position: relative; display: grid; align-content: center; overflow: clip;
  min-height: 86vh; padding-block: var(--v2-sec-top) var(--v2-sec-sm);
}
.v2-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v2-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 18% 20%, rgba(255,107,26,.09), transparent 65%),
    radial-gradient(55% 50% at 85% 80%, rgba(79,195,217,.08), transparent 65%),
    radial-gradient(90% 70% at 50% 55%, transparent 40%, rgba(5,8,14,.72) 80%, var(--bg) 100%);
}
.v2-hero > .v2-wrap { position: relative; }
.v2-trust {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem); align-items: baseline;
  font-family: var(--font-mono); font-size: .8rem; color: var(--muted);
}
.v2-trust b { color: var(--text); font-weight: 500; }
.v2-trust .v2-live { display: inline-flex; align-items: center; gap: var(--s-2); }
.v2-trust .v2-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); animation: v2Pulse 1.8s ease infinite;
}

/* ------------------------------------------------------------ the fork ---- */
.v2-fork { display: grid; grid-template-columns: 1fr 1fr; }
.v2-fork-side {
  position: relative; display: grid; align-content: center; gap: var(--s-4);
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 3vw, 4rem); overflow: clip;
  min-height: 62vh;
}
.v2-fork-side + .v2-fork-side { border-left: 1px solid var(--v2-hairline); }
.v2-fork-side > * { position: relative; }
.v2-fork-wash { position: absolute; inset: 0; pointer-events: none; }
.v2-fork-side.is-sc .v2-fork-wash { background: linear-gradient(to bottom, transparent 30%, rgba(255,107,26,.10)); }
.v2-fork-side.is-lc .v2-fork-wash { background: linear-gradient(to bottom, transparent 30%, rgba(79,195,217,.10)); }
/* The dim is pure CSS on the container, so it works on hover AND on keyboard
   focus — the design's mouseenter-only version left the fork inert when tabbed. */
.v2-fork-shade {
  position: absolute; inset: 0; pointer-events: none; background: var(--bg);
  opacity: 0; transition: opacity .42s var(--snap);
}
.v2-fork:hover .v2-fork-side:not(:hover) .v2-fork-shade,
.v2-fork:focus-within .v2-fork-side:not(:focus-within):not(:hover) .v2-fork-shade { opacity: .55; }
.v2-fork-stats {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono); font-size: .78rem; color: var(--muted); margin-top: var(--s-1);
}
.v2-fork-stats b { font-weight: 500; }
.is-sc .v2-fork-stats b { color: var(--sc-2); }
.is-lc .v2-fork-stats b { color: var(--lc-2); }
.v2-enter {
  display: inline-flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-4); font-weight: 600; font-size: .92rem; color: var(--text);
}
.v2-enter i {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-style: normal; transition: transform .3s var(--ease);
}
.is-sc .v2-enter i { background: rgba(255,107,26,.14); border: 1px solid var(--sc-edge); color: var(--sc-2); }
.is-lc .v2-enter i { background: rgba(79,195,217,.14); border: 1px solid var(--lc-edge); color: var(--lc-2); }
.v2-fork-side:hover .v2-enter i { transform: translateX(3px); }

/* -------------------------------------------------- the integrity strip --- */
.v2-integrity { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.v2-integrity > div { padding: var(--s-5); border-bottom: 1px solid var(--line); }
.v2-integrity > div:first-child { padding-inline: 0 var(--s-5); }
.v2-integrity > div:last-child  { padding-inline: var(--s-5) 0; }
.v2-integrity > div + div { border-left: 1px solid var(--line); }
.v2-integrity .v2-idx {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2);
}
.v2-integrity p { color: var(--text-soft); font-size: var(--fs-base); line-height: 1.6; }

/* ------------------------------------------------------------ the record -- */
.v2-record { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.v2-figs { display: flex; gap: var(--s-6); margin-top: var(--s-6); flex-wrap: wrap; }
.v2-figs .v2-div { width: 1px; background: var(--line); align-self: stretch; }
.v2-fig-n {
  font-family: var(--font-display); font-weight: 800; font-size: 1.8rem;
  letter-spacing: -.02em; color: var(--text); line-height: 1.1;
}
.v2-fig-l {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); margin-top: var(--s-1);
}
.v2-money { color: var(--up); text-shadow: 0 0 40px rgba(57,217,138,.25); }
.v2-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.v2-legend { display: flex; gap: var(--s-5); font-family: var(--font-mono); font-size: var(--v2-fs-micro); color: var(--muted); flex-wrap: wrap; }
.v2-legend > span { display: inline-flex; align-items: center; gap: var(--s-2); }
.v2-legend b { color: var(--text); font-weight: 500; }
.v2-sw { width: 16px; height: 2px; background: var(--up); flex: none; }
.v2-sw.is-sp { height: 0; background: none; border-top: 2px dashed var(--muted); }
.v2-curve { display: block; width: 100%; height: clamp(240px, 40vw, 320px); }
.v2-chart-foot {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--v2-fs-micro); color: var(--faint);
}

/* ---- the four-up stat rail (track record hero) --------------------------- */
.v2-statrail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 var(--s-6);
  margin-top: clamp(2rem, 6vw, 3rem); border-top: 1px solid var(--line-strong);
}
.v2-statrail > div { padding-block: var(--s-5); border-bottom: 1px solid var(--line); }
.v2-statrail .v2-fig-n { font-size: var(--v2-fs-stat); }
.v2-statrail .v2-fig-l { font-size: var(--v2-fs-micro); letter-spacing: .18em; }

/* ---- outcome tiles ------------------------------------------------------- */
/* Five tiles, not the design's four: realized + trailed + stopped + expired +
   open is 68, and the design's four summed to 65. A page arguing that it prints
   every loss cannot drop the three exits that did not fit the row. */
.v2-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.v2-out {
  display: flex; align-items: baseline; gap: var(--s-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: rgba(139,163,196,.05); padding: .9rem 1.1rem;
}
.v2-out b { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text-soft); }
.v2-out span { font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.v2-out.is-win  { border-color: rgba(57,217,138,.3); background: rgba(57,217,138,.06); }
.v2-out.is-win b  { color: var(--up); }
.v2-out.is-stop { border-color: rgba(255,93,107,.3); background: rgba(255,93,107,.06); }
.v2-out.is-stop b { color: var(--down); }
.v2-out.is-open { border-color: rgba(232,161,60,.3); background: rgba(232,161,60,.06); }
.v2-out.is-open b { color: var(--accent-3); }

/* ------------------------------------------------------- method / cards --- */
.v2-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s-3); }
.v2-cards.is-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.v2-cards.is-two  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-4); }
.v2-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: 1.3rem 1.4rem;
  transition: border-color .2s var(--ease);
}
.v2-card:hover { border-color: var(--line-strong); }
.v2-sec--alt .v2-card { background: var(--surface-2); }
.v2-card .v2-n { font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .16em; margin-bottom: var(--s-3); color: var(--muted); }
.v2-card.is-sc .v2-n { color: var(--sc-2); }
.v2-card.is-lc .v2-n { color: var(--lc-2); }
.v2-card .v2-t {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em; margin-bottom: var(--s-1);
}
.v2-card .v2-b { color: var(--muted); font-size: .88rem; line-height: 1.6; }
.v2-card.is-sealed { border-color: var(--accent-line); background: var(--accent-soft); }
.v2-card.is-sealed .v2-n { color: var(--accent-3); }
.v2-card.is-sealed .v2-t svg { color: var(--accent); flex: none; }

/* the eight-condition micro grid (landing) */
.v2-conds { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-2); }
.v2-cond {
  border: 1px solid var(--sc-line); border-radius: 6px; padding: .55rem .4rem;
  text-align: center; font-family: var(--font-mono); font-size: var(--v2-fs-micro); color: var(--sc-2);
}
.v2-cond span { color: var(--muted); display: block; }
.v2-cond.is-sealed {
  grid-column: span 3; border-color: var(--accent-line); background: rgba(232,161,60,.1);
  color: var(--accent-3); display: flex; align-items: center; justify-content: center; gap: var(--s-2);
}
/* the large-cap rule rows */
.v2-rows { display: grid; gap: var(--s-2); }
.v2-row {
  display: flex; justify-content: space-between; gap: var(--s-4);
  border: 1px solid var(--lc-line); border-radius: 6px; padding: .7rem .9rem;
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); color: var(--text-soft);
}
.v2-row > span:first-child { color: var(--lc-2); }

/* the exit-rule strip */
.v2-exit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s-4); }
.v2-exit .v2-fig-n { font-size: 1.5rem; }
.v2-exit .is-stop { color: var(--down); }
.v2-exit .is-give { color: var(--up); }
.v2-exit .is-win  { color: var(--text-soft); }
.v2-exit p { margin: var(--s-1) 0 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }

/* the side-by-side comparison */
.v2-compare { border: 1px solid var(--line); border-radius: 12px; overflow: clip; background: var(--surface); }
.v2-crow {
  display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: var(--s-1) var(--s-5);
  padding: 1.1rem clamp(1.1rem, 2vw, 1.6rem); border-bottom: 1px solid var(--v2-hair-soft);
}
.v2-crow:last-child { border-bottom: 0; }
.v2-clabel {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); align-self: center;
}
.v2-csc, .v2-clc { color: var(--text); font-size: .92rem; padding-left: .9rem; }
.v2-csc { border-left: 2px solid rgba(255,107,26,.5); }
.v2-clc { border-left: 2px solid rgba(79,195,217,.5); }

/* ---------------------------------------------------------- the ledger ---- */
.v2-ledger { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: clip; }
.v2-ledger-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  padding: var(--s-4); border-bottom: 1px solid var(--line-strong); background: var(--bg-2);
}
.v2-fbtn {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .06em;
  padding: .45rem .95rem; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  transition: background .2s, border-color .2s, color .2s;
}
.v2-fbtn:hover { color: var(--text-soft); border-color: rgba(233,238,245,.4); }
.v2-fbtn[aria-pressed="true"] { background: var(--accent-soft); border-color: rgba(232,161,60,.5); color: var(--accent-3); }
.v2-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--v2-fs-micro); color: var(--muted); }
.v2-lrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: .9rem var(--s-4); border-bottom: 1px solid var(--v2-hair-soft);
}
.v2-lrow:hover { background: rgba(255,255,255,.025); }
.v2-lrow .v2-tk { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-body); letter-spacing: -.01em; min-width: 4.6rem; }
.v2-lrow .v2-meta { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.v2-lrow .v2-meta.is-entry { color: var(--text-soft); }
.v2-lrow .v2-mv { margin-left: auto; }
.v2-badge {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: var(--v2-fs-micro); letter-spacing: .1em; padding: .2rem .55rem; border-radius: var(--radius-pill);
}
.v2-badge.is-sc { background: rgba(255,107,26,.12); color: var(--sc-2); border: 1px solid var(--sc-line); }
.v2-badge.is-lc { background: rgba(79,195,217,.12); color: var(--lc-2); border: 1px solid var(--lc-line); }
.v2-mv {
  display: inline-flex; align-items: center; font-family: var(--font-mono);
  font-size: var(--v2-fs-micro); font-weight: 500; padding: .28rem .7rem; border-radius: var(--radius-pill);
}
.v2-mv.is-dbl  { background: rgba(232,161,60,.14); color: var(--accent-3); border: 1px solid rgba(232,161,60,.4); }
.v2-mv.is-ran  { background: rgba(57,217,138,.1);  color: var(--up);       border: 1px solid rgba(57,217,138,.28); }
.v2-mv.is-flat { background: rgba(139,163,196,.08); color: var(--muted);   border: 1px solid rgba(139,163,196,.2); }
.v2-ledger-foot { padding: var(--s-4); font-size: .78rem; color: var(--faint); line-height: 1.6; background: var(--bg-2); }

/* ---------------------------------------------------------- the plans ----- */
.v2-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); max-width: 900px; margin-inline: auto; }
.v2-plan {
  display: flex; flex-direction: column; border: 1px solid var(--line);
  border-radius: 12px; background: var(--v2-panel); padding: clamp(1.6rem, 2.5vw, 2.2rem);
}
.v2-plan.is-sc { border-top: 3px solid var(--sc); }
.v2-plan.is-lc { border-top: 3px solid var(--lc); }
.v2-plan-price { margin: var(--s-4) 0 var(--s-1); display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.v2-plan-price b { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; color: var(--text); }
.v2-plan-price span { color: var(--muted); font-size: .9rem; }
.v2-plan-sub { margin: var(--s-2) 0 var(--s-5); color: var(--muted); font-size: .9rem; }
.v2-plan ul { display: grid; gap: .65rem; margin: 0 0 var(--s-6); }
.v2-plan li { display: flex; gap: var(--s-3); color: var(--text-soft); font-size: .92rem; }
.v2-plan li::before { content: "\2014"; flex: none; }
.v2-plan.is-sc li::before { color: var(--sc-2); }
.v2-plan.is-lc li::before { color: var(--lc-2); }
.v2-plan li.is-off, .v2-plan li.is-off::before { color: var(--faint); }
.v2-plan .v2-btn { margin-top: auto; width: 100%; padding: .9rem 1.5rem; font-size: .95rem; box-shadow: var(--v2-gold-sm); }
.v2-both {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
  border: 1px solid rgba(232,161,60,.42); border-radius: 12px; background: rgba(232,161,60,.07);
  padding: var(--s-5) clamp(1.4rem, 2.5vw, 2.2rem);
}
.v2-both-n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; color: var(--text); }
.v2-both-n small { font-size: .55em; color: var(--muted); font-weight: 600; }
.v2-both p { margin: 0; color: var(--text-soft); font-size: .9rem; flex: 1 1 24ch; }
.v2-both .v2-btn { border-color: rgba(232,161,60,.5); color: var(--accent-3); background: rgba(232,161,60,.08); padding: .8rem 1.4rem; font-size: .9rem; box-shadow: none; }

/* ------------------------------------------------------------ login v2 ---- */
.v2-auth { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - 72px); }
.v2-auth-pitch {
  position: relative; display: grid; align-content: center; gap: var(--s-4);
  padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
  overflow: clip; border-right: 1px solid var(--line);
}
.v2-auth-pitch > * { position: relative; }
.v2-auth-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(55% 45% at 20% 25%, rgba(255,107,26,.10), transparent 65%),
              radial-gradient(50% 45% at 80% 75%, rgba(79,195,217,.09), transparent 65%);
}
.v2-auth-form { display: grid; align-content: center; padding: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 4rem); }
.v2-auth-form > div { width: min(100%, 420px); margin-inline: auto; }
.v2-steps { display: grid; gap: .7rem; margin-top: var(--s-4); }
.v2-steps div { display: flex; gap: var(--s-3); align-items: flex-start; }
.v2-steps i { font-style: normal; color: var(--sc-2); font-family: var(--font-mono); font-size: .8rem; margin-top: .15rem; flex: none; }
.v2-steps span { color: var(--text-soft); font-size: .92rem; }
.v2-auth-figs {
  margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
}
.v2-auth-figs b { font-weight: 500; color: var(--text); }
.v2-auth-figs b.v2-up { color: var(--up); }
.v2-tabs { display: flex; padding: .3rem; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface); margin-bottom: var(--s-6); }
.v2-tab {
  flex: 1; padding: .6rem 1rem; border-radius: var(--radius-pill); border: 0;
  background: transparent; color: var(--muted);
  font-family: var(--font-body); font-weight: 600; font-size: .88rem; transition: background .25s, color .25s;
}
.v2-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-3); }
.v2-flabel {
  display: block; font-family: var(--font-mono); font-size: var(--v2-fs-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2);
}
.v2-input {
  width: 100%; padding: .95rem 1.2rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font-size: var(--fs-body); font-family: var(--font-body);
  transition: border-color .2s var(--ease);
}
.v2-input::placeholder { color: var(--faint); }
.v2-input:focus { border-color: var(--accent-line); }
.v2-opts { border: 0; padding: 0; margin: var(--s-5) 0 0; }
.v2-opts legend { font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 0 0 var(--s-3); }
.v2-opt {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: .85rem 1rem;
  margin-bottom: var(--s-2); border-radius: var(--radius-lg); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: border-color .18s, background .18s;
}
.v2-opt input { position: absolute; opacity: 0; pointer-events: none; }
.v2-opt .v2-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: .25rem; border: 1px solid var(--line-strong); transition: background .18s, border-color .18s; }
.v2-opt b { font-size: .95rem; font-weight: 600; display: block; }
.v2-opt small { color: var(--muted); font-size: .82rem; line-height: 1.45; display: block; }
/* SELECTED STATE IS A CLASS, NOT :has(input:checked). This exact rule was
   already written with :has() once and had to be undone: :has() does not
   invalidate when a radio's checked state changes, and it outranks the class,
   so the card the user clicked stayed unpainted while a stale one stayed lit.
   login.html's paintPlan() toggles .is-picked on every change; that is the only
   thing allowed to decide which option looks selected. */
.v2-opt.is-picked { background: rgba(232,161,60,.07); }
.v2-opt.is-sc.is-picked { border-color: var(--sc); }
.v2-opt.is-sc.is-picked .v2-dot { background: var(--sc); border-color: var(--sc); }
.v2-opt.is-lc.is-picked { border-color: var(--lc); }
.v2-opt.is-lc.is-picked .v2-dot { background: var(--lc); border-color: var(--lc); }
.v2-opt.is-both.is-picked { border-color: var(--accent); }
.v2-opt.is-both.is-picked .v2-dot { background: var(--accent); border-color: var(--accent); }
.v2-opt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The tab state is likewise a class: the inline handler already toggles
   .active, and aria-selected is kept in step for screen readers. */
.v2-tab.active, .v2-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-3); }
.v2-seal {
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-3); justify-content: center;
  color: var(--faint); font-size: .8rem;
}

/* ------------------------------------------------------------ responsive -- */
/* Two breakpoints only, 900 and 640, matching the rest of the sheet. */
@media (max-width: 900px) {
  .v2-fork { grid-template-columns: 1fr; }
  .v2-fork-side { min-height: 0; }
  .v2-fork-side + .v2-fork-side { border-left: 0; border-top: 1px solid var(--v2-hairline); }
  .v2-record { grid-template-columns: 1fr; }
  .v2-integrity, .v2-statrail { grid-template-columns: repeat(2, 1fr); }
  .v2-integrity > div,
  .v2-integrity > div:first-child,
  .v2-integrity > div:last-child { padding-inline: var(--s-4); border-left: 0; }
  .v2-integrity > div:nth-child(odd)  { padding-inline: 0 var(--s-4); }
  .v2-integrity > div:nth-child(even) { padding-inline: var(--s-4) 0; border-left: 1px solid var(--line); }
  .v2-outcomes, .v2-plans { grid-template-columns: repeat(2, 1fr); }
  .v2-conds { grid-template-columns: repeat(3, 1fr); }
  .v2-cond.is-sealed { grid-column: 1 / -1; }
  .v2-crow { grid-template-columns: 1fr; gap: var(--s-2); }
  .v2-auth { grid-template-columns: 1fr; min-height: 0; }
  .v2-auth-pitch { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .v2-hero { min-height: 0; }
  .v2-d1, .v2-d2 { max-width: none; }
  .v2-integrity, .v2-statrail, .v2-outcomes, .v2-plans { grid-template-columns: 1fr; }
  .v2-integrity > div,
  .v2-integrity > div:nth-child(odd),
  .v2-integrity > div:nth-child(even) { padding-inline: 0; border-left: 0; }
  .v2-conds { grid-template-columns: repeat(2, 1fr); }
  .v2-cond.is-sealed { grid-column: 1 / -1; }
  .v2-figs { gap: var(--s-4); }
  .v2-figs .v2-div { display: none; }
  .v2-lrow .v2-mv { margin-left: 0; }
  .v2-btn { padding: .9rem 1.4rem; }
}

/* Motion off means motion off: the lifts stop here, and the field script checks
   the same query before it ever animates a single ember. */
@media (prefers-reduced-motion: reduce) {
  .v2-btn:hover, .v2-fork-side:hover .v2-enter i { transform: none; }
}

/* ============================================================================
   V2 — THE DASHBOARD (Command Deck)
   ----------------------------------------------------------------------------
   "Ignition — Dashboard v2.dc.html" applied as a RESTYLE, not a rewrite. The
   dashboard's information architecture already matches the design: both books
   side by side as .dash-card sections, a book dot in each heading, a jump bar
   carrying live counts, a positions table with a book filter, and the field
   guide in a <details>. What differed was the finish.

   So this is CSS only. account.js is 1,939 lines bound to ~50 ids (telegram
   connect/notify per book, position search, plan card, both-book chart); every
   one of those contracts survives untouched, which is the entire reason this is
   a stylesheet change and not new markup.
   ========================================================================== */

/* ---- BOOK IDENTITY: Small Cap becomes the ember ---------------------------
   #2ee08f was a second green sitting next to --up #39d98a, so "which book" and
   "did it make money" were the same colour with eight units of hue between
   them. v2 gives each book its own identity hue and reserves green for money.
   THE CHART IS NOT TOUCHED: main.js:1124 strokes the small-cap equity line
   #39d98a because that line IS the money, and the v2 track-record design pairs
   exactly that green line with an orange SC chip in the ledger beside it. */
.book-badge.sc { background: rgba(255,107,26,.12); color: var(--sc-2); border-color: var(--sc-line); }
.book-badge.sc::before { background: var(--sc); }
.book-dot.sc { background: var(--sc); box-shadow: 0 0 0 3px rgba(255,107,26,.16); }
.book-dot.lc { background: var(--lc); box-shadow: 0 0 0 3px rgba(79,195,217,.16); }

/* ---- the greeting row ---------------------------------------------------- */
.dash-head {
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
  align-items: flex-end;
}
.dash-hi {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro);
  letter-spacing: .24em; text-transform: uppercase; color: var(--ice);
}
.dash-head h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  line-height: 1.05; letter-spacing: -.025em;
}
.dash-email { font-family: var(--font-mono); font-size: .78rem; color: var(--muted); }
.tier-chip {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .16em;
  text-transform: uppercase; padding: .32rem .7rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(232,161,60,.45); color: var(--accent-3); background: rgba(232,161,60,.1);
}

/* ---- the live pill ------------------------------------------------------- */
.dash-live {
  border: 1px solid rgba(46,224,143,.4); border-radius: var(--radius);
  background: rgba(46,224,143,.05); padding: .7rem 1rem;
  font-family: var(--font-mono); font-size: .8rem; color: var(--text-soft);
}
.dash-live .ls-dot { background: var(--up); animation: v2Pulse 2.4s ease infinite; }

/* ---- the jump bar, as the design's KPI strip ----------------------------- */
.dash-jump a {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); padding: .7rem 1rem;
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .06em;
  color: var(--muted); transition: border-color .2s var(--ease), color .2s var(--ease);
}
.dash-jump a:hover { border-color: var(--line-strong); color: var(--text-soft); }
.dash-jump a b { color: var(--text); font-family: var(--font-display); font-weight: 800; }

/* ---- the book panels ----------------------------------------------------- */
.dash-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: none;
}
#sec-sc.dash-card { border-top: 3px solid var(--sc); }
#sec-lc.dash-card { border-top: 3px solid var(--lc); }
.dash-card-head {
  padding-bottom: .9rem; border-bottom: 1px solid var(--line);
}
.dash-card-head h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.01em; display: flex; align-items: center; gap: .55rem;
}

/* ---- the alert board bar ------------------------------------------------- */
.board-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em;
}
.as-label, .as-btn {
  font-family: var(--font-mono); font-size: var(--v2-fs-micro); letter-spacing: .06em; text-transform: uppercase;
}
.as-btn {
  padding: .4rem .8rem; border-radius: var(--radius-pill);
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  transition: background .2s, border-color .2s, color .2s;
}
.as-btn:hover { color: var(--text-soft); border-color: rgba(233,238,245,.4); }
.as-btn.active { background: var(--accent-soft); border-color: rgba(232,161,60,.5); color: var(--accent-3); }

/* ---- the field guide ----------------------------------------------------- */
.dash-explainer { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.dash-explainer summary { list-style: none; cursor: pointer; user-select: none; }
.dash-explainer summary::-webkit-details-marker { display: none; }
.dx-arrow { color: var(--accent-3); }
.sig-n {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent-3);
  border: 1px solid var(--accent-line); border-radius: 50%;
  width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; font-size: var(--v2-fs-micro);
}


/* ============================================================================
   HOW IT WORKS — hero pair + exit-figure roles (2026-08-16)
   ----------------------------------------------------------------------------
   The hero was a single left column: measured at 1440px the lead ran 707px of a
   1240px container (57%), leaving 533px of dead space beside a 689px-tall
   section. It now carries the page's thesis on the right — the two price shapes
   the two engines hunt — so the width is doing work instead of being empty.
   ========================================================================== */
.v2-top-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.v2-top-copy { min-width: 0; }

.v2-shapes {
  margin: 0; min-width: 0;
  display: grid; gap: var(--s-4);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--v2-panel, var(--surface));
}
.v2-shape { min-width: 0; }
.v2-shape svg { display: block; width: 100%; height: auto; overflow: visible; }
.v2-shape-h {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s-2);
}
.v2-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.v2-dot.is-sc { background: var(--sc); }
.v2-dot.is-lc { background: var(--lc); }
.v2-shape-t { font-family: var(--font-mono); font-size: 9px; fill: var(--faint); letter-spacing: .04em; }
.v2-shape-cap {
  margin: 0; padding-top: var(--s-1);
  border-top: 1px solid var(--v2-hair-soft, var(--line));
  font-size: var(--fs-sm); color: var(--faint); text-align: center;
}

/* Role kicker over each exit figure. Without it, "35%" sat beside "−10%" with
   nothing to say that one is a loss being cut and the other is a profit being
   banked — which is exactly how a profit-taking rule came to read as a loss. */
.v2-fig-k {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: var(--s-1);
}
.v2-exit .is-give { color: var(--up); }     /* green, and now with no minus sign */

@media (max-width: 900px) {
  .v2-top-grid { grid-template-columns: 1fr; }
  .v2-shapes { order: 2; }
}

/* ---- unlinked Telegram nudge -------------------------------------------------
   Large Cap went live with 9 entitled members and 2 connected bots. The Connect
   button was always there; nothing drew the eye to it. Only applied when the
   product is actually sending, so a dormant product never nags. */
.dash-row.tg-unlinked { border-left: 2px solid var(--accent); padding-left: .7rem; }
.dash-row.tg-unlinked #tglc-state, .dash-row.tg-unlinked #tg-state { color: var(--accent-3); }

/* 12px floor inside the results tables. .dash-muted resolves to --fs-base (15px)
   on its own, but the Notes cells were computing 11.7px from an em-based table
   rule -- the one column whose whole job is explaining the row was the smallest
   text on the page. */
table.tr .dash-muted, table.tr .note-cell { font-size: var(--fs-sm); }

/* The "held so far" suffix in the holding-period cell. Sized here rather than
   inline: it carried style="font-size:.78em" from the row builder, which no
   stylesheet rule can override, so it sat at 11.7px in 43 cells. */
.held-note { font-size: .85em; }

/* Mono micro-label sitting above a panel (chart head, "last updated"). Was set
   inline on index.html at .7rem = 11.2px and on legal.html at .76rem, which put
   the chart's date window below the 12px floor with no way to fix it in CSS. */
.v2-mono-label {
  font-size: var(--v2-fs-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- TOUCH TARGETS -------------------------------------------------------
   At 390px every interactive control measured 33-36px tall: the nav's primary
   CTA (33px, and it is on every page), the login tabs, the chart range buttons
   and the track-record filter chips. That clears the WCAG 2.2 AA minimum of
   24px but sits under the 44px touch standard, which is the one that decides
   whether a thumb hits the button or the gap beside it.

   min-height, not height: these are inline-flex with centred content, so the
   box grows and the label stays put. Applied only where touch is the input. */
@media (max-width: 640px), (pointer: coarse) {
  .btn, .v2-btn, .v2-tab,
  .seg button, .chip, .bf-btn, .as-btn,
  .nav-toggle, .dash-jump a {
    min-height: 44px;
  }
  /* keep the label optically centred once the box is taller than the text */
  .seg button, .chip, .bf-btn, .as-btn, .v2-tab {
    display: inline-flex; align-items: center; justify-content: center;
  }
}