/* ===================================
   tqdiagnostic.com — Main Stylesheet
   Leads-dark register (tqbooks/ti family)
   =================================== */

:root {
  --blue:       #00567e;
  --gold:       #af9335;
  --black:      #2D2926;
  --dark-grey:  #4b4b4b;
  --light-grey: #97999b;
  --off-white:  #e9eaee;
  --white:      #ffffff;
  --error-red:  #e8867a;

  --font-display: 'Big Shoulders Display', sans-serif;
  --font-serif:   'Playfair Display', serif;
  --font-quote:   'Cormorant Garamond', serif;
  --font-body:    'DM Sans', sans-serif;
}

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

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--off-white);
  background-color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@supports (-moz-appearance: none) {
  body { -moz-osx-font-smoothing: auto; }
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* `width: 100%` is LOAD-BEARING, not belt-and-braces (fixed 2026-08-03).
   `.quiz-main` is `display: flex; align-items: center` so the question sits
   vertically centered — which makes this container a FLEX ITEM, and a flex item's
   base size comes from its CONTENT, not its parent. The column therefore
   resized per question: Q1's long options gave 542px, Q8's short quotes gave
   428px, so the whole page appeared to narrow and widen as you answered.
   Reported twice before it was diagnosed, because it reads as "the boxes are
   too small" when the boxes are in fact filling their container faithfully.
   With box-sizing: border-box this is a no-op wherever the parent is not a flex
   container, so it is safe on every other page that uses this class. */
.container--narrow {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 40px;
  z-index: 10;
}

.site-header img {
  height: 22px;
  width: auto;
}

/* --- Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  background-color: var(--black);
}

.hero__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.supratitle {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  animation: reveal 400ms ease-out both;
}

.hero h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 40px;
  animation: reveal 500ms ease-out 80ms both;
}

/* "Sound Familiar?" label. Deliberately NOT gold: iu-standards' Pairings block
   normally carries gold labels/rules, but this repo's Site Register caps the
   hero's gold budget at the supratitle + the BEGIN CTA, and per-repo rules beat
   the shared file where they conflict. Spending gold here would also put the
   block in direct competition with the CTA the block exists to feed. */
.section-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--light-grey);
  margin-bottom: 16px;
  animation: reveal 500ms ease-out 120ms both;
}

.symptoms {
  list-style: none;
  margin-bottom: 32px;
  animation: reveal 500ms ease-out 160ms both;
}

/* Weight 400, not 300: 1.05rem is under the 18px display-only threshold in the
   iu-standards weight-floor rule (same reasoning as .notfound__copy below). */
.symptoms li {
  padding: 8px 0;
  font-size: 1.05rem;
  color: var(--off-white);
  font-weight: 400;
}

/* The hairline separators carry the structure the retired glyph markers used
   to. Decorative rule, so exempt from the contrast minimums. */
.symptoms li + li {
  border-top: 1px solid var(--dark-grey);
}

/* Three-beat bridge. Title Case in the markup, uppercased here, per the locked
   Pairings spec — never typed all-caps in the HTML. */
.anchor-line {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
  animation: reveal 500ms ease-out 220ms both;
}

/* The CTA sits beside the bridge, not beneath it: the third beat ("And TQ
   Problems Have Solutions.") is what the button answers, so pairing them on one
   line strengthens that reading — and it reclaims ~93px, which is what puts
   BEGIN back above the fold.

   The meta line stays on its own full-width row rather than joining the bridge
   in a left column. It measures 530px against a ~672px content box, so beside a
   142px button it would wrap — and ContentSpec records that this line was
   already shortened once specifically to stop it wrapping. Squeezing it here
   would quietly undo that decision.

   flex-wrap handles narrow viewports on its own: the button drops below the
   bridge with no breakpoint needed. */
.hero__close {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Pushes BEGIN to the container's right edge, so its right side lines up
     with the hairline rules on the pain lines above (both are full-width
     children of .hero__inner, and neither has horizontal padding). Left-packed
     before, which parked the button mid-gutter wherever the bridge text ended.
     When the row wraps at narrow widths the button becomes the only item on
     its line and falls back to the left, which is what mobile wants. */
  justify-content: space-between;
  gap: 28px 32px;
  margin-top: 32px;
}

