/* ════════════════════════════════════════════════════════════
     V1.6 PLATFORM — Whoop / Future / Eight-Sleep tier fitness UI
     Pure dark · data-first · NO gradient mush · NO particle field
     ════════════════════════════════════════════════════════════ */

      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      /* ────────── Accessibility · keyboard focus ────────── */
      :focus {
        outline: none;
      }
      :focus-visible {
        outline: 2px solid #e8bc6a;
        outline-offset: 3px;
        border-radius: 4px;
      }
      .opt:focus-visible,
      .audience-card:focus-visible,
      .outcome-card:focus-visible {
        outline: none;
        box-shadow:
          0 0 0 2px #e8bc6a,
          0 0 0 4px rgba(232, 188, 106, 0.25);
      }
      .skip-link {
        position: absolute;
        left: -10000px;
        top: 0;
        background: #e8bc6a;
        color: #0a0b0e;
        padding: 10px 16px;
        border-radius: 4px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        font-weight: 700;
        z-index: 9999;
      }
      .skip-link:focus {
        left: 16px;
        top: 16px;
      }

      /* ─── Page motion bg video · sits behind quiz UI · loops · respects reduced-motion ─── */
      .page-bg-video {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -2;
        opacity: 0.85;
        pointer-events: none;
      }
      @media (prefers-reduced-motion: reduce) {
        .page-bg-video {
          display: none;
        }
      }

      body {
        background: #0a0b0e;
        color: #f5f1e8;
        font-family:
          'Inter',
          -apple-system,
          BlinkMacSystemFont,
          system-ui,
          sans-serif;
        font-size: 16px;
        line-height: 1.5;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      /* ────────── Background canvas — high-tech fitness ambient ────────── */
      #bg-canvas {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
      }
      /* Slow ambient breathing aura — like a calm pulse */
      body {
        background:
          radial-gradient(
            ellipse 1200px 800px at 80% 10%,
            rgba(212, 161, 72, 0.04),
            transparent 60%
          ),
          radial-gradient(
            ellipse 900px 600px at 10% 90%,
            rgba(107, 151, 184, 0.025),
            transparent 55%
          ),
          #0a0b0e;
      }
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
        color: inherit;
      }
      input,
      select,
      textarea {
        font-family: inherit;
      }
      img {
        display: block;
        max-width: 100%;
      }

      :root {
        --ink: #0a0b0e;
        --ink-1: #101115;
        --ink-2: #15171c;
        --ink-3: #1b1e25;
        --line: rgba(245, 241, 232, 0.06);
        --line-2: rgba(245, 241, 232, 0.1);
        --gold: #b08339;
        --gold-2: #d4a148;
        --gold-3: #e8bc6a;
        --ivory: #f5f1e8;
        --dim-1: rgba(245, 241, 232, 0.82);
        --dim-2: rgba(245, 241, 232, 0.62);
        --dim-3: rgba(245, 241, 232, 0.58); /* raised 2026-05-26 · WCAG AA on body */
        --dim-deco: rgba(245, 241, 232, 0.32); /* raised 2026-05-26 · decorative only */
        --green: #7bd49b;
        --red: #e8908a;
        --blue: #6b97b8;
      }

      /* ────────── Hairline top accent (brand mark, not theme) ────────── */
      body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--gold);
        z-index: 100;
        pointer-events: none;
      }

      /* ────────── Layout shell ────────── */
      .shell {
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
      }

      /* ────────── Top bar ────────── */
      .top-bar {
        flex: 0 0 auto;
        padding: 18px 28px;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 20px;
        align-items: center;
        border-bottom: 1px solid var(--line);
      }
      .brand {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 13px;
        letter-spacing: 4px;
        color: var(--ivory);
      }
      .brand .em {
        color: var(--gold-2);
        margin-right: 4px;
      }
      .brand .v {
        color: var(--dim-3);
        font-size: 9px;
        letter-spacing: 2.5px;
        margin-left: 10px;
      }

      .progress-rail {
        display: flex;
        gap: 4px;
        align-items: center;
        justify-self: center;
        width: 100%;
        max-width: 540px;
      }
      .progress-rail .seg {
        flex: 1;
        height: 2px;
        background: var(--line-2);
        border-radius: 1px;
        transition: background 0.4s ease;
      }
      .progress-rail .seg.done {
        background: var(--gold);
      }
      .progress-rail .seg.active {
        background: var(--gold-3);
      }

      .step-counter {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--dim-2);
        text-transform: uppercase;
        padding: 6px 12px;
        border: 1px solid var(--line-2);
        border-radius: 4px;
        background: var(--ink-1);
        white-space: nowrap;
      }
      .step-counter strong {
        color: var(--gold-3);
        font-weight: 700;
        margin: 0 4px;
        font-variant-numeric: tabular-nums;
      }
      .step-counter.hidden {
        visibility: hidden;
      }

      /* ────────── Stage ────────── */
      .stage {
        flex: 1 1 auto;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 28px 60px;
        position: relative;
        overflow: hidden;
      }
      .step {
        width: 100%;
        max-width: 880px;
        margin: 0 auto;
        opacity: 0;
        transform: translateY(10px);
        transition:
          opacity 0.28s ease,
          transform 0.28s ease;
        pointer-events: none;
        position: absolute;
        visibility: hidden;
      }
      .step.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        position: relative;
        visibility: visible;
      }

      /* ────────── Shared typography ────────── */
      .eyebrow {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 3px;
        color: var(--gold-2);
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 14px 0;
      }
      .eyebrow .num {
        color: var(--dim-3);
        margin-right: 8px;
      }
      h1.headline {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(34px, 5.5vw, 56px);
        letter-spacing: 3px;
        line-height: 1.05;
        margin: 0 0 14px 0;
        font-weight: 400;
        color: var(--ivory);
      }
      h1.headline .accent {
        color: var(--gold-3);
      }
      .lede {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: clamp(15px, 1.4vw, 17px);
        color: var(--dim-1);
        margin: 0 0 28px 0;
        line-height: 1.55;
        max-width: 620px;
      }
      .lede em {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        color: var(--gold-3);
      }

      /* ────────── Intro · brand-first, fitness-oriented ────────── */
      #step-intro {
        max-width: 920px;
      }
      #step-intro .headline {
        font-size: clamp(44px, 8vw, 88px);
        letter-spacing: 4px;
        line-height: 0.95;
        margin: 6px 0 14px;
      }
      #step-intro .sub-headline {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: clamp(20px, 2.6vw, 28px);
        color: var(--gold-3);
        margin: 0 0 22px 0;
        line-height: 1.3;
        font-weight: 500;
      }
      #step-intro .lede {
        font-size: clamp(15px, 1.5vw, 18px);
        color: var(--dim-1);
        max-width: 640px;
        margin-bottom: 36px;
      }

      .outcome-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        margin: 0 0 36px;
      }
      .outcome-card {
        padding: 22px 20px;
        border: 1px solid var(--line-2);
        border-radius: 8px;
        background: var(--ink-1);
        transition:
          border-color 0.3s ease,
          transform 0.3s ease;
      }
      .outcome-card:hover {
        border-color: var(--gold);
        transform: translateY(-2px);
      }
      .outcome-card .outcome-num {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 2.4px;
        color: var(--gold-2);
        margin-bottom: 14px;
        font-weight: 700;
      }
      .outcome-card .outcome-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 22px;
        letter-spacing: 1.8px;
        color: var(--ivory);
        line-height: 1;
        margin-bottom: 10px;
      }
      .outcome-card .outcome-desc {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-2);
        line-height: 1.55;
      }

      .cta-meta {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
      }

      .trust-line {
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid var(--line);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--dim-2);
        text-transform: uppercase;
        line-height: 1.7;
      }
      .trust-line strong {
        color: var(--gold-3);
        font-weight: 700;
      }
      .trust-line em {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        color: var(--gold-2);
        text-transform: none;
        letter-spacing: 0.5px;
        font-size: 14px;
      }
      .trust-line .dot {
        display: inline-block;
        margin: 0 10px;
        color: var(--line-2);
      }

      /* ────────── CTAs ────────── */
      .cta-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 8px;
      }
      .cta {
        background: var(--gold-2);
        color: var(--ink);
        padding: 14px 28px;
        border-radius: 4px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        font-weight: 700;
        transition:
          background 0.18s ease,
          transform 0.12s ease;
      }
      .cta:hover {
        background: var(--gold-3);
      }
      .cta:active {
        transform: translateY(1px);
      }
      .cta:disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      .cta-ghost {
        border: 1px solid var(--line-2);
        color: var(--ivory);
        padding: 14px 24px;
        border-radius: 4px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 600;
        transition:
          border-color 0.18s ease,
          color 0.18s ease;
      }
      .cta-ghost:hover {
        border-color: var(--gold);
        color: var(--gold-3);
      }
      .back-link {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.8px;
        color: var(--dim-3);
        padding: 12px 16px;
        text-transform: uppercase;
        transition: color 0.18s ease;
      }
      .back-link:hover {
        color: var(--gold-3);
      }

      /* ────────── Audience gate cards ────────── */
      .audience-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        margin: 16px 0 28px;
      }
      @media (max-width: 720px) {
        .audience-grid {
          grid-template-columns: 1fr;
        }
      }
      .audience-card {
        text-align: left;
        padding: 24px 22px;
        border: 1px solid var(--line-2);
        border-radius: 8px;
        background: var(--ink-1);
        cursor: pointer;
        transition:
          border-color 0.18s ease,
          background 0.18s ease,
          transform 0.12s ease;
        width: 100%;
      }
      .audience-card:hover {
        border-color: var(--gold);
        background: var(--ink-2);
        transform: translateY(-1px);
      }
      .audience-card.selected {
        border-color: var(--gold-3);
        background: var(--ink-2);
        box-shadow: 0 0 0 1px var(--gold-3);
      }
      .audience-card.disabled {
        opacity: 0.45;
        cursor: not-allowed;
        background: var(--ink-1);
      }
      .audience-card.disabled:hover {
        border-color: var(--line-2);
        transform: none;
        background: var(--ink-1);
      }
      .audience-card.disabled .ac-q-count {
        color: var(--gold-2);
        font-style: italic;
        font-family: 'Cormorant Garamond', serif;
        text-transform: none;
        letter-spacing: 0.5px;
        font-size: 12px;
      }
      .audience-card .ac-tag {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 2px;
        color: var(--gold-2);
        text-transform: uppercase;
        margin-bottom: 8px;
      }
      .audience-card .ac-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 28px;
        letter-spacing: 2px;
        color: var(--ivory);
        line-height: 1.05;
        margin-bottom: 8px;
      }
      .audience-card .ac-desc {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-2);
        line-height: 1.5;
      }
      .audience-card .ac-q-count {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
      }

      /* ────────── Option lists (radio-style cards) ────────── */
      .opts {
        display: grid;
        gap: 8px;
        margin: 18px 0 22px;
      }
      .opts.cols-2 {
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 720px) {
        .opts.cols-2 {
          grid-template-columns: 1fr;
        }
      }
      .opt {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 14px 18px;
        min-height: 60px;
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        transition:
          border-color 0.18s ease,
          background 0.18s ease;
        text-align: left;
        width: 100%;
      }
      .opt:hover {
        border-color: var(--gold);
        background: var(--ink-2);
      }
      .opt.selected {
        border-color: var(--gold-3);
        background: var(--ink-2);
        box-shadow: 0 0 0 1px var(--gold-3);
      }
      .opt-key {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        color: var(--gold-2);
        width: 22px;
        text-align: center;
        border: 1px solid var(--line-2);
        padding: 3px 0;
        border-radius: 3px;
        font-weight: 700;
        letter-spacing: 1px;
      }
      .opt-label {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 15px;
        color: var(--ivory);
        font-weight: 500;
      }
      .opt-meta {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        color: var(--dim-3);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-top: 3px;
      }
      .opt-arrow {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 18px;
        color: var(--gold-2);
        opacity: 0;
        transition:
          opacity 0.18s ease,
          transform 0.18s ease;
      }
      .opt:hover .opt-arrow,
      .opt.selected .opt-arrow {
        opacity: 1;
        transform: translateX(2px);
      }

      /* Multi-select chip variant */
      .opt.multi.selected {
        background: var(--ink-2);
        border-color: var(--gold-3);
      }
      .opt.multi .opt-key.checked {
        background: var(--gold-3);
        color: var(--ink);
        border-color: var(--gold-3);
      }

      /* ────────── Slider for progression ────────── */
      .slider-wrap {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 8px;
        padding: 26px 22px;
        margin: 16px 0 22px;
      }
      .slider-track-wrap {
        position: relative;
        padding: 22px 0 12px;
      }
      .slider-track {
        position: relative;
        height: 4px;
        background: var(--line-2);
        border-radius: 2px;
      }
      .slider-fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: var(--gold-2);
        border-radius: 2px;
        transition: width 0.15s ease;
      }
      .slider-input {
        position: absolute;
        left: 0;
        top: -10px;
        right: 0;
        width: 100%;
        height: 24px;
        -webkit-appearance: none;
        appearance: none;
        background: transparent;
        outline: none;
        margin: 0;
        padding: 0;
      }
      .slider-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        background: var(--gold-3);
        border: 3px solid var(--ink);
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0 0 0 1px var(--gold);
        transition: transform 0.12s ease;
      }
      .slider-input::-webkit-slider-thumb:hover {
        transform: scale(1.15);
      }
      .slider-input::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: var(--gold-3);
        border: 3px solid var(--ink);
        border-radius: 50%;
        cursor: pointer;
      }
      .slider-readout {
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 16px;
        flex-wrap: wrap;
      }
      .slider-current {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 26px;
        letter-spacing: 2px;
        color: var(--gold-3);
        line-height: 1;
      }
      .slider-stage {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
        margin: 6px 0 0 0;
      }
      .slider-detail {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-2);
        text-align: right;
        max-width: 320px;
        line-height: 1.5;
      }
      .slider-bounds {
        display: flex;
        justify-content: space-between;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
        margin-top: 12px;
      }

      /* ────────── Numeric inputs (height/weight/age) ────────── */
      .num-input-wrap {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 8px;
        padding: 28px 22px;
        margin: 16px 0 22px;
      }
      .unit-toggle {
        display: inline-flex;
        background: var(--ink-2);
        border: 1px solid var(--line-2);
        border-radius: 4px;
        padding: 2px;
        margin-bottom: 18px;
      }
      .unit-toggle button {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 6px 14px;
        color: var(--dim-2);
        border-radius: 3px;
        transition:
          background 0.15s ease,
          color 0.15s ease;
      }
      .unit-toggle button.active {
        background: var(--gold-2);
        color: var(--ink);
        font-weight: 700;
      }
      .num-row {
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 10px;
      }
      .num-row input {
        background: transparent;
        border: none;
        border-bottom: 2px solid var(--gold-2);
        color: var(--ivory);
        font-family: 'Bebas Neue', sans-serif;
        font-size: 56px;
        letter-spacing: 2px;
        width: 200px;
        padding: 4px 0;
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: textfield;
      }
      .num-row input::-webkit-outer-spin-button,
      .num-row input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      .num-row .unit {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 14px;
        letter-spacing: 2px;
        color: var(--gold-3);
        text-transform: uppercase;
      }
      .num-detail {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-2);
        margin-top: 6px;
      }
      .num-detail .alt {
        color: var(--gold-3);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        margin-left: 6px;
      }

      /* ────────── Build-step panel (compute screen, brand-only, no math leak) ────────── */
      .build-panel {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 10px;
        padding: 22px 26px;
        margin: 22px auto 18px;
        max-width: 560px;
        text-align: left;
      }
      .build-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 16px;
        align-items: center;
        padding: 9px 0;
        border-bottom: 1px solid var(--line);
        opacity: 0.25;
        transition:
          opacity 0.4s ease,
          transform 0.4s ease;
      }
      .build-row:last-child {
        border-bottom: none;
      }
      .build-row.active {
        opacity: 1;
      }
      .build-row.done {
        opacity: 0.85;
      }
      .build-row .bl-l {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--ivory);
        font-weight: 500;
      }
      .build-row .bl-c {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        color: var(--gold-3);
        font-weight: 700;
        width: 22px;
        height: 22px;
        border: 1px solid var(--line-2);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition:
          background 0.3s ease,
          border-color 0.3s ease,
          color 0.3s ease;
      }
      .build-row.active .bl-c {
        border-color: var(--gold-2);
        color: var(--gold-3);
        animation: bl-spin 0.9s linear infinite;
      }
      .build-row.active .bl-c::before {
        content: '◐';
      }
      .build-row.done .bl-c {
        background: var(--gold-2);
        border-color: var(--gold-2);
        color: var(--ink);
        animation: none;
      }
      .build-row.done .bl-c::before {
        content: '✓';
      }
      @keyframes bl-spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      /* Legacy math-panel CSS retained for compat — no longer used */
      .math-panel {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 8px;
        padding: 22px;
        margin: 22px 0 18px;
        text-align: left;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        line-height: 1.7;
      }
      .math-panel .row {
        display: grid;
        grid-template-columns: 180px 1fr auto;
        gap: 14px;
        align-items: center;
        padding: 7px 0;
        border-bottom: 1px solid var(--line);
        opacity: 0;
        transform: translateX(-6px);
        transition:
          opacity 0.4s ease,
          transform 0.4s ease;
      }
      .math-panel .row.show {
        opacity: 1;
        transform: translateX(0);
      }
      .math-panel .row:last-child {
        border-bottom: none;
      }
      .math-panel .label {
        color: var(--dim-2);
        font-size: 10px;
        letter-spacing: 1.5px;
        text-transform: uppercase;
      }
      .math-panel .value {
        color: var(--ivory);
        font-size: 12px;
        letter-spacing: 0.5px;
      }
      .math-panel .value .digits {
        color: var(--gold-3);
        font-weight: 700;
        margin-left: 8px;
        letter-spacing: 1.5px;
      }
      .math-panel .check {
        color: var(--green);
        font-weight: 700;
        font-size: 14px;
      }
      .compute-status {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--gold-2);
        text-transform: uppercase;
        margin-top: 14px;
        text-align: center;
      }
      .compute-bar {
        width: 100%;
        max-width: 360px;
        height: 2px;
        background: var(--line-2);
        border-radius: 1px;
        margin: 16px auto 0;
        position: relative;
        overflow: hidden;
      }
      .compute-bar::after {
        content: '';
        position: absolute;
        left: -40%;
        top: 0;
        bottom: 0;
        width: 40%;
        background: var(--gold-3);
        animation: shimmer 1.4s ease-in-out infinite;
      }
      @keyframes shimmer {
        from {
          left: -40%;
        }
        to {
          left: 100%;
        }
      }

      /* ────────── REVEAL · world-class fitness data card ────────── */
      #step-reveal {
        max-width: 1100px;
      }

      /* ════ CONVERSION REVEAL · 2026-06-14 · give-before-ask ════ */
      .bid-numbers {
        max-width: 680px;
        margin: 20px auto 6px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
      .bid-num {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 12px;
        padding: 18px;
        text-align: left;
      }
      .bid-num .bn-l {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9.5px;
        letter-spacing: 1.6px;
        text-transform: uppercase;
        color: var(--gold-2);
        margin-bottom: 7px;
      }
      .bid-num .bn-v {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(30px, 7vw, 42px);
        line-height: 0.92;
        letter-spacing: 1px;
        color: var(--ivory);
        font-variant-numeric: tabular-nums;
      }
      .bid-num .bn-v small {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 0.5px;
        color: var(--dim-3);
        margin-left: 3px;
      }
      .bid-num .bn-m {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 11.5px;
        line-height: 1.4;
        color: var(--dim-2);
        margin-top: 7px;
      }
      .bid-num.bn-split {
        grid-column: 1 / -1;
      }
      .bid-splitbar {
        display: flex;
        height: 14px;
        border-radius: 7px;
        overflow: hidden;
        margin-top: 9px;
        border: 1px solid var(--line);
      }
      .bid-splitbar i {
        display: block;
        height: 100%;
        width: 0;
        transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .bid-splitbar .s-b {
        background: var(--gold-3);
      }
      .bid-splitbar .s-p {
        background: var(--gold-2);
      }
      .bid-splitbar .s-c {
        background: rgba(245, 241, 232, 0.3);
      }
      .bid-primary {
        display: block;
        width: 100%;
        max-width: 680px;
        margin: 22px auto 8px;
        background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
        color: #0a0b0e;
        border: none;
        border-radius: 14px;
        padding: 19px 24px;
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(22px, 5vw, 28px);
        letter-spacing: 1.5px;
        text-transform: uppercase;
        cursor: pointer;
        text-align: center;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        box-shadow: 0 14px 40px rgba(212, 161, 72, 0.28);
      }
      .bid-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 50px rgba(212, 161, 72, 0.38);
      }
      .bid-primary .bp-sub {
        display: block;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-transform: none;
        margin-top: 5px;
        opacity: 0.82;
      }
      .bid-secondary-link {
        display: block;
        text-align: center;
        width: 100%;
        max-width: 680px;
        margin: 0 auto 8px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 12px;
        letter-spacing: 1px;
        color: var(--gold-2);
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        text-transform: uppercase;
      }
      .bid-secondary-link:hover {
        color: var(--gold-3);
        text-decoration: underline;
      }
      .bid-details {
        max-width: 680px;
        margin: 14px auto;
        border: 1px solid var(--line-2);
        border-radius: 12px;
        background: var(--ink-1);
        overflow: hidden;
      }
      .bid-details > summary {
        list-style: none;
        cursor: pointer;
        padding: 16px 20px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11.5px;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        color: var(--gold-2);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .bid-details > summary::-webkit-details-marker {
        display: none;
      }
      .bid-details > summary::after {
        content: '▾';
        color: var(--gold-3);
        transition: transform 0.2s;
      }
      .bid-details[open] > summary::after {
        transform: rotate(180deg);
      }
      .bid-details .bid-details-body {
        padding: 0 18px 18px;
      }
      .reveal-stickybar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        display: none;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        background: linear-gradient(180deg, rgba(10, 11, 14, 0.35), rgba(10, 11, 14, 0.96) 32%);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--line);
      }
      .reveal-stickybar button {
        width: 100%;
        background: linear-gradient(135deg, var(--gold-2), var(--gold-3));
        color: #0a0b0e;
        border: none;
        border-radius: 12px;
        padding: 16px;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 21px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        cursor: pointer;
      }
      body.reveal-active .reveal-stickybar {
        display: block;
      }
      @media (min-width: 760px) {
        body.reveal-active .reveal-stickybar {
          display: none;
        }
      }
      @media (max-width: 760px) {
        body.reveal-active #step-reveal {
          padding-bottom: 92px;
        }
      }

      .reveal-grid {
        display: grid;
        grid-template-columns: 360px 1fr;
        gap: 28px;
        margin-top: 20px;
      }
      @media (max-width: 900px) {
        .reveal-grid {
          grid-template-columns: 1fr;
        }
      }

      .id-card {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 10px;
        padding: 26px 22px;
        text-align: left;
      }
      .id-card .id-label {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 2.5px;
        color: var(--gold-2);
        text-transform: uppercase;
        margin-bottom: 8px;
      }
      .id-card .id-shareable {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(34px, 4.5vw, 44px);
        letter-spacing: 3px;
        line-height: 1;
        color: var(--ivory);
        font-variant-numeric: tabular-nums;
        margin: 0;
      }
      .id-card .id-archetype {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14px;
        color: var(--gold-3);
        font-weight: 600;
        margin-top: 6px;
        letter-spacing: 0.5px;
      }
      .id-card .id-uniqueness {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--line);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.2px;
        color: var(--dim-2);
        text-transform: uppercase;
        line-height: 1.6;
      }

      .anatomy-card {
        margin-top: 14px;
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 10px;
        padding: 14px;
        text-align: center;
        position: relative;
      }
      .anatomy-card img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
        filter: contrast(1.05) brightness(0.95);
      }
      .anatomy-card .ana-tag {
        margin-top: 10px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.8px;
        color: var(--dim-3);
        text-transform: uppercase;
      }
      .anatomy-card .ana-tag strong {
        color: var(--gold-3);
        margin-right: 4px;
      }

      .reveal-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 8px;
        margin-bottom: 14px;
      }
      .stat-cell {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 6px;
        padding: 12px 14px;
      }
      .stat-cell .stat-l {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
        margin-bottom: 5px;
      }
      .stat-cell .stat-v {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 22px;
        letter-spacing: 1.2px;
        color: var(--ivory);
        line-height: 1;
      }
      .stat-cell .stat-v small {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1px;
        color: var(--dim-3);
        margin-left: 4px;
      }

      .data-card {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 8px;
        padding: 18px;
        margin-bottom: 12px;
      }
      .data-card .dc-title {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--gold-2);
        text-transform: uppercase;
        margin-bottom: 12px;
      }
      .data-card .dc-title em {
        font-family: 'Inter', system-ui, sans-serif;
        font-style: normal;
        text-transform: none;
        letter-spacing: 0;
        font-size: 11px;
        color: var(--dim-3);
        font-weight: 400;
        margin-left: 8px;
      }

      /* Inline citation chip · next to BMR/TDEE/Protein labels */
      .cite-inline {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 7px;
        background: rgba(232, 188, 106, 0.08);
        border: 1px solid rgba(232, 188, 106, 0.22);
        border-radius: 3px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: none;
        color: var(--gold-3);
        white-space: nowrap;
        vertical-align: middle;
      }

      /* Macro distribution bar · live-painted P/C/F segments */
      .macro-bar-wrap {
        margin: 14px 0 10px;
        padding: 10px 0 4px;
      }
      .macro-bar {
        display: flex;
        height: 22px;
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: var(--ink);
        box-shadow: 0 0 16px rgba(232, 188, 106, 0.08) inset;
      }
      .macro-seg {
        height: 100%;
        transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
        position: relative;
        width: 0%;
      }
      .macro-seg::after {
        content: attr(data-pct);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9.5px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: 0.5px;
        text-shadow: 0 0 4px rgba(255, 255, 255, 0.18);
      }
      .macro-p {
        background: linear-gradient(180deg, #e8bc6a 0%, #d4a148 100%);
      }
      .macro-c {
        background: linear-gradient(180deg, #6b8fa8 0%, #4f7494 100%);
      }
      .macro-f {
        background: linear-gradient(180deg, #8b7355 0%, #6f5c44 100%);
      }
      .macro-bar-legend {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        margin-top: 8px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1px;
        color: var(--dim-2);
        text-transform: uppercase;
      }
      .mbl-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
        vertical-align: middle;
      }
      .mbl-p {
        background: #e8bc6a;
      }
      .mbl-c {
        background: #6b8fa8;
      }
      .mbl-f {
        background: #8b7355;
      }

      /* Split bars */
      .split-bars {
        display: flex;
        height: 28px;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 10px;
        border: 1px solid var(--line);
      }
      .split-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.2px;
        transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
      }
      .split-bar.b {
        background: var(--gold-2);
        color: var(--ink);
      }
      .split-bar.p {
        background: var(--blue);
        color: var(--ivory);
      }
      .split-bar.c {
        background: var(--red);
        color: var(--ink);
      }
      .split-legend {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        color: var(--dim-2);
      }
      .split-legend span {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .split-legend .swatch {
        width: 8px;
        height: 8px;
        border-radius: 2px;
      }
      .split-legend .swatch.b {
        background: var(--gold-2);
      }
      .split-legend .swatch.p {
        background: var(--blue);
      }
      .split-legend .swatch.c {
        background: var(--red);
      }
      .split-legend strong {
        color: var(--gold-3);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
      }

      /* Data rows (nutrition + lifts) */
      .data-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: 12px;
      }
      @media (max-width: 600px) {
        .data-grid {
          grid-template-columns: 1fr;
        }
      }
      .data-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 6px 0;
        border-bottom: 1px solid var(--line);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
      }
      .data-row:last-child {
        border-bottom: none;
      }
      .data-row .k {
        color: var(--dim-2);
      }
      .data-row .v {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 13px;
        color: var(--ivory);
        font-weight: 700;
      }
      .data-row .v strong {
        color: var(--gold-3);
      }
      .data-row .v small {
        color: var(--dim-3);
        margin-left: 4px;
        font-size: 10px;
      }

      /* Daily schedule timeline (08:00 → next morning) */
      .schedule-timeline {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        gap: 4px;
        margin-top: 6px;
      }
      .sched-block {
        aspect-ratio: 1 / 1.7;
        border-radius: 4px;
        background: var(--ink-2);
        border: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 8px 3px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 8px;
        letter-spacing: 0.5px;
        color: var(--dim-2);
        text-transform: uppercase;
        text-align: center;
        line-height: 1.2;
      }
      .sched-block .sb-time {
        font-size: 10px;
        color: var(--dim-3);
        font-weight: 700;
      }
      .sched-block .sb-tag {
        font-size: 8px;
        line-height: 1.1;
        color: inherit;
      }
      .sched-block.train {
        background: rgba(212, 161, 72, 0.2);
        border-color: var(--gold-2);
        color: var(--gold-3);
      }
      .sched-block.eat {
        background: rgba(232, 188, 106, 0.1);
        border-color: rgba(232, 188, 106, 0.4);
        color: var(--gold-3);
      }
      .sched-block.breath {
        background: rgba(107, 151, 184, 0.15);
        border-color: var(--blue);
        color: var(--blue);
      }
      .sched-block.sleep {
        background: rgba(45, 50, 60, 0.6);
        border-color: var(--line-2);
        color: var(--dim-2);
      }
      .sched-block.cardio {
        background: rgba(184, 84, 80, 0.14);
        border-color: rgba(184, 84, 80, 0.5);
        color: #e89c97;
      }
      @media (max-width: 720px) {
        .schedule-timeline {
          grid-template-columns: repeat(4, 1fr);
        }
      }

      /* 12-week timeline · mobile · split into 6+6 to keep blocks legible */
      @media (max-width: 720px) {
        .timeline {
          grid-template-columns: repeat(6, 1fr);
        }
      }

      /* 12-week timeline */
      .timeline {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 4px;
        margin-top: 6px;
      }
      .week {
        aspect-ratio: 1 / 1.4;
        border-radius: 3px;
        background: var(--ink-2);
        border: 1px solid var(--line);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 6px 2px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 8px;
        letter-spacing: 0.5px;
        color: var(--dim-2);
        text-transform: uppercase;
        text-align: center;
      }
      .week.build {
        background: rgba(212, 161, 72, 0.18);
        border-color: var(--gold);
        color: var(--gold-3);
      }
      .week.deload {
        background: rgba(107, 151, 184, 0.18);
        border-color: var(--blue);
        color: var(--blue);
      }
      .week.peak {
        background: rgba(212, 161, 72, 0.3);
        border-color: var(--gold-3);
        color: var(--gold-3);
        font-weight: 700;
      }
      .week.transition {
        background: var(--ink-3);
        border-color: var(--line-2);
        color: var(--ivory);
      }
      .week .w-num {
        font-size: 12px;
        color: inherit;
        font-weight: 700;
      }
      .week .w-tag {
        font-size: 7px;
        line-height: 1;
      }

      /* Maddy's signed line — the only place Maddy speaks directly */
      .maddy-line {
        margin: 22px 0 14px;
        padding: 22px 26px;
        background: linear-gradient(135deg, rgba(212, 161, 72, 0.08), rgba(232, 188, 106, 0.04));
        border-left: 3px solid var(--gold-3);
        border-radius: 4px;
        text-align: left;
      }
      .maddy-line .ml-quote {
        display: block;
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-size: clamp(18px, 2vw, 22px);
        color: var(--ivory);
        line-height: 1.45;
        font-weight: 500;
        margin-bottom: 12px;
      }
      .maddy-line .ml-sign {
        display: block;
        font-family: 'Bebas Neue', sans-serif;
        font-size: 13px;
        letter-spacing: 3px;
        color: var(--gold-3);
      }

      /* Theorem credibility line */
      .theorem-line {
        margin-top: 14px;
        padding: 12px 14px;
        background: var(--ink-2);
        border: 1px solid var(--line-2);
        border-radius: 6px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1px;
        color: var(--dim-2);
        text-transform: uppercase;
        line-height: 1.6;
      }
      .theorem-line strong {
        color: var(--gold-3);
      }

      /* Save form */
      .save-card {
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 8px;
        padding: 22px;
        margin-top: 16px;
      }
      .save-card .sc-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 22px;
        letter-spacing: 2px;
        color: var(--ivory);
        margin: 0 0 6px 0;
      }
      .save-card .sc-sub {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-2);
        margin-bottom: 12px;
      }
      .save-bullets {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
      }
      .save-bullets li {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--ivory);
        padding: 6px 0 6px 22px;
        position: relative;
        line-height: 1.45;
      }
      .save-bullets li::before {
        content: '✓';
        position: absolute;
        left: 0;
        top: 6px;
        color: var(--gold-3);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
      }
      .save-note {
        margin-top: 14px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
      }
      .field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 12px;
      }
      .field label {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.8px;
        color: var(--dim-2);
        text-transform: uppercase;
      }
      .field input {
        background: var(--ink-2);
        border: 1px solid var(--line-2);
        color: var(--ivory);
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 15px;
        padding: 12px 14px;
        border-radius: 4px;
        outline: none;
        -webkit-appearance: none;
        transition: border-color 0.18s ease;
      }
      .field input:focus {
        border-color: var(--gold-2);
      }
      .field input::placeholder {
        color: var(--dim-3);
      }

      /* ────────── Top Chooser · compact tease above the diagnostic ────────── */
      .top-chooser {
        margin: 0 0 28px;
        padding: 26px 26px 22px;
      }
      .top-chooser .tc-eyebrow {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--gold-2);
        text-transform: uppercase;
        font-weight: 700;
        margin: 0 0 10px;
      }
      .top-chooser .tc-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(20px, 2.8vw, 28px);
        letter-spacing: 2px;
        color: var(--ivory);
        margin: 0 0 18px;
        line-height: 1.15;
        font-weight: 400;
      }
      .top-chooser .tc-title .accent {
        color: var(--gold-3);
      }
      .top-chooser .tc-title .tc-em {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        font-weight: 400;
        color: var(--gold-3);
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.9em;
      }
      .top-chooser .ct-desc {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12.5px;
        color: var(--dim-1);
        line-height: 1.5;
        margin: 0 0 14px;
      }
      .top-chooser .tc-scroll {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
        margin: 0;
        text-align: center;
      }

      /* ────────── Chooser Card · the post-reveal flow ────────── */
      .chooser-card {
        background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-2) 100%);
        border: 1px solid var(--line-3);
        border-radius: 10px;
        padding: 32px 28px;
        margin-top: 20px;
        position: relative;
      }
      .chooser-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
      }
      .chooser-card .cc-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(24px, 3.6vw, 34px);
        letter-spacing: 2.5px;
        color: var(--ivory);
        margin: 0 0 10px;
        line-height: 1.05;
      }
      .chooser-card .cc-title .accent {
        color: var(--gold-3);
      }
      .chooser-card .cc-sub {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14px;
        color: var(--dim-2);
        margin-bottom: 22px;
        line-height: 1.55;
      }

      .chooser-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 22px;
      }
      @media (max-width: 720px) {
        .chooser-grid {
          grid-template-columns: 1fr;
        }
      }

      .chooser-tile {
        display: block;
        text-align: left;
        width: 100%;
        background: var(--ink-2);
        border: 1px solid var(--line-2);
        border-radius: 8px;
        padding: 22px 20px;
        cursor: pointer;
        transition:
          border-color 0.2s,
          transform 0.14s,
          background 0.2s;
        font-family: inherit;
        color: inherit;
      }
      .chooser-tile:hover {
        border-color: var(--gold-2);
        background: var(--ink-3);
        transform: translateY(-2px);
      }
      .chooser-tile:active {
        transform: translateY(0);
      }
      .chooser-tile.featured {
        border-color: var(--gold-3);
        background: linear-gradient(180deg, rgba(232, 188, 106, 0.06) 0%, var(--ink-2) 100%);
      }
      .chooser-tile.featured:hover {
        background: linear-gradient(180deg, rgba(232, 188, 106, 0.1) 0%, var(--ink-3) 100%);
      }

      .chooser-tile .ct-tag {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.8px;
        color: var(--gold-2);
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 10px;
      }
      .chooser-tile .ct-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 28px;
        letter-spacing: 3px;
        color: var(--ivory);
        margin-bottom: 6px;
        line-height: 1;
      }
      .chooser-tile .ct-price {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-2);
        margin-bottom: 14px;
      }
      .chooser-tile .ct-price strong {
        color: var(--gold-3);
        font-size: 16px;
        font-weight: 700;
      }
      .chooser-tile .ct-bullets {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
      }
      .chooser-tile .ct-bullets li {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12.5px;
        color: var(--dim-1);
        padding: 5px 0 5px 18px;
        position: relative;
        line-height: 1.5;
      }
      .chooser-tile .ct-bullets li::before {
        content: '·';
        position: absolute;
        left: 4px;
        top: 4px;
        color: var(--gold-2);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-weight: 700;
        font-size: 16px;
      }
      /* Kid Live 1-on-1 deliverables — emphasised list (12 items, parent-trust signal) */
      .chooser-tile .ct-deliv-eyebrow {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: var(--gold-3);
        text-transform: uppercase;
        font-weight: 700;
        margin: 14px 0 10px;
        padding-top: 14px;
        border-top: 1px solid rgba(212, 161, 72, 0.18);
      }
      .chooser-tile .ct-bullets-live li {
        font-size: 13px;
        padding: 6px 0 6px 22px;
      }
      .chooser-tile .ct-bullets-live li::before {
        content: '✓';
        color: var(--gold-3);
        font-size: 12px;
        top: 7px;
        left: 2px;
      }
      .chooser-tile .ct-bullets-live li strong {
        color: var(--ink);
        font-weight: 600;
      }
      /* Light-bg tiles (the .featured kid card has white-ish bg) keep gold accent */
      .chooser-tile.featured .ct-bullets-live li strong {
        color: var(--ink);
      }
      .chooser-tile .ct-cta {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 11px;
        letter-spacing: 2px;
        color: var(--gold-3);
        text-transform: uppercase;
        font-weight: 700;
        border-top: 1px solid var(--line-2);
        padding-top: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .chooser-tile .ct-cta span {
        transition: transform 0.18s;
      }
      .chooser-tile:hover .ct-cta span {
        transform: translateX(4px);
      }

      .cc-trust {
        background: var(--ink);
        border: 1px solid var(--line);
        border-left: 3px solid var(--gold-2);
        border-radius: 4px;
        padding: 14px 18px;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-1);
        line-height: 1.55;
        margin-bottom: 22px;
      }
      .cc-trust strong {
        color: var(--gold-3);
      }
      .cc-trust em {
        color: var(--ivory);
        font-style: italic;
      }

      .cc-secondary {
        border-top: 1px solid var(--line);
        padding-top: 18px;
      }
      .cc-secondary .cc-note {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12.5px;
        color: var(--dim-2);
        margin: 0 0 14px;
        line-height: 1.55;
      }

      /* ────────── Save-Body-ID step (Step 19) ────────── */
      .save-fields {
        max-width: 540px;
        margin: 8px 0 24px;
      }
      .save-fields .field {
        margin-bottom: 14px;
      }
      .save-fields .consent-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        margin: 6px 0 4px;
        cursor: pointer;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        color: var(--dim-1);
        line-height: 1.5;
      }
      .save-fields .consent-row input[type='checkbox'] {
        margin-top: 3px;
        accent-color: var(--gold-3);
        cursor: pointer;
      }
      .save-fields .lead-error {
        margin: 8px 0 0;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12px;
        color: var(--red);
      }
      .lead-trust {
        margin: 16px 0 0;
        max-width: 540px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 9px;
        letter-spacing: 1.5px;
        color: var(--dim-3);
        text-transform: uppercase;
      }
      .save-status {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 10px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.5px;
        color: var(--gold-3);
        text-transform: uppercase;
      }
      .save-status::before {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 6px var(--green);
      }

      /* ────────── Footer ────────── */
      .site-footer {
        flex: 0 0 auto;
        padding: 20px 28px;
        border-top: 1px solid var(--line);
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 1.8px;
        color: var(--dim-3);
        text-transform: uppercase;
        text-align: center;
      }
      .site-footer .powered {
        color: var(--gold-2);
        font-weight: 700;
      }
      .site-footer .sep {
        margin: 0 8px;
        color: var(--line-2);
      }

      /* ────────── Mobile ────────── */
      @media (max-width: 720px) {
        .top-bar {
          grid-template-columns: 1fr;
          gap: 12px;
          padding: 14px 18px;
        }
        .top-bar .progress-rail {
          order: 2;
        }
        .top-bar .cells-chip {
          order: 3;
          justify-self: flex-start;
        }
        .stage {
          padding: 28px 18px 40px;
        }
        h1.headline {
          letter-spacing: 2px;
        }
        .opt {
          padding: 12px 14px;
        }
        .opt-label {
          font-size: 14px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .step,
        .opt,
        .audience-card,
        .split-bar {
          transition: none !important;
        }
        .compute-bar::after {
          animation: none;
        }
      }

      .step:not(.active) {
        position: absolute;
        pointer-events: none;
        visibility: hidden;
      }

      /* ────── REVEAL HERO · Body-ID prominent at top of reveal screen ────── */
      .reveal-hero {
        margin: 18px 0 36px;
        padding: 38px 28px 30px;
        background: linear-gradient(
          180deg,
          rgba(212, 161, 72, 0.1) 0%,
          rgba(15, 17, 28, 0.98) 100%
        );
        border: 1.5px solid #d4a148;
        border-radius: 14px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .reveal-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e8bc6a, transparent);
      }
      .reveal-hero::after {
        content: '';
        position: absolute;
        inset: -50%;
        background: radial-gradient(
          ellipse 380px 220px at center,
          rgba(232, 188, 106, 0.08),
          transparent 70%
        );
        pointer-events: none;
        z-index: 0;
      }
      .reveal-hero > * {
        position: relative;
        z-index: 1;
      }
      .reveal-hero .rh-label {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10.5px;
        letter-spacing: 2.5px;
        color: #e8bc6a;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 14px;
      }
      .reveal-hero .rh-id {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(38px, 9vw, 76px);
        letter-spacing: 4px;
        color: #f5f1e8;
        line-height: 1;
        margin: 0 0 12px;
        font-weight: 400;
        text-shadow: 0 0 28px rgba(232, 188, 106, 0.35);
      }
      .reveal-hero .rh-archetype {
        font-family: 'Bebas Neue', sans-serif;
        font-size: clamp(16px, 2.6vw, 22px);
        letter-spacing: 3px;
        color: #e8bc6a;
        line-height: 1.1;
        font-weight: 400;
        margin-bottom: 14px;
      }
      .reveal-hero .rh-uniq {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.55;
        color: rgba(245, 241, 232, 0.78);
        max-width: 460px;
        margin: 0 auto 18px;
      }
      .reveal-hero .rh-uniq strong {
        color: #e8bc6a;
        font-weight: 700;
      }
      .reveal-hero .rh-uniq em {
        font-family: 'Cormorant Garamond', serif;
        font-style: italic;
        color: #f5f1e8;
        font-size: 14.5px;
      }
      .reveal-hero .rh-arrow {
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: rgba(245, 241, 232, 0.55);
        text-transform: uppercase;
        padding-top: 14px;
        border-top: 1px solid rgba(245, 241, 232, 0.08);
      }
      @media (max-width: 540px) {
        .reveal-hero {
          padding: 30px 20px 22px;
          margin: 14px 0 28px;
        }
      }

      /* ────── MOBILE HAMBURGER · fullscreen overlay ────── */
      .nav-burger {
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: 1px solid rgba(245, 241, 232, 0.1);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        -webkit-tap-highlight-color: transparent;
      }
      .nav-burger:hover {
        border-color: #d4a148;
      }
      .nav-burger .nb-bars {
        position: relative;
        width: 18px;
        height: 12px;
      }
      .nav-burger .nb-bars::before,
      .nav-burger .nb-bars::after,
      .nav-burger .nb-bars span {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: #f5f1e8;
        border-radius: 2px;
        transition:
          transform 0.3s ease,
          opacity 0.25s ease,
          top 0.3s ease,
          background 0.25s;
      }
      .nav-burger .nb-bars::before {
        top: 0;
      }
      .nav-burger .nb-bars span {
        top: 5px;
      }
      .nav-burger .nb-bars::after {
        top: 10px;
      }
      .nav-burger.active .nb-bars::before {
        top: 5px;
        transform: rotate(45deg);
        background: #e8bc6a;
      }
      .nav-burger.active .nb-bars span {
        opacity: 0;
      }
      .nav-burger.active .nb-bars::after {
        top: 5px;
        transform: rotate(-45deg);
        background: #e8bc6a;
      }
      .nav-overlay {
        position: fixed;
        inset: 0;
        z-index: 99;
        background: rgba(10, 11, 14, 0.98);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.35s ease,
          visibility 0.35s;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 24px 40px;
        text-align: center;
      }
      .nav-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .nav-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #d4a148, transparent);
        opacity: 0.6;
      }
      .nav-overlay-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        max-width: 360px;
        margin-bottom: 32px;
      }
      .nav-overlay-link {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 30px;
        letter-spacing: 4px;
        color: #f5f1e8;
        text-decoration: none;
        padding: 16px 20px;
        border-radius: 8px;
        border: 1px solid transparent;
        transition:
          background 0.2s,
          color 0.2s,
          border-color 0.2s,
          transform 0.15s;
        text-transform: uppercase;
        font-weight: 400;
      }
      .nav-overlay-link:active {
        transform: scale(0.98);
      }
      .nav-overlay-link:hover,
      .nav-overlay-link.active {
        color: #e8bc6a;
        background: rgba(212, 161, 72, 0.08);
        border-color: rgba(212, 161, 72, 0.3);
      }
      .nav-overlay-foot {
        margin-top: 28px;
        font-family: 'JetBrains Mono', ui-monospace, monospace;
        font-size: 10px;
        letter-spacing: 2px;
        color: rgba(245, 241, 232, 0.48);
        text-transform: uppercase;
      }
      .nav-overlay-foot a {
        color: #e8bc6a;
        text-decoration: none;
      }
      body.nav-open {
        overflow: hidden;
      }

      /* ════ CHOOSE YOUR PLAN · inline reveal plans · all plans, no auto-suggest · 2026-06-22 ════ */
      .reveal-plans {
        margin: 30px auto 8px;
        max-width: 680px;
      }
      .rp-eyebrow {
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        letter-spacing: 2.4px;
        text-transform: uppercase;
        color: var(--gold-2);
        text-align: center;
        margin: 0 0 8px;
        font-weight: 700;
      }
      .rp-title {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 30px;
        letter-spacing: 1.5px;
        line-height: 1.05;
        color: var(--ivory);
        text-align: center;
        margin: 0 0 10px;
      }
      .rp-sub {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--dim-2);
        text-align: center;
        max-width: 480px;
        margin: 0 auto 20px;
      }
      .rp-toggle {
        display: flex;
        gap: 6px;
        justify-content: center;
        background: var(--ink-1);
        border: 1px solid var(--line-2);
        border-radius: 999px;
        padding: 5px;
        width: max-content;
        max-width: 100%;
        margin: 0 auto 18px;
      }
      .rp-tg {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        font-weight: 600;
        color: var(--dim-2);
        background: transparent;
        border: 0;
        border-radius: 999px;
        padding: 9px 18px;
        cursor: pointer;
        transition: background 0.18s, color 0.18s;
        min-height: 40px;
        white-space: nowrap;
      }
      .rp-tg.is-on {
        background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
        color: var(--ink-1);
      }
      .rp-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
      }
      @media (min-width: 640px) {
        .rp-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .rp-card {
        background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
        border: 1px solid var(--line-2);
        border-radius: 14px;
        padding: 20px 18px;
        display: flex;
        flex-direction: column;
        text-align: left;
        transition: border-color 0.2s, transform 0.12s;
      }
      .rp-card:hover {
        border-color: var(--gold-2);
        transform: translateY(-2px);
      }
      .rp-dur {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 26px;
        letter-spacing: 1.5px;
        color: var(--gold-3);
        line-height: 1;
      }
      .rp-name {
        font-family: 'Space Mono', monospace;
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--dim-3);
        margin: 3px 0 12px;
        font-weight: 700;
      }
      .rp-price {
        font-family: 'Bebas Neue', sans-serif;
        font-size: 38px;
        letter-spacing: 1px;
        color: var(--ivory);
        line-height: 1;
        margin-bottom: 12px;
      }
      .rp-price .rp-alt {
        display: block;
        font-family: 'Space Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.5px;
        color: var(--dim-3);
        margin-top: 7px;
        font-weight: 500;
      }
      .rp-desc {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12.5px;
        line-height: 1.55;
        color: var(--dim-2);
        margin-bottom: 18px;
        flex: 1;
      }
      .rp-cta {
        display: block;
        text-align: center;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.3px;
        color: var(--ink-1);
        background: linear-gradient(180deg, var(--gold-2), var(--gold-3));
        border-radius: 8px;
        padding: 13px 14px;
        text-decoration: none;
        min-height: 48px;
        box-sizing: border-box;
        transition: transform 0.12s, box-shadow 0.2s;
      }
      .rp-cta:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(212, 161, 72, 0.32);
      }
      .rp-live {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: center;
        text-align: center;
        margin-top: 16px;
        padding: 16px 18px;
        border: 1px dashed var(--line-2);
        border-radius: 12px;
        text-decoration: none;
        transition: border-color 0.2s, background 0.2s;
      }
      .rp-live:hover {
        border-color: var(--gold-2);
        background: rgba(212, 161, 72, 0.04);
      }
      .rp-live-l {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 14px;
        font-weight: 700;
        color: var(--ivory);
      }
      .rp-live-r {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 12.5px;
        color: var(--dim-2);
      }