/* @renvo-tokens:start */
/* GENERATED by scripts/design/gen-website-tokens.mjs from src/lib/theme-presets.js (NIGHT).
   Do not edit this block by hand — change the token source and re-run the script. DESIGN.md is the spec.

   Every colour exists as a hex (--bg) and as RGB channels (--bg-rgb) for alpha:
   rgb(var(--brand-fill-rgb) / 0.35). Light is the default, dark follows the system setting, and
   .brand-moment forces the dark set for a subtree (heroes, the header) in both schemes.
   The gradient stops (--grad-*) and the primary button's glow (--btn-glow, --btn-glow-hover) are the
   same in both schemes and live on :root only. */
:root {
  --bg: #FBF7F1;
  --bg-rgb: 251 247 241;
  --surface-1: #FFFFFF;
  --surface-1-rgb: 255 255 255;
  --surface-2: #F3EDE4;
  --surface-2-rgb: 243 237 228;
  --border: #E6DED2;
  --border-rgb: 230 222 210;
  --border-strong: #877D73;
  --border-strong-rgb: 135 125 115;
  --text: #1A1622;
  --text-rgb: 26 22 34;
  --text-muted: #6B6276;
  --text-muted-rgb: 107 98 118;
  --brand: #6A2CB0;
  --brand-rgb: 106 44 176;
  --brand-fill: #7C3FD4;
  --brand-fill-rgb: 124 63 212;
  --brand-deep: #6A2CB0;
  --brand-deep-rgb: 106 44 176;
  --brand-tint: #EEE5EE;
  --brand-tint-rgb: 238 229 238;
  --on-brand: #FFFFFF;
  --on-brand-rgb: 255 255 255;
  --on-danger: #FFFFFF;
  --on-danger-rgb: 255 255 255;
  --on-media: #FFFFFF;
  --on-media-rgb: 255 255 255;
  --media: #0B0A0E;
  --media-rgb: 11 10 14;
  --glow: #B07CFF;
  --glow-rgb: 176 124 255;
  --sun: #B86E00;
  --sun-rgb: 184 110 0;
  --success: #19784B;
  --success-rgb: 25 120 75;
  --warning: #9A5B00;
  --warning-rgb: 154 91 0;
  --danger: #C42B3B;
  --danger-rgb: 196 43 59;
  --neutral: #6B6276;
  --neutral-rgb: 107 98 118;
  --scrim: #000000;
  --scrim-rgb: 0 0 0;
  --success-soft: #E3EFE9;
  --success-soft-rgb: 227 239 233;
  --warning-soft: #F3EBE0;
  --warning-soft-rgb: 243 235 224;
  --danger-soft: #F8E6E7;
  --danger-soft-rgb: 248 230 231;
  --neutral-soft: #EDECEF;
  --neutral-soft-rgb: 237 236 239;
  --brand-soft: #EDE6F6;
  --brand-soft-rgb: 237 230 246;
  --glow-alpha: 0.12;
  --scrim-alpha: 0.45;
  color-scheme: light;
  --grad-primary-start: #B07CFF;
  --grad-primary-start-rgb: 176 124 255;
  --grad-primary-end: #6A2CB0;
  --grad-primary-end-rgb: 106 44 176;
  --grad-footer-start: #6A2CB0;
  --grad-footer-start-rgb: 106 44 176;
  --grad-footer-end: #B07CFF;
  --grad-footer-end-rgb: 176 124 255;
  --grad-footer-veil: #1A0B2E;
  --grad-footer-veil-rgb: 26 11 46;
  --grad-footer-veil-alpha: 0.28;
  --btn-glow: 0px 10px 30px -8px rgba(124, 63, 212, 0.6);
  --btn-glow-hover: 0px 14px 34px -8px rgba(124, 63, 212, 0.7);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121017;
    --bg-rgb: 18 16 23;
    --surface-1: #1B1822;
    --surface-1-rgb: 27 24 34;
    --surface-2: #24202E;
    --surface-2-rgb: 36 32 46;
    --border: #2E2939;
    --border-rgb: 46 41 57;
    --border-strong: #716987;
    --border-strong-rgb: 113 105 135;
    --text: #F5F2FA;
    --text-rgb: 245 242 250;
    --text-muted: #A79FB8;
    --text-muted-rgb: 167 159 184;
    --brand: #B07CFF;
    --brand-rgb: 176 124 255;
    --brand-fill: #7C3FD4;
    --brand-fill-rgb: 124 63 212;
    --brand-deep: #6A2CB0;
    --brand-deep-rgb: 106 44 176;
    --brand-tint: #211731;
    --brand-tint-rgb: 33 23 49;
    --on-brand: #FFFFFF;
    --on-brand-rgb: 255 255 255;
    --on-danger: #1A0A0D;
    --on-danger-rgb: 26 10 13;
    --on-media: #FFFFFF;
    --on-media-rgb: 255 255 255;
    --media: #0B0A0E;
    --media-rgb: 11 10 14;
    --glow: #B07CFF;
    --glow-rgb: 176 124 255;
    --sun: #F5A524;
    --sun-rgb: 245 165 36;
    --success: #3DD68C;
    --success-rgb: 61 214 140;
    --warning: #F5A524;
    --warning-rgb: 245 165 36;
    --danger: #FF5C6C;
    --danger-rgb: 255 92 108;
    --neutral: #9A93A8;
    --neutral-rgb: 154 147 168;
    --scrim: #000000;
    --scrim-rgb: 0 0 0;
    --success-soft: #203633;
    --success-soft-rgb: 32 54 51;
    --warning-soft: #3E2F22;
    --warning-soft-rgb: 62 47 34;
    --danger-soft: #3F232E;
    --danger-soft-rgb: 63 35 46;
    --neutral-soft: #2F2C37;
    --neutral-soft-rgb: 47 44 55;
    --brand-soft: #332845;
    --brand-soft-rgb: 51 40 69;
    --glow-alpha: 0.22;
    --scrim-alpha: 0.6;
    color-scheme: dark;
  }
}
.brand-moment {
  --bg: #121017;
  --bg-rgb: 18 16 23;
  --surface-1: #1B1822;
  --surface-1-rgb: 27 24 34;
  --surface-2: #24202E;
  --surface-2-rgb: 36 32 46;
  --border: #2E2939;
  --border-rgb: 46 41 57;
  --border-strong: #716987;
  --border-strong-rgb: 113 105 135;
  --text: #F5F2FA;
  --text-rgb: 245 242 250;
  --text-muted: #A79FB8;
  --text-muted-rgb: 167 159 184;
  --brand: #B07CFF;
  --brand-rgb: 176 124 255;
  --brand-fill: #7C3FD4;
  --brand-fill-rgb: 124 63 212;
  --brand-deep: #6A2CB0;
  --brand-deep-rgb: 106 44 176;
  --brand-tint: #211731;
  --brand-tint-rgb: 33 23 49;
  --on-brand: #FFFFFF;
  --on-brand-rgb: 255 255 255;
  --on-danger: #1A0A0D;
  --on-danger-rgb: 26 10 13;
  --on-media: #FFFFFF;
  --on-media-rgb: 255 255 255;
  --media: #0B0A0E;
  --media-rgb: 11 10 14;
  --glow: #B07CFF;
  --glow-rgb: 176 124 255;
  --sun: #F5A524;
  --sun-rgb: 245 165 36;
  --success: #3DD68C;
  --success-rgb: 61 214 140;
  --warning: #F5A524;
  --warning-rgb: 245 165 36;
  --danger: #FF5C6C;
  --danger-rgb: 255 92 108;
  --neutral: #9A93A8;
  --neutral-rgb: 154 147 168;
  --scrim: #000000;
  --scrim-rgb: 0 0 0;
  --success-soft: #203633;
  --success-soft-rgb: 32 54 51;
  --warning-soft: #3E2F22;
  --warning-soft-rgb: 62 47 34;
  --danger-soft: #3F232E;
  --danger-soft-rgb: 63 35 46;
  --neutral-soft: #2F2C37;
  --neutral-soft-rgb: 47 44 55;
  --brand-soft: #332845;
  --brand-soft-rgb: 51 40 69;
  --glow-alpha: 0.22;
  --scrim-alpha: 0.6;
  color-scheme: dark;
}
/* @renvo-tokens:end */

