/* ============================================================================
   DDA — MindOS Quiz
   Mobile-first. Phone gets a full-viewport card with chunky touch targets;
   desktop gets the centred narrative layout.
   Pairs with colors_and_type.css from the design system.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-0); }

body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'kern' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: dark;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ---- ITALICS OVERRIDE -----------------------------------------------------
   The base design system maps <em> to Instrument Serif italic. The quiz uses
   gold-weighted body text for emphasis instead — keeps the aesthetic tight. */
em {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  color: var(--accent-gold-hover);
  letter-spacing: -0.005em;
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ============================================================================
   APP SHELL
   ============================================================================ */
.q-app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  isolation: isolate;
}

/* Backgrounds */
.q-bg-canvas {
  position: fixed; inset: 0; z-index: 0;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 600ms var(--ease-out-expo);
}
.q-bg-canvas--dim { opacity: 0.18; }
.q-bg-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(10,15,30,0.35) 0%, transparent 65%),
    linear-gradient(180deg, rgba(10,15,30,0.5) 0%, transparent 25%, transparent 70%, rgba(4,6,13,0.85) 100%);
}
.q-bg-grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* ============================================================================
   HEADER
   ============================================================================ */
.q-header {
  position: sticky; top: 0; z-index: 10;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--fg-hairline);
  background: rgba(4,6,13,0.78);
  backdrop-filter: var(--blur-header);
  -webkit-backdrop-filter: var(--blur-header);
}
.q-header__logo {
  display: inline-flex; align-items: center; gap: 10px;
}
.q-header__logo img {
  height: 36px; width: auto; display: block; filter: brightness(1.04);
}
.q-header__crumb {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 12px;
}
.q-header__crumb .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--dda-cool-white-a30); }
.q-header__crumb .current { color: var(--dda-teal-350); }
.q-header__crumb .done { color: var(--fg-1); }
.q-header__crumb .mobile-only {
  display: none;
  padding: 4px 10px;
  border: 1px solid var(--fg-hairline);
  border-radius: 999px;
  color: var(--accent-teal);
}

/* Progress bar lives directly under the header.
   --header-h is updated per breakpoint so the sticky offset tracks the
   header's actual rendered height (logo height + 2x padding + border). */
:root { --header-h: 57px; }
.q-progress {
  position: sticky; top: var(--header-h); z-index: 9;
  height: 2px;
  background: rgba(228,234,248,0.05);
}
.q-progress__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--dda-teal-500) 0%, var(--dda-teal-300) 50%, var(--accent-gold) 100%);
  box-shadow: 0 0 16px rgba(58,138,138,0.5);
  transition: width 600ms var(--ease-out-expo);
}

/* ============================================================================
   STAGE — desktop centres a card; phone gives a full-viewport canvas
   ============================================================================ */
.q-stage {
  position: relative; z-index: 5;
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(28px, 5vh, 72px) clamp(16px, 5vw, 40px) clamp(28px, 4vh, 56px);
}

.q-screen {
  width: 100%;
  display: flex; justify-content: center;
  animation: qFadeIn 500ms var(--ease-out-expo) both;
}
@keyframes qFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.q-card {
  width: 100%; max-width: 880px;
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}
.q-card--wide { max-width: 1100px; }
.q-card--narrow { max-width: 720px; }

/* ============================================================================
   PRIMITIVES
   ============================================================================ */
.q-eyebrow {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-teal);
  display: inline-flex; align-items: center; gap: 12px;
}
.q-eyebrow::before {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-teal));
}

.q-title {
  font: 600 clamp(2rem, 4.4vw, 3.4rem)/1.08 var(--font-body);
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}
.q-title em { color: var(--accent-gold-hover); }

.q-lede {
  font: 400 clamp(1rem, 1.4vw, 1.2rem)/1.55 var(--font-body);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.q-prose-h {
  font: 600 clamp(1.2rem, 1.9vw, 1.5rem)/1.25 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
}
.q-prose-p {
  font: 400 clamp(1rem, 1.35vw, 1.13rem)/1.65 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.q-prose-p strong { color: var(--accent-gold-hover); font-weight: 500; }

/* Primary CTA — gold capsule */
.q-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 28px;
  min-height: 52px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--dda-gold-300) 0%, var(--accent-gold) 55%, var(--accent-gold-deep) 100%);
  color: var(--dda-slate-950);
  font: 600 14px/1.2 var(--font-body);
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 0; cursor: pointer;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.45),
    0 12px 28px rgba(0,0,0,0.45),
    0 0 22px var(--accent-gold-glow);
  transition: transform 180ms var(--ease-out-quart),
              filter 180ms var(--ease-out-quart),
              box-shadow 180ms var(--ease-out-quart);
  -webkit-tap-highlight-color: transparent;
}
.q-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.q-cta:active { transform: translateY(1px); transition-duration: 80ms; }
.q-cta[disabled], .q-cta[aria-disabled="true"] {
  opacity: 0.32; cursor: not-allowed; pointer-events: none; filter: grayscale(0.5);
}
.q-cta__arrow { font-style: normal; transform: translateX(0); transition: transform 200ms var(--ease-out-quart); }
.q-cta:hover .q-cta__arrow { transform: translateX(3px); }

