/*
 * Rise Radar public pages, served at /static/site.css: the marketing pages
 * (/, /pricing, /get-started, /data), the privacy policy and the terms
 * (/privacy, /terms) and the crawlable deal pages (/deals).
 *
 * Colour comes from the same tokens as the dashboard, in the same values:
 * design/design-tokens.md is the contract, and the three blocks below are a
 * copy of the ones at the top of web/src/styles.css. Change a value there,
 * here and in the doc in the same commit. The marketing design names its
 * colours by role (bg, sf, s2, ink, acc…); "Dark theme — Warm carbon" in
 * design-tokens.md maps each one onto these tokens.
 */

/* ---- Tokens: light ------------------------------------------------------ */
:root {
  color-scheme: light;

  --bg: #fcfcfd;
  --surface: #ffffff;
  --surface-sunken: #f4f6f8;
  /* Roles the dark theme separates. In light each keeps the value its
     components already had (design-tokens.md, "Surfaces by role"). */
  --surface-side: #f4f6f8;
  --surface-raised: #ffffff;
  --surface-hover: #f4f6f8;
  --surface-selected: #eaf1fc;
  --surface-input: #ffffff;
  --surface-button: #ffffff;
  --text: #151a21;
  --text-secondary: #4a5462;
  --text-muted: #656e7c;
  --border: #e3e7ec;
  --border-subtle: #e3e7ec;
  --border-strong: #868f9d;
  --logo-plate: #ffffff;

  --accent: #1f5fd0;
  --accent-contrast: #ffffff;
  --accent-wash: #eaf1fc;
  --accent-wash-text: #1f5fd0;

  --urgent-text: #8a5300;
  --urgent-wash: #fdf3e2;
  --critical-text: #a32318;
  --critical-wash: #fdedeb;

  --cap-text: #6b3fa0;
  --cap-wash: #f3edfb;

  --live-text: #176b3a;
  --live-wash: #e7f5ec;

  --neutral-text: #4a5462;
  --neutral-wash: #f4f6f8;
  --upcoming-text: #4a5462;
  --upcoming-wash: #f4f6f8;

  --fill-low: #c4362a;
  --fill-mid: #d99a00;
  --fill-high: #1f8a4c;

  --restricted-border: #d9a800;
  --restricted-wash: #fdf6d8;

  --font-ui: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-chip: 5px;
  --radius-input: 7px;
  --radius-card: 11px;
  --radius-modal: 15px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(21 26 33 / 0.06), 0 1px 1px rgb(21 26 33 / 0.04);
  --shadow-pop: 0 8px 24px rgb(21 26 33 / 0.12);
  --scrim: rgb(21 26 33 / 0.4);

  --ease-hover: 120ms ease-out;
  --ease-panel: 180ms ease-out;
}

/* ---- Tokens: dark, "Warm carbon" (system preference, unless light is
   forced). One temperature: every neutral is a warm grey, and the only blue
   is the accent and its wash. Surfaces rise side → bg → surface → raised. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #181715;
    --surface: #201f1d;
    --surface-sunken: #181715;
    --surface-side: #151411;
    --surface-raised: #2a2926;
    --surface-hover: #2a2926;
    --surface-selected: #2a2926;
    --surface-input: #181715;
    --surface-button: #252421;
    --text: #edebe7;
    --text-secondary: #adaaa6;
    --text-muted: #adaaa6;
    --border: #343330;
    --border-subtle: #2b2a27;
    --border-strong: #413f3d;
    --logo-plate: #ffffff;
    --accent: #899ff3;
    --accent-contrast: #0b0e1c;
    --accent-wash: #283051;
    --accent-wash-text: #c1cfff;
    --urgent-text: #f0be6d;
    --urgent-wash: #342815;
    --critical-text: #f69088;
    --critical-wash: #3c2220;
    --cap-text: #caa9f1;
    --cap-wash: #30253d;
    --live-text: #81d7a0;
    --live-wash: #1c2f22;
    --neutral-text: #cccac6;
    --neutral-wash: #2d2b29;
    --upcoming-text: #c1cfff;
    --upcoming-wash: #283051;
    --fill-low: #f69088;
    --fill-mid: #f0be6d;
    --fill-high: #81d7a0;
    --restricted-border: #f0be6d;
    --restricted-wash: #342815;
    --shadow-card: 0 0 0 transparent;
    --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.35);
    --scrim: rgb(0 0 0 / 0.6);
  }
}

/* ---- Tokens: dark (explicit toggle), the same values ------------------ */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #181715;
  --surface: #201f1d;
  --surface-sunken: #181715;
  --surface-side: #151411;
  --surface-raised: #2a2926;
  --surface-hover: #2a2926;
  --surface-selected: #2a2926;
  --surface-input: #181715;
  --surface-button: #252421;
  --text: #edebe7;
  --text-secondary: #adaaa6;
  --text-muted: #adaaa6;
  --border: #343330;
  --border-subtle: #2b2a27;
  --border-strong: #413f3d;
  --logo-plate: #ffffff;
  --accent: #899ff3;
  --accent-contrast: #0b0e1c;
  --accent-wash: #283051;
  --accent-wash-text: #c1cfff;
  --urgent-text: #f0be6d;
  --urgent-wash: #342815;
  --critical-text: #f69088;
  --critical-wash: #3c2220;
  --cap-text: #caa9f1;
  --cap-wash: #30253d;
  --live-text: #81d7a0;
  --live-wash: #1c2f22;
  --neutral-text: #cccac6;
  --neutral-wash: #2d2b29;
  --upcoming-text: #c1cfff;
  --upcoming-wash: #283051;
  --fill-low: #f69088;
  --fill-mid: #f0be6d;
  --fill-high: #81d7a0;
  --restricted-border: #f0be6d;
  --restricted-wash: #342815;
  --shadow-card: 0 0 0 transparent;
  --shadow-pop: 0 8px 24px rgb(0 0 0 / 0.35);
  --scrim: rgb(0 0 0 / 0.6);
}

/* ---- Public-page tokens --------------------------------------------------
   Radii, motion and a few surfaces only the marketing pages draw. Colour still
   comes from the tokens above: these are either sizes from the approved
   marketing design or roles the dashboard has no use for. */
:root {
  --r-sm: 7px;
  --r-ctl: 8px;
  --r-card: 10px;
  --r-feat: 12px;
  --e-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --e-pop: cubic-bezier(0.3, 1.5, 0.5, 1);
  --lift: 0 16px 34px -18px rgb(21 26 33 / 0.3);
  /* The unreported part of the Reg CF bar: the Freetrade card's gain green,
     which already switches with the theme. */
  --dark-seg: var(--live-text);
  --tick: var(--border-strong);
  /* The /data contact card. Dark has no shadows (design-tokens.md), so the
     card reads by its fill and border there. */
  --shadow-form:
    0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -16px rgb(20 22 40 / 0.14);
  /* /platforms: its sign-up card and its Details dialog. */
  --pf-lift: 0 18px 40px -30px rgb(0 0 0 / 0.35);
  --pf-pop: 0 30px 60px -20px rgb(0 0 0 / 0.4);
  /* The landing page's sample email, the same in both themes. */
  --mail-lift: 0 28px 56px -36px rgb(0 0 0 / 0.35);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --lift: 0 18px 34px -22px rgb(0 0 0 / 0.35);
    --tick: var(--text-muted);
    --shadow-form: 0 0 0 transparent;
    --pf-lift: 0 0 0 transparent;
    --pf-pop: 0 30px 60px -20px rgb(0 0 0 / 0.6);
  }
}

:root[data-theme='dark'] {
  --lift: 0 18px 34px -22px rgb(0 0 0 / 0.35);
  --tick: var(--text-muted);
  --shadow-form: 0 0 0 transparent;
  --pf-lift: 0 0 0 transparent;
  --pf-pop: 0 30px 60px -20px rgb(0 0 0 / 0.6);
}

/* ---- Base ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

html {
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

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

p,
h1,
h2,
h3,
ul,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 600;
}

ul {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

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

a:hover {
  color: var(--accent-wash-text);
  text-decoration: underline;
}

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

.num {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.mut {
  color: var(--text-secondary);
}

.ink {
  color: var(--text);
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 50;
  padding: 8px 14px;
  border-radius: var(--r-ctl);
  background: var(--accent);
  color: var(--accent-contrast);
}

.skip:focus {
  top: 8px;
}

/* The page container. Layout switches at 760px of *its* width, not the
   viewport's (container queries below). The radar bleeds outside its column,
   hence the clip. */
.site {
  container: page / inline-size;
  overflow-x: clip;
  min-height: 100vh;
  background: var(--bg);
}

.wrap {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.kicker,
.micro {
  font: 600 12px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.kicker-mut,
.micro {
  font-size: 11px;
  color: var(--text-secondary);
}

.caption {
  font: 400 13px/1.5 var(--font-num);
  color: var(--text-secondary);
}

.label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.h2 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.h2-narrow {
  max-width: 450px;
}

.lede {
  margin-top: 10px;
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 640px;
}

.sec {
  padding-block: 80px;
}

.band {
  background: var(--surface);
  border-block: 1px solid var(--border);
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.arrow-link {
  font-weight: 500;
}

.small {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
}

.prov {
  font: 400 12px/1.5 var(--font-num);
  color: var(--text-muted);
}

/* ---- Buttons and controls ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  background: var(--surface-button);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    filter 120ms ease-out,
    background 120ms ease-out,
    transform 120ms var(--e-out);
}

.btn:hover {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

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

.btn-primary,
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn-primary:hover {
  filter: brightness(1.1);
}

.btn[aria-busy='true'] {
  opacity: 0.75;
  cursor: progress;
}

.btn-sm {
  height: 36px;
  padding: 0 14px;
}

.btn-lg {
  height: 46px;
  padding: 0 20px;
}

.btn-block {
  width: 100%;
}

/* A square button holding one 16px icon. Relative so its .sr-only label
   stays inside it rather than resolving against .site. */
.btn-icon {
  position: relative;
  width: 40px;
  padding: 0;
}

.btn-sm.btn-icon {
  width: 36px;
}

.btn-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.input {
  height: 46px;
  min-width: 0;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  background: var(--surface-input);
  color: var(--text);
  font-size: 15px;
}

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

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

.field-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--critical-text);
}

.field-error:empty {
  display: none;
}

/* SegmentedControl */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.seg button,
.seg a {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    color 120ms ease-out,
    transform 120ms var(--e-out);
}

/* A segment that is a link (/pricing's billing switch, each choice a page of
   its own): drawn exactly as the buttons are. */
.seg a {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}

.seg a:hover {
  text-decoration: none;
}

.seg button:hover,
.seg a:hover {
  background: var(--surface-hover);
}

.seg button:active,
.seg a:active {
  transform: scale(0.96);
}

.seg [aria-pressed='true'],
.seg [aria-selected='true'],
.seg [aria-current='true'],
.seg [aria-pressed='true']:hover,
.seg [aria-selected='true']:hover,
.seg [aria-current='true']:hover {
  background: var(--text);
  color: var(--surface);
}

.seg-num button,
.seg-num a {
  font-family: var(--font-num);
}

/* Chip */
.chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 17px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    border-color 120ms ease-out,
    transform 120ms var(--e-out);
}

.chip:hover {
  background: var(--surface-hover);
}

.chip:active {
  transform: scale(0.96);
}

.chip[aria-pressed='true'],
.chip.is-on {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
}

.chip-static {
  cursor: default;
}

.chip-static:active {
  transform: none;
}

.chip-lg {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  font-size: 15px;
}

