/* =========================================================
   FlowStructure — Design Tokens
   Palette pulled from the brand brief + the trading domain:
   candle green/red sit alongside the core navy/cyan so the
   accent system reads as "market", not generic dark-mode SaaS.
   ========================================================= */
:root{
  --navy-950:#0B121F;   /* deepest layer — dividers, footer */
  --navy-900:#111827;   /* primary background */
  --navy-800:#17202F;   /* card surfaces */
  --navy-700:#212C3D;   /* borders, hairlines */
  --cyan-400:#38BDF8;   /* primary accent */
  --cyan-300:#7DD3FC;   /* hover / bright accent */
  --cyan-900:#0E3040;   /* accent fill, low-contrast tint */
  --ink-0:#F1F4F9;      /* primary text */
  --ink-300:#AAB4C6;    /* secondary text */
  --ink-500:#77839A;    /* tertiary / captions */
  --candle-up:#34D399;  /* bullish green — used sparingly, as data, not decoration */
  --candle-down:#F87171;/* bearish red — ditto */

  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;

  --radius-s:6px;
  --radius-m:12px;
  --radius-l:20px;
  --maxw:1180px;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* ---- Role tokens, deliberately outside every theme scope ----
     body.theme-light, and the .card / .calc-dark / .dark-block blocks,
     all re-declare the palette names above. None of them re-declares
     these, so they hold one value on every tier. They exist for the Learn
     articles, which put dark components on a light page: those colours
     belong to the dark palette, which the tier token names no longer carry
     once theme-light has redefined them.
     --accent-fixed rather than --accent: --accent is already a per-section
     local, set inline on the calculator sections and read through
     var(--accent, var(--cyan-400)) fallbacks. Defining it here would
     resolve those fallbacks globally and repaint every candle-rule divider
     on the light pages. */
  --surface-dark:#111827;            /* dark card / table surface on a light page */
  --on-dark:#F1F4F9;                 /* primary text on that surface */
  --on-dark-muted:#8A94A6;           /* secondary text on that surface */
  --accent-fixed:#38BDF8;            /* brand cyan that does not shift with tier */
  --link:#0B6FA8;                    /* body link on a light ground */
  --link-hover:#38BDF8;
  --rule-soft:rgba(241,244,249,.1);  /* hairline on a dark surface */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

body{
  margin:0;
  background:var(--navy-900);
  color:var(--ink-0);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.4rem,5vw,4rem);}
h2{font-size:clamp(1.7rem,3vw,2.4rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em; color:var(--ink-300);}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-400);
  display:flex;
  align-items:center;
  gap:.55em;
  margin-bottom:1em;
}
.eyebrow::before{
  content:'';
  display:inline-block;
  width:3px; height:14px;
  background:var(--candle-up);
  border-radius:1px;
}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
section{padding:96px 0;}
.section-tight{padding:64px 0;}
@media (max-width:720px){
  section{padding:64px 0;}
  .wrap{padding:0 20px;}
}

