/* ==========================================================================
   BullishTools Market Analysis — Premarket Briefing
   Production CSS v2.0
   Design: Clean fintech report · Light default · Dark toggle
   Fonts: Space Mono (data) · DM Sans (body)
   Accent: BTMA Green #00c864 (dark) / #15803d (light)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg:        #f8f9fc;
  --surface:   #ffffff;
  --surface2:  #f1f5f9;
  --bdr:       #e2e8f0;
  --bdr2:      #cbd5e1;
  --t1:        #111827;
  --t2:        #374151;
  --t3:        #94a3b8;
  --t4:        #64748b;

  --green:     #15803d;
  --green-bg:  #f0fdf4;
  --green-bdr: #bbf7d0;

  --red:       #dc2626;
  --amber:     #d97706;
  --amber-bg:  #fffbeb;
  --amber-bdr: #fde68a;
  --blue:      #2563eb;
  --teal:      #0d9488;
  --purple:    #7c3aed;
  --cyan:      #0ea5e9;

  --f1: #15803d;
  --f2: #0d9488;
  --f3: #2563eb;
  --f4: #d97706;
  --f5: #7c3aed;

  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 99px;

  /* ---- Type scale — clean-eighth rem on 16px root (Pass 1: readability) ---- */
  --fs-micro: 0.75rem;   /* 12px — exception only: calc/briefing data ticks, rank pills */
  --fs-sm:    0.875rem;  /* 14px — READABLE FLOOR (nav, footer, captions, cells, tags) */
  --fs-body:  1.125rem;  /* 18px — body paragraphs (base) */
  --fs-md:    1.25rem;   /* 20px — lead / intro */
  --fs-lg:    1.375rem;  /* 22px — h3 / card title */
  --fs-xl:    1.75rem;   /* 28px — h2 / section title */
  --fs-2xl:   2.25rem;   /* 36px — h1 (interior) */
  --fs-3xl:   2.875rem;  /* 46px — h1 (hero) */

  /* ---- Line-heights (unitless) ---- */
  --lh-tight: 1.2;
  --lh-snug:  1.4;
  --lh-body:  1.6;
}

[data-theme="dark"] {
  --bg:        #0a0f18;
  --surface:   #0d1421;
  --surface2:  #111827;
  --bdr:       #1e2d45;
  --bdr2:      #243050;
  --t1:        #e8edf5;
  --t2:        #b8c4d8;
  /* Consolidated: old t3 (#4a6a8a) measured 3.65:1 against this bg — fails AA.
     Old t4 (#6b7c99) measured 4.89:1 — better, despite the naming implying it
     should be more muted than t3. Both now point to one AA-safe tone. */
  --t3:        #8a9ec2;
  --t4:        #8a9ec2;

  --green:     #00c864;
  --green-bg:  rgba(0,200,100,.08);
  --green-bdr: rgba(0,200,100,.2);

  --amber:     #f59e0b;
  --amber-bg:  rgba(245,158,11,.1);
  --amber-bdr: rgba(245,158,11,.25);

  --f1: #00c864;
  --f2: #14b8a6;
  --f3: #60a5fa;
  --f4: #fbbf24;
  --f5: #a78bfa;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:100%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.2s ease, color 0.2s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body[data-theme="dark"]::before {
  background-image:
    linear-gradient(rgba(255,255,255,.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.065) 1px, transparent 1px);
}

@keyframes fadein { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
@keyframes slashes-pulse { 0%,100%{opacity:.4;} 50%{opacity:1;} }
@keyframes badge-dot { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:.6;} }
@keyframes scan-sweep { 0%{left:-60%;} 100%{left:110%;} }
@keyframes scan-line { 0%{ top:-2px; opacity:.9; } 90%{ opacity:.9; } 100%{ top:100%; opacity:0; } }
@keyframes candle-grow { from{ transform:scaleY(0); opacity:0; } to{ transform:scaleY(1); opacity:1; } }

.container { position:relative; z-index:1; max-width:var(--measure); margin:0 auto; padding:0 20px 60px; }

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--bdr);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 200;
  transition: background 0.2s ease;
}
.header::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity:.4;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  max-width:1080px; margin:0 auto; padding:0 20px; gap:12px;
}
.header-slashes {
  font-family:var(--font-mono); font-size:13px; font-weight:700; letter-spacing:-1px;
  color:var(--green); animation:slashes-pulse 2.5s ease-in-out infinite; flex-shrink:0;
}
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--r-sm);
  border:1px solid var(--green-bdr); background:var(--green-bg); font-family:var(--font-mono);
  font-size: var(--fs-sm); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--green);
  white-space:nowrap;
}
.badge-dot { width:5px; height:5px; border-radius:50%; background:var(--green); animation:badge-dot 2s ease-in-out infinite; flex-shrink:0; }
.header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.card {
  background: var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:18px; margin-bottom:12px; animation:fadein .4s ease-out both;
  position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:-60%; width:40%; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,100,.3), transparent);
  animation: scan-sweep 8s linear infinite; pointer-events:none;
}
.card::after {
  content:''; position:absolute; left:0; right:0; top:-2px; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent);
  animation: scan-line 7s linear infinite; pointer-events:none;
}
.card:nth-child(2) {animation-delay:.1s;} .card:nth-child(3) {animation-delay:.2s;} .card:nth-child(4) {animation-delay:.3s;}

.footer { position:relative; z-index:1; padding:28px 20px; text-align:center; border-top:1px solid var(--bdr); margin-top:16px; }
.footer::before {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent); opacity:.3;
}
.footer-logo-row { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:6px; }
.footer-logo-img { width:24px; height:24px; opacity:.7; object-fit:contain; }
.footer-logo { font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--t3); }
.footer-logo span { color:var(--green); }
.footer-catchphrase {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:var(--green); margin-bottom:12px; line-height:1.9;
}
.footer-links { display:flex; justify-content:center; gap:20px; margin-bottom:14px; flex-wrap:wrap; }
.footer-links a { font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:1px; text-transform:uppercase; color:var(--t3); text-decoration:none; transition:color .2s; }
.footer-links a:hover { color:var(--green); }
.disclaimer { font-size: var(--fs-sm); color:var(--t3); line-height:1.7; max-width:560px; margin:0 auto; }

@media (max-width:600px) {
  .card { padding:14px; }
}
/* ==========================================================================
   BullishTools Homepage — extends briefing.css tokens
   Load AFTER briefing.css. No color/font is redefined here, only structure.
   ========================================================================== */

/* ==========================================================================
   HOMEPAGE-ONLY ADDITIONS — extends the tokens/components defined above.
   Nothing above this line redefines color or font; this section only adds
   layout for the marketing homepage (nav, ticker tape, hero, pillar grid).
   ========================================================================== */

:root {
  /* Reusable cap for page content on very wide monitors. Ticker tape and any
     other element that should run edge-to-edge simply never references this. */
  --site-max: 1320px;
  --measure:      760px;   /* standard reading column (prose default) */
  --measure-grid: 960px;   /* homepage multi-column grids + hero */
  --measure-wide: 1200px;  /* wide data table (broker) only */
  --measure-form: 600px;   /* forms */
  /* One consistent button color in both themes — deliberately NOT theme-aware,
     unlike --green (which must stay theme-aware since it's also used for text/
     links, where a single value can't have good contrast on both a near-white
     and a near-black background). Buttons don't have that constraint since
     their text color rides on top of a known fill, not the page background. */
  --brand-lime: #20f16e;
}

.header-inner {
  max-width: var(--site-max); display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
  gap:12px; padding:14px 28px; margin:0 auto;
}

