/* Satellity, the website (satellity.echandia.app).
   Night first: every surface is a sky after sunset (SkyRamp's stops), and the only warm light on the page is
   sunlight on a satellite. Gold (#FFCC33) never colors a button, a heading, a label or a decoration.
   One stylesheet in seven blocks; add to the block a rule belongs to, never at the end of the file:
     1. Tokens       @font-face and :root custom properties, named by role
     2. Base         element defaults
     3. Layout       page width, gutters, section bands
     4. Components   reusable pieces: text roles, masthead, button, listing, tag, badge, mark, screenshots, tour
     5. Sections     the home page, top to bottom
     6. Pages        legal and support pages, and the 404
     7. Utilities    sr-only, skip link, motion preferences */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
@font-face {
  font-family: "Sora";
  src: url("./fonts/sora-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Sky: SkyRamp (PassGlance/SkyRamp.swift), the Sun 4° below the horizon and full night (−18°) */
  --sky-4-top: #18245C;
  --sky-4-bottom: #283A76;
  --sky-18-top: #050918;
  --sky-18-bottom: #0E1638;
  --dusk: #F2A766;          /* the horizon glow and the sunlight rays, nothing else */

  /* Surfaces: the night the page descends through, darkest last */
  --surface-hero: var(--sky-4-top);
  --ground: #070B1D;        /* Earth's night side, under the hero drawing */
  --night: #0A102C;
  --deep: #05081A;
  --moment: #010206;        /* the guide: a moment screen, always dark */
  --space: #000106;
  --surface-raised: rgb(5 9 24 / .42);   /* a row floating on a sky (the listing) */
  --masthead-bg: rgb(24 36 92 / .86);    /* the hero's sky; the scroll clock (site.js) may override it */

  /* Text */
  --text: #E7ECFB;          /* the wordmark's letters */
  --text-2: rgba(231, 236, 251, .76);
  --text-3: rgba(231, 236, 251, .58);   /* ≥ 5:1 on every surface above, the hero's sky included */
  --line: rgba(231, 236, 251, .1);

  /* Action: the app's accent on dark. The app is blue, the satellite is gold. */
  --accent: #9DB4FF;
  --accent-hover: #B6C7FF;
  --on-accent: #0A1238;     /* button text */
  --accent-tint: rgb(157 180 255 / .16);
  --on-accent-tint: #CFDAFF;

  /* Meaning: SkyPalette. Gold only on a sunlit satellite you can see. */
  --visible: #FFCC33;       /* in sunlight and you can see it */
  --sunlit: #FFEB99;        /* the Sun is on it, seen or not */
  --unseen: #A68C4D;        /* in sunlight, but your sky is still bright */
  --shadow-ring: #8C94A8;   /* in Earth's shadow: always hollow, dashed or dotted */
  --you: #4DCCFF;

  /* "Will I see it?" bands: system colors, always with their word */
  --b-green: #30D158;
  --b-mint: #63E6E2;
  --b-yellow: #FFD60A;
  --b-orange: #FF9F0A;
  --b-gray: #98989D;

  /* Type: Sora for display only; the system for reading; rounded tabular figures for times */
  --font-brand: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --fs-h1: clamp(2.5rem, 1.45rem + 3.4vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.3vw, 3.375rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.03rem + .42vw, 1.3125rem);
  --fs-body: 1.0625rem;     /* 17 px: iOS body size, the app's own voice */
  --fs-small: .9375rem;
  --fs-caption: .875rem;   /* 14 px: captions, sources, credits */

  /* Space and layout */
  --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1200px;
  --band: clamp(48px, 6.5vw, 104px);
  --masthead-h: 60px;
  --radius-control: 14px;
  --radius-row: 20px;

  /* Motion */
  --ease-out: cubic-bezier(.25, 1, .5, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--space);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--masthead-h) + 8px);
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 var(--fs-body)/1.62 var(--font-ui);
  letter-spacing: .006em;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

img, video, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2 {
  font-family: var(--font-brand);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.026em; margin-bottom: var(--s5); }
h3 { font-size: var(--fs-h3); line-height: 1.3; font-weight: 600; margin: 0 0 var(--s2); text-wrap: balance; }
h4 { font-size: var(--fs-body); line-height: 1.35; font-weight: 600; margin: 0 0 var(--s2); text-wrap: balance; }
figcaption { text-wrap: pretty; }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--text); }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }

/* ==========================================================================
   4. Components
   ========================================================================== */
/* ---------- Text roles ---------- */
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 38em; }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-3); margin-top: var(--s4); text-wrap: pretty; }

/* ---------- Masthead ----------
   One line at every width: the wordmark, the sky right now (site.js fills [data-sky-status]; hidden under 560 px
   until it has a short form), the section links (from 880 px) and "Español" (always). Sticky over the page's sky. */
.masthead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--masthead-h);
  /* the same column as .wrap and the hero copy, inside the safe area */
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left), calc((100% - var(--max)) / 2 + var(--gutter)))
    max(var(--gutter), env(safe-area-inset-right), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: var(--masthead-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
          backdrop-filter: saturate(1.4) blur(14px);
}
.masthead::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #FF453A; mix-blend-mode: multiply; opacity: 0; transition: opacity .5s var(--ease-out);
}
html.is-night .masthead { background: rgb(1 2 6 / .94); }   /* wins over the clock's inline --masthead-bg */
html.is-night .masthead::after { opacity: 1; }
.brand { flex: none; display: block; padding-block: 8px; border-radius: 8px; }
.brand img { height: clamp(28px, 2.3vw, 34px); width: auto; }
.masthead-status {
  flex: 1 1 auto; min-width: 0; margin: 0; max-width: none;
  font-size: var(--fs-small); line-height: 1.3; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topnav { flex: none; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 32px); margin-left: auto; font-size: var(--fs-small); }
