/* How Britain Saves, by The Investors Centre.
   Tokens mirror theinvestorscentre.co.uk (tic-custom.css): ink, gold, cream surfaces,
   Source Serif 4 for display and Source Sans 3 for UI. Both fonts are self-hosted. */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/source-serif-4.woff2') format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('/assets/fonts/source-sans-3.woff2') format('woff2'); }

:root {
  /* Navy scheme (branch hbs-navy-scheme, 15 Sept 2026): tokens from the webinar landing page at
     go.theinvestorscentre.co.uk. Paper ground, navy bands, gold gradient buttons. */
  --navy: #050a2e; --navy-2: #0b1550; --navy-3: #14206b; --navy-glow: #1a2a80;
  --ink: #0f1222; --ink-2: #2f3446; --muted: #5f6478; --faint: #666b84;
  --ground: #f7f5ef; --paper: #FFFFFF; --panel: #efece3; --panel-2: #e6e2d5; --line: rgba(15,18,34,.12); --line-2: rgba(15,18,34,.24);
  --gold: #f5b731; --gold-2: #ffcf5c; --gold-hover: #ffcf5c; --gold-deep: #B8860B; --gold-text: #7a5a05; --gold-tint: #fff6de; --gold-glow: rgba(245,183,49,.45);
  --green: #0E5B43; --green-tint: #EAF3EE; --red: #A93F2B; --red-tint: #FBECE8;
  --dark: #050a2e; --dark-2: #0b1550; --dark-line: rgba(255,255,255,.14); --on-dark: #ffffff; --on-dark-muted: #cfd3e6;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1180px; --radius: 6px; --radius-lg: 10px;
  --shadow: 0 1px 2px rgba(15,18,34,.06), 0 10px 30px rgba(15,18,34,.08);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; font-weight: 400; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.12; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; background: var(--paper); padding: 10px 14px; z-index: 50; border: 1px solid var(--line); }
.skip:focus { top: 12px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums; }

.eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.dark .eyebrow, .on-dark .eyebrow { color: var(--gold-text); }
.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.micro { font-size: 13px; line-height: 1.5; color: var(--muted); }
.muted { color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--radius); border: 1px solid transparent; font-weight: 700; font-size: 17px; text-decoration: none; line-height: 1.2; white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--ink); border-color: #D9AB3A; }
.btn-gold:hover { background: var(--gold-hover); }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover { background: #2A2D33; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-line:hover { background: var(--panel); }


.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-block { width: 100%; }
.btn .arrow { font-size: 20px; line-height: 1; }
.text-btn { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); font-size: 15px; }
.text-btn:hover { color: var(--ink); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.94); backdrop-filter: saturate(150%) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 22px; height: 72px; }
.logo { display: block; width: 168px; flex: 0 0 auto; }
.mark { display: flex; flex-direction: column; padding-left: 20px; border-left: 1px solid var(--line); line-height: 1.15; }
.mark strong { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.mark span { font-size: 12px; color: var(--muted); }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 15px; }
.site-header nav a:not(.btn) { text-decoration: none; color: var(--ink-2); }
.site-header nav a:not(.btn):hover { color: var(--ink); }

/* ---------- hero (dark) ---------- */
.dark { background: var(--panel); color: var(--ink); border-block: 1px solid var(--line); }
.hero { padding: 64px 0 60px; border-bottom: 3px solid var(--gold); background: linear-gradient(180deg, #FFFFFF 0%, var(--panel) 100%); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5vw, 60px); color: var(--ink); margin: 18px 0 20px; max-width: 18ch; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--gold-text); }
/* Desktop: the headline breaks where the sense does, and the text sits alongside the video rather than
   floating in the middle of the taller column that now holds the example result. */
@media (min-width: 821px) { .hero .wrap { align-items: start; } .hero .wrap > div:first-child { padding-top: 56px; } .hero h1 .ln { white-space: nowrap; } }
.hero .lede { color: var(--ink-2); max-width: 46ch; font-size: 19px; }
.hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero .assure { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--muted); }
.hero .assure li::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 8px; }

/* preview card in the hero */
.preview { position: relative; }
.preview::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-lg); background: var(--panel-2); }
.card { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow); border-top: 4px solid var(--gold); padding: 24px 26px 22px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.card-head strong { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.card-head span { font-size: 12px; color: var(--muted); }
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.rows li span:first-child { color: var(--muted); }
.rows li strong { font-family: var(--serif); font-size: 19px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--panel); }
.chip img { width: 22px; height: 22px; border-radius: 5px; }
.chip.offer { background: var(--gold-tint); border-color: #EBD59A; color: var(--gold-text); }

/* ---------- logo strip ---------- */
.logos { padding: 30px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.logos .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.logos .label { font-size: 13px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; flex: 0 0 auto; }
.logo-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.logo-row a, .logo-row span { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.tile { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line); object-fit: cover; background: #fff; flex: 0 0 auto; }
.logos .fine { margin-left: auto; font-size: 13px; color: var(--muted); }

/* ---------- generic sections ---------- */
.section { padding: 80px 0; }
.section-tight { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(30px, 3.4vw, 40px); margin-top: 14px; text-wrap: balance; }
.section-head p { margin-top: 14px; color: var(--ink-2); font-size: 18px; }
.panel { background: var(--panel); border-block: 1px solid var(--line); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.feature .n { font-family: var(--serif); font-size: 15px; color: var(--gold-text); font-weight: 600; letter-spacing: .06em; }
.feature h3 { font-size: 24px; }
.feature p { color: var(--ink-2); font-size: 16px; }
.feature .demo { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); }

/* national picture bar (used on landing demo and results) */
.bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--panel-2); }
.bar span { display: block; height: 100%; }
.bar .b1 { background: var(--red); } .bar .b2 { background: var(--gold-deep); } .bar .b3 { background: var(--green); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.legend .b1::before { background: var(--red); } .legend .b2::before { background: var(--gold-deep); } .legend .b3::before { background: var(--green); }
.legend .you { color: var(--ink); font-weight: 700; }

/* trust numbers */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.stats > div { padding: 22px 24px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats strong { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.1; }
.stats span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }

/* founders */
.founders { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.face img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.face strong { display: block; margin-top: 10px; font-size: 15px; }
.face span { display: block; font-size: 13px; color: var(--muted); }
.founders h2 { font-size: clamp(28px, 3vw, 36px); margin-top: 14px; }
.founders p { margin-top: 14px; color: var(--ink-2); }
.founders .links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 20px; font-size: 15px; }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; }
details { border-top: 1px solid var(--line); padding: 16px 0; }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font-family: var(--serif); font-size: 24px; color: var(--gold-text); }
details[open] summary::after { content: '–'; }
details p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
/* Homepage FAQ: every answer open, in the same look the click-to-open list had. */
.faq .qa { border-top: 1px solid var(--line); padding: 16px 0; }
.faq .qa:last-child { border-bottom: 1px solid var(--line); }
.faq .qa h3 { font-family: var(--sans); font-weight: 700; font-size: 17px; line-height: 1.35; letter-spacing: 0; }
.faq .qa p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }

/* closing cta */
.close-cta { text-align: center; padding: 72px 0; }
.close-cta h2 { font-size: clamp(30px, 3.6vw, 44px); color: var(--ink); max-width: 18ch; margin-inline: auto; text-wrap: balance; }
.close-cta p { margin: 14px auto 28px; color: var(--ink-2); max-width: 48ch; }

/* footer */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 28px; background: var(--paper); }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.foot-top .logo { width: 150px; }
.foot-top nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; }
.site-footer p { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 92ch; }
.site-footer p + p { margin-top: 10px; }
.site-footer .copy { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }

/* ---------- quiz ---------- */
.quiz-main { width: min(760px, 100% - 48px); margin-inline: auto; padding: 40px 0 72px; min-height: 70vh; }
.q-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.q-cats span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); }
.q-cats span.on { color: var(--gold-text); border-color: #EBD59A; background: var(--gold-tint); }
.q-cats span.done { color: var(--green); border-color: #CFE2D7; background: var(--green-tint); }
.q-progress { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.q-progress .track { flex: 1; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.q-progress .fill { display: block; height: 100%; background: var(--gold-deep); transition: width .25s; }
.q-card { margin-top: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 36px 30px; box-shadow: var(--shadow); }
.q-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.q-card legend { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -.01em; padding: 0; margin-bottom: 10px; }
.q-info summary { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; font-weight: 600; color: var(--gold-text); }
.q-info summary::after { content: none; }
.q-info { border: 0; padding: 0; margin: 4px 0 20px; }
.q-info p { margin-top: 8px; font-size: 15px; color: var(--ink-2); background: var(--panel); border-left: 3px solid var(--gold); padding: 12px 14px; border-radius: 4px; }
.opts { display: grid; gap: 10px; }
.opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 12px 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: var(--paper); cursor: pointer; font-size: 17px; transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--gold-deep); background: var(--gold-tint); }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt .k { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); background: #fff; }
.opt:has(input:checked) { border-color: var(--gold-deep); background: var(--gold-tint); }
.opt:has(input:checked) .k { background: var(--ink); color: #fff; border-color: var(--ink); }
.opt:has(input:focus-visible) { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.opt.soft { color: var(--muted); font-size: 15px; min-height: 48px; }
.q-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; }
.q-note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--faint); }

/* ---------- results ---------- */
.r-hero { background: var(--panel); border-bottom: 1px solid var(--line); padding: 44px 0 40px; }
.r-hero .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.r-hero h1 { font-size: clamp(32px, 4vw, 46px); margin-top: 12px; max-width: 22ch; text-wrap: balance; }
.r-hero h1 em { font-style: normal; color: var(--gold-text); }
.r-hero .lede { margin-top: 12px; max-width: 60ch; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.tile-stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; border-top: 4px solid var(--gold); }
.tile-stat .eyebrow { color: var(--muted); }
.tile-stat strong { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 8px 0 6px; line-height: 1.15; }
.tile-stat p { font-size: 15px; color: var(--ink-2); }
.tile-stat.warn { border-top-color: var(--red); }
.tile-stat.good { border-top-color: var(--green); }

.r-section { padding: 52px 0; border-bottom: 1px solid var(--line); }
.r-section h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 10px; max-width: 26ch; text-wrap: balance; }
.r-section .intro { margin-top: 10px; color: var(--ink-2); max-width: 66ch; }
.national { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.national .big { font-family: var(--serif); font-size: clamp(40px, 5vw, 56px); font-weight: 600; line-height: 1; }
.national .big small { display: block; font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 8px; }
.callout { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--gold-deep); border-radius: var(--radius); padding: 18px 20px; font-size: 16px; }
.callout.alert { border-left-color: var(--red); background: var(--red-tint); }
.callout.ok { border-left-color: var(--green); background: var(--green-tint); }
.callout h3 { font-size: 20px; margin-bottom: 6px; }
.callout p + p { margin-top: 8px; }
.callout .btn { margin-top: 14px; }

