:root {
  --bg: #060606;
  --bg-alt: #0f0f0f;
  --card-top: #1d1d1d;
  --card-bottom: #121212;
  --accent: #ffffff;
  --accent-dim: #cfcfcf;
  --on-accent: #0a0a0a;
  --text: #f3f3f3;
  --text-dim: #969696;
  --track: #2c2c2c;
  --border: rgba(255, 255, 255, 0.08);

  /* --- Brand accent ---------------------------------------------------
     The violet the ambient background has always glowed with, promoted to
     the interactive accent so selection reads as "lit up" rather than as a
     white swatch. Kept as its own token instead of overwriting --accent,
     which still fills the high-contrast primary buttons. */
  --brand: #9d8cff;
  --brand-strong: #7c66f0;
  --brand-ink: #0b0713;
  --brand-line: rgba(157, 140, 255, 0.42);
  --brand-wash: rgba(157, 140, 255, 0.13);
  --glow-sm: 0 0 12px rgba(157, 140, 255, 0.35);
  --glow-md: 0 0 22px rgba(157, 140, 255, 0.40);
  --glow-lg: 0 0 40px rgba(157, 140, 255, 0.32);

  --card-radius: 16px;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  /* Space Grotesk's squared-off bowls and distinctive digits give the
     calculator its own voice; the old system stack stays as the fallback
     so a blocked font request degrades rather than breaks. */
  font-family: "Space Grotesk", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  text-align: center;
  -webkit-font-smoothing: antialiased;
}

/* Baseline keyboard-focus ring for anything not already covered by a
   more specific rule (checkboxes/radios/sliders style their own,
   further down). Only shows for keyboard navigation, not mouse clicks. */
button:focus-visible,
select:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Ambient landing background: always on, sits behind everything
   including the rarity-result overlays below. Gives the site a "living"
   wallpaper from the moment the page loads instead of a blank void. --- */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050505;
}
.ambient-top-glow {
  position: absolute;
  top: -25%;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 55%;
  background: radial-gradient(ellipse at center, rgba(101, 78, 179, 0.28) 0%, rgba(60, 50, 110, 0.10) 45%, transparent 75%);
}
.ambient-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, rgba(20, 16, 40, 0.5) 100%);
}
.ambient-edge-dots,
.ambient-bokeh,
.ambient-pairs {
  position: absolute;
  inset: 0;
}
.ambient-edge-dot {
  position: absolute;
  border-radius: 50%;
  background: rgba(200, 190, 255, 0.6);
  animation: ambientDotPulse 4.5s ease-in-out infinite;
}
@keyframes ambientDotPulse {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.55; }
}
.ambient-bokeh-dot {
  position: absolute;
  border-radius: 50%;
  filter: blur(7px);
}
.ambient-pair {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--row, 50%);
  height: 0;
}
.ambient-figure {
  position: absolute;
  bottom: 0;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  line-height: 0;
}
.ambient-figure-a {
  left: var(--start-a, 4%);
  animation: ambientWalkA var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.ambient-figure-b {
  right: var(--start-b, 4%);
  transform: scaleX(-1);
  animation: ambientWalkB var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ambientWalkA {
  0%, 8% { left: var(--start-a); opacity: 0; }
  22% { opacity: 0.55; }
  48% { left: var(--meet-a); opacity: 0.55; }
  78% { left: var(--meet-a); opacity: 0.55; }
  94%, 100% { left: var(--start-a); opacity: 0; }
}
@keyframes ambientWalkB {
  0%, 8% { right: var(--start-b); opacity: 0; }
  22% { opacity: 0.55; }
  48% { right: var(--meet-b); opacity: 0.55; }
  78% { right: var(--meet-b); opacity: 0.55; }
  94%, 100% { right: var(--start-b); opacity: 0; }
}
.ambient-result {
  position: absolute;
  bottom: 22px;
  left: var(--meet-a, 45%);
  transform: translateX(-50%) scale(0.4);
  font-size: 0.85rem;
  opacity: 0;
  animation: ambientResultPop var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes ambientResultPop {
  0%, 50% { opacity: 0; transform: translateX(-50%) scale(0.4); }
  58% { opacity: 0.9; transform: translateX(-50%) scale(1.15); }
  70% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  82%, 100% { opacity: 0; transform: translateX(-50%) scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-edge-dot {
    animation: none !important;
    opacity: 0.3 !important;
  }
  .ambient-figure,
  .ambient-result {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* --- Matrix rain background (only shown at 5/5 rarity) --- */
.matrix-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
}
.matrix-rain.active {
  opacity: 1;
}

/* --- Moon scene background (only shown at 4/5 rarity) --- */
.moon-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1s ease;
  background: radial-gradient(ellipse at 50% 100%, #3a2166 0%, #1c1240 45%, #07061a 100%);
}
.moon-scene.active {
  opacity: 1;
}

.moon-stars {
  position: absolute;
  inset: 0;
}
.moon-star {
  position: absolute;
  border-radius: 50%;
  animation: moonTwinkle 2.6s ease-in-out infinite;
}
@keyframes moonTwinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

.moon-earth {
  position: absolute;
  top: 8%;
  right: 10%;
  font-size: 2.2rem;
  filter: drop-shadow(0 0 12px rgba(120, 170, 255, 0.5));
}

/* ===================== Rarity scenes (SVG motion graphics) =====================
   Each rarity result gets a hand-built inline SVG scene: geometric,
   minimal environments plus articulated stick figures -- real hip and
   shoulder pivots with swinging limbs -- to match the stick-figure
   logo. Everything is vector + CSS: no image assets, nothing fetched,
   so it stays sharp at any size and works inside the page's strict CSP.

   Positions live inside the keyframes rather than on a `transform`
   attribute, because a CSS transform replaces the attribute outright
   rather than composing with it -- an animated element carrying both
   would snap to the viewBox origin the moment its animation started.

   Animations hold their opening frame until JS adds .stage-active, so a
   scene always plays from the top when its result appears instead of
   running unseen since page load and cutting in mid-cycle. */

.rarity-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.rarity-stage {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 20px auto 0;
  overflow: visible;
}
.rarity-stage.hidden { display: none; }

.rarity-stage * { animation-play-state: paused; }
.rarity-stage.stage-active * { animation-play-state: running; }

/* --- Shared stick figure --- */
.fig-shadow,
.mx-shadow {
  fill: rgba(0, 0, 0, 0.5);
}
.fig-spine,
.fig-leg line,
.fig-arm line,
.fig-hair {
  stroke: url(#figGrad);
  stroke-width: 3.2;
  stroke-linecap: round;
  fill: none;
}
.fig-head {
  fill: url(#headGrad);
}
.fig-hair { display: none; }
.fig-fem .fig-hair { display: block; }
/* Mirrors around the figure's own centreline -- SVG's initial
   transform-origin is 0 0, which here is the feet. */
.fig-flip { transform: scaleX(-1); }
.fig { filter: drop-shadow(0 1.5px 2.2px rgba(0, 0, 0, 0.55)); }

@keyframes figLegSwing {
  0%, 100% { transform: rotate(17deg); }
  50% { transform: rotate(-17deg); }
}
@keyframes figLegSwingAlt {
  0%, 100% { transform: rotate(-17deg); }
  50% { transform: rotate(17deg); }
}
@keyframes figArmSwing {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(14deg); }
}
@keyframes figArmSwingAlt {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(-14deg); }
}
@keyframes figBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.7px); }
}
@keyframes figIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.1px); }
}
@keyframes figWave {
  0%, 14% { transform: rotate(0deg); }
  24% { transform: rotate(-148deg); }
  32% { transform: rotate(-126deg); }
  40% { transform: rotate(-148deg); }
  48% { transform: rotate(-126deg); }
  58% { transform: rotate(-148deg); }
  72%, 100% { transform: rotate(0deg); }
}

.fig-leg-a { animation: figLegSwing 0.72s ease-in-out infinite; }
.fig-leg-b { animation: figLegSwingAlt 0.72s ease-in-out infinite; }
.fig-arm-a { animation: figArmSwingAlt 0.72s ease-in-out infinite; }
.fig-arm-b { animation: figArmSwing 0.72s ease-in-out infinite; }
.fig-bob { animation: figBob 0.36s ease-in-out infinite; }
/* Standing figures: a slow breath instead of a walk cycle. Declared
   after .fig-bob so it wins on the elements carrying both. */
.fig-idle { animation: figIdle 3.4s ease-in-out infinite; }
.fig-arm-wave { animation: figWave 3.6s ease-in-out infinite; }

/* Walking pairs (neighborhood actors, moon astronaut/woman) otherwise inherit
   the generic 0.72s infinite swing above, which keeps their limbs cycling
   even while their parent's position keyframe is holding still at the meeting
   point -- they'd look like they're marching in place face to face. These
   scoped overrides replace that with swing keyframes stretched across the
   same 7s cycle as each pair's own hoodWalkLeft/Right or moonAstroWalk/
   moonWomanWalk keyframe, with the swing rotation pinned to 0deg during
   exactly the percent
   ranges where the position keyframe is holding (see those keyframes for the
   matching percentages), and re-activated only during the approach/depart
   spans. Legs/arms/bob all share the walk pair's percentages so a full
   stride still reads as one coordinated gait rather than a series of twitches. */
