/*
  AI-Proof MD — brand stylesheet
  Extension of the Exam Relay Diagnostic Cartography design system.
  - One primary (deep navy) + one accent (electric green) + one tertiary (signal blue).
  - Two type families: Inter (display) + Geist Mono (clinical labels).
  - Every visual element earns its place. No decoration without information.

  Tokens follow ER's CSS-custom-property convention so future spokes inherit cleanly.
*/

:root {
  --brand-primary:  #0B2545;   /* deep navy — voice of authority */
  --brand-accent:   #00C49A;   /* electric green — affirmative signal / next step */
  --brand-tertiary: #1F6FEB;   /* signal blue — "AI" topical color */
  --brand-ink:      #0F1F3A;
  --brand-ink-soft: #44506A;
  --brand-paper:    #F8FAFC;
  --brand-border:   #E5E9F0;
  --brand-muted:    #EEF2F6;
  --brand-warn:     #B58900;
  --brand-danger:   #A03030;

  /* Score band colors (used in JS too) */
  --band-resist-strong: #0F7A3A;
  --band-resist:        #2E7D32;
  --band-mixed:         #B58900;
  --band-exposed:       #CC5500;
  --band-exposed-high:  #A03030;

  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --content-max: 72rem;
  --prose-max:   42rem;

  --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 37, 69, 0.08);
  --shadow-lg: 0 12px 30px rgba(11, 37, 69, 0.14);
}

/* Reset + base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--brand-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--brand-ink);
  letter-spacing: -0.015em;
  margin: 0;
}
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.25rem; }
a { color: var(--brand-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-tertiary); }

/* Premium focus ring — keyboard-only (mouse clicks don't trigger it) */
:focus-visible {
  outline: 2px solid var(--brand-tertiary);
  outline-offset: 3px;
  border-radius: 4px;
  transition: outline-offset 120ms ease;
}
body.dark-mode :focus-visible { outline-color: #00FFB3; }

/* Subtle text-selection highlight that matches the brand */
::selection { background: rgba(31,111,235,0.25); color: inherit; }
body.dark-mode ::selection { background: rgba(0,255,179,0.30); color: #fff; }

/* Wordmark — The Career Diagnostic */
.ap-logo {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 1.1rem;
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
}
.ap-logo .the {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}
.ap-logo .name { color: var(--brand-primary); }
.ap-logo .accent { color: var(--brand-tertiary); }
.ap-logo .credential {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--brand-ink-soft);
  text-transform: uppercase;
  margin-left: 0.3rem;
}

/* Sticky nav */
.ap-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--brand-border);
}
.ap-nav .inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--content-max); margin: 0 auto;
  padding: 0.85rem 1.25rem;
}
.ap-nav .links { display: flex; gap: 1.5rem; font-size: 0.9rem; }
.ap-nav .links a { color: var(--brand-ink-soft); text-decoration: none; font-weight: 500; }
.ap-nav .links a:hover { color: var(--brand-primary); }

