/* ─── GIG Health palette ─────────────────────────────────────── */
:root {
  --flame:     #F45347;
  --night:     #0D1A2D;
  --paper:     #FEF6F6;
  --dusk:      #10273E;
  --potassium: #DEA8F4;
  --copper:    #00AE97;
  --sodium:    #FFBF3F;

  --ink:       var(--paper);
  --ink-soft:  rgba(254, 246, 246, 0.66);
  --ink-faint: rgba(254, 246, 246, 0.28);
  --ink-mute:  rgba(254, 246, 246, 0.14);
  --rule:      rgba(254, 246, 246, 0.14);

  --font: "motiva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", sans-serif;
  --track-cap: 0.2em;
}

* { box-sizing: border-box; }
html {
  /* "proximity" lets the wheel scroll freely and only snaps when it
     naturally lands near a scene edge — feels much less locked-in
     than "mandatory" */
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* hide native scrollbar — dots do the navigating */
  /* Stop Safari's elastic bounce + scroll-chaining from fighting our
     wheel handler at the top and bottom of the survey. */
  overscroll-behavior-y: contain;
}
html::-webkit-scrollbar { display: none; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(140% 100% at 25% 25%, var(--dusk) 0%, var(--night) 60%, #060d18 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; }

/* ─── 3D canvas — hidden for now while we lock the layout in ──── */
#stage { display: none; }

/* ─── Scene videos — full-bleed, left-anchored, fade in/out per scene ──
   `.is-active`  → scene is showing (visibility + base scene fade)
   `.is-shown`   → this *specific* video in the pair is the visible one
                   (the other one in the pair is the buffer, opacity 0).
   The crossfade swaps `.is-shown` between A and B at each loop seam. */
.scene-video {
  /* The element is intentionally wider than the viewport and shifted
     left, which scoots the animation's focal point closer to the left
     edge of the screen (further from the form copy on the right) while
     keeping the video edge-to-edge. Tweak --scene-shift to taste —
     bigger value = more leftward push. */
  --scene-shift: 8vw;
  position: fixed;
  top: 0;
  left: calc(var(--scene-shift) * -1);
  width: calc(100vw + var(--scene-shift));
  height: 100vh;
  object-fit: cover;
  object-position: left center;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.55s ease;
  pointer-events: none;
}
.scene-video.is-active {
  visibility: visible;
}
.scene-video.is-active.is-shown {
  opacity: 1;
}

/* dark gradient overlay — only shows when a scene video is active.
   The video's right side is already dark navy where the form sits,
   so no right-side wash is needed; we just keep very faint top/bottom
   strips so the topbar + footer chrome stays seated. */
.scene-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  background:
    linear-gradient(to bottom,
      rgba(13, 26, 45, 0.55) 0%,
      transparent 14%,
      transparent 86%,
      rgba(13, 26, 45, 0.55) 100%);
}
body.has-video .scene-overlay { opacity: 1; }

/* ─── Decorative brand keyline arc (Potassium → Copper → Sodium) — */
.arc {
  position: fixed;
  left: -8%;
  bottom: -20%;
  width: 75%;
  height: 80vh;
  z-index: 1;
  opacity: 0.55;
  pointer-events: none;
}

/* ─── Top bar — burger left · logo centred · spacer right ────────
   Mirrors the gig.health header so the sister site feels from the
   same family: three columns, logo locked to the middle, the Flame
   circle-burger on the left. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.1rem 1.6rem;
  pointer-events: none;
  gap: 1rem;
}
.topbar-left   { display: flex; justify-content: flex-start; }
.topbar-center { display: flex; justify-content: center; }
.topbar-right  { display: flex; justify-content: flex-end; }

.logo {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.logo img {
  height: 58px;
  width: auto;
  display: block;
}

/* Circular Flame-outline burger (gig.health signature). The SVG is
   injected by menu.js, so the button itself just needs to be sized
   and styled. Two icons live inside the button — the lines and the
   X — and swap via .is-open. */
.menu {
  pointer-events: auto;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  width: 42px;
  height: 42px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease;
}
/* survey page nudges the burger right to clear the giant numeral */
body.survey .menu { margin-left: 0.2rem; }
.menu svg {
  width: 42px;
  height: 42px;
  display: block;
  transition: opacity 0.15s ease;
}
.menu .menu-icon-close {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  pointer-events: none;
}
.menu:hover { transform: scale(1.04); }
.menu[aria-expanded="true"] .menu-icon-open  { opacity: 0; }
.menu[aria-expanded="true"] .menu-icon-close { opacity: 1; }

/* ─── Shared menu slide-out panel (injected by menu.js) ──────── */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
}
.menu-panel[hidden] { display: none; }
.menu-panel::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 24, 0.65);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu-panel.is-shown { pointer-events: auto; }
.menu-panel.is-shown::before { opacity: 1; }