/* ---------- nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,18,31,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--navy-700);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px; max-width:var(--maxw); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:.6em; font-family:var(--font-display); font-weight:600; font-size:1.05rem;}
.brand-mark{width:20px; height:20px;}
.brand-mark .wick{stroke:var(--ink-500); stroke-width:2;}
.brand-mark .body{fill:var(--cyan-400);}
.brand-mark-img{height:26px; width:auto; display:block;}
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(56,189,248,.08); border:1px solid rgba(56,189,248,.25);
  border-radius:999px; padding:.5em 1.1em; margin-bottom:1.1em;
}
.eyebrow-pill .dot{width:6px; height:6px; border-radius:50%; background:var(--candle-up);}
.eyebrow-pill span.label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; color:var(--cyan-300); text-transform:uppercase;}
.cover-shot{max-width:100%; height:auto; filter:drop-shadow(0 24px 48px rgba(0,0,0,.55));}
.cover-shot-sm{max-width:140px; height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));}

.nav-links{display:flex; gap:2.1em; list-style:none; margin:0; padding:0;}
.nav-links a{
  font-size:.92rem; color:var(--ink-300);
  position:relative; padding:.2em 0;
  transition:color .2s var(--ease);
}
.nav-links a:hover, .nav-links a.active{color:var(--ink-0);}
.nav-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--cyan-400);
}
.nav-right{display:flex; align-items:center; gap:1.4em;}
.nav-right a.login{font-size:.9rem; color:var(--ink-300);}
.nav-right a.login:hover{color:var(--ink-0);}
.nav-toggle{display:none; background:none; border:none; color:var(--ink-0); cursor:pointer;}
@media (max-width:880px){
  .nav-links{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; gap:0;
    background:var(--navy-950); border-bottom:1px solid var(--navy-700);
    padding:8px 28px 20px; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:all .25s var(--ease);
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-links li{border-top:1px solid var(--navy-700);}
  .nav-links a{display:block; padding:14px 0;}
  .nav-toggle{display:block;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-body); font-weight:600; font-size:.94rem;
  padding:.85em 1.5em; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--cyan-400); color:var(--navy-950);}
.btn-primary:hover{background:var(--cyan-300);}
.btn-ghost{border-color:var(--navy-700); color:var(--ink-0);}
.btn-ghost:hover{border-color:var(--cyan-400); color:var(--cyan-300);}
.btn-row{display:flex; gap:.9em; flex-wrap:wrap; margin-top:1.8em;}

/* ---------- candle divider (signature structural motif) ---------- */
.candle-rule{
  display:flex; align-items:center; gap:6px; margin:0 0 1.4em;
}
.candle-rule i{
  display:block; width:3px; border-radius:2px; background:var(--navy-700);
}
.candle-rule i:nth-child(1){height:10px;}
.candle-rule i:nth-child(2){height:22px; background:var(--candle-up);}
.candle-rule i:nth-child(3){height:14px;}
.candle-rule i:nth-child(4){height:26px; background:var(--rule-accent, var(--accent, var(--cyan-400)));}
.candle-rule i:nth-child(5){height:8px;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:140px 0 110px;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-inner{
  position:relative; z-index:1; max-width:760px;
  background:radial-gradient(ellipse 72% 68% at 50% 42%, rgba(17,24,39,.62) 0%, rgba(17,24,39,.3) 48%, rgba(17,24,39,0) 80%);
}
.hero .btn-row{margin-top:2.2em;}
.candle-layer{position:absolute; top:0; left:0; width:100%; height:420px; opacity:.2; overflow:hidden;}
.candle-track{position:relative; height:100%;}
.candle-wick{position:absolute; width:2px;}
.candle-body{position:absolute; width:10px; border-radius:1px;}
.grid-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(var(--navy-900) 0%, transparent 32px, transparent 82%, var(--navy-900) 100%),
    linear-gradient(90deg, var(--navy-900) 0%, transparent 10%, transparent 90%, var(--navy-900) 100%);
}

/* ---------- cards ---------- */
.card{
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:var(--radius-l);
  padding:32px; transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover{border-color:var(--cyan-400); transform:translateY(-3px);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media (max-width:880px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.pill{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em;
  padding:.3em .8em; border-radius:999px; border:1px solid var(--navy-700); color:var(--ink-300);
  text-transform:uppercase;
}
.pill.live{border-color:var(--candle-up); color:var(--candle-up);}
.pill.soon{border-color:var(--cyan-400); color:var(--cyan-400);}

/* ---------- forms ---------- */
.field{margin-bottom:1.2em;}
.field label{display:block; font-size:.85rem; color:var(--ink-300); margin-bottom:.5em;}
.field input, .field select, .field textarea{
  width:100%; background:var(--navy-950); border:1px solid var(--navy-700); color:var(--ink-0);
  border-radius:var(--radius-s); padding:.8em 1em; font-family:var(--font-mono); font-size:.95rem;
  transition:border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cyan-400);
}
.field textarea{font-family:var(--font-body); resize:vertical; min-height:110px;}
:focus-visible{outline:2px solid var(--cyan-400); outline-offset:2px;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--navy-950); border-top:1px solid var(--navy-700); padding:56px 0 28px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px;}
@media (max-width:720px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-size:.8rem; color:var(--ink-500); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-mono); margin-bottom:1em;}
.footer-grid a{display:block; color:var(--ink-300); font-size:.9rem; margin-bottom:.7em;}
.footer-grid a:hover{color:var(--cyan-400);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  padding-top:24px; border-top:1px solid var(--navy-700);
  font-size:.8rem; color:var(--ink-500);
}
.social-row{display:flex; gap:14px;}
.social-row a{color:var(--ink-500);}
.social-row a:hover{color:var(--cyan-400);}

/* ---------- utility ---------- */
.center{text-align:center;}
.muted{color:var(--ink-500);}
.accent{color:var(--cyan-400);}
.mono{font-family:var(--font-mono);}
.mt-lg{margin-top:2.5em;}
.divider{height:1px; background:var(--navy-700); margin:0 0 40px;}
.hidden-section{display:none;}
.badge-num{
  font-family:var(--font-mono); font-size:.78rem; color:var(--cyan-400);
  border:1px solid var(--cyan-900); background:var(--cyan-900); border-radius:6px;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; margin-bottom:1em;
}
.result-box{
  background:var(--navy-950); border:1px solid var(--cyan-900); border-radius:var(--radius-m);
  padding:24px; font-family:var(--font-mono);
}
.result-row{display:flex; justify-content:space-between; padding:.5em 0; border-bottom:1px dashed var(--navy-700); font-size:.95rem;}
.result-row:last-child{border-bottom:none;}
.result-row span:last-child{color:var(--cyan-300); font-weight:600;}

