/* ===================================================================
   IntuitionAI — shared styles (dark theme)
   =================================================================== */

/* ===================================================================
   AI-NATIVE TYPE  (loaded first so it wins where specificity is equal)
   Geometric sans display, gradient accent words (no serif italics),
   pill-style eyebrows. Appended at the bottom too for higher-specificity
   overrides; this header note documents the intent.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Dark palette ─────────────────────────────────────────── */
  --bg:           #0C1720;
  --bg-alt:       #111E2B;
  --bg-card:      #16242F;
  --bg-deep:      #0A1219;
  --border:       rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);

  /* Text on dark */
  --text:         #EDE9DF;
  --text-mid:     rgba(255,255,255,.74);
  --text-muted:   rgba(255,255,255,.54);
  --label:        #F091BF;

  /* Brand accents (unchanged) */
  --magenta:      #BE418E;
  --magenta-pale: rgba(190,65,142,.12);
  --pink:         #F66084;
  --blue-brand:   #6A6CE0;
  --gradient:     linear-gradient(135deg, #F66084 0%, #BE418E 55%, #7A60E0 100%);
  --white:        #FFFFFF;

  /* Legacy aliases kept for minimal HTML churn */
  --parchment:    var(--bg);
  --parchment-dk: var(--bg-alt);
  --slate:        var(--text);
  --slate-mid:    var(--text-mid);
  --slate-light:  var(--text-muted);
  --bone:         var(--border);

  /* Typography */
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* Layout */
  --max: 1140px;
  --px: 48px;
  --py: 72px;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

/* ── NAV ────────────────────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); border-bottom: 1px solid var(--border);
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px); transition: box-shadow .2s;
}
nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,.35); }
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.nav-mark { height: 30px; width: auto; display: block; }
.nav-logo-text { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-mid); text-decoration: none; }
.nav-links a:hover { color: var(--text); }
.btn-nav { background: var(--gradient); color: var(--white) !important; padding: 8px 18px; border-radius: 4px; font-weight: 600 !important; }

/* Full wordmark for hero section */
.hero-wordmark { height: 30px; width: auto; display: block; margin-bottom: 20px; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary { display: inline-block; background: var(--gradient); color: var(--white); font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 4px; text-decoration: none; transition: opacity .15s; border: none; cursor: pointer; }
.btn-primary:hover { opacity: .88; }
.btn-ghost { display: inline-block; background: transparent; color: var(--text); font-size: 15px; font-weight: 500; padding: 14px 28px; border-radius: 4px; text-decoration: none; border: 1.5px solid var(--border-strong); }
.btn-ghost:hover { border-color: rgba(255,255,255,.3); }
.btn-ghost-light { display: inline-block; background: transparent; color: rgba(255,255,255,.85); font-size: 15px; font-weight: 500; padding: 14px 28px; border-radius: 4px; text-decoration: none; border: 1.5px solid rgba(255,255,255,.2); }
.btn-cta-p { display: inline-block; background: var(--gradient); color: var(--white); font-size: 15px; font-weight: 600; padding: 16px 32px; border-radius: 4px; text-decoration: none; }
.btn-cta-g { display: inline-block; background: transparent; color: var(--white); font-size: 15px; font-weight: 500; padding: 16px 32px; border-radius: 4px; text-decoration: none; border: 1.5px solid rgba(255,255,255,.2); }
.cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── HERO (light background — company home) ─────────────────── */
.hero { max-width: var(--max); margin: 0 auto; padding: 72px var(--px) 72px; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--magenta); margin-bottom: 28px; }
.hero-headline { font-family: var(--display); font-size: clamp(60px, 8.5vw, 104px); font-weight: 700; line-height: 1.0; letter-spacing: -.04em; color: var(--text); max-width: 720px; margin-bottom: 32px; }
.hero-headline em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); }
.hero-sub { font-size: 18px; line-height: 1.7; color: var(--text-mid); max-width: 520px; margin-bottom: 10px; }
.hero-sub-gap { margin-bottom: 44px; }
.hero-tagline { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }

/* ── HERO (dark deep — Security Mirror) ──────────────────────── */
.hero-dark { background: var(--bg-deep); padding: 56px var(--px) 56px; }
.hero-inner { max-width: var(--max); margin: 0 auto; }
.hero-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--magenta); margin-bottom: 28px; }
.hero-headline-dark { font-family: var(--display); font-size: clamp(34px, 3.8vw, 48px); font-weight: 700; line-height: 1.04; letter-spacing: -.035em; color: var(--white); max-width: 640px; margin-bottom: 20px; }
.hero-headline-dark em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); }
.hero-sub-dark { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 520px; margin-bottom: 10px; }
.hero-sub-cmd { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 520px; margin-bottom: 26px; font-weight: 500; }

/* ── HERO (AI Mirror — dark variant) ─────────────────────────── */
.hero-light { background: var(--bg); padding: 96px var(--px) 80px; }
.hero-headline-lt { font-family: var(--display); font-size: clamp(44px, 7vw, 84px); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; color: var(--text); max-width: 840px; margin-bottom: 28px; }
.hero-headline-lt em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); }

/* ── EXECUTION BEAT ─────────────────────────────────────────── */
.exec-beat { background: var(--bg-deep); padding: var(--py) var(--px); }
.exec-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.exec-headline { font-family: var(--display); font-size: clamp(38px, 5vw, 58px); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: var(--white); }
.exec-body p { font-size: 18px; line-height: 1.75; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.exec-body p:last-child { margin-bottom: 0; color: rgba(255,255,255,.85); font-weight: 500; }

/* ── DIVIDER ────────────────────────────────────────────────── */
.divider { border: none; border-top: 1px solid var(--border); max-width: var(--max); margin: 0 auto; }

/* ── CONTEXT (company) ──────────────────────────────────────── */
.context { max-width: var(--max); margin: 0 auto; padding: var(--py) var(--px); }
.section-label { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--magenta); margin-bottom: 20px; }
.section-headline { font-family: var(--display); font-size: clamp(30px, 4vw, 43px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--text); max-width: 600px; margin-bottom: 36px; }
.section-headline em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); }
.context-intro { font-size: 17px; line-height: 1.7; color: var(--text-mid); max-width: 580px; margin-bottom: 40px; }
.context-examples { display: flex; flex-direction: column; margin-bottom: 36px; }
.example-item { display: grid; grid-template-columns: 3px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.example-item:first-child { border-top: 1px solid var(--border); }
.example-bar { background: var(--magenta); border-radius: 2px; }
.example-text { font-size: 16px; line-height: 1.65; color: var(--text-mid); }
.example-text strong { color: var(--text); font-weight: 600; }
.context-close { font-family: var(--display); font-size: 22px; font-weight: 600; font-style: italic; font-variation-settings: 'SOFT' 80; color: var(--text); }

/* ── MIRRORS (company) ──────────────────────────────────────── */
.mirrors { background: var(--bg-alt); padding: var(--py) var(--px); }
.mirrors-inner { max-width: var(--max); margin: 0 auto; }
.mirrors-intro { font-size: 17px; color: var(--text-mid); line-height: 1.65; margin-bottom: 12px; }
.mirrors-concept { font-family: var(--display); font-size: clamp(18px, 2.2vw, 24px); font-weight: 500; font-style: italic; font-variation-settings: 'SOFT' 80; color: var(--text); line-height: 1.4; letter-spacing: -.01em; margin-bottom: 48px; max-width: 600px; }
.mirror-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mirror-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 40px; display: flex; flex-direction: column; }
.card-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.card-name { font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text); margin-bottom: 16px; }
.card-body { font-size: 15px; line-height: 1.7; color: var(--text-mid); flex: 1; margin-bottom: 28px; }
.card-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--magenta); text-decoration: none; letter-spacing: .03em; text-transform: uppercase; }

/* Fix sister-capability band */
.fix-band { margin-top: 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 22px 32px; }
.fix-band-text { font-family: var(--display); font-size: clamp(16px, 2vw, 19px); font-weight: 500; line-height: 1.5; color: var(--text-mid); }
.fix-band-text strong { color: var(--text); font-weight: 600; }
.fix-band-text em { font-style: italic; font-variation-settings: 'SOFT' 80; color: var(--text); }

/* ── FOUNDER (company) ──────────────────────────────────────── */
.founder { max-width: var(--max); margin: 0 auto; padding: var(--py) var(--px); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.founder-label { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--magenta); margin-bottom: 24px; }
.founder-body p { font-size: 16px; line-height: 1.8; color: var(--text-mid); }
.founder-body p + p { margin-top: 18px; }
.founder-placeholder { font-size: 14px; line-height: 1.7; color: var(--text-muted); font-style: italic; padding: 16px 20px; border: 1.5px dashed var(--border-strong); border-radius: 4px; margin: 18px 0; }
.founder-sig { margin-top: 36px; }
.founder-sig-name { font-family: var(--display); font-size: 17px; font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--text); }
.founder-sig-role { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.founder-pull { background: var(--magenta-pale); border-left: 3px solid var(--magenta); border-radius: 4px; padding: 40px; }
.founder-pull-text { font-family: var(--display); font-size: clamp(20px, 2.5vw, 26px); font-weight: 600; font-style: italic; font-variation-settings: 'SOFT' 80; color: var(--text); line-height: 1.45; letter-spacing: -.01em; }

/* ── FINAL CTA ──────────────────────────────────────────────── */
.final-cta { background: var(--bg-deep); padding: var(--py) var(--px); text-align: center; }
.final-cta-label { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--magenta); margin-bottom: 24px; }
.final-cta-headline { font-family: var(--display); font-size: clamp(30px, 4.5vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--white); margin-bottom: 44px; max-width: 640px; margin-left: auto; margin-right: auto; }
.final-cta-headline em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); }
.final-cta-sub { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.55); max-width: 520px; margin: 0 auto 44px; }
.final-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.final-note { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 16px; }
.final-promise { font-family: var(--display); font-size: 18px; font-style: italic; font-variation-settings: 'SOFT' 100; color: rgba(255,255,255,.5); }

/* ── PROMISE STRIP ──────────────────────────────────────────── */
.promise-strip { background: var(--gradient); padding: 18px var(--px); text-align: center; }
.promise-text { font-family: var(--display); font-size: 15px; font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--white); }

/* ── FOOTER ─────────────────────────────────────────────────── */
footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 36px var(--px); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-logo { display: flex; align-items: center; gap: 8px; }
.footer-mark { height: 26px; width: auto; }
.footer-logo-text { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--text); }
.footer-links { display: flex; gap: 24px; list-style: none; flex-wrap: wrap; }
.footer-links a { font-size: 13px; color: var(--text-mid); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-copy { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--text-muted); }

/* ===================================================================
   SECURITY MIRROR–specific components
   =================================================================== */

/* TRUST BAR */
.trust-bar { background: var(--gradient); padding: 14px var(--px); }
.trust-inner { max-width: var(--max); margin: 0 auto; display: flex; gap: 40px; align-items: center; flex-wrap: wrap; }
.trust-item { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--white); }
.trust-item::before { content: '✓ '; }

/* STAT STRIP */
.stat-strip { background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 64px var(--px); }
.stat-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.stat-block { border-left: 3px solid var(--magenta); padding-left: 28px; }
.stat-number { font-family: var(--display); font-size: clamp(44px, 6vw, 72px); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--text); margin-bottom: 12px; }
.stat-desc { font-size: 15px; line-height: 1.6; color: var(--text-mid); }
.stat-note { font-family: var(--mono); font-size: 11px; color: var(--magenta); letter-spacing: .05em; margin-top: 8px; }

/* SHARED SECTION */
.section { max-width: var(--max); margin: 0 auto; padding: var(--py) var(--px); }
.section-headline-md { font-family: var(--display); font-size: clamp(28px, 3.8vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; color: var(--text); max-width: 680px; margin-bottom: 16px; }
.section-headline-md em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); }
.section-sub { font-size: 17px; line-height: 1.7; color: var(--text-mid); max-width: 900px; margin-bottom: 44px; }

/* FOUR COUNTERPARTIES */
.counterparties { background: var(--bg); }
.cp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.cp-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 28px 24px; }
.cp-icon { margin-bottom: 14px; color: var(--text); }
.cp-icon svg { display: block; width: 28px; height: 28px; }
.cp-title { font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cp-body { font-size: 14px; line-height: 1.6; color: var(--text-mid); }
.cp-source { font-family: var(--mono); font-size: 10px; color: var(--text-muted); margin-top: 8px; }

/* SCAN COVERS */
.scan-bg { background: var(--bg-alt); }
.four-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 36px; }
.scan-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 28px; }
.scan-card-title { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.scan-card-body { font-size: 14px; line-height: 1.65; color: var(--text-mid); }
.data-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 28px; margin-bottom: 20px; }
.data-block p { font-size: 15px; line-height: 1.7; color: var(--text-mid); }
.line-close { font-size: 16px; font-weight: 600; color: var(--text); }

