/* ============================================================
   USERS project — intro deck
   Design system: cosmic indigo · molten core · climate signal
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* surfaces */
  --void:      #06070f;   /* deepest space behind everything   */
  --abyss:     #0a0c1e;   /* ambient gradient lift             */
  --card:      #04050c;   /* card interior (near-black, blue)  */
  --line:      rgba(255,255,255,.10);

  /* frame indigo */
  --frame-1:   #4b43e0;
  --frame-2:   #2c259b;
  --frame-3:   #181252;
  --frame-glow:rgba(91,84,255,.55);

  /* molten core */
  --magma:     #ff6a1f;
  --magma-2:   #ffb02e;
  --core:      #fff3c4;
  --ember:     #ff3b30;

  /* climate signal gradient (danger -> action) */
  --sig-1:     #e01e2b;   /* red    / NO        */
  --sig-2:     #ff7a18;   /* orange             */
  --sig-3:     #ffd23f;   /* yellow / ?         */
  --sig-4:     #9bd64a;   /* lime               */
  --sig-5:     #16a35a;   /* green  / YES       */
  --signal:    linear-gradient(90deg,var(--sig-1),var(--sig-2),var(--sig-3),var(--sig-4),var(--sig-5));

  /* partner accents (client-named) */
  --p-zett:    #ff8a1e;
  --p-coal:    #2fd07a;
  --p-holo:    #ff5a52;

  /* text */
  --text:      #eef0ff;
  --muted:     #9a9fce;
  --faint:     #6d72a3;

  /* type */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, monospace;
  --hand:    "Caveat", cursive;

  /* geometry */
  --card-w: clamp(300px, 92vw, 460px);
  --globe:  clamp(184px, 54vw, 248px);
  --radius: 30px;
  --ease:   cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--frame-1); outline-offset: 3px; border-radius: 6px; }

/* ---------- 3. Stage / ambient background ---------- */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vh, 40px);
  background:
    radial-gradient(120% 80% at 50% 8%, #15123a 0%, var(--abyss) 42%, var(--void) 100%),
    radial-gradient(60% 50% at 50% 95%, rgba(255,106,31,.16), transparent 70%);
  overflow: hidden;
}
/* faint starfield */
.stage::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 75% 20%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 40% 70%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 88% 65%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 12% 85%, rgba(255,255,255,.4), transparent),
    radial-gradient(1px 1px at 60% 50%, rgba(255,255,255,.35), transparent);
  background-repeat: no-repeat;
  opacity: .8;
  animation: twinkle 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}
@keyframes twinkle { from { opacity:.45 } to { opacity:.85 } }

/* optional generated nebula backdrop (set by JS if the image exists) */
.nebula {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 85%);
          mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 85%);
}
.nebula.is-ready { opacity: .55; }

/* ---------- 4. Deck + scene transitions ---------- */
.deck {
  position: relative;
  width: var(--card-w);
  height: min(88vh, calc(var(--card-w) / 0.6));
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.deck-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(34px) scale(.985);
  pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scene.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.scene.is-leaving { transform: translateX(-34px) scale(.985); }
.scene.from-left { transform: translateX(-34px) scale(.985); }

/* ---------- 5. Frame + card ---------- */
.frame {
  height: 100%;
  padding: 12px;
  border-radius: calc(var(--radius) + 12px);
  background:
    linear-gradient(150deg, var(--frame-1), var(--frame-2) 55%, var(--frame-3));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 30px 80px -30px #000,
    0 0 60px -10px var(--frame-glow);
}
.card {
  position: relative;
  height: 100%;
  border-radius: var(--radius);
  background:
    radial-gradient(140% 60% at 50% -10%, #0d1030, var(--card) 60%);
  border: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--frame-1) transparent;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 4vw, 34px);
  gap: 18px;
}
.card::-webkit-scrollbar { width: 8px; }
.card::-webkit-scrollbar-thumb { background: var(--frame-2); border-radius: 8px; }