.chip-ck {
  display: none;
}

.chip[aria-pressed='true'] .chip-ck {
  display: inline;
  white-space: pre;
}

.chip-meta {
  margin-left: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.chip[aria-pressed='true'] .chip-meta {
  color: inherit;
}

/* Platform chip: monogram tile + name. */
.pchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px 0 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
}

.mono {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 3px;
  border-radius: 5px;
  background: var(--text);
  color: var(--surface);
  font: 600 10px/1 var(--font-num);
}

.pchip-lg {
  height: 34px;
  gap: 8px;
  padding: 0 12px 0 4px;
  border-radius: var(--r-ctl);
  font-size: 15px;
}

.pchip-lg .mono {
  min-width: 26px;
  height: 26px;
  font-size: 11px;
}

.regime {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font: 500 12px var(--font-num);
}

/* Status badge: glyph + word on its tone's wash. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 500;
}

.tone-critical {
  background: var(--critical-wash);
  color: var(--critical-text);
}

.tone-urgent {
  background: var(--urgent-wash);
  color: var(--urgent-text);
}

.tone-cap {
  background: var(--cap-wash);
  color: var(--cap-text);
}

.tone-live {
  background: var(--live-wash);
  color: var(--live-text);
}

.tone-neutral,
.tone-calm {
  background: var(--neutral-wash);
  color: var(--neutral-text);
}

.tone-upcoming {
  background: var(--upcoming-wash);
  color: var(--upcoming-text);
}

/* PingDot */
.ping {
  position: relative;
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live-text);
}

.ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 1.8s var(--e-out) infinite;
}

.ping-acc {
  background: var(--accent-wash-text);
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  80%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* ---- Header ---------------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 60px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.hdr-in {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.logo:hover {
  color: var(--text);
  text-decoration: none;
}

/* The app's mark. The dashboard's .brand-mark repeats it, and the emails'
   picture (npm run email:mark) and the favicons (npm run favicon) are drawn
   from it, so change them together. */
.logo-mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  overflow: hidden;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.logo-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.logo-sweep {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0 70%,
    color-mix(in srgb, var(--accent) 55%, transparent) 100%
  );
  animation: spin 3s linear infinite;
}

.hdr-nav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.hdr-nav a {
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--text);
}

.hdr-nav a:hover,
.hdr-nav a[aria-current='page'] {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.hdr-nav a[aria-current='page'] {
  font-weight: 500;
}

.hdr-act {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* The toggle shows the theme it switches to. */
.t-light {
  display: none;
}

:root[data-theme='dark'] .t-dark {
  display: none;
}

:root[data-theme='dark'] .t-light {
  display: inline;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .t-dark {
    display: none;
  }

  :root:not([data-theme='light']) .t-light {
    display: inline;
  }
}

/* ---- Hero ------------------------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 72px;
}

.hero-copy,
.hero-feed {
  min-width: 0;
}

.story {
  transition:
    opacity 300ms var(--e-out),
    transform 300ms var(--e-out);
}

.story.is-out {
  opacity: 0;
  transform: translateY(6px);
}

.story-num {
  margin: 14px 0 18px;
  color: var(--text);
  /* About 5.5 characters across the left column: 0.512 of the container
     less padding and gap, over 5.5. */
  font-size: clamp(56px, calc(9.31cqw - 8.2px), 104px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.story-line {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.hero-intro {
  max-width: 540px;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.signup-slot {
  max-width: 540px;
  margin-top: 24px;
}

.signup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.signup-row .input {
  flex: 1 1 240px;
}

.signup-done {
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  animation: rise-in 400ms var(--e-out);
}

.signup-done:focus {
  outline: none;
}

/* After Settings → Manage account: said once, above the hero. */
.account-deleted {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font-weight: 500;
}

.signup-done a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.signup-done-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  font-weight: 600;
}

/* Live feed preview */
.hero-feed {
  position: relative;
  isolation: isolate;
}

.feed-head {
  margin-bottom: 14px;
}

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 500;
}

.feed-open {
  margin-top: 10px;
  color: var(--text-secondary);
  font: 400 13px var(--font-num);
}

.feed-cards {
  display: grid;
  gap: 12px;
  container: feed / inline-size;
}

/* DealCard */
.dcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  animation: rise-in 600ms var(--e-out) backwards;
  animation-delay: calc(150ms + var(--i) * 120ms);
  transition:
    transform 200ms var(--e-out),
    box-shadow 200ms ease-out;
}

.dcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.dcard-name {
  margin-bottom: 6px;
  font-size: 17px;
}

.dcard-fig {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 6px;
  font-size: 14px;
}

.dcard-raised {
  font-weight: 600;
}

.dcard-pct {
  color: var(--text-secondary);
}

/* Progress bar: zero to the maximum, a tick at the target, the fill on the
   red → amber → green ramp (design-tokens.md, Progress bars). */
.bar {
  position: relative;
  height: 5px;
  margin-bottom: 8px;
  border-radius: 3px;
  background: var(--surface-sunken);
}

.bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
}

.fill-low {
  background: var(--fill-low);
}

.fill-mid {
  background: var(--fill-mid);
}

.fill-high {
  background: var(--fill-high);
}

.bar-tick {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--at);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--tick);
}

.closes {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--r-ctl);
}

.closes-k {
  font: 600 11px var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.closes-cd {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
}

.closes-d {
  font-size: 13px;
}

@container feed (max-width: 440px) {
  .dcard {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .closes {
    flex-flow: row wrap;
    align-items: baseline;
    justify-content: flex-start;
    column-gap: 10px;
  }

  .closes-d {
    margin-left: auto;
  }
}

/* RadarBackdrop */
.radar {
  position: absolute;
  inset: -64px -48px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
}

.radar-rings {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 71px,
    var(--border-strong) 71px 72px
  );
  opacity: 0.4;
}

.radar-sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 290deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 360deg
  );
  transform: translate(-50%, -50%);
  animation: sweep 7s linear infinite;
}

@keyframes sweep {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Each blip lights as the sweep's leading edge passes its bearing (--a, in
   degrees clockwise from twelve o'clock), then fades. */
.blip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  opacity: 0;
  animation: blip 7s linear infinite;
  animation-delay: calc(var(--a) * 7s / 360);
}

@keyframes blip {
  0% {
    opacity: 0.95;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

/* ---- Proof strip ------------------------------------------------------------ */
.proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  padding-block: 28px;
}

.proof-item {
  padding-left: 20px;
  border-left: 1px solid var(--border);
  color: var(--text-secondary);
}

.proof-num {
  color: var(--text);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ---- Crowd rounds that paid out ------------------------------------------- */
.exits-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 28px 0 16px;
}

.stake {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.stake-l {
  color: var(--text-secondary);
}

.stake-v {
  min-width: 5ch;
  font-size: 18px;
  font-weight: 600;
}

/* Drawn rather than native, so the track is a token in both themes. */
.range {
  width: 200px;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / var(--p, 33.3%) 100%
      no-repeat,
    var(--border);
}

.range::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  -webkit-appearance: none;
  appearance: none;
}

.range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}

.range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}

.range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* ExitRow */
.exits {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.exit + .exit {
  border-top: 1px solid var(--border-subtle);
}

.exit-row {
  display: grid;
  grid-template-columns: 1.3fr 2fr 96px 190px 14px;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease-out;
}

.exit-row:hover {
  background: var(--surface-hover);
}

.exit-row:focus-visible {
  outline-offset: -2px;
}

.exit-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.exit-n {
  font-size: 16px;
  font-weight: 600;
}

.exit-meta {
  color: var(--text-secondary);
  font-size: 13px;
}

.exit-bar {
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--surface-sunken);
}

.exit-fill {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 900ms var(--e-out);
  transition-delay: calc(var(--i) * 70ms);
}

.exit-fill.is-paper,
.swatch-paper {
  opacity: 0.45;
}

.exit-stat {
  font-size: 17px;
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

.exit-stake {
  color: var(--text-secondary);
  font-size: 14px;
  white-space: nowrap;
}

.exit-stake b {
  color: var(--text);
  font-weight: 600;
}

.exit-ico {
  color: var(--text-secondary);
  text-align: center;
}

.exit-ico::before {
  content: '+';
}

.exit.is-open .exit-ico::before {
  content: '−';
}

.exit-detail,
.acc-p {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--e-out);
}

/* Without the script nothing can open an answer, so every one is open and
   the "+" that would open it is not drawn. */
html:not(.js) .acc-p {
  grid-template-rows: 1fr;
}

html:not(.js) .acc-ico {
  display: none;
}

.exit.is-open .exit-detail,
.acc-item.is-open .acc-p {
  grid-template-rows: 1fr;
}

.exit-detail-in,
.acc-in {
  min-height: 0;
  overflow: hidden;
}

.exit-detail-in p {
  max-width: 900px;
  margin: 0 20px 18px;
  padding: 14px 16px;
  border-radius: var(--r-ctl);
  background: var(--surface-sunken);
  font-size: 15px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 14px;
}

.swatch {
  display: inline-block;
  width: 22px;
  height: 8px;
  margin-right: 8px;
  border-radius: 4px;
  background: var(--accent);
  vertical-align: 1px;
}

/* ---- The part the platforms don't put on the homepage ---------------------- */
.truth {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}

.tcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--bg);
}

/* The waffle and what each outcome means stack in the first column; Freetrade
   spans the other two, over BrewDog and Reg CF. */
.t-waffle {
  grid-area: 1 / 1;
}

.t-outcomes {
  grid-area: 2 / 1;
}

.t-freetrade {
  grid-area: 1 / 2 / auto / span 2;
}

.tcard-p {
  max-width: 520px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.55;
}

.big {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
}

.big-num {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.big-xl {
  font-size: 64px;
}

.big-l {
  font-size: 18px;
  font-weight: 500;
}

.tone-text-gain {
  color: var(--live-text);
}

.tone-text-loss {
  color: var(--critical-text);
}

.tone-text-none {
  color: var(--text-muted);
}

.tone-bg-gain {
  background: var(--live-text);
}

.tone-bg-loss {
  background: var(--critical-text);
}

/* Beauhurst waffle */
.waffle {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 6px;
  max-width: 460px;
}

.dot {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: opacity 200ms ease-out;
}

.dot.tone-gain {
  background: var(--live-text);
}

.dot.tone-loss {
  background: var(--critical-text);
}

.dot.tone-none {
  background: var(--text-muted);
}

.waffle .dot {
  animation: dot-pop 400ms var(--e-pop) backwards;
  animation-delay: calc(var(--i) * 7ms);
}

.waffle .dot.is-dim {
  opacity: 0.18;
}

@keyframes dot-pop {
  from {
    transform: scale(0);
  }
}

.waffle-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.waffle-legend button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--r-ctl);
  background: none;
  cursor: pointer;
}

.waffle-legend button:hover {
  background: var(--surface-hover);
}

.waffle-legend button[aria-pressed='true'] {
  border-color: var(--border);
  background: var(--surface);
}

.waffle-legend .dot {
  flex: none;
  width: 10px;
  height: 10px;
}

/* What each outcome means for your shares. Type steps base (15/22) and sm
   (13/18), so the card stands no taller than BrewDog and Reg CF beside it. */
.outcome {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 2px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  transition: opacity 200ms ease-out;
}

.outcome:first-child {
  padding-top: 0;
  border-top: 0;
}

.outcome:last-child {
  padding-bottom: 0;
}

.outcome.is-dim {
  opacity: 0.4;
}

.outcome .dot {
  align-self: center;
}

.outcome-t {
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
}