/* ============================================================
   Renvo marketing site — renvo.rent
   Plain CSS, no build step. Every colour comes from the token block at the top of this file
   (GENERATED from the app's token source by scripts/design/gen-website-tokens.mjs — never edit it). DESIGN.md is the
   spec: Clash Display + Inter, the 4-based spacing scale, radius 8/14/20/pill, depth through
   surface + 1 px border, shadows only on floating things (header pill, menu panels) — and the
   primary button's glow, restored with its pre-overhaul gradient (--btn-glow, BUTTONS below).

   Light and dark follow prefers-color-scheme (the token block switches the variables).
   .brand-moment forces the dark set for a subtree in both schemes: every page's hero band,
   the header and the owner band on Home. (The coming-soon page is dark in both schemes too, but
   with its own inline styles — see COMING SOON below.)

   No colour literal lives in this file. Alpha is composed from the RGB-channel tokens:
   rgb(var(--surface-1-rgb) / 0.94). Raw colours exist only inside the illustration SVGs,
   which are inline in the pages.
   ============================================================ */

/* ----------------------------- fonts ----------------------------- */
@font-face {
  font-family: 'Clash Display';
  src: url('./fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('./fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
/* Inter, the four weights DESIGN.md allows (copied from @expo-google-fonts/inter, SIL OFL —
   fonts/Inter-OFL.txt). A browser downloads only the weights a page actually renders. */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ------------------------ non-colour scales ----------------------- */
:root {
  --font-display: 'Clash Display', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing — 4 8 12 16 20 24 32 40 56 80, nothing else. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --sp-20: 80px;

  /* Radius — badges 8, inputs/chips 14, cards/sheets 20, buttons pill. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Content widths — catalogue 1120, reading/forms 760. */
  --wrap: 1120px;
  --narrow: 760px;
  --gutter: var(--sp-4);

  /* The sticky header: 16 px top inset + a 60 px pill. Bands that open a page slide up
     under it by exactly this much, so the pill floats on the dark hero. */
  --header-h: 76px;

  /* Motion (DESIGN.md §6). */
  --dur-press: 120ms;
  --dur-glow: 150ms;
  --dur-state: 200ms;
  --dur-screen: 320ms;
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (min-width: 768px) {
  :root {
    --gutter: var(--sp-6);
  }
}

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

html {
  scroll-behavior: smooth;
  /* Anchors (/#waitlist) land below the sticky pill, not under it. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* A brand moment carries the forced-dark variables (token block); this paints with them. */
.brand-moment {
  color: var(--text);
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

p {
  margin: 0;
}

strong {
  font-weight: 600;
}

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

a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-thickness: 2px;
}

/* One focus rule for everything focusable (DESIGN.md §9). */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--brand-fill);
  color: var(--on-brand);
}

/* ------------------------------ type ------------------------------ */
.display-xl,
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}
.display-xl {
  font-size: 44px;
  line-height: 46px;
}
.display {
  font-size: 34px;
  line-height: 38px;
}
@media (min-width: 1024px) {
  .display-xl {
    font-size: 64px;
    line-height: 64px;
  }
  .display {
    font-size: 44px;
    line-height: 48px;
  }
}
.h1,
.section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}
.h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.lede {
  /* H3 size at regular weight (18/24) — the app's hero lede (text-h3); 18/28 is not in the scale. */
  font-size: 18px;
  line-height: 24px;
  color: var(--text-muted);
  max-width: 600px;
  text-wrap: pretty;
}
.prose {
  color: var(--text-muted);
  max-width: var(--narrow);
}
.prose + .prose {
  margin-top: var(--sp-4);
}
.prose strong {
  color: var(--text);
}
.prose--center {
  margin-inline: auto;
  text-align: center;
}
.small {
  font-size: 14px;
  line-height: 20px;
}
.muted {
  color: var(--text-muted);
}
.center {
  text-align: center;
}

