/* Fastrr's Dusk tokens (the app's AppColors / GlanceTints): paper by day, night after dark. */
:root {
  color-scheme: light dark;
  --ground: #F6F3EE;
  --ink: #1B1A1F;
  --ink-2: #4A4752;
  --ink-3: #6B6873;
  --ember: #B4501E;
  --hairline: rgb(27 26 31 / 0.12);
  --track: rgb(27 26 31 / 0.06);
  --pearl: #FFFDF9;
  --glow: 0.22;
  --halo: rgb(210 70 94 / 0.07), rgb(184 105 42 / 0.03) 55%;
  --tail: 18deg;
  --panel: #EFEAE2;
  --frame: #1E1D23;
  --frame-rim: rgb(255 255 255 / 0.10);
  --frame-edge: transparent;
  --drop: rgb(27 26 31 / 0.28);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0B0B10;
    --ink: #F4EFE8;
    --ink-2: #C9C4CF;
    --ink-3: #9A96A3;
    --ember: #F08A55;
    --hairline: rgb(244 239 232 / 0.12);
    --track: rgb(244 239 232 / 0.06);
    --pearl: #F4EFE8;
    --glow: 0.34;
    --halo: rgb(176 62 154 / 0.34), rgb(118 80 216 / 0.11) 55%;
    --tail: 46deg;
    --panel: #17161D;
    --frame: #17161C;
    --frame-rim: rgb(244 239 232 / 0.16);
    --frame-edge: rgb(244 239 232 / 0.12);
    --drop: rgb(240 138 85 / 0.14);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

/* The dusk ring, as in the app icon and splash: copper tail through rose, magenta and violet to a pearl head. */
.ring { --s: 240px; --h: 15.6%; --r: 44.1%; --a: 140deg; position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; }
.ring > span { position: absolute; border-radius: 50%; }
.ring .track, .ring .band {
  inset: 0;
  -webkit-mask: radial-gradient(farthest-side, transparent 76%, #000 76.6%);
  mask: radial-gradient(farthest-side, transparent 76%, #000 76.6%);
}
.ring .track { background: var(--track); }
.ring .band {
  background: conic-gradient(from calc(var(--a) - 300deg), rgb(184 105 42 / 0) 0deg, #B8692A var(--tail), #D2465E 105deg, #B03E9A 165deg,
    #7650D8 228deg, #5A57DD 286deg, #5A57DD 300deg, transparent 300.4deg);
}
.ring .head {
  /* centred on the band where it ends, --a round from twelve */
  width: var(--h); height: var(--h);
  left: calc(50% - var(--h) / 2 + var(--r) * sin(var(--a)));
  top: calc(50% - var(--h) / 2 - var(--r) * cos(var(--a)));
  background: var(--pearl);
}
.ring.mark { --s: 30px; --h: 22%; --r: 42.5%; }
.ring.mark .track, .ring.mark .band {
  -webkit-mask: radial-gradient(farthest-side, transparent 70%, #000 72%);
  mask: radial-gradient(farthest-side, transparent 70%, #000 72%);
}
.ring.mark .head { box-shadow: 0 0 0 1px rgb(27 26 31 / 0.18); }
@media (prefers-color-scheme: dark) { .ring.mark .head { box-shadow: 0 0 0 1px rgb(118 80 216 / 0.35); } }

/* Header, brand and the three-page nav (every page) */
.bar { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--ink); text-decoration: none;
  font: 400 22px/1 var(--serif); letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.bar-link { font-size: 15px; text-decoration: none; padding: 10px 0 10px 12px; }
.bar-link:hover { text-decoration: underline; }
nav[aria-label="Fastrr"] { display: flex; gap: 4px; flex-wrap: wrap; font-size: 15px; letter-spacing: 0.01em; }
nav[aria-label="Fastrr"] a { padding: 10px 14px; text-decoration: none; }
nav[aria-label="Fastrr"] a:first-child { padding-left: 0; }
nav[aria-label="Fastrr"] a:hover { text-decoration: underline; }
nav[aria-label="Fastrr"] a[aria-current="page"] { color: var(--ink-3); }

/* ——— The landing page ——— */
/* The header stays with the page as it scrolls; once the hero has gone by, it carries the App Store badge (launch switch) */
.top { position: sticky; top: 0; z-index: 10; background: var(--ground); }
.top .bar { position: relative; gap: 20px; padding-top: 12px; padding-bottom: 12px; }
.top .bar-link { margin-left: auto; }
.top .bar-link, .site-foot nav a { color: color-mix(in srgb, var(--ink) 62%, transparent); }
.top .bar-link:hover, .site-foot nav a:hover { color: var(--ember); }
.bar-store { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); height: 40px; padding: 0 18px; font-size: 14px; }
/* "Support" holds the corner until the button takes it over (the footer keeps Support) */
@supports (animation-timeline: scroll()) {
  .top { animation: top-rule linear both; animation-timeline: scroll(); animation-range: 0 80px; }
  /* …and steps aside again while the close's own button comes into view */
  body { timeline-scope: --close; }
  .finale .store { view-timeline: --close; }
  .bar-store { animation: store-in linear both, store-out linear both; animation-timeline: scroll(), --close; animation-range: 70vh 95vh, entry 0% entry 60%; }
  .top:has(.bar-store:not([hidden])) .bar-link { animation: store-in linear reverse both, support-back linear forwards; animation-timeline: scroll(), --close; animation-range: 60vh 75vh, entry 0% entry 60%; }
}
@supports not (animation-timeline: scroll()) { .top:has(.bar-store:not([hidden])) .bar-link { display: none; } }
@keyframes top-rule { to { box-shadow: 0 1px 0 var(--hairline); } }
@keyframes store-in { from { opacity: 0; visibility: hidden; } }
@keyframes store-out { to { opacity: 0; visibility: hidden; } }
/* explicit both ends: an implicit one would take the hidden value store-in leaves underneath */
@keyframes support-back { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }

.wide { --gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right), 5vw); max-width: 1200px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 1360px) { .wide { --gutter: 64px; } }
/* A section's rule spans the content, not the gutters */
.ruled { position: relative; }
.ruled::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--hairline); }

.label, .index {
  margin: 0;
  color: var(--ink-2);
  font: 500 12px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
em { font-style: italic; letter-spacing: -0.01em; }
.lede { margin: 24px 0 0; max-width: 27em; color: var(--ink-2); font-size: clamp(18px, 4.6vw, 21px); line-height: 1.5; text-wrap: pretty; }
/* The download button (launch switch): the app's icon in an ink capsule, the one line about purchases below it */
.store { display: grid; justify-items: center; gap: 14px; }
.get, .bar-store {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--ink); color: var(--ground);
  font-weight: 600; letter-spacing: -0.005em; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--ease), scale 200ms var(--ease);
}
.get { gap: 12px; height: 52px; padding: 0 22px 0 8px; font-size: 16px; }
.get img { width: 36px; height: 36px; border-radius: 8px; outline: 1px solid rgb(255 255 255 / 0.24); outline-offset: -1px; }
@media (prefers-color-scheme: dark) { .get img { outline-color: rgb(27 26 31 / 0.12); } }
.get:hover, .bar-store:hover { background: color-mix(in srgb, var(--ink) 84%, var(--ember)); }
.get:active, .bar-store:active { scale: 0.98; }
.get:focus-visible, .bar-store:focus-visible { border-radius: 999px; }
.fine { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; }
.halo { position: absolute; inset: -12% -30%; background: radial-gradient(closest-side, var(--halo), transparent); pointer-events: none; }

