/* components.css — all section-specific styling */

@layer components {

  /* ================================================================
     BUTTONS & CTAs
  ================================================================ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-base);
    line-height: 1;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-micro) var(--ease-out),
                color var(--dur-micro) var(--ease-out),
                border-color var(--dur-micro) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
    white-space: nowrap;
  }

  .btn:active {
    transform: scale(0.97);
    transition-duration: 80ms;
  }

  /* Primary: BLS navy — clearly blue, not near-black */
  .btn--primary {
    background: var(--ink-800);
    color: var(--bone-50);
    padding: var(--s-4) var(--s-6);
    font-size: var(--fs-md);
    letter-spacing: -0.005em;
  }
  .btn--primary:hover {
    background: var(--ink-900);
    box-shadow: 0 0 0 2px var(--bone-50), 0 0 0 3px var(--ink-600), 0 8px 24px rgba(28,66,119,0.2);
  }

  /* Secondary: ghost on light bg */
  .btn--ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--border-strong);
    padding: var(--s-4) var(--s-5);
  }
  .btn--ghost:hover {
    border-color: var(--ink-900);
    background: var(--bone-100);
  }

  /* Accent: charged copper — used for "Get Blueprint" marquee moments only */
  .btn--accent {
    background: var(--accent);
    color: var(--bone-50);
    padding: var(--s-4) var(--s-6);
    font-size: var(--fs-md);
  }
  .btn--accent:hover {
    background: var(--accent-hover);
  }

  /* Text-link style CTA */
  .btn--text {
    padding: 0;
    color: var(--fg);
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    border-radius: 0;
  }
  .btn--text:hover { color: var(--accent); }

  .btn--large { padding: var(--s-5) var(--s-7); font-size: var(--fs-lg); }

  /* ================================================================
     HEADER
  ================================================================ */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    background: color-mix(in oklch, var(--bone-50) 82%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-short) var(--ease-out),
                background var(--dur-short) var(--ease-out);
  }
  .site-header.is-scrolled {
    border-bottom-color: var(--border);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
    gap: var(--s-6);
  }

  .logo {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-md);
    letter-spacing: var(--tr-tight);
    color: var(--fg);
    font-variation-settings: "SOFT" 0, "WONK" 0;
  }
  .logo__mark {
    width: 28px; height: 28px;
    color: var(--accent);
  }

  .site-header__meta {
    display: flex;
    align-items: center;
    gap: var(--s-5);
  }
  .site-header__phone {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
    transition: color var(--dur-micro) var(--ease-out);
  }
  .site-header__phone:hover { color: var(--fg); }

  @media (max-width: 640px) {
    .site-header__phone { display: none; }
  }

  /* ================================================================
     HERO
  ================================================================ */
  .hero {
    padding-block: clamp(var(--s-9), 14vw, 180px) clamp(var(--s-8), 10vw, var(--s-10));
    position: relative;
    overflow: clip;
    isolation: isolate;
  }


  /* Background — subtle grain + radial blue wash (BLS palette) */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1400px 600px at 15% 0%, color-mix(in oklch, var(--ink-300) 35%, transparent) 0%, transparent 55%),
      radial-gradient(1200px 700px at 95% 20%, color-mix(in oklch, var(--bone-200) 100%, transparent) 0%, transparent 60%);
    opacity: 0.65;
    z-index: -2;
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.12  0 0 0 0 0.2  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    opacity: 0.5;
    mix-blend-mode: multiply;
    z-index: -1;
    pointer-events: none;
  }

  .hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--fg-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    margin-bottom: var(--s-6);
  }
  .hero__eyebrow .chip {
    padding: 4px 10px;
    background: var(--ink-900);
    color: var(--bone-50);
    border-radius: var(--r-pill);
    letter-spacing: var(--tr-wide);
    font-size: 11px;
  }

  .hero__h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.3rem + 2.6vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: var(--tr-tight);
    margin-bottom: var(--s-6);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .hero__h1 em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
  .hero__loss {
    color: #B91C1C;
    font-style: normal;
    white-space: nowrap;
  }
  .hero__h1 .num-strike {
    white-space: nowrap;
    background: linear-gradient(
      color-mix(in oklch, var(--ink-800) 28%, transparent),
      color-mix(in oklch, var(--ink-800) 28%, transparent)
    ) left center / 0% 100% no-repeat;
    border-radius: 4px;
    padding: 0.05em 0.18em;
    transition: background-size 900ms var(--ease-out) 600ms;
  }
  .hero.is-visible .hero__h1 .num-strike { background-size: 100% 100%; }

  .hero__lede {
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--fg-muted);
    max-width: 48ch;
    margin-bottom: var(--s-7);
  }

  .hero__cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
  }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-5);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
  }
  .hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
  }
  .hero__meta span::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
  }

  .hero__figure {
    position: relative;
    padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--sh-mid);
    overflow: hidden;
    transition: box-shadow var(--dur-standard) var(--ease-out);
  }
  .hero__figure:hover {
    box-shadow: var(--sh-far), 0 0 0 1px var(--border-strong);
  }
  .hero__figure-label {
    display: block;
    padding: var(--s-3) var(--s-5);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: var(--fg-muted);
    border-bottom: 1px solid var(--border);
  }
  .hero__figure-label .mono { color: var(--accent); margin-left: 8px; }
  .hero__figure img { display: block; width: 100%; }

  @media (max-width: 900px) {
    .hero__figure { margin-top: var(--s-7); }
  }

  /* ================================================================
     FUNNEL VIZ (section 01)
  ================================================================ */
  .section--funnel {
    position: relative;
    overflow: hidden;
  }
  .section--funnel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(1100px 500px at 50% 0%, color-mix(in oklch, var(--ink-200) 38%, transparent), transparent 60%),
      radial-gradient(800px 400px at 50% 100%, color-mix(in oklch, var(--ink-100) 55%, transparent), transparent 60%);
    z-index: -1;
    pointer-events: none;
  }

  /* === Interactive controls above funnel === */
  .funnel-controls {
    max-width: 560px;
    margin: var(--s-8) auto var(--s-4);
    padding: var(--s-5) var(--s-6);
    background: color-mix(in oklch, var(--bone-50) 85%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 24px -12px rgba(28,66,119,0.12);
  }
  .funnel-controls__grid {
    display: flex;
    align-items: flex-end;
    gap: var(--s-4);
  }
  .funnel-controls__field {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    flex: 1;
    min-width: 0;
  }
  .funnel-controls__label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .funnel-controls__input {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
    color: var(--ink-900);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
  }
  .funnel-controls__input:focus-visible {
    outline: none;
    border-color: var(--ink-600);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--ink-600) 20%, transparent);
  }
  .funnel-controls__times {
    padding-bottom: var(--s-4);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--fg-muted);
    font-weight: 300;
  }
  .funnel-controls__hint {
    margin-top: var(--s-3);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    text-align: center;
  }

  /* === Funnel container === */
  .funnel {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    padding-block: var(--s-4);
  }

  /* === Individual stage === */
  .funnel__stage {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Trapezoid shapes — clip-path. Both ghost (benchmark) and solid (user) share this system. */
  .funnel__shape {
    position: absolute;
    inset: 0;
    transition: clip-path 600ms var(--ease-out), filter var(--dur-standard) var(--ease-out);
  }

  /* Benchmark ghost — behind solid, wider at bottom (higher retention) */
  .funnel__shape--ghost {
    clip-path: polygon(
      calc(var(--ti-ghost) * 1%) 0,
      calc(100% - var(--ti-ghost) * 1%) 0,
      calc(100% - var(--bi-ghost) * 1%) 100%,
      calc(var(--bi-ghost) * 1%) 100%
    );
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0 6px,
        color-mix(in oklch, var(--accent) 22%, transparent) 6px 7px
      ),
      color-mix(in oklch, var(--accent) 8%, transparent);
    border: 1px dashed color-mix(in oklch, var(--accent) 55%, transparent);
    opacity: 0.85;
  }

  /* User's actual funnel — solid, on top of ghost */
  .funnel__shape--solid {
    clip-path: polygon(
      calc(var(--ti) * 1%) 0,
      calc(100% - var(--ti) * 1%) 0,
      calc(100% - var(--bi) * 1%) 100%,
      calc(var(--bi) * 1%) 100%
    );
  }

  /* Gradient fills — deeper going down */
  .funnel__shape--1 {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--ink-100) 90%, white) 0%,
        color-mix(in oklch, var(--ink-200) 72%, white) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink-400) 28%, transparent);
  }
  .funnel__shape--2 {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--ink-300) 65%, var(--bone-50)) 0%,
        color-mix(in oklch, var(--ink-500) 60%, var(--bone-50)) 100%);
  }
  .funnel__shape--3 {
    background:
      linear-gradient(180deg,
        color-mix(in oklch, var(--ink-600) 72%, var(--bone-50)) 0%,
        color-mix(in oklch, var(--ink-700) 88%, var(--bone-50)) 100%);
  }
  .funnel__shape--4 {
    background:
      linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
    box-shadow: inset 0 0 48px color-mix(in oklch, var(--accent) 18%, transparent);
  }

  /* Hover — subtle lift */
  .funnel__stage:hover .funnel__shape--solid {
    filter: brightness(1.05) saturate(1.08);
  }

  /* Center the section-head + lede in this specific section */
  .section--funnel .section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--s-3);
  }
  .section--funnel .section-head__title { max-width: 24ch; }
  .section--funnel .mechanism__lead {
    text-align: center;
    max-width: 62ch;
    margin-inline: auto;
    margin-top: var(--s-5);
  }

  /* === Content card — centered on top of trapezoid, always readable === */
  .funnel__row {
    position: relative;
    z-index: 2;
    width: min(520px, 90%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-6);
    background: color-mix(in oklch, var(--bone-50) 94%, transparent);
    border: 1px solid color-mix(in oklch, var(--ink-200) 55%, transparent);
    border-radius: var(--r-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px -6px color-mix(in oklch, var(--ink-900) 22%, transparent);
  }

  .funnel__label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-1);
    max-width: 46ch;
  }

  .funnel__idx {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--tr-loose);
    color: color-mix(in oklch, currentColor 62%, transparent);
  }

  .funnel__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem);
    line-height: 1.15;
    letter-spacing: var(--tr-tight);
  }

  .funnel__def {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: color-mix(in oklch, currentColor 74%, transparent);
  }

  .funnel__tell {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in oklch, currentColor 55%, transparent);
    opacity: 0.9;
    margin-top: 2px;
  }

  /* --- Count row (centered, horizontal) --- */
  .funnel__kpi {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: var(--s-2);
    line-height: 1;
    white-space: nowrap;
  }
  .funnel__count {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .funnel__count-unit {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: color-mix(in oklch, currentColor 62%, transparent);
  }

  /* --- Leak row (centered, horizontal) --- */
  .funnel__leak {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    white-space: nowrap;
  }
  .funnel__leak-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: color-mix(in oklch, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in oklch, var(--accent) 38%, transparent);
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: color-mix(in oklch, var(--accent) 88%, var(--ink-900));
    letter-spacing: 0.02em;
    transition: transform var(--dur-standard) var(--ease-out), box-shadow var(--dur-standard) var(--ease-out);
  }
  .funnel__leak-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: color-mix(in oklch, currentColor 55%, transparent);
  }

  /* Weight escalation per stage (importance grows as funnel narrows) */
  .funnel__leak[data-stage-weight="2"] .funnel__leak-pill {
    padding: 7px 14px;
    font-size: 12.5px;
  }
  .funnel__leak[data-stage-weight="3"] .funnel__leak-pill {
    padding: 8px 15px;
    font-size: 13px;
    background: color-mix(in oklch, var(--accent) 30%, transparent);
    border-color: color-mix(in oklch, var(--accent) 55%, transparent);
  }
  .funnel__leak[data-stage-weight="4"] .funnel__leak-pill {
    padding: 9px 18px;
    font-size: 14px;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bone-50);
    box-shadow: 0 4px 16px -4px color-mix(in oklch, var(--accent) 60%, transparent);
    animation: funnelPulse 2.8s var(--ease-out) 1.2s infinite;
  }
  @keyframes funnelPulse {
    0%, 100% { box-shadow: 0 4px 16px -4px color-mix(in oklch, var(--accent) 60%, transparent); }
    50%      { box-shadow: 0 6px 22px -2px color-mix(in oklch, var(--accent) 85%, transparent); }
  }

  /* Text is always dark — the card backdrop ensures readability across all stages */

  /* === Drop connector — centered === */
  .funnel__drop {
    position: relative;
    padding: var(--s-4) var(--s-6);
    text-align: center;
    opacity: 0.78;
  }
  .funnel__drop::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in oklch, var(--accent) 55%, transparent) 30%,
      color-mix(in oklch, var(--accent) 55%, transparent) 70%,
      transparent 100%);
  }
  .funnel__drop-rate {
    position: relative;
    display: inline-block;
    padding: 3px 12px;
    font-size: 10px;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    color: var(--fg);
  }
  .funnel__drop-bench {
    color: var(--fg-muted);
    margin-left: 6px;
    font-weight: 400;
  }

  /* === Total rail === */
  .funnel__total {
    position: relative;
    margin-top: var(--s-8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .funnel__total-line { display: none; }
  .funnel__total-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 54ch;
    padding: var(--s-5) var(--s-7);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    text-align: center;
    box-shadow: 0 12px 40px -20px color-mix(in oklch, var(--ink-800) 35%, transparent);
  }
  .funnel__total-eyebrow {
    font-size: 10px;
    letter-spacing: var(--tr-loose);
    color: var(--fg-muted);
    margin-bottom: var(--s-2);
  }
  .funnel__total-num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
    line-height: 1;
    color: var(--accent);
    margin-bottom: var(--s-3);
    letter-spacing: -0.02em;
  }
  .funnel__total-note {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--fg-muted);
  }

  .funnel__total-cta {
    margin-top: var(--s-6);
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
  }
  .funnel__total-cta .btn {
    font-size: var(--fs-md);
  }
  .funnel__total-cta-sub {
    font-size: var(--fs-xs);
    color: var(--fg-muted);
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
  }

  /* === Mobile (≤780px) — trapezoids collapse to plain cards === */
  @media (max-width: 780px) {
    .funnel-controls__grid {
      flex-direction: column;
      align-items: stretch;
    }
    .funnel-controls__times { display: none; }
    .funnel__stage { min-height: auto; }
    .funnel__shape--solid,
    .funnel__shape--ghost {
      clip-path: none;
      border-radius: var(--r-sm);
    }
    .funnel__shape--ghost { display: none; } /* ghost off on mobile; numbers tell the story */
    .funnel__total { flex-direction: column; gap: var(--s-4); }
    .funnel__total-line { display: none; }
  }

  /* === Reduced-motion guard === */
  @media (prefers-reduced-motion: reduce) {
    .funnel__shape { transition: none; }
    .funnel__stage:hover .funnel__shape--solid { filter: none; }
    .funnel__leak[data-stage-weight="4"] .funnel__leak-pill { animation: none; }
  }

  /* ================================================================
     PROOF RAIL
  ================================================================ */
  .proof-rail {
    border-block: 1px solid var(--border);
    background: var(--bone-100);
    padding-block: var(--s-6);
  }
  .proof-rail__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
  }
  @media (max-width: 780px) {
    .proof-rail__inner { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); }
  }

  .proof-stat {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3) 0;
    border-left: 1px solid var(--border);
    padding-left: var(--s-5);
  }
  .proof-stat:first-child { border-left: 0; padding-left: 0; }
  @media (max-width: 780px) {
    .proof-stat { border-left: 0; padding-left: 0; }
  }
  .proof-stat__num {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-2xl);
    line-height: 1;
    letter-spacing: var(--tr-tight);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .proof-stat__label {
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    line-height: 1.3;
    max-width: 22ch;
  }

  /* ================================================================
     SECTION HEADERS (shared)
  ================================================================ */
  .section-head {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--s-6);
    align-items: end;
    margin-bottom: clamp(var(--s-7), 7vw, var(--s-9));
    padding-block-end: var(--s-5);
    border-block-end: 1px solid var(--border);
  }
  .section-head__index {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-loose);
    color: var(--fg-muted);
    text-transform: uppercase;
  }
  .section-head__title {
    font-family: var(--font-display);
    font-size: var(--fs-3xl);
    line-height: 1.02;
    letter-spacing: var(--tr-tight);
    font-weight: 400;
    max-width: 22ch;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .section-head__title em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
  @media (max-width: 640px) {
    .section-head { grid-template-columns: 1fr; row-gap: var(--s-3); }
  }

  /* ================================================================
     MECHANISM (THE MATH)
  ================================================================ */
  .mechanism__lead {
    max-width: 48ch;
    font-size: var(--fs-md);
    color: var(--fg-muted);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--s-8);
  }

  .levers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
  }
  @media (max-width: 1000px) { .levers { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px)  { .levers { grid-template-columns: 1fr; } }

  .lever {
    padding: var(--s-6);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: relative;
    display: flex;
    flex-direction: column;
    transition: background var(--dur-short) var(--ease-out);
  }
  .lever:hover { background: var(--bone-100); }
  .lever::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-short) var(--ease-out);
  }
  .lever:hover::before { transform: scaleX(1); }

  .lever__index {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-wide);
    color: var(--fg-subtle);
    margin-bottom: var(--s-5);
  }
  .lever__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: var(--tr-tight);
    margin-bottom: var(--s-4);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .lever__def {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--s-5);
  }
  .lever__leak {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-wide);
    color: var(--fg-subtle);
    margin-top: auto;
    padding-top: var(--s-5);
    margin-bottom: var(--s-2);
  }
  .lever__value {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 500;
    color: var(--accent);
    line-height: 1;
    letter-spacing: var(--tr-tight);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }

  .mechanism__footnote {
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid var(--border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
    align-items: start;
  }
  @media (max-width: 900px) { .mechanism__footnote { grid-template-columns: 1fr; } }
  .mechanism__math {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.7;
    color: var(--fg);
    background: var(--ink-950);
    color: var(--bone-50);
    padding: var(--s-5);
    white-space: pre;
    overflow-x: auto;
  }
  .mechanism__math .hl { color: var(--signal-300); }

  /* ================================================================
     DIAGNOSTIC
  ================================================================ */
  .diagnostic {
    background: var(--ink-950);
    color: var(--fg-onDark);
    position: relative;
    overflow: hidden;
  }
  .diagnostic::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(700px 400px at 80% 10%, rgba(5,81,135,0.35), transparent 60%),
      radial-gradient(500px 300px at 10% 100%, rgba(28,66,119,0.28), transparent 60%);
    pointer-events: none;
  }
  .diagnostic > * { position: relative; }

  .diagnostic .pulse-dot { background: var(--signal-300); }
  .diagnostic .pulse-dot::after { background: var(--signal-300); }

  .diagnostic__head .section-head__title { color: var(--bone-50); }
  .diagnostic__head .section-head__index { color: var(--ink-300); }
  .diagnostic__head { border-block-end: 1px solid var(--border-onDark); }

  .diagnostic__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-8);
  }
  @media (max-width: 960px) {
    .diagnostic__grid { grid-template-columns: 1fr; }
    .diagnostic__grid > :first-child { order: 2; }
    .diagnostic__grid > :last-child  { order: 1; }
  }

  .diagnostic__intro {
    font-size: var(--fs-md);
    color: var(--ink-200);
    line-height: var(--lh-relaxed);
    max-width: 42ch;
  }

  .diag-form {
    display: grid;
    gap: var(--s-5);
  }

  .diag-field {
    display: grid;
    gap: var(--s-3);
  }
  .diag-field__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
  }
  .diag-field__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--bone-50);
  }
  .diag-field__value {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    letter-spacing: var(--tr-tight);
    color: var(--signal-300);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .diag-field__hint {
    font-size: var(--fs-xs);
    color: var(--ink-300);
    line-height: 1.4;
  }

  .diag-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right,
      var(--signal-500) 0%,
      var(--signal-500) var(--slider-val, 50%),
      rgba(215,221,234,0.18) var(--slider-val, 50%),
      rgba(215,221,234,0.18) 100%);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
  }
  .diag-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    background: var(--bone-50);
    border: 2px solid var(--signal-500);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform var(--dur-micro) var(--ease-out);
  }
  .diag-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
  .diag-slider::-moz-range-thumb {
    width: 22px; height: 22px;
    background: var(--bone-50);
    border: 2px solid var(--signal-500);
    border-radius: 50%;
    cursor: pointer;
  }
  .diag-slider:focus-visible {
    outline: 2px solid var(--signal-300);
    outline-offset: 4px;
  }

  .diag-result {
    margin-top: var(--s-7);
    padding: var(--s-6);
    background: rgba(246,243,236,0.04);
    border: 1px solid var(--border-onDark);
    display: grid;
    gap: var(--s-4);
  }
  .diag-result__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tr-loose);
    text-transform: uppercase;
    color: var(--ink-200);
  }
  .diag-result__value {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    line-height: 1;
    letter-spacing: var(--tr-tight);
    color: var(--bone-50);
    font-variant-numeric: tabular-nums;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .diag-result__note {
    color: var(--ink-200);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    max-width: 52ch;
  }
  .diag-result__breakdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border-onDark);
  }
  @media (max-width: 720px) { .diag-result__breakdown { grid-template-columns: repeat(2, 1fr); } }

  .diag-breakdown__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--ink-300);
    margin-bottom: var(--s-1);
  }
  .diag-breakdown__num {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--fs-md);
    color: var(--bone-50);
    font-variant-numeric: tabular-nums;
  }

  /* ================================================================
     DELIVERABLE (what lands in inbox)
  ================================================================ */
  .deliverable {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-8);
    align-items: start;
  }
  @media (max-width: 960px) { .deliverable { grid-template-columns: 1fr; } }

  .deliverable__artifacts {
    display: grid;
    gap: var(--s-5);
  }

  .artifact {
    padding: var(--s-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    position: relative;
    transition: box-shadow var(--dur-short) var(--ease-out),
                transform var(--dur-short) var(--ease-out);
  }
  .artifact:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-mid);
  }
  .artifact__index {
    position: absolute;
    top: var(--s-5); right: var(--s-5);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tr-wide);
    color: var(--fg-subtle);
  }
  .artifact__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-lg);
    letter-spacing: var(--tr-tight);
    margin-bottom: var(--s-2);
    padding-right: var(--s-6);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .artifact__desc {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    line-height: var(--lh-relaxed);
  }

  .deliverable__mock {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--bone-100);
    border: 1px solid var(--border);
    box-shadow: var(--sh-far);
    overflow: hidden;
  }
  .deliverable__mock img,
  .deliverable__mock svg {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .deliverable__mock-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--s-4) var(--s-5);
    background: color-mix(in oklch, var(--bone-50) 90%, transparent);
    backdrop-filter: blur(6px);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border);
  }

  /* ================================================================
     CASE STUDY
  ================================================================ */
  .case {
    background: var(--bone-100);
  }
  .case__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--tr-loose);
    color: var(--accent);
    margin-bottom: var(--s-4);
  }
  .case__h {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: var(--tr-tight);
    max-width: 22ch;
    margin-bottom: var(--s-7);
    font-variation-settings: "SOFT" 30, "WONK" 0;
  }
  .case__h em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }

  .case-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--s-8);
    align-items: start;
  }
  @media (max-width: 960px) { .case-grid { grid-template-columns: 1fr; } }

  .case-chart {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    padding: var(--s-5) var(--s-5) var(--s-4);
  }
  .case-chart__caption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-block-end: var(--s-4);
    margin-block-end: var(--s-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
  }
  .case-chart__caption .mono { font-family: var(--font-mono); color: var(--fg); }

  .case-numbers {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--border);
  }
  .case-num {
    padding: var(--s-5);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .case-num:nth-child(2n) { border-right: 0; }
  .case-num__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: var(--s-2);
  }
  .case-num__before {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--fg-subtle);
    text-decoration: line-through;
    text-decoration-color: var(--fg-subtle);
  }
  .case-num__after {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-xl);
    letter-spacing: var(--tr-tight);
    color: var(--accent);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }

  .case-steps {
    display: grid;
    gap: var(--s-5);
  }
  .case-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-top: 1px solid var(--border);
  }
  .case-step:last-child { border-bottom: 1px solid var(--border); }
  .case-step__num {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-wide);
    color: var(--accent);
    font-weight: 600;
    padding-top: 4px;
  }
  .case-step__title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-md);
    margin-bottom: var(--s-2);
  }
  .case-step__body {
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
  }

  /* ================================================================
     OBJECTIONS
  ================================================================ */
  .objections__lead {
    max-width: 52ch;
    margin-bottom: var(--s-7);
    color: var(--fg-muted);
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
  }

  /* ================================================================
     FOUNDER
  ================================================================ */
  .founder {
    background: var(--bone-100);
  }
  .founder__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-8);
    align-items: center;
  }
  @media (max-width: 900px) { .founder__grid { grid-template-columns: 1fr; } }

  .founder__portrait {
    aspect-ratio: 4 / 5;
    background: var(--bone-200);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
  }
  .founder__portrait svg, .founder__portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
  }

  .founder__quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
    line-height: 1.15;
    letter-spacing: var(--tr-tight);
    color: var(--fg);
    max-width: 32ch;
    margin-bottom: var(--s-5);
    font-variation-settings: "SOFT" 30, "WONK" 0;
  }
  .founder__quote em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
  .founder__attribution {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    font-weight: 500;
  }
  .founder__attribution strong {
    display: block;
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: var(--tr-tight);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }

  /* ================================================================
     TESTIMONIALS
  ================================================================ */
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 960px) { .testimonials-grid { grid-template-columns: 1fr; } }

  .testimonial {
    padding: var(--s-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    transition: transform var(--dur-short) var(--ease-out),
                box-shadow var(--dur-short) var(--ease-out);
  }
  .testimonial:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-mid);
  }
  .testimonial__mark {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 0.5;
    font-style: italic;
    font-variation-settings: "SOFT" 80, "WONK" 1;
  }
  .testimonial__quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-md);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--fg);
    flex: 1;
    font-variation-settings: "SOFT" 30, "WONK" 0;
  }
  .testimonial__foot {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-3);
    align-items: center;
    padding-top: var(--s-5);
    border-top: 1px solid var(--border);
  }
  .testimonial__avatar {
    width: 40px; height: 40px;
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--bone-300), var(--bone-400));
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--ink-900);
    font-size: var(--fs-sm);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .testimonial__who {
    font-size: var(--fs-sm);
    line-height: 1.3;
  }
  .testimonial__who strong { display: block; color: var(--fg); font-weight: 600; }
  .testimonial__who span { color: var(--fg-muted); font-size: var(--fs-xs); }

  /* ================================================================
     VIDEO EMBED (16:9 responsive)
  ================================================================ */
  .video-embed-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
  }
  .video-embed-wrap iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
  }

  /* ================================================================
     CLIENT VOICES SECTION (07 — dark/inverted)
  ================================================================ */
  .voices-section {
    background: var(--ink-950);
  }
  .voices-section .section-head {
    border-bottom-color: rgba(255,255,255,0.1);
  }
  .voices-section .section-head__index { color: var(--ink-300); }
  .voices-section .section-head__title { color: var(--bone-50); }

  .voices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-10);
    align-items: center;
    margin-top: var(--s-10);
  }
  @media (max-width: 860px) {
    .voices-grid { grid-template-columns: 1fr; gap: var(--s-8); }
    .voices-grid .voices-video { order: 1; }
    .voices-grid .voices-quote-panel { order: 2; }
  }

  .voices-video {
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 32px 80px rgba(0,0,0,0.4);
  }

  .voices-quote-panel {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }

  .voices-quote-mark {
    font-family: var(--font-display);
    font-size: 5.5rem;
    line-height: 0.75;
    color: var(--accent);
    font-variation-settings: "SOFT" 80, "WONK" 1;
    user-select: none;
  }

  .voices-quote {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 0.85rem + 1.2vw, 1.85rem);
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: var(--bone-50);
    font-variation-settings: "SOFT" 50, "WONK" 1;
    margin: 0;
  }

  .voices-attr {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  .voices-attr__avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ink-600), var(--ink-800));
    border: 2px solid var(--ink-500);
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    color: var(--bone-50);
    font-weight: 500;
    flex-shrink: 0;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }

  .voices-attr__name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 500;
    color: var(--bone-100);
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }

  .voices-attr__role {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--ink-300);
    margin-top: 2px;
  }

  /* ================================================================
     FAQ (uses .disclosure from motion.css)
  ================================================================ */
  .faq__grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: var(--s-8);
    align-items: start;
  }
  @media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

  .faq__intro {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
  }
  @media (max-width: 900px) {
    .faq__intro { position: static; }
  }
  .faq__intro p {
    font-size: var(--fs-md);
    color: var(--fg-muted);
    line-height: var(--lh-relaxed);
    max-width: 36ch;
  }

  /* ================================================================
     FINAL CTA + FORM
  ================================================================ */
  .final-cta {
    background: var(--ink-950);
    color: var(--fg-onDark);
    position: relative;
    overflow: hidden;
  }
  .final-cta::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(800px 500px at 20% 100%, rgba(5,81,135,0.38), transparent 60%),
      radial-gradient(700px 400px at 100% 0%, rgba(28,66,119,0.25), transparent 60%);
    pointer-events: none;
  }
  .final-cta > * { position: relative; }

  .final-cta__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-8);
    align-items: end;
  }
  @media (max-width: 960px) { .final-cta__grid { grid-template-columns: 1fr; } }

  .final-cta__h {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    line-height: 1.0;
    letter-spacing: var(--tr-tight);
    color: var(--bone-50);
    max-width: 16ch;
    font-variation-settings: "SOFT" 20, "WONK" 0;
  }
  .final-cta__h em {
    font-style: italic;
    color: var(--signal-300);
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
  .final-cta__promise {
    margin-top: var(--s-6);
    display: grid;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--ink-200);
    line-height: 1.6;
  }
  .final-cta__promise li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-3);
  }
  .final-cta__promise li::before {
    content: "→";
    color: var(--signal-500);
  }

  .form {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-7);
    background: rgba(246,243,236,0.04);
    border: 1px solid var(--border-onDark);
  }
  @media (max-width: 520px) { .form { padding: var(--s-5); } }

  .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
  }
  @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

  .form-field {
    display: grid;
    gap: var(--s-2);
  }
  .form-field__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tr-wide);
    text-transform: uppercase;
    color: var(--ink-200);
  }
  .form-field__input,
  .form-field__select,
  .form-field__textarea {
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-base);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-onDark);
    color: var(--bone-50);
    font-family: inherit;
    transition: border-color var(--dur-micro) var(--ease-out);
    border-radius: 0;
  }
  .form-field__input:focus,
  .form-field__select:focus,
  .form-field__textarea:focus {
    outline: none;
    border-bottom-color: var(--signal-500);
  }
  .form-field__input::placeholder,
  .form-field__textarea::placeholder { color: var(--ink-400); }

  .form-field__textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
  }

  .form-field__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23D7DDEA' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--s-3) center;
    background-size: 12px 8px;
    padding-right: calc(var(--s-3) + 24px);
    /* iOS: prevent auto-zoom on focus by enforcing 16px+ on small screens */
    font-size: max(16px, 1rem);
    line-height: 1.3;
  }
  .form-field__select option { background: var(--ink-900); color: var(--bone-50); }
  /* iOS Safari: ensure inputs also stay 16px+ to avoid focus-zoom */
  @media (max-width: 780px) {
    .form-field__input,
    .form-field__select,
    .form-field__textarea { font-size: 16px; }
  }

  .form__submit {
    margin-top: var(--s-3);
    justify-self: start;
  }

  .form__consent {
    font-size: var(--fs-xs);
    color: var(--ink-300);
    line-height: 1.5;
    max-width: 52ch;
  }

  /* Form submitted state */
  .form[data-state="sent"] {
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 260px;
    gap: var(--s-4);
  }
  .form[data-state="sent"] > :not(.form__success) { display: none; }
  .form__success {
    display: none;
    flex-direction: column;
    gap: var(--s-3);
    align-items: center;
  }
  .form[data-state="sent"] .form__success { display: flex; }
  .form__success-h {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    color: var(--bone-50);
    font-variation-settings: "SOFT" 30, "WONK" 0;
  }
  .form__success-p {
    color: var(--ink-200);
    font-size: var(--fs-sm);
    max-width: 42ch;
  }

  /* ================================================================
     FOOTER
  ================================================================ */
  .site-footer {
    padding-block: var(--s-8) var(--s-6);
    background: var(--ink-950);
    color: var(--fg-onDark-muted);
    font-size: var(--fs-sm);
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--s-7);
    align-items: start;
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--border-onDark);
  }
  @media (max-width: 780px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .site-footer__grid { grid-template-columns: 1fr; }
  }

  .site-footer h6 {
    color: var(--ink-300);
    margin-bottom: var(--s-4);
  }
  .site-footer a {
    color: var(--ink-200);
    transition: color var(--dur-micro) var(--ease-out);
    font-size: var(--fs-sm);
  }
  .site-footer a:hover { color: var(--bone-50); }
  .site-footer ul { display: grid; gap: var(--s-2); }

  .site-footer__bottom {
    padding-top: var(--s-5);
    display: flex;
    justify-content: space-between;
    gap: var(--s-4);
    font-size: var(--fs-xs);
    color: var(--ink-300);
    letter-spacing: var(--tr-wide);
    flex-wrap: wrap;
  }

  /* ================================================================
     STICKY CTA BAND (appears after hero scroll)
  ================================================================ */
  .sticky-cta {
    position: fixed;
    bottom: var(--s-4);
    left: 50%;
    translate: -50% 0;
    z-index: 40;
    max-width: calc(100% - var(--s-6));
    pointer-events: none;
  }
  .sticky-cta.is-active { pointer-events: auto; }

  .sticky-cta__inner {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
    background: var(--ink-950);
    color: var(--bone-50);
    border-radius: var(--r-pill);
    box-shadow: var(--sh-far);
    font-size: var(--fs-sm);
    border: 1px solid var(--ink-700);
  }
  .sticky-cta__text {
    font-weight: 500;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sticky-cta__btn {
    padding: var(--s-3) var(--s-5);
    background: var(--signal-500);
    color: var(--bone-50);
    border-radius: var(--r-pill);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: background var(--dur-micro) var(--ease-out);
  }
  .sticky-cta__btn:hover { background: var(--signal-600); }
  @media (max-width: 520px) {
    .sticky-cta__inner { padding-right: var(--s-3); gap: var(--s-3); font-size: var(--fs-xs); }
    .sticky-cta__text { display: none; }
    .sticky-cta__btn { flex-shrink: unset; width: 100%; }
  }

  /* ================================================================
     SECTION LINK (anchor hover)
  ================================================================ */
  .anchor-link {
    text-decoration: none;
    color: inherit;
  }
}