:root {
  color-scheme: light;
  --purple: #32127A;
  --purple-bright: #5B2BD9;
  --purple-deep: #211058;
  --teal: #00A693;
  --teal-dark: #0B7C70;
  --cream: #F5EFE6;
  --cream-deep: #EAE1CF;
  --lime: #C9F24F;
  --lime-deep: #6B8F00;
  --ink: #221D13;
  --muted: #6F695B;
  --line: #DCD3BE;
  --card: #FFFDF8;
  --danger: #B3402F;
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .12);
  --acc-ink: var(--teal-dark);
  --cta-bg: var(--purple);
  --cta-ink: #FFFFFF;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body, #app { min-height: 100%; }

body {
  margin: 0;
  background: var(--purple-deep);
  color: var(--ink);
  font-family: Vazirmatn, Tahoma, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; cursor: pointer; }
h1, h2, p { margin-top: 0; }
h1:focus { outline: none; }

.app-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
}

/* ============ SPLASH ============ */
.splash {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #3D1A8E 0%, var(--purple) 45%, var(--purple-deep) 100%);
  color: var(--cream);
  animation: splashIn .5s ease;
  padding-bottom: 88px;
}

@keyframes splashIn { from { opacity: 0; } to { opacity: 1; } }

.splash-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 34px 24px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
}

.splash-dash {
  display: inline-block;
  width: 34px;
  height: 3px;
  border-radius: 99px;
  background: var(--teal);
}

.splash-stage {
  position: relative;
  flex: 1;
  min-height: 0;
}

.splash-q {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(150px, 52vw, 230px);
  font-weight: 900;
  line-height: 1;
  color: #FFFFFF;
  text-shadow: 12px 14px 0 rgba(0, 166, 147, .95);
}

.ring {
  position: absolute;
  top: 44%;
  left: 50%;
  border: 1px solid rgba(245, 239, 230, .35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ring-a { width: min(74vw, 330px); height: min(74vw, 330px); }
.ring-b { width: min(96vw, 430px); height: min(96vw, 430px); border-color: rgba(245, 239, 230, .18); }

.blob { position: absolute; border-radius: 50%; }
.blob-teal { top: 2%; left: 6%; width: 118px; height: 118px; background: var(--teal); opacity: .85; }
.blob-lime { bottom: 4%; right: 8%; width: 96px; height: 96px; background: var(--lime); opacity: .9; }

.sticky {
  position: absolute;
  z-index: 2;
  padding: 10px 18px;
  background: var(--lime);
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 6px 6px 0 rgba(6, 40, 36, .45);
}

.sticky-a { top: 22%; left: 7%; transform: rotate(-5deg); }
.sticky-b { bottom: 20%; right: 7%; transform: rotate(4deg); }

.splash-bottom {
  margin: 0;
  padding: 0 34px;
  font-size: 13.5px;
  line-height: 1.9;
  text-align: center;
  color: rgba(245, 239, 230, .92);
}

.loader {
  width: 148px;
  height: 4px;
  margin: 0 auto 20px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(245, 239, 230, .22);
}

.loader-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--lime);
  animation: loadFill 3s linear forwards;
}

@keyframes loadFill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .loader-fill { animation-duration: .01s; }
}

.splash-brandmark {
  position: absolute;
  display: grid;
  place-items: center;
  isolation: isolate;
  bottom: 22px;
  left: 22px;
  width: 76px;
  height: 31px;
}

.splash-brandmark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -12px -17px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .29) 44%, transparent 75%);
  filter: blur(4px);
  mix-blend-mode: screen;
}

.splash-brandmark .brand-logo { background: var(--purple); }

/* ============ INTRO ============ */
.intro {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  overflow: hidden;
  padding: clamp(22px, 4.5dvh, 34px) 28px 18px;
  background: var(--cream);
  animation: pageIn .45s ease;
}

@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--teal-dark);
  font-size: 14px;
  font-weight: 700;
}

.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); flex-shrink: 0; }

.intro h1 { margin: 0 0 10px; font-weight: 900; line-height: 1.22; letter-spacing: -.01em; }
.intro h1 .l1, .intro h1 .l2, .intro h1 .l3 { display: block; font-size: clamp(31px, 9.2vw, 45px); }
.intro h1 .l1 { color: var(--ink); }
.intro h1 .l2, .intro h1 .l3 { color: var(--purple); }

