/* ============================================================
   Trading Habits — Shared Brand Styles
   Navy #0B1D2E · Steel Blue #36536B · Forest Green #12a86a
   Gold #C9A45A · Warm Gray #D8D2C4 · Cream #F6F3EE
   ============================================================ */

:root {
  --navy: #0a0f16;
  --steel: #3c5568;
  --green: #12a86a;
  --gold: #17a2c4;
  --warm-gray: #cdd6e0;
  --cream: #eef3fb;
  --ink: #0a0f16;
  --paper: #f4f7fb;

  /* dark-terminal additions -- page-level backdrop + bright glow accents,
     kept separate from --navy/--paper/--cream since those two stay the
     "light index card" pair used by every bordered card component. */
  --bg-dark: #090c11;
  --glow-cyan: #5ad1ff;
  --glow-mint: #2ef2a0;

  --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --max-width: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  animation: page-fade-in 0.45s ease;
}

/* Mobile safety net: long unbroken strings (URLs, source citations, tickers)
   can force horizontal scroll on narrow phones. Letting them wrap instead of
   pushing the layout wider is purely additive -- it only changes behavior
   when a word would otherwise overflow its box. */
p, li, td, th, blockquote, figcaption, dd, dt {
  overflow-wrap: break-word;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

img, svg { max-width: 100%; display: block; }

a { color: inherit; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
}

.eyebrow {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--green);
  font-weight: 600;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0 0 0.4em;
  font-weight: 700;
  line-height: 1.15;
}

h1 { font-size: clamp(2.2rem, 1.8rem + 1.9vw, 3.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.65rem, 1.44rem + 0.95vw, 2.1rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }

.rule {
  border: none;
  border-top: 1px solid var(--gold);
  width: 64px;
  margin: 18px 0;
  opacity: 0.7;
}

.rule.center { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 14px 30px;
  border-radius: 2px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
  font-size: 0.95rem;
}

.btn-primary {
  background: var(--green);
  color: var(--cream);
}
.btn-primary:hover {
  background: #0f8f5b;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18,168,106,0.32);
}
.btn-primary:active { transform: translateY(0); box-shadow: none; }

.btn-ghost {
  border-color: rgba(255,255,255,0.5);
  color: var(--cream);
}
.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
}
.btn-ghost:active { transform: translateY(0); }

.btn-outline {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--cream);
  transform: translateY(-1px);
}
.btn-outline:active { transform: translateY(0); }

/* ---------- Homepage hero ---------- */

.home-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 60px;
  text-align: center;
}

.hero-critter {
  position: absolute;
  top: 50%;
  width: min(24vw, 230px);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.hero-critter svg { display: block; width: 100%; height: auto; }

.hero-critter--bull {
  left: clamp(-30px, 1vw, 20px);
  transform: translateY(-50%);
  animation: hero-bull-drift 7s ease-in-out infinite;
}
.hero-critter--bear {
  right: clamp(-20px, 2vw, 30px);
  width: min(17vw, 165px);
  transform: translateY(-50%);
  animation: hero-bear-drift 8s ease-in-out infinite;
}

@keyframes hero-bull-drift {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(0deg); }
  50% { transform: translateY(-58%) translateX(10px) rotate(-3deg); }
}
@keyframes hero-bear-drift {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(0deg); }
  50% { transform: translateY(-56%) translateX(-8px) rotate(3deg); }
}

@media (max-width: 760px) {
  .hero-critter { display: none; }
}

/* Keyboard focus states — visible ring on all interactive elements */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- Header ---------- */

header.site-header {
  background: var(--navy);
  color: var(--cream);
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(23,162,196,0.25);
  box-shadow: 0 6px 20px rgba(11,29,46,0.18);
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--cream);
  transition: opacity 0.15s ease;
}
.brand:hover { opacity: 0.82; }

.brand-mark {
  width: 34px;
  height: 34px;
  flex: none;
  transition: transform 0.2s ease;
}
.brand:hover .brand-mark { transform: rotate(-4deg); }

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--cream);
}

.brand-name span { color: var(--green); }

nav.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

nav.primary-nav a {
  text-decoration: none;
  color: var(--warm-gray);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  transition: color 0.15s ease;
}
nav.primary-nav a:hover { color: var(--gold); }
nav.primary-nav a:not(.nav-cta) { font-weight: 500; }

.nav-cta {
  background: var(--green);
  color: var(--cream) !important;
  padding: 10px 22px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  display: inline-block;
}
.nav-cta:hover {
  background: #0f8f5b;
  color: var(--cream) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(18,168,106,0.28);
}
.nav-cta:active { transform: translateY(0); box-shadow: none; }

.nav-more { position: relative; }

.nav-more-toggle {
  background: none;
  border: none;
  font-family: inherit;
  color: var(--warm-gray);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease;
}
.nav-more-toggle:hover { color: var(--gold); }
.nav-more-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.15s ease;
}
.nav-more-toggle[aria-expanded="true"] { color: var(--gold); }
.nav-more-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }

.nav-more-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 8px;
  transform: translateX(-50%);
  background: var(--navy);
  border: 1px solid rgba(23,162,196,0.25);
  border-radius: 6px;
  box-shadow: 0 14px 28px rgba(11,29,46,0.25);
  padding: 8px;
  min-width: 150px;
  z-index: 45;
}
.nav-more:hover .nav-more-menu,
.nav-more.is-open .nav-more-menu {
  display: block;
}
nav.primary-nav .nav-more-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 0.88rem;
  white-space: nowrap;
  color: var(--warm-gray);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
nav.primary-nav .nav-more-menu a:hover { background: rgba(23,162,196,0.12); color: var(--gold); }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex: none;
  background: transparent;
  border: 1px solid rgba(23,162,196,0.35);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle:hover { border-color: var(--gold); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Footer ---------- */

footer.site-footer {
  background: var(--navy);
  color: var(--warm-gray);
  padding: 56px 0 28px;
  margin-top: 100px;
  border-top: 1px solid rgba(23,162,196,0.25);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(216,210,196,0.18);
}

.footer-col h4 {
  color: var(--cream);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  margin-bottom: 16px;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col li:last-child { margin-bottom: 0; }
.footer-col a {
  text-decoration: none;
  color: var(--warm-gray);
  font-size: 0.93rem;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: var(--gold); }

.footer-brand p {
  margin: 0;
  color: var(--warm-gray);
  font-size: 0.92rem;
  max-width: 320px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  font-size: 0.82rem;
  color: rgba(216,210,196,0.65);
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom a {
  color: rgba(216,210,196,0.65);
  text-decoration: none;
  margin-left: 18px;
  transition: color 0.15s ease;
}
.footer-bottom a:hover { color: var(--gold); }

.footer-disclaimer {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(216,210,196,0.7);
  max-width: 820px;
  margin: 22px 0 0;
}
.footer-disclaimer a {
  color: rgba(216,210,196,0.9);
  text-decoration: underline;
  transition: color 0.15s ease;
}
.footer-disclaimer a:hover { color: var(--gold); }

@media (max-width: 760px) {
  .nav-row { position: relative; }
  .menu-toggle { display: flex; }
  nav.primary-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-bottom: 1px solid rgba(23,162,196,0.25);
    box-shadow: 0 14px 28px rgba(11,29,46,0.25);
    padding: 6px 20px 18px;
    z-index: 39;
  }
  nav.primary-nav.is-open { display: flex; }
  nav.primary-nav a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(216,210,196,0.12);
  }
  nav.primary-nav a:last-child { border-bottom: none; }
  nav.primary-nav .nav-cta {
    margin-top: 12px;
    text-align: center;
  }
  .nav-more-toggle { display: none; }
  .nav-more-menu {
    display: block;
    position: static;
    transform: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
  }
  nav.primary-nav .nav-more-menu a { padding: 12px 0; border-bottom: 1px solid rgba(216,210,196,0.12); }
  nav.primary-nav .nav-more-menu a:hover { background: none; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Legal pages ---------- */

.legal-hero {
  background: var(--navy);
  color: var(--cream);
  padding: 72px 0 48px;
  text-align: center;
}

.legal-hero .eyebrow { color: var(--gold); }
.legal-hero h1 { color: var(--cream); font-size: 2.4rem; }
.legal-hero p.meta {
  color: var(--warm-gray);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.legal-body {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 28px 90px;
}

.legal-body h2 {
  margin-top: 2.2em;
  font-size: 1.5rem;
  border-bottom: 1px solid var(--warm-gray);
  padding-bottom: 10px;
}

.legal-body h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 1.6em;
}

.legal-body ul, .legal-body ol {
  padding-left: 22px;
}
.legal-body li { margin-bottom: 8px; }

.legal-toc {
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  padding: 22px 26px;
  margin: 0 0 2em;
  box-shadow: 0 3px 12px rgba(11,29,46,0.05);
}
.legal-toc h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--steel);
  margin: 0 0 12px;
}
.legal-toc ol {
  columns: 2;
  margin: 0;
  padding-left: 20px;
  font-size: 0.92rem;
}
.legal-toc a { text-decoration: none; color: var(--steel); transition: color 0.15s ease; }
.legal-toc a:hover { color: var(--green); }

.contact-box {
  background: var(--navy);
  color: var(--cream);
  border-radius: 4px;
  padding: 28px 30px;
  margin-top: 2.5em;
  box-shadow: 0 10px 28px rgba(11,29,46,0.22);
}
.contact-box h3 { color: var(--cream); margin-top: 0; }
.contact-box a.email {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  text-decoration: none;
}
.contact-box a.email:hover { text-decoration: underline; }

.disclaimer-box {
  border-left: 3px solid var(--gold);
  background: var(--cream);
  padding: 18px 22px;
  margin: 1.5em 0;
  font-size: 0.95rem;
}
.disclaimer-box strong { color: var(--green); }

/* ---------- Index page additions ---------- */

.step-connector {
  flex: none;
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
}

.latest-tool-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: 24px 24px 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.latest-tool-card:hover {
  box-shadow: 0 10px 24px rgba(11,29,46,0.1);
  transform: translateY(-2px);
}

.discover-card {
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: 24px 24px 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.discover-card:hover {
  box-shadow: 0 10px 24px rgba(11,29,46,0.1);
  transform: translateY(-2px);
}
.discover-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  background: rgba(54,83,107,0.1);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.discover-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.discover-card > p { font-size: 0.92rem; color: var(--steel); margin-bottom: 14px; }
.discover-links {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(11,29,46,0.08);
  display: grid;
  gap: 8px;
}
.discover-links a {
  font-size: 0.9rem;
  color: var(--green);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}
.discover-links a:hover { color: var(--gold); text-decoration: underline; }

@media (max-width: 760px) {
  .step-connector { display: none; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .step-figures { flex-direction: column !important; }
  .step-figure { flex: none !important; width: 100% !important; }
}

.hero-bull {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(58vw, 680px);
  height: auto;
  z-index: 1;
  opacity: 0.4;
  pointer-events: none;
}

@media (max-width: 900px) {
  .hero-bull { width: min(66vw, 460px); }
}

@media (max-width: 620px) {
  .hero-bull { display: none; }
}

/* ---------- Opinion section ---------- */

.opinion-hero {
  background: var(--navy);
  color: var(--cream);
  padding: 72px 0 44px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.opinion-hero .eyebrow { color: var(--gold); }
.opinion-hero h1 { color: var(--cream); font-size: 2.3rem; max-width: 680px; margin-left: auto; margin-right: auto; }
.opinion-hero p.deck {
  color: var(--warm-gray);
  max-width: 620px;
  margin: 14px auto 0;
  font-size: 1.05rem;
}

.opinion-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(23,162,196,0.5);
  border-radius: 20px;
  padding: 6px 14px;
  margin-bottom: 18px;
}
.opinion-live-tag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.opinion-section-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 28px 100px;
}

.opinion-angle-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(18,168,106,0.12);
  padding: 4px 11px;
  border-radius: 20px;
}
.opinion-angle-tag.fundamental { color: var(--steel); background: rgba(54,83,107,0.12); }
.opinion-angle-tag.mixed { color: var(--gold); background: rgba(23,162,196,0.16); }

.opinion-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--steel);
  margin: 10px 0 0;
}