/* The dusk ring, drawn thin: a solid copper start with a round cap, through rose, magenta and violet to a pearl head.
   --s size, --t stroke, --a where the head sits (clockwise from twelve); the band sweeps 300° behind it. */
.orbit { --t: 14px; --a: 40deg; --hd: calc(var(--t) * 1.75); position: relative; display: block; width: var(--s); height: var(--s); flex: none; }
.orbit > span { position: absolute; border-radius: 50%; }
.orbit .o-track, .orbit .o-band {
  inset: 0;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
}
.orbit .o-track { background: var(--track); }
.orbit .o-band { background: conic-gradient(from calc(var(--a) - 300deg), #B8692A 0deg, #B8692A 16deg, #D2465E 92deg, #B03E9A 158deg, #7650D8 224deg, #5A57DD 284deg, #5A57DD 300deg, transparent 300.3deg); }
.orbit .o-cap, .orbit .o-head {
  --ang: var(--a); --d: var(--hd);
  width: var(--d); height: var(--d);
  left: calc(50% - var(--d) / 2 + (var(--s) / 2 - var(--t) / 2) * sin(var(--ang)));
  top: calc(50% - var(--d) / 2 - (var(--s) / 2 - var(--t) / 2) * cos(var(--ang)));
}
.orbit .o-cap { --ang: calc(var(--a) - 300deg); --d: var(--t); background: #B8692A; }
.orbit .o-head { background: radial-gradient(circle at 35% 30%, #FFFFFF, #EDE6F5); box-shadow: 0 0 0 1px rgb(27 26 31 / 0.14), 0 0 24px rgb(108 92 231 / 0.45); filter: drop-shadow(0 1px 2px rgb(27 26 31 / 0.3)); }
@media (prefers-color-scheme: dark) { .orbit .o-head { filter: none; box-shadow: 0 0 24px rgb(108 92 231 / 0.45); } }

/* One phone size everywhere (the night band's watch grows instead): an iPhone drawn round a capture, edge to edge */
.device {
  --w: clamp(248px, 66vw, 320px);
  position: relative; display: block;
  width: var(--w);
  padding: calc(var(--w) * 0.03);
  border-radius: calc(var(--w) * 0.168);
  background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--frame-rim), 0 0 0 1px var(--frame-edge), 0 calc(var(--w) * 0.16) calc(var(--w) * 0.28) calc(var(--w) * -0.12) var(--drop);
}
.device img { width: 100%; border-radius: calc(var(--w) * 0.138); }
.watch {
  --w: clamp(132px, 36vw, 190px);
  position: relative; display: block;
  width: var(--w);
  padding: calc(var(--w) * 0.08);
  border-radius: calc(var(--w) * 0.29);
  background: var(--frame);
  box-shadow: inset 0 0 0 1px var(--frame-rim), 0 0 0 1px var(--frame-edge), 0 calc(var(--w) * 0.12) calc(var(--w) * 0.3) calc(var(--w) * -0.1) var(--drop);
}
.watch img { width: 100%; border-radius: calc(var(--w) * 0.19); }
.watch::after { /* the crown */
  content: ""; position: absolute; right: calc(var(--w) * -0.035); top: 24%;
  width: calc(var(--w) * 0.05); height: 17%; border-radius: 0 3px 3px 0; background: var(--frame);
  box-shadow: inset -1px 0 0 var(--frame-rim);
}

/* The hero: the ring as the title page, the headline inside it, the app below */
.hero { --ring: min(520px, 56svh, calc(100vw - 2 * var(--gutter))); display: grid; justify-items: center; text-align: center; overflow-x: clip; padding-top: clamp(16px, 3vh, 32px); padding-bottom: 120px; }
.hero-ring { position: relative; display: grid; place-items: center; }
.hero-ring > * { grid-area: 1 / 1; }
.hero .orbit { --s: var(--ring); --t: clamp(11px, calc(var(--ring) * 0.03), 16px); --a: 132deg; }
.hero .halo { inset: -8%; opacity: 0.5; }
@media (prefers-color-scheme: dark) { .hero .halo { opacity: 0.35; } }
.hero-title { display: grid; justify-items: center; padding: 0 13%; }
.hero-title .label { font-size: 11px; letter-spacing: 0.14em; margin-bottom: calc(var(--ring) * 0.04); }
.hero h1 { margin: 0; font: 400 calc(var(--ring) * 0.135)/1.02 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.hero .lede { margin: 28px auto 0; max-width: 40rem; }
.hero .lede { text-wrap: balance; }
@media (min-width: 600px) { .hero .lede span { display: block; } }
@media (max-width: 599px) { .hero .lede { max-width: 30ch; } }
.hero .store { margin-top: 32px; }

.hero .device { margin-top: 48px; }
@media (min-width: 900px) {
  .hero { --ring: min(clamp(400px, 34vw, 480px), 46vh); padding-top: 16px; }
  .hero .device { --w: 360px; margin-top: 72px; }
}

/* The chapters: words, then the picture, on one two-column grid with everything below */
.chapter { display: grid; gap: 40px; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(72px, 8vw, 112px); }
.night + .ruled::before { display: none; }
.copy > .index { margin-bottom: 22px; }
.copy h2 { margin: 0; font: 400 clamp(34px, 8.6vw, 48px)/1.06 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.copy p:not(.index) { margin: 20px 0 0; max-width: 33em; color: var(--ink-2); text-wrap: pretty; }
.copy .note { margin-top: 16px; color: var(--ink-3); font-size: 14px; }
.visual { margin: 0; display: grid; place-items: center; }

/* 01 */
.plans { margin-top: 40px !important; color: var(--ink-2); font: 400 clamp(15px, 4.8vw, 19px)/1.6 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.plans > span { display: block; }
.plans .label { margin-bottom: 6px; }
.plans .row { white-space: nowrap; }
.plans .or { color: var(--ink-3); font: 15px/1.6 var(--sans); }
.plans b { color: var(--ember); font-weight: 400; }
.day { width: 100%; max-width: 26rem; place-items: stretch; }
.window { display: flex; align-items: flex-end; gap: 16px; margin: 0; font: 300 clamp(44px, 12vw, 56px)/1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.window small { display: block; margin-bottom: 12px; color: var(--ink-3); font: 500 12px/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.window .to { color: var(--ink-3); font-size: 0.5em; padding-bottom: 0.18em; }
.bar24 { position: relative; display: block; height: 10px; margin-top: 32px; border-radius: 5px; background: var(--track); }
.bar24 .fast {
  position: absolute; left: 8.333%; width: 66.667%; top: 0; bottom: 0; border-radius: 5px;
  /* 16 hours from 20:00: copper 0–4h, rose 4–12h, magenta 12–16h, the head turning violet */
  background: linear-gradient(90deg, #B8692A, #D2465E 30%, #D2465E 66%, #B03E9A 86%, #7650D8);
}
.hours { position: relative; display: block; height: 1.5em; margin-top: 16px; color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.hours span { position: absolute; top: 0; transform: translateX(-50%); }
.hours span::before { content: ""; position: absolute; left: 50%; top: -10px; width: 1px; height: 5px; background: var(--hairline); }
.hours span:nth-child(1) { left: 0; } .hours span:nth-child(2) { left: 25%; } .hours span:nth-child(3) { left: 50%; }
.hours span:nth-child(4) { left: 75%; } .hours span:nth-child(5) { left: 100%; }
.hours span:first-child { transform: none; } .hours span:first-child::before { left: 0; }
.hours span:last-child { transform: translateX(-100%); } .hours span:last-child::before { left: 100%; }
.day figcaption { margin-top: 20px; color: var(--ink-3); font-size: 14px; }

/* 02: the app's phase dial: 48 hours round, each phase an arc in its colour, filling as it scrolls in; the names at their arcs
   on wide screens, the list below it on phones (the list is also what assistive tech reads) */
.dial-figure { container-type: inline-size; }
.dial-figure { width: 100%; gap: 28px; }
.dial-figure figcaption { color: var(--ink-3); font-size: 14px; text-align: center; }
.dial { --s: min(340px, calc(100cqi - 64px)); --t: 13px; position: relative; width: var(--s); height: var(--s); }
.dial > span { position: absolute; }
.d-track, .d-arcs { inset: 0; border-radius: 50%;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px)); }
.d-track { display: none; }
.d-arcs { background: conic-gradient(#B8692A 0deg 35deg, transparent 0 37deg, #D2465E 0 107deg, transparent 0 109deg, #B03E9A 0 143deg, transparent 0 145deg,
  #7650D8 0 179deg, transparent 0 181deg, #4F55D9 0 323deg, transparent 0 325deg, #2C68D8 0 358deg, transparent 0); }
.d-hour { --r: calc(var(--s) / 2 + 16px); left: calc(50% + var(--r) * sin(var(--ang))); top: calc(50% - var(--r) * cos(var(--ang))); transform: translate(-50%, -50%); white-space: nowrap; color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.d-hour { --ang: 0deg; }
/* the six phases inside the ring, as the app's ring holds its numbers */
.legend { position: absolute; inset: 0; margin: auto; width: max(calc(var(--s) * 0.62), min(200px, calc(var(--s) * 0.66))); height: fit-content; list-style: none; padding: 0; display: grid; gap: calc(var(--s) * 0.018); font-size: max(12px, calc(var(--s) * 0.038)); }
.legend li { display: flex; align-items: baseline; gap: 0.6em; }
.legend li span:last-child { margin-left: 0.6em; }
.legend li::before { content: ""; flex: none; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--c); transform: translateY(-0.05em); }
.legend li span:first-child { flex: 1; font-family: var(--serif); white-space: nowrap; }
.legend li span:last-child { color: var(--ink-3); font-size: max(12px, 0.8em); font-variant-numeric: tabular-nums; white-space: nowrap; }
.legend li:nth-child(1) { --c: #B8692A; } .legend li:nth-child(2) { --c: #D2465E; } .legend li:nth-child(3) { --c: #B03E9A; }
.legend li:nth-child(4) { --c: #7650D8; } .legend li:nth-child(5) { --c: #4F55D9; } .legend li:nth-child(6) { --c: #2C68D8; }
@property --fill { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .d-arcs {
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px)), conic-gradient(#000 var(--fill), transparent 0);
      mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px)), conic-gradient(#000 var(--fill), transparent 0);
      -webkit-mask-composite: source-in; mask-composite: intersect;
      animation: fill linear both; animation-timeline: view(); animation-range: entry 20% cover 55%;
    }
  }
}
@keyframes fill { from { --fill: 0deg; } }

/* 03: the big moment, a full-width band of night in both appearances, the Lock Screen and the watch large */
.night {
  --ground: #0B0B10; --ink: #F4EFE8; --ink-2: #C9C4CF; --ink-3: #9A96A3; --ember: #F08A55;
  --hairline: rgb(244 239 232 / 0.12); --pearl: #F4EFE8; --glow: 0.34;
  --halo: rgb(176 62 154 / 0.30), rgb(118 80 216 / 0.10) 55%;
  --frame: #17161C; --frame-rim: rgb(244 239 232 / 0.16); --frame-edge: rgb(244 239 232 / 0.12); --drop: rgb(0 0 0 / 0.6);
  --ember-glow: 0.16;
  background: radial-gradient(50% 42% at 56% 66%, rgb(240 138 85 / var(--ember-glow)), transparent 72%), var(--ground); color: var(--ink); overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  .night { --ground: transparent; --ember-glow: 0.2; background: radial-gradient(70% 62% at 54% 48%, rgb(240 138 85 / var(--ember-glow)), transparent 72%); }
  .night-inner { position: relative; padding-top: 60px; padding-bottom: 64px; }
  .night-inner::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--hairline); }
  .night + .ruled::before { display: block; }
}
.night-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; padding-top: 96px; padding-bottom: 104px; text-align: center; }
.night .copy { max-width: 40rem; }
.night .copy p { margin-left: auto; margin-right: auto; max-width: 46ch; text-wrap: balance; }
.stage-note { margin: -16px 0 0; color: rgb(244 239 232 / 0.75); font-size: 14px; }
.pair-caption { display: none; margin: 0; color: rgb(244 239 232 / 0.75); font-size: 13px; letter-spacing: 0.02em; }
@media (max-width: 599px) {
  .night-inner { text-align: left; justify-items: stretch; }
  .night .copy p { margin-left: 0; text-wrap: pretty; }
  .stage-note { text-align: center; }
}
.stage { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(16px, 4vw, 40px); }
.stage figure { position: relative; margin: 0; display: grid; justify-items: center; gap: 16px; }
.stage figcaption { color: rgb(244 239 232 / 0.75); font-size: 13px; letter-spacing: 0.02em; }
.stage .device { --w: clamp(190px, 50vw, 300px); }
.stage .watch { --w: clamp(118px, 31vw, 186px); }
@media (max-width: 599px) {
  .stage { display: block; width: calc(86vw - 16px); margin: 0 auto; }
  .stage .lock-fig { margin-left: auto; width: fit-content; }
  .stage .device { --w: 72vw; }
  .stage .watch-fig { position: absolute; left: 0; top: 33%; z-index: 1; } /* clear of the Lock Screen widget above and the Live Activity below */
  .stage .watch { --w: 40vw; }
  .stage figcaption { display: none; }
  .pair-caption { display: block; text-align: center; }
}

/* 04: a compact strip of four */
.fact h2 { margin: 18px 0 0; font: 400 clamp(30px, 7.5vw, 40px)/1.12 var(--serif); letter-spacing: -0.015em; text-wrap: balance; }
.strip-list { display: grid; margin: 32px 0 0; border-top: 1px solid var(--hairline); }
.strip-list div { padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.strip-list dt { font-family: var(--serif); font-size: 19px; line-height: 1.35; }
.strip-list dd { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
@media (prefers-color-scheme: light) { .device .night-only { display: none; } }
@media (prefers-color-scheme: dark) { .device .day-only { display: none; } }

/* 05–06 on a tinted band, the same two columns as the chapters */
.tint { background: var(--panel); }
.tint a { color: #A54A1B; }
@media (prefers-color-scheme: dark) { .tint a { color: var(--ember); } }
.facts { display: grid; gap: 64px; padding-top: 72px; padding-bottom: 72px; }
.fact h2 { max-width: 13em; }
.fact .fact-body .aside { color: var(--ink-3); font-size: 15px; }
.fact p:not(.index) { margin: 16px 0 0; max-width: 34em; color: var(--ink-2); font-size: 16px; line-height: 1.6; text-wrap: pretty; }

/* The close: the ring again, with the name in it */
.finale { display: grid; justify-items: center; text-align: center; padding-top: 104px; padding-bottom: 72px; overflow-x: clip; }
.finale-mark { position: relative; display: grid; place-items: center; }
.finale-mark > * { grid-area: 1 / 1; }
.finale .orbit { --s: clamp(272px, 74vw, 420px); --t: clamp(9px, 2.4vw, 12px); --a: 0deg; }
.finale .o-band { background: conic-gradient(#B8692A, #D2465E 100deg, #B03E9A 180deg, #7650D8 262deg, #5A57DD); }
.finale .o-cap { display: none; }
.finale .halo { inset: -18%; opacity: 0.5; }
.finale h2 { margin: 0; font: 400 clamp(48px, 13vw, 72px)/1 var(--serif); letter-spacing: -0.025em; }
.finale-line { margin: 36px 0 0; }
.finale .store { margin: 36px 0 0; }

.site-foot { padding-top: 40px; padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
.site-foot nav { margin-bottom: 20px; }
.site-foot p { margin: 12px 0 0; max-width: 46rem; color: var(--ink-3); font-size: 13px; line-height: 1.6; }

@media (min-width: 900px) {
  .chapter, .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; }
  .chapter.plan { align-items: start; }
  .dial-chapter .dial-figure { order: -1; }
  .plan .visual { padding-top: 14px; }
  .chapter { align-items: center; }
  .chapter .visual { justify-self: stretch; }
  .day { max-width: none; }
  .facts { grid-template-rows: auto auto 1fr; row-gap: 0; }
  .fact { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .fact h2 { font-size: 2.25rem; max-width: none; }
  #safety-title { max-width: 9em; }
  .window { font-size: clamp(40px, 3.9vw, 56px); }
  .night-inner { padding-top: 112px; padding-bottom: 112px; gap: 72px; }
  .stage-note { margin-top: -32px; }
}
@media (min-width: 900px) and (prefers-color-scheme: dark) {
  .night-inner { padding-top: 88px; padding-bottom: 92px; }
  .facts { padding-top: 120px; padding-bottom: 120px; }
}
@media (min-width: 1024px) {
  .finale { padding-top: 120px; padding-bottom: 96px; }
}

/* One signature motion and one entrance each, only for those who want motion: the hero ring draws itself from its copper
   start to the pearl, then sections rise as they arrive. The text never waits. */
@property --sweep { syntax: "<angle>"; inherits: false; initial-value: 300deg; }
@media (prefers-reduced-motion: no-preference) {
  .hero .o-band {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px)), conic-gradient(from calc(var(--a) - 300deg), #000 var(--sweep), transparent 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--t)), #000 calc(100% - var(--t) + 1px)), conic-gradient(from calc(var(--a) - 300deg), #000 var(--sweep), transparent 0);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    animation: draw 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero .o-head { animation: appear 240ms 1.4s both; }
  @supports (animation-timeline: view()) {
    .chapter > *, .night .copy, .stage, .fact, .strip > *, .finale > * { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% entry 45%; }
  }
}
@keyframes draw { from { --sweep: 0deg; } }
@keyframes appear { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ——— Support, Privacy, Terms, 404 ——— */
.doc-page .bar, .doc, .foot { max-width: 42rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.doc { padding-top: 8px; padding-bottom: 24px; overflow-wrap: break-word; }
.doc h1 {
  margin: 48px 0 28px;
  font: 400 clamp(34px, 9vw, 46px)/1.1 var(--serif);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.doc h2 {
  margin: 52px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font: 500 clamp(23px, 6vw, 26px)/1.25 var(--serif);
  letter-spacing: -0.01em;
}
.doc h3 { margin: 32px 0 8px; font: 600 19px/1.35 var(--serif); }
.doc p, .doc li { color: var(--ink-2); }
.doc p { margin: 0 0 16px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { margin: 0 0 18px; padding-left: 1.2em; }
.doc li { margin: 6px 0; padding-left: 0.2em; }
.doc li::marker { color: var(--ink-3); }
.doc li > ul { margin: 6px 0 0; }
.doc hr { margin: 44px 0 28px; border: 0; border-top: 1px solid var(--hairline); }
.foot { padding-top: 32px; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.foot nav { border-top: 1px solid var(--hairline); padding-top: 12px; }

@media (min-width: 720px) {
  .doc-page .bar { padding-top: 40px; }
  .doc h1 { margin-top: 72px; }
}