.outcome-p {
  grid-column: 2;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 18px;
}

/* Freetrade */
.t-freetrade .seg {
  align-self: flex-start;
}

.ft-bars {
  display: grid;
  gap: 4px;
}

.ft-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 84px;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: opacity 200ms ease-out;
}

.ft-row.is-dim {
  opacity: 0.45;
}

.ft-track {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: var(--surface-sunken);
}

.ft-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  min-width: 6px;
  border-radius: inherit;
  transition: width 900ms var(--e-out);
  transition-delay: calc(var(--i) * 200ms);
}

.ft-tick {
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: var(--at);
  width: 2px;
  margin-left: -1px;
  background: var(--text);
}

.ft-v {
  font-weight: 600;
  text-align: right;
}

/* BrewDog */
.brew {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-weight: 600;
}

.brew-was {
  position: relative;
  color: var(--text-muted);
  font-size: 32px;
}

.brew-strike {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 52%;
  height: 2px;
  background: var(--critical-text);
  transform-origin: left;
  transition: transform 600ms var(--e-out) 500ms;
}

.brew-arrow {
  color: var(--text-secondary);
  font-size: 22px;
}

.brew-now {
  display: inline-block;
  color: var(--critical-text);
  font-size: 56px;
  line-height: 1;
  transition:
    transform 500ms var(--e-pop) 1.1s,
    opacity 300ms ease-out 1.1s;
}

/* Reg CF: the dark 47% fills from the left like any bar, so it reads as the
   number above it; the reporting rest stays hatched. */
.dark-bar {
  position: relative;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-ctl);
  background: repeating-linear-gradient(
    90deg,
    var(--surface) 0 8px,
    var(--border) 8px 9px
  );
}

.dark-seg {
  position: absolute;
  inset: 0 auto 0 0;
  width: 47%;
  overflow: hidden;
  background: var(--dark-seg);
  transition: width 1200ms var(--e-out) 300ms;
}

/* The flashlight: a soft accent disc that follows the pointer. */
.dark-seg::after {
  content: '';
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--accent) 75%, transparent),
    transparent
  );
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.dark-seg:hover::after {
  opacity: 1;
}

.close-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--border);
}

.quote {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* The highlighter sweeps under the last sentence: the bottom 40% of each line. */
.hl {
  background: linear-gradient(transparent 60%, var(--accent-wash) 60%) 0 0 /
    100% 100% no-repeat;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.6s var(--e-out) 200ms;
}

.close-cta p {
  margin-bottom: 16px;
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---- How it works ------------------------------------------------------------ */
.how {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}

.how-tabs {
  display: grid;
  gap: 12px;
}

.how-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  overflow: hidden;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition:
    background 200ms ease-out,
    border-color 200ms ease-out,
    box-shadow 200ms ease-out;
}

.how-tab:hover {
  background: var(--surface-hover);
}

.how-tab.is-on {
  border-color: var(--border-strong);
  background: var(--surface);
  box-shadow: var(--lift);
}

.how-n {
  grid-row: span 2;
  padding-top: 3px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.how-t {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.how-b {
  color: var(--text-secondary);
  line-height: 1.55;
}

.how-prog {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.how-tab.is-on.is-timing .how-prog {
  animation: fill-x 8s linear forwards;
}

.how.is-paused .how-prog {
  animation-play-state: paused;
}

@keyframes fill-x {
  to {
    transform: scaleX(1);
  }
}

.how-stage {
  display: grid;
  min-height: 380px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--surface);
}

.how-panel {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 350ms var(--e-out),
    transform 350ms var(--e-out),
    visibility 0s 350ms;
}

.how-panel.is-on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 350ms var(--e-out),
    transform 350ms var(--e-out);
}

/* 01 · Sources */
.src-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
}

.src-every {
  margin-left: auto;
}

.how-panel.is-on .scan {
  animation: scan 4s linear infinite;
  animation-delay: calc(var(--i) * 4s / var(--n));
}

/* A chip that rests on another border (the roadmap's planned platforms) sets
   --scan-border. */
@keyframes scan {
  0% {
    border-color: var(--accent);
    background: var(--accent-wash);
  }
  14%,
  100% {
    border-color: var(--scan-border, var(--border));
    background: var(--surface-raised);
  }
}

/* 02 · Rule builder */
.rule-quote {
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface-sunken);
  font-size: 15px;
}

.rule-group + .rule-group {
  margin-top: 14px;
}

.rule-group .micro {
  margin-bottom: 8px;
}

.rule-out {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.rule-hit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.rule-n {
  color: var(--accent);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.rule-names,
.rule-empty {
  margin-top: 8px;
  color: var(--text-secondary);
}

/* 03 · Alert timeline */
.tl-note {
  max-width: 380px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
}

.tl-t {
  margin-top: 4px;
  font-weight: 600;
}

.tl-via {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
}

.tl-track {
  position: relative;
  height: 4px;
  margin: 64px 10px 64px;
}

.tl-line {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--border);
}

.tl-dot {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent),
    0 0 16px var(--accent);
}

.is-running .tl-dot {
  animation: travel 8s linear infinite;
}

@keyframes travel {
  to {
    left: 100%;
  }
}

.tl-m {
  position: absolute;
  top: 50%;
  left: var(--at);
}

.tl-pin {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid var(--text-secondary);
  border-radius: 50%;
  background: var(--surface);
}

.is-running .tl-pin {
  animation: pin 8s linear infinite;
  animation-delay: calc(var(--t) * 8s);
}

@keyframes pin {
  0% {
    transform: scale(1.7);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  10%,
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

.tl-l {
  position: absolute;
  bottom: 14px;
  left: 0;
  color: var(--text-secondary);
  font: 500 12px var(--font-num);
  white-space: nowrap;
  transform: translateX(-50%);
}

.tl-m.is-below .tl-l {
  top: 14px;
  bottom: auto;
}

.tl-m[data-tl-at='0'] .tl-l {
  transform: translateX(-8px);
}

.tl-m[data-tl-at='1'] .tl-l {
  transform: translateX(calc(-100% + 8px));
}

.tl-accent .tl-pin {
  border-color: var(--accent);
}

.tl-urgent .tl-pin {
  border-color: var(--urgent-text);
}

.tl-urgent .tl-l {
  color: var(--urgent-text);
}

.tl-cap .tl-pin {
  border-color: var(--cap-text);
}

.tl-cap .tl-l {
  color: var(--cap-text);
}

/* ---- Coverage ------------------------------------------------------------------ */
.cov-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--text-secondary);
  font-size: 13px;
}

.sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border-radius: 3px;
  background: var(--text);
  vertical-align: -1px;
}

.sw-plan {
  opacity: 0.4;
}

.cov {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.cov-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  transition: background 120ms ease-out;
}

.cov-row:first-child {
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.cov-row:last-child {
  border-radius: 0 0 var(--r-card) var(--r-card);
}

.cov-row + .cov-row {
  border-top: 1px solid var(--border-subtle);
}

.cov-row:hover {
  background: var(--surface-hover);
}

.cov-reg {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

/* Planned platforms at 45%, without fading their tooltip. */
.pchip.is-planned {
  border-color: color-mix(in srgb, var(--border) 45%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}

.pchip.is-planned .mono {
  opacity: 0.45;
}

.tip {
  position: relative;
  transition:
    transform 150ms var(--e-out),
    border-color 150ms ease-out;
}

.tip:hover,
.tip:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tip::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--surface);
  font: 500 12px var(--font-num);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition:
    opacity 120ms ease-out,
    transform 120ms ease-out;
}

.tip:hover::after,
.tip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---- What an alert looks like ---------------------------------------------------- */
/* Five alert types, and the chosen one's sample email. The brief names its
   colours by role, mapped as in design-tokens.md ("Dark theme — Warm
   carbon"), except its s2, the chosen row and the envelope, which is
   --surface-hover: --surface-raised is white in light, and both sit on white.
   Each type carries its colour and wash as --at-fg and --at-bg. */
.alert-sec {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-block: 56px;
}

.alert-sec [data-alert-type='new'] {
  --at-fg: var(--accent-wash-text);
  --at-bg: var(--accent-wash);
}

.alert-sec [data-alert-type='closing'] {
  --at-fg: var(--urgent-text);
  --at-bg: var(--urgent-wash);
}

.alert-sec [data-alert-type='cap'] {
  --at-fg: var(--cap-text);
  --at-bg: var(--cap-wash);
}

.alert-sec [data-alert-type='perk'] {
  --at-fg: var(--critical-text);
  --at-bg: var(--critical-wash);
}

.alert-sec [data-alert-type='weekly'] {
  --at-fg: var(--neutral-text);
  --at-bg: var(--neutral-wash);
}

.alert-copy {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.alert-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.alert-p {
  color: var(--text-secondary);
  font-size: 16px;
  text-wrap: pretty;
}

/* The type list */
.at-list {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--surface);
}

.at-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 3px 12px;
  margin: 0;
  padding: 13px 16px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.at-row:last-child {
  border-bottom: 0;
}

.at-row:hover,
.at-row[aria-selected='true'] {
  background: var(--surface-hover);
}

/* The list clips its corners, so the ring goes inside the row. */
.at-row:focus-visible {
  outline-offset: -2px;
}

.at-glyph {
  display: grid;
  grid-row: span 2;
  align-self: start;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-ctl);
  background: var(--at-bg);
  color: var(--at-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: transform 250ms cubic-bezier(0.2, 0.7, 0.2, 1.4);
}

.at-row[aria-selected='true'] .at-glyph {
  transform: scale(1.08);
}

/* Weekly's neutral wash is the chosen row's own fill in both themes, so its
   tile keeps an edge. */
.at-row[data-alert-type='weekly'] .at-glyph {
  box-shadow: inset 0 0 0 1px var(--border);
}

.at-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.at-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.at-when {
  align-self: center;
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.at-row[aria-selected='true'] .at-when {
  color: var(--at-fg);
}

.at-desc {
  grid-column: 2 / 4;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: pretty;
}

/* Counts the chosen type's 8 s down; when it is full the next type comes up
   (client/alerts.ts). */
.at-prog {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--at-fg);
  transform: scaleX(0);
  transform-origin: left;
}

.at-row:last-child .at-prog {
  bottom: 0;
}

.at-row.is-timing .at-prog {
  animation: fill-x 8s linear forwards;
}

.alert-sec.is-paused .at-prog {
  animation-play-state: paused;
}

/* The button turns accent once every type has been seen. */
.alert-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.alert-btn {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  transition:
    background 250ms ease-out,
    border-color 250ms ease-out,
    color 250ms ease-out,
    transform 120ms var(--e-out);
}

.alert-btn:hover {
  border-color: var(--accent);
  background: var(--surface-button);
}

.alert-btn.is-ready,
.alert-btn.is-ready:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.alert-seen {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
}

/* The email. A body replays its entrance each time it is unhidden. */
.mail {
  justify-self: center;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--mail-lift);
  animation: rise-in 400ms var(--e-out);
}

.mail-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-hover);
  font-size: 13px;
}

.mail-from {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
}

.mail-subj {
  margin-top: 2px;
  font-weight: 600;
}

.mail-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 18px;
  animation: rise-in 400ms var(--e-out);
}

.mail-k {
  color: var(--at-fg);
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mail-type[data-alert-type='weekly'] .mail-k {
  color: var(--text-secondary);
}

.mail-name,
.mail-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.mail-id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mail-line {
  color: var(--text-secondary);
  font-size: 14px;
}

/* A picture of the email's button: nothing in a sample opens anything. */
.mail-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: var(--r-ctl);
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 15px;
  font-weight: 500;
}