/* Homepage header runs larger than the compact report-page header, split into two rows */
.header { padding: 0; }
.header-top { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.header-logo-col { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-decoration:none; }
.header-logo-img { width: 80px; height: 80px; object-fit:contain; }
.header-wordmark { font-family:var(--font-mono); font-weight:700; font-size:15px; letter-spacing:.4px; color:var(--t1); white-space:nowrap; padding-left:8px; }

/* Header quote — centered centerpiece on the top row (rotates via PHP on each page load).
   Logo and controls take equal flex halves so the quote sits at true center. Hidden on mobile. */
.header-top > .header-logo-col { flex:1 1 0; }
.header-top > .header-right { flex:1 1 0; justify-content:flex-end; }
.header-quote { flex:0 1 auto; min-width:0; display:flex; align-items:baseline; justify-content:center; gap:8px; padding:0 24px; overflow:hidden; }
.header-quote-text { font-family:var(--font-body); font-style:italic; font-size:15px; color:var(--t2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.header-quote-author { font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.5px; color:var(--t3); white-space:nowrap; flex-shrink:0; }

.header-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:var(--r-sm); border:1px solid var(--bdr); background:transparent; color:var(--t2);
  font-size:16px; cursor:pointer; transition:border-color .2s, color .2s; flex-shrink:0; padding:0;
}
.icon-btn:hover { border-color:var(--bdr2); color:var(--green); }




.footer-logo-row { text-decoration:none; }

/* Nav now sits on its own row, centered, with breathing room from the row above */
.header-nav {
  display:flex; align-items:center; justify-content:center; gap:32px;
  padding-top:12px; border-top:1px solid var(--bdr);
}
.header-nav a {
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight:500; letter-spacing:1px;
  text-transform:uppercase; color:var(--t2); text-decoration:none; transition:color .2s;
}
.header-nav a:hover { color: var(--green); }
.nav-subscribe { display:none; }

/* Dropdown nav items — desktop hover, mobile flattens to a static indented list */
.nav-item { position:relative; }
.nav-dropdown {
  display:none; position:absolute; top:100%; left:0;
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-md);
  padding:8px; min-width:210px; box-shadow:0 14px 32px rgba(0,0,0,.14); z-index:50;
}
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { display:block; }
.nav-dropdown a {
  display:block; padding:8px 10px; font-family:var(--font-mono); font-size: var(--fs-sm);
  font-weight:500; letter-spacing:.5px; text-transform:none; color:var(--t2);
  border-radius:var(--r-sm); white-space:nowrap; text-decoration:none;
}
.nav-dropdown a:hover { background:var(--green-bg); color:var(--green); }

.menu-toggle { display:none; }

@media (max-width:760px){
  .menu-toggle { display:inline-flex; order:5; }
  .header-quote { display:none; }
  .header-nav {
    display:none;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    width:100%;
    padding-top:12px;
  }
  .header-nav.nav-open { display:flex; }
  .header-nav a { width:100%; padding:10px 4px; }
  .nav-item { width:100%; }
  .nav-item > a { width:100%; }
  /* No hover on touch — dropdown sublists are always visible, indented, in flow */
  .nav-dropdown {
    display:block !important; position:static; border:none; box-shadow:none;
    background:transparent; padding:0 0 4px 16px; margin-top:2px; min-width:0;
  }
  .nav-dropdown a { padding:7px 4px; font-size: var(--fs-sm); }
  .header-nav a.nav-subscribe {
    display:block; background:var(--brand-lime); color:#04130c; text-align:center; border-radius:var(--r-md);
    padding:12px 4px; margin-top:6px; font-weight:700;
  }
}
@media (max-width:600px){
  .footer-links {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(85px,1fr)); gap:10px 12px;
    justify-items:center;
  }
}
@media (max-width:480px){
  .footer-links a { font-size: var(--fs-sm); }
}


/* Ticker tape — fixed, non-scrolling status tab on the left, marquee fills the rest */
.ticker-tape {
  display:flex; align-items:center; overflow:hidden; border-bottom:1px solid var(--bdr);
  background:var(--surface2); position:relative;
}
.ticker-status {
  display:flex; align-items:center; gap:8px; flex-shrink:0;
  padding:9px 16px; border-right:1px solid var(--bdr);
}
.ticker-scroll { overflow:hidden; white-space:nowrap; flex:1; }
.ticker-track {
  display:inline-block; padding:9px 16px; font-family:var(--font-mono); font-size:12.5px;
  letter-spacing:1px; color:var(--t2); animation:ticker-scroll 38s linear infinite;
}
.ticker-track .sep { color: var(--bdr2); margin: 0 14px; }
.ticker-track .hl { color: var(--green); font-weight:700; }
@keyframes ticker-scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* Hero */
.hero { max-width:var(--measure-grid); margin:0 auto; padding:60px 20px 36px; text-align:center; position:relative; z-index:1; }
.hero-candles {
  position:absolute; left:0; right:0; bottom:-20px; width:100%; height:140px;
  pointer-events:none; z-index:-1;
}
.hero-candles .body-up { fill: color-mix(in srgb, var(--green) 50%, var(--bg) 50%); }
.hero-candles .body-down { fill: color-mix(in srgb, var(--red) 50%, var(--bg) 50%); }
.hero-candles .candle-up .wick { stroke: color-mix(in srgb, var(--green) 50%, var(--bg) 50%); stroke-width:1.5; }
.hero-candles .candle-down .wick { stroke: color-mix(in srgb, var(--red) 50%, var(--bg) 50%); stroke-width:1.5; }
[data-theme="dark"] .hero-candles .body-up,
[data-theme="dark"] .hero-candles .candle-up .wick { stroke: color-mix(in srgb, var(--green) 65%, var(--bg) 35%); fill: color-mix(in srgb, var(--green) 65%, var(--bg) 35%); }
[data-theme="dark"] .hero-candles .body-down,
[data-theme="dark"] .hero-candles .candle-down .wick { stroke: color-mix(in srgb, var(--red) 65%, var(--bg) 35%); fill: color-mix(in srgb, var(--red) 65%, var(--bg) 35%); }
.hero-candles .candle { transform-box: fill-box; animation: candle-grow 6s ease-out both; }
.hero-candles .candle-up { transform-origin: bottom; }
.hero-candles .candle-down { transform-origin: top; }
.hero-eyebrow {
  font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:2px; text-transform:uppercase;
  color:var(--t3); margin-bottom:20px; display:flex; align-items:center; justify-content:center; gap:12px;
}
.hero-eyebrow::before, .hero-eyebrow::after { content:''; height:1px; width:36px; background:var(--bdr2); }
.hero h1 {
  font-family:var(--font-mono); font-weight:700; font-size:clamp(24px,4.6vw,44px);
  line-height:1.08; letter-spacing:-1px; color:var(--t1); margin-bottom:20px;
}
/* Home is the only hero carrying the candlestick SVG — it stays large; every other page unifies at the 44px base above */
.hero:has(.hero-candles) h1 { font-size:clamp(30px,5.6vw,52px); }
.hero h1 .accent { color: var(--brand-lime); }
.hero p.lead { font-size: var(--fs-md); color:var(--t2); max-width:600px; margin:0 auto 30px; line-height:1.7; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px; background:var(--brand-lime); color:#04130c;
  font-family:var(--font-mono); font-weight:700; font-size: var(--fs-sm); letter-spacing:1.5px;
  text-transform:uppercase; padding:14px 26px; border-radius:var(--r-md); text-decoration:none;
  border:1px solid var(--brand-lime); transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.10); }

.btn-secondary {
  display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--t2);
  font-family:var(--font-mono); font-weight:700; font-size: var(--fs-sm); letter-spacing:1.5px;
  text-transform:uppercase; padding:14px 22px; border-radius:var(--r-md); text-decoration:none;
  border:1px solid var(--bdr2); transition:border-color .15s ease, color .15s ease;
}
.btn-secondary:hover { border-color:var(--green); color:var(--green); }
/* Dark mode: --bdr2 (#243050) nearly vanishes on the dark bg — give the outlined button a visible resting border */
[data-theme="dark"] .btn-secondary { border-color:#44598c; }

.hero-actions { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }

/* Four-pillar CTA grid — replaces single-button hero CTA */
.pillar-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch;
  max-width:var(--measure-grid); margin:0 auto 10px; padding:0 20px; position:relative; z-index:1;
}
.pillar-card {
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:24px 20px; text-decoration:none; display:flex; flex-direction:column; gap:10px;
  transition: border-color .15s ease, transform .15s ease; position:relative; overflow:hidden;
}
.pillar-card { border-color:var(--bdr); }
.pillar-card:hover { border-color:var(--green-bdr); }
.pillar-icon {
  width:40px; height:40px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:var(--green-bg); color:var(--green); font-size:19px; border:1px solid var(--green-bdr);
}
.pillar-card h3 { font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:.3px; color:var(--t1); }
.pillar-card p { font-size: var(--fs-sm); color:var(--t2); line-height:1.55; }
.pillar-tag {
  margin-top:auto; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--brand-lime); color:#04130c; font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700;
  letter-spacing:1px; text-transform:uppercase; padding:11px 14px; border-radius:var(--r-md);
  white-space:nowrap; transition: transform .15s ease, box-shadow .15s ease;
}
.pillar-card:hover .pillar-tag { transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.14); }
@media (max-width:880px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:500px){ .pillar-grid{ grid-template-columns:1fr; } }

/* Section label, shared by sample-preview / feature-grid / scoring */
.section-label {
  text-align:center; font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:3px;
  text-transform:uppercase; color:var(--t3); margin:54px auto 18px;
}
/* When a section-label sits right after a hero — whether as the first child of a
   wrapper (brokers) or as the hero's next sibling (tools, education) — the hero
   already supplies the spacing, so drop the big 54px top. Matches the ~44px
   hero-to-content rhythm on every other page. */
.section-label:first-child, .hero + .section-label { margin-top: 8px; }