.menu-panel-card {
  /* Slides in from the LEFT now that the hamburger lives on the left.
     Direction matches the trigger's side so the panel feels anchored. */
  position: fixed;
  top: 0;
  left: 0;
  width: min(420px, 92vw);
  height: 100vh;
  padding: 2rem 2rem 2.5rem;
  background: var(--night);
  border-right: 1px solid var(--ink-mute);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.menu-panel.is-shown .menu-panel-card { transform: translateX(0); }

.menu-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
}
.menu-panel-kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.menu-close {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.2s ease, background 0.2s ease;
}
.menu-close:hover {
  color: var(--flame);
  background: color-mix(in srgb, var(--flame) 10%, transparent);
}

.menu-panel-nav {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.menu-link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.3rem 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--ink-mute);
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.menu-link:hover {
  border-color: var(--flame);
  background: color-mix(in srgb, var(--flame) 7%, transparent);
}
.menu-link:hover .menu-link-arrow { transform: translateX(4px); color: var(--flame); }
.menu-link-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.menu-link-sub {
  grid-column: 1;
  grid-row: 2;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.menu-link-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1.3rem;
  color: var(--ink-soft);
  transition: transform 0.2s ease, color 0.2s ease;
}
.menu-link.is-admin { border-style: dashed; }

.menu-panel-foot {
  margin: auto 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.menu-panel-foot a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.menu-panel-foot a:hover { color: var(--flame); }

/* ─── Shared privacy notice modal (injected by privacy.js) ───── */
.privacy-overlay {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 13, 24, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  padding: 2rem;
}
.privacy-overlay[hidden] { display: none; }
.privacy-overlay.is-shown { opacity: 1; pointer-events: auto; }

.privacy-card {
  position: relative;
  width: min(640px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 3rem 2.6rem 2.2rem;
  background: var(--night);
  border: 1px solid var(--ink-mute);
  border-radius: 10px;
  color: var(--ink);
  transform: translateY(14px);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.privacy-overlay.is-shown .privacy-card { transform: translateY(0); }

.privacy-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.privacy-close:hover {
  color: var(--flame);
  border-color: color-mix(in srgb, var(--flame) 35%, transparent);
}

.privacy-card .kicker { margin: 0 0 1.4rem; }
.privacy-title {
  margin: 0 0 1.6rem;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.privacy-h {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--flame);
}
.privacy-card p {
  margin: 0 0 0.8rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.privacy-card a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.privacy-card a:hover { color: var(--flame); }
.privacy-card strong { color: var(--ink); font-weight: 600; }
.privacy-foot {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink-mute);
  font-size: 0.78rem !important;
  color: var(--ink-faint) !important;
}

/* ─── Progress dots (far right vertical column) ───────────────── */
.progress {
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}
.progress ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  align-items: flex-end;
}
.progress .dot {
  /* Hard-reset the browser's <button> defaults so the dot is a true
     circle regardless of font / padding inherited from the user agent. */
  appearance: none;
  -webkit-appearance: none;
  display: block;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 0;
  box-sizing: border-box;
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ink-faint);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  flex: 0 0 auto;
}
.progress .dot:hover { border-color: var(--ink); }
.progress .dot:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }
.progress .dot.done {
  background: var(--ink-faint);
  border-color: var(--ink-faint);
}
.progress .dot.active {
  background: var(--flame);
  border-color: var(--flame);
  width: 12px;
  height: 12px;
  box-shadow: 0 0 0 6px rgba(244, 83, 71, 0.18);
}
/* ─── Scene (one per question, scroll-snap-aligned) ──────────── */
.scene {
  position: relative;
  z-index: 3;                  /* sit above any scene video + overlay */
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10vh 0 14vh;       /* clear topbar + footer */
}