/* Trust strip */
.ap-trust {
  background: var(--brand-primary);
  color: #dbe5f1;
  font-size: 0.85rem;
  padding: 0.7rem 1rem;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.ap-trust strong { color: #fff; font-weight: 600; }

/* ============================================================
   DARK MODE — applied via <body class="dark-mode"> on the /dark/ preview page.
   Inverts the canvas to deep navy/black so the saturated radar colors POP.
   Section backgrounds become translucent dark; text becomes light.
   Keeps the same brand structure — just flipped in luminance.
   ============================================================ */
body.dark-mode {
  background: #050816;
  color: #E8EEF8;
}
body.dark-mode #burst-canvas {
  background:
    radial-gradient(1200px 800px at 50% 0%,   rgba(255,22,84,0.08),  transparent 60%),
    radial-gradient(1200px 800px at 100% 50%, rgba(0,64,255,0.08),   transparent 60%),
    radial-gradient(1200px 800px at 0% 100%,  rgba(0,255,179,0.06),  transparent 60%),
    #050816;
}

/* Hero — translucent dark */
body.dark-mode .ap-hero {
  background:
    radial-gradient(1100px 520px at 100% -10%, rgba(0,64,255,0.20), transparent 60%),
    radial-gradient(900px 480px at 0% 110%, rgba(255,22,84,0.16), transparent 60%),
    linear-gradient(180deg, rgba(8,12,28,0.78) 0%, rgba(5,8,22,0.85) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4 { color: #FFFFFF; }
body.dark-mode .ap-hero h1 .underline {
  background: linear-gradient(180deg, transparent 60%, rgba(0,255,179,0.45) 60%);
}
body.dark-mode .ap-hero p.lede { color: rgba(232,238,248,0.78); }
body.dark-mode .ap-hero .eyebrow { color: #6BA6FF; }

/* Nav bar */
body.dark-mode .ap-nav {
  background: rgba(8,12,28,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.dark-mode .ap-nav .links a { color: rgba(232,238,248,0.7); }
body.dark-mode .ap-nav .links a:hover { color: #FFFFFF; }
body.dark-mode .ap-logo .name { color: #FFFFFF; }
body.dark-mode .ap-logo .the,
body.dark-mode .ap-logo .credential { color: rgba(232,238,248,0.5); }

/* Animatable custom property for the border gradient angle */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Calculator card — dark, enhanced with spinning border + halo */
body.dark-mode .ap-calc {
  background: rgba(12,17,36,0.97);
  border: none;
  color: #E8EEF8;
  animation: calc-halo 3.5s ease-in-out infinite;
}
body.dark-mode .ap-calc::after { background: rgba(12,17,36,0.97); }
body.dark-mode .ap-calc::before {
  inset: -2px;
  background: conic-gradient(
    from var(--border-angle),
    #FF1654 0%, #0040FF 25%, #00FFB3 50%, #8B00FF 75%, #FF1654 100%
  );
  opacity: 1;
  filter: none;
  animation: spin-border 6s linear infinite;
}
@keyframes spin-border {
  to { --border-angle: 360deg; }
}
@keyframes calc-halo {
  0%, 100% {
    box-shadow:
      -30px -30px 70px rgba(255,22,84,0.20),
       30px -30px 70px rgba(0,64,255,0.20),
       30px  30px 70px rgba(0,255,179,0.18),
      -30px  30px 70px rgba(139,0,255,0.18);
  }
  50% {
    box-shadow:
      -40px -40px 100px rgba(255,22,84,0.38),
       40px -40px 100px rgba(0,64,255,0.38),
       40px  40px 100px rgba(0,255,179,0.30),
      -40px  40px 100px rgba(139,0,255,0.30);
  }
}
body.dark-mode .ap-calc label {
  color: #00FFB3;
  animation: ap-calc-label-glow-dark 2.8s ease-in-out infinite;
}
@keyframes ap-calc-label-glow-dark {
  0%, 100% { color: rgba(0,255,179,0.75); text-shadow: none; }
  50% {
    color: #00FFB3;
    text-shadow: 0 0 8px rgba(0,255,179,0.8), 0 0 24px rgba(0,255,179,0.4), 0 0 48px rgba(0,255,179,0.15);
  }
}

/* Suggestions dropdown — dark mode */
body.dark-mode .ap-calc .suggestions {
  background: rgba(14,20,42,0.98);
  border: 1px solid rgba(107,166,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}
body.dark-mode .ap-calc .suggestion {
  color: #E8EEF8;
  border-bottom-color: rgba(255,255,255,0.07);
}
body.dark-mode .ap-calc .suggestion:hover,
body.dark-mode .ap-calc .suggestion.active {
  background: rgba(107,166,255,0.12);
  color: #FFFFFF;
}
body.dark-mode .ap-calc .suggestion .vert {
  color: rgba(107,166,255,0.7);
}
body.dark-mode .ap-calc input[type="text"] {
  background: rgba(255,255,255,0.04);
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.14);
}
body.dark-mode .ap-calc input[type="text"]:focus {
  border-color: #6BA6FF;
  box-shadow: 0 0 0 3px rgba(107,166,255,0.18);
}
body.dark-mode .ap-calc input[type="text"]::placeholder { color: rgba(232,238,248,0.4); }
body.dark-mode .ap-calc .submit {
  background: linear-gradient(135deg, #0040FF, #8B00FF);
  color: #FFFFFF;
}
body.dark-mode .ap-calc .submit:disabled { background: rgba(255,255,255,0.08); color: rgba(232,238,248,0.4); }
body.dark-mode .ap-calc .footnote { color: rgba(232,238,248,0.5); }
body.dark-mode .ap-calc .footnote a { color: #6BA6FF; }

/* Sections */
body.dark-mode .ap-section.alt {
  background: rgba(15,20,40,0.55);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* =====================================================
   EXPLAINER SECTION — layout + axis cards
   ===================================================== */
.ap-explainer-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 720px) {
  .ap-explainer-layout { grid-template-columns: 1fr; }
}
.ap-explainer-radar-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ap-explainer-radar { width: 100%; max-width: 22rem; height: auto; }

.ap-explainer-axes {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.axis-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: 0.65rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(107,166,255,0.12);
  transition:
    transform 260ms cubic-bezier(.2,.7,.2,1),
    background 260ms ease,
    border-color 260ms ease;
}
.axis-card:hover {
  transform: translateY(-2px) translateX(2px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(107,166,255,0.30);
}
.axis-card .axis-glyph { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
.axis-card:hover .axis-glyph { transform: scale(1.08); }
.axis-glyph {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 0.4rem;
  background: rgba(255,22,84,0.18);
  color: #ff7eb6;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.axis-card.axis-beta .axis-glyph { background: rgba(0,64,255,0.20); color: #6BA6FF; }
.axis-glyph.axis-glyph-mint { background: rgba(0,255,179,0.16); color: #00FFB3; font-size: 1.2rem; }
.axis-glyph.axis-glyph-violet { background: rgba(139,0,255,0.18); color: #c084fc; font-size: 1.1rem; }
.axis-name {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
  color: #FFFFFF;
}
.axis-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(232,238,248,0.65);
}
.ap-explainer-foot {
  font-size: 0.9rem;
  color: rgba(232,238,248,0.6);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  line-height: 1.6;
}
.ap-explainer-foot strong { color: rgba(232,238,248,0.9); }

/* Explainer section — distinct frosted card so it reads over the wireframe */
body.dark-mode .ap-explainer-section {
  background: transparent;
  padding: 3rem 1.25rem;
}
body.dark-mode .ap-explainer-section .ap-container {
  background: rgba(22,38,72,0.88);
  border: 1px solid rgba(107,166,255,0.28);
  border-radius: 1.25rem;
  padding: 2.5rem 2rem;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(0,255,179,0.10),
    0 8px 40px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(107,166,255,0.12);
}
body.dark-mode .ap-section-head .eyebrow { color: #00FFB3; }
body.dark-mode .ap-section-head p { color: rgba(232,238,248,0.7); }

/* Feature cards */
body.dark-mode .ap-feature {
  background: rgba(15,20,40,0.7);
  border: 1px solid rgba(255,255,255,0.08);
}
body.dark-mode .ap-feature .icon {
  background: rgba(0,64,255,0.18);
  color: #6BA6FF;
}
body.dark-mode .ap-feature p { color: rgba(232,238,248,0.72); }

/* Pricing cards */
body.dark-mode .ap-price {
  background: rgba(15,20,40,0.78);
  border: 1px solid rgba(255,255,255,0.10);
}
body.dark-mode .ap-price.featured { border-color: #00FFB3; box-shadow: 0 0 30px rgba(0,255,179,0.2); }
body.dark-mode .ap-price .summary,
body.dark-mode .ap-price li { color: rgba(232,238,248,0.78); }
body.dark-mode .ap-price li { border-top-color: rgba(255,255,255,0.06); }
body.dark-mode .ap-price .amount { color: #FFFFFF; }
body.dark-mode .ap-price .amount .period { color: rgba(232,238,248,0.55); }
body.dark-mode .ap-price .cta { background: linear-gradient(135deg, #0040FF, #8B00FF); color: #FFFFFF; }
body.dark-mode .ap-price.featured .cta { background: #070d1f; color: #fff; border: 1.5px solid rgba(0,255,179,0.4); box-shadow: 0 0 28px rgba(0,255,179,0.30); }
body.dark-mode .ap-price.featured .cta:hover { background: #070d1f; box-shadow: 0 0 48px rgba(0,255,179,0.55); transform: translateY(-2px); }

/* Trust strip + sources strip — keep them dark with brighter accents */
body.dark-mode .ap-trust { background: rgba(0,64,255,0.20); color: #E8EEF8; }
body.dark-mode .ap-sources { background: rgba(8,12,28,0.85); color: rgba(232,238,248,0.85); }

/* Founder card */
body.dark-mode .ap-founder {
  background: rgba(15,20,40,0.78);
  border: 1px solid rgba(255,255,255,0.10);
}
body.dark-mode .ap-founder .bio { color: rgba(232,238,248,0.85); }
body.dark-mode .ap-founder .name { color: #FFFFFF; }

/* FAQ */
body.dark-mode .ap-faq { border-color: rgba(255,255,255,0.10); background: rgba(15,20,40,0.55); }
body.dark-mode .ap-faq details { border-top-color: rgba(255,255,255,0.08); }
body.dark-mode .ap-faq summary { color: #FFFFFF; }
body.dark-mode .ap-faq .ans { color: rgba(232,238,248,0.82); }

/* ---- Swirling gradient CTA text (used on featured pricing button + upgrade page) ---- */
@keyframes ctaSwirl {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
.cta-swirl .cta-label {
  display: inline-block;
  background: linear-gradient(90deg, #00FFB3, #6BA6FF, #8B00FF, #FF1654, #00FFB3, #6BA6FF, #8B00FF);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ctaSwirl 10.5s linear infinite;
}

/* Live counter */
body.dark-mode .ap-live {
  background: rgba(0,255,179,0.10);
  border: 1px solid rgba(0,255,179,0.4);
  color: #FFFFFF;
}
body.dark-mode .ap-live strong { color: #00FFB3; }

/* Browse-all chips + grid */
body.dark-mode .ap-vchips button {
  background: rgba(15,20,40,0.7);
  border-color: rgba(255,255,255,0.10);
  color: rgba(232,238,248,0.75);
}
body.dark-mode .ap-vchips button.active {
  background: linear-gradient(135deg, #0040FF, #8B00FF);
  border-color: transparent;
  color: #FFFFFF;
}
body.dark-mode .ap-browse a { color: rgba(232,238,248,0.7); }
body.dark-mode .ap-browse a:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }

/* Footer */
body.dark-mode .ap-footer { background: rgba(8,12,28,0.95); }

/* Trust strip text accents */
body.dark-mode a { color: #6BA6FF; }
body.dark-mode a:hover { color: #00FFB3; }

/* Header text on job pages, etc. */
body.dark-mode .ap-job-head { background: rgba(8,12,28,0.7); }

/* ============================================================
   PARTICLE BURST BACKGROUND
   Fixed-position canvas. Lines radiate from center-bottom;
   endpoints spring away from cursor. Animated by particle-burst.js.
   ============================================================ */
#burst-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 50% 0%,   rgba(255,126,182,0.04), transparent 60%),
    radial-gradient(1200px 800px at 100% 50%, rgba(107,166,255,0.04), transparent 60%),
    radial-gradient(1200px 800px at 0% 100%,  rgba(0,196,154,0.04),   transparent 60%),
    #FAFCFF;
}
@media (prefers-reduced-motion: reduce) {
  #burst-canvas { display: none; }
}

/* Make body content sit ABOVE the burst canvas */
body > nav,
body > header,
body > section,
body > div:not(#burst-canvas),
body > footer { position: relative; z-index: 1; }

/* Hero */
.ap-hero {
  background:
    radial-gradient(1100px 520px at 100% -10%, rgba(31,111,235,0.08), transparent 60%),
    radial-gradient(900px 480px at 0% 110%, rgba(0,196,154,0.06), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(248,250,252,0.86) 100%);
  padding: 4.5rem 1.25rem 3.5rem;
  border-bottom: 1px solid var(--brand-border);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(2px);
}
.ap-hero .inner {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}
.ap-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  margin-bottom: 1.25rem;
  font-weight: 600;
}
.ap-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 1.25rem;
}
.ap-hero h1 .underline {
  background: linear-gradient(180deg, transparent 60%, rgba(0,196,154,0.35) 60%);
  padding: 0 0.15em;
}
.ap-hero p.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--brand-ink-soft);
  max-width: 42rem;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

/* Calculator card — wrapped in a vivid static aurora halo. The card body
   stays solid; the glow is what draws the eye in. */
.ap-calc {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  box-shadow: var(--shadow-lg);
  padding: 2rem;
  max-width: 38rem;
  margin: 0 auto;
  position: relative;
  isolation: isolate;
}
/* Static glow rectangle behind the card — slightly larger than the card,
   soft blurred color washes at each corner. Pulses opacity gently so the
   user's eye registers motion without the rectangle itself spinning. */
.ap-calc::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -2;
  border-radius: 1.4rem;
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%,     #FF1654, transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 0%,   #0040FF, transparent 65%),
    radial-gradient(ellipse 70% 60% at 100% 100%, #00FFB3, transparent 65%),
    radial-gradient(ellipse 70% 60% at 0% 100%,   #8B00FF, transparent 65%);
  filter: blur(28px);
  opacity: 0.72;
  animation: ap-calc-breathe 4s ease-in-out infinite;
}
@keyframes ap-calc-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.92; }
}
/* Solid white card surface — text stays perfectly readable */
.ap-calc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 1rem;
  background: #fff;
}
/* Eyebrow label "WHAT IS YOUR JOB?" — animated mint glow to pull eyes */
.ap-calc label {
  animation: ap-calc-label-glow 3s ease-in-out infinite;
}
@keyframes ap-calc-label-glow {
  0%, 100% { color: var(--brand-ink-soft); }
  50%      { color: var(--brand-tertiary); text-shadow: 0 0 6px rgba(31,111,235,0.25); }
}
/* Submit button — when armed (input has text), pulses with a focus glow ring */
.ap-calc .submit:not(:disabled) {
  animation: ap-submit-pulse 2.6s ease-in-out infinite;
}
@keyframes ap-submit-pulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(11,37,69,0.15);
  }
  50% {
    box-shadow:
      0 4px 24px rgba(31,111,235,0.35),
      0 0 0 4px rgba(31,111,235,0.10);
  }
}

/* In-result upsell bar — sits between the score reveal and the supporting
   info, captures the user at peak attention with a clear $29 next-step CTA.
   Navy base + animated aurora gradient so it visually pulls attention without
   feeling spammy. The whole bar has a soft breath, a ring of cycling color,
   and the action text itself sweeps through the brand spectrum. */
@keyframes ap-upsell-breathe {
  0%, 100% {
    box-shadow:
      0 12px 28px -8px rgba(11,37,69,0.45),
      0 0 0 1px rgba(107,166,255,0.12),
      0 0 32px -4px rgba(31,111,235,0.35);
  }
  50% {
    box-shadow:
      0 18px 36px -8px rgba(11,37,69,0.55),
      0 0 0 1px rgba(0,196,154,0.20),
      0 0 56px -2px rgba(0,255,179,0.42);
  }
}
@keyframes ap-upsell-stripe-flow {
  0%   { background-position:   0% 0; }
  100% { background-position: 300% 0; }
}
@keyframes ap-upsell-text-shimmer {
  0%   { background-position:   0% center; }
  100% { background-position: 300% center; }
}
@keyframes ap-upsell-pulse-ring {
  0%   { transform: scale(0.96); opacity: 0.7; }
  100% { transform: scale(1.06); opacity: 0; }
}

.ap-upsell-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  margin: 0 1.75rem 1.5rem;
  padding: 1.2rem 1.45rem;
  background:
    radial-gradient(900px 240px at 0% 0%, rgba(31,111,235,0.28), transparent 60%),
    radial-gradient(800px 240px at 100% 100%, rgba(0,196,154,0.22), transparent 60%),
    linear-gradient(135deg, #0B2545 0%, #143b6d 100%);
  color: #fff;
  border-radius: 0.85rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 24px -8px rgba(11,37,69,0.35);
  animation:
    ap-fade-in 0.5s ease 0.9s both,
    ap-upsell-breathe 3.6s ease-in-out 1.4s infinite;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease;
  will-change: transform, box-shadow;
}
/* Continuously flowing aurora top-stripe — subtly signals 'live offer' */
.ap-upsell-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #00FFB3 0%, #6BA6FF 20%, #8B00FF 40%, #FF1654 60%,
    #6BA6FF 80%, #00FFB3 100%);
  background-size: 300% 100%;
  animation: ap-upsell-stripe-flow 12s linear infinite;
}
/* Hover: lifts, intensifies glow, subtle scale */
.ap-upsell-bar:hover {
  transform: translateY(-3px) scale(1.005);
  box-shadow:
    0 22px 44px -10px rgba(11,37,69,0.55),
    0 0 0 1px rgba(0,255,179,0.30),
    0 0 70px -2px rgba(0,255,179,0.50);
  color: #fff;
}
.ap-upsell-bar:active { transform: translateY(-1px) scale(1.002); }

.ap-upsell-bar .ap-upsell-text .lead {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.07rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}
.ap-upsell-bar .ap-upsell-text .sub {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.80);
  line-height: 1.5;
}
.ap-upsell-bar .ap-upsell-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.78rem 1.25rem;
  background: linear-gradient(135deg, #1F6FEB 0%, #00C49A 100%);
  border-radius: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
  position: relative;
  transition: filter 180ms ease, transform 180ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 6px 18px -4px rgba(0,196,154,0.35);
}
/* Animated ring that radiates from the CTA every few seconds — draws the eye */
.ap-upsell-bar .ap-upsell-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 0.7rem;
  border: 2px solid rgba(0,255,179,0.55);
  animation: ap-upsell-pulse-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.ap-upsell-bar:hover .ap-upsell-cta {
  filter: brightness(1.08);
  transform: translateX(2px);
}
/* The ACTION word itself sweeps through brand colors */
.ap-upsell-bar .ap-upsell-cta .action {
  background: linear-gradient(90deg,
    #FFFFFF 0%, #B9FFE5 25%, #6BA6FF 50%, #FFFFFF 75%, #B9FFE5 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ap-upsell-text-shimmer 8s linear infinite;
}
.ap-upsell-bar .ap-upsell-cta svg { transition: transform 220ms ease; }
.ap-upsell-bar:hover .ap-upsell-cta svg { transform: translateX(4px); }

.ap-upsell-bar .ap-upsell-cta .price {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.85rem;
  background: rgba(0,0,0,0.28);
  color: #b9ffe5;
  padding: 0.22rem 0.55rem;
  border-radius: 0.32rem;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255,255,255,0.18);
}
@media (max-width: 600px) {
  .ap-upsell-bar { grid-template-columns: 1fr; }
  .ap-upsell-bar .ap-upsell-cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ap-upsell-bar,
  .ap-upsell-bar::before,
  .ap-upsell-bar .ap-upsell-cta::after,
  .ap-upsell-bar .ap-upsell-cta .action {
    animation: none !important;
  }
}

/* Linear score bar — appears in the result panel, fills to X/100 in sync
   with the counter ramp. Gives the "crafted / built" feeling. */
.ap-scorebar-wrap {
  padding: 0 2rem 1.75rem;
  border-bottom: 1px solid var(--brand-border);
  animation: ap-fade-in 0.6s ease 0.6s both;
}
.ap-scorebar-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.ap-scorebar-meta .target {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0;
  color: var(--brand-ink);
  font-weight: 800;
  text-transform: none;
}
.ap-scorebar-meta .target .of-100 {
  color: var(--brand-ink-soft);
  font-weight: 500;
  font-size: 0.85rem;
  margin-left: 0.15rem;
}
.ap-scorebar {
  height: 8px;
  border-radius: 999px;
  background: var(--brand-border);
  overflow: hidden;
  position: relative;
}
.ap-scorebar .fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: #00C49A;
  transition: width 1.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.ap-scorebar .fill::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0; width: 24px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
  filter: blur(4px);
}
@keyframes ap-aurora-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Score celebration — fires when the gauge counter lands.
   Scale-bounce + halo glow + confetti burst. */
.ap-result .gauge.celebrating .num {
  animation: ap-score-land 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ap-result .gauge.celebrating::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,196,154,0.35), transparent 70%);
  animation: ap-score-halo 1s ease-out both;
  pointer-events: none;
}
@keyframes ap-score-land {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.18); }
  60%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes ap-score-halo {
  0%   { transform: scale(0.7); opacity: 0; }
  40%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Confetti burst (pure CSS particles) */
.ap-confetti-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.ap-confetti-burst > span {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  animation-name: ap-confetti-fly;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
@keyframes ap-confetti-fly {
  0% {
    transform: translate(-50%, -50%) rotate(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(0.4);
    opacity: 0;
  }
}
.ap-calc label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.ap-calc .input-wrap { position: relative; }
.ap-calc input[type="text"] {
  width: 100%;
  padding: 0.95rem 1.1rem;
  border: 1.5px solid var(--brand-border);
  border-radius: 0.6rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  background: #fff;
  color: var(--brand-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ap-calc input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-tertiary);
  box-shadow: 0 0 0 3px rgba(31,111,235,0.12);
}
.ap-calc .suggestions {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.5rem;
  margin-top: 0.4rem;
  box-shadow: var(--shadow-md);
  max-height: 16rem;
  overflow-y: auto;
  z-index: 10;
  display: none;
}
.ap-calc .suggestions.open { display: block; }
.ap-calc .suggestion {
  padding: 0.7rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--brand-border);
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: space-between;
}
.ap-calc .suggestion:last-child { border-bottom: none; }
.ap-calc .suggestion:hover, .ap-calc .suggestion.active {
  background: var(--brand-muted);
}
.ap-calc .suggestion .vert {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brand-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ap-calc .submit {
  width: 100%;
  padding: 1rem;
  margin-top: 1rem;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.ap-calc .submit:hover {
  background: var(--brand-ink);
  transform: translateY(-1px);
}
.ap-calc .submit:disabled {
  background: var(--brand-border);
  color: var(--brand-ink-soft);
  cursor: not-allowed;
  transform: none;
}
.ap-calc .footnote {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--brand-ink-soft);
  text-align: center;
  margin-top: 0.85rem;
}
.ap-calc .footnote a { color: var(--brand-tertiary); }

/* Result panel — when it pops in, it should read as the page's centerpiece.
   Stronger shadow + slightly darker border + a thin aurora accent at the top
   edge so it visually echoes the calculator card and signals "your diagnostic
   is here." Stays clean — no heavy chrome, no full color flood. */
.ap-result {
  background: #fff;
  border: 1px solid rgba(11, 37, 69, 0.14);
  border-radius: 1rem;
  padding: 0;
  margin-top: 2rem;
  overflow: hidden;
  box-shadow:
    0 1px 0 0 rgba(11, 37, 69, 0.04),
    0 24px 60px -12px rgba(11, 37, 69, 0.28),
    0 8px 16px -6px rgba(11, 37, 69, 0.10);
  display: none;
  position: relative;
}
.ap-result::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff7eb6 0%, #6BA6FF 35%, #00C49A 70%, #c084fc 100%);
  z-index: 2;
}
.ap-result.show { display: block; }

.ap-result .top {
  padding: 2rem;
  border-bottom: 1px solid var(--brand-border);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 2rem;
  align-items: center;
  animation: ap-fade-in .5s ease both;
}
.ap-result .radar-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  padding: 0.5rem;
}
.ap-result .radar-wrap svg { width: 200px; height: 200px; }
.ap-result .radar-cap {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 600;
}
.ap-result .gauge {
  width: 9rem; height: 9rem;
  position: relative;
  flex-shrink: 0;
}
.ap-result .gauge svg { width: 100%; height: 100%; }
.ap-result .gauge .num {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--brand-ink);
  line-height: 1;
}
.ap-result .gauge .num .of {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-top: 0.35rem;
}
.ap-result .head .occ {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.ap-result .head h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.ap-result .head .band-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}

.ap-result .projections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--brand-border);
}
.ap-result .projection {
  padding: 1.5rem 1rem;
  text-align: center;
  border-right: 1px solid var(--brand-border);
}
.ap-result .projection:last-child { border-right: none; }
.ap-result .projection .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-bottom: 0.4rem;
}
.ap-result .projection .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--brand-ink);
  line-height: 1;
}
.ap-result .projection .delta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin-top: 0.4rem;
  color: var(--brand-warn);
}

.ap-result .lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.ap-result .lists .col {
  padding: 1.75rem;
}
.ap-result .lists .col + .col {
  border-left: 1px solid var(--brand-border);
}
.ap-result .lists h3 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-bottom: 1rem;
  font-weight: 700;
  display: flex; align-items: center; gap: 0.5rem;
}
.ap-result .lists h3.risk::before {
  content: ""; width: 0.6rem; height: 0.6rem; background: var(--brand-warn); border-radius: 50%;
}
.ap-result .lists h3.skill::before {
  content: ""; width: 0.6rem; height: 0.6rem; background: var(--brand-accent); border-radius: 50%;
}
.ap-result .lists ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ap-result .lists li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--brand-border);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--brand-ink);
}
.ap-result .lists li:first-child { border-top: none; }
.ap-result .notes {
  background: var(--brand-muted);
  padding: 1.25rem 1.75rem;
  border-top: 1px solid var(--brand-border);
  font-size: 0.92rem;
  color: var(--brand-ink-soft);
  font-style: italic;
  line-height: 1.6;
}

/* Email capture inside result */
.ap-result .capture {
  background: linear-gradient(135deg, #F0F6FF 0%, #EFFFFA 100%);
  padding: 1.75rem;
  border-top: 1px solid var(--brand-border);
}
.ap-result .capture h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--brand-ink);
}
.ap-result .capture p {
  font-size: 0.95rem;
  color: var(--brand-ink-soft);
  margin-bottom: 1rem;
  line-height: 1.55;
}
.ap-result .capture .row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.ap-result .capture input[type="email"] {
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--brand-border);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
}
.ap-result .capture input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-tertiary);
  box-shadow: 0 0 0 3px rgba(31,111,235,0.12);
}
.ap-result .capture button {
  padding: 0.85rem 1.4rem;
  background: var(--brand-accent);
  color: var(--brand-primary);
  border: none;
  border-radius: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: filter 120ms ease, transform 120ms ease;
}
.ap-result .capture button:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}
.ap-result .capture .fineprint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--brand-ink-soft);
  margin-top: 0.7rem;
  letter-spacing: 0.02em;
}