/* shared text bits */
.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--magma-2);
}
.scene-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5.4vw, 2.05rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
.lead {
  font-size: clamp(1rem, 3.4vw, 1.18rem);
  line-height: 1.4;
  color: var(--text);
  margin: 0;
  font-weight: 500;
}
.muted { color: var(--muted); }
.center { text-align: center; }

/* ---------- 6. Deck navigation bar (inside the card, like the quest foot) ---------- */
.deck-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  position: sticky;                 /* always visible at the bottom of the card */
  bottom: 0;
  margin-top: auto;
  padding: 14px 0 2px;
  background: linear-gradient(to top, var(--card) 55%, rgba(4,5,12,0));
}
.deck-nav[hidden] { display: none; }
.navbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text);
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .15s;
}
.navbtn svg { width: 16px; height: 16px; color: var(--magma-2); }
.navbtn:hover { border-color: var(--magma-2); color: var(--magma-2); transform: translateY(-1px); }
.navbtn:hover svg { color: var(--magma-2); }
.navbtn--next {
  background: linear-gradient(135deg, var(--magma-2), var(--magma));
  color: #1a0c00; border-color: transparent;
}
.navbtn--next svg { color: #1a0c00; }
.navbtn--next:hover { color: #1a0c00; box-shadow: 0 12px 26px -12px var(--magma); }
/* hidden ends keep their box so the index stays centred */
.navbtn[hidden] { display: inline-flex; visibility: hidden; }

.card-index {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: #f4f6ff;
}
.card-index b { color: var(--sig-2); font-weight: 700; }
.card-index[hidden] { display: inline; visibility: hidden; }

/* ---------- 7. Progress rail ---------- */
.rail {
  position: fixed;
  left: clamp(14px, 3vw, 40px);
  top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 18px;
  z-index: 6;
}
.rail__line {
  position: absolute;
  left: 5px; top: 4px; bottom: 4px;
  width: 2px;
  background: rgba(255,255,255,.12);
  border-radius: 2px;
}
.rail__fill {
  position: absolute;
  left: 5px; top: 4px;
  width: 2px;
  background: var(--signal);
  border-radius: 2px;
  height: 0;
  transition: height .5s var(--ease);
}
.rail__stop {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 0;
}
.rail__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--void);
  border: 2px solid var(--faint);
  flex: none;
  transition: border-color .3s, background .3s, transform .3s;
  z-index: 1;
}
.rail__label {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s, color .25s;
}
.rail__stop:hover .rail__label,
.rail__stop.is-current .rail__label { opacity: 1; transform: none; }
.rail__stop.is-done .rail__dot { border-color: var(--sig-5); background: var(--sig-5); }
.rail__stop.is-current .rail__dot {
  border-color: var(--magma-2);
  background: var(--magma);
  transform: scale(1.25);
  box-shadow: 0 0 14px var(--magma);
}
.rail__stop.is-current .rail__label { color: var(--text); }

/* ---------- 8. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .15s var(--ease), box-shadow .2s, background .2s, color .2s;
}
.btn--primary {
  background: linear-gradient(135deg, var(--magma-2), var(--magma));
  color: #1a0c00;
  box-shadow: 0 12px 30px -12px var(--magma);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px var(--magma); }
.btn--ghost { border: 1px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: var(--magma-2); color: var(--magma-2); }
.btn--block { width: 100%; }

.back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  align-self: flex-start;
}
.back:hover { color: var(--magma-2); }
.back svg { width: 16px; height: 16px; }

/* ============================================================
   9. HERO — magma core + Earth puzzle + ticker
   ============================================================ */
