:root {
  --black: #FAFAFA;
  --deep: #F2F2F0;
  --panel: #FAFAFA;
  --card: #FAFAFA;
  --border: #E4E4E0;
  --muted: #C8C8C4;
  --text-dim: #8A8A84;
  --text: #5A5A54;
  --bright: #3A3A34;
  --white: #1A1A18;
  --red: #5A9A78;
  --red-dim: #E8F2EC;
  --orange: #4A8A68;
  --orange-dim: #E8F2EC;
  --yellow: #5A9A78;
  --green: #5A9A78;
  --green-dim: #E8F2EC;
  --green-bright: #4A8A68;
  --teal: #5A9090;
  --accent: #5A9A78;
  --accent-dim: #E8F2EC;
  --font-display: 'DM Serif Display', serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 10px;
  --radius-lg: 16px;
  --trans: all 0.25s cubic-bezier(0.4,0,0.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch; }
body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; height: 100vh; height: 100dvh; overflow: hidden; }

/* Vue mount point — match the body's full viewport so .app inside can
   reach full height the way it did pre-Vue. The original <main class="app">
   was a direct child of <body>; the new wrapper div has to forward those
   dimensions or the hero stops short. dvh tracks the visible viewport so
   mobile centering survives the URL-bar show/hide. */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── HEADER ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(250,250,250,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 60px;
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 768px) {
  .site-header { padding: 0 28px; }
}
.logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--white);
  text-decoration: none;
}
.logo .b { color: var(--red); }
.header-right { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: flex;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.lang-btn {
  padding: 5px 12px;
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  cursor: pointer;
  transition: var(--trans);
}
.lang-btn.active { background: var(--red); color: #FFFFFF; }

/* ── APP ── */
.app { padding-top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; isolation: isolate; }
.app > :not(.page-bg-pattern) {
  position: relative;
  z-index: 1;
}

/* ── HERO ── */
.hero {
  position: relative;
  /* asymmetric vertical padding shifts the centered content past the fixed header
     and compensates for the scenario-strip below — net effect: visually centered on the viewport */
  padding: 100px 16px 24px;
  text-align: center;
  background: transparent;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Embossed "Plan B" page background — fixed full-viewport, sits behind
   every screen (hero, quiz, results). The translucent fixed headers
   and footers cover their own areas so the pattern doesn't bleed
   through where the user expects clean nav. Text colour matches the
   #F0F0F0 base so only the highlight + shadow text-shadows render,
   giving a subtle pressed-into-the-surface look. */
.page-bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  background: #FAFAFA;
  /* Parent is always visible. The intro overlay is translucent, so the
     animated emboss pattern is already present behind the first line. */
  opacity: 1;
}
.page-bg-pattern .bg-tilt {
  position: absolute;
  inset: -20%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: stretch;
  transform: rotate(-18deg);
  transform-origin: center;
}
.page-bg-pattern .bg-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 400;
  /* 25% larger than before — mobile floor 52px, desktop ceiling 75px.
     Keeps the embossed pattern readable on small screens and scales
     up assertively on wide ones. */
  font-size: clamp(52px, 10vw, 75px);
  letter-spacing: 0.04em;
  /* Debossed (pressed-in) effect — text colour matches the panel
     (#FAFAFA), so only the shadows render. Light from below: dark
     stroke at the top-left, white highlight at the bottom-right —
     opposite of a raised emboss. Same intensities as the previous
     pass so visual weight is unchanged, just inverted direction. */
  color: #FAFAFA;
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.05),
    -2px -2px 1px rgba(0, 0, 0, 0.018),
     1px  1px 0 rgba(255, 255, 255, 0.85);
}
.page-bg-pattern .bg-row span { display: inline-block; }

/* Background pattern uses the same #FAFAFA across every page now —
   homepage, quiz, results all on the lighter panel. */
/* Rows slide in horizontally with alternating direction — odd rows
   come from the left, even rows from the right — so the pattern weaves
   itself together rather than fading in as one slab. The translateX
   sits inside the rotated .bg-tilt, so the slide is slightly off-axis
   in screen space (matches the diagonal tilt). */
.page-bg-pattern .bg-row {
  --row-delay: 0s;
  opacity: 0;
  will-change: opacity, transform;
}
.page-bg-pattern .bg-row:nth-child(odd)  {
  transform: translateX(-160px);
  animation:
    bgRowSlideLeft 1.1s var(--row-delay) cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    bgRowDriftLeft 14s calc(var(--row-delay) + 2.1s) ease-in-out infinite;
}
.page-bg-pattern .bg-row:nth-child(even) {
  transform: translateX(160px);
  animation:
    bgRowSlideRight 1.1s var(--row-delay) cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    bgRowDriftRight 14s calc(var(--row-delay) + 2.1s) ease-in-out infinite;
}
body:not(.intro-done) .page-bg-pattern .bg-row {
  opacity: 1;
}
body:not(.intro-done) .page-bg-pattern {
  animation: introPatternFade 18s ease both;
}
body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(odd) {
  animation: bgRowDriftLeft 14s ease-in-out infinite;
}
body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(even) {
  animation: bgRowDriftRight 14s ease-in-out infinite;
}
body:not(.intro-done) .page-bg-pattern .bg-row {
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.075),
    -2px -2px 1px rgba(0, 0, 0, 0.035),
     1px  1px 0 rgba(255, 255, 255, 0.9);
}

/* Simple slide-in per row, alternating direction, followed by a perpetual
   alternating drift. This starts immediately so the pattern is visible
   underneath the intro overlay from the first sentence onward. */