.topnav a { color: var(--text-2); text-decoration: none; padding: 12px 2px; min-width: 44px; text-align: center; }
.topnav a:hover, .topnav a[aria-current] { color: var(--text); }
.topnav .lang { color: var(--text); }
@media (max-width: 879.98px) { .topnav a:not(.lang) { display: none; } }
.masthead-status .st-short { display: none; }
/* The long sentence needs ~420 px (Spanish, 18°): below 720 px the short form, never an ellipsis */
@media (max-width: 719.98px) {
  .masthead-status .st-long { display: none; }
  .masthead-status .st-short { display: inline; }
}
@media (max-width: 559.98px) { .masthead-status { font-size: .8125rem; } }
/* "Sol a 18° bajo el horizonte" needs ~160 px: it doesn't fit beside the wordmark under 390 px */
@media (max-width: 389.98px) { :lang(es) .masthead-status { display: none; } }
@media (max-width: 369.98px) { .masthead-status { display: none; } }
/* With the section links showing, the long sentence only fits from 1200 px: between, the short form, never an ellipsis */
@media (min-width: 880px) and (max-width: 1199.98px) {
  .masthead-status .st-long { display: none; }
  .masthead-status .st-short { display: inline; }
}

/* ---------- Button ---------- */
.button {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 22px 0 18px;
  border-radius: var(--radius-control);
  background: var(--accent); color: var(--on-accent);
  font-weight: 600; font-size: var(--fs-body); text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease-out);
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); }
/* "Ver el recorrido de 30 segundos" stays on one line down to 320 px */
@media (max-width: 379.98px) { .button { padding: 0 16px 0 14px; gap: 8px; font-size: 1rem; } }

/* ---------- App Store listing row and tag ----------
   Until launch the listing says "Coming soon" and links nowhere; at launch it is swapped for Apple's badge. */
.listing {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  padding: 10px 18px 10px 10px; border-radius: var(--radius-row);
  background: var(--surface-raised); border: 1px solid var(--line);
}
.listing-icon { width: 56px; height: 56px; border-radius: 22.4%; box-shadow: 0 0 0 1px rgb(157 180 255 / .2); }
.listing-text p { margin: 0; }
.listing-name { font-weight: 600; font-size: var(--fs-body); line-height: 1.3; color: var(--text); }
.listing-meta { font-size: var(--fs-small); line-height: 1.35; color: var(--text-2); }
@media (max-width: 479.98px) {
  .listing { grid-template-columns: 56px minmax(0, 1fr); }
  .listing-icon { grid-row: span 2; }
  .listing .tag { justify-self: start; }
}
.tag {
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: .32em .75em; border-radius: 999px;
  font: 600 var(--fs-caption)/1.2 var(--font-ui); letter-spacing: .01em;
  background: var(--accent-tint); color: var(--on-accent-tint);
}

/* ---------- "Will I see it?" badge ---------- */
.badge {
  --c: var(--b-gray);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  font-weight: 600; font-size: var(--fs-small); color: var(--text);
}
.badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.b-green { --c: var(--b-green); } .b-mint { --c: var(--b-mint); } .b-yellow { --c: var(--b-yellow); }
.b-orange { --c: var(--b-orange); } .b-gray { --c: var(--b-gray); }
.range { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-3); font-size: var(--fs-small); }

/* ---------- SkyPalette marks (a legend swatch) ---------- */
.mark { flex: none; width: 12px; height: 12px; border-radius: 50%; transform: translateY(1px); }
.mark.lg { width: 14px; height: 14px; }
.m-visible { background: var(--visible); box-shadow: 0 0 12px rgba(255, 204, 51, .55); }
.m-sunlit { background: var(--sunlit); }
.m-unseen { background: var(--unseen); }
.m-shadow { border: 2px solid var(--shadow-ring); }
.m-you { background: var(--you); box-shadow: 0 0 10px rgba(77, 204, 255, .45); }
.m-none { background: radial-gradient(circle, rgba(231, 236, 251, .32) 0 3px, transparent 3.5px); }

/* ---------- Screenshots without a device frame ---------- */
.phone { margin: 0; }
.phone img, .phone video {
  width: 100%; height: auto;
  border-radius: 12.5% / 5.75%;           /* the iPhone screen's own corners */
  background: #000;
  box-shadow: 0 0 0 1px rgba(157, 180, 255, .14), 0 40px 90px -30px rgba(0, 0, 0, .85);
}
.phone figcaption { font-size: var(--fs-caption); color: var(--text-3); margin-top: var(--s4); line-height: 1.5; }
.shot-crop { margin: 0; overflow: hidden; background: var(--deep); }   /* dark while a lazy image loads */
.shot-crop img { max-width: none; height: auto; }

/* ---------- Pause/Play on a video that plays by itself (site.js; WCAG 2.2.2) ---------- */
.has-toggle { position: relative; }
.vid-toggle {
  position: absolute; z-index: 1; right: 12px; bottom: 12px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(5, 8, 26, .72); border: 1px solid rgba(231, 236, 251, .28);
}
.vid-toggle[hidden] { display: none; }
.vid-toggle .i-pause, .vid-toggle.is-playing .i-play { display: none; }
.vid-toggle.is-playing .i-pause { display: inline; }

/* ---------- Pro marks ---------- */
.pill {
  background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: .8125rem; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; transform: translateY(3px);
}