/* ---------- segmented controls (risk presets / instrument tabs) ---------- */
.seg-group{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:.9em;}
.seg-btn{
  font-family:var(--font-mono); font-size:.82rem; padding:.6em 1em; border-radius:8px;
  background:var(--navy-950); border:1px solid var(--navy-700); color:var(--ink-300); cursor:pointer;
  transition:all .15s var(--ease);
}
.seg-btn:hover{border-color:var(--cyan-400); color:var(--ink-0);}
.seg-btn.active{background:var(--cyan-900); border-color:var(--cyan-400); color:var(--cyan-300);}

/* seg-grid: same look as seg-group, but fixed grid columns so long labels
   (account currency codes, lot-size presets) shrink to fit instead of
   pushing the row past the container edge on narrow phones. */
.seg-grid{display:grid; gap:6px; margin-bottom:.9em;}
.seg-grid .seg-btn{width:100%; min-width:0; text-align:center; white-space:normal; line-height:1.25;}
.seg-grid-4{grid-template-columns:repeat(4, minmax(0,1fr));}
.seg-grid-3{grid-template-columns:repeat(3, minmax(0,1fr));}
/* three columns across phones, not only the very narrowest ones */
@media (max-width:600px){
  .seg-grid-4{grid-template-columns:repeat(3, minmax(0,1fr));}
}

/* ---------- stat cards ---------- */
.stat-card{
  background:var(--navy-800); border:1px solid var(--navy-700); border-radius:var(--radius-l);
  padding:22px; text-align:center;
}
.stat-label{font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); margin-bottom:.6em;}
.stat-value{font-family:var(--font-mono); font-size:1.6rem; font-weight:600;}
.stat-suffix{font-size:.78rem; color:var(--ink-500); margin-top:.4em;}

/* ---------- price ladder ---------- */
.ladder-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.7em 0; border-bottom:1px solid var(--navy-700);}
.ladder-row:last-child{border-bottom:none;}
.ladder-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.ladder-label{font-size:.9rem; color:var(--ink-300);}
.ladder-price{font-family:var(--font-mono); font-weight:600;}

.journal-row{display:flex; gap:10px; flex-wrap:wrap;}
.journal-code{
  flex:1; min-width:200px; font-family:var(--font-mono); font-size:.82rem; color:var(--ink-0);
  background:var(--navy-950); border:1px solid var(--navy-700); border-radius:var(--radius-s);
  padding:.9em 1.1em; overflow-x:auto; white-space:nowrap;
}

/* =========================================================
   Nav dropdown (Tools → Foundations Tools / Pro Tools)
   ========================================================= */
.nav-dd{position:relative;}
.nav-dd-toggle{
  display:inline-flex; align-items:center; gap:.4em;
  background:none; border:none; cursor:pointer; padding:.2em 0;
  font-family:var(--font-body); font-size:.92rem; color:var(--ink-300);
  position:relative; transition:color .2s var(--ease);
}
.nav-dd-toggle:hover, .nav-dd.open .nav-dd-toggle, .nav-dd-toggle.active{color:var(--ink-0);}
.nav-dd-toggle.active::after{
  content:''; position:absolute; left:0; right:14px; bottom:-6px; height:2px; background:var(--cyan-400);
}
.nav-dd-chev{transition:transform .2s var(--ease); flex-shrink:0;}
.nav-dd.open .nav-dd-chev{transform:rotate(180deg);}
.nav-dd-menu{
  position:absolute; top:calc(100% + 14px); left:-14px; min-width:210px;
  list-style:none; margin:0; padding:8px;
  background:var(--navy-950); border:1px solid var(--navy-700); border-radius:var(--radius-m);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition:opacity .18s var(--ease), transform .18s var(--ease);
  z-index:120;
}
.nav-dd-menu li{border:none;}
.nav-dd-menu a{
  display:block; padding:.62em .9em; border-radius:8px;
  font-size:.9rem; color:var(--ink-300);
}
.nav-dd-menu a:hover, .nav-dd-menu a.active{background:var(--navy-800); color:var(--ink-0);}
.nav-dd-menu a.active{color:var(--cyan-300);}
.nav-dd-menu a::after{display:none;}
@media (min-width:881px){
  /* hover bridge so the menu doesn't close in the gap under the toggle */
  .nav-dd::after{content:''; position:absolute; left:0; right:0; top:100%; height:16px;}
  .nav-dd:hover .nav-dd-menu,
  .nav-dd:focus-within .nav-dd-menu,
  .nav-dd.open .nav-dd-menu{opacity:1; transform:none; pointer-events:auto;}
}
@media (max-width:880px){
  .nav-dd-toggle{display:flex; width:100%; justify-content:space-between; padding:14px 0;}
  .nav-dd-toggle.active::after{display:none;}
  .nav-dd-menu{
    position:static; min-width:0; display:none;
    opacity:1; transform:none; pointer-events:auto;
    background:none; border:none; box-shadow:none; padding:0 0 12px 14px;
  }
  .nav-dd.open .nav-dd-menu{display:block;}
  .nav-dd-menu a{padding:10px 0;}
  .nav-dd-menu a:hover, .nav-dd-menu a.active{background:none;}
}