.lede { margin: 0 0 12px; max-width: 40ch; color: var(--muted); font-size: 14.5px; line-height: 1.75; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 12px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stats > div { padding: 7px 4px; text-align: center; }
.stats > div + div { border-inline-start: 1px solid var(--line); }
.stats strong { display: block; font-size: 17px; font-weight: 800; color: var(--ink); }
.stats span { font-size: 11.5px; color: var(--muted); }

.anon { margin: 0; }
.anon strong { display: block; font-size: 14px; color: var(--ink); }
.anon span { font-size: 12.5px; color: var(--muted); }

.intro-note {
  margin: 9px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 166, 147, .07);
  color: var(--muted);
  font-size: 12.2px;
  line-height: 1.75;
}

.intro-cta { margin-top: auto; padding-top: 12px; }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 14px 34px;
  border: 0;
  border-radius: 6px;
  background: var(--purple);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 800;
  box-shadow: 7px 7px 0 var(--teal);
  transition: transform .12s ease, box-shadow .12s ease;
}

.cta:hover { transform: translate(-2px, -2px); box-shadow: 9px 9px 0 var(--teal); }
.cta:active { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--teal); }
.cta-arrow { font-size: 20px; line-height: 1; }

/* ============ SURVEY SHELL ============ */
.survey {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  overflow: hidden;
  background: var(--cream);
  animation: pageIn .35s ease;
}

.survey::before {
  content: "";
  position: absolute;
  top: -90px;
  inset-inline-end: -90px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--acc-soft);
  pointer-events: none;
}

.theme-teal { --acc: var(--teal); --acc-soft: rgba(0, 166, 147, .12); --acc-ink: var(--teal-dark); }
.theme-purple { --acc: var(--purple-bright); --acc-soft: rgba(91, 43, 217, .10); --acc-ink: var(--purple); }
.theme-lime { --acc: var(--lime-deep); --acc-soft: rgba(201, 242, 79, .38); --acc-ink: #4E6B00; --cta-bg: var(--lime); --cta-ink: var(--ink); }

/* ---- activity: cinematic photo ---- */
.theme-activity {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #14101f url("data:image/jpeg;base64,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__B64_2__") no-repeat center top / cover;
  color: #fff;
}

.theme-activity::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset-inline-end: auto;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(10, 6, 20, .74) 0%, rgba(10, 6, 20, .28) 32%, rgba(10, 6, 20, .04) 52%, rgba(10, 6, 20, .5) 78%, rgba(10, 6, 20, .88) 100%);
}

.theme-activity .topbar,
.theme-activity .content,
.theme-activity .bottom-bar { position: relative; z-index: 1; }

