/* Waybound. Dark only, Inter only, one accent (moss) used as light.
   Tokens mirror src/theme/colors.ts. No tracked capitals anywhere. */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #080A09;
  --bg-2: #0E100F;
  --surface: #151817;
  --surface-2: #1B1F1D;
  --line: rgba(243, 241, 234, 0.09);
  --line-2: rgba(243, 241, 234, 0.14);
  --glass: rgba(255, 255, 255, 0.05);
  --glass-2: rgba(255, 255, 255, 0.08);
  --text: #F3F1EA;
  --text-2: rgba(243, 241, 234, 0.70);
  --muted: rgba(243, 241, 234, 0.54);
  --faint: rgba(243, 241, 234, 0.36);
  --moss: #8FD694;
  --moss-2: #B4E7B6;
  --moss-glow: rgba(143, 214, 148, 0.18);
  --ochre: #E8CD95;
  --ember: #F0A98F;
  --fabled: #6FC3CB;
  --gutter: 20px;
  --max: 1200px;
  --section: clamp(76px, 8vw, 112px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gutter: 40px; } }
@media (min-width: 1100px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; min-height: 100svh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: rgba(143, 214, 148, 0.3); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ------------------------------------------------------------ type */
.display-xl { font-size: clamp(44px, 6.2vw, 92px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; text-wrap: balance; }
.display-l { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.display-m { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.06; letter-spacing: -0.034em; font-weight: 600; text-wrap: balance; }
.lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--text-2); letter-spacing: -0.011em; max-width: 36em; text-wrap: pretty; }
.lede a, .prose a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(243, 241, 234, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.lede a:hover, .prose a:hover { text-decoration-color: var(--moss); }
.eyebrow { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--moss); letter-spacing: -0.005em; }
.soft { color: rgba(243, 241, 234, 0.52); }
.hero .soft { color: rgba(243, 241, 234, 0.64); }
.nw { white-space: nowrap; }
h2, h3, h4 { text-wrap: balance; }

/* ---------------------------------------------------------- buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding: 0 26px; border-radius: 999px;
  background: var(--text); color: #080A09;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 12px 40px -14px rgba(143, 214, 148, 0.5);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.button svg { width: 19px; height: 19px; margin-top: -2px; }
.button:hover { background: #fff; }
.button:active { transform: scale(0.98); }
.button.small { height: 46px; font-size: 16px; padding: 0 22px; }
.store-badge { display: inline-block; border-radius: 10px; transition: transform 0.2s var(--ease), filter 0.2s; }
.store-badge img { width: 168px; height: auto; }
.store-badge.s img { width: 132px; }
.store-badge:hover { filter: brightness(1.15); }
.store-badge:active { transform: scale(0.98); }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -0.01em; }
.text-link svg { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.text-link:hover svg { transform: translateX(3px); }
.text-link[href^='#']:hover svg { transform: translateY(3px); }
.cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 36px; }
.round {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--glass); border: 1px solid var(--line-2);
  transition: background 0.2s, opacity 0.2s;
}
.round svg { width: 20px; height: 20px; }
.round:hover { background: var(--glass-2); }
.round:disabled { opacity: 0.3; cursor: default; }

/* ---------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background 0.35s, border-color 0.35s, backdrop-filter 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.overlay { position: fixed; left: 0; right: 0; }
.site-header.scrolled, .site-header:not(.overlay) {
  background: #080A09;
  border-bottom-color: var(--line);
}
.header-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.brand .mark { width: 28px; height: 28px; color: var(--text); }
.brand-logo { display: block; height: 32px; width: auto; }
.nav { display: none; gap: 30px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.nav a { transition: color 0.2s; }
.nav a:hover { color: var(--text); }
.pill {
  font-size: 15px; font-weight: 600; padding: 9px 17px; border-radius: 999px; letter-spacing: -0.01em;
  background: var(--text); color: #080A09; transition: background 0.2s, transform 0.2s var(--ease);
}
.pill:hover { background: #fff; }
.pill:active { transform: scale(0.97); }
.header-end { display: flex; align-items: center; gap: 8px; }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-content: center; gap: 5px; background: var(--glass); border: 1px solid var(--line-2); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 16px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform 0.3s var(--ease); }
.menu[open] summary span:first-child { transform: translateY(3.3px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.3px) rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: 50px; min-width: 220px; padding: 8px; border-radius: 20px; display: flex; flex-direction: column; background: rgba(21, 24, 23, 0.94); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
.menu-panel a { padding: 12px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--text-2); }
.menu-panel a:hover { background: var(--glass); color: var(--text); }
@media (min-width: 980px) { .nav { display: flex; } .header-in { height: 72px; } .menu { display: none; } }

/* ----------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 max(36px, env(safe-area-inset-bottom)); color: var(--muted); font-size: 15px; }
.footer-in { max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 48px; }
.footer-brand p { margin: 12px 0 22px; color: var(--text-2); }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
@media (min-width: 640px) { .footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .footer-cols a { font-size: 14px; } }
.footer-cols h2 { font-size: 14px; font-weight: 500; color: var(--faint); margin-bottom: 14px; }
.footer-cols a { display: block; padding: 5px 0; color: var(--text-2); transition: color 0.2s; }
.footer-cols a:hover { color: var(--text); }
.footer-base { max-width: calc(var(--max) + var(--gutter) * 2); margin: 56px auto 0; padding: 0 var(--gutter); font-size: 13px; color: var(--faint); line-height: 1.5; }
.footer-base-in { border-top: 1px solid var(--line); padding-top: 24px; display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 800px) {
  .footer-in { grid-template-columns: 1.2fr 2fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .footer-base-in { flex-direction: row; justify-content: space-between; gap: 40px; }
  .footer-base span:last-child { max-width: 58ch; text-align: right; }
}

/* ----------------------------------------------------------- reveal */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease) var(--d, 0ms), transform 0.8s var(--ease) var(--d, 0ms); }
.js .reveal.in { opacity: 1; transform: none; }
.shot-full .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ----------------------------------------------------------- device */
.device {
  position: relative; aspect-ratio: 640 / 1391; border-radius: 13.6% / 6.3%;
  padding: 2.4%; background: linear-gradient(160deg, #2A2F2C, #111412 40%, #1B1F1D);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 30px 60px -40px rgba(143, 214, 148, 0.25);
}
.device > img { width: 100%; height: 100%; object-fit: cover; border-radius: 11.4% / 5.25%; background: #0B0D0C; }
.device.stack { display: grid; }
.device.stack > img { grid-area: 1 / 1; opacity: 0; transition: opacity 0.7s var(--ease), transform 0.9s var(--ease); transform: scale(0.985); }
.device.stack > img.on { opacity: 1; transform: none; }

/* ============================================================= PIN FX */
/* A find arriving. The pin is visible from the first frame, dimmed under a
   bloom of its rarity's light; then (under 0.9s in all) a flash, a shockwave
   ring and sparks bring it to full colour, and it settles into a float. */
.pinfx {
  --open: calc(var(--t0, 0ms) + 320ms);
  position: relative; aspect-ratio: 1; isolation: isolate;
}
.pinfx-pool {
  position: absolute; inset: -38%; z-index: -2; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow) 0%, transparent 72%);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  opacity: 0.66;
  animation: pool-burst 1.1s ease-out var(--open) both, breathe 7s ease-in-out calc(var(--open) + 1.1s) infinite;
}
@keyframes pool-burst { 0% { opacity: 0.9; transform: scale(0.92); } 25% { opacity: 1; transform: scale(1.14); } 100% { opacity: 0.66; transform: scale(1); } }
@keyframes breathe { 50% { opacity: 0.5; transform: scale(0.95); } }
.pinfx-tilt { position: absolute; inset: 0; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.pinfx-body { position: absolute; inset: 0; animation: float 6s ease-in-out calc(var(--open) + 700ms) infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.2%); } }
.pinfx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.pinfx-img {
  filter: drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
  animation: charge 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) var(--t0) both;
}
/* Lit but not yet struck: 60% brightness in a glow; then the strike. */
@keyframes charge {
  0% { filter: brightness(0.6) drop-shadow(0 0 18px var(--glow)); transform: scale(0.97); }
  38% { filter: brightness(0.64) drop-shadow(0 0 22px var(--glow)); transform: scale(0.965); }
  56% { filter: brightness(1) drop-shadow(0 0 28px var(--glow)); transform: scale(1.04); }
  100% { filter: brightness(1) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55)); transform: none; }
}
.pinfx-shadow { display: none; }
.pinfx-sheen {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 250, 235, 0.55) 48%, rgba(255, 255, 255, 0.1) 54%, transparent 62%) 0 0 / 300% 100% no-repeat;
  mix-blend-mode: soft-light; opacity: 0;
  animation: strike 0.7s ease-out var(--open) both, sweep 6.5s ease-in-out calc(var(--open) + 1.4s) infinite;
}
@keyframes strike { 0% { opacity: 1; background-position: 115% 0; } 100% { opacity: 1; background-position: -15% 0; } }
@keyframes sweep { 0% { opacity: 1; background-position: 110% 0; } 30%, 100% { opacity: 1; background-position: -10% 0; } }
/* A specular highlight that follows the pointer or the scroll (pin.js sets --sx, --sy). */
.pinfx-spec {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  background: radial-gradient(34% 34% at var(--sx, 30%) var(--sy, 25%), rgba(255, 252, 240, 0.5), transparent 70%);
  mix-blend-mode: overlay; opacity: 0; animation: fade-in 0.6s ease var(--open) forwards;
}
@keyframes fade-in { to { opacity: 1; } }
.pinfx-flash {
  position: absolute; inset: -60%; z-index: 3; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 250, 235, 0.5) 0%, rgba(255, 245, 225, 0.18) 30%, transparent 70%);
  opacity: 0; animation: flash 0.5s ease-out var(--open) forwards;
}
@keyframes flash { 0% { opacity: 0; transform: scale(0.6); } 20% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.1); } }
.pinfx-ring {
  position: absolute; inset: 10%; z-index: 2; border-radius: 50%; pointer-events: none;
  border: 1.5px solid var(--glow); box-shadow: 0 0 18px var(--glow);
  opacity: 0; animation: ring 0.8s cubic-bezier(0.1, 0.6, 0.3, 1) var(--open) forwards;
}
.pinfx-ring.r2 { animation-delay: calc(var(--open) + 120ms); border-width: 1px; }
@keyframes ring { 0% { opacity: 0.55; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.1); } }
.pinfx-sparks { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: size; }
.pinfx-sparks i {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%;
  background: #FFF8E6; box-shadow: 0 0 10px 2px var(--glow);
  opacity: 0; animation: spark 0.8s cubic-bezier(0.1, 0.7, 0.3, 1) var(--open) forwards;
}
@keyframes spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(4cqw) scale(var(--s)); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(var(--d) * 1.25cqw)) scale(0.2); }
}
@keyframes pop {
  0% { opacity: 0; transform: scale(0.42) rotate(-10deg); }
  6% { opacity: 1; }
  36% { transform: scale(1.22) rotate(5deg); }
  64% { transform: scale(0.95) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pinfx *, .pinfx { animation: none !important; }
  .pinfx-flash, .pinfx-ring, .pinfx-sparks { display: none; }
  .pinfx-spec { opacity: 1; }
  .pinfx-pool { opacity: 0.6; }
}

/* ============================================================= HOME */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.head { max-width: calc(var(--max) + var(--gutter) * 2); }
.head h2 { margin-top: 12px; }
.head.center { text-align: center; }
.head.center .lede { margin-inline: auto; }
.head .lede { margin-top: 18px; }

/* Hero ------------------------------------------------------------ */
.hero { position: relative; height: 100svh; min-height: 700px; max-height: 1100px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: #0B0E0C; }
.hero-plate { position: absolute; inset: -4%; animation: kenburns 38s ease-in-out infinite alternate; }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
@keyframes kenburns { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1.8%, 0); } }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60% 42% at 50% 36%, rgba(232, 205, 149, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 9, 0.6) 0%, rgba(8, 10, 9, 0.12) 16%, rgba(8, 10, 9, 0.2) 40%, rgba(8, 10, 9, 0.82) 64%, var(--bg) 88%);
}
.mist { position: absolute; left: -30%; right: -30%; height: 34%; z-index: 1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 210, 204, 0.16), transparent); filter: blur(20px); }
.m1 { top: 38%; animation: mist 46s linear infinite; }
.m2 { top: 52%; height: 26%; opacity: 0.7; animation: mist 64s linear infinite reverse; }
@keyframes mist { from { transform: translateX(-12%); } 50% { transform: translateX(12%); } to { transform: translateX(-12%); } }
.motes { position: absolute; inset: 0; z-index: 2; }
.motes i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #F6E3B4; box-shadow: 0 0 8px 2px rgba(232, 205, 149, 0.55); opacity: 0; animation: mote var(--t) ease-in-out var(--o) infinite; }
@keyframes mote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 30% { opacity: 0.8; } 70% { opacity: 0.5; } 100% { opacity: 0; transform: translate3d(14px, -70px, 0); } }
.hero-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 64px; }
.hero-pin { width: min(68vw, 300px, 40svh); }
.hero-found {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 14px 7px 11px; border-radius: 999px;
  font-size: 14px; color: var(--text-2); background: rgba(8, 10, 9, 0.5); border: 1px solid rgba(232, 205, 149, 0.28);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  animation: rise-in 0.7s var(--ease) calc(250ms + 560ms + 2 * 380ms + 600ms) both;
}
.hero-found b { color: var(--ochre); font-weight: 600; }
.hero-found .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ochre); box-shadow: 0 0 10px var(--ochre); }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hero-copy { position: relative; z-index: 3; padding-bottom: max(28px, 4svh); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-copy h1 { margin-top: 10px; }
.hero-copy .lede { margin-top: 14px; max-width: 26em; color: rgba(243, 241, 234, 0.76); }
.hero-copy .cta-row { margin-top: 22px; justify-content: center; }
.hero .soft { color: rgba(243, 241, 234, 0.72); }
@media (max-width: 899px) {
  .hero-copy .eyebrow { font-size: 14px; }
  .hero-copy .display-xl { font-size: clamp(34px, 9.9vw, 44px); }
  .hero-copy .lede { font-size: 17px; }
  .hero-copy .cta-row { gap: 14px 22px; }
  .hero-copy .store-badge img { width: 156px; }
}
@media (min-width: 900px) {
  .hero-pin { width: min(37vh, 400px); }
  .hero-found { margin-top: 4px; }
  .hero-stage { padding-top: 76px; }
  .hero-copy h1 { max-width: none; }
  .hero-copy { padding-bottom: 6vh; }
  .hero-copy .display-xl { font-size: clamp(56px, 5.6vw, 84px); }
}

.hero.off *, .hero.off *::before, .hero.off *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-plate, .mist, .motes i, .hero-found { animation: none !important; }
  .motes { display: none; }
}

