/*
 * The funnel's stylesheet. Semantic tokens only (DM-19): every color is a
 * var(--hl-*) role from /assets/tokens.css, generated by @heirloom/design.
 * Dark is the base and the visitor's light preference switches the roles;
 * the chrome (the landing hero) stays dark in both, and the paper sample is
 * a light island because paper does not change with the mode.
 *
 * The look is lane D's samples (Evidence/Launch-2026-09-26/Funnel-Samples)
 * with the accessibility review's cures: one side margin, 56px choice rows,
 * the phone fold (390x664 and 375x553) with a sticky Back and Next bar, a
 * forced-colors block, reduced motion and a 44px tick area (and, since the
 * review of b954ac3, a 45px tap area on the gate's two small links). Body
 * text is 16px or more; secondary lines (the Optional title and the text message terms
 * link, at 14px) sit below it. No inline style anywhere, so the Content-Security-Policy can refuse
 * every inline style.
 *
 * The code review of the built funnel (2026-09-26) added: the gate's button
 * sits under the consent text on a phone, never pinned above it (a11y
 * AMBER-1, compliance A1); the whole 44px tick column toggles its box (a11y
 * AMBER-2); the results booking button above the 375x553 fold (a11y
 * AMBER-3); the page H1 kept for screen readers when scripted (NOTE 1); the
 * 40px short-screen rule scoped to the quiz header (NOTE 3); and a phone
 * held sideways gets the sticky bar and the short-screen spacing (NOTE 6).
 *
 * The no-slop visual audit (Evidence/Launch-2026-09-26/No-Slop/
 * Funnel-Visual-Audit.md, 2026-09-26) set the design package's own radii
 * (AMBER-4), took the shadow off the sample card and the card off the
 * booking block, set the content people came for in full ink (AMBER-5),
 * replaced the landing template's feature grid, pull quote and three steps
 * with a plain list and a signed note (AMBER-3), and took the arrow icon off
 * the buttons (NOTE-1). The Heirloom fonts are not vendored yet (AMBER-1,
 * held for the coordinator), so the token stacks fall back to the system.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Keep a focused field clear of the sticky Back and Next bar on a phone. */
@media (max-width: 767px), (max-height: 500px) {
  html.js { scroll-padding-bottom: 104px; }
}

