/* LINK — direction 2a Neon Clash, calm face.
   Tokens come from brand/tokens.json. Two hard rules carried over from the
   brand board:
     1. The accent is a FILL only. Lime never sets type on a light surface.
     2. Magenta is the loud face (posters). The site is the calm face — dark
        surfaces, one fill, one cool accent, and no magenta at all.
   The single exception is the OG image, which the board draws in the loud
   treatment; that lives in tools/og.html, not here. */

/* ── fonts ──────────────────────────────────────────────────────────────── */
/* Latin subsets only, self-hosted, taken from the Google Fonts woff2 files
   embedded in the brand board. Both families are SIL OFL. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Variable across 400–600: one file covers body, labels and buttons. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/plex-mono-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */

/* Colours come from brand/tokens.json at build time — that file is the single
   source of truth, and these are substituted, not copied. */
:root {
  --ink: #0A0A0C;
  --surface: #141419;
  --paper: #F2F0EB;
  --accent: #B6FF00;
  --cool: #00E5FF;

  /* Neutrals lifted from the board: hairline, border, three text greys. */
  --hairline: #26262e;
  --border: #33333d;
  --text: #F2F0EB;
  --text-soft: #c7c7d2;
  --text-muted: #8a8a96;
  /* Lifted from the board's #6E6E7A, which is 3.9:1 on ink and fails AA for
     text this size. See linkTextFaint in brand/tokens.json for the reasoning. */
  --text-faint: #808090;

  --display: Anton, 'Helvetica Neue', Impact, sans-serif;
  --ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'SF Pro', Helvetica, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-button: 14px;
  --r-card: 16px;
  --r-sheet: 20px;
  --r-pill: 999px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  --gutter: 20px;
  --measure: 620px;
  --shell: 1080px;

  /* The brand's scanline texture. Used twice: hero and manifesto. */
  --scanlines: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.045) 0 3px,
    transparent 3px 6px
  );
}

/* ── reset ──────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

button,
input {
  font: inherit;
  color: inherit;
}

ul[role='list'] {
  list-style: none;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── focus ─────────────────────────────────────────────────────────────── */

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

.skip-link {
  position: absolute;
  left: var(--s3);
  top: -100px;
  z-index: 100;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-button);
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--s3);
  color: var(--ink);
}

/* ── launch mode ───────────────────────────────────────────────────────── */
/* The Worker stamps data-prelaunch on <html> from the PRELAUNCH variable, so
   one flag drives both /download and the copy on the one-pager and the two can
   never drift. Pre-launch is what you get if nothing stamps it. */

[data-mode] {
  display: none;
}

html:not([data-prelaunch='false']) [data-mode='prelaunch'],
html[data-prelaunch='false'] [data-mode='launched'] {
  display: block;
}

html:not([data-prelaunch='false']) [data-mode='prelaunch'].inline,
html[data-prelaunch='false'] [data-mode='launched'].inline {
  display: inline;
}

/* ── type ──────────────────────────────────────────────────────────────── */

.display-xl,
.display-l {
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-xl {
  font-size: clamp(44px, 13vw, 68px);
}

.display-l {
  font-size: clamp(30px, 8vw, 40px);
}

.body {
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-soft);
}

.label {
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
}

/* The mono eyebrow that runs above every block on the brand board. */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.eyebrow--cool {
  color: var(--cool);
}

a {
  color: var(--cool);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

.prose a,
.site-footer a:not(.social-link):not(.wordmark) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ── layout ────────────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 56px;
  border-top: 1px solid var(--hairline);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s6);
}

.section__lede {
  max-width: var(--measure);
}

@media (min-width: 720px) {
  :root {
    --gutter: 32px;
  }

  .section {
    padding-block: 88px;
  }
}

/* ── wordmark ──────────────────────────────────────────────────────────── */
/* One component, as the brief's open item asks: a trademark modifier bolts on
   here and nowhere else. Skew is fixed at -8deg and never re-skewed. */

.mark {
  width: 100%;
  height: auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The mark is 28px, but the thing you tap has to be 44. */
  min-height: 44px;
  color: var(--text);
}

.wordmark:hover {
  color: var(--text);
}

.wordmark__mark {
  flex: none;
  width: 28px;
  color: var(--accent);
}

.wordmark__type {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.03em;
  transform: skewX(-8deg);
  /* Anton sits low in its box; nudge the optical baseline back up. */
  padding-top: 2px;
}