/* Story ------------------------------------------------------------ */
.story { position: relative; background: var(--bg); }
.story-track { display: none; }
.story .story-static { padding-top: var(--section); }
.story-static { display: grid; grid-auto-flow: column; grid-auto-columns: 74vw; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-top: 32px; }
.story-static::-webkit-scrollbar { display: none; }
.story-static.wrap { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.frame { display: grid; gap: 16px; align-content: start; scroll-snap-align: start; }
.frame-art { position: relative; aspect-ratio: 3 / 4; border-radius: 24px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: #0B0E0C; }
.frame-copy { text-align: left !important; }
.frame-copy h3 { font-size: 24px !important; letter-spacing: -0.03em !important; }
.frame-copy p { font-size: 15px !important; margin-top: 4px !important; }
.frame-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame-art > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-art > img { object-position: center; }
.frame-art > img[src*='map-tall'] { filter: brightness(1.45) contrast(1.08); }
.frame-pin { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8, 10, 9, 0.55); }
.frame-pin img { width: 70%; height: auto; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.6)); }
.frame-copy { text-align: center; }
.frame-copy h3, .story-caps h3 { font-size: clamp(30px, 4vw, 52px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 600; margin-top: 6px; }
.frame-copy p, .story-caps p { color: var(--text-2); font-size: 17px; margin-top: 8px; }
.step { font-size: 14px; color: var(--moss); font-weight: 500; font-variant-numeric: tabular-nums; }
.route, .trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route { stroke: var(--moss); stroke-width: 4.5; }
.route-glow { fill: none; stroke: var(--moss); stroke-width: 14; stroke-opacity: 0.2; stroke-linecap: round; stroke-linejoin: round; }
.trail { stroke: #D6F5D8; stroke-width: 6; }
.trail-glow { fill: none; stroke: var(--moss); stroke-width: 18; stroke-opacity: 0.3; stroke-linecap: round; }
.trail-ghost { fill: none; stroke: rgba(214, 245, 216, 0.6); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; }
.stop-disc { fill: rgba(8, 10, 9, 0.82); stroke: #F6E3B4; stroke-width: 2.5; }
.stop-halo { fill: rgba(246, 227, 180, 0.3); transform-box: fill-box; transform-origin: center; animation: stop-pulse 1.8s ease-in-out infinite; }
@keyframes stop-pulse { 50% { transform: scale(1.35); opacity: 0.4; } }
.stop text { fill: #F6E3B4; font: 600 28px Inter, sans-serif; }
.head-dot { fill: #F3FFF3; stroke: var(--moss); stroke-width: 4; }
.head-halo { fill: rgba(143, 214, 148, 0.35); }

.js-story .story-static { display: none; }
.js-story .story-track { display: block; height: 232svh; }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #090C0A; }
.story-scene { position: absolute; left: 50%; top: 50%; aspect-ratio: 9 / 16; width: max(100vw, 56.25svh); transform: translate(-50%, -50%) scale(var(--zoom, 1)); will-change: transform; }
.story-scene.wide { display: none; }
@media (min-aspect-ratio: 1/1) {
  .story-scene.tall { display: none; }
  .story-scene.wide { display: block; aspect-ratio: 16 / 9; width: max(100vw, 177.78svh); }
}
.story-scene > .map { filter: brightness(1.5) contrast(1.1); }
.story-scene > .map, .story-scene .world, .story-scene .world img, .story-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.story-scene .world { -webkit-mask: radial-gradient(circle at var(--ex) var(--ey), #000 calc(var(--portal, 0%) - 10%), transparent var(--portal, 0%)); mask: radial-gradient(circle at var(--ex) var(--ey), #000 calc(var(--portal, 0%) - 10%), transparent var(--portal, 0%)); }
.story-scene .world img { object-fit: cover; }
.story-scene .world::after { content: ''; position: absolute; inset: 0; background: rgba(8, 10, 9, var(--dim, 0.12)); }
.story-svg .trail-g, .story-svg .stop { opacity: var(--b-on, 0); }
.story-svg .route, .story-svg .route-glow { opacity: var(--a-on, 1); }
.story-svg .head { transform: translate(var(--hx, 0px), var(--hy, 0px)); }
.story-pin { position: absolute; width: 0; height: 0; z-index: 2; }
.story-pin-in { position: absolute; width: min(62vw, 42svh); aspect-ratio: 1; left: 0; top: 0; transform: translate(-50%, -50%) translate(var(--pin-x, 0px), var(--pin-y, 0px)) scale(var(--pin-s, 0.2)); opacity: var(--pin-o, 0); }
@media (min-aspect-ratio: 1/1) { .story-pin-in { width: min(26vw, 44vh); } }
.story-pin-in img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: brightness(0.14) saturate(0) drop-shadow(0 0 2px #7FB3D5) drop-shadow(0 0 16px #7FB3D5); transition: filter 0.2s; }
.story-pool { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(closest-side, rgba(127, 179, 213, 0.75), transparent 72%); opacity: 0.6; }
.story-ring { position: absolute; inset: 8%; border-radius: 50%; border: 2px solid #9CC6E2; box-shadow: 0 0 24px #7FB3D5; opacity: 0; }
.found .story-pin-in img { filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.6)); animation: pop 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
.found .story-ring { animation: ring 1s cubic-bezier(0.1, 0.6, 0.3, 1) forwards; }
.found .story-pool { opacity: 1; }
.story-flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(50% 40% at 50% 45%, rgba(240, 248, 255, 0.9), rgba(127, 179, 213, 0.4) 50%, transparent 80%); opacity: 0; }
.found .story-flash { animation: flash-full 0.8s ease-out both; }
@keyframes flash-full { 12% { opacity: 1; } 100% { opacity: 0; } }
.story-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 9, 0.96) 0%, rgba(8, 10, 9, 0.86) 24%, rgba(8, 10, 9, 0.3) 38%, transparent 48%, transparent 62%, rgba(8, 10, 9, 0.7) 78%, rgba(8, 10, 9, 0.96) 100%); }
.story-caps { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); top: calc(64px + 3svh); display: grid; }
.story-caps li { grid-area: 1 / 1; opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.3s ease; }
.story-caps li.on { opacity: 1; transform: none; transition: opacity 0.5s var(--ease) 0.2s, transform 0.6s var(--ease) 0.2s; }
.story-caps h3 { font-size: clamp(34px, 9.4vw, 60px); }
.story-caps p { max-width: 26em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
.story-hud { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: max(26px, 4svh); display: grid; }
.story-hud > div { grid-area: 1 / 1; display: flex; flex-direction: column; opacity: 0; transform: translateY(-6px); transition: opacity 0.2s ease, transform 0.25s ease; }
.story-hud > div.on { opacity: 1; transform: none; transition: opacity 0.45s var(--ease) 0.18s, transform 0.5s var(--ease) 0.18s; }
.story-hud span { font-size: 14px; color: var(--text-2); }
.story-hud strong { font-size: clamp(64px, 17vw, 112px); line-height: 0.96; font-weight: 600; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.story-hud strong b { font-weight: 600; }
.story-hud strong small { font-size: 0.3em; letter-spacing: -0.02em; color: var(--text-2); font-weight: 500; }
.story-hud em { font-style: normal; font-size: 16px; color: var(--text-2); margin-top: 6px; font-variant-numeric: tabular-nums; }
.hud-c strong { font-size: clamp(44px, 12vw, 80px); }
.chip-rare { align-self: flex-start; font-size: 13px !important; font-weight: 600; color: #7FB3D5 !important; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(127, 179, 213, 0.55); background: rgba(127, 179, 213, 0.12); margin-bottom: 8px; }
.story-rail { position: absolute; z-index: 4; right: var(--gutter); bottom: max(34px, 5svh); display: flex; flex-direction: column; gap: 8px; }
.story-rail i { position: relative; width: 3px; height: 32px; border-radius: 3px; background: rgba(243, 241, 234, 0.18); overflow: hidden; }
.story-rail i::after { content: ''; position: absolute; inset: 0; background: var(--moss); transform: scaleY(var(--f, 0)); transform-origin: top; }
@media (min-width: 900px) {
  .story-static { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow: visible; margin-top: 48px; }
  .story-caps { top: auto; bottom: 7vh; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); right: auto; width: 520px; }
  .story-caps h3 { font-size: clamp(48px, 4.6vw, 72px); }
  .story-caps p { font-size: 20px; }
  .story-hud { left: auto; right: max(calc(var(--gutter) + 40px), calc((100vw - var(--max)) / 2 + 40px)); bottom: auto; top: calc(72px + 5vh); text-align: right; }
  .story-hud > div { align-items: flex-end; }
  .chip-rare { align-self: flex-end; }
  .story-hud strong { font-size: clamp(72px, 7vw, 120px); }
  .story-shade { background: linear-gradient(180deg, rgba(8, 10, 9, 0.8) 0%, rgba(8, 10, 9, 0.2) 34%, transparent 50%, rgba(8, 10, 9, 0.6) 78%, rgba(8, 10, 9, 0.95) 100%), linear-gradient(90deg, rgba(8, 10, 9, 0.5), transparent 40%); }
  .story-rail { right: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: auto; top: calc(72px + 5vh + 8px); }
}

/* Journal ------------------------------------------------------------ */
.journal { padding-top: var(--section); overflow: hidden; }
.jwall { margin-top: 44px; display: grid; gap: 4px; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.jrow { overflow: hidden; padding: 10px 0 30px; margin-bottom: -30px; }
.jrow-in { display: flex; width: max-content; animation: slide var(--dur, 90s) linear infinite; animation-play-state: var(--play, running); }
.jrow.rev .jrow-in { animation-direction: reverse; }
.jrow:hover .jrow-in, .jrow.hold .jrow-in { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.jpin { position: relative; flex: none; width: clamp(118px, 32vw, 150px); aspect-ratio: 1; margin: 0 4px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.jpin::before { content: ''; position: absolute; inset: 2%; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent 76%); opacity: 0.34; transition: opacity 0.4s, transform 0.5s var(--ease); }
.jpin img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.55)); transition: transform 0.5s var(--ease); }
.jtag { position: absolute; left: 50%; bottom: -18px; transform: translate(-50%, 6px); display: flex; flex-direction: column; align-items: center; white-space: nowrap; padding: 5px 11px; border-radius: 12px; background: rgba(14, 16, 15, 0.86); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.3s, transform 0.4s var(--ease); pointer-events: none; z-index: 2; }
.jtag b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.jtag i { font-style: normal; font-size: 12px; color: var(--c); line-height: 1.25; }
.jpin:hover img, .jpin.lift img, .jpin:focus-visible img { transform: translateY(-8px) scale(1.08); }
.jpin:hover::before, .jpin.lift::before { opacity: 0.75; transform: scale(1.1); }
.jpin:hover .jtag, .jpin.lift .jtag, .jpin:focus-visible .jtag { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .jpin { width: clamp(180px, 14vw, 216px); margin: 0 8px; } .jwall { margin-top: 64px; } }
.odds { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.odds-title { font-size: 14px; color: var(--muted); }
.odds ul { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
.odds li { display: flex; flex-direction: column; gap: 0; padding-left: 14px; position: relative; }
.odds li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.odds li span { font-size: 14px; color: var(--text-2); font-weight: 500; }
.odds li b { font-size: 26px; color: var(--text); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.odds-note { margin-top: 18px; font-size: 15px; color: var(--text-2); }
@media (min-width: 900px) { .odds { display: grid; grid-template-columns: 180px 1fr; gap: 12px 40px; align-items: start; } .odds ul { margin-top: 0; grid-template-columns: repeat(6, 1fr); } .odds-note { grid-column: 2; margin-top: 6px; } }

/* Mythics ------------------------------------------------------------ */
/* A dark stage: six big, sharp pins (1024px masters, srcset), each over a
   soft glow in the hue of its own art. Pins are never scaled by transforms
   at rest, so WebKit rasterizes them at full resolution. */
.myx { position: relative; margin-top: var(--section); padding: 72px 0 64px; isolation: isolate; background: #050606; overflow: clip; }
.myx-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(1.5px 1.5px at 12% 8%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 72% 5%, rgba(255, 255, 255, 0.45), transparent),
  radial-gradient(1.2px 1.2px at 88% 28%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 22% 42%, rgba(255, 255, 255, 0.35), transparent),
  radial-gradient(1.4px 1.4px at 54% 22%, rgba(255, 255, 255, 0.3), transparent), radial-gradient(1px 1px at 6% 66%, rgba(255, 255, 255, 0.35), transparent),
  radial-gradient(1px 1px at 94% 60%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1.2px 1.2px at 40% 84%, rgba(255, 255, 255, 0.3), transparent),
  radial-gradient(1px 1px at 66% 74%, rgba(255, 255, 255, 0.3), transparent),
  radial-gradient(70% 30% at 50% 0%, rgba(240, 169, 143, 0.16), transparent 70%),
  linear-gradient(180deg, var(--bg), transparent 6%, transparent 94%, var(--bg)); }
.myx-eb { color: var(--ember) !important; }
.myx .head { margin-inline: auto; }
.myx .head .lede { margin-top: 16px; }
.myx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 1400px; margin: 56px auto 0; padding: 0 var(--gutter); }
.myx-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.myx-art { position: relative; width: min(76vw, 460px); aspect-ratio: 1; }
.myx-art::before { content: ''; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(closest-side, var(--g), transparent 74%); opacity: 0.52; transition: opacity 0.8s var(--ease); }
.myx-art::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -2%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent); }
.myx-item:hover .myx-art::before { opacity: 0.6; }
.myx-art img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.6)); }
.myx-item h3 { margin-top: 18px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 600; }
.myx-item p { margin-top: 8px; max-width: 24em; font-size: 17px; line-height: 1.5; color: var(--text-2); text-wrap: balance; }
.myx-odds { margin-top: 72px; text-align: left; }
.myx-odds li:last-child b { color: var(--ember); }
@media (min-width: 900px) {
  .myx { padding: 120px 0 88px; }
  .myx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; margin-top: 80px; }
  .myx-art { width: 100%; max-width: 460px; }
  /* An editorial stagger: the middle column sits lower (whole pixels, so no resampling). */
  .myx-grid { gap: 72px 48px; padding-bottom: 64px; }
  .myx-item:nth-child(3n + 2) { translate: 0 64px; }
  .myx-odds { margin-top: 72px; }
}

/* Worlds ------------------------------------------------------------ */
/* One world per type. With motion allowed, a tall track pins a full-screen
   stage and the row of cards slides sideways as you scroll down (home.js).
   Otherwise it is a plain horizontal snap scroller. */
