/* Section layouts. Light and dark both live here: the visitor's world is light,
   Hypha's side is lit darkness. */

:root {
  --c-hunter: #65dbae;
  --c-architect: #4ddac7;
  --c-rainmaker: #e3be7a;
  --c-commander: #a3b7c3;
}

/* =================== ARRIVAL =================== */
.arrival-stage { background: var(--paper); color: var(--ink); }
.arrival-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 70% at 74% 46%, #ffffff 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #f8faf7 0%, #f0f3ef 100%);
}
.arrival-night {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 55%, #0d1c1e 0%, #070e10 45%, #04070a 100%);
  --ny: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% var(--ny), transparent var(--n0, 110%), #000 var(--n1, 165%));
  mask-image: radial-gradient(circle at 50% var(--ny), transparent var(--n0, 110%), #000 var(--n1, 165%));
}
.arrival-stage.is-phone .arrival-night { --ny: 32%; }
.arrival-tools { position: absolute; inset: 0; z-index: 2; pointer-events: none; }

/* one window on the visitor's screen: the sheet, and every week the scroll dives through, happen inside it */
.dive {
  position: absolute;
  left: 44vw;
  right: var(--gutter);
  top: calc(50% - min(312px, 37vh));
  height: min(624px, 74vh);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background: #fff;
  transform-origin: 50% 50%;
  will-change: transform;
  box-shadow:
    0 0 0 1px rgb(16 24 20 / 0.07),
    0 2px 4px rgb(16 24 20 / 0.05),
    0 18px 48px rgb(16 24 20 / 0.13),
    0 48px 120px rgb(16 24 20 / 0.10);
  transition: box-shadow 0.6s;
}
.arrival-stage.is-phone .dive {
  left: 10px; right: 10px;
  top: 10px;
  height: calc(var(--cap-top) - 18px);
  border-radius: 14px;
}
/* CLS (fix round 2026-10-26; Lighthouse mobile named div.dive, 0.208): the window sat at its desktop place until the
   script added .is-phone and --cap-top, then jumped. The phone place is now the CSS default below 900px (the script's
   own test: innerWidth < 900), and the window stays unpainted until the script has set its first frame (.is-set). */
@media (max-width: 899.98px) {
  .arrival-stage { --cap-top: calc(var(--stage-h) * 0.6); }
  .arrival-stage .dive {
    left: 10px; right: 10px;
    top: 10px;
    height: calc(var(--cap-top) - 18px);
    border-radius: 14px;
  }
}
.arrival-stage:not(.is-set) .dive { visibility: hidden; }
.dive .win { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.dive.is-night {
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 0 60px rgb(170 215 230 / 0.22),
    0 0 180px rgb(120 190 210 / 0.14);
}
.layer { position: absolute; inset: 0; transform-origin: 0 0; }
.layer-inner { position: absolute; inset: 0; transform-origin: 0 0; }
.cal-layer { visibility: hidden; }
/* the zoom keep (js/arrival.js keepInWindow): a word the window would cut while its layer zooms past is not drawn */
.layer .is-kept-out { visibility: hidden !important; }
.portal-ring {
  position: absolute; left: 0; top: 0;
  border: 2px solid #0b57d0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.row-leak {
  position: absolute;
  height: 150px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 26% at 50% 50%, rgb(57 241 100 / 0.5), rgb(57 241 100 / 0.14) 50%, transparent 76%);
}
.pointer { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 12; opacity: 0; pointer-events: none; }
.pointer svg { width: 22px !important; height: 22px !important; }
.sh-collab {
  position: absolute; left: 0; top: 0;
  border: 2px solid var(--cc);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.2s;
}
.sh-collab span {
  position: absolute;
  left: -2px; bottom: 100%;
  background: var(--cc);
  color: #fff;
  font: 500 11px/1.45 var(--f-app);
  padding: 0 6px;
  border-radius: 3px 3px 3px 0;
  white-space: nowrap;
}
.sh-glow {
  background: linear-gradient(90deg, rgb(189 246 199 / 0.6), rgb(57 241 100 / 0.12) 30%, rgb(57 241 100 / 0.07) 62%, rgb(189 246 199 / 0.5));
  box-shadow: inset 0 1.5px 0 rgb(57 241 100 / 0.95), inset 0 -1.5px 0 rgb(57 241 100 / 0.95), 0 0 22px rgb(57 241 100 / 0.4);
}

.topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  height: 68px;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.topbar .mark { color: var(--ink); }

.arrival-stage .eyebrow { color: var(--ink-3); margin: 0 0 22px; }
.arrival-stage .h1 { color: var(--ink); font-size: clamp(44px, 6.5vw, 106px); }
.arrival-stage .lede { color: var(--ink-2); font-size: clamp(19px, 1.7vw, 27px); }
.arrival-stage .say { color: var(--ink); }
.arrival-stage .say strong { font-weight: 600; }

/* MONDAY AGAIN. NEW DATE. SAME WORK. */
.monday {
  margin: 0;
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.96;
  font-size: clamp(42px, 4.9vw, 80px);
  color: var(--ink);
}
.monday strong { font-weight: 700; }
.monday span { display: block; }
.monday span + span { margin-top: 0.1em; }

/* Vitaliy's comment, as the sheet shows comments */
.vnote {
  position: absolute;
  z-index: 25;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  color: #1f1f1f;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(60 64 67 / 0.3), 0 10px 34px rgb(60 64 67 / 0.22);
  padding: 16px 18px 18px;
  font-family: var(--f-app);
  opacity: 0;
  visibility: hidden;
}
.vnote-head { display: flex; align-items: center; gap: 11px; }
.vnote-head img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; }
.vnote-who b { display: block; font-size: 14.5px; }
.vnote-who span { display: block; font-size: 12px; color: #5f6368; }
.vnote-text { font-size: 17px; line-height: 1.5; margin: 12px 0 16px; color: #1f1f1f; }
/* the founder's own action inside the note: Hypha's button, the same family as the last one on the page */
.vnote-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 22px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-family: var(--f-display);
  font-size: 16px;
  letter-spacing: 0.01em;
  box-shadow:
    0 0 0 1px rgb(57 241 100 / 0.38),
    0 10px 26px rgb(7 16 14 / 0.22),
    0 0 30px rgb(57 241 100 / 0.16);
  transition: transform 0.2s, box-shadow 0.2s;
}
.vnote-cta strong { font-weight: 600; }
.vnote-cta .arw {
  color: var(--neon);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  text-shadow: 0 0 10px rgb(57 241 100 / 0.6);
  transition: transform 0.2s;
}
.vnote-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--neon), 0 14px 30px rgb(7 16 14 / 0.26), 0 0 44px rgb(57 241 100 / 0.3); }
.vnote-cta:hover .arw { transform: translateY(3px); }
.arrival-stage.is-phone .vnote {
  left: var(--gutter); right: var(--gutter);
  width: auto;
  top: auto;
  bottom: max(14px, env(safe-area-inset-bottom));
  padding: 14px 16px 16px;
}
.arrival-stage.is-phone .vnote-text { font-size: 16px; line-height: 1.46; margin: 10px 0 14px; }
.arrival-stage.is-phone .vnote-cta { width: 100%; justify-content: center; }