/* Ghost / back */
.q-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 14px;
  border-radius: 6px;
  min-height: 44px;
  transition: color 200ms var(--ease-out-quart), background 200ms var(--ease-out-quart);
  -webkit-tap-highlight-color: transparent;
}
.q-ghost:hover { color: var(--fg-1); background: rgba(228,234,248,0.04); }
.q-ghost__arrow { font-style: normal; transform: translateY(-1px); }

/* ============================================================================
   INTRO SCREEN (landing page in-card)
   ============================================================================ */
.q-intro {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}
.q-intro__hero {
  font: 600 clamp(2.2rem, 6.5vw, 4.6rem)/1.02 var(--font-body);
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
  max-width: 18ch;
}
.q-intro__hero em { color: var(--accent-gold-hover); }
.q-brand { color: var(--dda-teal-350); }
.q-intro__subhead {
  display: flex; flex-direction: column; gap: 12px;
}
.q-intro__subhead p {
  font: 400 clamp(1.05rem, 1.6vw, 1.3rem)/1.55 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
  max-width: 56ch;
}
.q-intro__subhead p strong { color: var(--accent-gold-hover); font-weight: 500; }

.q-intro__intro {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: clamp(8px, 2vh, 20px);
  border-top: 1px solid var(--fg-hairline);
}
.q-intro__intro-lead {
  font: 400 clamp(1rem, 1.4vw, 1.18rem)/1.65 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
  max-width: 56ch;
  margin: 0;
}
.q-intro__intro-lead strong { color: var(--accent-gold-hover); font-weight: 500; }
.q-bullets {
  display: flex; flex-direction: column; gap: 12px;
  padding-left: 0;
}
.q-bullets li {
  position: relative;
  padding-left: 26px;
  font: 400 clamp(1rem, 1.3vw, 1.12rem)/1.55 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.q-bullets li::before {
  content: ''; position: absolute; left: 2px; top: 0.55em;
  width: 12px; height: 2px;
  background: var(--accent-gold);
  border-radius: 1px;
}
.q-bullets li strong { color: var(--accent-gold-hover); font-weight: 500; }

.q-numlist {
  display: flex; flex-direction: column; gap: 14px;
  counter-reset: step;
}
.q-numlist li {
  position: relative;
  padding-left: 44px;
  font: 400 clamp(1rem, 1.3vw, 1.12rem)/1.55 var(--font-body);
  color: var(--fg-1);
  counter-increment: step;
}
.q-numlist li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-gold);
  background: rgba(201,166,83,0.08);
  color: var(--accent-gold-hover);
  font-family: var(--font-signage); font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Section heading — proper medium heading with a teal eyebrow above */
.q-section-h {
  font: 600 clamp(1.4rem, 2.4vw, 1.8rem)/1.18 var(--font-body);
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0 0 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.q-section-h[data-eyebrow]::before {
  content: attr(data-eyebrow);
  font-family: var(--font-signage); font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-teal);
}
.q-section-h::after {
  content: '';
  width: 32px; height: 2px;
  background: var(--accent-gold);
  margin-top: 2px;
  border-radius: 1px;
}
.q-section-h em { color: var(--accent-gold-hover); }

.q-intro__how {
  padding-top: clamp(8px, 2vh, 20px);
  border-top: 1px solid var(--fg-hairline);
}

.q-intro__cta-row {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
  padding-top: clamp(8px, 2vh, 20px);
}
.q-intro__cta-row .q-cta { padding: 18px 32px; min-height: 56px; }

/* ============================================================================
   QUESTION SCREENS — paired Likerts
   ============================================================================ */