/* Eyebrow above a title: Label size, uppercase, brand. */
.kicker {
  display: block;
  margin: 0 0 var(--sp-3);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
}
/* Status pill in the home hero ("Not live yet"). Caption size, brand on brand-soft. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--sun);
}

/* ----------------------------- layout ----------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: calc(var(--narrow) + 2 * var(--gutter));
}

.section {
  padding-block: var(--sp-14);
}
.section--tight {
  padding-block: var(--sp-10);
}
/* Plain pages are plain (DESIGN.md §1): an "alt" section is the same flat bg, set off by a
   hairline rather than a tinted band. */
.section--alt {
  border-top: 1px solid var(--border);
}
@media (min-width: 1024px) {
  .section {
    padding-block: var(--sp-20);
  }
  .section--tight {
    padding-block: var(--sp-14);
  }
}
.section__head {
  margin-bottom: var(--sp-8);
}
.section__head .lede,
.section__intro {
  margin-top: var(--sp-4);
}
.section__intro {
  color: var(--text-muted);
  max-width: 640px;
}
.section__title + .prose,
.section__title + .callout,
.section__title + .steps,
.section__title + .faq {
  margin-top: var(--sp-6);
}
.section--center .section__head {
  text-align: center;
}
.section--center .section__head .lede,
.section--center .section__head .section__intro {
  margin-inline: auto;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.more-link {
  margin-top: var(--sp-8);
  font-weight: 600;
}
/* A standalone link (not inside a sentence) is a 44 px target on touch. */
@media (pointer: coarse) {
  .more-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ============================ HEADER ============================ */
/* The sticky wrapper (HTML: <div class="site-top brand-moment">). site.js overwrites the
   <header>'s own class, so the forced-dark scope and the sticky position live on this
   wrapper. The header always renders dark: every page opens on a dark brand-moment band,
   and DESIGN.md puts the top bar over a brand-moment hero inside the brand moment. */
.site-top {
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header {
  padding-top: var(--sp-4);
}

/* Floating pill. NEVER overflow:hidden here — the menus open below the pill and would be
   clipped away (that once killed all three menus). All decoration lives in .pillbar__bg. */
.pillbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 60px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
  color: var(--text);
}
/* The decoration layer: surface-1 at 94 % (88 % fails AA over photos, DESIGN.md §2),
   backdrop blur, 1 px border, the one soft float shadow. Clipped to the pill on its own. */
.pillbar__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  pointer-events: none;
  background: rgb(var(--surface-1-rgb) / 0.94);
  border: 1px solid var(--border);
  box-shadow:
    0 16px 40px -16px rgb(var(--scrim-rgb) / 0.55),
    0 2px 8px -2px rgb(var(--scrim-rgb) / 0.3);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
}
.pillbar__flourish {
  display: none;
}
.pillbar__brand,
.pillbar__actions {
  position: relative;
  z-index: 1;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  /* The logo link is a 44 px target (header and footer), not just the 28 px mark. */
  min-height: 44px;
  color: var(--text);
  text-decoration: none;
}
.brand:hover {
  text-decoration: none;
}
.brand__mark {
  width: 28px;
  height: 28px;
}
.brand__lockup {
  display: flex;
  flex-direction: column;
}
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.02em;
}
.brand__tagline {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Desktop nav: centred in the pill (no transform — centring by auto margins). */
.site-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  width: max-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.site-nav a,
.nav-dd__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-state) ease, background-color var(--dur-state) ease;
}
.site-nav a:hover,
.nav-dd__toggle:hover {
  color: var(--text);
  text-decoration: none;
}
.site-nav > a.is-active,
.nav-dd.is-active > .nav-dd__toggle {
  color: var(--text);
  font-weight: 600;
}
/* Short brand bar under the active link / group. */
.site-nav > a.is-active::after,
.nav-dd.is-active > .nav-dd__toggle::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--sp-1);
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
}

