/* Totality website: one stylesheet for every page. Nothing loads from anyone else (no web fonts, scripts or embeds
   from other sites), so the privacy policy's section on this website stays true. Dark only: it's a space game.
   The look follows the game: near-black space, thin spaced capitals, glass in the player's blue. */

:root {
  color-scheme: dark;
  --bg: #04050a;
  --text: #eef1f8;
  --soft: #c5cbd9;
  --muted: #959db2;
  --faint: #646b80;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --blue: #4a8dff;
  --blue-light: #9cc2ff;
  --orange: #ffa040;
  --crimson: #ff4062;
  --aqua: #44e3ff;
  --gold: #e8c98c;
  --wide: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header: 64px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 16px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

main { flex: 1; }

img, svg { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: rgba(74, 141, 255, 0.4); color: #fff; }

:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 50;
  left: 16px;
  top: -80px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

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

/* The sky: far stars and faint gas drawn once on a canvas, a nearer layer that slides a little as the page scrolls,
   a few stars that twinkle, and now and then a shooting star (site.js). */

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-near {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + 512px);
  background-size: 512px 512px;
  will-change: transform;
}
.twinkle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px 1px rgba(210, 225, 255, 0.55);
  opacity: 0.2;
  animation: twinkle var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes twinkle { to { opacity: 0.95; transform: scale(1.3); } }

.shooting-star {
  position: absolute;
  width: 150px;
  height: 1px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(220, 232, 255, 0.95));
  transform-origin: 100% 50%;
  opacity: 0;
  animation: shoot 1.2s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
@keyframes shoot {
  0% { opacity: 0; transform: rotate(var(--angle)) translateX(0) scaleX(0.2); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(var(--travel)) scaleX(1); }
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-stuck {
  background: rgba(4, 5, 10, 0.64);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 0 var(--line);
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  outline: 1px solid rgba(255, 255, 255, 0.1);
  outline-offset: -1px;
}

.site-nav { display: flex; align-items: center; gap: 2px; margin-right: -10px; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.site-nav a:hover { color: var(--text); }
.site-nav a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.07); }

/* Shared type */

.eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.title {
  margin: 0;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.lede {
  margin: 20px 0 0;
  max-width: 34em;
  color: var(--soft);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  text-wrap: pretty;
}

.section { position: relative; padding: clamp(88px, 12vw, 168px) 0; }
.section-head { max-width: 760px; margin: 0 auto; text-align: center; }
.section-head .lede { margin-inline: auto; }

/* Glass, as the game's panels: a faint fill, a hairline, light along the top edge. */
.glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.022));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

/* Buttons are the game's Play capsule: tinted glass in the player's blue with a rim of light. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(74, 141, 255, 0.22), rgba(74, 141, 255, 0.5));
  box-shadow:
    inset 0 0 0 1px rgba(150, 190, 255, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 0 28px -8px rgba(74, 141, 255, 0.7);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
}
.button:hover {
  box-shadow:
    inset 0 0 0 1px rgba(170, 205, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 36px -6px rgba(74, 141, 255, 0.85);
}
.button:active { transform: scale(0.96); }
.button svg { width: 18px; height: 18px; }

.button-quiet {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-weight: 500;
}
.button-quiet:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Sections ease in as they reach the screen; without the script, or with less motion, they are simply there. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease);
  transition-delay: calc(var(--d, 0) * 100ms);
}
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* Home: the title, as the game's own: the name over a black hole, and a glass capsule below. */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header));
  padding: calc(var(--header) + 2vh) var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* Every frame of the game fades into the page's own sky with an eased falloff, so no edge ever shows. */
.hero-hole {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 57%;
  width: max(100%, 1180px);
  aspect-ratio: 2400 / 1116;
  translate: -50% -47%;
  --fade: closest-side, #000 36%, rgba(0, 0, 0, 0.86) 50%, rgba(0, 0, 0, 0.62) 63%, rgba(0, 0, 0, 0.36) 75%,
    rgba(0, 0, 0, 0.16) 86%, rgba(0, 0, 0, 0.05) 94%, rgba(0, 0, 0, 0);
  -webkit-mask-image: radial-gradient(var(--fade));
  mask-image: radial-gradient(var(--fade));
  animation: hole-in 2.4s var(--ease) both, hole-breathe 30s ease-in-out 2.4s infinite alternate;
}
.hero-hole img { width: 100%; height: 100%; object-fit: cover; }
@keyframes hole-in { from { opacity: 0; scale: 1.08; } }
@keyframes hole-breathe { to { scale: 1.06; } }