.hero { gap: 8px; text-align: center; }
.hero__head { display: flex; flex-direction: column; gap: 10px; }
.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 6.6vw, 2.5rem);
  letter-spacing: -.03em;
  line-height: .98;
  margin: 0;
}
.hero__title b { color: var(--magma-2); }
.hero__sub {
  font-size: clamp(.95rem, 3.4vw, 1.12rem);
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

/* the stage where the planet assembles */
.orrery {
  position: relative;
  flex: 1 1 auto;
  min-height: 264px;
  display: grid;
  place-items: center;
  margin: 4px 0;
}
.core {
  position: relative;
  width: clamp(120px, 34vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%,
      var(--core) 0%, var(--magma-2) 22%, var(--magma) 46%, var(--ember) 72%, #5e0d05 100%);
  box-shadow:
    0 0 0 2px rgba(255,179,46,.30),
    0 0 38px 6px rgba(255,106,31,.55),
    0 0 90px 20px rgba(255,59,48,.38),
    inset 0 0 26px rgba(255,243,196,.45);
  animation: corePulse 3.8s ease-in-out infinite;
  z-index: 1;
}
/* churning molten surface — displaced by the #molten turbulence filter */
.core__molten {
  position: absolute; inset: -18%;
  border-radius: 50%;
  background:
    radial-gradient(38% 36% at 32% 30%, rgba(255,243,196,.95), transparent 60%),
    radial-gradient(44% 40% at 70% 38%, rgba(255,176,46,.90), transparent 62%),
    radial-gradient(50% 46% at 58% 72%, rgba(255,106,31,.95), transparent 64%),
    radial-gradient(40% 38% at 28% 68%, rgba(255,59,48,.85), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(94,13,5,.55), transparent 72%);
  filter: url(#molten);
  mix-blend-mode: screen;
  animation: coreChurn 13s linear infinite;
}
/* a hot, glowing spot that flows across the surface */
.core__bright {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(26% 26% at 50% 46%, rgba(255,247,220,.95), rgba(255,200,90,.30) 55%, transparent 70%);
  mix-blend-mode: screen;
  filter: blur(3px);
  animation: coreFlow 7s ease-in-out infinite alternate;
}
.core__flare {
  position: absolute; inset: -42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,31,.30), transparent 60%);
  z-index: 0;
  animation: coreGlow 3.8s ease-in-out infinite;
}
@keyframes corePulse {
  0%,100% { transform: scale(1);     filter: brightness(1); }
  50%     { transform: scale(1.045); filter: brightness(1.16); }
}
@keyframes coreChurn { to { transform: rotate(360deg); } }
@keyframes coreFlow {
  0%   { transform: translate(-8%, -6%) scale(1);    opacity: .9; }
  50%  { transform: translate(6%, 4%)  scale(1.16);  opacity: 1; }
  100% { transform: translate(-4%, 8%) scale(.95);   opacity: .82; }
}
@keyframes coreGlow {
  0%,100% { opacity: .7;  transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.12); }
}

/* Earth globe — one image sliced into 6 (2 cols × 3 rows),
   reassembling over the magma core */
