/* =====================================================================
   BivvyBase · Onboarding Quiz Funnel
   Brand tokens: aubergine #5c2928, beige #f6f2e9, groen #38412f, geel #ff9f0e
   Display: Fraunces (Brolian-stand-in) · Body: Anaheim
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anaheim&display=swap');

@font-face {
  font-family: 'Brolian';
  src: url('https://cdn.prod.website-files.com/695bd6f9286637446725b89f/695bdc0b781e0169ae3cab91_Brolian-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --aubergine:        #5c2928;
  --aubergine-deep:   #3d1817;
  --aubergine-soft:   #784d4c;
  --beige:            #f6f2e9;
  --beige-warm:       #ece4d2;
  --beige-deep:       #d9cfb8;
  --groen:            #38412f;
  --groen-soft:       #545b4d;
  --groen-mist:       #7e8775;
  --geel:             #ff9f0e;
  --geel-soft:        #ffc877;
  --ink:              #1d100f;
  --paper:            #faf7ee;

  /* Foreground / text */
  --fg-on-paper:      #2a1413;
  --fg-on-paper-mute: #6e5b48;
  --fg-on-dark:       #f6f2e9;
  --fg-on-dark-mute:  rgba(246,242,233,0.72);

  /* Borders */
  --border-paper:     rgba(92,41,40,0.14);
  --border-paper-2:   rgba(92,41,40,0.22);
  --border-dark:      rgba(246,242,233,0.16);
  --border-dark-2:    rgba(246,242,233,0.32);

  /* Type */
  --font-display: 'Brolian', 'Anaheim', 'Helvetica Neue', sans-serif;
  --font-body:    'Anaheim', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 19px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-4xl: 46px;
  --text-5xl: 58px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* Radius */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 9999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(45,15,14,0.08), 0 6px 18px rgba(45,15,14,0.10);
  --shadow-2: 0 4px 12px rgba(45,15,14,0.16), 0 32px 70px rgba(45,15,14,0.22);
  --shadow-glow: 0 0 0 2px rgba(255,159,14,0.32), 0 8px 24px rgba(255,159,14,0.18);

  /* Motion */
  --ease-curve: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 380ms;
  --dur-slow: 560ms;

  /* Layout */
  --app-width: 430px;
  --app-bottom: env(safe-area-inset-bottom, 0px);
  --app-top:    env(safe-area-inset-top, 0px);
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #1a0f0e;
  color: var(--fg-on-paper);
  font-family: var(--font-body);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100dvh;
  display: flex; align-items: stretch; justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, #3d1817 0%, transparent 60%),
    linear-gradient(180deg, #1a0f0e 0%, #0d0807 100%);
}
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
input, select, textarea { font: inherit; color: inherit; }
em { font-style: italic; }
.hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   App shell (phone)
   ========================================================= */
.app-shell {
  width: 100%;
  min-height: 100dvh;
  display: flex; align-items: stretch; justify-content: center;
}
.phone {
  position: relative;
  width: 100%;
  max-width: var(--app-width);
  min-height: 100dvh;
  background: var(--paper);
  color: var(--fg-on-paper);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), 0 40px 80px rgba(0,0,0,0.45);
}
@media (min-width: 480px) {
  .phone {
    border-radius: 32px;
    margin: 24px auto;
    min-height: 0;
    /* Vaste mobile-ratio: hoogte volgt het scherm, breedte volgt de hoogte.
       Zo blijft de verhouding altijd 9:19.5 — niet uitgerekt op grote
       schermen, niet ingedrukt op kleine. align-self overrulet de
       stretch van .app-shell, anders wordt de telefoon full-height. */
    align-self: center;
    aspect-ratio: 9 / 19.5;
    height: calc(100dvh - 48px);
    max-height: calc(var(--app-width) * 19.5 / 9);
    width: auto;
  }
}

/* Top bar with back + progress */
.top-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-4);
  padding: calc(var(--app-top) + 14px) var(--s-5) 14px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 70%, rgba(250,247,238,0));
}
.top-bar.hidden { display: none; }
.back-btn {
  width: 36px; height: 36px; border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--aubergine);
  transition: background var(--dur-fast) var(--ease-curve), opacity var(--dur-fast);
}
.back-btn[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.back-btn:hover { background: rgba(92,41,40,0.08); }
.progress {
  flex: 1; height: 4px; border-radius: var(--r-full);
  background: rgba(92,41,40,0.10);
  overflow: hidden;
}
.progress__fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--aubergine) 0%, var(--geel) 100%);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease-curve);
}
.skip-btn {
  font-size: var(--text-sm); font-weight: 500;
  color: var(--fg-on-paper-mute);
  padding: 6px 10px;
}