/* Sections */
.ap-section { padding: 4.5rem 1.25rem; }
.ap-section.tight { padding: 2.5rem 1.25rem; }
.ap-container { max-width: var(--content-max); margin: 0 auto; }
.ap-prose { max-width: var(--prose-max); margin: 0 auto; }
.ap-prose h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -0.02em; }
.ap-prose h3 { font-size: 1.25rem; font-weight: 700; margin: 2rem 0 0.75rem; }
.ap-prose p { font-size: 1.05rem; line-height: 1.7; color: var(--brand-ink); margin-bottom: 1.1rem; }
.ap-prose ul { margin-bottom: 1.1rem; }
.ap-prose li { font-size: 1.05rem; line-height: 1.7; margin-bottom: 0.4rem; }

.ap-section.alt { background: rgba(248,250,252,0.78); border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border); backdrop-filter: blur(2px); }

/* Section header */
.ap-section-head { text-align: center; margin-bottom: 3rem; }
.ap-section-head .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.ap-section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.ap-section-head p {
  font-size: 1.1rem;
  color: var(--brand-ink-soft);
  max-width: 38rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* 3-column feature row */
.ap-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.ap-feature {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.85rem;
  padding: 1.75rem;
  transition:
    transform 280ms cubic-bezier(.2,.7,.2,1),
    box-shadow 280ms ease,
    border-color 280ms ease;
  will-change: transform;
}
.ap-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -16px rgba(11,37,69,0.14);
  border-color: rgba(31,111,235,0.30);
}
.ap-feature .icon {
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(31,111,235,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-tertiary);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), background 280ms ease;
}
.ap-feature:hover .icon {
  transform: scale(1.06) rotate(-2deg);
  background: rgba(31,111,235,0.18);
}
.ap-feature h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.ap-feature p {
  color: var(--brand-ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Sources strip */
.ap-sources {
  background: var(--brand-primary);
  color: #c2cee0;
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.ap-sources .label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #8a98b0;
  font-size: 0.7rem;
  margin-bottom: 0.75rem;
  display: block;
}
.ap-sources strong { color: #fff; font-weight: 600; }
.ap-sources a { color: #fff; }

/* Founder block */
.ap-founder {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.75rem;
  align-items: start;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.85rem;
  padding: 1.75rem;
  max-width: 42rem;
  margin: 0 auto;
}
.ap-founder .avatar {
  width: 5rem; height: 5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-tertiary));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: 0.02em;
}
/* Photo variant: real headshot inside the monogram circle */
.ap-founder .monogram.founder-photo {
  width: 7rem; height: 7rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-primary);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3px rgba(0, 196, 154, 0.55),
    0 10px 24px -8px rgba(11, 37, 69, 0.30);
  flex-shrink: 0;
}
.ap-founder .monogram.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
body.dark-mode .ap-founder .monogram.founder-photo {
  box-shadow:
    0 0 0 2px rgba(8, 12, 28, 0.95),
    0 0 0 3px rgba(0, 255, 179, 0.55),
    0 12px 28px -8px rgba(0, 0, 0, 0.55);
}
@media (max-width: 720px) {
  .ap-founder { grid-template-columns: 1fr; }
  .ap-founder .monogram.founder-photo {
    width: 6rem; height: 6rem;
  }
}
.ap-founder .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--brand-ink); }
.ap-founder .credential {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 600;
  margin-top: 0.15rem;
}
.ap-founder .bio {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: var(--brand-ink);
  line-height: 1.65;
}

