/* Retire Handbook
   One system: 8px spacing scale, six-step type scale, one radius family,
   one shadow, one line color. Cream paper, deep green, gold accents.
   Large type and high contrast for readers aged 55 to 74. Mobile first.
   Single committed light theme: every color is painted explicitly.

   Shape rule: containers 16px, controls and inputs 12px, chips and progress
   segments are pills. Depth rule: a surface carries a hairline border or the
   one tinted shadow, never both; the shadow is for the thing that floats
   (photos, the quiz card, the sticky bar, a lifted button). Labels are
   sentence case, never tracked capitals; a heading carries its own weight. */

:root {
  color-scheme: light;

  /* Color */
  --paper: #f6f4f1;
  --paper-2: #fdfcfa;
  --paper-3: #efece6;
  --ink: #17201e;
  --ink-2: #4a5654;
  --ink-3: #5f6a68;      /* captions and fine print (4.9:1 on cream) */
  --line: #dcdad4;
  --green: #114944;
  --green-2: #266360;
  --green-soft: #e4ecea;
  --gold: #d8a455;       /* on green, on buttons, stars */
  --gold-ink: #94651a;   /* the only gold allowed as text on cream (4.6:1) */
  --gold-soft: #f6e9d0;
  --on-green: #f6f4f1;
  --on-green-2: #c7d5d1;
  --danger: #a33a2a;
  --danger-soft: #f7e6e2;

  /* Space (8px scale) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --section: var(--s6);
  --gutter: var(--s3);
  --wrap: 1120px;

  /* Type scale (six steps) */
  --t-eyebrow: 0.85rem;
  --t-body: 1rem;
  --t-h3: 1.25rem;
  --t-h2: 1.75rem;
  --t-h1: 2.4rem;
  --t-stat: 2.4rem;

  /* Shape */
  --radius: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(17, 73, 68, 0.06), 0 12px 32px rgba(17, 73, 68, 0.10);
  --measure: 62ch;
  --control: 56px;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 900px) {
  :root { --section: 112px; --gutter: 40px; --t-h2: 2.25rem; --t-h1: 3.4rem; --t-stat: 3.4rem; }
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 19px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (min-width: 720px) { html { font-size: 20px; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--t-body); line-height: 1.55; font-variant-numeric: tabular-nums; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; margin: 0; color: var(--green); }
h1 { font-size: var(--t-h1); line-height: 1.1; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: normal; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
p + p { margin-top: 0.9em; }
ul, ol { margin: 0; padding-left: 1.3em; max-width: var(--measure); }
li + li { margin-top: 0.5em; }
a { color: var(--green-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
/* The parts the browser draws carry the palette too. */
::selection { background: var(--gold-soft); color: var(--ink); }
html { caret-color: var(--green); accent-color: var(--green); scrollbar-color: #a9b3b0 var(--paper-3); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
/* A label for a field or a step, in sentence case. Never above a heading. */
.eyebrow { font-family: var(--font-body); font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.01em; color: var(--green-2); }
.lede { font-size: 1.15rem; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 0.9rem; }
.note { margin-top: var(--s2); }
.center { text-align: center; }
.center p, .center ul { margin-left: auto; margin-right: auto; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.icon { width: 1.5rem; height: 1.5rem; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Layout */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.wrap--mid { max-width: calc(960px + 2 * var(--gutter)); }
.section { padding: var(--section) 0; }
.section--tight { padding: var(--s5) 0; }
.section--paper2 { background: var(--paper-2); }
.section--green { background: var(--green); color: var(--on-green); }
.section--green h1, .section--green h2, .section--green h3 { color: var(--on-green); }
.section--green .eyebrow { color: var(--gold); }
.section--green .muted, .section--green .lede { color: var(--on-green-2); }
.section-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.section-head--center { align-items: center; text-align: center; }
.section-head--center p { margin-left: auto; margin-right: auto; }
.section-head--tight { margin-bottom: var(--s3) !important; }
.section-head--flush { margin-bottom: 0 !important; }
@media (min-width: 900px) { .section-head { margin-bottom: var(--s6); } }
.stack { display: flex; flex-direction: column; gap: var(--s2); }
.stack--lg { gap: var(--s4); }
.grid { display: grid; gap: var(--s3); }
@media (min-width: 720px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Photos: one crop, one radius, one tint */
.photo { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--green-soft); box-shadow: var(--shadow); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(216, 164, 85, 0.10) 0%, rgba(17, 73, 68, 0.22) 100%); mix-blend-mode: multiply; }
.photo--flat { box-shadow: none; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--green); color: var(--on-green); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 72px; }
.topbar .logo img { height: 34px; }
@media (min-width: 720px) { .topbar .logo img { height: 40px; } }
.topbar nav { display: none; gap: var(--s4); }
.topbar nav a { color: var(--on-green); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.topbar nav a:hover { color: var(--gold); }
.topbar .end { display: flex; align-items: center; gap: var(--s3); }
.topbar .phone { display: none; align-items: center; gap: 8px; color: rgb(255 255 255 / 80%); text-decoration: none; font-weight: 400; font-size: 15px; transition: color 150ms ease; }
.topbar .phone:hover { color: #fff; }
.topbar .phone .icon { width: 16px; height: 16px; color: currentColor; }
/* Light header (404, privacy, terms, partners): logo in green and gold, the green report button. */
.topbar--light { background: #fff; color: var(--green); border-bottom: 1px solid var(--line); }
.topbar--light .btn { border-radius: 0; font-family: "DM Sans", var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.topbar--light .btn:hover { transform: none; }
.topbar--light .logo { flex: none; }
@media (max-width: 599px) { .topbar--light .wrap { gap: 12px; } .topbar--light .logo img { height: 24px; } .topbar--light .btn { min-height: 44px; padding: 6px 12px; font-size: 0.75rem; letter-spacing: 0.05em; white-space: normal; text-align: center; } }
@media (min-width: 1040px) { .topbar nav { display: flex; } .topbar .phone[href] { display: inline-flex; } }
.phone-short { display: none; }
.topbar--landing nav { gap: 16px; }
.topbar--landing nav a { font-size: 0.85rem; white-space: nowrap; }
.topbar--landing .phone[href] { display: inline-flex; min-height: 44px; white-space: nowrap; }
@media (max-width: 1039px) {
  .topbar--landing .phone [data-phone-label] { display: none; }
  .topbar--landing .phone-short { display: inline; }
}
@media (max-width: 599px) {
  .topbar--landing .wrap { flex-wrap: wrap; gap: 4px var(--s3); padding-top: 8px; padding-bottom: 8px; }
  .topbar--landing .end { width: 100%; justify-content: space-between; gap: 12px; }
  .topbar--landing .end .btn { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 1040px) and (max-width: 1319px) {
  .topbar--landing nav { display: none; }
}
.topbar--center .wrap { justify-content: center; }
.logo { display: inline-block; line-height: 0; }
.logo img { width: auto; display: block; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s1); min-height: var(--control); padding: 0 var(--s4); border: 2px solid var(--green); border-radius: var(--radius-sm); background: var(--green); color: var(--on-green); font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 rgba(17, 73, 68, 0); transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease; }
.btn:hover { background: var(--green-2); border-color: var(--green-2); color: var(--on-green); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px) scale(0.99); box-shadow: none; }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--green); }
.btn--gold:hover { background: #e0b26a; border-color: #e0b26a; color: var(--green); }
.btn--pill, .btn--sm { min-height: 48px; padding: 0 var(--s3); font-size: 0.95rem; white-space: nowrap; }
.btn--block { width: 100%; }
.btn--outline { background: transparent; color: var(--green); }
.btn--outline:hover { background: var(--green); color: var(--on-green); }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; box-shadow: none; }
.btn-note { margin-top: var(--s2); font-size: 0.9rem; color: var(--ink-2); }
.link-arrow { display: inline-flex; align-items: center; gap: var(--s1); font-weight: 700; text-decoration: none; }
.link-arrow .icon { width: 1.2rem; height: 1.2rem; transition: transform 160ms ease; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Check rows (hero trust items, final CTA) */
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); max-width: none; }
.trust li { display: inline-flex; align-items: center; gap: var(--s1); margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
.trust .icon { width: 1.3rem; height: 1.3rem; color: var(--green-2); }
.section--green .trust li { color: var(--on-green-2); }
.section--green .trust .icon { color: var(--gold); }

/* Hero */
.hero { padding: var(--s5) 0 var(--s6); overflow: hidden; }
.hero .wrap { display: grid; gap: var(--s5); align-items: center; }
.hero h1 { margin-top: var(--s2); }
.hero h1 em { color: var(--gold-ink); display: block; }
.hero .lede { margin-top: var(--s3); font-size: 1.2rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s4); }
.hero .trust { margin-top: var(--s4); }
.hero-art { aspect-ratio: 4 / 3; }
@media (max-width: 899px) { .hero h1 { font-size: 2.2rem; } }
@media (min-width: 900px) {
  .hero { padding: var(--s6) 0; }
  .hero .wrap { grid-template-columns: 1.1fr 0.9fr; gap: var(--s6); }
  .hero h1 { font-size: 2.7rem; }
  .hero-art { aspect-ratio: 4 / 5; max-height: 640px; }
}
/* Wide screens get the full headline; short laptop windows (1366x768) get a shorter hero so the button stays above the fold. */
@media (min-width: 1440px) and (min-height: 860px) { .hero { padding: var(--s7) 0; } .hero h1 { font-size: 3.15rem; } }
@media (min-width: 900px) and (max-height: 820px) { .hero { padding: var(--s4) 0 var(--s5); } .hero h1 { font-size: 2.5rem; } .hero .lede { margin-top: var(--s2); font-size: 1.1rem; } .hero-art { max-height: 520px; } }
/* The one entrance on the site: the hero settles in on load. Everything else is still. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > * { animation: rise 720ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero .hero-art { animation-delay: 140ms; }
}

/* Fact strip under the hero: process facts, one row, hairlines between them */
.facts { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts ul { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts li { margin: 0; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s2); font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
.facts li:nth-child(odd) { border-right: 1px solid var(--line); }
.facts li:nth-child(n + 3) { border-top: 1px solid var(--line); }
.facts .icon { color: var(--green-2); }
@media (min-width: 900px) {
  .facts ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts li { padding: var(--s3); border-top: 0; border-right: 0; }
  .facts li + li { border-left: 1px solid var(--line); }
}

/* How it works: a numbered sequence, the numeral is the mark */
.steps3 { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--s4); }
.steps3 .step { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--s2); align-items: start; align-content: start; margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.steps3 .num { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 0.9; color: var(--gold-ink); letter-spacing: -0.02em; }
.steps3 .step-body p { margin-top: var(--s1); color: var(--ink-2); }
@media (min-width: 900px) {
  .steps3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
  .steps3 .step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-top: var(--s3); }
  .steps3 .num { font-size: 3.4rem; }
}
.glyph { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--green-2); flex: none; }
.glyph .icon { width: 1.75rem; height: 1.75rem; }

/* Cards: a hairline, no shadow, no hover. A card is a container, not a control. */
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); }
.card p { color: var(--ink-2); }
.card--roomy { padding: var(--s5) var(--s4); }

/* Three annuity types: editorial columns, photo then heading then text */
.types { display: grid; gap: var(--s5); }
.type { display: flex; flex-direction: column; }
.type .photo { aspect-ratio: 3 / 2; box-shadow: none; margin-bottom: var(--s3); }
.type-body { display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.type-body p { color: var(--ink-2); }
.type-body .link-arrow { margin-top: auto; padding-top: var(--s1); }
@media (min-width: 720px) { .types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); } }

/* Split sections (photo + rows) */
.split { display: grid; gap: var(--s5); align-items: center; }
.split-art { aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); }
  .split--flip .split-art { order: 2; }
}
.split .section-head { margin-bottom: var(--s4); }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); max-width: none; }
.features li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); align-items: start; margin: 0; }
.features h3 { font-size: var(--t-h3); }
.features p { margin-top: var(--s1); color: var(--ink-2); }
.features .glyph { margin-top: -4px; }
.features--check .glyph { color: var(--gold-ink); }
.features--measure { max-width: var(--measure); }