/* =========================================================
   Tool / indicator cards + client-side lock state

   NOTE: the lock state below is PRESENTATION ONLY. It is a
   visual preview layer, not access control. Real deliverables
   (indicator files, TradingView invites, video) are delivered
   through Sellfy's verified-purchase flow — never from behind
   this front-end gate.
   ========================================================= */
.tool-card{display:flex; flex-direction:column; gap:.2em;}
.tool-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:.9em;}
.tool-card h3{margin:0;}
.tool-card p{margin:0 0 1.1em; font-size:.94rem;}
.tool-card .tag-row{margin-top:auto;}

.lock-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0; border-radius:8px;
  background:var(--navy-950); border:1px solid var(--navy-700); color:var(--ink-500);
}
.card.is-locked{border-style:dashed;}
.card.is-locked:hover{transform:none; border-color:var(--navy-700);}

.tag{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.4em .8em; border-radius:999px;
  background:var(--cyan-900); border:1px solid var(--cyan-900); color:var(--cyan-300);
}
.tag-muted{background:transparent; border-color:var(--navy-700); color:var(--ink-500);}
.tag-live{background:transparent; border-color:var(--candle-up); color:var(--candle-up);}

.notice{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--navy-950); border:1px solid var(--cyan-900); border-radius:var(--radius-m);
  padding:20px 22px;
}
.notice svg{flex-shrink:0; color:var(--cyan-400); margin-top:2px;}
.notice p{margin:0; font-size:.9rem;}
.notice strong{color:var(--ink-0);}

/* tier banner — the light/dark hand-off between Foundations and Pro */
.tier-strip{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-500);
}
.tier-strip b{color:var(--cyan-400); font-weight:500;}

/* =========================================================
   FOUNDATIONS TIER — light theme
   Same tokens, light values, so every existing component
   (cards, fields, seg controls, stat cards, result boxes)
   inherits the tier without being rebuilt. Nav + footer are
   pinned back to the dark values so navy stays constant.
   ========================================================= */