.wx { padding-top: var(--section); }
.wx-track { margin-top: 32px; }
.wx-stage { position: relative; }
.wx-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 0 var(--gutter) 8px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.wx-row::-webkit-scrollbar { display: none; }
.wx-card { position: relative; flex: none; width: 82vw; height: min(70svh, 600px); border-radius: 28px; overflow: hidden; isolation: isolate; scroll-snap-align: start; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.wx-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.wx-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.wx-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 9, 0.25) 0%, rgba(8, 10, 9, 0) 16%, rgba(8, 10, 9, 0) 52%, rgba(8, 10, 9, 0.7) 76%, rgba(8, 10, 9, 0.94) 100%); }
.wx-copy { position: absolute; left: 22px; right: 22px; bottom: 24px; }
.wx-type { display: inline-block; font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: rgba(8, 10, 9, 0.5); border: 1px solid rgba(243, 241, 234, 0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wx-copy h3 { margin-top: 12px; font-size: clamp(28px, 7.4vw, 40px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; text-wrap: balance; }
.wx-copy p { margin-top: 8px; min-height: calc(2 * 1.45em); max-width: 26em; font-size: 16px; line-height: 1.45; color: rgba(243, 241, 234, 0.78); text-wrap: pretty; }
.wx-bar, .wx-label { display: none; }
.wx .lengths { margin-top: 28px; }
@media (min-width: 900px) {
  .wx-row { gap: 20px; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .wx-card { width: min(560px, 44vw); height: min(720px, 100svh - 150px); border-radius: 32px; }
  .wx-copy { left: 32px; right: 32px; bottom: 32px; }
  .wx-copy p { font-size: 17px; }
}
/* The scroll-driven version. */
.js-wx .wx-track { height: calc(var(--n) * 60svh); }
.js-wx .wx-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-top: 56px; }
.js-wx .wx-row { width: max-content; overflow: visible; scroll-snap-type: none; padding-bottom: 0; transform: translate3d(var(--x, 0px), 0, 0); will-change: transform; }
.js-wx .wx-art img { width: 112%; max-width: none; margin-left: -6%; transform: translate3d(var(--px, 0%), 0, 0); will-change: transform; }
.js-wx .wx-bar { display: block; position: absolute; left: 50%; bottom: max(22px, 3.4svh); width: 120px; height: 3px; margin-left: -60px; border-radius: 3px; background: rgba(243, 241, 234, 0.25); overflow: hidden; transition: opacity 0.3s; }
.js-wx .wx-bar.off { opacity: 0; }
.js-wx .wx-label { display: flex; position: absolute; left: 0; right: 0; top: calc(64px + 2.4svh); justify-content: space-between; gap: 16px; font-size: 15px; font-weight: 500; color: var(--text-2); }
.js-wx .wx-label b { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .js-wx .wx-label { top: calc(64px + 1.4svh); } }
.js-wx .wx-bar i { position: absolute; inset: 0; background: var(--text); border-radius: 3px; transform-origin: left; transform: scaleX(var(--p, 0)); }
.js-wx .wx .lengths { margin-top: 8px; }

.lengths { margin-top: 26px; font-size: 17px; color: var(--text-2); text-wrap: balance; }
.lengths b { color: var(--text); font-weight: 600; }
@media (min-width: 900px) { .lengths { font-size: 18px; } }

/* Tracker ------------------------------------------------------------ */
.tracker { padding-top: var(--section); }
.tracker-grid { display: grid; gap: 44px; align-items: center; }
.tracker-copy h2 { margin-top: 12px; }
.tracker-copy .lede { margin-top: 14px; }
.tracker-art { position: relative; order: 2; display: flex; justify-content: center; isolation: isolate; }
.tracker-art::before { content: ''; position: absolute; inset: 10% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(143, 214, 148, 0.16), transparent); }
.tracker-art .device { width: min(70vw, 300px); }
@media (max-width: 899px) { .tracker-art { order: 0; max-height: 470px; overflow: hidden; align-items: flex-start; -webkit-mask: linear-gradient(180deg, #000 72%, transparent); mask: linear-gradient(180deg, #000 72%, transparent); } .tracker-art::before { display: none; } }
.specs { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.specs div { padding-top: 14px; border-top: 1px solid var(--line); }
.specs dt { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.specs dd { font-size: 14px; color: var(--text-2); margin-top: 3px; line-height: 1.4; }
@media (min-width: 900px) { .tracker-grid { grid-template-columns: 0.9fr 1.1fr; gap: 96px; } .tracker-art { order: 0; } .tracker-art .device { width: min(24vw, 340px); } .specs { grid-template-columns: repeat(3, 1fr); gap: 28px 28px; margin-top: 44px; } .specs dt { font-size: 22px; } .specs dd { font-size: 16px; } }

/* Sharing ------------------------------------------------------------ */
/* A sticky iPhone and four steps. As a step becomes active (home.js), the
   phone's screen crossfades to it. Phones: the iPhone pins near the top and
   the steps scroll up underneath it. Mock screens are sized in cqw. */
.shx { padding-top: var(--section); }
.shx-grid { position: relative; }
.shx-phone-col { position: sticky; top: 56px; z-index: 2; display: flex; justify-content: center; margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) 28px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) calc(100% - 28px), rgba(8, 10, 9, 0) 100%); }
.shx-phone { height: min(53svh, 500px); width: auto; margin: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 50px 100px -30px rgba(0, 0, 0, 0.9), 0 0 120px -20px rgba(143, 214, 148, 0.18); }
.shx-island { position: absolute; z-index: 5; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.6cqw; margin-left: -15cqw; border-radius: 5cqw; background: #000; pointer-events: none; }
.shx-of { margin-left: 8px; color: var(--muted); font-variant-numeric: tabular-nums; }
.shx-screen { position: relative; width: 100%; height: 100%; border-radius: 11.4% / 5.25%; overflow: hidden; background: #000; container-type: size; }
.shx-layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease), visibility 0s 0.55s; }
.shx-layer.on { opacity: 1; visibility: visible; transition: opacity 0.55s var(--ease), visibility 0s; }
.shx-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0B0D0C; }
.shx-steps { position: relative; z-index: 1; }
.shx-step { min-height: 56svh; padding: 8px 0 48px; }
.shx-step:last-child { min-height: 44svh; padding-bottom: 32px; }
.shx-h { margin-top: 10px; font-size: clamp(32px, 8.6vw, 56px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 600; text-wrap: balance; }
.shx-step > .shx-h:first-child { margin-top: 0; }
.shx-p { margin-top: 12px; max-width: 26em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.shx-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
.shx .share-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 22px; }
.js .shx-step { opacity: 0.26; transition: opacity 0.5s var(--ease); }
.js .shx-step.on { opacity: 1; }
@media (min-width: 900px) {
  .shx { padding-top: var(--section); }
  .shx-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: clamp(48px, 6vw, 96px); max-width: 1180px; }
  .shx-phone-col { top: calc(50svh - min(38svh, 380px)); align-self: start; margin: 0; padding: 0; background: none; justify-content: flex-end; }
  .shx-phone { height: min(76svh, 760px); }
  .shx-steps { padding: 0; }
  .shx-step { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
  .shx-step:last-child { min-height: 92svh; }
  .shx-h { font-size: clamp(40px, 4.2vw, 60px); }
}

/* Messages */
.shx-msg { background: #000; font-size: 4cqw; line-height: 1.3; color: #fff; }
.msg-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; padding: 15cqw 0 3cqw; background: rgba(28, 28, 30, 0.94); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.msg-top b { font-size: 3.4cqw; font-weight: 500; }
.msg-av { width: 12cqw; height: 12cqw; border-radius: 50%; display: grid; place-items: center; font-size: 5.4cqw; font-weight: 600; background: linear-gradient(180deg, #A7A9B0, #7C7F87); }
.msg-back { position: absolute; left: 5cqw; top: 19cqw; width: 3cqw; height: 3cqw; border-left: 2px solid #0A84FF; border-bottom: 2px solid #0A84FF; transform: rotate(45deg); }
.msg-body { display: flex; flex-direction: column; gap: 1.8cqw; padding: 3cqw 4cqw; }
.msg-day { align-self: center; font-size: 2.9cqw; color: rgba(255, 255, 255, 0.5); margin-bottom: 1cqw; }
.bub { max-width: 74%; padding: 2.2cqw 3.6cqw; border-radius: 5cqw; }
.bub.me { align-self: flex-end; background: #0A84FF; border-bottom-right-radius: 1.6cqw; }
.bub.them { align-self: flex-start; background: #262628; border-bottom-left-radius: 1.6cqw; }
.stk img { width: 100%; height: auto; filter: drop-shadow(0 1.4cqw 1.8cqw rgba(0, 0, 0, 0.55)); }
.s-a { align-self: flex-end; width: 36cqw; margin: -3cqw 3cqw -3cqw 0; transform: rotate(6deg); }
.has-stk { position: relative; margin-top: 2cqw; margin-bottom: 4cqw; }
.s-b { position: absolute; right: -3cqw; top: -10cqw; width: 16cqw; transform: rotate(8deg); }
.msg-drawer { position: absolute; left: 0; right: 0; bottom: 0; padding: 3cqw 4cqw 7cqw; border-radius: 5cqw 5cqw 0 0; background: #1C1C1E; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08); }
.msg-drawer p { font-size: 3.2cqw; font-weight: 600; color: rgba(255, 255, 255, 0.62); margin-bottom: 2cqw; }
.msg-drawer div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; }
.msg-drawer img { width: 100%; height: auto; }

/* Story: the route sticker on the runner's own photo */
.shx-story { background: #0B0D0C; }
.st-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shx-story::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 46%, rgba(0, 0, 0, 0.42) 100%); }
.st-bars { position: absolute; z-index: 1; left: 4cqw; right: 4cqw; top: 13cqw; display: flex; gap: 1.2cqw; }
.st-bars i { flex: 1; height: 0.8cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.4); }
.st-bars i:first-child { background: #fff; }
.st-user { position: absolute; z-index: 1; left: 4cqw; top: 17cqw; display: flex; align-items: center; gap: 2cqw; font-size: 3.4cqw; }
.st-user b { font-weight: 600; }
.st-user em { font-style: normal; color: rgba(255, 255, 255, 0.7); }
.st-av { width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: #3B4A40; font-size: 3.2cqw; font-weight: 600; box-shadow: 0 0 0 0.5cqw rgba(255, 255, 255, 0.9); }
.st-sticker { position: absolute; z-index: 1; left: 9cqw; right: 9cqw; bottom: 10cqw; display: flex; flex-direction: column; align-items: center; text-shadow: 0 0.4cqw 2.4cqw rgba(0, 0, 0, 0.45); }
.st-route { width: 62%; height: auto; max-height: 64cqw; overflow: visible; filter: drop-shadow(0 0.6cqw 2cqw rgba(0, 0, 0, 0.45)); }
.st-route path { fill: none; stroke: #fff; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.st-stats { display: flex; justify-content: center; gap: 6cqw; margin-top: 5cqw; }
.st-stats div { display: flex; flex-direction: column; align-items: center; }
.st-stats dt { font-size: 2.8cqw; font-weight: 500; color: rgba(255, 255, 255, 0.86); }
.st-stats dd { font-size: 6.4cqw; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-stats small { font-size: 3cqw; font-weight: 500; margin-left: 0.6cqw; letter-spacing: 0; }
.st-mark { display: flex; align-items: center; gap: 1.4cqw; margin-top: 4cqw; font-size: 3.4cqw; font-weight: 600; letter-spacing: -0.01em; }
.st-logo { width: 3.6cqw; height: 4.6cqw; background: no-repeat center / contain url(/logo.svg); }

/* The web share page */
.shx-web { background: #0B0D0C; }
.web-bg { position: absolute; inset: 0; overflow: hidden; }
.web-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(3cqw) brightness(0.5) saturate(1.1); transform: scale(1.15); }
.shx-web::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 9, 0.5) 0%, transparent 30%, rgba(8, 10, 9, 0.6) 56%, rgba(8, 10, 9, 0.96) 76%); }
.web-head { position: absolute; z-index: 1; left: 5cqw; right: 5cqw; top: 14cqw; display: flex; align-items: center; gap: 2cqw; font-size: 3.8cqw; font-weight: 600; }
.web-mark { width: 4.2cqw; height: 5.4cqw; background: no-repeat center / contain url(/logo.svg); }
.web-get { margin-left: auto; font-size: 3cqw; padding: 1.4cqw 3cqw; border-radius: 999px; background: #F3F1EA; color: #080A09; }
.web-pin { position: absolute; z-index: 1; left: 18%; right: 18%; top: 22%; }
.web-pin img { width: 100%; height: auto; filter: drop-shadow(0 4cqw 5cqw rgba(0, 0, 0, 0.6)); }
.web-meta { position: absolute; z-index: 1; left: 6cqw; right: 6cqw; bottom: 22cqw; display: flex; flex-direction: column; }
.web-meta > span:first-child { font-size: 3.4cqw; color: #7FB3D5; font-weight: 600; }
.web-meta strong { font-size: 9cqw; line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; margin-top: 0.6cqw; }
.web-meta em { font-style: normal; font-size: 3.4cqw; color: rgba(243, 241, 234, 0.72); margin-top: 1.4cqw; }
.web-btn { align-self: flex-start; margin-top: 4cqw; font-size: 3.2cqw; font-weight: 600; padding: 2.2cqw 4cqw; border-radius: 999px; background: #F3F1EA; color: #080A09; }
.web-url { position: absolute; z-index: 1; left: 5cqw; right: 5cqw; bottom: 6cqw; display: flex; justify-content: center; padding: 2.6cqw 0; border-radius: 999px; background: rgba(40, 42, 41, 0.9); font-size: 3.4cqw; color: rgba(243, 241, 234, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .shx-layer, .shx-layer.on, .js .shx-step, .myx-art::before { transition: none; }
}

/* Promise ------------------------------------------------------------ */
.promise { padding-top: var(--section); }
.promise-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.promise-ico { width: 44px; height: 44px; padding: 9px; border-radius: 14px; fill: none; stroke: var(--moss); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: rgba(143, 214, 148, 0.08); box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.2), 0 0 30px rgba(143, 214, 148, 0.18); }
.promise-in h2 { margin-top: 18px; }
.promise-in .lede { margin-top: 14px; max-width: 28em; }
.promise-in .text-link { margin-top: 20px; }

/* FAQ ------------------------------------------------------------ */
.faq { padding-top: var(--section); }
.faq-grid { display: grid; gap: 22px; }
.faq-more { margin-top: 10px; font-size: 15px; color: var(--muted); }
.faq-more a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 18px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; text-wrap: pretty; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line-2); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; background: var(--text); border-radius: 2px; translate: -50% -50%; transition: transform 0.3s var(--ease); }
.qa summary i::after { transform: rotate(90deg); }
.qa details[open] summary i::after { transform: rotate(0deg); }
.qa details > p, .qa details > div { padding: 0 44px 20px 0; color: var(--text-2); font-size: 16px; max-width: 62ch; }
.qa details > div p + p { margin-top: 12px; }
@media (min-width: 900px) { .faq-grid { grid-template-columns: 0.7fr 1.3fr; gap: 80px; align-items: start; } .faq-grid > header { position: sticky; top: 120px; } .qa summary { font-size: 18px; padding: 22px 0; } }

/* Final CTA ------------------------------------------------------------ */
.final-cta { position: relative; margin-top: var(--section); min-height: 86svh; max-height: 1000px; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.final-art { position: absolute; inset: 0; z-index: -2; }
.final-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.final-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 34% at 50% 40%, rgba(240, 169, 143, 0.16), transparent 70%), linear-gradient(180deg, var(--bg) 0%, rgba(8, 10, 9, 0.45) 16%, rgba(8, 10, 9, 0.25) 34%, rgba(8, 10, 9, 0.7) 60%, rgba(8, 10, 9, 0.96) 80%, var(--bg) 100%); }
.final-in { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 80px var(--gutter) max(64px, 8svh); text-align: center; display: flex; flex-direction: column; align-items: center; }
.final-pin { width: min(74vw, 44svh, 420px); margin-bottom: 8px; }
.final-pin img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
.float { animation: float 6s ease-in-out infinite; }
.final-in h2 { margin-top: 10px; }
.final-in .lede { margin-top: 14px; color: rgba(243, 241, 234, 0.82); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.7); }
.final-in .cta-row { justify-content: center; margin-top: 26px; }
.final-in .eyebrow { color: var(--moss-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
@media (min-width: 900px) { .final-art img { object-position: center 42%; } }
@media (prefers-reduced-motion: reduce) { .float, .jrow-in { animation: none !important; }  }

/* =================================================================== DOCS */
.doc-main { padding-top: 0; }
.doc-band { position: relative; isolation: isolate; padding-top: calc(64px + env(safe-area-inset-top) + 72px); }
.doc-band::before { content: ''; position: absolute; inset: 0 0 -80px; z-index: -1; background: var(--doc-art-m) center 30% / cover; opacity: 0.5; }
.doc-band::after { content: ''; position: absolute; inset: 0 0 -80px; z-index: -1; background: linear-gradient(180deg, rgba(8, 10, 9, 0.7) 0%, rgba(8, 10, 9, 0.35) 30%, rgba(8, 10, 9, 0.85) 70%, var(--bg) 100%); }
@media (min-width: 900px) { .doc-band::before { background-image: var(--doc-art); background-position: center 40%; } .doc-band::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(8, 10, 9, 0.82) 42%, rgba(8, 10, 9, 0.25) 100%), linear-gradient(180deg, rgba(8, 10, 9, 0.6) 0%, transparent 30%, transparent 55%, var(--bg) 100%); } }
.doc-head { position: relative; padding-bottom: 48px; }
.doc-pin { position: absolute; right: var(--gutter); top: -40px; width: min(30vw, 150px); height: auto; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.6)); animation: float 6s ease-in-out infinite; }
@media (min-width: 900px) { .doc-pin { width: 300px; top: -30px; right: calc(var(--gutter) + 40px); } }
@media (prefers-reduced-motion: reduce) { .doc-pin { animation: none; } }
.doc-head h1 { margin-top: 14px; max-width: 16ch; }
.doc-date { margin-top: 18px; font-size: 15px; color: var(--muted); }
.doc-intro { margin-top: 28px; }
.doc-body { position: relative; display: grid; gap: 40px; padding-bottom: 120px; padding-top: 48px; }
.doc-rule { position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.doc-date { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.doc-date span { white-space: nowrap; }
.toc { display: none; padding: 20px 22px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.toc-title { font-size: 14px; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.toc a { display: flex; gap: 12px; padding: 6px 0; font-size: 15px; color: var(--text-2); line-height: 1.35; transition: color 0.2s; }
.toc a span { color: var(--faint); font-variant-numeric: tabular-nums; min-width: 1.4em; }
.toc a:hover, .toc a.here { color: var(--text); }
.toc a.here span { color: var(--moss); }
.prose { max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.prose section { padding-top: 12px; margin-bottom: 44px; scroll-margin-top: 96px; }
.prose h2 { display: flex; align-items: first baseline; gap: 14px; font-size: 26px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: var(--text); margin-bottom: 18px; }
.prose h2 .n { font-size: 15px; color: var(--moss); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.prose p + p, .prose p + ul, .prose ul + p, .prose p + ol, .prose ol + p, .prose dl + p, .prose p + dl { margin-top: 16px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul > li, .prose ol:not(.steps) > li { position: relative; padding-left: 22px; margin-top: 10px; }
.prose ul > li::before { content: ''; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--moss); opacity: 0.8; }
.prose ol:not(.steps) { counter-reset: n; }
.prose ol:not(.steps) > li { counter-increment: n; padding-left: 28px; }
.prose ol:not(.steps) > li::before { content: counter(n) '.'; position: absolute; left: 0; color: var(--moss); font-variant-numeric: tabular-nums; }
.prose .checks li::before { width: 12px; height: 7px; border-radius: 0; background: none; border-left: 2px solid var(--moss); border-bottom: 2px solid var(--moss); transform: rotate(-45deg); top: 0.5em; left: 2px; }
.prose .checks li { padding-left: 28px; }
.deflist { display: grid; }
.deflist > div { padding: 16px 0; border-top: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 1px solid var(--line); }
.deflist dt { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.callout.warn { background: rgba(232, 205, 149, 0.06); box-shadow: inset 0 0 0 1px rgba(232, 205, 149, 0.22); }
.callout.note { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text-2); }
.callout { padding: 16px 20px; border-radius: 16px; background: rgba(143, 214, 148, 0.07); box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.2); color: var(--text); }
.steps { display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.step-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--text); background: var(--glass); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.steps li div { padding-top: 2px; }
.prose .qa summary { font-size: 17px; color: var(--text); padding: 18px 0; }
.prose .qa details > div { padding: 0 44px 20px 0; font-size: 16px; }
.contact-card { position: relative; padding: 24px 22px; border-radius: 22px; background: radial-gradient(100% 80% at 0% 0%, rgba(143, 214, 148, 0.1), transparent 60%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 16px; }
.contact-pin { position: absolute; right: 14px; top: -26px; width: 80px; height: auto; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); }
.contact-title { min-height: 44px; padding-right: 58px; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.contact-card p:not(.contact-title) { color: var(--text-2); font-size: 15px; margin-top: 8px; }
.contact-card .button { margin-top: 18px; width: 100%; }
.contact-card .contact-note { font-size: 13px !important; color: var(--muted) !important; }
@media (min-width: 1000px) {
  .doc-band { padding-top: 200px; }
  .doc-body { grid-template-columns: 280px minmax(0, 1fr); gap: 100px; }
  .prose { max-width: 74ch; }
  .toc a { font-size: 14px; }
  .toc { display: block; }
  .toc-m { display: none; }
  .doc-aside { position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 128px); overflow: auto; scrollbar-width: none; }
  .toc { background: none; box-shadow: none; padding: 0; }
  .toc a { padding: 5px 0; font-size: 15px; line-height: 1.4; }
}

.toc-m { border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.toc-m summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; font-weight: 600; font-size: 16px; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m summary i { width: 9px; height: 9px; border-right: 1.6px solid var(--text-2); border-bottom: 1.6px solid var(--text-2); transform: rotate(45deg) translateY(-3px); transition: transform 0.3s var(--ease); }
.toc-m[open] summary i { transform: rotate(-135deg); }
.toc-m ol { padding: 0 20px 16px; }
.toc-m a { display: flex; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--text-2); }
.toc-m a span { color: var(--faint); min-width: 1.4em; font-variant-numeric: tabular-nums; }

/* ==================================================================== 404 */
.lost-main { position: relative; min-height: calc(100svh - 64px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.lost-art { position: absolute; inset: 0; z-index: -1; }
.lost-art img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; opacity: 0.9; }
.lost-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 9, 0.3) 0%, rgba(8, 10, 9, 0.55) 40%, rgba(8, 10, 9, 0.95) 62%, var(--bg) 100%); }
.lost-in { padding-top: 34vh; padding-bottom: 88px; }
.lost-in h1 { margin-top: 14px; max-width: 14ch; }
.lost-in .lede { margin-top: 20px; max-width: 26em; }
@media (min-width: 900px) {
  .lost-main { align-items: center; }
  .lost-art::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(8, 10, 9, 0.94) 50%, rgba(8, 10, 9, 0.2) 76%), linear-gradient(0deg, var(--bg), transparent 30%); }
  .lost-in { padding-top: 120px; }
}

/* ================================================================= SHARE */
.share .site-header .pill { box-shadow: 0 8px 30px -10px rgba(143, 214, 148, 0.5); }
.share-side { padding: 28px var(--gutter) 0; display: flex; flex-direction: column; gap: 36px; }
.meta h1 { font-size: 34px; line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; margin-top: 8px; }
.meta .eyebrow { color: var(--text-2); }
.extra { display: flex; gap: 32px; margin-top: 20px; }
.extra dt, .stats dt { font-size: 13px; line-height: 18px; color: var(--muted); font-weight: 500; }
.extra dd { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.extra small, .stats small { font-size: 0.6em; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.invite { padding: 26px 22px; border-radius: 26px; background: radial-gradient(100% 70% at 0% 0%, rgba(143, 214, 148, 0.12), transparent 62%), linear-gradient(180deg, rgba(27, 31, 29, 0.85), rgba(14, 16, 15, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.invite-title { text-wrap: balance; font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; margin-top: 8px; }
.invite-copy { color: var(--text-2); font-size: 16px; margin-top: 12px; }
.invite .cta-row { margin-top: 24px; gap: 14px 24px; }
.invite .store-badge img { width: 150px; }

/* Run */
.run-hero { position: relative; overflow: hidden; height: min(80svh, 740px); min-height: 540px; background: radial-gradient(90% 60% at 50% 30%, #121814 0%, var(--bg) 70%); }
.run .map { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; }
.run-hero:not([data-phase='loading']) .map { opacity: 1; }
.run .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 9, 0.95) 0%, rgba(8, 10, 9, 0.6) 14%, rgba(8, 10, 9, 0) 26%), linear-gradient(0deg, var(--bg) 0%, var(--bg) 34%, rgba(8, 10, 9, 0.7) 48%, rgba(8, 10, 9, 0) 62%); }
.run .glow { display: none; }
.hud { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 26px; pointer-events: none; }
.hud .eyebrow { color: var(--text-2); }
.big { display: flex; align-items: baseline; gap: 8px; font-size: 88px; line-height: 0.95; font-weight: 600; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; margin-top: 4px; }
.big .unit { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-2); }
.stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 28px; row-gap: 14px; margin-top: 18px; }
.stats:has(> div:nth-child(4)) { grid-template-columns: repeat(2, auto); column-gap: 44px; }
@media (min-width: 560px) { .stats:has(> div:nth-child(4)) { grid-template-columns: repeat(4, auto); column-gap: 32px; } }
.stats dd { font-size: 23px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 1px; }
.replay { position: absolute; right: var(--gutter); top: calc(env(safe-area-inset-top) + 80px); z-index: 5; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 999px; color: var(--text); background: rgba(14, 16, 15, 0.6); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s; }
.replay svg { width: 18px; height: 18px; }
.replay.show { opacity: 1; transform: none; }
.replay:hover { background: rgba(40, 44, 42, 0.75); }
.no-route .run-hero { height: min(64svh, 600px); min-height: 460px; }
.no-route .glow { display: block; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 42%, rgba(143, 214, 148, 0.16), transparent 70%), url('/worlds/hollowmere-1200.webp') center 30% / cover no-repeat; opacity: 0.85; }
.no-route .scrim { background: linear-gradient(0deg, var(--bg) 0%, rgba(8, 10, 9, 0.9) 46%, rgba(8, 10, 9, 0.35) 70%, rgba(8, 10, 9, 0.6) 100%); }
.no-route .site-header.overlay:not(.scrolled) { background: linear-gradient(rgba(8, 10, 9, 0.7), transparent); }
.no-route .hud .eyebrow { color: var(--text); }
.no-route .map, .no-route .replay, .no-route .credit { display: none; }
.credit { position: absolute; right: var(--gutter); bottom: 4px; font-size: 10px; color: rgba(243, 241, 234, 0.34); z-index: 4; }
.maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(14, 16, 15, 0.6) !important; color: var(--faint); }
.maplibregl-ctrl-attrib a { color: var(--muted) !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1) opacity(0.5); }

/* Find */
.find .scene { position: fixed; inset: 0; z-index: -2; background: var(--scene) center 30% / cover no-repeat; transform: scale(1.12); filter: blur(28px) saturate(1.2) brightness(0.55); }
.find .scene::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 32%, transparent 0%, rgba(8, 10, 9, 0.35) 70%), linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0.1) 22%, rgba(8, 10, 9, 0.55) 50%, rgba(8, 10, 9, 0.95) 68%, var(--bg) 100%); }
.find main { position: relative; }
.find .below { position: relative; background: var(--bg); }
.find .share-layout { position: relative; }
.find .site-footer { background: var(--bg); }
.find .scene-fade { position: relative; z-index: -1; height: 360px; margin-top: -360px; background: linear-gradient(180deg, transparent, var(--bg)); pointer-events: none; }
.stage { position: relative; height: min(62svh, 560px); min-height: 460px; display: grid; place-items: center; perspective: 1100px; padding-top: 56px; }
.find .share-side { padding-top: 8px; }
.find .meta h1 { font-size: 46px; letter-spacing: -0.04em; margin-top: 6px; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.chip { font-size: 13px; line-height: 16px; font-weight: 600; padding: 7px 12px; border-radius: 999px; color: var(--text-2); background: var(--glass); border: 1px solid var(--line-2); }
.chip.rarity { color: var(--rarity); border-color: var(--rarity-line); background: var(--rarity-fill); box-shadow: 0 0 18px -6px var(--rarity); }
.chip.rarity.is-fabled { color: var(--fabled); border-color: rgba(111, 195, 203, 0.55); background: rgba(111, 195, 203, 0.1); box-shadow: 0 0 18px -6px var(--fabled); }
.chip-note { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.flavor { font-size: 18px; line-height: 1.55; color: var(--text-2); margin-top: 16px; max-width: 38ch; }
.journal-no { font-size: 15px; color: var(--muted); margin-top: 12px; }

/* Share: below the fold */
.explain { padding-top: var(--section); }
.explain h2 { margin-top: 12px; }
.explain-grid { margin-top: 40px; display: grid; gap: 14px; }
.explain-grid li { padding: 14px 14px 24px; border-radius: 24px; background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: inset 0 0 0 1px var(--line); }
.explain-art { aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0B0E0C; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.explain-art > img { width: 100%; height: 100%; object-fit: cover; }
.screen-art { background: radial-gradient(60% 60% at 50% 40%, rgba(143, 214, 148, 0.12), transparent 70%), #0B0E0C; }
.explain-art.screen-art > img { width: 62%; height: auto; object-fit: contain; object-position: top; margin-top: 8%; align-self: start; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 5px #1B1F1D, 0 20px 40px rgba(0, 0, 0, 0.6); }
.pin-art > img { width: auto; height: 84%; object-fit: contain; }
.world-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85) brightness(0.8); }

.pin-art { background: radial-gradient(60% 60% at 50% 50%, rgba(143, 214, 148, 0.14), transparent 70%), #0B0E0C; }
.pin-art img { height: 84%; width: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.6)); }
.explain-grid h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 20px 8px 0; }
.explain-grid p { color: var(--text-2); font-size: 16px; margin: 6px 8px 0; }
.kin { padding-top: 120px; }
.kin h2 { margin-top: 12px; }
.kin-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.kin-grid li { text-align: center; display: flex; flex-direction: column; align-items: center; }
.kin-grid img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); }
.kin-grid span { font-size: 14px; font-weight: 600; margin-top: 8px; }
.kin-grid small { font-size: 13px; font-weight: 500; }
.share .final-cta { margin-top: 120px; }

@media (min-width: 900px) {
  .share-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 96px var(--gutter) 0; align-items: center; }
  .share-side { padding: 0; }
  .find .share-layout { z-index: 1; }
  .run-hero { height: calc(100vh - 150px); min-height: 580px; max-height: 860px; border-radius: 32px; }
  .run .scrim { background: linear-gradient(0deg, rgba(8, 10, 9, 0.95) 0%, rgba(8, 10, 9, 0.75) 22%, rgba(8, 10, 9, 0) 44%); }
  .hud { left: 36px; bottom: 34px; }
  .no-route .run-hero { height: calc(100vh - 150px); max-height: 760px; }
  .big { font-size: 128px; }
  .big .unit { font-size: 36px; }
  .stats { column-gap: 44px; margin-top: 22px; }
  .stats dd { font-size: 28px; line-height: 34px; }
  .replay { right: 24px; top: 24px; }
  .credit { bottom: 12px; right: 20px; }
  .run-hero { outline: 1px solid var(--line-2); outline-offset: -1px; }
  .meta h1 { font-size: 48px; }
  .payoff { font-size: 17px; }
  .invite-title { font-size: 30px; }
  .find .scene::after { background: linear-gradient(90deg, rgba(8, 10, 9, 0.1) 0%, rgba(8, 10, 9, 0.25) 45%, rgba(8, 10, 9, 0.85) 70%, rgba(8, 10, 9, 0.94) 100%), linear-gradient(180deg, rgba(8, 10, 9, 0.5) 0%, transparent 20%, transparent 70%, rgba(8, 10, 9, 0.8) 100%); }
  .find .share-layout { grid-template-columns: minmax(0, 1fr) 440px; min-height: 100vh; padding-top: 72px; }
  .stage { height: calc(100vh - 150px); max-height: 820px; padding-top: 0; }
  .find .meta h1 { font-size: 60px; }
  .explain-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .kin-grid { grid-template-columns: repeat(9, 1fr); gap: 20px; }
  .kin-grid span { font-size: 14px; }
  .explain, .kin { padding-top: 160px; }
}