.globe {
  position: absolute;
  top: 50%; left: 50%;
  width: var(--globe);
  height: var(--globe);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.gtile {
  position: absolute;
  width: calc(var(--globe) / 2);
  height: calc(var(--globe) / 3);
  background-image: url("images2/hero-globe.png");           /* fallback for old browsers */
  background-image: image-set(
    url("images2/hero-globe.webp") type("image/webp"),
    url("images2/hero-globe.png")  type("image/png")
  );
  background-repeat: no-repeat;
  background-size: var(--globe) var(--globe);
  display: grid;
  place-items: center;
  --gx: 0px; --gy: 0px;                        /* assembled position (seams) */
  --flyx: 0%; --flyy: 0%; --flyr: 0deg; --flysc: .5;  /* fly-in origin */
  --lx: 0px; --ly: 0px;                        /* label nudge toward globe centre */
  opacity: 0;
  transform: translate(var(--flyx), var(--flyy)) rotate(var(--flyr)) scale(var(--flysc));
  transition: opacity 1.5s var(--ease), transform 2.5s var(--ease);
  will-change: transform, opacity;
}
/* assembled slot + image slice + per-piece fly-in origin (varied distances) */
.gtile[data-col="0"][data-row="0"] { left: 0; top: 0; background-position: 0 0; --flyx:-380%; --flyy:-120%; --flyr:-20deg; --flysc:.40; }
.gtile[data-col="0"][data-row="1"] { left: 0; top: calc(var(--globe)/3); background-position: 0 calc(var(--globe)/-3); --flyx:-560%; --flyy:8%; --flyr:-9deg; --flysc:.54; }
.gtile[data-col="0"][data-row="2"] { left: 0; top: calc(var(--globe)*2/3); background-position: 0 calc(var(--globe)*-2/3); --flyx:-300%; --flyy:135%; --flyr:-27deg; --flysc:.44; }
.gtile[data-col="1"][data-row="0"] { left: calc(var(--globe)/2); top: 0; background-position: calc(var(--globe)/-2) 0; --flyx:430%; --flyy:-145%; --flyr:18deg; --flysc:.46; }
.gtile[data-col="1"][data-row="1"] { left: calc(var(--globe)/2); top: calc(var(--globe)/3); background-position: calc(var(--globe)/-2) calc(var(--globe)/-3); --flyx:600%; --flyy:0%; --flyr:11deg; --flysc:.56; }
.gtile[data-col="1"][data-row="2"] { left: calc(var(--globe)/2); top: calc(var(--globe)*2/3); background-position: calc(var(--globe)/-2) calc(var(--globe)*-2/3); --flyx:330%; --flyy:125%; --flyr:25deg; --flysc:.42; }
/* final seam gaps */
.gtile[data-col="0"] { --gx: -3px; }
.gtile[data-col="1"] { --gx:  3px; }
.gtile[data-row="0"] { --gy: -3px; }
.gtile[data-row="2"] { --gy:  3px; }
/* tuck each label toward the globe centre so the text sits on the round Earth,
   not over the square corners of its tile */
.gtile[data-col="0"][data-row="0"] { --lx: calc(var(--globe) *  .075); --ly: calc(var(--globe) *  .12); }
.gtile[data-col="1"][data-row="0"] { --lx: calc(var(--globe) * -.075); --ly: calc(var(--globe) *  .12); }
.gtile[data-col="0"][data-row="1"] { --lx: calc(var(--globe) *  .04);  --ly: 0px; }
.gtile[data-col="1"][data-row="1"] { --lx: calc(var(--globe) * -.04);  --ly: 0px; }
.gtile[data-col="0"][data-row="2"] { --lx: calc(var(--globe) *  .075); --ly: calc(var(--globe) * -.12); }
.gtile[data-col="1"][data-row="2"] { --lx: calc(var(--globe) * -.075); --ly: calc(var(--globe) * -.12); }
.gtile__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(.64rem, 2.2vw, .82rem);
  line-height: 1.02;
  text-align: center;
  color: #fff;
  padding: 3px 7px;
  border-radius: 8px;
  background: rgba(6,7,15,.42);
  text-shadow: 0 1px 4px rgba(0,0,0,.95);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  max-width: calc(var(--globe) * .46);         /* never wider than the Earth disc */
  transform: translate(var(--lx, 0px), var(--ly, 0px));
}
.hero.is-lit .gtile {
  opacity: 1;
  transform: translate(var(--gx), var(--gy)) rotate(0) scale(1);
}
/* Sequential assembly: each piece flies in alone; the next only launches once the
   previous is almost home. Flight = 2.5s; stagger = 1.6s (≈95% landed before the
   next starts). Reading order: top-left → top-right → mid-left → mid-right → bottom. */
