/* ════════════════════════════════════════════════════════════
   TRW WEBSITE · main.css · v2 (palette update)
   Editorial broadsheet × institutional MFD
   Palette: Seaweed · Porcelain · Deep Space Blue · Lavender Grey · Dusty Mauve
   ════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS · v4 (heritage: eggshell + evergreen + mahogany) ──
   Eggshell + wheat as warm paper. Evergreen as primary dark surface,
   deep blue as secondary dark for data/disclosures. Mahogany is the
   RARE pigment, used only as italic accent, eyebrow stamp, hover
   underline, seal mark, and the cursor halo on dark heroes. */
:root {
  /* Type families */
  --serif: 'Fraunces', Georgia, serif;
  --sans:  'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Paper family — eggshell only. Wheat removed across the site;
     all "warm" / "deep" section backgrounds flatten to eggshell so the
     site reads as a single light surface with cards as the only lift. */
  --paper:        #F4EBD9;       /* page surface · eggshell */
  --paper-card:   #FAF3E2;       /* lifted cards · slightly brighter eggshell */
  --paper-warm:   #F4EBD9;       /* WAS wheat #F2DBBA; now eggshell */
  --paper-deep:   #F4EBD9;       /* WAS deeper warm #E8DDC6; now eggshell */

  /* Ink family — EVERGREEN, the primary dark surface */
  --ink:          #283E2D;       /* evergreen · primary dark */
  --ink-soft:     #324A38;       /* lifted on evergreen */
  --ink-mid:      #3F5A45;
  --ink-line:     rgba(120, 160, 130, 0.30);   /* grid hairlines on evergreen */

  /* Type colors on warm paper */
  --neutral:      #5A5340;       /* secondary on eggshell */
  --neutral-grey: #7A7160;
  --muted-grey:   #B0A790;

  /* Rules — warm-paper-derived */
  --rule:         #E5DAC2;
  --rule-strong:  #D5C8AC;
  --rule-mid:     #DECEB2;

  /* TRW signal — EVERGREEN as primary CTA accent (used on .btn-primary,
     "go" verdict bands, brand bars). Liberal use is fine because
     evergreen has the same gravitas as the dark surface, not a punch. */
  --signal:       #283E2D;       /* primary CTA bg · evergreen */
  --signal-soft:  rgba(40, 62, 45, 0.10);
  --signal-deep:  #1A2B1F;       /* hover · deeper evergreen */
  --signal-light: #7BA587;       /* brightened evergreen for AA on dark */
  --signal-shadow: rgba(40, 62, 45, 0.22);

  /* THE RARE PIGMENT · MAHOGANY (used as --warning, italic accent).
     Discipline: only italic emphasis, eyebrow stamps, hover underlines,
     seal marks, and the cursor halo. Never a background fill. */
  --warning:      #430E13;       /* mahogany · the rare pigment */
  --warning-soft: rgba(67, 14, 19, 0.10);
  --warning-faint: rgba(67, 14, 19, 0.06);  /* even softer wash for inline alert backgrounds (checkout-gate) */
  --warning-deep: #5A1A20;
  --warning-light: #C97A82;      /* brightened mahogany for AA on dark */

  /* Paper-on-night opacity ramp · for italic spans + footer subtext over
     ink/night backgrounds. Phase 4.2: extracted from inline rgba(255,252,249,0.7)
     literals that recurred across register.html / partner-call.html / fund-detail.html
     / footer-brand logos. */
  --paper-on-night-77:  rgba(255, 252, 249, 0.77);
  --paper-on-night-70:  rgba(255, 252, 249, 0.70);
  --paper-on-night-55:  rgba(255, 252, 249, 0.55);
  --paper-on-night-40:  rgba(255, 252, 249, 0.40);

  /* Deep Space Blue — secondary dark, kept under --night for data sections */
  --night:        #1A2838;
  --night-soft:   #243449;
  --night-rule:   rgba(120, 145, 180, 0.28);

  /* Heritage Oxford Blue — third accent for charts / secondary nav */
  --oxford:       #1A2838;
  --oxford-soft:  rgba(26, 40, 56, 0.10);
  --oxford-deep:  #0F1B28;
  --oxford-light: #6E8FBA;

  /* Tertiary accents */
  --lavender:     #9297C4;
  --lavender-soft: rgba(146, 151, 196, 0.10);
  --lavender-deep: #5A60A0;

  --mauve:        #957186;
  --mauve-soft:   rgba(149, 113, 134, 0.10);
  --mauve-deep:   #6B4E5D;

  /* ── PREMIUM DARK-GRADIENT SURFACE SYSTEM ───────────────────
     Cinematic evergreen→oxford depth for section.dark / section--ink.
     Base stops stay dark enough that the --paper / --paper-on-night
     text ramp keeps AA contrast. A diagonal ramp plus two off-axis
     radial glows give premium depth, not a flat fill. */
  --grad-dark-1:  #21372C;   /* evergreen shoulder */
  --grad-dark-2:  #1B2C33;   /* green → blue transition */
  --grad-dark-3:  #16242F;   /* oxford body · also the flat fallback */
  --grad-dark-4:  #0F1B28;   /* oxford-deep floor */
  --grad-glow-green: rgba(123, 165, 135, 0.20);
  --grad-glow-blue:  rgba(110, 143, 186, 0.16);

  --surface-dark:
    radial-gradient(120% 90% at 12% 0%,   var(--grad-glow-green) 0%, transparent 55%),
    radial-gradient(110% 90% at 92% 100%, var(--grad-glow-blue)  0%, transparent 60%),
    linear-gradient(152deg, var(--grad-dark-1) 0%, var(--grad-dark-2) 38%,
                            var(--grad-dark-3) 68%, var(--grad-dark-4) 100%);
  --surface-ink:
    radial-gradient(90% 70% at 50% -10%,   var(--grad-glow-green) 0%, transparent 60%),
    radial-gradient(130% 100% at 85% 110%, var(--grad-glow-blue)  0%, transparent 65%),
    linear-gradient(165deg, var(--grad-dark-1) 0%, var(--grad-dark-2) 30%,
                            var(--grad-dark-3) 62%, var(--grad-dark-4) 100%);

  --surface-dark-card:       rgba(20, 28, 38, 0.62);
  --surface-dark-card-hover: rgba(30, 42, 56, 0.80);
  --dark-hairline:           rgba(150, 178, 196, 0.18);

  /* Footer — a deliberately DIFFERENT dark. A solid near-black slab,
     never the section gradient, so a dark section stacked above it
     reads as a separate thing, not one continuous dark blob. */
  --footer-surface: #0C0F13;
  --footer-edge:    rgba(123, 165, 135, 0.24);

  /* Verdict palette — keep semantic names, repoint to v4 accent system */
  --strong:       var(--signal);            /* evergreen — strong fund */
  --strong-soft:  var(--signal-soft);
  --selective:    var(--night);             /* deep blue — selective */
  --selective-soft: var(--oxford-soft);
  --satellite:    var(--mauve-deep);
  --satellite-soft: var(--mauve-soft);
  --fallback:     var(--neutral);
  --fallback-soft: rgba(90, 83, 64, 0.10);
  --monitor:      var(--warning);           /* mahogany — monitor / concern */
  --monitor-soft: var(--warning-soft);

  /* Shadows — re-tinted toward evergreen */
  --shadow-card:  0 1px 0 rgba(40, 62, 45, 0.06), 0 8px 24px -16px rgba(40, 62, 45, 0.14);
  --shadow-pop:   0 4px 16px -4px rgba(40, 62, 45, 0.14), 0 24px 48px -32px rgba(40, 62, 45, 0.22);

  /* Layout */
  --container:    1280px;
  --container-wide: 1480px;
  --gutter:       36px;
  --header-h:     64px;

  /* Spacing scale (tightened) */
  --space-section: clamp(40px, 6vw, 80px);
  --space-section-compact: clamp(28px, 4vw, 56px);
  --space-card: 24px 26px;
  --space-grid-gap: 24px;
}