/* ========================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .route-line { stroke-dashoffset: 0; transition: none; }
  .js .route-glow, .js .route-end { opacity: 1; transition: none; }
  .device.stack > img { transition: none; }
  
}

/* Loops run only while on screen (home.js sets --play). */
.wall .wall-col, .pin-wall .marquee-in, .float-pin .turn { animation-play-state: var(--play, running); }
.pin-wall:hover .marquee-in { animation-play-state: paused; }

/* Share pages: a slim bar at the thumb on phones once the invite card has gone by. */
.sticky-cta { position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60; transform: translateY(140%); transition: transform 0.5s var(--ease); }
.sticky-cta.show { transform: none; }
.sticky-in { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 22px; background: rgba(21, 24, 23, 0.9); border: 1px solid var(--line-2); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.9); }
.sticky-mark .mark { width: 24px; height: 30px; display: block; }
.sticky-copy { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.sticky-copy strong { font-size: 15px; font-weight: 600; }
.sticky-copy span { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .sticky-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

.site-footer .store-badge { display: none; }
.site-footer .brand { color: var(--text); }
@media (max-width: 640px) { .prose h2 { flex-direction: column; align-items: flex-start; gap: 4px; } .prose h2 .n { transform: none; } }
.lost .button { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 10px 30px -16px rgba(143, 214, 148, 0.35); }

/* Components added along the way */
.micro { margin-top: 16px; font-size: 14px; color: var(--muted); text-wrap: pretty; }
@media (min-width: 480px) { .final-in .micro { white-space: nowrap; } }
.final-in .micro { margin-inline: auto; }
.final-in .micro { color: var(--text-2); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); }
.payoff { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--text-2); max-width: 36ch; }
.brag { margin-top: 14px; font-size: 16px; font-weight: 500; color: var(--text); text-wrap: pretty; }
.kin .lede { margin-top: 12px; }
.find .meta { padding-bottom: 8px; }
.hud-tag { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud-tag .xp { background: rgba(8, 10, 9, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.xp { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--moss); background: rgba(143, 214, 148, 0.12); box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.35); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-bug { margin-top: 14px; font-size: 15px; }
.world-chip { position: absolute; z-index: 5; left: var(--gutter); top: calc(env(safe-area-inset-top) + 76px); font-size: 13px; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: rgba(8, 10, 9, 0.5); border: 1px solid rgba(243, 241, 234, 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@media (min-width: 900px) { .world-chip { left: 24px; top: 24px; } }
.has-route .world-chip { display: none; }
.toc + .contact-card { margin-top: 48px; }
@media (max-width: 899px) { .doc-body { padding-top: 28px; } }
@media (max-width: 600px) { .prose { line-height: 1.6; } }

.invite-pin { float: right; width: 88px; height: auto; margin: -18px -10px 0 12px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.6)); }
.strike { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.strike img { width: 76px; height: auto; flex: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5)); }
.strike p { font-size: 15px; color: var(--muted); }
.contact-links { font-size: 13px !important; }
.contact-links a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }

.nav a[aria-current='page'] { color: var(--text); }
@media (min-width: 900px) {
  .run .share-layout { align-items: center; }
  .run .share-side { padding-top: 0; }
  .run.no-route .scrim { background: linear-gradient(0deg, rgba(8, 10, 9, 0.96) 0%, rgba(8, 10, 9, 0.84) 30%, rgba(8, 10, 9, 0.4) 54%, rgba(8, 10, 9, 0.1) 72%, rgba(8, 10, 9, 0.35) 100%); }
}
.run.no-route .glow { opacity: 0.7; }
.no-route .site-header.overlay:not(.scrolled) { border-bottom-color: transparent; }

.share-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .share-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.share-card { min-width: 0; }

/* v2: the find page's pin arrives like a find in the app */
.find-pin { width: min(76vw, 400px, 52svh); }
@media (min-width: 900px) { .find-pin { width: min(38vw, 540px, 62vh); } }
.stage { perspective: none; }

@media (max-width: 640px) {
  .site-footer { padding-top: 44px; }
  .footer-in { gap: 32px; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
  .footer-cols a { font-size: 13px; padding: 4px 0; }
  .footer-brand p { margin: 8px 0 0; }
  .footer-base { margin-top: 32px; }
}
@media (max-width: 699px) { .doc-pin { display: none; } }

/* v2 round 2 */
.world-chip { max-width: calc(100% - var(--gutter) * 2); white-space: normal; background: none !important; border: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; font-size: 12px !important; color: var(--text-2); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.final-in .store-badge img { width: 190px; }
.final-in .micro { font-size: 15px; }
.found .story-caps li.on { opacity: 0; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.found .story-hud .hud-c strong { font-size: clamp(52px, 14vw, 104px); }
.trail-start { fill: #F3FFF3; stroke: var(--moss); stroke-width: 4; }
@media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal * { opacity: 1 !important; transform: none !important; } }

.find .scene { filter: blur(14px) saturate(1.1) brightness(0.5); }
.odds li b { white-space: nowrap; }
@media (max-width: 899px) {
  .odds li b { font-size: 21px; }
  
  
  .js-story .story-track { height: 220svh; }
  
  .tracker-grid { gap: 32px; }
}
@media (min-width: 900px) {
  .hero-pin { width: min(38vh, 420px); }
  .hero-stage { padding-top: 96px; }
  .hero-copy { margin-top: 12px; }
  
  .promise { padding-top: 104px; }
  .faq { padding-top: 104px; }
}
@media (min-width: 900px) {
  /* When the find lands, its name takes the caption's place, bottom left. */
  .found .story-hud { top: auto; bottom: 7vh; right: auto; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); text-align: left; }
  .found .story-hud > div { align-items: flex-start; }
  .found .story-hud .chip-rare { align-self: flex-start; }
}

/* v2 round 3 */
@media (min-aspect-ratio: 1/1) { .story-scene.wide { transform: translate(calc(-50% - 70px), -50%) scale(var(--zoom, 1)); } }
@media (min-width: 900px) {
  
  
  .hero-pin { width: min(35vh, 400px); }
  .hero-copy { margin-top: 26px; }
}
@media (max-width: 899px) {
  
  .tracker { padding-top: 56px; }
  .stage { height: min(54svh, 500px); min-height: 400px; padding-top: 60px; }
}
.stats:has(> div:nth-child(4)) { grid-template-columns: 1fr 1fr; }
@media (min-width: 560px) { .stats:has(> div:nth-child(4)) { grid-template-columns: repeat(4, auto); } }
.doc-band::after { background: linear-gradient(180deg, rgba(8, 10, 9, 0.78) 0%, rgba(8, 10, 9, 0.62) 30%, rgba(8, 10, 9, 0.9) 70%, var(--bg) 100%); }
@media (min-width: 900px) { .doc-band::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(8, 10, 9, 0.82) 42%, rgba(8, 10, 9, 0.25) 100%), linear-gradient(180deg, rgba(8, 10, 9, 0.6) 0%, transparent 30%, transparent 55%, var(--bg) 100%); } }
@media (min-width: 900px) { .wx { padding-top: 88px; } }

/* v2 round 4 */
.anywhere { margin-top: 10px; font-size: 14px; color: var(--muted); }
.prose { color: rgba(243, 241, 234, 0.78); }
@media (min-width: 900px) { .odds-note { font-size: 16px; } }
.final-cta::before { background: radial-gradient(56% 30% at 50% 66%, rgba(8, 10, 9, 0.9), rgba(8, 10, 9, 0.5) 60%, transparent 100%), radial-gradient(60% 34% at 50% 40%, rgba(240, 169, 143, 0.14), transparent 70%), linear-gradient(180deg, var(--bg) 0%, rgba(8, 10, 9, 0.45) 16%, rgba(8, 10, 9, 0.25) 34%, rgba(8, 10, 9, 0.7) 60%, rgba(8, 10, 9, 0.96) 80%, var(--bg) 100%); }
.frame-art > img.map-frame { object-position: 50% 100%; }
@media (max-width: 899px) {
  :root { --section: 64px; }
  .story .story-static { padding-top: 24px; }
  
  .kin, .explain { padding-top: 64px; }
  .share .final-cta { margin-top: 64px; }
  .hero-copy { margin-top: -36px; }
  .found .story-caps li.on { opacity: 1; transform: none; }
  .found .story-caps li.on p { opacity: 0; transition: opacity 0.3s ease; }
}

/* v2 round 5 */
.flavor { text-wrap: pretty; }
.odds-note { max-width: 640px; }

@media (max-width: 899px) {
  
  
  .story-static { -webkit-mask: linear-gradient(90deg, #000 84%, transparent); mask: linear-gradient(90deg, #000 84%, transparent); }
  
}
.doc-band::before { filter: brightness(1.15); }

/* v2 round 6 */
@media (min-width: 900px) {
  .run .share-layout { align-items: start; }
  
  
  
    
  
  .story-pin-in { width: min(34vw, 56vh); }
  .kin-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
  .lost-art::after { background: linear-gradient(90deg, var(--bg) 0%, rgba(8, 10, 9, 0.94) 40%, rgba(8, 10, 9, 0.2) 82%), linear-gradient(0deg, var(--bg), transparent 30%); }
}

/* v2 round 7 */
.jpin::before { opacity: 0; }
.story-caps::before { content: ''; position: absolute; inset: -40px -60px -40px -60px; z-index: -1; background: radial-gradient(closest-side, rgba(8, 10, 9, 0.7), transparent); pointer-events: none; }
.story-caps { isolation: isolate; }
.story-caps p { color: rgba(243, 241, 234, 0.86); }
@media (max-width: 899px) {
  .found .story-caps li.on p { opacity: 1; }
  .story-pin-in { width: min(74vw, 48svh); }
}
@media (min-width: 900px) {
  
  
  
  .run .share-layout { align-items: stretch; }
  .run .share-side { justify-content: space-between; }
  .explain, .kin { padding-top: 104px; }
}

/* v2 after round 8 (checked by screenshot, not re-critiqued) */
@media (max-width: 899px) {
  body:has(.sticky-cta.show) .site-header .pill { opacity: 0; pointer-events: none; }
  .site-header .pill { transition: opacity 0.3s, background 0.2s, transform 0.2s var(--ease); }
  .share .site-footer { padding-bottom: 104px; }
}
@media (min-width: 900px) {
  .run .share-side { justify-content: center; }
  .final-in { padding-top: 128px; }
}
.story-caps::before { inset: -70px -110px -70px -70px; }
.prose { color: rgba(243, 241, 234, 0.84); }
.toc a span { color: var(--muted); }

/* ================================================================== v3 */
/* Hero caption: the find's name, in its rarity's gold. */
.hero-found { display: block; margin-top: 12px; padding: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ochre); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8); animation: rise-in 0.6s var(--ease) 0.7s both; }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; height: 100vh; min-height: 720px; max-height: 1000px; column-gap: 24px; }
  .hero-bg { grid-area: 1 / 1 / 2 / 3; }
  .hero-copy { grid-area: 1 / 1; text-align: left; align-items: flex-start; padding: 72px 0 0 max(var(--gutter), calc((100vw - var(--max)) / 2)); margin: 0; max-width: none; }
  .hero-copy h1 { max-width: 9.5em; }
  .hero-copy .display-xl { font-size: clamp(60px, 5.6vw, 88px); }
  .hero-copy .lede { max-width: 24em; margin-inline: 0; }
  .hero-copy .cta-row { justify-content: flex-start; }
  .hero-stage { grid-area: 1 / 2; padding: 72px max(var(--gutter), calc((100vw - var(--max)) / 2)) 0 0; }
  .hero-pin { width: min(40vw, 64vh, 580px); }
  .hero-bg::after { background: radial-gradient(46% 52% at 72% 50%, rgba(232, 205, 149, 0.16), transparent 70%), linear-gradient(90deg, rgba(8, 10, 9, 0.88) 0%, rgba(8, 10, 9, 0.55) 40%, rgba(8, 10, 9, 0.1) 70%), linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, transparent 18%, transparent 78%, var(--bg) 100%); }
}
@media (max-width: 899px) {
  .hero { height: 94svh; min-height: 660px; }
  .hero-copy { padding-bottom: 20px; }
}

/* v3: the invite leads with its creature */
.invite-pin { float: none; display: block; width: 180px; height: auto; margin: -8px auto 14px; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6)); }
.run .invite .eyebrow, .run .invite-title { text-align: center; }
/* v3: tracker as three strong lines */
.specs { grid-template-columns: 1fr; gap: 0; }
.specs div { display: grid; gap: 4px; padding: 18px 0; }
.specs dt { font-size: 22px !important; letter-spacing: -0.025em; }
.specs dd { font-size: 16px !important; margin: 0; color: var(--text-2); }
@media (min-width: 900px) { .specs { grid-template-columns: 1fr; } .specs dt { font-size: 26px !important; } }
/* v3: odds as a 2x3 grid on phones, clear of the header */
@media (max-width: 899px) { .odds ul { grid-template-columns: repeat(2, 1fr); gap: 14px 20px; } .odds { scroll-margin-top: 90px; padding-top: 24px; } }
/* v3: story, three screens of scroll; step 3's silhouette is lit, not black */
.js-story .story-track { height: 400svh; }
@media (max-width: 899px) { .js-story .story-track { height: 400svh; } }
.story-pin-in img { filter: grayscale(1) brightness(1.9) contrast(0.55) drop-shadow(0 0 3px #CFE3F2) drop-shadow(0 0 22px #7FB3D5) !important; opacity: 0.92; }
.found .story-pin-in img { filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.6)) !important; opacity: 1; }
.story-ring { opacity: 0.55; animation: ring-idle 1.6s ease-in-out infinite; }
@keyframes ring-idle { 50% { opacity: 0.2; transform: scale(1.06); } }
/* v3: the story's map begins under the hero */
.story-shade { background: linear-gradient(180deg, rgba(8, 10, 9, 0.7) 0%, rgba(8, 10, 9, 0.62) 22%, rgba(8, 10, 9, 0.2) 38%, transparent 48%, transparent 62%, rgba(8, 10, 9, 0.7) 78%, rgba(8, 10, 9, 0.96) 100%); }
@media (max-width: 899px) { .story-caps { top: calc(64px + 18px); } }

/* v3: Fabled crossfade is opacity only (a transformed layer rasterizes soft in WebKit) */