.hero__close .btn-gold {
  flex: 0 0 auto;
}

.meta-line {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light-grey);
  margin: 16px 0 0;
  animation: reveal 500ms ease-out 260ms both;
}

.btn-gold {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--black);
  background-color: var(--gold);
  padding: 16px 36px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 200ms ease;
  animation: reveal 500ms ease-out 300ms both;
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background-color: #c7a83f;
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .supratitle, .hero h1, .section-label, .symptoms, .anchor-line, .meta-line, .btn-gold,
  .quiz-question, .notfound__copy, .notfound__back {
    animation: none;
  }
}

/* --- Not found (404) --- */
/* Reuses .hero / .hero__inner / .supratitle / .hero h1 / .btn-gold —
   (this list used to name .meta-line too; 404 has never used it, and the
   mistake costs a regression hunt every time .meta-line changes) —
   only these two elements are new. Weight 400, not 300: this sits under the 18px
   display-only threshold in the iu-standards weight-floor rule. */
.notfound__copy {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--off-white);
  max-width: 46ch;
  margin-bottom: 32px;
  animation: reveal 500ms ease-out 160ms both;
}

.notfound__back {
  margin-top: 28px;
  font-size: 0.95rem;
  font-weight: 400;
  animation: reveal 500ms ease-out 360ms both;
}

/* light-grey on black = 5.0:1 (approved pair); underlined, so the link is
   distinguishable by more than color. */
.notfound__back a {
  display: inline-block;
  color: var(--light-grey);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 0;
}

.notfound__back a:hover,
.notfound__back a:focus-visible {
  color: var(--off-white);
}

.notfound__back a:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 3px;
}

/* The .trust-strip rules were DELETED 2026-08-03 with the section itself
   (Darryl: over-reach). Side note for the weight-floor audit: .trust-strip__label
   was one of the three known sub-18px weight-300 offenders on index.html, so
   that list is now .meta-line and the body default only. */

/* --- Footer --- */
.site-footer {
  border-top: 1px solid rgba(233, 234, 238, 0.15);
  padding: 32px 0;
  background-color: var(--black);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--light-grey);
}

.site-footer a {
  color: var(--light-grey);
  border-bottom: 1px solid transparent;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--off-white);
  border-bottom-color: var(--light-grey);
}

.site-footer__links {
  display: flex;
  gap: 20px;
}

@media (max-width: 640px) {
  .hero { padding: 120px 0 60px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* --- Quiz --- */
.quiz-main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 100px 0 60px;
  background-color: var(--black);
}

.quiz-progress {
  margin-bottom: 32px;
}

.quiz-progress__track {
  height: 4px;
  border-radius: 2px;
  background-color: rgba(233, 234, 238, 0.15);
  overflow: hidden;
  margin-bottom: 10px;
}

.quiz-progress__fill {
  height: 100%;
  background-color: var(--off-white);
  transition: width 250ms ease;
}

.quiz-progress__label {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light-grey);
  font-weight: 500;
}

.quiz-loading {
  color: var(--off-white);
  font-weight: 400;
  font-size: 1.05rem;
  padding: 40px 0;
}

.quiz-error {
  border-left: 3px solid var(--error-red);
  background-color: rgba(233, 234, 238, 0.05);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.quiz-error p {
  color: var(--off-white);
  font-weight: 400;
  margin-bottom: 12px;
}

.quiz-error__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.quiz-question {
  border: none;
  animation: reveal 350ms ease-out both;
}

.quiz-question legend {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--white);
  margin-bottom: 24px;
}

/* tabindex="-1": focused only programmatically (screen-reader announcement
   on question change), never reachable by Tab — no visible indicator needed. */
.quiz-question legend:focus {
  outline: none;
}

.quiz-options {
  list-style: none;
}

/* Sizing raised 2026-08-02 (Darryl, from a real walk-through: "boxes are too
   small"). The options ARE the content of this page — they were set at 16px
   under a 22.4px stem, in 14px of padding, which read as secondary to the
   question asking about them. Now 18px text in 20px/22px padding. */