/* ---------- Fold (details): secondary depth, open on wide screens and without JavaScript ---------- */
.fold > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--accent); font-weight: 600; cursor: pointer; list-style: none;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after {
  content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease-out);
}
.fold[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.fold > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.fold > summary > h2, .fold > summary > h3 { display: inline; margin: 0; color: inherit; }
.guide .fold > summary { color: var(--red); }
@media (prefers-reduced-motion: reduce) { .fold > summary::after { transition: none; } }

/* ---------- The tour dialog ---------- */
/* site.js opens it from "Watch the 30-Second Tour"; without JavaScript that link plays the file itself. */
.tour { padding: 0; border: 0; background: transparent; overflow: visible; max-width: calc(100vw - 32px); max-height: 94vh; }
.tour::backdrop { background: rgb(1 2 6 / .9); }
.tour video { height: min(86vh, 920px); width: auto; max-width: 100%; border-radius: 9% / 4.1%; background: #000; }
.tour .close {
  position: absolute; top: -8px; right: -60px; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(231, 236, 251, .14); color: var(--text); display: grid; place-items: center; cursor: pointer;
}
@media (max-width: 640px) { .tour .close { right: 8px; top: 8px; z-index: 1; } }

/* ==========================================================================
   5. Sections: the home page, top to bottom
   ========================================================================== */
/* ---------- Hero ----------
   What it does first, standing in the sky at −4°. The drawing continues that sky under the copy (three static
   compositions of the same physics, one shown per width), and its caption, the why, stands on Earth's night
   side. Only the satellite moves (site.js); without JavaScript or with Reduce Motion the still shows the pass. */
.hero { background: var(--surface-hero); }
.hero-copy {
  position: relative; z-index: 1;
  max-width: var(--max); margin-inline: auto;
  padding: clamp(16px, 5vw, 72px) var(--gutter) var(--s5);
}
.hero h1 { font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -.032em; max-width: 15ch; }
.hero-promise {
  margin: var(--s4) 0 0; max-width: 33rem;
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.4375rem); line-height: 1.42; font-weight: 500; color: var(--text);
}
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); margin-top: var(--s6); }