/* =========================================================
   Screens
   ========================================================= */
.screens {
  position: relative;
  flex: 1;
  display: flex;
  width: 100%;
}
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transform: translateX(36px);
  transition: opacity var(--dur) var(--ease-curve), transform var(--dur) var(--ease-curve);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.is-active {
  opacity: 1; pointer-events: auto;
  transform: translateX(0);
}
.screen.is-leaving-back {
  transform: translateX(36px);
}
.screen__head {
  padding: 8px var(--s-6) 0;
}
.screen__body {
  flex: 1;
  padding: var(--s-5) var(--s-6) var(--s-9);
}
.screen__foot {
  position: sticky; bottom: 0;
  padding: var(--s-4) var(--s-6) calc(var(--app-bottom) + var(--s-6));
  background: linear-gradient(180deg, rgba(250,247,238,0) 0%, var(--paper) 30%);
  z-index: 5;
}

/* =========================================================
   Type
   ========================================================= */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-on-paper-mute);
  margin: 0;
}
.h1, h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--aubergine);
  margin: 10px 0 0;
}
h1, .h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
.h1 em, h1 em, h2 em {
  font-style: normal;
  color: var(--geel);
}
.lede {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--fg-on-paper-mute);
  margin: 14px 0 0;
  line-height: 1.45;
  max-width: 36ch;
}
.body-txt {
  font-size: var(--text-base);
  color: var(--fg-on-paper);
  line-height: 1.55;
}
.muted { color: var(--fg-on-paper-mute); }

/* =========================================================
   Buttons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  width: 100%;
  padding: 16px 20px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-curve),
              background var(--dur-fast) var(--ease-curve),
              box-shadow var(--dur-fast) var(--ease-curve),
              opacity var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn--primary {
  background: var(--aubergine);
  color: var(--beige);
  box-shadow: 0 4px 14px rgba(92,41,40,0.22);
}
.btn--primary:hover:not(:disabled) { background: var(--aubergine-deep); }

.btn--accent {
  background: var(--geel);
  color: var(--aubergine);
  box-shadow: 0 4px 16px rgba(255,159,14,0.34);
}
.btn--accent:hover:not(:disabled) { background: var(--geel-soft); }

.btn--ghost {
  background: transparent;
  color: var(--aubergine);
  border: 1px solid var(--border-paper-2);
}
.btn--ghost:hover { background: rgba(92,41,40,0.06); }

.btn--inline {
  width: auto;
  padding: 10px 16px;
  font-size: var(--text-sm);
}

/* =========================================================
   Welcome screen · full bleed photo with overlay
   ========================================================= */
.welcome {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column;
  color: var(--fg-on-dark);
  background:
    linear-gradient(180deg, rgba(13,8,7,0.05) 0%, rgba(13,8,7,0.55) 60%, rgba(13,8,7,0.92) 100%),
    url('https://cdn.prod.website-files.com/695bd6f9286637446725b89f/696a4ea9e2701cf61b3e9413_frame%2099.webp');
  background-size: cover;
  background-position: center;
}
.welcome__brand {
  padding: calc(var(--app-top) + 22px) var(--s-6) 0;
  display: flex; align-items: center; gap: var(--s-3);
}
.welcome__wordmark { height: 28px; width: auto; opacity: 0.95; }
.welcome__hero {
  margin-top: auto;
  padding: 0 var(--s-6) var(--s-3);
}
.welcome__eyebrow {
  font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--geel);
  margin: 0 0 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.welcome__eyebrow::before {
  content: ''; width: 18px; height: 1px; background: currentColor;
}
.welcome__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-5xl);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--beige);
  margin: 0;
}
.welcome__title em {
  font-style: normal;
  color: var(--geel-soft);
  font-weight: 900;
}
.welcome__sub {
  font-size: var(--text-md);
  line-height: 1.5;
  color: var(--fg-on-dark-mute);
  margin: 18px 0 0;
  max-width: 32ch;
}
.welcome__foot {
  padding: var(--s-7) var(--s-6) calc(var(--app-bottom) + var(--s-7));
  display: flex; flex-direction: column; gap: var(--s-4);
}
.welcome__foot .btn--accent {
  box-shadow: 0 8px 28px rgba(255,159,14,0.45);
}
.press-strip {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--fg-on-dark-mute);
  font-size: var(--text-xs);
}
.press-strip__row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  column-gap: 18px; row-gap: 4px;
  font-weight: 500; letter-spacing: 0.04em;
  color: var(--fg-on-dark);
  text-align: center;
}
.press-strip__row span { position: relative; white-space: nowrap; }
.press-strip__row span + span::before {
  content: ''; position: absolute; left: -9px; top: 50%;
  width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: currentColor; opacity: 0.4;
}