.mail-prov {
  color: var(--text-secondary);
  font: 400 11px/1.5 var(--font-num);
}

.mail-why {
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  text-wrap: pretty;
}

/* 1 · New raise */
.kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
}

.kv > div {
  padding: 10px 12px;
}

.kv > div:nth-child(n + 3) {
  border-top: 1px solid var(--border-subtle);
}

.kv dt {
  color: var(--text-secondary);
  font-size: 12px;
}

.kv dd {
  margin-top: 2px;
  font-weight: 600;
}

.close-line,
.nc-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  font-size: 14px;
}

.close-cd {
  font-size: 17px;
  font-weight: 600;
}

/* A closing countdown's tone, which the clock can move. */
.cs-badge[data-urgency='critical'],
.nc-close[data-urgency='critical'] {
  background: var(--critical-wash);
  color: var(--critical-text);
}

.cs-badge[data-urgency='urgent'],
.nc-close[data-urgency='urgent'] {
  background: var(--urgent-wash);
  color: var(--urgent-text);
}

.cs-badge[data-urgency='calm'],
.nc-close[data-urgency='calm'] {
  background: var(--neutral-wash);
  color: var(--neutral-text);
}

.wk-cd[data-urgency='critical'] {
  color: var(--critical-text);
}

.wk-cd[data-urgency='urgent'] {
  color: var(--urgent-text);
}

.wk-cd[data-urgency='calm'] {
  color: var(--neutral-text);
}

/* 2 · Closing soon */
.cs-list {
  border-top: 1px solid var(--border-subtle);
}

.cs-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.cs-badge {
  justify-self: start;
  padding: 3px 7px;
  border-radius: var(--radius-chip);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.cs-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cs-name {
  font-size: 14px;
  font-weight: 600;
}

.cs-meta {
  color: var(--text-secondary);
  font-size: 12px;
}

.cs-open {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* 3 · Near cap */
.nc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nc-nums {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.nc-raised {
  font-size: 16px;
  font-weight: 600;
}

.nc-of {
  color: var(--text-secondary);
  font-size: 13px;
}

.nc-bar {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: var(--border-subtle);
}

.nc-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--w);
  border-radius: 4px;
  background: var(--cap-text);
  transform-origin: left;
  animation: grow-x 1.1s var(--e-out);
}

.nc-tick {
  position: absolute;
  top: -3px;
  left: var(--at);
  width: 2px;
  height: 14px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
}

.nc-note {
  color: var(--text-secondary);
  font-size: 12.5px;
}

.nc-close .num {
  font-weight: 500;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}

/* 4 · Perk expiring */
.pk {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: var(--r-ctl);
  background: var(--critical-wash);
  color: var(--critical-text);
}

.pk-what {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.pk-left {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
}

.pk-note {
  font-size: 13px;
}

.pk-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  color: var(--neutral-text);
  font-size: 13px;
}

/* 5 · Weekly Radar */
.mail-body.wk {
  gap: 18px;
}

.wk-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-ctl);
}

.wk-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 4px;
  text-align: center;
}

.wk-stat + .wk-stat {
  border-left: 1px solid var(--border-subtle);
}

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

.wk-new {
  color: var(--accent-wash-text);
}

.wk-closing {
  color: var(--urgent-text);
}

.wk-cap {
  color: var(--cap-text);
}

.wk-l {
  color: var(--text-secondary);
  font-size: 12px;
}

.wk-sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wk-h {
  color: var(--text-secondary);
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
}

.wk-sec ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wk-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: 13.5px;
  line-height: 1.45;
}

.wk-row-wide {
  grid-template-columns: 86px minmax(0, 1fr);
}

.wk-row b {
  font-weight: 600;
}

.wk-code {
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 600;
}

.wk-cd,
.wk-pct {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.wk-pct {
  color: var(--cap-text);
}

.wk-note {
  padding: 12px 14px;
  border-radius: var(--r-ctl);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font-size: 13px;
}

/* ---- What we’re building next ------------------------------------------------------ */
/* The written design names colours by role, mapped as in design-tokens.md
   ("Dark theme — Warm carbon"), with one exception: its s2, the bubbles and
   buttons, is --surface-hover, since --surface-raised is white in light and
   they sit on white. */
.rm {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: 72px;
}

.rm-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 640px;
}

.rm-head .h2 {
  text-wrap: balance;
}

.rm-head .lede {
  margin-top: 0;
  text-wrap: pretty;
}

.rm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 01 · The hero card, inverted. */
.rm-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
  gap: 32px 48px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: 16px;
  background: var(--text);
  color: var(--bg);
}

.rm-hero-deco {
  position: absolute;
  left: -220px;
  bottom: -300px;
  z-index: -1;
  width: 640px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 63px,
    color-mix(in srgb, var(--bg) 12%, transparent) 63px 64px
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent);
  mask-image: radial-gradient(closest-side, #000 45%, transparent);
}

.rm-hero-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    transparent 0 78%,
    color-mix(in srgb, var(--accent-wash) 26%, transparent) 100%
  );
  animation: spin 7s linear infinite;
}

.rm-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.rm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--bg) 28%, transparent);
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.rm-pill-ping {
  background: var(--accent-wash);
}

.rm-hero-h {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.rm-hero-p {
  max-width: 480px;
  color: var(--border-subtle);
  font-size: 16.5px;
  line-height: 1.55;
}

/* The analysis preview flips back to the page's own colours. */
.rm-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.6);
}

.rm-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.rm-mark {
  min-width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  font-size: 12px;
}

.rm-panel-id {
  flex: 1 1 140px;
  min-width: 0;
}

.rm-panel-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.rm-panel-meta {
  color: var(--text-secondary);
  font-size: 11.5px;
}

/* As wide as its longest label, so the head never reflows as it changes. */
.rm-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-width: calc(16ch + 36px);
  height: 26px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 13px;
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.3s ease-out,
    color 0.3s ease-out;
}

.rm-status.is-ready {
  background: var(--live-wash);
  color: var(--live-text);
}

.rm-spin {
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.rm-status.is-ready .rm-spin,
.rm-status:not(.is-ready) .rm-tick {
  display: none;
}

.rm-sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-label,
.rm-find-l,
.rm-foot {
  color: var(--text-secondary);
  font-size: 10.5px;
}

.rm-label,
.rm-find-l {
  font-weight: 600;
}

.rm-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rm-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  transition:
    background 0.3s ease-out,
    border-color 0.3s ease-out,
    color 0.3s ease-out;
}

/* One width for ○ ◌ ✓, whichever font draws them. */
.rm-src .num {
  width: 1em;
  text-align: center;
}

.rm-src.is-reading {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
}

.rm-src.is-read {
  border-style: solid;
  color: var(--text);
}

.rm-bar {
  height: 3px;
  margin-top: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--border-subtle);
}

.rm-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.9s linear;
}

.rm-bar-fill.is-jump {
  transition: none;
}

.rm-finds {
  border-top: 1px solid var(--border);
}

.rm-find {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  transition:
    opacity 0.5s var(--e-out),
    filter 0.5s var(--e-out),
    transform 0.5s var(--e-out);
}

.rm-find + .rm-find {
  border-top: 1px solid var(--border-subtle);
}

.rm-find.is-pending {
  opacity: 0.3;
  filter: blur(4px);
  transform: translateY(4px);
}

.rm-find-l {
  text-transform: uppercase;
}

.rm-find-t {
  font-size: 13.5px;
  line-height: 1.4;
}

.rm-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
}

/* 02–04 · The row of feature cards. */
.rm-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
}

.rm-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  transition:
    transform 0.25s var(--e-out),
    box-shadow 0.25s var(--e-out);
}

@media (hover: hover) {
  .rm-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px -26px rgb(0 0 0 / 0.35);
  }
}

.rm-card-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rm-card-h {
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.rm-card-p {
  color: var(--text-secondary);
  font-size: 14px;
  text-wrap: pretty;
}

.rm-vis {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 250px;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

/* 02 · The chat fills from the bottom. The sizer and the live log share one
   cell; the sizer is never seen. */
.rm-log {
  flex: 1;
  display: grid;
}

.rm-log > *,
.rm-log-size > * {
  grid-area: 1 / 1;
}

.rm-log-size {
  display: grid;
  visibility: hidden;
}

.rm-log-live {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.rm-pair {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.rm-q,
.rm-a,
.rm-typing {
  font-size: 13.5px;
}

.rm-log-live .rm-q,
.rm-log-live .rm-a,
.rm-log-live .rm-typing {
  animation: rise-in 0.42s var(--e-out);
}

.rm-q {
  align-self: flex-end;
  max-width: 85%;
  padding: 9px 12px;
  border-radius: 12px 12px 4px 12px;
  background: var(--accent);
  color: var(--accent-contrast);
  line-height: 1.4;
}

.rm-a,
.rm-typing {
  align-self: flex-start;
  border-radius: 12px 12px 12px 4px;
  background: var(--surface-hover);
}

.rm-a {
  max-width: 92%;
  padding: 9px 12px;
  line-height: 1.45;
}

.rm-typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}

.rm-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text);
  animation: bounce 1s ease-in-out infinite;
}

.rm-typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.rm-typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.rm-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 38px;
  padding: 0 3px 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 19px;
  color: var(--text-secondary);
  font-size: 13px;
}

.rm-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* 03 · A small sonar: today's platforms in grey, the next four pinging. As
   wide as it is in a card of the row, so a stacked card does not stretch its
   rings into an ellipse. */
.rm-sonar {
  position: relative;
  flex: 1;
  align-self: center;
  width: 100%;
  max-width: 360px;
  min-height: 150px;
  overflow: hidden;
  background: repeating-radial-gradient(
    circle at 50% 50%,
    transparent 0 27px,
    var(--border-strong) 27px 28px
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
  mask-image: radial-gradient(closest-side, #000 72%, transparent);
}

.rm-sonar-sweep,
.rm-sonar-c,
.rm-dot {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.rm-sonar-sweep {
  left: 50%;
  top: 50%;
  width: 340px;
  aspect-ratio: 1;
  background: conic-gradient(
    transparent 0 75%,
    color-mix(in srgb, var(--accent) 24%, transparent) 100%
  );
  animation: sweep 5s linear infinite;
}

.rm-sonar-c {
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  background: var(--accent);
}

.rm-dot {
  left: var(--x);
  top: var(--y);
  width: 5px;
  height: 5px;
  background: var(--text-secondary);
}

.rm-dot-new {
  width: 9px;
  height: 9px;
  background: var(--accent);
}

.rm-dot-new::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.4s var(--e-out) infinite;
  animation-delay: var(--d);
}

.rm-planned {
  gap: 6px;
}

.rm-pchip {
  --scan-border: var(--border-strong);
  border-style: dashed;
  border-color: var(--border-strong);
  animation: scan 4s linear infinite;
  animation-delay: calc(var(--i) * 0.8s);
}

.rm-more {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 8px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: 12px;
}

/* 04 · The channel previews share one cell, centred; .is-on is shown and
   comes in each time it is turned on. */
.rm-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rm-seg button {
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
}

.rm-ch-stage {
  flex: 1;
  display: grid;
  align-items: center;
}

.rm-pane {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  visibility: hidden;
  font-size: 13.5px;
  line-height: 1.45;
}

.rm-pane.is-on {
  visibility: visible;
  animation: rise-in 0.4s var(--e-out);
}

.rm-bubble {
  padding: 10px 12px;
  background: var(--surface-hover);
}

.rm-sms .rm-bubble {
  border-radius: 16px 16px 16px 4px;
}

.rm-wa .rm-bubble {
  border-radius: 4px 12px 12px 12px;
}

.rm-tg .rm-bubble {
  border-radius: 12px;
}

.rm-ch-meta {
  color: var(--text-secondary);
  font-size: 11px;
  text-align: center;
}

.rm-wa-k {
  color: var(--critical-text);
  font-size: 10.5px;
  font-weight: 600;
}

.rm-strong {
  font-weight: 600;
}

.rm-wa-time {
  color: var(--text-secondary);
  font-size: 11px;
  text-align: right;
}

.rm-ch-btn {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: var(--r-ctl);
  background: var(--surface-hover);
  color: var(--accent);
  font-weight: 500;
}

.rm-tg-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rm-tg-head b {
  font-weight: 600;
}

/* The sonar mark: a ring and a centre dot on the accent. */
.rm-tg-av {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--accent-contrast) 0 2px, transparent 2.5px),
    radial-gradient(
      circle,
      transparent 0 5px,
      var(--accent-contrast) 5.5px 6.5px,
      transparent 7px
    ),
    var(--accent);
}