.hero-figure { margin: 0; background: var(--ground); }
.hero-art { --overlap: 9vw; margin-top: calc(var(--overlap) * -1); }
.pass-art { width: 100%; height: auto; }
.pass-art[data-set="medium"], .pass-art[data-set="wide"] { display: none; }
@media (min-width: 560px) {
  .hero-art { --overlap: 7vw; }
  .pass-art[data-set="narrow"] { display: none; }
  .pass-art[data-set="medium"] { display: block; }
}
@media (min-width: 1024px) {
  .hero-art { --overlap: 12vw; }
  .pass-art[data-set="medium"] { display: none; }
  .pass-art[data-set="wide"] { display: block; }
}
/* Labels: 18 units, never under 12 CSS px; every fill ≥ 4.5:1 on the sky it sits on, with a dark halo for the glow */
.pass-art .pa-l {
  font-family: var(--font-ui); font-weight: 500; fill: var(--text); letter-spacing: .01em;
  paint-order: stroke; stroke: #0A102C; stroke-opacity: .55; stroke-width: 4px; stroke-linejoin: round;
}
.pass-art .pa-l-dim { fill: #BAC2DC; }
.pass-art .pa-l-strong { font-weight: 600; }
.pass-art .pa-l-shadow { fill: #AEB5C8; font-size: 1.1em; font-weight: 600; letter-spacing: .02em; }
.pass-art .pa-l-you { fill: var(--you); font-weight: 600; }
.pa-settle .pa-trail, .pa-settle .pa-sat, .pa-settle .pa-sight, .pa-settle .pa-ghost, .pa-settle .pa-entering {
  animation: pa-settle 1.4s var(--ease-out) both;
}
@keyframes pa-settle { from { opacity: 0; } }

.hero-caption { position: relative; z-index: 1; padding: var(--s5) var(--gutter) var(--s8); }
.hero-caption-title { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.026em; margin: 0; }
.hero-why { margin: var(--s4) 0 0; max-width: 40rem; font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
@media (min-width: 560px) {
  .hero-caption { text-align: center; }
  .hero-why { margin-inline: auto; }
}
@media (min-width: 1024px) {
  .hero-caption { margin-top: -9vw; padding-top: 0; }
}

/* ---------- The scroll clock (site.js adds html.has-clock and the .clock-sky layer) ----------
   Without JavaScript each section keeps its own static gradient, descending through the night. With it, Tonight
   and the score are see-through, and the sky behind them follows SkyRamp as you scroll. */
.clock-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--sky-4-top); }
html.has-clock body { background: transparent; }
html.has-clock .tonight { background: linear-gradient(var(--ground), transparent clamp(160px, 22vw, 320px)); }
html.has-clock .score, html.has-clock .sky, html.has-clock .explore, html.has-clock .pro,
html.has-clock .privacy, html.has-clock .closing { background: transparent; }
/* Over the brighter twilight, the third text level gets a little stronger: still ≥ 4.5:1 at the horizon glow */
html.has-clock main { --text-3: rgba(231, 236, 251, .68); }

/* ---------- Tonight ---------- */
.tonight { background: linear-gradient(var(--ground), var(--night)); padding-top: clamp(24px, 4vw, 64px); }
.tonight-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  grid-template-areas: "card head" "card answer" "card rest";
  column-gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.tonight-head { grid-area: head; }
.answer { grid-area: answer; }
.tonight-rest { grid-area: rest; }
.tonight-card { grid-area: card; position: sticky; top: calc(var(--masthead-h) + 24px); }
.crop-tonight {
  aspect-ratio: 816 / 914;
  border-radius: 4.9% / 4.4%;
  box-shadow: 0 0 0 1px rgba(157, 180, 255, .16), 0 40px 100px -30px rgba(0, 0, 0, .9);
}
.crop-tonight img { width: 107.843%; margin-left: -3.922%; margin-top: -59.069%; }

/* The answer sheet: what the card doesn't spell out (where and how high), as text, next to the card itself */
.answer { margin-top: var(--s6); }
.answer-cap { font-size: var(--fs-small); color: var(--text-2); margin-bottom: var(--s3); }
.answer-sheet { margin: 0; border-top: 1px solid var(--line); }
.answer-row {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 4px var(--s5); align-items: baseline;
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.answer-row dt { font-size: var(--fs-small); color: var(--text-2); font-weight: 500; }
.answer-row dd { margin: 0; font-size: var(--fs-lead); line-height: 1.4; color: var(--text); text-wrap: pretty; }
.tonight-rest { margin-top: var(--s7); }

.fists { display: grid; grid-template-columns: 270px 1fr; gap: var(--s6); align-items: center; }
.fist-scale { width: 100%; height: auto; overflow: visible; }
.fist-scale .fs-n { font: 700 15.5px var(--font-num); fill: rgba(231, 236, 251, .8); }
.fist-scale .fs-l { font: 500 15.5px var(--font-ui); fill: rgba(231, 236, 251, .88); }
.fist-scale .fs-you { fill: var(--you); font-weight: 600; }
.fist-scale .fs-dim { fill: rgba(231, 236, 251, .74); }
.fists p { color: var(--text-2); margin: 0; }

/* ---------- The score ---------- */
.score { background: linear-gradient(var(--night), var(--deep)); }
.score-head { max-width: 50rem; }
.score-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7) clamp(48px, 7vw, 112px);
  margin-top: clamp(48px, 6vw, 80px);
}
.bands { list-style: none; margin: 0; padding: 0; }
.bands li {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s3);
  padding: var(--s4) 0; border-top: 1px solid var(--line);
}
.bands li:first-child { border-top: 0; padding-top: 0; }
.bands li p { grid-column: 1 / -1; margin: var(--s2) 0 0; color: var(--text-2); font-size: var(--fs-small); }
.weighs[open] > summary { margin-bottom: var(--s3); }
.weighs dl { margin: 0; }
.weighs dt { font-weight: 600; margin-top: var(--s5); }
.weighs dt:first-child { margin-top: 0; }
.weighs dd { margin: 6px 0 0; color: var(--text-2); }
.moon-example { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: var(--s4); }
.moon-example b { font-weight: 600; color: var(--text); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.moon-arrow { font-size: var(--fs-caption); color: var(--text-3); display: inline-flex; align-items: center; gap: 8px; }
.moon-arrow::before, .moon-arrow::after { content: ""; width: 18px; height: 1px; background: var(--text-3); }

/* Your sky: the words beside the three skies on wide screens */
.sky-moon { margin-top: clamp(56px, 6vw, 88px); padding-top: var(--s6); border-top: 1px solid var(--line); }
@media (min-width: 960px) {
  .skies { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(40px, 6vw, 96px); align-items: start; }
  .skies > h3, .skies > p { grid-column: 1; }
  .skies .sky-choice { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
.weighs .moon { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.skies p, .moon p:not(.moon-example) { color: var(--text-2); }
.sky-choice { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.sky-choice figure { margin: 0; }
.sky-art { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); background: var(--deep); }
.sky-choice figcaption { margin-top: var(--s2); font-size: var(--fs-small); line-height: 1.35; color: var(--text-2); text-wrap: balance; }
.sky-choice figcaption b { display: block; color: var(--text); font-weight: 600; }
.moon .moon-example { margin-top: var(--s5); max-width: none; }

.proof { margin-top: clamp(56px, 6vw, 88px); }
/* Checked against Skyfield: four figures, numbers right-aligned in rounded tabular figures */
.agree { margin: var(--s4) 0 0; border-top: 1px solid var(--line); }
.agree div { display: flex; justify-content: space-between; gap: var(--s4); padding: 9px 0; border-bottom: 1px solid var(--line); }
.agree dt { color: var(--text-2); font-size: var(--fs-small); }
.agree dd { margin: 0; font: 600 var(--fs-body) var(--font-num); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.proof .fold > summary > h3 { font-size: clamp(1.25rem, 1.15rem + .45vw, 1.5rem); }
.proof .fold[open] > summary { margin-bottom: var(--s6); }
.proof-items {
  display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto;
  gap: var(--s7) clamp(48px, 7vw, 112px);
}
.proof-items article:first-child { grid-row: span 2; }
.proof-items article:first-child p:not(.source) { font-size: var(--fs-lead); line-height: 1.55; }
.proof-items article:first-child h4 { font-size: var(--fs-h3); }
.proof-items p { color: var(--text-2); }
.proof .source { margin-top: var(--s3); font-size: var(--fs-caption); color: var(--text-3); }

/* ---------- The guide: Night Mode (Red) ----------
   Red on black, as the app's NightVision layers paint it. Always red; while it is in view site.js also turns the
   masthead red (html.is-night). Every red here is ≥ 4.5:1 on --moment and set at 15 px or more. */
.guide {
  --red: #FF453A;          /* headings and marks, 6.1:1 */
  --red-text: #FF6B5E;     /* reading text, 7.4:1 */
  --red-line: rgb(255 69 58 / .28);
  --red-wash: rgb(255 69 58 / .09);
  background: var(--moment); color: var(--red-text);
  padding-bottom: clamp(64px, 6vw, 96px);   /* the next section brings its own top band: no double void */
}
.guide h2, .guide h3 { color: var(--red); }
.guide p, .guide .lead { color: var(--red-text); }
.guide strong, .guide q { color: var(--red); }
.guide :focus-visible { outline-color: var(--red); }
.guide-grid {
  display: grid;
  grid-template-columns: minmax(260px, 330px) 1fr;
  grid-template-areas: "media head" "media rest";
  column-gap: clamp(48px, 8vw, 128px);
  align-items: start;
}
.guide-head { grid-area: head; }
.guide-rest { grid-area: rest; }
.guide-media { grid-area: media; position: sticky; top: calc(var(--masthead-h) + 24px); }
.guide-note { font-weight: 600; color: var(--red) !important; margin-top: calc(-1 * var(--s2)); }
.guide-note span { font-weight: 400; color: var(--red-text); }
.guide .caption { font-size: var(--fs-small); color: var(--red-text); }
.guide .phone video { box-shadow: 0 0 0 1px var(--red-line); }
.guide .vid-toggle { color: var(--red); background: rgb(1 2 6 / .8); border-color: var(--red-line); }
.night { list-style: none; margin: var(--s7) 0 0; padding: 0; }
.night li { position: relative; padding: 0 0 var(--s7) 36px; }
.night li::before {
  content: ""; position: absolute; left: 3px; top: .45em;
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--red); background: var(--moment);
}
.night li::after {
  content: ""; position: absolute; left: 8px; top: calc(.45em + 15px); bottom: 4px;
  width: 1px; background: var(--red-line);
}
.night li:last-child { padding-bottom: 0; }
.night li:last-child::after { display: none; }
.night h3 { font-size: var(--fs-body); }
.night q { font-weight: 600; }
/* The alert, verbatim and at display size */
.alert-card {
  max-width: 32rem; margin: var(--s3) 0 var(--s4); padding: 18px 20px;
  border-radius: 22px; background: var(--red-wash); box-shadow: inset 0 0 0 1px var(--red-line);
}
.alert-card .alert-title {
  margin: 0 0 6px; color: var(--red) !important;
  font: 700 clamp(1.375rem, 1.15rem + .9vw, 1.875rem)/1.2 var(--font-ui); letter-spacing: -.01em;
}
.alert-card .alert-body { margin: 0; font-size: clamp(1.125rem, 1.02rem + .45vw, 1.375rem); line-height: 1.42; }
/* The Live Activity card alone (cut from the Lock Screen capture): no wallpaper on a night page */
.crop-live {
  max-width: 460px; margin: var(--s2) 0 var(--s4);
  border-radius: 6.4% / 19.4%; background: var(--moment);
  box-shadow: 0 0 0 1px var(--red-line);
}
.crop-live img { width: 100%; }
.guide-extras {
  margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--red-line);
  display: grid; grid-template-columns: minmax(0, 44rem); gap: var(--s5) var(--s7);
}
/* The sonar, ping by ping (Sonar.swift); labels are HTML so they never shrink with the drawing */
.sonar { margin: var(--s5) 0 0; position: relative; }
.sonar-art { width: 100%; height: auto; overflow: visible; }
.sonar-base { stroke: var(--red-line); stroke-width: 1.5; }
.sonar-pings line { stroke: var(--red); stroke-opacity: .32; stroke-width: 1.5; }
.sonar-pings circle { fill: var(--red); }
.sonar-y, .sonar-x { font-size: var(--fs-small); line-height: 1.3; color: var(--red-text); margin: 0; max-width: none; }
.sonar-y { margin-bottom: var(--s2); }
.sonar-x { position: relative; height: 1.4em; margin-top: 6px; }
.sonar-x span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sonar-x span:first-child { transform: none; left: 0 !important; }
.sonar-x .end { left: auto; right: 0; transform: none; }
.sonar figcaption { margin-top: var(--s3); font-size: var(--fs-small); color: var(--red-text); }

.guide, .globe { position: relative; }
.guide::before, .guide::after, .globe::before, .globe::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--band); pointer-events: none;
}
.guide::before { bottom: 100%; background: linear-gradient(transparent, var(--moment)); }
.guide::after { top: 100%; background: linear-gradient(var(--moment), transparent); }
.globe::before { bottom: 100%; background: linear-gradient(transparent, var(--space)); }
.globe::after { top: 100%; background: linear-gradient(var(--space), transparent); }

/* ---------- The sky now ---------- */
.sky { background: linear-gradient(var(--moment), var(--sky-18-top) 40%, var(--deep)); }
.sky-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 340px);
  grid-template-areas: "head phone" "note phone" "rest phone";
  column-gap: clamp(48px, 8vw, 128px);
  align-items: start;
}
.sky-head { grid-area: head; }
.sky-rest { grid-area: rest; }
.sky-phone { grid-area: phone; }
.sky-note { grid-area: note; }
.sky-note p { color: var(--text-2); }
.overhead { margin-top: var(--s7); }
.overhead > p { color: var(--text-2); }
.reasons { list-style: none; margin: var(--s5) 0 0; padding: 0; }
.reasons li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--line); color: var(--text-2);
}
.reasons li:first-child { border-top: 0; }