/* Pricing */
.ap-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}
.ap-price {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.85rem;
  padding: 2rem;
  text-align: left;
  position: relative;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    box-shadow 320ms ease,
    border-color 320ms ease;
  will-change: transform, box-shadow;
}
.ap-price:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -16px rgba(11,37,69,0.20);
  border-color: rgba(31,111,235,0.35);
}
.ap-price.featured {
  border: 2px solid var(--brand-tertiary);
  box-shadow: var(--shadow-lg);
  /* Subtle continuous breath so the $29 card feels alive even at rest */
  animation: ap-price-breath 4.6s ease-in-out infinite;
}
@keyframes ap-price-breath {
  0%, 100% { transform: translateY(0); box-shadow: var(--shadow-lg); }
  50%      { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(31,111,235,0.22); }
}
.ap-price.featured:hover {
  transform: translateY(-6px);
  box-shadow:
    0 28px 56px -16px rgba(31,111,235,0.32),
    0 0 0 1px rgba(31,111,235,0.20);
  animation-play-state: paused;
}
.ap-price .badge {
  position: absolute;
  top: -0.7rem; left: 1.5rem;
  background: var(--brand-tertiary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
}
.ap-price h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 0.5rem; }
.ap-price .amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--brand-ink);
  line-height: 1;
  margin: 0.75rem 0 0.4rem;
}
.ap-price .amount .period {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand-ink-soft);
  letter-spacing: 0.04em;
  margin-left: 0.25rem;
}
.ap-price .summary {
  color: var(--brand-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.ap-price ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.ap-price li {
  padding: 0.5rem 0;
  font-size: 0.92rem;
  color: var(--brand-ink);
  border-top: 1px solid var(--brand-border);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.ap-price li:first-child { border-top: none; }
.ap-price li::before {
  content: "✓";
  color: var(--brand-accent);
  font-weight: 700;
  flex-shrink: 0;
}
.ap-price .cta {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--brand-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 120ms ease, transform 120ms ease;
}
.ap-price .cta:hover { background: var(--brand-ink); transform: translateY(-1px); color: #fff; }
.ap-price.featured .cta { background: var(--brand-tertiary); }
.ap-price.featured .cta:hover { background: #1856b8; }

/* FAQ */
.ap-faq { border: 1px solid var(--brand-border); border-radius: 0.85rem; overflow: hidden; max-width: 48rem; margin: 0 auto; }
.ap-faq details { border-top: 1px solid var(--brand-border); transition: background 200ms ease; }
.ap-faq details:first-of-type { border-top: none; }
.ap-faq details:hover { background: rgba(31,111,235,0.04); }
.ap-faq details[open] { background: rgba(31,111,235,0.04); }
.ap-faq summary {
  cursor: pointer;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brand-ink);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 1rem;
  transition: color 180ms ease, padding-left 240ms cubic-bezier(.2,.7,.2,1);
}
.ap-faq summary:hover { color: var(--brand-tertiary); padding-left: 1.45rem; }
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::after {
  content: "+";
  font-weight: 300;
  font-size: 1.5rem;
  color: var(--brand-ink-soft);
  transition: transform 240ms cubic-bezier(.2,.7,.2,1), color 180ms ease;
}
.ap-faq summary:hover::after { color: var(--brand-tertiary); }
.ap-faq details[open] summary::after { content: "−"; transform: rotate(180deg); }
.ap-faq .ans { padding: 0 1.25rem 1.25rem; color: var(--brand-ink); line-height: 1.65; font-size: 0.95rem; }

/* Footer */
.ap-footer {
  background: var(--brand-primary);
  color: #c2cee0;
  padding: 3rem 1.25rem 2.5rem;
  font-size: 0.9rem;
}
.ap-footer .inner { max-width: var(--content-max); margin: 0 auto; }
.ap-footer .top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: start;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ap-footer .brand { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 0.5rem; display: inline-flex; align-items: baseline; gap: 0.45rem; }
.ap-footer .brand .the { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: #8a98b0; }
.ap-footer .brand .accent { color: #6ba6ff; }
.ap-footer .tagline { color: #8a98b0; font-size: 0.88rem; line-height: 1.6; max-width: 26rem; }
.ap-footer .nav { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.ap-footer .nav a { color: #c2cee0; text-decoration: none; }
.ap-footer .nav a:hover { color: #fff; }
.ap-footer .fine { color: #8a98b0; font-size: 0.8rem; line-height: 1.6; }
.ap-footer .fine a { color: #c2cee0; }

/* Job-page specific */
.ap-job-head {
  background:
    linear-gradient(180deg, #fff 0%, var(--brand-paper) 100%);
  padding: 3.5rem 1.25rem 2.5rem;
  border-bottom: 1px solid var(--brand-border);
}
.ap-job-head .crumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-bottom: 1rem;
}
.ap-job-head .crumb a { color: var(--brand-tertiary); text-decoration: none; }
.ap-job-head h1 {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.ap-job-head .vert {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}

/* Comparison cluster (used on /jobs/[slug] pages) */
.ap-cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}
.ap-cluster .card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.7rem;
  padding: 1.1rem 1.25rem;
}
.ap-cluster .card .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-bottom: 0.4rem;
}
.ap-cluster .card .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand-ink);
  line-height: 1;
}
.ap-cluster .card .note {
  font-size: 0.82rem;
  color: var(--brand-ink-soft);
  margin-top: 0.4rem;
  line-height: 1.4;
}

/* Related jobs grid */
.ap-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}
.ap-related a {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.55rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  display: flex; align-items: center; justify-content: space-between;
  transition: border-color 120ms ease, transform 120ms ease;
}
.ap-related a:hover {
  border-color: var(--brand-tertiary);
  transform: translateY(-1px);
}
.ap-related .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--brand-ink);
}
.ap-related .s {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-tertiary);
}

/* Browse all (homepage bottom) */
.ap-browse {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.ap-browse a {
  font-size: 0.88rem;
  color: var(--brand-ink-soft);
  text-decoration: none;
  padding: 0.4rem 0.6rem;
  border-radius: 0.35rem;
  transition: background 180ms ease, color 180ms ease, transform 180ms cubic-bezier(.2,.7,.2,1), padding-left 220ms cubic-bezier(.2,.7,.2,1);
}
.ap-browse a:hover {
  background: var(--brand-muted);
  color: var(--brand-primary);
  transform: translateX(2px);
  padding-left: 0.85rem;
}

/* Vertical filter chips */
.ap-vchips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1.25rem;
  justify-content: center;
}
.ap-vchips button {
  padding: 0.4rem 0.85rem;
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand-ink-soft);
  cursor: pointer;
  transition: all 200ms cubic-bezier(.2,.7,.2,1);
}
.ap-vchips button:hover {
  border-color: var(--brand-tertiary);
  color: var(--brand-tertiary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(31,111,235,0.30);
}
.ap-vchips button.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

/* Status messages */
.ap-msg {
  padding: 1rem 1.25rem;
  border-radius: 0.55rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
.ap-msg.success {
  background: rgba(0,196,154,0.1);
  border: 1px solid var(--brand-accent);
  color: var(--brand-ink);
}

/* Share row in result panel */
.ap-result .share {
  padding: 1.5rem 1.75rem 1.75rem;
  border-top: 3px solid var(--brand-accent);
  background: #f0fdf8;
  text-align: center;
}
.ap-result .share-header {
  margin-bottom: 1rem;
}
.ap-result .share-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-resist-strong);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.ap-result .share-sub {
  font-size: 0.83rem;
  color: var(--brand-ink-soft);
  line-height: 1.4;
}
.ap-result .share-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.ap-result .share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.83rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: filter 110ms ease, transform 100ms ease, box-shadow 110ms ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.ap-result .share-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ap-result .share-x    { background: #000;     color: #fff; }
.ap-result .share-li   { background: #0077B5;  color: #fff; }
.ap-result .share-fb   { background: #1877F2;  color: #fff; }
.ap-result .share-rd   { background: #FF4500;  color: #fff; }
.ap-result .share-ig   { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: #fff; }
.ap-result .share-copy { background: #00C49A;  color: #0a3320; }
.ap-result .share-copy.copied { background: #0F7A3A; color: #fff; }
.ap-result .share-ig.copied   { background: #d6249f; }

/* Loading shimmer (calculator submit -> result reveal) */
.ap-shimmer {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 2.5rem;
}
.ap-shimmer > div {
  height: 16px;
  border-radius: 6px;
  background: rgba(0, 196, 154, 0.22);
}
.ap-shimmer > div:first-child { width: 60%; height: 28px; }
.ap-shimmer > div:nth-child(2) { width: 90%; }
.ap-shimmer > div:last-child { width: 75%; }

/* Live counter (homepage hero) */
.ap-live {
  display: none;
  margin: 1.25rem auto 0;
  padding: 0.55rem 1rem;
  background: rgba(0,196,154,0.08);
  border: 1px solid rgba(0,196,154,0.4);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--brand-ink);
  width: fit-content;
  align-items: center;
  gap: 0.6rem;
}
.ap-live.show { display: inline-flex; animation: ap-fade-in .6s ease; }
.ap-live::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--brand-accent);
  animation: ap-pulse 2s ease-in-out infinite;
}
.ap-live strong { color: var(--brand-primary); font-weight: 700; }

/* Founder monogram */
.ap-founder .monogram {
  width: 5rem; height: 5rem; border-radius: 50%;
  background: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.ap-founder .monogram svg { width: 100%; height: 100%; display: block; }

/* Animations */
@keyframes ap-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ap-arc-fill {
  from { stroke-dashoffset: 500; }
  to   { stroke-dashoffset: 200; }
}
@keyframes ap-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes ap-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ============================================================
   PIVOT INTERVIEW — premium chat surface
   A complete sub-system. Self-contained class namespace: .iv-*
   ============================================================ */

.iv-shell {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 100% -10%, rgba(31,111,235,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(0,196,154,0.08), transparent 60%),
    linear-gradient(180deg, #fff 0%, #F4F8FD 100%);
  display: grid;
  grid-template-rows: auto 1fr;
}

.iv-topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--brand-border);
}
.iv-topbar .inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
}

.iv-topbar .session-meta {
  display: flex;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 600;
}
.iv-topbar .session-meta .live-dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--brand-accent);
  margin-right: 0.4rem;
  animation: ap-pulse 2s ease-in-out infinite;
  vertical-align: middle;
}
.iv-topbar .session-meta strong { color: var(--brand-primary); font-weight: 700; }

.iv-progress-wrap {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--brand-ink-soft);
  font-weight: 600;
}
.iv-progress {
  flex: 1;
  min-width: 8rem;
  height: 6px;
  background: var(--brand-border);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.iv-progress .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-tertiary), var(--brand-accent));
  transition: width 0.4s ease;
  border-radius: 999px;
}
.iv-progress .fill::after {
  content: "";
  position: absolute; right: 0; top: -2px; bottom: -2px; width: 18px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6));
  filter: blur(4px);
}
.iv-progress-num strong { color: var(--brand-primary); font-weight: 700; }

.iv-stage {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 48rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 8rem;
  width: 100%;
}

/* Welcome / pre-chat hero (shown on first paint while we init) */
.iv-welcome {
  text-align: center;
  padding: 3rem 1rem 1rem;
  animation: ap-fade-in 0.6s ease both;
}
.iv-welcome .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
  margin-bottom: 1rem;
}
.iv-welcome h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  margin-bottom: 1rem;
  line-height: 1.1;
}
.iv-welcome h1 .accent {
  background: linear-gradient(180deg, transparent 60%, rgba(0,196,154,0.35) 60%);
  padding: 0 0.15em;
}
.iv-welcome p {
  color: var(--brand-ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 38rem;
  margin: 0 auto 1.5rem;
}

/* The chat thread itself */
.iv-thread {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1rem 0;
  min-height: 12rem;
}
.iv-msg {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.85rem;
  align-items: start;
  animation: ap-fade-in 0.4s ease both;
}
.iv-avatar {
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.55rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.iv-msg.assistant .iv-avatar {
  background: var(--brand-primary);
  color: #fff;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  font-size: 0.52rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
  gap: 1px;
  padding: 2px;
  text-align: center;
}
.iv-msg.assistant .iv-avatar > span {
  display: block;
  position: relative;
  z-index: 1;
}
.iv-msg.assistant .iv-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(107,166,255,0.4), transparent 60%);
}
.iv-msg.user .iv-avatar {
  background: rgba(31,111,235,0.10);
  color: var(--brand-tertiary);
  border: 1px solid rgba(31,111,235,0.25);
}