.wordmark {
  margin: clamp(56px, 14vh, 156px) 0 0;
  font-size: clamp(40px, 10.4vw, 92px);
  font-weight: 200;
  line-height: 1;
  white-space: nowrap;
  filter: drop-shadow(0 0 0.05em rgba(255, 255, 255, 0.5)) drop-shadow(0 0 0.3em rgba(255, 255, 255, 0.2));
}
.wm { display: inline-flex; align-items: baseline; }
.wm-l {
  display: inline-block;
  margin-right: 0.36em;
  animation: wm-letter 1.1s ease-out both;
  animation-delay: calc(0.25s + var(--from-middle) * 0.12s);
}
.wm-l:last-child { margin-right: 0; }
.wm-ink {
  display: inline-block;
  background: linear-gradient(#fff, #c2c9db);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The letters come in from the middle outwards, each out of a blur, from a little nearer the middle. */
@keyframes wm-letter {
  from { opacity: 0; filter: blur(0.07em); transform: translateX(var(--toward-middle)); }
}

/* The O is the eclipse: a ring as tall as the O, drawn round from its bead of light. */
.wm-o { display: inline-grid; justify-items: center; align-items: baseline; }
.wm-o > * { grid-area: 1 / 1; }
.wm-o .wm-ink { color: transparent; background: none; }
.wm-ring {
  position: relative;
  top: 0.012em;
  width: 0.725em;
  height: 0.725em;
  overflow: visible;
}
.wm-ring circle { stroke-dasharray: 100 100; animation: wm-draw 1.25s ease-in-out 0.4s both; }
@keyframes wm-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.wm-bead {
  transform-box: fill-box;
  transform-origin: center;
  animation: wm-bead-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 1.6s both, wm-glint 2.8s ease-in-out 2.2s infinite alternate;
}
@keyframes wm-bead-in { from { opacity: 0; transform: scale(0.01); } }
@keyframes wm-glint { from { opacity: 1; transform: scale(1); } to { opacity: 0.78; transform: scale(0.9); } }
/* As the ring closes, the bead flashes: its glints stretch and its glow swells, then settle. */
.wm-flash {
  transform-box: fill-box;
  transform-origin: center;
  animation: wm-flash 1.75s ease-out 1.6s both;
}
@keyframes wm-flash {
  0% { opacity: 0; transform: scale(0.6); }
  9% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(1); }
}

.hero-tagline {
  margin: clamp(18px, 3vh, 28px) 0 0;
  max-width: 30ch;
  color: var(--soft);
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 300;
  letter-spacing: 0.01em;
  text-wrap: balance;
  animation: rise 1.2s var(--ease) 1.2s both;
}
.hero-gap { flex: 1 0 clamp(300px, 52vh, 600px); }
.scroll-cue {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  margin-top: clamp(12px, 3vh, 36px);
  animation: rise 1.2s var(--ease) 2s both;
}
.scroll-cue span {
  width: 1px;
  height: 30px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.65));
  transform-origin: top;
  animation: cue 2.6s var(--ease) 2.6s infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 700px) {
  .hero-hole { top: 54%; width: max(100%, 540px); aspect-ratio: 1080 / 940; translate: -50% -43%; }
}

/* How it plays */

.steps {
  list-style: none;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.step { padding: 8px 8px 28px; border-radius: 28px; }
.step-art {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(74, 141, 255, 0.12), transparent 62%),
    rgba(0, 0, 0, 0.32);
  overflow: hidden;
}
.step-art svg { width: 100%; height: 100%; }
.step h3 { margin: 22px 20px 6px; font-size: 19px; font-weight: 600; letter-spacing: -0.005em; }
.step p { margin: 0 20px; color: var(--muted); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.step-label { font-family: inherit; font-size: 11px; font-weight: 600; fill: #e8eefc; letter-spacing: 0.02em; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
}

/* Scenes: real frames of the game. Stacked on phones and small tablets; wide, the frame sits to the right and the
   words stand in its sky, as the App Store screenshots set them. */

.scene { position: relative; isolation: isolate; padding: clamp(56px, 9vw, 96px) 0; overflow: hidden; }
.scene-copy { max-width: 560px; }
.scene-media { display: block; margin: 32px calc(-1 * var(--gutter)) 0; }
.scene-media img {
  width: 100%;
  height: auto;
  --fade-y: to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16) 7%, rgba(0, 0, 0, 0.46) 14%, rgba(0, 0, 0, 0.8) 21%, #000 29%,
    #000 71%, rgba(0, 0, 0, 0.8) 79%, rgba(0, 0, 0, 0.46) 86%, rgba(0, 0, 0, 0.16) 93%, rgba(0, 0, 0, 0);
  --fade-x: to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 7%, #000 17%, #000 83%, rgba(0, 0, 0, 0.5) 93%, rgba(0, 0, 0, 0);
  -webkit-mask-image: linear-gradient(var(--fade-y)), linear-gradient(var(--fade-x));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--fade-y)), linear-gradient(var(--fade-x));
  mask-composite: intersect;
}