/* CTA band */
.cta-band { padding: var(--s6) 0; }
.cta-band .wrap { display: grid; gap: var(--s3); align-items: center; }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s6); } }
.cta-band h2 { font-size: var(--t-h2); }
.cta-band p { color: var(--on-green-2); margin-top: var(--s1); }

/* FAQ */
.faq { display: grid; gap: var(--s2); }
.faq details { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--s3); transition: border-color 160ms ease; }
.faq details[open] { border-color: var(--green-2); }
.faq--spaced { margin-top: var(--s3); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--control); padding: var(--s2) 0; font-weight: 700; font-size: 1.08rem; color: var(--green); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--gold-ink); transition: transform 200ms ease; }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: 0 0 var(--s3); color: var(--ink-2); }

/* Final CTA */
.final-cta { text-align: center; }
.final-cta h2 { font-size: var(--t-h2); }
@media (min-width: 900px) { .final-cta h2 { font-size: var(--t-h1); } }
.final-cta h2 em { color: var(--gold); display: block; }
.final-cta .lede { margin: var(--s3) auto 0; }
.final-cta .btn { margin-top: var(--s4); }
.final-cta .trust { justify-content: center; margin-top: var(--s4); }

/* Footer */
.site-footer { background: var(--green); color: var(--on-green-2); padding: var(--s6) 0 var(--s4); font-size: 0.92rem; }
.final-cta + .site-footer { border-top: 1px solid rgba(246, 244, 241, 0.18); }
.site-footer .cols { display: grid; gap: var(--s4); }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s5); } }
.site-footer h3 { color: var(--on-green); font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; margin-bottom: var(--s2); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 var(--s1); }
.site-footer a { color: var(--on-green); text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer li a { display: inline-block; padding: 8px 0; }
.site-footer p { max-width: none; }
.site-footer .logo img { height: 40px; }
.site-footer .blurb { margin-top: var(--s2); max-width: 40ch; }
.site-footer .legal { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid rgba(246, 244, 241, 0.18); font-size: 0.85rem; }
.site-footer .legal p + p { margin-top: var(--s2); }
.site-footer .phone[hidden] { display: none; }

/* Final page (results, guide) */
.final-head { text-align: center; padding: var(--s6) 0 var(--s4); }
.final-head h1 { margin-top: var(--s2); }
.final-head .lede { margin: var(--s3) auto 0; }
.next-step { padding: 0 0 var(--s6); }
.next-step .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.next-step h2 { font-size: var(--t-h2); text-align: center; }
.panel { width: 100%; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.panel--embed iframe { display: block; width: 100%; height: 1040px; border: 0; }
@media (min-width: 900px) { .panel--embed iframe { height: 760px; } }
.panel--next { padding: var(--s4); display: grid; gap: var(--s4); }
@media (min-width: 900px) { .panel--next { padding: var(--s5); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); } }
.panel--next .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s2); align-items: start; }
@media (min-width: 900px) { .panel--next .step { grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); } }
.panel--next .num { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; }
.panel--next h3 { font-size: var(--t-h3); }
@media (min-width: 900px) { .panel--next .num { width: 64px; height: 64px; } }
.panel--next p { margin-top: var(--s1); color: var(--ink-2); }
.panel--next .note { grid-column: 1 / -1; display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); background: var(--paper); border-radius: var(--radius-sm); color: var(--ink-2); font-size: 0.95rem; }
.panel--next .note .icon { color: var(--green-2); margin-top: 2px; }
.panel--next .note p { margin: 0; color: var(--ink-2); }
.summary-grid { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.summary-item { display: flex; flex-direction: column; gap: var(--s2); }
.summary-item .eyebrow { margin-bottom: -4px; }
.summary-item--match { grid-column: 1 / -1; }
.summary-item--match h3 { margin: 0; }
select.input { cursor: pointer; appearance: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--green); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reads { display: grid; gap: var(--s4); }
.reads .read { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.reads .read p { margin-top: var(--s1); color: var(--ink-2); }
.disclaimer { font-size: 0.9rem; color: var(--ink-2); max-width: var(--measure); }
.video { box-shadow: none; }

/* Quiz. The quiz document runs a 16px base (html.quiz-doc); every other page
   keeps the larger reading size. Every step, plus the trust row and footer,
   has to fit one screen on a phone and a laptop, so the rhythm here is tight.
   Card content is centred: title, help, fields, buttons and fine print all
   share the card's centre line. The consent checkbox block stays left-aligned
   inside its own box, as a checkbox should. */
html.quiz-doc { font-size: 16px; }
.quiz-page { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
.quiz-page .topbar { position: static; }
.quiz-page .topbar .wrap { min-height: 52px; }
.quiz-page .topbar .logo img { height: 28px; }
.quiz-main { flex: 1; padding: var(--s1) 0 var(--s2); }
.quiz-main .wrap { max-width: calc(720px + 2 * var(--gutter)); }
.quiz-card { background: var(--paper-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px var(--s2); text-align: center; }
.progress { display: flex; gap: 6px; justify-content: center; margin: 0 auto var(--s2); max-width: 320px; }
.progress span { flex: 1; height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.progress span.done { background: var(--gold); }
.progress span.now { background: var(--green-2); }
.progress-label { text-align: center; font-size: 0.9rem; font-weight: 700; color: var(--ink-2); margin: -8px auto 10px; }
.q-title { font-size: 1.5rem; text-align: center; }
.q-help { text-align: center; color: var(--ink-2); margin: var(--s1) auto 0; font-size: 1rem; line-height: 1.4; }
.q-body { margin-top: 12px; }
/* The intro layout (eyebrow, large headline, checked lines), used by the email and phone steps. */
.intro { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.intro-eyebrow { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-2); }
.intro-title { font-size: 2.15rem; line-height: 1.1; max-width: 12em; margin: calc(-1 * var(--s2)) auto 0; }
.intro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; text-align: left; }
.intro-list li { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.intro-check { flex: none; display: inline-flex; color: var(--green-2); }
.intro-check .icon { width: 1.6rem; height: 1.6rem; }
@media (min-width: 720px) {
  .intro-title { font-size: 2.75rem; }
}
@media (max-width: 380px) {
  .intro-title { font-size: 1.9rem; }
  .intro-eyebrow { font-size: 0.75rem; letter-spacing: 0.1em; }
  .intro-list li { font-size: 1rem; gap: 10px; }
}
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.tiles-wide { display: grid; gap: 10px; margin-top: 10px; }
.tiles--3 { grid-template-columns: minmax(0, 1fr); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px var(--s1); text-align: center; background: var(--paper-2); border: 2px solid var(--line); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; line-height: 1.25; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.tile .icon { width: 1.6rem; height: 1.6rem; color: var(--gold-ink); }
.tile:hover { border-color: var(--green-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.tile[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.tile--wide, .tiles--3 .tile { min-height: 60px; flex-direction: row; justify-content: flex-start; padding-left: var(--s2); text-align: left; }
.tile--wide { grid-column: 1 / -1; }
.tile--wide .icon, .tiles--3 .tile .icon { width: 1.4rem; height: 1.4rem; }
.options { display: grid; gap: 8px; }
.option { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; background: var(--paper-2); border: 2px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.option::before { content: ""; flex: none; width: 1.2rem; height: 1.2rem; border: 2px solid var(--line); border-radius: 50%; background: var(--paper-2); }
.option:hover { border-color: var(--green-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.option[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); }
.option[aria-pressed="true"]::before { border-color: var(--green); background: radial-gradient(circle, var(--green) 45%, var(--paper-2) 50%); }
.helper { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 12px auto 0; max-width: 520px; color: var(--ink-2); font-size: 0.9rem; line-height: 1.35; text-align: left; }
.helper .badge { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.helper .badge img { width: 22px; }
.quiz-nav { display: flex; justify-content: center; gap: var(--s3); margin-top: 6px; }
.link-btn { background: none; border: 0; min-height: 44px; padding: 0 var(--s1); color: var(--green-2); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Trust row: a real grid, so the two phone rows share column edges and the
   whole block sits on the centre line. Four across on wider screens. */
.quiz-trust { margin-top: 12px; text-align: center; }
.quiz-trust > p, .ready > p { margin-left: auto; margin-right: auto; }
.quiz-trust .eyebrow { font-size: 0.8rem; }
.quiz-trust .trust { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 4px var(--s3); margin: 4px auto 0; }
.quiz-trust .trust li { font-size: 0.9rem; }
.quiz-trust .trust .icon { width: 1.05rem; height: 1.05rem; }
.quiz-footer { background: var(--green); color: var(--on-green-2); text-align: center; padding: 4px var(--s2); font-size: 0.95rem; }
.quiz-footer .quiz-legal { max-width: 62ch; margin: 8px auto 0; font-size: 0.75rem; line-height: 1.4; color: var(--on-green-2); }
.quiz-footer a { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 var(--s1); color: var(--on-green); text-decoration: none; margin: 0 var(--s1); }
.loading { text-align: center; padding: var(--s1) 0 var(--s2); }
.loading ul { list-style: none; padding: 0; margin: var(--s3) auto 0; max-width: 380px; display: grid; gap: 10px; text-align: left; }
.loading li { display: flex; align-items: center; gap: var(--s2); color: var(--line); font-weight: 600; margin: 0; transition: color 200ms ease; }
.loading li .icon { width: 1.4rem; height: 1.4rem; }
.loading li.on { color: var(--green); }
.loading li.on .icon { color: var(--green-2); }
.loading-bar { height: 6px; max-width: 380px; margin: var(--s2) auto 0; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.loading-bar span { display: block; height: 100%; width: 0; background: var(--green-2); transition: width 600ms ease; }
.loading-reveal { margin: var(--s3) auto 0; max-width: 380px; font-weight: 700; color: var(--green); opacity: 0; transition: opacity 300ms ease; }
.loading-reveal.on { opacity: 1; }
.income-example { margin: var(--s3) 0; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }
.income-example h3 { margin: 0 0 6px; }
.card-green .built-for, .built-for { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--gold); color: var(--ink); font-weight: 700; font-size: .8rem; }
.prepared { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 8px 0 12px; font-size: .85rem; }
.prepared-label { flex-basis: 100%; text-align: center; color: var(--ink-3); font-weight: 600; }
.prepared .chip { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green); font-weight: 700; }
.secure { display: flex; justify-content: center; align-items: center; gap: 6px; margin: var(--s1) 0 0; color: var(--ink-3); }
.secure .icon { width: 1rem; height: 1rem; }
.reassure { margin: 4px 0 10px; color: var(--green); font-weight: 600; }
.eyebrow-step { margin: 0 0 4px; text-align: center; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; color: var(--gold-ink); }
.consent-label { display: block; font-size: 1rem; margin-bottom: 4px; }
.consent-detail { display: block; font-size: .82rem; line-height: 1.45; }
.ready { text-align: center; }
.ready .eyebrow { font-size: 0.8rem; }
.ready .q-title { margin-top: 4px; }
.ready .bullets { list-style: none; padding: 0; margin: 10px auto 0; max-width: 460px; display: grid; gap: 4px; text-align: left; font-size: 0.95rem; line-height: 1.3; }
.ready .bullets li { display: flex; gap: var(--s1); align-items: flex-start; margin: 0; }
.ready .bullets .icon { width: 1.15rem; height: 1.15rem; color: var(--green-2); margin-top: 2px; flex: none; }
.ready .small { font-size: 0.875rem; line-height: 1.3; margin: 8px auto 0; max-width: 460px; }
.form { display: grid; gap: 10px; margin: 12px auto 0; max-width: 520px; }
.field { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.field label { font-weight: 700; font-size: 0.95rem; }
.field .hint { font-size: 0.875rem; color: var(--ink-2); }
.input { width: 100%; min-height: 46px; padding: 10px var(--s2); border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); color: var(--ink); font-family: var(--font-body); font-size: 1rem; transition: border-color 160ms ease, box-shadow 160ms ease; }
.input::placeholder { color: var(--ink-3); }
.input:focus { border-color: var(--green-2); outline: none; box-shadow: 0 0 0 4px var(--green-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }
select.input { cursor: pointer; appearance: auto; }
.error { color: var(--danger); font-weight: 600; font-size: 0.9rem; }
.form-error { background: var(--danger-soft); border: 1px solid var(--danger); border-radius: var(--radius-sm); padding: var(--s2) var(--s3); text-align: left; }
.form .small { font-size: 0.875rem; line-height: 1.35; color: var(--ink-2); text-align: center; max-width: none; margin: 0; }
.form .small a { color: var(--green-2); }
.consent { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.875rem; line-height: 1.4; text-align: left; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green); cursor: pointer; }
.consent p { max-width: none; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quiz-page .btn--block { min-height: 48px; font-size: 1.05rem; }
/* Phone confirmation on the call step: code button, status line, code box. */
.verify { display: grid; gap: 10px; }
.verify .verify-status { margin: 0; font-size: 0.9rem; color: var(--ink-2); text-align: left; }
.verify .verify-code { display: grid; gap: 10px; padding: var(--s2); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.verify .link-btn { justify-self: start; padding-left: 0; }
.consent:has(input[disabled]) { cursor: not-allowed; }
.input[readonly] { background: var(--paper); }
@media (min-width: 720px) {
  .quiz-page .topbar .wrap { min-height: 56px; }
  .quiz-page .topbar .logo img { height: 30px; }
  .quiz-main { padding: var(--s2) 0 var(--s2); }
  .quiz-card { padding: var(--s3) var(--s4); }
  .q-title { font-size: 2rem; }
  .q-help { font-size: 1rem; }
  .q-body { margin-top: var(--s2); }
  .tiles, .tiles-wide { gap: 12px; }
  .tiles-wide { margin-top: 12px; }
  .tile { min-height: 100px; font-size: 1rem; gap: 8px; }
  .tile .icon { width: 2rem; height: 2rem; }
  .tile--wide { min-height: 64px; }
  .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles--3 .tile { min-height: 100px; flex-direction: column; justify-content: center; padding-left: var(--s1); text-align: center; }
  .tiles--3 .tile .icon { width: 2rem; height: 2rem; }
  .options { gap: 10px; }
  .option { min-height: 48px; font-size: 1rem; }
  .helper { margin-top: var(--s2); font-size: 0.9rem; }
  .helper .badge { width: 34px; height: 34px; }
  .helper .badge img { width: 24px; }
  .quiz-nav { margin-top: var(--s1); }
  .form { gap: 12px; margin-top: var(--s2); }
  .input { min-height: 48px; }
  .ready .bullets { margin-top: 12px; gap: 6px; font-size: 0.95rem; }
  .consent { font-size: 0.9rem; padding: 12px 14px; }
  .form .small { font-size: 0.9rem; }
  .quiz-trust { margin-top: var(--s2); }
  .quiz-trust .trust { grid-template-columns: repeat(4, max-content); gap: 6px var(--s3); }
  .quiz-footer { padding: 6px var(--s2); }
}
/* Phone widths: Oleg's tile labels run to two or three lines on a 360px
   phone, so tiles get a slightly smaller face. The two long trust labels
   share one column (order 1, 2, 4, 3) so two columns fit a 360px phone. */
@media (max-width: 719px) {
  .tile { font-size: 0.95rem; line-height: 1.2; padding: 8px 6px; gap: 5px; }
  .options { gap: 8px; }
  .option { min-height: 44px; }
  .q-help { line-height: 1.35; }
  .helper { margin-top: 10px; }
  .quiz-nav { margin-top: 4px; }
  .q-help { font-size: 0.95rem; }
  .helper { font-size: 0.9rem; }
  .quiz-trust .trust li:nth-child(3) { order: 4; }
  .quiz-trust .trust li:nth-child(4) { order: 3; }
}
/* The two form steps (name and email, mobile number) carry the most copy:
   three value bullets with a rate footnote, then the consent box. Tighter
   type there, and under 860px tall the trust row gives way to the card. */
.quiz-form-step .quiz-card { padding-top: 14px; padding-bottom: 14px; }
.quiz-form-step .q-help { font-size: 0.95rem; line-height: 1.35; }
.quiz-form-step .ready .bullets { font-size: 0.9rem; line-height: 1.25; gap: 3px; margin-top: 8px; }
.quiz-form-step .ready .small { font-size: 0.875rem; line-height: 1.3; margin-top: 6px; }
.quiz-form-step .form { gap: 8px; margin-top: 10px; }
.quiz-form-step .field { gap: 3px; }
.quiz-form-step .field .hint { font-size: 0.875rem; }
.quiz-form-step .form .small { font-size: 0.875rem; line-height: 1.35; }
.quiz-form-step .consent { font-size: 0.875rem; line-height: 1.4; padding: 10px 12px; }
.quiz-form-step .quiz-nav { margin-top: 4px; }
.quiz-form-step .verify { gap: 8px; }
.quiz-form-step .verify .verify-status { font-size: 0.9rem; line-height: 1.3; text-align: center; }
.quiz-form-step .verify .verify-code { gap: 8px; padding: 10px; }
.quiz-form-step .verify .link-btn { justify-self: center; padding: 0 var(--s1); min-height: 44px; font-size: 0.95rem; }
.quiz-form-step .verify .btn--outline { min-height: 44px; font-size: 1rem; }
/* Keep the phone-step disclosures and unchecked boxes visible before an OTP.
   Verification disables the controls, never the reader's ability to review them. */
.quiz-form-step .field:has(#phone[readonly]) .hint { display: none; }
@media (min-width: 720px) {
  .quiz-form-step .quiz-card { padding-top: 18px; padding-bottom: 18px; }
  .quiz-form-step .ready .bullets { font-size: 0.92rem; gap: 4px; }
  .quiz-form-step .ready .small { font-size: 0.875rem; }
  .quiz-form-step .consent { font-size: 0.9rem; }
  .quiz-form-step .form .small { font-size: 0.9rem; }
  .quiz-form-step .form { gap: 10px; }
}
@media (max-height: 860px) {
  .quiz-form-step .quiz-trust { display: none; }
  .quiz-form-step .quiz-main { padding-bottom: var(--s1); }
}
/* Short screens (a phone with Safari's bars open, a 1366x768 laptop window):
   the form steps keep the title, the fields, the consent and the button;
   the value bullets, their rate footnote and the help paragraph are hidden. */
@media (max-height: 760px) {
  .quiz-form-step .ready .small { display: none; }
  .quiz-form-step .quiz-footer { padding: 10px var(--s2); }
}
/* Laptop windows: the browser's own chrome takes 90 to 150px, so a 900px
   screen shows about 780. Slightly shorter answers keep the six-option
   list on one screen without losing the trust row. */
@media (min-width: 720px) and (max-height: 800px) {
  .options { gap: 8px; }
  .option { min-height: 44px; }
  .tile { min-height: 92px; }
}
/* Short laptop windows (a 1366x768 or 1536x864 screen with the browser's own
   chrome leaves 650 to 760px): tighter card, no trust row. */
@media (min-width: 720px) and (max-height: 760px) {
  .quiz-trust { display: none; }
  .quiz-main { padding: var(--s1) 0 var(--s1); }
  .quiz-card { padding: 20px var(--s4); }
  .q-title { font-size: 1.75rem; }
  .q-body { margin-top: 12px; }
  .tile, .tiles--3 .tile { min-height: 88px; }
  .tile--wide { min-height: 56px; }
  .options { gap: 8px; }
  .option { min-height: 44px; }
  .helper { margin-top: 10px; }
  .quiz-nav { margin-top: 4px; }
  .quiz-footer { padding: 10px var(--s2); }
  .quiz-form-step .form { gap: 6px; }
  .quiz-form-step .quiz-nav { margin-top: 0; }
}
/* Short phones (an iPhone with Safari's bars open shows about 660px): the
   card, Back and the footer take priority; the trust row returns when there
   is room. */
@media (max-width: 719px) and (max-height: 700px) {
  .quiz-main { padding-bottom: var(--s1); }
  .quiz-footer { padding: 10px var(--s2); }
  .quiz-form-step .q-title { font-size: 1.4rem; }
  .quiz-form-step .form { gap: 6px; }
  .quiz-form-step .consent { font-size: 0.875rem; line-height: 1.35; }
  .quiz-form-step .form .small { font-size: 0.875rem; }
  .quiz-form-step .quiz-nav { margin-top: 0; }
}
/* The smallest case: an older iPhone with Safari's bars open (about 553px). */
@media (max-height: 600px) {
  .quiz-main { padding: 4px 0; }
  .quiz-card { padding: 12px var(--s2); }
  .quiz-q-step .helper, .ready .eyebrow { display: none; }
  .q-title { font-size: 1.35rem; }
  .form .small, .consent { font-size: 0.875rem; }
  .tile { min-height: 76px; }
  .tile--wide, .tiles--3 .tile { min-height: 52px; }
  .option { min-height: 44px; }
  .input { min-height: 42px; }
  .quiz-footer { padding: 8px var(--s2); }
}

/* Legal pages */
.legal h2 { font-size: 1.4rem; margin-top: var(--s4); }
.legal .lede { margin-top: var(--s2); }
.legal h1 + h2 { margin-top: var(--s3); }
.legal p, .legal ul { margin-top: var(--s2); }

/* Motion: sections are still. [data-reveal] is unused on the pilot pages and stays for the hook in rh.js. */
[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:hover, .card:hover, .tile:hover, .option:hover, .steps3 .step-body:hover { transform: none; }
}

/* Confirmation page (results): banner, numbered steps, evidence cards */
.stephead { text-align: center; margin-bottom: var(--s3); }
.stephead h2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); font-size: var(--t-h2); }
.stephead--big h2 { font-size: var(--t-h2); }
@media (min-width: 900px) { .stephead--big h2 { font-size: 2.6rem; } }
.stephead .lede { margin: var(--s2) auto 0; }
.stephead--big { margin-bottom: var(--s5); }
.num-badge { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; line-height: 1; }
.h2 { font-size: var(--t-h2); }
.panel--pad { padding: var(--s4); }
.panel--pad h3 + p, .panel--pad .glyph + h3 { margin-top: var(--s2); }
.panel--pad .glyph { margin-bottom: var(--s2); }
.panel.center p { margin-left: auto; margin-right: auto; }
.row-icon { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); align-items: start; }
.row-icon p { margin-top: var(--s1); color: var(--ink-2); max-width: none; }
.stack--sm { gap: var(--s1); }

/* Sources and contact line */
.sources { background: var(--paper-3); border-top: 1px solid var(--line); padding: var(--s5) 0; }
.sources h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink-2); margin-bottom: var(--s2); }
.sources-legal p { font-size: 0.82rem; line-height: 1.55; color: var(--ink-2); max-width: none; }
.sources hr { border: 0; border-top: 1px solid var(--line); margin: var(--s3) 0; }
.sources-legal p { color: var(--ink-3); }
.contact-line { padding: var(--s4) 0; }
.contact-line p { max-width: none; }
.contact-line a { font-weight: 700; text-decoration: none; }
.contact-line .phone[hidden] { display: none; }

/* Report page (post-quiz): situation table, approach card, numbers, booking */
.topbar--report .wrap { justify-content: center; }
.topbar--report .wrap:has(.phone[href]) { justify-content: space-between; }
.topbar--report .wrap:not(:has(.phone[href])) .end { display: none; }
.topbar--report .phone[href] { display: inline-flex; }
.report-hero { padding: var(--s5) 0 var(--s3); }
.report-hero h1 { margin-top: var(--s2); font-size: var(--t-h2); }
@media (min-width: 900px) { .report-hero h1 { font-size: 2.6rem; } }
.report-hero .lede { margin-top: var(--s2); }
.report-cta { margin-top: var(--s4); }
.report-cta .btn-note { margin-top: var(--s2); }
.rsec { padding: var(--s4) 0; }
.rsec .eyebrow { margin-bottom: var(--s1); }
.rsec h2 { font-size: var(--t-h2); }
.rsec h2 + .lede { margin-top: var(--s2); }
.kv { margin-top: var(--s3); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.kv div { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border-top: 1px solid var(--line); }
.kv div:first-child { border-top: 0; }
.kv span { color: var(--ink-2); }
.kv strong { color: var(--green); text-align: right; }
@media (max-width: 719px) { .kv div { flex-direction: column; gap: 2px; } .kv strong { text-align: left; } }
.card-green { margin-top: var(--s3); background: var(--green); color: var(--on-green); border-radius: var(--radius); padding: var(--s4); }
.card-green h3 { color: var(--gold); font-size: 1.45rem; }
.card-green h4 { color: var(--on-green); font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; margin: var(--s3) 0 0; }
.card-green .tag { color: var(--on-green-2); margin-top: var(--s1); font-size: 1.05rem; }
.card-green ul { list-style: none; padding: 0; margin: var(--s3) 0 0; max-width: none; display: grid; gap: var(--s2); }
.card-green li { display: flex; gap: var(--s1); align-items: flex-start; margin: 0; }
.card-green li .icon { color: var(--gold); flex: none; margin-top: 3px; width: 1.3rem; height: 1.3rem; }
.card-green p { color: var(--on-green-2); max-width: none; }
.card-green .fine { font-size: 0.8rem; line-height: 1.5; color: rgba(246, 244, 241, 0.62); margin-top: var(--s3); }
.howto { margin-top: var(--s3); }
.howto h3 { font-family: var(--font-body); font-size: 1.05rem; color: var(--green); }
.howto ol { list-style: none; padding: 0; margin: var(--s2) 0 0; display: grid; gap: var(--s2); max-width: none; }
.howto li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s2); align-items: start; margin: 0; }
.howto .num-badge { width: 40px; height: 40px; font-size: 1rem; }
.compare { margin-top: var(--s3); display: grid; gap: var(--s1); }
.compare > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); }
.compare > div.hi { background: var(--green-soft); border-color: rgba(17, 73, 68, 0.3); }
.compare span { color: var(--ink-2); }
.compare strong { text-align: right; }
.compare .hi strong { color: var(--green); }
.cta-band-soft { margin-top: var(--s4); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius); padding: var(--s4); text-align: center; }
.cta-band-soft h2 { font-size: var(--t-h2); }
.cta-band-soft p { margin: var(--s2) auto 0; }
.cta-band-soft .btn { margin-top: var(--s3); }
.cta-band-soft .btn-note { margin-top: var(--s2); }
.badges { display: grid; gap: var(--s2); margin-top: var(--s4); }
@media (min-width: 720px) { .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.badges > div { display: flex; gap: var(--s1); align-items: center; padding: var(--s2) var(--s3); background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 600; font-size: 0.95rem; }
.badges .icon { color: var(--green-2); flex: none; }
.call-steps { margin-top: var(--s3); }
.call-steps ol { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); max-width: none; }
.call-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s2); margin: 0; }
.call-steps h3 { font-family: var(--font-body); font-size: 1.1rem; color: var(--ink); }
.call-steps p { color: var(--ink-2); margin-top: 4px; }
.call-steps .fine { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); font-style: italic; max-width: none; }
.book { margin-top: var(--s3); background: var(--gold-soft); border: 1px solid var(--gold); border-radius: var(--radius); padding: var(--s3); }
@media (min-width: 720px) { .book { padding: var(--s4); } }
.book .trust { justify-content: center; margin-top: var(--s3); }
.book .or { text-align: center; margin-top: var(--s2); color: var(--ink-2); font-size: 0.95rem; max-width: none; }
.book .or a { font-weight: 700; text-decoration: none; }
.stickybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--paper-2); border-top: 1px solid var(--line); box-shadow: 0 -4px 20px rgba(17, 32, 30, 0.08); transform: translateY(110%); transition: transform 240ms ease; }
.stickybar.on { transform: none; }
.stickybar .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 72px; }
.stickybar strong { display: block; font-size: 0.95rem; }
.stickybar span { display: block; font-size: 0.85rem; color: var(--ink-2); }
.stickybar .btn { min-height: 48px; padding: 0 var(--s3); font-size: 1rem; white-space: nowrap; }
.stickybar[hidden] { display: none; }
body.has-stickybar { padding-bottom: 80px; }
@media (min-width: 900px) { .stickybar { display: none; } body.has-stickybar { padding-bottom: 0; } }
.rsec .lede { margin-top: var(--s2); }