.iv-bubble {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.85rem;
  padding: 1rem 1.15rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--brand-ink);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.iv-msg.assistant .iv-bubble {
  border-top-left-radius: 0.25rem;
}
.iv-msg.user .iv-bubble {
  background: linear-gradient(180deg, #F4F8FF 0%, #EFF5FF 100%);
  border-color: rgba(31,111,235,0.15);
  border-top-left-radius: 0.25rem;
}
.iv-bubble .sender-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 700;
  margin-bottom: 0.4rem;
  display: block;
}
.iv-msg.assistant .iv-bubble .sender-tag { color: var(--brand-tertiary); }
.iv-bubble .body p { margin: 0 0 0.6rem; }
.iv-bubble .body p:last-child { margin-bottom: 0; }
.iv-bubble .typing-cursor {
  display: inline-block;
  width: 0.5em; height: 1em;
  background: var(--brand-tertiary);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: iv-blink 0.9s steps(2) infinite;
}
@keyframes iv-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Composer (sticky at bottom) */
.iv-composer-wrap {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 25%, #fff 100%);
  padding: 2rem 1.25rem 1.5rem;
  z-index: 20;
}
.iv-composer {
  max-width: 48rem;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid var(--brand-border);
  border-radius: 1rem;
  padding: 0.75rem 0.75rem 0.75rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: end;
  box-shadow: 0 10px 30px rgba(11,37,69,0.08);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.iv-composer:focus-within {
  border-color: var(--brand-tertiary);
  box-shadow: 0 0 0 3px rgba(31,111,235,0.10), 0 12px 32px rgba(11,37,69,0.10);
}
.iv-composer textarea {
  resize: none;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brand-ink);
  padding: 0.6rem 0.4rem;
  min-height: 2.5rem;
  max-height: 12rem;
  background: transparent;
  width: 100%;
}
.iv-composer textarea::placeholder { color: #97a3bc; }
.iv-composer .send {
  align-self: end;
  padding: 0.7rem 1.1rem;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 0.65rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 120ms ease, transform 120ms ease;
}
.iv-composer .send:hover { background: var(--brand-ink); transform: translateY(-1px); }
.iv-composer .send:disabled {
  background: var(--brand-border);
  color: var(--brand-ink-soft);
  cursor: not-allowed;
  transform: none;
}
.iv-composer .send svg { width: 14px; height: 14px; }

.iv-composer-meta {
  max-width: 48rem;
  margin: 0.7rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--brand-ink-soft);
}
.iv-composer-meta a { color: var(--brand-tertiary); }