/* ---------- The globe ---------- */
.globe { background: var(--space); padding-top: var(--band); }
.globe-film { margin: clamp(32px, 4vw, 56px) 0 0; }
.globe-film video {
  display: block; width: 100%; height: auto; background: var(--space);
  aspect-ratio: 1200 / 560; object-fit: cover; object-position: 50% 52%;
}
/* The soft top and bottom edges only while it plays by itself: nothing may fade the player's controls. */
.globe-film video:not([controls]) {
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.globe-after { padding-bottom: var(--band); }
.legend {
  list-style: none; padding: 0; margin: var(--s6) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7);
}
.legend li { display: flex; gap: var(--s3); align-items: baseline; max-width: 22rem; color: var(--text-2); font-size: var(--fs-small); }
.legend strong { color: var(--text); }
.globe-pair {
  display: grid; grid-template-columns: minmax(200px, 290px) 1fr minmax(200px, 290px);
  gap: clamp(32px, 5vw, 72px); align-items: center;
  margin-top: clamp(64px, 8vw, 112px);
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .globe-pair { grid-template-columns: minmax(180px, 250px) minmax(22rem, 1fr) minmax(180px, 250px); }
}
.globe-note p { color: var(--text-2); }
.globe-note p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--text); }

.globe-film { position: relative; }
/* Phones (site.js): the round window on the planet, x 277–922, y 175–820 of the 1200 × 900 clip, and one button */
.film-play {
  position: absolute; z-index: 1; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(5, 8, 26, .78); border: 1px solid rgba(231, 236, 251, .28);
}
.globe-film .vid-toggle { right: var(--gutter); bottom: 16px; }
.film-play .i-pause, .is-playing .film-play .i-play { display: none; }
.is-playing .film-play .i-pause { display: inline; }
@media (max-width: 899.98px) {
  .globe-film.film-custom { aspect-ratio: 1 / 1; overflow: hidden; max-width: 560px; margin-inline: auto; }
  .globe-film.film-custom::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(closest-side, transparent 80%, var(--space));
  }
  .film-custom video {
    width: 186%; max-width: none; aspect-ratio: 1200 / 900; object-fit: fill; margin: -27.1% 0 0 -43%;
  }
}