.opinion-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--warm-gray);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 26px 28px;
  margin-bottom: 22px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.opinion-card:hover {
  box-shadow: 0 10px 24px rgba(11,29,46,0.1);
  transform: translateY(-2px);
}
.opinion-card h2 { font-size: 1.3rem; margin: 10px 0 8px; }
.opinion-card p.teaser { color: var(--steel); font-size: 0.98rem; margin-bottom: 0; }

.opinion-empty {
  text-align: center;
  border: 1px dashed var(--warm-gray);
  border-radius: 6px;
  padding: 60px 30px;
  color: var(--steel);
}
.opinion-empty p { margin: 0 0 6px; }
.opinion-empty .eyebrow { display: block; margin-bottom: 14px; }

.opinion-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 34px;
  padding: 16px 0;
  border-top: 1px solid var(--warm-gray);
  border-bottom: 1px solid var(--warm-gray);
}
.opinion-byline .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex: none;
}
.opinion-byline .who { font-size: 0.92rem; }
.opinion-byline .who strong { display: block; color: var(--navy); }
.opinion-byline .who span { color: var(--steel); font-family: var(--font-mono); font-size: 0.78rem; }

.opinion-body {
  font-size: 1.08rem;
  line-height: 1.75;
}
.opinion-body p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.2rem;
  float: left;
  line-height: 0.85;
  padding: 6px 10px 0 0;
  color: var(--green);
}

.opinion-disclaimer {
  border-left: 3px solid var(--gold);
  background: var(--cream);
  padding: 18px 22px;
  margin: 2.4em 0 0;
  font-size: 0.88rem;
  color: var(--steel);
  line-height: 1.6;
}
.opinion-disclaimer strong { color: var(--navy); }

.opinion-back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--steel);
  text-decoration: none;
}
.opinion-back-link:hover { color: var(--green); }

@media (max-width: 620px) {
  .opinion-hero h1 { font-size: 1.8rem; }
}

/* ---------- Calculator radio-row hover polish ---------- */
/* .radio-row / .radio-row label are duplicated per-page in each tools/*.html
   local <style> block (flagged for de-dup in design-log.md's backlog); this
   rule lives here instead since it only adds properties the per-page blocks
   never set (cursor, padding, hover state), so it applies everywhere those
   pages already load styles.css without needing to touch 200+ files. */