/* FILTER */
.filter-bg { background: var(--bg); }
.three-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0; }
.filter-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 28px; }
.filter-card-num { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); margin-bottom: 10px; }
.filter-card-title { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.filter-card-body { font-size: 14px; line-height: 1.65; color: var(--text-mid); }
.filter-close { font-size: 16px; line-height: 1.65; color: var(--text-mid); margin-bottom: 16px; }
.filter-sequence { font-size: 15px; line-height: 1.65; color: var(--text-mid); padding: 16px 20px; border-left: 3px solid var(--magenta); background: var(--magenta-pale); border-radius: 0 4px 4px 0; }

/* OUTSIDE-IN */
.outside-bg { background: var(--bg-alt); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 36px; }
.col-head { font-family: var(--display); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 20px; }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li { font-size: 15px; line-height: 1.55; color: var(--text-mid); padding-left: 20px; position: relative; }
.check-list li::before { content: '—'; position: absolute; left: 0; color: var(--magenta); }
.outside-note { margin-top: 32px; font-size: 15px; color: var(--text-mid); font-style: italic; }

/* FIND FIX */
.findfixbg { background: var(--bg); }
.ff-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 28px; }
.ff-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 28px; }
.ff-card-title { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.ff-card-body { font-size: 14px; line-height: 1.65; color: var(--text-mid); }
.ff-note { font-size: 14px; color: var(--text-mid); line-height: 1.65; }
.ff-note strong { color: var(--text); font-weight: 600; }

/* SAMPLE REPORT teaser */
.sample-bg { background: var(--bg-alt); }
.sample-inner { text-align: left; }
.sample-copy { font-size: 17px; line-height: 1.7; color: var(--text-mid); max-width: 620px; margin-bottom: 28px; }

/* PE CALLOUT */
.pe-callout { max-width: var(--max); margin: 0 auto; padding: 0 var(--px) 40px; }
.pe-inner { background: var(--bg-deep); border: 1px solid var(--border); border-radius: 6px; padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.pe-text { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.7); max-width: 580px; }
.pe-cta { display: inline-block; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--magenta); text-decoration: none; letter-spacing: .03em; }

/* PRICING */
.pricing-bg { background: var(--bg-alt); }
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 32px; }
.price-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 40px; }
.price-card.featured { border-color: var(--magenta); border-width: 2px; position: relative; }
.price-badge { position: absolute; top: -12px; left: 40px; background: var(--gradient); color: var(--white); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
.price-name { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.price-amount { font-family: var(--display); font-size: 40px; font-weight: 700; color: var(--text); letter-spacing: -.03em; margin-bottom: 16px; }
.price-amount span { font-size: 18px; font-weight: 400; color: var(--text-mid); }
.price-body { font-size: 15px; line-height: 1.65; color: var(--text-mid); margin-bottom: 32px; }
.price-add { font-size: 14px; line-height: 1.6; color: var(--text-mid); margin: -20px 0 32px; }
.price-add strong { color: var(--text); font-weight: 600; }
.btn-price { display: inline-block; background: var(--gradient); color: var(--white); font-size: 15px; font-weight: 600; padding: 13px 28px; border-radius: 4px; text-decoration: none; }
.btn-price-ghost { display: inline-block; background: transparent; color: var(--text); font-size: 15px; font-weight: 500; padding: 13px 28px; border-radius: 4px; text-decoration: none; border: 1.5px solid var(--border-strong); }
.pricing-note { font-size: 15px; line-height: 1.7; color: var(--text-mid); }
.pricing-fine { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-top: 12px; }

/* WHAT HAPPENS AFTER */
.after-bg { background: var(--bg); }
.after-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; position: relative; }
.after-steps::before { content: ''; position: absolute; top: 24px; left: 48px; right: 48px; height: 1px; background: var(--border); }
.after-step { position: relative; }
.step-dot { width: 12px; height: 12px; background: var(--magenta); border-radius: 50%; margin-bottom: 20px; position: relative; z-index: 1; }
.step-label { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); margin-bottom: 8px; }
.step-body { font-size: 15px; line-height: 1.65; color: var(--text-mid); }

/* ===================================================================
   AI MIRROR — email capture form
   =================================================================== */
.email-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 520px; margin-bottom: 14px; }
.email-form input[type="email"] {
  flex: 1; min-width: 220px;
  font-family: var(--body); font-size: 15px; color: var(--white);
  background: rgba(255,255,255,.06); border: 1.5px solid var(--border-strong); border-radius: 4px;
  padding: 14px 16px;
}
.email-form input[type="email"]::placeholder { color: var(--text-muted); }
.email-form input[type="email"]:focus { outline: 2px solid var(--magenta); outline-offset: 1px; border-color: var(--magenta); }
.email-form .btn-primary { white-space: nowrap; }
.form-note { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--text-muted); }

/* dark variant (final CTA on deepest dark) */
.email-form-dark { justify-content: center; margin-left: auto; margin-right: auto; }
.email-form-dark input[type="email"] { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--white); }
.email-form-dark input[type="email"]::placeholder { color: rgba(255,255,255,.45); }
.email-form-dark input[type="email"]:focus { outline-color: var(--magenta); border-color: var(--magenta); }

.form-success { display: none; font-size: 16px; line-height: 1.6; color: var(--text); font-weight: 500; padding: 14px 0; }
.form-success.show { display: block; }
.form-success-dark { color: var(--white); }
.email-form.hide { display: none; }

/* AI Mirror three-card block */
.aim-bg { background: var(--bg-alt); }

/* ===================================================================
   LEGAL PAGES (privacy / terms)
   =================================================================== */
.legal-wrap { max-width: 760px; margin: 0 auto; padding: 80px var(--px); }
.legal-label { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--magenta); margin-bottom: 12px; }
.legal-title { font-family: var(--display); font-size: clamp(38px, 5vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--text); margin-bottom: 10px; }
.legal-date { font-family: var(--mono); font-size: 12px; color: var(--text-muted); margin-bottom: 48px; }
.legal-wrap h2 { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--text); margin: 40px 0 14px; letter-spacing: -.01em; }
.legal-wrap p, .legal-wrap li { font-size: 15px; color: var(--text-mid); line-height: 1.8; margin-bottom: 12px; }
.legal-wrap ul { padding-left: 22px; margin-bottom: 12px; }
.legal-wrap li { list-style: disc; }
.legal-wrap a { color: var(--magenta); text-decoration: underline; }
.legal-wrap strong { color: var(--text); font-weight: 600; }

/* ── ACCESSIBILITY ──────────────────────────────────────────── */
.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; }

/* ── Nav full wordmark ──────────────────────────────────────── */
.nav-wordmark { height: 26px; width: auto; display: block; }

/* ── Security Mirror Inside — calendar CTA ───────────────────── */
.outside-panel.unseen .check-list li { color: var(--text-mid); }
.outside-panel-note { font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 18px 0 16px; }
.outside-cta { display: inline-block; }

/* ── Annual savings pill ─────────────────────────────────────── */
.price-save {
  display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .02em;
  color: var(--magenta); background: rgba(190,65,142,.1);
  border: 1px solid rgba(190,65,142,.28); border-radius: 6px;
  padding: 6px 11px; margin-bottom: 18px;
}

/* ===================================================================
   LIGHT SECTIONS
   Alternating parchment sections break up the dark, frame the content,
   and lift readability. This flips the design tokens within the section,
   so every child component (cards, headings, body, borders) adapts with
   no per-element overrides.
   =================================================================== */
.lightsec {
  --bg:            #F7F4EE;
  --bg-alt:        #EDE9DF;
  --bg-card:       #FFFFFF;
  --bg-deep:       #EDE9DF;
  --border:        #E4DFD5;
  --border-strong: #D8D2C6;
  --text:          #1A2B38;
  --text-mid:      #2E4255;
  --text-muted:    #475D6F;
  --label:         #A8327A;
  background: var(--bg);
  color: var(--text);
}
/* On light cards, the cursor sheen + drop shadow read better tuned down/dark */
.lightsec .mirror-card::after, .lightsec .cp-card::after, .lightsec .filter-card::after,
.lightsec .ff-card::after, .lightsec .price-card::after, .lightsec .scan-card::after,
.lightsec .macro-stat::after {
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgba(26,43,56,.06), transparent 60%);
}
.lightsec .scan-card, .lightsec .cp-card, .lightsec .filter-card, .lightsec .ff-card,
.lightsec .price-card, .lightsec .macro-stat {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -22px rgba(26,43,56,.35);
}
.lightsec .scan-card::before, .lightsec .cp-card::before, .lightsec .filter-card::before,
.lightsec .ff-card::before, .lightsec .price-card::before {
  background: linear-gradient(90deg, transparent, rgba(26,43,56,.12), transparent);
}

/* Full-bleed wrapper for the home "Why now" section so it can go light edge-to-edge */
.context { max-width: none; margin: 0; }
.context-inner { max-width: var(--max); margin: 0 auto; }

/* ── Scan-category icons (the four key sections) ─────────────── */
.scan-card { display: flex; flex-direction: column; }
.scan-icon { color: var(--magenta); margin-bottom: 14px; }
.scan-icon svg { width: 26px; height: 26px; display: block; }

/* ===================================================================
   SIGNAL-VS-NOISE FUNNEL  ("How we filter")
   =================================================================== */
.funnel { margin: 36px 0 28px; }
.funnel-stage { text-align: center; }
.funnel-bar {
  position: relative; height: 60px; width: var(--fw); max-width: 100%; margin: 0 auto;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  transition: width 1.05s cubic-bezier(.2,.75,.2,1);
}
.js-reveal .funnel-bar { width: 0; }
.js-reveal .funnel.in .funnel-bar { width: var(--fw); }
.funnel-n { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; white-space: nowrap; }
.funnel-cap { font-size: 13.5px; line-height: 1.4; color: var(--text-mid); margin: 9px 0 0; }
.funnel-stage.noise .funnel-bar { background: rgba(255,255,255,.07); border: 1px solid var(--border); }
.funnel-stage.noise .funnel-n { color: var(--text-muted); }
.funnel-stage.noise .funnel-cap { color: var(--text-muted); }
.funnel-stage.verified .funnel-bar { background: linear-gradient(90deg, var(--blue-brand), var(--magenta)); }
.funnel-stage.verified .funnel-n { color: #fff; }
.funnel-stage.critical .funnel-bar { background: linear-gradient(90deg, #F66084, #FF3F5F); box-shadow: 0 0 32px rgba(255,63,95,.55); }
.funnel-stage.critical .funnel-n { color: #fff; }
.funnel-stage.critical .funnel-cap { color: var(--text); }
.funnel-gate { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0; }
.funnel-gate .fg-lead { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.funnel-gate span.fg { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--magenta); border: 1px solid var(--border); border-radius: 20px; padding: 7px 13px; background: rgba(190,65,142,.07); }

/* ── Outside-in: visual seen / not-seen split ────────────────── */
.two-cols { gap: 20px; }
.outside-panel { padding: 28px; border-radius: 10px; border: 1px solid var(--border); }
.outside-panel.seen { background: linear-gradient(180deg, rgba(190,65,142,.08), transparent 55%), var(--bg-card); border-color: rgba(190,65,142,.28); }
.outside-panel.unseen { background: var(--bg-alt); }
.outside-head { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.outside-head svg { width: 20px; height: 20px; flex: none; }
.outside-panel.seen .outside-head { color: var(--magenta); }
.outside-panel.unseen .outside-head { color: var(--text-muted); }
.outside-panel.seen .check-list li { color: var(--text); }
.outside-panel.unseen .check-list li { color: var(--text-muted); }
.outside-panel.seen .check-list li::before { content: '\2713'; color: var(--magenta); }
.outside-panel.unseen .check-list li::before { content: '\2014'; color: var(--text-muted); }

/* ── Find → Fix handoff ──────────────────────────────────────── */
.handoff { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 16px; margin: 36px 0 24px; }
.handoff-node {
  padding: 26px 28px; border-radius: 10px; border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--bg-card);
}
.handoff-node.fix { border-color: rgba(190,65,142,.4); box-shadow: 0 0 0 1px rgba(190,65,142,.12), 0 18px 44px -26px rgba(190,65,142,.5); }
.handoff-name { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.handoff-node.fix .handoff-name { color: #fff; }
.handoff-role { font-size: 14px; line-height: 1.6; color: var(--text-mid); }
.handoff-arrow { align-self: center; font-family: var(--display); font-size: 26px; color: var(--magenta); }
@media (max-width: 700px) {
  .handoff { grid-template-columns: 1fr; }
  .handoff-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ===================================================================
   MIRROR DESIGN LANGUAGE
   Glass surfaces catch light as the cursor moves; reflections recur.
   --mx / --my are set per-card by mirror.js.
   =================================================================== */
.mirror-card, .cp-card, .filter-card, .ff-card, .price-card,
.scan-card, .macro-stat, .thanks-step, .mirror-panel { isolation: isolate; }
.mirror-card::after, .cp-card::after, .filter-card::after, .ff-card::after,
.price-card::after, .scan-card::after, .macro-stat::after, .thanks-step::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .3s ease; z-index: 2;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.10), transparent 60%);
}
.mirror-card:hover::after, .cp-card:hover::after, .filter-card:hover::after,
.ff-card:hover::after, .price-card:hover::after, .scan-card:hover::after,
.macro-stat:hover::after, .thanks-step:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mirror-card::after, .cp-card::after, .filter-card::after, .ff-card::after,
  .price-card::after, .scan-card::after, .macro-stat::after, .thanks-step::after { display: none; }
}

/* ===================================================================
   AI-NATIVE — "Hold up the Mirror" interactive
   =================================================================== */
.mirror-demo-bg { background: var(--bg-deep); position: relative; overflow: hidden; }
.mirror-demo-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 70% at 80% 0%, rgba(122,96,224,.16), transparent 60%),
              radial-gradient(45% 60% at 0% 100%, rgba(190,65,142,.12), transparent 60%);
}
.mirror-demo { position: relative; z-index: 1; }

/* Mirror panel living in the hero (right column) */
.hero-mirror { flex: 0 0 clamp(400px, 40%, 470px); align-self: center; min-width: 0; }
.hero-mirror .mirror-panel { margin-top: 0; }
.hero-mirror-foot { margin-top: 14px; font-size: 13px; color: var(--text-muted); text-align: center; }
.hero-mirror-foot a { color: var(--magenta); text-decoration: none; }
.hero-mirror-foot a:hover { text-decoration: underline; }
@media (max-width: 900px) { .hero-mirror { margin-top: 44px; } }

.mirror-panel {
  position: relative; margin-top: 40px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-strong); padding: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)), var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 30px 70px -34px rgba(0,0,0,.85), 0 0 90px -34px rgba(122,96,224,.45);
}
.mirror-panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
}
.mirror-panel::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.08), transparent 60%);
}
.mirror-panel:hover::after { opacity: 1; }