@media (max-width: 899px) {
  .arrival-stage .cap--hero { top: calc(78px - var(--cap-top, 60%)); }
  .arrival-stage .eyebrow { margin-bottom: 16px; font-size: 11px; }
}

/* =================== RECOGNITION =================== */
.reco-stage { background: #060c0e; color: var(--white); pointer-events: none; }
.reco-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 90% at 50% 55%, #0d1c1e 0%, #070e10 45%, #04070a 100%); }
.reco-stage::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  opacity: var(--green, 0);
  pointer-events: none;
  background:
    radial-gradient(circle at var(--lx, 50%) var(--ly, 70%), rgb(8 132 85 / 0.35) 0%, rgb(1 58 33 / 0.35) 14%, rgb(1 19 13 / 0.45) 30%, transparent 48%),
    linear-gradient(to bottom, #041009 0%, #030b08 24%, #061510 44%, #0a2219 64%, #061410 86%, #020605 100%);
}
.reco-haze {
  position: absolute; inset: -10%;
  opacity: 0.35;
  background:
    radial-gradient(40% 30% at 68% 40%, rgb(24 70 66 / 0.55), transparent 70%),
    radial-gradient(34% 26% at 24% 62%, rgb(18 56 54 / 0.45), transparent 70%);
}
.reco-desk {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 28%;
  opacity: 0.55;
  background:
    /* the gathered light pools on the surface in front of it and lights its edge */
    radial-gradient(36% 70% at var(--lx, 50%) 0%, rgb(189 246 199 / calc(0.3 * var(--green, 0))), rgb(57 241 100 / calc(0.12 * var(--green, 0))) 34%, rgb(14 63 40 / calc(0.2 * var(--green, 0))) 62%, transparent 82%),
    radial-gradient(60% 3px at var(--lx, 50%) 0, rgb(189 246 199 / calc(0.55 * var(--green, 0))), transparent),
    linear-gradient(to bottom, rgb(150 200 210 / 0.1) 0, rgb(14 34 36 / 0.55) 2px, rgb(6 14 16 / 0.85) 45%, #030607 100%);
}
.reco-stage.is-phone .reco-desk { background: linear-gradient(to bottom, rgb(150 200 210 / 0.1) 0, rgb(14 34 36 / 0.55) 2px, rgb(6 14 16 / 0.85) 45%, #030607 100%); }
.reco-light {
  position: absolute;
  z-index: 2;
  left: var(--lx); top: var(--ly);
  width: min(1100px, 150vw); height: min(1100px, 150vw);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 2;
  background: radial-gradient(circle,
    rgb(248 253 250 / 0.95) 0%,
    rgb(189 246 199 / 0.8) 2.5%,
    rgb(57 241 100 / 0.42) 6%,
    rgb(54 126 98 / 0.34) 13%,
    rgb(14 63 40 / 0.32) 24%,
    rgb(3 31 17 / 0.22) 40%,
    transparent 62%);
}
.reco-tools { position: absolute; inset: 0; z-index: 3; }
.rwin { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform, opacity, filter; }
.rwin .win {
  width: 100%; height: 100%;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.08),
    0 0 60px rgb(160 205 220 / 0.14),
    0 30px 90px rgb(0 0 0 / 0.6);
}
.rwin.is-front .win { -webkit-box-reflect: below 16px linear-gradient(transparent 78%, rgb(255 255 255 / 0.09)); }

/* threads of light from each tool to the one source between them */
.reco-threads { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.reco-threads path { fill: none; stroke-linecap: round; }
.th-halo { stroke: rgb(54 126 98 / 0.6); stroke-width: 12; }
.th-body { stroke: rgb(57 241 100 / 0.7); stroke-width: 2.2; }
.th-core { stroke: rgb(248 253 250 / 0.85); stroke-width: 0.9; }
.th-dot { fill: #f8fdfa; filter: drop-shadow(0 0 4px rgb(57 241 100 / 0.95)) drop-shadow(0 0 12px rgb(57 241 100 / 0.6)); }

.reco-caps { z-index: 20; }
.reco-caps .quote { color: var(--white); }
.reco-caps .say { color: var(--white); }
.say--soft { font-weight: 500; }

/* HUNTER. You find openings and start conversations. */
.role-line {
  margin: 0 0 18px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.42;
  color: var(--white);
  text-wrap: pretty;
}
.role-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 6px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  color: var(--rc);
  vertical-align: 0.06em;
}
.role-name::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

/* =================== REVELATION =================== */
.rev-stage .caps { z-index: 50; }
@media (min-width: 900px) {
  .rev-stage::after {
    content: "";
    position: absolute; inset: 0 auto 0 0;
    width: 50vw;
    z-index: 45;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(2 6 5 / 0.8) 0%, rgb(2 6 5 / 0.58) 52%, rgb(2 6 5 / 0) 100%);
    transition: opacity 0.5s;
  }
}
.rev-stage.is-bright::after { opacity: 0; }
.rev-stage.is-phone::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--cap-top) - 48px);
  bottom: 0;
  z-index: 45;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(2 6 5 / 0) 0, rgb(2 6 5 / 0.9) 48px, rgb(2 6 5 / 0.94) 100%);
}
.rev-stage .say + .say { margin-top: 18px; }
.rev-stage .lede + .say { margin-top: 22px; }
.rev-stage .lede { font-size: clamp(19px, 1.7vw, 27px); color: var(--silver); }
.rev-stage.is-bright .caps { opacity: 0; }