@keyframes bgRowDriftLeft {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-60px); }
}
@keyframes bgRowDriftRight {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(60px); }
}
.page-bg-pattern .bg-row:nth-child(1)  { --row-delay: 0.00s; }
.page-bg-pattern .bg-row:nth-child(2)  { --row-delay: 0.10s; }
.page-bg-pattern .bg-row:nth-child(3)  { --row-delay: 0.20s; }
.page-bg-pattern .bg-row:nth-child(4)  { --row-delay: 0.30s; }
.page-bg-pattern .bg-row:nth-child(5)  { --row-delay: 0.40s; }
.page-bg-pattern .bg-row:nth-child(6)  { --row-delay: 0.50s; }
.page-bg-pattern .bg-row:nth-child(7)  { --row-delay: 0.60s; }
.page-bg-pattern .bg-row:nth-child(8)  { --row-delay: 0.70s; }
.page-bg-pattern .bg-row:nth-child(9)  { --row-delay: 0.80s; }
.page-bg-pattern .bg-row:nth-child(10) { --row-delay: 0.90s; }
@keyframes bgRowSlideLeft {
  from { opacity: 0; transform: translateX(-160px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes bgRowSlideRight {
  from { opacity: 0; transform: translateX(160px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes introPatternFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* (Per-page bg override removed — every page now uses #FAFAFA.) */

/* Hero copy sits above the fixed pattern layer. */
.hero-eyebrow {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #0a0a0a;
  margin-bottom: 12px;
  /* 1.0s delay so the embossed pattern settles first; the rest of
     the hero (h1 / sub / cta) chains off this with their own offsets. */
  animation: fadeUp 1s 1.0s ease both;
  font-weight: 400;
}
.hero h1 {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 400;
  /* Default (DE / "Kammergut") — divisor ≈ rendered-text-to-font-size
     ratio of the wider wordmark in DM Serif Display at 0.05em tracking.
     EN ("Deepstock") gets a smaller divisor below to fill at its own
     ratio. -32px matches the hero's 16px padding each side. */
  font-size: calc((100vw - 32px) / 6);
  line-height: 1;
  letter-spacing: 0.05em;
  color: #1A1A18;
  margin-bottom: 40px;
  animation: fadeUp 1s 1.15s ease both;
}
/* Mobile uses the same flat #F0F0F0 background as desktop now that
   the bg image has been removed. */
/* Tablet — same fill behaviour as mobile (hero padding stays 16px
   each side). */
@media (min-width: 768px) {
  .hero h1 { font-size: calc((100vw - 32px) / 6); }
}
@media (min-width: 900px) {
  .hero h1 { font-size: clamp(120px, 14vw, 176px); }
}

/* English brand ("Deepstock") — narrower wordmark needs a smaller
   divisor (≈ ratio measured at 0.05em tracking) to fill the same
   16px-padded width as the wider Kammergut. */
html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
@media (min-width: 768px) {
  html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); }
}
@media (min-width: 900px) {
  html[lang="en"] .hero h1 { font-size: clamp(120px, 17vw, 220px); }
}

.hero h1 .b { color: #5A9A78; }

/* Trademark mark — only auto-attached to the small header logo. The
   hero H1 uses an explicit sibling .brand-tm span instead, since CSS
   filters on the H1 (paint-3d) would otherwise pull ™ into the gloss. */
.logo[data-i18n="brand"]::after {
  content: "™";
  font-size: 0.4em;
  vertical-align: super;
  letter-spacing: 0;
}

/* Hero brand line — flex wrapper so ™ can sit next to the painted H1
   without being inside the H1's filter scope. The wrapper takes over
   the H1's bottom margin and entrance animation so the line moves
   together. */
.hero .brand-line {
  display: inline-block;
  white-space: nowrap;
  position: relative; z-index: 1;
  margin: 0 auto 40px;
  animation: fadeUp 1s 1.15s ease both;
}
.hero .brand-line h1.paint-3d {
  display: inline-block;
  vertical-align: top;
  margin-bottom: 0;
  animation: none;
}
.brand-tm {
  display: inline-block;
  vertical-align: super;
  font-family: var(--font-display);
  font-weight: 400;
  /* 1/5 of H1 size to match the small superscript scale used elsewhere */
  font-size: calc((100vw - 32px) / 25);
  line-height: 1;
  color: #1A1A18;
  letter-spacing: 0;
  margin-left: 0.05em;
}
@media (min-width: 768px) {
  .brand-tm { font-size: calc((100vw - 64px) / 25); }
}
@media (min-width: 900px) {
  .brand-tm { font-size: clamp(24px, 2.8vw, 35px); }
}

/* Glossy 3D paint effect on the brand title — no hover state by design,
   the wordmark holds its painted look regardless of pointer position. */
.hero h1.paint-3d {
  filter: url(#paintGloss);
  -webkit-filter: url(#paintGloss);
  /* subtle vertical sheen — top catches light, bottom sinks back into the paint */
  background: linear-gradient(180deg, #2a2a26 0%, #1A1A18 45%, #060604 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0.12em 0.08em 0.2em;
}
/* Mobile — swap to the lighter paint-gloss filter so the drop shadow
   is dialled back. Same gradient + gloss, gentler shadow underneath. */
@media (max-width: 767px) {
  .hero h1.paint-3d {
    filter: url(#paintGlossLight);
    -webkit-filter: url(#paintGlossLight);
    font-weight: 500;
    text-shadow: 0.012em 0 0 currentColor;
  }
}
.hero-sub {
  position: relative; z-index: 1;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 400;
  color: #0a0a0a;
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.6;
  animation: fadeUp 1s 2.0s ease both;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 48px;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease, var(--trans);
  animation: fadeUp 1s 2.45s ease both;
  /* Lift above .hero::after radial fade so the button isn't washed out */
  z-index: 2;
}
.cta-btn span { position: relative; }

/* ── EMAIL CAPTURE ── */
.email-section {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 28px 24px;
}
.email-inner {
  max-width: 540px;
  margin: 0 auto;
}
.email-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.email-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 6px;
}
.email-sub {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.6;
}
.email-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.email-input {
  flex: 1;
  min-width: 200px;
  padding: 13px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: var(--trans);
}
.email-input:focus { border-color: var(--red); }
.email-input::placeholder { color: var(--muted); }
.email-submit {
  padding: 13px 24px;
  background: var(--red);
  border: none;
  border-radius: var(--radius);
  color: #0C0C0E;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--trans);
  white-space: nowrap;
}
.email-submit:hover { background: #7AB498; }
.email-success {
  display: none;
  padding: 14px 20px;
  background: var(--green-dim);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  color: var(--green-bright);
  font-size: 14px;
  font-weight: 600;
  margin-top: 10px;
}
.email-success.show { display: block; }
.email-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
}

/* ── SCENARIO STRIP ── */
.scenario-strip {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  padding: 20px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scenario-strip::-webkit-scrollbar { display: none; }
.scenario-pill {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--text-dim);
  background: rgba(255,255,255,0.02);
}
.pill-1 { border-color: rgba(90,154,120,0.2); color: var(--red); }
.pill-2 { border-color: rgba(90,154,120,0.15); color: var(--text); }
.pill-3 { border-color: rgba(90,154,120,0.15); color: var(--text); }
.pill-4 { border-color: rgba(106,170,138,0.2); color: var(--green); }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }

/* ── QUESTIONNAIRE ── */
.quiz-section {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.quiz-section.hidden { display: none !important; }
.quiz-progress-bar {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  background: rgba(250,250,250,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  /* Match .site-header dimensions: 60px tall, 24px mobile / 28px desktop padding */
  height: 60px;
  padding: 0 24px;
  z-index: 110;
}
@media (min-width: 768px) {
  .quiz-progress-bar { padding: 0 28px; }
}
body.quiz-active .site-header { display: none; }
.quiz-progress-bar .progress-wrap { max-width: 540px; margin: 0 auto; }
.quiz-progress-bar .progress-header { margin-bottom: 6px; }
.quiz-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 24px 110px;
  width: 100%;
}
.quiz-content #question-container {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.quiz-footer {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  background: rgba(250,250,250,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 14px 24px max(14px, env(safe-area-inset-bottom));
  z-index: 90;
}
.quiz-footer .q-nav { max-width: 540px; margin: 0 auto; }
.quiz-footer:empty { display: none; }
.progress-wrap { margin-bottom: 0; }
.progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.progress-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.progress-count { font-family: var(--font-mono); font-size: 13px; color: var(--bright); }
.progress-bar { height: 3px; background: var(--muted); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--red); border-radius: 99px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); }

.question-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  animation: fadeUp 0.35s ease both;
}
.q-step { font-family: var(--font-mono); font-size: 10px; color: var(--red); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; }
.q-text { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--white); line-height: 1.3; margin-bottom: 8px; }
.q-sub { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 24px; }
.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-opt {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--trans);
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: touch;
}
.q-opt:hover { border-color: rgba(255,255,255,0.08); background: var(--deep); }
.q-opt.selected { border-color: var(--red); background: rgba(90,154,120,0.06); }
.q-opt.selected .opt-radio { border-color: var(--red); }
.q-opt.selected .opt-radio::after { display: block; }
.opt-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--muted);
  flex-shrink: 0; position: relative; transition: var(--trans);
}
.opt-radio::after {
  content: ''; display: none;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  background: var(--red); border-radius: 50%;
}
.opt-label { font-size: 15px; color: var(--bright); line-height: 1.4; }
.opt-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.q-opt.multi .opt-radio { border-radius: 4px; }
.q-opt.multi.selected .opt-radio { border-color: var(--red); background: var(--red); border-radius: 4px; }
.q-opt.multi.selected .opt-radio::after {
  display: block; content: '✓'; color: white; font-size: 11px; font-weight: bold;
  background: none; width: auto; height: auto; top: 50%; left: 50%;
  transform: translate(-50%,-55%); border-radius: 0;
}
.slider-wrap { padding: 8px 0; }
.slider-labels { display: flex; justify-content: space-between; margin-bottom: 12px; }
.slider-labels span { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); }
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--muted); border-radius: 99px; outline: none; cursor: pointer; }
/* Slider thumb — dark green paint style. CSS-only approximation of the
   SVG paintGlossBtn filter the CTA buttons use: a #2a3010 base with a
   linear gradient simulating the embossed top-highlight / bottom-shadow,
   plus an inset top stroke and a soft drop shadow. */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a4220 0%, #2a3010 55%, #161a08 100%);
  border: 1px solid rgba(0,0,0,0.40);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,0.22),
    0 2px 6px rgba(0,0,0,0.30),
    0 0 0 4px rgba(42,48,16,0.10);
}
input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3a4220 0%, #2a3010 55%, #161a08 100%);
  border: 1px solid rgba(0,0,0,0.40);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,0.22),
    0 2px 6px rgba(0,0,0,0.30),
    0 0 0 4px rgba(42,48,16,0.10);
}
.slider-val { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--white); margin-top: 16px; }
.slider-val span { font-size: 18px; color: var(--text-dim); margin-left: 4px; }