.mirror-form { position: relative; z-index: 1; display: flex; gap: 12px; flex-wrap: wrap; }
.mirror-input-wrap {
  flex: 1; min-width: 240px; display: flex; align-items: center;
  background: rgba(255,255,255,.05); border: 1.5px solid var(--border-strong); border-radius: 6px; padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
}
.mirror-input-wrap:focus-within { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(190,65,142,.18); }
.mirror-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--white); font-family: var(--mono); font-size: 15px; padding: 14px 6px; }
.mirror-input::placeholder { color: var(--text-muted); }

.mirror-stage { position: relative; z-index: 1; margin-top: 22px; }
.mirror-log { font-family: var(--mono); font-size: 13px; line-height: 1.95; color: var(--text-mid); }
.mirror-log .ok { color: var(--magenta); }
.mirror-log strong { color: var(--white); font-weight: 500; }
.mirror-log .line { opacity: 0; transform: translateY(4px); animation: mirrorLogIn .3s forwards; }
@keyframes mirrorLogIn { to { opacity: 1; transform: none; } }

.mirror-result { margin-top: 18px; transform-origin: top center; animation: mirrorFlip .65s cubic-bezier(.2,.8,.2,1); }
@keyframes mirrorFlip { from { opacity: 0; transform: perspective(1000px) rotateX(-16deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mirror-result { animation: none; } .mirror-log .line { animation: none; opacity: 1; transform: none; } }
.mirror-ready { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); margin-bottom: 14px; }
.mirror-ready .ok { margin-right: 6px; }
.mirror-echo { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); letter-spacing: -.02em; color: var(--white); line-height: 1; margin-bottom: 22px; }
.mirror-echo .reflection {
  position: absolute; left: 0; top: 100%; display: block; transform: scaleY(-1); opacity: .22; pointer-events: none;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
}
.mirror-cta-line { font-size: 14px; line-height: 1.65; color: var(--text-mid); max-width: 600px; margin-bottom: 16px; }
.mirror-cta-line strong { color: var(--white); font-weight: 600; }
.mirror-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.mirror-chip { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-mid); border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px; background: rgba(255,255,255,.03); }
.mirror-chip span { color: var(--magenta); margin-right: 6px; }
.mirror-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Sneak peek — the report's shape, numbers frosted until the real run */
.mirror-peek-label { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.mirror-scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.ms { position: relative; text-align: center; padding: 18px 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.025); overflow: hidden; }
.ms-num { display: block; font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1; margin-bottom: 9px; filter: blur(8px); }
/* severity colours kept in lockstep with sample-report.html */
.ms-num.crit { color: #F87171; } .ms-num.high { color: #FB923C; } .ms-num.att { color: #FBBF24; }
.ms-num.healthy { color: #6EE7B7; } .ms-num.mat { color: #9CA3AF; }
.ms-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.mirror-locked-note { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--magenta); margin-bottom: 26px; }
.mirror-locked-note svg { width: 13px; height: 13px; flex: none; }
.mirror-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0 26px; }
.msec {
  position: relative; overflow: hidden; padding: 16px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
  border-left: 2px solid var(--magenta);
}
.msec b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: 5px; }
.msec span { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 700px) {
  .mirror-scores { grid-template-columns: repeat(3, 1fr); }
  .mirror-sections { grid-template-columns: 1fr 1fr; }
}

/* ===================================================================
   SUCCESS / THANK-YOU PAGE (success.html)
   =================================================================== */
.thanks { position: relative; overflow: hidden; background: var(--bg-deep); padding: 96px var(--px) var(--py); }
.thanks::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% -8%, rgba(190,65,142,.20), transparent 60%);
}
.thanks-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.thanks-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: 28px; color: var(--white);
  background: var(--gradient);
  box-shadow: 0 0 0 8px rgba(190,65,142,.12), 0 16px 40px -14px rgba(190,65,142,.7);
}
.thanks-check svg { width: 32px; height: 32px; }
.thanks-label { font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--magenta); margin-bottom: 18px; }
.thanks-headline { font-family: var(--display); font-size: clamp(34px, 5vw, 56px); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; color: var(--white); margin-bottom: 20px; }
.thanks-headline em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); text-shadow: 0 0 44px rgba(190,65,142,.5); }
.thanks-sub { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.62); max-width: 560px; margin: 0 auto 48px; }
.thanks-sub strong { color: var(--white); font-weight: 600; }
.thanks-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; margin-bottom: 40px; }
.thanks-step {
  position: relative; padding: 26px 24px; border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px -22px rgba(0,0,0,.85);
}
.thanks-step::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); }
.thanks-step-num { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.02em; margin-bottom: 12px; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.thanks-step-body { font-size: 14px; line-height: 1.6; color: var(--text-mid); }
.thanks-note { font-size: 14px; line-height: 1.7; color: var(--text-muted); margin-bottom: 28px; }
.thanks-note a { color: var(--magenta); text-decoration: underline; }
.thanks-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) { .thanks-steps { grid-template-columns: 1fr; } }

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 900px) {
  :root { --px: 28px; --py: 56px; }
  .exec-inner { grid-template-columns: 1fr; gap: 28px; }
  .mirror-cards { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; gap: 40px; }
  .stat-inner { grid-template-columns: 1fr; gap: 32px; }
  .cp-grid { grid-template-columns: 1fr 1fr; }
  .four-cards { grid-template-columns: 1fr; }
  .three-cards { grid-template-columns: 1fr; }
  .two-cols { grid-template-columns: 1fr; }
  .ff-cards { grid-template-columns: 1fr; }
  .pricing-cards { grid-template-columns: 1fr; }
  .after-steps { grid-template-columns: 1fr 1fr; }
  .after-steps::before { display: none; }
  .pe-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  :root { --px: 20px; --py: 52px; }
  .trust-inner { gap: 16px; }
  .cp-grid { grid-template-columns: 1fr; }
  .after-steps { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ===================================================================
   ELEVATION / DARK POLISH
   Depth, glass surfaces, gradient accents, and the "mirror" motif.
   Layered on top of the base rules above.
   =================================================================== */

/* ── Ambient depth: brand glow bleeding from the edges ──────────── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 48% at 82% -8%, rgba(122,96,224,.20), transparent 60%),
    radial-gradient(52% 42% at -5% 6%,  rgba(190,65,142,.16), transparent 58%),
    radial-gradient(46% 38% at 50% 116%, rgba(246,96,132,.12), transparent 60%);
}

/* ── Eyebrow / section labels get a glowing gradient dot ────────── */
.eyebrow, .section-label, .hero-tag, .final-cta-label,
.founder-label, .legal-label {
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before, .section-label::before, .hero-tag::before,
.final-cta-label::before, .founder-label::before, .legal-label::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 10px rgba(190,65,142,.85);
  flex: none;
}

/* ── Neon glow on the italic accent words ───────────────────────── */
.hero-headline em, .hero-headline-dark em, .hero-headline-lt em,
.final-cta-headline em {
  text-shadow: 0 0 42px rgba(190,65,142,.45);
}

/* ── Gradient dividers (light catches the seam) ─────────────────── */
.divider {
  border-top: none; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
}

/* ── Gradient numerals (premium pop) ────────────────────────────── */
.stat-number, .price-amount {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.price-amount span {
  -webkit-text-fill-color: var(--text-mid); color: var(--text-mid);
}

/* ── Glowing primary buttons ────────────────────────────────────── */
.btn-primary, .btn-cta-p, .btn-price, .btn-nav, .email-form button {
  box-shadow: 0 10px 28px -12px rgba(190,65,142,.7);
}
.btn-primary:hover, .btn-cta-p:hover, .btn-price:hover {
  box-shadow: 0 14px 34px -10px rgba(190,65,142,.85);
}

/* ── Glass surfaces: every card reads like polished glass/mirror ── */
.mirror-card, .cp-card, .scan-card, .filter-card,
.ff-card, .price-card, .data-block, .fix-band {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)),
    var(--bg-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 16px 36px -22px rgba(0,0,0,.85);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Top-edge sheen — light grazing the surface */
.mirror-card::before, .cp-card::before, .scan-card::before,
.filter-card::before, .ff-card::before, .price-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
/* Hover lift on the interactive cards */
.mirror-card:hover, .cp-card:hover, .scan-card:hover,
.filter-card:hover, .ff-card:hover, .price-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 26px 48px -22px rgba(0,0,0,.9),
    0 0 0 1px rgba(190,65,142,.12);
}
.price-card.featured {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(190,65,142,.25),
    0 24px 60px -28px rgba(190,65,142,.4);
}

/* Founder pull-quote: glassy magenta panel with glow */
.founder-pull {
  background: linear-gradient(180deg, rgba(190,65,142,.16), rgba(190,65,142,.06));
  box-shadow: 0 24px 60px -34px rgba(190,65,142,.6);
}

/* ── Localized radial glow inside the full-bleed dark sections ──── */
.hero-dark, .exec-beat, .final-cta { position: relative; overflow: hidden; }
.hero-dark::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(48% 70% at 88% 18%, rgba(122,96,224,.22), transparent 62%),
              radial-gradient(40% 60% at 8% 100%, rgba(190,65,142,.16), transparent 60%);
}
.hero-dark .hero-inner { position: relative; z-index: 1; }
.final-cta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(50% 60% at 50% -10%, rgba(190,65,142,.18), transparent 60%);
}
.final-cta > * { position: relative; z-index: 1; }

/* ── THE MIRROR MOTIF — orb + its reflection in the home/AI hero ── */
.hero-split { display: flex; align-items: center; gap: 56px; }
.hero-copy { flex: 1 1 560px; min-width: 0; }
.hero-orb {
  flex: 0 0 340px; position: relative;
  display: flex; align-items: center; justify-content: center;
  align-self: stretch;
}
.hero-orb-img {
  width: 320px; height: auto; display: block;
  filter: drop-shadow(0 0 70px rgba(190,65,142,.5)) drop-shadow(0 0 30px rgba(122,96,224,.4));
  animation: orb-float 7s ease-in-out infinite;
}
/* The reflection — literal mirror of the mark, fading into the floor */
.hero-orb::after {
  content: ''; position: absolute; top: calc(50% + 150px); left: 50%;
  width: 320px; height: 320px;
  transform: translateX(-50%) scaleY(-1);
  background: url(/assets/intuitionai-orb.png) center / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 52%);
          mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 52%);
  opacity: .5; filter: blur(1px); pointer-events: none;
}
@keyframes orb-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb-img { animation: none; }
}