.scene-content {
  width: 38vw;
  max-width: 560px;
  margin-right: 5rem;          /* clear right-side progress dots */
  padding-left: 2rem;
}

/* Last scene gets a touch more bottom padding so the textarea sits comfortably above the footer */
.scene:last-of-type { padding-bottom: 16vh; }

.kicker {
  margin: 0 0 1.8rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--flame);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}
/* (line prefix removed — kicker stands on its own) */
.kicker-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  margin: 0 0.2em;
}
.kicker-num   { color: var(--flame); }
.kicker-label { color: var(--ink-soft); font-weight: 700; }
.kicker-tag {
  margin-left: 0.7em;
  padding: 0.18em 0.55em;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--ink-faint);
  border-radius: 999px;
  color: var(--ink-soft);
}

.question {
  margin: 0 0 1.6rem;
  font-family: var(--font);
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.question em {
  font-style: normal;
  color: var(--flame);
}

.hint {
  margin: 0 0 2.4rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38ch;
  font-weight: 400;
}

.field {
  position: relative;
  margin: 0;
}
.answer-input {
  font-family: var(--font);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 400;
  width: 100%;
  padding: 0.7rem 0;
  border: none;
  border-bottom: 1px solid var(--ink-faint);
  background: transparent;
  color: var(--ink);
  outline: none;
  transition: border-color 0.25s ease;
  caret-color: var(--flame);
}
.answer-input::placeholder { color: var(--ink-faint); }
.answer-input:focus { border-bottom-color: var(--flame); }

/* textarea variant — for open-ended answers */
.answer-textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--ink-faint);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 7rem;
  font-family: inherit;
}
.answer-textarea:focus {
  border-color: var(--flame);
  border-bottom-color: var(--flame);
}

/* ─── Radio choices ───────────────────────────────────────────── */
.choices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.choices-binary {
  flex-direction: row;
  gap: 0.9rem;
}
.choices-binary .choice { flex: 1; }

.choice label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--ink-mute, rgba(254,246,246,0.12));
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
  background: rgba(254, 246, 246, 0.015);
}
.choice label:hover {
  border-color: var(--ink-faint);
  background: rgba(254, 246, 246, 0.045);
}

/* Per-position hover tint — follows the brand gradient
   (Potassium → Copper → Sodium) down each choice list. Cycles every
   5 items so 2/4/5-option lists all read as part of the same arc. */