/* ---------- Explore ---------- */
.explore { background: linear-gradient(var(--space), var(--sky-18-top) 30%); }
.explore-head { max-width: 46rem; }
.renames { margin: var(--s7) 0 var(--s8); display: grid; gap: var(--s3); }
.renames h3 { font-size: var(--fs-body); color: var(--text-2); margin: 0 0 var(--s2); }
.renames p {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px;
  margin: 0; max-width: none;
  font-size: clamp(1.25rem, .95rem + 1.4vw, 2.125rem); line-height: 1.25;
}
.renames .raw { color: var(--text-3); letter-spacing: .03em; }
.renames .arrow { color: var(--accent); }
.renames .named { font-weight: 600; }
.explore-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) clamp(32px, 5vw, 72px); }
.explore-list h3 { font-size: 1.125rem; }
.explore-list p { color: var(--text-2); }

/* ---------- Free, and Satellity Pro (the purchase screen's night) ---------- */
.pro { background: linear-gradient(var(--sky-18-top), var(--sky-18-bottom)); padding-block: var(--band); }
.free-core { color: var(--text); max-width: 40em; }
.pro-night {
  position: relative; isolation: isolate;
  margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(130px, 14vw, 200px);
  background: radial-gradient(56% 220px at 50% 230px, rgba(157, 180, 255, .13), transparent);
}
.pro-sky { position: absolute; inset: 0 0 auto 0; height: clamp(150px, 16vw, 230px); z-index: -1; pointer-events: none; }
.pro-sky svg { display: block; width: 100%; height: 100%; }
.train-cars { animation: train 28s linear -11s 2 forwards; }
.pro-night.train-still .train-cars { transform: translateX(980px); animation: train-settle 1.6s var(--ease-out) both; }
@keyframes train-settle { from { opacity: 0; } }
@keyframes train { from { transform: translateX(-420px); } to { transform: translateX(1900px); } }
html.has-io .pro-night:not(.in-view) .train-cars { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .train-cars { animation: none; transform: translateX(980px); } }

.pro-lockup { display: flex; align-items: center; gap: var(--s4); margin: 0 0 var(--s5); font-size: inherit; }
.pro-icon { width: 64px; height: 64px; border-radius: 22.4%; box-shadow: 0 0 0 1px rgba(157, 180, 255, .2); }
.pro-mark { display: inline-flex; align-items: center; gap: 10px; }
.pro-mark img { height: 40px; width: auto; }
.pro-line {
  margin: 0; max-width: 22ch;
  font-family: var(--font-brand); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.625rem); line-height: 1.12;
}
.pro-terms { margin-top: var(--s4); color: var(--text-2); max-width: 40em; }
/* The eight Pro features: a typographic list, name and line, never an icon grid */
.pro-features { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 64rem; border-bottom: 1px solid var(--line); }
.pro-features > div {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4px var(--s6);
  padding: var(--s4) 0; border-top: 1px solid var(--line); align-items: baseline;
}
.pro-features dt { font-weight: 600; font-size: 1.125rem; line-height: 1.35; text-wrap: balance; }
.pro-more { display: none; }
.pro-features dd { margin: 0; color: var(--text-2); }

/* ---------- Privacy ---------- */
.privacy { background: linear-gradient(var(--sky-18-bottom), var(--deep)); }
.privacy-big, .this-page {
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); line-height: 1.35; font-weight: 600; color: var(--text);
}
.privacy-big { margin: 0 0 var(--s7); }
.privacy-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 96px);
}
.privacy-list li { padding: var(--s4) 0; border-top: 1px solid var(--line); color: var(--text-2); }
.this-page { margin: var(--s7) 0 0; max-width: 32em; }

/* ---------- Closing: full darkness ---------- */
.closing { background: linear-gradient(var(--deep), var(--space)); padding-block: clamp(88px, 11vw, 168px); text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing-icon {
  width: 96px; height: 96px; border-radius: 22.4%;
  box-shadow: 0 0 0 1px rgba(157, 180, 255, .2), 0 24px 70px -18px rgba(157, 180, 255, .3);
}
.closing h2 { margin: var(--s6) 0 0; }
.closing-line { margin: var(--s4) auto var(--s6); max-width: 28em; color: var(--text-2); font-size: var(--fs-lead); line-height: 1.5; }

/* ---------- Footer ---------- */
.site-footer { background: var(--space); padding: var(--s8) 0 var(--s7); border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s6) clamp(40px, 7vw, 112px); }
.footer-brand img { height: 34px; width: auto; margin-bottom: var(--s4); }
.footer-brand p { color: var(--text-2); font-size: var(--fs-small); }
.footer-brand nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: var(--s3); font-size: var(--fs-small); }
.footer-brand nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.credits h2 { font-family: var(--font-ui); font-size: var(--fs-small); letter-spacing: 0; margin-bottom: var(--s4); }
.credits > summary { color: var(--text); }
.credits[open] > summary { margin-bottom: var(--s3); }
.credit-list {
  margin: 0 0 var(--s5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s6);
  font-size: var(--fs-caption); line-height: 1.5;
}
.credit-list dt { color: var(--text-3); text-wrap: balance; }
.credit-list dd { margin: 1px 0 0; color: var(--text-2); }
.credits p { font-size: var(--fs-caption); line-height: 1.6; color: var(--text-3); max-width: 80ch; margin: var(--s2) 0 0; }
.credits a { color: inherit; text-decoration-color: rgba(231, 236, 251, .4); text-underline-offset: 2px; }
.credits a:hover { color: var(--text); }
.maker { grid-column: 1 / -1; margin: var(--s5) 0 0; font-size: var(--fs-small); color: var(--text-2); }