/* ── HERO: framed, clickable sample-report preview ──────────────── */
.hero-report {
  flex: 0 0 clamp(380px, 42%, 500px); align-self: center;
  position: relative; display: block; text-decoration: none;
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--border-strong); background: var(--bg-deep);
  box-shadow:
    0 44px 90px -34px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 90px -24px rgba(190,65,142,.5);
  transform: perspective(1700px) rotateY(-7deg) rotateX(1.5deg);
  transform-origin: center; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
.hero-report:hover {
  transform: perspective(1700px) rotateY(-2deg) translateY(-5px);
  box-shadow:
    0 54px 110px -34px rgba(0,0,0,.9),
    0 0 0 1px rgba(255,255,255,.05),
    0 0 120px -20px rgba(190,65,142,.65);
}
.hero-report-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
}
.hrb-dots { display: inline-flex; gap: 6px; }
.hrb-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.hrb-dots i:first-child { background: #F66084; }
.hrb-dots i:nth-child(2) { background: #E0B341; }
.hrb-dots i:nth-child(3) { background: #4FB477; }
.hrb-label { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.hero-report-shot { display: block; position: relative; }
.hero-report-shot img { display: block; width: 100%; height: auto; }
/* fade the bottom edge — implies there's more, drives the click */
.hero-report-shot::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to bottom, transparent, var(--bg-deep));
  pointer-events: none;
}
.hero-report-cue {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 22px 18px 16px; text-align: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--text);
}
.hero-report:hover .hero-report-cue { color: var(--magenta); }

@media (max-width: 900px) {
  .hero-split { display: block; }
  .hero-orb { display: none; }
  .hero-report {
    max-width: 460px; margin: 44px auto 0;
    transform: none;
  }
  .hero-report:hover { transform: translateY(-4px); }
}

/* ===================================================================
   SCROLL REVEAL  (progressive enhancement — only active when JS adds
   .js-reveal to <html>; without JS everything is visible by default)
   =================================================================== */
.js-reveal .r {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.js-reveal .r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .r { opacity: 1; transform: none; transition: none; }
}

/* ===================================================================
   SIGNATURE — EXPLOIT VELOCITY  "The window is closing."
   =================================================================== */
.velocity-bg { background: var(--bg-deep); position: relative; overflow: hidden; }
.velocity-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(246,96,132,.16), transparent 60%),
    radial-gradient(45% 60% at 0% 100%, rgba(122,96,224,.12), transparent 60%);
}
.velocity { position: relative; z-index: 1; }
.velo-chart { margin: 44px 0 0; display: flex; flex-direction: column; }
.velo-row {
  display: grid; grid-template-columns: 64px 1fr clamp(96px, 14vw, 150px);
  align-items: center; gap: clamp(16px, 3vw, 32px);
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.velo-row:first-child { border-top: 1px solid var(--border); }
.velo-year { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--text-muted); }
.velo-track { position: relative; height: 16px; border-radius: 9px; background: rgba(255,255,255,.05); overflow: hidden; }
.velo-fill {
  position: absolute; top: 0; bottom: 0; left: 0; width: var(--w); border-radius: 9px;
  background: linear-gradient(90deg, var(--blue-brand), var(--magenta));
  transition: width 1.1s cubic-bezier(.2,.75,.2,1);
}
.js-reveal .velo-fill { width: 0; }
.js-reveal .velo-row.in .velo-fill { width: var(--w); }
.velo-val {
  font-family: var(--display); font-weight: 700; font-size: clamp(19px, 2.4vw, 27px);
  letter-spacing: -.02em; color: var(--text); text-align: right; white-space: nowrap;
}
.velo-val small { font-family: var(--body); font-weight: 500; font-size: .58em; color: var(--text-mid); margin-left: 3px; }
/* The hot "now" row */
.velo-row.hot .velo-fill { background: linear-gradient(90deg, #F66084, #FF3F5F); box-shadow: 0 0 26px rgba(255,63,95,.7); }
.velo-row.hot .velo-val { color: #fff; text-shadow: 0 0 30px rgba(255,63,95,.65); }
.velo-row.hot .velo-year { color: var(--pink); }
/* The unknown future row */
.velo-row.next .velo-track { background: transparent; }
.velo-row.next .velo-fill {
  background: repeating-linear-gradient(90deg, rgba(190,65,142,.95) 0 7px, transparent 7px 15px);
  animation: velo-pulse 1.8s ease-in-out infinite;
}
.velo-row.next .velo-year, .velo-row.next .velo-val { color: var(--magenta); }
@keyframes velo-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .velo-row.next .velo-fill { animation: none; opacity: .8; } }
.velo-punch { margin-top: 48px; max-width: 680px; }
.velo-punch p { font-size: 17px; line-height: 1.75; color: var(--text-mid); margin-bottom: 16px; }
.velo-punch strong { color: var(--text); font-weight: 600; }
.velo-kicker {
  font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; color: var(--text);
  margin-top: 10px !important;
}
.velo-kicker em { font-style: italic; font-variation-settings: 'SOFT' 100; color: var(--magenta); text-shadow: 0 0 44px rgba(190,65,142,.5); }

/* ===================================================================
   AI MACRO  — animated count-up stats
   =================================================================== */
.macro-bg { background: var(--bg-alt); }
.macro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.macro-stat {
  position: relative; padding: 38px 32px; border: 1px solid var(--border); border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 36px -22px rgba(0,0,0,.85);
}
.macro-stat::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.macro-num {
  display: block; font-family: var(--display); font-weight: 700; line-height: 1;
  font-size: clamp(50px, 6vw, 78px); letter-spacing: -.04em; margin-bottom: 18px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.macro-desc { font-size: 15px; line-height: 1.65; color: var(--text-mid); margin-bottom: 14px; }
.macro-src { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--text-muted); }

/* ===================================================================
   MICRO-INTERACTIONS
   =================================================================== */
/* Sweeping shimmer across primary buttons on hover */
.btn-primary, .btn-cta-p, .btn-price { position: relative; overflow: hidden; }
.btn-primary::after, .btn-cta-p::after, .btn-price::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.btn-primary:hover::after, .btn-cta-p:hover::after, .btn-price:hover::after { left: 130%; }
/* Nav orb gently breathes on hover */
.nav-logo .nav-mark { transition: transform .3s ease, filter .3s ease; }
.nav-logo:hover .nav-mark { transform: rotate(-6deg) scale(1.06); filter: drop-shadow(0 0 10px rgba(190,65,142,.6)); }

@media (max-width: 900px) {
  .macro-grid { grid-template-columns: 1fr; }
  .velo-row { grid-template-columns: 52px 1fr 96px; gap: 14px; }
}
@media (max-width: 600px) {
  .velo-val { font-size: 16px; }
  .velo-row { grid-template-columns: 46px 1fr 84px; }
}

/* ===================================================================
   AI-NATIVE TYPE OVERRIDES  (geometric sans + gradient accents + pills)
   =================================================================== */

/* Accent words: gradient fill, upright (no serif italic, no glow) */
.hero-headline em, .hero-headline-dark em, .hero-headline-lt em,
.section-headline em, .section-headline-md em, .final-cta-headline em,
.velo-kicker em, .fix-band-text em, .thanks-headline em, .legal-title em {
  font-style: normal;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}

/* Space Grotesk has no italic — neutralize the old Fraunces italics */
.mirrors-concept, .founder-pull-text, .context-close, .promise-text,
.final-promise, .founder-sig-name, .promise-text, .velo-kicker {
  font-style: normal;
}

/* Tighter tracking suits a geometric sans at display sizes */
.hero-headline, .hero-headline-dark, .hero-headline-lt,
.section-headline, .section-headline-md, .exec-headline,
.final-cta-headline, .thanks-headline, .legal-title, .card-name,
.price-amount, .stat-number, .macro-num, .velo-kicker {
  letter-spacing: -.03em;
}

/* ── Pill eyebrows (bordered, rounded) ──────────────────────────── */
.eyebrow, .section-label, .hero-tag, .final-cta-label, .founder-label, .legal-label {
  display: inline-block;
  border: 1px solid rgba(190,65,142,.5);
  border-radius: 999px;
  padding: 7px 16px 6px;
  color: var(--label);
  font-size: 12px;
  letter-spacing: .07em;
  font-weight: 500;
}
.eyebrow::before, .section-label::before, .hero-tag::before,
.final-cta-label::before, .founder-label::before, .legal-label::before {
  display: none;
}

/* ===================================================================
   HOME (reference layout) — signal hero, dark cards on light
   =================================================================== */
.hero-headline-lg { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; }

/* Hero signal-wave visual */
.hero-signal { flex: 0 0 clamp(420px, 46%, 560px); align-self: center; position: relative; }
.hero-signal canvas {
  display: block; width: 100%; height: 340px;
  border-radius: 14px; border: 1px solid var(--border-strong);
  background:
    radial-gradient(60% 80% at 30% 50%, rgba(190,65,142,.14), transparent 60%),
    radial-gradient(50% 80% at 85% 50%, rgba(122,96,224,.16), transparent 60%),
    var(--bg-deep);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.85), 0 0 90px -34px rgba(122,96,224,.45);
}
.hero-signal-cap {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

/* Dark cards on the light "Our first mirrors" section (reference look) */
.mirrors.lightsec .mirror-card {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), #14222E;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 50px -30px rgba(26,43,56,.55);
}
.mirrors.lightsec .mirror-card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.mirrors.lightsec .mirror-card::after { background: radial-gradient(180px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.08), transparent 60%); }
.mirrors.lightsec .card-name { color: #fff; }
.mirrors.lightsec .card-body { color: rgba(255,255,255,.62); }
.mirrors.lightsec .card-cta {
  background: var(--gradient); -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: #fff; color: #fff;
}

/* mirrors-concept now sits AFTER the cards as a closing line */
.mirrors.lightsec .mirrors-concept { margin-top: 36px; margin-bottom: 0; font-weight: 600; }

@media (max-width: 900px) {
  .hero-signal { display: block; margin-top: 36px; }
  .hero-signal canvas { height: 240px; }
}

/* ===================================================================
   CRAFT PASS — ambient technical grid + richer mesh depth
   =================================================================== */

/* Global faint blueprint grid, masked so it's strongest up top and fades out.
   Light (parchment) sections sit opaque on top, so the grid only reads on the
   dark areas — giving the whole site a designed, instrument-panel feel. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(135% 95% at 50% -5%, #000 28%, transparent 72%);
          mask-image: radial-gradient(135% 95% at 50% -5%, #000 28%, transparent 72%);
}

/* Grid layered into the full-bleed dark sections too (their solid bg-colour
   stays; only the line image is added on top of it). */
.exec-beat, .final-cta, .velocity-bg, .hero-dark, .mirror-demo-bg, .thanks {
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 50px 50px;
}

/* Richer ambient mesh glow */
body::before {
  background:
    radial-gradient(56% 46% at 84% -6%, rgba(122,96,224,.24), transparent 60%),
    radial-gradient(50% 42% at -6% 4%,  rgba(190,65,142,.20), transparent 58%),
    radial-gradient(44% 36% at 50% 118%, rgba(246,96,132,.14), transparent 60%);
}

/* Buttons get a slightly stronger, cleaner glow + lift */
.btn-primary, .btn-cta-p, .btn-price, .email-form button {
  box-shadow: 0 12px 30px -12px rgba(190,65,142,.65), 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease;
}
.btn-primary:hover, .btn-cta-p:hover, .btn-price:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px -10px rgba(190,65,142,.8), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Animated underline on text links (footer, inline) */
.footer-links a, .pe-cta, .card-cta { position: relative; }

/* ===================================================================
   HERO HEADLINE + CTA FRAMING REFINEMENTS
   =================================================================== */
.hero-headline-lg { font-size: clamp(33px, 4.2vw, 52px); line-height: 1.1; text-wrap: balance; }
.hero-headline, .hero-headline-dark, .hero-headline-lt, .section-headline,
.section-headline-md, .final-cta-headline, .exec-headline { text-wrap: balance; }

/* Clearer button framing */
.btn-ghost { border: 1.5px solid rgba(255,255,255,.24); }
.btn-ghost:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.04); }