/* Footer extras: links + copyright row, sized up to match the rest of the homepage */
.footer-links a { font-size: var(--fs-sm); }
.copyright-row {
  font-family: var(--font-mono); font-size: var(--fs-sm); color:var(--t2); letter-spacing:.5px;
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.copyright-row a { color:var(--t2); text-decoration:underline; text-decoration-color:var(--bdr2); }
.copyright-row a:hover { color:var(--green); }

/* Feature grid */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; max-width:var(--measure-grid); margin:0 auto; padding:0 20px; position:relative; z-index:1; }
.feature-card {
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:28px;
  transition: border-color .15s ease, transform .15s ease;
  display:flex; flex-direction:column;
  min-height: 100%;
}
.feature-card-footer { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 20px; }
.feature-card:hover { border-color:var(--green-bdr); transform: translateY(-2px); }
.feature-icon {
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--green-bg); color:var(--green); margin-bottom:16px; font-size:20px; border:1px solid var(--green-bdr);
}
.feature-card h3 { font-family:var(--font-mono); font-size:14px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:10px; color:var(--t1); }
.feature-card p { font-size:14px; color:var(--t2); line-height:1.65; }
@media (max-width:760px){ .feature-grid{grid-template-columns:1fr;} }

/* Final CTA */
.final-cta { text-align:center; padding:54px 20px 10px; position:relative; z-index:1; }
.final-cta h2 { font-family:var(--font-mono); font-size: var(--fs-lg); color:var(--t1); margin-bottom:14px; }

/* About page */
.about-stats {
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; max-width:var(--measure);
  margin:10px auto 10px; padding:0; position:relative; z-index:1;
}
.about-stat {
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:24px 18px; text-align:center;
}
.about-stat-num { font-family:var(--font-mono); font-weight:700; font-size:28px; color:var(--green); line-height:1; margin-bottom:10px; }
.about-stat-label { font-size: var(--fs-sm); color:var(--t2); line-height:1.5; }
@media (max-width:880px){ .about-stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .about-stats{ grid-template-columns:1fr; } }

.about-body {
  max-width:var(--measure); margin:50px auto 0;
  padding: clamp(24px, 4vw, 40px);
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  position:relative; z-index:1;
}
@media (max-width:800px){ .about-body, .featured-term, .about-stats, .contact-wrap { margin-inline:16px; } }
.about-body p { font-size: var(--fs-body); color:var(--t2); line-height:1.8; margin-bottom:22px; }
.about-body p:last-child { margin-bottom:0; }
.about-body a { color:var(--green); text-decoration:underline; }
.about-body a:hover { color:var(--t1); }
/* Body prose lists — sized to match .about-body p, with a tight indent so the
   bullets line up under the paragraphs. Scoped to classless lists so component
   lists like .checklist-items keep their own styling. Replaces the per-page
   inline ul/li styles previously used on webull-review and trade-momentum. */
.about-body ul:not([class]) { margin:0 0 22px; padding-left:1.2em; }
.about-body ul:not([class]):last-child { margin-bottom:0; }
.about-body ul:not([class]) li { font-size: var(--fs-body); color:var(--t2); line-height:1.8; margin-bottom:8px; }
.about-body ul:not([class]) li:last-child { margin-bottom:0; }
.featured-term { max-width:var(--measure); margin:46px auto 0; padding:0; position:relative; z-index:1; }
.featured-term .gls-term--featured { padding: clamp(24px, 4vw, 40px); }
.featured-term-lead { margin:0 0 14px; font-size: var(--fs-body); color:var(--t2); line-height:1.6; }
.about-body h2 {
  font-family:var(--font-mono); font-size:16px; letter-spacing:.4px; color:var(--t1);
  margin:36px 0 14px;
}
.about-body h2:first-child { margin-top:0; }
.about-greeting { font-family:var(--font-body); font-weight:700; font-size:18px; color:var(--t1) !important; }
.about-signoff { font-family:var(--font-body); font-style:italic; color:var(--t1) !important; text-align:right; font-weight:600; }

/* Review pages — meta row + affiliate disclosure callout */
.review-meta {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:var(--measure);
  margin:0 auto 8px; padding:0 20px; position:relative; z-index:1;
}
.review-meta span {
  font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:.5px; text-transform:uppercase;
  color:var(--t2); background:var(--surface2); border:1px solid var(--bdr); border-radius:var(--r-sm);
  padding:4px 10px;
}
.disclosure-box {
  max-width:var(--measure); margin:36px auto 0; padding:16px 20px; background:var(--surface2);
  border:1px solid var(--bdr); border-radius:var(--r-lg); position:relative; z-index:1;
}
.disclosure-box p {
  font-size: var(--fs-sm); color:var(--t2); line-height:1.65; margin:0;
}
.disclosure-box .label {
  font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:1px; text-transform:uppercase;
  color:var(--t3); display:block; margin-bottom:6px;
}
.top-cta { text-align:center; max-width:var(--measure); margin:28px auto 40px; padding:0 20px; position:relative; z-index:1; }
.top-cta-note { font-size: var(--fs-sm); color:var(--t3); font-style:italic; margin-top:14px; }
.top-cta-note a { color:var(--t2); text-decoration:underline; }

.review-figure { margin:18px 0 28px; }
.review-figure img {
  width:100%; display:block; border-radius:var(--r-lg); border:1px solid var(--bdr);
}
.review-figure figcaption {
  font-size: var(--fs-sm); color:var(--t3); line-height:1.6; margin-top:10px;
}
.review-figure figcaption strong { color:var(--t2); }

/* Visible keyboard focus on every interactive element, browser default left in place for mouse use */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Respect reduced-motion preference: kill the ambient/looping animations, keep instant state changes */
@media (prefers-reduced-motion: reduce) {
  .ticker-track, .card::before, .card::after, .badge-dot, .header-slashes,
  .pillar-card, .pillar-tag, .feature-card, .btn-primary, .btn-secondary,
  .hero-candles .candle {
    animation: none !important;
    transition: none !important;
  }
}

/* Membership page */
.membership-capture {
  max-width:480px; margin:0 auto 10px; padding:0 20px; text-align:center; position:relative; z-index:1;
}
.capture-form { display:flex; gap:10px; }
.capture-form input {
  flex:1; height:48px; padding:0 16px; border:1px solid var(--bdr2); border-radius:var(--r-md);
  background:var(--surface); color:var(--t1); font-family:var(--font-body); font-size:14px;
}
.capture-form input::placeholder { color:var(--t3); }
.capture-form .btn-primary { height:48px; padding:0 22px; white-space:nowrap; }
.capture-note { font-size: var(--fs-sm); color:var(--t3); margin-top:10px; }
.capture-note.confirmed { color:var(--green); font-weight:600; }
.capture-note.error { color:var(--red); font-weight:600; }
@media (max-width:480px){ .capture-form{ flex-direction:column; } .capture-form .btn-primary{ width:100%; } }

.pricing-wrap { position:relative; max-width:var(--measure-grid); margin:10px auto 0; padding:24px 20px; }
.pricing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:700px){ .pricing-grid{ grid-template-columns:1fr; } }

.pricing-card {
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:28px; display:flex; flex-direction:column;
}
.tier-name { font-family:var(--font-mono); font-weight:700; font-size:15px; color:var(--green); margin-bottom:10px; }
.tier-price { font-family:var(--font-mono); font-weight:700; font-size:32px; color:var(--t1); margin-bottom:12px; }
.tier-desc { font-size: var(--fs-sm); color:var(--t2); line-height:1.6; margin-bottom:18px; }
.tier-features { list-style:none; margin:0 0 24px; padding:0; flex:1; }
.tier-features li { display:flex; align-items:flex-start; gap:8px; font-size: var(--fs-sm); color:var(--t2); margin-bottom:10px; line-height:1.5; }
.tier-features li i { color:var(--green); font-size:15px; margin-top:1px; flex-shrink:0; }
.tier-cta {
  display:block; text-align:center; padding:12px; border-radius:var(--r-md); font-family:var(--font-mono);
  font-weight:700; font-size: var(--fs-sm); letter-spacing:.5px; text-transform:uppercase;
  background:var(--surface2); color:var(--t3); border:1px solid var(--bdr); cursor:not-allowed;
}

.coming-soon-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(248,249,252,.55); border-radius:var(--r-lg); backdrop-filter: blur(1px);
}
[data-theme="dark"] .coming-soon-overlay { background:rgba(10,15,24,.6); }
.coming-soon-badge {
  display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--bdr2);
  border-radius:var(--r-pill); padding:10px 20px; font-family:var(--font-mono); font-weight:700;
  font-size: var(--fs-sm); letter-spacing:.5px; text-transform:uppercase; color:var(--t1);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.coming-soon-badge i { color:var(--t3); font-size:15px; }

.membership-signin { text-align:center; font-size: var(--fs-sm); color:var(--t3); margin:36px 0 10px; }
.membership-signin a { color:var(--green); text-decoration:underline; }