.q-nav { display: flex; gap: 12px; }
.btn-back { flex: 1; height: 52px; background: var(--panel); border: 1px solid var(--border); border-radius: 0; color: var(--text-dim); font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--trans); display: flex; align-items: center; justify-content: center; }
.btn-back:hover { border-color: var(--muted); color: var(--text); }
.btn-next { flex: 1; height: 52px; background: var(--red); border: none; border-radius: 0; color: #FFFFFF; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--trans); box-shadow: 0 2px 20px rgba(90,154,120,0.15); }
.btn-next:hover { background: #C8A870; }
.btn-next:disabled { background: var(--muted); box-shadow: none; cursor: not-allowed; color: var(--deep); }

/* ── RESULTS ── */
.results-section { padding: 84px 20px 80px; max-width: 600px; margin: 0 auto; width: 100%; display: none; }
@media (min-width: 768px) {
  /* Desktop — bump the content column ~15% so the result panels and
     recommendation cards have more breathing room on a wide viewport. */
  .results-section { max-width: 690px; }
}
.results-section.active { display: block; }
/* Risk banner — wrapper provides positioning + padding so risk-* variants
   can paint their fill via ::before (the dark-green paint variant uses an
   SVG gloss filter that needs an isolated stacking context). */
.risk-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  text-align: center;
  animation: fadeUp 0.4s ease both;
}
.risk-level { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.85; }
/* Heading typeface unified with the button font (Barlow / var(--font-body))
   instead of the DM Serif display face — keeps the assessment headings in
   the same family as the CTA buttons. */
.risk-title {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 10px;
}
.risk-desc { font-size: 14px; opacity: 0.9; line-height: 1.6; }
/* Risk variants — each state wears a paint card in its own deep tint.
   ::before carries the painted fill (paintGlossBtn filter for the glossy
   embossed look that the CTA buttons use); the wrapper itself is just
   the drop shadow + positioning context. Text colours flip to warm cream
   for legibility on the dark backgrounds. */
.risk-critical,
.risk-high,
.risk-medium,
.risk-low {
  background: transparent;
  border: none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.risk-critical::before,
.risk-high::before,
.risk-medium::before,
.risk-low::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
.risk-critical::before { background: #5A1818; }   /* deep maroon — critical */
.risk-high::before     { background: #5A3818; }   /* deep amber — high */
.risk-medium::before   { background: #4A3A10; }   /* dark olive — moderate */
.risk-low::before      { background: #2A3010; }   /* dark green — prepared */

.risk-critical .risk-level,
.risk-critical .risk-title,
.risk-critical .risk-desc,
.risk-high .risk-level,
.risk-high .risk-title,
.risk-high .risk-desc,
.risk-medium .risk-level,
.risk-medium .risk-title,
.risk-medium .risk-desc,
.risk-low .risk-level,
.risk-low .risk-title,
.risk-low .risk-desc { color: #f4ecd8; }

/* Scenario tabs — flat row inside the white-paint Recommendations panel.
   No outer container border/padding (the panel frame already provides
   that); inactive tabs are quiet text buttons. The active tab wears the
   green-paint CTA look (same paint gloss + #2a3010 fill as the protein
   button) so the current scenario reads at a glance. */
.scenario-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px;
  animation: fadeUp 0.4s 0.1s ease both;
}
@media (min-width: 768px) {
  /* Desktop has room for one row of 4. */
  .scenario-tabs { grid-template-columns: repeat(4, 1fr); }
}
.s-tab {
  flex: 1;
  position: relative;
  isolation: isolate;
  padding: 10px 6px;
  border: none;
  background: transparent;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s ease;
  text-align: center;
  line-height: 1.3;
}
.s-tab:hover { color: var(--text); }
/* Active state — green-paint button. ::before holds the glossy fill so
   the text colour stays solid against the dark green. */
.s-tab.active-s1,
.s-tab.active-s2,
.s-tab.active-s3,
.s-tab.active-s4 {
  color: #f4ecd8;
}
.s-tab.active-s1::before,
.s-tab.active-s2::before,
.s-tab.active-s3::before,
.s-tab.active-s4::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: #2a3010;
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
  transition: filter 0.6s ease;
}

/* Recommendation cards — wear the white-paint inner-item look (#F0F0F0 +
   embossed shadow + inset highlight), parallel to the .q-opt items inside
   the question card. The rec-cards sit inside the .result-panel which is
   #FAFAFA, mirroring the question-card / q-opt nesting. Text colours flip
   to dark for legibility on the light background. */
.rec-cards { animation: fadeUp 0.4s 0.15s ease both; }
.rec-card {
  /* Lighter card body — was #F0F0F0 (read as grey on the page); now
     #FAFAFA so the product info sits on a near-white surface. The
     header above takes the light sage tone as a visual section break. */
  background: #FAFAFA;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* Header strip wears the same light sage as the .rp-hint banner so
   the rec-card sections read as a coordinated family. */
.rec-header {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #E5F0E0;
  border-bottom: 1px solid rgba(90,154,120,0.22);
}
/* Green-paint icon chip — matches the painted CTA buttons. ::before
   carries the dark-green fill with the gloss filter; the icon SVG inside
   inherits the warm-cream stroke colour via currentColor. */
.rec-icon {
  position: relative;
  isolation: isolate;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #f4ecd8;
}
.rec-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: #2a3010;
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
.rec-cat { font-family: var(--font-mono); font-size:14px; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; }
.rec-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text); line-height: 1.2; }
.priority-badge { margin-left: auto; padding: 4px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; flex-shrink: 0; }
/* Priority badges — proper traffic-light palette so urgency reads at a
   glance. Backgrounds are soft tints of the same hue so the pill stays
   light and the text colour does the colour-coding. */
.p-critical { background: rgba(192,48,48,0.10);  color: #C03030; border: 1px solid rgba(192,48,48,0.30); }
.p-high     { background: rgba(220,124,32,0.10); color: #C16A18; border: 1px solid rgba(220,124,32,0.32); }
.p-medium   { background: rgba(212,168,32,0.12); color: #A48010; border: 1px solid rgba(212,168,32,0.35); }

.rec-body { padding: 14px 16px; }
.rec-items { display: flex; flex-direction: column; gap: 12px; }
.rec-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.rec-item:last-child { border-bottom: none; padding-bottom: 0; }
.item-name { font-weight: 600; font-size: 15px; color: var(--text); }
.item-why { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.item-cost { font-family: var(--font-mono); font-size: 13px; color: var(--green-bright); }
/* Cost + affiliate-btn footer row inside each rec-item. Default (desktop)
   is the cost on the left and the button on the right; on mobile the
   button drops to its own row at full width — easier tap target. */
.rec-item-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.affiliate-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 0;
  color: var(--text);
  font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: var(--trans); width: fit-content;
}
.affiliate-btn:hover { background: rgba(0,0,0,0.08); }
@media (max-width: 767px) {
  /* Mobile — break the button onto its own row beneath the cost and let
     it fill the rec-item width. flex-wrap on the parent does the line
     break; flex-basis: 100% guarantees the row split even when the cost
     is short. */
  .rec-item-foot .affiliate-btn {
    flex: 0 0 100%;
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    margin-top: 4px;
  }
}

/* Budget meter — same logic as the rec-cards: text flips to dark since
   the .result-panel underneath is white-paint. The .budget-meter wrapper
   itself is stripped to transparent in the panel-body override (line ~615),
   so only the inner element colours need adjusting here. */
.budget-meter { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; animation: fadeUp 0.4s 0.2s ease both; }
/* Inner budget title matches the panel header typography (.rp-title:
   var(--font-body), 700, 0.02em tracking) but a touch bigger so the
   total reads as the primary stat inside the panel. */
.bm-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--text);
  margin-bottom: 16px;
}
.budget-cats { display: flex; flex-direction: column; gap: 10px; }
.bcat { display: flex; align-items: center; gap: 10px; }
.bcat-label { font-size: 16px; color: var(--text-dim); width: 110px; flex-shrink: 0; }
.bcat-bar-wrap { flex: 1; height: 6px; background: rgba(0,0,0,0.08); border-radius: 99px; overflow: hidden; }
.bcat-bar { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }
.bcat-cost { font-family: var(--font-mono); font-size: 15px; color: var(--text); width: 72px; text-align: right; flex-shrink: 0; }
/* Total row — sums the breakdown above. Same .bcat layout so the label
   and amount align with the category rows, plus a top divider and a
   touch more weight to set it apart as the summary line. */
.bcat-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.bcat-total .bcat-label { color: var(--text); font-weight: 600; }
.bcat-total .bcat-cost { color: var(--text); font-weight: 700; }
.bcat-total .bcat-bar-wrap { background: transparent; height: 0; }

/* Timeline — same dark-on-light flip. Connector line uses a subtle dark
   border colour so it reads on the white-paint panel. */
.timeline { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; animation: fadeUp 0.4s 0.25s ease both; }
.tl-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 16px; }
.tl-items { display: flex; flex-direction: column; gap: 0; }
/* Each step gets generous breathing room top + bottom so the timeline
   reads as a sequence of distinct moments rather than a tight list.
   Padding is consistent across every item (no first/last overrides) so
   the connector line positioning is stable from step to step. */
.tl-item { display: flex; gap: 16px; padding: 14px 0 28px; position: relative; }
.tl-item:last-child { padding-bottom: 4px; }
/* Connector line — light dotted column drawn as a dotted left border on a
   zero-width pseudo. Top starts 46px from item-top (just under a 32px dot
   sat on 14px padding) and bottom extends -14px past the item so it
   reaches the next item's dot at its 14px padding offset. */
.tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 46px;
  bottom: -14px;
  width: 0;
  border-left: 2px dotted rgba(0,0,0,0.18);
}
/* Timeline dot — green-paint circle that matches the rec-icon chip but
   round. Same painted ::before with a slightly larger size so the icon
   inside reads at small viewport sizes. */
.tl-dot {
  position: relative;
  isolation: isolate;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  color: #f4ecd8;
}
.tl-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: #2a3010;
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
/* Step title — vertically centred against the 32px dot using min-height
   + flex centring so the label sits at the dot's mid-line rather than
   its top edge. Dark-green-paint colour so the title matches the rest
   of the brand-paint elements. */
.tl-when {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2a3010;
  margin-bottom: 6px;
  min-height: 32px;
  display: flex;
  align-items: center;
}
.tl-action { font-size:16px; color: var(--text); line-height: 1.5; }
.tl-cost { font-family: var(--font-mono); font-size:15px; color: var(--green-bright); margin-top: 4px; }

/* ── RESULT PANELS — collapsible accordions for progressive disclosure.
   Recommendations open by default; Budget and Timeline collapsed so the
   results page doesn't overwhelm. The panel itself becomes the white-paint
   card; inner sections (.budget-meter, .timeline, .scenario-tabs) drop their
   own box treatment so the panel frame is the only container. */
.result-panel {
  background: #FAFAFA;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.result-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.result-panel-header::-webkit-details-marker { display: none; }
.result-panel-header:hover { background: rgba(0,0,0,0.02); }
.rp-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  flex: 1;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
/* ── ICONS ── inline SVG line-icons inherit colour via currentColor.
   Sized via the width/height attribute on the <svg>; vertical-align
   keeps the icon flush with its sibling text in flex/inline contexts. */
.icon { display: inline-block; vertical-align: middle; }

/* Narrative ("Your Personal Analysis") — green icon next to the title. */
.narrative-icon { display: inline-flex; color: var(--green-bright); }

/* Protein-offer badge — small lock chip prefixing the eyebrow text. */
.protein-offer-badge .badge-icon {
  display: inline-flex;
  align-items: center;
  color: var(--green-bright);
  margin-right: 4px;
  vertical-align: -2px;
}

/* Success state inside the modal — large check + small mail prefix on
   the spam-folder note. */
.success-check {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(90,154,120,0.10);
  border: 1px solid rgba(90,154,120,0.30);
  color: var(--green-bright);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 10px;
}
.success-spam {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(212,168,32,0.1);
  border: 1px solid rgba(212,168,32,0.35);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
}
.success-spam-icon {
  flex-shrink: 0;
  display: inline-flex;
  color: #D4A820;
  margin-top: 1px;
}
.success-spam > div {
  font-size: 14px;
  color: #D4A820;
  line-height: 1.7;
}

/* Affiliate button — small cart icon flush with the label. */
.affiliate-btn .icon { color: currentColor; }

/* In-body hint above the scenario tabs — full-width sage-green paint
   banner matching the protein-offer / risk-low look so it reads as a
   small action prompt rather than a footnote. Center-aligned with a
   touch more weight than the previous mono caption. */
.rp-hint {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  background: #E5F0E0;
  border: 1px solid rgba(90,154,120,0.30);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 0 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.rp-chevron {
  font-size: 14px;
  color: var(--text-dim);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.result-panel[open] .rp-chevron { transform: rotate(180deg); }
.result-panel-body {
  /* Generous top padding so the expanded content has clear breathing
     room beneath the panel header (was 0 → 20px). */
  padding: 20px 18px 18px;
}
/* Strip box treatment from inner cards when wrapped in a panel — the panel
   is now the visible container. */
.result-panel-body .budget-meter,
.result-panel-body .timeline {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
  animation: none;
}
.result-panel-body .scenario-tabs {
  margin-bottom: 16px;
  animation: none;
}
.result-panel-body .rec-cards { animation: none; }
/* Drop the redundant inner timeline title — the panel header replaces it. */
.result-panel-body .tl-title { display: none; }

/* Results email capture */
.results-email {
  background: linear-gradient(135deg, var(--red-dim), #141210);
  border: 1px solid rgba(90,154,120,0.2);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  animation: fadeUp 0.4s 0.3s ease both;
}
.results-email .email-label { color: var(--red); }
.results-email .email-title { font-size: 18px; }

.restart-btn { width: 100%; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 0; color: var(--text-dim); font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: var(--trans); margin-top: 8px; }
.restart-btn:hover { border-color: var(--muted); color: var(--text); }

/* ── ABOUT ── */
.about-section { background: var(--deep); border-top: 1px solid rgba(255,255,255,0.04); padding: 56px 24px; text-align: center; }
.about-section h2 { font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--white); margin-bottom: 14px; }
.about-section p { font-size: 14px; color: var(--text-dim); max-width: 380px; margin: 0 auto 20px; line-height: 1.8; font-weight: 300; }
.affiliate-note { font-family: var(--font-mono); font-size: 10px; color: var(--muted); letter-spacing: 0.08em; line-height: 1.8; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hidden { display: none !important; }

/* ── INTRO OVERLAY ─────────────────────────────────────────────────
   Three-stage cinematic typographic intro: a slow left-to-right sweep
   on the first line, then two stages that drift in from a soft blur
   while the letter-spacing tightens. Text is flat #0a0a0a on a FAFAFA
   panel — no paint gloss filter. Body picks up `.intro-done` once all
   stages have played, which is what lets the hero/header animations
   start. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 1.375s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.intro-overlay.done { opacity: 0; }
.intro-overlay.gone { display: none; }

.intro-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  padding: 0 32px;
  white-space: pre-line;
}

/* Stage icons — paint-style badge that visually persists across all
   three stages (same circle, same paint filter, same position) so the
   inner glyph appears to morph through it as stages crossfade. The
   glyph itself draws in stroke-by-stroke per stage. Cream stroke on
   dark green paint matches the CTA buttons. */
.stage-icon {
  display: block;
  width: clamp(72px, 13vw, 100px);
  height: clamp(72px, 13vw, 100px);
  fill: none;
  opacity: 0;
  transform: scale(0.78);
  transform-origin: center;
}
.stage-icon .badge {
  fill: #2a3010;
  stroke: none;
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
.stage-icon .glyph {
  color: #f4ecd8;
  stroke: currentColor;
  /* Slightly thicker strokes so the cream icons read with confidence
     against the dark green paint chip. */
  stroke-width: 3.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Per-element overrides — accent strokes (ridge, hour hand, side
   buttons) are thinner so they read as detail rather than primary. */
.stage-icon .glyph .i-ridge { stroke-width: 1.4; opacity: 0.55; }
.stage-icon .glyph .i-side  { stroke-width: 2.2; }
.stage-icon .glyph .i-hour  { stroke-width: 2.6; }
.stage-icon .glyph .i-tick  { stroke-width: 2.4; }
.stage-icon .glyph .i-pin   { fill: currentColor; stroke: none; }
/* Bolder mark / bolt — the punctuation strokes inside each icon. */
.stage-icon .glyph .i-mark { stroke-width: 4.2; }
.stage-icon .glyph .i-bolt { stroke-width: 4.0; }
/* Glyph paths/lines/circles draw in stroke-by-stroke. pathLength: 1
   normalises the dashoffset so each piece draws over the same time. */
.stage-icon .glyph path,
.stage-icon .glyph line,
.stage-icon .glyph circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
}
.intro-stage.active .stage-icon {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.45s ease 0.06s,
    transform 0.75s cubic-bezier(0.18, 0.89, 0.32, 1.18) 0.06s;
}
.intro-stage.stage-1.active .stage-icon {
  animation: introIconIn 1.05s 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.18) both;
  transition: none;
}
@keyframes introIconIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.72); }
  70%  { opacity: 1; transform: translateY(0) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-stage.active .stage-icon .glyph path,
.intro-stage.active .stage-icon .glyph line,
.intro-stage.active .stage-icon .glyph circle {
  animation: introDraw 1.125s 0.125s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes introDraw {
  to { stroke-dashoffset: 0; }
}
.stage-icon .filled-icon path {
  fill: currentColor;
  stroke: none;
  opacity: 0;
  transform: scale(0.84);
  transform-box: fill-box;
  transform-origin: center;
}
.intro-stage.active .stage-icon .filled-icon path {
  animation: introGlyphPop 0.9s 0.225s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
}
@keyframes introGlyphPop {
  to { opacity: 1; transform: scale(1); }
}
.stage-icon .glyph-stroke {
  fill: none;
  stroke: #fff8dc;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 248, 220, 0.55));
}
.stage-icon .glyph-fill {
  fill: #fff8dc;
  stroke: none;
  opacity: 0;
  filter:
    drop-shadow(0 0 5px rgba(255, 248, 220, 0.95))
    drop-shadow(0 0 14px rgba(244, 236, 216, 0.7));
}

.intro-stage.stage-1.active .i-lightning-flash {
  animation: lightningStrike 1.08s 0.45s steps(1, end) 4;
}
@keyframes lightningStrike {
  0%   { opacity: 0; }
  7%   { opacity: 1; }
  12%  { opacity: 0.16; }
  18%  { opacity: 1; }
  25%  { opacity: 0; }
  42%  { opacity: 0.92; }
  50%  { opacity: 0.18; }
  64%  { opacity: 1; }
  72%  { opacity: 0; }
  100% { opacity: 0; }
}
.sun-glyph {
  color: #fff8dc;
  fill: none;
  opacity: 0;
  transform: scale(0.72);
  transform-box: fill-box;
  transform-origin: center;
  filter:
    drop-shadow(0 0 5px rgba(255, 248, 220, 0.75))
    drop-shadow(0 0 16px rgba(244, 236, 216, 0.45));
}
.sun-glyph .sun-core {
  fill: currentColor;
  stroke: none;
}
.sun-glyph .sun-rays {
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-stage.stage-1.active .sun-glyph {
  animation: sunRiseIn 1.25s 3.85s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
}
.intro-stage.stage-1.leaving .sun-glyph {
  animation: sunToClockOut 2.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.intro-stage.stage-2.active .stage-icon {
  transition:
    opacity 2.05s ease 0.35s,
    transform 2.25s cubic-bezier(0.18, 0.89, 0.32, 1.08) 0.35s;
}
.intro-stage.stage-1.active .i-cloud {
  animation:
    introGlyphPop 0.9s 0.225s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards,
    cloudZoomOut 0.95s 2.9s cubic-bezier(0.4, 0, 1, 1) forwards !important;
}
@keyframes sunRiseIn {
  0%   { opacity: 0; transform: scale(0.72); }
  70%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes sunToClockOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.62); }
}
@keyframes cloudZoomOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.62); }
}

/* Stage 2 — clock hand sweeps smoothly through the whole second sentence. */
.icon-clock .i-crown { animation-delay: 0.10s !important; }
.icon-clock .i-face  { animation-delay: 0.20s !important; animation-duration: 0.7s !important; }
.icon-clock .i-tick  { animation-delay: 0.70s !important; animation-duration: 0.3s !important; }
.icon-clock .i-hand {
  transform-origin: 48px 48px;
  animation-delay: 0.70s !important;
  animation-duration: 0.35s !important;
}
.intro-stage.stage-2.active .icon-clock .i-hand {
  animation: introDraw 0.35s 0.125s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
             clockSweep 4.9s 0.125s linear forwards;
}
@keyframes clockSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(720deg); }
}

/* Stage exit — keep the badge/icon present while text dissolves, so the
   circle feels continuous instead of outroing between sentences. */
.intro-stage.leaving .stage-icon {
  opacity: 1;
  transform: scale(1);
}
/* Intro text — uppercase Barlow at heading scale with wide tracking,
   matching the "Preparedness. Refined." sub-line typeface. No paint
   filter / no gradient text-fill (those tanked render performance during
   the animation, hence the wobble). Solid #0a0a0a on the FAFAFA panel. */
.intro-stage .intro-text {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(22px, 4.6vw, 42px);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  /* Word-cascade default — wrapper is visible; per-word spans inside
     animate in with a stagger (delays set inline by JS). */
  opacity: 1;
}

/* Smoke reveal — heavy blur clears as the text emerges, with a small
   y-drift to suggest weight settling. No clip-path wipe and no letter
   spacing animation (the resizing effect read as twitchy). Used by all
   three stages so the unveiling is one consistent vocabulary. Stage 3
   runs at half-speed (3.6s vs 1.8s) so the closing line lands with
   weight instead of rushing past. */
/* Word cascade — used by every stage. Each word fades / drifts / blurs
   in independently with a 0.16s stagger; the parent .intro-text stays
   visible the whole time. JS rebuilds the per-word spans on each play
   so language switches between sessions still split correctly. */
.intro-stage .intro-text > .word {
  display: inline-block;
  margin-right: 0.28em;
  opacity: 0;
  /* Promote each word to its own GPU layer so the staggered reveals
     don't compound layout work as more words come in. Removed the
     blur from the keyframe — animating filter on 10 words at once
     was the lag source. */
  will-change: opacity, transform;
}
/* Optional per-stage emphasis hook. */
.intro-stage .intro-text > .word.bold {
  font-weight: 700;
}
.intro-stage.active .intro-text > .word {
  animation: introWord 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.intro-stage.stage-1.active .intro-text > .word {
  animation-delay: calc(var(--word-delay, 0s) + 1.125s) !important;
}
@keyframes introWord {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Exit — smoke out: re-blur to 16px, drift upward 14px, fade to 0.
   Same effect for every stage so each sentence dissolves into haze
   before the next one resolves. */
.intro-stage.leaving .intro-text {
  animation: introOut 1s cubic-bezier(0.4, 0, 1, 1) forwards;
}
.intro-stage.stage-1.leaving .intro-text {
  animation-duration: 1.5s;
}
@keyframes introOut {
  0%   { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(16px); }
}
/* Hero — hidden until intro is done so the bg image, brand wordmark,
   tagline and Begin button appear AFTER the intro plays out rather
   than during. The original animations on these elements stay defined
   below; we just override animation-name to none until intro-done is
   on the body, at which point each animation plays from its origin. */
body:not(.intro-done) .hero-eyebrow,
body:not(.intro-done) .hero h1,
body:not(.intro-done) .hero .brand-line,
body:not(.intro-done) .hero-sub,
body:not(.intro-done) .hero .cta-btn {
  animation-name: none !important;
  opacity: 0;
}
/* Header + lang toggle ride along — hidden until intro is done. The
   intro-overlay already covers the hero bg during the stages, so the
   bg image's fade-in is the natural consequence of the overlay
   fading out. */
body:not(.intro-done) .site-header { opacity: 0; }
body.intro-done .site-header {
  opacity: 1;
  transition: opacity 0.6s ease 1.0s;
}

/* ── SINGLE FOLD: hide non-essential sections on load ──
   (header stays visible with a transparent background on the homepage) */
.site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }

/* Results-page header — soft white fade so content doesn't visually
   clash with the logo / language toggle when scrolling underneath
   (especially noticeable on mobile). The header itself becomes a
   translucent white veil; a ::after pseudo extends ~28px below it
   with a fade-to-transparent so the boundary feels organic. */
body.results-active .site-header {
  background: rgba(250,250,250,0.86);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
body.results-active .site-header::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(250,250,250,0.86) 0%, rgba(250,250,250,0) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.scenario-strip,
.email-section,
.about-section { display: none !important; }
/* Language switcher — wears the white-paint look (#F0F0F0 fill, soft
   light-grey ambient shadow + faint top highlight to match the H1
   white paint). Inner buttons stay transparent so the fill reads as
   one unit. */
.lang-toggle {
  background: #F0F0F0 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 4px;
  box-shadow: 0 3px 5px rgba(0,0,0,0.07), inset 0 1px 0 rgba(255,255,255,0.6);
  overflow: hidden;
}
.lang-btn { background: transparent !important; color: var(--text-dim); }
.lang-btn.active { background: transparent !important; color: var(--red); }

/* ── CAPTURE FORM ── */
/* Capture form container — wears the same white-paint look as the inner
   selectors, but a touch whiter (#FAFAFA vs #F0F0F0) so it reads as the
   outer container while keeping the H1's dy=7 / blur≈10 / 0.12 alpha drop
   and faint inset top highlight for the gloss feel. */
.capture-form-wrap{background:#FAFAFA;border:1px solid rgba(0,0,0,0.06);border-radius:var(--radius-lg);padding:28px 24px;margin-bottom:20px;animation:fadeUp 0.4s 0.3s ease both;box-shadow:0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);}

/* Country/region indicator hidden — not needed in this build. */
#region-indicator { display: none !important; }

/* ── Paint variants (ported from paint.html for in-page experimentation) ── */
body.paint-green .hero h1.paint-3d {
  background: #2a3010;
  -webkit-background-clip: text;
  background-clip: text;
}
body.paint-green .cta-btn::before {
  background: #2a3010;
}
body.paint-white .hero h1.paint-3d {
  filter: url(#paintGlossWhite);
  -webkit-filter: url(#paintGlossWhite);
  background: #F0F0F0;
  -webkit-background-clip: text;
  background-clip: text;
}
body.paint-white .cta-btn { color: #1A1A18; }
body.paint-white .cta-btn:hover { color: #060604; }
body.paint-white .cta-btn::before {
  background: #F0F0F0;
  filter: url(#paintGlossWhiteBtn);
  -webkit-filter: url(#paintGlossWhiteBtn);
}

/* Header / quiz-progress-bar logos follow the active paint colour so
   the small wordmark stays in sync with the hero as the user plays
   with the modifier. Reads --mod-fill (set by the fill picker) and
   falls back to the variant's default. White paint is intentionally
   excluded — a near-white logo would vanish against the light
   site-header background. */
body.paint-green .logo,
body.paint-green .qpb-logo {
  color: var(--mod-fill, #2a3010);
}

/* Paint picker UI — top-right swatches */
.paint-picker { display: flex; gap: 8px; align-items: center; }
.paint-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}
.paint-swatch:hover { transform: scale(1.08); }
.paint-swatch.swatch-dark  { background: linear-gradient(180deg, #2a2a26, #060604); }
.paint-swatch.swatch-green { background: #2a3010; }
.paint-swatch.swatch-white { background: linear-gradient(180deg, #FFFFFF, #DDDDDD); }
.paint-swatch.active {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Modifier toggle ⚙ — wears the same white-paint look as the lang-toggle */
/* Hidden for now — styles preserved so we can re-enable the modifier
   panel later by removing this single rule. */
.mod-open-btn { display: none !important; }
.mod-open-btn {
  background: #F0F0F0;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  color: var(--text-dim);
  transition: var(--trans);
}
.mod-open-btn:hover { color: var(--text); }

/* Quiz progress bar — flex row with logo (left), progress (center), lang (right).
   Logo matches the site-header .logo: same 20px DM Serif Display. */
.quiz-progress-bar { display: flex; align-items: center; gap: 16px; }
@media (min-width: 768px) {
  .quiz-progress-bar { gap: 32px; }
}
.quiz-progress-bar .qpb-logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--white);
  white-space: nowrap;
  text-decoration: none;
}
.quiz-progress-bar .progress-wrap { flex: 1; max-width: none; margin: 0; }
/* Desktop — cap the progress bar at the form width (540px) so it reads
   tighter and lines up with the question card below. Auto margins on the
   flex item absorb leftover horizontal space symmetrically, centring the
   bar between the logo (left) and lang-toggle (right). */
@media (min-width: 768px) {
  .quiz-progress-bar .progress-wrap { max-width: 540px; margin: 0 auto; }
}
.quiz-progress-bar .lang-toggle { flex-shrink: 0; }
@media (max-width: 767px) {
  .quiz-progress-bar .lang-toggle { display: none; }
}

/* Active language button — bolded red so the current selection stands
   out against the white-paint container fill. */
.lang-btn.active { font-weight: 800 !important; color: var(--red) !important; }

/* Outer question-card wears the glossy white-paint look at #FAFAFA —
   a touch whiter than the inner .q-opt (#F0F0F0) so it reads as the
   surrounding container while keeping the same drop-shadow + inset
   top highlight as .capture-form-wrap. */
.question-card {
  background: #FAFAFA !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}

/* Inner selection options wear the white-paint look: #F0F0F0 fill,
   soft light-grey ambient shadow + faint inset top highlight.
   Shadow kept lighter than the outer .question-card so the depth
   reads as outer-elevated > inner-resting. */
.q-opt {
  background: #F0F0F0 !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.q-opt:hover { border-color: rgba(0,0,0,0.12) !important; background: #F4F4F4 !important; }
.q-opt.selected { border-color: var(--red) !important; }

/* Modifier panel — hidden by default, opens when body has .mod-open */
.mod-panel {
  position: fixed;
  top: 72px;
  right: 12px;
  width: 280px;
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 8px;
  display: none;
}
body.mod-open .mod-panel { display: block; }
.mod-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.mod-header h3 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 400; margin: 0;
}
.mod-paint-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--red); letter-spacing: 0.1em;
  text-transform: uppercase; margin-left: 8px;
}
.mod-toggle {
  background: none; border: 1px solid var(--border); border-radius: 3px;
  width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 0;
}
.mod-fieldset {
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; margin: 0 0 8px;
}
.mod-fieldset legend {
  padding: 0 4px;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim);
}
.mod-row {
  display: grid;
  grid-template-columns: 56px 1fr 38px;
  gap: 6px; align-items: center; margin: 4px 0;
}
.mod-row > span:first-child {
  font-size: 10px; color: var(--text-dim);
}
.mod-row input[type="range"] { width: 100%; }
.mod-row input[type="color"] {
  width: 100%; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 3px;
  grid-column: 2 / span 2;
}
.mod-row output {
  font-size: 10px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.mod-actions {
  display: flex; align-items: center; gap: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.mod-actions button {
  flex: 1; padding: 6px 12px;
  background: var(--red); color: #fff;
  border: none; border-radius: 3px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
}
.mod-copy-status {
  font-size: 10px; color: var(--green); white-space: nowrap;
}
.mod-fieldset[data-hide] { display: none; }
.capture-label{font-family:var(--font-mono);font-size:10px;color:var(--red);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:12px;display:block;}
.capture-title{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--white);margin-bottom:6px;}
.capture-sub{font-size:13px;color:var(--text-dim);line-height:1.6;margin-bottom:20px;}
.form-grid{display:flex;flex-direction:column;gap:12px;}
.form-row{display:flex;gap:10px;flex-wrap:wrap;}
.form-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:140px;}
.field-label{font-size:11px;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:0.06em;text-transform:uppercase;}
.form-input,.form-select{width:100%;padding:12px 14px;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);color:var(--white);font-family:var(--font-body);font-size:14px;outline:none;transition:var(--trans);}
.form-input:focus,.form-select:focus{border-color:rgba(90,154,120,0.4);}
.form-input::placeholder{color:var(--muted);}
.form-select{cursor:pointer;-webkit-appearance:none;appearance:none;}
.form-select option{background:var(--card);color:var(--white);}
.form-input[rows]{resize:vertical;min-height:80px;line-height:1.5;}
.capture-submit{width:100%;padding:16px;background:var(--red);border:none;border-radius:0;color:#0C0C0E;font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;transition:var(--trans);margin-top:4px;box-shadow:0 4px 24px rgba(90,154,120,0.2);}
.capture-submit:hover{background:#7AB498;transform:translateY(-1px);}


/* ── NARRATIVE SECTION ── */
/* Narrative card — white-paint container that matches the form / result
   panels (#FAFAFA, embossed shadow, inset highlight). The header takes a
   slightly greyer tint (#F0F0F0) so it reads as a subtle band above the
   body — same nesting as the result-panel header. */
.narrative-section {
  background: #FAFAFA;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
  animation: fadeUp 0.4s ease both;
  box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.narrative-header {
  padding: 14px 18px;
  background: #F0F0F0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
}
.narrative-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.narrative-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--red-dim);
  padding: 3px 8px;
  border-radius: 4px;
}
.narrative-body {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
}
.narrative-body h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  margin: 20px 0 8px;
  letter-spacing: 0.02em;
}
.narrative-body h4:first-child { margin-top: 0; }
.narrative-body p { margin: 0 0 12px; }
.narrative-body ul { margin: 8px 0 12px; padding-left: 20px; }
.narrative-body li { margin-bottom: 6px; }
.narrative-body strong { color: var(--text); font-weight: 700; }
.narrative-loading {
  padding: 32px 24px;
  text-align: center;
}
.loading-dots {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 12px;
}
.loading-dots span {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}
.loading-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


.scroll-hint {
  text-align: center;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}


/* ── REQUIRED BADGE ── */
.capture-required-badge {
  background: rgba(90,154,120,0.06);
  border: 1px solid rgba(90,154,120,0.15);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--red);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}

/* ── NEWSLETTER CHECKBOX ── */
.newsletter-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  transition: var(--trans);
  margin-top: 4px;
}
.newsletter-check:hover { border-color: var(--muted); }
.newsletter-check input[type=checkbox] { display: none; }
.check-box {
  width: 20px; height: 20px;
  border: 2px solid var(--muted);
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
  transition: var(--trans);
  background: transparent;
}
.newsletter-check input:checked ~ .check-box {
  background: rgba(90,154,120,0.9);
  border-color: var(--red);
}
.newsletter-check input:checked ~ .check-box::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  color: white;
  font-size: 12px;
  font-weight: 700;
}
.check-label {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}


/* ── NARRATIVE PROGRESS BAR ── */
.narrative-progress {
  height: 3px;
  background: var(--muted);
  margin: 0 24px 0;
  border-radius: 99px;
  overflow: hidden;
}
.narrative-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--red);
  border-radius: 99px;
  transition: width 0.5s linear;
}


/* ── STAGED REVEAL ── */
.reveal-section {
  display: none;
}
.reveal-section.revealed {
  display: block;
  animation: fadeUp 0.5s ease both;
}


/* ── NARRATIVE CTA ── */
.narrative-cta {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.narrative-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: #0C0C0E;
  border: none;
  border-radius: 0;
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--trans);
  width: 100%;
  justify-content: center;
  line-height: 1.4;
  text-align: center;
}
.narrative-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 24px rgba(90,154,120,0.25); background: #7AB498; }


/* ── CAPTURE FORM HEADER ── */
.capture-form-header {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--white);
  letter-spacing: 0.01em;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(90,154,120,0.2);
  margin-bottom: 20px;
}


/* ── PROPRIETARY PROTEIN OFFER ── */
.protein-offer {
  background: #E5F0E0;
  border: 1px solid rgba(90,154,120,0.30);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 20px;
  animation: fadeUp 0.5s ease both;
  display: none;
  box-shadow: 0 7px 10.6px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
}
.protein-offer.show { display: block; }
.protein-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(40,160,96,0.15);
  border: 1px solid rgba(40,160,96,0.4);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--green-bright);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.protein-offer-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.25;
  letter-spacing: 0.01em;
}
.protein-offer-body {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 16px;
}
.protein-offer-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 0;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: var(--trans);
  width: 100%;
  justify-content: center;
}
.protein-offer-btn:hover { background: #32C070; transform: translateY(-1px); }
/* Responsive label — short on mobile (narrow card), long on desktop. */
.protein-offer-btn .po-label-desktop { display: none; }
@media (min-width: 768px) {
  .protein-offer-btn .po-label-mobile { display: none; }
  .protein-offer-btn .po-label-desktop { display: inline; }
}

.scenario-strip{
  overflow:hidden;
  padding:16px 0;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  cursor:grab;
  position:relative;
}
.scenario-strip:active{cursor:grabbing;}
.scenario-strip-track{
  display:flex;
  gap:12px;
  padding:4px 24px;
  width:max-content;
  animation:scroll-pills 28s linear infinite;
  -webkit-overflow-scrolling:touch;
}
.scenario-strip:hover .scenario-strip-track,
.scenario-strip:focus-within .scenario-strip-track {
  animation-play-state:paused;
}
@keyframes scroll-pills {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Painted button system ──────────────────────────────────────────
   Shared embossed-paint fill for primary CTAs (.cta-btn, .btn-next,
   .narrative-cta-btn, .capture-submit). Secondary actions
   (.btn-back, .restart-btn) keep their original flat panel style. */

.cta-btn,
.btn-next,
.narrative-cta-btn,
.capture-submit,
.protein-offer-btn {
  position: relative;
  isolation: isolate;
  background: transparent;
  border: none;
  box-shadow: none;
}
.cta-btn::before,
.btn-next::before,
.narrative-cta-btn::before,
.capture-submit::before,
.protein-offer-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  transition: filter 0.6s ease;
}

/* Primary — dark fill */
.cta-btn,
.btn-next,
.narrative-cta-btn,
.capture-submit {
  color: #f4ecd8;
}
.cta-btn::before,
.btn-next::before,
.narrative-cta-btn::before,
.capture-submit::before {
  background: linear-gradient(180deg, #2a2a26 0%, #1A1A18 45%, #060604 100%);
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
.cta-btn:hover::before,
.btn-next:hover::before,
.narrative-cta-btn:hover::before,
.capture-submit:hover::before {
  filter: url(#paintGlossBtnHover);
  -webkit-filter: url(#paintGlossBtnHover);
}
.cta-btn:hover,
.btn-next:hover,
.narrative-cta-btn:hover,
.capture-submit:hover,
.protein-offer-btn:hover {
  background: transparent;
  color: #fff8e8;
  transform: none;
  box-shadow: none;
}
.cta-btn:active,
.btn-next:active,
.narrative-cta-btn:active,
.capture-submit:active,
.protein-offer-btn:active { opacity: 0.9; }

/* Green-paint variant — the protein-offer button always wears the green
   paint regardless of body.paint-* state (parallels body.paint-green
   .cta-btn::before, but pinned to this button as a one-off). */
.protein-offer-btn { color: #f4ecd8; }
.protein-offer-btn::before {
  background: #2a3010;
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
.protein-offer-btn:hover::before {
  filter: url(#paintGlossBtnHover);
  -webkit-filter: url(#paintGlossBtnHover);
}

/* Unified button typography — every primary CTA wears the .cta-btn font
   (var(--font-body), 400 weight, 13px, 0.2em tracking, uppercase) so the
   results-page actions match the homepage "Begin" button. Padding and
   width stay per-button so visual hierarchy is preserved. Place after
   the per-button rules above so this wins the cascade. */
.cta-btn,
.btn-next,
.btn-back,
.narrative-cta-btn,
.capture-submit,
.protein-offer-btn,
.restart-btn,
.form-modal-close {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ── FORM MODAL ──
   Layout: fixed overlay with the panel scaled to the viewport. Panel is a
   flex column — header (sticky) / body (scrollable) / footer (sticky) —
   so the submit button stays in view while long forms scroll inside. */
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  padding: 16px;
  background: rgba(20, 20, 20, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
.form-modal.open {
  display: flex;
  /* Backdrop fades in opacity-only — no translate on the full-screen
     overlay (the previous fadeUp slid the whole 100vh tinted layer
     upward, which read as a heavy whoosh). */
  animation: modalBackdropIn 0.25s ease forwards;
}
@keyframes modalBackdropIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.form-modal-panel {
  position: relative;
  width: 100%;
  max-width: 580px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.7);
  /* Panel rises into place with a tiny scale lift — separate from the
     backdrop so the contents have their own beat. */
  animation: modalPanelIn 0.32s 0.05s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.form-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.form-modal-header .modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.form-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px;
}
.form-modal-body .capture-sub {
  margin-bottom: 16px;
}
.form-modal-footer {
  flex-shrink: 0;
  padding: 14px 18px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #FAFAFA;
}
.form-modal-footer .capture-submit {
  width: 100%;
  margin: 0;
}
/* Close button — secondary style: white card with subtle border (parallels
   the .btn-back / restart-btn flat panel look). The × is drawn from two
   CSS strokes via ::before / ::after so it sits pixel-centred regardless
   of font metrics; the button's text content is sized to 0 so the inline
   "×" character isn't rendered. */
.form-modal-close {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 4px;
  background: #FAFAFA;
  color: var(--text);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0; /* hides the literal "×" character */
  line-height: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.form-modal-close::before,
.form-modal-close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--text);
  border-radius: 1px;
  transform-origin: center;
}
.form-modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.form-modal-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.form-modal-close:hover { background: #FFFFFF; border-color: rgba(0,0,0,0.20); }
.form-modal-close:active { background: #F0F0F0; }

/* In-form privacy note — sits between the protein field and newsletter
   checkbox (above the fixed footer submit). */
.form-privacy {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
  margin: 4px 0 0;
}

/* iOS-Safari-safe scroll lock — overflow:hidden alone leaks touch scroll
   on iOS, so we also pin position:fixed and width:100%. JS sets the
   `top` inline style to -savedScrollY so the page stays where it was,
   then restores scrollY on close. */
body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}
.btn-next:disabled,
.btn-next:disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: #f4ecd8;
  box-shadow: none;
}
.btn-next:disabled::before,
.btn-next:disabled:hover::before {
  filter: url(#paintGlossBtn);
  -webkit-filter: url(#paintGlossBtn);
}
