/* ==========================================================================
   get720 — Claude Certification Success Bootcamp
   Tokens follow CLAUDE.md Brand / Design Rules (Study Cards family + warm accents).
   ========================================================================== */

:root {
  /* Actions */
  --blue: #3D54DD;
  --blue-hover: #3246C4;
  --blue-soft: #E8EFFD;
  --teal: #38786B;
  --teal-hover: #2F665B;
  --teal-ink: #2F665B;          /* teal text on --teal-soft (5.8:1) */
  --teal-soft: #E5F3E9;
  --teal-line: #CFE6D6;
  /* Quiz gauge middle zone, between rust and teal */
  --amber: #C98A1E;             /* fill */
  --amber-ink: #8F6000;         /* text: 5.5:1 on white */
  --amber-soft: #FBEFD6;        /* faint track */

  /* Warm accents (Revision Round 1) */
  --peach-wash: #FFF4EC;        /* section / card washes */
  --peach: #FDE9DC;             /* stronger tint for graphics */
  --peach-line: #F5D2BC;
  --copper: #CD7D5E;            /* decorative strokes only: 2.9:1 on peach, never body text */
  --copper-ink: #A9532E;        /* copper text: 4.9:1 on --peach-wash, 5.3:1 on white */
  --burnt-start: #A84A22;       /* stats band gradient; white text 5.7:1 */
  --burnt-end: #BF5629;         /* white text 4.6:1 (spec's #D9693A failed at 3.5:1) */

  /* Neutrals */
  --navy: #121E45;
  --navy-text: #C5CBE0;
  --ink: #0C111E;
  --body: #21283B;
  --muted: #616A79;
  --line: #E4E7EF;
  --surface-alt: #F6F8FC;
  --panel: #F2F3F6;
  --bg: #FFFFFF;

  --font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-hand: "Caveat", cursive;

  --radius: 12px;
  --radius-btn: 8px;
  --shadow: 0 1px 2px rgba(12, 17, 30, .04), 0 8px 24px rgba(12, 17, 30, .06);
  --shadow-lift: 0 2px 4px rgba(12, 17, 30, .06), 0 18px 40px rgba(12, 17, 30, .12);
  --gutter: 16px;
  --header-h: 64px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}
main > section { overflow-x: clip; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
h3, .h3 { font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1.3; }

p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); }
ul, ol { margin: 0; padding: 0; list-style: none; }
blockquote { margin: 0; }
figure { margin: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.sprite { display: none; }
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: var(--radius-btn);
}
.skip-link:focus { top: 12px; color: #fff; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-narrow { max-width: 820px; }

.section { padding: 72px 0; }
.section-alt { background: var(--surface-alt); }
.section-head { max-width: 680px; margin-bottom: 36px; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-sub { color: var(--muted); font-size: 1.05rem; }
@media (min-width: 1040px) { .section { padding: 96px 0; } }

/* Scroll-in reveal (main.js only hides elements that start below the fold) */
[data-reveal].reveal-ready { transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].reveal-pending { opacity: 0; transform: translateY(28px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px;
  border: 0; border-radius: var(--radius-btn);
  font: 500 1rem/1.2 var(--font-body);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-hover); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-pill {
  background: #fff; color: var(--teal-ink);
  font-size: .8rem; font-weight: 600; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; margin-left: 4px;
}

.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--blue);
  text-decoration: underline; text-underline-offset: 3px;
}
.link-btn:hover { color: var(--blue-hover); }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .78rem; font-weight: 600; line-height: 1;
  padding: 6px 10px; border-radius: 999px; white-space: nowrap;
}
.pill .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.pill-soft { background: var(--blue-soft); color: var(--blue); }
.pill-pass { background: var(--teal-soft); color: var(--teal-ink); }

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}

/* ---------- Faces (shared by proof row, join card, call tiles) ---------- */
.face {
  --s: 36px;
  width: var(--s); height: var(--s); flex: none;
  border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line);
  background-color: #eee;
}
/* Founder face crops from the 1200×900 group photo, scaled relative to --s */
.face-anita, .face-alice, .face-hsin {
  background-image: url("assets/founders.webp");
  background-repeat: no-repeat;
  background-size: calc(var(--s) * 6) calc(var(--s) * 4.5);
}
.face-alice { background-position: calc(var(--s) * -2.125) calc(var(--s) * -.825); }
.face-hsin { background-position: calc(var(--s) * -3.275) calc(var(--s) * -.825); }
.face-anita { background-position: calc(var(--s) * -4.4) calc(var(--s) * -.8); }
.face-row { display: flex; }
.face-row .face + .face { margin-left: -8px; }
.face-row-lg .face { --s: 44px; }
.face-row-lg .face + .face { margin-left: -12px; }

/* ==========================================================================
   1. Header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 16px;
  min-height: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; min-width: 0; margin-right: auto;
}
.brand-tile {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue);
  font: 800 .72rem/1 var(--font-head); letter-spacing: .02em;
}
.brand-name { color: var(--ink); font-weight: 600; font-size: .82rem; line-height: 1.25; }
.site-nav { display: none; }
.btn-header { min-height: 44px; padding: 0 14px; font-size: .88rem; flex: none; }
.btn-header-extra { display: none; }

@media (min-width: 640px) {
  .brand-name { font-size: .95rem; }
  .btn-header-extra { display: inline; }
}
@media (min-width: 1040px) {
  .site-nav { display: flex; gap: 26px; }
  .site-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; }
  .site-nav a:hover { color: var(--ink); }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero {
  padding: 32px 0 56px;
  background:
    radial-gradient(55% 60% at 88% 28%, rgba(253, 233, 220, .95), rgba(253, 233, 220, 0) 70%),
    linear-gradient(180deg, var(--peach-wash) 0%, #fff 96%);
}
.hero-grid { display: grid; gap: 40px; }
.hero h1 { font-size: clamp(2rem, 1.55rem + 1.9vw, 3.15rem); }

/* Differentiator emphasis: "without a technical background" (hero h1 + founders h2).
   Swoosh is a background so it follows each line when the phrase wraps; it "draws" by widening once on load. */