body.theme-light{
  /* Every value below clears WCAG AA (4.5:1) for body-size text against the
     surface it actually lands on — the dark palette's cyans and greens do not
     survive a straight flip onto white, so they are darkened here. */
  --navy-950:#E7EDF6;   /* section bands, inset surfaces — inputs, result boxes */
  --navy-900:#F4F7FB;   /* page background */
  --navy-800:#FFFFFF;   /* card surfaces */
  --navy-700:#D3DDEA;   /* borders, hairlines */
  --cyan-400:#0470AB;   /* accent — 5.4:1 on white, and as button fill under white text */
  --cyan-300:#075985;   /* stronger accent / data values */
  --cyan-900:#E0F2FE;   /* accent tint */
  --ink-0:#0B121F;      /* primary text — brand navy */
  --ink-300:#48566B;    /* secondary text */
  --ink-500:#5C6A80;    /* tertiary / captions */
  --candle-up:#047857;
  --candle-down:#DC2626;
  /* stated outright as well as via the token, so the light page cannot
     depend on custom-property resolution to get its own background */
  background:#F4F7FB;
  color:#0B121F;
}
/* keep the nav solid navy — the blur would otherwise pull the light page through */
body.theme-light .site-header{background:rgba(11,18,31,.95);}
/* the callout sits on a navy-950 band, so it needs the card surface to read as a box */
body.theme-light .notice{background:var(--navy-800); border-color:#BAE6FD;}
/* the neutral candles in the divider need weight to survive on a light ground */
body.theme-light .candle-rule i:nth-child(1),
body.theme-light .candle-rule i:nth-child(3),
body.theme-light .candle-rule i:nth-child(5){background:#B4C2D6;}
body.theme-light .card{
  box-shadow:0 1px 2px rgba(11,18,31,.04), 0 10px 28px rgba(11,18,31,.05);
}
body.theme-light .stat-card{
  box-shadow:0 1px 2px rgba(11,18,31,.04), 0 10px 28px rgba(11,18,31,.05);
}
/* The dark tier's hero scrim is a dark ellipse, so the light tier used to
   drop it outright. index.html still runs the candle layer behind a thin
   Instrument Serif headline though, and the candles read through the
   hairlines — so the scrim returns in the page colour, on the same ellipse
   geometry as the dark one. It clears the text column without dimming the
   candles across the rest of the hero. The other light pages have no candle
   layer, so this is page colour over page colour: no visible change. */
body.theme-light .hero-inner{
  background:radial-gradient(ellipse 72% 68% at 50% 42%,
    rgba(244,247,251,.92) 0%, rgba(244,247,251,.74) 48%, rgba(244,247,251,0) 80%);
}

/* Mobile: on a phone the hero stacks, so the candle layer ran the full height
   behind the whole text stack and the scrim above had to cover everything to
   keep the thin serif legible — which flattened the candles out entirely.
   Confine the layer to a band across the top instead. index.html's hero opens
   with 140px of padding plus 24px on .hero-inner, so a 120px band ends well
   clear of the pill; the copy below then sits on plain page colour and the
   scrim is no longer needed, which is what buys the candles their contrast
   back. Scoped to the light tier because index is the only light page with a
   candle layer — the dark heroes keep their full-height treatment. Desktop is
   untouched. */
@media (max-width:720px){
  body.theme-light .candle-layer{
    /* Clear the sticky header. It is in flow at rest, but it floats over the
       hero at z-index:100 as soon as the page scrolls, and the strip sat at
       the hero's top edge — so most of the candles went behind it. 64px is
       the header's height: 18px padding either side of a 26px mark, plus its
       border (the mobile nav panel pins to the same 64px).
       The strip stays at the hero-bg's z-index:0, below the header. */
    top:64px;
    /* Ends 12px clear of the copy: the hero's 140px padding plus 24px on
       .hero-inner puts the badge at y=164, and 64 + 88 = 152. */
    height:88px;
    opacity:.34;
    /* soft bottom edge so the band reads as a chart strip, not a clipped box */
    -webkit-mask-image:linear-gradient(#000 92%, transparent 100%);
    mask-image:linear-gradient(#000 92%, transparent 100%);
  }
  body.theme-light .hero-inner{background:none;}
}
body.theme-light .btn-primary{color:#FFFFFF;}
body.theme-light .btn-ghost{background:var(--navy-800);}
body.theme-light .eyebrow-pill{
  background:rgba(4,112,171,.07); border-color:rgba(4,112,171,.30);
}
body.theme-light .lock-chip{background:var(--navy-950);}
body.theme-light .journal-code{background:var(--navy-950);}

/* nav + footer stay navy on the light tier: re-declare the dark
   token set on those two subtrees so their contents invert back. */
body.theme-light .site-header,
body.theme-light .site-footer{
  --navy-950:#0B121F;
  --navy-900:#111827;
  --navy-800:#17202F;
  --navy-700:#212C3D;
  --cyan-400:#38BDF8;
  --cyan-300:#7DD3FC;
  --cyan-900:#0E3040;
  --ink-0:#F1F4F9;
  --ink-300:#AAB4C6;
  --ink-500:#77839A;
  --candle-up:#34D399;
  --candle-down:#F87171;
  color:var(--ink-0);
}
body.theme-light .site-header .btn-primary,
body.theme-light .site-footer .btn-primary{color:var(--navy-950);}
body.theme-light .site-footer .divider{background:var(--navy-700);}
body.theme-light .site-header .btn-ghost{background:transparent;}

/* ---------------------------------------------------------
   Dark calculator components on the light Foundations page.

   `.calc-dark` re-declares the dark token set on a calculator's
   wrapper, so every part of it (card surfaces, inputs, segmented
   controls, result boxes, stat cards, journal line) returns to the
   original dark navy design with its cyan/green/red accents —
   without any component being restyled twice. The page around it
   stays light; the calculators read as dark instrument panels
   sitting on it.
   --------------------------------------------------------- */
body.theme-light .calc-dark{
  --navy-950:#0B121F;
  --navy-900:#111827;
  --navy-800:#111827;
  --navy-700:#212C3D;
  --cyan-400:#38BDF8;
  --cyan-300:#7DD3FC;
  --cyan-900:#0E3040;
  --ink-0:#F1F4F9;
  --ink-300:#AAB4C6;
  --ink-500:#77839A;
  --candle-up:#34D399;
  --candle-down:#F87171;
  color:var(--ink-0);
}
/* a dark panel needs a deeper drop than a white card does to sit on light */
body.theme-light .calc-dark.card,
body.theme-light .calc-dark .card,
body.theme-light .calc-dark .stat-card{
  box-shadow:0 2px 6px rgba(11,18,31,.08), 0 18px 40px rgba(11,18,31,.14);
}
/* restore the original button treatment inside the panels */
body.theme-light .calc-dark .btn-primary{color:var(--navy-950);}
body.theme-light .calc-dark .btn-ghost{background:transparent;}

/* =========================================================
   Calculator teaching elements — restored from the original
   calculator sources (Tools/*.tsx and the R-Multiple /
   Expectancy builds). The explanatory copy is the product,
   not decoration: keep it when restyling.
   ========================================================= */

/* the accent dot beside a calculator's name.
   Risk / R:R / R-Multiple / Expectancy = cyan, Pip = amber. */
.calc-eyebrow{
  display:flex; align-items:center; gap:.65em;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-500); margin:0 0 1em;
}
.calc-eyebrow .dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--accent, var(--cyan-400));
}
/* accent dot on a panel heading — "If Stop Is Hit", "Your Result", "Pip Value" */
.panel-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:.65em; vertical-align:middle;
  background:var(--accent, var(--cyan-400));
}

/* the small teaching line under an input */
.hint{font-size:.78rem; color:var(--ink-500); margin:.6em 0 0; line-height:1.5;}
.hint strong{color:var(--ink-0); font-weight:500;}

/* plain-language reading of a result */
.interpret{font-size:.92rem; color:var(--ink-300); margin:.9em 0 0; line-height:1.55;}

/* "What is R?" / "What is Expectancy?" panels */
.explainer p{font-size:.82rem; color:var(--ink-500); margin:0 0 .85em; line-height:1.6;}
.explainer p:last-child{margin-bottom:0;}
.explainer b{color:var(--ink-0); font-weight:500;}

/* a note sitting under a result, above a hairline */
.subnote{
  font-size:.78rem; color:var(--ink-500); margin:1em 0 0;
  padding-top:1em; border-top:1px solid var(--navy-700);
}

/* R visual — planned risk against the actual result, drawn to scale */
.rbar-row{margin-bottom:1.1em;}
.rbar-row:last-child{margin-bottom:0;}
.rbar-head{
  display:flex; justify-content:space-between; gap:12px;
  font-size:.75rem; color:var(--ink-500); margin-bottom:.45em;
}
.rbar-head .val{font-family:var(--font-mono);}
.rbar-track{height:26px; border-radius:6px; background:var(--navy-950); overflow:hidden;}
.rbar-fill{
  height:100%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.74rem; font-weight:600;
  color:var(--navy-950); border-radius:6px; min-width:3em;
  transition:width .25s var(--ease);
}

/* segmented win/loss control in the R-Multiple calculator */
.seg-btn.active-win{background:rgba(52,211,153,.12); border-color:var(--candle-up); color:var(--candle-up);}
.seg-btn.active-loss{background:rgba(248,113,113,.12); border-color:var(--candle-down); color:var(--candle-down);}

/* input with a currency/percent affix */
.affix-wrap{position:relative;}
.affix-wrap .affix{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:.9rem; color:var(--ink-500); pointer-events:none;
}
.affix-wrap input{padding-left:2.4em !important;}
.affix-wrap.affix-right .affix{left:auto; right:14px;}
.affix-wrap.affix-right input{padding-left:1em !important; padding-right:2.2em !important;}

/* ---- Pip Calculator carries the amber accent through its whole panel ---- */
#pip-calculator #pc-lot-table .result-row span:last-child{color:var(--accent);}
#pip-calculator .field input:focus{border-color:var(--accent);}
#pip-calculator .seg-btn.active{
  background:rgba(251,191,36,.12); border-color:var(--accent); color:var(--accent);
}
#pip-calculator .btn-primary{background:var(--accent); color:#111827;}
#pip-calculator .btn-primary:hover{background:#fcd34d;}