.radio-row label {
  cursor: pointer;
  padding: 5px 9px;
  margin: -5px -9px;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.radio-row label:hover {
  background: rgba(18,168,106,0.07);
  color: var(--green);
}

/* ---------- Shop report pages: "Behind The Report" history/education section ----------
   Shared here (not per-page <style>) since it's identical markup and rules across
   every shop/*/sales-page.html report page; each page already loads this file.
   .method-history-section is the same block, used on the xlsx/pdf tool pages
   ("Behind The Tool") that don't have a 20-page report behind them but still
   get a short, sourced history/education section added for standalone value. */
.report-history-section,
.method-history-section {
  padding: 74px 0 78px;
  background: var(--paper);
  border-top: 1px solid rgba(11,29,46,0.07);
}
.report-history-section .section-head,
.method-history-section .section-head {
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}
.history-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  max-width: 980px;
  margin: 0 auto;
}
.history-col h3 {
  font-family: var(--font-display);
  font-size: 1.18rem;
  color: var(--navy);
  margin-bottom: 12px;
}
.history-col p {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--steel);
  margin: 0 0 1em;
}
.history-col p:last-child { margin-bottom: 0; }
.history-col p strong { color: var(--navy); }
.history-source-note {
  max-width: 760px;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--steel);
}
@media (max-width: 760px) {
  .history-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- History-section inline charts ----------
   Small SVG visuals dropped into a "Behind The Report" / "Behind The Tool"
   section's third column or a full-width row beneath the two-column grid.
   Kept intentionally simple (no chart library) since these are static pages. */
.history-chart {
  max-width: 980px;
  margin: 40px auto 0;
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-radius: 6px;
  padding: 26px 30px 20px;
  box-shadow: 0 4px 16px rgba(11,29,46,0.07);
}
.history-chart-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}
.history-chart svg { display: block; width: 100%; height: auto; }
.history-chart-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--steel);
  text-align: center;
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}

/* ---------- Live interactive tools ----------
   Small vanilla-JS calculators/sliders dropped next to a history-chart so a
   reader can try the underlying math instead of just reading about it. No
   libraries, each instance scoped with its own inline <script>. */
.live-tool {
  max-width: 980px;
  margin: 28px auto 0;
  background: var(--paper);
  border: 1px solid var(--warm-gray);
  border-radius: 6px;
  padding: 26px 30px 24px;
}
.live-tool-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 18px;
}
.live-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.live-tool-field { min-width: 0; }
.live-tool-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--steel);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.live-tool-field input[type="number"] {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  padding: 8px 10px;
}
.live-tool-field input[type="number"]:focus {
  outline: none;
  border-color: var(--green);
}
.live-tool-field input[type="range"] {
  width: 100%;
  accent-color: var(--green);
}
.live-tool-range-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--navy);
  font-weight: 600;
}
.live-tool-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 16px;
  border-top: 1px dashed var(--warm-gray);
  padding-top: 18px;
}
.live-tool-out div { text-align: center; }
.live-tool-out .num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  transition: color 0.15s ease;
}
.live-tool-out .num.warn { color: #B4483A; }
.live-tool-out .lbl {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--steel);
  text-transform: uppercase;
  margin-top: 4px;
}
.live-tool-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--steel);
  text-align: center;
  margin: 16px 0 0;
  letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .live-tool-grid, .live-tool-out { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .live-tool-grid, .live-tool-out { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Common Questions ----------
   A short, native-<details> FAQ block dropped at the bottom of a shop page's
   history/education section. No JS, the browser's own disclosure widget
   handles the open/close state. Answers are grounded in facts already
   published elsewhere on that same page, never new claims. */
.quick-faq {
  max-width: 980px;
  margin: 28px auto 0;
}
.quick-faq-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}
.quick-faq-item {
  background: var(--paper);
  border: 1px solid var(--warm-gray);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.quick-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 46px 16px 20px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--navy);
  position: relative;
  transition: color 0.15s ease;
}
.quick-faq-item summary::-webkit-details-marker { display: none; }
.quick-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--green);
  transition: transform 0.2s ease;
}
.quick-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.quick-faq-item summary:hover { color: var(--green); }
.quick-faq-item .quick-faq-answer {
  padding: 0 20px 18px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--steel);
}
.quick-faq-item .quick-faq-answer p { margin: 0 0 0.9em; }
.quick-faq-item .quick-faq-answer p:last-child { margin-bottom: 0; }

/* ---------- Illustrative infographic banner ----------
   A single AI-generated illustrative image dropped at the top of a shop
   page's "Behind The Report/Tool/Course" section, giving the page a visual
   anchor beyond the ecover thumbnail and the SVG charts. Image files live
   in each product's own assets/ folder, named infographic.png. */
.info-graphic {
  max-width: 980px;
  margin: 0 auto 40px;
  text-align: center;
}
.info-graphic img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--warm-gray);
  box-shadow: 0 10px 30px rgba(11,29,46,0.12);
}
.info-graphic-caption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--steel);
  text-align: center;
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}

/* ---------- Go Deeper (related-reading cross-links) ----------
   A short set of links to genuinely related strategy/FAQ pages already
   published elsewhere on the site, dropped at the very bottom of a shop
   page's history/education section, after the Common Questions block.
   Every link points to a real page whose subject matter actually connects
   to this product, never a generic "explore the site" list, and every
   one-line reason is grounded in what that other page's own tool or answer
   actually does. */
.related-reading {
  max-width: 980px;
  margin: 28px auto 0;
}
.related-reading-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}
.related-reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}
.related-reading-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--warm-gray);
  border-radius: 6px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-reading-card:hover {
  border-color: var(--green);
  transform: translateY(-1px);
}
.related-reading-kicker {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 4px;
}
.related-reading-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 4px;
}
.related-reading-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--steel);
  margin: 0;
}