body {
  margin: 0;
  background: var(--hl-surface);
  color: var(--hl-ink);
  font-family: var(--hl-font-sans);
  font-size: 1.125rem;
  line-height: var(--hl-leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

:root {
  --gutter: 16px;
  --display-1: 2.5rem;
  --display-2: 1.75rem;
  --display-3: 1.5rem;
  --row: 56px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --display-1: 4.25rem;
    --display-2: 2.5rem;
    --display-3: 2rem;
  }
}

a { color: var(--hl-link-ink); text-underline-offset: 0.18em; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
.text-input:focus-visible,
.check-input:focus-visible,
.option input:focus-visible + .option-body,
[tabindex="-1"]:focus-visible {
  outline: var(--hl-border-focus) solid var(--hl-focus-ring);
  outline-offset: 3px;
}

[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--hl-surface-raised);
  color: var(--hl-ink);
  border-radius: var(--hl-radius-md);
}

.skip-link:focus { top: 8px; }

.wrap {
  width: 100%;
  max-width: var(--hl-layout-content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap--narrow { max-width: calc(36rem + 2 * var(--gutter)); }
.wrap--quiz { max-width: calc(44rem + 2 * var(--gutter)); }
.wrap--results { max-width: calc(46rem + 2 * var(--gutter)); }

h1, h2, h3 { margin: 0; font-weight: var(--hl-weight-regular); }
p { margin: 0; }

.muted { color: var(--hl-ink-muted); }

/* The horizontal lockup: the seal at 32px beside the serif caps wordmark. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

@media (min-width: 768px) {
  .topbar { min-height: 88px; }
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.lockup img { display: block; width: 32px; height: 32px; }

.wordmark {
  font-family: var(--hl-font-serif);
  font-size: 1rem;
  letter-spacing: 0.13em;
  line-height: 1;
}

.site-header { border-bottom: 1px solid var(--hl-line); }

/* A letter has its letterhead over the text (visual audit NOTE-2): on a
   reading page the lockup and the footer line up with the column. Browsers
   without :has keep the wide header. */
@media (min-width: 768px) {
  body:has(main .wrap--narrow) :is(.site-header, .footer) .wrap { max-width: calc(36rem + 2 * var(--gutter)); }
  body:has(main .wrap--quiz) :is(.quiz-header, .footer) .wrap { max-width: calc(44rem + 2 * var(--gutter)); }
  body:has(main .wrap--results) :is(.site-header, .quiz-header, .footer) .wrap { max-width: calc(46rem + 2 * var(--gutter)); }
}

.eyebrow {
  margin: 0 0 var(--hl-space-5);
  font-size: 1rem;
  font-weight: var(--hl-weight-medium);
  line-height: var(--hl-leading-snug);
}

.eyebrow--muted { color: var(--hl-ink-muted); }

.display {
  font-family: var(--hl-font-serif);
  font-size: var(--display-1);
  line-height: 1.06;
  letter-spacing: var(--hl-tracking-tight);
  text-wrap: balance;
}

.display--page { font-size: var(--display-2); line-height: 1.15; }

.lede {
  margin-top: var(--hl-space-6);
  font-size: 1.1875rem;
  line-height: 1.55;
  max-width: 36rem;
}

@media (min-width: 768px) {
  .lede { font-size: 1.3125rem; }
}

/* Buttons: one action accent, 56px or taller. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--hl-c-button-primary-radius);
  background: var(--hl-c-button-primary-background);
  color: var(--hl-c-button-primary-ink);
  font-family: var(--hl-font-sans);
  font-size: 1.125rem;
  font-weight: var(--hl-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button-text { display: flex; flex-direction: column; align-items: center; padding: 8px 0; }
.button .opens { display: block; font-size: 1rem; font-weight: var(--hl-weight-regular); }

.button--quiet {
  background: transparent;
  color: var(--hl-ink);
  border: 1px solid var(--hl-line-strong);
}

@media (max-width: 767px) {
  .button--block-mobile { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .button { transition: filter var(--hl-duration-fast) var(--hl-ease-standard); }
  .button:hover { filter: brightness(1.06); }

  /* A faint sheen crosses the primary action once, shortly after the page
     loads, and again each time a pointer rests on it or the keyboard
     focuses it (Rick, 2026-09-27: "shimmering gradients to a small tasteful
     degree"). It never loops: the roundtable found the earlier seven-second
     loop never stopped. At rest the highlight sits off the button, so the
     jump back after a pass is invisible. It sits under the words, never
     catches a click, and exists only without a reduced-motion preference. */
  .button:not(.button--quiet) { position: relative; overflow: hidden; isolation: isolate; }
  .button:not(.button--quiet)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.2) 50%, transparent 62%) no-repeat;
    background-size: 260% 100%;
    background-position: 160% 0;
    animation: hl-sheen 1.7s var(--hl-ease-standard) 1.2s 1 backwards;
    pointer-events: none;
  }
  /* Hover and focus: one pass by transition, never a loop. Only the hovered
     or focused state carries the transition, so leaving it snaps the
     highlight back off the button unseen instead of sweeping back. */
  .button:not(.button--quiet):hover::after,
  .button:not(.button--quiet):focus-visible::after {
    background-position: -60% 0;
    transition: background-position 1.7s var(--hl-ease-standard);
  }
  @keyframes hl-sheen {
    from { background-position: 160% 0; }
    to { background-position: -60% 0; }
  }
}

.text-link { font-weight: var(--hl-weight-semibold); }
.text-link .button-text { display: inline; padding: 0; }
.text-link .opens { display: inline; font-weight: var(--hl-weight-regular); }

/* ------------------------------------------------------------------ */
/* Landing                                                             */
/* ------------------------------------------------------------------ */

.hero {
  background: var(--hl-chrome-surface);
  color: var(--hl-chrome-ink);
  border-bottom: 1px solid var(--hl-chrome-line);
}