.q-question {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}
.q-question__head {
  display: flex; flex-direction: column; gap: 12px;
}
.q-question__counter {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.q-question__counter .current { color: var(--fg-1); font-size: 12px; }

.q-pair__lede {
  font: 400 clamp(1rem, 1.4vw, 1.18rem)/1.5 var(--font-body);
  color: var(--fg-1);
  margin: 0;
  max-width: 56ch;
  display: flex; flex-direction: column; gap: 10px;
}
.q-pair__legend {
  display: inline-flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2);
}
.q-pair__legend strong {
  display: inline-block;
  font-family: var(--font-body); font-weight: 600;
  color: var(--accent-gold-hover);
  font-size: 13px;
  letter-spacing: -0.01em;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.q-pair__legend-sep {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--fg-hairline);
}

.q-pair__list {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}
.q-pair__item {
  display: flex; flex-direction: column;
  gap: 14px;
}
.q-pair__item-label {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.q-pair__item-label::before {
  content: ''; display: inline-block; width: 20px; height: 1px;
  background: linear-gradient(90deg, var(--accent-gold), transparent);
}
.q-pair__stem {
  font: 500 clamp(1.08rem, 1.6vw, 1.3rem)/1.4 var(--font-body);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.q-pair__divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--fg-hairline) 20%, var(--fg-hairline) 80%, transparent 100%);
}

/* Likert button row — desktop is 5 columns w/ labels; phone is bigger touch */
.q-likert {
  display: flex; flex-direction: column; gap: 10px;
}
.q-likert__buttons {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.q-likert__btn {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  min-height: 64px;
  background: rgba(228,234,248,0.06);
  border: 1px solid var(--dda-cool-white-a30);
  border-radius: 6px;
  color: var(--fg-2);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 180ms var(--ease-out-quart),
    border-color 180ms var(--ease-out-quart),
    color 180ms var(--ease-out-quart),
    transform 180ms var(--ease-out-quart),
    box-shadow 180ms var(--ease-out-quart);
}
.q-likert__btn:hover {
  border-color: var(--dda-teal-500);
  background: rgba(58,138,138,0.07);
  color: var(--fg-1);
}
.q-likert__btn:active { transform: scale(0.97); }
.q-likert__btn[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(74,163,217,0.20), rgba(74,163,217,0.06));
  border-color: var(--dda-steel-400);
  color: var(--fg-1);
  box-shadow: inset 0 0 0 1px rgba(74,163,217,0.4), 0 0 20px rgba(74,163,217,0.18);
}
.q-likert__btn-value {
  font: 600 clamp(1.2rem, 2vw, 1.6rem)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  letter-spacing: -0.02em;
}
.q-likert__btn-label {
  font-family: var(--font-signage); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
}
.q-likert__anchors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  font-family: var(--font-signage); font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
  padding: 2px 0;
}
.q-likert__anchors span { text-align: center; }
.q-likert__anchors span:first-child { grid-column: 1; }
.q-likert__anchors span:last-child  { grid-column: 5; }

/* Bottom nav inside cards */
.q-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 4px;
}
.q-nav__cta { padding: 14px 24px; min-height: 52px; font-size: 13px; }
.q-nav__hint {
  font-family: var(--font-signage); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-3);
}
.q-nav__hint kbd {
  font-family: var(--font-body); font-size: 11px;
  font-weight: 500; padding: 2px 6px;
  background: rgba(228,234,248,0.07);
  border: 1px solid var(--fg-hairline);
  border-radius: 3px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
  margin: 0 2px;
}

/* ============================================================================
   TIEBREAKER
   ============================================================================ */
.q-tie { display: flex; flex-direction: column; gap: 12px; }
.q-tie__card {
  position: relative;
  display: flex; gap: 18px; align-items: flex-start;
  padding: 18px 22px;
  min-height: 64px;
  background: rgba(228,234,248,0.03);
  border: 1px solid var(--fg-hairline);
  border-radius: 8px;
  color: var(--fg-1);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 200ms var(--ease-out-quart),
              border-color 200ms var(--ease-out-quart),
              transform 200ms var(--ease-out-quart);
}
.q-tie__card:active { transform: scale(0.99); }
.q-tie__card:hover { border-color: var(--dda-teal-500); background: rgba(58,138,138,0.06); }
.q-tie__card[aria-pressed="true"] {
  border-color: var(--accent-gold);
  background: linear-gradient(180deg, rgba(201,166,83,0.12), rgba(201,166,83,0.03));
  box-shadow: 0 0 26px rgba(201,166,83,0.15);
}
.q-tie__key {
  flex-shrink: 0; width: 28px;
  font-family: var(--font-signage); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-gold);
  padding-top: 2px;
}
.q-tie__body {
  font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.55 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
  flex: 1;
}

/* ============================================================================
   READINESS — Q8 tiles + Q9 compact slider
   ============================================================================ */