.choice:nth-of-type(5n+1) label:hover {
  border-color: color-mix(in srgb, var(--potassium) 60%, transparent);
  background:   color-mix(in srgb, var(--potassium) 10%, transparent);
}
.choice:nth-of-type(5n+2) label:hover {
  border-color: color-mix(in srgb, #6FABC6 60%, transparent);
  background:   color-mix(in srgb, #6FABC6 10%, transparent);
}
.choice:nth-of-type(5n+3) label:hover {
  border-color: color-mix(in srgb, var(--copper) 60%, transparent);
  background:   color-mix(in srgb, var(--copper) 10%, transparent);
}
.choice:nth-of-type(5n+4) label:hover {
  border-color: color-mix(in srgb, #80B66B 60%, transparent);
  background:   color-mix(in srgb, #80B66B 10%, transparent);
}
.choice:nth-of-type(5n+5) label:hover {
  border-color: color-mix(in srgb, var(--sodium) 60%, transparent);
  background:   color-mix(in srgb, var(--sodium) 10%, transparent);
}
.choice input[type="radio"],
.choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Multi-select grid (Q9): square markers + checkmark instead of the
   filled disc used for radios, so the user knows multiple selections
   are possible at a glance. */
.choices-multi .choice-marker {
  border-radius: 4px;
}
.choices-multi .choice input:checked ~ .choice-marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: none;
  /* Tick mark drawn with two CSS borders */
  border-right: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  width: 0.45rem;
  height: 0.7rem;
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
}

/* Reveal-on-"Other" text input. Sits directly below the choices and
   inherits the same answer-input look so it feels native. */
.choice-other-wrap {
  margin-top: 0.85rem;
  transition: opacity 0.25s ease;
}
.choice-other-wrap[hidden] { display: none; }
.choice-other-input {
  width: 100%;
  box-sizing: border-box;
}

/* Reveal-on-"Yes" follow-up sentence (Q10 referral). Sits below the
   binary choices in the same warm-ink soft hint style as a kicker
   note, with a subtle fade-in so it doesn't snap into place. */
.choice-reveal-hint {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
  font-style: italic;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.choice-reveal-hint:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
}
.choice-reveal-hint[hidden] { display: none; }
.choice-marker {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}
.choice input:checked ~ .choice-marker {
  border-color: var(--flame);
  background: var(--flame);
}
.choice input:checked ~ .choice-marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--paper);
}
.choice input:focus-visible ~ .choice-marker {
  box-shadow: 0 0 0 3px rgba(244, 83, 71, 0.3);
}
.choice-text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: color 0.18s ease;
}
.choice label:has(input:checked) {
  border-color: rgba(244, 83, 71, 0.55);
  background: rgba(244, 83, 71, 0.07);
}
.choice label:has(input:checked) .choice-text {
  color: var(--ink);
}

/* ─── Footer strip ────────────────────────────────────────────── */
.footbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.3rem 2rem 1.5rem;
  pointer-events: none;
}

.foot-block { pointer-events: auto; }

.foot-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
/* Anchor inside the bottom-left .foot-meta slot uses the same
   label-over-handle treatment as the social row, so the corner Privacy
   link reads as part of the same family. */
.foot-meta a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--ink);
}
.foot-meta a .foot-handle {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.foot-meta a:hover .foot-handle { color: var(--flame); }
.foot-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.foot-link {
  font-size: 0.85rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.foot-link:hover { color: var(--flame); }
.foot-link.foot-link-sm {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}
.foot-link.foot-link-sm:hover { color: var(--flame); }

.foot-links {
  display: flex;
  gap: 2.5rem;
  align-items: flex-end;
}
.foot-links a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--ink);
}
.foot-links .foot-handle {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.foot-links a:hover .foot-handle { color: var(--flame); }

/* primary CTA — mirrors the reference's SUBSCRIBE button */
.continue {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  padding: 1.05rem 1.6rem 1.05rem 1.8rem;
  border-radius: 0;             /* sharp rectangle like the reference */
  border: none;
  background: var(--flame);
  color: var(--paper);
  cursor: pointer;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
  box-shadow: 0 12px 30px rgba(244, 83, 71, 0.28);
  min-width: 200px;
  justify-content: center;
}
.continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  background: transparent;
  color: var(--ink-faint);
  border: 1px solid var(--ink-faint);
}
.continue:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(244, 83, 71, 0.42);
}
.continue:not(:disabled):active { transform: translateY(0); }
.continue-arrow { transition: transform 0.25s ease; }
.continue:not(:disabled):hover .continue-arrow { transform: translateX(4px); }