/* v3 round 1 */
.final-cta { min-height: 100svh; max-height: none; align-items: center; }
.final-in { padding: 88px var(--gutter) 64px; }
.final-pin { width: min(64vw, 34svh, 320px); margin-bottom: 4px; }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .hero-copy h1 { max-width: none; }
  .hero-copy .display-xl { font-size: clamp(56px, 5.1vw, 80px); }
  .hero-found { margin-top: -18px; }
  .hero-pin { width: min(36vw, 62vh, 560px); }
  .hero-bg::after { background: radial-gradient(46% 52% at 74% 48%, rgba(232, 205, 149, 0.16), transparent 70%), linear-gradient(90deg, rgba(8, 10, 9, 0.88) 0%, rgba(8, 10, 9, 0.55) 44%, rgba(8, 10, 9, 0.1) 72%), linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, transparent 18%, transparent 86%, var(--bg) 100%); }
  .story-pin-in { width: min(40vw, 66vh) !important; }
  .story-caps .step { font-size: 16px; }
  
  
}
.story-caps .step { font-size: 15px; }
@media (max-width: 899px) {
  .story-shade { background: linear-gradient(180deg, rgba(8, 10, 9, 0.95) 0%, rgba(8, 10, 9, 0.8) 26%, rgba(8, 10, 9, 0.2) 40%, transparent 48%, transparent 62%, rgba(8, 10, 9, 0.7) 78%, rgba(8, 10, 9, 0.96) 100%); }
}

.run .invite .eyebrow, .run .invite-title { text-align: left; }
.invite-pin { margin: -8px 0 6px; }
.invite-pin-cap { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.strike img { width: 120px; }
.lost-pin { width: min(46vw, 220px); height: auto; margin-bottom: 18px; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.6)); animation: float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lost-pin { animation: none; } }

/* v3 round 2 */

.qa summary i::before, .qa summary i::after { width: 10px; height: 2px; left: calc(50% - 5px); top: calc(50% - 1px); translate: none; }
.invite .eyebrow { margin-bottom: 20px; }
.lost-pin { width: min(56vw, 260px); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 40px rgba(127, 179, 213, 0.25)); }
@media (max-width: 899px) { .lost-art::after { background: linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0.7) 40%, rgba(8, 10, 9, 0.95) 62%, var(--bg) 100%); } }
.final-cta { min-height: 0; }
.final-in { padding: 96px var(--gutter) 80px; }

/* v3 round 3 */
.story-hud .arrived small { display: none; }
.story-hud .arrived b { font-size: 0.72em; letter-spacing: -0.04em; }
.chip-rare { font-size: 13px !important; }
.hud-c em { font-size: 15px; color: rgba(243, 241, 234, 0.66); }
@keyframes charge {
  0% { filter: brightness(0.6) drop-shadow(0 0 18px var(--glow)); transform: scale(0.97); }
  30% { filter: brightness(0.66) drop-shadow(0 0 22px var(--glow)); transform: scale(0.965); }
  50% { filter: brightness(1) drop-shadow(0 0 28px var(--glow)); transform: scale(1.04); }
  100% { filter: brightness(1) drop-shadow(0 22px 26px rgba(0, 0, 0, 0.55)); transform: none; }
}
.pinfx { --open: calc(var(--t0, 0ms) + 200ms); }
.pinfx-img { animation-duration: 0.6s; }
@media (min-width: 900px) {
  
  .found .story-hud { left: 50%; transform: translateX(-50%); text-align: center; right: auto; }
  .found .story-hud > div { align-items: center; }
  .found .story-hud .chip-rare { align-self: center; }
}
@media (max-width: 899px) {
  
  .lost-in { padding-top: 22vh; }
  .lost-pin { width: 170px; margin-bottom: 10px; }
}

/* v3 round 4 */

.hud { text-shadow: 0 1px 14px rgba(8, 10, 9, 0.9); }
.hud-tag { text-shadow: 0 1px 10px rgba(8, 10, 9, 1); }
@media (min-width: 900px) { .chip-rare { font-size: 15px !important; padding: 7px 14px !important; } .hud-c em { font-size: 17px; color: rgba(243, 241, 234, 0.72); } }
@media (max-width: 899px) {   .final-in { padding-top: 120px; } }