.rm-tg-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.rm-tg-btns .rm-ch-btn {
  height: 32px;
}

/* At 760px of page and below, one column: the hero's text above its panel,
   and the cards stacked. Wider, the grids decide for themselves. */
@container page (max-width: 760px) {
  .rm-hero,
  .rm-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Pricing teaser and tiers --------------------------------------------------- */
.teaser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tcard-link,
.tier {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
  transition:
    transform 200ms var(--e-out),
    box-shadow 200ms ease-out;
}

.tcard-link:hover,
.tier:hover {
  color: var(--text);
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--lift);
}

.tcard-link:active {
  transform: scale(0.98);
}

.tcard-link.is-featured,
.tier.is-featured {
  padding: 19px 21px;
  border: 2px solid var(--accent);
}

.tier-name {
  font-size: 16px;
  font-weight: 600;
}

.tier-price {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.tier-sub {
  color: var(--text-secondary);
  font-size: 13px;
}

.tier-blurb {
  flex: 1;
  margin-top: 4px;
  color: var(--text-secondary);
}

.tier-cta {
  margin-top: 10px;
  color: var(--accent);
  font-weight: 500;
}

/* The Data plan's route, under the teaser and under /pricing's plans: a
   quiet row, because it is a conversation and not a fourth price. */
.data-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 16px;
  padding: 16px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text-secondary);
}

.data-route-h {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
}

/* ---- Accordion --------------------------------------------------------------------- */
.sec-faq .acc {
  margin-top: 24px;
  border-top: 1px solid var(--border);
}

.acc-item {
  border-bottom: 1px solid var(--border);
}

.acc-h {
  font-size: inherit;
  font-weight: inherit;
}

.acc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 18px 0;
  border: 0;
  background: none;
  font-size: 17px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.acc-ico {
  flex: none;
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  transition: transform 300ms var(--e-out);
}

.acc-item.is-open .acc-ico {
  transform: rotate(45deg);
}

.acc-in p {
  max-width: 820px;
  padding-bottom: 20px;
  color: var(--text-secondary);
  font-size: 16px;
}

/* ---- Footer ---------------------------------------------------------------------- */
.ftr {
  padding: 40px 0 48px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.ftr .wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ftr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-bottom: 8px;
  font-size: 15px;
}

.ftr-nav a {
  color: var(--text-secondary);
}

.ftr-nav a:hover {
  color: var(--text);
}

.ftr-nav .ftr-brand {
  color: var(--text);
  font-weight: 600;
}

/* The signup's pages: copyright and the disclaimer's first sentence, one row. */
.ftr-min {
  padding: 24px 0;
}

.ftr-min .wrap {
  flex-flow: row wrap;
  gap: 4px 28px;
}

.ftr-copy {
  white-space: nowrap;
}

/* ---- Signup confirmation (/confirm/:token, /subscribe) ------------------------------ */
/* Short pages: the footer sits at the foot of the window, not under the text. */
.site:has(> .confirm) {
  display: flex;
  flex-direction: column;
}

.confirm {
  flex: 1;
  padding-top: 72px;
  padding-bottom: 96px;
}

.confirm-col {
  max-width: 640px;
}

.confirm-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
}

/* "Link expired": the ring of the urgency scale's "no deadline", broken. */
.ring-dashed {
  flex: none;
  width: 12px;
  height: 12px;
  border: 1.5px dashed currentColor;
  border-radius: 50%;
}