/* ---------- Narrow screens (section grids) ---------- */
@media (max-width: 959.98px) {
  .tonight-grid, .guide-grid, .sky-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "card" "rest";
  }
  .tonight-grid { grid-template-areas: "head" "card" "answer" "rest"; }
  .guide-grid { grid-template-areas: "head" "media" "rest"; }
  /* The phones beside their note or caption (VD-7) */
  .sky-grid { grid-template-columns: min(56%, 260px) minmax(0, 1fr); grid-template-areas: "head head" "phone note" "rest rest"; column-gap: var(--s5); }
  .sky-note { align-self: center; }
  .tonight-card, .guide-media { position: static; }
  .tonight-card { width: min(100%, 420px); margin: var(--s6) 0 0; }
  .guide-media { margin: var(--s7) 0 0; display: grid; grid-template-columns: min(56%, 280px) minmax(0, 1fr); gap: var(--s5); align-items: end; }
  .guide-media .caption { margin: 0; }
  .sky-phone { margin: var(--s6) 0; }
  .sky-moon { margin-top: var(--s6); }
  .score-grid, .proof-items, .explore-list, .footer-grid, .privacy-list { grid-template-columns: 1fr; }
  /* The globe legend: one row of swatches; the hero drawing and "What's overhead?" already say what they mean */
  .legend { gap: var(--s2) var(--s5); }
  .legend li { max-width: none; }
  .legend-why { display: none; }
  .proof-items article:first-child { grid-row: auto; }
  .globe-pair { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "note note"; }
  .globe-pair > figure:first-child { grid-area: a; }
  .globe-pair > figure:last-child { grid-area: b; }
  .globe-note { grid-area: note; }
}
@media (max-width: 639.98px) {
  /* A square window on the planet: object-fit crops the clip, so the player's controls stay whole */
  .globe-film video { aspect-ratio: 1 / 1; object-position: 50% 55%; }
  .answer-row { grid-template-columns: 1fr; }
  .fists { grid-template-columns: 1fr; }
  .fist-scale { max-width: 300px; }
  .guide-extras { grid-template-columns: 1fr; }
  .pro-features > div { grid-template-columns: 1fr; }
  /* Pro features: the names only, and one link to what each does (support); the credits run in */
  .pro-features > div { display: block; padding: var(--s3) 0; }
  .pro-features dt { font-size: var(--fs-body); }
  .pro-features dd { display: none; }
  .pro-more { display: block; margin-top: var(--s4); }
  .credit-list { display: block; }
  .credit-list > div, .credit-list dt, .credit-list dd { display: inline; }
  .credit-list dt::after { content: ": "; }
  .credit-list dd::after { content: ". "; }
  .privacy-list li { padding: var(--s3) 0; }
  /* The globe on phones: one screen beside its note; the belt is in the film already */
  .globe-pair { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-areas: "a note"; gap: var(--s5); align-items: start; margin-top: var(--s7); }
  .globe-pair > figure:last-child { display: none; }
  .globe-note p:first-child { font-size: var(--fs-body); }
  .pro-night { padding-top: 112px; }
}
@media (max-width: 359.98px) {
  .sky-grid { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "note" "rest"; }
  .sky-phone { width: min(70%, 260px); }
}

/* ==========================================================================
   6. Pages: legal and support
   ========================================================================== */
/* privacy/, support/, es/privacidad/, es/soporte/ and 404.html. Long-form reading on the night ground: a 68-character
   measure, a taller line for light on dark, plain headings. These pages run no JavaScript, so their masthead is
   static (no data-masthead: the scroll clock never starts) and a question is a heading with an id, never a
   closed <details> a link could not open. */
.page { --masthead-bg: rgb(5 9 24 / .92); }
.page .topnav { gap: 20px; }
.page .topnav a:not(.lang) { display: inline-flex; align-items: center; }   /* the page's own links stay on phones */
@media (max-width: 479.98px) { .page .topnav { gap: 12px; } .page .masthead { gap: var(--s3); } }
/* Under 380 px the masthead can't hold the wordmark and three links: the current page's own link goes (it is the h1). */
@media (max-width: 379.98px) { .page .topnav a[aria-current] { display: none; } }

.doc { padding-block: clamp(32px, 6vw, 80px) var(--band); }
.doc-head { margin-bottom: clamp(32px, 5vw, 56px); }
.doc-kicker { margin: 0 0 var(--s3); font-size: var(--fs-small); color: var(--text-2); }
.doc h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; }
.doc-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s5); margin: var(--s4) 0 0; font-size: var(--fs-small); color: var(--text-2); max-width: none; }
.doc-meta a { display: inline-flex; align-items: center; min-height: 44px; }

.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
@media (min-width: 1000px) {
  .doc-layout { grid-template-columns: 15.5rem minmax(0, 44rem); gap: clamp(48px, 6vw, 96px); align-items: start; }
}