.theme-activity .question-head h1 { color: #fff; }
.theme-activity .question-kicker { color: #5EEAD4; }
.theme-activity .hint { color: rgba(245, 239, 230, .78); }
.theme-activity .step-label { color: rgba(245, 239, 230, .72); }
.theme-activity .progress-track { background: rgba(245, 239, 230, .25); }
.theme-activity .progress-value { background: var(--teal); }
.theme-activity .choice { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.theme-activity .bottom-bar { background: rgba(14, 9, 24, .66); border-top-color: rgba(245, 239, 230, .14); }
.theme-activity .button.secondary { color: #fff; }
.theme-activity .error { color: #ffa08d; }

/* activity photo: loads when activity-bg.jpeg sits next to index.html */
.theme-activity { background: #14101f url("./activity-bg.jpeg") no-repeat center top / cover; }
.theme-activity .brandmark { background: var(--cream); color: var(--purple); }

/* ============ CINEMATIC QUESTION THEMES ============ */
/* shared dark readability treatment */
.theme-coffee, .theme-goal, .theme-occasion, .theme-solution, .theme-problem, .theme-barrier, .theme-action { color: #fff; }
.theme-coffee::before, .theme-goal::before, .theme-occasion::before, .theme-solution::before, .theme-problem::before, .theme-barrier::before, .theme-action::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  inset-inline-end: auto;
  width: auto; height: auto;
  border-radius: 0;
  pointer-events: none;
}
.theme-coffee .topbar, .theme-goal .topbar, .theme-occasion .topbar, .theme-solution .topbar, .theme-problem .topbar, .theme-barrier .topbar, .theme-action .topbar,
.theme-coffee .content, .theme-goal .content, .theme-occasion .content, .theme-solution .content, .theme-problem .content, .theme-barrier .content, .theme-action .content,
.theme-coffee .bottom-bar, .theme-goal .bottom-bar, .theme-occasion .bottom-bar, .theme-solution .bottom-bar, .theme-problem .bottom-bar, .theme-barrier .bottom-bar { position: relative; z-index: 1; }
.theme-coffee .question-head h1, .theme-goal .question-head h1, .theme-occasion .question-head h1, .theme-solution .question-head h1, .theme-problem .question-head h1, .theme-barrier .question-head h1, .theme-action .question-head h1 { color: #fff; }
.theme-coffee .hint, .theme-goal .hint, .theme-occasion .hint, .theme-solution .hint, .theme-problem .hint, .theme-barrier .hint, .theme-action .hint { color: rgba(245, 239, 230, .78); }
.theme-coffee .step-label, .theme-goal .step-label, .theme-occasion .step-label, .theme-solution .step-label, .theme-problem .step-label, .theme-barrier .step-label, .theme-action .step-label { color: rgba(245, 239, 230, .72); }
.theme-coffee .progress-track, .theme-goal .progress-track, .theme-occasion .progress-track, .theme-solution .progress-track, .theme-problem .progress-track, .theme-barrier .progress-track, .theme-action .progress-track { background: rgba(245, 239, 230, .25); }
.theme-coffee .choice, .theme-goal .choice, .theme-occasion .choice, .theme-solution .choice, .theme-problem .choice, .theme-barrier .choice, .theme-action .choice { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.theme-coffee .bottom-bar, .theme-goal .bottom-bar, .theme-occasion .bottom-bar, .theme-solution .bottom-bar, .theme-problem .bottom-bar, .theme-barrier .bottom-bar { background: rgba(10, 8, 18, .72); border-top-color: rgba(245, 239, 230, .14); }
.theme-coffee .button.secondary, .theme-goal .button.secondary, .theme-occasion .button.secondary, .theme-solution .button.secondary, .theme-problem .button.secondary, .theme-barrier .button.secondary, .theme-action .button.secondary { color: #fff; }
.theme-coffee .button.secondary:hover, .theme-goal .button.secondary:hover, .theme-occasion .button.secondary:hover, .theme-solution .button.secondary:hover, .theme-problem .button.secondary:hover, .theme-barrier .button.secondary:hover, .theme-action .button.secondary:hover { background: rgba(245, 239, 230, .12); }
.theme-coffee .error, .theme-goal .error, .theme-occasion .error, .theme-solution .error, .theme-problem .error, .theme-barrier .error, .theme-action .error { color: #ffa08d; }
.theme-coffee .brandmark, .theme-goal .brandmark, .theme-occasion .brandmark, .theme-solution .brandmark, .theme-problem .brandmark, .theme-barrier .brandmark, .theme-action .brandmark { background: var(--cream); color: var(--purple); }

/* ---- coffee: warm espresso ritual ---- */
.theme-coffee {
  --acc: #E8A838;
  --acc-soft: rgba(232, 168, 56, .20);
  --acc-ink: #E8A838;
  background:
    radial-gradient(110% 55% at 50% 112%, rgba(232, 168, 56, .32), transparent 62%),
    radial-gradient(75% 42% at 82% 6%, rgba(150, 75, 25, .50), transparent 70%),
    linear-gradient(180deg, #2b1608 0%, #1d0f06 52%, #110903 100%);
}
.theme-coffee::before {
  background-image: radial-gradient(rgba(232, 168, 56, .10) 1.6px, transparent 1.7px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* ---- goal: dawn, aspiration ---- */
.theme-goal {
  --acc: #F2C94C;
  --acc-soft: rgba(242, 201, 76, .20);
  --acc-ink: #F2C94C;
  background: linear-gradient(180deg, #150d2e 0%, #2c1650 38%, #5c2560 62%, #8a3a4e 80%, #b96a35 100%);
}
.theme-goal::before {
  background:
    radial-gradient(52% 30% at 50% 98%, rgba(255, 214, 120, .55), rgba(255, 180, 90, .16) 46%, transparent 70%),
    radial-gradient(2px 2px at 20% 16%, rgba(255, 255, 255, .5), transparent 65%),
    radial-gradient(1.6px 1.6px at 68% 9%, rgba(255, 255, 255, .4), transparent 65%),
    radial-gradient(1.4px 1.4px at 84% 26%, rgba(255, 255, 255, .35), transparent 65%),
    radial-gradient(1.8px 1.8px at 38% 7%, rgba(255, 255, 255, .45), transparent 65%);
  background-repeat: no-repeat;
}

/* ---- occasion: moments in a day ---- */
.theme-occasion {
  --acc: #2DD4BF;
  --acc-soft: rgba(45, 212, 191, .16);
  --acc-ink: #2DD4BF;
  background:
    radial-gradient(80% 50% at 85% 10%, rgba(45, 212, 191, .14), transparent 65%),
    linear-gradient(180deg, #0c1626 0%, #10293f 52%, #0a1c2c 100%);
}
.theme-occasion::before {
  background:
    radial-gradient(circle at 84% 14%, transparent 62px, rgba(45, 212, 191, .12) 63px, rgba(45, 212, 191, .12) 65px, transparent 66px),
    radial-gradient(circle at 84% 14%, transparent 90px, rgba(45, 212, 191, .07) 91px, rgba(45, 212, 191, .07) 93px, transparent 94px),
    radial-gradient(rgba(45, 212, 191, .08) 1.4px, transparent 1.5px);
  background-size: auto, auto, 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 58%);
}

/* ---- solution: clarity, decision ---- */
.theme-solution {
  --acc: #C9F24F;
  --acc-soft: rgba(201, 242, 79, .16);
  --acc-ink: #C9F24F;
  background:
    radial-gradient(90% 50% at 50% 0%, rgba(0, 166, 147, .30), transparent 60%),
    linear-gradient(180deg, #0d2422 0%, #0a1b1a 55%, #071211 100%);
}
.theme-solution::before {
  background-image:
    repeating-linear-gradient(45deg, rgba(201, 242, 79, .055) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(-45deg, rgba(201, 242, 79, .055) 0 1.5px, transparent 1.5px 26px);
  -webkit-mask-image: radial-gradient(90% 70% at 50% 42%, #000 25%, transparent 76%);
  mask-image: radial-gradient(90% 70% at 50% 42%, #000 25%, transparent 76%);
}

/* ---- problem: somber, thoughtful ---- */
.theme-problem {
  --acc: #E0A458;
  --acc-soft: rgba(224, 164, 88, .16);
  --acc-ink: #E0A458;
  background:
    radial-gradient(70% 40% at 18% 18%, rgba(120, 90, 140, .30), transparent 65%),
    radial-gradient(60% 45% at 85% 78%, rgba(80, 60, 100, .35), transparent 65%),
    linear-gradient(180deg, #1d1626 0%, #171221 55%, #100c18 100%);
}
.theme-problem::before {
  background: radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(0, 0, 0, .5) 100%);
}

/* ---- barrier: fog, hesitation ---- */
.theme-barrier {
  --acc: #B8A9E0;
  --acc-soft: rgba(184, 169, 224, .16);
  --acc-ink: #B8A9E0;
  background: linear-gradient(180deg, #1a1626 0%, #141120 55%, #0e0c16 100%);
}
.theme-barrier::before {
  background: repeating-linear-gradient(180deg,
    transparent 0 46px,
    rgba(184, 169, 224, .055) 46px 48px,
    transparent 48px 96px,
    rgba(184, 169, 224, .035) 96px 98px,
    transparent 98px 150px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

/* ---- action: forward motion ---- */
.theme-action {
  --acc: #C9F24F;
  --acc-soft: rgba(201, 242, 79, .18);
  --acc-ink: #C9F24F;
  background:
    radial-gradient(80% 45% at 100% 100%, rgba(201, 242, 79, .16), transparent 60%),
    linear-gradient(180deg, #101a0e 0%, #0c140b 55%, #080d07 100%);
}
.theme-action::before {
  background-image: repeating-linear-gradient(115deg,
    transparent 0 18px,
    rgba(201, 242, 79, .07) 18px 20px,
    transparent 20px 44px,
    rgba(201, 242, 79, .045) 44px 46px,
    transparent 46px 78px);
  -webkit-mask-image: linear-gradient(200deg, #000 15%, transparent 82%);
  mask-image: linear-gradient(200deg, #000 15%, transparent 82%);
}

/* option text: dark ink on cream cards (all dark themes) */
.theme-activity .choice, .theme-coffee .choice, .theme-goal .choice, .theme-occasion .choice, .theme-solution .choice, .theme-problem .choice, .theme-barrier .choice, .theme-action .choice { color: var(--ink); }
.theme-activity .primary-tag, .theme-coffee .primary-tag, .theme-goal .primary-tag, .theme-occasion .primary-tag, .theme-solution .primary-tag, .theme-problem .primary-tag, .theme-barrier .primary-tag, .theme-action .primary-tag { color: var(--teal-dark); }

/* ============ PHOTO BACKGROUNDS (per question) ============ */
.theme-coffee {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #1a0f06 url("./coffee-bg.jpeg") no-repeat center top / cover;
}
.theme-goal {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #150d2e url("./goal-bg.jpeg") no-repeat center top / cover;
}
.theme-occasion {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #0c1626 url("./occasion-bg.jpeg") no-repeat center top / cover;
}
.theme-solution {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #0d2422 url("./solution-bg.jpeg") no-repeat center top / cover;
}
.theme-problem {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #1d1626 url("./problem-bg.jpeg") no-repeat center top / cover;
}
.theme-barrier {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #1a1626 url("./barrier-bg.jpeg") no-repeat center top / cover;
}
.theme-action {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  background: #101a0e url("./action-bg.jpeg") no-repeat center top / cover;
}
.theme-coffee::before, .theme-goal::before, .theme-occasion::before, .theme-solution::before, .theme-problem::before, .theme-barrier::before, .theme-action::before {
  background: linear-gradient(180deg, rgba(8, 5, 16, .76) 0%, rgba(8, 5, 16, .30) 34%, rgba(8, 5, 16, .05) 54%, rgba(8, 5, 16, .52) 80%, rgba(8, 5, 16, .90) 100%);
}

/* ============ NEW QUESTION THEMES (12-question version) ============ */
.theme-age, .theme-sport, .theme-product, .theme-payment, .theme-improvement {
  --acc: var(--teal);
  --acc-soft: rgba(0, 166, 147, .18);
  --acc-ink: #5EEAD4;
  color: #fff;
}
.theme-age { background: #1a1426 url("./age-bg.jpeg") no-repeat center top / cover; }
.theme-sport { background: #0e1a14 url("./sport-bg.jpeg") no-repeat center top / cover; }
.theme-product { background: #16101e url("./product-bg.jpeg") no-repeat center top / cover; }
.theme-payment { background: #101826 url("./payment-bg.jpeg") no-repeat center top / cover; }
.theme-improvement { background: #0d1a1e url("./improvement-bg.jpeg") no-repeat center top / cover; }
.theme-age::before, .theme-sport::before, .theme-product::before, .theme-payment::before, .theme-improvement::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 5, 16, .76) 0%, rgba(8, 5, 16, .30) 34%, rgba(8, 5, 16, .05) 54%, rgba(8, 5, 16, .52) 80%, rgba(8, 5, 16, .90) 100%);
}
.theme-age .topbar, .theme-sport .topbar, .theme-product .topbar, .theme-payment .topbar, .theme-improvement .topbar,
.theme-age .content, .theme-sport .content, .theme-product .content, .theme-payment .content, .theme-improvement .content,
.theme-age .bottom-bar, .theme-sport .bottom-bar, .theme-product .bottom-bar, .theme-payment .bottom-bar, .theme-improvement .bottom-bar { position: relative; z-index: 1; }
.theme-age .question-head h1, .theme-sport .question-head h1, .theme-product .question-head h1, .theme-payment .question-head h1, .theme-improvement .question-head h1 { color: #fff; }
.theme-age .hint, .theme-sport .hint, .theme-product .hint, .theme-payment .hint, .theme-improvement .hint { color: rgba(245, 239, 230, .78); }
.theme-age .step-label, .theme-sport .step-label, .theme-product .step-label, .theme-payment .step-label, .theme-improvement .step-label { color: rgba(245, 239, 230, .72); }
.theme-age .progress-track, .theme-sport .progress-track, .theme-product .progress-track, .theme-payment .progress-track, .theme-improvement .progress-track { background: rgba(245, 239, 230, .25); }
.theme-age .choice, .theme-sport .choice, .theme-product .choice, .theme-payment .choice, .theme-improvement .choice { box-shadow: 0 8px 22px rgba(0, 0, 0, .28); color: var(--ink); }
.theme-age .bottom-bar, .theme-sport .bottom-bar, .theme-product .bottom-bar, .theme-payment .bottom-bar, .theme-improvement .bottom-bar { background: rgba(10, 8, 18, .72); border-top-color: rgba(245, 239, 230, .14); }
.theme-age .button.secondary, .theme-sport .button.secondary, .theme-product .button.secondary, .theme-payment .button.secondary, .theme-improvement .button.secondary { color: #fff; }
.theme-age .error, .theme-sport .error, .theme-product .error, .theme-payment .error, .theme-improvement .error { color: #ffa08d; }
.theme-age .brandmark, .theme-sport .brandmark, .theme-product .brandmark, .theme-payment .brandmark, .theme-improvement .brandmark { background: var(--cream); color: var(--purple); }
.theme-age .primary-tag, .theme-sport .primary-tag, .theme-product .primary-tag, .theme-payment .primary-tag, .theme-improvement .primary-tag { color: var(--teal-dark); }

.topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: rtl;
  min-height: 66px;
  padding: 16px 22px 12px;
}

.brandmark {
  position: relative;
  display: grid;
  width: 64px;
  height: 26px;
  place-items: center;
  isolation: isolate;
}

.brandmark::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -9px -12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, .22) 42%, transparent 74%);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: .88;
}

.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--purple);
  -webkit-mask: url("./assets/cina-logo-purple.png") center / contain no-repeat;
  mask: url("./assets/cina-logo-purple.png") center / contain no-repeat;
}

.step-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }

.progress-track {
  position: absolute;
  top: 62px;
  right: 22px;
  left: 22px;
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--cream-deep);
}

.progress-value {
  height: 100%;
  border-radius: inherit;
  background: var(--acc);
  transition: width .25s ease;
}

.content {
  padding: 30px 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.question-head { margin-bottom: 24px; }

.question-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--acc-ink);
  font-size: 13px;
  font-weight: 800;
}

.question-head h1 { margin-bottom: 10px; font-size: clamp(24px, 6.6vw, 32px); font-weight: 800; line-height: 1.5; }

.hint { margin: 0; color: var(--muted); font-size: 14px; }
.context-note { margin: 0 0 10px; color: var(--acc-ink); font-size: 13px; font-weight: 500; }

.options { display: grid; gap: 10px; }
.option-block { display: grid; gap: 8px; }

.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 60px;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}

.choice:active { transform: scale(.99); }

.choice:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }

.choice input { flex-shrink: 0; width: 20px; height: 20px; margin: 0; accent-color: var(--acc); }
.choice span { flex: 1; font-weight: 500; }
.primary-tag { color: var(--acc-ink); font-size: 11px; font-weight: 700; white-space: nowrap; }

.other-field input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  background: var(--card);
  color: var(--ink);
}

.other-field input:focus { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.other-field { margin-top: 10px; }
.inline-field { margin: -2px 8px 6px; padding: 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--acc-soft); }
.field-label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }

.matrix-fields { display: grid; gap: 22px; }
.matrix-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.matrix-group .field-label { color: inherit; }

.payment-field { margin: 18px 0 0; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--radius); min-width: 0; background: var(--card); }
.payment-field legend { padding: 0 8px; font-size: 14px; font-weight: 700; }
.payment-field .hint { margin-bottom: 8px; }
.payment-field .choice { min-height: 48px; padding: 9px 12px; margin-top: 8px; font-size: 14px; }

.error { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 13px; font-weight: 500; }
.error:empty { display: none; }
.start-error { min-height: 22px; margin: 4px 0 0; color: #9f2546; font-size: 12px; font-weight: 700; }
.start-error:empty { visibility: hidden; }
.button:disabled, .cta:disabled { cursor: wait; opacity: .78; transform: none; }
#turnstile-mount { position: fixed; inset: auto 0 0 auto; z-index: -1; width: 1px; height: 1px; overflow: hidden; }

.bottom-bar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(245, 239, 230, .94);
  backdrop-filter: blur(10px);
}

.auto-bar { grid-template-columns: 1fr; }
.auto-bar .button.secondary { justify-self: start; }
.auto-bar:has(#next) { grid-template-columns: minmax(0, 1fr) auto; }
.auto-bar:has(.button[hidden]) { display: none; }
.auto-bar:has(#next) { display: grid; }

.button {
  min-height: 54px;
  padding: 13px 26px;
  border: 0;
  border-radius: 14px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-weight: 800;
  font-size: 16px;
  box-shadow: 4px 4px 0 rgba(34, 16, 88, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}

.theme-lime .button:not(.secondary) { box-shadow: 0 10px 22px rgba(7, 4, 18, .22); }
.button:hover { transform: translate(-1px, -1px); }
.button:active { transform: translate(2px, 2px); box-shadow: none; }
.button:not(.secondary) {
  border: 0;
  background: linear-gradient(135deg, rgba(50, 18, 122, .78), rgba(0, 166, 147, .42));
  box-shadow: 0 10px 22px rgba(7, 4, 18, .24);
  backdrop-filter: blur(10px);
}
.button.secondary {
  min-width: 108px;
  border: 0;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  box-shadow: 0 10px 22px rgba(7, 4, 18, .16);
  font-weight: 800;
  backdrop-filter: blur(10px);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}
.button.secondary:hover {
  background: rgba(255, 255, 255, .16);
}
.button.secondary:active { background: rgba(50, 18, 122, .86); }
.button:focus-visible, .choice:focus-within, .cta:focus-visible { outline: 3px solid var(--acc-soft); outline-offset: 2px; }
.button[hidden] { display: none; }

/* ============ QUESTION-SPECIFIC BACKGROUNDS ============ */
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) {
  color: #fff;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.theme-q-profile {
  --acc: #00A693;
  --acc-soft: rgba(0, 166, 147, .24);
  --acc-ink: #72F3E1;
  background-color: #11101F;
  background-image: url("./backgrounds/question-1-profile-bg.jpeg");
}

.theme-q-situation {
  --acc: #2DD4BF;
  --acc-soft: rgba(45, 212, 191, .22);
  --acc-ink: #67E8F9;
  background-color: #11152A;
  background-image: url("./backgrounds/question-2-situation-bg.jpeg");
}

.theme-q-outcome {
  --acc: #F2C94C;
  --acc-soft: rgba(242, 201, 76, .22);
  --acc-ink: #FFE08A;
  background-color: #1E1234;
  background-image: url("./backgrounds/question-3-outcome-bg.jpeg");
}

.theme-q-solution {
  --acc: #C9F24F;
  --acc-soft: rgba(201, 242, 79, .22);
  --acc-ink: #E5FF98;
  background-color: #161326;
  background-image: url("./backgrounds/question-4-solution-bg.jpeg");
}

.theme-q-detail {
  --acc: #B8A9E0;
  --acc-soft: rgba(184, 169, 224, .22);
  --acc-ink: #DED4FF;
  background-color: #171126;
  background-image: url("./backgrounds/question-5-detail-bg.jpeg");
}

.theme-q-friction {
  --acc: #E0A458;
  --acc-soft: rgba(224, 164, 88, .22);
  --acc-ink: #FFD199;
  background-color: #1B1120;
  background-image: url("./backgrounds/question-6-friction-bg.jpeg");
}

.theme-q-response {
  --acc: #66D17A;
  --acc-soft: rgba(102, 209, 122, .22);
  --acc-ink: #AEF5BA;
  background-color: #111526;
  background-image: url("./backgrounds/question-7-response-bg.jpeg");
}

:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response)::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 5, 18, .79) 0%, rgba(8, 5, 18, .42) 28%, rgba(8, 5, 18, .20) 48%, rgba(8, 5, 18, .63) 78%, rgba(8, 5, 18, .94) 100%),
    linear-gradient(90deg, rgba(50, 18, 122, .18), rgba(0, 166, 147, .08));
}

:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) :is(.topbar, .content, .bottom-bar) {
  position: relative;
  z-index: 1;
}

:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .question-head h1 { color: #fff; }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .hint { color: rgba(255, 255, 255, .82); }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .step-label { color: rgba(255, 255, 255, .76); }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .progress-track { background: rgba(255, 255, 255, .26); }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .choice { color: var(--ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .30); }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .bottom-bar {
  background: rgba(9, 6, 18, .76);
  border-top-color: rgba(255, 255, 255, .15);
}
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .button.secondary { color: #fff; }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .button.secondary:hover { background: rgba(255, 255, 255, .12); }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .error { color: #FFB09E; }
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .brandmark { background: var(--cream); color: var(--purple); }

/* The real logo never receives a solid label behind it. Its soft halo adapts to dark imagery. */
.survey .brandmark { padding: 0; border-radius: 0; background: transparent; color: inherit; }

/* The previous action stays visible against every photographic question background. */
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .button.secondary {
  border: 0;
  background: rgba(255, 255, 255, .08);
}
:is(.theme-q-profile, .theme-q-situation, .theme-q-outcome, .theme-q-solution, .theme-q-detail, .theme-q-friction, .theme-q-response) .button.secondary:hover {
  background: rgba(255, 255, 255, .16);
}

/* Selected answers stay strongly readable over every photographic background. */
.choice:has(input:checked) {
  border-color: var(--acc);
  background: linear-gradient(135deg, rgba(50, 18, 122, .98), rgba(33, 16, 88, .97));
  color: #fff;
  box-shadow: 0 0 0 2px var(--acc-soft), 0 12px 28px rgba(5, 3, 12, .42);
}

.choice:has(input:checked) span,
.choice:has(input:checked) .primary-tag { color: #fff; font-weight: 700; }

/* ============ FINISH ============ */
.finish .thank-you { display: grid; align-content: center; min-height: 100%; }
.finish .eyebrow { color: var(--teal-dark); }
.finish h1 { font-size: clamp(30px, 8vw, 40px); font-weight: 900; margin-bottom: 14px; }
.finish p { color: var(--muted); max-width: 44ch; }
.privacy-note { margin-top: 22px; font-size: 13px; }
.summary { display: grid; gap: 8px; margin: 26px 0 6px; padding: 18px; border-radius: var(--radius); background: var(--card); border: 1.5px solid var(--line); }
.summary summary { cursor: pointer; font-weight: 800; color: var(--ink); }
.summary p { margin: 0; color: var(--ink); font-size: 14px; }

@media (max-height: 740px) {
  .intro { padding-top: 18px; padding-bottom: 14px; }
  .intro h1 .l1, .intro h1 .l2, .intro h1 .l3 { font-size: clamp(28px, 8.4vw, 38px); }
  .lede { margin-bottom: 8px; font-size: 13.5px; line-height: 1.62; }
  .stats { margin-bottom: 8px; }
  .stats > div { padding-top: 5px; padding-bottom: 5px; }
  .stats strong { font-size: 15px; }
  .stats span { font-size: 10.5px; }
  .anon span { font-size: 11.5px; }
  .intro-note { margin-top: 6px; padding: 7px 9px; font-size: 11.5px; line-height: 1.6; }
  .intro-cta { padding-top: 8px; }
}

@media (min-width: 560px) {
  .splash, .intro, .survey { border-radius: 28px; height: min(860px, calc(100dvh - 48px)); box-shadow: 0 24px 70px rgba(10, 4, 30, .35); }
  .app-shell { padding: 24px; }
}

@media (max-width: 360px) {
  .content { padding-right: 18px; padding-left: 18px; }
  .topbar, .bottom-bar { padding-right: 18px; padding-left: 18px; }
  .intro { padding-right: 22px; padding-left: 22px; }
}