/* ── RESET ────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
a { color: inherit; }

/* ── BODY · porcelain ─────────────────────────────────── */
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
  position: relative;
  overflow-x: clip;
}

/* Subtle paper grain — tinted to match Porcelain */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(rgba(80,90,100,0.022) 1px, transparent 1px),
    radial-gradient(rgba(80,90,100,0.016) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  opacity: 0.7;
}

main, header, footer, section { position: relative; z-index: 1; }

/* ── TYPOGRAPHY ───────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  font-variation-settings: "SOFT" 50, "opsz" 144;
}
h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 350; line-height: 0.98; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 400; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 400; font-variation-settings: "SOFT" 40, "opsz" 80; }
h4 { font-size: 17px; font-weight: 500; font-variation-settings: "SOFT" 40, "opsz" 36; }

.italic { font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 144; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* Lede — italic serif intro paragraph */
.lede {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 20px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  font-variation-settings: "SOFT" 60, "opsz" 36;
  max-width: 640px;
}

/* Eyebrow — mono uppercase label */
.eyebrow, .kicker {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--signal-deep);
  display: inline-block;
}
.eyebrow.ink, .kicker.ink { color: var(--ink); }
.eyebrow.muted, .kicker.muted { color: var(--neutral-grey); }
section.dark .eyebrow,
section.dark .kicker {
  color: var(--signal-light);
}

/* Anti-belief — used on About page principles */
.anti-belief {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-top: 16px;
}
section.dark .anti-belief {
  color: var(--signal-light);
}

/* Mono utility */
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }

/* ── LAYOUT ───────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container.wide { max-width: var(--container-wide); }
@media (max-width: 720px) {
  :root { --gutter: 24px; }
}

section { padding: var(--space-section) 0; }
section.compact { padding: var(--space-section-compact) 0; }
section.dark { background-color: var(--grad-dark-3); background: var(--surface-dark); color: var(--paper); }
section.dark h1, section.dark h2, section.dark h3, section.dark h4 { color: var(--paper); }
section.dark .lede { color: rgba(255,252,249,0.78); }
section.warm { background: var(--paper-warm); }
section.deep { background: var(--paper-deep); }

/* Section head */
.sec-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 28px;
}
section.dark .sec-head { border-bottom-color: rgba(255,252,249,0.4); }
.sec-num {
  font-family: var(--serif);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 300;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 80, "opsz" 144;
  color: var(--signal-deep);
}
section.dark .sec-num { color: var(--signal-light); }
.sec-head .sec-title {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 40, "opsz" 80;
}
.sec-head .sec-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral-grey);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .sec-head { grid-template-columns: 1fr; gap: 6px; }
  .sec-head .sec-meta { text-align: left; margin-top: 4px; white-space: normal; }
}

/* Grid utilities */
.grid { display: grid; gap: var(--space-grid-gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── HEADER · sticky masthead ─────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s;
  padding: 8px 0;
}
.site-header.scrolled { box-shadow: var(--shadow-card); }
.site-header-inner {
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}

/* Logo wordmark */
/* Header logo lays the wordmark + compliance tagline as two stacked
   lines (inline-block); the footer keeps the shared .logo flex rule. */
.site-header .logo { display: inline-block; }
.logo {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  font-variation-settings: "SOFT" 40, "opsz" 60;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}
/* signal-dot removed from the logo across all pages — rule kept commented
   in case the dot is reinstated.
.logo .signal-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--signal);
  border-radius: 50%;
  margin: 0 4px 12px 4px;
}
*/
.logo .ital { font-style: italic; font-variation-settings: "SOFT" 100, "opsz" 60; color: var(--ink-soft); font-weight: 400; }
.logo-tagline {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-grey);
  line-height: 1;
  margin-top: 3px;
  white-space: nowrap;
}

/* Nav */
.site-nav {
  display: flex;
  gap: clamp(10px, calc((100vw - 1320px) * 0.055 + 10px), 34px);
  justify-content: center;
}
.site-nav a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 7px 1px;
  /* hover underline — a gradient strip that draws in from the left */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.16s ease;
}
.site-nav a:hover,
.site-nav a.active,
.nav-item.has-dropdown.is-open > a {
  color: var(--signal-deep);
  background-size: 100% 1.5px;
}
.site-nav a:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .site-nav a { transition: color 0.16s ease; }
}

.site-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger (mobile) */
.hamburger {
  display: none;
  width: 32px;
  height: 32px;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.2s, opacity 0.2s;
}
.hamburger span:nth-child(1) { top: 11px; }
.hamburger span:nth-child(2) { top: 16px; }
.hamburger span:nth-child(3) { top: 21px; }
.hamburger.open span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { top: 16px; transform: rotate(-45deg); }
.hamburger:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

@media (max-width: 1320px) {
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--paper);
    flex-direction: column;
    gap: 0;
    padding: 24px var(--gutter);
    border-bottom: 1px solid var(--ink);
    transform: translateY(-110%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-card);
  }
  .site-nav.open { transform: translateY(0); }
  .site-nav a {
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
  }
  .site-nav a:last-child { border-bottom: none; }
  .hamburger { display: block; }
  .site-cta .btn-ghost { display: none; }
}

/* ── INPUT ZOOM GUARD · phones ────────────────────────────
   iOS Safari auto-zooms the viewport whenever a focused
   <input> / <select> / <textarea> has a font-size below
   16px. Lift every text-class form control to 16px on
   <=720px viewports. `body` prefix gives this rule a
   higher specificity than any inline `<style>` block on
   pages like intake.html that set their inputs to 13–14px. */