/* "Learn" dropdown. */
.nav-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dd__toggle {
  gap: var(--sp-1);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.dd-chevron {
  transition: transform var(--dur-state) ease;
}
.nav-dd.is-open .dd-chevron {
  transform: rotate(180deg);
}
.nav-dd__menu {
  position: absolute;
  top: calc(100% + var(--sp-4));
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  padding: var(--sp-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow:
    0 16px 40px -16px rgb(var(--scrim-rgb) / 0.55),
    0 2px 8px -2px rgb(var(--scrim-rgb) / 0.3);
  display: none;
}
.nav-dd.is-open .nav-dd__menu {
  display: block;
}
.site-nav .nav-dd__menu a {
  display: flex;
  width: 100%;
  white-space: nowrap;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text);
}
.site-nav .nav-dd__menu a:hover {
  background: var(--surface-2);
}
.site-nav .nav-dd__menu a.is-active {
  color: var(--brand);
  font-weight: 600;
}

/* Legal links: inside the narrow menu only. */
.site-nav__legal {
  display: none;
}

/* Right cluster: the waitlist CTA (+ hamburger at narrow). One filled primary per view, so
   the header CTA is the brand-toned secondary; the hero carries the filled one. Its markup says
   btn--primary (site.js, untouched), so it also cancels the primary's glow and hover lift. */
.pillbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.btn.pillbar__cta {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
  box-shadow: none;
}
.btn.pillbar__cta:hover,
.btn.pillbar__cta:active {
  background: var(--surface-2);
  box-shadow: none;
  translate: none;
}
.cta-arrow {
  transition: transform var(--dur-press) ease;
}
.pillbar__cta:hover .cta-arrow {
  transform: translateX(2px);
}
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-state) ease;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded='true'] {
  background: var(--surface-2);
}

/* Collapse: below 900 px the centred nav folds into the hamburger menu (unchanged breakpoint).
   The menu opens as a floating panel beneath the pill, legal links included. */