.hero .eyebrow,
.hero .lede,
.hero-facts { color: var(--hl-chrome-ink-muted); }

.hero-grid {
  display: grid;
  gap: 48px;
  padding: 24px 0 64px;
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: 88px;
    padding: 48px 0 104px;
  }
}

.button--hero {
  margin-top: var(--hl-space-10);
  background: var(--hl-chrome-accent);
  color: var(--hl-chrome-surface);
}

.hero-facts { margin-top: var(--hl-space-5); font-size: 1rem; }

.paper {
  margin: 0;
  background: var(--hl-c-document-card-background);
  color: var(--hl-c-document-card-ink);
  border-radius: var(--hl-c-document-card-radius);
  padding: 28px 24px 24px;
  max-width: 26rem;
}

@media (min-width: 768px) {
  .paper { padding: 36px 40px 32px; }
}

.paper-label {
  color: var(--hl-c-document-card-ink-muted);
  font-size: 1rem;
  font-weight: var(--hl-weight-semibold);
}

.paper-group { margin-top: 20px; }
.paper-group + .paper-group {
  padding-top: 20px;
  border-top: 1px solid var(--hl-c-document-card-rule);
}

.paper-group-title { font-size: 1rem; font-weight: var(--hl-weight-semibold); margin-bottom: 8px; }
.paper ul { list-style: none; margin: 0; padding: 0; }
.paper li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--hl-c-document-card-font);
  font-size: 1.125rem;
  line-height: 1.45;
  padding: 6px 0;
}

.paper li svg { flex: none; width: 18px; height: 18px; margin-top: 3px; }
.up { color: var(--hl-value); }
.down { color: var(--hl-c-document-card-ink-muted); }

.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 80px 0; } }

.section-title {
  font-family: var(--hl-font-serif);
  font-size: var(--display-2);
  line-height: 1.15;
  letter-spacing: var(--hl-tracking-tight);
  max-width: 40rem;
  text-wrap: balance;
}

.points {
  margin: 24px 0 0;
  max-width: var(--hl-layout-prose-max);
}
ul.points li + li { margin-top: 12px; }

/* Rick's note as a signed letter, not a pull quote (visual audit AMBER-3). */
.note { border-top: 1px solid var(--hl-line); }
.note blockquote { margin: 0; max-width: var(--hl-layout-prose-max); }
.note blockquote p {
  font-family: var(--hl-font-serif);
  font-size: 1.25rem;
  line-height: 1.55;
  letter-spacing: var(--hl-tracking-normal);
}
@media (min-width: 768px) {
  .note blockquote p { font-size: var(--hl-text-xl); }
}
.note blockquote p + p { margin-top: 1em; }

.signoff { margin-top: 24px; display: flex; flex-direction: column; font-size: 1.0625rem; }
.signoff strong { font-weight: var(--hl-weight-regular); }
.signoff span { color: var(--hl-ink-muted); }
.company-line { margin-top: 28px; color: var(--hl-ink-muted); max-width: 40rem; }

.closing-cta { margin-top: 48px; max-width: var(--hl-layout-prose-max); }
.closing-cta .closing-lede { margin: 0 0 24px; color: var(--hl-ink); font-size: inherit; }
.closing-cta p { margin-top: 16px; color: var(--hl-ink-muted); font-size: 1rem; }

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--hl-line);
  padding: 32px 0 48px;
  color: var(--hl-ink-muted);
  font-size: 1rem;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  justify-content: space-between;
}