/* Status / banner */
.iv-banner {
  background: linear-gradient(135deg, #F0F6FF 0%, #EFFFFA 100%);
  border: 1px solid var(--brand-border);
  border-radius: 0.85rem;
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  font-size: 0.95rem;
  color: var(--brand-ink);
  animation: ap-fade-in 0.4s ease;
}
.iv-banner.warn {
  background: #FFFBEA;
  border-color: #F1E2A8;
  color: var(--brand-ink);
}
.iv-banner.error {
  background: #FFF0F0;
  border-color: #F3CCCC;
  color: var(--brand-danger);
}
.iv-banner .icon {
  width: 2rem; height: 2rem; border-radius: 0.5rem;
  background: rgba(31,111,235,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-tertiary);
  font-family: var(--font-mono);
  font-weight: 700;
}
.iv-banner.warn .icon { background: rgba(181,137,0,0.15); color: var(--brand-warn); }
.iv-banner.error .icon { background: rgba(160,48,48,0.15); color: var(--brand-danger); }

/* ============================================================
   FINAL REPORT — premium artifact rendered after finalize
   ============================================================ */
.iv-report {
  padding: 1.5rem 0;
  animation: ap-fade-in 0.7s ease both;
}
.iv-report .stamp {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.iv-report h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.35rem;
}
.iv-report .sub {
  color: var(--brand-ink-soft);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Refined score card */
.iv-score-card {
  background: linear-gradient(180deg, #fff 0%, var(--brand-paper) 100%);
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  padding: 1.75rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  box-shadow: var(--shadow-md);
}
.iv-score-card .gauge {
  width: 9rem; height: 9rem;
  position: relative;
  flex-shrink: 0;
}
.iv-score-card .gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.iv-score-card .gauge .val {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--brand-ink);
  line-height: 1;
}
.iv-score-card .gauge .val .of {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-top: 0.35rem;
}
.iv-score-card .copy .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.iv-score-card .copy h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}
.iv-score-card .copy p {
  color: var(--brand-ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* Pivot cards */
.iv-pivots-head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 2rem 0 1rem;
}
.iv-pivots-head .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
}
.iv-pivots-head h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.iv-pivot {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.95rem;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.iv-pivot:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: rgba(31,111,235,0.25); }
.iv-pivot .head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: baseline;
  margin-bottom: 0.85rem;
}
.iv-pivot .rank {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
  background: rgba(31,111,235,0.08);
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
}
.iv-pivot .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  color: var(--brand-ink);
}
.iv-pivot .pivot-score {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-ink);
}
.iv-pivot .bar {
  height: 5px;
  background: var(--brand-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.iv-pivot .bar .fill {
  height: 100%;
  background: var(--brand-tertiary);
  border-radius: 999px;
  width: 0%;
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.iv-pivot .section { margin-top: 0.85rem; }
.iv-pivot .section .h {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.iv-pivot .section .b {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--brand-ink);
}
.iv-pivot .resources {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.5rem;
}
.iv-pivot .resources .chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: var(--brand-paper);
  border: 1px solid var(--brand-border);
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--brand-ink);
}

/* 90-day plan */
.iv-plan {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin: 2rem 0;
}
.iv-plan .month {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 0.85rem;
  padding: 1.2rem;
  border-top: 3px solid var(--brand-accent);
}
.iv-plan .month .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-accent);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.iv-plan .month .body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--brand-ink);
}

/* Highest leverage callout + warning */
.iv-callout {
  background: linear-gradient(135deg, var(--brand-primary) 0%, #143b6d 100%);
  color: #fff;
  border-radius: 1rem;
  padding: 1.75rem;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
.iv-callout .pulse {
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(0,196,154,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.iv-callout .pulse::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(0,196,154,0.5);
  animation: iv-ring 2.5s ease-out infinite;
}
@keyframes iv-ring {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.iv-callout .pulse .dot {
  width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--brand-accent);
}
.iv-callout .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.iv-callout .body { font-size: 1.05rem; line-height: 1.55; }

.iv-warn {
  background: #FFFBEA;
  border: 1px solid #F1E2A8;
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.iv-warn .label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-warn);
  font-weight: 700;
  margin-bottom: 0.45rem;
}
.iv-warn .body { font-size: 0.95rem; line-height: 1.6; color: var(--brand-ink); }

.iv-report-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--brand-border);
  text-align: center;
}
.iv-report-footer .pdf-status {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brand-ink-soft);
  letter-spacing: 0.04em;
  margin-bottom: 0.85rem;
}
.iv-report-footer .pdf-status strong { color: var(--band-resist-strong); font-weight: 700; }
.iv-report-footer .signoff {
  font-size: 0.92rem;
  color: var(--brand-ink-soft);
  line-height: 1.6;
  max-width: 30rem;
  margin: 0 auto;
}
.iv-report-footer .signoff strong { color: var(--brand-ink); }

/* Animated gradient ring around the pre-chat interviewer card */
.iv-interviewer-card {
  background: #fff;
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 1rem 0 2rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.iv-interviewer-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 0deg, var(--brand-tertiary), var(--brand-accent), var(--brand-tertiary));
  z-index: -1;
  animation: iv-spin 8s linear infinite;
  opacity: 0.4;
  filter: blur(20px);
}
@keyframes iv-spin {
  to { transform: rotate(360deg); }
}
.iv-interviewer-card .iv-mark {
  width: 4rem; height: 4rem; border-radius: 50%;
  background: var(--brand-primary);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.iv-interviewer-card .iv-mark svg { width: 2.2rem; height: 2.2rem; }
.iv-interviewer-card .who .who-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-ink);
}
.iv-interviewer-card .who .who-cred {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
  margin-top: 0.2rem;
}
.iv-interviewer-card .who .who-bio {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--brand-ink-soft);
  margin-top: 0.5rem;
}

/* Responsive — interview */
@media (max-width: 720px) {
  .iv-stage { padding: 1rem 1rem 8rem; }
  .iv-topbar .inner { grid-template-columns: 1fr; gap: 0.5rem; }
  .iv-topbar .session-meta { font-size: 0.65rem; gap: 0.85rem; }
  .iv-score-card { grid-template-columns: 1fr; text-align: center; }
  .iv-score-card .gauge { margin: 0 auto; }
  .iv-plan { grid-template-columns: 1fr; }
  .iv-callout { grid-template-columns: 1fr; text-align: center; }
  .iv-callout .pulse { margin: 0 auto; }
  .iv-pivot .head { grid-template-columns: 1fr auto; }
  .iv-pivot .head .rank { grid-column: 1 / -1; justify-self: start; }
}