/* ── header ────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
  padding-block: var(--s3);
}

/* Small type, full-size hit area. Applies to the header's text link and the
   footer's nav — both are controls, not words in a sentence. */
.site-header__inner a.eyebrow,
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Short labels like "Terms" are narrower than they are tappable. */
  min-width: 44px;
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 52px;
  padding: 15px var(--s5);
  border: none;
  border-radius: var(--r-button);
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.btn:active {
  transform: scale(0.985);
}

.btn--primary {
  background: var(--accent);
  color: var(--ink);
}

.btn--primary:hover {
  background: #c6ff34;
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border);
  font-weight: 500;
}

.btn--ghost:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn[disabled] {
  background: var(--hairline);
  color: var(--text-faint);
  cursor: not-allowed;
  transform: none;
}

/* The signature button: full-width on mobile, content-width on desktop. */
.cta {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.cta__note {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (min-width: 720px) {
  .cta .btn--block {
    width: auto;
    align-self: flex-start;
    min-width: 260px;
  }
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 48px 56px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  pointer-events: none;
}

/* One soft bloom behind the mark — the only glow anywhere on the site. */
.hero::after {
  content: '';
  position: absolute;
  inset: -30% 20% 55% -20%;
  background: radial-gradient(50% 50% at 30% 40%, rgba(182, 255, 0, 0.1), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.hero__mark {
  width: 64px;
  color: var(--accent);
}

.hero__sub {
  max-width: var(--measure);
  font-size: 18px;
  color: var(--text-soft);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

@media (min-width: 720px) {
  .hero {
    padding-block: 80px 96px;
  }

  .hero__mark {
    width: 84px;
  }

  .hero__sub {
    font-size: 20px;
  }
}

/* ── cards ─────────────────────────────────────────────────────────────── */

.cards {
  display: grid;
  gap: var(--s3);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .cards--five {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.card__icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.card__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* ── steps ─────────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--s5);
  list-style: none;
  padding: 0;
}

@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 2px solid var(--accent);
}

.step__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.step__title {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.step__body {
  font-size: 16px;
  color: var(--text-soft);
}

/* An honesty note, not a feature claim. Deliberately quiet. */
.not-live {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-start;
  margin-top: var(--s5);
  padding: var(--s4);
  border: 1px dashed var(--border);
  border-radius: var(--r-card);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

.not-live__tag {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cool);
  padding-top: 3px;
}

.not-live__text {
  flex: 1 1 320px;
}

/* ── manifesto ─────────────────────────────────────────────────────────── */

.manifesto {
  position: relative;
  overflow: hidden;
  padding-block: 64px;
  border-top: 1px solid var(--hairline);
}

.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  pointer-events: none;
}

.manifesto__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  max-width: 760px;
}

.manifesto__line {
  font-family: var(--display);
  font-size: clamp(34px, 9.5vw, 56px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--accent);
  text-wrap: balance;
}

.manifesto__body {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  max-width: var(--measure);
  color: var(--text-soft);
}

.manifesto__sign {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

@media (min-width: 720px) {
  .manifesto {
    padding-block: 104px;
  }
}

/* ── trust ─────────────────────────────────────────────────────────────── */

.trust {
  display: grid;
  gap: var(--s3);
}

@media (min-width: 860px) {
  .trust {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust__item {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.trust__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 17px;
  font-weight: 600;
}

.trust__title svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.trust__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* ── waitlist form ─────────────────────────────────────────────────────── */

.signup {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sheet);
}

@media (min-width: 720px) {
  .signup {
    padding: var(--s6);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.field + .field {
  margin-top: var(--s4);
}

.field__label {
  font-size: 15px;
  font-weight: 600;
}

.field__hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.field input {
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  background: var(--ink);
  color: var(--text);
  border: 1.5px solid var(--border);
  border-radius: var(--r-button);
  /* 16px stops iOS zooming the page when the field takes focus. */
  font-size: 16px;
}

.field input::placeholder {
  color: var(--text-faint);
}

.field input:hover {
  border-color: var(--text-faint);
}

.field input[aria-invalid='true'] {
  border-color: var(--cool);
}

.field__error {
  font-size: 14px;
  color: var(--cool);
}

.field__error:empty {
  display: none;
}

/* Bot trap. Hidden from sight and from assistive tech, still submitted. */
.trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status {
  margin-top: var(--s4);
  font-size: 15px;
  line-height: 1.5;
}

.form-status:empty {
  display: none;
}

.form-status[data-state='error'] {
  color: var(--cool);
}

.consent-line {
  margin-top: var(--s4);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── success / referral ────────────────────────────────────────────────── */

.success {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.success:focus {
  outline: none;
}

.queue {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.queue__n {
  font-family: var(--display);
  font-size: clamp(40px, 12vw, 60px);
  line-height: 0.9;
  color: var(--accent);
}

.queue__label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.share {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.share__row {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
}

.share__link {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 14px 15px;
  background: var(--ink);
  border: 1.5px solid var(--border);
  border-radius: var(--r-button);
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share__row .btn {
  flex: 0 0 auto;
}

/* ── pills ─────────────────────────────────────────────────────────────── */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pill {
  padding: 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-soft);
}

.pill--on {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── sticky mobile CTA ─────────────────────────────────────────────────── */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  padding: var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom));
  background: rgba(10, 10, 12, 0.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform 0.2s ease;
}

.sticky-cta[data-visible='true'] {
  transform: translateY(0);
}

/* Room for the bar so it never sits on top of the footer's last line. */
body[data-sticky='true'] {
  padding-bottom: 92px;
}

@media (min-width: 720px) {
  .sticky-cta {
    display: none;
  }

  body[data-sticky='true'] {
    padding-bottom: 0;
  }
}

/* ── footer ────────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: 48px 40px;
  border-top: 1px solid var(--hairline);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  font-size: 15px;
  list-style: none;
  padding: 0;
}

.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

.social {
  display: flex;
  gap: var(--s3);
  list-style: none;
  padding: 0;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-button);
  color: var(--text-soft);
}

.social-link:hover {
  color: var(--accent);
  border-color: var(--border);
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.site-footer__meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

@media (min-width: 720px) {
  .site-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s6);
  }
}

/* ── cookie banner ─────────────────────────────────────────────────────── */

.consent {
  position: fixed;
  left: var(--s3);
  right: var(--s3);
  bottom: var(--s3);
  z-index: 60;
  display: none;
  flex-direction: column;
  gap: var(--s4);
  max-width: 460px;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sheet);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.consent[data-open='true'] {
  display: flex;
}

.consent__body {
  margin-top: var(--s2);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-soft);
}

.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}

.consent .btn {
  min-height: 48px;
  font-size: 16px;
  padding-inline: var(--s4);
}

@media (min-width: 720px) {
  .consent {
    left: auto;
    right: var(--s5);
    bottom: var(--s5);
  }
}

/* ── prose (privacy / terms) ───────────────────────────────────────────── */

.prose {
  max-width: 68ch;
  padding-block: 40px 72px;
}

.prose > * + * {
  margin-top: var(--s4);
}

.prose h1 {
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 48px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.prose h2 {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
}

.prose h3 {
  margin-top: var(--s5);
  font-size: 17px;
  font-weight: 600;
}

.prose p,
.prose li {
  color: var(--text-soft);
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.prose__meta {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ── /download desktop + 404 ───────────────────────────────────────────── */

.centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s5);
  padding-block: 56px 72px;
  text-align: center;
}

.centred .body {
  max-width: 46ch;
}

.centred .cta {
  align-items: center;
}

.qr {
  padding: var(--s3);
  background: var(--paper);
  border-radius: var(--r-card);
}

.qr svg {
  width: 220px;
  height: 220px;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: center;
  align-items: center;
}

/* Official badge artwork, unmodified, with the clear space the guidelines ask
   for provided by the gap above. Google bakes padding into its file and Apple
   does not, so matching the heights of the two *files* would leave the Play
   badge looking smaller — these numbers make the two badges optically equal. */
.store-badge {
  display: block;
}

.store-badge--apple img {
  height: 52px;
  width: auto;
}

.store-badge--google img {
  height: 68px;
  width: auto;
}

/* ── the TestFlight block on the pre-launch /download page ──────────────── */

.beta {
  margin-bottom: var(--s6);
  padding: var(--s5);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.beta > * + * {
  margin-top: var(--s3);
}

.beta__title {
  font-family: var(--display);
  font-size: clamp(26px, 6vw, 34px);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}