/* Concise landing-page process and disclosures. */
.process-note { max-width: 70ch; margin: var(--s4) auto var(--s3); text-align: center; color: var(--ink-2); font-size: .9rem; }
.final-cta .btn-note { color: var(--on-green-2); margin-left: auto; margin-right: auto; }
/* Anchored sections land under the sticky header without this. */
main section[id], main div[id] { scroll-margin-top: 88px; }
/* Booking page: the quiz layout, calendar in a panel, the report link first. */
.book-head { text-align: center; padding: var(--s3) 0 var(--s2); }
.book-head h1 { margin-top: var(--s1); font-size: var(--t-h2); }
.book-head .eyebrow { margin-left: auto; margin-right: auto; }
.book-head .lede { margin: var(--s2) auto 0; font-size: 1.05rem; max-width: 40rem; }
.book-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s3); margin-top: var(--s2); }
.book-actions:not(:has(> :not(.hidden))) { display: none; }
.book-status { text-align: center; margin: var(--s2) auto 0; font-weight: 600; color: var(--ink-2); }
.booking-embed { height: 760px; margin: var(--s2) 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); }
.booking-embed iframe { display: block; width: 100%; height: 100%; }
/* Phones: a tighter heading so the whole month grid and time zone sit above the fold
   (Oleg's mobile walk, 2026-10-06). The eyebrow is dropped there; the heading carries the step. */