.em-phrase {
  color: var(--copper-ink);   /* 4.5:1 on the darkest hero peach, 5.3:1 on white */
  font-style: italic;
  padding-bottom: .14em;
  background: url("assets/swoosh.svg") no-repeat left bottom / 100% .3em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: swoosh-draw .8s cubic-bezier(.3, .6, .3, 1) .25s both;
}
/* Desktop-only line break: the phrase starts its own line from 1040px up */
.br-desktop { display: none; }
@media (min-width: 1040px) { .br-desktop { display: inline; } }
@keyframes swoosh-draw {
  from { background-size: 0% .3em; }
  to { background-size: 100% .3em; }
}
.hero-sub { font-size: 18px; color: var(--body); max-width: 50ch; margin-bottom: 18px; }

/* Waitlist forms (shared) */
.waitlist-form { max-width: 580px; }
.form-row { display: grid; gap: 10px; }
.waitlist-form input[type="text"],
.waitlist-form input[type="email"] {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-btn);
  background: #fff; color: var(--ink);
  font: 400 1rem var(--font-body);
}
.waitlist-form input::placeholder { color: var(--muted); }
.waitlist-form input:focus-visible { outline-offset: 0; border-color: var(--blue); }
.form-note { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.form-status {
  margin: 10px 0 0; padding: 10px 14px; border-radius: var(--radius-btn);
  background: var(--teal-soft); border: 1px solid var(--teal-line);
  color: var(--teal-ink); font-weight: 600; font-size: .95rem;
}
.form-status:empty { display: none; }
/* Error keeps the warm palette: --copper-ink on --peach-wash is 4.9:1 */
.form-status.is-error { background: var(--peach-wash); border-color: var(--peach-line); color: var(--copper-ink); }
.form-success:focus { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 640px) {
  .waitlist-form:not(.waitlist-form-stacked) .form-row { grid-template-columns: 1fr 1.3fr auto; }
}

.checklist { display: grid; gap: 8px; margin: 26px 0 24px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .icon { color: var(--blue); margin-top: 3px; }
.checklist-teal .icon { color: var(--teal); }
.hero .checklist { margin: 0 0 20px; }
.hero .checklist li { text-wrap: pretty; }
.hero .waitlist-form { margin-bottom: 22px; }

/* Status pill above the h1: white with blue text + border (6.3:1), live dot pulses */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 5px 13px 5px 11px;
  background: #fff; border: 1px solid var(--blue); border-radius: 999px;
  color: var(--blue); font: 700 .85rem/1.25 var(--font-body); letter-spacing: .01em;
}
.status-dot {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); flex: none;
}
.status-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--blue); animation: status-ping 2s ease-out infinite;
}
@keyframes status-ping {
  from { transform: scale(1); opacity: .7; }
  to { transform: scale(2.6); opacity: 0; }
}

/* Hero signup card: one row (narrow name, wide email, button), helper line underneath */
.signup-card {
  max-width: 600px; margin-bottom: 20px; padding: 12px;
  background: #fff; border: 1px solid var(--peach-line); border-radius: 20px;
  box-shadow: var(--shadow);
}
.signup-card .waitlist-form { margin-bottom: 0; max-width: none; }
.signup-card .btn { font-weight: 700; }
.signup-card .form-note { font-size: .85rem; margin: 8px 2px 0; }
@media (min-width: 640px) {
  .signup-card .waitlist-form .form-row { grid-template-columns: .8fr 1.4fr auto; }
}
/* The card's padding costs height; tighten around it so the form stays above the fold at 1280×720 */
.hero h1 { margin-bottom: .3em; }
.hero .hero-sub { margin-bottom: 10px; }
.hero .checklist { gap: 4px; margin-bottom: 12px; }

/* Proof row: 12 faces */
.proof-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.proof-row p { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.35; text-wrap: balance; }
/* 12 faces need ~344px; under 360px show 9 so the row fits the 288px column */
@media (max-width: 359px) { .hero .face-row .face:nth-child(n+10) { display: none; } }

/* Hero visual: founders cutout at the bottom of a white card, badge on the top-left corner,
   stat box on the left edge. Phones keep both overlaps inside the 16px gutter. */