@media (max-width: 899px) {
  .pillbar {
    padding-left: var(--sp-4);
    gap: var(--sp-2);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .brand__tagline {
    display: none;
  }
  .site-nav {
    top: calc(100% + var(--sp-2));
    bottom: auto;
    width: auto;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2);
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow:
      0 16px 40px -16px rgb(var(--scrim-rgb) / 0.55),
      0 2px 8px -2px rgb(var(--scrim-rgb) / 0.3);
    display: none;
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a,
  .nav-dd__toggle {
    width: 100%;
    white-space: normal;
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text);
  }
  .site-nav a:hover {
    background: var(--surface-2);
  }
  .site-nav > a.is-active,
  .site-nav .nav-dd__menu a.is-active {
    color: var(--brand);
  }
  .site-nav > a.is-active::after,
  .nav-dd.is-active > .nav-dd__toggle::after {
    display: none;
  }
  /* "Learn" becomes a quiet group label; its links sit inline beneath it. */
  .nav-dd {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-dd__toggle,
  .nav-dd.is-active > .nav-dd__toggle {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    cursor: default;
  }
  .dd-chevron {
    display: none;
  }
  .nav-dd__menu {
    position: static;
    transform: none;
    display: block;
    min-width: 0;
    padding: 0 0 0 var(--sp-3);
    background: none;
    border: 0;
    box-shadow: none;
  }
  .site-nav__legal {
    display: flex;
    flex-direction: column;
    margin-top: var(--sp-1);
    padding-top: var(--sp-1);
    border-top: 1px solid var(--border);
  }
}
@media (max-width: 419px) {
  .cta-arrow {
    display: none;
  }
}
@media (max-width: 359px) {
  .brand__name {
    font-size: 18px;
  }
  .btn.pillbar__cta {
    padding-inline: var(--sp-3);
  }
}

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-state) ease,
    border-color var(--dur-state) ease,
    color var(--dur-state) ease,
    transform var(--dur-press) ease,
    translate var(--dur-press) ease,
    box-shadow var(--dur-glow) ease;
}
.btn:hover {
  text-decoration: none;
}
.btn:active {
  transform: scale(0.97);
}
@media (min-width: 1024px) {
  .btn {
    min-height: 44px;
    padding-block: var(--sp-2);
  }
}
/* Primary — the purple gradient pill (DESIGN.md §2 Gradients), every primary, every state: the
   PRE-OVERHAUL gradient, restored by the user's decision (2026-10-21) — 135°, --grad-primary-start
   #B07CFF light lilac (top-left) → --grad-primary-end #6A2CB0 deep purple, white on-brand label.
   USER-APPROVED CONTRAST EXCEPTION: white is 2.93:1 on the light start (below AA), 8.08:1 on the
   end. Do not darken it, re-stop it or add a text shadow; the audits report it as the named
   exception `primary-button-gradient`. With it come the pre-overhaul states: at rest a soft purple
   glow (--btn-glow); hover (pointer only) lifts it 1 px and strengthens the glow (--btn-glow-hover);
   pressed puts it back at its rest position, plus the 0.97 scale every .btn has. The lift is the
   `translate` property, so it composes with that `transform` scale. .btn--hero is the same button
   (kept so the markup needs no change). A disabled one keeps the gradient at 40 %, with no glow and
   no lift (.btn[disabled]). `border-box`: the gradient spans the 1 px transparent .btn border too —
   painted from the padding box it would repeat into that border as a 1 px seam. */
.btn--primary,
.btn--hero {
  background: linear-gradient(135deg, var(--grad-primary-start), var(--grad-primary-end)) border-box;
  color: var(--on-brand);
  box-shadow: var(--btn-glow);
}
@media (hover: hover) {
  .btn--primary:hover,
  .btn--hero:hover {
    translate: 0 -1px;
    box-shadow: var(--btn-glow-hover);
  }
}
.btn--primary:active,
.btn--hero:active {
  translate: none;
}
/* Secondary — 1 px border-strong, text label. */
.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--secondary:hover {
  background: var(--surface-2);
}
/* Large: keeps 52 px on desktop too (hero CTAs sit beside 64 px type). */
.btn--lg {
  min-height: 52px;
  padding-inline: var(--sp-8);
}
.btn--sm {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: 14px;
  line-height: 18px;
}
.btn[disabled] {
  opacity: 0.4;
  cursor: default;
  transform: none;
  translate: none;
  box-shadow: none;
}

/* ============================= HEROES ============================= */
/* Every page opens on a dark brand-moment band that slides up under the floating header.
   The single ambient glow (DESIGN.md §2 "The backdrop") lives here and nowhere else. */
.hero,
.page-hero,
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--sp-10));
  padding-bottom: var(--sp-14);
  background:
    radial-gradient(60% 70% at 78% 30%, rgb(var(--glow-rgb) / var(--glow-alpha)), transparent 70%),
    var(--bg);
}
.page-hero {
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(50% 90% at 85% 0%, rgb(var(--glow-rgb) / var(--glow-alpha)), transparent 70%),
    var(--bg);
}
@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-h) + var(--sp-14));
    padding-bottom: var(--sp-20);
  }
  .page-hero {
    padding-top: calc(var(--header-h) + var(--sp-14));
    padding-bottom: var(--sp-14);
  }
}
.page-hero .lede {
  margin-top: var(--sp-4);
  max-width: 640px;
}

/* Home hero: copy + the sleepy drill. */
.hero__inner {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
.hero__copy .lede {
  margin-top: var(--sp-5);
}
.hero__copy .actions {
  margin-top: var(--sp-8);
}
.hero__art {
  justify-self: center;
  width: 100%;
  max-width: 280px;
}
@media (max-width: 559px) {
  .hero__copy .actions .btn {
    width: 100%;
  }
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--sp-10);
  }
  .hero__art {
    max-width: 440px;
  }
}

/* ======================== ILLUSTRATIONS ======================== */
.cast,
.scene {
  width: 100%;
  height: auto;
  overflow: visible;
}
/* Pop-in on load: quick scale from .9 with a slight overshoot; ends on transform:none. */
.pop-in {
  animation: pop-in var(--dur-screen) var(--ease-pop) 120ms backwards;
}
@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* The happy drill's small hop (the "listing published" motion). */
.hop {
  animation: hop 2800ms ease-in-out 600ms infinite;
}
@keyframes hop {
  0%,
  72%,
  100% {
    transform: none;
  }
  80% {
    transform: translateY(-14px);
  }
  88% {
    transform: none;
  }
  92% {
    transform: translateY(-4px);
  }
}
/* Dust in the light shaft: a slow opacity twinkle only. */
.mote {
  animation: mote 3600ms ease-in-out infinite alternate;
}
.mote:nth-of-type(2n) {
  animation-delay: -1200ms;
}
.mote:nth-of-type(3n) {
  animation-delay: -2400ms;
}
@keyframes mote {
  from {
    opacity: 0.15;
  }
  to {
    opacity: 0.7;
  }
}