/* v3 round 5: desktop hero, the pin as the awe object */
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .hero-stage { padding-right: 0; }
  .hero-pin { width: min(48vw, 84vh, 760px); margin-right: -2vw; }
  .hero-pin .pinfx-pool { inset: -30%; }
  .hero-found { margin-top: -34px; font-size: 18px; }
  .hero-copy .display-xl { font-size: clamp(56px, 5vw, 78px); }
  .hero-bg::after { background: radial-gradient(40% 56% at 70% 50%, rgba(232, 205, 149, 0.2), transparent 70%), linear-gradient(90deg, rgba(8, 10, 9, 0.9) 0%, rgba(8, 10, 9, 0.6) 34%, rgba(8, 10, 9, 0.12) 62%), linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, transparent 18%, transparent 86%, var(--bg) 100%); }
}
/* v3 round 5: desktop run share, a full-bleed flyover with the story card floating over it */
@media (min-width: 900px) {
  .run .share-layout { display: block; position: relative; max-width: none; padding: 0; }
  .run .run-hero { height: 100vh; min-height: 680px; max-height: 1000px; border-radius: 0; outline: 0; box-shadow: none; }
  .run .hud { left: max(var(--gutter), calc((100vw - var(--max)) / 2)); bottom: 72px; }
  .run .scrim { background: linear-gradient(180deg, rgba(8, 10, 9, 0.8) 0%, transparent 18%), linear-gradient(0deg, var(--bg) 0%, rgba(8, 10, 9, 0.85) 18%, rgba(8, 10, 9, 0) 46%), linear-gradient(270deg, rgba(8, 10, 9, 0.7) 0%, transparent 42%); }
  .run .share-side { position: absolute; z-index: 6; top: 50%; transform: translateY(-50%); right: max(var(--gutter), calc((100vw - var(--max)) / 2)); width: 420px; gap: 18px; }
  .run .meta { padding: 0 4px; text-shadow: 0 1px 16px rgba(8, 10, 9, 0.9); }
  .run .invite { background: rgba(14, 16, 15, 0.78); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
  .run .replay { top: 96px; right: auto; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .run .credit { right: auto; left: 50%; transform: translateX(-50%); bottom: 12px; }
  .run .invite-pin { width: 150px; }
}

.route-preview { position: absolute; inset: 0; transition: opacity 0.9s ease; background: radial-gradient(70% 60% at 45% 45%, #101712, var(--bg) 75%); }
.route-preview svg { width: 100%; height: 100%; }
.run-hero:not([data-phase='loading']) .route-preview { opacity: 0; }
.route-preview svg { position: absolute; left: 10%; top: 10%; width: 80% !important; height: 46% !important; }
@media (min-width: 900px) { .route-preview svg { left: 6%; top: 12%; width: 46% !important; height: 58% !important; } }
.world-chip { top: calc(env(safe-area-inset-top) + 84px) !important; }
@media (min-width: 900px) { .world-chip { left: max(var(--gutter), calc((100vw - var(--max)) / 2)) !important; top: 96px !important; } .run.no-route .scrim { background: linear-gradient(0deg, var(--bg) 0%, rgba(8, 10, 9, 0.8) 20%, rgba(8, 10, 9, 0.1) 50%), linear-gradient(270deg, rgba(8, 10, 9, 0.88) 0%, rgba(8, 10, 9, 0.5) 36%, transparent 60%) !important; } }

/* v3 round 5 fixes (hero untouched) */
.story-pin-in img { filter: brightness(0.55) saturate(0.8) drop-shadow(0 0 3px #CFE3F2) drop-shadow(0 0 24px #7FB3D5) !important; opacity: 1; }
.story-ring { display: none; }
.story-hud .arrived b { font-size: 0.5em; }
@media (min-width: 900px) { .story-hud .arrived b { font-size: 0.42em; } }
.journal .head .soft { color: rgba(243, 241, 234, 0.64); }
@media (min-width: 900px) {
  .run .invite { background: rgba(20, 23, 21, 0.86); box-shadow: inset 0 0 0 1px rgba(243, 241, 234, 0.12), 0 30px 60px -20px rgba(0, 0, 0, 0.8); }
  .run .invite-pin { float: left; width: 120px; margin: 0 16px 8px -6px; }
  .run .invite-pin-cap { padding-top: 34px; min-height: 120px; margin-bottom: 0; }
  .run .invite-title { clear: both; }
  .lost-pin { width: 220px; }
}
.route-preview { background: radial-gradient(70% 60% at 45% 45%, rgba(16, 23, 18, 0.9), rgba(8, 10, 9, 0.95) 75%), radial-gradient(circle, rgba(243, 241, 234, 0.07) 1px, transparent 1.5px) 0 0 / 22px 22px, var(--bg); }
/* after v3 round 6 (checked by screenshot, not re-critiqued) */
.story-hud .arrived { line-height: 1; }
.story-hud .arrived b { font-size: 0.62em; }
.story-pin-in img { filter: brightness(0.55) saturate(0.8) drop-shadow(0 0 2px #CFE3F2) drop-shadow(0 0 9px rgba(127, 179, 213, 0.8)) !important; }
.story-pool { inset: -12%; opacity: 0.45; }
@media (min-width: 900px) {
  .chip-rare { margin-bottom: 18px !important; }
  .hud-c em { margin-top: 14px; }
  .route-preview svg { left: 8% !important; top: 16% !important; width: 44% !important; }
  .run .invite-pin { width: 136px; }
  .run .invite-pin-cap { padding-top: 40px; font-size: 15px; color: var(--text-2); }
}
.route-preview { background: radial-gradient(70% 60% at 40% 45%, rgba(16, 23, 18, 0.7), rgba(8, 10, 9, 0.9) 75%), radial-gradient(circle, rgba(243, 241, 234, 0.13) 1px, transparent 1.6px) 0 0 / 22px 22px, var(--bg); }

/* Hero v5 ---------------------------------------------------------- */
/* Full-screen painted biomes, each with its creatures living in it. A scene
   drifts slowly while it holds; the next one arrives behind a soft painted
   edge that sweeps across the frame, the old one easing back and dimming. */
.h3d { position: relative; height: 100svh; min-height: 640px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; background: var(--bg); }
.h3d-slides { position: absolute; inset: 0; z-index: -2; }
.h3d-slide { position: absolute; inset: 0; margin: 0; visibility: hidden; }
.h3d-slide picture, .h3d-slide img { display: block; width: 100%; height: 100%; }
.h3d-slide img { object-fit: cover; object-position: 50% 30%; transform-origin: 60% 40%; will-change: transform; }
.h3d-slide.is-on, .h3d-slide.is-out { visibility: visible; }
.h3d-slide.is-on { z-index: 2; }
.h3d-slide.is-out { z-index: 1; }
/* Holding: a slow painted drift, like a camera breathing. */
.h3d-slide.is-on img { animation: h3d-drift var(--hold, 9s) linear both; }
/* Arriving: revealed by a wide feathered edge moving right to left. */
.h3d-slide.is-in {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 40%, #000 60%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 40%, #000 60%, #000 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  animation: h3d-sweep 2.4s cubic-bezier(0.65, 0, 0.25, 1) both;
}
/* Leaving: eases back into the dark under the incoming scene. */
.h3d-slide.is-out img { animation: h3d-leave 2.4s cubic-bezier(0.4, 0, 0.2, 1) both; }
/* A band of light rides the sweeping edge, like mist catching the sun. */
.h3d-glint { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 244, 214, 0.16) 48%, rgba(255, 244, 214, 0.05) 54%, transparent 62%);
  background-size: 260% 100%; mix-blend-mode: screen; }
.h3d-glint.go { animation: h3d-glint 2.4s cubic-bezier(0.65, 0, 0.25, 1) both; }
@keyframes h3d-drift { from { transform: scale(1.1) translate3d(1.2%, 0.6%, 0); } to { transform: scale(1.03) translate3d(-1.2%, -0.4%, 0); } }
@keyframes h3d-sweep { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes h3d-leave { from { transform: scale(1.03) translate3d(-1.2%, -0.4%, 0); filter: brightness(1); } to { transform: scale(1.0) translate3d(-3%, 0, 0); filter: brightness(0.55) saturate(0.85); } }
@keyframes h3d-glint { 0% { opacity: 0; background-position: 0% 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; background-position: 100% 0; } }

.h3d-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 10, 9, 0.62) 0%, rgba(8, 10, 9, 0) 16%),
    linear-gradient(180deg, rgba(8, 10, 9, 0) 42%, rgba(8, 10, 9, 0.72) 64%, rgba(8, 10, 9, 0.96) 84%); }
.h3d-copy { position: relative; order: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 20px; }
.h3d-copy h1 { margin-top: 10px; font-size: clamp(36px, 10.4vw, 46px); }
.h3d .soft { color: rgba(243, 241, 234, 0.64); }
.h3d-copy .lede { margin-top: 14px; max-width: 24em; font-size: 17px; color: rgba(243, 241, 234, 0.8); }
.h3d-copy .cta-row { margin-top: 22px; justify-content: center; gap: 14px 22px; }
.h3d-copy .store-badge img { width: 156px; }
.h3d-copy .micro { margin-top: 14px; }

/* Chapters: one line per biome that fills while it holds, like stories. */
.h3d-chapters { order: 0; position: relative; z-index: 4; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; margin-bottom: 8px; }
.h3d-chapter .name { display: none; }
.h3d-chapter { padding: 10px 0; margin: -10px 0; }
.h3d-now { order: 1; position: relative; z-index: 4; margin-bottom: 16px; font-size: 13px; line-height: 18px; color: rgba(243, 241, 234, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.h3d-now b { color: var(--text); font-weight: 600; }
.h3d-chapter { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.h3d-chapter:focus-visible { outline: 2px solid var(--moss); outline-offset: 6px; border-radius: 4px; }
.h3d-chapter .bar { position: relative; height: 2px; border-radius: 2px; background: rgba(243, 241, 234, 0.2); overflow: hidden; }
.h3d-chapter .bar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: rgba(243, 241, 234, 0.92); }
.h3d-chapter.done .bar i { transform: scaleX(1); }
.h3d-chapter.is-on .bar i { animation: h3d-fill var(--hold, 9s) linear both; }
.h3d.paused .h3d-chapter.is-on .bar i, .h3d.paused .h3d-slide.is-on img { animation-play-state: paused; }
.h3d-chapter .name { font-size: 13px; line-height: 18px; color: rgba(243, 241, 234, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.6s; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.h3d-chapter .name b { font-weight: 600; }
.h3d-chapter .name .long { display: none; }
.h3d-chapter .cast { display: none; }
.h3d-chapter.is-on .name { color: var(--text); }
@keyframes h3d-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .h3d { height: 100vh; min-height: 720px; justify-content: center; }
  /* Desktop scenes put the whole cast in the right half; anchor right so a
     narrower screen trims the empty left, never a creature. */
  .h3d-slide img { object-position: 100% 45%; }
  .h3d-shade { background:
    linear-gradient(90deg, rgba(8, 10, 9, 0.88) 0%, rgba(8, 10, 9, 0.6) 26%, rgba(8, 10, 9, 0.1) 44%, rgba(8, 10, 9, 0) 54%),
    linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0) 16%, rgba(8, 10, 9, 0) 70%, rgba(8, 10, 9, 0.85) 100%); }
  .h3d-copy { align-items: flex-start; text-align: left; padding-top: 40px; padding-bottom: 0; }
  .h3d-copy h1 { font-size: clamp(44px, 4.1vw, 68px); max-width: 9.4em; }
  .h3d-copy .lede { font-size: clamp(17px, 1.3vw, 20px); margin-inline: 0; max-width: 22em; }
  .h3d-copy .cta-row { justify-content: flex-start; }
  .h3d-copy .store-badge img { width: 170px; }
  .h3d-chapters { position: absolute; left: 0; right: 0; bottom: 40px; margin: 0; gap: 16px; }
  .h3d-chapter .name { display: block; }
  .h3d-now { display: none; }
  .h3d-chapter .name .long { display: inline; }
  .h3d-chapter .name .short { display: none; }
  .h3d-chapter .cast { display: block; font-size: 12px; line-height: 16px; color: rgba(243, 241, 234, 0.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(4px); transition: opacity 0.6s, transform 0.6s var(--ease); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
  .h3d-chapter.is-on .cast { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .h3d-slide.is-on img, .h3d-slide.is-out img, .h3d-slide.is-in, .h3d-glint.go, .h3d-chapter.is-on .bar i { animation: none !important; }
  .h3d-slide.is-in { -webkit-mask-image: none; mask-image: none; }
  .h3d-slide.is-out { visibility: hidden; }
  .h3d-chapter.is-on .bar i { transform: scaleX(1); }
}

/* ================================================================== v6 */
/* Header: the pill never wraps; the lockup scales down on narrow phones. */
.pill { white-space: nowrap; flex: none; }
.brand { flex: none; min-width: 0; }
@media (max-width: 420px) { .brand-logo { height: 26px; } .header-in { gap: 12px; } .pill { font-size: 14px; padding: 8px 14px; } }

/* One type scale for section headlines; bands (privacy, questions) one step down. */
.display-l { font-size: clamp(36px, 4.4vw, 64px); letter-spacing: -0.035em; }
.display-m { font-size: clamp(30px, 3vw, 44px); letter-spacing: -0.035em; }
.head .lede { max-width: 34em; }

/* Hero: a quicker, cleaner sweep; brighter second line; chapters on the grid. */
.h3d-slide.is-in {
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 40%, #000 50%, #000 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 40%, #000 50%, #000 100%);
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
  animation: h3d-sweep 1.5s cubic-bezier(0.55, 0, 0.2, 1) both;
}
.h3d-slide.is-out img { animation: h3d-leave 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.h3d-glint { background: linear-gradient(100deg, transparent 36%, rgba(255, 244, 214, 0.14) 44%, rgba(255, 244, 214, 0.04) 50%, transparent 56%); background-size: 200% 100%; }
.h3d-glint.go { animation: h3d-glint 1.5s cubic-bezier(0.55, 0, 0.2, 1) both; }
.h3d .soft { color: rgba(243, 241, 234, 0.76); }
.h3d-copy h1 { text-shadow: 0 2px 30px rgba(8, 10, 9, 0.35); }
.h3d-now { color: rgba(243, 241, 234, 0.66); }
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .h3d-shade { background:
    linear-gradient(90deg, rgba(8, 10, 9, 0.92) 0%, rgba(8, 10, 9, 0.72) 28%, rgba(8, 10, 9, 0.18) 48%, rgba(8, 10, 9, 0) 58%),
    linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0) 16%, rgba(8, 10, 9, 0) 66%, rgba(8, 10, 9, 0.9) 100%); }
  .h3d-copy h1 { font-size: clamp(52px, 5vw, 80px); max-width: 8.6em; line-height: 0.98; }
  .h3d-copy .lede { font-size: clamp(18px, 1.35vw, 21px); max-width: 23em; color: rgba(243, 241, 234, 0.84); }
  .h3d-copy .cta-row { margin-top: 32px; }
  .h3d-chapters { width: auto; left: 0; right: 0; margin-inline: auto; bottom: 36px; gap: 20px; }
  .h3d-chapter .name { font-size: 14px; }
  .h3d-chapter .cast { font-size: 13px; color: rgba(243, 241, 234, 0.55); }
}

/* Journal: a page of the book, found pins lit, the rest waiting as shapes. */
.jbook { margin-top: 48px; padding: 22px 18px 26px; border-radius: 28px; background: linear-gradient(180deg, #111413, #0B0D0C); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.jbook-top { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px 16px; padding: 0 4px 20px; }
.jbook-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.jbook-count { font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.jbook-count b { color: var(--text); font-weight: 600; }
.jbook-bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(243, 241, 234, 0.1); overflow: hidden; }
.jbook-bar i { display: block; height: 100%; width: 11%; border-radius: 4px; background: var(--moss); box-shadow: 0 0 12px var(--moss); transition: width 1s var(--ease) 0.2s; }
.jbook.struck .jbook-bar i { width: 11.5%; }
.jgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jcell { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 4px 12px; border-radius: 18px; background: rgba(243, 241, 234, 0.035); box-shadow: inset 0 0 0 1px rgba(243, 241, 234, 0.05); text-align: center; min-width: 0; }
.jcell.d-only { display: none; }
.jcell-art { position: relative; width: 84%; aspect-ratio: 1; }
.jcell-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)); transition: transform 0.5s var(--ease), filter 0.8s var(--ease), opacity 0.8s; }
.jcell.is-found:hover .jcell-art img { transform: translateY(-4px) scale(1.05); }
.jcell-name { margin-top: 8px; font-size: 14px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jcell-meta { margin-top: 3px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; color: var(--c); }
.jcell-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
/* Not found yet: the pin's own shape, pressed into the page. */
.jcell.is-empty .jcell-art img, .jcell.is-next:not(.struck) .jcell-art img { filter: brightness(0) drop-shadow(0 1px 0 rgba(243, 241, 234, 0.14)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.6)); opacity: 0.55; }
.jcell.is-empty .jcell-name, .jcell.is-next:not(.struck) .jcell-name { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.jcell.is-empty .jcell-meta, .jcell.is-next:not(.struck) .jcell-meta { color: var(--faint); }
/* The strike: a flash of its rarity's light, a ring, then the pin in full colour. */
.jcell.is-next::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--c), 0 0 40px -6px var(--c); opacity: 0; transition: opacity 0.6s; }
.jcell.is-next.struck::after { opacity: 0.8; }
.jcell.is-next.struck { background: color-mix(in srgb, var(--c) 10%, transparent); }
.jcell.is-next.struck .jcell-art img { animation: pop 0.8s cubic-bezier(0.3, 0.7, 0.3, 1) both; }
.jcell.is-next .jcell-art::before { content: ''; position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(closest-side, var(--c), transparent 70%); opacity: 0; pointer-events: none; }
.jcell.is-next.struck .jcell-art::before { animation: jflash 1.2s ease-out both; }
@keyframes jflash { 0% { opacity: 0; transform: scale(0.5); } 25% { opacity: 0.9; } 100% { opacity: 0.25; transform: scale(1); } }
.jnew { display: none; }
@media (min-width: 700px) { .jgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .jbook { margin-top: 64px; padding: 28px 28px 32px; border-radius: 32px; }
  .jbook-top { grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 0 6px 26px; }
  .jbook-bar { grid-column: 2; grid-row: 1; }
  .jbook-count { grid-column: 3; }
  .jgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
  .jcell.d-only { display: flex; }
  .jcell { padding: 14px 6px 16px; }
}
@media (prefers-reduced-motion: reduce) { .jcell.is-next.struck .jcell-art img, .jcell.is-next.struck .jcell-art::before { animation: none; } }

/* Mythics: follows the Journal on one dark ground (no seam). */
.myx { margin-top: 0; padding-top: calc(var(--section) + 24px); background: transparent; }
.myx-sky { background:
  radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.45), transparent),
  radial-gradient(1.2px 1.2px at 88% 32%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 22% 44%, rgba(255, 255, 255, 0.35), transparent),
  radial-gradient(1.4px 1.4px at 54% 26%, rgba(255, 255, 255, 0.3), transparent), radial-gradient(1px 1px at 6% 66%, rgba(255, 255, 255, 0.35), transparent),
  radial-gradient(1px 1px at 94% 60%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1.2px 1.2px at 40% 84%, rgba(255, 255, 255, 0.3), transparent),
  radial-gradient(70% 34% at 50% 10%, rgba(240, 169, 143, 0.13), transparent 70%); }
@media (max-width: 899px) {
  .myx-grid { gap: 40px; margin-top: 40px; }
  .myx-art { width: min(68vw, 280px); }
  .myx-item h3 { margin-top: 10px; }
}

/* Worlds: the intro carries the numbers; the sticky label counts. */
.wx .head .lede { margin-top: 16px; }
@media (min-width: 900px) { .wx-card { width: min(500px, 40vw); } }
.wx-card { box-shadow: inset 0 0 0 1px var(--line), inset 0 0 80px rgba(0, 0, 0, 0.35); }

/* Tracker: the live run in front of the finished one. */
.tracker-art { min-height: 0; }
.tracker-art .device.t-back { position: absolute; width: min(56vw, 250px); transform: translate(38%, 6%) rotate(4deg); opacity: 0.5; filter: saturate(0.8); }
.tracker-art .device.t-front { position: relative; width: min(64vw, 290px); transform: translateX(-14%); }
@media (min-width: 900px) {
  .tracker-art .device.t-back { width: min(20vw, 290px); transform: translate(40%, 5%) rotate(4deg); }
  .tracker-art .device.t-front { width: min(23vw, 330px); transform: translateX(-16%); }
}
@media (max-width: 899px) { .tracker-art { max-height: 520px; } }

/* Sharing: an intro, then three steps beside the sticky phone. */
.shx-head { margin-bottom: 28px; }
.shx-step .step { font-size: 15px; }
.shx-h { font-size: clamp(30px, 7.6vw, 48px); }
.js .shx-step { opacity: 0.14; }
@media (max-width: 899px) {
  .shx-phone-col { top: 60px; padding: 8px var(--gutter) 56px; background: linear-gradient(180deg, var(--bg) 0%, var(--bg) calc(100% - 56px), rgba(8, 10, 9, 0) 100%); }
  .shx-phone { height: min(46svh, 420px); }
  .shx-step { min-height: 62svh; padding: 0 0 40px; }
  .shx-step:last-child { min-height: 48svh; }
}
@media (min-width: 900px) {
  .shx-head { margin-bottom: 8px; }
  .shx-step, .shx-step:last-child { min-height: 76svh; }
  .shx-h { font-size: clamp(36px, 3.6vw, 52px); }
}

/* Final CTA: the pin whole, above the headline, on phones too. */
@media (max-width: 899px) { .final-in { padding-top: 96px; } .final-pin { width: min(56vw, 30svh, 260px); } }
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .h3d-chapter .cast { overflow: visible; text-overflow: clip; position: relative; z-index: 1; }
}
@media (min-width: 900px) {
  .jgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .jcell { padding: 18px 8px 18px; }
  .jcell-art { width: 72%; }
  .jcell-name { font-size: 15px; margin-top: 10px; }
  .jcell-meta { font-size: 13px; }
  .tracker-art .device.t-back { transform: translate(58%, 7%); opacity: 0.42; filter: saturate(0.7) brightness(0.8); }
  .tracker-art .device.t-front { transform: translateX(-22%); }
}
@media (max-width: 899px) {
  .tracker-art .device.t-back { display: none; }
  .tracker-art .device.t-front { transform: none; }
}
.run-hero.has-map-route .route-preview { opacity: 0; }

/* ---------------------------------------------------------------- v6 r2 */
/* Hero: a clean wipe. The new scene is cut in by a moving edge (no double
   exposure) with a band of light riding the edge; the old one stays solid. */
.h3d-slide.is-in { -webkit-mask-image: none; mask-image: none; animation: h3d-wipe 1.1s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes h3d-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.h3d-slide.is-out img { animation: h3d-leave 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; }
.h3d-glint { inset: 0 auto 0 0; width: 34vw; opacity: 0; mix-blend-mode: screen; background: linear-gradient(90deg, transparent, rgba(255, 244, 214, 0.05) 40%, rgba(255, 244, 214, 0.22) 50%, rgba(255, 244, 214, 0) 51%) ; background-size: auto; }
.h3d-glint.go { animation: h3d-edge 1.1s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes h3d-edge { 0% { opacity: 0; transform: translateX(calc(100vw - 17vw)); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-17vw); } }
.h3d-chapter:not(.is-on) .cast, .h3d-chapter:not(.is-on) .name { transition: none; }
/* Phone hero: less copy over the art, a visible menu button. */
.site-header.overlay:not(.scrolled) .menu summary { background: rgba(20, 22, 21, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 899px) {
  .h3d-copy h1 { font-size: clamp(36px, 10.2vw, 42px); }
  .h3d-copy .lede { font-size: 16px; margin-top: 12px; max-width: 22em; }
  .h3d-copy .cta-row { margin-top: 18px; }
  .h3d-copy .micro { margin-top: 12px; font-size: 13px; }
  .h3d-shade { background: linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0) 14%), linear-gradient(180deg, rgba(8, 10, 9, 0) 48%, rgba(8, 10, 9, 0.7) 66%, rgba(8, 10, 9, 0.97) 84%); }
}
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .h3d-shade { background:
    linear-gradient(90deg, rgba(8, 10, 9, 0.9) 0%, rgba(8, 10, 9, 0.66) 32%, rgba(8, 10, 9, 0.12) 52%, rgba(8, 10, 9, 0) 60%),
    linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0) 16%, rgba(8, 10, 9, 0) 70%, rgba(8, 10, 9, 0.92) 100%); }
}
@media (min-aspect-ratio: 1/1) and (min-width: 1200px) { .h3d-slide img { object-position: 78% 45%; } }

/* Story: a visible headline, and the map rises out of the dark. */
.story-head { padding-top: var(--section); padding-bottom: 40px; }
.story-head h2 { margin-top: 10px; }
.story-track { position: relative; }
.story-track::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22svh; z-index: 5; pointer-events: none; background: linear-gradient(180deg, var(--bg), rgba(8, 10, 9, 0)); }
.story-track::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30svh; z-index: 5; pointer-events: none; background: linear-gradient(0deg, var(--bg), rgba(8, 10, 9, 0)); }
.js-story .story .story-static { display: none; }
@media (min-width: 900px) { .story-head { padding-bottom: 56px; } }

/* Worlds on phones: only the centred card speaks. */
@media (max-width: 899px) {
  .js-wx .wx-card .wx-copy { transition: opacity 0.35s; }
  .js-wx .wx-card:not(.is-active) .wx-copy { opacity: 0; }
  .js-wx .wx-card:not(.is-active) { filter: brightness(0.6); transition: filter 0.35s; }
  .js-wx .wx-card.is-active { filter: none; transition: filter 0.35s; }
}

/* Sharing: headline over the steps; a bigger phone on desktop. */
.shx-head { margin-bottom: 24px; }
@media (min-width: 900px) {
  .shx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(56px, 7vw, 112px); max-width: calc(var(--max) + var(--gutter) * 2); }
  .shx-phone-col { grid-column: 1; grid-row: 1 / 3; top: calc(50svh - min(40svh, 400px)); justify-content: center; }
  .shx-phone { height: min(80svh, 800px); }
  .shx-head { grid-column: 2; grid-row: 1; margin: 0; padding-top: 12svh; }
  .shx-steps { grid-column: 2; grid-row: 2; }
  .shx-step, .shx-step:last-child { min-height: 72svh; }
  .shx-step:first-child { min-height: 56svh; justify-content: flex-start; padding-top: 40px; }
  .js .shx-step { opacity: 0.12; }
  .js .shx-step.on { opacity: 1; }
}

/* Mythics: two columns on phones; one baseline on desktop; one accent. */
.myx-eb { color: var(--moss) !important; }
@media (max-width: 899px) {
  .myx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 14px; }
  .myx-art { width: 100%; max-width: 180px; }
  .myx-item h3 { font-size: 19px; margin-top: 8px; }
  .myx-item p { font-size: 14px; line-height: 1.4; margin-top: 4px; }
}
@media (min-width: 900px) {
  .myx-item:nth-child(3n + 2) { translate: none; }
  .myx-grid { max-width: calc(var(--max) + var(--gutter) * 2); padding-inline: var(--gutter); padding-bottom: 0; gap: 72px 56px; }
}
.myx-sky { background: radial-gradient(70% 34% at 50% 10%, rgba(240, 169, 143, 0.12), transparent 70%); }