/* =========================================================
   Goal cards · large emotional choice
   ========================================================= */
.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-tight { display: flex; flex-direction: column; gap: 10px; }

.goal-card {
  width: 100%;
  position: relative;
  text-align: left;
  background: var(--beige);
  border: 1.5px solid var(--border-paper);
  border-radius: var(--r-lg);
  padding: 18px 56px 18px 18px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color var(--dur-fast) var(--ease-curve),
              background var(--dur-fast) var(--ease-curve),
              transform var(--dur-fast) var(--ease-curve);
}
.goal-card:hover { background: var(--beige-warm); }
.goal-card.is-selected {
  border-color: var(--aubergine);
  background: var(--beige-warm);
  box-shadow: var(--shadow-glow);
}
.goal-card__head {
  display: flex; align-items: center; gap: 12px;
}
.goal-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: var(--aubergine);
  color: var(--beige);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.goal-card.is-selected .goal-card__icon {
  background: var(--geel); color: var(--aubergine);
}
.goal-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--aubergine);
  letter-spacing: 0;
  line-height: 1.25;
}
.goal-card__title em {
  font-style: normal;
  color: var(--aubergine);
  font-weight: 700;
  border-bottom: 2px solid var(--geel);
}
.goal-card__body {
  margin: 0 0 0 48px;
  font-size: var(--text-sm);
  color: var(--fg-on-paper-mute);
  line-height: 1.5;
}
.goal-card__chev {
  position: absolute; top: 50%; right: 18px;
  transform: translateY(-50%);
  color: var(--aubergine);
  opacity: 0.35;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
}
.goal-card.is-selected .goal-card__chev { opacity: 1; transform: translateY(-50%) translateX(2px); }

/* =========================================================
   Choice (single-select tile)
   ========================================================= */
.choice {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--beige);
  border: 1.5px solid var(--border-paper);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.choice:hover { background: var(--beige-warm); }
.choice.is-selected {
  border-color: var(--aubergine);
  background: var(--beige-warm);
}
.choice__icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: rgba(92,41,40,0.08);
  color: var(--aubergine);
  display: grid; place-items: center; flex-shrink: 0;
}
.choice.is-selected .choice__icon {
  background: var(--aubergine); color: var(--beige);
}
.choice__main { flex: 1; min-width: 0; }
.choice__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--aubergine);
  line-height: 1.25;
}
.choice__sub {
  font-size: var(--text-sm);
  color: var(--fg-on-paper-mute);
  line-height: 1.4;
  margin-top: 2px;
}
.choice__check {
  width: 22px; height: 22px;
  border-radius: var(--r-full);
  border: 1.5px solid var(--border-paper-2);
  flex-shrink: 0;
  display: grid; place-items: center;
  color: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.choice.is-selected .choice__check {
  background: var(--aubergine); border-color: var(--aubergine); color: var(--beige);
}

/* =========================================================
   Tag (multi-select chip)
   ========================================================= */
.tags {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border: 1.5px solid var(--border-paper);
  background: var(--beige);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--aubergine);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.tag:hover { background: var(--beige-warm); }
.tag.is-selected {
  background: var(--aubergine);
  color: var(--beige);
  border-color: var(--aubergine);
}
.tag__check {
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: rgba(92,41,40,0.18);
  display: grid; place-items: center;
  color: transparent;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.tag.is-selected .tag__check {
  background: var(--geel); color: var(--aubergine);
}

/* =========================================================
   Why screen · photo + quote
   ========================================================= */
.why-photo {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--s-3) 0 var(--s-5);
  aspect-ratio: 4/5;
  background: var(--groen-soft);
}
.why-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.why-photo__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,8,7,0) 0%, rgba(13,8,7,0.55) 70%, rgba(13,8,7,0.85) 100%);
}
.why-photo__quote {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  color: var(--beige);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.4;
  font-weight: 500;
  font-style: italic;
}
.why-photo__quote em { color: var(--geel-soft); font-style: normal; }
.why-photo__attrib {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-on-dark-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.why-bullets {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.why-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: var(--text-base);
  color: var(--fg-on-paper);
  line-height: 1.45;
}
.why-bullets__dot {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--aubergine);
  color: var(--geel);
  display: grid; place-items: center;
  margin-top: 1px;
}