@keyframes hoodLegA {
  0%, 6% { transform: rotate(0deg); }
  16% { transform: rotate(17deg); }
  26% { transform: rotate(-17deg); }
  36% { transform: rotate(17deg); }
  46%, 78% { transform: rotate(0deg); }
  85% { transform: rotate(17deg); }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes hoodLegB {
  0%, 6% { transform: rotate(0deg); }
  16% { transform: rotate(-17deg); }
  26% { transform: rotate(17deg); }
  36% { transform: rotate(-17deg); }
  46%, 78% { transform: rotate(0deg); }
  85% { transform: rotate(-17deg); }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes hoodArmA {
  0%, 6% { transform: rotate(0deg); }
  16% { transform: rotate(-14deg); }
  26% { transform: rotate(14deg); }
  36% { transform: rotate(-14deg); }
  46%, 78% { transform: rotate(0deg); }
  85% { transform: rotate(-14deg); }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes hoodArmB {
  0%, 6% { transform: rotate(0deg); }
  16% { transform: rotate(14deg); }
  26% { transform: rotate(-14deg); }
  36% { transform: rotate(14deg); }
  46%, 78% { transform: rotate(0deg); }
  85% { transform: rotate(14deg); }
  92%, 100% { transform: rotate(0deg); }
}
@keyframes hoodBob {
  0%, 6% { transform: translateY(0); }
  11% { transform: translateY(-1.7px); }
  21% { transform: translateY(0); }
  31% { transform: translateY(-1.7px); }
  41% { transform: translateY(0); }
  46%, 78% { transform: translateY(0); }
  82% { transform: translateY(-1.7px); }
  92%, 100% { transform: translateY(0); }
}
.hood-actor-left .fig-leg-a, .hood-actor-right .fig-leg-a { animation: hoodLegA 7s ease-in-out infinite; }
.hood-actor-left .fig-leg-b, .hood-actor-right .fig-leg-b { animation: hoodLegB 7s ease-in-out infinite; }
.hood-actor-left .fig-arm-a, .hood-actor-right .fig-arm-a { animation: hoodArmA 7s ease-in-out infinite; }
.hood-actor-left .fig-arm-b, .hood-actor-right .fig-arm-b { animation: hoodArmB 7s ease-in-out infinite; }
.hood-actor-left .fig-bob, .hood-actor-right .fig-bob { animation: hoodBob 7s ease-in-out infinite; }

@keyframes moonLegA {
  0%, 34% { transform: rotate(0deg); }
  41% { transform: rotate(17deg); }
  48% { transform: rotate(-17deg); }
  55% { transform: rotate(17deg); }
  62%, 86% { transform: rotate(0deg); }
  90% { transform: rotate(17deg); }
  94%, 100% { transform: rotate(0deg); }
}
@keyframes moonLegB {
  0%, 34% { transform: rotate(0deg); }
  41% { transform: rotate(-17deg); }
  48% { transform: rotate(17deg); }
  55% { transform: rotate(-17deg); }
  62%, 86% { transform: rotate(0deg); }
  90% { transform: rotate(-17deg); }
  94%, 100% { transform: rotate(0deg); }
}
@keyframes moonArmA {
  0%, 34% { transform: rotate(0deg); }
  41% { transform: rotate(-14deg); }
  48% { transform: rotate(14deg); }
  55% { transform: rotate(-14deg); }
  62%, 86% { transform: rotate(0deg); }
  90% { transform: rotate(-14deg); }
  94%, 100% { transform: rotate(0deg); }
}
@keyframes moonArmB {
  0%, 34% { transform: rotate(0deg); }
  41% { transform: rotate(14deg); }
  48% { transform: rotate(-14deg); }
  55% { transform: rotate(14deg); }
  62%, 86% { transform: rotate(0deg); }
  90% { transform: rotate(14deg); }
  94%, 100% { transform: rotate(0deg); }
}
@keyframes moonBob {
  0%, 34% { transform: translateY(0); }
  38% { transform: translateY(-1.7px); }
  45% { transform: translateY(0); }
  52% { transform: translateY(-1.7px); }
  59% { transform: translateY(0); }
  62%, 86% { transform: translateY(0); }
  90% { transform: translateY(-1.7px); }
  94%, 100% { transform: translateY(0); }
}
.moon-astronaut .fig-leg-a, .moon-woman .fig-leg-a { animation: moonLegA 7s ease-in-out infinite; }
.moon-astronaut .fig-leg-b, .moon-woman .fig-leg-b { animation: moonLegB 7s ease-in-out infinite; }
.moon-astronaut .fig-arm-a, .moon-woman .fig-arm-a { animation: moonArmA 7s ease-in-out infinite; }
.moon-astronaut .fig-arm-b, .moon-woman .fig-arm-b { animation: moonArmB 7s ease-in-out infinite; }
.moon-astronaut .fig-bob, .moon-woman .fig-bob { animation: moonBob 7s ease-in-out infinite; }

.heart-shape {
  fill: #ff4d6d;
  filter: drop-shadow(0 0 5px rgba(255, 77, 109, 0.7));
}
.spark-shape {
  fill: #ffe9a8;
  filter: drop-shadow(0 0 5px rgba(255, 224, 130, 0.8));
}

.scene-ground {
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.sky-star { fill: rgba(255, 255, 255, 0.75); }

/* --- 1/5 Local Neighborhood --- */
.hood-house {
  fill: #241d3d;
  stroke: rgba(190, 175, 255, 0.35);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.hood-window {
  fill: rgba(150, 140, 200, 0.3);
}
.hood-window-lit {
  fill: #ffd98a;
  filter: drop-shadow(0 0 5px rgba(255, 200, 110, 0.65));
}
.hood-trunk { fill: #4a3b63; }
.hood-canopy {
  fill: #2f5d45;
  stroke: rgba(140, 230, 180, 0.4);
  stroke-width: 1.5;
}
.hood-pole {
  stroke: #6f6394;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.hood-lamp {
  fill: #fff2c4;
  filter: drop-shadow(0 0 6px rgba(255, 226, 150, 0.9));
}
.hood-lamp-glow {
  fill: rgba(255, 220, 140, 0.16);
  filter: blur(5px);
}

@keyframes hoodWalkLeft {
  0%, 6% { transform: translate(42px, 132px); opacity: 0; }
  14% { opacity: 1; }
  46%, 78% { transform: translate(146px, 132px); opacity: 1; }
  92%, 100% { transform: translate(42px, 132px); opacity: 0; }
}
@keyframes hoodWalkRight {
  0%, 6% { transform: translate(278px, 132px); opacity: 0; }
  14% { opacity: 1; }
  46%, 78% { transform: translate(174px, 132px); opacity: 1; }
  92%, 100% { transform: translate(278px, 132px); opacity: 0; }
}
@keyframes hoodHeartPop {
  0%, 48% { transform: translate(160px, 84px) scale(0.3); opacity: 0; }
  57% { transform: translate(160px, 84px) scale(1.25); opacity: 1; }
  64% { transform: translate(160px, 84px) scale(1); opacity: 1; }
  78% { transform: translate(160px, 84px) scale(1); opacity: 1; }
  88%, 100% { transform: translate(160px, 84px) scale(0.7); opacity: 0; }
}
@keyframes hoodSparklePop {
  0%, 54% { transform: translate(190px, 74px) scale(0.2) rotate(0deg); opacity: 0; }
  63% { transform: translate(190px, 74px) scale(1.1) rotate(35deg); opacity: 1; }
  76% { transform: translate(190px, 74px) scale(0.95) rotate(55deg); opacity: 1; }
  86%, 100% { transform: translate(190px, 74px) scale(0.4) rotate(80deg); opacity: 0; }
}

.hood-actor-left { animation: hoodWalkLeft 7s ease-in-out infinite; }
.hood-actor-right { animation: hoodWalkRight 7s ease-in-out infinite; }
.hood-heart { animation: hoodHeartPop 7s ease-in-out infinite; }
.hood-sparkle {
  opacity: 0;
  animation: hoodSparklePop 7s ease-in-out infinite;
}
.neighborhood-stage:not(.with-extra) .hood-sparkle {
  animation: none;
  opacity: 0;
}

/* --- 2/5 Next Town Over --- */
.town-building {
  fill: #1e1b33;
  stroke: rgba(170, 160, 230, 0.3);
  stroke-width: 1.4;
}
.town-window-lit {
  fill: #9fd8ff;
  filter: drop-shadow(0 0 4px rgba(150, 210, 255, 0.7));
}
.town-window-lit.tw-warm { fill: #ffcf8a; }
.town-road-dash {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 2;
  stroke-dasharray: 14 12;
  stroke-linecap: round;
}
.car-shadow { fill: rgba(0, 0, 0, 0.5); }
.car-body {
  fill: url(#carGrad);
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.car-glass { fill: #2b3350; }
.car-lamp {
  fill: #fff0c0;
  filter: drop-shadow(0 0 5px rgba(255, 230, 150, 0.9));
}
.wheel-tyre {
  fill: #14141f;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.6;
}
.wheel-spoke {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1.4;
  stroke-linecap: round;
}
@keyframes wheelSpin {
  to { transform: rotate(360deg); }
}
.car-wheel { animation: wheelSpin 0.55s linear infinite; }

@keyframes townDrive {
  0%, 5% { transform: translate(-70px, 130px); opacity: 0; }
  12% { opacity: 1; }
  44%, 80% { transform: translate(120px, 130px); opacity: 1; }
  92%, 100% { transform: translate(-70px, 130px); opacity: 0; }
}
@keyframes townWaiterIn {
  0%, 8% { transform: translate(196px, 132px); opacity: 0; }
  20%, 82% { transform: translate(196px, 132px); opacity: 1; }
  94%, 100% { transform: translate(196px, 132px); opacity: 0; }
}
@keyframes townHeartPop {
  0%, 50% { transform: translate(162px, 82px) scale(0.3); opacity: 0; }
  59% { transform: translate(162px, 82px) scale(1.25); opacity: 1; }
  66% { transform: translate(162px, 82px) scale(1); opacity: 1; }
  80% { transform: translate(162px, 82px) scale(1); opacity: 1; }
  90%, 100% { transform: translate(162px, 82px) scale(0.7); opacity: 0; }
}
.town-car { animation: townDrive 7s ease-in-out infinite; }
.town-waiter { animation: townWaiterIn 7s ease-in-out infinite; }
.town-heart { animation: townHeartPop 7s ease-in-out infinite; }

/* --- 3/5 Across the Globe --- */
.globe-body {
  fill: #16233f;
  stroke: rgba(120, 190, 255, 0.4);
  stroke-width: 1.6;
}
.globe-shine {
  fill: none;
  stroke: rgba(150, 220, 255, 0.5);
  stroke-width: 2.4;
  filter: blur(4px);
}
.globe-city {
  fill: #9fe4ff;
  filter: drop-shadow(0 0 4px rgba(120, 220, 255, 0.9));
}
.country-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.8;
  stroke-dasharray: 5 7;
  stroke-linecap: round;
}
.plane-body,
.plane-fin,
.plane-tail {
  fill: url(#figGrad);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

/* Sampled along the same quadratic curve the dashed .country-path
   draws, so the plane visibly flies the route rather than near it. */
@keyframes countryFly {
  0%, 8% { transform: translate(28px, 118px) rotate(-33deg); opacity: 0; }
  14% { opacity: 1; }
  20% { transform: translate(107px, 79px) rotate(-24deg); opacity: 1; }
  30% { transform: translate(147px, 71px) rotate(-6deg); }
  40% { transform: translate(186px, 71px) rotate(8deg); }
  50% { transform: translate(226px, 79px) rotate(20deg); }
  58%, 80% { transform: translate(264px, 94px) rotate(27deg); opacity: 1; }
  92%, 100% { transform: translate(28px, 118px) rotate(-33deg); opacity: 0; }
}
@keyframes countryWaiterIn {
  0%, 10% { transform: translate(268px, 120px); opacity: 0; }
  24%, 82% { transform: translate(268px, 120px); opacity: 1; }
  94%, 100% { transform: translate(268px, 120px); opacity: 0; }
}
@keyframes countryHeartPop {
  0%, 58% { transform: translate(232px, 66px) scale(0.3); opacity: 0; }
  67% { transform: translate(232px, 66px) scale(1.25); opacity: 1; }
  74% { transform: translate(232px, 66px) scale(1); opacity: 1; }
  84% { transform: translate(232px, 66px) scale(1); opacity: 1; }
  92%, 100% { transform: translate(232px, 66px) scale(0.7); opacity: 0; }
}
.country-plane { animation: countryFly 7s ease-in-out infinite; }
.country-waiter { animation: countryWaiterIn 7s ease-in-out infinite; }
.country-heart { animation: countryHeartPop 7s ease-in-out infinite; }

/* --- 4/5 On the Moon --- */
.moon-ground {
  fill: url(#moonGrad);
  stroke: rgba(230, 215, 255, 0.5);
  stroke-width: 1.6;
}
.moon-crater {
  fill: rgba(90, 70, 130, 0.45);
  stroke: rgba(240, 230, 255, 0.25);
  stroke-width: 1;
}
.moon-earth-body {
  fill: url(#earthGrad);
}
/* Continents + a rim ring drawn on top of the plain gradient sphere --
   without them it's just a blue dot, not recognizably Earth. */
.earth-land {
  fill: #4a9c5c;
  stroke: rgba(255, 255, 255, 0.15);
  stroke-width: 0.4;
}
.earth-cloud {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.moon-earth-ring {
  fill: none;
  stroke: rgba(160, 210, 255, 0.55);
  stroke-width: 1.2;
}
.moon-earth-glow {
  fill: rgba(90, 160, 255, 0.2);
  filter: blur(5px);
}
.ship-shadow { fill: rgba(60, 30, 90, 0.5); }
.ship-body {
  fill: url(#shipGrad);
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.ship-nose {
  fill: #ff6b5e;
  stroke: rgba(255, 200, 190, 0.5);
  stroke-width: 1;
  stroke-linejoin: round;
}
.ship-stripe {
  fill: #2b3350;
}
.ship-fin {
  fill: #ff6b5e;
  stroke: rgba(255, 200, 190, 0.5);
  stroke-width: 1;
  stroke-linejoin: round;
}
.ship-port-ring {
  fill: #dfe6ff;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1;
}
.ship-port {
  fill: #8fd0ff;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.2;
}
.ship-port-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1;
  stroke-linecap: round;
}
.flame-shape {
  fill: url(#flameGrad);
}

/* --- Astronaut: a full suited figure, not a thin stick with a helmet
   glued on -- puffy torso, a visible backpack (PLSS), gloved/booted
   limb tips, a proper round visor, and an antenna for a bit of "this is
   advanced kit" character. */
.astro-pack {
  fill: #cfd3e6;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
}
.astro-body {
  fill: #f4f4fa;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.astro-panel {
  fill: #3a4066;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 0.8;
}
.astro-panel-line {
  stroke: #6bd6ff;
  stroke-width: 1;
  stroke-linecap: round;
}

/* Sex patch on the astronaut's suit. Same show/hide technique as
   .fig-hair: both variants live in the markup, a class picks one. */
.astro-badge {
  display: none;
  fill: none;
  stroke-width: 1.15;
  stroke-linecap: round;
}
.astro-badge circle { fill: none; }
.astro-fem .astro-badge-fem { display: block; stroke: #ff9db0; }
.astro-masc .astro-badge-masc { display: block; stroke: #8fc7ff; }
.astro .fig-arm line,
.astro .fig-leg line {
  stroke: #f4f4fa;
  stroke-width: 4.2;
}
.astro-boot,
.astro-glove {
  fill: #d7dbee;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1;
}
.astro-helmet {
  fill: #f4f4fa;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.4;
}
.astro-visor {
  fill: #2b3350;
  stroke: #ffd76b;
  stroke-width: 1.3;
}
.astro-visor-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.8);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.astro-antenna {
  stroke: #cfd3e6;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.astro-antenna-tip {
  fill: #ff6b5e;
}

@keyframes moonShipLand {
  0%, 4% { transform: translate(86px, -46px); opacity: 0; }
  10% { opacity: 1; }
  32%, 88% { transform: translate(86px, 116px); opacity: 1; }
  96%, 100% { transform: translate(86px, -46px); opacity: 0; }
}
@keyframes moonFlame {
  0%, 4% { opacity: 0; transform: scaleY(0.6); }
  10% { opacity: 1; transform: scaleY(1.15); }
  24% { opacity: 1; transform: scaleY(0.85); }
  34%, 100% { opacity: 0; transform: scaleY(0.4); }
}
@keyframes moonAstroWalk {
  0%, 34% { transform: translate(100px, 118px); opacity: 0; }
  42% { opacity: 1; }
  62%, 86% { transform: translate(150px, 120px); opacity: 1; }
  94%, 100% { transform: translate(100px, 118px); opacity: 0; }
}
@keyframes moonWomanWalk {
  0%, 34% { transform: translate(216px, 124px); opacity: 0; }
  42% { opacity: 1; }
  62%, 86% { transform: translate(176px, 124px); opacity: 1; }
  94%, 100% { transform: translate(216px, 124px); opacity: 0; }
}
@keyframes moonHeartPop {
  0%, 64% { transform: translate(163px, 74px) scale(0.3); opacity: 0; }
  72% { transform: translate(163px, 74px) scale(1.25); opacity: 1; }
  79% { transform: translate(163px, 74px) scale(1); opacity: 1; }
  88% { transform: translate(163px, 74px) scale(1); opacity: 1; }
  95%, 100% { transform: translate(163px, 74px) scale(0.7); opacity: 0; }
}
.moon-ship { animation: moonShipLand 7s cubic-bezier(0.4, 0, 0.35, 1) infinite; }
.ship-flame { animation: moonFlame 7s ease-in-out infinite; }
.moon-astronaut { animation: moonAstroWalk 7s ease-in-out infinite; }
.moon-woman { animation: moonWomanWalk 7s ease-in-out infinite; }
.moon-handshake { animation: moonHeartPop 7s ease-in-out infinite; }

/* --- 5/5 Lost in the Matrix --- */
.mx-ground {
  stroke: rgba(0, 255, 106, 0.35);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.mx-col rect {
  fill: #00ff6a;
}
.mx-col rect:nth-child(1) { opacity: 0.95; }
.mx-col rect:nth-child(2) { opacity: 0.6; }
.mx-col rect:nth-child(3) { opacity: 0.35; }
.mx-col rect:nth-child(4) { opacity: 0.16; }
@keyframes mxFall {
  from { transform: translate(var(--mx-x), -60px); }
  to { transform: translate(var(--mx-x), 165px); }
}
.mx-col {
  animation: mxFall var(--mx-dur, 3s) linear var(--mx-delay, 0s) infinite;
}
.mx-core .fig-spine,
.mx-core .fig-leg line,
.mx-core .fig-arm line {
  stroke: #00ff6a;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 5px rgba(0, 255, 106, 0.8));
}
.mx-core .fig-head {
  fill: none;
  stroke: #00ff6a;
  stroke-width: 3;
  stroke-dasharray: 4 3;
  filter: drop-shadow(0 0 5px rgba(0, 255, 106, 0.8));
}
.mx-ghost .fig-spine,
.mx-ghost .fig-leg line,
.mx-ghost .fig-arm line {
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
}
.mx-ghost .fig-head { fill: none; stroke-width: 2.6; }
.mx-ghost-cyan .fig-spine,
.mx-ghost-cyan .fig-leg line,
.mx-ghost-cyan .fig-arm line,
.mx-ghost-cyan .fig-head { stroke: #29f2ff; }
.mx-ghost-magenta .fig-spine,
.mx-ghost-magenta .fig-leg line,
.mx-ghost-magenta .fig-arm line,
.mx-ghost-magenta .fig-head { stroke: #ff3ea5; }
.mx-ghost { opacity: 0.55; }

@keyframes mxFigureIn {
  0%, 6% { transform: translate(160px, 132px); opacity: 0; }
  16%, 100% { transform: translate(160px, 132px); opacity: 1; }
}
/* The channel-split copies drift apart on the glitch beats, which is
   what sells the "signal breaking up" read. */
@keyframes mxGhostCyan {
  0%, 38%, 46%, 74%, 82%, 100% { transform: translate(0, 0); }
  42% { transform: translate(-3.5px, 1px); }
  78% { transform: translate(-2.5px, -1px); }
}
@keyframes mxGhostMagenta {
  0%, 38%, 46%, 74%, 82%, 100% { transform: translate(0, 0); }
  42% { transform: translate(3.5px, -1px); }
  78% { transform: translate(2.5px, 1px); }
}
@keyframes mxCoreFlicker {
  0%, 39%, 45%, 75%, 81%, 100% { opacity: 1; }
  41% { opacity: 0.35; }
  43% { opacity: 0.9; }
  77% { opacity: 0.4; }
  79% { opacity: 0.85; }
}
@keyframes mxDashDrift {
  to { stroke-dashoffset: -28; }
}
.mx-figure { animation: mxFigureIn 5s ease-out infinite; }
.mx-ghost-cyan { animation: mxGhostCyan 5s steps(1, end) infinite; }
.mx-ghost-magenta { animation: mxGhostMagenta 5s steps(1, end) infinite; }
.mx-core { animation: mxCoreFlicker 5s steps(1, end) infinite; }
.mx-core .fig-spine,
.mx-core .fig-leg line,
.mx-core .fig-arm line,
.mx-core .fig-head {
  animation: mxDashDrift 1.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze every scene on a readable, composed frame rather than
     mid-transit: figures stand at their meeting points, hearts show,
     vehicles sit at their destinations. */
  .rarity-stage *,
  .rarity-stage.stage-active * {
    animation: none !important;
    opacity: 1 !important;
  }
  .hood-actor-left { transform: translate(146px, 132px); }
  .hood-actor-right { transform: translate(174px, 132px); }
  .hood-heart { transform: translate(160px, 84px); }
  .hood-sparkle { transform: translate(190px, 74px); }
  .neighborhood-stage:not(.with-extra) .hood-sparkle { opacity: 0 !important; }
  .town-car { transform: translate(120px, 130px); }
  .town-waiter { transform: translate(196px, 132px); }
  .town-heart { transform: translate(162px, 82px); }
  .country-plane { transform: translate(264px, 94px) rotate(27deg); }
  .country-waiter { transform: translate(268px, 120px); }
  .country-heart { transform: translate(232px, 66px); }
  .moon-ship { transform: translate(86px, 116px); }
  .ship-flame { opacity: 0 !important; }
  .moon-astronaut { transform: translate(150px, 120px); }
  .moon-woman { transform: translate(176px, 124px); }
  .moon-handshake { transform: translate(163px, 74px); }
  .mx-figure { transform: translate(160px, 132px); }
  .mx-col { opacity: 0 !important; }
}

.brand-bar,
.hero,
.quiz,
.site-footer {
  position: relative;
  z-index: 1;
}

/* --- Brand header --- */
.brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 16px 0;
}
.brand-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.brand-name {
  font-family: "Arial Black", "Franklin Gothic Bold", Impact, sans-serif;
  font-weight: 900;
  letter-spacing: 0.5px;
  font-size: 1.3rem;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #b7b7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero {
  padding: 20px 24px 32px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 16px;
  color: var(--text);
  text-shadow: 0 0 42px rgba(157, 140, 255, 0.28);
}

/* The one word that changes with the Men/Women toggle, so it earns the
   accent -- it also makes the headline visibly respond to that choice. */
.hero h1 #targetWord {
  color: var(--brand);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(157, 140, 255, 0.55);
}

.subtitle {
  color: var(--text-dim);
  font-size: 1rem;
}

.subtitle strong {
  color: var(--accent);
}

.restore-access-link {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.restore-access-link:hover {
  color: var(--text);
}
.restore-access-panel {
  max-width: 420px;
  margin: 14px auto 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
}
.restore-access-panel.hidden {
  display: none;
}
.restore-access-copy {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin: 0 0 10px;
}
.restore-access-form {
  display: flex;
  gap: 8px;
}
.restore-access-email {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 0.9rem;
}
.restore-access-submit {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 100%);
  color: var(--on-accent);
  white-space: nowrap;
}
.restore-access-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.restore-access-msg {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.restore-access-msg.hidden {
  display: none;
}
.restore-access-msg.status-error {
  color: #ff9a9a;
}

.quiz {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

.card {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(157, 140, 255, 0.10) 0%, transparent 60%),
    linear-gradient(160deg, var(--card-top) 0%, var(--card-bottom) 100%);
  border: 1px solid var(--border);
  border-radius: var(--card-radius);
  padding: 26px 24px;
  margin-bottom: 16px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* A hairline of light along the top edge, brightest in the middle -- the
   detail that stops a flat dark rectangle reading as a plain box. */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-line), transparent);
  opacity: 0.75;
  pointer-events: none;
}

.card:hover {
  border-color: rgba(157, 140, 255, 0.22);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(157, 140, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

/* Focus inside a card lights the whole card, so keyboard users get the
   same "this is the one you're on" cue the mouse gets from hover. */
.card:focus-within {
  border-color: rgba(157, 140, 255, 0.3);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(157, 140, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Scroll-reveal: cards fade/rise in as they enter view. Scoped under
   body.reveal-ready (added by JS once the observer is wired up) so a
   visitor with JS disabled -- or a load-order hiccup -- always sees
   every card fully visible by default instead of stuck at opacity 0. */
body.reveal-ready .card:not(.in-view) {
  opacity: 0;
  transform: translateY(18px);
}
body.reveal-ready .card.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  body.reveal-ready .card:not(.in-view) { opacity: 1; transform: none; }
  body.reveal-ready .card.in-view { transition: none; }
}

/* At 5/5 "Lost in the Matrix," the result card goes semi-transparent so
   the falling code is visible through it -- on mobile the card spans
   almost the full width, leaving no visible margin for the effect to
   show otherwise. The blur keeps text legible over the moving digits. */
.result-card.matrix-see-through {
  background: linear-gradient(160deg, rgba(29, 29, 29, 0.55) 0%, rgba(18, 18, 18, 0.55) 100%);
  border-color: rgba(0, 255, 106, 0.2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.card h2 {
  text-align: center;
  /* Tighter and heavier than the old 400/normal setting -- the headings now
     read as labels for the control beneath them rather than as body copy. */
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding-bottom: 14px;
  color: var(--text);
  position: relative;
}

/* Short centred rule under each heading, fading out at both ends. */
.card h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  box-shadow: var(--glow-sm);
}

/* Segmented control */
.segmented {
  display: flex;
  gap: 8px;
}
.seg-btn {
  flex: 1;
  padding: 12px 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:
    background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.25s ease, transform 0.12s ease;
}
.seg-btn:not(.active):hover {
  border-color: var(--brand-line);
  background: var(--brand-wash);
  color: var(--text);
}
.seg-btn:active { transform: scale(0.97); }
.seg-btn.active {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  border-color: transparent;
  color: var(--brand-ink);
  font-weight: 700;
  box-shadow: var(--glow-md), 0 4px 14px rgba(0, 0, 0, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .seg-btn { transition: background 0.2s ease, color 0.2s ease; }
  .seg-btn:active { transform: none; }
}

/* Radio list */
.radio-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.radio-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  cursor: pointer;
  font-size: 1rem;
}

.hint {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 16px 0 0;
}

/* Checkbox */
.checkbox-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 1rem;
}
/* Visually replaced by .checkbox-box, but kept in the layout (not
   display:none) so Tab/Space still reaches it -- a hidden input is
   pulled out of the tab order entirely, which made every checkbox and
   this "radio-option" checkbox-list unreachable by keyboard. Sized and
   positioned to sit exactly over its .checkbox-box so it stays clickable
   in place too. */
.checkbox-option,
.radio-option {
  position: relative;
}
.checkbox-option input,
.radio-option input[type="checkbox"] {
  position: absolute;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  /* The label (its parent) already toggles the input on click via the
     native label/input association -- this only needs to be reachable
     by keyboard, not clickable itself, so it can't intercept a click
     meant for the visible .checkbox-box next to it under the centered
     flex layout here. */
  pointer-events: none;
}
.checkbox-box {
  width: 21px;
  height: 21px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.25s ease,
    transform 0.18s var(--ease-pop);
}
/* Hover only previews an UNCHECKED box. Scoped with :not(:checked) because
   `.checkbox-option:hover .checkbox-box` (0-3-0) otherwise outranks
   `input:checked + .checkbox-box` (0-2-1) -- so hovering a box you'd just
   ticked replaced its violet fill with the faint hover wash, leaving a dark
   checkmark on an unlit box until the cursor moved away. */
.checkbox-option:hover input:not(:checked) + .checkbox-box,
.radio-option:hover input:not(:checked) + .checkbox-box {
  border-color: var(--brand-line);
  background: var(--brand-wash);
}
/* Pressing the row squashes the box slightly, so a tap feels physical
   even on the touch devices most of this traffic comes from. */
.checkbox-option:active .checkbox-box,
.radio-option:active .checkbox-box {
  transform: scale(0.88);
}
input:checked + .checkbox-box {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  border-color: transparent;
  box-shadow: var(--glow-md);
}
input:checked + .checkbox-box::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--brand-ink);
  font-weight: 700;
  animation: checkPop 0.22s var(--ease-pop) both;
}
/* A ring that expands and fades once at the moment of checking -- the
   "something happened" confirmation the old flat swatch never gave. */
input:checked + .checkbox-box::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9px;
  border: 2px solid var(--brand);
  animation: checkRipple 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes checkPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes checkRipple {
  from { transform: scale(0.75); opacity: 0.85; }
  to { transform: scale(1.75); opacity: 0; }
}
input:focus-visible + .checkbox-box {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .checkbox-box { transition: background 0.18s ease, border-color 0.18s ease; }
  .checkbox-option:active .checkbox-box,
  .radio-option:active .checkbox-box { transform: none; }
  input:checked + .checkbox-box::after,
  input:checked + .checkbox-box::before { animation: none; }
  input:checked + .checkbox-box::before { opacity: 0; }
}

/* Single range slider */
.single-slider {
  position: relative;
  padding-top: 36px;
}
.single-slider input[type="range"] {
  width: 100%;
}
.single-slider .bubble {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--track);
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--glow-sm), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--glow-sm), 0 2px 6px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus-visible::-webkit-slider-thumb {
  transform: scale(1.18);
  box-shadow: var(--glow-md), 0 3px 10px rgba(0, 0, 0, 0.5);
}
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:focus-visible::-moz-range-thumb {
  transform: scale(1.18);
  box-shadow: var(--glow-md), 0 3px 10px rgba(0, 0, 0, 0.5);
}
input[type="range"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 4px;
}

.bubble {
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: var(--brand-ink);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 3px 9px;
  border-radius: 6px;
  box-shadow: var(--glow-sm);
  font-variant-numeric: tabular-nums;
}

/* Dual range slider */
.dual-slider {
  position: relative;
  height: 60px;
}
.dual-slider-track {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--track);
  border-radius: 2px;
}
.dual-slider-range {
  position: absolute;
  top: 40px;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-strong), var(--brand));
  border-radius: 2px;
  box-shadow: var(--glow-sm);
}
.dual-slider input[type="range"] {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  background: none;
  pointer-events: none;
  text-align: left;
}
.dual-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
}
.dual-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
}
.dual-slider .bubble {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

/* The one true call to action on the page, so it's the only element that
   gets a solid brand fill and a resting glow -- everything else stays
   quiet until you interact with it. */
.find-out-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 17px;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  border: 1px solid transparent;
  color: var(--brand-ink);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-bottom: 16px;
  box-shadow: var(--glow-md), 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.find-out-btn:hover {
  filter: brightness(1.08);
  box-shadow: var(--glow-lg), 0 10px 28px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
.find-out-btn:active { transform: translateY(0) scale(0.99); }

/* A sheen that sweeps across on hover. Purely decorative, so it sits on a
   pseudo-element and disappears entirely under reduced-motion. */
.find-out-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.find-out-btn:hover::after { animation: ctaSheen 0.7s ease-out; }
@keyframes ctaSheen {
  from { left: -60%; opacity: 0.9; }
  to { left: 120%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .find-out-btn { transition: box-shadow 0.25s ease; }
  .find-out-btn:hover { transform: none; }
  .find-out-btn:active { transform: none; }
  .find-out-btn:hover::after { animation: none; }
}

.hidden { display: none; }

.share-card-preview {
  max-width: 200px;
  margin: 0 auto 20px;
}
.share-card-preview img {
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.share-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #232323 0%, #101010 100%);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.share-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 100%);
  color: var(--on-accent);
  transform: translateY(-1px);
}

/* --- Premium "Global Dream Partner Report" teaser --- */
.premium-teaser {
  border-color: rgba(255, 255, 255, 0.14);
}
.premium-headline {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 10px;
  background: linear-gradient(180deg, #ffffff 0%, #b7b7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.premium-copy {
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 16px;
}
.premium-insight {
  color: var(--text);
  font-size: 0.95rem;
  font-style: italic;
  border-left: 2px solid var(--brand);
  padding: 8px 14px;
  margin: 0 0 20px;
  text-align: left;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 6px 6px 0;
}
/* One real, unblurred result given away at the paywall. The locked grid
   below tells a visitor what's inside; this shows them, using the same
   computeCountryResult() ranking the paid report uses so the free taste
   can never contradict what they'd unlock. */
.free-reveal {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  padding: 14px;
  margin: 0 0 14px;
  text-align: left;
}
.free-reveal-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  border-radius: 20px;
  padding: 3px 9px;
  margin-bottom: 8px;
  box-shadow: var(--glow-sm);
}
.free-reveal-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text);
}
.free-reveal-line strong { font-weight: 700; }

.premium-support {
  margin: 14px 0 4px;
  font-size: 0.88rem;
  color: var(--text);
}
.premium-reassure {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.premium-reassure a { color: var(--text-dim); text-underline-offset: 2px; }
.premium-reassure a:hover { color: var(--text); }

.blur-preview {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 20px;
  background: rgba(255, 255, 255, 0.02);
}
.blur-preview-label {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: left;
  margin: 0;
  padding: 12px 14px 0;
}
.blur-preview-rows {
  padding: 6px 14px 16px;
}
.blur-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text);
}
.blur-preview-row:last-child {
  border-bottom: none;
}
.blur-preview-row .blur-pct {
  font-weight: 700;
  filter: blur(5px);
  user-select: none;
}
.blur-preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.25) 0%, rgba(10, 10, 10, 0.75) 100%);
}
.blur-preview-icon {
  font-size: 1.5rem;
}
.blur-preview-text {
  color: var(--text);
  font-weight: 700;
  font-size: 0.9rem;
  max-width: 260px;
  line-height: 1.4;
}
.premium-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.premium-cta-primary {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 8px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  color: var(--brand-ink);
  font-family: inherit;
  letter-spacing: 0.02em;
  box-shadow: var(--glow-sm), 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.12s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.premium-cta-primary:hover {
  filter: brightness(1.08);
  box-shadow: var(--glow-lg), 0 10px 26px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}
.premium-cta-primary:active { transform: translateY(0) scale(0.99); }
.premium-cta-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.premium-cta-secondary {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
  color: var(--text-dim);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.premium-cta-secondary:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}
.premium-locked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.premium-locked-grid.hidden {
  display: none;
}
.premium-locked-card {
  padding: 16px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.4;
}
.premium-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}
.premium-status.status-error {
  background: rgba(255, 90, 90, 0.1);
  color: #ff9a9a;
  border: 1px solid rgba(255, 90, 90, 0.3);
}
.premium-status.status-cancelled {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  border: 1px solid var(--border);
}
.premium-status.status-verifying {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
}
.premium-status.status-unlocked {
  background: rgba(120, 255, 160, 0.08);
  color: #b8ffcf;
  border: 1px solid rgba(120, 255, 160, 0.3);
}

/* Once the report is unlocked, the sales pitch (headline, blurred
   preview, CTAs, feature grid) is no longer relevant -- only a small
   persistent "you have access" badge stays, on every reload and every
   free-calculator re-run, not just the moment of purchase. */
.premium-teaser.unlocked .premium-headline,
.premium-teaser.unlocked .premium-copy,
.premium-teaser.unlocked .premium-insight,
.premium-teaser.unlocked .blur-preview,
.premium-teaser.unlocked .premium-ctas,
.premium-teaser.unlocked .premium-locked-grid {
  display: none;
}
.premium-teaser.unlocked .premium-status {
  margin-top: 0;
}

/* The probability visual is a dotted silhouette of the U.S. -- dots are
   placed only where a point-in-polygon test says they fall inside the
   (deliberately simplified, not survey-accurate) outline, then a subset
   glow to represent the match count, same "abstract, not literal
   geography" approach already used for the Across the Country scene. */
.dot-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 5;
  margin-bottom: 20px;
}
.dot-grid .dot {
  position: absolute;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--track);
}
.dot-grid .dot.match {
  background: #ffffff;
  box-shadow: 0 0 7px 2px rgba(255, 255, 255, 0.75);
}

/* The unlocked report's result can describe any country -- or the whole
   planet -- so it swaps the U.S. dot-map for a rotating dot-globe.
   Canvas rather than ~800 absolutely-positioned divs, since unlike the
   static map this repaints every animation frame. */
.globe-canvas {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 20px;
}
.globe-canvas.hidden {
  display: none;
}

.result-text {
  color: var(--text-dim);
  line-height: 1.6;
}
.accent { color: var(--accent); }

.percentage {
  text-align: center;
  font-size: 2.75rem;
  font-weight: 800;
  margin: 8px 0 24px;
  background: linear-gradient(180deg, #ffffff 0%, #9a9a9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.delusion-box { text-align: center; }
.litter-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 2rem;
  margin-bottom: 12px;
}
/* Each earned pip glows in its level's colour and drifts slowly up and
   down. Two stacked drop-shadows give a tight core plus a soft halo --
   a single large one just reads as blur. */
.litter-row span {
  display: inline-block;
  /* hue-rotate runs FIRST so it recolours the glyph only -- the drop-shadows
     that follow carry their own explicit colour and are unaffected, which is
     what keeps the Matrix pill blue while its glow stays matrix green. */
  filter:
    hue-rotate(var(--pip-hue, 0deg))
    drop-shadow(0 0 5px var(--rarity-glow, #ffffff))
    drop-shadow(0 0 14px var(--rarity-glow, #ffffff));
  animation: rarityFloat 3.4s ease-in-out infinite;
  animation-delay: var(--pip-delay, 0s);
  will-change: transform;
}
@keyframes rarityFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* Levels you didn't reach: still drifting so the row stays alive, but
   grey and unlit. The grayscale filter also drops the glow, which is
   exactly what's wanted here. */
.litter-row span.dim {
  opacity: 0.3;
  filter: grayscale(1);
}
@media (prefers-reduced-motion: reduce) {
  .litter-row span { animation: none; }
}
/* Sits directly under the big percentage and restates it as "1 in N".
   Weighted above .result-text so the eye lands on it second, after the
   number itself -- it's the line meant to be screenshotted. */
.odds-line {
  margin: 6px 0 4px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
}

.delusion-score {
  font-size: 1.5rem;
  color: var(--accent);
  font-weight: 700;
}
.delusion-label {
  display: block;
  margin-top: 10px;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.3px;
  background: linear-gradient(180deg, #ffffff 0%, #b7b7b7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 16px rgba(255, 255, 255, 0.18);
}

/* 5/5 "Lost in the Matrix" gets the big, stimulating treatment --
   glowing green with an occasional glitch flicker, matching the
   Matrix rain background it triggers. */
.delusion-label.matrix-label {
  font-size: 2.3rem;
  background: none;
  -webkit-text-fill-color: unset;
  color: #00ff6a;
  animation: matrixLabelPulse 4s ease-in-out infinite;
}
@keyframes matrixLabelPulse {
  0%, 80%, 100% {
    transform: translateX(0);
    text-shadow: 0 0 8px rgba(0, 255, 106, 0.65), 0 0 20px rgba(0, 255, 106, 0.35);
  }
  83% {
    transform: translateX(-2px);
    text-shadow: 0 0 16px rgba(0, 255, 106, 1), 0 0 38px rgba(0, 255, 106, 0.8);
  }
  86% { transform: translateX(2px); }
  89% {
    transform: translateX(0);
    text-shadow: 0 0 8px rgba(0, 255, 106, 0.65), 0 0 20px rgba(0, 255, 106, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .delusion-label.matrix-label {
    animation: none;
    text-shadow: 0 0 10px rgba(0, 255, 106, 0.7), 0 0 24px rgba(0, 255, 106, 0.4);
  }
}

/* --- Global Dream Partner Report (unlocked state) --- */
.global-report .report-copy {
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0 0 20px;
}
.report-selector-label {
  display: block;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.report-country-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, #232323 0%, #101010 100%);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 20px;
}

/* The list a native <select> pops open is painted by the OS, which cannot
   render a CSS gradient -- desktop Chrome falls back to a plain white
   panel while the options still inherit the control's near-white `color`,
   leaving every country name almost invisible against it. `color-scheme`
   asks the browser for a dark popup (and a dark scrollbar with it) rather
   than fighting the platform widget. Mobile was never affected: phones
   open a native sheet that ignores page colours entirely.

   Deliberately matched on the ELEMENT, not a class, so any dropdown added
   later inherits the fix instead of reintroducing the bug. Scoped to
   <select> rather than :root so it can't alter the sliders, checkboxes or
   text inputs, which are styled by hand and already legible. */
select {
  color-scheme: dark;
}
/* Belt and braces for engines that honour option colours but not
   color-scheme. Both must stay readable on the OS's own highlight bar, so
   these are plain opaque colours -- no alpha, no gradient. */
select option {
  background-color: #161616;
  color: var(--text);
}
select optgroup {
  background-color: #0d0d0d;
  color: #b9a8d6;
  font-weight: 700;
}
.state-selector-wrap {
  margin-top: -8px;
  margin-bottom: 20px;
}
.state-selector-wrap .report-selector-label {
  color: #cbb8e8;
}

.report-result {
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.report-result-country {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.report-percentage {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 6px 0;
  background: linear-gradient(180deg, #ffffff 0%, #9a9a9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.report-result-text {
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 12px;
}
.tier-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.tier-badge.tier-full {
  background: rgba(120, 255, 160, 0.1);
  color: #b8ffcf;
  border: 1px solid rgba(120, 255, 160, 0.3);
}
.tier-badge.tier-regional {
  background: rgba(255, 220, 130, 0.1);
  color: #ffe1a0;
  border: 1px solid rgba(255, 220, 130, 0.3);
}
.tier-badge.tier-state {
  background: rgba(190, 160, 255, 0.12);
  color: #cbb8e8;
  border: 1px solid rgba(190, 160, 255, 0.35);
}
.tier-badge.tier-metro {
  background: rgba(120, 200, 255, 0.12);
  color: #a8dcff;
  border: 1px solid rgba(120, 200, 255, 0.35);
}
.report-source-note {
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 10px 0 0;
}
.background-selector-wrap {
  margin: 24px 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.background-selector-title {
  margin: 0;
}
.background-mode-toggle {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.background-mode-toggle label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.background-options {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.background-options .checkbox-option {
  margin-top: 12px;
}
.background-restrict-hint {
  color: var(--text);
}
.background-restrict-hint strong {
  color: #ffe1a0;
}
.background-limitations {
  color: var(--text-dim);
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 12px 0 0;
}
.background-search {
  width: 100%;
  padding: 10px 12px;
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-size: 0.9rem;
}
.background-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.background-chips:empty {
  margin-top: 0;
}
.background-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
}
.background-chip-remove {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
  font-size: 0.85rem;
}
.background-chip-remove:hover {
  background: rgba(255, 255, 255, 0.22);
}
.background-group {
  margin-top: 14px;
  text-align: left;
}
.background-group summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 0;
}
.bg-hidden {
  display: none !important;
}
.background-group .checkbox-option {
  justify-content: flex-start;
  margin-left: 4px;
}

/* These were three small dim radio labels in a row, and the "whole world"
   option -- arguably the most interesting thing the paid report does -- read
   as an afterthought. Now they're tappable cards. The radios themselves are
   untouched and still drive all the logic; only the presentation changed. */
/* Two across, with the third centred beneath them rather than left-aligned:
   the odd card spans both columns and caps its own width, so the block reads
   as a deliberate 2+1 arrangement instead of a broken row. */
.country-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.country-mode-toggle .mode-card:last-child {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: calc(50% - 5px);
}
@media (max-width: 420px) {
  .country-mode-toggle { grid-template-columns: 1fr; }
  .country-mode-toggle .mode-card:last-child { max-width: none; }
}
.mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s ease, background 0.2s ease,
              box-shadow 0.25s ease, transform 0.12s ease;
}
/* Kept in the layout rather than display:none so Tab and arrow keys still
   reach the group -- a hidden radio drops out of the tab order entirely. */
.mode-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.mode-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.mode-card-desc {
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.35;
}
.mode-card:hover { border-color: var(--brand-line); background: var(--brand-wash); }
.mode-card:active { transform: scale(0.98); }
.mode-card:has(input:checked) {
  border-color: transparent;
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: var(--glow-md);
}
.mode-card:has(input:checked) .mode-card-title { color: var(--brand-ink); }
.mode-card:has(input:checked) .mode-card-desc { color: rgba(11, 7, 19, 0.72); }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .mode-card { transition: border-color 0.2s ease, background 0.2s ease; }
  .mode-card:active { transform: none; }
}
.multi-country-wrap {
  text-align: center;
  margin-bottom: 20px;
}
.multi-country-options {
  max-height: 340px;
  overflow-y: auto;
  margin-top: 14px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.multi-country-continent {
  text-align: left;
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 10px 6px 4px;
}
.multi-country-option {
  justify-content: flex-start;
  margin: 4px 0 4px 6px;
}

/* The card that appears the moment a purchase is verified, holding the
   country/state/background pickers. A warm border + shimmering gold
   heading distinguish this "you now have full access" moment from the
   plain white/gray look everything else on the page uses. */
.global-inputs-card {
  border-color: rgba(255, 225, 160, 0.3);
}
.global-premium-banner {
  text-align: center;
  margin-bottom: 20px;
}
.global-premium-badge {
  display: inline-block;
  margin-bottom: 12px;
  background: rgba(120, 255, 160, 0.1);
  color: #b8ffcf;
  border: 1px solid rgba(120, 255, 160, 0.3);
}
.global-premium-heading {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 8px;
  background: linear-gradient(100deg, #ffe1a0 0%, #ffffff 25%, #ffe1a0 50%, #ffffff 75%, #ffe1a0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: globalPremiumShimmer 5s linear infinite;
}
@keyframes globalPremiumShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .global-premium-heading {
    animation: none;
  }
}
.report-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 16px;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.report-table th,
.report-table td {
  padding: 10px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
/* The first column is always a place name, and the longest ones ("Saint
   Vincent and the Grenadines", "Washington-Arlington-Alexandria,
   DC-VA-MD-WV") outrun the column at EVERY screen size -- the report card
   is only ~400px wide on desktop too, so this was never phone-only, just
   most obvious there. With nowrap the table overflowed its wrapper (70px
   at a 996px viewport, far more on a phone), so expanding a list left the
   reader scrolling sideways to pair a place with its odds. Only this
   column wraps -- the odds and the data badge stay on one line so neither
   ever splits mid-value. */
.report-table th:first-child,
.report-table td:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
.report-table th {
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Metro names (e.g. "Washington-Arlington-Alexandria, DC-VA-MD-WV") are
   far longer than any country name -- nowrap there forces this table
   wider than the screen. Letting the place column wrap, plus a smaller
   base size, keeps every row on one frame instead of needing a
   horizontal scroll. */
.state-table-wrap .report-table {
  font-size: 0.78rem;
}
.state-table-wrap .report-table th,
.state-table-wrap .report-table td {
  padding: 8px 5px;
}
.state-table-wrap .place-cell {
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
.state-table-wrap .tier-badge {
  font-size: 0.65rem;
  padding: 3px 6px;
  white-space: nowrap;
}
.multi-country-table-wrap .report-table {
  font-size: 0.78rem;
}
.multi-country-table-wrap .report-table th,
.multi-country-table-wrap .report-table td {
  padding: 8px 5px;
  white-space: normal;
  word-break: break-word;
}

/* Phone widths: every report table gets the compact treatment the state
   table already used, so "Show all" can never introduce a sideways
   scroll. The badge shrinks with it -- "Full country data" is the widest
   fixed-width thing in the row and would otherwise squeeze the name
   column down to one word per line. */
@media (max-width: 560px) {
  .report-table {
    font-size: 0.78rem;
  }
  .report-table th,
  .report-table td {
    padding: 9px 4px;
  }
  .report-table th:first-child,
  .report-table td:first-child {
    padding-left: 2px;
  }
  .report-table .tier-badge {
    font-size: 0.62rem;
    padding: 3px 7px;
    letter-spacing: 0;
  }
}

/* --- Report analysis: filter impact / age distribution / leverage --- */
.report-empty {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.6;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  margin: 0;
}
.impact-list,
.strategy-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 8px;
}
.impact-row { text-align: left; }
.impact-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.impact-label {
  font-size: 0.9rem;
  color: var(--text);
}
.impact-pct {
  font-size: 0.9rem;
  font-weight: 700;
  color: #ff9a9a;
  flex-shrink: 0;
}
.impact-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.impact-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 154, 154, 0.55), #ff9a9a);
}
.impact-note {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.age-dist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.age-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
}
.age-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: left;
}
.age-bar {
  height: 14px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.age-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8f8f8f, #ffffff);
}
.age-count {
  font-size: 0.78rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.strategy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.strategy-label {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}
.strategy-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}
.strategy-pct {
  font-size: 1.05rem;
  font-weight: 700;
  color: #b8ffcf;
}
.strategy-mult {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* --- Dream Partner Wrapped (full-screen story overlay) --- */
.wrapped-open-btn { margin-top: 22px; }

.wrapped-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 0%, #3a2166 0%, #1c1240 45%, #07061a 100%);
  transition: background 0.55s ease;
  overflow: hidden;
}

/* --- Wrapped slide themes ---
   Every slide sets data-theme on the overlay, so the palette shifts as
   the story advances instead of one flat backdrop the whole way
   through. Each is a plain CSS gradient -- no image assets, nothing
   fetched, so it all still works inside the page's strict CSP. */
.wrapped-overlay[data-theme="intro"] {
  background: radial-gradient(ellipse at 30% 10%, #ff4d8d 0%, #7a2ff2 40%, #140b33 100%);
}
.wrapped-overlay[data-theme="odds"] {
  background: radial-gradient(ellipse at 70% 15%, #00d4ff 0%, #4b2fd6 45%, #0a0726 100%);
}
.wrapped-overlay[data-theme="rarity-1"] {
  background: radial-gradient(ellipse at 50% 15%, #ffb347 0%, #ff5e62 45%, #2b1030 100%);
}
.wrapped-overlay[data-theme="rarity-2"] {
  background: radial-gradient(ellipse at 50% 15%, #f7971e 0%, #b34bd6 45%, #1a1035 100%);
}
.wrapped-overlay[data-theme="rarity-3"] {
  background: radial-gradient(ellipse at 50% 15%, #21d4fd 0%, #2152ff 45%, #060d2e 100%);
}
.wrapped-overlay[data-theme="rarity-4"] {
  background: radial-gradient(ellipse at 50% 12%, #8e9bd6 0%, #3a3f7a 40%, #05050f 100%);
}
.wrapped-overlay[data-theme="rarity-5"] {
  background: radial-gradient(ellipse at 50% 40%, #042312 0%, #010b05 55%, #000000 100%);
}
.wrapped-overlay[data-theme="constraint"] {
  background: radial-gradient(ellipse at 50% 12%, #ff5f6d 0%, #a4266b 45%, #1a0a20 100%);
}
.wrapped-overlay[data-theme="country"] {
  background: radial-gradient(ellipse at 30% 15%, #00c9a7 0%, #2a5ce0 45%, #06112b 100%);
}
.wrapped-overlay[data-theme="rank"] {
  background: radial-gradient(ellipse at 50% 12%, #ffd86f 0%, #c86b2b 45%, #221004 100%);
}
.wrapped-overlay[data-theme="state"] {
  background: radial-gradient(ellipse at 60% 12%, #7ee8fa 0%, #4b56c4 45%, #0a0a2a 100%);
}
/* Magenta rather than the original green, to match the supplied mockup
   for this slide's artwork. Deliberately NOT identical to "constraint"
   above, which is the same family: this one runs to a lighter plum base
   (#45103a vs #1a0a20) so the two don't read as the same screen twice in
   one story. */
.wrapped-overlay[data-theme="unlock"] {
  background: radial-gradient(ellipse at 50% 10%, #ff6473 0%, #b8267c 44%, #45103a 100%);
}
.wrapped-overlay[data-theme="outro"] {
  background: radial-gradient(ellipse at 50% 20%, #b06cff 0%, #5a2fd6 45%, #0b0725 100%);
}

/* A ringed badge rather than a bare glyph: it gives every slide the same
   anchor, and the ring reads as designed where a floating emoji read as
   dropped in. The artwork inside is SVG (see WRAPPED_ICON_PATHS) -- the
   old drop-shadow here was painting a hard rectangle around iOS's bitmap
   emoji, which is the outline that showed above each one. */
.wrapped-art {
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.32);
  color: #ffffff;
  animation: wrappedArtIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
.wrapped-art svg {
  width: 68px;
  height: 68px;
  display: block;
  /* Safe on SVG in a way it never was on emoji: real alpha, so the glow
     follows the stroke instead of the glyph's bounding box. */
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.45));
}
/* --- Illustrated Wrapped scene: height comparison ---
   The two figures are a supplied transparent PNG; the ring, ruler,
   measurement rules and glow are all CSS so the labels stay live text and
   can show each visitor's own height values. Line offsets are the
   artwork's measured ink bounds (man's head 0.1%, woman's 11.3% down the
   image), so both rules sit on the real heads at any rendered size. */
.height-scene {
  position: relative;
  width: min(78vw, 316px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 24px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04), 0 18px 40px rgba(0, 0, 0, 0.32);
  animation: wrappedArtIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
}
.height-scene-glow {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 116%;
  height: 74%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 173, 205, 0.55) 0%, rgba(255, 118, 170, 0.24) 45%, rgba(255, 118, 170, 0) 72%);
}
/* Vertical rule with tick marks down the left of the circle. */
.height-ruler {
  position: absolute;
  left: 13%;
  top: 20%;
  bottom: 26%;
  width: 15px;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.5) 0 2px,
    rgba(255, 255, 255, 0) 2px 15px
  );
}
/* Absolutely positioned so it shrink-wraps the artwork -- the measurement
   lines are positioned as a percentage of THIS box, which is exactly the
   image's box, so they track the heads however the image is scaled. */
.height-figure {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%);
  height: min(29vh, 190px);
  max-width: 72%;
}
.height-couple-image {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}
.height-line {
  position: absolute;
  left: -46px;
  right: -20px;
  height: 0;
  z-index: 1; /* behind the figures, so the people stay fully visible */
  border-top: 2px solid rgba(255, 255, 255, 0.95);
}
.height-line::after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
}
.height-line-current { top: 1%; }
.height-line-current .height-line-label { bottom: 7px; }
.height-line-suggested .height-line-label { top: 7px; }
.height-line-suggested {
  top: 11.3%;
  border-top-style: dashed;
  border-top-color: rgba(255, 255, 255, 0.85);
}
/* The two rules sit only ~11% of the artwork apart, so stacking both
   labels on the same side collides them. The upper one sits above its
   line, the lower one below -- which also keeps each label in a part of
   the circle wide enough to hold it, since the ring narrows fastest at
   the top where the taller rule lands. */
.height-line-label {
  position: absolute;
  left: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffffff;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
/* Artwork missing: drop the figure box so the rules don't float against
   an empty circle. */
.height-scene-noart .height-figure { display: none; }
.height-scene-noart .height-ruler { left: 44%; }

@media (max-width: 360px) {
  .height-scene { width: 86vw; }
  .height-line { left: -46px; right: -16px; }
  .height-line-label { font-size: 0.76rem; }
}

@keyframes wrappedArtIn {
  from { opacity: 0; transform: translateY(14px) scale(0.6) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
/* 5/5 swaps the emoji for glowing digits, matching the Matrix rain the
   result card already triggers at this rarity. */
.wrapped-art-matrix {
  font-family: "Courier New", monospace;
  font-weight: 700;
  font-size: 2.8rem;
  letter-spacing: 6px;
  color: #00ff6a;
  /* The shared badge ring is a faint white wash, which disappears against
     this tier's near-black background -- so 5/5 restates it in its own
     green rather than losing the frame every other slide has. */
  background: rgba(0, 255, 106, 0.07);
  border-color: rgba(0, 255, 106, 0.55);
  box-shadow: 0 0 0 8px rgba(0, 255, 106, 0.05), 0 0 30px rgba(0, 255, 106, 0.25);
  filter: none;
  text-shadow: 0 0 12px rgba(0, 255, 106, 0.9), 0 0 34px rgba(0, 255, 106, 0.5);
  animation: wrappedArtIn 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.2) both,
             matrixArtFlicker 2.4s steps(1, end) infinite;
}
@keyframes matrixArtFlicker {
  0%, 100% { opacity: 1; }
  46% { opacity: 1; }
  50% { opacity: 0.35; }
  54% { opacity: 1; }
}
.wrapped-overlay[data-theme="rarity-5"] .wrapped-big {
  color: #00ff6a;
  text-shadow: 0 0 18px rgba(0, 255, 106, 0.75), 0 0 46px rgba(0, 255, 106, 0.4);
}
.wrapped-overlay[data-theme="rarity-5"] .wrapped-kicker {
  color: #6bffae;
}
.wrapped-overlay[data-theme="rarity-5"] .wrapped-sub {
  color: rgba(140, 255, 190, 0.9);
  font-family: "Courier New", monospace;
  letter-spacing: 1px;
}
.wrapped-overlay.hidden { display: none; }

.wrapped-bars {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.wrapped-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.3s ease;
}
.wrapped-bar.filled { background: #ffffff; }

.wrapped-close {
  position: absolute;
  top: 26px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.wrapped-close:hover { background: rgba(255, 255, 255, 0.22); }

/* Invisible tap targets: left third goes back, right two-thirds advance,
   the same gesture model as every stories UI. */
.wrapped-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.wrapped-zone-prev { left: 0; width: 33%; }
.wrapped-zone-next { right: 0; width: 67%; }

.wrapped-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  padding: 0 32px;
  pointer-events: none;
}
.wrapped-slide {
  text-align: center;
  animation: wrappedIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes wrappedIn {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.wrapped-kicker {
  font-size: 0.85rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #cbb8e8;
  margin-bottom: 18px;
}
.wrapped-big {
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: #ffffff;
  text-shadow: 0 4px 30px rgba(255, 255, 255, 0.25);
  margin-bottom: 18px;
  overflow-wrap: break-word;
}
.wrapped-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.wrapped-actions {
  margin-top: 30px;
  pointer-events: auto;
}
.wrapped-action-primary {
  padding: 15px 26px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, #d9d9d9 100%);
  color: var(--on-accent);
}
.wrapped-action-primary:hover { box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25); }

@media (prefers-reduced-motion: reduce) {
  .wrapped-slide,
  .wrapped-art,
  .wrapped-art-matrix { animation: none; }
  .wrapped-overlay { transition: none; }
}

.disclaimer {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5;
  margin-top: 24px;
}

.site-footer {
  text-align: center;
  padding: 8px 16px 48px;
  color: var(--text-dim);
  font-size: 0.85rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
}
.site-footer .socials {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}
.site-footer a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer .legal-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  font-size: 0.8rem;
}
.site-footer .legal-links a {
  color: var(--text-dim);
  font-weight: 400;
}

/* --- Legal pages (Privacy / Terms / Refund Policy) --- */
.legal-content {
  text-align: left;
  line-height: 1.6;
  color: var(--text);
}
.legal-content h2 {
  text-align: left;
  font-size: 1.1rem;
  margin: 28px 0 8px;
  padding-bottom: 10px;
}
/* These headings are left-aligned, so the accent rule under them has to
   start at the text rather than stay centred in the card. */
.legal-content h2::after {
  left: 0;
  transform: none;
  background: linear-gradient(90deg, var(--brand), transparent);
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content p {
  color: var(--text-dim);
  margin: 0 0 12px;
}
.legal-content ul {
  color: var(--text-dim);
  margin: 0 0 12px;
  padding-left: 20px;
}
.legal-content li {
  margin-bottom: 6px;
}
.legal-content a {
  color: var(--text);
}
.legal-updated {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 24px;
}
.legal-back {
  display: inline-block;
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 0.9rem;
  text-decoration: none;
}
.legal-back:hover { color: var(--text); }