@media (max-width: 720px) {
  body input[type="text"],
  body input[type="number"],
  body input[type="email"],
  body input[type="tel"],
  body input[type="password"],
  body input[type="search"],
  body input[type="url"],
  body input[type="date"],
  body select,
  body textarea {
    font-size: 16px;
  }
}

/* ── HEADER · phone-specific compaction ───────────────────
   Below 720px the header runs out of width — the logo + tagline,
   three icon buttons, the Client-login button, and the hamburger
   together overflow a 390px iPhone viewport. Drop the tagline,
   shrink the logo, hide watchlist + cart icons (still reachable
   from the hamburger menu under Funds), and tighten gaps. */
@media (max-width: 720px) {
  .site-header-inner { gap: 12px; }
  .site-header .logo { font-size: 20px; }
  .site-header .logo-tagline { display: none; }
  .site-cta { gap: 4px; }
  .cta-icon-btn { width: 32px; height: 32px; }
  .site-cta .cta-icon-btn[aria-label="Watchlist"],
  .site-cta .cta-icon-btn[aria-label="Fund Selection"] { display: none; }
  .auth-state .signin {
    padding: 5px 8px;
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }
}

/* ── BUTTONS ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateX(-101%);
  transition: transform 0.25s ease;
  z-index: 0;
}
.btn:hover::before { transform: translateX(0); }
.btn > span, .btn > .arrow { position: relative; z-index: 1; }
.btn:hover { color: var(--paper); }
.btn .arrow { transition: transform 0.25s ease; display: inline-block; }
.btn:hover .arrow { transform: translateX(4px); }

/* Primary — Seaweed signal */
.btn-primary {
  background: var(--signal);
  color: var(--paper);
  border-color: var(--signal);
}
.btn-primary::before { background: var(--signal-deep); }
.btn-primary:hover { color: var(--paper); }

/* On dark sections */
section.dark .btn {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
section.dark .btn::before { background: var(--paper); }
section.dark .btn:hover { color: var(--ink); }

section.dark .btn-primary {
  background: var(--signal);
  color: var(--paper);
  border-color: var(--signal);
}
section.dark .btn-primary::before { background: var(--signal-deep); }
section.dark .btn-primary:hover { color: var(--paper); }

.btn-ghost {
  background: transparent;
  border-color: var(--rule-strong);
}
.btn-ghost::before { background: var(--ink-soft); }

/* Text link with arrow — for inline CTAs */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--signal);
  padding-bottom: 2px;
  transition: gap 0.2s ease;
}
.tlink:hover { gap: 10px; }
section.dark .tlink { color: var(--paper); border-bottom-color: var(--paper); }

/* ── CARDS ────────────────────────────────────────────── */
.card {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  padding: 24px 26px;
  position: relative;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.card:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow-card);
}
.card-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--neutral-grey);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.card-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 40, "opsz" 60;
  margin-bottom: 10px;
}
.card-body {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

section.dark .card {
  background: var(--surface-dark-card);
  border-color: var(--dark-hairline);
  color: var(--paper);
}
section.dark .card:hover {
  background: var(--surface-dark-card-hover);
  border-color: var(--paper-on-night-40);
}
section.dark .card-body { color: rgba(255,252,249,0.78); }

/* Card with featured signal top stripe */
.card-featured {
  border-top: 3px solid var(--signal);
  padding-top: 30px;
}

/* ── BADGES / VERDICTS ────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
  white-space: nowrap;
}
.badge-strong    { background: var(--strong-soft);    color: var(--strong); }
.badge-selective { background: var(--selective-soft); color: var(--selective); }
.badge-satellite { background: var(--satellite-soft); color: var(--satellite); }
.badge-fallback  { background: var(--fallback-soft);  color: var(--fallback); }
.badge-monitor   { background: var(--monitor-soft);   color: var(--monitor); }
.badge-signal    { background: var(--signal-soft);    color: var(--signal-deep); }
.badge-ink       { background: var(--ink);            color: var(--paper); }
.badge-outline   { background: transparent;           color: var(--ink); border: 1px solid var(--ink); padding: 3px 9px; }
.badge-locked    { background: var(--paper-warm, #F5EFE6); color: var(--neutral-grey, #788591); border: 1px solid var(--rule-strong, #C8C1B3); padding: 3px 9px; }

/* ── STATS / NUMBERS ──────────────────────────────────── */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-num {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 350;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variation-settings: "SOFT" 60, "opsz" 144;
  color: var(--ink);
}
section.dark .stat-num { color: var(--paper); }
.stat-num .unit {
  font-family: var(--mono);
  font-size: 0.4em;
  font-weight: 500;
  color: var(--neutral-grey);
  letter-spacing: 0.05em;
  margin-left: 4px;
  vertical-align: middle;
}
section.dark .stat-num .unit { color: rgba(255,252,249,0.55); }
.stat-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral-grey);
  margin-top: 8px;
}
section.dark .stat-label { color: rgba(255,252,249,0.65); }

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 36px 0;
}
section.dark .stats-strip { border-color: rgba(255,252,249,0.4); }
.stats-strip .stat {
  padding: 0 32px;
  border-right: 1px solid var(--rule);
}
.stats-strip .stat:last-child { border-right: none; }
section.dark .stats-strip .stat { border-right-color: rgba(255,252,249,0.18); }
@media (max-width: 720px) {
  .stats-strip { grid-template-columns: 1fr; gap: 28px; padding: 24px 0; }
  .stats-strip .stat { padding: 0; border-right: none; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
  .stats-strip .stat:last-child { border-bottom: none; padding-bottom: 0; }
}

/* ── FUNNEL · 750→16 visualisation ────────────────────── */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 720px;
  margin: 0 auto;
}
.funnel-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
}
.funnel-row .funnel-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral-grey);
}
section.dark .funnel-row .funnel-num { color: rgba(255,252,249,0.6); }
.funnel-bar {
  height: 38px;
  background: var(--ink);
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
section.dark .funnel-bar { background: var(--paper); }
.funnel-bar-label {
  font-family: var(--serif);
  color: var(--paper);
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 36;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
section.dark .funnel-bar-label { color: var(--ink); }
.funnel-row .funnel-count {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: right;
}
section.dark .funnel-row .funnel-count { color: var(--paper); }

.funnel-row:nth-child(1) .funnel-bar { width: 100%; }
.funnel-row:nth-child(2) .funnel-bar { width: 78%; }
.funnel-row:nth-child(3) .funnel-bar { width: 56%; }
.funnel-row:nth-child(4) .funnel-bar { width: 34%; }
.funnel-row:nth-child(5) .funnel-bar { width: 18%; background: var(--signal); }
section.dark .funnel-row:nth-child(5) .funnel-bar { background: var(--signal); }
.funnel-row:nth-child(5) .funnel-bar-label { color: var(--paper); }

@media (max-width: 720px) {
  .funnel-row { grid-template-columns: 70px 1fr 60px; gap: 10px; }
  .funnel-row .funnel-num { font-size: 9px; }
  .funnel-bar-label { font-size: 13px; }
}

/* ── STEPPER · onboarding timeline ────────────────────── */
.stepper {
  display: grid;
  gap: 0;
  border-left: 2px solid var(--ink);
  padding-left: 28px;
  position: relative;
}
section.dark .stepper { border-left-color: var(--paper); }
.stepper-step {
  position: relative;
  padding: 18px 0 32px;
}
.stepper-step:last-child { padding-bottom: 0; }
.stepper-step::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 24px;
  width: 14px;
  height: 14px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
}
section.dark .stepper-step::before { background: var(--night); border-color: var(--paper); }
.stepper-step.active::before {
  background: var(--signal);
  border-color: var(--signal);
}
.stepper-num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 6px;
}
section.dark .stepper-num { color: var(--signal-light); }
.stepper-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 60;
  margin-bottom: 8px;
}
.stepper-body {
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 520px;
}
section.dark .stepper-body { color: rgba(255,252,249,0.78); }