/* Framed, two-line final CTAs (reference style) */
.final-buttons .btn-cta-p, .final-buttons .btn-cta-g {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 234px; padding: 15px 30px; line-height: 1.15;
}
.final-buttons .btn-cta-g { border-color: rgba(255,255,255,.3); }
.bf-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }

/* ===================================================================
   MIRROR CARD CTA — framed gradient button (reference style)
   =================================================================== */
.card-cta {
  align-self: flex-start;
  background: var(--gradient); color: #fff !important; -webkit-text-fill-color: #fff;
  padding: 12px 22px; border-radius: 8px;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 28px -12px rgba(190,65,142,.6);
  transition: transform .15s ease, box-shadow .2s ease;
}
.card-cta:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -10px rgba(190,65,142,.82); }
.mirrors.lightsec .card-cta { -webkit-text-fill-color: #fff; color: #fff; }

/* ===================================================================
   FIXES — prominent card CTA, white "why now" section, flowing text
   =================================================================== */

/* Card CTA: a clearly prominent, full-bright button */
.card-cta {
  padding: 15px 30px; font-size: 15px; gap: 10px; border-radius: 9px;
  box-shadow: 0 16px 38px -10px rgba(190,65,142,.85), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* "Why it matters now" — white background (contrast with the cream above)
   and let the headline + intro flow across the full width, not a narrow column */
.context.lightsec { --bg: #ffffff; background: #ffffff; }
.context .section-headline { max-width: none; }
.context .context-intro { max-width: 1040px; }
.context .context-examples { max-width: none; }

/* ===================================================================
   LEGIBILITY + MIRROR POLISH
   =================================================================== */

.hero-signal canvas { height: 340px; }

/* Headlines + display statements flow continuously across the full width,
   not staggered into a narrow left column */
.section-headline, .section-headline-md, .mirrors-concept { max-width: none; }
.section-headline, .section-headline-md { text-wrap: pretty; }
.mirrors-intro { max-width: 880px; }

/* "Why we built this" on white, so the site breathes between the dark beats */
.founder-bg { background: #ffffff; }
.founder-bg.lightsec { --bg: #ffffff; }

/* AI Mirror card CTA — dark + white border (product not launched yet),
   matching the header's "Explore AI Mirror" ghost treatment */
.mirrors.lightsec .card-cta.card-cta-ghost {
  background: transparent;
  -webkit-text-fill-color: rgba(255,255,255,.92); color: rgba(255,255,255,.92);
  border: 1.5px solid rgba(255,255,255,.32); box-shadow: none;
}
.mirrors.lightsec .card-cta.card-cta-ghost:hover {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.55); transform: translateY(-1px);
}

/* Lift body copy on dark cards/heroes for legibility */
.mirrors.lightsec .card-body { color: rgba(255,255,255,.74); }
.hero-sub-dark { color: rgba(255,255,255,.76); }
.hero-signal-cap { color: rgba(255,255,255,.55); }

/* ===================================================================
   FOUNDER SECTION — "It's your turn." highlight + founder faces
   =================================================================== */
.founder-call { align-self: center; }
.founder-call-line {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 30px;
}
.founder-faces { display: flex; gap: 18px; margin-bottom: 18px; }
.founder-face { margin: 0; text-align: center; }
.founder-face img {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 10px 24px -10px rgba(26,43,56,.45);
  display: block; margin: 0 auto;
}
.founder-face figcaption {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mid); margin-top: 11px;
}
.founder-call-role {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px;
}
@media (max-width: 900px) {
  .founder-call { align-self: start; }
}

/* founder note: closing line + signature faces with per-person roles */
.founder-body .founder-turn {
  font-family: var(--display); font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--text);
  margin-top: 26px;
}
.founder-sig { margin-top: 34px; }
.founder-face img { width: 76px; height: 76px; }
.founder-face figcaption { margin-top: 10px; line-height: 1.25; }
.ff-name { display: block; font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--text); }
.ff-role { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }

/* ===================================================================
   CRAFT ELEVATION v2 — air, presence, meaningful motion, depth
   Refinement only. Respects prefers-reduced-motion.
   =================================================================== */
:root { --py: 78px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; }
@media (max-width: 900px) { :root { --py: 64px; --px: 28px; } }
@media (max-width: 600px) { :root { --py: 54px; --px: 20px; } }

::selection { background: rgba(190,65,142,.32); color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 5px; }

/* NAV — translucent + blurred + tighter on scroll (Apple-grade chrome) */
nav { transition: height .28s ease, background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease, border-color .28s ease; }
nav.scrolled { height: 58px; background: rgba(12,23,32,.7); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: rgba(255,255,255,.1); }
.nav-links a:not(.btn-nav) { position: relative; }
.nav-links a:not(.btn-nav)::after { content:''; position:absolute; left:0; right:0; bottom:-7px; height:1.5px; background: var(--magenta); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.nav-links a:not(.btn-nav):hover::after { transform: scaleX(1); }

/* BUTTONS — lift + glow (kills the cheap opacity fade), softer radius */
.btn-primary, .btn-cta-p, .btn-nav, .btn-ghost, .btn-cta-g { border-radius: var(--r-sm); }
.btn-primary, .btn-cta-p, .btn-nav {
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, filter .2s ease;
  box-shadow: 0 12px 30px -14px rgba(190,65,142,.55);
}
.btn-primary:hover, .btn-cta-p:hover, .btn-nav:hover {
  opacity: 1; transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 20px 46px -16px rgba(190,65,142,.9);
}
.btn-ghost, .btn-cta-g { transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .25s ease, background .25s ease; }
.btn-ghost:hover, .btn-cta-g:hover { transform: translateY(-2px); }

/* HERO — own the first screen; larger, tighter headline */
.hero.hero-split { min-height: clamp(480px, 72vh, 680px); align-items: center; padding-top: 60px; padding-bottom: 72px; }
.hero-headline-lg { font-size: clamp(37px, 4.8vw, 60px); line-height: 1.05; letter-spacing: -.032em; }
.hero .hero-sub { font-size: 19px; line-height: 1.65; max-width: 470px; }

/* HERO SIGNAL — depth behind the panel + a gentle float */
.hero-signal { isolation: isolate; }
.hero-signal::before {
  content:''; position:absolute; inset:-14% -12%; z-index:-1;
  background: radial-gradient(55% 60% at 72% 50%, rgba(122,96,224,.30), transparent 70%),
              radial-gradient(45% 55% at 28% 50%, rgba(246,96,132,.16), transparent 72%);
  filter: blur(40px);
}
.hero-signal canvas { animation: heroFloat 9s ease-in-out infinite; }
@keyframes heroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* CARDS — softer radius, refined hover lift */
.mirror-card { border-radius: var(--r-md); transition: transform .26s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .26s ease; }
.mirrors.lightsec .mirror-card:hover { transform: translateY(-4px); box-shadow: 0 36px 70px -34px rgba(26,43,56,.72); border-color: rgba(255,255,255,.2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-signal canvas { animation: none; }
  .btn-primary, .btn-cta-p, .btn-nav, .btn-ghost, .btn-cta-g, .mirror-card { transition: none; }
}

/* ===================================================================
   CRAFT ELEVATION v2 — pass 2: the crescendo + the thin section
   =================================================================== */
/* FINAL CTA — make the close land like a finale */
.final-cta { padding-top: 92px; padding-bottom: 92px; }
.final-cta-label { margin-bottom: 26px; }
.final-cta-headline { font-size: clamp(40px, 5.4vw, 64px); letter-spacing: -.035em; line-height: 1.05; max-width: 820px; margin-bottom: 40px; }
.final-cta::after {
  background:
    radial-gradient(46% 56% at 50% 6%, rgba(190,65,142,.30), transparent 62%),
    radial-gradient(40% 50% at 80% 92%, rgba(122,96,224,.18), transparent 60%),
    radial-gradient(34% 46% at 16% 90%, rgba(246,96,132,.12), transparent 60%);
}

/* WHY IT MATTERS NOW — more presence + a gradient punchline */
.context .example-item { gap: 28px; padding: 24px 0; }
.context .example-bar { background: var(--gradient); }
.context .example-text { font-size: 17px; }
.context-close { font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; font-style: normal; letter-spacing: -.02em; line-height: 1.2; }
.context-close em {
  font-style: normal;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* pass 3: mobile eyebrow on one line + concept-line gradient accent */
@media (max-width: 600px) { .eyebrow { font-size: 10px; letter-spacing: .05em; } }
.mirrors-concept em {
  font-style: normal;
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ===================================================================
   HOLD UP THE MIRROR — cinematic scan choreography
   =================================================================== */
.mirror-scan-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-family: var(--mono); font-size: 12.5px; }
.mirror-fav { border-radius: 4px; flex: none; display: block; }
.msh-domain { color: var(--white); font-weight: 500; }
.msh-status { margin-left: auto; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--magenta); }
.mirror-log .line { display: flex; align-items: center; gap: 10px; }
.mirror-log .line .ltext { transition: color .3s ease; }
.mirror-log .line.done .ltext { color: var(--text-muted); }
.spin { width: 13px; height: 13px; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.16); border-top-color: var(--magenta); animation: mspin .7s linear infinite; }
.mirror-log .line.done .spin { border: none; animation: none; position: relative; background: rgba(190,65,142,.16); }
.mirror-log .line.done .spin::after { content: ''; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7px; border: solid var(--magenta); border-width: 0 2px 2px 0; transform: rotate(42deg); }
@keyframes mspin { to { transform: rotate(360deg); } }
.mirror-progress { margin-top: 16px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.mirror-progress span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--gradient); box-shadow: 0 0 12px rgba(190,65,142,.6); transition: width .55s cubic-bezier(.4,.8,.3,1); }
.mirror-ready .mirror-fav { vertical-align: -5px; margin: 0 7px; }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } .mirror-progress span { transition: none; } }

/* ===================================================================
   SECURITY MIRROR — localized depth on the dark story sections
   (so they read as rich as the hero, not flat). Content stays on top.
   =================================================================== */
.scan-bg, .filter-bg, .findfixbg, .sample-bg { position: relative; overflow: hidden; }
.scan-bg > .section, .filter-bg > .section, .findfixbg > .section, .sample-bg > .section { position: relative; z-index: 1; }
.scan-bg::after, .filter-bg::after, .findfixbg::after, .sample-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(48% 62% at 86% 10%, rgba(122,96,224,.15), transparent 60%),
    radial-gradient(44% 58% at 8% 96%, rgba(190,65,142,.11), transparent 60%);
}
.filter-bg::after { background:
    radial-gradient(46% 60% at 12% 8%, rgba(246,96,132,.12), transparent 60%),
    radial-gradient(46% 60% at 90% 92%, rgba(122,96,224,.14), transparent 60%); }

/* three-tests "Reachable?/Exploitable?/Costly?" pills (Ruchika's filter section) */
.test-pill { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--magenta);
  background: var(--magenta-pale); border: 1px solid rgba(190,65,142,.32);
  border-radius: 999px; padding: 3px 9px; vertical-align: 1px; }

/* "The window is closing" — compact urgency band (shrunk from a full section) */
.window-strip .window-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 40px; padding-bottom: 40px; flex-wrap: wrap; }
.ws-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }
.ws-line { font-family: var(--display); font-size: clamp(18px, 2.1vw, 24px); font-weight: 600; color: #fff; line-height: 1.32; max-width: 540px; }
.ws-line em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ws-data { display: flex; align-items: center; gap: 16px; flex: none; }
.ws-pt { display: flex; flex-direction: column; align-items: center; }
.ws-pt b { font-family: var(--display); font-size: 22px; font-weight: 700; color: #fff; line-height: 1; }
.ws-pt.hot b { color: var(--pink); }
.ws-pt small { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.ws-arrow { color: var(--text-muted); font-size: 16px; }
@media (max-width: 760px) { .window-strip .window-strip-inner { flex-direction: column; align-items: flex-start; gap: 22px; } }

/* founder pull-quote attribution */
.founder-pull-cite { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--label); margin-top: 20px; }

/* ===================================================================
   WHY IT MATTERS NOW — scenario cards (DARK tiles, matching "Our first mirrors")
   =================================================================== */
.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }
.scenario-card { display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), #14222E;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: 28px 26px 26px;
  box-shadow: 0 24px 50px -30px rgba(26,43,56,.55);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.scenario-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.2); box-shadow: 0 36px 66px -30px rgba(26,43,56,.7); }