.footer nav { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.footer a { color: var(--hl-ink); display: inline-flex; align-items: center; min-height: 44px; }

/* ------------------------------------------------------------------ */
/* The broker letter, privacy and small pages                          */
/* ------------------------------------------------------------------ */

.letter, .prose-page, .status-page { padding: 40px 0 72px; }
@media (min-width: 768px) { .letter, .prose-page, .status-page { padding: 72px 0 112px; } }

.cta { margin-top: 32px; }
.cta-note { margin-top: 14px; color: var(--hl-ink-muted); font-size: 1rem; max-width: 30rem; }

.letter-section { margin-top: 48px; }
.letter-section h2, .prose h2, .results-section h2 {
  font-family: var(--hl-font-serif);
  font-size: var(--display-3);
  line-height: 1.2;
}
.letter-section p, .letter-section ul { margin-top: 14px; }
.letter-section p + p { margin-top: 14px; }
.plain-list { padding-left: 1.25em; }
.plain-list li + li { margin-top: 6px; }
.signature { margin-top: 28px; }

.prose h2 { margin-top: 48px; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: 8px; }
.prose .muted { margin-top: 10px; }

.status-page .button { margin-top: 28px; }
.status-page form { margin-top: 28px; }
.status-page .muted { margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* Question screens                                                    */
/* ------------------------------------------------------------------ */

.quiz-header { background: var(--hl-surface); }
.quiz-header .topbar { min-height: 56px; }
@media (min-width: 768px) { .quiz-header .topbar { min-height: 80px; } }

.count {
  color: var(--hl-ink-muted);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.progress { display: none; height: var(--hl-border-indicator); background: var(--hl-line); }
.progress-fill { display: block; height: 100%; width: 0; background: var(--hl-accent); }

.js .progress { display: block; }
.progress[data-step="1"] .progress-fill { width: 7.14%; }
.progress[data-step="2"] .progress-fill { width: 14.29%; }
.progress[data-step="3"] .progress-fill { width: 21.43%; }
.progress[data-step="4"] .progress-fill { width: 28.57%; }
.progress[data-step="5"] .progress-fill { width: 35.71%; }
.progress[data-step="6"] .progress-fill { width: 42.86%; }
.progress[data-step="7"] .progress-fill { width: 50%; }
.progress[data-step="8"] .progress-fill { width: 57.14%; }
.progress[data-step="9"] .progress-fill { width: 64.29%; }
.progress[data-step="10"] .progress-fill { width: 71.43%; }
.progress[data-step="11"] .progress-fill { width: 78.57%; }
.progress[data-step="12"] .progress-fill { width: 85.71%; }
.progress[data-step="13"] .progress-fill { width: 92.86%; }
.progress[data-step="14"] .progress-fill,
.progress[data-step="15"] .progress-fill { width: 100%; }
.progress[data-total="10"][data-step="1"] .progress-fill { width: 10%; }
.progress[data-total="10"][data-step="2"] .progress-fill { width: 20%; }
.progress[data-total="10"][data-step="3"] .progress-fill { width: 30%; }
.progress[data-total="10"][data-step="4"] .progress-fill { width: 40%; }
.progress[data-total="10"][data-step="5"] .progress-fill { width: 50%; }
.progress[data-total="10"][data-step="6"] .progress-fill { width: 60%; }
.progress[data-total="10"][data-step="7"] .progress-fill { width: 70%; }
.progress[data-total="10"][data-step="8"] .progress-fill { width: 80%; }
.progress[data-total="10"][data-step="9"] .progress-fill { width: 90%; }
.progress[data-total="10"][data-step="10"] .progress-fill { width: 100%; }

.quiz-main { padding: 24px 0 24px; }
@media (min-width: 768px) { .quiz-main { padding: 72px 0 64px; } }

.nojs-intro { margin-bottom: 40px; }
/* Scripted, the intro is hidden from sight but its H1 stays for screen readers. */
.js .nojs-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.js .count { display: block; }
.count { display: none; }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; display: block; width: 100%; }

.step + .step { margin-top: 56px; }
.js .step { display: none; margin-top: 0; }
.js .step.is-active { display: block; }

.step-count {
  display: block;
  margin-bottom: 10px;
  color: var(--hl-ink-muted);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.js .step-count { display: none; }

.area-label {
  display: block;
  margin-bottom: 8px;
  color: var(--hl-accent-ink);
  font-size: 1rem;
  font-weight: var(--hl-weight-semibold);
}

.question {
  font-family: var(--hl-font-serif);
  font-size: var(--display-2);
  line-height: 1.18;
  letter-spacing: var(--hl-tracking-tight);
  text-wrap: balance;
}

.hint {
  margin-top: var(--hl-space-3);
  color: var(--hl-ink-muted);
  font-size: 1.0625rem;
}

.options {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .options { gap: 12px; margin-top: 36px; }
}

.option { display: block; cursor: pointer; position: relative; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.option-body {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--row);
  padding: 10px 18px;
  border: 1px solid var(--hl-line);
  border-radius: var(--hl-radius-md);
  background: var(--hl-surface-raised);
  font-size: 1.125rem;
  line-height: 1.35;
}

@media (min-width: 768px) {
  .option-body { padding: 14px 22px; font-size: 1.1875rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .option-body {
    transition: border-color var(--hl-duration-fast) var(--hl-ease-standard),
                background var(--hl-duration-fast) var(--hl-ease-standard);
  }
}

.option:hover .option-body { border-color: var(--hl-accent); }

.radio {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--hl-radius-full);
  border: 2px solid var(--hl-line-strong);
  display: grid;
  place-items: center;
}

.option input:checked + .option-body {
  background: var(--hl-selected-surface);
  border-color: var(--hl-selected-edge);
  box-shadow: inset 0 0 0 1px var(--hl-selected-edge);
}

.option input:checked + .option-body .radio { border-color: var(--hl-accent); }

.option input:checked + .option-body .radio::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: var(--hl-radius-full);
  background: var(--hl-accent);
}

.step-error, .field-error {
  margin-top: 12px;
  color: var(--hl-danger-ink);
  font-weight: var(--hl-weight-semibold);
  font-size: 1rem;
}

.field-error::before, .step-error::before { content: "! "; }

/* The Back and Next bar. On a phone it sticks to the bottom of the screen,
   so Next is always reachable above Safari's toolbar. */
.quiz-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 767px), (max-height: 500px) {
  .js .quiz-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 24px calc(-1 * var(--gutter)) 0;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--hl-surface);
    border-top: 1px solid var(--hl-line);
  }
  /* The gate: "Show my results" sits directly under the consent text it
     records, never pinned over the fields above it. */
  .js .quiz-form[data-on-last="true"] .quiz-actions {
    position: static;
    margin: 24px 0 0;
    padding: 0;
    border-top: 0;
    background: none;
  }
}