/* provider cards */
.providers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.pcard.lead { border-color: #D9AB3A; box-shadow: 0 0 0 3px var(--gold-tint); }
.pcard .top { display: flex; align-items: center; gap: 14px; }
.pcard .tile { width: 52px; height: 52px; border-radius: 11px; }
.pcard .name { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.pcard .tag { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.pcard .rank { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--gold-text); background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.pcard .offer { background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: var(--radius); padding: 12px 14px; }
.pcard .offer strong { display: block; font-size: 17px; color: var(--ink); }
.pcard .offer span { display: block; font-size: 13px; color: var(--gold-text); margin-top: 3px; line-height: 1.45; }
.pcard .code { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.pcard .code b { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px dashed var(--gold-deep); padding: 2px 8px; border-radius: 4px; letter-spacing: .06em; }
.pcard .code button { font-size: 12px; padding: 3px 8px; border: 1px solid var(--line-2); background: #fff; border-radius: 4px; }
.pcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.pcard li::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 9px; }
.pcard .blurb { font-size: 15px; color: var(--ink-2); }
.pcard .cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.pcard .risk { font-size: 12px; line-height: 1.45; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }

/* webinar band */
.webinar { padding: 56px 0; border-top: 3px solid var(--gold); background: var(--gold-tint); }
.webinar .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.webinar h2 { font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); margin-top: 12px; text-wrap: balance; }
.webinar p { margin-top: 12px; color: var(--ink-2); max-width: 52ch; }
.webinar ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink); font-size: 16px; }
.webinar li::before { content: '→'; color: var(--gold-deep); margin-right: 10px; }
.webinar .side { background: var(--paper); border: 1px solid #EBD59A; box-shadow: var(--shadow); border-radius: var(--radius-lg); padding: 26px; }
.webinar .side strong { display: block; font-family: var(--serif); font-size: 24px; color: var(--ink); }
.webinar .side span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.webinar .side .btn { margin-top: 18px; }
.webinar .side .micro { margin-top: 10px; }

/* newsletter + next */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.box h3 { font-size: 24px; margin-top: 8px; }
.box p { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.box form { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.box input[type=email] { flex: 1 1 220px; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; }
.box .micro { margin-top: 12px; }
.box .btn { margin-top: 16px; }

/* answers + actions */
.review dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.review dt { font-size: 13px; color: var(--muted); }
.review dd { margin: 2px 0 8px; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 24px; }
.empty { padding: 80px 0; text-align: center; }
.empty h1 { font-size: 36px; }
.empty p { margin: 12px 0 24px; color: var(--ink-2); }

/* reading page */
.reading { width: min(760px, 100% - 48px); margin-inline: auto; padding: 48px 0 80px; }
.reading h1 { font-size: 40px; margin-bottom: 10px; }
.reading h2 { font-size: 24px; margin: 32px 0 8px; }
.reading p { margin-top: 10px; color: var(--ink-2); }

/* sticky mobile CTA */
.sticky-cta { display: none; }
/* The live line (pulse.js): a hairline pill fixed to the bottom-left of every page of the check, faded
   in once the figure is known and staying put as the visitor scrolls (MJ: persistent), with a small
   cross to hide it for the session. On a phone it is one short line at 12px (the short verb, no
   "last one" clause), sits above the landing page's sticky button while that is showing and drops to
   the bottom edge when it is not, and the page gets room underneath so nothing ends behind it. */
.pulse { position: fixed; left: 20px; bottom: 20px; z-index: 25; display: flex; align-items: center; gap: 10px; max-width: 680px; margin: 0; padding: 8px 8px 8px 16px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(5,10,46,.92); backdrop-filter: blur(8px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); font-size: 14px; line-height: 1.45; color: var(--on-dark-muted); opacity: 0; transition: opacity .5s ease, bottom .2s ease; }
.pulse.on { opacity: 1; }
/* Room under every page for the pill, so the last line of a page is never under it. */
body.has-pulse { padding-bottom: 72px; }
.pulse strong { color: #fff; font-weight: 700; }
.pulse .pulse-s { display: none; }
.pulse-hide { flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.pulse-hide:hover { background: rgba(255,255,255,.22); }
.pulse-hide:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 820px) {
  .pulse { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: calc(100% - 24px); gap: 8px; padding: 5px 5px 5px 12px; font-size: 12px; }
  .pulse .pulse-l, .pulse .pulse-last { display: none; }
  .pulse .pulse-s { display: inline; }
  .pulse-hide { width: 26px; height: 26px; font-size: 15px; }
  body.has-sticky .pulse { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-sticky.inline-cta-visible .pulse { bottom: calc(12px + env(safe-area-inset-bottom)); }
  body.has-pulse { padding-bottom: 56px; }
  body.has-pulse.has-sticky { padding-bottom: 132px; }
}
@media (prefers-reduced-motion: reduce) { .pulse { transition: none; } }
@media print { .pulse { display: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero .wrap { gap: 40px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .providers { grid-template-columns: 1fr 1fr; }
}
/* The narrowest phones: at 375px the logo and the header button ran 9px past the screen. */
@media (max-width: 420px) {
  .site-header .logo { width: 112px; }
  .site-header .btn-sm { padding: 0 12px; font-size: 14px; }
}
@media (max-width: 820px) {
  body { font-size: 16px; }
  .wrap { width: min(var(--wrap), 100% - 36px); }
  .site-header .wrap { height: 64px; gap: 14px; }
  .logo { width: 140px; }
  .mark { display: none; }
  .site-header nav a:not(.btn) { display: none; }
  .hero { padding: 48px 0 44px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { max-width: none; }
  .preview::before { display: none; }
  .logos .wrap { gap: 16px; }
  .logos .fine { margin-left: 0; width: 100%; }
  .logo-row a span.name, .logo-row span span.name { display: none; }
  .section { padding: 56px 0; }
  .grid-3, .stats, .tiles, .providers, .two, .review dl { grid-template-columns: 1fr; }
  .stats > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .stats > div:last-child { border-bottom: 0; }
  .founders, .faq, .national, .webinar .wrap { grid-template-columns: 1fr; gap: 28px; }
  .faces { gap: 10px; }
  .q-main { padding-top: 24px; }
  .q-card { padding: 24px 20px 22px; }
  .q-nav { flex-wrap: wrap; }
  .q-nav .btn { width: 100%; order: -1; }
  .r-section { padding: 40px 0; }
  .pcard .cta { flex-direction: column; align-items: stretch; }
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
  .sticky-cta .btn { width: 100%; }
  body.has-sticky { padding-bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print {
  .site-header, .site-footer, .webinar, .box form, .actions, .sticky-cta, .btn { display: none !important; }
  body { font-size: 12pt; }
  .r-hero, .r-section { padding: 12pt 0; border: 0; }
  .pcard, .tile-stat, .callout { break-inside: avoid; box-shadow: none; }
}

/* ---------- comparison (age group and Britain) ---------- */
.rank { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; }
.rank-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; border-top: 4px solid var(--gold); }
.rank-card.all { border-top-color: var(--green); }
.rank-card .eyebrow { color: var(--muted); }
.rank-card .big { font-family: var(--serif); font-size: clamp(40px, 5vw, 58px); font-weight: 600; line-height: 1; margin: 10px 0 6px; color: var(--ink); }
.rank-card .of { font-size: 17px; color: var(--ink-2); }
.rank-card .of strong { color: var(--ink); }
.dist { margin-top: 22px; }
.dist .bar-10 { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--panel-2); gap: 2px; }
.dist .bar-10 span { display: block; height: 100%; background: var(--line-2); position: relative; }
.dist .bar-10 span.neg { background: #D9C4BE; }
.dist .bar-10 span.you { background: var(--gold-deep); outline: 2px solid var(--ink); outline-offset: -2px; }
.dist .axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.dist .you-label { font-size: 14px; margin-top: 8px; }
.dist .you-label b { color: var(--gold-text); }
.hero .card .rank-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: var(--radius); }
.hero .card .rank-line strong { font-family: var(--serif); font-size: 24px; line-height: 1; }
.hero .card .rank-line span { font-size: 13px; color: var(--gold-text); text-align: right; }

/* ---------- email my results ---------- */
.email-box { background: var(--paper); border: 1px solid #EBD59A; border-radius: var(--radius-lg); padding: 30px; margin-top: 26px; box-shadow: 0 0 0 4px var(--gold-tint); display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.email-box h3 { font-size: 26px; margin-top: 8px; }
.email-box p { margin-top: 10px; color: var(--ink-2); }
.email-box ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.email-box li::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 8px; }
.email-form label.field { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.email-form input[type=email] { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; }
.email-form .check { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.email-form .check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--gold-deep); }
.email-form .btn { margin-top: 16px; width: 100%; }
.email-form .status { margin-top: 10px; font-size: 14px; min-height: 1.4em; }
.email-form .status.ok { color: var(--green); font-weight: 600; }
.email-form .status.err { color: var(--red); }
@media (max-width: 820px) { .rank, .email-box { grid-template-columns: 1fr; } }

/* ---------- email gate ---------- */
.gate { margin-top: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px 26px; box-shadow: var(--shadow); text-align: center; }
.gate h1 { font-size: clamp(26px, 5.5vw, 36px); margin-top: 10px; text-wrap: balance; }
.gate h1 strong { color: var(--gold-text); }
.tease-card { margin: 22px auto 0; max-width: 420px; border: 1px solid #EBD59A; background: var(--gold-tint); border-radius: var(--radius-lg); padding: 18px; text-align: left; }
.tease-rank { display: flex; align-items: baseline; gap: 12px; }
.tease-rank .blur { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; filter: blur(7px); user-select: none; color: var(--ink); }
.tease-rank > span:last-child { font-size: 15px; color: var(--gold-text); font-weight: 600; }
.tease-rows { margin-top: 14px; display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.tease-rows span::before { content: '🔒'; font-size: 12px; margin-right: 8px; }
.gate-form { margin: 22px auto 0; max-width: 420px; display: grid; gap: 10px; }
/* The honeypot: a field only a script finds. Off the page rather than display:none, which some fill anyway. */
.gate-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* "Did you mean…" under an address field: a line, not an error, with the likely address as a link. */
.gate-form .suggest { margin: -2px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.gate-form .suggest .text-link { font: inherit; font-weight: 600; }
.gate-form input[type=email] { width: 100%; min-height: 56px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: var(--radius); background: #fff; font-size: 17px; text-align: center; }
.gate-form .btn { min-height: 56px; font-size: 18px; }
.gate-form .status { font-size: 14px; min-height: 1.3em; margin: 0; }
.gate-form .status.err { color: var(--red); }
.gate-form .micro { text-align: center; }
.gate .text-btn { margin-top: 18px; }

/* ---------- lead offer card and compact rows ---------- */
.lead-card { background: var(--paper); border: 1.5px solid #D9AB3A; border-radius: var(--radius-lg); padding: 22px; box-shadow: 0 0 0 4px var(--gold-tint), var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.lead-card .top { display: flex; align-items: center; gap: 14px; }
.lead-card .tile { width: 56px; height: 56px; border-radius: 12px; }
.lead-card .name { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.05; }
.lead-card .tag { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.lead-card .rank { margin-left: auto; font-size: 12px; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 5px 10px; white-space: nowrap; }
.lead-card .offer.big { background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: var(--radius); padding: 16px; }
.lead-card .offer.big strong { display: block; font-family: var(--serif); font-size: 28px; line-height: 1.1; }
.lead-card .offer.big span { display: block; font-size: 14px; color: var(--gold-text); margin-top: 6px; line-height: 1.45; }
.lead-card .code { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; }
.lead-card .code b { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px dashed var(--gold-deep); padding: 3px 10px; border-radius: 4px; letter-spacing: .08em; }
.lead-card .code button { font-size: 12px; padding: 4px 9px; border: 1px solid var(--line-2); background: #fff; border-radius: 4px; }
.lead-card .why { font-size: 15px; color: var(--ink-2); background: var(--panel); border-left: 3px solid var(--gold-deep); padding: 10px 12px; border-radius: 4px; }
.lead-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.lead-card li::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 9px; }
.lead-card .btn { min-height: 56px; font-size: 18px; }
.lead-card .risk { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.rows-compact { display: grid; gap: 10px; margin-top: 12px; }
.rows-compact .row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); text-decoration: none; }
.rows-compact .row:hover { border-color: var(--gold-deep); background: var(--gold-tint); }
.rows-compact .tile { width: 44px; height: 44px; border-radius: 10px; }
.rows-compact .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rows-compact .txt strong { font-size: 16px; }
.rows-compact .txt span { font-size: 14px; color: var(--gold-text); font-weight: 600; }
.rows-compact .go { margin-left: auto; font-size: 22px; color: var(--muted); }
.review summary { font-size: 16px; }

/* ---------- mobile-first tightening ---------- */
@media (max-width: 820px) {
  .hero { padding: 32px 0 28px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 42px); margin: 12px 0 12px; }
  .hero .lede { font-size: 17px; }
  .hero-cta .btn-line { display: none; }
  .hero .assure { flex-direction: column; gap: 6px; font-size: 14px; }
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: 28px; }
  .feature { padding: 22px 20px; }
  .founders h2 { font-size: 26px; }
  .quiz-main { padding: 18px 0 40px; }
  /* The category labels fit on one row down to 360px wide, and the answer rows are slimmer but never
     under 44px, so more of each question fits on the first screen (MJ, 11 September 2026). */
  .q-cats { gap: 4px; margin-bottom: 12px; }
  .q-cats span { font-size: 10px; letter-spacing: .02em; padding: 4px 6px; }
  .q-card { margin-top: 16px; padding: 22px 18px 18px; }
  .q-card legend { font-size: 25px; }
  .opts { gap: 8px; }
  .opt { min-height: 48px; font-size: 16px; padding: 8px 12px; gap: 12px; }
  .opt.soft { min-height: 44px; }
  .opt .k { width: 24px; height: 24px; }
  .q-nav .btn { min-height: 54px; }
  .r-hero { padding: 28px 0 26px; }
  .r-hero h1 { font-size: 34px; }
  .r-hero .lede { font-size: 16px; }
  .tiles { gap: 10px; margin-top: 20px; }
  .tile-stat { padding: 14px 16px; }
  .tile-stat strong { font-size: 21px; margin: 6px 0 4px; }
  .tile-stat p { font-size: 14px; }
  .r-section { padding: 32px 0; }
  .r-section h2 { font-size: 26px; }
  .rank-card { padding: 18px; }
  .rank-card .big { font-size: 44px; }
  .webinar { padding: 36px 0; }
  .webinar h2 { font-size: 27px; }
  .box { padding: 20px; }
  .gate { padding: 24px 18px 20px; }
}

/* ---------- landing v3: photo hero, data chart, plain list ---------- */
.hero-visual { position: relative; display: grid; gap: 0; }
.hero-photo { background: radial-gradient(120% 90% at 50% 100%, var(--gold-tint) 0%, var(--panel-2) 60%, transparent 100%); border-radius: 50% 50% 12px 12px / 40% 40% 12px 12px; padding: 24px 12px 0; display: flex; align-items: flex-end; justify-content: center; }
.hero-photo img { width: min(100%, 520px); height: auto; }
.hero-rank { margin: -28px auto 0; width: min(100%, 380px); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 16px 18px 14px; position: relative; }
.hero-rank strong { display: block; font-family: var(--serif); font-size: 38px; font-weight: 600; line-height: 1; margin: 6px 0 2px; }
.hero-rank .of { display: block; font-size: 15px; color: var(--ink-2); }
.hero-rank .dist { margin-top: 12px; }
.hero-rank .dist .bar-10 { height: 14px; }
.hero-rank .rank-snap { margin: 12px 0 0; border-top: 1px solid var(--line); }
.hero-rank .rank-snap div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.35; }
.hero-rank .rank-snap dt { color: var(--muted); }
.hero-rank .rank-snap dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.hero-rank .rank-next { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.hero-rank .rank-next .eyebrow { display: block; font-size: 11px; margin-bottom: 3px; }
/* Two comparisons with equal weight: the age group and everyone in Britain, one bar each with the same person marked. */
.hero-rank .rank-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.hero-rank .rank-pair > div + div { border-left: 1px solid var(--line); padding-left: 12px; }
.hero-rank .rank-pair strong { font-size: 24px; margin: 0 0 4px; white-space: nowrap; }
.hero-rank .rank-pair .of { font-size: 13px; line-height: 1.3; }
.hero-rank .dist-2 { margin-top: 14px; display: grid; gap: 6px; }
.hero-rank .dist-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 8px; }
.hero-rank .dist-label { font-size: 12px; color: var(--muted); }
.hero-rank .dist-2 .bar-10 { height: 10px; }
.hero-rank .dist-2 .axis { margin: 0 0 0 64px; }
@media (max-width: 420px) { .hero-rank .rank-pair strong { font-size: 21px; } }
.chart { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px 18px; }
.chart-legend { margin: 0 0 16px; }
.chart-legend span::before { border-radius: 3px; }
.legend .c1::before { background: #C8A59A; } .legend .c2::before { background: #E3D3A8; } .legend .c3::before { background: var(--gold-deep); } .legend .c4::before { background: var(--green); }
.chart-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 6px 0; }
.chart-row .lab { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.stack { display: flex; height: 30px; border-radius: 6px; overflow: hidden; gap: 2px; }
.stack span { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; }
.stack .c1 { background: #C8A59A; color: var(--ink); } .stack .c2 { background: #E3D3A8; color: var(--ink); } .stack .c3 { background: var(--gold-deep); } .stack .c4 { background: var(--green); }
/* The row the headline is about, and everyone in Britain set apart at the foot. */
.chart-row.is-focus .lab { color: var(--ink); font-weight: 700; }
.chart-row.is-focus .stack { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.chart-row.chart-all { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.chart-row.chart-all .lab { color: var(--ink); font-weight: 700; line-height: 1.25; }
.what { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.what h2 { font-size: clamp(28px, 3.2vw, 36px); margin-top: 12px; }
.plain-list { margin: 20px 0 0; padding-left: 22px; display: grid; gap: 12px; font-size: 17px; color: var(--ink-2); }
.plain-list li::marker { font-family: var(--serif); font-weight: 600; color: var(--gold-text); }
.what .micro { margin-top: 18px; }
.what .tiles { grid-template-columns: 1fr; }
.close-cta { background: var(--panel); border-block: 1px solid var(--line); }
@media (max-width: 820px) {
  .hero-photo { padding-top: 12px; }
  .hero-photo img { width: min(100%, 360px); }
  .hero-rank { margin-top: -18px; }
  .chart { padding: 16px 14px 14px; }
  .chart-row { grid-template-columns: 74px 1fr; gap: 10px; }
  .chart-row .lab { font-size: 13px; }
  .stack { height: 26px; }
  .stack span { font-size: 11px; }
  .stack span.sm { font-size: 0; }
  .what { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- gate consent + hot deals ---------- */
.gate-form .check { display: flex; gap: 12px; align-items: flex-start; text-align: left; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; margin-top: 2px; }
.gate-form .check input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--gold-deep); }
/* The gate's active choice (11 Sept 2026): two buttons of the same size, nothing pre-selected. */
.gate-form .choice { display: grid; gap: 10px; margin-top: 4px; }
.gate-form .choice-q { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.gate-form .choice .btn { white-space: normal; text-align: center; padding: 10px 18px; }
.gate-form .choice-note { margin: 0; }
/* The results-only choice as a text link under the gold button (16 Sept 2026): same tap target height as the
   other text buttons, underlined so it reads as a link, never styled as a button. */
.gate-links { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gate-links .text-btn { margin-top: 0; }
.gate .text-link { background: none; border: 0; padding: 0; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate .text-link:hover { color: var(--ink); }
.gate .text-link:disabled { opacity: .6; cursor: default; }
.deals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; }
.deal { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.deal:first-child { border-color: #D9AB3A; box-shadow: 0 0 0 3px var(--gold-tint); }
.deal-top { display: flex; align-items: center; gap: 12px; }
.deal .tile { width: 48px; height: 48px; border-radius: 11px; }
.deal-name { display: flex; flex-direction: column; min-width: 0; }
.deal-name strong { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.1; }
.deal-name span { font-size: 12px; color: var(--muted); margin-top: 3px; }
.deal-badge { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.deal-badge.plain { color: var(--muted); background: var(--panel); border-color: var(--line); }
.deal-offer { background: var(--panel); border-radius: var(--radius); padding: 12px 14px; }
.deal-offer strong { display: block; font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.deal-offer span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 5px; line-height: 1.45; }
.deal .code { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.deal .code b { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px dashed var(--gold-deep); padding: 2px 8px; border-radius: 4px; letter-spacing: .06em; }
.deal .code button { font-size: 12px; padding: 3px 8px; border: 1px solid var(--line-2); background: #fff; border-radius: 4px; }
.deal-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.deal-points li::before { content: '✓'; color: var(--green); font-weight: 700; margin-right: 8px; }
.deal .btn { margin-top: auto; }
.deal .risk { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
@media (max-width: 820px) { .deals { grid-template-columns: 1fr; } }

/* ---------- hero video (4:5, mobile first) ---------- */
.hero-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--panel-2); aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; box-shadow: var(--shadow); }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Sound and pause sit at the top, so the captions keep the bottom of the frame. */
.hero-video .vid-btn { position: absolute; top: 12px; background: rgba(20,22,26,.78); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px 8px 12px; font: 700 13px/1 var(--sans); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.hero-video .vid-btn svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.hero-video .vid-btn .ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.hero-video .pause[data-state="playing"] .i-play, .hero-video .pause[data-state="paused"] .i-pause, .hero-video .sound[aria-pressed="false"] .i-on, .hero-video .sound[aria-pressed="true"] .i-muted { display: none; }
.hero-video .sound { right: 12px; }
.hero-video .pause { left: 12px; }
.hero-video .vid-btn:hover { background: var(--ink); }
.hero-video .vid-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hero-video video::cue { font-family: var(--sans); font-size: 15px; line-height: 1.35; color: #fff; background: rgba(20,22,26,.78); }
.hero-visual .hero-rank { margin-top: -34px; width: min(100% - 24px, 360px); }
@media (max-width: 820px) { .hero-video { max-width: 100%; } .hero-visual .hero-rank { margin-top: -26px; } }
/* Wider screens play the landscape cut (hero.js), so the box is 16:9 and fills its column. */
@media (min-width: 821px) { .hero-video { aspect-ratio: 16 / 9; max-width: none; } }
/* The lede sits under the video and the example result (11 Sept 2026), at the video's width. */
.hero-visual .lede { width: min(100%, 420px); max-width: none; margin: 22px auto 0; font-size: 17px; }
/* One gold button on screen at a time (cta.js, 11 Sept 2026): the header button and the phone bar
   step aside while a button in the page body is visible. Phones never show the header button: the
   bar does that job, within thumb reach. */
.site-header .btn-gold { transition: opacity .15s ease, visibility 0s linear 0s; }
.sticky-cta { transition: transform .2s ease, visibility 0s linear 0s; }
body.inline-cta-visible .site-header .btn-gold { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
body.inline-cta-visible .sticky-cta { transform: translateY(110%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
@media (max-width: 820px) { .site-header .btn-gold { display: none; } }
@media (prefers-reduced-motion: reduce) { .site-header .btn-gold, .sticky-cta { transition: none; } }

/* ---------- final page CTAs ---------- */
.ctas { background: var(--panel); }
.cta-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; margin-top: 24px; }
.cta-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cta-card.primary { border: 1.5px solid #D9AB3A; box-shadow: 0 0 0 4px var(--gold-tint), var(--shadow); }
.cta-badge { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-text); background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: 999px; padding: 5px 10px; }
.cta-badge.plain { color: var(--muted); background: var(--panel); border-color: var(--line); }
.cta-card h3 { font-size: clamp(24px, 3vw, 30px); line-height: 1.1; }
.cta-card p { color: var(--ink-2); font-size: 16px; }
.cta-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 15px; color: var(--ink-2); }
.cta-card li::before { content: '→'; color: var(--gold-deep); margin-right: 9px; }
.cta-card .btn { margin-top: auto; min-height: 56px; font-size: 18px; }
@media (max-width: 820px) { .cta-grid { grid-template-columns: 1fr; } .cta-card { padding: 20px; } }

/* ---------- featured eToro block on the final page ---------- */
.feat { background: var(--paper); border: 1.5px solid #13C636; border-radius: var(--radius-lg); box-shadow: 0 0 0 4px #E8F8EA, var(--shadow); padding: 24px; margin-top: 22px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: start; }
.feat .brand { display: flex; align-items: center; gap: 14px; }
.feat .brand img { width: 60px; height: 60px; border-radius: 13px; }
.feat .brand strong { font-family: var(--serif); font-size: 28px; line-height: 1; }
.feat .brand span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.feat .paid { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.feat h3 { font-size: clamp(26px, 3.2vw, 34px); line-height: 1.08; margin-top: 16px; }
.feat h3 em { font-style: normal; color: #0E8F2A; }
.feat .lead { margin-top: 10px; color: var(--ink-2); font-size: 16px; }
.feat ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 15px; color: var(--ink-2); }
.feat li::before { content: '✓'; color: #0E8F2A; font-weight: 700; margin-right: 9px; }
.feat .offer-box { background: #F1FBF2; border: 1px solid #BFEBC7; border-radius: var(--radius); padding: 18px; }
.feat .offer-box .eyebrow { color: #0E8F2A; }
.feat .offer-box strong.amt { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; margin: 8px 0 6px; }
.feat .offer-box .terms { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.feat .offer-box .btn { margin-top: 14px; min-height: 56px; font-size: 18px; background: #13C636; border-color: #10B030; color: #062E10; }
.feat .offer-box .btn:hover { background: #1FD443; }
.feat .offer-box .risk { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 12px; }
.feat .offer-box .risk b { color: var(--ink); }
@media (max-width: 820px) { .feat { grid-template-columns: 1fr; padding: 18px; gap: 16px; } .feat .brand img { width: 52px; height: 52px; } .feat .brand strong { font-size: 24px; } }

/* The two doors on the results page: the featured block's look, twice, side by side. */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.door { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.door .who { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gold-text); background: var(--gold-tint); border: 1px solid #EBD59A; border-radius: 999px; padding: 6px 12px; align-self: flex-start; margin: 0; }
.door .brand { display: flex; align-items: center; gap: 12px; }
.door .brand img { width: 52px; height: 52px; border-radius: 12px; }
.door .brand strong { font-family: var(--serif); font-size: 26px; line-height: 1; }
.door .brand span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.door .paid { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.door h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.1; margin: 4px 0 0; text-wrap: balance; }
.door h3 em { font-style: normal; color: #0E8F2A; }
.door .lead { color: var(--ink-2); font-size: 15px; margin: 0; }
.door ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.door li::before { content: '✓'; color: #0E8F2A; font-weight: 700; margin-right: 8px; }
.door .offer-box { margin-top: auto; background: #F1FBF2; border: 1px solid #BFEBC7; border-radius: var(--radius); padding: 16px; }
.door .offer-box .eyebrow { color: #0E8F2A; }
.door .offer-box strong.amt { display: block; font-family: var(--serif); font-size: 32px; line-height: 1.05; margin: 8px 0 6px; }
.door .offer-box .terms { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.door .offer-box .code { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.door .offer-box .code b { font-family: ui-monospace, Menlo, Consolas, monospace; background: #fff; border: 1px dashed var(--gold-deep); padding: 2px 8px; border-radius: 4px; letter-spacing: .06em; }
.door .offer-box .code button { font-size: 12px; padding: 3px 8px; border: 1px solid var(--line-2); background: #fff; border-radius: 4px; }
.door .offer-box .btn { margin-top: 14px; min-height: 52px; font-size: 17px; background: #13C636; border-color: #10B030; color: #062E10; }
.door .offer-box .btn:hover { background: #1FD443; }
.door .offer-box .risk { font-size: 12px; line-height: 1.45; color: var(--muted); margin: 12px 0 0; }
.door .offer-box .risk b { color: var(--ink); }
/* The green above is eToro's. An IG door takes IG's red instead (15 Sept 2026), on the same parts:
   the highlighted words, the ticks, the offer box and its button. */
.door[data-provider="ig"] h3 em, .door[data-provider="ig"] li::before, .door[data-provider="ig"] .offer-box .eyebrow { color: #C8102E; }
.door[data-provider="ig"] .offer-box { background: #FDF3F4; border-color: #F2C4CA; }
.door[data-provider="ig"] .offer-box .btn { background: #E1251B; border-color: #C8102E; color: #fff; }
.door[data-provider="ig"] .offer-box .btn:hover { background: #C8102E; }
/* Grid items must be allowed to shrink, or a long pill or a wide word pushes the page sideways on a phone. */
.doors > * { min-width: 0; }
.door .who { max-width: 100%; }
.doors.single { grid-template-columns: 1fr; max-width: 760px; }
.door-alt { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.door-alt a { font-weight: 600; }

/* A door's video: poster and play button until pressed, then the browser's own player (journey.js doorVideo). */
/* The deposit ladder inside an offer box: two columns, the reward in bold, nothing else. */
.offer-box .tiers { width: auto; border-collapse: collapse; margin: 8px 0 0; font-size: 14px; }
.offer-box .tiers th { font-weight: 600; color: var(--muted); text-align: left; padding: 0 20px 4px 0; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.offer-box .tiers td { padding: 2px 20px 2px 0; }
.offer-box .tiers td:last-child { font-weight: 700; }
.door-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); }
/* A clip with a square cut takes a square box on a phone, where that cut plays (journey.js SQUARE). */
@media (max-width: 640px) { .door-video.has-square { aspect-ratio: 1 / 1; } }
/* On the results page it leads, at the doors' width, with the result card under it (15 Sept 2026). */
.r-video { padding-bottom: 0; }
.r-video .door-video { max-width: 760px; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.r-result .hero-rank.r-card { margin: 0 auto; width: 100%; max-width: 480px; }
.door-video video { width: 100%; height: 100%; display: block; background: var(--ink); }
.door-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.door-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.door-play::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(to top, rgba(20,22,26,.7), transparent); }
.door-play-icon { position: absolute; left: 50%; top: 50%; z-index: 1; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); transition: transform .2s ease-out; }
.door-play-icon::before { content: ''; position: absolute; left: 26px; top: 21px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--ink); }
.door-play:hover .door-play-icon, .door-play:focus-visible .door-play-icon { transform: scale(1.06); }
.door-play:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: -3px; }
.door-play-label { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #fff; font-size: 14px; font-weight: 700; text-align: left; }
.door-play-label span { font-variant-numeric: tabular-nums; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .door-play-icon { transition: none; } }
@media (max-width: 820px) { .doors { grid-template-columns: 1fr; } .door { padding: 18px; } }

/* ---------- homepage refinements, September 2026 ---------- */
/* Section 2: "out of every 100 people", one square each, with an age picker (people.js). */
.people { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px 18px; display: grid; gap: 20px; }
.people-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.people-pick[hidden] { display: none; }
.people-pick button { font: 600 14px/1 var(--sans); color: var(--ink-2); background: var(--paper); border: 1px solid var(--line-2); border-radius: 999px; padding: 9px 14px; cursor: pointer; }
.people-pick button:hover { border-color: var(--gold-deep); }
.people-pick button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.people-pick button:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.people-body { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 40px; align-items: center; }
.waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.waffle i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--line); transition: background-color .25s ease; }
.waffle .c1, .people-key .c1::before { background: #C8A59A; }
.waffle .c2, .people-key .c2::before { background: #E3D3A8; }
.waffle .c3, .people-key .c3::before { background: var(--gold-deep); }
.waffle .c4, .people-key .c4::before { background: var(--green); }
.people-lead { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--ink); margin: 0 0 14px; }
.people-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.people-key li { display: grid; grid-template-columns: 14px 40px 1fr; align-items: baseline; gap: 10px; font-size: 17px; color: var(--ink-2); }
.people-key li::before { content: ''; width: 14px; height: 14px; border-radius: 3px; align-self: center; }
.people-key b { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
/* Section 3: the results email as it lands in an inbox. */
.inbox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; }
.mail { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.mail:first-child { background: var(--gold-tint); }
.mail-from { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: var(--ink); }
.mail-from span { font-size: 14px; color: var(--muted); }
.mail-from time { margin-left: auto; font-size: 13px; color: var(--muted); }
.mail-subject { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.mail-preview { margin: 0; font-size: 15px; color: var(--ink-2); }
.mail-ghost { gap: 8px; padding-block: 18px; }
.mail-ghost span { display: block; height: 10px; border-radius: 5px; background: var(--panel-2); }
.mail-ghost span:first-child { width: 38%; }
.mail-ghost span:last-child { width: 72%; }
.inbox-note { margin: 0; padding: 14px 20px; font-size: 14px; color: var(--ink-2); background: var(--panel); }
@media (max-width: 820px) {
  .people { padding: 16px 14px 14px; }
  .people-body { grid-template-columns: 1fr; gap: 20px; }
  .waffle { max-width: 300px; }
  .people-key li { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .waffle i { transition: none; } }
/* Your presenter: Duncan in a dark band of his own, between What you get and Who we are. */
.presenter-band { background: var(--dark); color: var(--on-dark); padding: 72px 0; }
.presenter-wrap { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 56px; align-items: center; }
.presenter-photo { margin: 0; }
.presenter-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); }
.presenter-band .eyebrow { color: var(--gold); }
.presenter-band h2 { color: #fff; font-size: clamp(30px, 3.4vw, 40px); margin-top: 14px; text-wrap: balance; }
.presenter-band h2 em { font-style: normal; color: var(--gold); }
.presenter-band p { color: var(--on-dark); font-size: 18px; margin-top: 16px; max-width: 58ch; }
.presenter-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 15px; color: var(--on-dark); }
.presenter-facts li::before { content: '✓'; color: var(--gold); font-weight: 700; margin-right: 8px; }
.presenter-band .presenter-link { margin-top: 22px; font-size: 15px; }
.presenter-band .presenter-link a { color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 820px) {
  .presenter-band { padding: 48px 0; }
  .presenter-wrap { grid-template-columns: 1fr; gap: 28px; }
  .presenter-photo { max-width: 300px; }
  .presenter-band p { font-size: 17px; }
  .presenter-facts { flex-direction: column; gap: 8px; }
}
/* Results page: the result itself at the top, in the homepage example's card. */
.r-hero .hero-rank.r-card { margin: 0; width: 100%; max-width: 420px; }
.r-card .rank-note { margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.r-card .rank-source { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
@media (max-width: 820px) { .r-hero .hero-rank.r-card { max-width: none; } }
/* Quiz on phones (MJ, 11 September 2026): the header's small print wrapped under the logo, and the question
   card already says the answers stay on this device. */
@media (max-width: 600px) { .site-header .micro { display: none; } }
/* Quiz email step (MJ, 11 September 2026): the blurred rank stays on one line and its label moves underneath
   when there is no room beside it; the gold button keeps "The Bull's Eye" together. */
.tease-rank { flex-wrap: wrap; row-gap: 4px; }
.tease-rank .blur { white-space: nowrap; }
.gate-form .choice .btn .nb { white-space: nowrap; }
/* The question title takes focus on each step so screen readers start there. It is not a control, so it
   needs no focus ring: on the first question the ring showed as a gold box on load (MJ, 11 September 2026). */
.q-card legend:focus-visible { outline: none; }

/* ================= navy scheme overrides (hbs-navy-scheme, 15 Sept 2026) =================
   Everything below restyles the site in the webinar landing page's navy/gold look. The rules above are
   untouched apart from the tokens, so this block can be lifted out to go back to the cream scheme. */
.hero, .presenter-band, .close-cta, .r-hero, .site-footer {
  background: radial-gradient(1200px 600px at 20% -10%, var(--navy-3) 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, var(--navy-glow) 0%, transparent 55%), var(--navy);
  color: var(--on-dark-muted); position: relative; border: 0;
}
.hero::before, .presenter-band::before, .close-cta::before, .r-hero::before, .site-footer::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-opacity='.045'/%3E%3C/svg%3E");
}
.hero > .wrap, .presenter-band > .wrap, .close-cta > .wrap, .r-hero > .wrap, .site-footer > .wrap { position: relative; }
.hero h1, .hero h2, .presenter-band h2, .close-cta h2, .r-hero h1, .r-hero h2 { color: #fff; }
.hero h1 em, .r-hero h1 em, .presenter-band h2 em { color: var(--gold); }
.hero .eyebrow, .presenter-band .eyebrow, .close-cta .eyebrow, .r-hero .eyebrow { color: var(--gold); }
.hero .lede, .hero-visual .lede, .r-hero .lede, .close-cta p, .presenter-band p, .presenter-facts { color: var(--on-dark-muted); }
.r-hero .lede strong { color: #fff; }
.hero .assure { color: var(--on-dark-muted); }
.hero .assure li::before { color: var(--gold); }
.hero-photo { background: radial-gradient(120% 90% at 50% 100%, rgba(255,255,255,.08) 0%, transparent 70%); }
.hero-video { box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), 0 0 0 1px var(--dark-line); background: var(--navy-2); }
.hero-video .vid-btn { background: rgba(5,10,46,.82); }
.hero-video .vid-btn:hover { background: var(--navy); }
/* Cards that sit on the navy: white, with the landing page's deep shadow so they lift off the ground. */
.hero .hero-rank, .r-hero .hero-rank { color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); border-color: transparent; border-top-color: var(--gold); }
.hero .hero-rank .eyebrow, .r-hero .hero-rank .eyebrow { color: var(--gold-text); }
.r-hero .hero-rank .rank-note { color: var(--ink-2); }

/* header */
.site-header { background: rgba(5,10,46,.94); border-bottom: 1px solid var(--dark-line); color: #fff; }
.site-header .logo img, .site-footer .logo img { filter: invert(1) brightness(1.6); }
.site-header .mark { border-left-color: var(--dark-line); }
.site-header .mark strong { color: #fff; }
.site-header .mark span, .site-header .micro { color: var(--on-dark-muted); }
.site-header nav a:not(.btn) { color: var(--on-dark-muted); }
.site-header nav a:not(.btn):hover { color: #fff; }
.skip { background: var(--navy); color: #fff; border-color: var(--dark-line); }

/* buttons */
.btn-gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: var(--ink); border-color: transparent; box-shadow: 0 10px 26px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .12s, box-shadow .2s, filter .15s; }
.btn-gold:hover { background: linear-gradient(180deg, var(--gold-2), var(--gold)); filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 14px 30px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-gold:active { transform: translateY(1px); }
.btn-dark { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn-dark:hover { background: var(--navy-3); border-color: var(--navy-3); }
.btn-sm.btn-gold { box-shadow: 0 6px 18px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.5); }
.hero :focus-visible, .presenter-band :focus-visible, .close-cta :focus-visible, .r-hero :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .sticky-cta :focus-visible { outline-color: var(--gold); }

/* footer */
.site-footer { padding-top: 48px; }
.site-footer p, .site-footer .copy { color: #a4abcc; }
.site-footer p strong { color: #fff; }
.site-footer a { color: var(--on-dark-muted); }
.site-footer .copy { border-top-color: var(--dark-line); }
.foot-top nav a { text-decoration: none; }
.foot-top nav a:hover { color: #fff; text-decoration: underline; }

/* results hero (the "Done" band) */
.r-hero .top { color: var(--on-dark-muted); }
.r-hero .tile-stat { color: var(--ink); }
.r-hero .tile-stat .eyebrow { color: var(--muted); }
.r-hero .tile-stat p { color: var(--ink-2); }

/* paper-ground details: gold borders and tints follow the new gold */
.chip.offer, .q-cats span.on, .pcard .rank, .pcard .offer, .deal-badge, .cta-badge, .door .who, .tease-card, .lead-card .offer.big, .hero .card .rank-line { border-color: #f0d68a; }
.pcard.lead, .lead-card, .cta-card.primary, .deal:first-child, .webinar .side, .email-box { border-color: var(--gold); }
.hero-cta .btn-line { color: #fff; border-color: rgba(255,255,255,.35); }
.hero-cta .btn-line:hover { background: rgba(255,255,255,.08); }
/* The header is dark too, and its outline button had kept the light theme's dark text (found in the
   25 September end-to-end run: "Free workshop" was there and unreadable). */
.site-header .btn-line { color: #fff; border-color: rgba(255,255,255,.35); }
.site-header .btn-line:hover { background: rgba(255,255,255,.08); }
.webinar { border-top-color: var(--gold); }
.callout { background: var(--paper); }
.callout.alert { background: var(--red-tint); }
.callout.ok { background: var(--green-tint); }

/* sticky phone bar: navy, like the landing page's bar */
@media (max-width: 820px) {
  .sticky-cta { background: rgba(5,10,46,.96); border-top: 1px solid var(--dark-line); box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
}

/* ---------- after the gate: the confirmation page (23 September 2026) ---------- */
/* The results moved into the email, so this page is a confirmation with one job each for its
   three parts: fix a wrong address, offer the workshop, and stay out of the way. */
.gate-where { text-align: center; color: var(--ink-2); margin-top: 12px; }
.gate-form .status.ok { color: var(--green); font-weight: 600; }
/* The confirmation and the way to fix a wrong address are one thought, so they share the hero: the
   message on the left, the form on a card to the right, reusing the grid the rank card used to sit in.
   The card keeps ink on white inside a navy band, so its heading and eyebrow override the band's. */
/* "Nothing yet?" — the resend and address fix. It sat in the navy hero as a white card on a dark
   band until 23 September 2026; it now sits in an ordinary light section after the offer, so the
   heavy drop shadow and the card's own colour override are gone and it is bordered like the rest of
   the page instead. The lede links to it, so #fix-email needs room above it once it is scrolled to,
   or the eyebrow sits jammed against the top of the window. */
#fix-email { scroll-margin-top: 24px; }
@media (max-width: 600px) { .fix-card { padding: 22px 20px 24px; } }
.fix-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--gold);
  border-radius: var(--radius-lg); padding: 26px 28px 28px; max-width: 560px; }
.fix-card h2 { font-size: 24px; margin-top: 6px; max-width: 18ch; }
.fix-card .eyebrow { color: var(--gold-text); }
.fix-card .intro { font-size: 15px; margin-top: 8px; }
.fix-card .gate-form { margin: 18px 0 0; max-width: none; }
.fix-card .gate-form input[type=email] { min-height: 52px; font-size: 16px; }
.fix-card .gate-form .btn { min-height: 52px; font-size: 17px; }
/* The link out of the hero lede. The hero is navy, so it takes the on-dark underline treatment. */
.r-hero .lede-fix { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.r-hero .lede-fix:hover { color: var(--gold-bright); }


/* ---------- the gate as a tease (30 September 2026) ----------
   A navy card holding the real spread of the visitor's age group, with their own place hidden behind
   a marker that never settles. Everything below is scoped to .gate-v2, so the old gate's rules above
   still serve the resend form on the results page. */
.gate-v2 { padding: 26px 24px 24px; }
.gate-v2 h1 { font-size: clamp(27px, 6vw, 40px); margin-top: 6px; }
.gate-lede { margin: 8px auto 0; max-width: 30ch; font-size: 17px; line-height: 1.4; color: var(--ink-2); text-wrap: balance; }
.gate-lede strong { color: var(--gold-text); font-weight: 700; }
.reveal { position: relative; margin: 18px auto 0; max-width: 440px; padding: 16px 18px 14px; border-radius: 16px; text-align: left; color: var(--on-dark-muted); overflow: hidden;
  background: radial-gradient(520px 260px at 0% 0%, var(--navy-3) 0%, transparent 62%), radial-gradient(420px 240px at 100% 100%, var(--navy-glow) 0%, transparent 58%), var(--navy);
  box-shadow: 0 22px 50px -22px rgba(5,10,46,.6); }
.reveal::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M36 0H0v36' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E"); }
.reveal > * { position: relative; }
.reveal-cap { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.reveal-chart { position: relative; height: 96px; margin-top: 34px; }
.reveal-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 5px; }
.reveal-bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12)); transform-origin: bottom; animation: reveal-grow .7s cubic-bezier(.2,.8,.2,1) backwards; }
.reveal-bars i:nth-child(2) { animation-delay: .04s } .reveal-bars i:nth-child(3) { animation-delay: .08s } .reveal-bars i:nth-child(4) { animation-delay: .12s } .reveal-bars i:nth-child(5) { animation-delay: .16s }
.reveal-bars i:nth-child(6) { animation-delay: .2s } .reveal-bars i:nth-child(7) { animation-delay: .24s } .reveal-bars i:nth-child(8) { animation-delay: .28s } .reveal-bars i:nth-child(9) { animation-delay: .32s } .reveal-bars i:nth-child(10) { animation-delay: .36s }
@keyframes reveal-grow { from { transform: scaleY(0); } }
/* The marker sweeps the whole width and never rests on a bar, so it gives nothing away. */
.reveal-pin { position: absolute; top: -6px; bottom: 0; left: 0; width: 2px; background: var(--gold); box-shadow: 0 0 0 4px rgba(245,183,49,.22), 0 0 22px 4px rgba(245,183,49,.45); animation: reveal-sweep 5.5s ease-in-out infinite alternate; }
.reveal-pin b { position: absolute; top: -2px; left: 50%; transform: translate(-50%, -100%); background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.reveal-pin span { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: var(--ink); font-family: var(--serif); font-weight: 800; font-size: 15px; display: grid; place-items: center; }
@keyframes reveal-sweep { from { left: 4%; } to { left: 96%; } }
.reveal-axis { display: flex; justify-content: space-between; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; color: #9aa1c4; }
.reveal-rank { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.reveal-rank .blur { font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1; color: #fff; filter: blur(8px); user-select: none; white-space: nowrap; animation: reveal-breathe 3.2s ease-in-out infinite; }
.reveal-rank > span:last-child { font-size: 15px; font-weight: 600; color: var(--gold-2); }
@keyframes reveal-breathe { 50% { filter: blur(5.5px); } }
.reveal-rows { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 5px; font-size: 13.5px; line-height: 1.3; color: #e4e6f2; }
.reveal-rows li { display: flex; align-items: center; gap: 10px; }
.reveal-rows svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gate-v2 .gate-form { margin-top: 18px; max-width: 440px; }
.gate-label { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--ink); text-align: center; }
.gate-v2 .gate-form input[type=email] { border-width: 2px; }
.gate-v2 .gate-form input[type=email]:focus { outline: none; border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(245,183,49,.25); }
.gate-v2 .gate-form .btn { min-height: 60px; font-size: 19px; }
.gate-when { margin: -2px 0 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.gate-v2 .choice-note strong { color: var(--ink-2); }
.gate-v2 .gate-links { margin-top: 6px; gap: 14px; }
.gate-foot { margin: 18px auto 0; max-width: 440px; text-align: center; }
@media (max-width: 480px) { .gate-v2 { margin-top: 12px; padding: 20px 16px 20px; } .reveal { padding: 14px 14px 12px; } .reveal-chart { height: 76px; } .reveal-rank .blur { font-size: 28px; } .reveal-rank > span:last-child { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .reveal-bars i, .reveal-rank .blur { animation: none; } .reveal-pin { animation: none; left: 50%; } }


/* ---------- the confirmation clip starts by itself, muted (30 September 2026) ----------
   The hero video's two buttons, on the results page's clip. See autoplayVideo in journey.js. */
.door-video.is-auto video { object-fit: cover; }
.door-video video.auto-under { position: absolute; inset: 0; }
.door-video .door-play { z-index: 1; }
.door-video .vid-btn { position: absolute; top: 12px; z-index: 2; background: rgba(5,10,46,.82); color: #fff; border: 0; border-radius: 999px; padding: 8px 14px 8px 12px; font: 700 13px/1 var(--sans); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.door-video .vid-btn svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
.door-video .vid-btn .ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.door-video .pause[data-state="playing"] .i-play, .door-video .pause[data-state="paused"] .i-pause, .door-video .sound[aria-pressed="false"] .i-on, .door-video .sound[aria-pressed="true"] .i-muted { display: none; }
.door-video .sound { right: 12px; }
.door-video .pause { left: 12px; }
.door-video .vid-btn:hover { background: var(--navy); }
.door-video .vid-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.door-video video::cue { font-family: var(--sans); font-size: 15px; line-height: 1.35; color: #fff; background: rgba(20,22,26,.78); }