/* ── COVERAGE GRID · SEBI categories ──────────────────── */
.coverage-grid {
  display: grid;
  gap: 6px;
}
.coverage-group {
  border: 1px solid var(--rule-strong);
  background: var(--paper-card);
  padding: 18px 20px;
}
section.dark .coverage-group { background: var(--night-soft); border-color: var(--night-rule); }
.coverage-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 4px;
}
section.dark .coverage-group-head { border-bottom-color: var(--night-rule); }
.coverage-group-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  font-variation-settings: "SOFT" 40, "opsz" 60;
}
.coverage-group-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--neutral-grey);
}
section.dark .coverage-group-count { color: rgba(255,252,249,0.6); }
.coverage-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.coverage-cat {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 4px 9px;
  background: var(--paper-warm);
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
section.dark .coverage-cat { background: var(--night); color: rgba(255,252,249,0.75); }

/* ── MOCKUP FRAME · for dashboard preview ─────────────── */
.mockup-frame {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-pop);
  position: relative;
  overflow: hidden;
}
.mockup-chrome {
  background: var(--paper-deep);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--rule);
}
.mockup-chrome .dots {
  display: flex;
  gap: 6px;
}
.mockup-chrome .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rule-strong);
}
.mockup-chrome .url {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--neutral-grey);
  letter-spacing: 0.04em;
  margin-left: 12px;
  padding: 4px 12px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  flex: 1;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mockup-body { padding: 28px; }
@media (max-width: 720px) { .mockup-body { padding: 16px; } }

/* ── ACCORDION · FAQ ──────────────────────────────────── */
.accordion {
  border-top: 1px solid var(--ink);
}
.accordion-item {
  border-bottom: 1px solid var(--rule-strong);
}
.accordion-trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 24px 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
  font-variation-settings: "SOFT" 40, "opsz" 60;
  color: var(--ink);
  transition: color 0.15s;
}
.accordion-trigger:hover { color: var(--signal-deep); }
.accordion-icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  margin-top: 8px;
}
.accordion-icon::before, .accordion-icon::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.25s ease;
}
.accordion-icon::before { top: 11px; left: 0; right: 0; height: 1.5px; }
.accordion-icon::after { left: 11px; top: 0; bottom: 0; width: 1.5px; }
.accordion-item.open .accordion-icon::after { transform: rotate(90deg); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.accordion-item.open .accordion-content { max-height: 600px; }
.accordion-body {
  padding: 0 0 24px;
  max-width: 720px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
}

/* ── FORMS ────────────────────────────────────────────── */
.form-grid { display: grid; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral-grey);
  font-weight: 500;
}
.field label .req { color: var(--signal-deep); margin-left: 3px; vertical-align: super; font-size: 9px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-card);
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 2px var(--signal-soft);
}
textarea { min-height: 120px; resize: vertical; }

/* ── HERO ─────────────────────────────────────────────── */
.hero {
  padding: clamp(56px, 9vw, 112px) 0 clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--ink);
  position: relative;
  overflow: hidden;
}
.hero.dark {
  background-color: var(--grad-dark-3);
  background: var(--surface-ink);
  color: var(--paper);
  border-bottom-color: rgba(255,252,249,0.4);
}
.hero.dark h1, .hero.dark h2 { color: var(--paper); }
.hero.dark .lede { color: rgba(255,252,249,0.8); }

/* Subtle orbital — Seaweed dot at centre */
.hero-orbital {
  position: absolute;
  top: 50%;
  right: -120px;
  transform: translateY(-50%);
  width: 480px;
  height: 480px;
  pointer-events: none;
  opacity: 0.45;
}
.hero.dark .hero-orbital { opacity: 0.3; }
.hero-orbital .orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid var(--rule-mid);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hero.dark .hero-orbital .orbit { border-color: rgba(255,252,249,0.22); }
.hero-orbital .orbit.r1 { width: 160px; height: 160px; }
.hero-orbital .orbit.r2 { width: 280px; height: 280px; }
.hero-orbital .orbit.r3 { width: 420px; height: 420px; }
.hero-orbital .sun {
  position: absolute;
  top: 50%; left: 50%;
  width: 9px; height: 9px;
  background: var(--signal);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px 5px rgba(0, 66, 37, 0.45);
}
.hero-orbital .planet {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 0 0;
}
.hero-orbital .planet.p1 { animation: orbitSpin 32s linear infinite; }
.hero-orbital .planet.p2 { animation: orbitSpin 58s linear infinite reverse; }
.hero-orbital .planet.p3 { animation: orbitSpin 96s linear infinite; }
.hero-orbital .planet .dot {
  position: absolute;
  border-radius: 50%;
  background: var(--ink-soft);
}
.hero.dark .hero-orbital .planet .dot { background: var(--paper); }
.hero-orbital .planet.p1 .dot { width: 5px; height: 5px; transform: translate(76px, -2.5px); background: var(--lavender); }
.hero-orbital .planet.p2 .dot { width: 7px; height: 7px; transform: translate(136px, -3.5px); background: var(--mauve); box-shadow: 0 0 8px 1px rgba(149,113,134,0.4); }
.hero-orbital .planet.p3 .dot { width: 4px; height: 4px; transform: translate(206px, -2px); background: var(--lavender); }
@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 1100px) { .hero-orbital { display: none; } }