.q-readiness { gap: clamp(18px, 2.8vh, 28px) !important; }
.q-readiness__intro {
  font: 400 clamp(1rem, 1.3vw, 1.1rem)/1.55 var(--font-body);
  color: var(--fg-2);
  margin: 0;
}
.q-readiness__block { display: flex; flex-direction: column; gap: 14px; }
.q-readiness__stem {
  font: 500 clamp(1.05rem, 1.5vw, 1.22rem)/1.4 var(--font-body);
  letter-spacing: -0.015em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
}
.q-readiness__num {
  font-family: var(--font-signage); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-gold);
  padding: 4px 10px;
  border: 1px solid var(--accent-gold);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.q-readiness__readout {
  margin-left: auto;
  font: 400 13px/1 var(--font-body);
  color: var(--fg-2);
  display: inline-flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.q-readiness__readout strong {
  font-weight: 600; color: var(--accent-gold-hover); font-size: 15px;
}
.q-readiness__readout em {
  color: var(--fg-2); margin-left: 4px;
  font-weight: 400; /* override the global em-bold */
}

/* Time options — full-width vertical stack of horizontal bars,
   mirroring the .q-tie__card pattern so the readiness step reads
   consistently. */
.q-time-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.q-time-tile {
  display: flex; align-items: center;
  padding: 14px 20px;
  min-height: 56px;
  background: rgba(228,234,248,0.03);
  border: 1px solid var(--fg-hairline);
  border-radius: 8px;
  color: var(--fg-2);
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms var(--ease-out-quart),
              border-color 180ms var(--ease-out-quart),
              transform 180ms var(--ease-out-quart);
}
.q-time-tile:active { transform: scale(0.99); }
.q-time-tile:hover { border-color: var(--dda-teal-500); background: rgba(58,138,138,0.07); }
.q-time-tile[aria-pressed="true"] {
  border-color: var(--accent-gold);
  background: linear-gradient(180deg, rgba(201,166,83,0.12), rgba(201,166,83,0.02));
}
.q-time-tile__value {
  font: 600 clamp(1.05rem, 1.6vw, 1.2rem)/1 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.q-time-tile__value-unit {
  font-family: var(--font-signage); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-2);
}

/* Commitment slider — compact strip with pip overlays */
.q-commitment { display: flex; flex-direction: column; gap: 10px; }
/* Roomier vertical padding so the 20-22px thumb doesn't overlap the pip
   number above it. The thumb is positioned at top:50% of this wrap, so
   the padding has to stay symmetric to keep the thumb centred on the bar. */
.q-commitment__track-wrap { position: relative; padding: 30px 0; }
.q-commitment__bar {
  position: relative; height: 4px;
  background: rgba(228,234,248,0.07);
  border-radius: 999px; overflow: hidden;
}
.q-commitment__bar-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--dda-teal-500) 0%, var(--dda-teal-300) 50%, var(--accent-gold) 100%);
  transform-origin: left center;
  transition: transform 400ms var(--ease-out-expo);
  box-shadow: 0 0 12px rgba(58,138,138,0.4);
}
.q-commitment__thumb {
  position: absolute; top: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-gold);
  border: 2px solid var(--dda-slate-950);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(201,166,83,0.25), 0 0 18px rgba(201,166,83,0.5);
  transition: left 400ms var(--ease-out-expo);
  pointer-events: none;
}
.q-commitment__pips {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(10, 1fr);
  pointer-events: none;
}
.q-commitment__pip {
  pointer-events: auto;
  background: none; border: 0;
  cursor: pointer;
  position: relative;
  font-family: var(--font-signage); font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent;
}
.q-commitment__pip span {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  transition: color 200ms var(--ease-out-quart);
}
.q-commitment__pip.active span { color: var(--accent-gold); font-weight: 600; }
.q-commitment__pip:hover span { color: var(--fg-1); }
.q-commitment__range {
  position: absolute; inset: -14px 0;
  width: 100%; height: calc(100% + 28px);
  opacity: 0; cursor: pointer;
}
.q-commitment__anchors {
  display: flex; justify-content: space-between;
  font-family: var(--font-signage); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-2);
}

/* ============================================================================
   REVEAL + EMAIL GATE
   ============================================================================ */
.q-reveal { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 32px); }
.q-reveal__line {
  font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.4 var(--font-body);
  letter-spacing: -0.015em;
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 32ch;
}
.q-reveal__name {
  display: block; margin-top: 6px;
  font: 600 clamp(2rem, 4.6vw, 3.4rem)/1.05 var(--font-body);
  letter-spacing: -0.03em;
  color: var(--accent-gold);
}
.q-reveal__body {
  font: 400 clamp(1.02rem, 1.4vw, 1.18rem)/1.6 var(--font-body);
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 56ch;
  margin: 0;
}
.q-reveal__body strong { color: var(--fg-1); font-weight: 500; }