@media (min-width: 1024px) {
  .scene { min-height: clamp(640px, 90vh, 900px); display: flex; align-items: center; padding: 64px 0; }
  .scene-copy { max-width: 440px; position: relative; }
  .scene-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -12% -30% -12% -40%;
    background: radial-gradient(closest-side, rgba(4, 5, 10, 0.72), rgba(4, 5, 10, 0));
  }
  .scene-media {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: max(-96px, calc(50% - 780px));
    height: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    translate: 0 -50%;
  }
  .scene-media img {
    height: 100%;
    object-fit: cover;
    --fade-x: to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.3) 17%, rgba(0, 0, 0, 0.62) 26%,
      rgba(0, 0, 0, 0.88) 34%, #000 42%, #000 72%, rgba(0, 0, 0, 0.8) 81%, rgba(0, 0, 0, 0.45) 89%, rgba(0, 0, 0, 0.14) 96%,
      rgba(0, 0, 0, 0);
  }
}

.facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 16px; }
.facts li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}
.facts strong { display: block; color: var(--text); font-size: 16px; font-weight: 600; }
.glyph { width: 28px; height: 28px; margin-top: 1px; color: #e3e9f7; }

.aside { margin: 24px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }

.chapters {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  counter-reset: chapter;
}
.chapters li {
  counter-increment: chapter;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  font-size: 15px;
  line-height: 1.35;
}
.chapters li::before {
  content: counter(chapter);
  color: var(--blue-light);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Uncharted: clear glass with the gold hairline of the game's free-map tile. */
.uncharted {
  margin: 16px 0 0;
  padding: 18px 20px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(232, 201, 140, 0.07), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(232, 201, 140, 0.32), inset 0 1px 0 rgba(255, 240, 210, 0.14);
}
.uncharted h3 {
  margin: 0 0 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.uncharted p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.55; }

/* The match report: the victory card as the game shows it, beside its words. The picture is the card alone, cut
   along its edge, so its own glass meets the page; the corners are the card's (95 of 1030 by 1398 pixels). */
.scene-card .scene-media { margin: 40px auto 0; width: min(100%, 400px); }
.scene-card .scene-media img {
  width: 100%;
  height: auto;
  border-radius: 9.2% / 6.8%;
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 90px -20px rgba(74, 141, 255, 0.35);
}
@media (min-width: 1024px) {
  .scene-card .scene-media {
    right: max(32px, calc(50% - 560px));
    margin: 0;
    width: min(420px, 34vw);
    height: auto;
    aspect-ratio: auto;
  }
  .scene-card .scene-media img { height: auto; }
}

/* Feel and everywhere: tiles */

.tiles {
  list-style: none;
  margin: clamp(44px, 6vw, 72px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.tile { padding: 26px 24px 28px; border-radius: 26px; }
.tile-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: rgba(74, 141, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(140, 182, 255, 0.28);
  color: var(--blue-light);
}
.tile h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.005em; }
.tile p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.tile p + p { margin-top: 10px; }

.tracks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.tracks li { display: grid; gap: 1px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.tracks b { color: var(--text); font-weight: 600; font-size: 15px; }

.languages { unicode-bidi: plaintext; }

@media (max-width: 1023px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tiles { grid-template-columns: 1fr; }
}

/* Closing call */

.closing { text-align: center; }
.closing .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.eclipse-mark { width: 92px; height: 92px; margin: 0 auto 28px; overflow: visible; }

/* Footer */

.site-footer {
  margin-top: auto;
  padding: 48px 0 calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(rgba(4, 5, 10, 0.4), rgba(4, 5, 10, 0.9));
  color: var(--faint);
  font-size: 14px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-left: -2px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer-nav a:hover { color: var(--text); }
.fine { margin: 20px 0 0; max-width: 70ch; line-height: 1.55; font-size: 12.5px; }

/* Text pages: support and privacy */

.page-hero { padding: clamp(40px, 8vw, 104px) 0 clamp(28px, 4vw, 48px); text-align: center; }
.page-hero h1 {
  margin: 0;
  font-size: clamp(40px, 7.4vw, 72px);
  font-weight: 200;
  line-height: 1.04;
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.page-hero .lede { margin-inline: auto; }
.page-hero .eyebrow { margin-bottom: 18px; }
.meta { margin: 18px 0 0; color: var(--faint); font-size: 14px; }

.narrow { max-width: calc(760px + 2 * var(--gutter)); }
.page-end { padding-bottom: clamp(80px, 10vw, 128px); }

/* Support */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 32px;
}
.contact-main { padding: 26px 22px 28px; }
.contact-main h2 { margin: 0 0 8px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.contact-main p { margin: 0 0 22px; color: var(--soft); }
.contact-main .address { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.contact-main .address a { color: var(--text); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); }
.contact-tips {
  padding: 24px 22px 26px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px var(--line);
}
.contact-tips h3 { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
.contact-tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.contact-tips li { position: relative; padding-left: 20px; color: var(--soft); font-size: 15px; line-height: 1.5; }
.contact-tips li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; border-radius: 28px; }
  .contact-tips { border-radius: 20px; }
}

.topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.topics a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--soft);
  font-size: 14.5px;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.topics a:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }

.faq-group { margin-top: clamp(48px, 7vw, 72px); }
.faq-group > h2 { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); }

.faq details {
  margin: 10px 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color 0.2s var(--ease);
}
.faq details[open] { background: rgba(255, 255, 255, 0.055); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 22px;
  border-radius: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate 0.25s var(--ease), translate 0.25s var(--ease);
}
.faq details[open] > summary::after { rotate: 225deg; translate: 0 2px; }
.faq .answer { padding: 0 22px 20px; color: var(--soft); }
.faq .answer p { margin: 0; }
.faq .answer p + p, .faq .answer ul + p, .faq .answer p + ul { margin-top: 10px; }
.faq .answer ul { margin: 0; padding-left: 1.2em; }
.faq .answer li { margin: 6px 0; }
.faq .answer li::marker { color: var(--faint); }
.faq .answer a, .prose a { text-underline-offset: 3px; text-decoration-color: rgba(156, 194, 255, 0.5); }
.faq .answer a:hover, .prose a:hover { color: var(--blue-light); }
.faq .answer b, .prose b { color: var(--text); font-weight: 600; }

@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.3s var(--ease), content-visibility 0.3s var(--ease) allow-discrete;
  }
  .faq details[open]::details-content { height: auto; }
}