/* =========================================================
   Stat / social proof interstitial
   ========================================================= */
.stat-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(135deg, var(--aubergine-deep) 0%, var(--aubergine) 100%);
  color: var(--beige);
  padding: var(--s-7) var(--s-6);
  margin: var(--s-3) 0 var(--s-5);
  isolation: isolate;
  box-shadow: 0 12px 32px rgba(45,15,14,0.25);
}
.stat-card::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,159,14,0.18), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(255,159,14,0.08), transparent 50%);
  opacity: 1;
  z-index: -1;
}
.stat-card__big {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 88px;
  line-height: 0.88;
  letter-spacing: -0.05em;
  color: var(--geel-soft);
}
.stat-card__big sup { font-size: 0.4em; vertical-align: super; opacity: 0.7; }
.stat-card__label {
  margin-top: 12px;
  font-size: var(--text-md);
  line-height: 1.4;
  color: var(--beige);
}
.stat-card__attrib {
  margin-top: 18px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-on-dark-mute);
}

.testimonial-card {
  background: var(--beige);
  border-radius: var(--r-lg);
  padding: 18px;
  border: 1px solid var(--border-paper);
  margin-top: var(--s-3);
}
.testimonial-card__rating {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  color: var(--geel);
}
.testimonial-card__rating-num {
  margin-left: 4px;
  font-weight: 600;
  color: var(--aubergine);
  font-size: var(--text-sm);
}
.testimonial-card__quote {
  font-size: var(--text-md);
  line-height: 1.45;
  color: var(--aubergine);
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
}
.testimonial-card__name {
  margin-top: 10px;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-on-paper-mute);
}

/* =========================================================
   Recap · profile summary
   ========================================================= */
.recap-card {
  background: var(--beige);
  border: 1px solid var(--border-paper);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-top: var(--s-3);
  display: flex; flex-direction: column; gap: 14px;
}
.recap-row {
  display: flex; align-items: flex-start; gap: 12px;
}
.recap-row__icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: rgba(92,41,40,0.08);
  color: var(--aubergine);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.recap-row__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--fg-on-paper-mute);
}
.recap-row__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--aubergine);
  margin-top: 2px;
  line-height: 1.3;
}

/* =========================================================
   Loading screen
   ========================================================= */
.loading-screen {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-7) var(--s-6);
  background:
    radial-gradient(600px 300px at 50% 30%, rgba(255,159,14,0.10) 0%, transparent 70%),
    var(--paper);
}
.loading-flame {
  width: 120px; height: 120px;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 50% 60%, var(--geel) 0%, var(--aubergine) 60%);
  display: grid; place-items: center;
  color: var(--beige);
  margin-bottom: var(--s-6);
  animation: flame-pulse 2.4s ease-in-out infinite;
}
@keyframes flame-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,159,14,0); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(255,159,14,0); }
}
.loading-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  color: var(--aubergine);
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.loading-sub {
  font-size: var(--text-base);
  color: var(--fg-on-paper-mute);
  margin: 12px 0 var(--s-7);
  max-width: 32ch;
}
.loading-checklist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 320px;
  text-align: left;
}
.check-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--beige);
  border: 1px solid var(--border-paper);
  opacity: 0.4;
  transition: opacity var(--dur) var(--ease-curve);
  font-size: var(--text-sm);
  color: var(--aubergine);
}
.check-item.is-active { opacity: 1; }
.check-item__dot {
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  border: 2px solid var(--border-paper-2);
  flex-shrink: 0;
  display: grid; place-items: center;
  color: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.check-item.is-active .check-item__dot {
  border-color: var(--geel);
  background: var(--geel);
  color: var(--aubergine);
}
.check-item.is-active .check-item__dot {
  animation: check-spin 1.2s linear infinite;
}
.check-item.is-done .check-item__dot {
  animation: none;
  background: var(--aubergine);
  border-color: var(--aubergine);
  color: var(--geel);
}
@keyframes check-spin {
  to { transform: rotate(360deg); }
}
.loading-tip {
  margin-top: var(--s-7);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--fg-on-paper-mute);
  max-width: 30ch;
}

/* =========================================================
   Match reveal · product card
   ========================================================= */