.hero.is-lit .gtile[data-col="0"][data-row="0"] { transition-delay: .3s; }
.hero.is-lit .gtile[data-col="1"][data-row="0"] { transition-delay: 1.9s; }
.hero.is-lit .gtile[data-col="0"][data-row="1"] { transition-delay: 3.5s; }
.hero.is-lit .gtile[data-col="1"][data-row="1"] { transition-delay: 5.1s; }
.hero.is-lit .gtile[data-col="0"][data-row="2"] { transition-delay: 6.7s; }
.hero.is-lit .gtile[data-col="1"][data-row="2"] { transition-delay: 8.3s; }

.hero__cta {
  font-weight: 600;
  font-size: clamp(.95rem, 3.4vw, 1.1rem);
  line-height: 1.3;
  margin: 4px 0 0;
}
.hero__cta b { color: var(--magma-2); }

/* partner ticker */
.partners { margin-top: auto; }
.partners__label {
  font-family: var(--body); font-weight: 600;
  font-size: clamp(.95rem, 3.4vw, 1.1rem);
  color: var(--text); margin-bottom: 8px;
}
.ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track {
  display: flex; gap: 0; width: max-content;
  animation: marquee 18s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-family: var(--display); font-weight: 700;
  font-size: .92rem; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 22px;
  white-space: nowrap;
}
.ticker__item::after { content: "·"; color: var(--faint); }
.t-zett { color: var(--p-zett); }
.t-coal { color: var(--p-coal); }
.t-holo { color: var(--p-holo); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   10. SLIDESHOW (obstacles / solutions)
   ============================================================ */
.show { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
/* slides are stacked in one grid cell -> the cell sizes to the tallest slide,
   so nothing ever overflows onto the text below */
.show__viewport { position: relative; display: grid; }
.slide {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; visibility: hidden;
  transform: scale(.985);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.slide.is-active { opacity: 1; visibility: visible; transform: none; }
.slide__eyebrow {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase;
}
.slide__title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 5vw, 1.7rem); margin: 0; line-height: 1.05;
  letter-spacing: -.02em;
}
.slide__figure {
  display: grid; place-items: center;
  margin: 0;
}
.slide__figure svg { width: min(70%, 190px); height: auto; }
.slide__figure .fig-img {
  width: 100%;
  height: auto;                         /* show the whole photo, no crop */
  max-height: 250px;                    /* > full-width height (~240px) so it never clamps → no bars */
  object-fit: contain;                  /* safety: never crop if a tall image ever clamps */
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -20px #000, inset 0 0 0 1px rgba(255,255,255,.04);
  animation: figIn .5s var(--ease) both;
}
.slide__figure.has-img svg { display: none; }
@keyframes figIn { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.teaser__art .fig-img { width: min(70%, 200px); border-radius: 18px; }
.teaser__art.has-img svg { display: none; }
.slide__text {
  font-size: clamp(.92rem, 3.2vw, 1.02rem);
  line-height: 1.42; color: var(--text); margin: 0;
}
.tag-danger { color: var(--ember); }
.tag-solve  { color: var(--sig-4); }

/* slideshow controls */
.show__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 10px;
}
.show__arrow {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--magma-2);
  transition: background .2s, color .2s, transform .15s;
  flex: none;
}
.show__arrow:hover { background: var(--magma); color: #1a0c00; transform: scale(1.06); }
.show__arrow svg { width: 18px; height: 18px; }
.show__dots { display: flex; gap: 8px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.22);
  transition: background .25s, transform .25s, width .25s;
}
.dot.is-active { background: var(--magma); width: 22px; border-radius: 6px; }
.show__count {
  font-family: var(--mono); font-size: .72rem; color: var(--faint);
  letter-spacing: .1em;
}

/* ============================================================
   11. FILTERS — chips
   ============================================================ */