.confirm-h {
  font-size: clamp(32px, 7cqw, 44px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.confirm-lede {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1.6;
}

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

.issue-card {
  margin-top: 32px;
  padding: 20px 24px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.issue-list {
  margin-top: 14px;
}

.issue-list li {
  padding: 14px 0;
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 16px;
}

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

.confirm-note {
  margin-top: 28px;
  color: var(--text-secondary);
}

.confirm-addr {
  color: var(--text);
  font-family: var(--font-num);
  overflow-wrap: anywhere;
}

.confirm-link {
  color: var(--text);
  text-decoration: underline;
}

.confirm-rule {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.confirm-h2 {
  font-size: 20px;
  line-height: 1.35;
}

.confirm-p {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.confirm-btns {
  margin-top: 20px;
}

.confirm-form {
  margin-top: 28px;
}

.confirm-label {
  display: block;
  margin: 32px 0 8px;
  color: var(--text);
  font-weight: 500;
}

.confirm-signup .signup-done {
  margin-top: 28px;
}

/* ---- Unsubscribe (/unsubscribe) ------------------------------------------------------ */
/* The design names its danger pair rf / rb and its control edge bl: the
   critical pair and --border-strong (design-tokens.md, "Dark theme"). */
.site:has(> .unsub) {
  display: flex;
  flex-direction: column;
}

.unsub {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  padding: 64px 20px 80px;
}

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

.unsub-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.unsub-kicker.is-danger {
  color: var(--critical-text);
}

.unsub-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.unsub-h {
  font-size: clamp(30px, 7cqw, 40px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.unsub-lede {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.unsub-h2 {
  font-size: 20px;
  line-height: 1.35;
}

.unsub-p {
  margin-top: 6px;
  color: var(--text-secondary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.unsub-btns {
  margin-top: 20px;
}

/* What you'd lose: one row per email, the next one on the right; below 480px
   of card the next one drops under its row, with its heading spelled out. */
.lose-card {
  position: relative;
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.lose-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.lose-head-k {
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.lose-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 190px);
  gap: 8px 24px;
  padding: 16px 20px;
}

.lose-row + .lose-row {
  border-top: 1px solid var(--border-subtle);
}

.lose-what {
  font-size: 14px;
  color: var(--text-secondary);
}

.lose-label {
  margin-right: 6px;
  font: 600 12px/1.4 var(--font-num);
  letter-spacing: 0.04em;
  color: var(--text);
}

.lose-without {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.lose-next {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
  text-align: right;
  font: 400 13px/1.45 var(--font-num);
  color: var(--text);
}

.lose-next-name {
  max-width: 100%;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lose-next-when {
  color: var(--text-secondary);
}

.lose-next.is-soon,
.lose-next.is-soon .lose-next-when {
  color: var(--critical-text);
}

.lose-next.is-muted {
  color: var(--text-muted);
}

/* The column's heading, for screen readers, and on a narrow card for all. */
.lose-next-k {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@container (max-width: 480px) {
  .lose-head-next {
    display: none;
  }

  .lose-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .lose-next {
    align-items: flex-start;
    text-align: left;
  }

  .lose-next-k {
    position: static;
    width: auto;
    height: auto;
    clip-path: none;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
}

/* The two lighter choices: native radios drawn as cards. */
.alts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
  margin-top: 18px;
}

.alt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--ease-hover),
    background var(--ease-hover);
}

.alt-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.alt-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-input);
}

.alt-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 120ms var(--e-out);
}

.alt:has(.alt-input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: var(--accent-wash);
}

.alt:has(.alt-input:checked) .alt-dot {
  border-color: var(--accent);
}

.alt:has(.alt-input:checked) .alt-dot::after {
  transform: scale(1);
}

.alt:has(.alt-input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.alt-title {
  display: block;
  color: var(--text);
  font-weight: 600;
}

.alt-body {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* The primary button says what the chosen card does. */
.unsub-alts .if-pause,
.unsub-alts:has(.alt-input[value='pause']:checked) .if-closing {
  display: none;
}

.unsub-alts:has(.alt-input[value='pause']:checked) .if-pause {
  display: inline;
}

.unsub-danger {
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* As findable as the primary button, and as big. */
.btn-danger {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--critical-text);
}

.btn-danger:hover {
  background: var(--critical-wash);
  color: var(--critical-text);
}

.unsub-info {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface-sunken);
}

.unsub-info-h {
  font-size: 16px;
}

.unsub-foot {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* ---- Remove rule (/rules/remove) ----------------------------------------------------- */
/* The unsubscribe page's frame and rows. The rule heads the card on the
   design's s2, which is --surface-hover: --surface-raised is the card's own
   white in light. */
.lose-rule {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--r-feat) - 1px) calc(var(--r-feat) - 1px) 0 0;
  background: var(--surface-hover);
}

.lose-rule-name {
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.lose-rule-filters {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.rm-danger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.rm-danger .unsub-p {
  margin-top: 0;
}

.rm-btn {
  height: 44px;
  padding: 0 20px;
}

/* ---- Pricing page ------------------------------------------------------------------- */
.page {
  padding-top: 56px;
  padding-bottom: 88px;
}

.badge-founding {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 15px;
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font-size: 13px;
  font-weight: 500;
}

.pricing .lede {
  max-width: 720px;
}

.page-h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.pr-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 24px;
}

/* What the script shows a visitor it has put on the euro list from outside
   the five currencies' own countries. */
.pr-converted {
  max-width: 720px;
  margin: -8px 0 24px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--surface);
  color: var(--text-secondary);
  font-size: 14px;
}

/* Three columns whose rows line up: each card lays its four parts (what the
   plan is, what it costs, the button, what is in it) on the grid's own rows,
   so the buttons sit on one line however many price lines a plan has. */
.pr-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.tier {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 16px;
  padding: 22px;
}

.tier.is-featured {
  padding: 21px;
}

.tier-line {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.tier-cost {
  display: grid;
  align-content: start;
  gap: 4px;
}

.tier-cost .tier-price {
  margin: 0 0 2px;
}

.tier-founding {
  justify-self: start;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font-size: 13px;
  font-weight: 500;
}

.tier-feats {
  display: grid;
  align-content: start;
  gap: 8px;
  font-size: 14px;
}

.tier-feats li {
  display: flex;
  gap: 8px;
}

.tick {
  color: var(--accent);
  font-weight: 600;
}

/* Under the plans: what the five lists leave out. */
.pr-note {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.sec-sm {
  margin-top: 64px;
}

.tbl-wrap {
  /* Positioned, so the table's screen-reader labels scroll with it rather
     than stretching the page. */
  position: relative;
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

/* Fixed columns: the feature takes 40% and the three plans share the rest
   evenly, whatever their cells say. */
.tbl {
  width: 100%;
  min-width: 560px;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 14px;
}

.tbl th:first-child {
  width: 40%;
}

.tbl th,
.tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

.tbl th:first-child {
  text-align: left;
}

.tbl thead th {
  background: var(--surface-side);
  font-size: 13px;
}

.tbl tbody th {
  font-weight: 500;
}

.tbl tbody tr:last-child > * {
  border-bottom: 0;
}

.tbl tbody tr:hover > * {
  background: var(--surface-hover);
}

/* ---- Get started: the rule builder -------------------------------------------------
   Builder left, preview right; one column below 960px of page, the preview
   under the builder. The design's role names map onto the tokens as in
   design-tokens.md (Dark theme — Warm carbon): s2 is --surface-hover, l2
   --border-subtle, bl --border-strong, btn --surface-button. */
.onb {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: start;
}

.onb-build,
.onb-intro,
.onb-rule,
.onb-step,
.onb-step-head,
.onb-group,
.onb-form {
  display: flex;
  flex-direction: column;
}

.onb-build {
  gap: 26px;
}

.onb-intro {
  gap: 10px;
}

.onb-h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.onb-lede {
  font-size: 16px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.onb-label {
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* The rule, read back */
.onb-rule {
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.onb-sentence {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.onb-tok {
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  outline: 2px solid transparent;
  outline-offset: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
  transition:
    outline-color 200ms ease-out,
    background 200ms ease-out;
}

.onb-tok.is-current {
  outline-color: var(--accent);
}

/* Steps */
.onb-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.onb-tab {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
}

.onb-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border-subtle);
  transition: background 400ms ease-out;
}

.onb-tab.is-done .onb-bar {
  background: var(--accent);
}

.onb-tab-l {
  font: 500 12px/1.3 var(--font-num);
}

.onb-tab[aria-selected='true'] {
  color: var(--text);
}

.onb-step {
  gap: 22px;
}

.onb-step-head {
  gap: 6px;
}

.onb-h2 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.onb-h2:focus {
  outline: none;
}

.onb-p,
.onb-note {
  color: var(--text-secondary);
  text-wrap: pretty;
}

.onb-group {
  gap: 8px;
}

.onb-chip {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 22px;
  border-color: var(--border-strong);
  background: var(--surface-button);
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

.onb-chip .chip-meta {
  font-family: var(--font-num);
}

.onb-country {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* The dashboard's country picker (web/src/styles.css, .combobox), copied
   as it is there, then sized for this page as Settings sizes its own. */
.combobox {
  position: relative;
}

.combobox input {
  width: 100%;
  min-width: 0;
  padding: 5px 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  background: var(--surface-input);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
}

.combobox input::placeholder {
  color: var(--text-muted);
}

.combobox-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: min(320px, 60vh);
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  list-style: none;
}

.combobox-list [role='option'] {
  display: flex;
  gap: 6px;
  padding: 5px 6px;
  border-radius: var(--radius-chip);
  color: var(--text);
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}

.combobox-list [role='option'].is-active {
  background: var(--surface-selected);
}

.combobox-list [role='option'][aria-selected='true'] {
  font-weight: 500;
}

.combobox-empty {
  padding: 5px 6px;
  color: var(--text-muted);
  font-size: 13px;
}

.country-note {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.onb-combobox {
  flex: 0 1 280px;
  min-width: 220px;
}

.onb-combobox input {
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14.5px;
}

.onb-combobox .combobox-list [role='option'] {
  font-size: 14px;
}

.onb-note {
  font-size: 13px;
}

/* Sign up: the sign-up page's ways in (web/src/auth/auth.css, .au-provider
   and .au-divider), in this site's tokens so they follow the theme. */
.onb-signup {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 440px;
}

.onb-providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onb-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-button);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 120ms ease-out,
    box-shadow 120ms ease-out,
    transform 120ms var(--e-out);
}

.onb-provider:hover {
  border-color: var(--text-secondary);
  box-shadow: 0 2px 8px rgb(27 28 31 / 0.08);
  color: var(--text);
  text-decoration: none;
}

.onb-provider:active {
  transform: scale(0.98);
}

.onb-provider-mark {
  flex: none;
  width: 18px;
  height: 18px;
}

.onb-provider-mark.is-apple {
  width: 15px;
}

.onb-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font: 400 12px/1 var(--font-num);
}

.onb-divider::before,
.onb-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.onb-form {
  gap: 10px;
}

/* Clerk's challenge, when it draws one; no gap in the column until then. */
#clerk-captcha:empty {
  display: none;
}

.onb-auth-start {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The code, as the sign-in page asks for it (web/src/auth/auth.css: .au-back,
   .au-code, .au-box, .au-status, .au-resend), in this site's tokens. */
.onb-code {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.onb-back-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: -12px 0 -8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.onb-back-link:hover {
  color: var(--text);
}

.onb-code-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.onb-h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.onb-h3:focus {
  outline: none;
}

.onb-code-boxes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.onb-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--surface-button);
  color: var(--text);
  font: 500 24px/1 var(--font-num);
  transition:
    border-color 150ms,
    box-shadow 150ms,
    background 200ms,
    transform 200ms;
}

.onb-box.is-filled {
  border-color: var(--text-secondary);
}

.onb-box.is-next {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* The caret in the next box: the real input lies over the boxes, unseen. */
.onb-box.is-next::after {
  content: '';
  width: 2px;
  height: 26px;
  border-radius: 1px;
  background: var(--accent);
  animation: onb-blink 1s steps(1) infinite;
}

.onb-code-boxes.is-checking .onb-box {
  border-color: var(--accent);
  background: var(--accent-wash);
  transform: translateY(-2px);
}

.onb-code-boxes.is-refused .onb-box {
  border-color: var(--critical-text);
}

.onb-code-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font-size: 16px;
  cursor: text;
}

.onb-code-input:focus-visible {
  outline: none;
}

.onb-code-input::selection {
  background: transparent;
}

.onb-code-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 21px;
  margin-top: -6px;
  color: var(--text-secondary);
  font-size: 14px;
}

.onb-code-status.is-error {
  color: var(--critical-text);
}

.onb-resend {
  align-self: flex-start;
  min-height: 44px;
  margin-top: -14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.onb-resend:disabled {
  color: var(--text-secondary);
  cursor: default;
}

.onb-done {
  display: flex;
  align-items: center;
  gap: 12px;
}

.onb-spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.onb-done .onb-spinner {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.onb-provider[aria-disabled='true'] {
  opacity: 0.55;
  pointer-events: none;
}

@keyframes onb-blink {
  50% {
    opacity: 0;
  }
}

.onb-input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface-button);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}

.onb-input[aria-invalid='true'] {
  border-color: var(--critical-text);
}

.onb-err {
  font-size: 13px;
  color: var(--critical-text);
}

.onb-err:empty {
  display: none;
}

.onb-submit {
  height: 48px;
  border-radius: 8px;
  font-size: 15px;
}

.onb-submit:hover {
  filter: brightness(1.08);
}

.onb-small {
  font-size: 13px;
  color: var(--text-secondary);
}

.onb-small a {
  color: var(--accent);
}

.onb-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.onb-back,
.onb-next {
  height: 44px;
}

.onb-next {
  padding: 0 22px;
}

.onb-back.is-gone {
  visibility: hidden;
}

/* The preview */
.onb-side {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.onb-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 56px -40px rgb(0 0 0 / 0.35);
}

.onb-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-hover);
}

.onb-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.onb-clock {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.onb-card-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
}

.onb-headline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.onb-count {
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.onb-count-l {
  flex: 1;
  min-width: 200px;
  font-size: 15px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Each kind of alert in its tone: the word, and the glyph's tile. */
.onb-t-accent {
  color: var(--accent-wash-text);
}

.onb-t-urgent {
  color: var(--urgent-text);
}

.onb-t-critical {
  color: var(--critical-text);
}

.onb-t-cap {
  color: var(--cap-text);
}

.onb-b-accent {
  background: var(--accent-wash);
  color: var(--accent-wash-text);
}

.onb-b-urgent {
  background: var(--urgent-wash);
  color: var(--urgent-text);
}

.onb-b-critical {
  background: var(--critical-wash);
  color: var(--critical-text);
}

.onb-b-cap {
  background: var(--cap-wash);
  color: var(--cap-text);
}

/* The chosen alert, as it arrives */
.onb-feat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}

.onb-feat-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.onb-feat-from {
  font-weight: 600;
  color: var(--text);
}

.onb-kicker {
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
}

.onb-feat-t {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.onb-feat-line {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.onb-closes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 12.5px;
}

.onb-cd {
  font-size: 14px;
  font-weight: 500;
}

.onb-feat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
}

.onb-elig {
  font-size: 12.5px;
  font-weight: 500;
}

.onb-elig.is-ok {
  color: var(--live-text);
}

.onb-elig.is-out {
  color: var(--critical-text);
}

.onb-prov {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* Every alert */
.onb-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onb-list-l {
  padding-bottom: 6px;
}

.onb-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.onb-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 150ms ease-out;
}

.onb-row:hover,
.onb-row[aria-pressed='true'] {
  background: var(--surface-hover);
}

/* Greyed out, never hidden: the visitor cannot invest in it. */
.onb-row.is-out {
  opacity: 0.55;
}

.onb-glyph {
  grid-row: span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font: 600 13px/1 var(--font-num);
}

.onb-row-t {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.onb-row-k {
  font-weight: 500;
}

.onb-row-w {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.onb-row-s {
  grid-column: 2 / 4;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.onb-more {
  padding: 6px 10px 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.onb-empty {
  padding: 18px;
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.onb-next-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent-wash-text);
}

.onb-next-l {
  font: 600 11px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.onb-next-t {
  font-size: 13.5px;
  font-weight: 500;
}

.onb-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
  font-size: 14.5px;
  font-weight: 500;
}

.onb-prompt-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.onb-prompt-btn:hover {
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: no-preference) {
  .onb-row.is-new {
    animation: rise-in 350ms var(--e-out) both;
    animation-delay: calc(var(--i, 0) * 40ms);
  }
}

@container page (max-width: 959px) {
  .onb {
    grid-template-columns: minmax(0, 1fr);
  }

  .onb-side {
    position: static;
  }
}

/* On a phone the time would squeeze the name: it goes under it. */
@container page (max-width: 519px) {
  .onb-row {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .onb-glyph {
    grid-row: span 3;
  }

  .onb-row-s {
    grid-column: 2;
  }
}

/* ---- Data & API (/data) ------------------------------------------------------------ */
.dp-hero {
  padding-top: 56px;
  padding-bottom: 64px;
}

/* Two columns that stack once either would be under 440px. */
.dp-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 56px;
  align-items: start;
}

.dp-cols > * {
  min-width: 0;
}

.dp-intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}

.dp-h1 {
  max-width: 560px;
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.dp-lead {
  max-width: 520px;
  font-size: 16px;
  color: var(--text-secondary);
}

.dp-kmut {
  color: var(--text-secondary);
}

/* Figures: hairlines between the cells and round them, drawn by the gap. */
.dp-figs-c {
  container: figs / inline-size;
  max-width: 560px;
}

.dp-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
}

/* Two columns: the third cell takes the row, so no empty cell shows. */
@container figs (min-width: 303px) and (max-width: 453px) {
  .dp-fig:last-child {
    grid-column: 1 / -1;
  }
}

.dp-fig {
  padding: 14px 16px;
  background: var(--bg);
}

.dp-fig dt {
  font: 500 11.5px/1.4 var(--font-num);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.dp-fig-v {
  margin-top: 6px;
  font: 500 18px/1.3 var(--font-num);
  letter-spacing: -0.02em;
}

.dp-fig-n {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.dp-teams ul {
  margin-top: 6px;
}

.dp-teams li {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.dp-team-l {
  font-weight: 600;
}

.dp-mail {
  font-size: 14px;
  color: var(--text-secondary);
}

.dp-addr {
  font-family: var(--font-num);
  font-weight: 500;
}

/* The contact card: the form, or what replaces it once sent. */
.dp-card {
  position: relative;
  scroll-margin-top: 80px;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--surface);
  box-shadow: var(--shadow-form);
}

.lead {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px;
}

.lead-h {
  font-size: 21px;
  line-height: 1.3;
}

.lead-sub {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.lead-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.lead-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lead-l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
}

p.lead-l {
  display: block;
}

.lead-l-sub {
  color: var(--text-secondary);
  font-weight: 400;
}

.lead-l-note {
  margin-top: -2px;
  font-size: 13px;
}

.lead-in {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font-weight: 400;
}

.lead-ta {
  height: auto;
  min-height: 42px;
  padding: 10px 12px;
  resize: vertical;
  font: 400 15px/1.5 var(--font-ui);
}

.lead-err,
.lead-hint {
  font-size: 12px;
  color: var(--text-secondary);
}

.lead-err {
  color: var(--critical-text);
}

.lead-err:empty {
  display: none;
}

.lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-chip {
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-button);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 120ms ease-out,
    border-color 120ms ease-out,
    transform 120ms var(--e-out);
}

.lead-chip:hover {
  background: var(--surface-hover);
}

.lead-chip:active {
  transform: scale(0.96);
}

.lead-chip[aria-pressed='true'],
.lead-chip[aria-pressed='true']:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
}

/* The tick is drawn, not spoken: aria-pressed already says it. */
.lead-chip[aria-pressed='true']::before {
  content: '✓ ';
  content: '✓ ' / '';
  white-space: pre;
}

.lead-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lead-fail {
  font-size: 13px;
  color: var(--critical-text);
}

.lead-fail a {
  color: inherit;
  text-decoration: underline;
}

.lead-submit {
  width: 100%;
  height: 48px;
}

.lead-submit:active {
  transform: scale(0.98);
}

.lead-submit:disabled {
  opacity: 0.75;
  cursor: progress;
}

.lead-fine {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.lead-sent {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px 28px;
  animation: lead-in 350ms var(--e-out);
}

@keyframes lead-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.lead-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 12px/1.4 var(--font-num);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--live-text);
}

.lead-ok-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.lead-sent-h {
  margin-top: -10px;
  font-size: 24px;
  line-height: 1.25;
}

.lead-sent-b {
  font-size: 15px;
  color: var(--text-secondary);
}

.lead-sent-addr {
  font-family: var(--font-num);
  color: var(--text);
  overflow-wrap: anywhere;
}

.lead-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-tokens li {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-hover);
  font: 400 12.5px/1.5 var(--font-num);
}

.lead-wait {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: 9px;
  background: var(--bg);
}

.lead-wait-t {
  font-size: 13px;
  font-weight: 600;
}

.lead-wait a {
  font-weight: 500;
}

.lead-again {
  align-self: flex-start;
}

/* Next steps and the sample webhook, on a band. */
.dp-band {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.dp-band > .wrap {
  padding-top: 64px;
  padding-bottom: 64px;
}

.dp-h2 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.dp-steps {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.dp-steps li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.dp-steps li:last-child {
  border-bottom: 1px solid var(--border);
}

.dp-step-n {
  padding-top: 2px;
  font: 500 13px/1.5 var(--font-num);
  color: var(--accent);
}

.dp-step-t {
  font-weight: 600;
}

.dp-hook {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 80px;
}

.dp-hook-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.dp-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--surface-hover);
}

.dp-tabs [role='tab'] {
  position: relative;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font: 500 12px/1 var(--font-num);
  cursor: pointer;
  transition:
    background 120ms ease-out,
    color 120ms ease-out;
}

.dp-tabs [role='tab']:hover {
  color: var(--text);
}

.dp-tabs [aria-selected='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow:
    0 1px 2px rgb(21 26 33 / 0.08),
    0 0 0 1px rgb(21 26 33 / 0.04);
}

.dp-code {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg);
}

.dp-code-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.dp-post {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font: 600 11.5px/1.4 var(--font-num);
}

.dp-url {
  min-width: 0;
  overflow: hidden;
  font: 400 12px/1.4 var(--font-num);
  color: var(--text-secondary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font: 400 12.5px/1.65 var(--font-num);
  color: var(--text);
}

.dp-cap {
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Enterprise questions: the shared accordion, smaller, with + and −. */
.dp-faq {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
  padding-top: 64px;
  padding-bottom: 72px;
}

.dp-faq-l {
  display: flex;
  flex: 1 1 280px;
  flex-direction: column;
  gap: 10px;
}

.dp-faq-r {
  flex: 2 1 480px;
  min-width: 0;
}

.dp-faq-r .acc {
  border-top: 1px solid var(--border);
}

.dp-faq-r .acc-btn {
  padding: 16px 0;
  font-size: 15.5px;
}

.dp-faq-r .acc-ico,
.dp-faq-r .acc-item.is-open .acc-ico {
  font-size: 0;
  transform: none;
}

.dp-faq-r .acc-ico::before {
  content: '+';
  font: 400 18px/1 var(--font-num);
}

.dp-faq-r .acc-item.is-open .acc-ico::before {
  content: '−';
}

.dp-faq-r .acc-p {
  transition-duration: 250ms;
}

.dp-faq-r .acc-in p {
  max-width: 640px;
  padding-bottom: 18px;
  font-size: 15px;
}

/* Touch: 44px to aim at. Chips grow; the tabs keep their look and reach
   past it. */
@container page (max-width: 859px) {
  .lead-chip {
    height: 44px;
  }

  .dp-tabs [role='tab']::after {
    content: '';
    position: absolute;
    inset: -8px -1px;
  }
}

/* ---- Privacy policy and terms (/privacy, /terms) ------------------------------------- */
/* One reading column, and the contents in a rail beside it that stays in view
   as the text scrolls. Below 1024px of page the contents sit between the
   introduction and section 1. */
.legal-cols {
  display: grid;
  grid-template-columns: minmax(0, 680px) 232px;
  justify-content: space-between;
  column-gap: 56px;
  align-items: start;
}

.legal-head,
.legal-body {
  grid-column: 1;
}

.legal-toc {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  /* Clear of the sticky header (60px). */
  top: 84px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-top: 10px;
}

.legal-toc ol {
  margin: 12px 0 0;
  /* Room for a two-digit marker ("21. ", four 12px mono characters), which
     the rail's scroll box would otherwise clip. */
  padding-left: 30px;
  font-size: 14px;
  line-height: 1.4;
}

.legal-toc li {
  break-inside: avoid;
}

.legal-toc li + li {
  margin-top: 8px;
}

.legal-toc li::marker {
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: 12px;
}

.legal-toc a {
  color: var(--text-secondary);
}

.legal-toc a:hover {
  color: var(--text);
}

.legal-body {
  font-size: 16px;
  line-height: 1.65;
}

.legal-sec {
  margin-top: 56px;
}

.legal-sec > * + * {
  margin-top: 16px;
}

.legal-sec > .legal-tbl,
.legal-sec > .legal-tbl + * {
  margin-top: 20px;
}

.legal-sec h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  scroll-margin-top: 84px;
}

.legal-n {
  color: var(--text-muted);
  font-family: var(--font-num);
  font-size: 0.85em;
  font-weight: 500;
}

.legal-body ul {
  padding-left: 22px;
  list-style: disc;
}

.legal-body li + li {
  margin-top: 8px;
}

.legal-body li::marker {
  color: var(--text-muted);
}

/* The short version: the five points on a panel of their own. */
.legal-body .legal-short {
  padding: 20px 24px 20px 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.legal code {
  font-family: var(--font-num);
  font-size: 0.9em;
}

.legal-tbl {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.legal-tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

.legal-tbl th,
.legal-tbl td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  vertical-align: top;
}

.legal-tbl thead th {
  background: var(--surface-side);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.legal-tbl tbody th {
  font-weight: 500;
}

.legal-tbl td {
  color: var(--text-secondary);
}

.legal-tbl tbody tr:last-child > * {
  border-bottom: 0;
}

/* The terms: the key points on a panel under the opening, ahead of the
   contents wherever those sit. */
.legal-key {
  margin-top: 28px;
  padding: 18px 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.legal-key ul {
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
  font-size: 16px;
  line-height: 1.65;
}

.legal-key li + li {
  margin-top: 8px;
}

.legal-key li::marker {
  color: var(--text-muted);
}

/* A clause's title, run in. The fonts are loaded up to 600. */
.legal-sec strong {
  font-weight: 600;
}

/* A clause's bullets sit closer to it than to the clause after them. */
.legal-sec > p + ul {
  margin-top: 10px;
}

/* A clause that a reference links to ("section 8.6") clears the sticky
   header as the headings do, and is washed, so it can be found where the
   page cannot scroll it to the top. */
.legal-sec > p[id] {
  scroll-margin-top: 84px;
}

.legal-sec > p:target {
  border-radius: 4px;
  background: var(--accent-wash);
  box-shadow: 0 0 0 6px var(--accent-wash);
}

@container page (max-width: 1023px) {
  .legal-cols {
    grid-template-columns: minmax(0, 680px);
  }

  .legal-toc {
    grid-column: 1;
    grid-row: auto;
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 32px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    background: var(--surface);
  }

  .legal-toc ol {
    columns: 2 240px;
    column-gap: 40px;
  }

  .legal-sec:first-child {
    margin-top: 48px;
  }
}

/* Phone: each table row becomes a block, and each cell above its text names
   its column, which the hidden header row no longer shows. */
@container page (max-width: 759px) {
  .legal-sec {
    margin-top: 44px;
  }

  .legal-sec h2 {
    font-size: 20px;
  }

  .legal-body .legal-short {
    padding: 16px 16px 16px 36px;
  }

  .legal-key {
    padding: 16px;
  }

  .legal-key ul {
    padding-left: 18px;
  }

  .legal-tbl thead {
    display: none;
  }

  .legal-tbl table,
  .legal-tbl tbody,
  .legal-tbl tr,
  .legal-tbl th,
  .legal-tbl td {
    display: block;
  }

  .legal-tbl tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
  }

  .legal-tbl tbody tr:last-child {
    border-bottom: 0;
  }

  .legal-tbl th,
  .legal-tbl td {
    padding: 0;
    border: 0;
  }

  .legal-tbl td {
    margin-top: 8px;
  }

  .legal-tbl td::before {
    content: attr(data-label);
    display: block;
    color: var(--text-muted);
    font: 600 11px/1.5 var(--font-num);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* ---- Platform directory (/platforms) -------------------------------------------------
   From a written brief for the "RaiseSonar Public" design's platforms page
   (fees locked). Its colours map by role (design-tokens.md, "Dark theme —
   Warm carbon"): s2 is --surface-hover, accs/acci the accent wash, af/ab the
   urgent pair, rf --critical-text, nf/nb the neutral pair, bl
   --border-strong. Below 1100px of page the table gives way to cards. */
.pf {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1200px;
  margin-inline: auto;
  padding: 48px 20px 72px;
}

.pf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* Signed in there is no sign-up card beside the intro. */
.pf-hero.is-member {
  grid-template-columns: minmax(0, 1fr);
}

.pf-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pf-h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pf-lede {
  max-width: 560px;
  font-size: 16px;
  color: var(--text-secondary);
}

.pf-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  font-weight: 500;
}

.pf-stat-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pf-stat-mut {
  color: var(--text-secondary);
}

/* The sign-up card. Dark has no shadows (design-tokens.md). */
.pf-join {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-feat);
  background: var(--surface);
  box-shadow: var(--pf-lift);
}

.pf-join-h {
  font-size: 18px;
  font-weight: 600;
}

.pf-checks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.pf-checks li {
  display: flex;
  gap: 8px;
}

.pf-tick {
  flex: none;
  color: var(--accent);
  font-weight: 600;
}

.pf-join-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pf-email {
  flex: 1 1 200px;
  height: 44px;
}

.pf-btn {
  height: 44px;
}

.pf-fine {
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* Region pills: the chip, at the brief's size, on the button fill. */
.pf-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pf-pill {
  min-height: 34px;
  padding: 0 14px;
  border-color: var(--border-strong);
  background: var(--surface-button);
  font-size: 13.5px;
  font-weight: 500;
}

.pf-pill .chip-meta {
  font-size: 12px;
}

/* The table, from 1100px of page. */
.pf-table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.pf-table {
  min-width: 980px;
}

.pf-tr {
  display: grid;
  grid-template-columns:
    minmax(200px, 1.5fr) 64px 130px 104px minmax(180px, 1.4fr)
    72px 132px 92px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 13.5px;
  transition: background 0.15s ease-out;
}

.pf-tr:not(.pf-th):hover {
  background: var(--surface-hover);
}

.pf-table [role='rowgroup']:last-child .pf-tr:last-child {
  border-bottom: 0;
}

.pf-th {
  border-bottom-color: var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pf-badge {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent-wash);
  color: var(--accent-wash-text);
  font: 600 10px/1.4 var(--font-num);
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.pf-who {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.pf-who-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pf-name {
  font-size: inherit;
  font-weight: 600;
}

/* The platform mark: the chip's monogram tile, at 22px and 30px. */
.pf-mark {
  min-width: 22px;
  height: 22px;
  flex: none;
}

.pf-mark-lg {
  min-width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  font-size: 11.5px;
}

.pf-note {
  font-size: 12px;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.pf-note-urgent {
  color: var(--urgent-text);
}

.pf-note-critical {
  color: var(--critical-text);
}

.pf-cc,
.pf-min {
  font-size: 12.5px;
}

.pf-regime {
  font-size: 12px;
}

.pf .is-missing {
  color: var(--text-secondary);
}

.pf-fee {
  font-size: 13px;
  color: var(--text-secondary);
}

/* A locked fee: a real button, so it takes focus and a name; only the
   placeholder inside it is blurred, so the focus ring stays sharp. */
.pf-fee.is-gated {
  display: inline-block;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.pf-fee.is-gated > span {
  display: inline-block;
  filter: blur(5px);
}

.pf-live {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

.pf-live.is-zero {
  color: var(--text-secondary);
}

.pf-cov {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.cov-filings {
  border-color: var(--accent-wash);
  background: var(--accent-wash);
  color: var(--accent-wash-text);
}

.cov-site {
  border-color: var(--border);
  background: var(--neutral-wash);
  color: var(--neutral-text);
}

.cov-partial {
  border-color: var(--urgent-wash);
  background: var(--urgent-wash);
  color: var(--urgent-text);
}

.cov-planned {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
}

.pf-act {
  justify-self: end;
}

.pf-act-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-button);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 120ms ease-out,
    color 120ms ease-out;
}

.pf-act-btn:hover,
.pf-act-lg:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

/* The cards, below 1100px of page. */
.pf-cards {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

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

.pf-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pf-card-id {
  flex: 1;
  min-width: 0;
}

.pf-card .pf-name {
  font-size: 15px;
  line-height: 1.35;
}

.pf-card-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.pf-card .pf-cov {
  font-size: 11px;
}

.pf-kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  font-size: 13px;
}

.pf-kv dt {
  color: var(--text-secondary);
}

.pf-card .pf-note {
  font-size: 12.5px;
}

.pf-act-lg {
  width: 100%;
  height: 44px;
  margin-top: auto;
  border-color: var(--border-strong);
  border-radius: var(--r-ctl);
  font-size: 14px;
}

.pf-legend {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The closing band, inverted. Its body is the ground mixed into the ink, a
   solid colour (not the design's 78% opacity) at 8:1 or better in both
   themes. */
.pf-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 32px;
  align-items: center;
  padding: 32px 36px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
}

.pf-close-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pf-close-h {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.pf-close-p {
  max-width: 560px;
  font-size: 15px;
  color: color-mix(in srgb, var(--bg) 78%, var(--text));
}

.pf-close-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pf-close :focus-visible {
  outline-color: var(--bg);
}

/* The Details dialog. */
.pf-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
}

.pf-dialog {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 22px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--pf-pop);
  animation: rise-in 0.25s var(--e-out);
}

.pf-dlg-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pf-dlg-h {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
}

.pf-x {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pf-x:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.pf-dlg-body {
  font-size: 14.5px;
  color: var(--text-secondary);
}

.pf-dlg-live {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
}

.pf-dlg-head {
  padding: 8px 12px;
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pf-dlg-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
}

.pf-dlg-raise {
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-dlg-cd {
  flex: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pf-dlg-cd.is-critical {
  color: var(--critical-text);
}

.pf-dlg-cd.is-urgent {
  color: var(--urgent-text);
}

.pf-dlg-cd.is-calm {
  color: var(--neutral-text);
}

.pf-dlg-empty {
  padding: 10px 12px;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 13.5px;
}

.pf-dlg-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pf-dlg-go {
  flex: 1;
}

/* While the dialog is open the page under it holds still. */
.pf-locked {
  overflow: hidden;
}

@container page (max-width: 1099px) {
  .pf-table-wrap {
    display: none;
  }

  .pf-cards {
    display: grid;
  }
}

@container page (max-width: 939px) {
  .pf-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container page (max-width: 759px) {
  .pf {
    padding: 28px 16px 56px;
  }

  .pf-h1 {
    font-size: 28px;
  }

  .pf-close {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 20px;
  }
}

/* ---- Below 860px of page: the header's nav no longer fits beside "Open
   dashboard" ------------------------------------------------------------------------- */
@container page (max-width: 859px) {
  .hdr-nav {
    display: none;
  }

  /* /pricing's columns stack, each card a column of its own parts. */
  .pr-tiers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Phone: below 760px of page ------------------------------------------------------ */
@container page (max-width: 759px) {
  .wrap {
    padding-inline: 16px;
  }

  .hdr-act {
    gap: 8px;
  }

  .btn,
  .seg button,
  .seg a,
  .chip {
    min-height: 44px;
  }

  .btn-icon {
    min-width: 44px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 48px;
  }

  .story-num {
    font-size: 64px;
  }

  .story-line {
    font-size: 19px;
  }

  .radar {
    inset: -40px -16px;
  }

  .sec {
    padding-block: 56px;
  }

  .h2 {
    font-size: 26px;
  }

  .exits-ctl {
    align-items: stretch;
    flex-direction: column;
  }

  .stake {
    gap: 10px 12px;
  }

  .range {
    flex: 1 1 140px;
    width: auto;
  }

  .exit-row {
    grid-template-columns: minmax(0, 1fr) auto 14px;
    grid-template-areas:
      'n s i'
      'b b b'
      'v v v';
    gap: 10px 12px;
    padding: 14px 16px;
  }

  .exit-name {
    grid-area: n;
  }

  .exit-stat {
    grid-area: s;
  }

  .exit-ico {
    grid-area: i;
  }

  .exit-bar {
    grid-area: b;
  }

  .exit-stake {
    grid-area: v;
  }

  .exit-detail-in p {
    margin: 0 16px 16px;
  }

  .truth {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-waffle,
  .t-outcomes,
  .t-freetrade {
    grid-area: auto;
  }

  .tcard {
    padding: 20px;
  }

  .waffle {
    grid-template-columns: repeat(10, 1fr);
    max-width: 280px;
  }

  .ft-row {
    grid-template-columns: 96px minmax(0, 1fr) 64px;
    gap: 10px;
  }

  .close-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 40px;
    padding-top: 40px;
  }

  .quote {
    font-size: 24px;
  }

  .how {
    grid-template-columns: minmax(0, 1fr);
  }

  .how-stage {
    min-height: 0;
    padding: 18px;
  }

  .cov-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 16px;
  }

  .cov-reg {
    flex-direction: row;
    gap: 10px;
  }

  .alert-sec {
    grid-template-columns: minmax(0, 1fr);
  }

  .alert-copy {
    position: static;
  }

  /* The longest closing badge, "■ 6d 23h", fits 76px. */
  .cs-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .teaser {
    grid-template-columns: minmax(0, 1fr);
  }

  .page {
    padding-top: 36px;
  }

  /* Four columns fit a phone once the cells may wrap, which reads better
     than a table that scrolls sideways under the thumb. */
  .tbl {
    min-width: 0;
    font-size: 13px;
  }

  .tbl th,
  .tbl td {
    padding: 10px 8px;
  }

  .tbl th:first-child {
    width: 37%;
    padding-left: 12px;
  }

  .page-h1 {
    font-size: 28px;
  }

  .tip::after {
    display: none;
  }
}

/* ---- Narrow phone: below 380px of page ------------------------------------------------
   Signed in, "Open dashboard" beside the logo would push the theme button
   off the screen, so it reads "Dashboard". */
.hdr-short {
  display: none;
}

@container page (max-width: 379px) {
  .hdr-long {
    display: none;
  }

  .hdr-short {
    display: inline;
  }
}

/* ---- Scroll reveal ----------------------------------------------------------------------
   Each block starts at its "before" state only when the script is running and
   motion is welcome; the script adds .is-in the first time it is 20% on
   screen. With reduced motion, or no script, everything is simply drawn in
   its final state. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal]:not(.is-in) .exit-fill,
  html.js [data-reveal]:not(.is-in) .ft-fill {
    width: 0;
  }

  html.js [data-reveal]:not(.is-in) .waffle .dot {
    animation-play-state: paused;
  }

  html.js [data-reveal]:not(.is-in) .brew-strike {
    transform: scaleX(0);
  }

  html.js [data-reveal]:not(.is-in) .brew-now {
    opacity: 0;
    transform: scale(0.6);
  }

  html.js [data-reveal]:not(.is-in) .dark-seg {
    width: 0;
  }

  html.js [data-reveal]:not(.is-in) .hl {
    background-size: 0% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* Without the sweep, the blips just sit on the rings. */
  .blip {
    opacity: 0.6;
  }

  /* The roadmap's sweeps would stand still as wedges: drop them. */
  .rm-hero-sweep,
  .rm-sonar-sweep {
    display: none;
  }

  /* Nothing plays through the alert types, so nothing counts down. */
  .at-prog {
    display: none;
  }
}

/* ---- Deal pages (/deals, /deals/:source/:slug) ---------------------------------------- */
.legacy {
  padding-top: 40px;
  padding-bottom: 72px;
}

.legacy h1 {
  margin-bottom: 8px;
  font-size: 32px;
  letter-spacing: -0.02em;
}

.legacy h2 {
  margin: 40px 0 16px;
  font-size: 20px;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 16px;
}

.deal {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}

.deal h3 {
  margin-bottom: 12px;
  font-size: 16px;
}

.deal h3 a {
  color: var(--text);
}

.deal dl,
.facts {
  display: grid;
  gap: 5px;
}

.deal dl > div,
.facts > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
}

.legacy dt {
  color: var(--text-secondary);
}

.legacy dd {
  font-variant-numeric: tabular-nums;
}

.outbound {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
}

.deal-detail {
  max-width: 44rem;
}

.meta,
.empty,
.disclaimer {
  color: var(--text-secondary);
}

.facts {
  margin: 32px 0;
}

.disclaimer {
  margin-top: 32px;
  font-size: 14px;
}