/* Calculator name dividers carry one green bar and one red bar — the brand
   pair, one of each rather than two of a kind. Literal hexes: the light tier
   darkens --candle-up/--candle-down for text contrast, and these decorative
   bars should stay the brand values on every background. */
.candle-rule.rule-solid i:nth-child(2){background:#34D399;}
.candle-rule.rule-solid i:nth-child(4){background:#F87171;}

/* Indicator cards sit dark on the light page, matching the calculator panels. */
.indicator-card{--navy-800:#111827;}

/* A full-width dark slab on the light page — the Full Calculator Suite block.
   Re-declares the dark token set so headings, body copy, cards and controls
   inside it invert together, rather than being restyled one by one. */
body.theme-light .dark-block{
  --navy-950:#0B121F;
  --navy-900:#111827;
  --navy-800:#17202F;
  --navy-700:#212C3D;
  --cyan-400:#38BDF8;
  --cyan-300:#7DD3FC;
  --cyan-900:#0E3040;
  --ink-0:#F1F4F9;
  --ink-300:#AAB4C6;
  --ink-500:#77839A;
  --candle-up:#34D399;
  --candle-down:#F87171;
  background:#111827;
  color:var(--ink-0);
}
body.theme-light .dark-block .btn-primary{color:var(--navy-950);}
body.theme-light .dark-block .btn-ghost{background:transparent;}
body.theme-light .dark-block .card{box-shadow:none;}
body.theme-light .dark-block .notice{background:var(--navy-800); border-color:var(--cyan-900);}
/* the neutral divider bars follow the block, not the light page */
body.theme-light .dark-block .candle-rule i:nth-child(1),
body.theme-light .dark-block .candle-rule i:nth-child(3),
body.theme-light .dark-block .candle-rule i:nth-child(5){background:var(--navy-700);}

/* ---------------------------------------------------------
   Keep calculator inputs and results at a true 50/50.

   A bare `1fr` column still has min-width:auto, so a column
   whose content has a wide minimum (the R:R results stack:
   ratio card + nested 2-col stat grid + result rows + the
   200px journal line) grows past its share and squeezes the
   inputs opposite it. minmax(0,1fr) pins both columns equal
   no matter what lands inside, and lets the wide child scroll
   or wrap instead of pushing its column open.
   --------------------------------------------------------- */
.calc-dark.grid-2,
.calc-dark .grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.calc-dark .grid-3{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:880px){
  .calc-dark.grid-2,
  .calc-dark .grid-2,
  .calc-dark .grid-3{grid-template-columns:1fr;}
}
/* the journal line is the widest single child — let it scroll, not expand */
.calc-dark .journal-row{min-width:0;}
.calc-dark .journal-code{min-width:0;}

/* The accent line directly below a section's divider stays brand green.
   The light tier darkens --candle-up for text contrast; this bar is
   decorative, so it keeps the dark-tier value like every other page. */
body.theme-light .eyebrow::before{background:#34D399;}

/* Cover art carries a heavy black drop shadow tuned for the dark pages;
   on the light tier it needs a softer, navy-tinted one. */
body.theme-light .cover-shot{filter:drop-shadow(0 18px 36px rgba(11,18,31,.20));}
body.theme-light .cover-shot-sm{filter:drop-shadow(0 10px 20px rgba(11,18,31,.16));}

/* Hero cover art starts below the heading rather than rising above it.
   Scales with the viewport so it tracks the clamp()ed h1, and drops away
   once the hero stacks to a single column. */
.hero-media{margin-top:clamp(24px, 10vw, 128px);}
@media (max-width:880px){.hero-media{margin-top:8px;}}

/* =========================================================
   Cards stay dark on the light Foundations pages.

   Cards and tool widgets are deliberately dark elements on a
   light ground — they must NOT lighten just because the page
   did. Re-declaring the dark token set on the card itself
   inverts everything inside it (copy, inputs, inset wells,
   pills, badges, buttons) in one place, so no component needs
   a second set of light-page rules. #111827 throughout, so
   every dark card on the site matches.
   ========================================================= */
body.theme-light .card,
body.theme-light .stat-card{
  --navy-950:#0B121F;   /* inset wells — inputs, result boxes */
  --navy-900:#111827;
  --navy-800:#111827;   /* the card surface itself */
  --navy-700:#212C3D;   /* borders inside the card */
  --cyan-400:#38BDF8;
  --cyan-300:#7DD3FC;
  --cyan-900:#0E3040;
  --ink-0:#F1F4F9;
  --ink-300:#AAB4C6;
  --ink-500:#77839A;
  --candle-up:#34D399;
  --candle-down:#F87171;
  color:var(--ink-0);
  box-shadow:0 2px 6px rgba(11,18,31,.08), 0 18px 40px rgba(11,18,31,.14);
}
/* buttons sitting inside a dark card follow the dark treatment */
body.theme-light .card .btn-primary,
body.theme-light .stat-card .btn-primary{color:var(--navy-950);}
body.theme-light .card .btn-ghost,
body.theme-light .stat-card .btn-ghost{background:transparent;}

/* =========================================================
   Calculator mobile sizing.

   Checked against a 375px box: viewport 375 - .wrap 40 =
   335, - .card padding = the width every child must live in.
   Result figures were fixed rem sizes set inline, which no
   media query could reach; they are classes now so they can
   scale. Chrome (card/box padding) shrinks on small screens
   so the content keeps the width instead of the padding.
   ========================================================= */
.stat-value.stat-xl{font-size:clamp(1.5rem, 6.5vw, 2.6rem);}
.stat-value.stat-lg{font-size:clamp(1.3rem, 5.5vw, 2rem);}
.stat-value.stat-md{font-size:clamp(1.15rem, 4.8vw, 1.7rem);}
.stat-value.stat-sm{font-size:clamp(1rem, 4vw, 1.4rem);}

@media (max-width:720px){
  /* hand the width back to the content */
  .calc-dark .card{padding:20px;}
  .calc-dark .result-box{padding:16px;}
  .calc-dark .stat-card{padding:16px;}
  .calc-dark .stat-value{font-size:clamp(1.1rem, 5.6vw, 1.6rem);}

  /* segmented controls: labels like "Standard 1.00" need to fit their button */
  .calc-dark .seg-btn{padding:.55em .45em; font-size:.74rem;}

  /* rows shrink and wrap instead of pushing the card open */
  .calc-dark .result-row{font-size:.86rem; gap:10px; flex-wrap:wrap;}
  .calc-dark .result-row span{min-width:0; overflow-wrap:anywhere;}
  .calc-dark .ladder-row{gap:10px;}
  .calc-dark .ladder-label,
  .calc-dark .ladder-price{min-width:0; overflow-wrap:anywhere;}

  /* long strings wrap rather than setting a floor on the column */
  .calc-dark .hint,
  .calc-dark .interpret,
  .calc-dark p,
  .calc-dark label,
  .calc-dark .stat-label,
  .calc-dark .stat-suffix{overflow-wrap:anywhere;}

  /* belt and braces: nothing here may cause a sideways scroll */
  .calc-dark,
  .calc-dark .card,
  .calc-dark .stat-card{max-width:100%; min-width:0;}
  section[id$="-calculator"],
  #free-tools{overflow-x:hidden;}
}

/* =========================================================
   Calculator RESULT panels on mobile.

   These panels set their padding inline, which outranks any
   media query — the same trap as the inline font sizes. They
   are classes now so the mobile sizes below can actually
   reach them.
   ========================================================= */
.panel-waiting{padding:56px 24px;}
.panel-cta{padding:36px 32px;}

@media (max-width:720px){
  .panel-waiting{padding:28px 16px;}
  .panel-cta{padding:24px 20px;}

  /* result panels and every card inside them */
  .calc-dark .card,
  .calc-dark .stat-card{padding:16px;}
  .calc-dark .result-box{padding:14px;}

  /* headings above result panels */
  .calc-dark h3{font-size:1.05rem;}
  .calc-dark .stat-label{font-size:.68rem; letter-spacing:.06em;}
  .calc-dark .stat-suffix{font-size:.72rem;}

  /* the Pip lot-size reference table: shrink type and spacing to fit */
  .calc-dark .result-row{font-size:.8rem; padding:.45em 0; gap:8px;}
  .calc-dark .result-row .mono{font-size:.7rem;}
  .calc-dark .journal-code{font-size:.72rem; padding:.7em .8em;}

  /* R visual bars and price ladder */
  .calc-dark .rbar-fill{font-size:.68rem; min-width:2.4em;}
  .calc-dark .ladder-price,
  .calc-dark .ladder-label{font-size:.85rem;}

  /* every result grid collapses to one column */
  .calc-dark .grid-2,
  .calc-dark .grid-3,
  .calc-dark .grid-4{grid-template-columns:1fr;}

  /* the outer container is the safety net */
  section[id$="-calculator"],
  section[id$="-calculator"] .wrap,
  #free-tools,
  #free-tools .wrap{overflow-x:hidden;}
}

/* ---------------------------------------------------------
   Final mobile overflow guard for the calculators.

   Rather than depend on catching every individual culprit,
   this stops any descendant setting a width floor: grid and
   flex children default to min-width:auto, which is what
   lets one wide child force its whole column open.
   --------------------------------------------------------- */
@media (max-width:720px){
  section[id$="-calculator"] *,
  #free-tools *{max-width:100%;}
  .calc-dark > *,
  .calc-dark .card > *,
  .calc-dark .stat-card > *,
  .calc-dark .result-box > *,
  .calc-dark .journal-row > *,
  .calc-dark .ladder-row > *,
  .calc-dark .result-row > *{min-width:0;}
  .calc-dark .interpret,
  .calc-dark .subnote,
  .calc-dark .hint,
  .calc-dark .stat-value{overflow-wrap:anywhere;}
}

/* R:R proportional bar — risk against reward, sized to the true ratio. */
.rr-bar{display:flex; height:40px; border-radius:8px; overflow:hidden; background:var(--navy-950);}
.rr-bar > div{
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  color:#111827; white-space:nowrap; overflow:hidden; min-width:0;
  transition:width .25s var(--ease);
}
.rr-bar-risk{background:var(--candle-down);}
.rr-bar-reward{background:var(--candle-up);}
.rr-bar-legend{display:flex; justify-content:space-between; gap:12px; margin-top:.6em; font-size:.75rem; color:var(--ink-500);}

/* Collapsible secondary panel — keeps sizing available without letting it
   crowd out the primary risk-to-reward read. */
.calc-details > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6em;
  font-family:var(--font-mono); font-size:.75rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-500);
}
.calc-details > summary::-webkit-details-marker{display:none;}
.calc-details > summary::before{content:'+'; color:var(--cyan-400); font-size:1.05rem; line-height:1;}
.calc-details[open] > summary::before{content:'−';}
.calc-details > summary:hover{color:var(--ink-0);}
@media (max-width:720px){
  .rr-bar{height:34px;}
  .rr-bar > div{font-size:.64rem;}
}