/* ---------- Sources & Further Reading (formal citation list) ----------
   A short, formal bibliography for the academic or historical research a
   page's own "Where It Comes From" / history section already discusses in
   prose above. Every entry restates a citation the page already names
   (author, year, journal), in standard reference form, with a one-line note
   tying it back to what the page actually uses it for. No new claims, no
   finding not already stated elsewhere on the same page. Dropped after
   Common Questions and before Go Deeper. */
.sources-box {
  max-width: 980px;
  margin: 28px auto 0;
}
.sources-box-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}
.sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: source-count;
}
.sources-item {
  counter-increment: source-count;
  background: var(--paper);
  border: 1px solid var(--warm-gray);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(11,29,46,0.07);
  padding: 14px 16px 14px 46px;
  margin-bottom: 10px;
  position: relative;
}
.sources-item::before {
  content: counter(source-count);
  position: absolute;
  left: 16px;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 700;
}
.sources-cite {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--navy);
  margin: 0 0 4px;
  line-height: 1.5;
}
.sources-cite em { font-style: italic; }
.sources-note {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--steel);
  margin: 0;
}

/* ===========================================================
   SETUP DECK — shared interactive centerpiece for /shop
   setup-pack sales pages. Renders via _shared/setup-deck-engine.js.
   One card per setup, $1 each, click/arrow through the whole pack.
   =========================================================== */
.setup-deck-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 10px;
  padding: 34px 34px 28px;
  box-shadow: 0 24px 60px rgba(11,29,46,0.22);
}
.setup-deck-progress { margin-bottom: 22px; }
.setup-deck-progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--warm-gray);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.setup-deck-progress-label strong { color: var(--gold); }
.setup-deck-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(246,243,238,0.14);
  overflow: hidden;
}
.setup-deck-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--gold));
  border-radius: 3px;
  transition: width 0.35s ease;
  width: 0%;
}
.setup-deck-card {
  background: var(--paper);
  border-radius: 8px;
  padding: 26px 28px 22px;
  min-height: 300px;
}
.setup-deck-card .setup-deck-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.setup-deck-card .setup-deck-price-chip {
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--gold);
}
.setup-deck-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.42rem;
  color: var(--navy);
  margin: 0 0 4px;
}
.setup-deck-card .setup-deck-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--steel);
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 16px;
}
.setup-deck-chart { display: block; width: 100%; height: auto; margin: 4px 0 18px; }
.setup-deck-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.setup-deck-rows li {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 0.93rem;
  color: var(--navy);
  line-height: 1.5;
}
.setup-deck-rows li strong {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
  padding-top: 2px;
}
.setup-deck-rows li.invalidate strong { color: #B4483A; }
.setup-deck-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.setup-deck-btn {
  background: transparent;
  border: 1px solid var(--warm-gray);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  padding: 9px 18px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.setup-deck-btn:hover { background: rgba(246,243,238,0.08); border-color: var(--gold); }
.setup-deck-btn:disabled { opacity: 0.35; cursor: default; }
.setup-deck-btn:disabled:hover { background: transparent; border-color: var(--warm-gray); }
.setup-deck-counter {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--warm-gray);
  letter-spacing: 0.03em;
}
.setup-deck-counter strong { color: var(--gold); }
.setup-deck-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 18px; }
.setup-deck-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(246,243,238,0.25);
  border: none; padding: 0; cursor: pointer;
}
.setup-deck-dot.is-active { background: var(--gold); }
.setup-deck-dot.is-seen { background: var(--green); }
@media (max-width: 600px) {
  .setup-deck-wrap { padding: 24px 18px 20px; }
  .setup-deck-card { padding: 20px 18px 18px; }
  .setup-deck-rows li { grid-template-columns: 1fr; gap: 2px; }
}

/* ===========================================================
   SALES PAGE KIT — shared sections used by /shop reports,
   systems, and setup packs (ad opener, offer reveal, bullet
   list, fit grid, guarantee certificate, price/CTA). Any page
   can still override these locally with its own <style> block,
   since page-level styles load after this sheet.
   =========================================================== */
.ad-hero { background: var(--navy); color: var(--cream); padding: 64px 0 58px; position: relative; overflow: hidden; }
.ad-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(246,243,238,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(246,243,238,0.04) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.5; pointer-events: none; }
.ad-copy { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; font-family: var(--font-body); font-size: 1.08rem; line-height: 1.75; }
.ad-copy p { margin: 0 0 1.15em; color: var(--cream); }
.ad-copy p.ad-lede { font-family: var(--font-display); font-style: italic; font-size: 1.32rem; line-height: 1.5; color: var(--cream); }
.ad-copy p.ad-quiet { color: var(--warm-gray); }
.ad-copy p.ad-punch { color: var(--gold); font-weight: 600; }