/* Until the page script runs the steps, the bar shows a disabled "Loading"
   button in the place of Next (or Start), the same height, so the page never
   looks frozen and nothing moves when Next appears. Next itself stays out of
   the way: it would post the form with one question answered (boot.js also
   stops that post, and shows the plain form, button and all, if the script
   never runs). Without the "js" class the cue never shows. */
.quiz-actions .button--wait { display: none; }
.js:not(.js-ready) .quiz-actions .button--wait { display: inline-flex; }
.js:not(.js-ready) .quiz-actions #quiz-next { display: none; }
.button--wait { color: var(--hl-ink-muted); cursor: progress; }
.button--wait:hover { filter: none; }

.quiz-actions .button { margin-left: auto; }
/* The scorecard intro has no Back link, so Start sits under the text (NOTE-3). */
.js .step--intro.is-active ~ .quiz-actions .button { margin-left: 0; }

/* Short phone screens (375x553 is Safari's visible area on a small iPhone):
   tighter spacing so every answer and Next sit above the fold. Rows stay
   56px tall. */
@media (max-width: 767px) and (max-height: 700px), (max-height: 500px) {
  .quiz-header .topbar { min-height: 48px; }
  .quiz-header .lockup { min-height: 40px; }
  .quiz-main { padding-top: 12px; }
  .question { font-size: 1.375rem; line-height: 1.2; }
  .hint { margin-top: 4px; font-size: 1rem; line-height: 1.4; }
  .options { margin-top: 12px; gap: 6px; }
  .option-body { padding: 6px 14px; font-size: 1rem; line-height: 1.3; gap: 12px; }
  .radio { width: 22px; height: 22px; }
  .area-label, .step-count { margin-bottom: 2px; }
  .js .quiz-actions { margin-top: 12px; padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .js .quiz-actions .button { min-height: 48px; }
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--hl-ink-muted);
  font-size: 1.0625rem;
  text-decoration: none;
}

.back svg { width: 18px; height: 18px; }

.gate-link { margin-top: 20px; font-size: 1rem; }
.js .quiz-form:not([data-on-last="true"]) .gate-link { display: none; }