.q-form {
  display: flex; flex-direction: column; gap: 16px;
  padding: clamp(20px, 3vh, 28px);
  background: rgba(228,234,248,0.06);
  border: 1px solid var(--dda-cool-white-a30);
  border-radius: 10px;
}
.q-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-field { display: flex; flex-direction: column; gap: 6px; }
.q-field__label {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-1);
}
.q-field__input {
  font: 500 16px/1.4 var(--font-body);
  padding: 14px 16px;
  min-height: 52px;
  background: rgba(0,0,0,0.28);
  border: 1px solid var(--fg-hairline);
  border-radius: 6px;
  color: var(--fg-1);
  outline: none;
  transition: border-color 180ms var(--ease-out-quart), box-shadow 180ms var(--ease-out-quart);
}
.q-field__input:hover { border-color: var(--dda-cool-white-a30); }
.q-field__input:focus { border-color: var(--dda-steel-400); box-shadow: 0 0 0 3px rgba(74,163,217,0.18); }
.q-field__input::placeholder { color: var(--fg-3); }

.q-consent {
  font: 400 12.5px/1.55 var(--font-body);
  color: var(--fg-2);
  margin: 0;
  padding: 6px 0 2px;
}
.q-form__submit { margin-top: 4px; padding: 16px 24px; min-height: 56px; }

/* ============================================================================
   RESULTS PAGE — long-form mirror-back + session pitch
   ============================================================================ */
.q-results {
  display: flex; flex-direction: column;
  gap: clamp(32px, 5vh, 56px);
}

/* Top confirmation banner */
.q-results__banner {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: rgba(20,58,35,0.18);
  border: 1px solid rgba(58,138,138,0.25);
  border-radius: 8px;
  font: 400 13px/1.4 var(--font-body);
  color: var(--fg-2);
}
.q-results__banner-icon {
  flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%; background: var(--dda-teal-700);
  border: 1px solid var(--dda-teal-400);
  color: var(--dda-teal-200);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
}
.q-results__banner strong { color: var(--accent-gold-hover); font-weight: 500; word-break: break-all; }

/* Hero archetype announcement */
.q-results__hero {
  display: flex; flex-direction: column; gap: 14px;
}
.q-results__hero-eyebrow {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-teal);
  display: inline-flex; align-items: center; gap: 12px;
}
.q-results__hero-eyebrow::before {
  content: ''; display: inline-block; width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--accent-teal), transparent);
}
.q-results__hero-name {
  font: 600 clamp(2.2rem, 5.4vw, 4rem)/1.04 var(--font-body);
  letter-spacing: -0.035em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
  max-width: 18ch;
}
.q-results__hero-name em { color: var(--accent-gold-hover); }
.q-results__hero-opener {
  font: 400 clamp(1.15rem, 1.6vw, 1.38rem)/1.55 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
  max-width: 56ch;
}

/* Mirror — based on your answers */
.q-mirror {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(20px, 3vh, 28px);
  background:
    linear-gradient(180deg, rgba(74,163,217,0.12) 0%, rgba(74,163,217,0.04) 60%),
    rgba(6,10,22,0.92);
  border: 1px solid rgba(74,163,217,0.32);
  border-radius: 12px;
}
.q-mirror__intro {
  font: 500 clamp(1.05rem, 1.4vw, 1.2rem)/1.5 var(--font-body);
  color: var(--dda-steel-400);
  margin: 0;
  font-family: var(--font-signage);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.q-mirror__bullets {
  display: flex; flex-direction: column; gap: 14px;
}
.q-mirror__bullet {
  display: flex; gap: 14px; align-items: flex-start;
  font: 400 clamp(1rem, 1.35vw, 1.16rem)/1.6 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.q-mirror__bullet::before {
  content: ''; flex-shrink: 0;
  width: 8px; height: 8px; margin-top: 0.55em;
  border-radius: 50%;
  background: var(--accent-gold);
  box-shadow: 0 0 10px rgba(201,166,83,0.5);
}
.q-mirror__closer {
  font: 500 clamp(1.05rem, 1.4vw, 1.2rem)/1.55 var(--font-body);
  color: var(--accent-gold-hover);
  margin: 0;
}

/* Belief section */
.q-belief {
  display: flex; flex-direction: column; gap: 18px;
}
.q-belief__h {
  font: 600 clamp(1.55rem, 2.8vw, 2.15rem)/1.15 var(--font-body);
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0 0 4px;
}
.q-belief__quote {
  position: relative;
  padding: clamp(36px, 5vh, 52px) clamp(20px, 3vw, 36px) clamp(20px, 3vh, 32px);
  background:
    linear-gradient(180deg, rgba(201,166,83,0.14), rgba(201,166,83,0.04)),
    rgba(6,10,22,0.92);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 12px 12px 0;
  font: 600 clamp(1.2rem, 2.4vw, 1.7rem)/1.35 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--accent-gold-hover);
  text-wrap: balance;
  margin: 0;
}
.q-belief__quote::before {
  content: '\201C';
  position: absolute; top: 6px; left: 14px;
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--accent-gold);
  opacity: 0.55;
}
.q-belief__body {
  display: flex; flex-direction: column; gap: 12px;
}