.quiz-option {
  margin-bottom: 14px;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.quiz-option.is-checked {
  border-color: var(--off-white);
  background-color: rgba(0, 87, 126, 0.1);
}

.quiz-option label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  min-height: 24px;
}

/* 24px, matching the consent checkbox that was raised 22 -> 24 for the WCAG 2.2
   §2.5.8 target floor. The label has always been the real target and cleared the
   floor on its own, but a 20px control next to a 24px one elsewhere in the same
   product was an inconsistency with no argument behind it. */
.quiz-option input[type="radio"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  accent-color: var(--blue);
}

.quiz-option label:focus-within {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
}

.quiz-option span {
  color: var(--off-white);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.45;
}

.quiz-nav {
  display: flex;
  /* flex-end + an auto margin on Back, NOT space-between: Back is [hidden] on the
     first question of each stage (quiz.js — btnBack.hidden = localIndex === 0), and
     space-between with a single child drops Next to the left. Next must hold the
     right edge in both states. Scoped to .quiz-nav because .btn-ghost is also used
     for the error-state retry buttons, which must stay tight together. */
  justify-content: flex-end;
  align-items: center;
  margin-top: 32px;
}

.quiz-nav .btn-ghost {
  margin-right: auto;
}

.btn-ghost {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--off-white);
  background-color: transparent;
  border: 1px solid var(--light-grey);
  padding: 14px 28px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--off-white);
}

.btn-ghost[hidden] {
  display: none;
}

.btn-gold:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .quiz-main { padding: 90px 0 40px; }
  .quiz-nav { flex-direction: column-reverse; gap: 12px; align-items: stretch; }
  /* Reset the desktop auto margin: in a column container it is a CROSS-axis auto
     margin, which beats align-items: stretch and would shrink Back to content width. */
  .quiz-nav .btn-ghost { margin-right: 0; }
  .quiz-nav .btn-gold,
  .quiz-nav .btn-ghost { text-align: center; }
}

/* --- Results --- */
.results-main {
  min-height: 100vh;
  padding: 140px 0 100px;
  background-color: var(--black);
}

.result-type__declaration {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.1;
  color: var(--white);
}

.result-section {
  margin-top: 80px;
}

.result-section__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light-grey);
  font-weight: 500;
  margin-bottom: 10px;
}

.result-section__heading {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 16px;
}

.result-section__copy {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.6;
  max-width: 56ch;
}

/* Mix graph: SVG shape with HTML labels at the four clock positions
   (HTML labels keep readable sizes at every breakpoint, unlike SVG text). */
.mix-graph {
  position: relative;
  max-width: 460px;
  margin: 40px auto 0;
  padding: 56px 92px;
}

.mix-graph svg {
  display: block;
  width: 100%;
  height: auto;
}

.mix-graph__label {
  position: absolute;
  line-height: 1.3;
}

.mix-graph__label--inventor {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.mix-graph__label--producer {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.mix-graph__label--performer {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
}

.mix-graph__label--judge {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: right;
}

.mix-graph__name {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-grey);
  font-weight: 500;
}

.mix-graph__value {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--off-white);
}

/* Spectrum */
.spectrum {
  margin-top: 40px;
}

.spectrum svg {
  display: block;
  width: 100%;
  height: auto;
}

.spectrum__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--light-grey);
  font-weight: 500;
}

.spectrum__declaration {
  margin-top: 24px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--white);
}

/* light-grey on black = 5.0:1 (approved pair). Weight 500, not the inherited
   300: at ~17px this is body-size text, under the 18px display-only floor.
   Deliberately quieter than the band name -- the band is the headline reading,
   the number is supporting detail ("a position, not a grade"). */
.spectrum__score {
  margin-top: 8px;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--light-grey);
}

.spectrum__score[hidden] {
  display: none;
}

/* Result copy block */
.result-copy p {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.6;
  max-width: 56ch;
  margin-bottom: 16px;
}

.result-copy__recognize {
  list-style: none;
  margin: 8px 0 24px;
}