.hero-content { max-width: 900px; position: relative; z-index: 2; }
.hero h1 { margin-bottom: 28px; }
.hero .lede { margin-bottom: 36px; }
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── FOOTER ───────────────────────────────────────────── */
.site-footer {
  background: var(--footer-surface);
  color: var(--paper);
  padding: 80px 0 32px;
  border-top: 1px solid var(--footer-edge);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--night-rule);
  margin-bottom: 32px;
}
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* Calculators & Tools — its own footer section, above the grid */
.footer-tools {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--night-rule);
}
.footer-tools .footer-col-title { margin-bottom: 20px; }
.footer-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px 32px;
}
.footer-tools-grid a {
  color: rgba(255,252,249,0.85);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.footer-tools-grid a:hover { color: var(--signal); }
@media (max-width: 560px) { .footer-tools-grid { grid-template-columns: 1fr 1fr; gap: 12px 24px; } }

.footer-brand .logo { color: var(--paper); font-size: 28px; }
.footer-brand p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(255,252,249,0.72);
  font-variation-settings: "SOFT" 60;
  margin-top: 16px;
  max-width: 320px;
  line-height: 1.5;
}
.footer-col-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,252,249,0.55);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul a {
  color: rgba(255,252,249,0.85);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s;
}
.footer-col ul a:hover { color: var(--signal); }
.footer-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,252,249,0.6);
  letter-spacing: 0.04em;
  line-height: 1.7;
}
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: rgba(255,252,249,0.5);
}
.footer-bottom .compliance {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(255,252,249,0.6);
  font-variation-settings: "SOFT" 60;
  max-width: 720px;
  line-height: 1.55;
}
.footer-regs {
  display: flex;
  gap: 14px;
}
.footer-regs span {
  padding: 4px 10px;
  border: 1px solid rgba(255,252,249,0.25);
  font-size: 10px;
}
@media (max-width: 720px) {
  .footer-bottom { grid-template-columns: 1fr; }
  .footer-regs { justify-content: flex-start; flex-wrap: wrap; }
}

.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,252,249,0.25);
  color: rgba(255,252,249,0.7);
  transition: border-color 0.15s, color 0.15s;
}
.footer-social a:hover { border-color: var(--signal); color: var(--signal); }
.footer-social a svg { width: 16px; height: 16px; fill: currentColor; }
.footer-wa {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 6px 14px;
  border: 1px solid rgba(255,252,249,0.25); border-radius: 4px;
  color: rgba(255,252,249,0.8); text-decoration: none;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.03em;
  transition: border-color 0.15s, color 0.15s;
}
.footer-wa:hover { border-color: #25D366; color: #25D366; }
.footer-wa svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.footer-legal-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal-links a {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  color: rgba(255,252,249,0.45); text-decoration: none;
  transition: color 0.15s;
}
.footer-legal-links a:hover { color: rgba(255,252,249,0.8); }

/* ── ANIMATIONS · scroll reveals ──────────────────────── */
/* Legacy .reveal class is now bridged to AOS by js/main.js — AOS handles
   the initial-hidden + scroll-triggered animation via data-aos attributes
   it sets on every .reveal element. The CSS below is a no-op fallback
   that ensures content stays visible if AOS fails to load. */
.reveal { opacity: 1; }
.reveal.visible { opacity: 1; }
.reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4 { transition-delay: 0; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-orbital .planet { animation: none !important; }
  * { transition: none !important; animation: none !important; }
}

/* ── CTA BAND ─────────────────────────────────────────── */
.cta-band {
  padding: clamp(72px, 10vw, 120px) 0;
  text-align: left;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-warm);
}
.cta-band h2 { max-width: 720px; margin-bottom: 24px; }
.cta-band .lede { margin-bottom: 36px; }

/* ── HELPERS ──────────────────────────────────────────── */
.text-signal { color: var(--signal-deep); }
.text-muted { color: var(--neutral-grey); }
.no-mb { margin-bottom: 0 !important; }
.mt-lg { margin-top: 48px; }
.mt-md { margin-top: 24px; }
.divider { height: 1px; background: var(--rule); margin: 32px 0; }
.divider.strong { background: var(--ink); }
section.dark .divider { background: var(--night-rule); }

/* ── RESPONSIVE TABLE WRAPPER ─────────────────────────── */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}
@media (max-width: 720px) {
  .table-scroll table { min-width: 540px; }
}

/* ════════════════════════════════════════════════════════════
   RISKOMETER — segmented bar with 6 SEBI levels
   ════════════════════════════════════════════════════════════ */
.riskometer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
}
.riskometer-label {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral-grey);
}
.riskometer-label .current { color: var(--signal-deep); font-weight: 600; }
.riskometer-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.riskometer-bar > div {
  height: 8px;
  background: var(--rule);
  position: relative;
  transition: background 0.2s;
}
/* Active level + everything below = filled */
.riskometer[data-level="1"] > .riskometer-bar > div:nth-child(-n+1),
.riskometer[data-level="2"] > .riskometer-bar > div:nth-child(-n+2),
.riskometer[data-level="3"] > .riskometer-bar > div:nth-child(-n+3),
.riskometer[data-level="4"] > .riskometer-bar > div:nth-child(-n+4),
.riskometer[data-level="5"] > .riskometer-bar > div:nth-child(-n+5),
.riskometer[data-level="6"] > .riskometer-bar > div:nth-child(-n+6) {
  background: var(--signal-deep);
}
/* Active level only — pop it */
.riskometer[data-level="1"] > .riskometer-bar > div:nth-child(1),
.riskometer[data-level="2"] > .riskometer-bar > div:nth-child(2),
.riskometer[data-level="3"] > .riskometer-bar > div:nth-child(3),
.riskometer[data-level="4"] > .riskometer-bar > div:nth-child(4),
.riskometer[data-level="5"] > .riskometer-bar > div:nth-child(5),
.riskometer[data-level="6"] > .riskometer-bar > div:nth-child(6) {
  background: var(--signal);
  height: 12px;
  margin-top: -2px;
}
.riskometer-scale {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  font-size: 8.5px;
  letter-spacing: 0.04em;
  color: var(--muted-grey);
  text-transform: uppercase;
  margin-top: 2px;
}
.riskometer-scale > div { text-align: center; line-height: 1.3; }
.riskometer[data-level="1"] > .riskometer-scale > div:nth-child(1),
.riskometer[data-level="2"] > .riskometer-scale > div:nth-child(2),
.riskometer[data-level="3"] > .riskometer-scale > div:nth-child(3),
.riskometer[data-level="4"] > .riskometer-scale > div:nth-child(4),
.riskometer[data-level="5"] > .riskometer-scale > div:nth-child(5),
.riskometer[data-level="6"] > .riskometer-scale > div:nth-child(6) {
  color: var(--signal-deep);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   RATINGS — bigger, bolder stars with proper visual weight
   ════════════════════════════════════════════════════════════ */
.rating-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.05em;
}
.rating-stars .star-filled { color: var(--signal-deep); }
.rating-stars .star-empty { color: var(--rule-strong); }