/* Costs section — bullets with strong-leads */
.q-costs__lead {
  font: 400 clamp(1.02rem, 1.4vw, 1.18rem)/1.55 var(--font-body);
  color: var(--fg-1);
  margin: 0 0 16px;
}
.q-costs__list {
  display: flex; flex-direction: column; gap: 6px;
}
.q-costs__item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 20px;
  background:
    linear-gradient(180deg, rgba(231,76,60,0.12) 0%, rgba(231,76,60,0.03) 100%),
    rgba(6,10,22,0.92);
  border-left: 3px solid var(--accent-red-on-dark);
  border-radius: 0 8px 8px 0;
  font: 400 clamp(1rem, 1.3vw, 1.14rem)/1.6 var(--font-body);
  color: var(--fg-1);
  text-wrap: pretty;
}
.q-costs__item strong { color: var(--dda-red-500); font-weight: 600; }
.q-costs__closer {
  font: 500 clamp(1.02rem, 1.4vw, 1.18rem)/1.55 var(--font-body);
  color: var(--fg-1);
  margin: 18px 0 0;
  text-wrap: pretty;
  padding-left: 14px;
  border-left: 2px solid var(--accent-gold);
}

/* Session pitch — the conversion section */
.q-pitch {
  position: relative;
  padding: clamp(28px, 4vh, 48px) clamp(22px, 4vw, 44px);
  background:
    linear-gradient(180deg, rgba(201,166,83,0.06) 0%, rgba(201,166,83,0.02) 30%, transparent 100%),
    var(--dda-slate-925);
  border: 1px solid rgba(201,166,83,0.25);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: clamp(18px, 2.5vh, 28px);
  box-shadow: 0 18px 48px rgba(0,0,0,0.4), inset 0 1px 0 0 rgba(255,255,255,0.04);
}
.q-pitch__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.q-pitch__eyebrow {
  font-family: var(--font-signage); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-gold);
  display: inline-flex; align-items: center; gap: 10px;
}
.q-pitch__eyebrow::before {
  content: ''; display: inline-block; width: 20px; height: 1px;
  background: var(--accent-gold);
}
.q-pitch__h {
  font: 600 clamp(1.7rem, 3.2vw, 2.4rem)/1.12 var(--font-body);
  letter-spacing: -0.03em;
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}
.q-pitch__sub {
  font: 400 clamp(1rem, 1.35vw, 1.14rem)/1.6 var(--font-body);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
.q-pitch__sub strong { color: var(--accent-gold-hover); font-weight: 500; }

.q-pitch__block { display: flex; flex-direction: column; gap: 14px; }
.q-pitch__block-h {
  font: 600 clamp(1.15rem, 1.9vw, 1.4rem)/1.2 var(--font-body);
  letter-spacing: -0.02em;
  color: var(--dda-steel-400);
  margin: 0;
  display: flex; align-items: center; gap: 12px;
}
.q-pitch__block-h::before {
  content: ''; display: inline-block; width: 18px; height: 2px;
  background: var(--dda-steel-400);
  border-radius: 1px;
}

.q-pitch__cta-row {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 4px;
}
.q-pitch__cta-prompt {
  font: 400 clamp(0.98rem, 1.3vw, 1.1rem)/1.5 var(--font-body);
  color: var(--fg-2);
  margin: 0;
}
.q-pitch__cta {
  padding: 18px 30px;
  min-height: 60px;
  font-size: 14px;
  align-self: flex-start;
}

/* Results sign-off */
.q-results__signoff {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--fg-hairline);
  font: 400 13px/1.5 var(--font-body);
  color: var(--fg-3);
}

/* ============================================================================
   FOOTER
   ============================================================================ */