/* ============================= TILES ============================= */
/* A 40 px rounded square holding a 24 px stroke icon (the category-chip square). */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--brand);
}
.icon-tile svg {
  width: 24px;
  height: 24px;
}
.icon-tile--num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  background: var(--brand-soft);
}
.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================== STEPS ============================== */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 860px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.step .icon-tile {
  margin-bottom: var(--sp-2);
}
.step__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
}
.step__text {
  color: var(--text-muted);
}

/* "What's built in" — a quiet list beneath the home steps. */
.built {
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}
.built__list {
  list-style: none;
  margin: var(--sp-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 720px) {
  .built__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-8);
  }
}
@media (min-width: 1024px) {
  .built__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.built__list li {
  display: grid;
  align-content: start;
  gap: var(--sp-1);
}
.built__list strong {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
}
.built__list strong .icon {
  color: var(--success);
  width: 20px;
  height: 20px;
}
.built__list span {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}
.built__note {
  margin-top: var(--sp-6);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* =========================== CATEGORIES =========================== */
.cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}
@media (min-width: 640px) {
  .cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}
.cat {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-3);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text);
}
.cat--more {
  background: transparent;
  border-style: dashed;
  color: var(--text-muted);
}
.cat--more .icon-tile {
  background: transparent;
  color: var(--text-muted);
}

/* ========================= OWNER BAND (dark) ======================= */
.owner {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.owner__head {
  text-align: center;
}
.owner__head .lede {
  margin: var(--sp-4) auto 0;
}
.owner__art {
  margin: var(--sp-8) auto 0;
  max-width: 960px;
}
.owner__points {
  list-style: none;
  margin: var(--sp-8) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 860px) {
  .owner__points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}
.owner__points li {
  padding: var(--sp-6);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.owner__points strong {
  display: block;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: var(--sp-2);
}
.owner__points span {
  color: var(--text-muted);
}
.owner .more-link {
  text-align: center;
}

/* ============================== SPLIT ============================== */
.split {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
.split__art {
  justify-self: center;
  width: 100%;
  max-width: 260px;
}
.split__copy .lede {
  margin-top: var(--sp-4);
}
@media (min-width: 860px) {
  .split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-14);
  }
  .split__art {
    max-width: 380px;
  }
}

/* Tick list (success-coloured check icons). */
.checks {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.checks li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
}
.checks .icon {
  color: var(--success);
  margin-top: 0;
}
.note {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* ============================== CARDS ============================== */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: var(--sp-2);
}
.card__text {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* Status callouts — what exists vs what doesn't. Opaque *-soft backgrounds. */
.callout {
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  border: 1px solid var(--border);
}
.callout--ok {
  background: var(--success-soft);
}
.callout--warn {
  background: var(--warning-soft);
}
.callout__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  margin-bottom: var(--sp-5);
}
.callout--ok .callout__title {
  color: var(--success);
}
.callout--warn .callout__title {
  color: var(--warning);
}
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 860px) {
  .ticks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-8);
  }
}
.ticks li {
  position: relative;
  padding-left: var(--sp-8);
  color: var(--text);
}
.ticks li strong {
  display: block;
  font-weight: 600;
}
.ticks li span {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text);
  font-size: 14px;
  line-height: 20px;
}
.ticks li::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  text-align: center;
  /* 600, not 700: Inter Bold is the price-pill weight only, and this glyph would be the one thing
     on the site that downloads it. */
  font-weight: 600;
}
.ticks--ok li::before {
  content: '✓';
  color: var(--success);
}
.ticks--warn li::before {
  content: '—';
  color: var(--warning);
}

/* Plain bullet list for content pages. */
.list {
  margin: var(--sp-5) 0 0;
  padding-left: var(--sp-6);
  color: var(--text-muted);
  display: grid;
  gap: var(--sp-2);
}
.list li::marker {
  color: var(--brand);
}

/* =============================== FAQ =============================== */
.faq {
  display: grid;
  gap: var(--sp-3);
  max-width: var(--narrow);
}
.faq details {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-3) var(--sp-5);
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: var(--text);
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 24px;
  text-align: center;
  color: var(--brand);
  font-size: 24px;
  line-height: 24px;
  font-weight: 400;
}
.faq details[open] summary::after {
  content: '–';
}
.faq summary:hover {
  background: var(--surface-2);
}
.faq__body {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--text-muted);
}
.faq__body p + p {
  margin-top: var(--sp-3);
}