.rating-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
}
.rating-block .rating-source {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral-grey);
  min-width: 92px;
}
.rating-block .rating-stars {
  font-size: 20px;
  flex: 1;
}

.rating-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
@media (max-width: 600px) {
  .rating-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   SVG CHARTS — line + histogram + drawdown
   ════════════════════════════════════════════════════════════ */
.chart {
  width: 100%;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--neutral-grey);
}
.chart-frame {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 16px 18px;
}
.chart-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.chart-title h3, .chart-title h4, .chart-title h5 {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.chart-title .meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--neutral-grey);
  letter-spacing: 0.04em;
}

/* SVG axis lines */
.chart svg .axis-line { stroke: var(--rule); stroke-width: 1; }
.chart svg .grid-line { stroke: var(--rule); stroke-width: 0.5; stroke-dasharray: 2 3; }
.chart svg .axis-label { font-family: var(--mono); font-size: 9px; fill: var(--neutral-grey); }
.chart svg .fund-line { stroke: var(--signal); stroke-width: 2; fill: none; }
.chart svg .fund-area { fill: var(--signal-soft); opacity: 0.6; }
.chart svg .bm-line { stroke: var(--lavender-deep); stroke-width: 1.5; fill: none; stroke-dasharray: 4 3; }
.chart svg .hist-bar { fill: var(--signal); opacity: 0.85; }
.chart svg .hist-bar.bm { fill: var(--lavender-deep); opacity: 0.55; }
.chart svg .dd-area { fill: var(--monitor); opacity: 0.55; }
.chart svg .data-point { fill: var(--signal-deep); }
.chart svg .data-label { font-family: var(--mono); font-size: 9px; fill: var(--ink-soft); }

.chart-legend {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--neutral-grey);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  text-transform: uppercase;
}
.chart-legend span { display: flex; align-items: center; gap: 6px; }
.chart-legend .swatch { display: inline-block; width: 12px; height: 3px; }
.chart-legend .swatch.fund { background: var(--signal); }
.chart-legend .swatch.bm { background: var(--lavender-deep); border-top: 1px dashed; height: 0; }
.chart-legend .swatch.dd { background: var(--monitor); height: 8px; }



/* ─────────────────────────────────────────────────────────────
   ABOUT HERO · v9.1 · Solar system orbital field
   "Third Rock from the sun. Grounded by definition."
   Hero takeover: text on left, contained orbital diagram on right.
   Captures TRW's compounding-through-cycles thesis.
   v9.1 fixes: transform-box: view-box for correct rotation centers;
   smaller SVG sized to vmin so it fits the hero cleanly; per-planet
   color; Earth gains continents hint, lat/long grid, Pune pulse.
   ───────────────────────────────────────────────────────────── */

.about-hero {
  position: relative;
  padding: clamp(80px, 9vw, 140px) 0 clamp(56px, 6vw, 88px);
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
}

/* about.html hero runs the premium gradient (matches the dark sections).
   Higher specificity than the .section--ink default so it wins. */
.about-hero.section--ink { background-color: var(--grad-dark-3); background: var(--surface-ink); }

/* Grid removed on this hero — the rotating particle globe + starfield
   already carry the texture, the grid reads as clutter behind them.
   To restore the shared fine grid here, delete this one rule. */
.about-hero.section--ink::before { display: none; }

.about-hero__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Ambient cosmic-formation particle field — a self-contained Three.js
   module (see end of about.html <body>) renders into this canvas.
   Particle alpha/brightness is controlled in the shader, not in CSS. */
#about-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Hero content: centered horizontally, sits above the Earth backdrop. */
.about-hero__content {
  position: relative;
  z-index: 1;
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 96px) 0;
}

.about-hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--neutral);
  margin: 0 0 var(--s-6);
}

.about-hero__title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'wght' 360, 'SOFT' 50;
  font-size: clamp(44px, 6.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.026em;
  color: var(--ink);
  margin: 0 auto var(--s-7);
  max-width: 18ch;
}

.about-hero__title .italic {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 320, 'SOFT' 100;
}

.about-hero__lede {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto var(--s-8);
}

/* Meta strip · hairline-separated tabular row, never wrap awkwardly */
.about-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--s-5) var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(244, 235, 217, 0.28);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 235, 217, 0.62);
  max-width: 56rem;
  margin: 0 auto;
}
.about-hero__meta-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
/* The numerals/labels render in brightened mahogany — the rare pigment
   anchors the trust signals (years, regulator, origin) on the dark hero. */
.about-hero__meta-cell b {
  color: var(--warning-light);
  font-weight: 500;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: none;
}

@media (max-width: 980px) {
  .about-hero__title { max-width: 18ch; }
}

@media (max-width: 640px) {
  .about-hero { padding-top: clamp(72px, 14vw, 112px); padding-bottom: clamp(64px, 10vw, 96px); }
  /* Hide the particle canvas host on small phones — the JS module reads
     getComputedStyle(host).display and skips WebGL context creation. */
  .about-hero__visual { display: none; }
  .about-hero__title { font-size: clamp(36px, 10vw, 52px); max-width: none; }
  .about-hero__meta { gap: var(--s-4) var(--s-5); font-size: 10px; }
}


/* ─────────────────────────────────────────────────────────────
   ABOUT · PRINCIPLES GRID · asymmetric editorial layout
   3-col grid with span-2 lead cards alternating with span-1
   tight cards, then a full-width manifesto card. Breaks the
   identical-card-grid pattern per DESIGN.md absolute bans.
   ───────────────────────────────────────────────────────────── */

.principles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.principles-grid .card--lead {
  padding: 36px 40px;
}

.principles-grid .card--lead .card-title {
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin-bottom: 20px;
}

.principles-grid .card--tight {
  padding: 28px 28px;
}

.principles-grid .card--tight .card-title {
  font-size: clamp(22px, 2.0vw, 26px);
  line-height: 1.1;
}