.result-copy__recognize li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.6;
}

.result-copy__recognize li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--light-grey);
}

.result-copy__cta {
  margin-top: 28px;
}

/* A note on this result */
.result-note__body p {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.7;
  max-width: 56ch;
  margin-bottom: 14px;
}

/* The ways in */
.result-path {
  margin-top: 32px;
  max-width: 56ch;
}

.result-path__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: 8px;
}

.result-path p {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.7;
  margin-bottom: 10px;
}

/* PRE-EXISTING DEFECT, found and fixed 2026-08-03 while adding the team block:
   these rendered 21px tall, under the WCAG 2.2 §2.5.8 24px target floor. They
   are standalone links each on their own line, not links within a sentence, so
   §2.5.8's "inline" exception does not apply to them. inline-block + 4px
   vertical padding takes them to 29px. Reported rather than slipped in — it
   affects copy that was already signed off, though it changes no wording. */
.result-path__link {
  display: inline-block;
  padding: 4px 0;
  color: var(--off-white);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.result-path__link:hover,
.result-path__link:focus-visible {
  color: var(--white);
}

/* Deeper-report offer */
.result-offer {
  border-top: 1px solid rgba(233, 234, 238, 0.15);
  padding-top: 48px;
}

/* --- Opt-in form --- */
.offer-form {
  margin-top: 28px;
  max-width: 480px;
}

.offer-form__field {
  margin-bottom: 18px;
}

.offer-form__field label {
  display: block;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--off-white);
  margin-bottom: 8px;
}

.offer-form__optional {
  font-weight: 400;
  color: var(--light-grey);
}

.offer-form__field input,
.offer-form__field select {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  color: var(--off-white);
  background-color: rgba(233, 234, 238, 0.05);
  /* light-grey border = 5.0:1 on black, clears the 3:1 non-text UI floor */
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 13px 14px;
  min-height: 24px;
}

/* The country select. appearance:none would strip the disclosure arrow with no
   replacement, so the native control is kept -- it renders consistently on the
   dark field and stays keyboard-operable for free.

   ⚠️ This comment used to claim the option list "is drawn by the OS and cannot
   be styled; that is expected, not a defect." That was wrong, and it produced a
   real defect: the closed control inherited our light `color` while the popup
   kept its default white background, so on a dark-mode machine the country list
   rendered as pale grey text on white -- effectively unreadable. Reported from a
   Windows PC in dark mode, 2026-08-02.

   The popup IS styleable. Two mechanisms, both needed:
     - `color-scheme: dark` tells the browser to draw the native popup, its
       scrollbar and its highlight in dark form. This is what fixes the
       background; without it the option colours below sit on white.
     - Explicit option/optgroup colours, because engines that ignore
       color-scheme on a popup still honour these.
   Both land in the Accessibility PASS matrix: off-white on Black is 12.0:1,
   and the optgroup label at Light Grey on Black is 5.0:1. */
.offer-form__field select {
  color-scheme: dark;
}

.offer-form__field select option {
  background-color: var(--black);
  color: var(--off-white);
}

/* The pinned group's heading. Light Grey on Black = 5.0:1, and it reads as a
   label rather than a choice, which is the point -- it is not selectable. */
.offer-form__field select optgroup {
  background-color: var(--black);
  color: var(--light-grey);
  font-style: normal;
  font-weight: 600;
}

.offer-form__field select optgroup option {
  color: var(--off-white);
  font-weight: 400;
}

.offer-form__field select {
  /* Match the text inputs' height: they compute to 49px via padding + line-box,
     but a select's intrinsic line-height differs slightly between engines. */
  height: 49px;
  cursor: pointer;
}

.offer-form__field input:focus-visible,
.offer-form__field select:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
  border-color: var(--off-white);
}

.offer-form__field input[aria-invalid="true"] {
  border-color: var(--error-red);
}

/* Honeypot: removed from the layout, the a11y tree, and the tab order.
   Not display:none — some bots skip those; off-screen is the reliable form. */