/* ============================ CTA BAND ============================ */
/* The small "Join the waitlist" closer on content pages: a surface card. */
.cta-card {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.cta-card .prose {
  max-width: 520px;
  margin-top: 0;
}

/* ============================ FORMS ============================ */
.signup {
  width: 100%;
}
.signup--panel {
  padding: var(--sp-6);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
}
@media (min-width: 720px) {
  .signup--panel {
    padding: var(--sp-8);
  }
}
.signup__row {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 720px) {
  .signup__row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
}
.field {
  position: relative;
  display: block;
}
.field + .field {
  margin-top: var(--sp-4);
}
.signup__row .field + .field {
  margin-top: 0;
}
.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--text);
}
.field__input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--dur-state) ease;
}
.field__input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.field__input:hover {
  border-color: var(--text-muted);
}
.field__input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (min-width: 1024px) {
  .field__input {
    min-height: 44px;
    padding-block: var(--sp-2);
  }
}
select.field__input {
  padding-right: var(--sp-10);
  cursor: pointer;
}
select.field__input option,
select.field__input optgroup {
  background: var(--surface-1);
  color: var(--text);
}
/* Select chevron, drawn on the label (a <select> has no pseudo-elements). */
.field:has(select)::after {
  content: '';
  position: absolute;
  right: var(--sp-5);
  bottom: 22px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}
@media (min-width: 1024px) {
  .field:has(select)::after {
    bottom: 18px;
  }
}
textarea.field__input--area {
  min-height: 140px;
  resize: vertical;
}
/* Consent row: 24 px box in a row at least 44 px tall. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: 44px;
  margin-top: var(--sp-5);
  padding-block: var(--sp-2);
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
}
/* DESIGN.md §9 checkbox: the native input (name, required, keyboard and form behaviour untouched),
   drawn as a 24 px box with a 1 px border-strong outline on surface-2; checked = brand-fill with a
   1 px brand border (dark brand-fill alone is 2.93:1 on surface-1) and an on-brand tick. */
.consent__box {
  flex: 0 0 auto;
  display: inline-grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
  transition: background-color var(--dur-state) ease, border-color var(--dur-state) ease;
}
.consent__box::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--on-brand);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  opacity: 0;
  transition: opacity var(--dur-state) ease;
}
.consent__box:hover {
  border-color: var(--text-muted);
}
.consent__box:checked {
  background: var(--brand-fill);
  border-color: var(--brand);
}
.consent__box:checked::before {
  opacity: 1;
}
.signup .btn {
  width: 100%;
  margin-top: var(--sp-5);
  min-height: 52px;
}
.signup__error,
.signup__done {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 20px;
}
.signup__error {
  background: var(--danger-soft);
  color: var(--danger);
}
.signup__done {
  background: var(--success-soft);
  color: var(--success);
  font-weight: 500;
}
.signup .card__text {
  margin-top: var(--sp-4);
}
.fineprint {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: 14px;
  line-height: 20px;
}

/* The waitlist section: a centred 560 px panel under a centred head. */
.waitlist .signup--panel {
  max-width: 560px;
  margin-inline: auto;
}
.waitlist .section__head {
  text-align: center;
}
.waitlist .section__head .prose {
  margin: var(--sp-4) auto 0;
  max-width: 640px;
}

/* ============================== LEGAL ============================== */
.legal {
  padding-block: var(--sp-10) var(--sp-14);
}
.legal__lede {
  padding-bottom: 0;
  color: var(--text-muted);
}
.legal__lede + .legal {
  padding-top: var(--sp-6);
}
.legal__provisional {
  margin-bottom: var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  color: var(--warning);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  margin: var(--sp-8) 0 var(--sp-3);
}
.legal h2:first-child,
.legal .legal__provisional + h2 {
  margin-top: 0;
}
.legal p {
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}
.legal ul {
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-6);
}
.legal li {
  margin-bottom: var(--sp-2);
}
.legal li::marker {
  color: var(--brand);
}
/* legal.js appends a "Version N · effective …" line with an inline opacity .55 / .85em when it
   overlays a newer document. On text-muted that is ~2.3:1 (light) and 13.6 px — below AA and below
   the 14 px floor. legal.js is not edited (behaviour); its look is corrected here. */
.legal p[style*='opacity'] {
  opacity: 1 !important;
  font-size: 14px !important;
  line-height: 20px;
  color: var(--text-muted);
}