.principles-grid .card--manifesto {
  padding: 56px 64px;
  background: linear-gradient(135deg, rgba(0, 66, 37, 0.18) 0%, transparent 60%), var(--ink-soft, #18293A);
  border: 1px solid var(--night-rule, #2A4055);
}

.principles-grid .card--manifesto .card-num {
  font-size: 14px;
  letter-spacing: 0.22em;
}

.principles-grid .card--manifesto .card-title {
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.024em;
  margin-bottom: 24px;
}

.principles-grid .card--manifesto .card-body {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 20px;
}

@media (max-width: 880px) {
  .principles-grid {
    grid-template-columns: 1fr;
  }
  .principles-grid .card--lead,
  .principles-grid .card--tight,
  .principles-grid .card--manifesto {
    grid-column: 1 / -1 !important;
  }
  .principles-grid .card--manifesto {
    padding: 36px 28px;
  }
}


/* ═════════════════════════════════════════════════════════════
   LIGHT-SECTION CONTENT EFFECTS  ·  .fx-*
   Light sections keep a plain, restful background. Their craft is
   in how content is set and how it answers to attention — paper
   panels that lift, a section title that draws its own rule.
   Pure CSS, hover-driven, reduced-motion aware.
   ───────────────────────────────────────────────────────────── */
.problem-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 820px) {
  .problem-split { grid-template-columns: 1fr; gap: 20px; }
}

/* paper panels — they lift toward the reader on hover */
.fx-section .fx-panel {
  padding: clamp(28px, 3vw, 46px);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease,
              box-shadow 0.45s ease,
              background-color 0.45s ease;
}
.fx-section .fx-panel:hover {
  transform: translateY(-5px);
  background-color: #FCF7EA;
  border-color: rgba(40, 62, 45, 0.42);
  box-shadow: 0 22px 46px -26px rgba(40, 62, 45, 0.45);
}

/* section title — an evergreen rule draws itself in on section hover */
.fx-underline { position: relative; display: inline-block; }
.fx-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -8px;
  width: 100%; height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.fx-section:hover .fx-underline::after { transform: scaleX(1); }

/* the closer — the emotional key line; its rule warms to evergreen */
.fx-closer {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  font-variation-settings: 'SOFT' 60;
  transition: border-color 0.45s ease;
}
.fx-section .fx-panel:hover .fx-closer { border-top-color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .fx-section .fx-panel, .fx-underline::after, .fx-closer { transition: none; }
  .fx-section .fx-panel:hover { transform: none; }
}

/* asymmetric panel layouts — varied sizes within one cohesive system */
.fx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.fx-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fx-stack > .fx-panel { width: 78%; }
.fx-stack > .fx-panel:nth-child(2) { margin-left: 11%; }
.fx-stack > .fx-panel:nth-child(3) { margin-left: 22%; }
@media (max-width: 860px) {
  .fx-grid { grid-template-columns: 1fr; gap: 16px; }
  .fx-grid > * { grid-column: auto !important; }
  .fx-stack > .fx-panel { width: 100%; margin-left: 0 !important; }
}

/* lead / tight scale variants of .fx-panel */
.fx-section .fx-panel--lead  { padding: clamp(32px, 3.6vw, 52px); }
.fx-section .fx-panel--tight { padding: clamp(24px, 2.6vw, 34px); }
.fx-panel--lead .card-title {
  font-size: clamp(25px, 2.7vw, 34px);
  line-height: 1.07;
  letter-spacing: -0.018em;
}
.fx-panel--tight .card-title {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.14;
}

/* pledge strip — three crisp guarantees, hairline-divided.
   Used on dark sections; each line carries a short evergreen rule. */
.pledge-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 252, 249, 0.16);
  border-bottom: 1px solid rgba(255, 252, 249, 0.16);
  margin: 4px 0 36px;
}
.pledge-strip > div { padding: 22px 30px 24px 0; }
.pledge-strip > div + div {
  padding-left: 30px;
  border-left: 1px solid rgba(255, 252, 249, 0.13);
}
.pledge-strip p {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  color: var(--paper);
  font-variation-settings: 'SOFT' 50, 'opsz' 70;
}
.pledge-strip p::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--signal-light);
  margin-bottom: 13px;
}
@media (max-width: 720px) {
  .pledge-strip { grid-template-columns: 1fr; }
  .pledge-strip > div { padding: 18px 0; }
  .pledge-strip > div + div {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 252, 249, 0.13);
  }
}

/* ─────────────────────────────────────────────────────────────
   HOW WE WORK — a tighter spatial rhythm. Page-scoped so the
   denser layout stays contained to this page: trimmed section
   padding, box padding, and grid gaps.
   ───────────────────────────────────────────────────────────── */
[data-barba-namespace="how-we-work"] section {
  padding: var(--space-section-compact) 0;
}
[data-barba-namespace="how-we-work"] .sec-head { margin-bottom: 22px; }

[data-barba-namespace="how-we-work"] .fx-section .fx-panel {
  padding: clamp(22px, 2.3vw, 30px);
}
[data-barba-namespace="how-we-work"] .fx-section .fx-panel--lead {
  padding: clamp(26px, 2.8vw, 38px);
}
[data-barba-namespace="how-we-work"] .fx-section .fx-panel--tight {
  padding: clamp(20px, 2.1vw, 27px);
}
[data-barba-namespace="how-we-work"] .principles-grid .card--lead  { padding: 26px 30px; }
[data-barba-namespace="how-we-work"] .principles-grid .card--tight { padding: 22px 24px; }

[data-barba-namespace="how-we-work"] .fx-grid,
[data-barba-namespace="how-we-work"] .principles-grid { gap: 16px; }
[data-barba-namespace="how-we-work"] .fx-stack { gap: 14px; }

@media (min-width: 861px) {
  [data-barba-namespace="how-we-work"] .fx-stack > .fx-panel { width: 86%; }
  [data-barba-namespace="how-we-work"] .fx-stack > .fx-panel:nth-child(2) { margin-left: 7%; }
  [data-barba-namespace="how-we-work"] .fx-stack > .fx-panel:nth-child(3) { margin-left: 14%; }
}

/* ─────────────────────────────────────────────────────────────
   SECTION DIVIDERS · structural punctuation between sections
   Hairline rule + small editorial tick. Transitions read clearly
   even when two consecutive sections share the same ivory tone.
   Skip on the first section after <main> (the hero) — that one
   leads, doesn't need announcing.
   ───────────────────────────────────────────────────────────── */

main > section + section:not(.cta-band):not(.fund-ident) {
  position: relative;
}
main > section + section:not(.cta-band):not(.fund-ident)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--container);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(15, 30, 44, 0.18) 18%,
    rgba(15, 30, 44, 0.18) 82%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Dark sections get a brighter divider so it shows on dark bg */
main > section + section.dark::before,
main > section.dark + section::before {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 252, 249, 0.20) 18%,
    rgba(255, 252, 249, 0.20) 82%,
    transparent 100%
  );
}

