/* Umbra website: one stylesheet for every page, Totality's own (its Website/style.css) made over for a wide game.
   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 / 1104;
  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.42em;
  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)); }
}

/* Under the letters, the horizon: a hairline brightest at its middle, over a faint glow in the player's blue, drawn
   out from the middle; the bead sits on its middle, the diamond ring at the edge of the umbra (TitleWordmark.swift). */
.wm { position: relative; padding-bottom: 0.46em; }
.wm-horizon {
  position: absolute;
  left: -0.1em;
  right: -0.1em;
  bottom: 0.04em;
  height: 1px;
}
.wm-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
  animation: wm-draw 1.25s ease-in-out 0.45s both;
}
.wm-line::before {
  content: "";
  position: absolute;
  inset: -3px 0;
  background: linear-gradient(90deg, rgba(74, 141, 255, 0), rgba(74, 141, 255, 0.7) 50%, rgba(74, 141, 255, 0));
  filter: blur(5px);
}
@keyframes wm-draw { from { transform: scaleX(0.001); } }
.wm-horizon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.7em;
  height: 0.7em;
  translate: -50% -50%;
  overflow: visible;
}
.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: 56%; width: max(100%, 540px); aspect-ratio: 1080 / 810; translate: -50% -43%; }
}

/* Scenes: real frames of the game. Umbra is played wide, so every frame stands whole under its words, as wide as the
   page allows, and fades into the page's sky with an eased falloff on every side, so no edge ever shows. Phones get
   a 4:3 crop round the fighter instead. Facts, when a scene has them, sit under the frame. */

.scene { position: relative; isolation: isolate; padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 72px); overflow: hidden; }
.scene-copy { max-width: 720px; margin: 0 auto; text-align: center; }
.scene-copy .lede { margin-inline: auto; }
.scene-media {
  display: block;
  width: min(100vw, 1680px);
  margin: clamp(8px, 2vw, 24px) 0 0 50%;
  translate: -50% 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.3) 5%, rgba(0, 0, 0, 0.75) 11%, #000 18%, #000 82%,
    rgba(0, 0, 0, 0.75) 89%, rgba(0, 0, 0, 0.3) 95%, 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;
}
.scene .aside { max-width: 640px; margin: 4px auto 0; text-align: center; }

.facts {
  list-style: none;
  margin: clamp(8px, 2vw, 24px) auto 0;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 32px;
}
.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; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; max-width: 420px; } }

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

/* The campaign's three acts, each with its four wars, as the map's beads: won wars burn blue. */
.acts {
  list-style: none;
  margin: clamp(8px, 2vw, 24px) auto 0;
  padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.act { padding: 22px 22px 18px; border-radius: 24px; }
.act h3 {
  margin: 0 0 4px;
  color: var(--blue-light);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.act ol { list-style: none; margin: 0; padding: 0; }
.act li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  font-size: 15px;
  line-height: 1.35;
}
.act li:last-child { border-bottom: 0; }
.act li span {
  min-width: 1.4em;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .acts { grid-template-columns: 1fr; max-width: 480px; } }

.campaign-more {
  margin: 16px auto 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.medals { padding: 18px 20px 20px; border-radius: 20px; }
.medals h3, .uncharted h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.medals h3 { color: var(--blue-light); }
.medals p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 760px) { .campaign-more { grid-template-columns: 1fr; max-width: 480px; } }

/* Uncharted: clear glass with the gold hairline of the game's Uncharted button. */
.uncharted {
  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 { color: var(--gold); }
.uncharted p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.55; }

/* 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; }
.horizon-mark { width: 180px; height: 60px; 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; } }