.q-footer {
  position: relative; z-index: 10;
  flex-shrink: 0;
  padding: 14px clamp(16px, 4vw, 40px);
  border-top: 1px solid var(--fg-hairline);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: rgba(4,6,13,0.55);
}
.q-footer p {
  font: 400 11.5px/1.3 var(--font-body);
  color: var(--fg-3);
  margin: 0;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  .q-header__crumb { font-size: 10px; gap: 8px; }
  .q-header__crumb .dot,
  .q-header__crumb span:not(.current):not(.dot):not(.mobile-only) { display: none; }
  .q-header__crumb .current {
    color: var(--accent-teal);
    padding: 4px 10px;
    border: 1px solid var(--fg-hairline);
    border-radius: 999px;
  }
}

@media (max-width: 560px) {
  .q-header__crumb .current { display: none; }
  .q-header__crumb .mobile-only { display: inline-block; }

  /* Slider anchor labels are too long to sit side-by-side at this width;
     stack them so each gets its own row. */
  .q-commitment__anchors { flex-direction: column; gap: 4px; }
}

/* PHONE — full-viewport card, big tap targets, sticky nav */
@media (max-width: 720px) {
  /* --header-h must match: padding*2 + logo height + 1px border. */
  :root { --header-h: 51px; }
  .q-header { padding: 7px clamp(16px, 4vw, 40px); }

  .q-stage {
    padding: 14px 16px 12px;
    align-items: stretch;
  }
  .q-screen { flex: 1; min-height: 0; }
  .q-card, .q-card--wide, .q-card--narrow { max-width: 100%; }

  /* Question screens — fill the viewport, sticky nav at the bottom */
  .q-question, .q-readiness, .q-reveal, .q-intro {
    flex: 1;
    display: flex; flex-direction: column;
    gap: 18px;
  }

  .q-intro__hero { font-size: clamp(1.85rem, 9vw, 2.6rem); }

  .q-question__head { gap: 10px; }

  /* Step indicator (e.g. "STEP 2 OF 3 · READINESS") sits tiny at the desktop
     size of 11px. Bump it on phone to read at a glance and to give the head
     more vertical weight, which pulls the centred middle content lower. */
  .q-eyebrow,
  .q-question__counter { font-size: 13px; letter-spacing: 0.14em; gap: 10px; }
  .q-question__counter .current { font-size: 14px; }

  .q-pair__lede { display: flex; font-size: 0.95rem; gap: 6px; }
  .q-pair__legend { font-size: 10px; gap: 10px; }
  .q-pair__list { gap: clamp(20px, 3vh, 32px); }
  .q-pair__item { gap: 12px; }
  .q-pair__stem { font-size: 1.05rem; }

  /* Likert: keep the 5-button row but lift touch targets and re-enable labels */
  .q-likert__buttons { gap: 6px; }
  .q-likert__btn { min-height: 72px; padding: 12px 4px; gap: 4px; }
  .q-likert__anchors { font-size: 9.5px; gap: 6px; }

  /* Vertical centering — the card stretches to fill the viewport, but the
     middle content should sit centered between the head and the nav so
     short content doesn't cluster against the top. Auto margins on the
     middle elements absorb leftover space equally above and below. */
  .q-pair__list, .q-tie { margin: auto 0; }
  /* :nth-child positions (not :first/:last-of-type) because all the card's
     immediate children are <div>s — the type pseudo-classes would resolve
     to .q-question__head and .q-nav, not the two readiness blocks. */
  .q-readiness > .q-readiness__block:nth-child(2) { margin-top: auto; }
  .q-readiness > .q-readiness__block:nth-child(3) { margin-bottom: auto; }
  .q-reveal { justify-content: center; }

  /* Bottom nav: sticky to the card bottom, full-width CTA. No auto top
     margin — the middle-content auto margins above already distribute
     the leftover space. */
  .q-nav {
    position: sticky; bottom: 0;
    padding: 12px 0 4px;
    background: linear-gradient(180deg, transparent 0%, var(--bg-0) 30%);
    gap: 10px;
  }
  .q-nav .q-cta, .q-nav__cta { flex: 1; min-height: 56px; padding: 14px 18px; }
  .q-nav__hint { display: none; }

  /* Tiebreaker */
  .q-tie__card { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 80px; }
  .q-tie__key { width: auto; padding-top: 0; font-size: 11px; }
  .q-tie__body { font-size: 1rem; }

  /* Readiness — stacked time bars stay single column on mobile too */
  .q-time-grid { gap: 8px; }
  .q-time-tile { min-height: 52px; padding: 12px 16px; }
  .q-readiness__readout { margin-left: 0; flex-basis: 100%; font-size: 12px; }
  .q-commitment__pip span { font-size: 11px; }
  .q-commitment__thumb { width: 22px; height: 22px; }

  /* Reveal form */
  .q-form__row { grid-template-columns: 1fr; gap: 12px; }
  .q-form { padding: 18px; gap: 14px; }
  .q-reveal__name { font-size: clamp(1.85rem, 8vw, 2.6rem); }

  /* Results — comfortable scroll page on phone */
  .q-results { gap: 28px; }
  .q-results__hero-name { font-size: clamp(1.85rem, 8.5vw, 2.6rem); }
  .q-mirror, .q-pitch { padding: 18px; }
  .q-pitch__cta { width: 100%; padding: 16px 22px; min-height: 56px; }
  .q-belief__quote { padding: 18px 20px; font-size: 1.15rem; }
  .q-belief__quote::before { font-size: 2.4rem; }
  .q-costs__item { padding: 8px 16px; font-size: 0.98rem; }
  .q-results__signoff { font-size: 12.5px; gap: 8px; }

  /* Footer entirely hidden on mobile to give the quiz card the full
     remaining viewport height. Brand sign-off lives in the results screen. */
  .q-footer { display: none; }
}