/* =================== FILM =================== */
/* the dark of the network settles into daylight: one band of rising light, then quiet paper.
   The headline is already there as the light settles; no blank frame, no white flash. */
.film {
  position: relative;
  background: #f3f7f4;
  color: var(--ink);
  padding: calc(var(--dawn) * 0.62) var(--gutter) clamp(90px, 14vh, 160px);
  overflow: hidden;
  --dawn: clamp(300px, 52vh, 560px);
}
.film-dawn {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--dawn);
  pointer-events: none;
  background:
    radial-gradient(56% 34% at 66% 30%, rgb(57 241 100 / 0.26), rgb(29 130 82 / 0.16) 40%, transparent 72%),
    linear-gradient(to bottom,
      #020605 0%,
      #04100b 10%,
      #0a2219 24%,
      #1a4a39 38%,
      #5f9a83 54%,
      #b9d9cb 70%,
      #e6f1eb 85%,
      #f3f7f4 100%);
}
.film-light {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: var(--dawn);
  pointer-events: none;
  background:
    radial-gradient(44% 46% at 72% 40%, rgb(101 219 174 / 0.34) 0%, rgb(101 219 174 / 0.12) 48%, rgb(101 219 174 / 0) 74%),
    linear-gradient(to bottom, #f3f7f4 0%, #f5f8f4 60%, #f6f8f5 100%);
}
.film-inner {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}
.film-h {
  color: var(--ink);
  max-width: 13.5em;
  margin-bottom: clamp(40px, 7vh, 76px);
}
.film-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 5vw;
  align-items: start;
}
.film-copy .lede { color: var(--ink-2); }
.film-copy .lede + .lede { margin-top: 22px; }