@media (max-width: 600px) {
  .book-head { padding: var(--s2) 0 var(--s1); }
  .book-head .eyebrow { display: none; }
  .book-head h1 { margin-top: 0; font-size: 1.55rem; }
  .book-head .lede { margin-top: var(--s1); font-size: 1rem; line-height: 1.45; }
}
.book-fine { margin: var(--s3) auto 0; text-align: center; }

/* Results page: a personal appointment brief. The one bold element is the
   appointment ticket in the hero; everything after it is quiet, left-aligned
   editorial layout on hairlines, with the real call durations as numerals. */
.rs-hero { background: var(--green); color: var(--on-green); padding: var(--s5) 0 var(--s6); }
.rs-hero-grid { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 960px) { .rs-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s6); } .rs-hero { padding: var(--s6) 0 var(--s7); } }
.rs-hero h1 { color: var(--on-green); font-size: var(--t-h1); }
.rs-hero-sub { margin-top: var(--s2); color: var(--on-green-2); font-size: 1.15rem; max-width: 34ch; }
.rs-status { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid rgba(246, 244, 241, 0.22); max-width: 36rem; }
.rs-status-label { color: var(--gold); font-weight: 700; font-size: var(--t-eyebrow); }
.rs-status h2 { margin-top: 4px; color: var(--on-green); font-size: 1.5rem; }
.rs-status p { color: var(--on-green-2); }
.rs-status > div { margin-top: var(--s1); }
.rs-status .btn { margin-top: var(--s3); }
.rs-status a:not(.btn) { color: var(--gold); }