.offer-reveal { padding: 76px 0 60px; border-top: 1px solid rgba(11,29,46,0.07); }
.visual-strip { padding: 0; }
.visual-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; max-width: 1120px; margin: 0 auto; }
.visual-strip-grid img { width: 100%; height: 200px; object-fit: cover; display: block; filter: saturate(1.05); }
.offer-grid { display: grid; grid-template-columns: 320px 1fr; gap: 54px; align-items: center; }
.ecover-wrap { text-align: center; }
.ecover-wrap img { width: 100%; max-width: 300px; margin: 0 auto; border-radius: 8px; box-shadow: 0 18px 40px rgba(11,29,46,0.18); }
.offer-copy .eyebrow { margin-bottom: 10px; }
.offer-copy h1 { font-size: clamp(2rem, 1.7rem + 1.2vw, 2.6rem); margin-bottom: 14px; }
.offer-facts { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 10px; }
.offer-facts li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-family: var(--font-body); font-size: 1rem; color: var(--navy); min-width: 0; }
.offer-facts li strong { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--green); text-transform: uppercase; min-width: 128px; }

.centerpiece-section { padding: 76px 0 70px; background: var(--cream); border-top: 1px solid rgba(11,29,46,0.07); }
.centerpiece-section .section-head { text-align: center; max-width: 640px; margin: 0 auto 38px; }

.bullets-section { background: var(--cream); padding: 70px 0 76px; border-top: 1px solid rgba(11,29,46,0.07); }
.bullets-section .section-head { text-align: center; max-width: 620px; margin: 0 auto 42px; }
.bullet-list { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 4px; }
.bullet-list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--warm-gray); border-left: 3px solid var(--gold); border-radius: 4px; font-family: var(--font-body); font-size: 0.98rem; color: var(--navy); }
.bullet-list li .num { font-family: var(--font-mono); color: var(--gold); font-weight: 600; }
.bullet-list li .pg { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em; color: var(--steel); }

.fit-section { padding: 70px 0 76px; }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; max-width: 900px; margin: 0 auto; }
.fit-card { background: var(--paper); border: 1px solid var(--warm-gray); border-radius: 6px; padding: 28px 30px; box-shadow: 0 4px 16px rgba(11,29,46,0.07); }
.fit-card h3 { font-size: 1.1rem; margin-bottom: 14px; }
.fit-card.yes { border-top: 3px solid var(--green); }
.fit-card.no { border-top: 3px solid var(--steel); }
.fit-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fit-card li { font-family: var(--font-body); font-size: 0.96rem; color: var(--navy); padding-left: 20px; position: relative; }
.fit-card.yes li::before { content: "+"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.fit-card.no li::before { content: "\2212"; position: absolute; left: 0; color: var(--steel); font-weight: 700; }

.guarantee-section { padding: 76px 0; text-align: center; }
.certificate { max-width: 620px; margin: 0 auto; position: relative; background: var(--paper); border: 2px solid var(--gold); border-radius: 6px; padding: 46px 44px 40px; box-shadow: 0 18px 50px rgba(11,29,46,0.12); }
.certificate::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(23,162,196,0.55); border-radius: 3px; pointer-events: none; }
.cert-seal { width: 84px; height: 84px; border-radius: 50%; background: var(--navy); border: 3px solid var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-family: var(--font-mono); color: var(--gold); font-size: 0.66rem; letter-spacing: 0.04em; text-align: center; line-height: 1.3; }
.cert-heading { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: 1.6rem; margin: 0 0 6px; }
.cert-sub { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.12em; color: var(--green); text-transform: uppercase; margin-bottom: 24px; }
.cert-body { font-family: var(--font-body); font-size: 1.02rem; color: var(--navy); line-height: 1.7; max-width: 460px; margin: 0 auto 26px; }
.cert-sign { display: flex; justify-content: space-between; align-items: flex-end; max-width: 440px; margin: 30px auto 0; padding-top: 14px; border-top: 1px solid var(--warm-gray); }
.cert-sign .line { text-align: left; }
.cert-sign .sig { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--navy); }
.cert-sign .cap { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--steel); text-transform: uppercase; margin-top: 4px; }

.price-section { background: var(--navy); color: var(--cream); padding: 70px 0 80px; text-align: center; }
.price-tag { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; color: var(--cream); margin: 0 0 6px; }
.price-tag span { font-family: var(--font-mono); font-size: 1rem; color: var(--warm-gray); font-weight: 400; display: block; margin-top: 6px; letter-spacing: 0.04em; }
.price-math { font-family: var(--font-mono); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.03em; margin: 0 0 18px; }
.order-btn { display: inline-block; margin-top: 26px; background: var(--green); color: var(--cream); font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; padding: 18px 54px; border-radius: 3px; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; }
.order-btn:hover { background: #0f8f5b; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(18,168,106,0.35); }
.price-note { margin-top: 16px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--warm-gray); letter-spacing: 0.03em; }

@media (max-width: 760px) {
  .offer-grid { grid-template-columns: 1fr; text-align: center; }
  .offer-facts li { justify-content: center; }
  .bullet-list li { grid-template-columns: 22px 1fr; }
  .visual-strip-grid { grid-template-columns: 1fr; }
  .visual-strip-grid img { height: 220px; }
  .fit-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Algo Trade Alerts ---------- */

.alerts-strip {
  background: var(--navy);
  color: var(--cream);
  padding: 46px 0 38px;
  text-align: center;
}
.alerts-strip h1, .alerts-strip h2 { color: var(--cream); margin-top: 8px; }
.alerts-strip h1 { font-size: clamp(2.2rem, 1.8rem + 1.9vw, 3.1rem); }
.alerts-strip .eyebrow { color: var(--gold); }
.alerts-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
}
.alerts-meta strong { color: var(--cream); }
.alerts-rules {
  max-width: 720px;
  color: var(--warm-gray);
  font-size: 0.98rem;
}