/* Responsive */
@media (max-width: 900px) {
  .ap-result .top { grid-template-columns: auto 1fr; }
  .ap-result .radar-wrap { display: none; }
}
@media (max-width: 720px) {
  .ap-result .top { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; justify-items: center; }
  .ap-result .lists { grid-template-columns: 1fr; }
  .ap-result .lists .col + .col { border-left: none; border-top: 1px solid var(--brand-border); }
  .ap-result .projections { grid-template-columns: 1fr; }
  .ap-result .projection { border-right: none; border-bottom: 1px solid var(--brand-border); }
  .ap-result .projection:last-child { border-bottom: none; }
  .ap-result .capture .row { grid-template-columns: 1fr; }
  .ap-result .share-btn { font-size: 0.78rem; padding: 0.5rem 0.8rem; }
  .ap-section { padding: 3rem 1rem; }
  .ap-hero { padding: 3rem 1rem 2.5rem; }
  .ap-nav .links { display: none; }
  .ap-footer .top { grid-template-columns: 1fr; }
}

/* ============================================================
   PREMIUM-POLISH PASS · 2026-04-30
   Strategic-color, draw-on H1 stroke, 2-col pricing with PDF
   thumbnail + risk-reversal, $29-justification strip, Pro waitlist,
   verified physician badge, build stamp, custom hero cursor,
   tighter hover states. Stripe-style restraint where it matters,
   dopamine where it converts.
   ============================================================ */

/* ---- Live counter promoted above H1 (kept .ap-live base; add tweaks) ---- */
.ap-live.ap-live-promo {
  margin: 0 auto 1.5rem;
  background: rgba(0, 196, 154, 0.10);
  border-color: rgba(0, 196, 154, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.5rem 0.95rem;
}
body.dark-mode .ap-live.ap-live-promo {
  background: rgba(0, 255, 179, 0.10);
  border-color: rgba(0, 255, 179, 0.4);
  color: rgba(255, 255, 255, 0.92);
}

/* ---- H1 SVG-style draw-on stroke ---- */
.ap-hero h1 .underline-stroke {
  position: relative;
  display: inline-block;
  background: none;
  padding: 0 0.05em;
}
.ap-hero h1 .underline-stroke::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.04em;
  height: 0.16em;
  background: linear-gradient(90deg, #00C49A 0%, #00FFB3 35%, #6BA6FF 70%, #1F6FEB 100%);
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: ap-h1-stroke-draw 1.15s cubic-bezier(0.65, 0.05, 0.36, 1) 0.55s forwards;
  box-shadow: 0 0 18px rgba(0, 255, 179, 0.35);
}
@keyframes ap-h1-stroke-draw {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ap-hero h1 .underline-stroke::after {
    animation: none;
    transform: scaleX(1);
  }
}

/* ---- 2-column pricing grid ---- */
.ap-pricing.two-col {
  grid-template-columns: 1fr 1.15fr;
  max-width: 64rem;
  margin: 0 auto;
  gap: 1.5rem;
}
@media (max-width: 760px) {
  .ap-pricing.two-col { grid-template-columns: 1fr; }
}

/* ---- PDF preview thumbnail on featured card ---- */
.ap-price.featured .pdf-preview {
  margin: 0 auto 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  position: relative;
}
.ap-price.featured .pdf-preview svg {
  display: block;
  width: 168px;
  height: auto;
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(11,37,69,0.06),
    0 14px 30px -10px rgba(11,37,69,0.30),
    0 6px 14px -8px rgba(11,37,69,0.18);
  transform: rotate(-1.5deg);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 320ms ease;
}
.ap-price.featured:hover .pdf-preview svg {
  transform: rotate(-0.5deg) translateY(-3px);
  box-shadow:
    0 1px 0 rgba(11,37,69,0.06),
    0 22px 40px -10px rgba(11,37,69,0.42),
    0 10px 18px -10px rgba(11,37,69,0.22);
}
.ap-price.featured .pdf-preview-cap {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  text-align: center;
}
body.dark-mode .ap-price.featured .pdf-preview-cap {
  color: rgba(232, 238, 248, 0.65);
}

/* ---- Risk-reversal line on featured card ---- */
.ap-price.featured .guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--brand-border);
  font-size: 0.83rem;
  color: var(--brand-ink-soft);
}
.ap-price.featured .guarantee svg {
  color: var(--brand-accent);
  flex-shrink: 0;
}
body.dark-mode .ap-price.featured .guarantee {
  border-top-color: rgba(255, 255, 255, 0.10);
  color: rgba(232, 238, 248, 0.78);
}
body.dark-mode .ap-price.featured .guarantee svg {
  color: #00FFB3;
}

/* ---- Featured card period clarification ---- */
.ap-price.featured .amount .period {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--brand-ink-soft);
}
body.dark-mode .ap-price.featured .amount .period {
  color: rgba(232, 238, 248, 0.6);
}

/* ---- Why $29 strip (promoted from FAQ) ---- */
.ap-why-29 {
  max-width: 64rem;
  margin: 2.75rem auto 0;
  padding: 1.75rem 1.5rem;
  background: rgba(31, 111, 235, 0.04);
  border: 1px solid rgba(31, 111, 235, 0.18);
  border-radius: 1rem;
}
body.dark-mode .ap-why-29 {
  background: rgba(0, 64, 255, 0.08);
  border-color: rgba(107, 166, 255, 0.22);
}
.ap-why-29 .why-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-tertiary);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.35rem;
}
body.dark-mode .ap-why-29 .why-eyebrow { color: #6BA6FF; }
.ap-why-29 .why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 760px) {
  .ap-why-29 .why-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.ap-why-29 .why-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-tertiary);
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
body.dark-mode .ap-why-29 .why-num { color: #6BA6FF; }
.ap-why-29 .why-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-ink);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
body.dark-mode .ap-why-29 .why-label { color: #FFFFFF; }
.ap-why-29 .why-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--brand-ink-soft);
}
body.dark-mode .ap-why-29 .why-body { color: rgba(232, 238, 248, 0.78); }