.scenario-icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: var(--r-md); background: rgba(190,65,142,.18); color: #F091BF; margin-bottom: 22px; }
.scenario-icon svg { width: 24px; height: 24px; }
.scenario-title { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: #fff; margin: 0 0 10px; }
.scenario-line { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.64); margin: 0 0 24px; flex: 1; }
.scenario-shift { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-top: 20px; }
/* green→pink hairline: cost climbs from "now" to "later" */
.scenario-shift::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(95,198,138,.6), rgba(240,145,191,.6)); }
.shift-now, .shift-late { display: flex; flex-direction: column; gap: 3px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
.shift-now { color: #5FC68A; }
.shift-late { color: #F091BF; text-align: right; }
.shift-now small, .shift-late small { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.shift-arrow { display: inline-flex; align-items: center; justify-content: center; color: #F091BF; opacity: .55; transition: opacity .22s ease, transform .22s ease; }
.shift-arrow svg { width: 22px; height: 22px; }
.scenario-card:hover .shift-arrow { opacity: 1; transform: translateX(2px); }
@media (max-width: 900px) { .scenarios { grid-template-columns: 1fr; gap: 16px; } .scenario-line { margin-bottom: 20px; } }

/* ===================================================================
   PAGE POLISH — hero trust line, display founder note, sub-font sizing
   =================================================================== */
/* Sub-font consistency: section intros = 17px, tile bodies = 15px */
.hero-sub, .hero .hero-sub, .context-intro, .mirrors-intro { font-size: 17px; line-height: 1.65; }
.exec-body p { font-size: 17px; }
.cp-body, .filter-card-body { font-size: 15px; }

/* Hero trust microcopy under the CTAs */
.hero-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 24px; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #5FC68A; flex: none; }

/* "Why we built this" — display type gives the note real weight */
.founder-note p { font-family: var(--display); font-size: clamp(19px, 2vw, 23px); line-height: 1.5; font-weight: 500; letter-spacing: -.012em; color: var(--text); }
.founder-note p + p { margin-top: 12px; }
.founder-note em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* ===================================================================
   "Enter your website" widget v2 — clear prompt, readable numbers, reset
   =================================================================== */
.hero-dark { padding-top: 66px; padding-bottom: 74px; }   /* loosen to match the home hero */
.mirror-prompt { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--label); margin-bottom: 14px; }
.mirror-result-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; color: var(--text-mid); margin-bottom: 16px; }
.mirror-result-head strong { color: var(--white); font-weight: 600; }
.mirror-result-head .mirror-fav { vertical-align: -4px; border-radius: 4px; }
.mirror-rest-note { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin-top: 14px; max-width: 460px; }
.mirror-cta-sub { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 12px; }
.mirror-reset { background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--text-muted); padding: 10px 4px; text-decoration: underline; text-underline-offset: 3px; }
.mirror-reset:hover { color: var(--text); }

/* ===================================================================
   SM round 3 — favicon hook, bigger "one report" line, window legibility
   =================================================================== */
/* #11 — the ENTERED company's favicon is the personal hook in the result */
.mirror-result-id { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mirror-fav-lg { width: 40px; height: 40px; border-radius: 9px; background: rgba(255,255,255,.06); padding: 4px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.mirror-fav-lg.noimg { display: none; }
.mirror-result-id-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.mirror-result-id-txt strong { font-family: var(--display); font-size: 17px; font-weight: 700; color: #fff; word-break: break-all; }
.mirror-result-id-txt span { font-size: 12px; color: var(--text-muted); }

/* #8 — "One report. One fix plan." carries real weight (Ruchika's design) */
.scan-bg .line-close { font-family: var(--display); font-size: clamp(21px, 2.7vw, 30px); font-weight: 600; line-height: 1.28; letter-spacing: -.018em; color: #fff; max-width: 940px; margin-top: 8px; }

/* #4 — "The window is closing": legible numbers/years + calm→urgent escalation */
.ws-eyebrow { font-size: 11px; letter-spacing: .14em; color: var(--label); }
.ws-line { color: #fff; font-weight: 600; }
.ws-data { gap: 18px; }
.ws-pt b { font-size: 28px; }
.ws-pt small { font-size: 11px; letter-spacing: .05em; color: rgba(255,255,255,.62); margin-top: 6px; }
.ws-pt:nth-child(3) b { color: #F2A33C; }
.ws-pt.hot b { color: var(--pink); }
.ws-arrow { font-size: 18px; color: rgba(255,255,255,.42); }

/* widget "See your report's shape" — secondary treatment (NOT the buy-CTA gradient) */
.mirror-go { display: inline-block; font-family: inherit; font-size: 15px; font-weight: 600; padding: 14px 24px; border-radius: var(--r-sm); cursor: pointer; color: var(--label); background: rgba(190,65,142,.10); border: 1.5px solid rgba(190,65,142,.6); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .18s ease; }
.mirror-go:hover { background: rgba(190,65,142,.2); border-color: var(--magenta); color: #fff; transform: translateY(-1px); }

/* ===================================================================
   SM round 4 — window-strip clarity, compact scan tiles, filter prominence
   =================================================================== */
/* "The window is closing": fewer colors (white + one pink), evident years */
.ws-eyebrow { font-size: 11px; letter-spacing: .18em; color: var(--label); font-weight: 600; margin-bottom: 14px; }
.ws-pt b { font-size: 30px; color: #fff; }
.ws-pt:nth-child(3) b { color: #fff; }
.ws-pt.hot b { color: var(--pink); }
.ws-pt small { font-size: 13px; color: rgba(255,255,255,.72); margin-top: 8px; font-weight: 500; letter-spacing: .03em; }
.ws-arrow { font-size: 20px; color: rgba(255,255,255,.3); }

/* Compact scan tiles (icon + title + body sat too far apart) */
.four-cards { gap: 14px; }
.scan-card { padding: 20px 22px 22px; }
.scan-icon { width: 36px; height: 36px; margin-bottom: 12px; }
.scan-icon svg { width: 18px; height: 18px; }
.scan-card-title { font-size: 16px; margin-bottom: 6px; }
.scan-card-body { font-size: 13.5px; line-height: 1.5; }

/* "How we filter": make the three-tests gateway + the conclusion prominent */
.filter-lead { font-family: var(--display); font-size: clamp(19px, 2.3vw, 25px); font-weight: 600; color: #fff; letter-spacing: -.015em; line-height: 1.3; margin: 6px 0 30px; }
.filter-lead b { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.filter-sequence { font-family: var(--display); font-size: clamp(20px, 2.5vw, 27px); font-weight: 600; letter-spacing: -.015em; line-height: 1.35; padding: 24px 28px; }

/* ===================================================================
   PRICING v2 — savings-forward (winner) + per-scan spine + quiet ribbon
   Annual recommended at rest; hovering EITHER card highlights THAT card.
   =================================================================== */
.pricing-cards { align-items: start; }
.price-card--single, .price-card--annual {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* Quiet "Recommended" ribbon + gradient hairline (replaces the loud badge) */
.price-eyebrow {
  display: inline-flex; align-items: center; gap: 7px; height: 22px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta);
}
.price-card--annual .price-eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gradient);
}
.price-card--annual::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient);
}
/* Per-scan economics — the shared comparison spine across both cards */
.price-perscan {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: -8px 0 24px;
}
.price-perscan--on { color: var(--magenta); }
/* Savings hero — the load-bearing element */
.save-hero {
  margin: 4px 0 22px; padding: 22px 24px; border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(246,96,132,.10), rgba(190,65,142,.10) 55%, rgba(122,96,224,.10));
  border: 1px solid rgba(190,65,142,.3);
}
.save-hero__pct {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--magenta); margin-bottom: 6px;
}
.save-hero__amt {
  font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1.02;
  letter-spacing: -.03em; color: var(--text);
}
.save-hero__math {
  font-family: var(--mono); font-size: 12px; line-height: 1.55; letter-spacing: .01em;
  color: var(--text-mid); margin-top: 10px;
}
.save-hero__math strong { color: var(--magenta); font-weight: 700; }
.save-hero__strike { color: var(--text-muted); text-decoration: line-through; }
.price-amount--annual { font-size: 30px; margin-bottom: 4px; color: var(--text-mid); }
.price-amount--annual span { font-size: 15px; }
/* HIGHLIGHT MODEL */
.lightsec .price-card--single:hover, .lightsec .price-card--single:focus-within,
.lightsec .price-card--annual:hover, .lightsec .price-card--annual:focus-within {
  transform: translateY(-4px); border-color: var(--magenta);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 22px 44px -24px rgba(26,43,56,.45), 0 0 0 1px var(--magenta);
}
.pricing-cards:has(.price-card--single:hover) .price-card--annual,
.pricing-cards:has(.price-card--single:focus-within) .price-card--annual {
  border-color: var(--border-strong); border-width: 1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 14px 30px -22px rgba(26,43,56,.28);
}
.price-card--single:hover .btn-price-ghost, .price-card--single:focus-within .btn-price-ghost {
  border-color: var(--magenta); color: var(--magenta);
}
@media (prefers-reduced-motion: reduce) {
  .price-card--single:hover, .price-card--single:focus-within,
  .price-card--annual:hover, .price-card--annual:focus-within { transform: none; }
}
@media (max-width: 720px) { .save-hero__amt { font-size: 32px; } }

/* outside-in section: panel eyebrows (outside-in vs inside-out) + prominent conclusion */
.outside-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 12px; }
.unseen .outside-eyebrow { color: var(--text-muted); }
.outside-note { font-family: var(--display); font-size: clamp(18px, 2.2vw, 23px); font-weight: 600; color: var(--text); letter-spacing: -.012em; line-height: 1.35; }
.outside-note strong { color: var(--magenta); font-weight: 700; }

/* ===================================================================
   FOR PRIVATE EQUITY — portfolio-level scan, its own branded section
   (Ruchika's slate-band treatment, elevated to a full section)
   =================================================================== */
.pe-section { padding: 12px 0 8px; }
.pe-band {
  background: linear-gradient(135deg, rgba(190,65,142,.10), rgba(122,96,224,.06)), var(--bg-deep);
  border: 1px solid rgba(190,65,142,.22); border-radius: var(--r-lg);
  padding: 38px 44px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.pe-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #F091BF; margin-bottom: 12px; }
.pe-headline { font-family: var(--display); font-size: clamp(24px, 3vw, 31px); font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; }
.pe-headline em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.pe-body { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.72); max-width: 560px; margin-bottom: 24px; }
.pe-points { display: flex; gap: 34px; }
.pe-point { display: flex; flex-direction: column; }
.pe-point b { font-family: var(--display); font-size: 26px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1; }
.pe-point small { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 6px; }
.pe-cta-btn { display: inline-block; white-space: nowrap; flex: none; font-family: var(--display); font-size: 14px; font-weight: 600; color: #fff; background: var(--gradient); padding: 14px 24px; border-radius: var(--r-sm); text-decoration: none; transition: transform .18s ease, box-shadow .2s ease; }
.pe-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -18px rgba(190,65,142,.7); }
@media (max-width: 760px) {
  .pe-band { flex-direction: column; align-items: flex-start; gap: 26px; padding: 30px 26px; }
  .pe-points { gap: 26px; }
}

/* ===================================================================
   PRICING v3 — 67% is the hero (not the misread $1,335), consistent
   full-width CTAs, and hover swaps which card owns the filled button.
   =================================================================== */
.save-hero { margin: 4px 0 20px; }
.save-hero__amt { font-size: 46px; line-height: 1; color: var(--magenta); }
.save-hero__amt span { font-size: 20px; font-weight: 600; color: var(--text-mid); letter-spacing: 0; }
/* equal-height cards so the CTAs sit on the same baseline */
.pricing-cards { align-items: stretch; }
.price-card--single, .price-card--annual { height: 100%; }
/* identical, full-width CTAs pinned to the card bottom */
.price-card--single .btn-price, .price-card--single .btn-price-ghost,
.price-card--annual .btn-price, .price-card--annual .btn-price-ghost {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  margin-top: auto; padding: 14px 24px; font-size: 15px; font-weight: 600;
  border-radius: var(--r-sm); border: 1.5px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.price-card--single .btn-price-ghost { border-color: var(--border-strong); background: transparent; color: var(--text); }
/* hover the single card -> its CTA fills, the annual CTA steps back */
.pricing-cards:has(.price-card--single:hover) .price-card--single .btn-price-ghost { background: var(--gradient); color: #fff; border-color: transparent; }
.pricing-cards:has(.price-card--single:hover) .price-card--annual .btn-price { background: transparent; color: var(--text); border-color: var(--border-strong); }

/* ===================================================================
   "THE WINDOW IS CLOSING" v2 — the collapse made visual (shrinking bars)
   =================================================================== */
.window-strip.velocity-bg { padding-top: 60px; padding-bottom: 64px; }
.ws-inner2 { max-width: var(--max); }
.ws-headline { font-family: var(--display); font-size: clamp(26px, 3.6vw, 42px); font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.08; margin: 12px 0 34px; }
.ws-headline em { font-style: normal; }
.ws-headline em:first-of-type { color: rgba(255,255,255,.5); }
.ws-headline em:last-of-type { color: var(--pink); }
.ws-bars { display: flex; flex-direction: column; gap: 15px; max-width: 920px; }
.ws-row { display: grid; grid-template-columns: 52px 1fr 96px; align-items: center; gap: 20px; }
.ws-year { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .08em; }
.ws-track { height: 14px; background: rgba(255,255,255,.06); border-radius: 7px; overflow: hidden; }
.ws-fill { display: block; height: 100%; border-radius: 7px; background: rgba(255,255,255,.28); }
.ws-fill.ws-mid { background: rgba(255,255,255,.42); }
.ws-fill.ws-hot { background: linear-gradient(90deg, #F2A33C, var(--pink)); box-shadow: 0 0 16px rgba(248,113,113,.6); animation: wspulse 2.1s ease-in-out infinite; }
@keyframes wspulse { 0%,100% { box-shadow: 0 0 12px rgba(248,113,113,.45); } 50% { box-shadow: 0 0 26px rgba(248,113,113,.9); } }
.ws-val { font-family: var(--display); font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; text-align: right; }
.ws-val-hot { color: var(--pink); font-size: 23px; }
.ws-foot { margin-top: 30px; font-size: 14.5px; color: rgba(255,255,255,.62); max-width: 860px; line-height: 1.6; }
.ws-foot em { font-style: normal; color: rgba(255,255,255,.9); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ws-fill.ws-hot { animation: none; } }
@media (max-width: 680px) {
  .ws-row { grid-template-columns: 44px 1fr 78px; gap: 12px; }
  .ws-val-hot { font-size: 19px; }
  .ws-val { font-size: 16px; }
}

/* ===================================================================
   PRICING v4 — prices primary & equal ($495 | $645), 67% as a single
   supporting line, and the copy below tidied into bordered cards.
   =================================================================== */
.price-save-line { font-size: 13px; line-height: 1.45; color: var(--text-muted); margin: -6px 0 18px; }
.price-save-line--on { color: var(--magenta); font-weight: 600; }
/* bordered callout cards for the closing copy (matches the reference) */
.pricing-callout { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--magenta); border-radius: var(--r-md); padding: 24px 30px; margin-top: 16px; }
.pc-head { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.012em; margin-bottom: 10px; }
.pc-body { font-size: 15px; line-height: 1.65; color: var(--text-mid); }
.pricing-callout--fine { padding: 17px 30px; }
.pc-fine { font-size: 14px; font-weight: 600; color: var(--text); font-family: var(--mono); letter-spacing: .02em; }

/* ===================================================================
   PRICING v5 — strikethrough deal anchor ($1,980 -> $645) + Save pill
   =================================================================== */
.price-amount .price-was { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--text-muted);
  text-decoration: line-through; text-decoration-color: var(--magenta); text-decoration-thickness: 2px;
  margin-right: 12px; letter-spacing: -.02em; }
.save-pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--gradient);
  padding: 4px 10px; border-radius: 20px; margin-right: 8px; vertical-align: 1px; }
.price-save-line--on { color: var(--text-mid); font-weight: 500; }

/* ===================================================================
   Stop "What the scan covers" + "How we filter" from bleeding together:
   scan = lifted plane (subtle top highlight), filter = deeper recessed
   plane (darker base + inset top shadow). Reads as two distinct sections.
   =================================================================== */
.scan-bg { background: var(--bg-alt); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.filter-bg { background: #0A131C; box-shadow: inset 0 16px 34px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03); }

/* ===================================================================
   ALTERNATING BACKGROUNDS — filter/findfix/sample flipped to light,
   outside flipped to dark, so no two dark sections ever touch.
   Patch hardcoded whites + kill corner glows on the now-light sections.
   =================================================================== */
.filter-bg.lightsec { background: var(--bg); box-shadow: none; }   /* override the v54 deep-dark */
.filter-lead { color: var(--text); }                                /* was #fff (invisible on light) */
.handoff-node.fix .handoff-name { color: var(--magenta); }          /* was #fff */
.filter-bg.lightsec::after, .findfixbg.lightsec::after, .sample-bg.lightsec::after { display: none; }
.pe-section { background: var(--bg); }                               /* dark band sits on a dark section */

/* ===================================================================
   AI Mirror — exclusive early-access cohort card (scarcity + qualifier)
   =================================================================== */
.cohort-card { margin-top: 26px; max-width: 560px; background: #FFFFFF; border: 1px solid #E4DFD5;
  border-radius: var(--r-md); padding: 26px 28px; box-shadow: 0 20px 50px -30px rgba(20,30,45,.35); }
.cohort-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--magenta); margin-bottom: 12px; }
.cohort-lead { font-family: var(--display); font-size: clamp(20px, 2.3vw, 25px); font-weight: 700; color: #1A2B38; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 12px; }
.cohort-lead strong { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cohort-qual { font-size: 14.5px; line-height: 1.62; color: #34485C; margin-bottom: 20px; }
.cohort-card .email-form { margin-bottom: 12px; }
.cohort-card .form-note { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: #566F86; }

/* ===================================================================
   Pricing flipped to DARK + PE moved below it, flipped to LIGHT.
   =================================================================== */
/* hover lift that works on the dark pricing (old rule was .lightsec-scoped) */
.price-card--single:hover, .price-card--single:focus-within,
.price-card--annual:hover, .price-card--annual:focus-within {
  transform: translateY(-4px); border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta), 0 26px 54px -30px rgba(190,65,142,.55);
}
/* PE is now a light section: white band with a magenta left accent on cream */
.pe-section { padding: 56px 0; }
.pe-band { background: linear-gradient(135deg, rgba(190,65,142,.06), rgba(122,96,224,.04)), #fff;
  border: 1px solid var(--border); border-left: 3px solid var(--magenta); }
.pe-eyebrow { color: var(--magenta); }
.pe-headline { color: var(--text); }
.pe-body { color: var(--text-mid); }
.pe-point b { color: var(--text); }
.pe-point small { color: var(--text-muted); }

/* ===================================================================
   "Who's already looking" — dark tiles (home sensibility), stat as hero
   =================================================================== */
.cp-grid { gap: 20px; }
.cp-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), #14222E;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 26px 24px;
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.cp-card:hover { transform: translateY(-5px); border-color: rgba(190,65,142,.45); box-shadow: 0 24px 50px -28px rgba(190,65,142,.5); }
.cp-icon { margin-bottom: 2px; color: #F091BF; display: inline-flex; }
.cp-icon svg { display: block; width: 22px; height: 22px; }
.cp-figure { font-family: var(--display); font-size: clamp(30px, 3.6vw, 40px); font-weight: 700;
  letter-spacing: -.03em; line-height: 1; margin: 16px 0 7px;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cp-figure-label { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.6); margin-bottom: 20px; min-height: 35px; }
.cp-card .cp-title { font-family: var(--display); font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.cp-card .cp-body { font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.62); margin-bottom: auto; }
.cp-card .cp-source { font-family: var(--mono); font-size: 10px; letter-spacing: .03em; color: rgba(255,255,255,.36); margin-top: 16px; }

/* SM hero: spine promoted from the small last line to the prominent #2 thesis line */
.hero-spine { font-family: var(--display); font-size: clamp(21px, 2.4vw, 28px); font-weight: 600;
  line-height: 1.22; letter-spacing: -.018em; color: #fff; max-width: 560px; margin: 4px 0 16px; }
.hero-spine em { font-style: normal; background: var(--gradient); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hero-dark .hero-sub-dark { margin-bottom: 26px; }


/* Founder pull-quote: "No surprises." as the gradient signature beat (the CEO's promise) */
.founder-pull-text em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* SM widget: top-align hero columns so the left copy stays put as the widget grows down */
.hero-dark .hero-split { align-items: flex-start; }
.hero-mirror { align-self: flex-start; }
/* widget close / start-over affordance (X, pinned to the panel corner) */
.mirror-close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: rgba(255,255,255,.6);
  font-size: 19px; line-height: 1; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.mirror-close:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.32); }

/* AI Mirror hero: cohort tile is the right column now (ledger removed) */
.hero-cohort { flex: 0 0 clamp(360px, 44%, 500px); align-self: center; min-width: 0; }
.hero-cohort .cohort-card { margin-top: 0; max-width: none; width: 100%; }
@media (max-width: 900px) { .hero-cohort { flex: none; width: 100%; margin-top: 40px; } }

/* widget submit: a small enter/arrow icon inside the field (was the big text button) */
.mirror-go { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; margin-left: 6px; border-radius: var(--r-sm); cursor: pointer;
  color: #fff; background: var(--gradient); border: none; box-shadow: none;
  transition: transform .18s ease, box-shadow .2s ease; }
.mirror-go svg { width: 18px; height: 18px; }
.mirror-go:hover { transform: translateX(2px); box-shadow: 0 6px 18px -6px rgba(190,65,142,.7); }

/* "How we filter" test cards: dark tiles (like the four-parties / scan sections), scoped to SM's filter section */
.filter-bg .filter-card { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)), #14222E; border: 1px solid rgba(255,255,255,.08); }
.filter-bg .filter-card-num { color: rgba(255,255,255,.5); }
.filter-bg .filter-card-title { color: #fff; }
.filter-bg .filter-card-body { color: rgba(255,255,255,.62); }

/* Line-wrapping polish: balance headings into even lines, kill single-word orphans in body copy */
h1, h2, h3,
.hero-headline, .hero-headline-lg, .hero-headline-dark, .hero-headline-lt,
.section-headline, .section-headline-md, .ws-headline, .exec-headline,
.final-cta-headline, .thanks-headline, .pe-headline, .price-name,
.cohort-lead, .mirrors-concept, .line-close, .ff-note, .outside-note { text-wrap: balance; }
p, .section-sub, .hero-sub, .hero-sub-dark, .mirrors-intro, .context-intro,
.ws-foot, .pe-body, .final-cta-sub, .thanks-sub, .scenario-line, .cohort-qual,
.price-body, .pc-body, .stat-desc, .cp-body { text-wrap: pretty; }

/* ============================================================
   LIGHT & DEPTH — pass 1 (tiles)
   Unify the dark tiles: top-lit sheen + a soft, deep shadow so
   each card lifts off the section instead of lying flat in it.
   Scoped to dark-only tiles; light-section cards are untouched.
   ============================================================ */
.scan-card, .price-card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008)), var(--bg-card);
}
.scan-card, .price-card, .cp-card, .filter-bg .filter-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 48px -30px rgba(0,0,0,.75);
}

.footer-wordmark { height: 26px; width: auto; display: block; }

/* Stat-strip emphasis band — full-width gradient callout under the three stats */
.stat-band { grid-column: 1 / -1; margin-top: 18px; font-family: var(--display); font-size: clamp(18px, 2.1vw, 23px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--text); background: linear-gradient(90deg, rgba(190,65,142,.16), rgba(190,65,142,.02) 72%); border-left: 4px solid var(--magenta); border-radius: 12px; padding: 22px 30px; }

/* ── Consistent section-takeaway band (matches the stat band) ── */
.takeaway { font-family: var(--display); font-size: clamp(18px, 2.1vw, 23px); font-weight: 600; letter-spacing: -.01em; line-height: 1.38; color: var(--text); background: linear-gradient(90deg, rgba(190,65,142,.16), rgba(190,65,142,.02) 72%); border-left: 4px solid var(--magenta); border-radius: 12px; padding: 22px 30px; margin-top: 32px; }
.takeaway em { font-style: normal; background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Velocity: chart label, source, single-line headline ── */
.ws-chart-title { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 18px; }
.ws-source { font-family: var(--mono); font-size: 11px; color: var(--text-muted); letter-spacing: .03em; margin-top: 14px; }
.ws-headline { font-size: clamp(23px, 3vw, 35px); }

/* ── Four parties: the WHO (title) at the top, beside the symbol ── */
.cp-head { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.cp-head .cp-icon { margin-bottom: 0; flex: none; }
.cp-head .cp-title { margin-bottom: 0; }

/* ── "What the scan covers": single-line headline, compact 4-up cards, severity legend ── */
.scan-bg .section-headline-md { font-size: clamp(24px, 2.7vw, 33px); }
.scan-bg .four-cards { grid-template-columns: repeat(4, 1fr); margin-bottom: 28px; }
.scan-legend { border: 1px solid var(--border); border-radius: 12px; padding: 22px 26px; background: rgba(255,255,255,.02); }
.scan-legend-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 16px; }
.legend-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.legend-item { display: flex; flex-direction: column; gap: 4px; }
.legend-tier { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--text); }
.ldot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.legend-meaning { font-size: 12.5px; line-height: 1.45; color: var(--text-mid); }
.legend-when { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 760px) { .scan-bg .four-cards { grid-template-columns: 1fr 1fr; } .legend-grid { grid-template-columns: 1fr 1fr; } }

/* ── Trust bar: a quiet dark band (not the loud gradient) so it reassures the CTA without out-shouting it ── */
.trust-bar { background: var(--bg-alt); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.trust-item { color: var(--text-mid); }
.trust-item::before { color: var(--magenta); }

/* ── Remediation callout (find-fix) ── */
.remediation { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--magenta); border-radius: 12px; padding: 24px 28px; margin-top: 32px; }
.remediation-pill { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--gradient); padding: 9px 18px; border-radius: 999px; flex: none; }
.remediation-text { font-family: var(--display); font-size: clamp(17px, 1.9vw, 21px); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--text); flex: 1; min-width: 240px; margin: 0; }

/* ── Calm the section headlines: solid-magenta accent instead of the full gradient, so the gradient stays special to the hero, CTAs, and takeaway bands ── */
.section-headline em, .section-headline-md em { background: none; background-image: none; -webkit-text-fill-color: var(--magenta); color: var(--magenta); }

/* ── AI Mirror hero: consistent size with Security Mirror (was up to 84px), wider copy column ── */
.hero-headline-lt { font-size: clamp(28px, 3.2vw, 38px); max-width: 560px; }
.hero-cohort { flex: 0 0 clamp(340px, 40%, 460px); }

/* ── SM hero: spine accent in white (was gradient), so the hero is calmer and the CTA leads ── */
.hero-spine em { background: none; background-image: none; -webkit-text-fill-color: #fff; color: #fff; }

/* ── AI Mirror hero: two-column, headline uses the FULL copy column so each sentence runs continuous ── */
.hero-headline-lt { font-size: clamp(29px, 3.1vw, 40px); max-width: none; line-height: 1.08; }
.hero-light .hero-split { gap: 44px; }
.hero-cohort { flex: 0 0 clamp(300px, 27%, 322px); align-self: center; }

/* Home "Why it matters now" tiles kept dark (good contrast on the light section, not sandwiched by dark sections like the Security four-parties were). */

/* ── Four parties: light tiles (were dark) so the section reads light between the two dark sections ── */
.counterparties .cp-card { background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 12px 30px -20px rgba(26,43,56,.22); }
.counterparties .cp-icon { color: var(--magenta); }
.counterparties .cp-figure-label { color: var(--text-mid); }
.counterparties .cp-card .cp-title { color: var(--text); }
.counterparties .cp-card .cp-body { color: var(--text-mid); }
.counterparties .cp-card .cp-source { color: var(--text-muted); }

/* ── Filter section: headline + sub each on a single line ── */
.filter-bg .section-headline-md { font-size: clamp(24px, 2.7vw, 33px); }
.filter-bg .section-sub { max-width: none; font-size: 16px; }

/* ── AI cohort intake modal ── */
.apply-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.apply-modal.open { display: flex; }
.apply-backdrop { position: absolute; inset: 0; background: rgba(8,14,22,.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.apply-card { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: #fff; color: #1A2B38; border-radius: 18px; padding: 38px 40px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }
.apply-close { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border: none; background: rgba(26,43,56,.06); border-radius: 8px; color: #566F86; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.apply-close:hover { background: rgba(26,43,56,.12); }
.apply-close svg { width: 18px; height: 18px; }
.apply-eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #A8327A; margin-bottom: 10px; }
.apply-title { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; color: #1A2B38; margin: 0 0 8px; }
.apply-sub { font-size: 14.5px; line-height: 1.55; color: #34485C; margin: 0 0 24px; max-width: 42em; }
.apply-form { display: flex; flex-direction: column; gap: 16px; }
.apply-row { display: flex; gap: 14px; }
.apply-row > label { flex: 1; min-width: 0; }
.apply-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #566F86; }
.apply-form input, .apply-form select, .apply-form textarea { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; color: #1A2B38; background: #F7F4EE; border: 1px solid #E4DFD5; border-radius: 9px; padding: 11px 13px; width: 100%; text-transform: none; letter-spacing: normal; }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: none; border-color: #BE418E; box-shadow: 0 0 0 3px rgba(190,65,142,.13); }
.apply-form textarea { resize: vertical; }
.apply-submit { margin-top: 6px; width: 100%; text-align: center; }
.apply-success { display: none; font-size: 15.5px; line-height: 1.6; color: #1A2B38; padding: 18px 0 6px; }
.apply-success strong { font-weight: 700; }
.apply-modal.sent .apply-form { display: none; }
.apply-modal.sent .apply-success { display: block; }
@media (max-width: 560px) { .apply-row { flex-direction: column; } .apply-card { padding: 30px 22px; } }

/* ── Unify the three heroes' vertical envelope: same spacious, centered treatment as the home hero ── */
.hero-dark, .hero-light { padding-top: 56px; padding-bottom: 64px; }
.hero-dark .hero-split, .hero-light .hero-split { min-height: clamp(420px, 58vh, 540px); align-items: center; }
.hero-mirror, .hero-cohort { align-self: center; }

/* ── AI cohort card: premium + tangible scarcity ── */
.cohort-card { position: relative; overflow: hidden; }
.cohort-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); }
.cohort-eyebrow { display: flex; align-items: center; gap: 8px; }
.cohort-live { width: 7px; height: 7px; border-radius: 50%; background: #2E9E63; flex: none; animation: cohortPulse 2.4s ease-out infinite; }
@keyframes cohortPulse { 0% { box-shadow: 0 0 0 0 rgba(46,158,99,.5); } 70% { box-shadow: 0 0 0 6px rgba(46,158,99,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,99,0); } }
.cohort-seats { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
.cohort-pips { display: inline-flex; gap: 6px; flex: none; }
.cohort-pips i { width: 15px; height: 6px; border-radius: 3px; background: #BE418E; display: block; }
.cohort-seats-label { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #566F86; white-space: nowrap; }
.cohort-apply { width: 100%; text-align: center; }
@media (prefers-reduced-motion: reduce) { .cohort-live { animation: none; } }

/* ── PE portfolio CTA: value-first, with substance under it ── */
.pe-cta { display: flex; flex-direction: column; gap: 10px; flex: none; align-self: center; }
.pe-cta-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--text-muted); text-align: center; margin: 0; max-width: 220px; }

/* ── Four-parties: equalize the icon+title header height so the figures line up across tiles ── */
.cp-head { min-height: 48px; }

/* ── Mobile nav: keep the primary CTA sticky/visible (was hiding the whole nav) ── */
@media (max-width: 600px) {
  .nav-links { display: flex; gap: 0; }
  .nav-links li:not(:last-child) { display: none; }
  .btn-nav { font-size: 12px; padding: 8px 13px; letter-spacing: -0.01em; }
  #nav { padding-left: 18px; padding-right: 18px; }
}

/* nav CTA: full label on desktop, short label on mobile (keeps the sticky CTA from overflowing) */
.btn-nav { white-space: nowrap; }
.cta-mini { display: none; }
@media (max-width: 600px) { .cta-full { display: none; } .cta-mini { display: inline; } }

/* ── "Less is more": magenta accent reserved for hero hooks, CTAs, takeaway bands. Section headers go monochrome. ── */
.section-headline em, .section-headline-md em { background: none; background-image: none; -webkit-text-fill-color: currentColor; color: inherit; }

/* ── Widget: inline validation error ── */
.mirror-error { font-family: var(--mono); font-size: 12.5px; line-height: 1.4; color: #F87171; margin: 10px 0 0; }

/* Apply-form inline validation error */
.apply-err { display: none; font-family: var(--mono); font-size: 11px; line-height: 1.4; color: #C2410C; margin-top: 5px; text-transform: none; letter-spacing: normal; }

/* ── Mobile hamburger menu (CTA stays in the bar; section links collapse) ── */
.nav-menu { display: none; }
.nav-toggle { display: none; }
@media (max-width: 600px) {
  nav { box-shadow: 0 1px 0 var(--border), 0 8px 24px -14px rgba(0,0,0,.55); } /* elevation = distinction */
  .nav-logo { margin-right: auto; }
  .nav-links { gap: 8px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 42px; height: 42px; margin-left: 4px; padding: 10px;
    background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s cubic-bezier(.2,.7,.3,1), opacity .2s ease; }
  nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-menu {
    display: block; list-style: none; margin: 0; padding: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 99;
    background: var(--bg); border-bottom: 1px solid var(--border);
    max-height: 0; overflow: hidden;
    transition: max-height .32s cubic-bezier(.2,.7,.3,1);
    box-shadow: 0 18px 34px -14px rgba(0,0,0,.55);
  }
  nav.menu-open .nav-menu { max-height: 60vh; }
  .nav-menu li { display: block; }
  .nav-menu a { display: block; padding: 16px 22px; font-size: 16px; font-weight: 500; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); }
  .nav-menu a:active { background: var(--bg-alt); }
}

/* ── Tactile CTA press feedback ── */
.btn-primary:active, .btn-cta-p:active, .btn-nav:active, .btn-price:active, .btn-price-ghost:active,
.btn-ghost:active, .btn-cta-g:active, .cohort-apply:active, .apply-submit:active, .pe-cta-btn:active, .mirror-go:active {
  transform: translateY(0) scale(.97);
  filter: brightness(.96);
}

/* ── "What happens after you buy": a distinct shaded panel (not a flat third dark) ── */
.after-bg { background: radial-gradient(120% 85% at 50% 0%, var(--bg-alt), var(--bg) 68%); border-top: 1px solid var(--border); }

/* ── Launch pricing note ── */
.price-launch { font-size: 13.5px; line-height: 1.5; color: var(--text-mid); margin: -2px 0 30px; }
.launch-pill { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); background: rgba(190,65,142,.1); border: 1px solid rgba(190,65,142,.32); border-radius: 999px; padding: 3px 10px; margin-right: 9px; vertical-align: middle; }

/* ── Apply modal: keep Submit reachable on small screens (sticky footer) ── */
@media (max-width: 600px) {
  .apply-submit { position: sticky; bottom: 0; box-shadow: 0 -16px 18px 9px #fff; }
}

/* ── Apply modal: read as an overlay (dim + blur the page), not a new page ── */
.apply-modal { background: rgba(8,15,26,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
@media (max-width: 600px) {
  .apply-modal { align-items: flex-end; padding: 0; }
  .apply-card { max-height: 86vh; border-radius: 20px 20px 0 0; }
  .apply-card::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 999px; background: #D8D2C6; margin: 0 auto 16px; }
}

/* ── Nav content aligns with the body's centered column (logo + CTA on the content edges) ── */
nav { justify-content: center; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: var(--max); margin: 0 auto; }

/* ── Widget: modern glass treatment (brand-tinted glassmorphism, softer radii) ── */
.mirror-panel {
  border-radius: 20px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.085);
  background:
    linear-gradient(158deg, rgba(122,96,224,.12), rgba(190,65,142,.05) 42%, rgba(255,255,255,.014) 72%),
    rgba(16,20,33,.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 40px 90px -44px rgba(0,0,0,.9),
    0 0 120px -44px rgba(122,96,224,.55);
}
.mirror-input-wrap {
  border-radius: 13px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.10);
  padding: 0 16px;
}
.mirror-input-wrap:focus-within {
  border-color: rgba(190,65,142,.65);
  box-shadow: 0 0 0 3px rgba(190,65,142,.14), 0 0 32px -10px rgba(190,65,142,.6);
}
.ms {
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.ms:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.16); box-shadow: 0 16px 30px -18px rgba(0,0,0,.7); }
.ms-num { filter: blur(9px); }
.mirror-go {
  width: 42px; height: 42px; border-radius: 13px;
  box-shadow: 0 7px 22px -8px rgba(190,65,142,.6);
}
.mirror-go:hover { transform: translateX(2px); box-shadow: 0 11px 28px -8px rgba(190,65,142,.85); }

/* Founder faces: equal columns so the photos stay evenly spaced + aligned regardless of name length */
.founder-faces { align-items: flex-start; }
.founder-face { flex: 1 1 0; min-width: 0; }