/* Contact page */
.contact-wrap { max-width:var(--measure-form); margin:14px auto 0; padding:clamp(24px,4vw,40px); background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg); position:relative; z-index:1; }
.form-field {
  display:grid; grid-template-columns:160px 1fr; align-items:start; gap:0 16px; margin-bottom:14px;
}
.form-field label {
  grid-column:1; text-align:right; font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--t2); padding-top:13px;
}
.form-field input, .form-field textarea {
  grid-column:2; width:100%; padding:12px 14px; border:1px solid var(--bdr2); border-radius:var(--r-md);
  background:var(--surface); color:var(--t1); font-family:var(--font-body); font-size:14px;
  resize:vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder { color:var(--t3); }
.form-field.has-error input, .form-field.has-error textarea { border-color:var(--red); }
/* Dark mode: box, fields and page all collapse to near-black — lift the card (surface2), recess the fields (bg), and make both edges visible so the form reads with real depth */
[data-theme="dark"] .contact-wrap { background:var(--surface2); border-color:#2f4060; }
[data-theme="dark"] .form-field input, [data-theme="dark"] .form-field textarea { background:var(--bg); border-color:#3a4d72; }
.field-error { grid-column:2; display:block; font-size: var(--fs-sm); color:var(--red); margin-top:6px; min-height:14px; }
@media (max-width:560px) {
  .form-field { grid-template-columns:1fr; gap:6px 0; }
  .form-field label { text-align:left; padding-top:0; }
  .field-error { grid-column:1; }
}
#contact-form { scroll-margin-top: 140px; }
#contact-form .btn-primary { width:100%; justify-content:center; }
#contact-note { text-align:center; margin-top:14px; }

/* Compact hero — for small utility pages (Contact, etc.) that don't need the full marketing-size hero */
.hero-compact { padding-top:28px; padding-bottom:6px; }

/* Checklist card — used on Trade Momentum page for the A+ Setup checklist */
.checklist-card {
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:22px 26px; margin:18px 0 28px;
}
.checklist-card-label {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--green); margin-bottom:14px;
}
.checklist-items { list-style:none; margin:0; padding:0; }
.checklist-items li {
  display:flex; align-items:center; gap:14px; font-weight:600; font-size:16px; color:var(--t1);
  padding:10px 0; border-bottom:1px solid var(--bdr);
}
.checklist-items li:last-child { border-bottom:none; padding-bottom:0; }
.checklist-box {
  flex-shrink:0; width:20px; height:20px; border:2px solid var(--green); border-radius:5px;
}

/* Gear/component list — used on hardware/workstation guide pages */
.gear-wrap { max-width:var(--measure); margin:30px auto 0; padding:0 20px; position:relative; z-index:1; }
.gear-section { margin-bottom:38px; }
.gear-section-head {
  display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono);
  font-size: var(--fs-sm); font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--green);
  padding-bottom:10px; border-bottom:1px solid var(--bdr); margin-bottom:14px;
}
.gear-section-total { color:var(--amber); font-weight:700; }

.gear-row {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px;
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-md);
  padding:14px 18px; margin-bottom:10px; scroll-margin-top:140px;
}
@media (max-width:640px) { .gear-row { grid-template-columns:1fr; gap:8px; } }
.gear-row:target { animation:gear-highlight-flash 2s ease; }
@keyframes gear-highlight-flash {
  0%   { box-shadow:0 0 0 3px var(--brand-lime); background:var(--green-bg); }
  100% { box-shadow:0 0 0 0 transparent; background:var(--surface); }
}
.gear-info { display:flex; flex-direction:column; gap:4px; }
.gear-name { font-weight:700; color:var(--t1); font-size:15px; }
.gear-name a { color:inherit; text-decoration:none; }
.gear-name a:hover { color:var(--green); text-decoration:underline; }
.gear-detail { font-size: var(--fs-sm); color:var(--t2); line-height:1.5; }
.gear-detail a { color:var(--green); text-decoration:underline; }
.gear-detail a:hover { color:var(--t1); }

.gear-buy {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:#04130c; background:var(--brand-lime); padding:7px 12px;
  border-radius:var(--r-sm); text-decoration:none; white-space:nowrap; justify-self:end;
}

.gear-note {
  border-left:3px solid var(--amber); background:var(--surface2); border-radius:0 var(--r-md) var(--r-md) 0;
  padding:14px 18px; margin-bottom:10px;
}
.gear-note.info { border-left-color:var(--green); }
.gear-note .label {
  display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size: var(--fs-sm);
  font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--amber); margin-bottom:6px;
}
.gear-note.info .label { color:var(--green); }
.gear-note p { font-size: var(--fs-sm); color:var(--t2); line-height:1.6; margin:0; }
.gear-note a { color:var(--green); text-decoration:underline; }
.gear-note a:hover { color:var(--t1); }

.page-updated { text-align:center; font-size: var(--fs-sm); color:var(--t3); font-style:italic; margin:24px 0 10px; }

.gear-explainer { font-size: var(--fs-sm); color:var(--t2); line-height:1.7; margin:18px 0; }

.spec-table {
  width:100%; border-collapse:collapse; margin:18px 0 28px; font-size: var(--fs-sm);
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-md); overflow:hidden;
}
.spec-table caption {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--green); text-align:left; padding:12px 16px; background:var(--surface2);
}
.spec-table th, .spec-table td { padding:10px 16px; text-align:left; border-bottom:1px solid var(--bdr); }
.spec-table th:first-child, .spec-table td:first-child { white-space:nowrap; min-width:190px; }
.spec-table th {
  font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:.4px; text-transform:uppercase;
  color:var(--t2); background:var(--surface2);
}
.spec-table td { color:var(--t1); }
.spec-table tr:last-child td { border-bottom:none; }
@media (max-width:560px) { .spec-table { font-size: var(--fs-sm); } .spec-table th, .spec-table td { padding:8px 10px; } }

/* Scroll wrapper for the at-a-glance spec table — mirrors .bkr .table-wrap.
   Keeps the table inside its own horizontal-scroll box so it never widens the
   page on phones, and lets every cell stay on one line (no orphan words) on
   desktop. Scoped to .spec-wrap so other .spec-table instances are untouched. */
.spec-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0 28px; }
.spec-wrap .spec-table { margin:0; min-width:600px; }
.spec-wrap .spec-table th, .spec-wrap .spec-table td { white-space:nowrap; padding:10px 14px; }
.spec-wrap .spec-table th:first-child, .spec-wrap .spec-table td:first-child { min-width:0; }

/* Interactive desk photo with numbered callout pins */
.overlay-wrap { max-width:var(--measure-grid); margin:24px auto 0; padding:0 20px; position:relative; z-index:1; }
.overlay-note {
  text-align:center; font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:.4px;
  text-transform:uppercase; color:var(--t3); margin-bottom:10px;
}
.photo-overlay { position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--bdr); }
.photo-overlay img { width:100%; display:block; }

.pin {
  position:absolute; transform:translate(-50%,-50%); width:30px; height:30px;
  border-radius:50%; background:var(--brand-lime); color:#04130c; display:flex;
  align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700;
  font-size:13px; text-decoration:none; border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 10px rgba(0,0,0,.35); transition:transform .15s ease;
}
.pin:hover { transform:translate(-50%,-50%) scale(1.15); }
.pin::before {
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--brand-lime);
  opacity:.6; animation:pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse {
  0%   { transform:scale(.8); opacity:.7; }
  70%  { transform:scale(1.6); opacity:0; }
  100% { opacity:0; }
}
@media (prefers-reduced-motion: reduce) { .pin::before { animation:none; } }

/* Small inline badge on gear items that have a matching photo pin above */
.gear-pin-ref {
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:50%; background:var(--brand-lime); color:#04130c; font-family:var(--font-mono);
  font-weight:700; font-size:11px; margin-right:8px; flex-shrink:0; vertical-align:middle;
}

/* Dock/product comparison grid — used on hardware comparison pages.
   Flexbox-wrap (not grid) is deliberate: with an odd item count like 5, a
   leftover last row centers itself automatically here, vs. grid which would
   leave it flush-left with an empty gap on the right. */
.dock-grid {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:var(--measure-grid);
  margin:0 auto 10px; padding:0 20px; position:relative; z-index:1;
}
.dock-card {
  background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg);
  padding:20px; display:flex; flex-direction:column; flex:1 1 300px; max-width:320px;
}
.dock-card.winner { border-color:var(--green); border-width:2px; }
.dock-rank {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--t3); margin-bottom:8px;
}
.dock-card.winner .dock-rank { color:var(--green); }
.dock-name a {
  font-size:15px; font-weight:700; color:var(--t1); text-decoration:none;
  border-bottom:1px dotted var(--bdr2);
}
.dock-name a:hover { color:var(--green); border-color:var(--green); }
.dock-price {
  font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--amber); margin:8px 0 10px;
}
.dock-card.winner .dock-price { color:var(--green); }
.dock-blurb { font-size: var(--fs-sm); color:var(--t2); line-height:1.55; flex:1; margin-bottom:14px; }

/* Use-case verdict rows — color-coded left border + tag + title + description */
.usecase-list { display:flex; flex-direction:column; gap:12px; }
.usecase-row {
  display:flex; align-items:flex-start; gap:14px; background:var(--surface); border:1px solid var(--bdr);
  border-radius:var(--r-md); padding:16px 18px;
}
.usecase-row.go { border-left:3px solid var(--green); }
.usecase-row.warn { border-left:3px solid var(--amber); }
.usecase-row.no { border-left:3px solid var(--red); }
.usecase-row.info { border-left:3px solid var(--cyan); }
.usecase-tag {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-sm); white-space:nowrap; margin-top:2px; flex-shrink:0;
}
.usecase-row.go .usecase-tag { background:var(--green-bg); color:var(--green); }
.usecase-row.warn .usecase-tag { background:var(--amber-bg); color:var(--amber); }
.usecase-row.no .usecase-tag { background:rgba(220,38,38,.08); color:var(--red); }
.usecase-row.info .usecase-tag { background:rgba(34,211,238,.08); color:var(--cyan); }
.usecase-title { font-weight:700; color:var(--t1); font-size:14.5px; margin-bottom:4px; }
.usecase-desc { font-size: var(--fs-sm); color:var(--t2); line-height:1.55; }