.match-hero {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  margin: var(--s-3) 0 var(--s-5);
  aspect-ratio: 4/5;
  background: var(--groen-soft);
}
.match-hero img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 8s ease-out;
}
.screen.is-active .match-hero img { transform: scale(1.06); }
.match-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,8,7,0.0) 0%, rgba(13,8,7,0.7) 100%);
}
.match-hero__pill {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--geel);
  color: var(--aubergine);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.match-hero__title-wrap {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  color: var(--beige);
}
.match-hero__type {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--geel-soft);
  margin: 0 0 6px;
}
.match-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--beige);
  margin: 0;
}

.match-meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 0 0 var(--s-5);
}
.match-meta__cell {
  background: var(--beige);
  border: 1px solid var(--border-paper);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.match-meta__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-on-paper-mute);
  font-weight: 600;
}
.match-meta__value {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--aubergine);
  margin-top: 4px;
}

.match-why {
  background: var(--aubergine);
  color: var(--beige);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: var(--s-5);
}
.match-why__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--geel);
  margin: 0 0 10px;
}
.match-why__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.match-why__list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--fg-on-dark);
}
.match-why__check {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  background: var(--geel);
  color: var(--aubergine);
  display: grid; place-items: center;
  margin-top: 1px;
}

.match-included {
  background: var(--beige-warm);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  margin-bottom: var(--s-5);
  font-size: var(--text-sm);
  color: var(--fg-on-paper);
}
.match-included strong { color: var(--aubergine); }

.alt-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--aubergine);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 6px;
}
.alt-link--btn {
  background: none; border: 0; padding: 0;
  cursor: pointer; font-family: inherit;
}
.match-foot-links {
  display: flex; align-items: center;
  justify-content: space-between; gap: 12px;
}

/* Caveat / heads-up block on match screen */
.match-caveat {
  position: relative;
  margin: 0 0 var(--s-5);
  padding: 14px 16px 14px 44px;
  border-radius: var(--r-md);
  background: rgba(255,159,14,0.10);
  border: 1px solid rgba(255,159,14,0.28);
  color: var(--fg-on-paper);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.match-caveat::before {
  content: '';
  position: absolute; left: 14px; top: 16px;
  width: 18px; height: 18px;
  border-radius: var(--r-full);
  background: var(--geel);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%235c2928" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><circle cx="12" cy="17" r=".7" fill="%235c2928"/></svg>');
  background-position: center; background-repeat: no-repeat; background-size: 14px;
}

/* Founders screen */
.founders-photo {
  margin: var(--s-3) 0 var(--s-5);
}
.founders-photo__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgba(92,41,40,0.06) 0 12px, rgba(92,41,40,0) 12px 24px),
    var(--beige-warm);
  border: 1.5px dashed var(--border-paper-2);
  display: grid; place-items: center;
  color: var(--fg-on-paper-mute);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.founders-photo__cap {
  margin-top: 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-on-paper-mute);
  text-align: center;
}

/* =========================================================
   Mini education card
   ========================================================= */
.edu-card {
  background:
    linear-gradient(180deg, rgba(13,8,7,0.0) 0%, rgba(13,8,7,0.65) 100%),
    url('https://cdn.prod.website-files.com/695bd6f9286637446725b89f/6966087ec3988bfc4a2df854_Scherm%C2%ADafbeelding%202026-01-13%20om%2009.55.13.avif');
  background-size: cover; background-position: center;
  border-radius: var(--r-xl);
  color: var(--beige);
  padding: var(--s-7) var(--s-5);
  min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
  margin: var(--s-3) 0 var(--s-5);
}
.edu-card__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--geel);
}
.edu-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--beige);
  margin: 8px 0 0;
}
.edu-card__body {
  margin-top: 12px;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-on-dark-mute);
}

/* =========================================================
   Footer / brand mark
   ========================================================= */
.brand-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px;
  font-size: var(--text-xs);
  color: var(--fg-on-paper-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand-foot__bar { width: 14px; height: 1px; background: currentColor; opacity: 0.4; }

/* =========================================================
   Animations
   ========================================================= */
.fade-up { opacity: 0; transform: translateY(14px); animation: fadeUp 700ms var(--ease-curve) 80ms forwards; }
.fade-up-2 { opacity: 0; transform: translateY(14px); animation: fadeUp 700ms var(--ease-curve) 220ms forwards; }
.fade-up-3 { opacity: 0; transform: translateY(14px); animation: fadeUp 700ms var(--ease-curve) 380ms forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* Confetti for plan reveal */
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span {
  position: absolute; top: -30px; width: 8px; height: 14px;
  background: var(--geel); border-radius: 1px;
  opacity: 0;
  animation: drop 1.6s ease-in forwards;
}
@keyframes drop {
  0% { transform: translateY(-30px) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(120vh) rotate(420deg); opacity: 0; }
}