/* In-page index: a sticky column on wide screens; under 1000 px only the support page keeps it, as a row of chips */
.doc-toc { font-size: var(--fs-small); }
.doc .doc-toc h2 { font: 600 var(--fs-caption)/1.3 var(--font-ui); letter-spacing: .01em; color: var(--text-3); margin: 0 0 var(--s3); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc a { display: block; padding: 6px 0; color: var(--text-2); text-decoration: none; line-height: 1.35; }
.doc-toc a:hover { color: var(--text); }
.doc-toc ol ol { margin: 0 0 var(--s3) var(--s3); font-size: var(--fs-caption); }
.doc-toc ol ol a { padding: 4px 0; color: var(--text-3); }
.doc-toc ol ol a:hover { color: var(--text); }
@media (min-width: 1000px) {
  .doc-toc { position: sticky; top: calc(var(--masthead-h) + 24px); max-height: calc(100vh - var(--masthead-h) - 48px); overflow-y: auto; padding-right: var(--s3); }
}
@media (max-width: 999.98px) {
  .doc-toc { display: none; }
  .doc-toc.keep { display: block; }
  .doc-toc.keep ol ol { display: none; }
  .doc-toc.keep > ol { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .doc-toc.keep a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--accent-tint); color: var(--on-accent-tint); }
  .doc-toc.keep a:hover { color: var(--text); }
}

/* The text itself */
.doc-body { font-size: var(--fs-body); line-height: 1.72; }
.doc-body > section { margin-top: clamp(40px, 6vw, 64px); }
.doc-body > section:first-child { margin-top: 0; }
.doc h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s4); }
.doc h3 { font: 600 1.1875rem/1.35 var(--font-ui); letter-spacing: 0; margin: var(--s6) 0 var(--s2); }
.doc h2 + h3 { margin-top: var(--s5); }
.doc-body p, .doc-body li, .doc-body dd { max-width: 68ch; }
.doc-body ul, .doc-body ol.plain { margin: 0 0 1em; padding-left: 1.25em; }
.doc-body li { margin-bottom: .55em; padding-left: .2em; }
.doc-body li::marker { color: var(--text-3); }
.doc-body li:last-child { margin-bottom: 0; }
.doc-body ul + p, .doc-body ol.plain + p { margin-top: 1em; }
.doc-body a { overflow-wrap: anywhere; }
.doc-body h2:target, .doc-body h3:target { text-decoration: underline; text-decoration-color: var(--accent-tint); text-decoration-thickness: 2px; text-underline-offset: .2em; }

/* "In short" and the sun-safety notice: one raised panel each, no stripe, no icon */
.doc-summary, .doc-note {
  padding: var(--s5) var(--s5) var(--s4); border: 1px solid var(--line); border-radius: var(--radius-row);
  background: var(--surface-raised);
}
.doc-summary h2, .doc-note h2 { margin-bottom: var(--s3); }
.doc-summary ul { margin-bottom: var(--s2); }
.doc-note p:last-child { margin-bottom: var(--s2); }
@media (max-width: 479.98px) { .doc-summary, .doc-note { padding: var(--s4) var(--s4) var(--s3); } }

/* Contact: the one action of the support page */
.doc-contact { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin: var(--s5) 0 var(--s4); }
.doc-contact .button { padding: 0 24px; }
.doc-contact .address { font-size: var(--fs-small); color: var(--text-2); margin: 0; }

/* Credits on the support page: the footer's list, with room to read */
.doc-body .credit-list { grid-template-columns: 1fr; gap: var(--s4); font-size: var(--fs-small); margin: var(--s4) 0 var(--s5); }
.doc-body .credit-list dt { color: var(--text-2); font-weight: 600; }
.doc-body .credit-list dd { color: var(--text-2); margin-top: 2px; }

/* The 404: a satellite crossing into Earth's shadow, drawn once and still */
.lost { padding-block: clamp(32px, 6vw, 72px) var(--band); }
.lost-inner { max-width: 52rem; }
.lost-art { width: 100%; height: auto; margin-bottom: var(--s6); border-radius: var(--radius-row); }
.lost h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 var(--s3); }
.lost-block { margin-top: var(--s5); max-width: 44rem; }
.lost-block + .lost-block { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.lost-block h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 var(--s3); }
.lost-block p { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.lost-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s5); }
.lost-links a:not(.button) { display: inline-flex; align-items: center; min-height: 44px; }
.lost-more { display: inline-flex; gap: var(--s4); }

/* Print: dark ink on white, no chrome, and the address of every outside link after its text */
@media print {
  .page { --text: #000; --text-2: #1a1a1a; --text-3: #3a3a3a; --line: #bbb; --accent: #0a2a9a; --accent-hover: #0a2a9a;
          --on-accent-tint: #0a2a9a; --accent-tint: transparent; --surface-raised: transparent; --ground: #fff; --space: #fff; }
  html, body.page { background: #fff; }
  .page .masthead, .page .skip, .page .doc-toc, .page .site-footer nav, .page .doc-meta a, .page .button { display: none; }
  .page .doc { padding-block: 0; }
  .page .doc-layout { display: block; }
  .page .doc-summary, .page .doc-note { border-color: #888; }
  .page .doc-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; word-break: break-all; }
  .page .doc-body h2, .page .doc-body h3 { break-after: avoid-page; }
  .page .site-footer { background: #fff; border-color: #888; padding-top: var(--s5); }
  .page .site-footer img { filter: invert(1); }
}

/* ==========================================================================
   7. Utilities
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; display: inline-flex; align-items: center; min-height: 44px; }
.skip:focus { left: 16px; background: var(--accent); color: var(--on-accent); padding: 0 16px; border-radius: 10px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .masthead::after { transition: none; }
}