.rs-ticket { position: relative; background: var(--paper-2); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--s3); }
@media (min-width: 720px) { .rs-ticket { padding: var(--s4); } }
.rs-ticket-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--green); }
.rs-legs { list-style: none; margin: var(--s3) 0 0; padding: 0; max-width: none; display: grid; gap: 0; }
.rs-leg { position: relative; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: var(--s2); margin: 0; padding: var(--s3) 0; border-top: 1px dashed var(--line); }
.rs-leg + .rs-leg { margin-top: 0; }
.rs-leg-len { color: var(--ink-3); font-size: 0.9rem; line-height: 1; }
.rs-leg-len strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 0.95; color: var(--gold-ink); letter-spacing: -0.02em; margin-bottom: 4px; }
.rs-leg-mode { display: flex; align-items: center; gap: var(--s1); font-weight: 700; color: var(--green); }
.rs-leg-mode .icon { width: 1.15rem; height: 1.15rem; color: var(--green-2); }
.rs-leg-who { margin-top: 2px; font-weight: 600; }
.rs-leg-what { margin-top: 4px; color: var(--ink-2); font-size: 0.95rem; }
/* Perforation: two notches where the stub tears off */
.rs-ticket-foot { position: relative; margin: 0 calc(-1 * var(--s3)); padding: var(--s2) var(--s3) 0; border-top: 2px dotted var(--line); color: var(--green); font-weight: 700; max-width: none; }
@media (min-width: 720px) { .rs-ticket-foot { margin: 0 calc(-1 * var(--s4)); padding: var(--s3) var(--s4) 0; } }
.rs-ticket-foot::before, .rs-ticket-foot::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); }
.rs-ticket-foot::before { left: -10px; }
.rs-ticket-foot::after { right: -10px; }

