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

:root {
  --navy: #0B1D2E;
  --steel: #36536B;
  --green: #2E7D5B;
  --gold: #C9A45A;
  --warm-gray: #D8D2C4;
  --cream: #F6F3EE;
  --ink: #0B1D2E;
  --paper: #FBFAF7;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Lora', 'Source Sans Pro', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', 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;
}

@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: #276b4d;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(46,125,91,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); }

/* 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(201,164,90,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: #276b4d;
  color: var(--cream) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(46,125,91,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(201,164,90,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(201,164,90,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(201,164,90,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(201,164,90,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(201,164,90,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;
}
.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(201,164,90,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(46,125,91,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(201,164,90,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(46,125,91,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(140px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.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(140px, 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: 1fr 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(220px, 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;
  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;
}