.offer-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.offer-form__consent,
/* Second-chance consent (2026-08-02) reuses the capture form's consent row
   wholesale — same 24px target, same focus ring, same weight-400 label. Sharing
   the declarations rather than copying them keeps one place to fix if the
   accessibility floor moves again (it already moved once, 22px -> 24px). */
.second-chance__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
}

/* 24px, not 22: the WCAG 2.2 target floor (§2.5.8) the iu-standards
   accessibility section locks. Was 22px. */
.offer-form__consent input[type="checkbox"],
.second-chance__consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--blue);
}

.offer-form__consent input[type="checkbox"]:focus-visible,
.second-chance__consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
}

.offer-form__consent label,
.second-chance__consent label {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--off-white);
  cursor: pointer;
}

/* Weight 400, not the inherited 300: at 13.6px this is under the 18px
   display-only threshold in the iu-standards weight-floor rule. */
.offer-form__privacy {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--light-grey);
  margin: 12px 0 0 34px;
}

.offer-form__privacy a {
  color: var(--off-white);
  text-decoration: underline;
}

.offer-form__privacy a:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
}

.offer-form__error {
  color: var(--error-red);
  font-weight: 500;
  font-size: 0.92rem;
  margin: 18px 0 0;
}

/* Inline "did you mean gmail.com?" / "Use mine anyway" actions inside the
   error line. A real <button>, not a styled span: it is keyboard-reachable and
   announced as a control for free, and the domain warning must never be a dead
   end. Error Red on Black is 5.57:1 (Accessibility PASS matrix); underline
   carries the affordance, since colour alone cannot per iu-standards. */
.offer-form__inline-action {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--error-red);
  text-decoration: underline;
  cursor: pointer;
}

.offer-form__inline-action:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
}

/* --- Email gate (2026-08-01) ---
   The capture form shown in place of the result. No top border: unlike
   .result-offer it is not a section following other content, it IS the page. */
.result-gate {
  padding-top: 8px;
}

/* "Check your inbox" — the post-submit state. Same shape as .result-gate:
   it IS the page at that moment, not a section following other content. */
.result-sent {
  padding-top: 8px;
}

.result-sent__note {
  color: var(--light-grey);
  font-size: 0.95rem;
  margin-top: 18px;
}

.result-sent__failure {
  color: var(--error-red);
  font-weight: 500;
  font-size: 0.95rem;
  margin-top: 20px;
}

/* Inline text link inside a sentence (2026-08-04) — NOT a CTA button. Gold is
   capped at one event per viewport, so a support pointer mid-paragraph must not
   spend it. Underlined because iu-standards requires a link in body copy to be
   distinguishable by more than colour, and off-white on black is 12.0:1. */
.result-inline-link {
  color: var(--off-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.result-inline-link:hover,
.result-inline-link:focus-visible {
  color: var(--white);
}

/* Delivery confirmation (2026-08-04). Off-white rather than the error red, and
   deliberately quieter than the failure above: this is good news or a "look in
   junk" nudge, not an alarm. Off-white on the page's black is 12.0:1, already
   in the approved accessibility matrix. Weight 500 at 0.95rem (15.2px) clears
   the iu-standards floor, which bans weight 300 below 18px, not weight 500. */
.result-sent__status {
  color: var(--off-white);
  font-weight: 500;
  font-size: 0.95rem;
  margin-top: 20px;
}

.result-sent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 28px;
}

/* Quiet secondary action. Not .btn-gold: the gold budget on this page is spent,
   and these are recovery affordances, not the thing we want pressed. Bordered
   rather than a bare link because they are buttons, and a 1px off-white border
   on Black clears the 3:1 non-text minimum comfortably. */
.btn-quiet {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--off-white);
  background: none;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 10px 16px;
  min-height: 24px;
  cursor: pointer;
}

.btn-quiet:hover {
  border-color: var(--off-white);
}

.btn-quiet:focus-visible {
  outline: 2px solid var(--off-white);
  outline-offset: 2px;
}

.btn-quiet[disabled] {
  opacity: 0.55;
  cursor: default;
}

.result-sent__change {
  margin-top: 24px;
}

.result-sent__msg {
  font-size: 0.95rem;
  color: var(--off-white);
  margin-top: 18px;
}