.hero-visual { position: relative; max-width: 500px; width: 100%; margin: 0 auto; padding-top: 36px; }
/* Phones: extra headroom so the larger badge clears Alice's hair (screen edge blocks moving it left) */
.hero-photo-card {
  position: relative; padding-top: 72px;
  background: #fff; border: 1px solid var(--peach-line); border-radius: 28px;
  box-shadow: var(--shadow-lift);
}
/* An open bio rises above the badge and the stat box */
.hero-photo-card:has(.founder:hover, .founder:focus-within, .founder.is-open) .founders-photo { z-index: 4; }
/* 30% larger than the original 22% / 108px; lifted so it clears Alice's hair */
.hero-badge {
  position: absolute; z-index: 3; left: -8px; top: -60px;
  width: 28.6%; max-width: 140px; height: auto;
  transform: rotate(-10deg);
  filter: drop-shadow(0 8px 14px rgba(12, 17, 30, .2));
}
/* Rests over Alice's shoulder, below her chin, with clear space above her name pill */
.hero-stat {
  position: absolute; z-index: 3; left: -10px; top: 60%;
  transform: translateY(-50%);
  max-width: 150px; margin: 0; padding: 10px 12px;
  background: var(--peach); border: 1px solid var(--peach-line); border-radius: 16px;
  box-shadow: var(--shadow-lift);
  font-size: .8rem; font-weight: 500; line-height: 1.3; color: var(--body);
}
.hero-stat strong {
  display: block; margin-bottom: 2px;
  font: 800 1.6rem/1 var(--font-head); letter-spacing: -0.03em;
  color: var(--copper-ink);   /* 4.6:1 on --peach */
}
/* Small phones: the card is only ~290px tall, so a compact box keeps clear of Alice's pill */
@media (max-width: 359px) {
  .hero-stat { top: 52%; max-width: 128px; padding: 8px 10px; font-size: .72rem; }
  .hero-stat strong { font-size: 1.3rem; }
}
.score-card-back {
  position: absolute; inset: 16px -10px -16px 10px;
  background: var(--peach); border: 1px solid var(--peach-line);
  border-radius: 18px; transform: rotate(4deg);
}
.score-card {
  position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow-lift);
  padding: 20px 20px 22px;
  transform: rotate(-2.5deg);
}
.score-head { padding-top: 4px; }
/* Phones/tablets: the title wraps short of the corner badge */
@media (max-width: 1039px) { .score-title { padding-right: 84px; } }
.score-title {
  font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0; line-height: 1.35;
}
/* Pass sits right beside the score, leaving the top-right corner to the badge: 720 → Pass → badge */
.score-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.score-number { font: 800 1.15rem var(--font-head); color: var(--muted); margin: 0; letter-spacing: -0.02em; }
.score-number span { font-size: 3.4rem; color: var(--ink); letter-spacing: -0.04em; }
.score-bar {
  position: relative; height: 10px; margin: 14px 0 8px;
  background: var(--line); border-radius: 999px;
}
/* (720 - 100) / (1000 - 100) ≈ 68.9% */
.score-fill { position: absolute; inset: 0 auto 0 0; width: 68.9%; background: var(--blue); border-radius: 999px; }
.score-passline { position: absolute; left: 68.9%; top: -5px; bottom: -5px; width: 2px; background: var(--ink); }
.score-scale { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); }
.score-scale span:nth-child(2) { margin-left: 30%; }
.score-quote {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .95rem; line-height: 1.55; color: var(--body);
}
/* Hand lettering + copper swoosh (quiz callout) */
.cheer-text {
  margin: 0; text-align: center;
  font: 700 2.5rem/.8 var(--font-hand);
  color: var(--copper-ink); letter-spacing: .01em;
}
.swoosh { width: 140px; height: 20px; margin-top: 4px; fill: none; stroke: var(--copper); stroke-width: 4; stroke-linecap: round; }
.swoosh path + path { stroke-width: 3; opacity: .7; }

.badge-disclosure { display: block; font-size: .78rem; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }


@media (min-width: 1040px) {
  .hero { padding: 12px 0 56px; }
  .hero-copy { align-self: start; padding-top: 4px; }
  /* Centered so the shorter copy column and the photo card balance each other */
  .hero-grid { grid-template-columns: 1.22fr 1fr; align-items: center; gap: 56px; }
  .hero-visual { margin: 0; max-width: none; padding-top: 0; }
  .hero-photo-card { padding-top: 56px; }
  .hero-badge { left: -44px; top: -64px; }
  .hero-stat { top: calc(50% + 56px); left: -40px; max-width: 176px; padding: 12px 14px; font-size: .85rem; }
  .hero-stat strong { font-size: 1.9rem; }
}

/* ==========================================================================
   3. Stats band
   ========================================================================== */