/* ─── Submission success overlay ─────────────────────────────── */
.submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 30% 30%, var(--dusk) 0%, var(--night) 60%, #050a14 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.submit-overlay[hidden] { display: none; }
.submit-overlay.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.submit-card {
  width: min(560px, 90vw);
  padding: 4rem 3rem;
  text-align: left;
  transform: translateY(24px);
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.submit-overlay.is-shown .submit-card { transform: translateY(0); }

.submit-card .kicker {
  margin: 0 0 2rem;
}

.submit-title {
  margin: 0 0 1.4rem;
  font-family: var(--font);
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.submit-text {
  margin: 0 0 0;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
}
.submit-text em {
  font-style: normal;
  color: var(--flame);
}

.submit-meta {
  margin: 2.4rem 0 2.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.submit-close {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: var(--track-cap);
  text-transform: uppercase;
  padding: 1.1rem 1.8rem;
  border: none;
  border-radius: 0;
  background: var(--flame);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 12px 30px rgba(244, 83, 71, 0.28);
}
.submit-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(244, 83, 71, 0.42);
}
.submit-close-arrow { transition: transform 0.25s ease; }
.submit-close:hover .submit-close-arrow { transform: translateX(4px); }

/* ─── Mobile (under 880px) ─────────────────────────────────────
   Narrow viewports get a dedicated, video-free layout: a clean
   vertical scroll of the questions on the navy gradient body
   background. The desktop animations are *the* desktop experience;
   trying to overlay them on a phone-sized screen looks chaotic
   and fights with the on-screen keyboard. */
@media (max-width: 880px) {
  /* Hide the rich-media layer entirely. Body's --dusk → --night
     gradient shows through and matches the brand palette. */
  .scene-video,
  .scene-overlay,
  .arc {
    display: none !important;
  }

  /* Drop scroll-snap on touch — feels more natural to scroll
     freely than to have every question lock into place, especially
     with the iOS keyboard appearing and disappearing. */
  html {
    scroll-snap-type: none;
    overscroll-behavior-y: auto;
  }
  .scene { scroll-snap-align: none; }

  /* Smaller, more breathable scene layout. Each scene is its own
     'card' worth of vertical space — title, hint, input, then
     the next one — rather than 100vh blocks. */
  .scene {
    min-height: auto;
    justify-content: flex-start;
    /* Bottom padding clears the fixed Continue/Submit bar so the
       last input on each scene isn't covered. */
    padding: 5vh 0 12vh;
  }
  /* Top spacing on the first scene clears the topbar */
  .scene[data-scene="1"] { padding-top: 10vh; }
  /* Extra room at the very end of the survey */
  .scene[data-scene="10"] { padding-bottom: 18vh; }

  .scene-content {
    width: 100%;
    max-width: none;
    margin-right: 0;
    padding: 0 6vw;
  }

  /* Slightly smaller heading sizes for narrow screens */
  .question { font-size: clamp(1.55rem, 6.5vw, 2.1rem); line-height: 1.15; }
  .hint     { font-size: 0.95rem; }
  .kicker   { font-size: 0.62rem; }

  /* Right-side progress dots — keep but make them tighter */
  .progress { right: 0.7rem; }
  .progress ol { gap: 0.55rem; }
  .progress .dot { width: 8px; height: 8px; }
  .progress .dot.active { width: 10px; height: 10px; }

  .footbar {
    padding: 1rem 1.2rem;
    flex-wrap: wrap;
    gap: 0.8rem;
  }
  .foot-links { display: none; }      /* social row hidden — keep Privacy reachable in foot-meta */
  .continue { min-width: 0; padding: 0.9rem 1.4rem; }
  .menu { margin-left: 0; }
  .topbar { padding: 0.85rem 1rem; gap: 0.5rem; }
  .logo img { height: 50px; }
}

/* ─── Visually-hidden helper for screen-reader-only labels ──── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Toast (transient error/info messages from util.js) ─────── */
.gig-toast {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  transform: translate(-50%, 12px);
  z-index: 400;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: var(--dusk);
  border: 1px solid var(--ink-mute);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: min(560px, calc(100vw - 2rem));
  text-align: center;
}
.gig-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.gig-toast.tone-error {
  background: color-mix(in srgb, var(--flame) 18%, var(--dusk));
  border-color: color-mix(in srgb, var(--flame) 40%, transparent);
}

/* Reset fieldset visual default so wrapping radios in <fieldset>
   for a11y doesn't add a stray border or padding. */
.scene fieldset.choices {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.scene fieldset.choices > legend {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}