/* The odds: a quiet card that opens. */
.myx-odds { margin-top: 64px; padding: 0; border: 0; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: block !important; }
.myx-odds > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; font-size: 17px; font-weight: 600; color: var(--text); }
.myx-odds > summary::-webkit-details-marker { display: none; }
.myx-odds > summary i { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--glass); border: 1px solid var(--line-2); flex: none; }
.myx-odds > summary i::before, .myx-odds > summary i::after { content: ''; position: absolute; left: calc(50% - 5px); top: calc(50% - 1px); width: 10px; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.3s var(--ease); }
.myx-odds > summary i::after { transform: rotate(90deg); }
.myx-odds[open] > summary i::after { transform: none; }
.myx-odds .odds-sub { padding: 0 24px; font-size: 14px; color: var(--muted); }
.myx-odds ul { margin: 14px 0 0; padding: 0 24px; }
.myx-odds .odds-note { margin: 18px 0 0; padding: 0 24px 24px; max-width: 60ch; }
@media (min-width: 900px) { .myx-odds { max-width: 880px; margin-inline: auto; } .myx-odds ul { grid-template-columns: repeat(6, 1fr); } }

/* Tracker (now with the privacy promise): heading first on phones. */
.tracker .text-link { margin-top: 22px; }
.tracker-art .device { width: min(70vw, 300px); }
@media (max-width: 899px) { .tracker-art { order: 2; max-height: 560px; -webkit-mask: linear-gradient(180deg, #000 88%, transparent); mask: linear-gradient(180deg, #000 88%, transparent); } }
@media (min-width: 900px) { .tracker-art .device { width: min(26vw, 360px); } .tracker-grid { grid-template-columns: 0.85fr 1.15fr; } }

/* Final CTA: the painted backdrop softened on purpose; the pin clear of the eyebrow. */
.final-art img { filter: blur(2px) brightness(0.72); transform: scale(1.04); }
.final-pin { margin-bottom: 20px; }

/* Run share: the stats get their own shade; a bigger waiting pin. */
@media (min-width: 900px) {
  .run .scrim::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 55% at 0% 100%, rgba(8, 10, 9, 0.85), transparent 70%); }
  .run .invite-pin { width: 150px; }
}
.story .story-static { padding-top: 0; }
@media (max-width: 899px) {
  .shx-step { min-height: 46svh; padding-bottom: 24px; }
  .shx-step:last-child { min-height: 0; padding-bottom: 8px; }
}
@media (max-width: 899px) { .shx-steps { padding-bottom: 30svh; } .shx-step { min-height: 40svh; } }

/* ---------------------------------------------------------------- v6 r3 */
/* Hero wipe: a narrow feathered edge (no seam), the old scene left untouched. */
.h3d-slide.is-in {
  clip-path: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 47%, #000 53%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 47%, #000 53%, #000 100%);
  -webkit-mask-size: 220% 100%; mask-size: 220% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: h3d-sweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes h3d-sweep { from { -webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
@keyframes h3d-leave { from { transform: scale(1.03) translate3d(-1.2%, -0.4%, 0); } to { transform: scale(1.0) translate3d(-2%, 0, 0); } }
.h3d-chapters { opacity: var(--fade, 1); }
@media (max-width: 899px) { .h3d-now { display: none; } .h3d-chapters { margin-bottom: 18px; } }

/* Journal: 8 by 3 on desktop, bigger pins, shapes you can actually see. */
.jcell-art { width: 88%; }
.jcell.is-empty .jcell-art img, .jcell.is-next:not(.struck) .jcell-art img { filter: brightness(0) invert(1); opacity: 0.075; }
.jcell.is-empty, .jcell.is-next:not(.struck) { background: rgba(243, 241, 234, 0.02); }
.jcell.is-found:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.journal .head { margin-bottom: 0; }
@media (min-width: 900px) {
  .jgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
  .jcell { padding: 14px 6px 14px; }
  .jcell-art { width: 90%; }
  .jcell-name { font-size: 14px; }
  .jcell-meta { font-size: 12px; }
  .jbook { margin-top: 48px; }
}

/* Mythics: the odds sit right under the pins, smaller. */
.myx-odds { margin-top: 48px; }
@media (min-width: 900px) { .myx-odds { max-width: 720px; } }
.myx { padding-bottom: 24px; }

/* Worlds: a readable sticky label; phones centre the first and last cards. */
.js-wx .wx-label { font-size: 17px; font-weight: 600; color: var(--text); }
.js-wx .wx-label b { font-weight: 500; }
@media (max-width: 899px) { .js-wx .wx-row { padding-inline: 9vw; } .js-wx .wx-card { width: 82vw; } }
@media (min-width: 900px) { .js-wx .wx-stage { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } }

/* Tracker: one device at a normal height, specs 2 by 2, then the privacy beat. */
@media (min-width: 900px) {
  .tracker-art .device { width: min(22vw, 300px); }
  .tracker .specs { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .tracker .specs dt { font-size: 22px !important; }
}
.promise-band { margin-top: 72px; padding: 36px 24px; border-radius: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; background: radial-gradient(80% 120% at 50% 0%, rgba(143, 214, 148, 0.08), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.promise-band h3 { margin-top: 16px; }
.promise-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin-top: 18px; }
.promise-facts li { font-size: 15px; font-weight: 500; color: var(--text); padding: 7px 14px; border-radius: 999px; background: rgba(143, 214, 148, 0.08); box-shadow: inset 0 0 0 1px rgba(143, 214, 148, 0.22); }
.promise-band .text-link { margin-top: 20px; }
@media (min-width: 900px) { .promise-band { margin-top: 104px; padding: 56px 40px; } }

/* Sharing: inactive steps stay readable; the sticker is the star; Stories chrome clears the island. */
.js .shx-step { opacity: 0.32; }
.js .shx-step.on { opacity: 1; }
.s-a { width: 46cqw; }
.st-bars { top: 15cqw; }
.st-user { top: 19cqw; }
.shx-layer[data-layer="1"] { background: #0B0D0C url(/video/share-poster.webp) center / cover no-repeat; }
@media (max-width: 899px) { .shx-steps { padding-bottom: 12svh; } }

/* Share pages. */
.hud-tag b { color: var(--text); font-weight: 600; }
.run .invite-copy { display: none; }
@media (min-width: 900px) { .run .invite-pin { width: 160px !important; } }
.lost-art img { filter: brightness(1.15); }
.h3d-glint { background: linear-gradient(90deg, transparent 20%, rgba(255, 244, 214, 0.12) 50%, transparent 80%); width: 22vw; }
@keyframes h3d-edge { 0% { opacity: 0; transform: translateX(calc(100vw - 11vw)); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(-11vw); } }

/* ---------------------------------------------------------------- v6 r4 */
.hud-tag { display: block; }
/* Story: the heading hands straight to beat one; the payoff is not faded by the exit. */
.story-track::before { height: 10svh; }
.story-track::after { height: 12svh; }
@media (max-width: 899px) { .story-head { padding-bottom: 0; } .js-story .story-track { margin-top: -40px; } }
/* Tracker: the running screen, cropped above the paused controls. */
.tracker-art .device { aspect-ratio: 640 / 1180; overflow: hidden; }
.tracker-art .device > img { object-position: 50% 0; border-radius: 11.4% / 6.2%; }
@media (max-width: 899px) { .tracker-art { -webkit-mask: none; mask: none; max-height: none; } }
/* Sharing on desktop: steps closer together. */
@media (min-width: 900px) { .shx-step, .shx-step:last-child { min-height: 60svh; } .shx-step:first-child { min-height: 50svh; } }
/* Run share on phones: the story first (who ran where), then the map and the numbers. */
@media (max-width: 899px) {
  .run .share-layout { display: flex; flex-direction: column; }
  .run .share-side { display: contents; }
  .run .meta { order: -1; padding: calc(64px + env(safe-area-inset-top) + 28px) var(--gutter) 4px; }
  .run .meta h1 { font-size: 36px; }
  .run .run-hero { height: min(66svh, 600px); min-height: 480px; }
  .run .invite { order: 1; margin: 28px var(--gutter) 0; }
  .run .site-header.overlay:not(.scrolled) { background: rgba(8, 10, 9, 0.9); }
}
@media (min-width: 900px) { .kin-grid { grid-template-columns: repeat(9, minmax(0, 1fr)) !important; gap: 8px !important; } }
/* Hero: the headline keeps clear of the cast on every scene. */
@media (min-aspect-ratio: 1/1) and (min-width: 900px) {
  .h3d-copy h1 { max-width: 600px; }
  .h3d-shade { background:
    linear-gradient(90deg, rgba(8, 10, 9, 0.92) 0%, rgba(8, 10, 9, 0.74) 30%, rgba(8, 10, 9, 0.3) 46%, rgba(8, 10, 9, 0) 60%),
    linear-gradient(180deg, rgba(8, 10, 9, 0.55) 0%, rgba(8, 10, 9, 0) 16%, rgba(8, 10, 9, 0) 70%, rgba(8, 10, 9, 0.92) 100%); }
}
@media (max-width: 899px) { .h3d-copy .cta-row { justify-content: center; gap: 14px 24px; } }
/* Story on desktop: the heading rides in over the top of the map. */
@media (min-width: 900px) {
  .story-head { position: relative; z-index: 6; padding-bottom: 0; }
  .js-story .story-track { margin-top: -34svh; }
  .story-track::before { height: 34svh; }
}
/* Worlds on phones: every card keeps its name; the counter never wraps. */
.js-wx .wx-label b { white-space: nowrap; flex: none; }
@media (max-width: 899px) {
  .js-wx .wx-label { font-size: 15px; }
  .js-wx .wx-card:not(.is-active) .wx-copy { opacity: 0.85; }
  .js-wx .wx-card:not(.is-active) { filter: brightness(0.8); }
}
/* Tracker: device and copy share a top line; specs share baselines. */
@media (min-width: 900px) { .tracker-grid { align-items: start; } .tracker .specs div { align-content: start; } }
/* Privacy: a statement, not a card. */
.promise-band { background: none; box-shadow: none; padding: 0; border-top: 1px solid var(--line); padding-top: 64px; border-radius: 0; }
.promise-band h3 { font-size: clamp(30px, 3.4vw, 48px); }
@media (min-width: 900px) { .promise-band { padding-top: 96px; } }
/* Sharing on phones: nothing ghosts under the pinned phone. */
@media (max-width: 899px) { .shx-phone-col { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) calc(100% - 20px), rgba(8, 10, 9, 0) 100%); padding-bottom: 36px; } }
.story-head { position: relative; z-index: 6; }
@media (max-width: 899px) { .js-story .story-track { margin-top: 0; } .story-head { padding-bottom: 8px; } .js-wx .wx-card:not(.is-active) .wx-copy { opacity: 0; } }
.tracker-art .device { aspect-ratio: 640 / 1240; }
.tracker-art .device { aspect-ratio: 640 / 1160; }
/* (fix) the story never overlaps the hero: no negative pull on desktop. */
@media (min-width: 900px) { .js-story .story-track { margin-top: 0; } .story-track::before { height: 14svh; } .story-head { padding-bottom: 8px; } }
/* Privacy folds into the tracker as its last, widest row. */
.tracker .specs .spec-private { grid-column: 1 / -1; }
.spec-private dt { display: flex; align-items: center; gap: 10px; }
.spec-lock { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--moss); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.spec-private dd a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.wx-first { margin-top: 14px; font-size: 17px; font-weight: 500; color: var(--text); max-width: 34em; }
@media (min-width: 900px) { .wx-first { font-size: 19px; } .myx .head { margin-bottom: -24px; } }
.story-caps p { text-wrap: balance; }

/* ---------------------------------------------------------------- v6 r5 */
/* Story: the section title is an intro, one step below the step titles. */
.story-head h2 { font-size: clamp(28px, 2.8vw, 40px); color: var(--text-2); }
/* The HUD reads as instrumentation, not a second headline. */
@media (min-width: 900px) {
  .story-hud strong { font-size: clamp(56px, 4.6vw, 76px); }
  .story-hud span { font-size: 13px; }
  .story-pin-in { width: min(32vw, 52vh) !important; }
  .story-hud, .story-rail { top: calc(72px + 7vh); }
}
/* Sharing on phones: a smaller pinned phone; copy fades in under it. */
@media (max-width: 899px) {
  .shx-phone { height: min(44svh, 400px); }
  .shx-steps { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 56px); mask-image: linear-gradient(180deg, transparent 0, #000 56px); }
}
.st-photo { object-position: 50% 30%; }
.shx-story::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.45) 100%); }
.st-route { filter: drop-shadow(0 0 1.4cqw rgba(255, 255, 255, 0.35)) drop-shadow(0 0.6cqw 2cqw rgba(0, 0, 0, 0.45)); }
/* Run share: credit inside the map; the waiting pin stacked over its caption. */
@media (min-width: 900px) {
  .run .credit { left: auto; right: 20px; transform: none; bottom: 12px; }
  .run .invite-pin { float: none !important; display: block; width: 150px !important; margin: 0 0 6px -6px !important; }
  .run .invite-pin-cap { padding-top: 0 !important; min-height: 0 !important; margin-bottom: 14px !important; }
}
@media (max-width: 899px) { .run .hud { background: linear-gradient(0deg, rgba(8, 10, 9, 0.7), rgba(8, 10, 9, 0)); } }
/* FAQ questions use the full row. */
.qa summary span { flex: 1; }
/* Mythic lines break alike. */
.myx-item p { max-width: 22em; }

/* ------------------------------------------------ v6 after round 6 */
.story-head h2 { color: var(--text); }
.jcell.is-next.struck .jcell-meta::after { content: 'New'; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #080A09; background: var(--c); }
.wx-first { color: var(--text-2); font-weight: 400; }
@media (min-width: 900px) {
  .shx-h { font-size: clamp(30px, 2.8vw, 40px); }
  .tracker-art { order: 2; }
  .tracker-grid { grid-template-columns: 1.15fr 0.85fr; }
  .tracker-art .device { width: min(24vw, 330px); }
  .tracker { padding-bottom: 72px; }
  .myx-grid { gap: 56px 48px; }
  .myx-odds { max-width: 520px; }
  .journal + .myx { padding-top: var(--section); }
}
@media (max-width: 899px) { .run .hud { background: linear-gradient(0deg, var(--bg) 0%, rgba(8, 10, 9, 0.85) 60%, rgba(8, 10, 9, 0)); padding-top: 60px; } }
.mid-cta { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.mid-cta p { font-size: 17px; font-weight: 600; color: var(--text); }
.wx .head { position: relative; }
.wx-device { width: min(64vw, 260px); margin: 32px auto 0; }
@media (min-width: 900px) {
  .wx .head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 64px; align-items: center; }
  .wx .head > :not(.wx-device) { grid-column: 1; }
  .wx-device { grid-column: 2; grid-row: 1 / span 4; width: min(20vw, 280px); margin: 0; }
}
@media (min-width: 900px) {
  .wx .head { display: block; padding-right: calc(min(20vw, 280px) + 64px + var(--gutter)); min-height: calc(min(20vw, 280px) * 2.17); display: flex; flex-direction: column; justify-content: center; }
  .wx-device { position: absolute; right: var(--gutter); top: 0; margin: 0; }
}