/* ============================================
   f1gures. Brand Tokens.
   Source of truth. Never override these.
============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Sora:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* --- Surface colours --- */
  --bg:          #ffffff;
  --surface:     #fbfbfb;
  --surface-2:   #f4f4f7;

  /* --- Ink (text) colours --- */
  --ink:         #191c36;
  --ink-2:       #252847;
  --ink-muted:   rgba(25,28,54,0.65);
  --ink-faint:   rgba(25,28,54,0.45);
  --ink-ghost:   rgba(25,28,54,0.28);

  /* --- Accents --- */
  --purple:      #5858a1;
  --mid-purple:  #4e4e8e;
  --coral:       #f16b52;
  --gold:        #5858a1;

  /* --- Legacy aliases for backward compat --- */
  --deep:        var(--bg);
  --navy:        var(--surface);
  --white:       var(--ink);
  --muted:       var(--ink-faint);
  --muted-2:     var(--ink-muted);
  --border:      rgba(25,28,54,0.07);
  --border-2:    rgba(25,28,54,0.12);
  --purple-glow: rgba(88,88,161,0.08);
  --coral-glow:  rgba(241,107,82,0.06);
  --gold-glow:   rgba(88,88,161,0.10);

  /* --- Fonts --- */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans:  'Sora', system-ui, sans-serif;
  --mono:  'DM Mono', monospace;

  /* --- Spacing & Shape --- */
  --radius:    14px;
  --radius-sm: 8px;
  --radius-xs: 5px;
}

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- The "1" Rule (coral italic "1" inside the f1gures wordmark) --- */
/* Usage: <span class="one">1</span> inside any headline */
.one {
  font-size: 0.8359em;
  font-style: italic;
  color: var(--coral);
  vertical-align: 0.20em;
  letter-spacing: 0;
}
.one.gold { color: var(--purple); }

/* --- Navigation Bar --- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--coral);
  padding: 0 5%;
  display: flex;
  align-items: center;
  gap: 0;
}
nav .logo svg { filter: brightness(0) invert(1); }
nav a {
  font-family: var(--sans);
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  padding: 18px 13px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}
nav a:hover { color: #ffffff; border-bottom-color: rgba(255,255,255,0.55); }

/* --- Hero Section --- */
.hero {
  min-height: 100vh;
  background: var(--deep);
  position: relative;
  overflow: hidden;
  padding: 80px 10%;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  top: -180px; right: -120px;
  width: 680px; height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(88,88,161,0.22) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 25%;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241,107,82,0.1) 0%, transparent 65%);
  pointer-events: none;
}

/* Topographic canvas sits behind the orbs and content via isolated
   stacking context (z-index: -1 stays contained within .hero / .signup-page). */
.hero-bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: -1;
}
.signup-page { isolation: isolate; }

/* --- Section Layout --- */
.section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 88px 5% 64px;
  border-bottom: 1px solid var(--border);
}
.section:last-child { border-bottom: none; }

/* --- Eyebrow Label --- */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 14px;
  display: block;
}

/* --- Headlines --- */
h1, h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 56px);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin-bottom: 18px;
}
h1 em, h2 em { font-style: italic; color: var(--purple); }

h3 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.3px;
}

/* --- Subheadline --- */
.subhead {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: var(--muted-2);
  max-width: 540px;
  line-height: 1.75;
  margin-bottom: 52px;
}

/* --- Cards --- */
.card {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 28px;
}
.card-inset {
  background: rgba(25,28,54,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
}

/* --- CTA Buttons --- */
.btn-primary {
  background: var(--coral);
  color: #ffffff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.88; }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  padding: 13px 27px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.2s;
}
.btn-secondary:hover { border-color: var(--purple); }

/* --- Grids --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }

@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* --- Feature Block --- */
.feature-block {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 56px;
  margin-bottom: 28px;
  position: relative;
  overflow: hidden;
}
.feature-block::before {
  content: '';
  position: absolute;
  top: -120px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 65%);
  pointer-events: none;
}
.feature-block::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -40px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--coral-glow) 0%, transparent 65%);
  pointer-events: none;
}
.feature-block p {
  font-family: var(--serif);
  font-size: clamp(20px, 3vw, 30px);
  color: var(--white);
  line-height: 1.45;
  max-width: 680px;
  position: relative;
  z-index: 1;
}
.feature-block p em { font-style: italic; color: var(--purple); }

/* --- Mono Label --- */
.label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid-purple);
  margin-bottom: 14px;
  display: block;
}

/* --- Footer --- */
footer {
  background: var(--deep);
  border-top: 1px solid var(--border);
  padding: 48px 5%;
  text-align: center;
}
footer .footer-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* ============================================
   v2.1 Components
   Added April 2026. Extends the tokens above.
============================================ */

/* --- Logo containers (descender-safe) ---
   The wordmark SVG carries its own viewBox padding (215 595 1070 375)
   so the "g" descender is never clipped. Containers must NOT set
   overflow: hidden on the logo, and should let the SVG breathe vertically.
*/
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border-bottom: none !important;
  line-height: 1;
  overflow: visible;
}
.logo svg { display: block; overflow: visible; height: auto; }
.logo:hover { opacity: 0.85; }

/* --- Headline rule ---
   v2.1 voice: short declarative sentences ending with a period.
   One italic phrase per headline, set in gold.
*/
.headline {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 18px;
}
.headline em { font-style: italic; color: var(--purple); }
.headline.size-hero    { font-size: clamp(38px, 5.2vw, 56px); }
.headline.size-section { font-size: clamp(28px, 3.6vw, 40px); }
.headline.size-sub     { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.4px; line-height: 1.15; }

/* --- DM Mono number rendering ---
   Use anywhere a real figure appears in body or a dashboard mockup.
*/
.figure {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0;
  font-feature-settings: "tnum" 1;
}

/* --- Section spacing helpers --- */
.section-narrow { max-width: 720px; }
.section-wide   { max-width: 1180px; }
.section-tight  { padding-top: 56px; padding-bottom: 32px; }

/* --- Eyebrow (mono) variants --- */
.eyebrow.muted { color: var(--mid-purple); }

/* --- Lede paragraph (subhead alternative for hero) --- */
.lede {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--muted-2);
  max-width: 580px;
  margin: 0 0 36px;
}

/* --- CTA cluster --- */
.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* --- Trust strip (small mono trust signal under CTAs) --- */
.trust-strip {
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-strip::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: var(--muted);
}

/* --- Pillar card (Three things, Three superpowers) --- */
.pillar {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color var(--transition, 240ms ease-out),
              transform   var(--transition, 240ms ease-out);
}
.pillar:hover { border-color: rgba(88,88,161,0.45); }
.pillar-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}
.pillar-title {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0;
}
.pillar-body {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--muted-2);
  line-height: 1.7;
  margin: 0;
}
.pillar-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(88,88,161,0.18);
  border: 1px solid rgba(88,88,161,0.35);
  color: var(--white);
}
.pillar-icon svg { width: 18px; height: 18px; }

/* --- Promise card (4-up trust block) --- */
.promise {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promise-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--coral);
}
.promise-title {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  margin: 0;
}
.promise-body {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted-2);
  margin: 0;
}

/* --- Product placeholder frame ---
   Dark aspect-ratio container with subtle purple glow.
   Use until live product screenshots / videos arrive.
*/
.product-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.product-frame::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(circle at 25% 35%, rgba(88,88,161,0.22), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(241,107,82,0.10), transparent 55%);
  pointer-events: none;
}
.product-frame-tag {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: rgba(255,255,255,0.85);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-2);
}

/* --- Planning circle layout (consumer page) --- */
.planning {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.planning-figure {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.planning-figure svg { display: block; width: 100%; height: auto; }
@media (max-width: 760px) {
  .planning { grid-template-columns: 1fr; gap: 32px; }
}

/* --- Two-column body (lede + bullet promises) --- */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 760px) {
  .split-2 { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Partner tile (CONSUMER-PARTNERS) --- */
.partner-tile {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 132px;
}
.partner-name {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}
.partner-desc {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-2);
  line-height: 1.55;
}
.partner-status {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-purple);
}
.partner-status.live { color: #2f9d6f; }

/* --- Big CTA block (final section) --- */
.cta-block {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 56px;
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--purple-glow) 0%, transparent 65%);
  pointer-events: none;
}
@media (max-width: 760px) { .cta-block { padding: 36px 24px; } }

/* --- Pull quote (neutrality pledge) --- */
.pledge {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius);
  padding: 36px 40px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 26px);
  font-style: italic;
  line-height: 1.45;
  color: var(--white);
  max-width: 820px;
}
.pledge-attr {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Vertical timeline (advisor Monday workflow) --- */
.timeline {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px 32px;
  align-items: start;
}
.timeline-time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--coral);
  letter-spacing: 0.05em;
  padding-top: 4px;
}
.timeline-step {
  position: relative;
  padding: 0 0 28px 22px;
  border-left: 1px solid var(--border-2);
}
.timeline-step::before {
  content: "";
  position: absolute;
  left: -5px; top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px rgba(241,107,82,0.18);
}
.timeline-step:last-child { border-left: 1px solid transparent; padding-bottom: 0; }
.timeline-step p {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: var(--muted-2);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 640px) {
  .timeline { grid-template-columns: 80px 1fr; gap: 16px 20px; }
  .timeline-time { font-size: 12px; }
}

/* --- ROI stats (advisor numbers, DM Mono) --- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .stat-grid { grid-template-columns: 1fr; } }
.stat {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  padding: 28px;
}
.stat-value {
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 500;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.5px;
}
.stat-value-suffix {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--muted);
  margin-left: 4px;
}
.stat-label {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-2);
  line-height: 1.6;
}

/* --- Compliance badge row --- */
.badge-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 760px) { .badge-row { grid-template-columns: 1fr 1fr; } }
.badge {
  background: var(--navy);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 18px;
}
.badge-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--white);
  margin: 0 0 6px;
}
.badge-body {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  color: var(--muted-2);
  line-height: 1.55;
  margin: 0;
}

/* --- Inline link (text-style) --- */
.link {
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid var(--purple);
  transition: border-color 0.2s, color 0.2s;
}
.link:hover { color: var(--purple); border-bottom-color: var(--purple); }

/* --- Big mono divider --- */
.rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 56px 0;
}

/* --- Page-bottom secondary nav arrow --- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted-2);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  transition: color 0.2s;
}
.arrow-link::after { content: "→"; transition: transform 0.2s; }
.arrow-link:hover { color: var(--white); }
.arrow-link:hover::after { transform: translateX(3px); }

/* ============================================
   Footer (extended for v2.1)
============================================ */
.site-footer {
  background: var(--navy);
  border-top: 1px solid var(--border-2);
  padding: 48px 5% 32px;
  text-align: left;
}
.site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.site-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.site-footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer-links a {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer-links a:hover { color: var(--white); }
.site-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
}



/* ===== Mobile-safety fallbacks ===== */
/* Some mobile browsers under file:// don't reliably honour brand.css's
   body rules.  Restate them as a hard fallback so the page never flashes
   white. */
html, body {
  background: #ffffff;
  color: #191c36;
  margin: 0;
  min-height: 100vh;
}