.result-sent__msg--error {
  color: var(--error-red);
  font-weight: 500;
}

/* Multi-paragraph gate copy. Mirrors .result-note__body p — the other block
   that renders several paragraphs from one string. NOT .result-section__copy,
   which sets no margin because it assumes a single paragraph per section and
   so ran the gate's three paragraphs together. */
.result-gate__copy p {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 0 16px;
}

/* The form supplies its own top margin, so a trailing gap here would double up. */
.result-gate__copy p:last-child {
  margin-bottom: 0;
}

/* Team / organization block (2026-08-03). Set apart from the individual paths
   above it with a 1px hairline rather than a background change — per
   iu-standards, no two adjacent sections share a background, and this is one
   dark section, not two. Weight 400 throughout: this text runs below 18px and
   would otherwise inherit the retired body 300. */
.result-team {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(233, 234, 238, 0.15);
}

.result-team__intro p {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.7;
  max-width: 62ch;
  margin: 0 0 16px;
}

.result-team__links {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.result-team__links li {
  margin-bottom: 14px;
}

/* Underlined text links, not gold buttons — the gold budget on this page is
   spent, and three gold CTAs here would compete with the paths above.
   inline-block + vertical padding takes these to 29px so they clear the WCAG 2.2
   §2.5.8 24px target floor: these are standalone links in list items, NOT links
   inside a sentence, so §2.5.8's "inline" exception does not cover them. See the
   note on .result-path__link — the same 21px shortfall was already there. */
.result-team__link {
  display: inline-block;
  padding: 4px 0;
  color: var(--off-white);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.result-team__close {
  color: var(--light-grey);
  font-weight: 400;
  line-height: 1.7;
  max-width: 62ch;
  margin: 24px 0 0;
}

/* Second-chance consent block (2026-08-02).
   font-weight 400 is REQUIRED, not stylistic: this element holds its text
   directly and would otherwise inherit `body { font-weight: 300 }` at 16px,
   which is under the 18px display-only threshold in the iu-standards
   weight-floor rule. Caught by measuring the rendered block, not by review —
   the same latent inheritance already affects .meta-line on index.html. */
.second-chance {
  margin-top: 48px;
}

.second-chance__copy {
  color: var(--off-white);
  font-weight: 400;
  line-height: 1.7;
  max-width: 56ch;
  margin: 0 0 16px;
}

/* Ghost, not gold: the page's one gold event is spent, and per the site
   register gold is the CTA budget for the primary action — this is a
   secondary, declinable ask and must not compete with the paths above it. */
.second-chance .btn-ghost {
  margin-top: 20px;
}

.result-gate .offer-form {
  margin-top: 32px;
}

.offer-form .btn-gold {
  margin-top: 24px;
}

.offer-success {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--white);
}

@media (max-width: 640px) {
  .results-main { padding: 110px 0 70px; }
  .result-section { margin-top: 60px; }
  .mix-graph { padding: 50px 74px; }
  .mix-graph__value { font-size: 0.95rem; }
}

/* --- Legal (privacy / terms) --- */
.legal-main {
  min-height: 100vh;
  padding: 140px 0 100px;
  background-color: var(--black);
}

.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 24px;
}

.legal h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 12px;
}

.legal__updated {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--light-grey);
  font-weight: 500;
  margin-bottom: 40px;
}

/* Controller postal address (added 2026-08-03). `font-style: normal` because the
   UA default for <address> is italic, and weight 400 rather than the inherited
   300 to clear the iu-standards sub-18px weight floor. */
.legal__address {
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  color: var(--off-white);
  margin: 0 0 24px;
}

.legal h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--white);
  margin: 40px 0 14px;
}

.legal p,
.legal li {
  color: var(--off-white);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal ul {
  list-style: none;
  margin-bottom: 14px;
}

.legal li {
  position: relative;
  padding-left: 20px;
}

.legal li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--light-grey);
}

.legal a {
  color: var(--off-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal a:hover,
.legal a:focus-visible {
  color: var(--white);
}

.legal__intro {
  font-size: 1.1rem;
  line-height: 1.7;
}