/* Small mobile — trim padding once more */
@media (max-width: 480px) {
  :root { --header-h: 49px; }
  .q-header { padding: 6px 14px; }
}

/* Very narrow phones (iPhone SE / iPhone 8 class) — drop "3-Minute" from the
   primary CTA copy so "Start the Diagnostic" fits on a single line instead
   of wrapping to two. iPhone Pro Max (414px) and wider keep the full label. */
@media (max-width: 390px) {
  .q-cta__short-hide { display: none; }
}

/* Short mobile (iPhone SE class) — compress every stage so the densest
   content (Pair 3, readiness) fits in the ~667px viewport budget without
   forcing a scroll. Stays above the iOS 44px touch-target minimum. */
@media (max-width: 480px) and (max-height: 720px) {
  /* Card chrome: trim stage padding + card gap so the head/middle/nav
     stack has less framing overhead. */
  .q-stage { padding: 10px 16px 8px; }
  .q-question, .q-readiness, .q-reveal, .q-intro { gap: 14px; }

  /* Question head: smaller eyebrow + lede + legend save ~22px without
     hiding any content. */
  .q-question__head { gap: 6px; }
  .q-eyebrow,
  .q-question__counter { font-size: 12px; letter-spacing: 0.12em; gap: 8px; }
  .q-question__counter .current { font-size: 13px; }
  .q-pair__lede { font-size: 0.88rem; gap: 4px; }
  .q-pair__legend { font-size: 9.5px; gap: 8px; }

  /* Paired-question body: tighter stems + gaps + Likert. Likert stays at
     46px (above the iOS 44px touch-target floor). */
  .q-pair__stem { font-size: 0.92rem; line-height: 1.3; }
  .q-pair__item { gap: 6px; }
  .q-pair__list { gap: 10px; }
  .q-likert__btn { min-height: 46px; padding: 6px 4px; }
  .q-likert__anchors { font-size: 9px; }

  /* Readiness: 2×2 time grid + tighter blocks. */
  .q-time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .q-time-tile { min-height: 44px; padding: 8px 12px; }
  .q-readiness { gap: 12px !important; }
  .q-readiness__block { gap: 8px; }
  .q-readiness__stem { font-size: 0.95rem; }
  .q-readiness__intro { font-size: 0.88rem; }
}

/* Very short — laptop landscape */
@media (max-height: 640px) and (min-width: 720px) {
  .q-stage { padding-top: 24px; padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .q-screen { animation: none; }
  .q-progress__fill, .q-commitment__bar-fill, .q-commitment__thumb { transition: none; }
}

/* ----------------------------------------------------------------------
   Legal footer — fixed bottom-right links (Privacy / Terms / Cookies).
   White, uppercase, sits above the SPA on every screen.
   ---------------------------------------------------------------------- */
.dda-legal-footer {
  position: fixed;
  right: 16px;
  bottom: 12px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 14px;
  pointer-events: none; /* let clicks pass through gaps; re-enabled on links */
}
.dda-legal-footer a {
  pointer-events: auto;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); /* legibility over any bg */
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.dda-legal-footer a:hover,
.dda-legal-footer a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

@media (max-width: 480px) {
  .dda-legal-footer { right: 12px; bottom: 8px; gap: 2px 10px; }
  .dda-legal-footer a { font-size: 10px; }
}