.filter { gap: 14px; }
.filter__intro { font-size: .98rem; line-height: 1.4; color: var(--muted); margin: 0; }
.quest .filter__intro { color: #f4f6ff; }
.filter__q {
  font-family: var(--display); font-weight: 700;
  font-size: 1.05rem; margin: 4px 0 2px;
}
.chips { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
.chip {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,.015);
  cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s, transform .12s;
}
.chip:hover { border-color: var(--frame-1); transform: translateX(2px); }
.chip input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.chip__box {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  border: 2px solid var(--faint);
  display: grid; place-items: center;
  transition: border-color .2s, background .2s;
}
.chip__box svg { width: 14px; height: 14px; opacity: 0; transform: scale(.4); transition: .2s var(--ease); color: #04210f; }
.chip__text { font-size: .98rem; font-weight: 500; }
.chip:has(input:checked) {
  border-color: var(--sig-5);
  background: rgba(22,163,90,.12);
}
.chip:has(input:checked) .chip__box { background: var(--sig-4); border-color: var(--sig-5); }
.chip:has(input:checked) .chip__box svg { opacity: 1; transform: none; }
.chip--other { gap: 12px; }
.chip__other-input {
  flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; border-bottom: 1px dashed var(--faint);
  color: var(--text); padding: 4px 2px; font-size: .95rem;
}
.chip__other-input:focus { outline: none; border-bottom-color: var(--magma-2); }

.filter__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 6px;
}
.pill-count {
  font-family: var(--mono); font-size: .72rem; color: var(--muted);
  letter-spacing: .08em;
}
.pill-count b { color: var(--sig-4); }

/* ============================================================
   12. CHOOSE — 3 options
   ============================================================ */
.choose { gap: 16px; }
.choose .scene-title { font-size: clamp(1.3rem, 4.6vw, 1.6rem); }
.choices { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; justify-content: center; }
.choice {
  text-align: left;
  text-decoration: none;
  color: inherit;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(120deg, rgba(75,67,224,.08), transparent);
  transition: border-color .2s, transform .15s, background .2s;
}
.choice:hover { border-color: var(--magma-2); transform: translateY(-2px); background: linear-gradient(120deg, rgba(255,106,31,.12), transparent); }
.choice > span:first-child { display: block; }
.choice__title { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; margin: 0 0 6px; }
.choice__desc { display: block; font-size: .85rem; line-height: 1.35; color: var(--muted); margin: 0; }
.choice__arrow {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--magma); color: #1a0c00; flex: none;
  transition: transform .2s var(--ease);
}
.choice:hover .choice__arrow { transform: translateX(4px); }
.choice__arrow svg { width: 20px; height: 20px; }

/* teaser (coming soon / prototype) */
.teaser { gap: 16px; text-align: center; justify-content: center; }
.teaser__art { display: grid; place-items: center; margin: 8px 0; }
.teaser__art svg { width: min(60%, 180px); }
.soon {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--magma-2);
  border: 1px dashed var(--magma); border-radius: 999px;
  padding: 7px 16px; align-self: center;
}

/* ============================================================
   13. QUESTIONNAIRE — rating scales / tiers / pledge
   ============================================================ */