/* ---- Diagnostic Pro waitlist (replaces dead "coming soon" card) ---- */
.ap-pro-waitlist {
  max-width: 64rem;
  margin: 1.5rem auto 0;
  padding: 1.1rem 1.5rem;
  background: rgba(15, 31, 58, 0.03);
  border: 1px dashed var(--brand-border);
  border-radius: 0.85rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
}
body.dark-mode .ap-pro-waitlist {
  background: rgba(15, 20, 40, 0.45);
  border-color: rgba(255, 255, 255, 0.10);
}
.ap-pro-waitlist .pro-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
body.dark-mode .ap-pro-waitlist .pro-eyebrow { color: rgba(232, 238, 248, 0.7); }
.ap-pro-waitlist .pro-line {
  font-size: 0.95rem;
  color: var(--brand-ink);
  line-height: 1.5;
}
body.dark-mode .ap-pro-waitlist .pro-line { color: rgba(255, 255, 255, 0.92); }
.ap-pro-waitlist .pro-form {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.ap-pro-waitlist .pro-form input[type="email"] {
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--brand-border);
  border-radius: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  min-width: 14rem;
  background: #fff;
  color: var(--brand-ink);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.ap-pro-waitlist .pro-form input[type="email"]:focus {
  outline: none;
  border-color: var(--brand-tertiary);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}
body.dark-mode .ap-pro-waitlist .pro-form input[type="email"] {
  background: rgba(8, 12, 28, 0.6);
  border-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
body.dark-mode .ap-pro-waitlist .pro-form input[type="email"]:focus {
  border-color: #6BA6FF;
  box-shadow: 0 0 0 3px rgba(107, 166, 255, 0.18);
}
.ap-pro-waitlist .pro-form button {
  padding: 0.6rem 1.05rem;
  background: var(--brand-primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), background 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 2px 8px rgba(11, 37, 69, 0.16);
}
.ap-pro-waitlist .pro-form button:hover {
  background: var(--brand-ink);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11, 37, 69, 0.28);
}
body.dark-mode .ap-pro-waitlist .pro-form button {
  background: linear-gradient(135deg, #1F6FEB, #6BA6FF);
}
@media (max-width: 600px) {
  .ap-pro-waitlist { grid-template-columns: 1fr; }
  .ap-pro-waitlist .pro-form input[type="email"] { min-width: 0; flex: 1; }
}

/* ---- Personalized line in score-reveal upsell bar ---- */
.ap-upsell-bar .ap-upsell-text .personalized {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.55rem;
  padding: 0.18rem 0.55rem;
  border-left: 2px solid #00FFB3;
  display: inline-block;
  background: rgba(0, 255, 179, 0.10);
  border-radius: 0 4px 4px 0;
}
.ap-upsell-bar .ap-upsell-text .personalized strong {
  color: #B9FFE5;
  font-weight: 700;
}

/* ---- Verified physician badge ---- */
.ap-founder .credential {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}
.ap-founder .verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #0F7A3A;
  background: rgba(0, 196, 154, 0.10);
  border: 1px solid rgba(0, 196, 154, 0.40);
  border-radius: 999px;
}
.ap-founder .verified-badge svg { stroke: #0F7A3A; }
body.dark-mode .ap-founder .verified-badge {
  color: #00FFB3;
  background: rgba(0, 255, 179, 0.10);
  border-color: rgba(0, 255, 179, 0.45);
}
body.dark-mode .ap-founder .verified-badge svg { stroke: #00FFB3; }

/* ---- Build stamp (footer technical-credibility line) ---- */
.ap-footer .build-stamp {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(232, 238, 248, 0.55);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.ap-footer .build-stamp .sep {
  opacity: 0.4;
}

/* ---- Strategic-color tone-down: dim the non-featured CTAs in light mode
   so the featured $29 button is visually loudest. The page's brightest
   gradients now belong to the score-reveal upsell + the $29 buy. ---- */
.ap-price:not(.featured) .cta {
  background: var(--brand-primary);
  color: #fff;
  transition: background 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 180ms ease;
  box-shadow: 0 2px 10px rgba(11, 37, 69, 0.18);
}
.ap-price:not(.featured) .cta:hover {
  background: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 37, 69, 0.28);
}
body.dark-mode .ap-price:not(.featured) .cta {
  background: linear-gradient(135deg, #1F6FEB, #143b6d);
  box-shadow: 0 6px 18px -6px rgba(31, 111, 235, 0.45);
}
body.dark-mode .ap-price:not(.featured) .cta:hover {
  background: linear-gradient(135deg, #6BA6FF, #1F6FEB);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -6px rgba(31, 111, 235, 0.55);
}

/* ---- Browse-jobs hover polish ---- */
.ap-browse a {
  transition: background 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ap-browse a:hover {
  transform: translateY(-1px);
}

/* ---- v-chips subtle hover lift ---- */
.ap-vchips button {
  transition: background 180ms ease, color 180ms ease, transform 180ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 180ms ease;
}
.ap-vchips button:hover {
  transform: translateY(-1px);
}

/* ---- Submit pulse: tighten timing curve, no bouncy artifacts ---- */
@keyframes ap-submit-pulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(11,37,69,0.15);
  }
  50% {
    box-shadow:
      0 4px 24px rgba(31,111,235,0.40),
      0 0 0 4px rgba(31,111,235,0.10);
  }
}

/* ---- Score-celebration: keep the satisfying lift but reduce the back-out
   overshoot so it reads "premium delight" not "toy bounce" ---- */
.ap-result .gauge.celebrating .num {
  animation: ap-score-land 0.85s cubic-bezier(0.34, 1.18, 0.64, 1) both;
}
@keyframes ap-score-land {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12); }
  62%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ============================================================
   LONG-FORM PROSE — DARK-MODE READABILITY (methodology, privacy)
   Fixes: .ap-prose p was hard-coded to dark navy ink, invisible
   on the dark body bg. Inline-styled formula and table inherited
   light text on light backgrounds — also invisible.
   ============================================================ */
body.dark-mode .ap-prose p,
body.dark-mode .ap-prose li {
  color: rgba(232, 238, 248, 0.88);
}
body.dark-mode .ap-prose strong { color: #FFFFFF; }
body.dark-mode .ap-prose em     { color: rgba(232, 238, 248, 0.95); }
body.dark-mode .ap-prose code {
  background: rgba(0, 64, 255, 0.18);
  color: #B8D4FF;
  padding: 0.05em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  border: 1px solid rgba(107, 166, 255, 0.18);
}
body.dark-mode .ap-prose a { color: #6BA6FF; }
body.dark-mode .ap-prose a:hover { color: #00FFB3; }

/* Methodology — formula block (replaces the unreadable <pre>) */
.method-formula {
  margin: 1.5rem 0 2.25rem;
  padding: 1.5rem 1.6rem;
  border-radius: 14px;
  border: 1px solid var(--brand-border);
  background: linear-gradient(180deg, #F6F8FC, #EEF2F8);
  font-family: var(--font-mono);
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--brand-ink);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.method-formula .group { display: block; }
.method-formula .group + .group { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed rgba(15,31,58,0.10); }
.method-formula .row { display: block; white-space: nowrap; }
.method-formula .label { color: var(--brand-tertiary); font-weight: 700; }
.method-formula .op    { color: var(--brand-ink-soft); }
.method-formula .w     { color: var(--brand-accent); font-weight: 700; }
.method-formula .var   { color: var(--brand-primary); font-weight: 600; }
.method-formula .indent { display: inline-block; width: 7.5ch; }

body.dark-mode .method-formula {
  background: linear-gradient(180deg, rgba(12,17,36,0.92), rgba(8,12,28,0.96));
  border: 1px solid rgba(0, 255, 179, 0.22);
  color: rgba(232, 238, 248, 0.92);
  box-shadow: 0 0 30px rgba(0, 64, 255, 0.10);
}
body.dark-mode .method-formula .group + .group { border-top-color: rgba(255,255,255,0.10); }
body.dark-mode .method-formula .label { color: #6BA6FF; }
body.dark-mode .method-formula .op    { color: rgba(232, 238, 248, 0.5); }
body.dark-mode .method-formula .w     { color: #00FFB3; }
body.dark-mode .method-formula .var   { color: #FFFFFF; }

@media (max-width: 640px) {
  .method-formula { font-size: 0.82rem; padding: 1.05rem 1rem; line-height: 1.7; }
  .method-formula .row { white-space: normal; }
  .method-formula .indent { display: inline-block; width: 1.25ch; }
}

/* Methodology — drift table (replaces the unreadable inline-styled <table>) */
.method-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5rem 0 2.25rem;
  font-size: 0.96rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-sm);
}
.method-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.85rem 0.95rem;
  background: var(--brand-muted);
  color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-border);
}
.method-table thead th.num { text-align: right; }
.method-table tbody td {
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--brand-border);
  color: var(--brand-ink);
  vertical-align: top;
  line-height: 1.55;
}
.method-table tbody tr:last-child td { border-bottom: none; }
.method-table tbody tr:nth-child(even) td { background: rgba(248,250,252,0.55); }
.method-table tbody td.vert {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brand-tertiary);
  white-space: nowrap;
  font-weight: 600;
}
.method-table tbody td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--brand-primary);
  font-size: 1.05rem;
}

body.dark-mode .method-table {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(12,17,36,0.55);
  box-shadow: 0 0 28px rgba(0, 64, 255, 0.06);
}
body.dark-mode .method-table thead th {
  background: rgba(255,255,255,0.05);
  color: rgba(232,238,248,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
body.dark-mode .method-table tbody td {
  color: rgba(232,238,248,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.dark-mode .method-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
body.dark-mode .method-table tbody td.vert { color: #6BA6FF; }
body.dark-mode .method-table tbody td.num  { color: #00FFB3; }

@media (max-width: 640px) {
  .method-table thead th, .method-table tbody td { padding: 0.6rem 0.55rem; font-size: 0.85rem; }
  .method-table tbody td.num { font-size: 0.95rem; }
  .method-table tbody td.vert { white-space: normal; }
}

/* Methodology — score band cards (replaces flat bullet list) */
.method-bands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2.25rem;
  padding: 0;
  list-style: none;
}
.method-bands li {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--brand-border);
  border-left: 4px solid var(--brand-primary);
  border-radius: 10px;
  background: #FFFFFF;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--brand-ink);
}
.method-bands li.b-100 { border-left-color: var(--band-resist-strong); }
.method-bands li.b-79  { border-left-color: var(--band-resist); }
.method-bands li.b-64  { border-left-color: var(--band-mixed); }
.method-bands li.b-49  { border-left-color: var(--band-exposed); }
.method-bands li.b-34  { border-left-color: var(--band-exposed-high); }
.method-bands .band-range {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
  margin-bottom: 0.3rem;
}
.method-bands .band-name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-ink);
  margin-bottom: 0.3rem;
  letter-spacing: -0.01em;
}

body.dark-mode .method-bands li {
  background: rgba(12,17,36,0.62);
  border-top-color: rgba(255,255,255,0.08);
  border-right-color: rgba(255,255,255,0.08);
  border-bottom-color: rgba(255,255,255,0.08);
  color: rgba(232,238,248,0.88);
}
body.dark-mode .method-bands li.b-100 { border-left-color: #00FFB3; }
body.dark-mode .method-bands li.b-79  { border-left-color: #2EE079; }
body.dark-mode .method-bands li.b-64  { border-left-color: #FFC857; }
body.dark-mode .method-bands li.b-49  { border-left-color: #FF7A1A; }
body.dark-mode .method-bands li.b-34  { border-left-color: #FF1654; }
body.dark-mode .method-bands .band-range { color: rgba(232,238,248,0.55); }
body.dark-mode .method-bands .band-name  { color: #FFFFFF; }

/* Quarterly-update strip + caveats */
.method-update-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2.25rem;
  padding: 0;
  list-style: none;
}
.method-update-strip li {
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-muted);
}
.method-update-strip .cadence {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-tertiary);
  margin-bottom: 0.3rem;
}
.method-update-strip .what {
  display: block;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--brand-ink);
}

body.dark-mode .method-update-strip li {
  background: rgba(12,17,36,0.6);
  border-color: rgba(255,255,255,0.08);
}
body.dark-mode .method-update-strip .cadence { color: #6BA6FF; }
body.dark-mode .method-update-strip .what    { color: rgba(232,238,248,0.88); }

/* Methodology section — generous reading width + spacing */
.ap-section.method-section { padding-top: 3rem; padding-bottom: 5rem; }
.ap-section.method-section .ap-prose { max-width: 46rem; }
.ap-section.method-section .ap-prose h2 { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid rgba(15,31,58,0.08); }
.ap-section.method-section .ap-prose > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
body.dark-mode .ap-section.method-section .ap-prose h2 { border-top-color: rgba(255,255,255,0.08); }