/* the founder film slot: a still, not a player. No play button, no timeline, nothing to press. */
.slot { margin: 0; }
/* eye pass inv1fix 10-26: the portrait fills the whole tile. The photo's own wall carries on to the tile's left edge
   (its colours, top to bottom, at the poster's brightness), the photo's left edge melts into it, and one smooth shade
   darkens that side for the label: no black block, no seam where the photo began */
.slot-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(to bottom, rgb(176 179 175) 0%, rgb(168 172 174) 40%, rgb(148 152 156) 72%, rgb(122 125 130) 88%, rgb(28 29 34) 100%);
  box-shadow:
    0 0 0 1px rgb(7 16 14 / 0.08),
    0 30px 80px rgb(7 40 30 / 0.24),
    0 0 110px rgb(57 241 100 / 0.14);
}
.slot-poster {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: 60%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 26%;
  filter: saturate(0.88) contrast(1.03) brightness(0.92);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%);
}
.slot-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(7 19 16 / 0.9) 0%, rgb(7 19 16 / 0.8) 24%, rgb(7 19 16 / 0.56) 42%, rgb(7 19 16 / 0.2) 60%, rgb(7 19 16 / 0) 76%),
    linear-gradient(to top, rgb(7 19 16 / 0.7) 0%, rgb(7 19 16 / 0) 34%),
    radial-gradient(42% 70% at 22% 62%, rgb(57 241 100 / 0.13), transparent 70%);
}
.slot-label {
  position: absolute;
  left: clamp(20px, 2.4vw, 34px);
  bottom: clamp(18px, 2.2vw, 30px);
  margin: 0;
  max-width: 13em;
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--white);
}
.slot-label strong { font-weight: 600; }
.slot-note {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 18px;
  max-width: 44em;
  font-size: clamp(15.5px, 1.1vw, 17.5px);
  line-height: 1.5;
  color: var(--ink-2);
}
.slot-note .soon-dot { flex: none; transform: translateY(-2px); background: #c9a24a; box-shadow: 0 0 0 3px rgb(201 162 74 / 0.18); }

/* =================== MIRROR =================== */
.mirror {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  padding: clamp(60px, 10vh, 140px) var(--gutter) clamp(90px, 16vh, 180px);
  overflow: hidden;
}
.mirror-light {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 52% at 72% 52%, rgb(101 219 174 / 0.26), transparent 70%),
    linear-gradient(#f6f8f5, #f2f5f1);
}
.mirror.is-done .mirror-light {
  background:
    radial-gradient(44% 56% at 72% 52%, rgb(57 241 100 / 0.3), rgb(101 219 174 / 0.12) 50%, transparent 72%),
    linear-gradient(#f6f8f5, #f2f5f1);
}
.mirror-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "copy tool";
  gap: 5vw;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}
.mc { grid-area: copy; }
.mc[hidden] { display: none; }
.mirror-tool { grid-area: tool; position: relative; }
.mc-quiz .lede { margin-top: 24px; color: var(--ink-2); }
.mc-quiz .h2, .film-h { text-wrap: balance; }

/* which question, in full, beside the sheet */
.q-now {
  margin-top: clamp(30px, 5vh, 48px);
  padding-top: 26px;
  border-top: 1px solid rgb(7 16 14 / 0.12);
}
.q-steps { display: flex; gap: 8px; }
.q-steps i { width: 40px; height: 4px; border-radius: 2px; background: rgb(7 16 14 / 0.14); transition: background 0.3s, box-shadow 0.3s; }
.q-steps i.is-done { background: var(--ink); }
.q-steps i.is-now { background: var(--neon); box-shadow: 0 0 10px rgb(57 241 100 / 0.6); }
.q-count {
  margin: 18px 0 8px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.q-text {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(27px, 2.5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.q-help {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: clamp(16.5px, 1.25vw, 19px);
  font-weight: 500;
  color: var(--ink-2);
}
/* a small pointer toward the sheet, where the answers are */
.q-help::after {
  content: "→";
  flex: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  color: var(--emerald);
  animation: nudge-r 1.6s ease-in-out infinite;
}
@keyframes nudge-r { 50% { transform: translateX(5px); } }
.q-now.is-swap .q-count, .q-now.is-swap .q-text, .q-now.is-swap .q-help { animation: qswap 0.45s cubic-bezier(.2,.7,.2,1) both; }
.q-now.is-swap .q-text { animation-delay: 0.04s; }
.q-now.is-swap .q-help { animation-delay: 0.08s; }
@keyframes qswap { from { opacity: 0; transform: translateY(10px); } }
.q-back, .q-change {
  appearance: none;
  margin-top: 22px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid rgb(7 16 14 / 0.22);
  background: rgb(255 255 255 / 0.7);
  color: var(--ink-2);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.q-back:hover, .q-change:hover { border-color: var(--ink); background: #fff; }
.q-back[hidden] { display: none; }
.q-change { display: block; margin-top: 18px; }

.know { font-size: clamp(40px, 5.6vw, 92px); color: var(--ink); }
.know strong { font-weight: 700; }
.mc-done .lede { margin: 24px 0 36px; color: var(--ink-2); max-width: 30ch; }
.cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 21px 30px 21px 32px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-display);
  font-size: clamp(16px, 1.3vw, 19px);
  letter-spacing: 0.07em;
  box-shadow:
    0 0 0 1px rgb(57 241 100 / 0.4),
    0 18px 40px rgb(7 16 14 / 0.25),
    0 0 44px rgb(57 241 100 / 0.22);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta strong { font-weight: 700; }
.cta .arw {
  display: inline-block;
  color: var(--neon);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-weight: 700;
  margin-left: 8px;
  transition: transform 0.2s;
  text-shadow: 0 0 12px rgb(57 241 100 / 0.6);
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--neon), 0 22px 50px rgb(7 16 14 / 0.3), 0 0 64px rgb(57 241 100 / 0.38); }
.cta:hover .arw { transform: translateX(4px); }

.flip { position: relative; perspective: 2200px; }
.flip::before {
  content: "";
  position: absolute; inset: -6% -5%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgb(57 241 100 / 0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.8s;
}
.mirror.is-done .flip::before { opacity: 1; }
.flip-inner { position: relative; z-index: 1; transform-style: preserve-3d; transition: transform 0.95s cubic-bezier(.65,.05,.25,1); }
.flip.is-flipped .flip-inner { transform: rotateY(180deg); }
.flip-front { position: relative; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgb(77 218 199 / 0.45), 0 30px 80px rgb(7 40 30 / 0.35), 0 0 90px rgb(57 241 100 / 0.3);
}
#quiz-sheet { height: 690px; }

/* the sheet's own cells: a question, and its answer as a dropdown chip */
.sheet.is-quiz .sh-c { white-space: normal; line-height: 1.28; display: flex; align-items: center; padding: 3px 9px; }
.sheet.is-quiz .sh-c.is-click { cursor: pointer; }
.sheet.is-quiz .sh-c.is-click:hover { background: #f8fafd; }
.sheet.is-quiz .sh-c.is-click:focus-visible { outline: 2px solid #0b57d0; outline-offset: -2px; }
.sheet.is-quiz .sh-c.is-set { animation: setflash 0.7s ease; }
@keyframes setflash { from { background: #e6f4ea; } to { background: #fff; } }
.qa-wait { color: #9aa0a6; font-style: italic; }
.qa-pair { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.qa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px;
  border-radius: 14px;
  background: #e8f0fe;
  color: #1f1f1f;
  font-size: 13px;
  line-height: 1.3;
  max-width: 100%;
}
.qa-chip i { flex: none; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #5f6368; margin: 0 2px; }
.qa-chip--role { font-weight: 600; }
.qa-chip--green { background: #d4edbc; }
.qa-chip--blue { background: #bfe1f6; }
.qa-chip--yellow { background: #ffe5a0; }
.qa-chip--purple { background: #e6cff2; }
.qa-chip--plain { background: #e8eaed; }
.qa-chip--empty { width: 132px; min-height: 26px; background: #fff; box-shadow: inset 0 0 0 1px #c4c7c5; justify-content: flex-end; }
.qa-chip--empty.is-now { box-shadow: inset 0 0 0 2px #0b57d0; }
.qa-chip--off { opacity: 0.45; }

/* the dropdown: every answer is a button, and looks like one */
.quiz { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.dd {
  position: absolute;
  pointer-events: auto;
  margin: 0;
  border: 0;
  padding: 8px;
  width: 470px;
  max-width: calc(100% - 16px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgb(60 64 67 / 0.3), 0 12px 36px rgb(60 64 67 / 0.26);
  font-family: var(--f-app);
  animation: ddin 0.18s ease;
}
@keyframes ddin { from { opacity: 0; transform: translateY(-4px); } }
.dd[hidden] { display: none; }
.dd-legend, .dd-help, .dd-back { display: none; }
.dd-legend { padding: 0; }
.dd-list { display: flex; flex-direction: column; gap: 6px; }
.dd-opt {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 10px 14px 10px 12px;
  text-align: left;
  border: 1px solid #dadce0;
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
  font-family: var(--f-app);
  font-size: 15px;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.dd-opt:hover { border-color: #0b57d0; background: #f6f9fe; box-shadow: 0 1px 3px rgb(11 87 208 / 0.18); }
.dd-opt:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
.dd-mark {
  flex: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid #747775;
  position: relative;
  transition: border-color 0.15s;
}
.dd-opt:hover .dd-mark { border-color: #0b57d0; }
.dd-opt[aria-pressed="true"] { border-color: #146c2e; background: #eef8f0; }
.dd-opt[aria-pressed="true"] .dd-mark { border-color: #146c2e; background: #146c2e; }
.dd-opt[aria-pressed="true"] .dd-mark::after {
  content: "";
  position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.dd-opt.is-picked { box-shadow: 0 0 0 3px rgb(20 108 46 / 0.18); }
.dd-txt b { font-weight: 700; }
.dd-role { display: inline-block; padding: 1px 8px 2px; border-radius: 12px; }
.dd-role--green { background: #d4edbc; }
.dd-role--blue { background: #bfe1f6; }
.dd-role--yellow { background: #ffe5a0; }
.dd-role--purple { background: #e6cff2; }
.dd-sep { height: 1px; background: #e8eaed; margin: 4px 2px; }

/* on a phone the dropdown is a sheet at the bottom of the window, with its question on top */
.dd.is-sheet {
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none;
  max-height: 92%;
  overflow: auto;
  border-radius: 18px 18px 12px 12px;
  padding: 22px 12px 14px;
  box-shadow: 0 -10px 40px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(0 0 0 / 0.05);
  animation: sheetin 0.25s cubic-bezier(.2,.7,.2,1);
}
.dd.is-sheet::before {
  content: "";
  position: absolute; left: 50%; top: 8px;
  width: 36px; height: 4px; border-radius: 2px;
  background: #c4c7c5;
  transform: translateX(-50%);
}
.dd.is-sheet .dd-legend { display: block; float: left; width: 100%; padding: 2px 4px 0; color: #1f1f1f; }
.dd.is-sheet .dd-count { display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.12em; color: #5f6368; margin-bottom: 4px; }
.dd.is-sheet .dd-q { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; }
.dd.is-sheet .dd-help { display: block; clear: both; margin: 6px 4px 12px; font-size: 15px; color: #444746; }
.dd.is-sheet .dd-back:not([hidden]) {
  display: inline-flex; gap: 6px;
  margin: 12px 4px 0;
  padding: 8px 14px 8px 11px;
  border-radius: 999px;
  border: 1px solid #c4c7c5;
  background: #fff;
  color: #1f1f1f;
  font: 500 14.5px var(--f-app);
  cursor: pointer;
}
.dd.is-sheet .dd-opt { padding: 12px 14px 12px 12px; font-size: 15px; }
@keyframes sheetin { from { transform: translateY(30px); opacity: 0; } }

@media (max-width: 899px) {
  .film { --dawn: clamp(240px, 40vh, 380px); }
  .film-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .film-h { margin-bottom: 28px; }
  .slot-poster { width: 64%; }
  .film { padding-bottom: 40px; }
  .mirror { padding-top: 56px; }
  .mirror-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "tool"; gap: 30px; }
  /* the question rides in the dropdown sheet on a phone, so it is never apart from its answers */
  .q-now { display: none; }
  #quiz-sheet { height: min(680px, 92svh); }
  .mc-done .lede { margin: 18px 0 28px; }
  .cta { padding: 19px 22px 19px 24px; font-size: 15.5px; }
}

/* ---------- reduced motion (inv-astra-fix I07): the quiz holds still: a still arrow, solid carets, no slide, no flash ---------- */
@media (prefers-reduced-motion: reduce) {
  .q-help::after { animation: none !important; }
  .q-now.is-swap .q-count, .q-now.is-swap .q-text, .q-now.is-swap .q-help { animation: none !important; }
  .sheet.is-quiz .sh-c.is-set { animation: none !important; }
  .dd, .dd.is-sheet { animation: none !important; }
  .caret, .sh-c .caret { animation: none !important; opacity: 1 !important; }
}