/* ------------------------------------------------------------------ */
/* The email gate                                                      */
/* ------------------------------------------------------------------ */

.fields { display: grid; gap: 20px; margin-top: 28px; }

.field-label {
  display: block;
  font-size: 1rem;
  font-weight: var(--hl-weight-semibold);
}

.field-hint { margin-top: 4px; color: var(--hl-ink-muted); font-size: 1rem; }
.field .field-error { margin-top: 6px; }

.text-input, .select-input {
  display: block;
  width: 100%;
  margin-top: 8px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--hl-c-input-edge);
  border-radius: var(--hl-radius-md);
  background: var(--hl-c-input-background);
  color: var(--hl-c-input-ink);
  font-family: var(--hl-font-sans);
  font-size: 1.125rem;
}

.text-input:focus, .select-input:focus { border-color: var(--hl-c-input-edge-focus); }
.has-error .text-input { border: 2px solid var(--hl-danger-ink); }

.optional-note { margin-top: 32px; color: var(--hl-ink-muted); font-size: 1rem; }

/* Consent version 3 (S-147; Rick, 2026-09-27: "this is still not really
   clean", "the opt in sounds informal"). The two optional boxes share
   one style under a small sentence-case "Optional" title that sits below a
   thin rule: each label at 16px in medium weight, its square flush with the
   fields' left edge; directly under the call label, the "Mobile number"
   field, which opens only once the box is ticked; then the consent words at
   16px (the site's floor, a size under the 18px body) in regular weight and
   full ink in both themes, one paragraph per line of the hashed text, so the
   carrier line sits apart from the agreement; then the text message terms
   link. Every word is visible without a click, a hover or a scroll box. The
   boxes stay discreet through their place, the spacing and the regular
   weight of the terms, never through smaller or fainter consent words. */
.optins { margin: 32px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--hl-line); min-width: 0; }
/* The legend floats so it sits under the rule, not across it. */
.optins-title { float: left; width: 100%; padding: 0; font-size: 0.875rem; font-weight: var(--hl-weight-medium); color: var(--hl-ink-muted); }
.optins .check { clear: left; grid-template-columns: 36px 1fr; margin-top: 4px; }
.optins .check + .check { margin-top: 20px; }
/* The square lines up with the fields above it; the whole 44px square from
   the group's edge still toggles the box (the label's ::before). */
.optins .check-input { margin: 10px 12px 10px 0; }
/* The label's text sits level with the square, and the words under it
   follow closely, so each box reads as one unit. */
.optins .check-label { min-height: 40px; align-items: flex-start; padding-top: 10px; font-size: 1rem; font-weight: var(--hl-weight-medium); line-height: 1.5; }
.optins .check-detail { max-width: 40rem; }
.optins .check-detail p { font-size: 1rem; font-weight: var(--hl-weight-regular); line-height: 1.5; color: var(--hl-ink); }
.optins .check-detail p + p { margin-top: 8px; }
.optins .check-terms { grid-column: 2; margin-top: 8px; font-size: 0.875rem; }
/* The two small links on the gate, the text message terms and "How we handle
   your answers", keep their look but take a tap area 45px tall, like the tick
   area: an invisible box 14px above and 14px below the words. Nothing moves,
   the focus ring still outlines the words, and no other control is covered. */
.optins .check-terms a,
.gate-link a { position: relative; }
.optins .check-terms a::before,
.gate-link a::before { content: ""; position: absolute; inset: -14px 0; }
/* The mobile number field: under the call label, as wide as a phone number
   needs, its label at 16px like every consent word around it. */
.optins .check .field { grid-column: 2; margin: 0 0 14px; max-width: 20rem; }
.optins .field-label { font-size: 1rem; font-weight: var(--hl-weight-medium); color: var(--hl-ink); }
.optins .check .text-input { margin-top: 6px; }
/* The phone field glides open under the call label once the box is ticked.
   Only where the browser supports :has(); elsewhere it stays visible. Hidden
   means visibility: hidden too, so Tab skips it until it opens, and a phone
   error keeps it open. */