/* Verdict banner — prominent callout for a comparison page's top-line conclusion */
.verdict-banner {
  display:flex; align-items:center; gap:10px; max-width:var(--measure); margin:24px auto 18px; padding:14px 18px;
  background:var(--green-bg); border:1px solid var(--green-bdr); border-radius:var(--r-md);
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; color:var(--green);
}
.verdict-dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:badge-dot 2s ease-in-out infinite; }

/* Spec table column highlight for the overall winner */
.spec-table th.winner-col { color:var(--green); }
.spec-table .tag-go { color:var(--green); font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; }
.spec-table .tag-warn { color:var(--amber); font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; }
.spec-table .tag-no { color:var(--red); font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; }

/* "What I actually use" ownership badge — distinct from the comparative rank label above it */
.dock-owned-tag {
  display:inline-block; font-family:var(--font-mono); font-size: var(--fs-micro); font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:#04130c; background:var(--brand-lime); padding:2px 8px;
  border-radius:var(--r-sm); margin-bottom:8px;
}
/* ==========================================================================
   POSITION SIZE CALCULATOR  (.psc …) — self-contained, scoped component.
   Grouped here intentionally. Typography tuned as its own task (Pass: calc).
   ========================================================================== */


/* ==========================================================================
   Position Size Calculator — scoped under .psc to avoid collision with
   sitewide classes (.card, .chip, etc. already mean something different
   elsewhere). All colors/fonts route through the site's existing theme
   variables, so this is fully light/dark-aware without any extra rules.
   ========================================================================== */
.psc { max-width:600px; margin:24px auto 0; padding:0 20px 20px; display:flex; flex-direction:column; gap:10px; position:relative; z-index:1; }

.psc .card { background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:14px; position:relative; overflow:hidden; }
.psc .card::before, .psc .card::after { content:none; }

.psc .sec { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.psc .sec-title { font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:2px; color:var(--green); text-transform:uppercase; white-space:nowrap; }
.psc .sec-rule { flex:1; height:1px; background:var(--bdr); }

.psc .irow { display:flex; align-items:center; gap:10px; }
.psc .irow-label { font-size:13px; font-weight:600; color:var(--t1); white-space:nowrap; flex-shrink:0; min-width:90px; }
.psc .irow-label.w140 { min-width:140px; }
.psc .irow + .irow { margin-top:9px; }

.psc .iw { position:relative; flex:1; }
.psc .ipre { position:absolute; left:11px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:13px; color:var(--green); pointer-events:none; font-weight:700; opacity:.75; }
.psc .isuf { position:absolute; right:11px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:11px; color:var(--t3); pointer-events:none; }

.psc input[type=number] {
  width:100%; background:var(--bg); border:1px solid var(--bdr2); border-radius:var(--r-md);
  padding:10px 10px 10px 26px;
  font-family:var(--font-mono); font-size:15px; font-weight:600; color:var(--t1);
  outline:none; transition:border-color .15s, box-shadow .15s;
  -moz-appearance:textfield; appearance:textfield;
}
.psc input[type=number]::-webkit-inner-spin-button, .psc input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; }
.psc input[type=number].np { padding-left:10px; }
.psc input[type=number].ns { padding-right:34px; }
.psc input[type=number]:focus { border-color:var(--green-bdr); box-shadow:0 0 0 2px var(--green-bg); }

.psc .hint { font-size:11.5px; line-height:1.4; margin-top:6px; padding-left:2px; }
.psc .hint.g { color:var(--green); } .psc .hint.w { color:var(--amber); } .psc .hint.b { color:var(--red); } .psc .hint.n { color:var(--t3); }
.psc .dim-note { color:var(--t3); font-size:11px; }
.psc .gdim-text { color:var(--green); }

.psc .risk-slider-wrap { margin-top:10px; border-top:1px solid var(--bdr); padding-top:10px; }
.psc .sl-row { display:flex; align-items:center; gap:10px; flex:1; }
.psc input[type=range] {
  flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:2px;
  outline:none; cursor:pointer; padding:0; border:none; background:var(--bdr2);
}
.psc input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--brand-lime); border:2px solid var(--bg); box-shadow:0 0 8px var(--green-bg);
}
.psc input[type=range]::-moz-range-thumb {
  width:20px; height:20px; border-radius:50%; border:2px solid var(--bg);
  background:var(--brand-lime); box-shadow:0 0 8px var(--green-bg);
}
.psc .sl-val { font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--green); min-width:64px; text-align:right; }

.psc .mode-toggle { display:flex; border:1px solid var(--bdr); border-radius:var(--r-md); overflow:hidden; }
.psc .mbtn { flex:1; padding:11px 8px; cursor:pointer; border:none; background:transparent; transition:all .18s; text-align:center; -webkit-tap-highlight-color:transparent; font-family:inherit; }
.psc .mbtn + .mbtn { border-left:1px solid var(--bdr); }
.psc .mbtn.on { background:var(--green-bg); }
.psc .mbtn-icon { font-size:18px; display:block; margin-bottom:3px; }
.psc .mbtn-label { font-family:var(--font-body); font-size:14px; font-weight:700; color:var(--t2); display:block; }
.psc .mbtn.on .mbtn-label { color:var(--green); }
.psc .mbtn-sub { font-family:var(--font-mono); font-size:8px; color:var(--t3); display:block; margin-top:3px; letter-spacing:1px; }
.psc .mbtn.on .mbtn-sub { color:var(--green); opacity:.8; }