.quest { gap: 14px; }
.quest__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.quest__step { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; color: #f4f6ff; }
.quest__legend {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px;
  font-size: .92rem; color: #f4f6ff;
}
.legend-scale {
  display: grid; grid-template-columns: repeat(3, auto); gap: 0;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  color: #f4f6ff;
}
.legend-scale span { width: 56px; text-align: center; }
.legend-scale span:first-child { text-align: left; color: var(--sig-1); }
.legend-scale span:last-child { text-align: right; color: var(--sig-5); }

.q-group { margin-top: 4px; }
.q-group__title { font-family: var(--display); font-weight: 700; font-size: 1rem; margin: 12px 0 6px; }
.q-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
}
.q-row__label { font-size: .92rem; line-height: 1.25; }
.q-row__label small { display:block; color: #f4f6ff; font-size: .8rem; }

.scale { display: flex; gap: 6px; flex: none; }
.scale__sq {
  width: 22px; height: 22px; border-radius: 5px;
  border: 1px solid rgba(0,0,0,.3);
  opacity: .42;
  transition: opacity .18s, transform .18s, box-shadow .18s;
}
.scale__sq:hover { opacity: .85; transform: scale(1.08); }
.scale__sq[data-v="1"] { background: var(--sig-1); }
.scale__sq[data-v="2"] { background: var(--sig-2); }
.scale__sq[data-v="3"] { background: var(--sig-3); }
.scale__sq[data-v="4"] { background: var(--sig-4); }
.scale__sq[data-v="5"] { background: var(--sig-5); }
.scale__sq.is-picked {
  opacity: 1; transform: scale(1.12);
  box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 4px 12px rgba(0,0,0,.5);
}

/* tiers — selectable like the rating scales (single-select, toggle) */
.tiers { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.tier {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 10px;
  border: 1px solid transparent; background: none;
  opacity: .62; cursor: pointer;
  transition: opacity .18s, background .18s, border-color .18s, transform .12s;
}
.tier:hover { opacity: .92; background: rgba(255,255,255,.035); }
.tier.is-picked {
  opacity: 1;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 6px 18px -8px #000;
}
.tier__medal { width: 14px; height: 14px; border-radius: 50%; flex: none; transition: transform .15s, box-shadow .15s; }
.tier.is-picked .tier__medal { transform: scale(1.3); box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.tier__name { font-size: .9rem; font-weight: 600; }
.tier__amt { font-family: var(--mono); font-size: .78rem; color: #f4f6ff; }
.m-bronze { background: #cd7f32; }
.m-silver { background: #c0c7d6; }
.m-gold   { background: #ffd23f; }
.m-plat   { background: #d6f0ff; }
.m-diam   { background: #8fd9ff; box-shadow: 0 0 8px #8fd9ff; }

/* pledge */
.pledge {
  font-family: var(--body);
  font-size: clamp(1rem, 3.2vw, 1.15rem);
  line-height: 1.4;
  color: #f3e9ff;
  border-left: 3px solid var(--frame-1);
  padding: 6px 0 6px 16px;
  margin: 8px 0 0;
}
.pledge small {
  display: block; font-family: var(--body); font-size: .72rem;
  color: #f4f6ff; margin-top: 8px; line-height: 1.3;
}
.quest__foot { display: flex; gap: 12px; margin-top: 10px; }
.quest__foot .btn { flex: 1 1 auto; }
.thanks { text-align: center; color: var(--sig-4); font-weight: 600; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 720px) {
  .rail { display: none; }

  /* tighter card so slideshow controls / 3rd choice stay visible without scrolling */
  .card { padding: 18px 18px 16px; gap: 12px; }
  .scene-title { font-size: clamp(1.45rem, 6.4vw, 1.8rem); }

  /* obstacles / solutions: bigger, uncropped figure but bounded so dots + arrows fit */
  .slide__figure svg { width: min(56%, 150px); }
  .slide__figure .fig-img { height: auto; max-height: 220px; }
  .show__bar { margin-top: 8px; }

  /* choose (06/06): all three options fit */
  .choices { gap: 10px; }
  .choice { padding: 13px 15px; border-radius: 16px; }
  .choice__title { font-size: 1.02rem; margin-bottom: 3px; }
  .choice__desc { font-size: .8rem; line-height: 1.3; }
  .choice__arrow { width: 36px; height: 36px; }

  /* questionnaire: a touch tighter */
  .q-row { padding: 6px 0; }
  .q-group__title { margin: 8px 0 4px; }
}
@media (max-height: 680px) {
  .deck { height: 90vh; }
  .orrery { min-height: 180px; }
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .ticker__track { animation: none; }
  .hero .gtile { opacity: 1; transform: translate(var(--gx), var(--gy)); }
}