@supports selector(:has(*)) {
  .optins .check--calls_and_texts .field { max-height: 0; margin-bottom: 0; opacity: 0; visibility: hidden; overflow: hidden; }
  .optins .check--calls_and_texts:has(#calls_and_texts:checked) .field,
  .optins .check--calls_and_texts .field.has-error { max-height: 12rem; margin-bottom: 14px; opacity: 1; visibility: visible; overflow: visible; }
}
@media (prefers-reduced-motion: no-preference) {
  .check--calls_and_texts .field {
    transition: max-height var(--hl-duration-settle) var(--hl-ease-standard), margin-bottom var(--hl-duration-settle) var(--hl-ease-standard),
      opacity var(--hl-duration-settle) var(--hl-ease-standard), visibility 0s linear var(--hl-duration-settle);
  }
  .check--calls_and_texts:has(#calls_and_texts:checked) .field { transition-delay: 0s; }
}

.check {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: start;
  margin-top: 20px;
}

.check-input {
  grid-row: 1;
  width: 24px;
  height: 24px;
  margin: 10px;
  accent-color: var(--hl-accent);
}

.check-label {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: var(--hl-weight-semibold);
  cursor: pointer;
}

/* The whole 44px square beside the label toggles the box (D3's tick area). */
.check-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
}

.check-detail { grid-column: 2; font-size: 1rem; line-height: 1.55; }

/* The email line (results_email) is the email field's hint: 16px, muted,
   between the "Email" label and its box, and read with the field. */
.consent-results { max-width: 40rem; line-height: 1.5; }

.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.error-summary, .notice {
  margin-bottom: 32px;
  padding: 18px 20px;
  border: 2px solid var(--hl-danger-ink);
  border-radius: var(--hl-radius-md);
  background: var(--hl-surface-raised);
}

.notice { border-color: var(--hl-line-strong); }

.error-summary-title { font-size: 1.125rem; font-weight: var(--hl-weight-semibold); }
.error-summary ul, .notice ul { margin: 10px 0 0; padding-left: 1.25em; }
.error-summary li + li { margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* Results                                                             */
/* ------------------------------------------------------------------ */

.results-main { padding: 24px 0 48px; }
@media (min-width: 768px) { .results-main { padding: 64px 0 88px; } }

.display--results { font-size: var(--display-2); line-height: 1.14; }
@media (min-width: 768px) { .display--results { font-size: 3rem; } }

.results-summary { color: var(--hl-ink); max-width: none; margin-top: 16px; }

.talk {
  margin-top: 32px;
  padding: 24px 0 0;
  border: 0;
  border-top: 1px solid var(--hl-line);
  border-radius: 0;
  background: none;
}

@media (min-width: 768px) {
  .talk { margin-top: 48px; padding: 32px 0 0; }
}

.talk h2 { font-family: var(--hl-font-serif); font-size: var(--display-3); line-height: 1.2; }
.talk p { margin-top: 10px; color: var(--hl-ink); max-width: 34rem; }
.talk .button { margin-top: 20px; }
.talk .talk-note { font-size: 1rem; color: var(--hl-ink-muted); }

/* Short phone screens: the booking button stays above the 375x553 fold. */
@media (max-width: 767px) and (max-height: 700px) {
  .results-main { padding-top: 12px; }
  .results-summary { margin-top: 8px; }
  .talk { margin-top: 16px; padding: 16px 0 0; }
  .talk .button { margin-top: 12px; }
}

.results-section { margin-top: 64px; }
.results-section h2 { padding-bottom: 16px; border-bottom: 1px solid var(--hl-line); }
.section-intro { margin-top: 16px; color: var(--hl-ink-muted); }

.result-group { margin-top: 28px; }
.group-title { font-size: 1.25rem; font-weight: var(--hl-weight-semibold); margin-top: 28px; }
.result-group .group-title { margin-top: 0; }

.driver-list { list-style: none; margin: 0; padding: 0; }
.driver {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 4px 14px;
  padding: 24px 0;
  border-bottom: 1px solid var(--hl-line);
}

.driver > :not(.driver-mark) { grid-column: 2; }

@media (max-width: 767px) {
  .driver { grid-template-columns: 24px 1fr; column-gap: 8px; }
}

.driver-mark {
  grid-row: 1 / span 3;
  font-family: var(--hl-font-serif);
  font-size: 1.75rem;
  line-height: 1.1;
  color: var(--hl-accent-ink);
}

.driver-mark--strong::before,
.driver-mark--mixed::before,
.driver-mark--weak::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 8px;
  border-radius: var(--hl-radius-full);
  border: 2px solid var(--hl-line-strong);
}

.driver-mark--strong::before { background: var(--hl-value); border-color: var(--hl-value); }
.driver-mark--mixed::before { background: var(--hl-line-strong); }

.driver-name { font-size: 1.25rem; font-weight: var(--hl-weight-semibold); line-height: 1.35; }
.driver-meaning { color: var(--hl-ink); }
.driver-next { margin-top: 6px; }
.driver-next strong { font-weight: var(--hl-weight-semibold); }

.next p + p { margin-top: 12px; }
.next p:first-of-type { margin-top: 16px; }

.fine-print {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--hl-line);
  color: var(--hl-ink-muted);
  font-size: 1rem;
}