.alerts-board { padding: 54px 0 90px; }
.alerts-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.alert-card {
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-top: 3px solid var(--steel);
  border-radius: 6px;
  padding: 26px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.alert-card.is-long { border-top-color: var(--green); }
.alert-card.is-short { border-top-color: #A6453B; }
.alert-card.is-exit { border-top-color: var(--gold); }
.alert-card.is-watch { border-top-color: var(--steel); }

.alert-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.alert-ticker {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.alert-name {
  font-size: 0.85rem;
  color: var(--steel);
  margin-top: 2px;
}
.alert-badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 600;
}
.alert-card.is-long .alert-badge { background: rgba(18,168,106,0.14); color: var(--green); }
.alert-card.is-short .alert-badge { background: rgba(166,69,59,0.14); color: #A6453B; }
.alert-card.is-exit .alert-badge { background: rgba(23,162,196,0.2); color: #8a6a2c; }
.alert-card.is-watch .alert-badge { background: rgba(54,83,107,0.12); color: var(--steel); }

.alert-chart {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(11,29,46,0.12);
  background: #EDF0F2;
}
.alert-chart img { width: 100%; display: block; }
.alert-chart-placeholder {
  padding: 46px 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--steel);
  border: 1px dashed var(--warm-gray);
  border-radius: 6px;
  background: rgba(54,83,107,0.04);
}

.alert-levels {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: var(--steel);
  border-top: 1px solid rgba(11,29,46,0.08);
  border-bottom: 1px solid rgba(11,29,46,0.08);
  padding: 12px 0;
}
.alert-levels span { display: block; }
.alert-levels b { display: block; color: var(--navy); font-size: 0.92rem; margin-top: 2px; }

.alert-reason {
  font-size: 1.02rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.55;
}

.alerts-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.alerts-pagination a, .alerts-pagination span {
  padding: 8px 14px;
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  text-decoration: none;
  color: var(--navy);
}
.alerts-pagination span.current { background: var(--navy); color: var(--cream); border-color: var(--navy); }

@media (max-width: 620px) {
  .alert-card { padding: 20px 18px 20px; }
  .alerts-meta { gap: 14px; }
  .alert-card-top { flex-wrap: wrap; gap: 8px 10px; }
  .alert-ticker { font-size: 1.3rem; }
  .alert-badge { white-space: normal; text-align: center; }
  .alert-levels { gap: 14px 20px; }
  .alerts-pagination { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 380px) {
  .alert-ticker { font-size: 1.15rem; }
  .alert-name { font-size: 0.78rem; }
  .alert-reason { font-size: 0.95rem; }
}

/* ---------- Market Monitor ---------- */

.mm-strip {
  background: var(--navy);
  color: var(--cream);
  padding: 46px 0 34px;
  text-align: center;
}
.mm-strip h2 { color: var(--cream); margin-top: 8px; }
.mm-strip .eyebrow { color: var(--gold); }
.mm-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
}
.mm-meta strong { color: var(--cream); }

.mm-state-box {
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  padding: 22px 26px;
  margin: 34px auto 0;
  max-width: 820px;
  text-align: left;
}
.mm-state-box .lbl {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  display: block;
  margin-bottom: 8px;
}
.mm-state-box p { font-size: 1.06rem; margin: 0; color: var(--navy); line-height: 1.55; }

.mm-board { padding: 50px 0 20px; }
.mm-section-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
  margin: 40px 0 18px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.mm-section-label:first-child { margin-top: 0; }
.mm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.mm-card {
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-top: 3px solid var(--steel);
  border-radius: 6px;
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mm-card.is-up { border-top-color: var(--green); }
.mm-card.is-down { border-top-color: #A6453B; }
.mm-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mm-ticker { font-family: var(--font-mono); font-weight: 600; font-size: 1.28rem; color: var(--navy); }
.mm-name { font-size: 0.8rem; color: var(--steel); margin-top: 2px; }
.mm-price { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 600; text-align: right; white-space: nowrap; color: var(--navy); }
.mm-price .chg.up { color: var(--green); }
.mm-price .chg.down { color: #A6453B; }
.mm-chart { width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid rgba(11,29,46,0.12); background: #0B1D2E; }
.mm-chart img { width: 100%; display: block; }
.mm-note { font-size: 0.94rem; color: var(--navy); margin: 0; line-height: 1.5; }

.mm-whatmatters {
  background: var(--navy);
  color: var(--cream);
  border-radius: 6px;
  padding: 30px 34px;
  max-width: 1000px;
  margin: 44px auto 0;
}
.mm-whatmatters h3 {
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 16px;
}
.mm-whatmatters ul { margin: 0; padding-left: 20px; }
.mm-whatmatters li { margin-bottom: 10px; line-height: 1.5; }
.mm-whatmatters li:last-child { margin-bottom: 0; }

.mm-footer-link { text-align: center; margin-top: 44px; }
.mm-archive-link { display: inline-block; font-family: var(--font-mono); font-size: 0.9rem; color: var(--green); text-decoration: none; margin-top: 10px; }

@media (max-width: 720px) {
  .mm-grid { grid-template-columns: 1fr; }
  .mm-whatmatters { padding: 24px 22px; }
}

/* ---------- Price Action Lab ---------- */

.pa-lab-strip {
  background: var(--navy);
  color: var(--cream);
  padding: 46px 0 38px;
  text-align: center;
}
.pa-lab-strip h2 { color: var(--cream); margin-top: 8px; }
.pa-lab-strip .eyebrow { color: var(--gold); }
.pa-lab-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--warm-gray);
}
.pa-lab-meta strong { color: var(--cream); }

.pa-lab-board { padding: 54px 0 90px; }
.pa-lab-grid {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

.pa-lab-card {
  background: var(--cream);
  border: 1px solid var(--warm-gray);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: 26px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pa-lab-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.pa-lab-pattern {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
  margin: 0;
}
.pa-lab-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--steel);
  white-space: nowrap;
}

.pa-lab-chart {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(11,29,46,0.12);
  background: #EDF0F2;
}
.pa-lab-chart img { width: 100%; display: block; }

.pa-lab-note {
  font-size: 1.02rem;
  color: var(--navy);
  margin: 0;
  line-height: 1.55;
}

.pa-lab-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.pa-lab-pagination a, .pa-lab-pagination span {
  padding: 8px 14px;
  border: 1px solid var(--warm-gray);
  border-radius: 4px;
  text-decoration: none;
  color: var(--navy);
}
.pa-lab-pagination span.current { background: var(--navy); color: var(--cream); border-color: var(--navy); }

@media (max-width: 620px) {
  .pa-lab-card { padding: 20px 18px 20px; }
  .pa-lab-meta { gap: 14px; }
  .pa-lab-pagination { flex-wrap: wrap; gap: 8px; }
}

/* ---------- Homepage card polish ---------- */

.alert-card, .pa-lab-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.alert-card:hover, .pa-lab-card:hover {
  box-shadow: 0 14px 30px rgba(11,29,46,0.12);
  transform: translateY(-3px);
}

.idx-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-top-color 0.18s ease;
}
.idx-card:hover {
  box-shadow: 0 12px 26px rgba(11,29,46,0.1);
  transform: translateY(-3px);
}

/* ===========================================================
   TRADING RANGES SHOP — dark-terminal page-level overrides.
   Everything above this line is the proven Trading Habits shop
   kit, unchanged in structure. Below: the page background moves
   from light paper to near-black, while every bordered "card"
   component (bullet-list li, rx-panel, toc-box, certificate,
   setup-deck-card, etc.) stays the light cream/paper index-card
   look on purpose -- it reads as a printed setup card sitting on
   a dark desk, which matches the ecover art and costs nothing to
   maintain since none of those component rules had to change.
   =========================================================== */

body {
  background: var(--bg-dark);
  color: var(--cream);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(46,242,160,0.08), transparent 60%),
    radial-gradient(700px 400px at 100% 10%, rgba(90,209,255,0.05), transparent 60%),
    var(--bg-dark);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 100%);
}

/* Section wrappers that used to be a light "paper wash" behind their
   cards now go dark instead, so the light cards inside them pop. */
.centerpiece-section,
.bullets-section {
  background: transparent;
  border-top-color: rgba(255,255,255,0.06);
}
.centerpiece-section h1, .centerpiece-section h2, .centerpiece-section h3,
.bullets-section h1, .bullets-section h2, .bullets-section h3 {
  color: var(--cream);
}
.centerpiece-section .section-head > p,
.bullets-section .section-head > p {
  color: var(--warm-gray) !important;
}

/* Three prose blocks that used to sit directly on the light body
   background with dark navy text now get their own light card so
   that text stays exactly as readable as it always was. */
.offer-copy {
  background: var(--paper);
  border: 1px solid rgba(11,29,46,0.08);
  border-radius: 10px;
  padding: 30px 34px;
}
.widget-block {
  background: var(--paper);
  border: 1px solid rgba(11,29,46,0.08);
  border-radius: 12px;
  padding: 38px 36px 34px;
  margin: 0 auto 22px;
  max-width: 820px;
}
.widget-block .widget-head { max-width: none; }
.bonus-info-box {
  background: var(--paper);
  border: 1px solid rgba(11,29,46,0.08);
  border-radius: 10px;
  padding: 30px 34px;
}

/* offer-reveal / price-section / ad-hero already carried an explicit
   dark background (var(--navy)) or inherited the (now dark) body --
   no change needed there. Certificate, fit-card, quick-faq-item,
   toc-box, bonus-box, finder-box, glossary-box, protip-box, and every
   rx-panel drill widget were already explicit var(--paper) cards, so
   they read correctly against the new dark backdrop unchanged. */

@media (max-width: 760px) {
  .widget-block { padding: 26px 20px 22px; border-radius: 8px; }
  .offer-copy, .bonus-info-box { padding: 24px 22px; }
}