/* Section eyebrow tick — small ornament to mark section start.
   Apply via .sec-tick class manually, or auto-included with .sec-head. */
.sec-head {
  position: relative;
}
.sec-head::after {
  content: "·";
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 18px;
  color: var(--neutral-grey);
  opacity: 0.6;
  letter-spacing: 0.4em;
}
section.dark .sec-head::after {
  color: var(--signal-light);
  opacity: 0.5;
}

/* Hover affordance on cards using the new lighter card surface */
.card,
.layer-card,
.tier-card {
  background: var(--paper-card);
}

/* ════════════════════════════════════════════════════════════
   SECTION--INK · hero-only dark surface with fine grid + cursor halo
   Use: <section class="section--ink" data-halo>...</section>
   Pairs with initHalo() in js/main.js which tracks the mouse and
   updates --mx / --my CSS variables on the element.
   ════════════════════════════════════════════════════════════ */
.section--ink {
  position: relative;
  background-color: var(--grad-dark-3);
  background: var(--surface-ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.section--ink::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--ink-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-line) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 90%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 35%, transparent 90%);
}
.section--ink[data-halo]::after {
  /* Halo is MAHOGANY-tinted: the rare pigment makes its visual
     appearance on the dark hero, but as a soft glow rather than a
     hard block. mix-blend-mode: screen lifts whatever it touches. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(201, 122, 130, 0.28),
    rgba(201, 122, 130, 0.08) 30%,
    transparent 65%
  );
  mix-blend-mode: screen;
}
/* Lift content containers above the grid (z-0) and halo (z-1).
   Avoid the blanket "> *" rule because it collapses absolutely-positioned
   children like .about-hero__visual that need their own containing block. */
.section--ink > .container,
.section--ink > .hero-orbit-grid,
.section--ink > .about-hero__content {
  position: relative;
  z-index: 3;
}
/* Visual layers. index.html's orbit globe sits between the halo and the
   text (z-2). about.html's particle canvas sits BELOW the halo (z-0) so
   the mahogany cursor glow lifts the particle field where the cursor is. */
.section--ink > .hero-orbit-vis {
  z-index: 2;
}
.section--ink > .about-hero__visual {
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .section--ink[data-halo]::after { display: none; }
}

/* Force eggshell-light type inside evergreen heroes — child text colors
   authored for the warm-paper surface would be invisible here without this. */
.section--ink h1, .section--ink h2, .section--ink h3,
.section--ink h4, .section--ink h5,
.section--ink p, .section--ink li,
.section--ink .lede, .section--ink .val, .section--ink .num,
.section--ink dt, .section--ink dd,
.section--ink blockquote, .section--ink cite {
  color: var(--paper);
}
.section--ink .eyebrow, .section--ink .lbl, .section--ink .sub,
.section--ink .meta, .section--ink small,
.section--ink .sec-num, .section--ink .sec-meta {
  color: rgba(244, 235, 217, 0.62);
}
/* THE RARE PIGMENT · italic accent words and explicit .accent stamps
   render in brightened mahogany on the dark hero (AA-safe at this lightness). */
.section--ink .accent, .section--ink .acc, .section--ink em,
.section--ink strong.accent {
  color: var(--warning-light);
}
/* Hairline rules on evergreen */
.section--ink hr,
.section--ink .rule { border-color: var(--ink-line); background: var(--ink-line); }
/* Primary CTA on the evergreen hero flips to WHEAT bg + evergreen text
   (warm contrast with the dark surface, mahogany underline reserved for hover). */
.section--ink .btn-primary {
  background: var(--paper-warm);
  color: var(--ink);
  border-color: var(--paper-warm);
}
.section--ink .btn-primary::before { background: var(--paper); }
.section--ink .btn-primary:hover { color: var(--ink); }
/* Ghost button on dark: outline in ink-line, hover shifts to mahogany */
.section--ink .btn:not(.btn-primary) {
  color: var(--paper);
  border-color: var(--ink-line);
  background: transparent;
}
.section--ink .btn:not(.btn-primary)::before { background: var(--paper-warm); }
.section--ink .btn:not(.btn-primary):hover {
  color: var(--ink);
  border-color: var(--warning-light);
}

/* The about.html hero visual is a Three.js particle canvas (#about-hero-canvas),
   styled in the ABOUT PAGE section above and layered at z-index 0 via the
   .section--ink > .about-hero__visual rule. No SVG retoning needed. */

/* ════════════════════════════════════════════════════════════
   TOOL TEASER COMPONENTS · used site-wide to promote tools
   .tool-chip      — inline action chip (compare, fund-detail, watchlist toolbars)
   .tool-teaser    — bordered band with eyebrow + pitch + CTAs (mid-page)
   .tool-grid      — 4-card discovery grid (home page, how-we-work)
   ════════════════════════════════════════════════════════════ */

/* Inline action chip — sits alongside buttons in action rows */
.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tool-chip:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tool-chip-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-chip-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.tool-chip-arrow {
  font-family: var(--mono);
  font-size: 13px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-chip:hover .tool-chip-arrow { transform: translateX(3px); }

/* Mid-page teaser band */
.tool-teaser {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  position: relative;
}
@media (max-width: 720px) {
  .tool-teaser { grid-template-columns: 1fr; }
}
.tool-teaser-body .eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--warning);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tool-teaser-body .eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--warning);
}
.tool-teaser-body h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  font-variation-settings: "SOFT" 50, "opsz" 80;
}
.tool-teaser-body h3 .ital {
  font-style: italic;
  color: var(--warning);
}
.tool-teaser-body p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  font-variation-settings: "SOFT" 60;
  max-width: 480px;
}
.tool-teaser-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.tool-teaser-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tool-teaser-cta:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tool-teaser-cta.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tool-teaser-cta.primary:hover {
  background: var(--signal-deep);
}
.tool-teaser-cta-arrow {
  font-size: 13px;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-teaser-cta:hover .tool-teaser-cta-arrow { transform: translateX(3px); }

/* Full discovery grid — same look as .tools-related-grid on tool pages */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.tool-grid-card {
  display: block;
  padding: 28px 26px;
  background: var(--paper-card);
  color: var(--ink);
  text-decoration: none;
  transition: background 120ms ease;
  position: relative;
  min-height: 168px;
}
.tool-grid-card:hover { background: var(--paper); }
.tool-grid-card .meta {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--neutral-grey);
  margin-bottom: 10px;
}
.tool-grid-card h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  font-variation-settings: "SOFT" 50, "opsz" 80;
  color: var(--ink);
}
.tool-grid-card p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  font-variation-settings: "SOFT" 60;
}
.tool-grid-card .arrow {
  position: absolute;
  bottom: 22px;
  right: 22px;
  font-family: var(--mono);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-grid-card:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}