.requirements {
  margin-top: clamp(56px, 8vw, 88px);
  padding: 24px 24px 26px;
  border-radius: 24px;
  text-align: center;
}
.requirements h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.requirements p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Privacy */

.glance {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.glance li { padding: 22px 20px 24px; border-radius: 24px; }
.glance .tile-icon { width: 40px; height: 40px; margin-bottom: 16px; border-radius: 12px; }
.glance strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 600; line-height: 1.35; }
.glance span { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1023px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .glance { grid-template-columns: 1fr; } }

.policy {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  margin-top: clamp(48px, 7vw, 80px);
}
.toc { position: sticky; top: calc(var(--header) + 24px); font-size: 14px; }
.toc h2 { margin: 0 0 12px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.toc a {
  display: block;
  padding: 6px 12px;
  margin-left: -12px;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.toc a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.toc a.is-current { color: var(--text); background: rgba(74, 141, 255, 0.14); }
@media (max-width: 1023px) {
  .policy { grid-template-columns: 1fr; }
  .toc { display: none; }
}

.prose { max-width: 700px; }
.prose > section { scroll-margin-top: calc(var(--header) + 16px); }
.prose > section + section { margin-top: 52px; }
.prose h2 { margin: 0 0 12px; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.prose h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 600; }
.prose p, .prose li { color: var(--soft); }
.prose p { margin: 0 0 14px; text-wrap: pretty; }
.prose ul { margin: 0 0 14px; padding-left: 1.2em; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--faint); }
.prose .callout {
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(74, 141, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(140, 182, 255, 0.22);
}
.prose .callout p:last-child { margin-bottom: 0; }

/* Not found */

.lost { text-align: center; padding: clamp(80px, 16vh, 180px) 0; }
.lost .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

/* Less motion: everything is simply in place. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .wm-l, .hero-tagline, .scroll-cue { animation: fade-in 0.8s ease-out both !important; }
  .js .reveal { transform: none; filter: none; transition: opacity 0.6s ease-out; transition-delay: 0s; }
  .twinkle, .shooting-star { display: none; }
}
@keyframes fade-in { from { opacity: 0; } }