/* ===== Combined preview chassis. Mirrors source page nav typography. ===== */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-2);
  padding: 0 5%;
  display: flex;
  align-items: center;
  gap: 8px;
}
.site-logo {
  display: inline-flex;
  text-decoration: none;
  align-items: center;
  margin-right: auto;
  padding: 8px 0;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.site-logo svg {
  display: block;
  overflow: visible;
  width: 116px;
  height: 41px;
}
.site-tabs {
  display: flex;
  align-items: center;
  gap: 0;
}
.site-tabs button, .site-tabs a {
  appearance: none;
  background: transparent;
  border: none;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 18px 13px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.site-tabs button:hover, .site-tabs a:hover {
  color: var(--ink);
  border-bottom-color: var(--coral);
}
.site-tabs button.is-active, .site-tabs a.is-active {
  color: var(--ink);
  border-bottom-color: var(--coral);
}
.site-tabs button:focus-visible, .site-tabs a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Coral CTA button. Mirrors source .nav-cta exactly. */
.site-cta {
  background: var(--coral);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  text-decoration: none;
  margin-left: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
}
.site-cta:hover { opacity: 0.88; }
.site-cta[hidden] { display: none; }

.preview-page { display: none; }
.preview-page.is-active { display: block; }

@media (max-width: 720px) {
  .site-nav { padding: 0 16px; gap: 4px; }
  .site-logo svg { width: 92px; height: 33px; }
  .site-tabs button, .site-tabs a { font-size: 11px; padding: 14px 8px; }
  .site-cta { margin-left: 4px; padding: 6px 12px; font-size: 11px; }
}


/* ===== Home page styles ===== */

    /* Page-specific styles */

    /* Nav */
    .nav-cta {
      background: #ffffff;
      color: var(--coral) !important;
      padding: 8px 18px !important;
      border-radius: var(--radius-sm);
      border-bottom: none !important;
      font-weight: 500;
      margin-left: 8px;
      transition: opacity 0.2s !important;
    }
    .nav-cta:hover { opacity: 0.88; border-bottom-color: transparent !important; }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 18px 0 18px 13px;
      color: rgba(255,255,255,0.85);
      margin-left: auto;
    }
    .nav-links { display: flex; align-items: center; margin-left: auto; }
    .nav-logo { margin-right: auto; padding: 8px 0; }
    @media (max-width: 720px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--coral);
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 5% 20px;
        border-bottom: 1px solid rgba(255,255,255,0.25);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; width: 100%; }
      .nav-cta { margin-left: 0; margin-top: 8px; }
    }

    /* =========================================================
       Consumer hero. Scoped overrides for the global .hero base.
       Built per the prompt-2 hero spec. Single-page scope only.
    ========================================================= */
    .hero {
      min-height: 100vh;
      padding: 96px 0 80px;
      isolation: isolate;
    }
    /* Strip the global orb pseudo-elements. The canvas is the only ambient layer. */
    .hero::before,
    .hero::after { content: none; display: none; }

    .hero-grid {
      position: relative;
      z-index: 1;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      display: grid;
      grid-template-columns: 52% 48%;
      gap: 48px;
      align-items: center;
      min-height: calc(100vh - 176px);
    }

    /* Text column */
    .hero-text {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .hero-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.75);
      margin: 0 0 28px;
    }
    .hero-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 5.6vw, 72px);
      line-height: 1.05;
      letter-spacing: -1.5px;
      color: #191c36;
      margin: 0 0 22px;
      max-width: 560px;
    }
    .hero-headline em {
      font-style: italic;
      color: #5858a1;
    }
    .hero-subhead {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.4vw, 18px);
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.78);
      margin: 0 0 32px;
      max-width: 420px;
    }
    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin: 0 0 28px;
    }
    .hero-cta-primary,
    .hero-cta-secondary {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14px;
      line-height: 1;
      padding: 12px 22px;
      border-radius: 8px;
      text-decoration: none;
      cursor: pointer;
      transition: filter 250ms ease-out, border-color 250ms ease-out, background-color 250ms ease-out;
      display: inline-flex;
      align-items: center;
    }
    .hero-cta-primary {
      background: #f16b52;
      color: #ffffff;
      border: none;
    }
    .hero-cta-primary:hover { filter: brightness(0.95); }
    .hero-cta-secondary {
      background: transparent;
      color: #191c36;
      border: 0.5px solid rgba(25, 28, 54, 0.28);
    }
    .hero-cta-secondary:hover { border-color: rgba(25, 28, 54, 0.5); }
    .hero-cta-primary:focus-visible,
    .hero-cta-secondary:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
    }
    .hero-trust {
      font-family: var(--mono);
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.45);
      margin: 0;
    }
    .hero-trust .sep {
      color: rgba(25, 28, 54, 0.18);
      margin: 0 6px;
    }

    /* Panel column */
    .hero-panel-wrap {
      position: relative;
      max-width: 460px;
      width: 100%;
      margin: 0 auto;
    }
    .hero-panel {
      position: relative;
      background: var(--surface);
      border: 0.5px solid rgba(25, 28, 54, 0.12);
      border-radius: 10px;
      padding: 18px;
      box-shadow: 0 24px 48px rgba(25, 28, 54, 0.08);
      transform: perspective(1100px) rotateY(-4deg) rotateX(1.5deg);
      transform-origin: center center;
    }

    /* Floating milestone badge */
    .hero-panel-milestone {
      position: absolute;
      top: -14px;
      right: -4px;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.35);
      border-radius: 6px;
      padding: 8px 11px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: #5858a1;
      box-shadow: 0 6px 16px rgba(25, 28, 54, 0.06);
      white-space: nowrap;
      z-index: 2;
    }

    /* Disclaimer */
    .hero-panel-disclaimer {
      position: absolute;
      bottom: -16px;
      left: 0;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.35);
      white-space: nowrap;
    }

    /* Header row */
    .hero-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }
    .hero-panel-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.5);
    }
    .hero-panel-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.4);
    }
    .hero-panel-live::before {
      content: "";
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #2f9d6f;
    }
    .hero-panel-divider {
      border: none;
      border-top: 0.5px solid rgba(25, 28, 54, 0.08);
      margin: 10px 0;
    }

    /* Cycling region. Grid-stack so all three states share the same cell. */
    .hero-panel-cycle {
      display: grid;
      grid-template-areas: "stack";
    }
    .hero-panel-state {
      grid-area: stack;
      opacity: 0;
      transition: opacity 250ms ease-out;
      pointer-events: none;
    }
    .hero-panel-state.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Alert card */
    .hero-alert {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      background: rgba(241, 107, 82, 0.07);
      border: 0.5px solid rgba(241, 107, 82, 0.22);
      border-radius: 6px;
      padding: 11px 12px;
      margin-bottom: 10px;
    }
    .hero-alert-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #f16b52;
      margin-top: 6px;
      flex-shrink: 0;
    }
    .hero-alert-title {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 12px;
      color: #191c36;
      margin: 0 0 3px;
      line-height: 1.35;
    }
    .hero-alert-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 11px;
      color: rgba(25, 28, 54, 0.62);
      margin: 0;
      line-height: 1.45;
    }

    /* Two-tile grid */
    .hero-tiles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .hero-tile {
      background: rgba(25, 28, 54, 0.03);
      border-radius: 6px;
      padding: 11px;
    }
    .hero-tile-label {
      display: block;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.45);
      margin-bottom: 6px;
    }
    .hero-tile-value {
      font-family: var(--serif);
      font-size: 20px;
      line-height: 1;
      color: #191c36;
      margin-bottom: 6px;
      letter-spacing: -0.3px;
    }
    .hero-tile-caption {
      display: block;
      font-family: var(--sans);
      font-weight: 400;
      font-size: 10px;
      line-height: 1.3;
      color: rgba(25, 28, 54, 0.5);
    }
    .hero-tile-caption.green { color: #2f9d6f; }
    .hero-tile-caption.coral { color: #f16b52; }

    /* Peer benchmark tile */
    .hero-bench {
      background: rgba(25, 28, 54, 0.03);
      border-radius: 6px;
      padding: 11px;
      margin-top: 8px;
    }
    .hero-bench-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .hero-bench-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.45);
    }
    .hero-bench-rank {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: #5858a1;
    }
    .hero-bench-bars {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 32px;
    }
    .hero-bench-bar {
      flex: 1;
      border-radius: 1px;
      min-height: 2px;
    }

    /* Planning circle pill */
    .hero-pill {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 2px;
      margin-top: 10px;
    }
    .hero-pill::before {
      content: "";
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(25, 28, 54, 0.35);
    }
    .hero-pill-text {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.45);
    }

    /* Visually-hidden helper for the panel summary text */
    .sr-only {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Tablet */
    @media (max-width: 1023px) {
      .hero-grid { grid-template-columns: 56% 44%; gap: 32px; padding: 0 32px; }
      .hero-panel { transform: perspective(1100px) rotateY(-2deg) rotateX(1deg); }
    }

    /* Mobile */
    @media (max-width: 767px) {
      .hero { padding: 64px 0 56px; }
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
        min-height: 0;
      }
      .hero-panel {
        transform: none;
      }
      .hero-panel-wrap { max-width: 420px; }
      .hero-headline { letter-spacing: -1px; }
    }

    /* Reduced motion: lock to state 1 (no cycling JS will run anyway) */
    @media (prefers-reduced-motion: reduce) {
      .hero-cta-primary,
      .hero-cta-secondary,
      .hero-panel-state { transition: none; }
    }

    /* =========================================================
       CONSUMER-CATEGORY section. Scoped to this section only.
    ========================================================= */
    .category {
      background: var(--bg);
      padding: 96px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .category-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    /* Left column */
    .category-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .category-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 24px;
    }
    .category-heading em {
      font-style: italic;
      color: #f16b52;
    }
    .category-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 16px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.72);
      max-width: 440px;
      margin: 0 0 32px;
    }
    .category-transition {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(18px, 1.6vw, 20px);
      line-height: 1.3;
      color: #191c36;
      margin: 0 0 28px;
    }

    /* Pillars stack */
    .category-pillars {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .category-pillar {
      border-left: 2px solid #5858a1;
      padding-left: 16px;
    }
    .category-pillar-num {
      display: block;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.12em;
      color: #5858a1;
      margin-bottom: 4px;
    }
    .category-pillar-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(17px, 1.4vw, 18px);
      color: #191c36;
      margin: 0 0 5px;
      line-height: 1.2;
    }
    .category-pillar-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(13px, 1.05vw, 14px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.6);
      margin: 0;
    }

    /* Right column. Product visual placeholder.
       SWAP TARGET: when the live product asset arrives, replace the
       internals of .category-frame only. The frame is sized at 4:5 desktop /
       tablet and 16:9 mobile to accommodate either a still screenshot or
       an MP4 loop. The outer shell, shadow, and border stay. */
    .category-frame {
      position: relative;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 10px;
      aspect-ratio: 4 / 5;
      width: 100%;
      overflow: hidden;
      box-shadow: 0 24px 48px rgba(25, 28, 54, 0.08);
    }
    .category-frame::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(circle at 50% 40%, rgba(88, 88, 161, 0.22) 0%, transparent 60%);
      pointer-events: none;
    }
    .category-frame-dots {
      position: absolute;
      top: 14px;
      left: 14px;
      display: flex;
      gap: 4px;
    }
    .category-frame-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(25, 28, 54, 0.15);
    }
    .category-frame-corner {
      position: absolute;
      bottom: 14px;
      left: 14px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.25);
    }
    .category-frame-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .category-frame-ring {
      width: 44px;
      height: 44px;
      border: 1px solid rgba(88, 88, 161, 0.5);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .category-frame-pulse {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #5858a1;
      animation: categoryFramePulse 3s ease-in-out infinite;
    }
    @keyframes categoryFramePulse {
      0%   { transform: scale(1); }
      25%  { transform: scale(1.3); }
      50%  { transform: scale(1); }
      100% { transform: scale(1); }
    }
    .category-frame-label {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      color: rgba(25, 28, 54, 0.45);
    }
    .category-frame-sub {
      font-family: var(--sans);
      font-style: italic;
      font-size: 12px;
      color: rgba(25, 28, 54, 0.3);
    }

    /* Entrance animation. Triggered by .is-in-view via IntersectionObserver. */
    .category .category-eyebrow,
    .category .category-heading,
    .category .category-body,
    .category .category-transition,
    .category .category-frame {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .category .category-pillar {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 250ms ease-out, transform 250ms ease-out;
    }
    .category.is-in-view .category-eyebrow    { opacity: 1; }
    .category.is-in-view .category-heading    { opacity: 1; transition-delay: 50ms; }
    .category.is-in-view .category-body       { opacity: 1; transition-delay: 100ms; }
    .category.is-in-view .category-transition { opacity: 1; transition-delay: 150ms; }
    .category.is-in-view .category-frame {
      opacity: 1;
      transition: opacity 300ms ease-out;
      transition-delay: 350ms;
    }
    .category.is-in-view .category-pillar:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 350ms; }
    .category.is-in-view .category-pillar:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 470ms; }
    .category.is-in-view .category-pillar:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 590ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .category-container { padding: 0 32px; gap: 32px; }
    }

    /* Mobile. Stack columns, frame switches to 16:9. */
    @media (max-width: 767px) {
      .category { padding: 64px 0; }
      .category-container {
        padding: 0 24px;
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .category-frame { aspect-ratio: 16 / 9; }
    }

    /* Reduced motion. Render everything immediately. Disable the dot pulse. */
    @media (prefers-reduced-motion: reduce) {
      .category .category-eyebrow,
      .category .category-heading,
      .category .category-body,
      .category .category-transition,
      .category .category-frame,
      .category .category-pillar {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .category-frame-pulse { animation: none !important; }
    }

    /* Benchmark chart placeholder */
    .bench-frame {
      position: relative;
      aspect-ratio: 16 / 9;
      width: 100%;
      background: var(--navy);
      border: 1px solid var(--border-2);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .bench-frame svg { display: block; width: 100%; height: 100%; }

    /* =========================================================
       CONSUMER-PROBLEM section. Scoped to this section only.
    ========================================================= */
    .problem {
      background: var(--bg);
      padding: 96px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .problem-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* Beat 1. Eyebrow + heading */
    .problem-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .problem-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #191c36;
      max-width: 720px;
      margin: 0 0 56px;
    }
    .problem-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Beat 2. Fragment cards. Absolutely positioned scatter. */
    .problem-fragments {
      position: relative;
      width: 100%;
      height: 150px;
      margin: 0 0 48px;
    }
    .frag {
      position: absolute;
      background: var(--surface);
      border: 0.5px solid rgba(25, 28, 54, 0.1);
      border-radius: 6px;
      padding: 11px 14px;
      box-shadow: 0 8px 16px rgba(25, 28, 54, 0.06);
      display: flex;
      flex-direction: column;
    }
    .frag-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.4);
      margin-bottom: 4px;
    }
    .frag-value {
      font-family: var(--serif);
      font-size: 16px;
      color: #191c36;
      line-height: 1.1;
    }
    .frag-value--abandoned {
      font-style: italic;
      font-size: 11px;
      color: rgba(25, 28, 54, 0.5);
    }
    .frag-1 { top: 0;    left: 2%;  width: 170px; transform: rotate(-3deg); }
    .frag-2 { top: 40px; left: 24%; width: 170px; transform: rotate(2deg); }
    .frag-3 { top: 15px; left: 48%; width: 170px; transform: rotate(-2deg); }
    .frag-4 { top: 55px; left: 72%; width: 190px; transform: rotate(4deg); }

    /* Beat 2.5. Lead-in */
    .problem-leadin {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.4vw, 18px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      max-width: 680px;
      margin: 0 0 28px;
    }

    /* Beat 3. Cause chain. Ordered list with bullets suppressed. */
    .problem-chain {
      list-style: none;
      padding: 0 0 0 20px;
      margin: 0 0 40px;
      border-left: 2px solid rgba(88, 88, 161, 0.4);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .problem-chain li {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 16px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.85);
    }
    .problem-chain .gold { color: #5858a1; }

    /* Beat 4. Pivot + resolution */
    .problem-pivot-wrap {
      border-top: 0.5px solid rgba(25, 28, 54, 0.08);
      padding-top: 32px;
    }
    .problem-pivot {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(24px, 2.4vw, 32px);
      line-height: 1.2;
      color: #191c36;
      margin: 0 0 16px;
    }
    .problem-pivot em {
      font-style: italic;
      color: #f16b52;
    }
    .problem-resolution {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 16px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.75);
      max-width: 560px;
      margin: 0;
    }

    /* Entrance animation. Triggered by .is-in-view (added by IntersectionObserver). */
    .problem .problem-eyebrow,
    .problem .problem-heading {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .problem .frag {
      opacity: 0;
      /* Translate alongside the per-card rotation */
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .frag-1 { transform: rotate(-3deg) translateY(8px); }
    .frag-2 { transform: rotate(2deg)  translateY(8px); }
    .frag-3 { transform: rotate(-2deg) translateY(8px); }
    .frag-4 { transform: rotate(4deg)  translateY(8px); }

    .problem .problem-leadin,
    .problem .problem-chain li,
    .problem .problem-pivot-wrap {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }

    .problem.is-in-view .problem-eyebrow { opacity: 1; }
    .problem.is-in-view .problem-heading { opacity: 1; transition-delay: 60ms; }

    .problem.is-in-view .frag-1 { opacity: 1; transform: rotate(-3deg) translateY(0); transition-delay: 0ms; }
    .problem.is-in-view .frag-2 { opacity: 1; transform: rotate(2deg)  translateY(0); transition-delay: 80ms; }
    .problem.is-in-view .frag-3 { opacity: 1; transform: rotate(-2deg) translateY(0); transition-delay: 160ms; }
    .problem.is-in-view .frag-4 { opacity: 1; transform: rotate(4deg)  translateY(0); transition-delay: 240ms; }

    .problem.is-in-view .problem-leadin { opacity: 1; transition-delay: 800ms; }
    .problem.is-in-view .problem-chain li:nth-child(1) { opacity: 1; transition-delay: 940ms; }
    .problem.is-in-view .problem-chain li:nth-child(2) { opacity: 1; transition-delay: 1090ms; }
    .problem.is-in-view .problem-chain li:nth-child(3) { opacity: 1; transition-delay: 1240ms; }
    .problem.is-in-view .problem-pivot-wrap { opacity: 1; transition-delay: 1790ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .problem-container { padding: 0 32px; }
      .problem-fragments { height: 150px; }
      .frag-1 { left: 0%;  width: 140px; }
      .frag-2 { left: 24%; width: 140px; }
      .frag-3 { left: 48%; width: 140px; }
      .frag-4 { left: 72%; width: 160px; }
    }

    /* Mobile. Cards collapse to a 2x2 grid. Vertical stacking would be ugly. */
    @media (max-width: 767px) {
      .problem { padding: 64px 0; }
      .problem-container { padding: 0 24px; }
      .problem-heading { margin-bottom: 36px; }
      .problem-fragments {
        position: static;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .frag { position: static; width: auto; }
      .frag-1 { transform: rotate(-1deg); }
      .frag-2 { transform: rotate(1deg); }
      .frag-3 { transform: rotate(-2deg); }
      .frag-4 { transform: rotate(2deg); }
      .problem.is-in-view .frag-1 { transform: rotate(-1deg) translateY(0); }
      .problem.is-in-view .frag-2 { transform: rotate(1deg)  translateY(0); }
      .problem.is-in-view .frag-3 { transform: rotate(-2deg) translateY(0); }
      .problem.is-in-view .frag-4 { transform: rotate(2deg)  translateY(0); }
      /* Re-apply translateY for mobile initial state */
      .frag-1 { transform: rotate(-1deg) translateY(8px); }
      .frag-2 { transform: rotate(1deg)  translateY(8px); }
      .frag-3 { transform: rotate(-2deg) translateY(8px); }
      .frag-4 { transform: rotate(2deg)  translateY(8px); }
    }

    /* Reduced motion. Render everything immediately, no transitions. */
    @media (prefers-reduced-motion: reduce) {
      .problem .problem-eyebrow,
      .problem .problem-heading,
      .problem .frag,
      .problem .problem-leadin,
      .problem .problem-chain li,
      .problem .problem-pivot-wrap {
        opacity: 1 !important;
        transition: none !important;
      }
      .frag-1 { transform: rotate(-3deg); }
      .frag-2 { transform: rotate(2deg); }
      .frag-3 { transform: rotate(-2deg); }
      .frag-4 { transform: rotate(4deg); }
    }

    /* =========================================================
       CONSUMER-PILLARS section. Scoped to this section only.
    ========================================================= */
    .pillars {
      background: var(--bg);
      padding: 96px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .pillars-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* Centered heading block */
    .pillars-head {
      max-width: 720px;
      margin: 0 auto 64px;
      text-align: center;
    }
    .pillars-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .pillars-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0;
    }
    .pillars-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Card grid */
    .pillars-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: stretch;
    }
    .pillars-card {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 10px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 16px 32px rgba(25, 28, 54, 0.06);
    }
    .pillars-vignette {
      aspect-ratio: 16 / 10;
      width: 100%;
      margin: 0 0 20px;
      display: block;
    }
    .pillars-vignette svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    .pillars-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 22px;
      line-height: 1.2;
      color: #191c36;
      margin: 0 0 10px;
    }
    .pillars-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.66);
      margin: 0;
    }

    /* Pulse on pillar 2 milestone dot. Scale 1.0 to 1.15 over 2s. */
    .pillars-pulse-gold {
      transform-box: fill-box;
      transform-origin: center;
      animation: pillarsPulseGold 2s ease-in-out infinite;
    }
    @keyframes pillarsPulseGold {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.15); }
    }

    /* Entrance animation. Triggered by .is-in-view via IntersectionObserver. */
    .pillars .pillars-eyebrow,
    .pillars .pillars-heading {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .pillars .pillars-card {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 250ms ease-out, transform 250ms ease-out;
    }
    .pillars.is-in-view .pillars-eyebrow { opacity: 1; }
    .pillars.is-in-view .pillars-heading { opacity: 1; transition-delay: 60ms; }
    .pillars.is-in-view .pillars-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
    .pillars.is-in-view .pillars-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
    .pillars.is-in-view .pillars-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 440ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .pillars-container { padding: 0 32px; }
      .pillars-list { gap: 16px; }
    }

    /* Mobile. Cards stack. Vignettes switch to 16:9. */
    @media (max-width: 767px) {
      .pillars { padding: 64px 0; }
      .pillars-container { padding: 0 24px; }
      .pillars-head { margin-bottom: 40px; }
      .pillars-list {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .pillars-vignette { aspect-ratio: 16 / 9; }
    }

    /* Reduced motion. Render everything immediately. Disable the pulse. */
    @media (prefers-reduced-motion: reduce) {
      .pillars .pillars-eyebrow,
      .pillars .pillars-heading,
      .pillars .pillars-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .pillars-pulse-gold { animation: none !important; }
    }

    /* =========================================================
       CONSUMER-PLANNING-CIRCLE section. Scoped to this section only.
    ========================================================= */
    .pc {
      background: var(--bg);
      padding: 96px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .pc-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .pc-inner {
      max-width: 880px;
      margin: 0 auto;
    }

    /* Heading block */
    .pc-head {
      text-align: center;
      margin-bottom: 64px;
    }
    .pc-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .pc-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0;
    }
    .pc-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Diagram block */
    .pc-stage-wrap {
      max-width: 480px;
      margin: 0 auto;
    }
    .pc-stage {
      width: 100%;
      aspect-ratio: 1 / 1;
      position: relative;
    }
    .pc-stage svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Caption + toggle below diagram */
    .pc-caption {
      margin: 18px 0 14px;
      text-align: center;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.85);
      min-height: 1.2em; /* prevent collapse during state swaps */
    }
    .pc-toggle {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .pc-pill {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.6);
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(88, 88, 161, 0.4);
      background: transparent;
      cursor: pointer;
      transition: border-color 200ms ease-out, color 200ms ease-out;
      position: relative;
    }
    .pc-pill[aria-pressed="true"] {
      border-color: #f16b52;
      color: #191c36;
    }
    .pc-pill[aria-pressed="true"]::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      transform: translateX(-50%);
      width: 12px;
      height: 2px;
      background: #f16b52;
      border-radius: 1px;
    }
    .pc-pill:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
    }

    /* ---- Diagram state machine (CSS only) ---- */

    /* SOLO defaults */
    .pc-aura {
      fill: none;
      stroke: rgba(88, 88, 161, 0.28);
      stroke-width: 1;
      stroke-dasharray: 3 4;
      r: 72;
      transition: r 400ms ease-out, stroke 400ms ease-out, stroke-dasharray 400ms ease-out;
    }
    .pc-stage.is-advisor .pc-aura {
      stroke: rgba(88, 88, 161, 0.55);
      stroke-dasharray: 0;
      r: 108;
    }

    /* All six ring nodes share a base style */
    .pc-node {
      fill: none;
      stroke: rgba(88, 88, 161, 0.3);
      stroke-width: 1;
      transition:
        stroke 250ms ease-out,
        stroke-width 250ms ease-out,
        opacity 400ms ease-out,
        r 400ms ease-out;
      transform-box: fill-box;
      transform-origin: center;
    }
    /* In +ADVISOR state, the five non-advisor nodes recede */
    .pc-stage.is-advisor .pc-node:not(.pc-advisor-ring) {
      stroke: rgba(88, 88, 161, 0.5);
      opacity: 0.22;
    }

    /* The advisor "ring" is the stroke-only outline visible in SOLO. */
    .pc-advisor-ring {
      opacity: 1;
    }
    .pc-stage.is-advisor .pc-advisor-ring {
      opacity: 0;
    }

    /* The advisor "disc" is the solid filled node, visible in +ADVISOR only. */
    .pc-advisor-disc {
      fill: #5858a1;
      stroke: none;
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      transform: scale(0.8);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }
    .pc-stage.is-advisor .pc-advisor-disc {
      opacity: 1;
      transform: scale(1);
    }

    /* Advisor connection line draws in after the disc lands. */
    .pc-connect-advisor {
      fill: none;
      stroke: rgba(88, 88, 161, 0.85);
      stroke-width: 1.5;
      stroke-dasharray: 110;
      stroke-dashoffset: 110;
      transition: stroke-dashoffset 300ms ease-out;
      transition-delay: 0ms;
    }
    .pc-stage.is-advisor .pc-connect-advisor {
      stroke-dashoffset: 0;
      transition-delay: 300ms;
    }

    /* Advisor label visible in +ADVISOR */
    .pc-label-advisor-perm {
      fill: rgba(25, 28, 54, 0.85);
      opacity: 0;
      transition: opacity 250ms ease-out;
      transition-delay: 0ms;
    }
    .pc-stage.is-advisor .pc-label-advisor-perm {
      opacity: 1;
      transition-delay: 350ms;
    }

    /* YOU label is always visible */
    .pc-label-you {
      fill: rgba(25, 28, 54, 0.7);
    }

    /* Foreshadow elements: lines + labels + halos for the rotating role highlight.
       Each tagged with .is-on by JS when its role is the active highlight.
       Visual properties (stroke, fill) are set inline as fallback; CSS only
       toggles opacity for fade-in / fade-out. */
    .pc-foreshadow {
      opacity: 0;
      transition: opacity 220ms ease-out;
    }
    .pc-foreshadow.is-on { opacity: 1; }

    .pc-halo {
      opacity: 0;
      transition: opacity 220ms ease-out;
    }
    .pc-halo.is-on { opacity: 1; }

    .pc-label-foreshadow {
      opacity: 0;
      transition: opacity 220ms ease-out;
    }
    .pc-label-foreshadow.is-on { opacity: 1; }

    /* When a node is being foreshadowed, its stroke brightens. */
    .pc-stage.is-advisor .pc-node.is-foreshadowed {
      stroke: #a5a5e0;
      stroke-width: 1.75;
      opacity: 1;
    }

    /* Caption "COMING:" prefix gets coral colour so the swap pops. */
    .pc-caption-coming {
      color: #f16b52;
      margin-right: 6px;
    }

    /* Context paragraph */
    .pc-context {
      max-width: 560px;
      margin: 64px auto 48px;
      text-align: center;
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
    }

    /* Comparison cards */
    .pc-cards {
      max-width: 760px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 20px;
      align-items: stretch;
    }
    .pc-card {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 10px;
      padding: 24px;
      display: flex;
      flex-direction: column;
    }
    .pc-card-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      margin: 0 0 12px;
    }
    .pc-card-solo .pc-card-label    { color: rgba(88, 88, 161, 0.8); }
    .pc-card-advisor .pc-card-label { color: rgba(88, 88, 161, 0.8); }
    .pc-card-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 19px;
      line-height: 1.25;
      color: #191c36;
      margin: 0 0 16px;
    }
    .pc-card-list {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .pc-card-list li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 4px 0;
      font-family: var(--sans);
      font-size: 13.5px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.66);
    }
    .pc-card-list li::before {
      content: "";
      flex-shrink: 0;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      display: block;
    }
    .pc-card-solo .pc-card-list li::before    { background: rgba(88, 88, 161, 0.6); }
    .pc-card-advisor .pc-card-list li::before { background: rgba(88, 88, 161, 0.6); }

    .pc-connector {
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-connector svg { display: block; }

    /* "Why we built it this way" block */
    .pc-aside {
      max-width: 640px;
      margin: 56px auto 0;
      background: var(--surface);
      border-left: 2px solid #5858a1;
      border-radius: 0 6px 6px 0;
      padding: 20px 24px;
    }
    .pc-aside-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 17px;
      line-height: 1.3;
      color: #191c36;
      margin: 0 0 10px;
    }
    .pc-aside-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 14px;
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.68);
      margin: 0;
    }

    /* Entrance animation. Triggered by .is-in-view via IntersectionObserver. */
    .pc .pc-eyebrow,
    .pc .pc-heading,
    .pc .pc-stage-wrap,
    .pc .pc-context,
    .pc .pc-card,
    .pc .pc-aside {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .pc .pc-stage-wrap { transform: translateY(8px); }
    .pc .pc-card       { transform: translateY(6px); }

    .pc.is-in-view .pc-eyebrow      { opacity: 1; transition-duration: 250ms; }
    .pc.is-in-view .pc-heading      { opacity: 1; transition-duration: 250ms; transition-delay: 60ms; }
    .pc.is-in-view .pc-stage-wrap   { opacity: 1; transform: translateY(0); transition-duration: 400ms; transition-delay: 200ms; }
    .pc.is-in-view .pc-context      { opacity: 1; transition-duration: 250ms; transition-delay: 400ms; }
    .pc.is-in-view .pc-card:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-duration: 250ms; transition-delay: 600ms; }
    .pc.is-in-view .pc-card:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-duration: 250ms; transition-delay: 720ms; }
    .pc.is-in-view .pc-aside        { opacity: 1; transition-duration: 300ms; transition-delay: 1000ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .pc-container { padding: 0 32px; }
      .pc-cards { grid-template-columns: 1fr auto 1fr; }
    }

    /* Mobile. Stack comparison cards, drop the connector. */
    @media (max-width: 767px) {
      .pc { padding: 64px 0; }
      .pc-container { padding: 0 24px; }
      .pc-head { margin-bottom: 40px; }
      .pc-stage-wrap { max-width: 360px; }
      .pc-context { margin: 48px auto 32px; }
      .pc-cards {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .pc-connector { display: none; }
    }

    /* Reduced motion. Render everything immediately. Force +ADVISOR snapshot.
       Cycle / foreshadow / pulse animations are gated in JS too. */
    @media (prefers-reduced-motion: reduce) {
      .pc .pc-eyebrow,
      .pc .pc-heading,
      .pc .pc-stage-wrap,
      .pc .pc-context,
      .pc .pc-card,
      .pc .pc-aside {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .pc-aura,
      .pc-node,
      .pc-advisor-ring,
      .pc-advisor-disc,
      .pc-connect-advisor,
      .pc-label-advisor-perm,
      .pc-foreshadow,
      .pc-label-foreshadow {
        transition: none !important;
      }
    }

    /* =========================================================
       CONSUMER-TRUST section. Scoped to this section only.
       Deliberately still: entrance animation only, no kinetic motion after.
    ========================================================= */
    .trust {
      background: var(--bg);
      padding: 104px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .trust-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .trust-inner {
      max-width: 720px;
      margin: 0 auto;
    }

    /* Heading block */
    .trust-head {
      text-align: center;
      margin-bottom: 48px;
    }
    .trust-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .trust-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.6vw, 42px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0;
    }
    .trust-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Opening body. Two paragraphs with deliberate register shift. */
    .trust-intro-quiet {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.65);
      margin: 0 0 20px;
    }
    .trust-intro-positive {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      margin: 0 0 56px;
    }

    /* Promises sub-label */
    .trust-promises-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.85);
      margin: 0 0 14px;
      text-align: left;
    }

    /* Topographic contour divider. Two identical wave segments back-to-back
       inside .trust-contour-flow, which translates -100% (one viewBox-width)
       over 90s for a continuous drift that loops invisibly. Echoes the hero's topographic
       canvas at a quieter scale. */
    .trust-contour {
      display: block;
      width: 100%;
      height: 14px;
      margin: 0 0 36px;
      overflow: hidden;
    }
    .trust-contour-flow {
      /* No drift before the section enters view. */
      transform: translateX(0);
    }
    .trust.is-in-view .trust-contour-flow {
      animation: trustContourDrift 90s linear infinite;
      animation-delay: 1000ms; /* let the entrance fades complete first */
    }
    @keyframes trustContourDrift {
      from { transform: translateX(0); }
      to   { transform: translateX(-100%); } /* -100% of viewBox = -720 user units */
    }

    /* Promises list */
    .trust-promises {
      margin: 0 0 64px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }
    .trust-promise {
      border-left: 2px solid #5858a1;
      padding-left: 20px;
    }
    .trust-promise dt {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(20px, 1.8vw, 22px);
      color: #191c36;
      line-height: 1.25;
      margin: 0 0 8px;
    }
    .trust-promise dd {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(14.5px, 1.2vw, 15px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.72);
      margin: 0;
      max-width: 560px;
    }

    /* CTA */
    .trust-cta-wrap {
      text-align: center;
    }
    .trust-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 999px;
      background: transparent;
      border: 1.5px solid #5858a1;
      color: #191c36;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14.5px;
      letter-spacing: 0.02em;
      text-decoration: none;
      cursor: pointer;
      transition: background-color 200ms ease-out, border-color 200ms ease-out;
    }
    .trust-cta:hover {
      background-color: rgba(88, 88, 161, 0.12);
      border-color: #f16b52;
    }
    .trust-cta:active {
      background-color: rgba(88, 88, 161, 0.2);
      border-color: #f16b52;
    }
    .trust-cta:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
    }
    .trust-cta-arrow {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
      transition: transform 200ms ease-out;
    }
    .trust-cta:hover .trust-cta-arrow,
    .trust-cta:active .trust-cta-arrow {
      transform: translateX(2px);
    }

    /* Entrance animation. Triggered by .is-in-view via IntersectionObserver. */
    .trust .trust-eyebrow,
    .trust .trust-heading,
    .trust .trust-intro-quiet,
    .trust .trust-intro-positive,
    .trust .trust-promises-label,
    .trust .trust-promise,
    .trust .trust-cta-wrap {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .trust .trust-promise { transform: translateY(6px); }

    /* Contour draws in left to right via stroke-dashoffset.
       pathLength="100" lets us treat the dashoffset as percent. */
    .trust .trust-contour-path {
      stroke-dasharray: 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset 400ms ease-out;
    }
    .trust .trust-contour-tick {
      opacity: 0;
      transition: opacity 400ms ease-out;
    }

    .trust.is-in-view .trust-eyebrow         { opacity: 1; }
    .trust.is-in-view .trust-heading         { opacity: 1; transition-delay: 60ms; }
    .trust.is-in-view .trust-intro-quiet     { opacity: 1; transition-delay: 200ms; }
    .trust.is-in-view .trust-intro-positive  { opacity: 1; transition-delay: 280ms; }
    .trust.is-in-view .trust-promises-label  { opacity: 1; transition-delay: 400ms; }
    .trust.is-in-view .trust-contour-path    { stroke-dashoffset: 0; transition-delay: 400ms; }
    .trust.is-in-view .trust-contour-tick    { opacity: 1; transition-delay: 700ms; }
    .trust.is-in-view .trust-promise:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
    .trust.is-in-view .trust-promise:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 720ms; }
    .trust.is-in-view .trust-promise:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 840ms; }
    .trust.is-in-view .trust-promise:nth-of-type(4) { opacity: 1; transform: translateY(0); transition-delay: 960ms; }
    .trust.is-in-view .trust-cta-wrap        { opacity: 1; transition-delay: 1260ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .trust-container { padding: 0 32px; }
    }

    /* Mobile */
    @media (max-width: 767px) {
      .trust { padding: 72px 0; }
      .trust-container { padding: 0 24px; }
      .trust-intro-positive { margin-bottom: 44px; }
      .trust-promises { margin-bottom: 48px; }
    }

    /* Reduced motion. Render everything immediately, contour fully drawn,
       drift disabled. */
    @media (prefers-reduced-motion: reduce) {
      .trust .trust-eyebrow,
      .trust .trust-heading,
      .trust .trust-intro-quiet,
      .trust .trust-intro-positive,
      .trust .trust-promises-label,
      .trust .trust-promise,
      .trust .trust-cta-wrap,
      .trust .trust-contour-tick {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .trust .trust-contour-path {
        stroke-dashoffset: 0 !important;
        transition: none !important;
      }
      .trust.is-in-view .trust-contour-flow {
        animation: none !important;
        transform: translateX(0) !important;
      }
    }

    /* =========================================================
       CONSUMER-BENCHMARKING section. Scoped to this section only.
    ========================================================= */
    .bench {
      background: var(--bg);
      padding: 96px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .bench-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .bench-inner {
      max-width: 960px;
      margin: 0 auto;
    }

    /* Heading */
    .bench-head {
      text-align: center;
      margin-bottom: 40px;
    }
    .bench-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .bench-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0;
    }
    .bench-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Opening body */
    .bench-intro {
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
    }
    .bench-intro p {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      margin: 0;
    }
    .bench-intro p:first-child { margin-bottom: 16px; }
    .bench-intro p:last-child  { margin-bottom: 56px; }

    /* Tile grid */
    .bench-tiles {
      list-style: none;
      margin: 0 auto;
      padding: 0;
      max-width: 760px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      align-items: stretch;
    }
    .bench-tile {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 10px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      min-height: 280px;
    }
    .bench-tile-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
      margin: 0 0 16px;
    }
    .bench-tile-chart {
      aspect-ratio: 16 / 9;
      width: 100%;
      margin: 0 0 18px;
    }
    .bench-tile-chart svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .bench-tile-value {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 22px;
      line-height: 1.2;
      margin: 0 0 6px;
    }
    .bench-value-gold    { color: #5858a1; }
    .bench-value-neutral { color: rgba(25, 28, 54, 0.85); }
    .bench-value-warn    { color: rgba(241, 107, 82, 0.8); }
    .bench-tile-cohort {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.45);
      margin: 0;
    }

    /* Closing paragraph */
    .bench-outro {
      max-width: 640px;
      margin: 56px auto 0;
      text-align: center;
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
    }

    /* Tile 1 (savings rate) marker slide.
       In SVG CSS transforms, 1px equals 1 user unit (CSS Transforms Level 2),
       so translateX(-240px) shifts by 240 SVG units regardless of rendered size. */
    .bench-m1-slide {
      transform: translateX(-240px);
      transition: transform 1200ms ease-out 1100ms;
    }
    .bench.is-in-view .bench-m1-slide {
      transform: translateX(0);
    }
    .bench-m1-label {
      opacity: 0;
      transition: opacity 200ms ease-out 2500ms;
    }
    .bench.is-in-view .bench-m1-label {
      opacity: 1;
    }

    /* Entrance fades */
    .bench .bench-eyebrow,
    .bench .bench-heading,
    .bench .bench-intro p,
    .bench .bench-tile,
    .bench .bench-outro {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .bench .bench-tile { transform: translateY(8px); }

    .bench.is-in-view .bench-eyebrow        { opacity: 1; transition-duration: 250ms; }
    .bench.is-in-view .bench-heading        { opacity: 1; transition-duration: 250ms; transition-delay: 60ms; }
    .bench.is-in-view .bench-intro p:first-child { opacity: 1; transition-duration: 250ms; transition-delay: 200ms; }
    .bench.is-in-view .bench-intro p:last-child  { opacity: 1; transition-duration: 250ms; transition-delay: 280ms; }
    .bench.is-in-view .bench-tile:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
    .bench.is-in-view .bench-tile:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
    .bench.is-in-view .bench-tile:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
    .bench.is-in-view .bench-tile:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
    .bench.is-in-view .bench-outro { opacity: 1; transition-delay: 1100ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .bench-container { padding: 0 32px; }
      .bench-tiles { gap: 16px; }
    }

    /* Mobile. Tiles stack 1-up. */
    @media (max-width: 767px) {
      .bench { padding: 72px 0; }
      .bench-container { padding: 0 24px; }
      .bench-tiles {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .bench-tile { min-height: 0; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .bench .bench-eyebrow,
      .bench .bench-heading,
      .bench .bench-intro p,
      .bench .bench-tile,
      .bench .bench-outro {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .bench .bench-m1-slide {
        transform: translateX(0) !important;
        transition: none !important;
      }
      .bench .bench-m1-label {
        opacity: 1 !important;
        transition: none !important;
      }
    }

    /* =========================================================
       CONSUMER-PARTNERS section. Scoped to this section only.
    ========================================================= */
    .partners {
      background: var(--bg);
      padding: 96px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .partners-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }
    .partners-inner {
      max-width: 960px;
      margin: 0 auto;
    }

    /* Heading */
    .partners-head {
      text-align: center;
      margin-bottom: 32px;
    }
    .partners-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .partners-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      max-width: 780px;
      margin: 0 auto;
    }
    .partners-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Opening body */
    .partners-intro {
      max-width: 640px;
      margin: 0 auto 56px;
      text-align: center;
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
    }

    /* Tile list: hero on top, three smaller below. */
    .partners-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .partners-trio {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    /* Common tile chassis */
    .partners-tile {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 10px;
    }

    /* Hero tile */
    .partners-hero {
      padding: 28px;
      min-height: 140px;
      display: flex;
      align-items: center;
      gap: 28px;
    }
    .partners-hero-body {
      flex: 1;
      min-width: 0;
    }
    .partners-hero-topline {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
    }
    .partners-hero-label {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(22px, 2.2vw, 24px);
      line-height: 1.2;
      color: #191c36;
      margin: 0;
      flex: 1;
      min-width: 0;
    }
    .partners-hero-desc {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(14.5px, 1.15vw, 15px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.68);
      margin: 10px 0 0;
    }

    /* Three smaller tiles */
    .partners-small {
      padding: 20px;
      min-height: 180px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .partners-small-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }
    .partners-small-glyph {
      width: 32px;
      height: 32px;
      flex-shrink: 0;
    }
    .partners-small-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
    .partners-small-label {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(18px, 1.5vw, 19px);
      line-height: 1.25;
      color: #191c36;
      margin: 4px 0 0;
    }
    .partners-small-desc {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(13.5px, 1.1vw, 14px);
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.66);
      margin: 0;
    }

    /* Status pills */
    .partners-pill {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .partners-pill-live {
      background: rgba(88, 88, 161, 0.12);
      border: 0.75px solid rgba(88, 88, 161, 0.45);
      color: #5858a1;
    }
    .partners-pill-live::before {
      content: "";
      width: 4px; height: 4px;
      border-radius: 50%;
      background: #5858a1;
      animation: partnersLivePulse 2s ease-in-out infinite;
    }
    @keyframes partnersLivePulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.2); }
    }
    .partners-pill-coming {
      background: rgba(88, 88, 161, 0.12);
      border: 0.75px solid rgba(88, 88, 161, 0.45);
      color: rgba(25, 28, 54, 0.65);
    }

    /* Entrance animation */
    .partners .partners-eyebrow,
    .partners .partners-heading,
    .partners .partners-intro,
    .partners .partners-hero,
    .partners .partners-trio > li {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .partners .partners-hero { transform: translateY(8px); }
    .partners .partners-trio > li { transform: translateY(6px); }

    .partners.is-in-view .partners-eyebrow   { opacity: 1; transition-duration: 250ms; }
    .partners.is-in-view .partners-heading   { opacity: 1; transition-duration: 250ms; transition-delay: 60ms; }
    .partners.is-in-view .partners-intro     { opacity: 1; transition-duration: 250ms; transition-delay: 200ms; }
    .partners.is-in-view .partners-hero      { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
    .partners.is-in-view .partners-trio > li:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
    .partners.is-in-view .partners-trio > li:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
    .partners.is-in-view .partners-trio > li:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 800ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .partners-container { padding: 0 32px; }
      .partners-trio { gap: 14px; }
    }

    /* Mobile. Hero stacks. Trio stacks. */
    @media (max-width: 767px) {
      .partners { padding: 72px 0; }
      .partners-container { padding: 0 24px; }
      .partners-hero {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }
      .partners-trio {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .partners-small { padding: 18px; min-height: 0; }
    }

    /* Reduced motion. Everything visible immediately, LIVE pulse disabled. */
    @media (prefers-reduced-motion: reduce) {
      .partners .partners-eyebrow,
      .partners .partners-heading,
      .partners .partners-intro,
      .partners .partners-hero,
      .partners .partners-trio > li {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .partners-pill-live::before { animation: none !important; }
    }

    /* =========================================================
       CONSUMER-CTA-CLOSE section. Final section, closes the page.
       Scoped to this section only.
    ========================================================= */
    .ctaclose {
      background: var(--bg);
      padding: 112px 0 120px;
      position: relative;
      overflow: hidden;
    }
    .ctaclose-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      position: relative;
    }
    .ctaclose-inner {
      max-width: 680px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      text-align: center;
    }

    /* Ambient backdrop (two concentric arcs + 3 ticks). Breathes slowly. */
    .ctaclose-backdrop {
      position: absolute;
      top: 40px;
      left: 50%;
      transform: translateX(-50%);
      width: 720px;
      height: 360px;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 600ms ease-out;
    }
    .ctaclose-backdrop svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .ctaclose.is-in-view .ctaclose-backdrop {
      /* Fade-in ends at 0.75 so the breath keyframes hand off without a jump. */
      opacity: 0.75;
      animation: ctacloseBreath 6s ease-in-out 600ms infinite;
    }
    @keyframes ctacloseBreath {
      0%, 100% { opacity: 0.75; }
      50%      { opacity: 1; }
    }

    /* Heading */
    .ctaclose-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 4vw, 46px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 40px;
    }
    .ctaclose-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Body paragraphs */
    .ctaclose-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      max-width: 560px;
      margin: 0 auto;
    }
    .ctaclose-body-1 { margin-bottom: 16px; }
    .ctaclose-body-2 { margin-bottom: 48px; }

    /* Primary CTA */
    .ctaclose-cta-primary {
      font-family: var(--sans);
      font-weight: 600;
      font-size: clamp(16px, 1.35vw, 17px);
      letter-spacing: 0.01em;
      padding: 18px 36px;
      border-radius: 8px;
      background: #f16b52;
      color: #ffffff;
      border: none;
      cursor: pointer;
      box-shadow: 0 12px 28px rgba(241, 107, 82, 0.25);
      transition:
        background-color 200ms ease-out,
        transform 200ms ease-out,
        box-shadow 200ms ease-out;
    }
    .ctaclose-cta-primary:hover {
      background-color: #f27a63;
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(241, 107, 82, 0.3);
    }
    .ctaclose-cta-primary:active {
      background-color: #e85a41;
      transform: translateY(0);
      box-shadow: 0 8px 20px rgba(241, 107, 82, 0.25);
    }
    .ctaclose-cta-primary:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
    }

    /* Primary CTA sub-label. Understated; does not invite scrutiny. */
    .ctaclose-sublabel {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
      margin: 14px 0 0;
    }

    /* Secondary CTA */
    .ctaclose-cta-secondary {
      display: inline-flex;
      align-items: center;
      margin-top: 36px;
      padding: 8px 12px;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14.5px;
      letter-spacing: 0.02em;
      color: rgba(25, 28, 54, 0.8);
      text-decoration: none;
      transition: color 200ms ease-out;
    }
    .ctaclose-cta-secondary:hover { color: #191c36; }
    .ctaclose-cta-secondary:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
      border-radius: 4px;
    }
    .ctaclose-cta-arrow {
      width: 14px;
      height: 14px;
      margin-left: 8px;
      flex-shrink: 0;
      transition: transform 200ms ease-out;
    }
    .ctaclose-cta-secondary:hover .ctaclose-cta-arrow {
      transform: translateX(3px);
    }

    /* Trust row. Bookends the hero's trust row. */
    .ctaclose-trust {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      margin: 56px 0 0;
    }

    /* Entrance animation */
    .ctaclose .ctaclose-heading,
    .ctaclose .ctaclose-body-1,
    .ctaclose .ctaclose-body-2,
    .ctaclose .ctaclose-cta-primary,
    .ctaclose .ctaclose-sublabel,
    .ctaclose .ctaclose-cta-secondary,
    .ctaclose .ctaclose-trust {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .ctaclose .ctaclose-body-1,
    .ctaclose .ctaclose-body-2 { transform: translateY(6px); }
    .ctaclose .ctaclose-cta-primary { transform: translateY(8px); }

    .ctaclose.is-in-view .ctaclose-heading       { opacity: 1; transition-delay: 200ms; }
    .ctaclose.is-in-view .ctaclose-body-1        { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
    .ctaclose.is-in-view .ctaclose-body-2        { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
    .ctaclose.is-in-view .ctaclose-cta-primary   { opacity: 1; transform: translateY(0); transition-duration: 400ms; transition-delay: 1000ms; }
    .ctaclose.is-in-view .ctaclose-sublabel      { opacity: 1; transition-delay: 1600ms; }
    .ctaclose.is-in-view .ctaclose-cta-secondary { opacity: 1; transition-delay: 1900ms; }
    .ctaclose.is-in-view .ctaclose-trust         { opacity: 1; transition-delay: 2200ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .ctaclose-container { padding: 0 32px; }
    }

    /* Mobile */
    @media (max-width: 767px) {
      .ctaclose { padding: 80px 0 88px; }
      .ctaclose-container { padding: 0 24px; }
      .ctaclose-backdrop { width: 520px; height: 260px; top: 32px; }
      .ctaclose-cta-primary { padding: 16px 28px; }
    }

    /* Reduced motion. Render everything immediately; backdrop visible but static. */
    @media (prefers-reduced-motion: reduce) {
      .ctaclose .ctaclose-heading,
      .ctaclose .ctaclose-body-1,
      .ctaclose .ctaclose-body-2,
      .ctaclose .ctaclose-cta-primary,
      .ctaclose .ctaclose-sublabel,
      .ctaclose .ctaclose-cta-secondary,
      .ctaclose .ctaclose-trust {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .ctaclose .ctaclose-backdrop {
        opacity: 0.85 !important;
        animation: none !important;
        transition: none !important;
      }
    }

    /* Footer logo sizing */
    .site-footer .logo svg { width: 150px; height: 53px; }
  

/* ===== Features page styles ===== */

    /* ── Nav ── */
    .nav-logo {
      text-decoration: none;
      margin-right: auto;
      padding: 12px 0;
      border-bottom: none !important;
      display: flex;
      align-items: center;
    }
    .nav-logo:hover { opacity: 0.85; border-bottom-color: transparent !important; }
    .nav-cta {
      background: #ffffff;
      color: var(--coral) !important;
      padding: 8px 18px !important;
      border-radius: var(--radius-sm);
      border-bottom: none !important;
      font-weight: 500;
      margin-left: 8px;
      transition: opacity 0.2s !important;
    }
    .nav-cta:hover { opacity: 0.88; border-bottom-color: transparent !important; }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 18px 0 18px 13px;
      color: rgba(255,255,255,0.85);
    }
    .nav-links { display: flex; align-items: center; }
    @media (max-width: 640px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--coral);
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 5% 20px;
        border-bottom: 1px solid rgba(255,255,255,0.25);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; width: 100%; }
      .nav-cta { margin-left: 0; margin-top: 8px; }
    }

    /* ── Hero ── */
    .hero {
      min-height: 60vh;
      background: var(--deep);
      position: relative;
      overflow: hidden;
      padding: 100px 10% 80px;
      display: flex;
      align-items: center;
    }
    .hero::before {
      content: '';
      position: absolute;
      top: -180px; right: -120px;
      width: 680px; height: 680px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(88,88,161,0.22) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      bottom: -80px; left: 25%;
      width: 420px; height: 420px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(241,107,82,0.1) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      max-width: 680px;
    }

    /* ── Feature deep-dive sections ── */
    .feature-section {
      max-width: 1080px;
      margin: 0 auto;
      padding: 88px 5% 72px;
      border-bottom: 1px solid var(--border);
    }
    .feature-section:last-of-type { border-bottom: none; }

    .feature-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      margin-top: 48px;
    }
    .feature-layout.reverse { direction: rtl; }
    .feature-layout.reverse > * { direction: ltr; }

    .feature-text h3 {
      font-family: var(--serif);
      font-size: clamp(28px, 3.5vw, 42px);
      color: var(--white);
      line-height: 1.1;
      letter-spacing: -1px;
      margin-bottom: 16px;
    }
    .feature-text h3 em { font-style: italic; color: var(--purple); }
    .feature-text p {
      font-family: var(--sans);
      font-size: 15px;
      font-weight: 300;
      color: var(--muted-2);
      line-height: 1.8;
      margin-bottom: 28px;
    }

    .feature-points { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
    .feature-point {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .feature-point-dot {
      width: 20px; height: 20px;
      border-radius: 50%;
      background: rgba(241,107,82,0.15);
      border: 1px solid rgba(241,107,82,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .feature-point-dot svg { width: 10px; height: 10px; }
    .feature-point-text {
      font-family: var(--sans);
      font-size: 14px;
      font-weight: 300;
      color: var(--muted-2);
      line-height: 1.6;
    }
    .feature-point-text strong { color: var(--white); font-weight: 500; }

    /* ── Mock UI panels ── */
    .mock-panel {
      background: var(--navy);
      border: 1px solid var(--border-2);
      border-radius: 16px;
      overflow: hidden;
    }
    .mock-header {
      padding: 14px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(25,28,54,0.03);
    }
    .mock-title {
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--mid-purple);
    }
    .mock-badge {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 100px;
      background: rgba(47,157,111,0.1);
      color: #2f9d6f;
      border: 1px solid rgba(47,157,111,0.2);
    }
    .mock-body { padding: 20px; }

    /* CPF mock */
    .cpf-accounts { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
    .cpf-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: rgba(25,28,54,0.03);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
    }
    .cpf-row-left { display: flex; align-items: center; gap: 10px; }
    .cpf-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .cpf-label {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      color: var(--muted-2);
    }
    .cpf-amount {
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 500;
      color: var(--white);
    }
    .cpf-projection {
      background: rgba(88,88,161,0.1);
      border: 1px solid rgba(88,88,161,0.2);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cpf-proj-label {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 300;
      color: var(--muted);
    }
    .cpf-proj-val {
      font-family: var(--mono);
      font-size: 18px;
      font-weight: 500;
      color: var(--purple);
    }

    /* Goals mock */
    .goal-cards { display: flex; flex-direction: column; gap: 10px; }
    .goal-card-item {
      background: rgba(25,28,54,0.03);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
    }
    .goal-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .goal-name {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      color: var(--white);
    }
    .goal-pct {
      font-family: var(--mono);
      font-size: 12px;
      font-weight: 500;
    }
    .goal-bar {
      height: 5px;
      background: rgba(25,28,54,0.07);
      border-radius: 100px;
      overflow: hidden;
      margin-bottom: 8px;
    }
    .goal-bar-fill { height: 100%; border-radius: 100px; }
    .goal-meta {
      font-family: var(--sans);
      font-size: 11px;
      font-weight: 300;
      color: var(--muted);
    }

    /* Tax mock */
    .tax-summary {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
    }
    .tax-box {
      background: rgba(25,28,54,0.03);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px;
    }
    .tax-box-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--mid-purple);
      margin-bottom: 6px;
    }
    .tax-box-val {
      font-family: var(--mono);
      font-size: 20px;
      font-weight: 500;
      color: var(--white);
    }
    .tax-box-val.saving { color: #2f9d6f; }
    .tax-action {
      background: rgba(241,107,82,0.08);
      border: 1px solid rgba(241,107,82,0.2);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
    }
    .tax-action-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--coral);
      margin-bottom: 8px;
    }
    .tax-action-text {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 300;
      color: var(--muted-2);
      line-height: 1.6;
    }
    .tax-action-text strong { color: var(--white); font-weight: 500; }

    /* Spending mock */
    .spend-categories { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
    .spend-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .spend-label {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 300;
      color: var(--muted-2);
      width: 110px;
      flex-shrink: 0;
    }
    .spend-bar-wrap { flex: 1; }
    .spend-bar {
      height: 6px;
      background: rgba(25,28,54,0.06);
      border-radius: 100px;
      overflow: hidden;
    }
    .spend-bar-fill { height: 100%; border-radius: 100px; }
    .spend-amt {
      font-family: var(--mono);
      font-size: 11px;
      font-weight: 500;
      color: var(--white);
      width: 64px;
      text-align: right;
      flex-shrink: 0;
    }
    .spend-insight {
      background: rgba(88,88,161,0.07);
      border: 1px solid rgba(88,88,161,0.18);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
    }
    .spend-insight-label {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: 6px;
    }
    .spend-insight-text {
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 300;
      color: var(--muted-2);
      line-height: 1.55;
    }
    .spend-insight-text strong { color: var(--white); font-weight: 500; }

    /* ── Feature nav tabs ── */
    .feature-nav {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 5%;
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      scrollbar-width: none;
    }
    .feature-nav::-webkit-scrollbar { display: none; }
    .feature-nav a {
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 400;
      color: var(--muted);
      text-decoration: none;
      padding: 16px 20px;
      border-bottom: 2px solid transparent;
      white-space: nowrap;
      transition: color 0.2s, border-color 0.2s;
    }
    .feature-nav a:hover { color: var(--white); }
    .feature-nav a.active { color: var(--white); border-bottom-color: var(--coral); }

    /* ── CTA ── */
    .cta-section {
      max-width: 1080px;
      margin: 0 auto;
      padding: 88px 5%;
    }
    .cta-block {
      background: var(--navy);
      border: 1px solid var(--border-2);
      border-radius: 20px;
      padding: 64px 56px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .cta-block::before {
      content: '';
      position: absolute;
      top: -100px; right: -80px;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--purple-glow) 0%, transparent 65%);
      pointer-events: none;
    }
    .cta-block::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -40px;
      width: 300px; height: 300px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--coral-glow) 0%, transparent 65%);
      pointer-events: none;
    }
    .cta-block h2 { margin-bottom: 16px; position: relative; z-index: 1; }
    .cta-block .subhead { margin: 0 auto 40px; position: relative; z-index: 1; text-align: center; }
    .cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
    .cta-trust {
      margin-top: 28px;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--muted);
      position: relative;
      z-index: 1;
    }

    /* ── Footer ── */
    .footer-logo {
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      transition: opacity 0.2s;
    }
    .footer-logo:hover { opacity: 0.75; }
    .footer-inner { max-width: 1080px; margin: 0 auto; }
    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 24px;
      margin-bottom: 36px;
    }
    .footer-links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
    .footer-links a {
      font-family: var(--sans);
      font-size: 13px;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--white); }
    .footer-divider { border: none; border-top: 1px solid var(--border); margin-bottom: 28px; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }

    @media (max-width: 760px) {
      .feature-layout { grid-template-columns: 1fr; gap: 40px; }
      .feature-layout.reverse { direction: ltr; }
      .cta-block { padding: 40px 24px; }
      .footer-top { flex-direction: column; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      .tax-summary { grid-template-columns: 1fr; }
    }
  

/* ===== Trust page styles ===== */

    html { scroll-behavior: smooth; }

    /* Existing nav chrome (unchanged) */
    .nav-cta {
      background: #ffffff;
      color: var(--coral) !important;
      padding: 8px 18px !important;
      border-radius: var(--radius-sm);
      border-bottom: none !important;
      font-weight: 500;
      margin-left: 8px;
      transition: opacity 0.2s !important;
    }
    .nav-cta:hover { opacity: 0.88; border-bottom-color: transparent !important; }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 18px 0 18px 13px;
      color: rgba(255,255,255,0.85);
      margin-left: auto;
    }
    .nav-links { display: flex; align-items: center; margin-left: auto; }
    .nav-logo { margin-right: auto; padding: 8px 0; }
    @media (max-width: 720px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--coral);
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 5% 20px;
        border-bottom: 1px solid rgba(255,255,255,0.25);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; width: 100%; }
      .nav-cta { margin-left: 0; margin-top: 8px; }
    }

    /* ============================================================
       TRUST PAGE
       Hero, sticky TOC, seven sections, pledge card, contact rows.
       Read as a serious commitments document.
       ============================================================ */
    .trust-main { background: var(--deep); }

    /* ===== Hero ===== */
    .trust-hero {
      padding: 104px 0 80px;
    }
    .trust-hero-container {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 32px;
      text-align: center;
    }
    .trust-hero-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 24px;
    }
    .trust-hero-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 5vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: #191c36;
      margin: 0 0 32px;
    }
    .trust-hero-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .trust-hero-sub {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(17px, 1.4vw, 18px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
      max-width: 580px;
      margin: 0 auto;
      text-align: center;
    }

    /* ===== Shell: TOC + content column ===== */
    .trust-shell {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 32px;
    }
    @media (min-width: 1024px) {
      .trust-shell {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 64px;
        align-items: start;
      }
    }

    /* ===== Sticky TOC (desktop only) ===== */
    .trust-toc {
      position: sticky;
      top: 96px;
      align-self: start;
      padding: 24px 0;
    }
    @media (max-width: 1023px) {
      .trust-toc { display: none; }
    }
    .trust-toc-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      margin: 0 0 16px;
    }
    .trust-toc-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
    }
    .trust-toc-list li { margin: 0; }
    .trust-toc-link {
      display: block;
      font-family: var(--sans);
      font-weight: 400;
      font-size: 13px;
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.65);
      text-decoration: none;
      padding: 6px 0 6px 12px;
      border-left: 2px solid transparent;
      transition: color 200ms ease-out, border-color 200ms ease-out;
    }
    .trust-toc-link:hover { color: #191c36; }
    .trust-toc-link[aria-current="location"] {
      color: var(--coral);
      border-left-color: var(--coral);
    }

    /* ===== Content column ===== */
    .trust-content {
      max-width: 640px;
      width: 100%;
    }

    .trust-section {
      padding: 96px 0;
      scroll-margin-top: 96px;
    }
    .trust-section-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .trust-section-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 3vw, 40px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 40px;
    }
    .trust-section-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .trust-section-opener {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.35vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      max-width: 620px;
      margin: 0 0 48px;
    }

    /* ===== Spine block (principles, choices, streams, sources) ===== */
    .trust-spine {
      border-left: 2px solid var(--purple);
      padding-left: 20px;
      max-width: 640px;
    }
    .trust-spine + .trust-spine { margin-top: 56px; }
    .trust-spine-num {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--purple);
      margin: 0 0 8px;
    }
    .trust-spine-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(26px, 2.4vw, 30px);
      line-height: 1.2;
      color: #191c36;
      margin: 0 0 16px;
    }
    .trust-spine-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.2vw, 16px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      margin: 0;
    }
    .trust-spine-body + .trust-spine-body { margin-top: 16px; }

    /* Tighter stacking for streams (48px) and sources (40px) */
    .trust-section-money .trust-spine + .trust-spine { margin-top: 48px; }
    .trust-section-infra .trust-spine + .trust-spine { margin-top: 40px; }

    /* ===== Pledge card ===== */
    .trust-pledge {
      background: var(--navy);
      border: 0.5px solid rgba(88, 88, 161, 0.35);
      border-radius: 12px;
      padding: 56px 48px;
      max-width: 720px;
      margin: 0 auto;
      box-shadow: 0 24px 48px rgba(25, 28, 54, 0.09);
    }
    .trust-pledge-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .trust-pledge-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(26px, 2.6vw, 34px);
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 24px;
    }
    .trust-pledge-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .trust-pledge-body {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.7;
      letter-spacing: 0.005em;
      color: #191c36;
      margin: 0 0 14px;
    }
    .trust-pledge-body:last-of-type {
      margin-bottom: 32px;
    }
    .trust-pledge-divider {
      width: 100%;
      height: 1px;
      background: rgba(88, 88, 161, 0.3);
      border: none;
      margin: 0 0 24px;
    }
    .trust-pledge-signature {
      margin: 0;
    }
    .trust-pledge-name {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: 16px;
      color: #191c36;
      margin: 0 0 8px;
    }
    .trust-pledge-meta {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
      line-height: 1.5;
      margin: 0;
    }
    .trust-pledge-meta-line { display: block; }

    @media (max-width: 767px) {
      .trust-pledge { padding: 40px 28px; }
    }

    /* ===== How We Make Money closing ===== */
    .trust-money-close-divider {
      width: 80px;
      height: 1px;
      background: rgba(88, 88, 161, 0.4);
      border: none;
      margin: 32px auto 24px;
    }
    .trust-money-close {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(18px, 1.7vw, 20px);
      line-height: 1.5;
      color: #191c36;
      text-align: center;
      max-width: 580px;
      margin: 0 auto;
    }

    /* ===== Contact rows ===== */
    .trust-contact-row {
      padding: 20px 24px;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
    }
    .trust-contact-row + .trust-contact-row { margin-top: 24px; }
    .trust-contact-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .trust-contact-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--purple);
      margin: 0;
    }
    .trust-contact-desc {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 13.5px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.7);
      margin: 0;
      max-width: 380px;
    }
    .trust-contact-email {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.04em;
      color: #191c36;
      text-decoration: none;
      transition: color 200ms ease-out;
      white-space: nowrap;
    }
    .trust-contact-email:hover { color: var(--coral); }

    @media (max-width: 767px) {
      .trust-contact-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
    }

    /* ===== Mobile TOC ===== */
    .trust-toc-mobile-btn {
      display: none;
      align-items: center;
      gap: 6px;
      position: fixed;
      bottom: 24px;
      right: 24px;
      padding: 12px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(88, 88, 161, 0.5);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: #191c36;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: pointer;
      z-index: 50;
    }
    .trust-toc-mobile-btn:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 2px;
    }
    @media (max-width: 767px) {
      .trust-toc-mobile-btn { display: inline-flex; }
    }

    .trust-toc-mobile-overlay {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: var(--navy);
      padding: 20px 24px 32px;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.4);
      box-shadow: 0 -16px 48px rgba(25, 28, 54, 0.09);
      z-index: 100;
    }
    .trust-toc-mobile-overlay.is-open { display: block; }
    .trust-toc-mobile-overlay-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .trust-toc-mobile-overlay-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
    }
    .trust-toc-mobile-overlay-close {
      background: none;
      border: none;
      color: rgba(25, 28, 54, 0.7);
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      cursor: pointer;
      padding: 8px;
    }
    .trust-toc-mobile-overlay-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .trust-toc-mobile-overlay-list li { margin: 0; }
    .trust-toc-mobile-overlay-list a {
      display: block;
      font-family: var(--sans);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.5;
      color: #191c36;
      text-decoration: none;
      padding: 14px 0;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.15);
    }
    .trust-toc-mobile-overlay-list li:last-child a { border-bottom: none; }

    /* ===== Entrance animations ===== */
    .trust-section-eyebrow,
    .trust-section-opener,
    .trust-spine,
    .trust-pledge,
    .trust-pledge-body,
    .trust-pledge-signature,
    .trust-money-close-divider,
    .trust-money-close,
    .trust-contact-row {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .trust-section-heading {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 350ms ease-out, transform 350ms ease-out;
    }
    .trust-spine {
      transform: translateY(4px);
      transition: opacity 250ms ease-out, transform 250ms ease-out;
    }
    .trust-pledge {
      transform: translateY(12px);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    .trust-section.is-in-view .trust-section-eyebrow { opacity: 1; transition-duration: 250ms; }
    .trust-section.is-in-view .trust-section-heading { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
    .trust-section.is-in-view .trust-section-opener  { opacity: 1; transition-delay: 300ms; }

    .trust-section.is-in-view .trust-spine:nth-of-type(1) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
    .trust-section.is-in-view .trust-spine:nth-of-type(2) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
    .trust-section.is-in-view .trust-spine:nth-of-type(3) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
    .trust-section.is-in-view .trust-spine:nth-of-type(4) { opacity: 1; transform: translateY(0); transition-delay: 700ms; }

    /* Pledge slow timing */
    .trust-section-pledge.is-in-view .trust-pledge          { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
    .trust-section-pledge.is-in-view .trust-pledge-body     { opacity: 1; transition-delay: 600ms; transition-duration: 400ms; }
    .trust-section-pledge.is-in-view .trust-pledge-signature { opacity: 1; transition-delay: 1000ms; transition-duration: 350ms; }

    /* Money closing */
    .trust-section-money.is-in-view .trust-money-close-divider { opacity: 1; transition-delay: 800ms; }
    .trust-section-money.is-in-view .trust-money-close         { opacity: 1; transition-delay: 950ms; }

    /* Contact rows */
    .trust-section-contact.is-in-view .trust-contact-row:nth-of-type(1) { opacity: 1; transition-delay: 400ms; }
    .trust-section-contact.is-in-view .trust-contact-row:nth-of-type(2) { opacity: 1; transition-delay: 500ms; }
    .trust-section-contact.is-in-view .trust-contact-row:nth-of-type(3) { opacity: 1; transition-delay: 600ms; }

    @media (prefers-reduced-motion: reduce) {
      .trust-section-eyebrow,
      .trust-section-heading,
      .trust-section-opener,
      .trust-spine,
      .trust-pledge,
      .trust-pledge-body,
      .trust-pledge-signature,
      .trust-money-close-divider,
      .trust-money-close,
      .trust-contact-row {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    .site-footer .logo svg { width: 150px; height: 53px; }
  

/* ===== For advisors page styles ===== */

    /* Page-specific styles */
    .nav-cta {
      background: #ffffff;
      color: var(--coral) !important;
      padding: 8px 18px !important;
      border-radius: var(--radius-sm);
      border-bottom: none !important;
      font-weight: 500;
      margin-left: 8px;
      transition: opacity 0.2s !important;
    }
    .nav-cta:hover { opacity: 0.88; border-bottom-color: transparent !important; }
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 18px 0 18px 13px;
      color: rgba(255,255,255,0.85);
      margin-left: auto;
    }
    .nav-links { display: flex; align-items: center; margin-left: auto; }
    .nav-logo { margin-right: auto; padding: 8px 0; }
    @media (max-width: 720px) {
      .nav-toggle { display: block; }
      .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        background: var(--coral);
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 5% 20px;
        border-bottom: 1px solid rgba(255,255,255,0.25);
      }
      .nav-links.open { display: flex; }
      .nav-links a { padding: 12px 0; width: 100%; }
      .nav-cta { margin-left: 0; margin-top: 8px; }
    }

    /* =========================================================
       ADVISOR-HERO. Two-column hero, animated client roster panel.
       Scoped to this page only. Reuses brand tokens and the
       .hero-bg-canvas styling already defined globally in brand.css. */
    .adv-hero {
      background: var(--bg);
      padding: 96px 0 80px;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      min-height: 100vh;
    }
    .adv-hero-grid {
      position: relative;
      z-index: 1;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      min-height: calc(100vh - 176px);
    }

    /* Left column copy stack */
    .adv-hero-text {
      display: flex;
      flex-direction: column;
    }
    .adv-hero-kicker {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(16px, 1.3vw, 17px);
      line-height: 1.4;
      color: rgba(88, 88, 161, 0.75);
      margin: 0 0 24px;
    }
    .adv-hero-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-hero-headline {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(36px, 4.6vw, 52px);
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 28px;
    }
    .adv-hero-headline em {
      font-style: italic;
      color: #f16b52;
    }
    .adv-hero-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.35vw, 17px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
      max-width: 460px;
      margin: 0 0 36px;
    }

    /* CTA pair */
    .adv-hero-ctas {
      display: flex;
      align-items: center;
      gap: 20px;
      margin: 0 0 32px;
    }
    .adv-hero-cta-primary {
      font-family: var(--sans);
      font-weight: 600;
      font-size: 16px;
      letter-spacing: 0.01em;
      padding: 16px 30px;
      border-radius: 8px;
      background: #f16b52;
      color: #ffffff;
      border: none;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      box-shadow: 0 12px 28px rgba(241, 107, 82, 0.25);
      transition:
        background-color 200ms ease-out,
        transform 200ms ease-out,
        box-shadow 200ms ease-out;
    }
    .adv-hero-cta-primary:hover {
      background-color: #f27a63;
      transform: translateY(-1px);
      box-shadow: 0 14px 32px rgba(241, 107, 82, 0.3);
    }
    .adv-hero-cta-primary:active {
      background-color: #e85a41;
      transform: translateY(0);
      box-shadow: 0 8px 20px rgba(241, 107, 82, 0.25);
    }
    .adv-hero-cta-primary:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
    }
    .adv-hero-cta-secondary {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14.5px;
      letter-spacing: 0.02em;
      color: rgba(25, 28, 54, 0.8);
      text-decoration: none;
      transition: color 200ms ease-out;
    }
    .adv-hero-cta-secondary:hover { color: #191c36; }
    .adv-hero-cta-secondary:focus-visible {
      outline: 2px solid #5858a1;
      outline-offset: 2px;
      border-radius: 4px;
    }
    .adv-hero-cta-arrow {
      width: 14px;
      height: 14px;
      margin-left: 8px;
      flex-shrink: 0;
      transition: transform 200ms ease-out;
    }
    .adv-hero-cta-secondary:hover .adv-hero-cta-arrow {
      transform: translateX(3px);
    }

    /* Trust row */
    .adv-hero-trust {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      margin: 0;
    }

    /* ---- Right column: animated client roster panel ---- */
    .adv-hero-panel-wrap {
      max-width: 560px;
      width: 100%;
      margin: 0 auto;
    }
    .adv-hero-panel {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 12px;
      box-shadow:
        0 32px 64px rgba(25, 28, 54, 0.10),
        0 0 0 1px rgba(88, 88, 161, 0.08);
      transform: perspective(2000px) rotateY(-8deg) rotateX(2deg);
      transform-origin: center center;
      aspect-ratio: 4 / 5;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Panel header strip */
    .adv-hero-panel-header {
      padding: 14px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.2);
      flex-shrink: 0;
    }
    .adv-hero-panel-stamp {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
    }
    .adv-hero-pill-live {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      background: rgba(88, 88, 161, 0.12);
      border: 0.75px solid rgba(88, 88, 161, 0.45);
      color: #5858a1;
    }
    .adv-hero-pill-live::before {
      content: "";
      width: 4px; height: 4px;
      border-radius: 50%;
      background: #5858a1;
      animation: advHeroLivePulse 2s ease-in-out infinite;
    }
    @keyframes advHeroLivePulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.2); }
    }

    /* Cycling content area. Three states share a grid cell. */
    .adv-hero-cycle {
      flex: 1;
      display: grid;
      grid-template-areas: "stack";
      min-height: 0;
    }
    .adv-hero-state {
      grid-area: stack;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transition: opacity 250ms ease-out;
      pointer-events: none;
    }
    .adv-hero-state.is-active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Section header inside states */
    .adv-hero-section-head {
      padding: 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }
    .adv-hero-section-head span {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
    }

    /* State 1: signal rows */
    .adv-hero-row {
      padding: 12px 20px;
      display: flex;
      gap: 10px;
    }
    .adv-hero-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
      margin-top: 7px;
    }
    .adv-hero-dot.coral  { background: #f16b52; }
    .adv-hero-dot.purple { background: #5858a1; }
    .adv-hero-row-content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .adv-hero-row-name {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #191c36;
    }
    .adv-hero-row-signal {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 12.5px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.75);
    }
    .adv-hero-row-memory {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: 11.5px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.5);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .adv-hero-connector {
      width: 12px;
      height: 14px;
      flex-shrink: 0;
      display: block;
    }

    /* State 1 + State 2: meeting rows */
    .adv-hero-meeting-row {
      padding: 8px 20px;
      display: flex;
      gap: 14px;
      align-items: baseline;
    }
    .adv-hero-meeting-time {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.5);
      width: 52px;
      flex-shrink: 0;
    }
    .adv-hero-meeting-name {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 12.5px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.8);
    }
    .adv-hero-divider {
      border: 0;
      border-top: 0.5px solid rgba(88, 88, 161, 0.2);
      margin: 0;
    }
    .adv-hero-more {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: 11.5px;
      color: rgba(25, 28, 54, 0.4);
      padding: 6px 20px;
      margin: 0;
    }

    /* State 2: signal alert card */
    .adv-hero-alert {
      margin: 14px 14px 0;
      padding: 16px;
      border: 1px solid rgba(241, 107, 82, 0.7);
      background: rgba(241, 107, 82, 0.06);
      border-radius: 8px;
    }
    .adv-hero-alert-tag {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #f16b52;
      margin: 0;
    }
    .adv-hero-alert-subject {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.2;
      color: #191c36;
      margin: 16px 0 0;
    }
    .adv-hero-alert-detail {
      margin: 12px 0 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .adv-hero-alert-detail p {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.72);
      margin: 0;
    }
    .adv-hero-alert-actions {
      margin: 16px 0 0;
      display: flex;
      gap: 8px;
    }
    .adv-hero-chip {
      padding: 6px 12px;
      border-radius: 999px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: transparent;
      cursor: default;
    }
    .adv-hero-chip-primary {
      border: 1px solid #f16b52;
      color: #191c36;
    }
    .adv-hero-chip-secondary {
      border: 1px solid rgba(88, 88, 161, 0.5);
      color: rgba(25, 28, 54, 0.7);
    }
    .adv-hero-meetings-strip {
      margin-top: 16px;
    }

    /* State 3: prep card */
    .adv-hero-prep {
      margin: 14px 14px 0;
      padding: 16px;
      background: rgba(88, 88, 161, 0.08);
      border: 0.5px solid rgba(88, 88, 161, 0.4);
      border-radius: 8px;
    }
    .adv-hero-prep-top {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }
    .adv-hero-prep-stamp {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
    }
    .adv-hero-pill-ready {
      padding: 3px 9px;
      border-radius: 999px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: rgba(88, 88, 161, 0.15);
      border: 0.75px solid rgba(88, 88, 161, 0.4);
      color: rgba(25, 28, 54, 0.8);
    }
    .adv-hero-prep-subject {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 18px;
      line-height: 1.2;
      color: #191c36;
      margin: 12px 0 0;
    }
    .adv-hero-prep-block {
      margin: 16px 0 0;
    }
    .adv-hero-prep-block-second {
      margin-top: 12px;
    }
    .adv-hero-prep-subhead {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.45);
      margin: 0;
    }
    .adv-hero-prep-list {
      margin: 8px 0 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .adv-hero-prep-list p {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.72);
      margin: 0;
    }
    .adv-hero-quote {
      font-style: italic;
      text-decoration: underline;
      text-decoration-color: rgba(241, 107, 82, 0.5);
      text-decoration-thickness: 1px;
      text-underline-offset: 2px;
    }

    /* Entrance animation */
    .adv-hero .adv-hero-kicker,
    .adv-hero .adv-hero-eyebrow,
    .adv-hero .adv-hero-headline,
    .adv-hero .adv-hero-body,
    .adv-hero .adv-hero-ctas,
    .adv-hero .adv-hero-trust,
    .adv-hero .adv-hero-panel-wrap {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .adv-hero .adv-hero-headline      { transform: translateY(8px); }
    .adv-hero .adv-hero-ctas          { transform: translateY(6px); }
    .adv-hero .adv-hero-panel-wrap    { transform: translateY(12px); }

    .adv-hero.is-in-view .adv-hero-kicker     { opacity: 1; transition-duration: 250ms; }
    .adv-hero.is-in-view .adv-hero-eyebrow    { opacity: 1; transition-duration: 250ms; transition-delay: 100ms; }
    .adv-hero.is-in-view .adv-hero-headline   { opacity: 1; transform: translateY(0); transition-duration: 350ms; transition-delay: 300ms; }
    .adv-hero.is-in-view .adv-hero-body       { opacity: 1; transition-duration: 300ms; transition-delay: 550ms; }
    .adv-hero.is-in-view .adv-hero-ctas       { opacity: 1; transform: translateY(0); transition-duration: 350ms; transition-delay: 750ms; }
    .adv-hero.is-in-view .adv-hero-trust      { opacity: 1; transition-duration: 250ms; transition-delay: 950ms; }
    .adv-hero.is-in-view .adv-hero-panel-wrap { opacity: 1; transform: translateY(0); transition-duration: 600ms; transition-delay: 300ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .adv-hero-grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 0 32px; }
      .adv-hero-panel { transform: perspective(2000px) rotateY(-4deg) rotateX(1deg); }
    }

    /* Mobile */
    @media (max-width: 767px) {
      .adv-hero { padding: 64px 0 56px; }
      .adv-hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
        min-height: 0;
      }
      .adv-hero-panel {
        transform: none;
        aspect-ratio: 16 / 10;
      }
      .adv-hero-panel-header { padding: 12px 16px; }
      .adv-hero-row,
      .adv-hero-meeting-row,
      .adv-hero-section-head { padding-left: 16px; padding-right: 16px; }
      .adv-hero-alert,
      .adv-hero-prep { margin-left: 12px; margin-right: 12px; }
    }

    /* Reduced motion: render kicker / eyebrow / headline / body / ctas / trust /
       panel immediately. Do not cycle states. Disable LIVE pulse. */
    @media (prefers-reduced-motion: reduce) {
      .adv-hero .adv-hero-kicker,
      .adv-hero .adv-hero-eyebrow,
      .adv-hero .adv-hero-headline,
      .adv-hero .adv-hero-body,
      .adv-hero .adv-hero-ctas,
      .adv-hero .adv-hero-trust,
      .adv-hero .adv-hero-panel-wrap {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .adv-hero-pill-live::before { animation: none !important; }
    }

    /* Workflow timeline gets a soft purple gutter background */
    .workflow {
      background: var(--navy);
      border: 1px solid var(--border-2);
      border-radius: var(--radius);
      padding: 40px 44px;
      margin-top: 32px;
      position: relative;
      overflow: hidden;
    }
    .workflow::before {
      content: "";
      position: absolute;
      top: -100px; right: -80px;
      width: 320px; height: 320px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--purple-glow) 0%, transparent 65%);
      pointer-events: none;
    }
    .workflow > * { position: relative; z-index: 1; }
    @media (max-width: 640px) { .workflow { padding: 32px 24px; } }

    /* =========================================================
       ADVISOR-PROBLEM section. Scoped to this section only.
    ========================================================= */
    .adv-prob {
      background: var(--bg);
      padding: 96px 0 104px;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .adv-prob-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* Eyebrow + heading */
    .adv-prob-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-prob-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 3.6vw, 44px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 36px;
    }
    .adv-prob-heading em {
      font-style: italic;
      color: #f16b52;
    }

    /* Reframe statement (transitional epigraph). Coral spine signals direct address. */
    .adv-prob-reframe {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(18px, 1.7vw, 22px);
      line-height: 1.45;
      color: rgba(25, 28, 54, 0.88);
      max-width: 460px;
      margin: 0 0 48px;
      padding-left: 16px;
      border-left: 2px solid rgba(241, 107, 82, 0.4);
    }

    /* Two-column grid: left text stack, right sticky visual. */
    .adv-prob-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 64px;
      align-items: start;
    }

    /* Left column text */
    .adv-prob-text {
      display: flex;
      flex-direction: column;
    }

    /* Three grievances. Purple spines, parallel claims. */
    .adv-prob-grievances {
      list-style: none;
      padding: 0;
      margin: 0 0 48px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .adv-prob-grievances li {
      border-left: 2px solid #5858a1;
      padding-left: 18px;
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.25vw, 16px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.78);
      max-width: 460px;
    }

    /* Diagnostic insight. Pivot sentence. */
    .adv-prob-insight {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.35vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.88);
      max-width: 480px;
      margin: 0 0 28px;
    }
    .adv-prob-insight em {
      font-style: italic;
      color: #f16b52;
    }

    /* Cost paragraph */
    .adv-prob-cost {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.25vw, 16px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.75);
      max-width: 460px;
      margin: 0;
    }

    /* Right column sticky visual */
    .adv-prob-visual {
      position: sticky;
      top: 96px;
    }
    .adv-prob-svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* SVG entrance. Controlled via .is-active class on the SVG itself. */
    .adv-prob-svg-line,
    .adv-prob-svg-toplabel,
    .adv-prob-svg-callout,
    .adv-prob-svg-bottomlabel,
    .adv-prob-svg-signal-dot,
    .adv-prob-svg-signal-glow,
    .adv-prob-svg-signal-label,
    .adv-prob-svg-phaselabel,
    .adv-prob-svg-sublabel,
    .adv-prob-svg-bracket,
    .adv-prob-svg-tick {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }

    .adv-prob-svg.is-active .adv-prob-svg-line {
      opacity: 1;
      transition-duration: 400ms;
    }
    .adv-prob-svg.is-active .adv-prob-svg-toplabel,
    .adv-prob-svg.is-active .adv-prob-svg-callout,
    .adv-prob-svg.is-active .adv-prob-svg-bottomlabel {
      opacity: 1;
      transition-delay: 200ms;
    }
    /* Bottom signal dots: 250ms stagger, starting at 700ms */
    .adv-prob-svg.is-active .adv-prob-svg-dot-1   { opacity: 1; transition-delay: 700ms; }
    .adv-prob-svg.is-active .adv-prob-svg-glow-1  { opacity: 1; transition-delay: 800ms; }
    .adv-prob-svg.is-active .adv-prob-svg-label-1 { opacity: 1; transition-delay: 850ms; }
    .adv-prob-svg.is-active .adv-prob-svg-dot-2   { opacity: 1; transition-delay: 950ms; }
    .adv-prob-svg.is-active .adv-prob-svg-glow-2  { opacity: 1; transition-delay: 1050ms; }
    .adv-prob-svg.is-active .adv-prob-svg-label-2 { opacity: 1; transition-delay: 1100ms; }
    .adv-prob-svg.is-active .adv-prob-svg-dot-3   { opacity: 1; transition-delay: 1200ms; }
    .adv-prob-svg.is-active .adv-prob-svg-glow-3  { opacity: 1; transition-delay: 1300ms; }
    .adv-prob-svg.is-active .adv-prob-svg-label-3 { opacity: 1; transition-delay: 1350ms; }
    .adv-prob-svg.is-active .adv-prob-svg-dot-4   { opacity: 1; transition-delay: 1450ms; }
    .adv-prob-svg.is-active .adv-prob-svg-glow-4  { opacity: 1; transition-delay: 1550ms; }
    .adv-prob-svg.is-active .adv-prob-svg-label-4 { opacity: 1; transition-delay: 1600ms; }
    /* Phase labels + sub-label + brackets + boundary tick land last */
    .adv-prob-svg.is-active .adv-prob-svg-phaselabel,
    .adv-prob-svg.is-active .adv-prob-svg-sublabel,
    .adv-prob-svg.is-active .adv-prob-svg-bracket,
    .adv-prob-svg.is-active .adv-prob-svg-tick {
      opacity: 1;
      transition-delay: 1850ms;
    }

    /* Copy entrance fades */
    .adv-prob .adv-prob-eyebrow,
    .adv-prob .adv-prob-heading,
    .adv-prob .adv-prob-reframe,
    .adv-prob .adv-prob-grievances li,
    .adv-prob .adv-prob-insight,
    .adv-prob .adv-prob-cost {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .adv-prob.is-in-view .adv-prob-eyebrow         { opacity: 1; transition-duration: 250ms; }
    .adv-prob.is-in-view .adv-prob-heading         { opacity: 1; transition-duration: 250ms; transition-delay: 60ms; }
    .adv-prob.is-in-view .adv-prob-reframe         { opacity: 1; transition-delay: 200ms; }
    .adv-prob.is-in-view .adv-prob-grievances li:nth-child(1) { opacity: 1; transition-delay: 400ms; }
    .adv-prob.is-in-view .adv-prob-grievances li:nth-child(2) { opacity: 1; transition-delay: 520ms; }
    .adv-prob.is-in-view .adv-prob-grievances li:nth-child(3) { opacity: 1; transition-delay: 640ms; }
    .adv-prob.is-in-view .adv-prob-insight         { opacity: 1; transition-delay: 800ms; }
    .adv-prob.is-in-view .adv-prob-cost            { opacity: 1; transition-delay: 920ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .adv-prob-container { padding: 0 32px; }
      .adv-prob-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    }

    /* Mobile: stack columns. Place visual between reframe and grievances via order. */
    @media (max-width: 767px) {
      .adv-prob { padding: 64px 0 72px; }
      .adv-prob-container { padding: 0 24px; }
      .adv-prob-grid {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .adv-prob-visual {
        position: static;
        top: auto;
        order: -1; /* visual appears above text on mobile */
      }
      .adv-prob-reframe { margin-bottom: 32px; }
    }

    /* Reduced motion: no fade, no stagger, all visible. */
    @media (prefers-reduced-motion: reduce) {
      .adv-prob .adv-prob-eyebrow,
      .adv-prob .adv-prob-heading,
      .adv-prob .adv-prob-reframe,
      .adv-prob .adv-prob-grievances li,
      .adv-prob .adv-prob-insight,
      .adv-prob .adv-prob-cost,
      .adv-prob-svg-line,
      .adv-prob-svg-toplabel,
      .adv-prob-svg-callout,
      .adv-prob-svg-bottomlabel,
      .adv-prob-svg-signal-dot,
      .adv-prob-svg-signal-glow,
      .adv-prob-svg-signal-label,
      .adv-prob-svg-phaselabel,
      .adv-prob-svg-sublabel,
      .adv-prob-svg-bracket,
      .adv-prob-svg-tick {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* =========================================================
       ADVISOR-SUPERPOWERS section. Scoped to this section only.
    ========================================================= */
    .adv-sps {
      background: var(--bg);
      padding: 104px 0;
      border-bottom: 1px solid rgba(25, 28, 54, 0.07);
    }
    .adv-sps-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* Section heading block */
    .adv-sps-head {
      text-align: center;
      max-width: 720px;
      margin: 0 auto 64px;
    }
    .adv-sps-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-sps-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(30px, 3.6vw, 44px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 16px;
    }
    .adv-sps-heading em {
      font-style: italic;
      color: #f16b52;
    }
    .adv-sps-framing {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.7);
      max-width: 480px;
      margin: 0 auto;
    }

    /* Per-superpower sub-section */
    .adv-sp {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .adv-sp:not(:last-of-type) {
      border-bottom: 1px solid rgba(88, 88, 161, 0.15);
      padding-bottom: 48px;
      margin-bottom: 48px;
    }
    /* SP2 reverses column order on desktop */
    .adv-sp.is-reverse .adv-sp-text   { order: 2; }
    .adv-sp.is-reverse .adv-sp-visual { order: 1; }

    /* Copy column */
    .adv-sp-text { display: flex; flex-direction: column; }
    .adv-sp-num {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.16em;
      color: #5858a1;
      margin: 0 0 12px;
    }
    .adv-sp-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(26px, 2.6vw, 32px);
      line-height: 1.2;
      letter-spacing: -0.005em;
      color: #191c36;
      margin: 0 0 20px;
    }
    .adv-sp-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.25vw, 16px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      max-width: 460px;
      margin: 0 0 28px;
    }
    .adv-sp-body .highlight-benefit {
      color: #5858a1;
    }
    .adv-sp-decide {
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(13.5px, 1.15vw, 14px);
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.7);
      max-width: 380px;
      padding-left: 18px;
      border-left: 2px solid rgba(241, 107, 82, 0.5);
      margin: 0;
    }

    /* Visual panel chassis (shared across SP1, SP2, SP3) */
    .adv-sp-panel {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 12px;
      box-shadow: 0 24px 48px rgba(25, 28, 54, 0.08);
      overflow: hidden;
      width: 100%;
    }
    .adv-sp-panel-header {
      padding: 14px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.2);
    }
    .adv-sp-panel-title {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.7);
    }

    /* Shared LIVE pill (matches partners section pulse) */
    .adv-sp-pill-live {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      background: rgba(88, 88, 161, 0.12);
      border: 0.75px solid rgba(88, 88, 161, 0.45);
      color: #5858a1;
    }
    .adv-sp-pill-live::before {
      content: "";
      width: 4px; height: 4px;
      border-radius: 50%;
      background: #5858a1;
      animation: advSpsLivePulse 2s ease-in-out infinite;
    }
    @keyframes advSpsLivePulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.2); }
    }

    /* Shared neutral pill */
    .adv-sp-pill-neutral {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(88, 88, 161, 0.15);
      border: 0.75px solid rgba(88, 88, 161, 0.45);
      color: rgba(25, 28, 54, 0.8);
      line-height: 1;
    }

    /* Shared chip (REVIEW, EDIT MILESTONES etc) */
    .adv-sp-chip {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 999px;
      border: 0.75px solid rgba(88, 88, 161, 0.5);
      background: transparent;
      color: rgba(25, 28, 54, 0.75);
      cursor: default;
      transition: border-color 200ms ease-out, color 200ms ease-out;
    }
    .adv-sp-chip-lg {
      padding: 6px 14px;
      font-size: 9px;
    }

    /* SP1: Signal feed rows */
    .adv-sp1-panel { min-height: 540px; }
    .adv-sp1-row {
      padding: 12px 20px;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.12);
      display: grid;
      grid-template-columns: 8px 1fr auto;
      gap: 12px;
      align-items: center;
    }
    .adv-sp1-row:last-of-type { border-bottom: none; }
    .adv-sp1-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #f16b52;
    }
    .adv-sp1-row-name {
      display: block;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #191c36;
      margin-bottom: 3px;
    }
    .adv-sp1-row-signal {
      display: block;
      font-family: var(--sans);
      font-weight: 400;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.65);
    }
    .adv-sp1-footer {
      padding: 12px 20px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.15);
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.12em;
      color: rgba(25, 28, 54, 0.4);
    }

    /* SP2: Interactive roadmap canvas */
    .adv-sp2-panel { min-height: 560px; }
    .adv-sp2-clientid {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.55);
    }
    .adv-sp2-calibration {
      padding: 10px 20px;
      background: rgba(88, 88, 161, 0.08);
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      transition: opacity 250ms ease-out;
    }
    .adv-sp2-tag {
      padding: 3px 9px;
      border-radius: 999px;
      background: rgba(88, 88, 161, 0.15);
      border: 0.5px solid rgba(88, 88, 161, 0.3);
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.8);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1;
      transition: opacity 200ms ease-out;
    }
    .adv-sp2-tag::before {
      content: "";
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(88, 88, 161, 0.8);
    }
    .adv-sp2-tag[data-hidden="true"] {
      display: none;
    }

    /* Action cue above the toggle pills */
    .adv-sp2-cue {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      padding: 18px 20px 0;
    }
    .adv-sp2-cue-text {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(241, 107, 82, 0.75);
      position: relative;
      display: inline-block;
      transition: color 600ms ease-out;
    }
    .adv-sp2-cue-text::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 1px;
      background: rgba(241, 107, 82, 0.85);
      transition: width 0ms;
    }
    .adv-sp2-cue.is-pulsing .adv-sp2-cue-text {
      color: #191c36;
    }
    .adv-sp2-cue.is-pulsing .adv-sp2-cue-text::after {
      width: 100%;
      transition: width 1000ms ease-out;
    }
    .adv-sp2-cue.is-pulse-fading .adv-sp2-cue-text {
      color: rgba(241, 107, 82, 0.75);
      transition: color 1000ms ease-out;
    }
    .adv-sp2-cue.is-pulse-fading .adv-sp2-cue-text::after {
      width: 0;
      transition: width 1000ms ease-out;
    }
    .adv-sp2-cue-arrow {
      width: 10px;
      height: 10px;
      flex-shrink: 0;
      color: rgba(241, 107, 82, 0.75);
      stroke: currentColor;
      fill: none;
    }

    /* Toggle pill row */
    .adv-sp2-toggle {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 20px 24px;
    }
    .adv-sp2-toggle-pill {
      appearance: none;
      -webkit-appearance: none;
      border: 1px solid rgba(88, 88, 161, 0.4);
      background: rgba(88, 88, 161, 0.12);
      color: rgba(25, 28, 54, 0.7);
      padding: 8px 18px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      transition: background 200ms ease-out, border-color 200ms ease-out,
                  color 200ms ease-out, transform 200ms ease-out;
      position: relative;
      font-family: var(--mono);
      line-height: 1;
    }
    .adv-sp2-toggle-pill:hover:not(.is-active) {
      background: rgba(88, 88, 161, 0.2);
      border-color: rgba(88, 88, 161, 0.6);
      color: rgba(25, 28, 54, 0.9);
      transform: translateY(-1px);
    }
    .adv-sp2-toggle-pill:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 2px;
    }
    .adv-sp2-toggle-pill.is-active {
      background: rgba(241, 107, 82, 0.15);
      border: 1.5px solid #f16b52;
      color: #191c36;
    }
    .adv-sp2-toggle-pill.is-active::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 14px;
      height: 2px;
      margin-left: -7px;
      background: #f16b52;
      border-radius: 1px;
    }
    .adv-sp2-toggle-letter {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: 14px;
      line-height: 1;
    }
    .adv-sp2-toggle-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      line-height: 1.1;
    }

    @keyframes adv-sp2-pulse-border {
      0%, 100% { border-color: rgba(88, 88, 161, 0.4); }
      50% { border-color: rgba(241, 107, 82, 0.6); }
    }
    .adv-sp2-toggle-pill.is-pulsing:not(.is-active) {
      animation: adv-sp2-pulse-border 1500ms ease-in-out 2;
    }

    /* Headline scenario summary */
    .adv-sp2-summary {
      padding: 0 24px 14px;
      text-align: center;
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.4;
      color: #5858a1;
      transition: opacity 250ms ease-out;
    }

    .adv-sp2-canvas {
      padding: 4px 20px 16px;
    }
    .adv-sp2-canvas svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }

    /* Footer chip: single, right-aligned */
    .adv-sp2-footer {
      padding: 14px 20px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.15);
      display: flex;
      justify-content: flex-end;
    }
    .adv-sp2-footer-chip {
      padding: 6px 14px;
      border-radius: 999px;
      border: 0.75px solid rgba(88, 88, 161, 0.5);
      background: transparent;
      color: rgba(25, 28, 54, 0.8);
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      cursor: default;
    }

    /* Visually hidden live region for scenario announcements */
    .adv-sp2-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* SP3: Countdown brief */
    .adv-sp3-panel { min-height: 540px; }
    .adv-sp3-header {
      padding: 16px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.2);
    }
    .adv-sp3-countdown {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .adv-sp3-clock {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .adv-sp3-time {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.08em;
      color: #5858a1;
    }
    .adv-sp3-until {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
      margin-left: 4px;
    }
    .adv-sp3-subject {
      padding: 16px 20px 8px;
      font-family: var(--serif);
      font-weight: 400;
      font-size: 22px;
      line-height: 1.2;
      color: #191c36;
      margin: 0;
    }
    .adv-sp3-sections {
      padding: 0 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .adv-sp3-subhead {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
      margin: 0 0 8px;
    }
    .adv-sp3-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .adv-sp3-list li {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 12.5px;
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.75);
      padding-left: 12px;
      position: relative;
    }
    .adv-sp3-list li::before {
      content: "";
      position: absolute;
      left: 0; top: 0.5em;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(88, 88, 161, 0.7);
    }
    .adv-sp3-recall {
      font-style: italic;
      color: rgba(241, 107, 82, 0.8);
    }
    .adv-sp3-footer {
      padding: 14px 20px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.15);
      display: flex;
      justify-content: flex-end;
    }
    .adv-sp3-pill-ready {
      padding: 6px 14px;
      border-radius: 999px;
      background: rgba(88, 88, 161, 0.12);
      border: 0.75px solid rgba(88, 88, 161, 0.45);
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #5858a1;
      line-height: 1;
    }

    /* Entrance animations */
    .adv-sps .adv-sps-eyebrow,
    .adv-sps .adv-sps-heading,
    .adv-sps .adv-sps-framing {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-sps.is-in-view .adv-sps-eyebrow { opacity: 1; transition-duration: 250ms; }
    .adv-sps.is-in-view .adv-sps-heading { opacity: 1; transition-delay: 100ms; }
    .adv-sps.is-in-view .adv-sps-framing { opacity: 1; transition-delay: 300ms; }

    .adv-sp .adv-sp-num,
    .adv-sp .adv-sp-title,
    .adv-sp .adv-sp-body,
    .adv-sp .adv-sp-decide,
    .adv-sp .adv-sp-panel {
      opacity: 0;
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .adv-sp .adv-sp-panel { transform: translateY(12px); }

    .adv-sp.is-in-view .adv-sp-num    { opacity: 1; transition-duration: 250ms; }
    .adv-sp.is-in-view .adv-sp-title  { opacity: 1; transition-delay: 100ms; }
    .adv-sp.is-in-view .adv-sp-body   { opacity: 1; transition-delay: 300ms; }
    .adv-sp.is-in-view .adv-sp-decide { opacity: 1; transition-delay: 600ms; }
    .adv-sp.is-in-view .adv-sp-panel  { opacity: 1; transform: translateY(0); transition-duration: 500ms; transition-delay: 200ms; }

    /* SP1 row stagger (rows fade in after panel lands at 700ms) */
    .adv-sp1-row {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(1) { opacity: 1; transition-delay: 700ms; }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(2) { opacity: 1; transition-delay: 780ms; }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(3) { opacity: 1; transition-delay: 860ms; }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(4) { opacity: 1; transition-delay: 940ms; }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(5) { opacity: 1; transition-delay: 1020ms; }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(6) { opacity: 1; transition-delay: 1100ms; }
    .adv-sp.is-in-view .adv-sp1-row:nth-of-type(7) { opacity: 1; transition-delay: 1180ms; }

    /* SP2 trajectory curves: cross-fade between scenarios */
    .adv-sp2-curve {
      fill: none;
      stroke: rgba(241, 107, 82, 0.32);
      stroke-width: 1.25;
      opacity: 0;
      transition: opacity 400ms ease-out;
    }
    .adv-sp2-curve.is-active { opacity: 1; }

    /* SP2 milestone groups: smooth attribute + opacity transitions */
    .adv-sp2-milestone {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-sp2-milestone[data-hidden="true"] { opacity: 0 !important; }
    .adv-sp2-milestone circle,
    .adv-sp2-milestone line,
    .adv-sp2-milestone text {
      transition: cx 600ms ease-out, cy 600ms ease-out,
                  x1 600ms ease-out, x2 600ms ease-out,
                  y1 600ms ease-out, y2 600ms ease-out,
                  x 600ms ease-out, y 600ms ease-out,
                  opacity 200ms ease-out;
    }

    /* Default reveal once article is in view */
    .adv-sp.is-in-view .adv-sp2-milestone:not([data-hidden="true"]) { opacity: 1; }

    /* Entrance-only stagger. JS adds .adv-sp2-entered after 1500ms to drop delays. */
    .adv-sp.is-in-view:not(.adv-sp2-entered) .adv-sp2-milestone:nth-of-type(1) { transition-delay: 700ms; }
    .adv-sp.is-in-view:not(.adv-sp2-entered) .adv-sp2-milestone:nth-of-type(2) { transition-delay: 850ms; }
    .adv-sp.is-in-view:not(.adv-sp2-entered) .adv-sp2-milestone:nth-of-type(3) { transition-delay: 1000ms; }
    .adv-sp.is-in-view:not(.adv-sp2-entered) .adv-sp2-milestone:nth-of-type(4) { transition-delay: 1150ms; }

    /* SP3 section stagger */
    .adv-sp3-sections > div {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-sp.is-in-view .adv-sp3-sections > div:nth-child(1) { opacity: 1; transition-delay: 700ms; }
    .adv-sp.is-in-view .adv-sp3-sections > div:nth-child(2) { opacity: 1; transition-delay: 850ms; }
    .adv-sp.is-in-view .adv-sp3-sections > div:nth-child(3) { opacity: 1; transition-delay: 1000ms; }
    .adv-sp.is-in-view .adv-sp3-sections > div:nth-child(4) { opacity: 1; transition-delay: 1150ms; }

    /* Tablet */
    @media (max-width: 1023px) {
      .adv-sps-container { padding: 0 32px; }
      .adv-sp { gap: 40px; }
    }

    /* Mobile: stack columns. Drop alternation. */
    @media (max-width: 767px) {
      .adv-sps { padding: 72px 0; }
      .adv-sps-container { padding: 0 24px; }
      .adv-sps-head { margin-bottom: 48px; }
      .adv-sp {
        display: flex;
        flex-direction: column;
        gap: 32px;
      }
      .adv-sp.is-reverse .adv-sp-text,
      .adv-sp.is-reverse .adv-sp-visual { order: initial; }
      .adv-sp:not(:last-of-type) {
        padding-bottom: 32px;
        margin-bottom: 32px;
      }
      .adv-sp1-panel,
      .adv-sp2-panel,
      .adv-sp3-panel { min-height: 0; }
      /* Keep SVG label text legible at narrow widths.
         viewBox scales the canvas down, so labels also shrink unless we
         pin font-size in CSS pixels here. */
      .adv-sp2-canvas svg text { font-size: 9px; }
      .adv-sp2-toggle { padding: 12px 12px 24px; flex-wrap: wrap; }
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .adv-sps .adv-sps-eyebrow,
      .adv-sps .adv-sps-heading,
      .adv-sps .adv-sps-framing,
      .adv-sp .adv-sp-num,
      .adv-sp .adv-sp-title,
      .adv-sp .adv-sp-body,
      .adv-sp .adv-sp-decide,
      .adv-sp .adv-sp-panel,
      .adv-sp1-row,
      .adv-sp2-milestone,
      .adv-sp3-sections > div {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .adv-sp2-milestone[data-hidden="true"] { opacity: 0 !important; }
      .adv-sp2-curve { transition: none !important; }
      .adv-sp2-toggle-pill.is-pulsing:not(.is-active) { animation: none !important; }
      .adv-sp2-cue.is-pulsing .adv-sp2-cue-text::after,
      .adv-sp2-cue.is-pulse-fading .adv-sp2-cue-text::after { transition: none !important; }
      .adv-sp-pill-live::before { animation: none !important; }
    }

    /* ============================================================
       ADVISOR-WORKFLOW: A Monday with f1gures.
       Vertical timeline, five beats. Read top to bottom.
       ============================================================ */
    .adv-wf {
      background: var(--deep);
      padding: 96px 0;
    }
    .adv-wf-container {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 32px;
    }
    .adv-wf-head {
      text-align: center;
      margin-bottom: 80px;
    }
    .adv-wf-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-wf-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 16px;
    }
    .adv-wf-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .adv-wf-framing {
      font-family: var(--sans);
      font-weight: 400;
      font-style: italic;
      font-size: clamp(16px, 1.3vw, 17px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.75);
      max-width: 540px;
      margin: 0 auto;
    }

    .adv-wf-timeline {
      position: relative;
      padding-bottom: 40px;
    }
    .adv-wf-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100px;
      width: 1px;
      background: linear-gradient(
        to bottom,
        rgba(88, 88, 161, 0.35) 0,
        rgba(88, 88, 161, 0.35) calc(100% - 60px),
        rgba(88, 88, 161, 0) 100%
      );
      transform-origin: top;
    }
    .adv-wf-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .adv-wf-node {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 20px;
      padding: 16px 0 32px;
    }
    .adv-wf-node::before {
      content: "";
      position: absolute;
      left: 96px;
      top: 22px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--purple);
    }
    .adv-wf-time {
      flex-shrink: 0;
      width: 90px;
      padding-right: 12px;
      text-align: right;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--purple);
      line-height: 1.4;
    }
    .adv-wf-body {
      flex: 1;
      padding-left: 24px;
      display: flex;
      align-items: flex-start;
      gap: 24px;
    }
    .adv-wf-prose {
      flex: 1;
      max-width: 480px;
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.25vw, 16px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
      margin: 0;
    }
    .adv-wf-prose .highlight-benefit {
      color: var(--purple);
    }
    .adv-wf-glyph {
      flex-shrink: 0;
      width: 80px;
      height: 80px;
      display: block;
      overflow: visible;
    }

    /* Tablet: hide glyph, give prose full width */
    @media (max-width: 1099px) {
      .adv-wf-glyph { display: none; }
      .adv-wf-prose { max-width: none; }
    }

    /* Mobile: stack time stamp above prose, line at left edge */
    @media (max-width: 767px) {
      .adv-wf { padding: 72px 0; }
      .adv-wf-container { padding: 0 24px; }
      .adv-wf-head { margin-bottom: 56px; }
      .adv-wf-line { left: 24px; }
      .adv-wf-node {
        flex-direction: column;
        gap: 8px;
        padding: 16px 0 32px 56px;
      }
      .adv-wf-node::before {
        left: 20px;
        top: 22px;
      }
      .adv-wf-time {
        width: auto;
        text-align: left;
        padding-right: 0;
      }
      .adv-wf-body {
        padding-left: 0;
        gap: 0;
      }
    }

    /* Entrance animations */
    .adv-wf-eyebrow,
    .adv-wf-heading,
    .adv-wf-framing {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .adv-wf-line {
      transform: scaleY(0);
      transition: transform 1500ms ease-out;
    }
    .adv-wf-node {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 250ms ease-out, transform 250ms ease-out;
    }

    .adv-wf.is-in-view .adv-wf-eyebrow { opacity: 1; }
    .adv-wf.is-in-view .adv-wf-heading { opacity: 1; transition-delay: 100ms; }
    .adv-wf.is-in-view .adv-wf-framing { opacity: 1; transition-delay: 200ms; }
    .adv-wf.is-in-view .adv-wf-line   { transform: scaleY(1); transition-delay: 200ms; }
    .adv-wf.is-in-view .adv-wf-node:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
    .adv-wf.is-in-view .adv-wf-node:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
    .adv-wf.is-in-view .adv-wf-node:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 1000ms; }
    .adv-wf.is-in-view .adv-wf-node:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1300ms; }
    .adv-wf.is-in-view .adv-wf-node:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 1600ms; }

    @media (prefers-reduced-motion: reduce) {
      .adv-wf-eyebrow,
      .adv-wf-heading,
      .adv-wf-framing,
      .adv-wf-node {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .adv-wf-line {
        transform: scaleY(1) !important;
        transition: none !important;
      }
    }

    /* ============================================================
       ADVISOR-INTELLIGENCE: Data intelligence, not just data entry.
       Three pillar tiles. Pillar 1 cycles four comparison cohorts.
       Pillar 3 ticks a soft 60-second freshness timer.
       ============================================================ */
    .adv-int {
      background: var(--deep);
      padding: 104px 0;
    }
    .adv-int-container {
      max-width: 880px;
      margin: 0 auto;
      padding: 0 32px;
    }
    .adv-int-head {
      text-align: center;
      margin-bottom: 56px;
    }
    .adv-int-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-int-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 3.6vw, 44px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 16px;
    }
    .adv-int-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .adv-int-framing {
      font-family: var(--sans);
      font-weight: 400;
      font-style: italic;
      font-size: clamp(16px, 1.3vw, 17px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.75);
      max-width: 520px;
      margin: 0 auto;
    }
    .adv-int-opener {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(17px, 1.4vw, 18px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.82);
      max-width: 640px;
      margin: 0 auto 80px;
      text-align: center;
    }
    .adv-int-tiles {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    /* Tile chassis */
    .adv-int-tile {
      background: var(--navy);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 12px;
      box-shadow: 0 16px 32px rgba(25, 28, 54, 0.06);
      overflow: hidden;
      display: grid;
      grid-template-columns: 40% 60%;
      min-height: 320px;
      position: relative;
    }
    .adv-int-tile-copy {
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .adv-int-title {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 22px;
      line-height: 1.25;
      color: #191c36;
      margin: 0 0 12px;
    }
    .adv-int-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 14.5px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.75);
      max-width: 320px;
      margin: 0;
    }
    .adv-int-body .highlight-benefit { color: var(--purple); }

    .adv-int-tile-visual {
      padding: 24px 28px;
      background: rgba(88, 88, 161, 0.05);
      border-left: 0.5px solid rgba(88, 88, 161, 0.15);
      display: flex;
      flex-direction: column;
    }

    /* Pillar 1: Comparison chart */
    .adv-int-comp-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
    .adv-int-comp-static {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
    }
    .adv-int-comp-active {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--purple);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 200ms ease-out;
    }
    .adv-int-comp-chevron {
      width: 8px;
      height: 8px;
      flex-shrink: 0;
      color: var(--purple);
    }
    .adv-int-chart {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .adv-int-bar {
      transition: y 600ms ease-out, height 600ms ease-out;
    }
    .adv-int-callout {
      margin-top: 16px;
      padding: 12px 14px;
      background: rgba(241, 107, 82, 0.08);
      border-left: 2px solid var(--coral);
      border-radius: 0 4px 4px 0;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.88);
      transition: opacity 200ms ease-out;
      line-height: 1.4;
    }

    /* Pillar 2: Trending signals feed */
    .adv-int-feed-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    .adv-int-feed-title {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
    }
    .adv-int-feed-rows {
      display: flex;
      flex-direction: column;
    }
    .adv-int-feed-row {
      display: grid;
      grid-template-columns: 1fr 90px 110px;
      gap: 12px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.12);
    }
    .adv-int-feed-row:last-child { border-bottom: none; }
    .adv-int-feed-signal {
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.8);
    }
    .adv-int-feed-trend {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.06em;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 5px;
      white-space: nowrap;
      text-align: right;
    }
    .adv-int-feed-trend.is-up { color: var(--purple); }
    .adv-int-feed-trend.is-down { color: rgba(25, 28, 54, 0.55); }
    .adv-int-feed-arrow {
      width: 8px;
      height: 8px;
      stroke: currentColor;
      fill: none;
      flex-shrink: 0;
    }
    .adv-int-feed-cohort {
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.45);
      white-space: nowrap;
      text-align: right;
    }
    .adv-int-feed-footer {
      margin-top: 12px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      color: rgba(25, 28, 54, 0.4);
    }

    /* Pillar 3: Practice pulse panel */
    .adv-int-pulse-counters {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      align-items: flex-start;
      gap: 16px;
      margin-bottom: 24px;
    }
    @media (max-width: 1100px) {
      .adv-int-pulse-counters { grid-template-columns: repeat(2, 1fr); }
    }
    .adv-int-pulse-counter {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .adv-int-pulse-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 8.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
      white-space: nowrap;
    }
    .adv-int-pulse-value {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 18px;
      color: #191c36;
      padding: 2px 6px;
      margin: -2px -6px;
      border-radius: 4px;
      transition: background 250ms ease-out;
      align-self: flex-start;
    }
    .adv-int-pulse-value.is-flashing {
      background: rgba(88, 88, 161, 0.15);
    }

    .adv-int-pulse-strip {
      display: flex;
      align-items: center;
      gap: 2px;
      flex-wrap: wrap;
    }
    .adv-int-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(88, 88, 161, 0.7);
      flex-shrink: 0;
    }
    .adv-int-dot.is-muted {
      background: rgba(88, 88, 161, 0.4);
    }
    .adv-int-pulse-summary {
      margin: 16px 0 0;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
    .adv-int-pulse-summary-gold { color: var(--purple); }
    .adv-int-pulse-summary-muted { color: rgba(25, 28, 54, 0.65); }

    /* Tablet/mobile: stack copy + visual */
    @media (max-width: 899px) {
      .adv-int { padding: 80px 0; }
      .adv-int-tile {
        grid-template-columns: 1fr;
        min-height: 0;
      }
      .adv-int-tile-visual {
        border-left: none;
        border-top: 0.5px solid rgba(88, 88, 161, 0.15);
      }
      .adv-int-tiles { gap: 24px; }
      .adv-int-body { max-width: 100%; }
    }
    @media (max-width: 767px) {
      .adv-int { padding: 72px 0; }
      .adv-int-container { padding: 0 20px; }
      .adv-int-tile-copy { padding: 24px; }
      .adv-int-tile-visual { padding: 20px 22px; }
    }

    /* Entrance: head block stagger */
    .adv-int-eyebrow,
    .adv-int-heading,
    .adv-int-framing,
    .adv-int-opener {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-int.is-in-view .adv-int-eyebrow { opacity: 1; transition-duration: 250ms; }
    .adv-int.is-in-view .adv-int-heading { opacity: 1; transition-delay: 100ms; }
    .adv-int.is-in-view .adv-int-framing { opacity: 1; transition-delay: 300ms; }
    .adv-int.is-in-view .adv-int-opener  { opacity: 1; transition-delay: 600ms; }

    /* Tile chassis entrance */
    .adv-int-tile {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 250ms ease-out, transform 250ms ease-out;
    }
    .adv-int-tile.is-in-view {
      opacity: 1;
      transform: translateY(0);
    }
    .adv-int-tile-copy,
    .adv-int-tile-visual {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-int-tile.is-in-view .adv-int-tile-copy,
    .adv-int-tile.is-in-view .adv-int-tile-visual {
      opacity: 1;
      transition-delay: 200ms;
    }

    /* Pillar 2 signal rows fade-in stagger */
    .adv-int-feed-row {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .adv-int-tile.is-in-view .adv-int-feed-row:nth-child(1) { opacity: 1; transition-delay: 500ms; }
    .adv-int-tile.is-in-view .adv-int-feed-row:nth-child(2) { opacity: 1; transition-delay: 600ms; }
    .adv-int-tile.is-in-view .adv-int-feed-row:nth-child(3) { opacity: 1; transition-delay: 700ms; }
    .adv-int-tile.is-in-view .adv-int-feed-row:nth-child(4) { opacity: 1; transition-delay: 800ms; }

    /* Pillar 3 status dots fade-in (inline transition-delay per dot) */
    .adv-int-dot {
      opacity: 0;
      transition: opacity 200ms ease-out;
    }
    .adv-int-tile.is-in-view .adv-int-dot {
      opacity: 1;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .adv-int-eyebrow,
      .adv-int-heading,
      .adv-int-framing,
      .adv-int-opener,
      .adv-int-tile,
      .adv-int-tile-copy,
      .adv-int-tile-visual,
      .adv-int-feed-row,
      .adv-int-dot {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .adv-int-bar { transition: none !important; }
      .adv-int-pulse-value { transition: none !important; }
    }

    /* Visually hidden live region */
    .adv-int-sr {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* ============================================================
       ADVISOR-ROI: The math.
       Single-column centred layout. Live commission calculator.
       Stacked time arithmetic with gold final line.
       ============================================================ */
    .adv-roi {
      background: var(--deep);
      padding: 120px 0;
    }
    .adv-roi-container {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 32px;
      text-align: center;
    }
    .adv-roi-head { margin-bottom: 80px; }
    .adv-roi-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-roi-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 5vw, 60px);
      line-height: 1.05;
      letter-spacing: -0.015em;
      color: #191c36;
      margin: 0 0 24px;
    }
    .adv-roi-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .adv-roi-framing {
      font-family: var(--sans);
      font-weight: 400;
      font-style: italic;
      font-size: clamp(17px, 1.4vw, 18px);
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.78);
      max-width: 580px;
      margin: 0 auto;
    }

    .adv-roi-claim {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(17px, 1.4vw, 18px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.82);
      max-width: 620px;
      margin: 0 auto 80px;
      text-align: left;
    }
    .adv-roi-claim .highlight-benefit { color: var(--purple); }

    .adv-roi-cue {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-bottom: 32px;
    }
    .adv-roi-cue-text {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--purple);
    }
    .adv-roi-cue-arrow {
      width: 8px; height: 8px;
      color: var(--purple);
      stroke: currentColor;
      fill: none;
    }

    /* Calculator block */
    .adv-roi-calc {
      background: var(--navy);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 12px;
      padding: 48px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
      box-shadow: 0 24px 48px rgba(25, 28, 54, 0.07);
      margin: 0;
    }
    .adv-roi-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      max-width: 100%;
      text-align: center;
    }
    .adv-roi-hero {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 80px;
      line-height: 1;
      color: #191c36;
    }
    .adv-roi-step-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
      text-align: center;
    }
    .adv-roi-op {
      font-family: var(--serif);
      font-weight: 400;
      font-style: italic;
      font-size: 24px;
      color: rgba(25, 28, 54, 0.4);
      line-height: 1;
      padding: 8px 0;
    }
    .adv-roi-op-eq {
      font-size: 32px;
      padding: 12px 0;
    }

    .adv-roi-step-input .adv-roi-step-label { font-size: 10px; }
    .adv-roi-input-row {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 8px;
    }
    .adv-roi-input-prefix {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 48px;
      color: var(--purple);
      line-height: 1;
    }
    .adv-roi-input {
      width: 180px;
      max-width: 100%;
      padding: 0 8px;
      background: transparent;
      border: none;
      border-bottom: 2px solid rgba(88, 88, 161, 0.4);
      color: var(--purple);
      font-family: var(--serif);
      font-weight: 400;
      font-size: 48px;
      line-height: 1;
      text-align: center;
      outline: none;
      appearance: textfield;
      -moz-appearance: textfield;
      transition: border-color 200ms ease-out;
    }
    .adv-roi-input:focus { border-bottom-color: var(--purple); }
    .adv-roi-input::-webkit-outer-spin-button,
    .adv-roi-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    .adv-roi-input-cue {
      margin-top: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.7);
    }
    .adv-roi-input-cue svg {
      width: 10px; height: 10px;
      stroke: var(--purple);
      fill: none;
    }

    .adv-roi-total-row {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .adv-roi-total {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 64px;
      line-height: 1;
      letter-spacing: -0.015em;
      color: var(--purple);
      transition: color 150ms ease-out;
    }
    .adv-roi-total.is-flashing { color: #fff3c4; }
    .adv-roi-per {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.7);
    }
    .adv-roi-total-caption {
      margin: 16px 0 0;
      font-family: var(--sans);
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.7);
      text-align: center;
    }

    /* Time-saved section */
    .adv-roi-time {
      margin: 96px auto 0;
      max-width: 640px;
    }
    .adv-roi-time-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      text-align: center;
      margin: 0 0 32px;
    }
    .adv-roi-time-intro {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
      max-width: 580px;
      margin: 0 auto 48px;
      text-align: left;
    }
    .adv-roi-time-stack { text-align: center; }
    .adv-roi-time-line {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 24px;
      line-height: 1.3;
      color: #191c36;
      margin: 0;
    }
    .adv-roi-time-line-final {
      font-size: 32px;
      color: var(--purple);
    }
    .adv-roi-time-divider {
      width: 32px;
      height: 1px;
      background: rgba(88, 88, 161, 0.25);
      border: none;
      margin: 24px auto;
    }
    .adv-roi-time-close {
      margin: 32px auto 0;
      font-family: var(--sans);
      font-weight: 400;
      font-style: italic;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.7);
      max-width: 540px;
      text-align: center;
    }

    /* Visually hidden helper */
    .adv-roi-sr {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0,0,0,0);
      white-space: nowrap;
      border: 0;
    }

    /* Mobile */
    @media (max-width: 767px) {
      .adv-roi { padding: 80px 0; }
      .adv-roi-container { padding: 0 20px; }
      .adv-roi-head { margin-bottom: 56px; }
      .adv-roi-claim { margin-bottom: 56px; }
      .adv-roi-calc { padding: 32px 20px; gap: 22px; }
      .adv-roi-hero { font-size: 56px; }
      .adv-roi-input-prefix { font-size: 36px; }
      .adv-roi-input { font-size: 36px; width: 140px; }
      .adv-roi-total { font-size: 44px; }
      .adv-roi-per { font-size: 12px; }
      .adv-roi-time { margin-top: 64px; }
      .adv-roi-time-line { font-size: 20px; }
      .adv-roi-time-line-final { font-size: 24px; }

      .adv-roi-connect { font-size: 12px; margin: 48px 0 32px; }
      .adv-roi-calc-sm { padding: 28px 18px; gap: 18px; }
      .adv-roi-calc-sm .adv-roi-hero { font-size: 44px; }
      .adv-roi-calc-sm .adv-roi-input-prefix { font-size: 28px; }
      .adv-roi-calc-sm .adv-roi-input { font-size: 28px; width: 110px; }
      .adv-roi-calc-sm .adv-roi-total { font-size: 36px; }
      .adv-roi-uplift-pct { font-size: 32px; }
      .adv-roi-combined { margin-top: 44px; }
      .adv-roi-combined-total { font-size: 44px; }
    }

    /* Entrance */
    .adv-roi-eyebrow,
    .adv-roi-framing,
    .adv-roi-claim,
    .adv-roi-cue,
    .adv-roi-time-eyebrow,
    .adv-roi-time-intro,
    .adv-roi-time-line,
    .adv-roi-time-divider,
    .adv-roi-time-close {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-roi-heading {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 350ms ease-out, transform 350ms ease-out;
    }
    .adv-roi-calc {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }
    .adv-roi-step,
    .adv-roi-op {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }

    .adv-roi.is-in-view .adv-roi-eyebrow { opacity: 1; transition-duration: 250ms; }
    .adv-roi.is-in-view .adv-roi-heading { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
    .adv-roi.is-in-view .adv-roi-framing { opacity: 1; transition-delay: 300ms; }
    .adv-roi.is-in-view .adv-roi-claim   { opacity: 1; transition-delay: 500ms; transition-duration: 350ms; }
    .adv-roi.is-in-view .adv-roi-cue     { opacity: 1; transition-delay: 800ms; }
    .adv-roi.is-in-view .adv-roi-calc    { opacity: 1; transform: translateY(0); transition-delay: 1000ms; }

    .adv-roi.is-in-view .adv-roi-step-leads  { opacity: 1; transition-delay: 1100ms; }
    .adv-roi.is-in-view .adv-roi-op-mul1     { opacity: 1; transition-delay: 1300ms; }
    .adv-roi.is-in-view .adv-roi-step-input  { opacity: 1; transition-delay: 1300ms; }
    .adv-roi.is-in-view .adv-roi-op-mul2     { opacity: 1; transition-delay: 1500ms; }
    .adv-roi.is-in-view .adv-roi-step-months { opacity: 1; transition-delay: 1500ms; }
    .adv-roi.is-in-view .adv-roi-op-eq       { opacity: 1; transition-delay: 1700ms; }
    .adv-roi.is-in-view .adv-roi-step-total  { opacity: 1; transition-delay: 1700ms; transition-duration: 350ms; }

    /* Connective beat between calculators */
    .adv-roi-connect {
      margin: 64px 0 40px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--purple);
      text-align: center;
    }

    /* Second calculator: smaller scale of the first */
    .adv-roi-calc-sm {
      padding: 36px 32px;
      gap: 22px;
      box-shadow: 0 16px 32px rgba(25, 28, 54, 0.06);
    }
    .adv-roi-calc-sm .adv-roi-hero { font-size: 56px; }
    .adv-roi-calc-sm .adv-roi-op { font-size: 18px; padding: 6px 0; }
    .adv-roi-calc-sm .adv-roi-op-eq { font-size: 24px; padding: 10px 0; }
    .adv-roi-calc-sm .adv-roi-input-prefix { font-size: 36px; }
    .adv-roi-calc-sm .adv-roi-input { font-size: 36px; width: 140px; }
    .adv-roi-calc-sm .adv-roi-input-row { gap: 6px; }
    .adv-roi-calc-sm .adv-roi-step { gap: 10px; }
    .adv-roi-calc-sm .adv-roi-step-input2 .adv-roi-step-label { font-size: 9.5px; }
    .adv-roi-calc-sm .adv-roi-input-cue { font-size: 9px; margin-top: 10px; }
    .adv-roi-calc-sm .adv-roi-input-cue svg { width: 8px; height: 8px; }
    .adv-roi-calc-sm .adv-roi-total { font-size: 48px; }
    .adv-roi-calc-sm .adv-roi-per { font-size: 12px; }
    .adv-roi-calc-sm .adv-roi-total-caption { font-size: 13px; margin-top: 14px; }

    /* Uplift step (+75% with footnote) */
    .adv-roi-step-uplift { gap: 8px; }
    .adv-roi-uplift-pct {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 40px;
      line-height: 1;
      color: var(--purple);
    }
    .adv-roi-uplift-label {
      color: rgba(88, 88, 161, 0.75);
      font-size: 10px;
    }
    .adv-roi-uplift-note {
      margin: 10px 0 0;
      font-family: var(--sans);
      font-style: italic;
      font-weight: 400;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(25, 28, 54, 0.45);
      max-width: 320px;
      text-align: center;
    }

    /* Combined total line. Markup removed in v3; rules unused. */
    .adv-roi-combined {
      margin-top: 56px;
      text-align: center;
    }
    .adv-roi-combined-divider {
      width: 80px;
      height: 1px;
      background: rgba(88, 88, 161, 0.25);
      border: none;
      margin: 0 auto 32px;
    }
    .adv-roi-combined-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.75);
      margin: 0 0 12px;
    }
    .adv-roi-combined-total {
      display: inline-block;
      font-family: var(--serif);
      font-weight: 400;
      font-size: 64px;
      line-height: 1;
      letter-spacing: -0.015em;
      color: var(--purple);
      transition: color 150ms ease-out;
    }
    .adv-roi-combined-total.is-flashing { color: #fff3c4; }

    /* Entrance defaults for new elements */
    .adv-roi-connect,
    .adv-roi-combined-divider,
    .adv-roi-combined-label,
    .adv-roi-combined-total {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-roi-calc-sm {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    /* Second calculator step staggers (relative to its block) */
    .adv-roi.is-in-view .adv-roi-connect       { opacity: 1; transition-delay: 2500ms; transition-duration: 250ms; }
    .adv-roi.is-in-view .adv-roi-calc-sm       { opacity: 1; transform: translateY(0); transition-delay: 2700ms; }
    .adv-roi.is-in-view .adv-roi-step-existing { opacity: 1; transition-delay: 2900ms; }
    .adv-roi.is-in-view .adv-roi-op-mul1b      { opacity: 1; transition-delay: 3050ms; }
    .adv-roi.is-in-view .adv-roi-step-input2   { opacity: 1; transition-delay: 3050ms; }
    .adv-roi.is-in-view .adv-roi-op-mul2b      { opacity: 1; transition-delay: 3200ms; }
    .adv-roi.is-in-view .adv-roi-step-uplift   { opacity: 1; transition-delay: 3200ms; }
    .adv-roi.is-in-view .adv-roi-op-mul3b      { opacity: 1; transition-delay: 3350ms; }
    .adv-roi.is-in-view .adv-roi-step-months2  { opacity: 1; transition-delay: 3350ms; }
    .adv-roi.is-in-view .adv-roi-op-eqb        { opacity: 1; transition-delay: 3500ms; }
    .adv-roi.is-in-view .adv-roi-step-total2   { opacity: 1; transition-delay: 3500ms; }
    .adv-roi.is-in-view .adv-roi-combined-divider { opacity: 1; transition-delay: 3800ms; }
    .adv-roi.is-in-view .adv-roi-combined-label   { opacity: 1; transition-delay: 3900ms; }
    .adv-roi.is-in-view .adv-roi-combined-total   { opacity: 1; transition-delay: 4000ms; }

    /* Time-saved sequence pushed back to follow the combined count-up */
    .adv-roi.is-in-view .adv-roi-time-eyebrow { opacity: 1; transition-delay: 4900ms; transition-duration: 250ms; }
    .adv-roi.is-in-view .adv-roi-time-intro   { opacity: 1; transition-delay: 5100ms; }
    .adv-roi.is-in-view .adv-roi-time-line-1     { opacity: 1; transition-delay: 5300ms; }
    .adv-roi.is-in-view .adv-roi-time-divider-1  { opacity: 1; transition-delay: 5550ms; }
    .adv-roi.is-in-view .adv-roi-time-line-2     { opacity: 1; transition-delay: 5550ms; }
    .adv-roi.is-in-view .adv-roi-time-divider-2  { opacity: 1; transition-delay: 5800ms; }
    .adv-roi.is-in-view .adv-roi-time-line-final { opacity: 1; transition-delay: 5800ms; }
    .adv-roi.is-in-view .adv-roi-time-close      { opacity: 1; transition-delay: 6100ms; }

    @media (prefers-reduced-motion: reduce) {
      .adv-roi-eyebrow,
      .adv-roi-heading,
      .adv-roi-framing,
      .adv-roi-claim,
      .adv-roi-cue,
      .adv-roi-calc,
      .adv-roi-step,
      .adv-roi-op,
      .adv-roi-connect,
      .adv-roi-calc-sm,
      .adv-roi-combined-divider,
      .adv-roi-combined-label,
      .adv-roi-combined-total,
      .adv-roi-time-eyebrow,
      .adv-roi-time-intro,
      .adv-roi-time-line,
      .adv-roi-time-divider,
      .adv-roi-time-close {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .adv-roi-total,
      .adv-roi-combined-total { transition: none !important; }
    }

    /* ============================================================
       ADVISOR-COMPLIANCE: Built for Singapore's regulatory reality.
       Three side-by-side pillar columns, equal heights on desktop.
       Restrained register, no interactive elements.
       ============================================================ */
    .adv-comp {
      background: var(--deep);
      padding: 96px 0;
    }
    .adv-comp-container {
      max-width: 960px;
      margin: 0 auto;
      padding: 0 32px;
    }
    .adv-comp-head {
      text-align: center;
      margin-bottom: 36px;
    }
    .adv-comp-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-comp-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.2vw, 40px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0;
    }
    .adv-comp-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .adv-comp-opener {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.35vw, 17px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
      max-width: 640px;
      margin: 0 auto 64px;
      text-align: center;
    }

    .adv-comp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: stretch;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .adv-comp-pillar {
      background: var(--navy);
      border: 0.5px solid rgba(88, 88, 161, 0.25);
      border-radius: 10px;
      padding: 28px 24px;
      display: flex;
      flex-direction: column;
    }
    .adv-comp-icon {
      width: 32px;
      height: 32px;
      display: block;
      margin-bottom: 20px;
      overflow: visible;
    }
    .adv-comp-title {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #191c36;
      margin: 0 0 16px;
    }
    .adv-comp-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(13.5px, 1.1vw, 14px);
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.76);
      margin: 0;
      flex-grow: 1;
    }

    /* Tablet: tighter gap */
    @media (max-width: 1023px) {
      .adv-comp-grid { gap: 16px; }
      .adv-comp-pillar { padding: 24px 20px; }
    }

    /* Mobile: stack, drop equal-heights */
    @media (max-width: 767px) {
      .adv-comp { padding: 72px 0; }
      .adv-comp-container { padding: 0 24px; }
      .adv-comp-opener { margin-bottom: 48px; }
      .adv-comp-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: start;
      }
    }

    /* Entrance */
    .adv-comp-eyebrow,
    .adv-comp-opener {
      opacity: 0;
      transition: opacity 250ms ease-out;
    }
    .adv-comp-heading {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }
    .adv-comp-pillar {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 300ms ease-out, transform 300ms ease-out;
    }

    .adv-comp.is-in-view .adv-comp-eyebrow { opacity: 1; transition-duration: 250ms; }
    .adv-comp.is-in-view .adv-comp-heading { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
    .adv-comp.is-in-view .adv-comp-opener  { opacity: 1; transition-delay: 300ms; transition-duration: 300ms; }
    .adv-comp.is-in-view .adv-comp-pillar:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
    .adv-comp.is-in-view .adv-comp-pillar:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 620ms; }
    .adv-comp.is-in-view .adv-comp-pillar:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 740ms; }

    @media (prefers-reduced-motion: reduce) {
      .adv-comp-eyebrow,
      .adv-comp-heading,
      .adv-comp-opener,
      .adv-comp-pillar {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* ============================================================
       ADVISOR-NEUTRALITY: We don't sell products. You do.
       Single centred column. Negative claims in body prose, positive
       claims in elevated serif with rhetorical spacing. Hairline gold
       rule above the final sentence marks the conclusion structurally.
       ============================================================ */
    .adv-neu {
      background: var(--deep);
      padding: 104px 0;
    }
    .adv-neu-container {
      max-width: 640px;
      margin: 0 auto;
      padding: 0 32px;
      text-align: center;
    }
    .adv-neu-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .adv-neu-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(32px, 3.4vw, 44px);
      line-height: 1.15;
      letter-spacing: -0.01em;
      color: #191c36;
      margin: 0 0 56px;
    }
    .adv-neu-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .adv-neu-negative {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(17px, 1.4vw, 18px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.78);
      max-width: 540px;
      margin: 0 auto 72px;
      text-align: left;
    }

    /* Manifesto column: left-aligned sentences inside a centred 540px column */
    .adv-neu-positive {
      max-width: 540px;
      margin: 0 auto;
      text-align: left;
    }
    .adv-neu-line {
      font-family: var(--serif);
      font-weight: 400;
      font-size: 24px;
      line-height: 1.2;
      letter-spacing: -0.005em;
      color: #191c36;
      text-align: left;
      margin: 0;
    }
    /* Tight pairing between line 1 and line 2 (the division of labour) */
    .adv-neu-line-2 { margin-top: 6px; }
    /* Rhetorical break before line 3 */
    .adv-neu-line-3 { margin-top: 48px; }
    /* Strengthened hairline rule. Stays centred within the left-aligned column
       via margin: auto so it frames the closing line without floating. */
    .adv-neu-rule {
      width: 120px;
      height: 1.5px;
      background: rgba(88, 88, 161, 0.6);
      border: none;
      margin: 48px auto 24px;
      transform-origin: center;
    }
    /* Closing line: bumped to 28px so it carries the section's conclusion weight.
       No gold, no bold. The rule above + the size bump are the only emphasis. */
    .adv-neu-line-4 {
      font-size: 28px;
      margin: 0;
    }

    /* Mobile */
    @media (max-width: 767px) {
      .adv-neu { padding: 80px 0 96px; }
      .adv-neu-container { padding: 0 24px; }
      .adv-neu-heading {
        font-size: clamp(28px, 8vw, 36px);
        margin-bottom: 40px;
      }
      .adv-neu-negative { margin-bottom: 56px; }
      .adv-neu-line { font-size: 20px; }
      .adv-neu-line-3 { margin-top: 36px; }
      .adv-neu-line-4 { font-size: 24px; }
      .adv-neu-rule {
        width: 100px;
        margin: 36px auto 20px;
      }
    }

    /* Entrance */
    .adv-neu-eyebrow,
    .adv-neu-negative {
      opacity: 0;
      transition: opacity 350ms ease-out;
    }
    .adv-neu-heading {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 350ms ease-out, transform 350ms ease-out;
    }
    .adv-neu-line {
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }
    .adv-neu-rule {
      opacity: 0;
      transform: scaleX(0);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    .adv-neu.is-in-view .adv-neu-eyebrow  { opacity: 1; transition-duration: 250ms; }
    .adv-neu.is-in-view .adv-neu-heading  { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
    .adv-neu.is-in-view .adv-neu-negative { opacity: 1; transition-delay: 350ms; }
    /* Sentence stagger relative to heading start (delay 100ms): line 1 at 700ms */
    .adv-neu.is-in-view .adv-neu-line-1 { opacity: 1; transform: translateY(0); transition-delay: 700ms; }
    .adv-neu.is-in-view .adv-neu-line-2 { opacity: 1; transform: translateY(0); transition-delay: 1050ms; }
    .adv-neu.is-in-view .adv-neu-line-3 { opacity: 1; transform: translateY(0); transition-delay: 1400ms; }
    .adv-neu.is-in-view .adv-neu-rule   { opacity: 1; transform: scaleX(1); transition-delay: 1800ms; }
    .adv-neu.is-in-view .adv-neu-line-4 { opacity: 1; transform: translateY(0); transition-delay: 2400ms; }

    @media (prefers-reduced-motion: reduce) {
      .adv-neu-eyebrow,
      .adv-neu-heading,
      .adv-neu-negative,
      .adv-neu-line,
      .adv-neu-rule {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* ============================================================
       ADVISOR-CTA-CLOSE: See what your Monday could look like.
       Single centred column. Heading at hero scale. Ambient dot
       grid backdrop. Coral primary CTA, ghost secondary, trust row.
       ============================================================ */
    .adv-cta {
      background: var(--deep);
      padding: 120px 0 140px;
      position: relative;
      overflow: hidden;
    }
    .adv-cta-backdrop {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 920px;
      height: 320px;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: opacity 800ms ease-out;
    }
    .adv-cta.is-in-view .adv-cta-backdrop { opacity: 1; }
    .adv-cta-container {
      position: relative;
      z-index: 1;
      max-width: 640px;
      margin: 0 auto;
      padding: 0 32px;
      text-align: center;
    }
    .adv-cta-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 24px;
    }
    .adv-cta-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(40px, 5vw, 56px);
      line-height: 1.1;
      letter-spacing: -0.015em;
      color: #191c36;
      max-width: 600px;
      margin: 0 auto 56px;
    }
    .adv-cta-heading em {
      color: var(--coral);
      font-style: italic;
    }
    .adv-cta-body {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1.35vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.78);
      max-width: 540px;
      margin: 0 auto;
      text-align: center;
    }
    .adv-cta-body-1 { margin-bottom: 20px; }
    .adv-cta-body-2 { margin-bottom: 56px; }

    .adv-cta-primary {
      display: inline-block;
      padding: 18px 40px;
      border-radius: 8px;
      background: var(--coral);
      border: none;
      color: #ffffff;
      font-family: var(--sans);
      font-weight: 600;
      font-size: clamp(17px, 1.4vw, 18px);
      letter-spacing: 0.01em;
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 14px 32px rgba(241, 107, 82, 0.28);
      transition: background 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
    }
    .adv-cta-primary:hover {
      background: #f27a63;
      transform: translateY(-1px);
      box-shadow: 0 16px 36px rgba(241, 107, 82, 0.32);
    }
    .adv-cta-primary:active {
      background: #e85a41;
      transform: translateY(0);
      box-shadow: 0 10px 24px rgba(241, 107, 82, 0.28);
    }
    .adv-cta-primary:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 2px;
    }

    .adv-cta-secondary-row {
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
    .adv-cta-secondary {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14.5px;
      letter-spacing: 0.02em;
      color: rgba(25, 28, 54, 0.8);
      text-decoration: none;
      transition: color 200ms ease-out;
    }
    .adv-cta-secondary:hover { color: #191c36; }
    .adv-cta-secondary:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 2px;
      border-radius: 4px;
    }
    .adv-cta-secondary-arrow {
      width: 14px;
      height: 14px;
      margin-left: 8px;
      stroke: currentColor;
      fill: none;
      transition: transform 200ms ease-out;
    }
    .adv-cta-secondary:hover .adv-cta-secondary-arrow {
      transform: translateX(3px);
    }

    .adv-cta-trust {
      margin: 64px 0 0;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      text-align: center;
    }

    /* Mobile */
    @media (max-width: 767px) {
      .adv-cta { padding: 88px 0 104px; }
      .adv-cta-container { padding: 0 24px; }
      .adv-cta-heading {
        font-size: clamp(32px, 8vw, 40px);
        margin-bottom: 40px;
      }
      .adv-cta-body-2 { margin-bottom: 40px; }
      .adv-cta-primary { padding: 16px 32px; }
      .adv-cta-secondary-row { margin-top: 32px; }
      .adv-cta-trust { margin-top: 48px; font-size: 9.5px; }
      .adv-cta-backdrop {
        top: 60px;
        width: 540px;
        height: 200px;
      }
    }

    /* Entrance */
    .adv-cta-eyebrow,
    .adv-cta-body-1,
    .adv-cta-body-2,
    .adv-cta-secondary-row,
    .adv-cta-trust {
      opacity: 0;
      transition: opacity 300ms ease-out;
    }
    .adv-cta-heading,
    .adv-cta-primary {
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 400ms ease-out, transform 400ms ease-out;
    }

    .adv-cta.is-in-view .adv-cta-eyebrow      { opacity: 1; transition-delay: 200ms; transition-duration: 250ms; }
    .adv-cta.is-in-view .adv-cta-heading      { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
    .adv-cta.is-in-view .adv-cta-body-1       { opacity: 1; transition-delay: 700ms; }
    .adv-cta.is-in-view .adv-cta-body-2       { opacity: 1; transition-delay: 900ms; }
    .adv-cta.is-in-view .adv-cta-primary      { opacity: 1; transform: translateY(0); transition-delay: 1500ms; }
    .adv-cta.is-in-view .adv-cta-secondary-row { opacity: 1; transition-delay: 1900ms; }
    .adv-cta.is-in-view .adv-cta-trust        { opacity: 1; transition-delay: 2150ms; transition-duration: 250ms; }

    @media (prefers-reduced-motion: reduce) {
      .adv-cta-backdrop,
      .adv-cta-eyebrow,
      .adv-cta-heading,
      .adv-cta-body-1,
      .adv-cta-body-2,
      .adv-cta-primary,
      .adv-cta-secondary-row,
      .adv-cta-trust {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      .adv-cta-backdrop { opacity: 1 !important; }
    }

    .site-footer .logo svg { width: 150px; height: 53px; }

    /* ==================================================================
       preview_v3 additions.

       Appended, never overwriting. Colours are restricted to the tokens
       already in :root plus the existing #2f9d6f used for live states.
       New headings reuse the established clamp() scales.
       ================================================================== */

    /* --- Sample-client flag. Every mock UI naming a client carries one. --- */
    .v3-sample-flag {
      display: block;
      margin-top: 10px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
    }
    .v3-sample-flag-inline {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      margin-top: 8px;
      display: block;
    }

    /* --- LIVE / COMING grading (brief 7).
       The existing .partners-pill-live and -coming share an identical purple
       background and border, so the two states are near indistinguishable.
       Give LIVE the green already used for live states elsewhere in this
       file, and keep COMING muted. Both stay restrained: neither is a
       celebration. --- */
    .partners-pill-live {
      background: rgba(47, 157, 111, 0.10);
      border-color: rgba(47, 157, 111, 0.40);
      color: #2f9d6f;
    }
    .partners-pill-live::before { background: #2f9d6f; }
    .partners-pill-coming {
      background: transparent;
      border-color: rgba(88, 88, 161, 0.35);
      color: rgba(25, 28, 54, 0.55);
    }

    /* --- Status grading, rebuilt.

       The previous badge was 8.5px, transparent, border at 35% and text at
       55%. On a 1400px page that reads as decoration: a visitor scans the
       headline, misses the badge and leaves believing the feature exists.

       #c2452c is a darkened coral, for badge and ribbon text only, because
       --coral #f16b52 fails contrast at this size. It is not used anywhere
       else and --coral is unchanged. --- */
    .v3-badge {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 5px 11px;
      border-radius: 999px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      vertical-align: middle;
    }
    .v3-badge-live {
      background: rgba(47, 157, 111, 0.12);
      border: 1px solid rgba(47, 157, 111, 0.55);
      color: #2f9d6f;
    }
    .v3-badge-coming {
      background: rgba(241, 107, 82, 0.10);
      border: 1px solid rgba(241, 107, 82, 0.55);
      color: #c2452c;
    }

    /* Level 2. A whole section that is not built gets a ribbon as well as the
       inline badge, so the status survives a screenshot of either. The text
       states the status AND its consequence. */
    .v3-ribbon {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 18px;
      margin: 0 0 28px;
      border-left: 3px solid var(--coral);
      background: rgba(241, 107, 82, 0.07);
      border-radius: 0 8px 8px 0;
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #c2452c;
    }

    /* Marks a chart or figure inside a COMING section as not a real result. */
    .v3-illustrative {
      display: inline-block;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #c2452c;
      background: rgba(241, 107, 82, 0.08);
      border-radius: 3px;
      padding: 3px 7px;
    }

    /* --- Planning circle: spouse is permanent, not a flash.

       Spouse and advisor are the confirmed cast, so both are labelled for as
       long as the +ADVISOR state is showing. Spouse used to be one of five
       rotating roles, which was fine when something was always highlighted.
       With the other four unnamed it became a single 1.8s flash in a 12.2s
       loop, visible only 20% of the time, and it disappeared entirely the
       moment anyone clicked a pill, because that latches manualPaused and
       stops the rotation for good.

       The node and the label are permanent. The connector keeps cycling,
       connecting and disconnecting, so the diagram shows the relationship
       being made rather than merely asserting it.

       The cycle is CSS rather than JS on purpose: the JS rotation latches
       manualPaused on the first pill click and never runs again, so a
       JS-driven line would stop connecting the moment anyone touched the
       control. Higher specificity than the base .pc-label-foreshadow rule, so
       these win regardless of source order. --- */
    .pc-stage.is-advisor .pc-label-foreshadow-spouse {
      opacity: 1;
    }
    .pc-stage.is-advisor .pc-spouse-node {
      stroke: #a5a5e0;
      stroke-width: 1.75;
      opacity: 1;
    }
    .pc-stage.is-advisor .pc-foreshadow-spouse,
    .pc-stage.is-advisor .pc-halo-spouse {
      animation: pcSpouseConnect 5s ease-in-out infinite;
    }
    @keyframes pcSpouseConnect {
      0%,   8%   { opacity: 0; }   /* apart */
      22%,  56%  { opacity: 1; }   /* connect, then hold */
      74%,  100% { opacity: 0; }   /* disconnect, then pause */
    }
    /* Finance rewards calm, and a looping line is motion. Anyone who has asked
       for less of it gets the connected state, held. */
    @media (prefers-reduced-motion: reduce) {
      .pc-stage.is-advisor .pc-foreshadow-spouse,
      .pc-stage.is-advisor .pc-halo-spouse {
        animation: none;
        opacity: 1;
      }
    }

    /* --- Mono numbering for the three cores. The section had none; brief 4.4
       asks for it. Matches the existing .category-pillar-num idiom. --- */
    .pillars-num {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #f16b52;
      margin: 0 0 10px;
    }

    /* --- Factfind stage label inside a Monday timeline row. The same three
       stage names appear on Features, so the two pages describe one
       process. --- */
    .v3-wf-stage {
      display: block;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.75);
      margin-bottom: 8px;
    }

    /* --- Persona strip (Features). Mono, quiet, sits under the hero. --- */
    .v3-persona {
      max-width: 1080px;
      margin: 0 auto;
      padding: 18px 32px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.18);
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.18);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 8px 32px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
    }
    .v3-persona span:last-child { color: rgba(25, 28, 54, 0.45); }

    /* --- Charts.
       Geometry is fixed by brief 5.3. The plot is a 1200-unit-wide viewBox
       with the drawing area from x=8 to x=1192, which is what puts the age
       gridlines at the required percentages. Ticks are absolutely positioned
       at their true x; never space-between, which spaces labels evenly and
       lies about where the years are. --- */
    .v3-chart {
      width: 100%;
      box-sizing: border-box;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.2);
      border-radius: var(--radius-sm);
      padding: 22px 22px 16px;
    }
    .v3-chart-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding-bottom: 16px;
      margin-bottom: 18px;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.2);
    }
    .v3-chart-title {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0;
    }
    .v3-chart-plot {
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }
    .v3-chart-plot svg {
      display: block;
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .v3-chart-axis {
      position: relative;
      width: 100%;
      height: 20px;
      margin-top: 6px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.2);
    }
    .v3-chart-tick {
      position: absolute;
      top: 6px;
      transform: translateX(-50%);
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      color: rgba(25, 28, 54, 0.45);
      white-space: nowrap;
    }
    /* A label over chart ink carries its own ground, or it is unreadable. */
    .v3-chart-callout {
      position: absolute;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.9);
      padding: 2px 6px;
      border-radius: 2px;
      white-space: nowrap;
      pointer-events: none;
    }
    .v3-chart-callout-coral { color: #b8461f; }
    .v3-chart-callout-purple { color: #4e4e8e; }
    .v3-chart-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 20px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.2);
    }
    .v3-chart-legend-item {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
    }
    .v3-chart-swatch {
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      border-radius: 2px;
    }
    .v3-chart-params {
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.7;
      letter-spacing: 0.04em;
      color: rgba(25, 28, 54, 0.4);
      margin: 14px 0 0;
      padding-top: 12px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.2);
    }

    /* --- Screenshot slot. A real file, so dropping the browser capture over
       the same filename is the only step needed later. --- */
    .v3-slot {
      width: 100%;
      box-sizing: border-box;
      aspect-ratio: 16 / 9;
      background: var(--surface-2);
      border: 0.5px solid rgba(88, 88, 161, 0.2);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .v3-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .v3-slot-caption {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      margin: 10px 0 0;
    }

    /* --- Summary cards under a chart --- */
    .v3-cards {
      display: grid;
      gap: 16px;
      margin-top: 24px;
    }
    .v3-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v3-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .v3-card {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.2);
      border-radius: var(--radius-sm);
      padding: 20px;
    }
    .v3-card-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 12px;
    }
    .v3-card-value {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 26px;
      letter-spacing: -0.5px;
      color: var(--ink);
      font-feature-settings: "tnum" 1;
      margin: 0 0 10px;
      line-height: 1;
    }
    /* A unit beside a figure, so a 26px mono value does not wrap mid-figure
       and the figure stays the first thing read. */
    .v3-card-unit {
      font-size: 13px;
      letter-spacing: 0;
      color: rgba(25, 28, 54, 0.5);
      margin-left: 6px;
    }
    .v3-card-body {
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.7);
      margin: 0;
    }
    @media (max-width: 900px) {
      .v3-cards-3, .v3-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .v3-cards-3, .v3-cards-4 { grid-template-columns: 1fr; }
    }

    /* --- The navy break. Brief 5.4 asks for one full-bleed navy section on
       Features and only one. This is a white-theme file, so there is no
       existing navy-section pattern; --ink is the navy. --- */
    .v3-navy {
      background: var(--ink);
      padding: 96px 0;
      margin: 96px 0;
    }
    .v3-navy-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
    .v3-navy .v3-eyebrow { color: rgba(254, 217, 132, 0.9); }
    .v3-navy h3, .v3-navy .v3-navy-heading { color: #fbfbfb; }
    .v3-navy p { color: rgba(251, 251, 251, 0.72); }
    .v3-navy-heading {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.5vw, 42px);
      line-height: 1.12;
      letter-spacing: -0.5px;
      margin: 14px 0 0;
    }
    .v3-navy-heading em { font-style: italic; color: #f16b52; }
    .v3-navy-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 56px;
      margin-top: 48px;
      align-items: start;
    }
    @media (max-width: 900px) { .v3-navy-grid { grid-template-columns: 1fr; gap: 40px; } }

    /* --- Waterfall (survivor needs) --- */
    .v3-wf-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      gap: 20px;
      align-items: baseline;
      padding: 12px 0;
      border-bottom: 0.5px solid rgba(251, 251, 251, 0.14);
      font-family: var(--sans);
      font-size: 14px;
      color: rgba(251, 251, 251, 0.78);
    }
    .v3-wf-row:first-child { border-top: 0.5px solid rgba(251, 251, 251, 0.14); }
    .v3-wf-fig {
      font-family: var(--mono);
      font-weight: 500;
      font-feature-settings: "tnum" 1;
      text-align: right;
      color: #fbfbfb;
    }
    .v3-wf-total { border-bottom: none; padding-top: 16px; }
    .v3-wf-total span:first-child { color: #fbfbfb; }
    .v3-wf-credit .v3-wf-fig { color: #7fc79c; }
    .v3-wf-gap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      gap: 20px;
      align-items: center;
      margin-top: 14px;
      padding-top: 22px;
      border-top: 1.5px solid #f16b52;
    }
    .v3-wf-gap-fig {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 34px;
      letter-spacing: -1px;
      color: #f16b52;
      font-feature-settings: "tnum" 1;
      text-align: right;
    }

    /* --- Junction. Two routes, both costed, neither hidden. --- */
    .v3-junction { margin-top: 8px; }
    .v3-junction svg { display: block; width: 100%; height: auto; }
    .v3-junction-branches {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      margin-top: 22px;
      background: rgba(251, 251, 251, 0.14);
      border-top: 0.5px solid rgba(251, 251, 251, 0.14);
    }
    .v3-junction-branch { background: var(--ink); padding: 18px 20px 4px; }
    .v3-junction-branch p { font-size: 13px; line-height: 1.6; margin: 0; }
    .v3-junction-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin: 0 0 8px;
    }
    .v3-junction-ours .v3-junction-label { color: #7fc79c; }
    .v3-junction-theirs .v3-junction-label { color: #f16b52; }
    @media (max-width: 560px) { .v3-junction-branches { grid-template-columns: 1fr; } }

    /* --- Implementation schedule. There is no <table> anywhere in
       preview.html, so this borrows the visual language of
       .adv-int-feed-row: hairline purple rules, mono numerics, no header
       fill. --- */
    .v3-table-wrap { overflow-x: auto; margin-top: 26px; }
    .v3-table { width: 100%; border-collapse: collapse; }
    .v3-table th {
      text-align: left;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      padding: 0 18px 12px 0;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.28);
      white-space: nowrap;
    }
    .v3-table td {
      font-family: var(--sans);
      font-size: 13.5px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.78);
      padding: 14px 18px 14px 0;
      border-bottom: 0.5px solid rgba(88, 88, 161, 0.12);
      vertical-align: top;
    }
    .v3-table td:last-child, .v3-table th:last-child {
      padding-right: 0;
      text-align: right;
    }
    .v3-table .v3-td-who { color: var(--ink); font-weight: 500; white-space: nowrap; }
    .v3-table .v3-td-mono {
      font-family: var(--mono);
      font-size: 11.5px;
      letter-spacing: 0.04em;
      color: rgba(25, 28, 54, 0.6);
      white-space: nowrap;
    }
    .v3-table .v3-td-amt {
      font-family: var(--mono);
      font-weight: 500;
      font-feature-settings: "tnum" 1;
      color: var(--ink);
      white-space: nowrap;
    }
    .v3-table tr[hidden] { display: none; }

    /* --- Filter chips --- */
    .v3-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
    .v3-chip {
      appearance: none;
      background: transparent;
      border: 0.75px solid rgba(88, 88, 161, 0.35);
      border-radius: 999px;
      padding: 6px 14px;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.6);
      cursor: pointer;
      transition: background 200ms ease-out, color 200ms ease-out,
                  border-color 200ms ease-out;
    }
    .v3-chip:hover { border-color: var(--purple); color: var(--ink); }
    /* .v3-chip had no focus style, so a keyboard reader could operate the
       schedule filter and the route toggle without being able to see where they
       were. Same rule .pc-pill and .adv-sp2-toggle-pill already use. */
    .v3-chip:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
    .v3-chip.is-active {
      background: var(--purple);
      border-color: var(--purple);
      color: #ffffff;
    }

    /* --- Generic v3 section furniture, reusing the established scales --- */
    .v3-section { padding: 96px 0; }
    .v3-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
    .v3-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 18px;
    }
    .v3-h2 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(28px, 3.4vw, 40px);
      line-height: 1.12;
      letter-spacing: -0.5px;
      color: var(--ink);
      margin: 0;
    }
    .v3-h2 em { font-style: italic; color: #f16b52; }
    .v3-h3 {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(20px, 2.2vw, 26px);
      line-height: 1.2;
      color: var(--ink);
      margin: 0;
    }
    .v3-h3 em { font-style: italic; color: #f16b52; }
    .v3-lede {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(15px, 1.3vw, 17px);
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.7);
      margin: 20px 0 0;
    }
    .v3-body {
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.7;
      color: rgba(25, 28, 54, 0.72);
      margin: 14px 0 0;
    }
    .v3-note {
      font-family: var(--mono);
      font-size: 9.5px;
      line-height: 1.7;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.42);
      margin: 18px 0 0;
    }
    .v3-split {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: 56px;
      align-items: start;
    }
    .v3-split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    @media (max-width: 900px) {
      .v3-split, .v3-split-even { grid-template-columns: 1fr; gap: 36px; }
    }

    /* --- Numbered step device, built in the Monday-timeline idiom --- */
    .v3-steps { margin-top: 40px; }
    .v3-step {
      display: grid;
      grid-template-columns: 90px minmax(0, 1fr);
      gap: 24px;
      padding: 22px 0;
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
    }
    .v3-step:last-child { border-bottom: 0.5px solid rgba(88, 88, 161, 0.16); }
    .v3-step-num {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 12px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--purple);
      text-align: right;
      padding-top: 4px;
    }
    .v3-step-who {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.42);
      margin: 8px 0 10px;
    }
    @media (max-width: 640px) {
      .v3-step { grid-template-columns: 1fr; gap: 8px; }
      .v3-step-num { text-align: left; }
    }

    /* --- Six-up compact row --- */
    .v3-sixup {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      margin-top: 36px;
      background: rgba(88, 88, 161, 0.16);
      border: 0.5px solid rgba(88, 88, 161, 0.16);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .v3-sixup-item { background: var(--bg); padding: 22px 20px; }
    .v3-sixup-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 10px;
    }
    .v3-sixup-title {
      font-family: var(--sans);
      font-weight: 500;
      font-size: 14px;
      color: var(--ink);
      margin: 0;
    }
    @media (max-width: 900px) { .v3-sixup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .v3-sixup { grid-template-columns: 1fr; } }

    /* --- Propagation chain --- */
    .v3-prop { margin-top: 36px; }
    .v3-prop-item { padding: 26px 0; border-top: 0.5px solid rgba(88, 88, 161, 0.16); }
    .v3-prop-item:last-child { border-bottom: 0.5px solid rgba(88, 88, 161, 0.16); }
    .v3-prop-chain {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      margin-top: 16px;
    }
    .v3-prop-step p { margin: 0; font-size: 13.5px; line-height: 1.65;
                      color: rgba(25, 28, 54, 0.72); }
    .v3-prop-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #f16b52;
      margin: 0 0 8px;
    }
    @media (max-width: 780px) { .v3-prop-chain { grid-template-columns: 1fr; gap: 16px; } }

    /* --- Roadmap block (COMING 2027) --- */
    .v3-roadmap {
      margin-top: 40px;
      padding: 30px 32px;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.22);
      border-left: 2px solid rgba(88, 88, 161, 0.5);
      border-radius: var(--radius-sm);
    }

    /* --- Quote card (pilot advisors). Brackets are awaiting client content
       and must not be invented or deleted. --- */
    .v3-quotes {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 20px;
      margin-top: 40px;
    }
    .v3-quote {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.2);
      border-left: 2px solid rgba(241, 107, 82, 0.5);
      border-radius: var(--radius-sm);
      padding: 24px;
    }
    .v3-quote-body {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      font-size: 16px;
      line-height: 1.5;
      color: rgba(25, 28, 54, 0.5);
      margin: 0;
    }
    .v3-quote-attr {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.4);
      margin: 16px 0 0;
    }
    @media (max-width: 900px) { .v3-quotes { grid-template-columns: 1fr; } }

    /* --- Hours calculator (Workspace). Outputs hours. Never dollars. --- */
    .v3-calc {
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.22);
      border-radius: var(--radius-sm);
      padding: 30px 32px;
    }
    .v3-calc-field { margin-bottom: 24px; }
    .v3-calc-field-head {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 16px;
      margin-bottom: 10px;
    }
    .v3-calc-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
    }
    .v3-calc-val {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 15px;
      color: var(--purple);
      font-feature-settings: "tnum" 1;
    }
    .v3-calc input[type="range"] {
      width: 100%;
      margin: 0;
      accent-color: #f16b52;
    }
    .v3-calc-out {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.22);
    }
    .v3-calc-out-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 20px;
      padding: 9px 0;
    }
    .v3-calc-hero {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 40px;
      line-height: 1;
      letter-spacing: -1px;
      color: var(--ink);
      font-feature-settings: "tnum" 1;
    }

    /* --- Signup flow --- */
    .v3-signup-grid {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
      gap: 48px;
      align-items: start;
      margin-top: 48px;
    }
    @media (max-width: 900px) { .v3-signup-grid { grid-template-columns: 1fr; gap: 36px; } }
    .v3-field { margin-bottom: 22px; }
    .v3-field-label {
      display: block;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
      margin-bottom: 9px;
    }
    .v3-field input[type="number"],
    .v3-field input[type="email"],
    .v3-field select {
      width: 100%;
      box-sizing: border-box;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink);
      background: var(--bg);
      border: 0.75px solid rgba(88, 88, 161, 0.35);
      border-radius: var(--radius-xs);
      padding: 11px 13px;
    }
    .v3-field input:focus, .v3-field select:focus {
      outline: none;
      border-color: var(--purple);
    }
    .v3-opts { display: flex; flex-wrap: wrap; gap: 8px; }
    .v3-opt {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 0.75px solid rgba(88, 88, 161, 0.35);
      border-radius: var(--radius-xs);
      padding: 10px 14px;
      font-family: var(--sans);
      font-size: 13.5px;
      color: rgba(25, 28, 54, 0.78);
      cursor: pointer;
      transition: border-color 200ms ease-out, background 200ms ease-out;
    }
    .v3-opt:hover { border-color: var(--purple); }
    .v3-opt input { margin: 0; accent-color: #f16b52; }
    .v3-opt.is-on {
      border-color: var(--purple);
      background: rgba(88, 88, 161, 0.06);
      color: var(--ink);
    }
    .v3-score {
      position: sticky;
      top: 96px;
      background: var(--ink);
      border-radius: var(--radius);
      padding: 32px;
    }
    .v3-score-eyebrow {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(254, 217, 132, 0.9);
      margin: 0 0 18px;
    }
    .v3-score-dial { display: flex; align-items: baseline; gap: 8px; }
    .v3-score-val {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 64px;
      line-height: 1;
      letter-spacing: -2px;
      color: #fbfbfb;
      font-feature-settings: "tnum" 1;
    }
    .v3-score-max {
      font-family: var(--mono);
      font-size: 13px;
      color: rgba(251, 251, 251, 0.5);
    }
    .v3-score-band {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #f16b52;
      margin: 14px 0 18px;
    }
    .v3-score-bar {
      position: relative;
      height: 3px;
      background: rgba(251, 251, 251, 0.16);
      margin-bottom: 10px;
    }
    .v3-score-bar span {
      display: block;
      height: 100%;
      background: #f16b52;
      transition: width 260ms ease-out;
    }
    /* The target marker sits at 75. Not at 100. */
    .v3-score-target {
      position: absolute;
      top: -4px;
      left: 75%;
      width: 1px;
      height: 11px;
      background: rgba(251, 251, 251, 0.55);
    }
    .v3-score-target-note {
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: 0.11em;
      text-transform: uppercase;
      color: rgba(251, 251, 251, 0.42);
      margin: 0 0 22px;
    }
    /* Reaching the target reads positive. Passing 90 reads as a caution, which
       is the whole argument of this page. */
    .v3-score.is-target .v3-score-band { color: #7fc79c; }
    .v3-score.is-over .v3-score-band { color: rgba(254, 217, 132, 0.95); }
    .v3-score.is-over .v3-score-bar span { background: rgba(254, 217, 132, 0.8); }

    /* --- Live guidance under a Signup field --- */
    .v3-guide {
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.6;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.45);
      margin: 8px 0 0;
    }
    .v3-guide.is-flag { color: #b8461f; }

    /* --- The derived savings rate. Shown as the arithmetic that produced it,
       because it is computed rather than entered. --- */
    .v3-derived {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-top: 4px;
      padding: 18px 20px;
      background: var(--surface-2);
      border-left: 2px solid var(--purple);
      border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    }
    .v3-derived.is-flag { border-left-color: #b8461f; }
    .v3-derived-note {
      font-family: var(--mono);
      font-size: 9px;
      line-height: 1.6;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.5);
      margin: 0;
    }
    .v3-derived-fig {
      display: block;
      font-family: var(--mono);
      font-weight: 500;
      font-size: 24px;
      letter-spacing: -0.5px;
      color: var(--ink);
      font-feature-settings: "tnum" 1;
      line-height: 1;
    }
    .v3-derived-pct {
      display: block;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: var(--purple);
      margin-top: 6px;
      white-space: nowrap;
    }
    .v3-derived.is-flag .v3-derived-fig,
    .v3-derived.is-flag .v3-derived-pct { color: #b8461f; }
    @media (max-width: 560px) {
      .v3-derived { flex-direction: column; align-items: flex-start; gap: 14px; }
      .v3-derived > div:last-child { text-align: left !important; }
    }
    .v3-score-break { border-top: 0.5px solid rgba(251, 251, 251, 0.16); padding-top: 16px; }
    .v3-score-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 6px 0;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.05em;
      color: rgba(251, 251, 251, 0.55);
    }
    .v3-score-row span:last-child { color: #fbfbfb; }
    .v3-reco { padding: 22px 0; border-top: 0.5px solid rgba(88, 88, 161, 0.16); }
    .v3-reco:first-child { border-top: none; padding-top: 0; }
    .v3-reco-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }

    /* --- Beliefs / negations (About) --- */
    .v3-belief {
      display: grid;
      grid-template-columns: 56px minmax(0, 1fr);
      gap: 22px;
      padding: 24px 0;
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
    }
    .v3-belief:last-child { border-bottom: 0.5px solid rgba(88, 88, 161, 0.16); }
    .v3-belief-num {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.16em;
      color: #f16b52;
      padding-top: 6px;
    }
    .v3-negation {
      font-family: var(--serif);
      font-weight: 400;
      font-size: clamp(20px, 2.2vw, 26px);
      line-height: 1.3;
      color: #fbfbfb;
      padding: 20px 0;
      border-top: 0.5px solid rgba(251, 251, 251, 0.14);
      margin: 0;
    }
    .v3-negation:last-child { border-bottom: 0.5px solid rgba(251, 251, 251, 0.14); }
    .v3-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 24px; margin-top: 40px; }
    .v3-team-photo {
      width: 100%;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      background: var(--surface-2);
      border: 0.5px solid rgba(88, 88, 161, 0.2);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.35);
      margin-bottom: 18px;
    }
    @media (max-width: 640px) { .v3-team { grid-template-columns: 1fr; } }

    /* --- Legal document rows --- */
    .v3-doc {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 22em);
      gap: 32px;
      padding: 26px 0;
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
      align-items: start;
    }
    .v3-doc:last-child { border-bottom: 0.5px solid rgba(88, 88, 161, 0.16); }
    .v3-doc-title { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
    @media (max-width: 780px) { .v3-doc { grid-template-columns: 1fr; gap: 12px; } }

    /* ==================================================================
       preview_v3.3. The Workspace, rebuilt around what is actually built.

       Illustration-led and deliberately spare. Detail that will not fit the
       word budget goes into the diagram as a mono label, never into a longer
       paragraph.

       Diagram system: 1 to 1.5px strokes, rounded caps, structure in --ink at
       12 to 25%, ONE accent per diagram (coral for the thing being pointed
       at, purple for the supporting path), labels DM Mono 9 to 10px uppercase
       at .14em in rgba(25,28,54,.55).
       ================================================================== */

    /* Every new diagram sits in this. width:100% and border-box because an
       aspect-ratio box with a min-height will otherwise satisfy the ratio by
       growing the width and blow out the page. */
    .v3-dia {
      width: 100%;
      box-sizing: border-box;
      display: block;
    }
    .v3-dia svg { display: block; width: 100%; height: auto; overflow: visible; }
    .v3-dia-cap {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.55);
      margin: 14px 0 0;
    }

    /* Entrance, matching the pattern already on this page. */
    .v3-dia { opacity: 0; transform: translateY(8px);
              transition: opacity 400ms ease-out, transform 400ms ease-out; }
    .adv-sps.is-in-view .v3-dia,
    .adv-prob.is-in-view .v3-dia,
    .adv-hero.is-in-view .v3-dia,
    .v3-ws.is-in-view .v3-dia { opacity: 1; transform: translateY(0); }
    @media (prefers-reduced-motion: reduce) {
      .v3-dia { opacity: 1 !important; transform: none !important;
                transition: none !important; }
    }

    /* A Workspace section built outside the adv-* families. */
    .v3-ws { padding: 96px 0; }
    .v3-ws-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
    .v3-ws-head { max-width: 40em; margin: 0 0 44px; }
    .v3-ws-intro {
      font-family: var(--sans);
      font-size: clamp(16px, 1.35vw, 17px);
      line-height: 1.65;
      color: rgba(25, 28, 54, 0.72);
      margin: 18px 0 0;
    }

    /* The rules engine. Six tiles, 3x2, each a glyph, a mono header and a
       compact list. Never paragraphs. */
    .v3-rules {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: rgba(88, 88, 161, 0.16);
      border: 0.5px solid rgba(88, 88, 161, 0.16);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .v3-rule-tile { background: var(--bg); padding: 26px 24px; }
    .v3-rule-glyph { width: 30px; height: 30px; display: block; margin-bottom: 16px; }
    .v3-rule-head {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--purple);
      margin: 0 0 12px;
    }
    .v3-rule-list { list-style: none; padding: 0; margin: 0; }
    .v3-rule-list li {
      font-family: var(--sans);
      font-size: 13px;
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.68);
      padding: 4px 0;
    }
    @media (max-width: 900px) { .v3-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 560px) { .v3-rules { grid-template-columns: 1fr; } }

    /* Closing mono strip under the rules grid. */
    .v3-strip {
      font-family: var(--mono);
      font-size: 10px;
      line-height: 1.8;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
      margin: 28px 0 0;
      padding: 18px 20px;
      background: var(--surface);
      border-left: 2px solid rgba(88, 88, 161, 0.4);
      border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    }
    .v3-principal {
      font-family: var(--serif);
      font-style: italic;
      font-size: clamp(17px, 1.5vw, 19px);
      line-height: 1.5;
      color: var(--ink);
      margin: 32px 0 0;
    }

    /* Compact mono label list, used for what the compliance engine catches. */
    .v3-chips-mono {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 22px 0 0;
    }
    .v3-chip-mono {
      font-family: var(--mono);
      font-size: 9.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.6);
      border: 0.75px solid rgba(88, 88, 161, 0.3);
      border-radius: 3px;
      padding: 4px 9px;
    }

    /* The Monday timeline gains a sixth beat, so it needs a sixth delay. */
    .adv-wf.is-in-view .adv-wf-node:nth-child(6) {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 1900ms;
    }

    /* Closing CTA chips restating the three pillars. */
    .v3-cta-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 10px;
      margin: 30px 0 0;
      font-family: var(--mono);
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.5);
    }
    .v3-cta-chips span:not(:last-child)::after {
      content: " ·";
      color: var(--coral);
      margin-left: 10px;
    }

    /* --- The sticky Trust TOC fix (brief 8.1).
       It had no background of its own and no z-index, so a coloured element
       scrolling beneath it showed through and the link text lost contrast
       against the coral active state. Give it an opaque ground, horizontal
       padding, and enough stacking authority to sit above the content
       column. Nothing coloured may pass beneath it. --- */
    .trust-toc {
      background: var(--bg);
      padding: 24px 20px 24px 0;
      z-index: 20;
    }
    .trust-shell { isolation: isolate; }

    /* --- Legal reads at Trust's measure (v3_6-brief 2.2).
       720px with 32px gutters, which is exactly .trust-hero-container, so the
       documents sit under the heading rather than running wider than it. The
       column is centred; the prose inside it is not, because that is what a
       reading column does and what Trust's own content column does. --- */
    .v3-measure {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 32px;
    }
    /* At this measure a 22em detail column would leave the title column under
       280px, which breaks the document names across three lines. The rows keep
       their structure and their DRAFT badges; they stack instead. */
    .v3-measure .v3-doc {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
    }
    /* ==================================================================
       v3.8 Features. Added, nothing above is rewritten.

       Same restriction as everything else in this file: no new colour
       token. --ink, --purple, --coral, --bg, --surface, --surface-2, and
       the existing #2f9d6f for live states.
       ================================================================== */

    /* --- Line glyphs (brief 2.3). One size class per context, because a
       glyph beside a 9px mono label and a glyph above a 15px line want
       different weights. Every one is aria-hidden: see the note in
       tools/preview_v3_glyphs.py. --- */
    .v3-glyph { width: 22px; height: 22px; display: block; flex: 0 0 auto; }
    .v3-glyph-lg { width: 28px; height: 28px; display: block; margin-bottom: 14px; }
    .v3-glyph-sm { width: 18px; height: 18px; display: block; flex: 0 0 auto; }

    /* --- The positioning band.

       Not a comparison. A visitor otherwise cannot tell how any of this
       reaches them, and today there is exactly one way: a licensed advisor
       opens a planning circle. The three blocks are that sequence, the
       sentence beneath is whose numbers it runs on, and the qualifier names
       who decides. Said once, near the top, and never again. --- */
    .v3-stance {
      max-width: 1080px;
      margin: 0 auto;
      padding: 56px 32px 0;
    }
    .v3-stance-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1px;
      background: rgba(88, 88, 161, 0.16);
      border: 0.5px solid rgba(88, 88, 161, 0.16);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }
    .v3-stance-item { background: var(--bg); padding: 24px 22px 26px; }
    .v3-stance-label {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      margin: 0 0 8px;
    }
    .v3-stance-line {
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.55;
      color: rgba(25, 28, 54, 0.66);
      margin: 0;
    }
    /* The eyebrow above the row. Existing .v3-eyebrow, so only the gap to the
       row below it is set here. */
    .v3-stance-eyebrow { margin: 0 0 16px; }

    /* The closing line is the argument, so it is set at the lede tier rather
       than the body tier, and it reuses the established scale. */
    .v3-stance-close {
      font-family: var(--sans);
      font-size: clamp(17px, 1.5vw, 20px);
      font-weight: 500;
      line-height: 1.55;
      color: var(--ink);
      max-width: 40em;
      margin: 30px 0 0;
    }
    /* The qualifier under the closing line. Smaller and in the secondary body
       colour so it reads as the condition on the sentence above it rather than
       as a second headline. */
    .v3-stance-note {
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.62);
      max-width: 40em;
      margin: 12px 0 0;
    }
    @media (max-width: 780px) {
      .v3-stance-row { grid-template-columns: 1fr; }
    }

    /* --- Assumptions, closed by default (brief 2.2).

       The mono assumption block was the most obviously non-consumer copy on
       the page. The text is unchanged; only its disclosure is. --- */
    .v3-assume {
      margin-top: 14px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
      padding-top: 12px;
    }
    .v3-assume-summary {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(88, 88, 161, 0.9);
      cursor: pointer;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .v3-assume-summary::-webkit-details-marker { display: none; }
    .v3-assume-summary::before {
      content: "+";
      font-size: 12px;
      line-height: 1;
      color: var(--coral);
      display: inline-block;
      transition: transform 0.2s ease;
    }
    /* A plus rotated into a cross. No escape sequence, so the marker
       cannot be damaged by a later pass over this file. */
    .v3-assume[open] .v3-assume-summary::before {
      transform: rotate(45deg);
    }
    .v3-assume-body {
      font-family: var(--mono);
      font-size: 9.5px;
      line-height: 1.75;
      letter-spacing: 0.06em;
      color: rgba(25, 28, 54, 0.45);
      margin: 12px 0 0;
    }

    /* --- Insight card head. The glyph sits beside the label rather than
       above it, so the card's own figure stays the first thing read. --- */
    .v3-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }
    .v3-card-head .v3-card-label { margin: 0; }

    /* --- The propagation flow (brief 3.9).

       Replaces nine sentences. Legible with no interaction at all: the hover
       only advances a coral outline through the three consequences in the
       order they happen, which is the one thing a static diagram cannot say.
       CSS, not JavaScript, and it costs nothing when nobody hovers. --- */
    .v3-flow { margin-top: 30px; }
    .v3-flow svg { display: block; width: 100%; height: auto; }
    .v3-flow-node rect {
      transition: stroke 0.25s ease, stroke-width 0.25s ease;
    }
    .v3-flow-row:hover .v3-flow-node rect {
      stroke: var(--coral);
      stroke-width: 1.4;
    }
    .v3-flow-row:hover .v3-flow-n2 rect { transition-delay: 0.14s; }
    .v3-flow-row:hover .v3-flow-n3 rect { transition-delay: 0.28s; }
    @media (prefers-reduced-motion: reduce) {
      .v3-flow-node rect { transition: none; }
      .v3-flow-row:hover .v3-flow-n2 rect,
      .v3-flow-row:hover .v3-flow-n3 rect { transition-delay: 0s; }
    }

    /* --- The junction on white (brief 3.6).

       The navy version paints its strokes in near-white, so only the ink
       values change. The structure, the geometry and the two priced branches
       are the same object. --- */
    .v3-junction-light .v3-junction-branches {
      background: rgba(88, 88, 161, 0.16);
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
    }
    .v3-junction-light .v3-junction-branch {
      background: var(--surface);
      padding: 18px 20px 16px;
    }
    .v3-junction-light .v3-junction-branch p { color: rgba(25, 28, 54, 0.72); }
    /* Neutral in light mode, both of them. Green for one route and coral for
       the other is the protection-gap fork's argument, and repeating it here
       would have this page judging a decision it has no business judging. The
       selected route takes the coral below. */
    .v3-junction-light .v3-junction-ours .v3-junction-label,
    .v3-junction-light .v3-junction-theirs .v3-junction-label {
      color: rgba(25, 28, 54, 0.55);
    }

    /* --- The roadmap is LIVE now, so it is a section rather than an aside.
       The inline forward-looking note is one line, badged, not a block. --- */
    .v3-ahead {
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      margin: 34px 0 0;
      padding-top: 18px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
    }
    .v3-ahead p {
      font-family: var(--sans);
      font-size: 14px;
      line-height: 1.6;
      color: rgba(25, 28, 54, 0.62);
      margin: 0;
      max-width: 44em;
    }

    /* --- Also produced, and the factfind stages, both gain a glyph. --- */
    .v3-sixup-head .v3-glyph-sm { margin-right: 2px; }
    .v3-step-head { display: flex; align-items: center; gap: 10px; }
    .v3-step-head .v3-h3 { margin: 0; }

    /* --- The roadmap route toggle.

       Both branches are always drawn and always priced. The selection moves
       emphasis and nothing else: coral on the chosen route, the other back to
       the neutral ink it was drawn in. That is the whole reason the junction
       can carry a toggle at all without becoming a claim about which route is
       better. --- */
    .v3-routes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                 margin: 0 0 22px; }
    .v3-route-live {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(25, 28, 54, 0.45);
      margin: 0;
    }
    [data-route] .v3-route-a,
    [data-route] .v3-route-b {
      transition: stroke 350ms ease-out, fill 350ms ease-out,
                  stroke-width 350ms ease-out, opacity 350ms ease-out;
    }
    [data-route] .v3-junction-branch { transition: opacity 350ms ease-out,
                                                   box-shadow 350ms ease-out; }
    [data-route="a"] path.v3-route-a { stroke: var(--coral); stroke-width: 2.5; }
    [data-route="a"] text.v3-route-a { fill: #c2452c; }
    [data-route="b"] path.v3-route-b { stroke: var(--coral); stroke-width: 2.5; }
    [data-route="b"] text.v3-route-b { fill: #c2452c; }
    /* The route not selected stays fully drawn, one step back. */
    [data-route="a"] .v3-junction-branch.v3-route-b,
    [data-route="b"] .v3-junction-branch.v3-route-a { opacity: 0.55; }
    [data-route="a"] .v3-junction-branch.v3-route-a,
    [data-route="b"] .v3-junction-branch.v3-route-b {
      box-shadow: inset 2px 0 0 var(--coral);
    }
    [data-route="a"] .v3-route-a .v3-junction-label,
    [data-route="b"] .v3-route-b .v3-junction-label { color: #c2452c; }
    @media (prefers-reduced-motion: reduce) {
      [data-route] .v3-route-a,
      [data-route] .v3-route-b,
      [data-route] .v3-junction-branch { transition: none; }
    }

    /* --- v3.9 Features restructure. Two new blocks, nothing else. --- */

    /* The scheme strip in section 06. A list set as a list, because the point
       is not that the reader studies it. It is that they do not have to. */
    .v3-schemes {
      margin-top: 34px;
      padding-top: 24px;
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
    }
    .v3-schemes .v3-chips-mono { margin: 0; }
    .v3-schemes .v3-body { margin-top: 18px; max-width: 40em; }

    /* The flag in section 09. The promise made into one object: a collision
       caught eighteen years before it lands. Coral rule on the left because
       this is the one thing on the page being pointed at. */
    .v3-flag {
      margin: 34px 0 8px;
      padding: 26px 28px;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.2);
      border-left: 2px solid var(--coral);
      border-radius: var(--radius-sm);
    }
    .v3-flag svg { display: block; width: 100%; height: auto; overflow: visible; }
    @media (max-width: 700px) {
      .v3-flag { padding: 20px 18px; }
    }

    /* --- v3.91 Features, Signup and About open like Trust. ---------------

       These three were the only pages left using the generic left-aligned
       .hero-inner, and they were the only three heroes on the site that did
       not match the page they sit beside. No page scope is needed: Home uses
       .hero-grid, the Workspace .adv-hero, Trust and Legal .trust-hero, and
       Legal has no .hero-inner at all (asserted). Three uses, three pages.

       The measure is Trust's. .trust-hero-container is 720px with 32px
       gutters and .trust-hero-sub is held to 580px, so the subhead never runs
       wider than the headline above it. Reusing those two numbers rather than
       picking new ones is the same reason Legal reuses Trust's hero classes:
       two centred document openings that drift apart are worse than one.

       Nothing in preview.html's own hero CSS is rewritten. .hero keeps its
       10% side padding and its flex centring, and this only changes how the
       inner column sits inside it. */
    .hero-inner {
      max-width: 720px;
      margin: 0 auto;
      text-align: center;
    }
    .hero-inner .subhead {
      max-width: 580px;
      margin-left: auto;
      margin-right: auto;
    }

    /* --- v3.92 The real product capture in the category frame. ----------
       The frame itself is untouched: border, radius, aspect-ratio and
       shadow all still come from preview.html. These two rules only govern
       what now sits inside it. */
    .category-shot {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* Contain, not cover. The frame turns 16:9 under 768px and cover
         would crop a band out of the middle of a 4:5 composite. */
      object-fit: contain;
      object-position: center top;
      display: block;
    }
    /* The corner is the sample flag now, so it has to survive being read
       over a screenshot. 25% ink on white is a watermark; over a product
       capture it is nothing. Same device as a label over chart ink: its
       own ground, plus padding. */
    .category-frame-live .category-frame-corner {
      bottom: 0;
      left: 0;
      right: 0;
      padding: 7px 14px;
      background: rgba(255, 255, 255, 0.92);
      border-top: 0.5px solid rgba(88, 88, 161, 0.16);
      color: rgba(25, 28, 54, 0.55);
      text-transform: uppercase;
    }

    /* --- v3.92 The health score's new furniture. ------------------------

       Three small additions and one repair. Nothing in preview.html's own
       form CSS is rewritten. */

    /* The repair. The money fields became type="text" so they can carry
       thousand separators: a number input rejects a grouped value and
       clears itself. preview.html's field rule lists input types one by
       one, so the new type needs the same declarations rather than a new
       look. Same values, copied deliberately. */
    .v3-field input[type="text"] {
      width: 100%;
      box-sizing: border-box;
      font-family: var(--sans);
      font-size: 15px;
      color: var(--ink);
      background: var(--bg);
      border: 0.75px solid rgba(88, 88, 161, 0.35);
      border-radius: var(--radius-xs);
      padding: 11px 13px;
      /* Tabular figures, because these are money and they change under the
         reader's hands as the separators go in. */
      font-feature-settings: "tnum" 1;
    }

    /* A priced goal. It is a group of fields that answer one question, and
       it reads as a box for the same reason the derived block does: the
       figures under it are computed from the fields inside it, not from the
       form at large. */
    .v3-goalbox {
      margin-top: 18px;
      padding: 18px 20px;
      background: var(--surface);
      border: 0.5px solid rgba(88, 88, 161, 0.18);
      border-radius: var(--radius-xs);
    }
    .v3-goalbox-head {
      font-family: var(--mono);
      font-weight: 500;
      font-size: 9.5px;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--purple);
      margin: 0 0 14px;
    }
    .v3-goalbox .v3-guide { margin-top: 12px; }
    @media (max-width: 700px) {
      .v3-goalbox > div[style*="grid"] { grid-template-columns: 1fr !important; }
    }

    /* The basis table's second line. The rule is the headline, the reason
       is the small print, and putting them in one cell keeps the row count
       equal to the dimension count. */
    .v3-basis-note {
      display: block;
      margin-top: 6px;
      font-size: 13px;
      color: rgba(25, 28, 54, 0.55);
    }
    .v3-source-where {
      font-family: var(--mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--purple);
      margin: 0 0 8px;
    }

    /* --- v3.92a The panel shows its arithmetic. ------------------------

       Five of eight measures read 100% on a household that meets its
       benchmarks, and a column of 100% with nothing beside it looks like a
       scoreboard that is not reading the inputs. This line says what was
       measured against what, so a full mark reads as a benchmark cleared. */
    .v3-score-item { padding: 2px 0 8px; }
    .v3-score-item .v3-score-row { padding: 4px 0 0; }
    .v3-score-detail {
      font-family: var(--mono);
      font-size: 8.5px;
      letter-spacing: 0.05em;
      line-height: 1.5;
      color: rgba(251, 251, 251, 0.38);
      margin: 3px 0 0;
    }

    /* Option pills in a grid rather than a wrapping row, so a column of
       them lines up. Flex-wrap sizes every pill to its own label, which
       reads as ragged the moment there is more than one row. */
    .v3-opts-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .v3-opts-grid .v3-opt { display: flex; }
    @media (max-width: 560px) {
      .v3-opts-grid { grid-template-columns: 1fr; }
    }

    /* A whole section behind a disclosure. The published basis is the
       specification and it is long; a reader who wants the score should not
       have to read the standard to get to it. A real <details>, like the
       assumption blocks on Features, so it works with JavaScript off and is
       keyboard-operable for free. */
    .v3-disclose > summary {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      cursor: pointer;
      list-style: none;
      padding: 4px 0;
    }
    .v3-disclose > summary::-webkit-details-marker { display: none; }
    .v3-disclose > summary::before {
      content: "+";
      font-family: var(--mono);
      font-size: 26px;
      line-height: 0.9;
      color: var(--coral);
      flex: none;
      transition: transform 0.2s ease;
    }
    .v3-disclose[open] > summary::before { transform: rotate(45deg); }
    /* The chips gained this at v3.8 for the same reason: a keyboard reader
       has to be able to see what they are about to open. */
    .v3-disclose > summary:focus-visible {
      outline: 2px solid var(--purple);
      outline-offset: 6px;
    }
    .v3-disclose-eyebrow { display: block; margin-bottom: 8px; }
    .v3-disclose-title { display: block; }
    .v3-disclose-body { margin-top: 32px; }
    @media (prefers-reduced-motion: reduce) {
      .v3-disclose > summary::before { transition: none; }
    }