/* ======================= STATUS PAGES (404, waitlist) ======================= */
.page-fill {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.page-fill > main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.page-fill > main > .band {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}
.band .wrap {
  width: 100%;
}

/* 404 */
.nf {
  display: grid;
  justify-items: center;
  text-align: center;
}
.nf__art {
  width: 220px;
  margin-bottom: var(--sp-6);
}
@media (min-width: 1024px) {
  .nf__art {
    width: 280px;
  }
}
.nf .lede {
  margin-top: var(--sp-4);
  max-width: 480px;
}
.nf .actions {
  justify-content: center;
  margin-top: var(--sp-8);
}

/* Waitlist confirm / unsubscribe: one centred status card. */
.wl__card {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
@media (min-width: 720px) {
  .wl__card {
    padding: var(--sp-10);
  }
}
[data-state] {
  display: block;
}
[data-state][hidden] {
  display: none;
}
.wl__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--sp-6);
  border-radius: var(--r-pill);
}
.wl__icon svg {
  width: 40px;
  height: 40px;
}
.wl__icon--brand {
  background: var(--brand-soft);
  color: var(--brand);
}
.wl__icon--ok {
  background: var(--success-soft);
  color: var(--success);
}
.wl__icon--warn {
  background: var(--warning-soft);
  color: var(--warning);
}
.wl__icon--muted {
  background: var(--neutral-soft);
  color: var(--neutral);
}
.wl__art {
  width: 160px;
  margin: 0 auto var(--sp-4);
}
.wl__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 38px;
}
.wl__text {
  margin: var(--sp-3) auto var(--sp-8);
  max-width: 460px;
  color: var(--text-muted);
}
.wl__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.wl__spin {
  transform-origin: 50% 50%;
  animation: wl-spin 900ms linear infinite;
}
@keyframes wl-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes wl-pulse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}

/* ============================ COMING SOON ============================ */
/* Nothing here on purpose: website/coming-soon.html is the pre-overhaul page, restored, with its
   own inline styles. It takes only the fonts and the base rules from this file. */

/* ============================== FOOTER ============================== */
/* A brand surface, the same in light and dark (DESIGN.md §9 Footer, mirrored in the app's
   DesktopFooter): the 135° footer gradient — deep --grad-footer-start top-left, light
   --grad-footer-end bottom-right — under a 28 % dark veil (--grad-footer-veil). Every word is
   SOLID on-brand (white), no opacity: 10.52:1 at the deepest corner, 4.84:1 at the lightest, so
   every run passes AA at every point (the old 18 % veil left that corner at 3.99:1). Links
   underline on hover instead of dimming; the focus ring is white here (the brand ring would
   vanish into the purple). The logo image in site.js's markup is the gradient mark — painted
   white here by a filter, since the markup is not touched. */
.footer {
  background:
    linear-gradient(
      rgb(var(--grad-footer-veil-rgb) / var(--grad-footer-veil-alpha)),
      rgb(var(--grad-footer-veil-rgb) / var(--grad-footer-veil-alpha))
    ),
    linear-gradient(135deg, var(--grad-footer-start), var(--grad-footer-end));
  padding-block: var(--sp-14) var(--sp-10);
  color: var(--on-brand);
  font-size: 14px;
  line-height: 20px;
}
.footer :focus-visible {
  outline-color: var(--on-brand);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-8);
}
@media (min-width: 480px) {
  .footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 860px) {
  .footer__inner {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}
.brand--footer .brand__name {
  color: var(--on-brand);
}
.brand--footer img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}
.footer__tagline {
  margin-top: var(--sp-3);
  max-width: 260px;
  color: var(--on-brand);
}
.footer__col h4 {
  margin: 0 0 var(--sp-2);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
  color: var(--on-brand);
}
.footer__col > a:not(.brand) {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--on-brand);
  text-decoration: none;
}
@media (hover: hover) {
  .footer__col > a:not(.brand):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
}
@media (pointer: coarse) {
  .footer__col > a:not(.brand) {
    min-height: 44px;
  }
}
.footer__social {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
/* White glyph on a 10 % white disc (4.02:1 at the lightest corner; 20 % on hover, 3.33:1 —
   icons need 3:1) with a 25 % white ring (decorative). */
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1px solid rgb(var(--on-brand-rgb) / 0.25);
  background: rgb(var(--on-brand-rgb) / 0.1);
  color: var(--on-brand);
  transition: background-color var(--dur-state) ease;
}
.footer__social-link:hover {
  background: rgb(var(--on-brand-rgb) / 0.2);
  color: var(--on-brand);
}
.footer__bottom {
  margin-top: var(--sp-10);
  color: var(--on-brand);
}
/* The hairline sits inside the wrap's gutter, aligned with the columns above (decorative). */
.footer__bottom::before {
  content: '';
  display: block;
  height: 1px;
  margin-bottom: var(--sp-6);
  background: rgb(var(--on-brand-rgb) / 0.2);
}
/* Links inside the running sentence: white and underlined (colour alone cannot mark them here). */
.footer__bottom a {
  color: var(--on-brand);
  text-decoration: underline;
}

/* ============================ REDUCED MOTION ============================ */
/* Only opacity may change: no scale, no movement, no rotation. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .cta-arrow,
  .dd-chevron {
    transition-property: background-color, border-color, color, opacity;
  }
  .btn:active,
  .pillbar__cta:hover .cta-arrow {
    transform: none;
  }
  .btn:hover {
    translate: none;
  }
  .pop-in {
    animation-name: fade-in;
  }
  .hop {
    animation: none;
  }
  .wl__spin {
    animation: wl-pulse 900ms ease-in-out infinite alternate;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}