.psc .sg { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.psc .sbtn { padding:10px 4px; border:1px solid var(--bdr); border-radius:var(--r-md); background:var(--surface2); cursor:pointer; text-align:center; transition:all .15s; position:relative; -webkit-tap-highlight-color:transparent; }
.psc .sbtn.on { border-color:var(--green-bdr); background:var(--green-bg); }
.psc .sbtn-name { font-size:14px; font-weight:700; color:var(--t1); display:block; }
.psc .sbtn.on .sbtn-name { color:var(--green); }
.psc .sbtn-hold { font-family:var(--font-mono); font-size:8px; color:var(--t3); display:block; margin-top:3px; }
.psc .sbtn.on .sbtn-hold { color:var(--green); opacity:.8; }
.psc .sbtn-max { font-size:11px; font-weight:600; color:var(--t3); display:block; margin-top:6px; }
.psc .sbtn.on .sbtn-max { color:var(--green); }
.psc .sbadge { position:absolute; top:-1px; right:-1px; background:var(--brand-lime); color:#04130c; font-family:var(--font-mono); font-size:6px; font-weight:700; letter-spacing:1px; padding:2px 4px; border-radius:0 var(--r-sm) 0 4px; }
.psc .style-note { font-size:13px; line-height:1.5; color:var(--t2); }
.psc .style-note strong { color:var(--green); }

.psc .mg { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.psc .mp { padding:10px 11px; border:1px solid var(--bdr); border-radius:var(--r-md); background:var(--surface2); cursor:pointer; transition:all .15s; display:flex; align-items:flex-start; gap:9px; -webkit-tap-highlight-color:transparent; }
.psc .mp.on { border-color:var(--green-bdr); background:var(--green-bg); }
.psc .mrad { width:14px; height:14px; border-radius:50%; border:2px solid var(--t3); flex-shrink:0; margin-top:2px; display:flex; align-items:center; justify-content:center; transition:border-color .15s; }
.psc .mp.on .mrad { border-color:var(--green); }
.psc .mdot { width:6px; height:6px; border-radius:50%; background:var(--green); opacity:0; transition:opacity .15s; }
.psc .mp.on .mdot { opacity:1; }
.psc .mname { font-size:13px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:5px; flex-wrap:wrap; line-height:1.2; }
.psc .mp.on .mname { color:var(--green); }
.psc .mbadge2 { font-family:var(--font-mono); font-size:7px; letter-spacing:1px; padding:1px 5px; border-radius:var(--r-sm); background:var(--green-bg); color:var(--green); }
.psc .mdesc { font-size:11px; color:var(--t3); margin-top:3px; line-height:1.4; }
.psc .mp.on .mdesc { color:var(--t2); }

.psc .kbox { background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.2); border-radius:var(--r-md); padding:10px 12px; margin-top:9px; font-size:12px; color:var(--t2); line-height:1.5; }
.psc .kbox strong { color:var(--blue); }
.psc .kwarn { background:rgba(220,38,38,.07); border:1px solid rgba(220,38,38,.25); border-radius:var(--r-md); padding:10px 12px; margin-top:8px; font-size:12px; color:var(--t2); line-height:1.5; }
.psc .kwarn strong { color:var(--red); }

.psc .rbanner { background:var(--surface2); border:1px solid var(--green-bdr); border-radius:var(--r-lg); padding:16px; position:relative; overflow:hidden; }

.psc .prow { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.psc .plabel { font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; color:var(--green); text-transform:uppercase; margin-bottom:4px; opacity:.85; }
.psc .pval { font-family:var(--font-mono); font-size:46px; font-weight:700; color:var(--green); line-height:1; letter-spacing:-2px; }
.psc .pval-sm { font-size:32px; letter-spacing:-1px; }
.psc .pval-red { color:var(--red); }
.psc .punit { font-size:14px; color:var(--t2); }

.psc .chips { display:flex; gap:8px; flex-wrap:wrap; }
.psc .chip { flex:1; min-width:90px; background:var(--bg); border:1px solid var(--bdr); border-radius:var(--r-md); padding:10px 12px; }
.psc .clabel { font-size:11px; color:var(--t3); margin-bottom:4px; font-weight:500; }
.psc .cval { font-family:var(--font-mono); font-size:16px; font-weight:600; color:var(--t1); }
.psc .cval-amber { color:var(--amber); }
.psc .cval-green { color:var(--green); }
.psc .csub { font-size:10px; color:var(--t3); margin-top:3px; }

.psc .meter { margin-top:14px; }
.psc .mhdr { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.psc .mlabel { font-size:13px; font-weight:600; color:var(--t1); }
.psc .mpct { font-family:var(--font-mono); font-size:14px; font-weight:700; }
.psc .mtrack { height:6px; background:var(--bdr); border-radius:3px; overflow:hidden; }
.psc .mfill { height:100%; border-radius:3px; transition:width .4s ease; }
.psc .mticks { display:flex; justify-content:space-between; margin-top:5px; }
.psc .mtick { font-family:var(--font-mono); font-size:8px; color:var(--t3); }

.psc .alert { margin-top:12px; padding:11px 13px; border-radius:var(--r-md); font-size:13px; font-weight:500; line-height:1.5; border-left:3px solid; }
.psc .aok { background:var(--green-bg); border-color:var(--green); color:var(--green); }
.psc .awk { background:var(--amber-bg); border-color:var(--amber); color:var(--amber); }
.psc .abd { background:rgba(220,38,38,.08); border-color:var(--red); color:var(--red); }

.psc .summ { margin-top:14px; border-top:1px solid var(--bdr); padding-top:11px; }
.psc .sr { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--bdr); }
.psc .sr:last-child { border-bottom:none; }
.psc .sk { font-size:13px; color:var(--t2); }
.psc .sv { font-family:var(--font-mono); font-size:13px; color:var(--green); }

.psc .dbl { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }

.psc .reset-btn {
  display:block; width:100%; margin:4px auto 0;
  padding:12px; background:transparent;
  border:1px solid var(--bdr2); border-radius:var(--r-md);
  font-family:var(--font-mono); font-size:12px; letter-spacing:2px;
  color:var(--t3); cursor:pointer; transition:all .18s;
  -webkit-tap-highlight-color:transparent;
}
.psc .reset-btn:hover { border-color:var(--red); color:var(--red); }

.psc .hidden { display:none; }
.psc-footnote { text-align:center; margin-top:16px; font-family:var(--font-mono); font-size:10px; color:var(--t3); letter-spacing:1.5px; }

.psc .gval { color:var(--green); font-family:var(--font-mono); font-weight:700; }
.psc .size-stop-rows { margin-top:9px; }
@media (max-width:560px) {
  .psc .sg { grid-template-columns:repeat(2,1fr); }
  .psc .mg { grid-template-columns:1fr; }
}

/* ===== END Position Size Calculator (.psc) ===== */

/* ==========================================================================
   Broker Comparison — scoped under .bkr to avoid collision with sitewide
   classes (.card, .pill, etc. already mean something different elsewhere).
   All colors/fonts route through the site's existing theme variables.
   ========================================================================== */
.bkr { max-width:var(--measure-wide); margin:8px auto 0; padding:0 20px 40px; position:relative; z-index:1; }

.bkr .section-label {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--t3); margin-bottom:16px;
}
.bkr .section-label:not(:first-child) { margin-top:8px; }

.bkr .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; margin-bottom:3rem; }
.bkr .card { background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:1.2rem 1.3rem; transition:box-shadow .18s; }
.bkr .card::before, .bkr .card::after { content:none; }
.bkr .card:hover { box-shadow:0 4px 20px rgba(0,0,0,.07); }
.bkr .card.featured { border:2px solid var(--green); background:var(--surface); }
.bkr .card-badge { display:inline-block; font-size: var(--fs-sm); font-weight:500; padding:3px 10px; border-radius:20px; margin-bottom:.75rem; letter-spacing:.03em; }
.bkr .badge-overall { background:var(--green-bg); color:var(--green); }
.bkr .badge-active { background:rgba(37,99,235,.1); color:var(--blue); }
.bkr .badge-options { background:rgba(124,58,237,.1); color:#7c3aed; }
.bkr .badge-tools { background:var(--amber-bg); color:var(--amber); }
.bkr .badge-intl { background:rgba(13,148,136,.1); color:#0d9488; }
.bkr .badge-short { background:rgba(220,38,38,.08); color:var(--red); }
.bkr .badge-longterm { background:var(--green-bg); color:var(--green); }
.bkr .badge-multi { background:rgba(219,39,119,.1); color:#db2777; }

.bkr .card h3 { font-family:var(--font-mono); font-size:1rem; font-weight:700; color:var(--t1); margin-bottom:.5rem; }
.bkr .card-name-link { color:inherit; text-decoration:none; }
.bkr .card-name-link:hover { color:var(--green); }
.bkr .card-divider { border:none; border-top:1px solid var(--bdr); margin:.6rem 0; }
.bkr .card p { font-size: var(--fs-sm); color:var(--t2); line-height:1.6; margin-bottom:.6rem; }
.bkr .card .also { font-size: var(--fs-sm); color:var(--t3); }
.bkr .card .also strong { color:var(--t2); font-weight:500; }

.bkr .toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:1rem; }
.bkr .filter-label { font-size:.88rem; color:var(--t3); font-weight:500; }
.bkr .pill {
  font-size: var(--fs-sm); font-weight:500; padding:5px 11px; border-radius:20px;
  border:1px solid var(--bdr2); background:var(--surface); color:var(--t2);
  cursor:pointer; transition:all .14s; white-space:nowrap; font-family:inherit;
}
.bkr .pill:hover { border-color:var(--green); color:var(--green); }
.bkr .pill.active { background:var(--brand-lime); border-color:var(--brand-lime); color:#04130c; }
.bkr .pill[data-tip] { cursor:pointer; }

.bkr .table-wrap { width:100%; overflow-x:auto; border:1px solid var(--bdr); border-radius:var(--r-lg); background:var(--surface); }
.bkr table { width:100%; border-collapse:collapse; min-width:900px; }
.bkr thead tr { background:var(--surface2); border-bottom:1px solid var(--bdr2); }
.bkr thead th {
  font-family:var(--font-mono); font-size: var(--fs-sm); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t3); text-align:left; padding:6px 8px; white-space:nowrap;
}
.bkr thead th.sortable { cursor:pointer; user-select:none; }
.bkr thead th.sortable:hover { color:var(--t2); }
.bkr .sort-arrow { margin-left:4px; opacity:.35; font-size:.65rem; }
.bkr .sort-arrow.active { opacity:1; color:var(--green); }

.bkr tbody tr { border-bottom:1px solid var(--bdr); transition:background .1s; }
.bkr tbody tr:last-child { border-bottom:none; }
.bkr tbody tr:hover { background:var(--surface2); }
.bkr tbody tr.hidden { display:none; }
.bkr tbody tr.top-pick { border-left:3px solid var(--green); }

.bkr td { padding:11px 8px; vertical-align:middle; font-size: var(--fs-sm); color:var(--t1); }
.bkr td.num { color:var(--t3); font-size: var(--fs-sm); text-align:right; width:28px; }
.bkr td.broker-name { font-family:var(--font-mono); font-weight:700; font-size:.88rem; white-space:nowrap; }
.bkr .broker-name-link { color:inherit; text-decoration:none; }
.bkr .broker-name-link:hover { color:var(--green); }
.bkr td.platform-cell { font-size: var(--fs-sm); color:var(--t2); max-width:190px; }
.bkr td.center { text-align:center; }

.bkr .tbadge { display:inline-block; font-size: var(--fs-sm); font-weight:500; padding:2px 9px; border-radius:20px; white-space:nowrap; }
.bkr .tbadge-wrap { border-radius:var(--r-sm); line-height:1.5; }
.bkr .tbadge-green { background:var(--green-bg); color:var(--green); }
.bkr .tbadge-amber { background:var(--amber-bg); color:var(--amber); }
.bkr .tbadge-blue { background:rgba(37,99,235,.1); color:var(--blue); }
.bkr .tbadge-top { background:var(--green-bg); color:var(--green); font-size: var(--fs-sm); margin-left:5px; padding:1px 7px; }

.bkr .ico-yes { color:var(--green); font-size:.95rem; font-weight:600; }
.bkr .ico-no { color:var(--red); font-size:.95rem; }
.bkr .ico-part { color:var(--amber); font-size:.82rem; }

/* Custom hover tooltips for icon-only cells (Hotkeys, Intl, Commissions) —
   native title-attribute tooltips proved unreliable, so this is a self-contained
   CSS tooltip keyed off data-tip. Default placement is above the trigger; the
   first table row flips it below so it doesn't get clipped by .table-wrap's
   (CSS-forced) vertical overflow boundary. */
.bkr [data-tip] { position:relative; cursor:help; }
.bkr [data-tip]::after {
  content:attr(data-tip);
  position:absolute;
  bottom:130%;
  left:50%;
  transform:translateX(-50%);
  background:var(--t1);
  color:var(--bg);
  font-size: var(--fs-sm);
  font-weight:500;
  line-height:1.4;
  padding:6px 10px;
  border-radius:var(--r-sm);
  white-space:normal;
  width:max-content;
  max-width:200px;
  text-align:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease;
  z-index:20;
}
.bkr [data-tip]:hover::after { opacity:1; visibility:visible; }
.bkr tbody tr:first-child [data-tip]::after { bottom:auto; top:130%; }
.bkr thead [data-tip]::after { bottom:auto; top:130%; }
.bkr thead th.sortable[data-tip] { cursor:pointer; }

.bkr .stars { color:var(--amber); font-size:.85rem; letter-spacing:-.02em; }
.bkr .stars .empty { opacity:.2; }

.bkr .visit-btn {
  display:inline-block; font-size: var(--fs-sm); font-weight:500; padding:4px 11px;
  border-radius:var(--r-sm); border:1px solid var(--bdr2); color:var(--blue);
  background:var(--surface); text-decoration:none; white-space:nowrap; transition:all .14s;
}
.bkr .visit-btn:hover { background:rgba(37,99,235,.08); border-color:var(--blue); }

.bkr .legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:.75rem; font-size: var(--fs-sm); color:var(--t3); }
.bkr .footnote { margin-top:.6rem; font-size: var(--fs-sm); color:var(--t3); line-height:1.5; }
.bkr .footnote.table-note { margin-top:0; margin-bottom:1rem; padding:10px 14px; background:var(--surface2); border:1px solid var(--bdr); border-radius:var(--r-md); color:var(--t2); }
.bkr .footnote.table-note ul { margin:0; padding-left:1.1em; }
.bkr .footnote.table-note li { margin-bottom:5px; }
.bkr .footnote.table-note li:last-child { margin-bottom:0; }
.bkr p.footnote { margin-top:16px; padding:10px 14px; background:var(--surface2); border:1px solid var(--bdr); border-radius:var(--r-md); color:var(--t2); }
.bkr .footnote a { color:var(--green); text-decoration:underline; }
.bkr .footnote a:hover { color:var(--t1); }

@media (max-width:640px) {
  .bkr .toolbar { flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   Homepage calculator preview — embeds the headless calculator file
   (the same standalone page used for the Whop app embed) inside a card
   on the homepage, in the slot the old Sample Briefing Preview used to fill.
   ========================================================================== */
.calc-preview-wrap { max-width:var(--measure-grid); margin:0 auto 40px; position:relative; z-index:1; }
.calc-preview-cta { text-align:center; margin-top:14px; }

/* ==========================================================================
   Privacy Policy — scoped under .legal to avoid collision with sitewide
   classes. Plain long-form content: headings, paragraphs, lists. No
   sitewide h2/p/ul base styles exist (everything is component-class-driven
   per convention), so this gives the prose actual typography.
   ========================================================================== */
.legal { max-width:var(--measure); margin:40px auto 60px; background:var(--surface); border:1px solid var(--bdr); border-radius:var(--r-lg); padding:clamp(28px,4vw,44px); position:relative; z-index:1; }
.legal .legal-updated { font-family:var(--font-mono); font-size: var(--fs-sm); color:var(--t3); letter-spacing:.5px; margin-bottom:30px; }
.legal h2 { font-family:var(--font-mono); font-size:1.05rem; font-weight:700; color:var(--t1); margin:34px 0 12px; padding-top:30px; border-top:1px solid var(--bdr); }
.legal h2:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.legal p { font-size: var(--fs-body); color:var(--t2); line-height:1.75; margin-bottom:14px; }
.legal ul { margin:0 0 14px 1.2em; }
.legal li { font-size: var(--fs-body); color:var(--t2); line-height:1.75; margin-bottom:8px; }
.legal strong { color:var(--t1); font-weight:600; }
.legal a { color:var(--green); text-decoration:underline; }
.legal a:hover { color:var(--t1); }
@media (max-width:800px){ .legal { margin-inline:16px; } }

/* ==========================================================================
   Theme-conditional image utility — shows the matching light/dark variant
   of a screenshot based on the site's current theme, instead of forcing one
   fixed version regardless of the visitor's mode. Reusable anywhere a page
   has both a light and dark capture of the same thing.
   ========================================================================== */
.theme-dark-only { display:none; }
.theme-light-only { display:block; }
[data-theme="dark"] .theme-dark-only { display:block; }
[data-theme="dark"] .theme-light-only { display:none; }

/* ==========================================================================
   Review score block — sits above .review-meta on review pages.
   Gives the star rating its own prominent line so it reads as the headline
   of the review, with the Mentor / Format / Trial pills underneath as before.
   Reusable on any future review page.
   ========================================================================== */
.review-score-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width:var(--measure);
  margin: 0 auto 10px;
  padding: 10px 20px;
  background: var(--surface2);
  border: 1px solid var(--bdr);
  border-radius: var(--r-lg);
  position: relative;
  z-index: 1;
}
.review-score-stars {
  font-size: 28px;
  color: #f5c518; /* IMDB gold — distinct from brand green, universally read as stars */
  line-height: 1;
  letter-spacing: 2px;
}
.review-score-label {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--t1);
  font-weight: 600;
}

/* Partial-fill star rating — set --pct to the filled percentage (e.g. 74% for a 3.7/5).
   Gold up to --pct, gray after, clipped to the star glyphs. Reusable on any review
   with a fractional rating; pair with .review-score-label like .review-score-stars.
   Inherits font-size, so override inline (e.g. font-size:16px) for card-size ratings. */
.star-rating {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f5c518 var(--pct, 100%), var(--t3) var(--pct, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* scroll-padding-top removed — .gear-row already has scroll-margin-top:140px in its base rule above */

/* ==========================================================================
   Coming-soon label — used on landing pages (/tools/, /education/) to mark
   items that are queued but not yet built. Single class, no layout impact.
   ========================================================================== */
.coming-soon-label {
  font-family:var(--font-mono); font-size: var(--fs-sm); letter-spacing:1.5px;
  text-transform:uppercase; color:var(--amber); font-weight:700;
}

/* ============================================================
   GLOSSARY  (.gls)  — append to the bottom of styles.css.
   Do NOT add a separate <link>; this lives inside styles.css.
   Uses sitewide theme variables only. No generic .card reuse
   (avoids the scan-line ::before/::after), and a .gls-hide
   helper instead of .hidden (avoids the sitewide gap).
   ============================================================ */
.gls { max-width:var(--measure); margin: 0 auto; padding: 0 1.25rem 4rem; }

.gls-hide { display: none !important; }

/* hero */
/* Glossary hero now uses the standard .hero markup; this only breaks it out of
   the 760px .gls column to the standard hero width so the title fits on one line */
.gls > .hero { width: min(960px, 92vw); max-width: none; margin-left: 50%; transform: translateX(-50%); margin-bottom: 8px; }

/* tools row: search + A–Z */
.gls-tools {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding: .75rem 0 .85rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--bdr);
}
.gls-search {
  width: 100%; box-sizing: border-box;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 1rem;
  padding: .8rem 1rem; border-radius: 10px;
  background: var(--surface); color: var(--t1);
  border: 1px solid var(--bdr2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gls-search::placeholder { color: var(--t3); }
.gls-search:focus {
  outline: none; border-color: var(--brand-lime);
  box-shadow: 0 0 0 3px var(--green-bg);
}
.gls-az { display: flex; flex-wrap: wrap; gap: .15rem; margin-top: .7rem; }
.gls-az-link {
  font-family: 'Space Mono', monospace; font-size: var(--fs-sm);
  padding: .15rem .5rem; border-radius: 6px;
  color: var(--green); text-decoration: none; line-height: 1;
}
.gls-az-link:hover { background: var(--green-bg); }

/* term cards */
.gls-term {
  padding: 1.1rem 1.2rem; margin: 0 0 .85rem;
  background: var(--surface);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  scroll-margin-top: 6.5rem; /* clears the sticky tools row on anchor jumps */
}
.gls-term:focus { outline: none; }
.gls-term-head {
  display: flex; align-items: baseline; gap: .65rem;
  flex-wrap: wrap; margin-bottom: .45rem;
}
.gls-name {
  font-family: 'Space Mono', monospace;
  font-size: var(--fs-md); margin: 0; color: var(--t1);
}
.gls-def { margin: 0; color: var(--t2); line-height: 1.6; }
.gls-tag {
  font-family: 'Space Mono', monospace; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .06em;
  padding: .2rem .5rem; border-radius: 999px;
  background: var(--green-bg); color: var(--green);
  white-space: nowrap;
}

/* featured / pinned Bullish */
.gls-featured { margin-bottom: 1.6rem; }
.gls-term--featured {
  border: 1px solid var(--brand-lime);
  border-left: 4px solid var(--brand-lime);
  background: var(--green-bg);
}
/* dark mode: deep-green panel (green-950) to mirror the light-mode green-50 background */
[data-theme="dark"] .gls-term--featured { background: #052e16; }
.gls-term--featured .gls-name { font-size: 1.45rem; }
.gls-tag--core { background: var(--brand-lime); color: #0a0a0a; }

/* letter dividers */
.gls-letter {
  font-family: 'Space Mono', monospace;
  font-size: .9rem; color: var(--t3);
  text-transform: uppercase; letter-spacing: .1em;
  margin: 1.4rem 0 .7rem; padding-bottom: .3rem;
  border-bottom: 1px dashed var(--bdr2);
  scroll-margin-top: 6.5rem;
}

/* no-results */
.gls-noresults { color: var(--t2); text-align: center; padding: 2rem 0; }
.gls-clear {
  font: inherit; color: var(--green);
  background: none; border: none; padding: 0;
  text-decoration: underline; cursor: pointer;
}

/* ============================================================
   v2 additions: cross-link line + figure/caption (for SVGs)
   ============================================================ */
.gls-related {
  margin: .55rem 0 0;
  font-family: 'Space Mono', monospace; font-size: var(--fs-sm);
  color: var(--t3);
}
.gls-related a { color: var(--green); text-decoration: none; }
.gls-related a:hover { text-decoration: underline; }

/* inline SVG figures (VWAP, support/resistance, candlestick) */
.gls-figure { margin: .9rem 0 0; }
.gls-figure svg {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--bdr); border-radius: 10px;
  background: var(--surface);
}
.gls-figcaption {
  margin: .45rem 0 0; font-size: var(--fs-sm);
  color: var(--t3); line-height: 1.5;
}

/* ============================================================
   v3 additions: centered hero + accent, category chips,
   per-letter back-to-top, clickable tags
   ============================================================ */


/* category chips — pill toggles, wrap onto multiple rows (no horizontal scroll) */
.gls-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: .7rem;
}
.gls-chip {
  flex: 0 0 auto;
  font-family: 'Space Mono', monospace; font-size: .8125rem; white-space: nowrap; /* 13px UI-chip exception: keeps all 8 topic chips on one row */
  padding: .32rem .7rem; border-radius: 999px;
  border: 1px solid var(--bdr2); background: var(--surface); color: var(--t2);
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.gls-chip:hover { border-color: var(--green); color: var(--t1); }
.gls-chip.is-active {
  background: var(--brand-lime); color: #0a0a0a;
  border-color: var(--brand-lime); font-weight: 700;
}
/* forces a 7/5 chip split on wide screens; collapses to natural wrap below 880px */
.gls-chip-break { flex-basis: 100%; height: 0; }
@media (max-width: 880px) { .gls-chip-break { display: none; } }

/* the card category tag is now a clickable button */
.gls-tag { border: none; cursor: pointer; }
.gls-tag:hover { filter: brightness(1.06); }

/* per-letter back-to-top */
.gls-totop {
  display: inline-block; margin: .5rem 0 .2rem;
  font-family: 'Space Mono', monospace; font-size: var(--fs-sm);
  color: var(--t3); text-decoration: none;
}
.gls-totop:hover { color: var(--green); }

/* generous scroll offset so the sticky tools row doesn't cover jump targets */
.gls-letter, .gls-term, #gls-top { scroll-margin-top: 9.5rem; }

/* in-definition + cross-link anchors follow the site link color (--green),
   not the browser default blue */
.gls-def a, .gls-related a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: .14em;
  transition: opacity .12s ease;
}
.gls-def a:hover, .gls-related a:hover { opacity: .78; }

/* ============================================================
   Header nav — "Courses & Bootcamps" group label inside the
   Education dropdown (sitewide; lives here for convenience —
   move next to your .nav-dropdown rules if you prefer)
   ============================================================ */
.nav-dropdown-label {
  font-family: 'Space Mono', monospace;
  font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase;
  color: var(--t3); cursor: default;
  padding: .5rem .9rem .25rem;
  margin-top: .3rem;
  border-top: 1px solid var(--bdr2);
}

/* ==========================================================================
   APPEND THIS BLOCK TO THE BOTTOM OF styles.css
   Then bump ASSET_VERSION to 88 in asset-version.php
   ========================================================================== */

/* ==========================================================================
   Footer social icons row — centered, icon-only, brand-lime on hover.
   Threads uses an inline SVG (not in FA 5.x); all others use fab FA5 icons.
   ========================================================================== */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 18px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  color: var(--brand-lime);
  font-size: 28px;
  text-decoration: none;
  line-height: 1;
  transition: color .2s ease;
}
.footer-social a:hover { color: var(--t2); }

/* Inline SVG (Threads) — matches the optical size of the FA icons */
.footer-social-svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* ==========================================================================
   Footer social icons — added v88.
   Requires Font Awesome 5.x in <head>:
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
   ========================================================================== */
.footer-social {
  display: flex; align-items: center; justify-content: center;
  gap: 28px; margin-bottom: 14px;
}
.footer-social a {
  color: var(--brand-lime); font-size: 28px; text-decoration: none;
  display: inline-flex; align-items: center; transition: color .2s;
}
.footer-social a:hover { color: var(--t2); }
.footer-social svg { width: 21px; height: 21px; }

/* ==========================================================================
   Subscribe Modal — added v88.
   Scoped under .bt-sub-modal-overlay / .bt-sub-modal.
   Reuses: fadein keyframe, icon-btn, hero-eyebrow, tier-desc,
           capture-note / capture-note.error, btn-primary.
   ========================================================================== */

.bt-sub-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,.55); align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(3px);
}
.bt-sub-modal-overlay.is-open { display: flex; }
[data-theme="dark"] .bt-sub-modal-overlay { background: rgba(0,0,0,.72); }

.bt-sub-modal {
  position: relative; background: var(--surface); border: 1px solid var(--bdr);
  border-radius: var(--r-xl); width: 100%; max-width: 420px; padding: 32px 28px;
  animation: fadein .25s ease-out both;
}
[data-theme="dark"] .bt-sub-modal { background: var(--surface2); border-color: #2f4060; }

/* icon-btn handles the visual; this just positions it in the dialog corner */
.bt-sub-modal-close { position: absolute; top: 14px; right: 14px; }

.bt-sub-modal h2 {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xl);
  color: var(--t1); line-height: 1.15; margin-bottom: 10px;
}
.bt-sub-modal h2 .accent { color: var(--brand-lime); }

.bt-sub-modal-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.bt-sub-modal-fields input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--bdr2); border-radius: var(--r-md);
  background: var(--bg); color: var(--t1); font-family: var(--font-body); font-size: var(--fs-sm);
  transition: border-color .15s, box-shadow .15s;
}
.bt-sub-modal-fields input::placeholder { color: var(--t3); }
.bt-sub-modal-fields input:focus {
  outline: none; border-color: var(--green-bdr); box-shadow: 0 0 0 2px var(--green-bg);
}
[data-theme="dark"] .bt-sub-modal-fields input { border-color: #3a4d72; }

/* btn-primary already has justify-content:center; force full-width in modal context */
.bt-sub-modal .btn-primary { width: 100%; }

.bt-sub-modal-success { display: none; text-align: center; padding: 10px 0 4px; }
.bt-sub-modal-success-icon { font-size: 40px; color: var(--green); margin-bottom: 12px; }
.bt-sub-modal-success h3 {
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-lg);
  color: var(--t1); margin-bottom: 8px;
}
.bt-sub-modal-success p { font-size: var(--fs-sm); color: var(--t2); line-height: 1.65; }

/* Footer subscribe CTA — between catchphrase and nav links */
.footer-sub-cta { margin-bottom: 18px; }

/* Nav subscribe button — override display:none from homepage nav rules.
   btn-primary class in HTML handles lime fill, font, and hover lift.
   A small padding tweak keeps it proportional in the nav row. */
.nav-subscribe { display: inline-flex; padding: 8px 16px; }

/* Mobile: full-width block treatment inside the open nav drawer */
@media (max-width: 760px) {
  .header-nav .nav-subscribe {
    display: block; width: 100%; text-align: center; padding: 12px 4px; margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) { .bt-sub-modal { animation: none; } }
/* ===== END Subscribe Modal ===== */