.stats {
  background: linear-gradient(115deg, var(--burnt-start) 0%, var(--burnt-end) 100%);
  color: #fff; padding: 52px 0;
}
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stat-icon { width: 30px; height: 30px; stroke-width: 1.6; margin-bottom: 10px; color: #fff; }
.stat-number { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.3rem)/1 var(--font-head); color: #fff; letter-spacing: -0.03em; margin: 0 0 8px; }
.stat-label { margin: 0; font-size: .95rem; line-height: 1.45; color: #fff; max-width: 24ch; }
@media (min-width: 860px) { .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

/* ==========================================================================
   4. Testimonials: mixed-size card wall
   ========================================================================== */
.t-panel { background: var(--panel); border-radius: 28px; padding: 40px 16px 24px; }
.t-wall { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .t-panel { padding: 48px 32px 40px; }
  .t-wall { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .t-feature { grid-column: span 2; grid-row: span 2; }
  .t-wide { grid-column: span 2; }
  .t-tall { grid-row: span 2; }
}
@media (min-width: 1040px) {
  .t-panel { padding: 56px 48px 48px; }
  .t-wall { grid-template-columns: repeat(4, 1fr); }
}

.t-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: #fff; border-radius: 18px; padding: 24px;
  box-shadow: var(--shadow);
}
.t-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.t-body { position: relative; }
.t-mark {
  position: absolute; top: -26px; left: -6px;
  font: 800 4.5rem/1 var(--font-head); color: var(--copper); opacity: .3;
  pointer-events: none;
}
.t-headline { position: relative; font: 800 1.2rem/1.25 var(--font-head); color: var(--ink); letter-spacing: -0.02em; margin: 0 0 8px; }
.t-quote { color: var(--body); font-size: .98rem; line-height: 1.55; }
.t-sign { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; }
.t-name { font: 700 1.75rem/1 var(--font-hand); color: var(--copper-ink); }

/* Feature (largest) */
.t-feature { padding: 36px 32px 30px; background: linear-gradient(160deg, #fff 30%, var(--peach-wash)); }
.t-feature .t-photo { width: 104px; height: 104px; border: 4px solid #fff; box-shadow: var(--shadow-lift); }
.t-feature .t-mark { font-size: 10rem; top: -150px; left: auto; right: -6px; opacity: .22; }
.t-feature .t-headline { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.12; margin-bottom: 14px; }
.t-feature .t-quote { font-size: 1.1rem; }
.t-feature .t-name { font-size: 2.2rem; }

/* Pop: photo circle pops over the top edge */
.t-pop { margin-top: 36px; padding-top: 50px; }
.t-pop .t-photo { position: absolute; top: -34px; left: 24px; width: 70px; height: 70px; border: 4px solid #fff; box-shadow: var(--shadow-lift); }
.t-pop .t-mark { top: -20px; left: auto; right: 0; }

/* Tall portrait */
.t-tall { padding: 0; gap: 0; overflow: hidden; }
.t-tall .t-photo { width: 100%; height: 220px; border-radius: 0; object-position: center 20%; }
@media (min-width: 640px) { .t-tall .t-photo { height: 280px; } }
.t-tall .t-body { padding: 22px 24px 0; }
.t-tall .t-mark { top: -6px; left: 16px; }
.t-tall .t-sign { padding: 14px 24px 24px; }

/* Wide: photo on one side */
.t-wide {
  display: grid; gap: 4px 22px;
  grid-template-columns: minmax(90px, 32%) 1fr;
  grid-template-areas: "photo body" "photo sign";
}
.t-wide .t-photo { grid-area: photo; width: 100%; height: 100%; min-height: 180px; border-radius: 14px; object-position: center 20%; }
.t-wide .t-body { grid-area: body; }
.t-wide .t-sign { grid-area: sign; }

/* Bold small card, photo in the footer */
.t-bold {
  display: grid; gap: 14px 10px; align-items: center;
  grid-template-columns: auto 1fr; grid-template-areas: "body body" "photo sign";
  background: linear-gradient(135deg, var(--burnt-start), var(--burnt-end));
}
.t-bold .t-body { grid-area: body; }
.t-bold .t-photo { grid-area: photo; width: 46px; height: 46px; border: 2px solid #fff; }
.t-bold .t-sign { grid-area: sign; margin: 0; }
.t-bold .t-mark { color: #fff; opacity: .28; }
.t-bold .t-headline { color: #fff; font-size: 2rem; line-height: 1.05; margin: 10px 0 0; }
.t-bold .t-name { color: #fff; }

/* Speech bubble with tail */
.t-bubble {
  display: grid; gap: 18px 12px; align-items: center;
  grid-template-columns: auto 1fr; grid-template-areas: "body body" "photo sign";
  background: none; box-shadow: none; padding: 0;
}
.t-bubble .t-body { grid-area: body; background: #fff; border-radius: 20px; padding: 26px 22px 22px; box-shadow: var(--shadow); }
.t-bubble .t-body::after {
  content: ""; position: absolute; left: 30px; bottom: -14px;
  border-style: solid; border-width: 14px 16px 0 0;
  border-color: #fff transparent transparent transparent;
}
.t-bubble .t-mark { top: -12px; left: 12px; }
.t-bubble .t-photo { grid-area: photo; width: 52px; height: 52px; margin-left: 16px; }
.t-bubble .t-sign { grid-area: sign; margin: 0; }

/* Join them */
.t-join {
  align-items: center; justify-content: center; text-align: center; gap: 16px;
  background: var(--peach-wash); border: 2px dashed var(--peach-line); box-shadow: none;
}
.t-join-line { font: 800 1.3rem/1.25 var(--font-head); color: var(--ink); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }

/* ==========================================================================
   5. Waitlist + Quiz band
   ========================================================================== */
.cta-grid { display: grid; gap: 20px; }
.cta-card { display: flex; flex-direction: column; }
.cta-card .h3 { font-size: 1.45rem; }
.waitlist-card { background: var(--peach-wash); border-color: var(--peach-line); justify-content: space-between; gap: 18px; }
.waitlist-card .h3 { margin: 0; }
.proof-row-card p { font-size: .95rem; }
.proof-row-card .face { box-shadow: 0 0 0 1px var(--peach-line); border-color: var(--peach-wash); }
/* 12 faces must fit inside card padding on phones */
.proof-row-card .face { --s: 28px; }
@media (min-width: 1040px) { .proof-row-card .face { --s: 34px; } }
.quiz-card { background: var(--teal-soft); border-color: var(--teal-line); }

/* Quiz column: the card fills it (cards stay equal height); the callout hangs above its top edge.
   Phones need room between the stacked cards; desktop uses the section's top padding. */
.quiz-col { position: relative; display: flex; flex-direction: column; margin-top: 74px; }
.quiz-col .quiz-card { flex: 1; }
/* "How ready are you?": hand lettering, tilt and copper swoosh */
.quiz-callout {
  position: absolute; left: 18px; bottom: calc(100% + 5px);
  display: flex; align-items: flex-start; gap: 2px;
  /* Pivot at the arrow tip so the tilt never lifts the point off the card edge */
  transform: rotate(-4deg); transform-origin: right bottom;
  pointer-events: none;
}
.callout-words { display: grid; justify-items: start; }
.cheer-text.callout-text { font-size: 2.1rem; line-height: 1; white-space: nowrap; }
.quiz-callout .swoosh { width: 185px; height: 22px; margin: 0 0 0 12px; stroke-width: 3.5; }
.quiz-callout .swoosh path + path { stroke-width: 2.8; }
/* Arrow runs from the end of the words down to the card's top edge */
.callout-arrow {
  width: 64px; height: 56px; align-self: flex-end; flex: none;
  fill: none; stroke: var(--copper); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
}
.quiz-card .checklist { margin: 4px 0 24px; }
.quiz-card .btn { align-self: flex-start; flex-wrap: wrap; margin-top: auto; }
.waitlist-form-stacked { max-width: none; }

@media (min-width: 860px) {
  .cta-grid { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
  .cta-card { padding: 36px; }
  .quiz-col { margin-top: 0; }
  .quiz-callout { left: 32px; bottom: calc(100% - 3px); }
  .cheer-text.callout-text { font-size: 2.3rem; }
  .quiz-callout .swoosh { width: 210px; height: 25px; }
  .callout-arrow { width: 76px; height: 66px; }
}

/* ==========================================================================
   6. How It Works: the road
   ========================================================================== */
.road-wrap { position: relative; max-width: 1040px; margin: 0 auto; }
.road {
  position: absolute; top: 22px; bottom: -56px; left: 20px; width: 4px;
  background: repeating-linear-gradient(to bottom, var(--peach-line) 0 14px, transparent 14px 26px);
}
.road-fill {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, var(--copper) 0 14px, transparent 14px 26px);
  /* --road-progress is set by main.js on scroll; defaults to fully drawn without JS */
  clip-path: inset(0 0 calc((1 - var(--road-progress, 1)) * 100%) 0);
}
.steps { position: relative; display: grid; gap: 48px; }
.step {
  display: grid; column-gap: 16px; row-gap: 16px;
  grid-template-columns: 44px 1fr;
  grid-template-areas: "num text" ". art";
}
.step-num {
  grid-area: num; position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 3px solid var(--copper);
  font: 800 1.1rem var(--font-head); color: var(--copper-ink);
  box-shadow: 0 0 0 6px var(--surface-alt);
}
.step-text { grid-area: text; }
.step-text h3 { font-size: 1.3rem; margin: 8px 0 4px; }
.step-text h3 a { color: var(--ink); text-decoration-color: var(--blue); }
.step-text h3 a:hover { color: var(--blue); }
.step-text p { margin: 0; color: var(--muted); }
.step-text p a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.step-text p a:hover { color: var(--blue-hover); }
.step-text .step-note { margin-top: 8px; font-size: .82rem; line-height: 1.5; }
.step-art { grid-area: art; border-radius: 18px; padding: 20px; min-width: 0; }
.tint-teal { background: var(--teal-soft); }
.tint-peach { background: var(--peach); }
.tint-blue { background: var(--blue-soft); }

@media (min-width: 900px) {
  .road { left: 50%; transform: translateX(-50%); bottom: -64px; }
  .steps { gap: 64px; }
  .step {
    grid-template-columns: 1fr 64px 1fr; column-gap: 40px; align-items: center;
    grid-template-areas: "text num art";
  }
  .step:nth-child(even) { grid-template-areas: "art num text"; }
  .step:nth-child(odd) .step-text { text-align: right; }
  .step-num { width: 60px; height: 60px; font-size: 1.35rem; justify-self: center; }
  .step-art { padding: 24px; }
}

/* Step graphics */
.art-checklist { display: grid; gap: 8px; }
.art-checklist li {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 10px; padding: 10px 12px;
  font-weight: 500; color: var(--ink); font-size: .95rem;
}
.art-checklist .done { color: var(--muted); }
.art-checklist .done .icon { color: var(--teal); stroke-width: 2.6; }
.art-checklist .box { width: 18px; height: 18px; flex: none; border: 2px solid var(--line); border-radius: 5px; margin: 0 1px; }
.art-checklist .current { box-shadow: 0 0 0 2px var(--copper); }
.art-checklist .here {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  background: var(--copper-ink); color: #fff; border-radius: 999px;
  font-size: .74rem; font-weight: 600; padding: 4px 9px 4px 6px; white-space: nowrap;
}
.art-checklist .here .icon { width: 14px; height: 14px; }

.browser { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #F3F4F6; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; flex: none; }
.browser-bar i:nth-child(2) { background: #FEBC2E; }
.browser-bar i:nth-child(3) { background: #28C840; }
.browser-bar span {
  margin-left: 8px; min-width: 0; flex: 1;
  background: #fff; border-radius: 6px; padding: 2px 10px;
  font-size: .72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser img { width: 100%; }

.art-jargon { display: grid; gap: 10px; justify-items: start; }
.jargon-term {
  font: 600 .95rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  background: #fff; border: 1.5px dashed var(--teal); border-radius: 10px; padding: 9px 14px;
}
.jargon-arrow { color: var(--teal); transform: rotate(90deg); margin-left: 18px; }
.jargon-plain {
  font: 700 1.2rem/1.3 var(--font-head); color: var(--ink); letter-spacing: -0.01em;
  background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow);
}

.art-question { display: grid; gap: 8px; background: #fff; border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.q-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-ink); }
.skel { display: block; height: 10px; border-radius: 6px; background: #E9EBF1; }
.w90 { width: 90%; } .w70 { width: 70%; } .w60 { width: 60%; } .w50 { width: 50%; } .w40 { width: 40%; }
.q-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; }
.q-opt .skel { flex: 0 1 auto; }
.q-opt b {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-alt); font-size: .72rem; color: var(--muted);
}
.q-correct { border-color: var(--teal); background: #F4FAF6; }
.q-correct b { background: var(--teal); color: #fff; }
.q-correct .pill { margin-left: auto; }

.live-badge {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px;
  background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px;
  font-size: .8rem; font-weight: 600; box-shadow: var(--shadow);
}
.live-badge i { width: 8px; height: 8px; border-radius: 50%; background: #D93A3A; }
.call-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--navy); }
.tile .face { --s: 56px; border-color: rgba(255, 255, 255, .85); box-shadow: none; }
.tile-you { background: #fff; border: 2px dashed var(--blue); color: var(--blue); font: 700 1rem var(--font-head); }

.art-calendar { background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font: 700 1rem var(--font-head); color: var(--ink); }
.cal-dots { display: flex; gap: 4px; }
.cal-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: .82rem; }
.cal-grid span { color: var(--muted); font-weight: 600; font-size: .72rem; padding-bottom: 4px; }
.cal-grid b { font-weight: 500; color: var(--body); padding: 5px 0; }
.cal-grid .exam-day { position: relative; color: var(--copper-ink); font-weight: 800; }
.cal-grid .exam-day::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 30px;
  border: 2.5px solid var(--copper); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

/* Finish line */
.finish {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: 420px; margin: 72px auto 0; padding: 28px 24px;
  background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lift);
}
.finish-badge { width: 132px; height: 132px; margin-top: -84px; transform: rotate(-8deg); filter: drop-shadow(0 10px 18px rgba(12, 17, 30, .2)); }
.finish-score { font: 800 2.4rem/1 var(--font-head); color: var(--ink); letter-spacing: -0.03em; margin: 10px 0 0; }
.finish-score span { color: var(--copper-ink); }
.finish .badge-disclosure { margin-bottom: 18px; }

/* "Pass or come back free": a wide banner hanging under the finish line, stamped with a teal seal.
   Seal teal = --teal-ink (#2F665B): the Pass pill's green, 6.6:1 on white. */
.safety-net { display: flex; flex-direction: column; align-items: center; }
.net-link {
  width: 4px; height: 40px;
  background: repeating-linear-gradient(to bottom, var(--copper) 0 14px, transparent 14px 26px);
}
.net-card {
  position: relative; width: 100%;
  display: grid; justify-items: center; text-align: center;
  margin-top: 46px; padding: 0 18px 20px;
  background: var(--peach); border: 1px solid var(--copper); border-radius: 16px;
  box-shadow: var(--shadow);
}
/* Phones: seal centered on top, half over the card's top edge */
.net-seal {
  width: 110px; height: 110px; margin: -48px 0 8px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 6px 10px rgba(12, 17, 30, .18));
}
.seal-fill { fill: var(--teal-ink); }
.seal-line { fill: none; stroke: var(--teal-ink); stroke-linecap: round; }
.seal-text text { fill: var(--teal-ink); font-family: var(--font-head); font-weight: 800; text-anchor: middle; }
.net-title { font-size: 1.1rem; margin: 0 0 4px; }
.net-body { margin: 0 0 8px; font-size: .95rem; color: var(--body); }
.net-fine { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--muted); }

/* Wider screens: seal on the left, stamped over the card's left and top edges; text to its right */
@media (min-width: 640px) {
  .net-card {
    width: auto; max-width: 100%;
    justify-items: start; text-align: left;
    margin-top: 0; padding: 24px 28px 24px 150px; min-height: 132px; align-content: center;
  }
  .net-seal {
    position: absolute; left: -26px; top: calc(50% - 86px);
    width: 150px; height: 150px; margin: 0;
  }
}
/* Desktop: one line per text block; the card sizes itself to the fine print */
@media (min-width: 900px) {
  .net-text > * { white-space: nowrap; }
}

/* ==========================================================================
   7. Founders
   ========================================================================== */
.founders { background: #fff; }
.founders-grid { display: grid; gap: 48px; }
.founders-copy h2 { max-width: 18ch; }
.founders-subhead { font-size: 1.35rem; margin: 28px 0 8px; }
.founders-lead { font-weight: 700; color: var(--ink); margin-bottom: .5em; }
.founders-signup { margin: 28px 0 0; background: var(--peach); border-color: var(--copper); }
/* Narrower column than the hero: give First name enough room for its placeholder */
@media (min-width: 640px) {
  .founders-signup .waitlist-form .form-row { grid-template-columns: 1fr 1.2fr auto; }
}
/* Score report card sits in the right column, where the photo used to be */
.founders-score { width: 100%; max-width: 520px; margin: 0 auto; }
.founders .score-layer { position: relative; }
/* Badge overlaps the card's top-right corner, tilted like the hero badge (1.5× the Oct 4 size).
   Phones keep the overhang inside the 16px gutter; the title wraps short of it */
.score-badge {
  position: absolute; z-index: 2; right: -2px; top: -44px;
  width: 78px; height: auto;
  transform: rotate(10deg);
  filter: drop-shadow(0 6px 10px rgba(12, 17, 30, .2));
}

/* Founders cutout (lives in the hero), cropped tight to the three of them */
.founders-photo { position: relative; z-index: 1; aspect-ratio: 1000 / 850; width: 100%; }
/* The cutout ends in a straight cut at the hips: fade the bottom into the white card */
.founders-img {
  display: block; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 100%);
}

/* One hover column per person (Alice 2–30%, Hsin-Chih 30–66%, Anita 66–100%) */
.founder {
  position: absolute; top: 4%; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding-bottom: 34px;
}
.founder-alice { left: 2%; width: 28%; }
.founder-hsin { left: 30%; width: 36%; }
.founder-anita { left: 66%; width: 34%; }

.founder-label {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow);
  font: 600 .9rem var(--font-body); padding: 8px 14px 8px 10px; min-height: 40px;
  cursor: pointer; white-space: nowrap;
}
.founder-label .icon { width: 16px; height: 16px; stroke-width: 2.6; color: var(--copper-ink); }
.founder-label:hover, .founder-label[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }

/* Attention cue: a gentle ~6px float for ~6s after load, slightly out of sync per pill, then settles */
.founder-alice { --float-delay: 0s; --float-dur: 2s; }
.founder-hsin { --float-delay: .4s; --float-dur: 2.2s; }
.founder-anita { --float-delay: .2s; --float-dur: 1.85s; }
.is-inview .founder-label { animation: pill-float var(--float-dur) ease-in-out var(--float-delay) 3 both; }
/* Hold still while someone is reading the bio */
.founder:hover .founder-label,
.founder:focus-within .founder-label,
.founder.is-open .founder-label { animation: none; }
@keyframes pill-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.bio-card {
  position: absolute; bottom: 64px; left: 50%;
  width: min(300px, 80vw);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 16px 18px; font-size: .92rem; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 5;
}
.bio-card p { margin: 0; }
.bio-card .bio-name { font: 700 1rem var(--font-head); color: var(--ink); margin-bottom: 6px; }
/* Edge cards anchor to their column's outer edge so they never overflow the viewport */
.founder-alice .bio-card { left: 0; transform: translate(0, 6px); }
.founder-anita .bio-card { left: auto; right: 0; transform: translate(0, 6px); }

.founder:hover .bio-card,
.founder:focus-within .bio-card,
.founder.is-open .bio-card { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.founder-alice:hover .bio-card,
.founder-alice:focus-within .bio-card,
.founder-alice.is-open .bio-card,
.founder-anita:hover .bio-card,
.founder-anita:focus-within .bio-card,
.founder-anita.is-open .bio-card { transform: translate(0, 0); }
.founder:hover, .founder:focus-within, .founder.is-open { z-index: 6; }

@media (min-width: 1040px) {
  /* 60/40: the copy runs wide so the column stays short; the score card is the accent */
  .founders-grid { grid-template-columns: 3fr 2fr; align-items: center; gap: 64px; }
  .founders .score-card { padding: 22px 26px 24px; }
  .founders-copy h2 { max-width: none; }
  .founders-signup { max-width: none; }
  /* zoom (not transform) so the 80% card also gives its width back to the grid; tilt and caption unchanged */
  .founders .score-layer { zoom: .8; }
  /* 117px inside the 80% zoom = ~94px on screen */
  .score-badge { width: 117px; right: -44px; top: -66px; }
}

/* ==========================================================================
   8. FAQ
   ========================================================================== */
.faq-title { text-align: center; margin-bottom: 32px; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 20px; cursor: pointer; list-style: none;
  font: 700 1.05rem/1.35 var(--font-head); color: var(--ink); letter-spacing: -0.01em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg) translateY(-3px); transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq-list summary:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.faq-list details p { padding: 0 20px 20px; margin: 0; }

/* ==========================================================================
   9. Closing CTA
   ========================================================================== */
.closing { padding: 88px 0; background: linear-gradient(180deg, #fff, var(--peach-wash)); }
.closing-inner { text-align: center; }
.closing-inner h2 { max-width: 20ch; margin-inline: auto; }
.closing-launch { font-weight: 600; color: var(--copper-ink); margin-bottom: 4px; }
.closing .section-sub { margin-bottom: 28px; }
.closing .waitlist-form { margin: 0 auto; text-align: left; }

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer { background: var(--navy); color: var(--navy-text); padding: 48px 0 56px; font-size: .88rem; line-height: 1.6; }
.footer-disclosure { max-width: 900px; }
.footer-disclosure p { margin-bottom: .8em; }
.footer-disclosure strong { font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.site-footer a, .site-footer .link-btn { color: #fff; }
.site-footer a:hover, .site-footer .link-btn:hover { color: var(--navy-text); }
.site-footer :focus-visible { outline-color: #fff; }

/* ==========================================================================
   Dialogs (privacy, terms, quiz)
   ========================================================================== */
.modal {
  width: min(640px, calc(100vw - 2 * var(--gutter)));
  max-height: min(84vh, 780px);
  padding: 0; border: 0; border-radius: 16px;
  box-shadow: var(--shadow-lift); color: var(--body);
}
.modal::backdrop { background: rgba(12, 17, 30, .55); }
.modal-body { position: relative; padding: 32px 24px 28px; }
.modal-body h2 { font-size: 1.6rem; padding-right: 72px; }
.modal-body h3 { font-size: 1.02rem; margin: 22px 0 6px; }
.modal-body p { font-size: .95rem; }
.modal-updated { color: var(--muted); font-size: .85rem !important; }
.modal-close {
  position: absolute; top: 20px; right: 20px;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-btn);
  padding: 8px 12px; font: 500 .88rem var(--font-body); color: var(--ink); cursor: pointer;
}
.modal-close:hover { border-color: var(--ink); }
@media (min-width: 640px) { .modal-body { padding: 40px 40px 32px; } }

/* ---------- Readiness quiz (quiz.js) ---------- */
/* Scrolls inside itself; full screen on phones */
/* Taller than the legal pop-ups so the result's signup sits within a short scroll */
.quiz-modal { max-height: min(92vh, 860px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 639px) {
  .quiz-modal { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border-radius: 0; }
}
/* Top padding keeps the tracker row clear of the Close button */
.quiz-body { padding-top: 72px; }
@media (min-width: 640px) { .quiz-body { padding-top: 76px; } }
.quiz-screen [data-quiz-heading]:focus { outline: none; }
.modal-body .quiz-screen h2 { padding-right: 0; }

/* Start */
.quiz-title { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem); margin-bottom: 10px; }
.quiz-intro { font-size: 1.02rem !important; margin-bottom: 22px; }
.quiz-load-error { margin: 12px 0 0; color: var(--copper-ink); font-weight: 600; }
.quiz-load-error:empty { display: none; }

/* Tracker: numbered circles on a line, like a mini road. Fits one line at 320px (170px + count). */
.quiz-progress { display: flex; align-items: center; gap: 12px; }
.tracker {
  position: relative; flex: none; width: max-content;
  display: flex; gap: 10px; margin: 0; padding: 0; list-style: none;
}
.tracker::before, .tracker::after {
  content: ""; position: absolute; top: 50%; left: 13px; height: 3px;
  transform: translateY(-50%); border-radius: 2px;
}
.tracker::before { right: 13px; background: var(--peach-line); }
.tracker::after {
  width: calc((100% - 26px) * var(--tracker-fill, 0));
  background: var(--copper); transition: width .45s ease;
}
.tracker-step {
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: #fff; border: 2px solid var(--line);
  font: 700 .75rem/1 var(--font-head); color: var(--muted);
  transition: transform .2s ease;
}
.tracker-step.is-current { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(1.18); }
.tracker-step.is-correct { background: var(--teal); border-color: var(--teal); color: #fff; }
.tracker-step.is-wrong { background: var(--copper-ink); border-color: var(--copper-ink); }
.tracker-step .icon { width: 14px; height: 14px; stroke-width: 3; }
.tracker-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.tracker-step.is-pop { animation: tracker-pop .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tracker-pop {
  0% { transform: scale(.55); }
  100% { transform: scale(1); }
}
.modal-body .quiz-count { margin: 0; font: 600 .82rem var(--font-body); color: var(--muted); white-space: nowrap; }
/* Small phones: tighter spacing keeps circles + count inside the 272px column */
@media (max-width: 359px) {
  .tracker { gap: 8px; }
  .quiz-progress { gap: 10px; }
}

/* Tracker + tally header stays pinned inside the scrolling dialog */
.quiz-head { position: sticky; top: 0; z-index: 3; margin: -10px 0 0; padding: 10px 0 6px; background: #fff; }

/* Running tally + streak */
.modal-body .quiz-tally {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 1.6em; margin: 10px 0 0; font-size: .88rem; color: var(--body);
}
.quiz-streak {
  padding: 2px 9px; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal-ink); font-weight: 700; font-size: .78rem;
  animation: tracker-pop .4s cubic-bezier(.3, 1.6, .5, 1);
}

/* Question + options */
.modal-body .quiz-topic {
  margin: 16px 0 4px; font: 600 .74rem var(--font-body);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.modal-body .quiz-question { font-size: 1.22rem; line-height: 1.35; letter-spacing: -0.015em; margin: 0 0 16px; }
.quiz-options { display: grid; gap: 10px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px;
  font: 500 .98rem/1.4 var(--font-body); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.quiz-option:hover:not(:disabled) { border-color: var(--blue); }
.quiz-option:disabled { cursor: default; color: var(--muted); }
.quiz-letter {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--line);
  font: 700 .85rem var(--font-head); color: var(--muted);
}
.quiz-option.is-correct { background: var(--teal-soft); border-color: var(--teal); color: var(--ink); }
.quiz-option.is-correct .quiz-letter { background: var(--teal); border-color: var(--teal); color: #fff; }
.quiz-option.is-wrong { background: var(--peach-wash); border-color: var(--copper); color: var(--ink); }
.quiz-option.is-wrong .quiz-letter { background: var(--copper-ink); border-color: var(--copper-ink); color: #fff; }

/* Feedback after an answer */
.quiz-feedback { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--surface-alt); }
.modal-body .quiz-verdict { margin: 0 0 4px; font: 700 1.02rem var(--font-head); }
.quiz-verdict.is-correct { color: var(--teal-ink); }
.quiz-verdict.is-wrong { color: var(--copper-ink); }
.modal-body .quiz-explanation { margin: 0 0 14px; }

/* Result */
.modal-body .quiz-score { font-size: clamp(1.6rem, 1.35rem + 1vw, 1.95rem); margin-bottom: 12px; }
.quiz-recap { margin-bottom: 18px; }

/* Temperature gauge: three zones (rust → amber → teal). The track shows all three faintly; the fill is the
   full gradient revealed up to the score, and the bulb + marker take the color of the zone the score lands in. */
.gauge { margin: 0 0 16px; --zone: var(--copper); --zone-soft: var(--peach); }
.gauge.is-amber { --zone: var(--amber); --zone-soft: var(--amber-soft); }
.gauge.is-teal { --zone: var(--teal); --zone-soft: var(--teal-soft); }
.gauge-meter { display: flex; align-items: center; }
.gauge-bulb {
  position: relative; z-index: 1; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--zone); box-shadow: 0 0 0 4px var(--zone-soft);
}
.gauge-tube {
  --gauge-level: 0%;
  position: relative; flex: 1; height: 16px; margin-left: -8px;
  border: 1px solid var(--line); border-radius: 0 999px 999px 0;
  background: linear-gradient(to right, var(--peach) 0 30%, var(--amber-soft) 30% 70%, var(--teal-soft) 70% 100%);
}
.gauge-fill {
  position: absolute; inset: 0; border-radius: 0 999px 999px 0;
  background: linear-gradient(to right, var(--copper) 0 20%, var(--amber) 40% 60%, var(--teal) 80% 100%);
  clip-path: inset(0 calc(100% - var(--gauge-level)) 0 0 round 0 999px 999px 0);
  transition: clip-path 1.2s cubic-bezier(.2, .7, .2, 1) .25s;
}
.gauge-marker {
  position: absolute; z-index: 2; top: 50%; left: var(--gauge-level);
  width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--zone); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(12, 17, 30, .25);
  transition: left 1.2s cubic-bezier(.2, .7, .2, 1) .25s;
}
.gauge-tick { position: absolute; z-index: 1; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: #fff; }
.gauge-zones {
  display: grid; margin: 8px 0 0 22px;
  font: 500 .72rem/1.25 var(--font-body); text-align: center;
}
.gauge-zones .zone-rust { color: var(--copper-ink); }
.gauge-zones .zone-amber { color: var(--amber-ink); }
.gauge-zones .zone-teal { color: var(--teal-ink); }
.gauge-zones .is-active { font-weight: 800; }

.modal-body .quiz-tier-name { margin: 0 0 2px; font: 800 1.3rem var(--font-head); letter-spacing: -0.02em; color: var(--copper-ink); }
.modal-body .quiz-tier-name.is-amber { color: var(--amber-ink); }
.modal-body .quiz-tier-name.is-teal { color: var(--teal-ink); }
.quiz-jump { margin: 0 0 10px; font-size: .9rem; }

/* "What the Bootcamp gives you": teal checklist, two columns from 640px; items new to the tier in bold */
.modal-body .quiz-gives-title { font-size: 1.05rem; margin: 18px 0 10px; }
.modal-body .quiz-gives-list { gap: 8px 22px; margin: 0 0 16px; }
.quiz-gives-list li { font-size: .95rem; line-height: 1.4; color: var(--body); }
.quiz-gives-list strong { font-weight: 700; color: var(--ink); }
@media (min-width: 640px) { .modal-body .quiz-gives-list { grid-template-columns: 1fr 1fr; } }
.modal-body .quiz-note { font-size: .8rem; color: var(--muted); }

/* Signup under the result */
.quiz-signup { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.modal-body .quiz-leadin { font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.quiz-signup .signup-card { margin-bottom: 12px; max-width: none; }
.quiz-retake { font-size: .9rem; }

/* Confetti (4–5 only; quiz.js skips it with reduced motion, and the global rule stops any animation) */
.confetti { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.confetti-piece {
  position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px;
  animation: confetti-fall 1.9s cubic-bezier(.25, .6, .4, 1) forwards;
}
@keyframes confetti-fall {
  to { transform: translate(var(--drift), 460px) rotate(var(--spin)); opacity: 0; }
}