.fine-print > * + * { margin-top: 14px; }
.sources summary { display: list-item; min-height: 44px; padding: 10px 0; color: var(--hl-link-ink); cursor: pointer; }
.sources ul { margin: 8px 0 0; padding-left: 1.25em; }
.sources li + li { margin-top: 8px; }

/* ------------------------------------------------------------------ */
/* The broker scorecard                                                */
/* ------------------------------------------------------------------ */

.step--intro .lede { margin-top: 16px; }
.step--intro .muted { margin-top: 16px; }

.start-card {
  margin-top: 28px;
  padding: 22px 22px 24px;
  border: 1px solid var(--hl-selected-edge);
  border-radius: var(--hl-c-card-radius);
  background: var(--hl-selected-surface);
}

.start-title { font-weight: var(--hl-weight-semibold); font-size: 1.25rem; margin-bottom: 8px; }

.area-list { list-style: none; margin: 16px 0 24px; padding: 0; }
.area { padding: 20px 0; border-bottom: 1px solid var(--hl-line); }
.area-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.area-name { font-weight: var(--hl-weight-semibold); font-size: 1.1875rem; }
.area-level { display: inline-flex; align-items: center; gap: 10px; color: var(--hl-ink-muted); }
.area-move { margin-top: 6px; color: var(--hl-ink); }

.dots { display: inline-flex; gap: 4px; }
.dot {
  width: 10px;
  height: 10px;
  border-radius: var(--hl-radius-full);
  border: 2px solid var(--hl-accent);
}
.dot--on { background: var(--hl-accent); }

.closing-actions { margin-top: 32px; display: grid; gap: 14px; }

/* ------------------------------------------------------------------ */
/* Windows High Contrast and other forced-colors modes (review AMBER-2) */
/* ------------------------------------------------------------------ */

@media (forced-colors: active) {
  .option input:checked + .option-body { border: 3px solid Highlight; }
  .option input:checked + .option-body .radio { border-color: Highlight; }
  .option input:checked + .option-body .radio::after { background: Highlight; forced-color-adjust: none; }
  .progress { outline: 1px solid CanvasText; }
  .progress-fill { background: Highlight; forced-color-adjust: none; }
  .button { border: 2px solid ButtonText; }
  .dot { border-color: CanvasText; }
  .dot--on { background: CanvasText; forced-color-adjust: none; }
  .driver-mark--strong::before, .driver-mark--mixed::before { background: CanvasText; forced-color-adjust: none; }
  .error-summary, .has-error .text-input { border-color: Mark; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------------ */
/* Print: the results only, on paper roles                             */
/* ------------------------------------------------------------------ */

@media print {
  body { background: var(--hl-paper); color: var(--hl-paper-ink); font-size: 11pt; }
  .footer, .skip-link, .quiz-header, .site-header, .closing-actions, .quiz-actions, .talk .button { display: none !important; }
  .area-move, .area-level, .muted, .driver-meaning { color: var(--hl-paper-ink); }
}