.rs-section { padding: var(--section) 0; }
.rs-section--paper { background: var(--paper-2); border-block: 1px solid var(--line); }
.rs-split { display: grid; gap: var(--s4); }
@media (min-width: 960px) { .rs-split { grid-template-columns: 19rem minmax(0, 1fr); gap: var(--s6); } .rs-split-head { position: sticky; top: 104px; align-self: start; } }
.rs-split-head { display: grid; gap: var(--s2); align-content: start; }
.rs-split-head p { color: var(--ink-2); }

.rs-file { margin: 0; display: grid; }
.rs-file-row { display: grid; gap: var(--s1); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.rs-file-row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .rs-file-row { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s3); } }
.rs-file dt { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--green); line-height: 1.3; }
.rs-file dd { margin: 0; color: var(--ink-2); min-width: 0; }
.rs-file dd p:empty { display: none; }
.rs-ask { margin-top: var(--s2); padding: var(--s2); background: var(--gold-soft); border-radius: var(--radius-sm); color: var(--ink); max-width: none; }
.rs-ask strong { color: var(--gold-ink); }

.rs-plan { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; }
.rs-stage { position: relative; display: grid; gap: var(--s1); margin: 0; padding: 0 0 var(--s5) var(--s4); }
.rs-stage + .rs-stage { margin-top: 0; }
.rs-stage::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 0; width: 2px; background: var(--line); }
.rs-stage:last-child { padding-bottom: 0; }
.rs-stage:last-child::before { display: none; }
.rs-stage::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-2); border: 3px solid var(--green); }
.rs-stage:first-child::after { background: var(--green); }
@media (min-width: 720px) { .rs-stage { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--s3); } }
.rs-when { font-weight: 700; color: var(--green); }
.rs-when span { display: block; font-weight: 400; font-size: 0.92rem; color: var(--ink-3); }
.rs-stage-body { min-width: 0; }
.rs-stage-body h3 { font-size: var(--t-h3); }
.rs-stage-body h3 + p { margin-top: var(--s1); }
.rs-stage-body p { color: var(--ink-2); }
.rs-ready-label { margin-top: var(--s2); font-weight: 700; color: var(--ink) !important; }
.rs-ready { margin-top: var(--s1); padding: 0; list-style: none; display: grid; gap: 6px; }
.rs-ready li { margin: 0; position: relative; padding-left: 1.4em; color: var(--ink); }
.rs-ready li::before { content: ""; position: absolute; left: 0.2em; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.rs-note { margin-top: var(--s2); font-size: 0.95rem; }
.rs-arrow { font-weight: 700; text-decoration: none; }
.rs-arrow::after { content: " \2192"; }
.rs-arrow:hover { text-decoration: underline; }

.rs-why { background: var(--green); color: var(--on-green); padding: var(--section) 0; }
.rs-why h2 { color: var(--on-green); max-width: 18ch; }
.rs-why-grid { margin-top: var(--s5); display: grid; gap: var(--s4); }
@media (min-width: 900px) { .rs-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }
.rs-why-grid > div { padding-top: var(--s3); border-top: 2px solid var(--gold); }
.rs-why h3 { color: var(--on-green); font-size: 1.35rem; }
.rs-why p { margin-top: var(--s1); color: var(--on-green-2); }

.rs-checks { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; gap: var(--s3) var(--s4); }
@media (min-width: 720px) { .rs-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rs-checks li { margin: 0; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--s2); }
.rs-checks .icon { color: var(--green-2); margin-top: 2px; }
.rs-checks h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.rs-checks p { margin-top: 4px; color: var(--ink-2); font-size: 0.95rem; }

/* Consent reads as a simple choice: checkbox and the request in bold, the
   permission as fine print underneath. No box around it. */
.form .consent, .quiz-form-step .consent { background: none; border: 0; padding: var(--s1) 0 0; gap: 10px; }
.consent .consent-label { font-size: 1rem; line-height: 1.35; margin-bottom: 6px; color: var(--ink); }
.consent .consent-detail { font-size: .75rem; line-height: 1.45; color: var(--ink-3); font-weight: 400; }
#sms-consent-links { font-size: .75rem; color: var(--ink-3); margin-top: 6px; }

/* Question steps: an open layout on white, spaced like the leading annuity
   quizzes (Oleg, 2026-09-30). Big two-answer tiles, a plain "choose" prompt,
   a larger helper badge, then a quiet trust row under a hairline. The
   lead-device disclosure moves to the two steps that collect contact
   details; question steps keep the privacy and terms links. */
.quiz-page:not(.quiz-form-step) .quiz-legal { display: none; }
.quiz-q-step { background: #fff; }
.quiz-q-step .quiz-main { padding: var(--s3) 0 var(--s4); }
.quiz-q-step .progress { max-width: 300px; gap: 8px; margin-bottom: var(--s4); }
.quiz-q-step .progress span { height: 5px; }
.quiz-q-step .quiz-card { background: transparent; box-shadow: none; padding: 0; }
.quiz-q-step .q-title { font-size: 1.85rem; line-height: 1.15; text-wrap: balance; }
.quiz-q-step .q-help { margin-top: var(--s3); color: var(--ink); font-size: 1.05rem; }
.quiz-q-step .q-body { margin-top: var(--s2); }
.quiz-q-step .tiles, .quiz-q-step .tiles-wide, .quiz-q-step .options { gap: 12px; }
.quiz-q-step .tile, .quiz-q-step .option { background: #fff; border: 1.5px solid var(--line); }
.quiz-q-step .tile { min-height: 96px; }
.quiz-q-step .tile .icon { width: 2.2rem; height: 2.2rem; }
.quiz-q-step .tiles--2 .tile { min-height: 168px; gap: 20px; padding: var(--s2); font-size: 1.15rem; }
.quiz-q-step .tiles--2 .tile .icon { width: 3.4rem; height: 3.4rem; }
.quiz-q-step .tile--wide, .quiz-q-step .tiles--3 .tile { min-height: 64px; }
.quiz-q-step .tile--wide .icon, .quiz-q-step .tiles--3 .tile .icon { width: 1.6rem; height: 1.6rem; }
.quiz-q-step .option { min-height: 52px; font-size: 1.02rem; }
.quiz-q-step .helper { margin-top: var(--s4); gap: 16px; max-width: 560px; font-size: 1.05rem; line-height: 1.45; }
.quiz-q-step .helper .badge { width: 60px; height: 60px; background: var(--paper); border: 3px solid #fff; box-shadow: 0 2px 10px rgba(17, 73, 68, 0.16); }
.quiz-q-step .helper .badge img { width: 60px; max-width: none; }
.quiz-q-step .helper .badge--face img { width: 100%; height: 100%; object-fit: cover; }
.quiz-q-step .quiz-nav { margin-top: var(--s2); }
.quiz-trust-label { margin: 0 auto var(--s2); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.quiz-q-step .quiz-trust { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.quiz-q-step .quiz-trust .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); max-width: 520px; }
.quiz-q-step .quiz-trust .trust li { flex-direction: column; gap: 8px; font-size: 0.92rem; line-height: 1.25; color: var(--ink-3); text-align: center; }
.quiz-q-step .quiz-trust .trust .icon { width: 1.8rem; height: 1.8rem; color: var(--ink-3); }
.quiz-q-step .quiz-trust .trust li:nth-child(n) { order: 0; }
.quiz-q-step .quiz-footer { padding: 8px var(--s1); }
.quiz-q-step .quiz-footer a { margin: 0; padding: 0 10px; font-size: 0.9rem; }
@media (min-width: 720px) {
  .quiz-q-step .quiz-main { padding-top: var(--s4); }
  .quiz-q-step .q-title { font-size: 2.5rem; }
  .quiz-q-step .tiles--2 .tile { min-height: 190px; }
  .quiz-q-step .tile { min-height: 120px; }
  .quiz-q-step .tiles--3 .tile { min-height: 120px; }
}

/* Form steps (email, phone) in the same open layout: a pill over the title,
   bold-led bullets, first and last name side by side, an email field with an
   icon, a big gold button and the guide face beside the reassurance. The
   consent checkbox stays above the button, lighter but fully readable. */
.quiz-form-step { background: #fff; }
.quiz-form-step .quiz-main { padding: var(--s3) 0 var(--s4); }
.quiz-form-step .progress { max-width: 300px; gap: 8px; margin-bottom: var(--s3); }
.quiz-form-step .progress span { height: 5px; }
.quiz-form-step .quiz-card { background: transparent; box-shadow: none; padding: 0; }
.step-pill { display: inline-block; margin: 0 auto 12px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--green-soft); color: var(--green); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.step-pill--gold { background: var(--gold-soft); color: var(--gold-ink); }
.quiz-form-step .q-title { font-size: 1.75rem; line-height: 1.15; text-wrap: balance; }
.quiz-form-step .ready .bullets { margin-top: var(--s2); gap: 12px; max-width: 360px; font-size: 1rem; line-height: 1.4; }
.quiz-form-step .ready .bullets strong { color: var(--ink); }
.quiz-form-step .ready .bullets .icon { color: var(--green-2); width: 1.25rem; height: 1.25rem; }
.form-ask { margin: var(--s3) 0 0; font-family: var(--font-body); font-size: 1.2rem; font-weight: 700; color: var(--ink); text-align: center; }
.quiz-form-step .form { gap: 12px; margin-top: var(--s2); }
.quiz-form-step .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.quiz-form-step .verify-code .field label, .quiz-form-step .field label[for="phone"] { position: static; width: auto; height: auto; overflow: visible; clip: auto; text-align: left; }
.quiz-form-step .input { min-height: 58px; background: #f7f7f5; border: 1.5px solid var(--line); font-size: 1.05rem; }
/* The rule above resets the border, so steps 8 and 9 restate the red one for a refused field. */
.quiz-form-step .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
.name-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.field--icon { position: relative; }
.field--icon .field-icon { position: absolute; left: 0; top: 0; width: 52px; height: 58px; display: flex; align-items: center; justify-content: center; border-right: 1.5px solid var(--line); color: var(--ink-3); pointer-events: none; }
.field--icon .field-icon .icon { width: 1.3rem; height: 1.3rem; }
.field--icon .input { padding-left: 68px; }
.quiz-form-step .btn--block { min-height: 60px; font-size: 1.2rem; }
.btn--go { justify-content: space-between; padding: 0 var(--s3); }
.btn--go .icon { width: 1.5rem; height: 1.5rem; }
.quiz-form-step .secure { margin-top: 4px; font-size: 0.82rem; }
.quiz-form-step .helper { margin-top: var(--s3); gap: 14px; max-width: 420px; font-size: 1rem; color: var(--ink-2); }
.quiz-form-step .helper .badge { width: 56px; height: 56px; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(17, 73, 68, 0.16); }
.quiz-form-step .helper .badge--face img { width: 100%; height: 100%; object-fit: cover; }
.quiz-form-step .consent { background: transparent; border: 0; padding: 4px 0; color: var(--ink-2); }
.quiz-form-step .consent .consent-label { font-size: 0.95rem; color: var(--ink); }
.quiz-form-step .consent .consent-detail { font-size: 0.8rem; color: var(--ink-3); }
.quiz-form-step .quiz-nav { margin-top: var(--s1); }
.quiz-form-step .quiz-trust { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--line); }
.quiz-form-step .quiz-trust .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); max-width: 520px; }
.quiz-form-step .quiz-trust .trust li { flex-direction: column; gap: 8px; font-size: 0.92rem; line-height: 1.25; color: var(--ink-3); text-align: center; order: 0; }
.quiz-form-step .quiz-trust .trust .icon { width: 1.8rem; height: 1.8rem; color: var(--ink-3); }
@media (min-width: 720px) {
  .quiz-form-step .q-title { font-size: 2.2rem; }
}
/* Phone step: the number and its code check share one box; the consent text
   that the finish button accepts sits right above that button, small but at
   full fine-print contrast (never pale grey). */
.phone-box { padding: var(--s2); border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 1px 3px rgba(17, 73, 68, 0.06); display: grid; gap: 12px; }
.phone-box .field { text-align: left; }
.field--prefix { position: relative; }
.field--prefix .field-prefix { position: absolute; left: 0; top: calc(0.95rem * 1.5 + 4px); width: 76px; height: 58px; display: flex; align-items: center; justify-content: center; border-right: 1.5px solid var(--line); font-size: 1rem; font-weight: 600; color: var(--ink-2); pointer-events: none; }
.field--prefix .input { padding-left: 92px; }
.quiz-form-step .phone-box .verify { gap: 8px; }
.quiz-form-step .phone-box .btn--outline { min-height: 52px; font-size: 1.05rem; }
.quiz-form-step .phone-box .hint { text-align: left; font-size: 0.82rem; }
.consent-note { max-width: none; margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-2); text-align: center; }
.consent-note .consent-label, .consent-note .consent-detail { display: inline; font-size: inherit; font-weight: 400; margin: 0; color: inherit; }
.consent-links { max-width: none; margin: -6px 0 0; font-size: 0.78rem; color: var(--ink-2); text-align: center; }
.consent-links a { color: var(--green-2); }
.quiz-form-step #sms-consent-links { font-size: 0.8rem; margin-top: -4px; }
/* Readability for older readers (Oleg, 2026-09-30): fewer words, larger type
   and more air on the email and phone steps. Fine print stays readable. */
.quiz-form-step .prepared-label { display: none; }
.quiz-form-step .prepared { margin: 12px auto 4px; }
.quiz-form-step .ready .bullets { width: fit-content; max-width: 100%; margin: var(--s3) auto 0; gap: 14px; font-size: 1.2rem; line-height: 1.35; }
.quiz-form-step .ready .bullets .icon { width: 1.45rem; height: 1.45rem; margin-top: 1px; }
.quiz-form-step .form-ask { margin-top: var(--s4); font-size: 1.3rem; }
.quiz-form-step .q-help { font-size: 1.1rem; line-height: 1.45; margin-top: 12px; }
.quiz-form-step .input { font-size: 1.15rem; }
.quiz-form-step .field .hint { font-size: 0.95rem; line-height: 1.4; color: var(--ink-2); }
.quiz-form-step .secure { font-size: 0.92rem; line-height: 1.4; margin-top: 8px; }
.quiz-form-step .consent { font-size: 1rem; line-height: 1.5; }
.quiz-form-step .consent p { color: var(--ink-2); }
.quiz-form-step .consent-note { font-size: 0.85rem; line-height: 1.5; margin-top: 4px; }
.quiz-form-step .consent-links { font-size: 0.85rem; }
.quiz-form-step .phone-box { padding: var(--s3) var(--s2); gap: 14px; }
.quiz-form-step .consent { font-size: 0.92rem; }
/* Email step report preview (2026-10-01): a compact, read-only taste of the
   report above the ask, kept short so the email field and button stay on
   the first screen of a 390px phone. */
.report-preview { margin: var(--s2) auto 0; padding: 12px var(--s2); max-width: 420px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-2); text-align: left; }
.report-preview-label { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.report-preview-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.report-preview-types li { margin: 0; font-size: 0.98rem; line-height: 1.3; }
.report-preview-types strong { display: block; color: var(--green); }
.report-preview-types span { color: var(--ink-2); font-size: 0.92rem; }
.report-preview-note { margin: 8px 0 0; font-size: 0.92rem; color: var(--ink-2); font-style: italic; }
.quiz-form-step .ready .bullets { margin-top: var(--s2); gap: 8px; }
.quiz-form-step .form-ask { margin-top: var(--s2); }

/* Real phones show 650 to 750px with the browser's bars open (Safari, Facebook's
   in-app browser). Keep every line of the email and phone steps, but tighten the
   spacing so the email field and button still fit on the first screen. */
@media (max-height: 780px) {
  .quiz-form-step .quiz-main { padding-top: 12px; }
  .quiz-form-step .progress { margin-bottom: 12px; }
  .quiz-form-step .step-pill { margin-bottom: 6px; padding: 4px 12px; font-size: 0.72rem; }
  .quiz-form-step .q-title { font-size: 1.5rem; }
  .quiz-form-step .prepared { margin: 6px auto 0; font-size: 0.8rem; }
  .quiz-form-step .ready .bullets { margin-top: 10px; gap: 4px; font-size: 1.05rem; }
  .quiz-form-step .ready .bullets .icon { width: 1.2rem; height: 1.2rem; }
  .report-preview { margin-top: 10px; padding: 8px 12px; }
  .report-preview-label { margin-bottom: 4px; font-size: 0.7rem; }
  .report-preview-types { gap: 3px; }
  .report-preview-types li { font-size: 0.92rem; line-height: 1.25; }
  .report-preview-types span { font-size: 0.85rem; }
  .report-preview-note { margin-top: 4px; font-size: 0.85rem; }
  .quiz-form-step .form-ask { margin-top: 12px; font-size: 1.1rem; }
  .quiz-form-step .form { gap: 8px; margin-top: 8px; }
  .quiz-form-step .input { min-height: 50px; }
  .field--icon .field-icon { height: 50px; }
  .quiz-form-step .btn--block { min-height: 54px; }
  .quiz-form-step .q-help { margin-top: 6px; font-size: 1rem; }
}
/* Email step, decluttered (2026-10-01): the bullets and the type list are one box. */
.report-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.report-checks li { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.report-checks .icon { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 2px; color: var(--green-2); }
.report-checks small { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--ink-3); }
.report-preview { padding: 14px var(--s2); }
.report-preview-label { margin-bottom: 10px; }
@media (max-height: 780px) {
  .report-checks { gap: 6px; }
  .report-checks li { font-size: 1.02rem; }
  .report-preview { padding: 10px 14px; }
  .report-preview-label { margin-bottom: 6px; }
}
/* Text-only report notice on the email step (2026-10-01). */
.text-notice { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 14px auto 0; max-width: 420px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--ink); font-weight: 600; font-size: 1rem; line-height: 1.35; }
.text-notice .icon { flex: none; width: 1.3rem; height: 1.3rem; color: var(--gold-ink); }
@media (max-height: 780px) { .text-notice { margin-top: 10px; padding: 8px 12px; font-size: 0.95rem; } }

/* Question steps, compact (Oleg, 2026-10-01): "What to expect" ends above 600px on a
   390px phone even on the five-answer first question, so it shows on short phones too
   and is no longer hidden below 700px. */
.quiz-q-step .quiz-main { padding-top: 14px; }
.quiz-q-step .progress { margin-bottom: 18px; }
.quiz-q-step .q-title { font-size: 1.6rem; }
.quiz-q-step .q-help { margin-top: 10px; font-size: 1rem; }
.quiz-q-step .q-body { margin-top: 12px; }
.quiz-q-step .tiles, .quiz-q-step .tiles-wide { gap: 10px; }
.quiz-q-step .tiles-wide { margin-top: 10px; }
.quiz-q-step .tile { min-height: 72px; gap: 6px; }
.quiz-q-step .tile .icon { width: 1.7rem; height: 1.7rem; }
.quiz-q-step .tile--wide { min-height: 52px; }
.quiz-q-step .tile--wide .icon { width: 1.5rem; height: 1.5rem; }
.quiz-q-step .tiles--2 .tile { min-height: 150px; gap: 16px; }
.quiz-q-step .tiles--2 .tile .icon { width: 3rem; height: 3rem; }
.quiz-q-step .helper { margin-top: 16px; gap: 12px; font-size: 1rem; line-height: 1.4; }
.quiz-q-step .helper .badge { width: 48px; height: 48px; }
.quiz-q-step .quiz-nav { margin-top: 6px; }
.quiz-q-step .quiz-trust { margin-top: 16px; padding-top: 16px; }
.quiz-q-step .quiz-trust-label { margin-bottom: 8px; }
.quiz-q-step .quiz-trust .trust li { gap: 4px; font-size: 0.88rem; }
.quiz-q-step .quiz-trust .trust .icon { width: 1.4rem; height: 1.4rem; }
@media (min-width: 720px) {
  .quiz-q-step .q-title { font-size: 2.2rem; }
  .quiz-q-step .tile { min-height: 96px; }
  .quiz-q-step .tiles--2 .tile { min-height: 170px; }
}
.quiz-q-step .quiz-main { padding-top: 10px; }
.quiz-q-step .progress { margin-bottom: 14px; }
.quiz-q-step .q-help { margin-top: 8px; }
.quiz-q-step .tiles, .quiz-q-step .tiles-wide { gap: 8px; }
.quiz-q-step .tiles-wide { margin-top: 8px; }
.quiz-q-step .tile { line-height: 1.15; gap: 5px; }
.quiz-q-step .tile .icon { width: 1.45rem; height: 1.45rem; }
@media (min-width: 720px) {
  .quiz-q-step .quiz-main { padding-top: var(--s3); }
  .quiz-q-step .progress { margin-bottom: var(--s4); }
  .quiz-q-step .tiles, .quiz-q-step .tiles-wide { gap: 12px; }
  .quiz-q-step .tile .icon { width: 2rem; height: 2rem; }
}

/* Phone step without the code check (Oleg, 2026-10-03): a plain field with a phone icon,
   like the email field. The label stays for screen readers only. */
.quiz-form-step .phone-plain .field label[for="phone"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


.quiz-q-step .progress { margin-bottom: 6px; }
.quiz-q-step .progress-label { margin: 0 auto 12px; font-size: 0.85rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.01em; }
@media (min-width: 720px) {
  .quiz-q-step .progress { margin-bottom: 8px; }
  .quiz-q-step .progress-label { margin-bottom: var(--s3); font-size: 0.9rem; }
}

/* Phone step in the intro screen's layout (Oleg liked the intro, 2026-10-03): the .intro
   eyebrow, headline and checked lines, then the field and one big button. The consent
   paragraph stays word for word, smaller, under the button. The checked lines replace
   the "What to expect" row here. */
.quiz-phone-step { background: #fff; }
.quiz-phone-step .quiz-card { background: transparent; box-shadow: none; padding: var(--s4) var(--s3) var(--s3); }
.quiz-phone-step .phone-intro { gap: var(--s3); }
.quiz-phone-step .phone-intro .intro-title { margin-top: calc(-1 * var(--s1)); }
.phone-lede { max-width: 26em; margin: calc(-1 * var(--s1)) auto 0; font-size: 1.05rem; line-height: 1.4; color: var(--ink-2); text-align: center; }
.quiz-phone-step .form { max-width: 380px; margin: var(--s4) auto 0; }
.quiz-phone-step .form .btn--gold { min-height: 56px; font-size: 1.15rem; }
.quiz-phone-step .consent-note { font-size: 0.78rem; line-height: 1.45; color: var(--ink-3); margin-top: 2px; }

.quiz-form-step .consent-note--signed, .quiz-phone-step .consent-note--signed { font-size: 0.75rem; line-height: 1.45; color: var(--ink-2); text-align: left; margin: 2px 0 4px; }
.consent-note--signed .consent-phone { white-space: nowrap; }
/* v16: the signature line above the button, the agreement in short paragraphs under it. */
.quiz-phone-step .consent-lead { font-size: 0.8rem; line-height: 1.45; color: var(--ink-2); text-align: left; margin: 2px 0 4px; }
.consent-note--below { margin-top: 2px; }
.consent-note--below .consent-para { display: block; }
.consent-note--below .consent-para + .consent-para { margin-top: 6px; }
/* No green site footer on the v14 phone step only. */
.quiz-signed-step .quiz-footer { display: none; }
/* A little less air above the headline and the field, so the button shows on a
   390x844 phone with a number typed. */
.quiz-signed-step.quiz-phone-step .quiz-card { padding-top: var(--s3); }
.quiz-signed-step.quiz-phone-step .form { margin-top: var(--s3); }
.quiz-phone-step .consent-links { font-size: 0.8rem; }
.quiz-phone-step .quiz-trust { display: none; }
@media (max-width: 380px) {
  .quiz-phone-step .quiz-card { padding: var(--s3) var(--s2) var(--s2); }
}

/* Email step in the intro screen's layout (Oleg, 2026-10-03: "lots of white space in
   the middle, words are cluttered"). Reuses .intro, .intro-eyebrow, .intro-title and
   .intro-list; adds only the reader's answers as one quiet line under the headline,
   the email ask, and grey fine print. */
.ready--email { text-align: center; }
.ready--email .prepared-line { margin: calc(-1 * var(--s3)) auto 0; font-size: 0.95rem; font-weight: 600; color: var(--ink-3); white-space: pre-wrap; }
.quiz-form-step .ready--email .form-ask { margin: var(--s2) 0 0; font-size: 1.25rem; }
.quiz-form-step .form--email { gap: 14px; margin-top: var(--s2); }
.quiz-form-step .form--email #followup-notice { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--ink-3); }
.quiz-form-step .form--email .secure { margin-top: 2px; font-size: 0.85rem; color: var(--ink-3); }
.quiz-form-step .quiz-card:has(.ready--email) { padding-top: var(--s3); }
/* Short phone screens (browser bars open): same content, less air, so the
   email field and button stay on the first screen. */
@media (max-height: 780px) {
  .ready--email { gap: var(--s3); }
  .ready--email .intro-title { font-size: 1.8rem; }
  .ready--email .prepared-line { margin-top: calc(-1 * var(--s2)); font-size: 0.88rem; }
  .ready--email .intro-list { gap: 10px; }
  .quiz-form-step .ready--email .form-ask { margin-top: 0; font-size: 1.15rem; }
  .quiz-form-step .form--email { gap: 10px; margin-top: 12px; }
}
.quiz-form-step .fee-note { margin-top: 6px; }

/* Optional weekly email choice, separate from report and phone permissions. */
.newsletter-choice { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 8px; font-size: 15px; line-height: 1.6; text-align: left; cursor: pointer; }
.newsletter-choice input { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 3px; accent-color: #114944; }
#newsletter-help { margin: 0 0 20px 32px; text-align: left; }
/* v14's longer agreement: tighter gaps in the phone step header so the button still
   shows on a 390x844 phone with a number typed. */
.quiz-signed-step.quiz-phone-step .phone-intro { gap: var(--s2); }
.quiz-signed-step.quiz-phone-step .intro-list { gap: 10px; }
/* v15: the headline fits on one line, so field, agreement and button show in the
   Facebook app on an iPhone (about 390x670 visible) with a number typed. */
.quiz-signed-step.quiz-phone-step .intro-title { font-size: 1.75rem; max-width: none; margin-top: 0; }

/* "Analyzing your results" screen (Oleg's mobile walk, 2026-10-06): the footer sits right
   under "What to expect" and its green runs to the bottom of the screen, so no empty grey
   area is left above it. */
.quiz-loading-step { background: var(--green); }
.quiz-loading-step .quiz-main { flex: none; background: var(--paper); }
.quiz-loading-step .quiz-footer { flex: 1; }