:root {
  /* Ink and text */
  --ink: #14182E;          /* brand navy: headings, primary bg, bezel, focus, links (17.50:1 on white) */
  --ink-hover: #262B45;    /* white on it 13.87:1 */
  --ink-active: #0B0E1C;
  --text: #2B3047;         /* body (12.99:1 white, 11.72:1 paper-2) */
  --text-muted: #5B6175;   /* captions, hints, kickers (6.16:1 white, 5.55:1 paper-2, 5.40:1 field) */
  --text-subtle: #6B7085;  /* placeholders ON WHITE ONLY (4.90:1) */

  /* Surfaces and lines */
  --paper: #FFFFFF;
  --paper-2: #F2F3F7;      /* phone plates, referral band, info notices, skeletons, hover fills */
  --field: #EEF0F5;        /* read-only fields only (invite link), the app's field gray */
  --rule: #E3E5EC;         /* all hairlines */
  --rule-strong: #C9CDD8;  /* section-opening rules, table header underline */
  --control: #8A8FA3;      /* input borders (3.21:1 on white; inputs only ever sit on white) */
  --control-hover: #5B6175;
  --meter-empty: #D5D8E1;

  /* On the navy band */
  --on-ink: #FFFFFF;
  --on-ink-2: #B9BED3;     /* 9.48:1 on navy */
  --on-ink-3: #9197B3;     /* fine print on navy, 6.07:1 */
  --on-ink-line: rgba(255,255,255,.28);

  /* Semantic (same values as the app) */
  --green: #0B6E4A;  --green-tint: #EAF4EF;  --green-line: #BFDCCD;   /* 6.28:1 / 5.59:1 on tint */
  --orange: #B63C09; --orange-tint: #FBEFEA; --orange-line: #F0CDBE;  /* 5.77:1 / 5.12:1 */
  --red: #B42318;    --red-tint: #FBEDEB;    --red-line: #EFC6C1;     /* 6.57:1 / 5.77:1 */
  --red-hover: #971C13; --red-active: #7A1A13;                        /* white on red-hover 8.43:1 */

  /* Shadows (only these three exist) */
  --shadow-phone: 0 1px 2px rgba(20,24,46,.08), 0 32px 64px -24px rgba(20,24,46,.35);
  --shadow-float: 0 1px 2px rgba(20,24,46,.06), 0 16px 40px -12px rgba(20,24,46,.24); /* deal-math card, dialog */

  /* Radius */
  --r-0: 0; --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  /* Type */
  --font-head: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Spacing (4px base) */
  --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-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;
  --section-y: clamp(4.5rem, 3.2rem + 5.333vw, 8rem);   /* 72px @390 -> 128px @1440 */

  --header-h: 64px;
  --ease: cubic-bezier(.2,0,0,1);
}

/* Layout tokens */
:root { --gutter: 20px; }
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 960px) { :root { --gutter: 48px; } }

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { flex: 1 0 auto; display: block; }
main:focus { outline: none; }

h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 600; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; }
img, svg { display: block; }
a { color: inherit; }
strong, b { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--ink); color: #fff; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
/* Page titles take focus only so screen readers start there (step changes, errors): not controls, so no ring. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }

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

.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.break { overflow-wrap: anywhere; }
/* An email address in running text moves to the next line whole, and only breaks when it is longer than a line. */
.email-token { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }

/* Text links: an invisible ::before gives a hit area of at least 44 x 44px without moving the layout,
   so the keyboard focus ring still hugs the text. */
.header-aside .link, .auth-alt .link, .cta-band__alt .link, .faq__head .link, .app-block .caption .link,
.kv dd .link, .mini-footer a, .sent-to #change-email, .invite-bar .link, .auth-sub .link { position: relative; }
.header-aside .link::before, .auth-alt .link::before, .cta-band__alt .link::before, .faq__head .link::before,
.app-block .caption .link::before, .kv dd .link::before, .mini-footer a::before, .sent-to #change-email::before,
.invite-bar .link::before, .auth-sub .link::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: max(100% + 8px, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.icon { width: 20px; height: 20px; flex: none; }
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }

/* Skip link */
.skip {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--ink);
  color: #fff;
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  border-radius: var(--r-md);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.skip:focus-visible { outline-offset: 2px; }

/* ==========================================================================
   Type styles
   ========================================================================== */

.display {
  font: 600 clamp(2.5rem, 1.943rem + 2.286vw, 4rem)/1.05 var(--font-head);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.h1 {
  font: 600 clamp(2rem, 1.629rem + 1.524vw, 3rem)/1.1 var(--font-head);
  letter-spacing: -0.025em;
  color: var(--ink);
}
.h1-auth {
  font: 600 clamp(1.875rem, 1.736rem + 0.571vw, 2.25rem)/1.15 var(--font-head);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h2 {
  font: 600 clamp(1.75rem, 1.379rem + 1.524vw, 2.75rem)/1.12 var(--font-head);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.h2-compact { font: 600 20px/1.3 var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.h3 {
  font: 600 clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem)/1.3 var(--font-head);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lead {
  font-size: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem);
  line-height: 1.55;
  color: var(--text);
  max-width: 34em;
}
.body-long { font-size: 17px; line-height: 1.7; }
.small { font-size: 14px; line-height: 1.5; }
.muted { color: var(--text-muted); }
.caption { font: 500 13px/1.45 var(--font-body); color: var(--text-muted); }
.kicker {
  font: 600 12px/1.2 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat {
  font: 600 clamp(2rem, 1.721rem + 1.143vw, 2.75rem)/1.05 var(--font-head);
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Text links */
.link, .prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--control);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .12s var(--ease);
}
.link:hover, .prose a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.link--on-ink { color: #fff; text-decoration-color: var(--on-ink-2); }
.link--on-ink:hover { text-decoration-color: #fff; }
.link--button {
  background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer;
}

/* Wordmark (live text, not an image) */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  font: 700 16px/1.0 var(--font-head);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark--footer { font-size: 20px; }
.site-header .wordmark { min-height: 44px; justify-content: center; }
.wordmark--on-ink { color: #fff; }
@media (max-width: 639.98px) {
  .site-header .wordmark { font-size: 15px; }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--form { max-width: calc(400px + 2 * var(--gutter)); }
.container--join { max-width: calc(1040px + 2 * var(--gutter)); }
.container--account { max-width: calc(960px + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }

.opener { border-top: 1px solid var(--rule-strong); padding-top: 24px; }
.section-head .kicker { margin-bottom: 16px; }
.section-head .lead { margin-top: 16px; text-wrap: balance; }
.section-head > * { max-width: 800px; }

/* ==========================================================================
   Components: buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font: 600 15px/1 var(--font-body);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; }
.btn--sm { height: 44px; padding: 0 12px; font-size: 14px; }
.btn--sm .icon { width: 16px; height: 16px; }
@media (min-width: 960px) { .btn--sm { height: 36px; } }
.btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.btn--block { width: 100%; }

.btn .icon--arrow { width: 16px; height: 16px; transition: transform .12s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(2px); }

.btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--secondary { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink); }
.btn--inverse { background: #fff; border-color: #fff; color: var(--ink); }
.btn--danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn--danger-secondary { background: #fff; border-color: var(--red); color: var(--red); }
/* Hover fills only where a pointer really hovers, so a tapped button doesn't stay grey on a phone. */
@media (hover: hover) {
  .btn--primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
  .btn--secondary:hover { background: var(--paper-2); }
  .btn--ghost:hover { background: var(--paper-2); }
  .btn--inverse:hover { background: var(--field); border-color: var(--field); }
  .btn--danger:hover { background: var(--red-hover); border-color: var(--red-hover); }
  .btn--danger-secondary:hover { background: var(--red-tint); }
}
.btn--primary:active { background: var(--ink-active); border-color: var(--ink-active); }
.btn--secondary:active { background: var(--rule); }
.btn--ghost:active { background: var(--rule); }
.btn--inverse:active { background: var(--rule-strong); border-color: var(--rule-strong); }
.btn--inverse:focus-visible { outline-color: #fff; }
.btn--danger:active { background: var(--red-active); border-color: var(--red-active); }
.btn--danger:focus-visible { outline-color: var(--red); }
.btn--danger-secondary:active { background: var(--red-line); }
.btn--danger-secondary:focus-visible { outline-color: var(--red); }

.btn:disabled {
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--control);
  cursor: not-allowed;
}
/* A disabled ghost button stays text only, so its label keeps lining up with the column (resend countdown). */
.btn--ghost:disabled { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn:disabled .icon--arrow { transform: none; }
/* While a request runs the button keeps its colors and shows a "...ing" label (no spinner). */
.btn[aria-busy="true"] { cursor: progress; }
.btn--primary[aria-busy="true"] { background: var(--ink-hover); border-color: var(--ink-hover); color: #fff; }
.btn--secondary[aria-busy="true"] { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
.btn--ghost[aria-busy="true"] { background: var(--paper-2); color: var(--ink); border-color: transparent; }
.btn--danger[aria-busy="true"] { background: var(--red-hover); border-color: var(--red-hover); color: #fff; }

.btn[aria-busy="true"] .icon { display: none; }
.btn.is-done, .btn.is-done:hover { color: var(--green); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ==========================================================================
   Components: form fields
   ========================================================================== */

.form { display: grid; gap: 20px; max-width: 400px; }
.field { display: grid; min-width: 0; }
.label, .label-row { font: 500 14px/1.4 var(--font-body); color: var(--ink); margin-bottom: 8px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.label-row .label { margin: 0; }
/* The 44px hit area comes from ::before, so the focus ring hugs the text instead of running into the input. */
.label-row .link { position: relative; font-size: 14px; font-weight: 400; }
.label-row .link::before { content: ""; position: absolute; inset: -17px -4px -8px; }

.input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font: 400 16px/1.2 var(--font-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--control);
  border-radius: var(--r-md);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.input::placeholder { color: var(--text-subtle); opacity: 1; }
.input:hover { border-color: var(--control-hover); }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: 2px solid transparent; outline-offset: 0; }
.input[aria-invalid="true"] { border-color: var(--red); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 1px var(--red); }
.input:disabled { background: var(--paper-2); border-color: var(--rule); color: var(--text-subtle); }
.input--readonly {
  background: var(--field);
  border-color: var(--rule-strong);
  font: 500 15px/1.2 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-overflow: ellipsis;
}
.input--readonly:hover { border-color: var(--rule-strong); }
/* Invite link (/account): a read-only textarea, so a link too long for one line wraps instead of being cut
   off. account.js sizes its height to the text; one line is the usual 48px field. */
.input--link {
  height: 48px;
  padding-block: 13px;
  line-height: 20px;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.input--code {
  height: 56px;
  font: 600 22px/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: .35em;
}
.input--invite {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.input-wrap { position: relative; }
.input--password { padding-right: 76px; }
.reveal {
  position: absolute;
  top: 2px; right: 2px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
  transition: background-color .12s var(--ease);
}
@media (hover: hover) { .reveal:hover { background: var(--paper-2); } }
.reveal:active { background: var(--rule); }
.reveal:focus-visible { outline-offset: -4px; }

.hint { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.field-error {
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--red);
}
.field-error .icon { width: 16px; height: 16px; margin-top: 2px; }
.field-error a { color: var(--red); text-decoration-color: currentColor; }

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

/* ==========================================================================
   Components: notices
   ========================================================================== */

.notice {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
}
.notice > .icon { width: 20px; height: 20px; color: var(--ink); }
.notice:focus { outline: none; } /* focused only so screen readers read it; role=alert/status already announces it */
.notice__main { min-width: 0; }
.notice__title { font: 600 15px/1.35 var(--font-body); color: var(--ink); }
.notice__title + .notice__body { margin-top: 2px; }
.notice__body { color: var(--text); }
.notice__action { margin-top: 8px; }
.notice__action .btn--ghost { margin-left: -12px; }
.notice--success { background: var(--green-tint); border-color: var(--green-line); }
.notice--success > .icon, .notice--success .notice__title { color: var(--green); }
.notice--warning { background: var(--orange-tint); border-color: var(--orange-line); }
.notice--warning > .icon, .notice--warning .notice__title { color: var(--orange); }
.notice--error { background: var(--red-tint); border-color: var(--red-line); }
.notice--error > .icon, .notice--error .notice__title { color: var(--red); }
@media (hover: hover) {
  .notice--error .notice__action .btn--ghost:hover { background: var(--red-line); }
  .notice--warning .notice__action .btn--ghost:hover { background: var(--orange-line); }
}

/* ==========================================================================
   Components: badges (never interactive)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: 600 12px/1 var(--font-body);
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
  flex: none;
}
.badge--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge--outline { background: #fff; border-color: var(--ink); color: var(--ink); }
.badge--neutral { background: var(--paper-2); border-color: var(--rule); color: #3D4257; }
.badge--success { background: var(--green-tint); color: var(--green); }
.badge--warning { background: var(--orange-tint); color: var(--orange); }
.badge--danger { background: var(--red-tint); color: var(--red); }

/* ==========================================================================
   Components: cards, plates, skeleton
   ========================================================================== */

.card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
}
.card--emphasis { border-color: var(--ink); }
@media (min-width: 960px) { .card { padding: 32px; } }

.plate {
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 32px 20px;
  display: flex;
  justify-content: center;
  overflow: hidden; /* keeps the phone's shadow on the plate */
}
@media (min-width: 960px) { .plate { padding-block: 48px; } }

.skel {
  display: block;
  height: 12px;
  margin-block: 6px;
  background: var(--paper-2);
  border-radius: var(--r-sm);
}
.skel--title { height: 18px; width: 40%; margin-block: 4px 10px; }
.skel--stat { height: 36px; width: 55%; margin-block: 8px 14px; }
.skel--line { width: 90%; }
.skel--short { width: 60%; }
.skel--btn { height: 44px; width: 220px; margin-top: 24px; border-radius: var(--r-md); }
.skel--label { height: 16px; width: 50%; }

/* ==========================================================================
   Components: founder meter
   ========================================================================== */

.meter {
  display: grid;
  grid-template-columns: repeat(50, 1fr);
  gap: 1px;
  height: 14px;
}
@media (min-width: 640px) { .meter { gap: 2px; height: 16px; } }
.meter--mini { height: 10px; }
@media (min-width: 640px) { .meter--mini { height: 10px; } }
.meter > span { display: block; background: var(--meter-empty); border-radius: var(--r-0); }
.meter > span.is-claimed { background: var(--ink); }
/* Phones: 50 cells would be about 5px each (reads as a barcode), so the meter is one solid two-tone bar
   with square ends: claimed spots in ink, the rest empty. site.js sets --claimed (a percentage). */
@media (max-width: 639.98px) {
  .meter, .meter--mini {
    display: block;
    height: 10px;
    border-radius: var(--r-0);
    background: var(--meter-empty) linear-gradient(to right, var(--ink) var(--claimed, 0%), transparent 0) no-repeat;
  }
  .meter > span { display: none; }
}
html[data-founder="unknown"] .meter { visibility: hidden; }
html[data-stats="failed"] .meter { display: none; }
.meter__label {
  margin-top: 12px;
  font: 500 15px/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
/* Long label (/join): the spot count gets its own line with no separator dot, so a wrapped line never
   starts with "·". Where the panel is wide enough for one line, it follows the offer after a dot. */
.meter__count { display: block; margin-top: 2px; }
.meter__sep { display: none; }
@media (forced-colors: active) {
  .meter > span { forced-color-adjust: none; outline: 1px solid CanvasText; background: Canvas; }
  .meter > span.is-claimed { background: CanvasText; }
}
@media (forced-colors: active) and (max-width: 639.98px) {
  .meter, .meter--mini { forced-color-adjust: none; outline: 1px solid CanvasText; background: Canvas linear-gradient(to right, CanvasText var(--claimed, 0%), transparent 0) no-repeat; }
}

/* Founder-spot copy variants: the HTML ships as "unknown"; site.js switches it. */
html[data-founder="unknown"] [data-when]:not([data-when~="unknown"]),
html[data-founder="open"] [data-when]:not([data-when~="open"]),
html[data-founder="closed"] [data-when]:not([data-when~="closed"]) { display: none !important; }

/* Landing: a visitor with an owner invite sees free-access wording instead of the trial (site.js sets data-visitor). */
html:not([data-visitor="invite"]) [data-offer="invite"],
html[data-visitor="invite"] [data-offer="trial"] { display: none !important; }

/* Header swap for logged-in visitors (boot.js sets data-auth before first paint). */
html:not([data-auth="in"]) [data-auth-show="in"],
html[data-auth="in"] [data-auth-show="out"] { display: none !important; }

/* ==========================================================================
   Components: phone frame
   ========================================================================== */

/* Hardware silhouette, not UI. Allowed exception to the no-pill rule. */
.phone { --w: 240px; margin: 0; width: var(--w); flex: none; }
.phone--feature { --w: 240px; }
.phone--join { --w: 220px; display: none; }
@media (min-width: 960px) {
  .phone--feature { --w: 260px; }
  .phone--join { display: block; }
}

/* Hero: two phones. The Deal screen in front; the customer summary behind it at 88%, up and to the left.
   The pair is centered on the plate as one group, so neither phone is cut off. */
.hero-phones { --w: 240px; position: relative; flex: none; padding: calc(var(--w) * .3) 0 0 calc(var(--w) * .22); }
.hero-phones .phone { --w: inherit; }
.phone--back { position: absolute; top: 0; left: 0; transform: scale(.88); transform-origin: top left; }
/* Narrow phones: the pair (1.22 phone widths) plus the plate padding never gets wider than the column. */
@media (max-width: 379.98px) { .hero-phones { --w: min(220px, (100vw - 80px) / 1.22); } }
@media (min-width: 1280px) { .hero-phones { --w: 280px; } }
.phone__bezel {
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * .035);
  background: var(--ink);
  border-radius: calc(var(--w) * .15); /* phone__ hardware radius */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), var(--shadow-phone);
}
.phone__bezel::after {
  content: "";
  position: absolute;
  inset: calc(var(--w) * .035);
  border-radius: calc(var(--w) * .115); /* phone__ screen radius */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events: none;
}
.phone__screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1284 / 2778;
  object-fit: cover;
  background: var(--paper-2);
  border-radius: calc(var(--w) * .115); /* phone__ screen radius */
}

/* ==========================================================================
   Components: dialog
   ========================================================================== */

.dialog {
  width: min(480px, 100vw - 40px);
  max-height: calc(100dvh - 40px);
  padding: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-float);
  overflow: auto;
}
@media (min-width: 640px) { .dialog { padding: 32px; } }
.dialog::backdrop { background: rgba(20,24,46,.48); }
.dialog__title { font: 600 22px/1.3 var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.dialog__body { margin-top: 12px; font-size: 15px; }
.dialog__list { margin-top: 8px; padding-left: 1.25em; display: grid; gap: 8px; font-size: 15px; }
.dialog__list li::marker { color: var(--text-muted); }
.dialog .notice { margin-top: 20px; }
.dialog .field { margin-top: 20px; }
.dialog__error:not(:empty) { margin-top: 16px; }
.dialog__actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}
.dialog__actions .btn { width: 100%; }
@media (min-width: 640px) {
  .dialog__error:not(:empty) { margin-top: 16px; }
.dialog__actions { flex-direction: row; justify-content: flex-end; }
  .dialog__actions .btn { width: auto; }
}

/* ==========================================================================
   Global chrome: header
   ========================================================================== */

.header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: border-color .15s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-header__left { display: flex; align-items: center; gap: 48px; min-width: 0; }
.site-header__right { display: flex; align-items: center; gap: 8px; }
.site-nav { display: none; }
.nav-link {
  font: 500 15px/1 var(--font-body);
  color: var(--text);
  text-decoration: none;
  padding-block: 8px;
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.header-login { display: none; }
.header-cta { font-size: 14px; padding: 0 14px; }
/* Logged in on a phone, "Your account" is in the menu, so the bar keeps one button, like when logged out. */
.header-cta--wide { display: none; }
/* The smallest phones: "Open app", so the button clears the wordmark. */
@media (max-width: 349.98px) { .header-cta__more { display: none; } }
.menu-btn { width: 44px; height: 44px; padding: 0; }
.menu-btn .icon { width: 22px; height: 22px; }
.menu-btn[aria-expanded="true"] .i-menu, .menu-btn[aria-expanded="false"] .i-close { display: none; }
.site-header:has(.menu-btn[aria-expanded="true"]) .header-cta { visibility: hidden; }

@media (min-width: 960px) {
  .site-nav { display: flex; gap: 32px; }
  .site-header__right { gap: 24px; }
  .header-login { display: inline-block; }
  .header-cta { padding: 0 12px; }
  /* Two buttons side by side sit 12px apart, like other button rows. */
  .header-cta--wide { display: inline-flex; margin-right: -12px; }
  .menu-btn { display: none; }
}

/* Minimal header (auth and account pages) */
.header-aside { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); }
.header-aside .link { font-weight: 500; }
/* Ghost button in the account header: pull it out by its padding so the label ends on the column edge. */
.site-header [data-logout] { margin-right: -12px; }
@media (max-width: 380px) { .header-aside__lead { display: none; } }

/* Mobile menu */
.menu {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0; bottom: 0;
  z-index: 49;
  background: #fff;
  padding: 8px var(--gutter) 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity .15s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__nav { display: flex; flex-direction: column; }
.menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  border-bottom: 1px solid var(--rule);
  font: 600 22px/1.2 var(--font-head);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.menu__link .icon { color: var(--text-muted); }
.menu__actions { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
@media (min-width: 960px) { .menu { display: none !important; } }

/* Invited-visitor bar (landing only) */
.invite-bar {
  background: var(--green-tint);
  border-bottom: 1px solid var(--green-line);
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.invite-bar__inner { min-height: 44px; display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.invite-bar .icon { width: 20px; height: 20px; color: var(--green); }

/* ==========================================================================
   Global chrome: footers
   ========================================================================== */

.site-footer { padding: 48px 0 32px; background: #fff; }
.site-footer--rule { border-top: 1px solid var(--rule); }
@media (min-width: 640px) { .site-footer { padding: 64px 0 40px; } }
.footer__grid { display: grid; gap: 40px; }
.footer__brand p { font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.footer__brand .wordmark { margin-bottom: 16px; min-height: 44px; justify-content: center; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.footer__col--contact { grid-column: 1 / -1; }
/* Phones: Product | Account, then Legal and Contact each on a full row. Links stack in every column. */
@media (max-width: 639.98px) {
  .footer__cols > .footer__col:nth-child(3) { grid-column: 1 / -1; }
}
.footer__col h2 { margin-bottom: 4px; }
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 15px; line-height: 1.4; color: var(--text); text-decoration: none; }
.footer__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__bottom { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 24px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer__tm { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--text-muted); max-width: 100ch; }
@media (min-width: 640px) {
  .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)) ; }
  .footer__col--contact { grid-column: auto; }
}
@media (min-width: 640px) and (max-width: 959.98px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .footer__cols { grid-template-columns: 1fr 1fr 1fr 1.5fr; }
}
@media (min-width: 1280px) {
  .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .footer__brand { grid-column: 1 / 5; }
  .footer__cols { grid-column: 5 / 13; }
}

.mini-footer { border-top: 1px solid var(--rule); padding: 20px 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.mini-footer__row { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
/* Each item is a 44px tall row cell; the dot sits on the item, outside the link, so the focus ring skips it. */
.mini-footer__row > * { display: inline-flex; align-items: center; min-height: 44px; }
.mini-footer__row > * + *::before { content: "\00B7"; padding-inline: 8px; color: var(--text-muted); }
.mini-footer a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.mini-footer a:hover { color: var(--ink); text-decoration-color: var(--ink); }
@media (max-width: 639.98px) {
  .mini-footer__row > .mini-footer__email { flex-basis: 100%; }
  .mini-footer__row > .mini-footer__email::before { content: none; }
}

/* ==========================================================================
   Landing: hero
   ========================================================================== */

.hero { padding: 32px 0 72px; }
.hero__grid { display: grid; gap: 40px; }
.founder-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 8px 12px;
  margin-bottom: 28px;
  max-width: 100%;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  font: 500 14px/1.35 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-decoration: none;
  transition: border-color .12s var(--ease);
}
.founder-line:hover { border-color: var(--ink); }
@media (max-width: 959.98px) { .founder-line { min-height: 44px; } }
.founder-line strong { color: var(--ink); font-weight: 600; }
@media (max-width: 639.98px) { .founder-line__long { display: none; } }
/* Narrow phones: the spot count gets its own line with no separator, so a wrapped line never starts with "·". */
@media (max-width: 399.98px) {
  .founder-line__sep { display: none; }
  .founder-line__count { display: block; }
}
.founder-line .icon { width: 16px; height: 16px; color: var(--ink); }
.hero__title { max-width: 20ch; }
.hero .lead { margin-top: 24px; }
.hero__actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.hero__actions .btn { width: 100%; }
.hero__fine {
  margin-top: 20px;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}
.hero__fine li { display: flex; align-items: center; gap: 8px; }
.hero__fine .icon { width: 16px; height: 16px; color: var(--ink); }
.hero__fine .icon--muted { color: var(--text-muted); }
@media (min-width: 640px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { width: auto; }
  .hero__fine { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}
@media (min-width: 960px) {
  .hero { padding: 56px 0 96px; }
  .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .hero__text { grid-column: 1 / 8; }
  .hero__media { grid-column: 8 / 13; }
  .founder-line { height: 32px; padding: 0 12px; }
}

/* Credibility strip */
.cred { border-block: 1px solid var(--rule); padding-block: 40px; }
.cred__facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cred__fact { padding: 20px 16px; }
.cred__fact:nth-child(odd) { border-right: 1px solid var(--rule); padding-left: 0; }
.cred__fact:nth-child(-n+2) { border-bottom: 1px solid var(--rule); padding-top: 0; }
.cred__fact:nth-child(n+3) { padding-bottom: 0; }
.cred__fact p:last-child { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--text-muted); max-width: 28ch; text-wrap: balance; }
/* Under 360px a half-width cell is narrower than "Change it on any deal.", so the phrases may wrap there. */
@media (max-width: 359.98px) { .cred__fact:nth-child(2) .nowrap { white-space: normal; } }
.cred__games { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.cred__names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
/* Every name gets the same line box so they sit on one even line (accents like the é in Pokémon used to push it down). */
.cred__names li { display: flex; align-items: center; font: 600 17px/24px var(--font-head); color: var(--text); white-space: nowrap; }
@media (min-width: 960px) {
  .cred__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cred__fact, .cred__fact:nth-child(odd), .cred__fact:nth-child(-n+2), .cred__fact:nth-child(n+3) {
    padding: 0 24px; border: 0; border-left: 1px solid var(--rule);
  }
  .cred__fact:first-child { border-left: 0; padding-left: 0; }
  .cred__games { flex-direction: row; align-items: center; gap: 24px; }
  .cred__names { flex-wrap: nowrap; gap: 0; }
  .cred__names li + li::before { content: ""; width: 1px; height: 16px; margin: 0 20px; background: var(--rule-strong); }
}

/* Features */
/* The gap after the section intro is at least the gap between chapters, so the intro reads as the parent. */
.chapters { margin-top: 72px; display: grid; gap: 72px; }
.chapter { display: grid; gap: 32px; }
.chapter__text .kicker { margin-bottom: 12px; }
.chapter__title {
  font: 600 clamp(1.375rem, 1.189rem + .762vw, 1.875rem)/1.2 var(--font-head); /* 22px @390 -> 30px @1440 */
  letter-spacing: -0.015em;
  color: var(--ink);
}
.chapter__body { margin-top: 16px; font-size: 17px; line-height: 1.6; max-width: 34em; }
.def-list { margin-top: 24px; }
.def-list > div { border-top: 1px solid var(--rule); padding-block: 12px; }
.def-list dt { font: 600 15px/1.4 var(--font-body); color: var(--ink); }
.def-list dd { font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.def-list dd, .checklist li { text-wrap: pretty; }
.chapter__media { display: flex; flex-direction: column; min-width: 0; }
.plate-wrap { display: contents; }
.plate-wrap > .plate { order: 1; }
.chapter__caption { order: 2; margin-top: 16px; }
.plate-wrap > .dealmath { order: 3; }

.dealmath {
  margin-top: 16px;
  width: 100%;
  max-width: 360px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.dealmath dl { margin-top: 8px; }
.dealmath__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.4;
}
.dealmath__row:first-child { border-top: 0; }
.dealmath__row dt { color: var(--text-muted); }
.dealmath__row dd { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.dealmath__row--total dt { font-weight: 600; color: var(--ink); }
.dealmath__row--total dd { font-weight: 600; font-size: 16px; color: var(--orange); }
.dealmath__row:last-child { padding-bottom: 0; }
.dealmath__note { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 12px; line-height: 1.45; color: var(--text-muted); }

@media (min-width: 960px) {
  .chapters { margin-top: 112px; gap: 112px; }
  .chapter { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .chapter__text { grid-column: 1 / 6; grid-row: 1; }
  .chapter__media { grid-column: 7 / 13; grid-row: 1; display: block; }
  .chapter--flip .chapter__text { grid-column: 8 / 13; }
  .chapter--flip .chapter__media { grid-column: 1 / 7; }
  .plate-wrap { display: block; position: relative; }
  /* The phone sits to the right so the deal-math card never covers the screenshot. */
  .plate-wrap .plate { justify-content: flex-end; padding-right: 56px; }
  .dealmath {
    position: absolute;
    left: -56px;
    bottom: 48px;
    width: 296px;
    margin: 0;
    box-shadow: var(--shadow-float);
  }
}

.also { margin-top: 72px; }
.also__grid {
  margin-top: 32px;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 24px;
}
.also__item { border-top: 1px solid var(--rule); padding-top: 24px; }
.also__item .icon { width: 24px; height: 24px; color: var(--ink); }
.also__item .h3 { margin-top: 16px; }
.also__item p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 40ch; }
.roadmap { margin-top: 56px; border-top: 1px solid var(--rule-strong); padding-top: 24px; }
.roadmap p:last-child { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--text-muted); max-width: 72ch; }
@media (min-width: 640px) { .also__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) {
  .also { margin-top: 112px; }
  .also__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .roadmap { margin-top: 72px; }
}

/* How it works */
/* Same pattern as the referral steps (.ref-steps): one strong rule over the list, stacked rows with hairlines
   below 960px, three columns from 960px. */
.steps { margin-top: 40px; list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }
.step { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.step__num { font: 600 13px/1 var(--font-head); letter-spacing: .08em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 12px; }
.step p { margin-top: 8px; max-width: 36ch; }
.steps-cta { margin-top: 48px; display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.steps-cta .small { color: var(--text-muted); }
@media (min-width: 640px) {
  .steps-cta { flex-direction: row; align-items: center; }
}
@media (min-width: 960px) {
  .steps { margin-top: 56px; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .step { padding: 28px 0 0; border-bottom: 0; }
}

/* Pricing */
.pricing-sheet {
  margin-top: 48px;
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  display: grid;
  background: #fff;
}
.pricing-sheet__half { padding: 24px; min-width: 0; }
.pricing-sheet__half + .pricing-sheet__half { border-top: 1px solid var(--rule); }
.price-row { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; }
.price {
  font: 600 clamp(3.5rem, 3.129rem + 1.524vw, 4.5rem)/1 var(--font-head);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price-unit { font: 500 18px/1 var(--font-body); color: var(--text-muted); }
.price-lock { margin-top: 12px; font-size: 16px; line-height: 1.5; }
.price-anchor { margin-top: 8px; }
.pricing-sheet .meter { margin-top: 28px; }
.pricing-cta { margin-top: 28px; }
.pricing-cta + .caption { margin-top: 12px; }
@media (min-width: 640px) and (max-width: 959.98px) {
  .pricing-cta .btn, .cta-band__actions .btn { width: auto; min-width: 280px; }
}
.checklist { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 16px; line-height: 1.5; }
.checklist .icon { width: 20px; height: 20px; color: var(--ink); margin-top: 2px; }
.checklist--sm { gap: 10px; }
.checklist--sm li { grid-template-columns: 16px 1fr; gap: 10px; }
.checklist--sm .icon { width: 16px; height: 16px; margin-top: 4px; }
.pricing-notes { margin-top: 24px; display: grid; gap: 24px; }
.pricing-note { border-top: 1px solid var(--rule); padding-top: 20px; font-size: 15px; line-height: 1.55; }
.pricing-note strong { color: var(--ink); }
.reassure { margin-top: 40px; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.reassure li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.45; }
.reassure .icon { width: 20px; height: 20px; color: var(--ink); }
@media (min-width: 960px) {
  .pricing-sheet { grid-template-columns: 1fr 1fr; }
  .pricing-sheet__half { padding: 48px; }
  .pricing-sheet__half + .pricing-sheet__half { border-top: 0; border-left: 1px solid var(--rule); }
  .pricing-notes { grid-template-columns: 1fr 1fr; }
  .reassure { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .pricing-sheet { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pricing-sheet__half { padding: 40px 32px; }
  .pricing-sheet .checklist li { font-size: 15px; }
}

/* Referral band */
.band { background: var(--paper-2); padding-block: 64px; }
.band__grid { display: grid; gap: 40px; }
.band__text .kicker { margin-bottom: 16px; }
.band__text p.body { margin-top: 16px; max-width: 40ch; }
.band__text .btn { margin-top: 28px; }
.flow { list-style: none; padding: 0; display: flex; flex-direction: column; align-items: stretch; }
.flow__step {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 20px;
  font: 500 15px/1.4 var(--font-body);
  color: var(--ink);
}
.flow__arrow { display: flex; justify-content: center; padding-block: 12px; color: var(--text-muted); }
.flow__arrow .icon { width: 20px; height: 20px; }
.flow__arrow .i-right { display: none; }
@media (min-width: 960px) {
  .band { padding-block: 96px; }
  .band__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .band__text { grid-column: 1 / 6; }
  .flow { grid-column: 7 / 13; flex-direction: row; align-items: center; }
  .flow__step { flex: 1 1 0; min-width: 0; align-self: stretch; display: flex; align-items: center; }
  .flow__arrow { padding: 0 12px; }
  .flow__arrow .i-right { display: block; }
  .flow__arrow .i-down { display: none; }
}

/* Deal-math card floats beside the phone only when there's room (>= 1280px); otherwise it sits under the
   screenshot at the full width of the plate. */
@media (min-width: 640px) and (max-width: 1279.98px) {
  .dealmath { width: 100%; max-width: none; }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .chapter__media { display: flex; flex-direction: column; }
  .plate-wrap { display: contents; }
  .plate-wrap .plate { justify-content: center; padding-right: 20px; }
  .dealmath { position: static; width: 100%; max-width: none; margin-top: 16px; box-shadow: none; }
  /* Chapter 1: the text spans plate, caption and deal-math card, and stays in view while they scroll by,
     so it ends level with the card instead of leaving a hole beside it. */
  .chapter--deal { grid-template-rows: auto auto auto; row-gap: 0; }
  .chapter--deal .chapter__text { grid-row: 1 / 4; align-self: start; position: sticky; top: 112px; }
  .chapter--deal .chapter__media { display: contents; }
  .chapter--deal .plate-wrap > .plate { grid-column: 7 / 13; grid-row: 1; }
  .chapter--deal .chapter__caption { grid-column: 7 / 13; grid-row: 2; }
  .chapter--deal .plate-wrap > .dealmath { grid-column: 7 / 13; grid-row: 3; }
}

/* Referral steps: numbered columns with hairline rules. Own class names (ref-*) so nothing else can override them. */
.ref-steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule-strong); }
.ref-step { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.ref-step__num { display: block; margin: 0; font: 600 13px/1 var(--font-head); letter-spacing: .08em; color: var(--text-muted); }
.ref-step__title { margin: 12px 0 8px; font: 600 clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem)/1.3 var(--font-head); letter-spacing: -0.01em; color: var(--ink); }
.ref-step__text { margin: 0; max-width: none; font: 400 15px/1.55 var(--font-body); color: var(--text); text-wrap: pretty; }
.band--stack .band__grid { display: block; }
.band--stack .band__text { max-width: 640px; margin-bottom: 40px; }
/* Stacked up to 959px; three columns only where each one has room for its title on one line. */
@media (min-width: 960px) {
  .band--stack .band__text { margin-bottom: 56px; }
  .ref-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .ref-step { padding: 28px 0 0; border-bottom: 0; }
}

/* FAQ */
.faq { display: grid; gap: 40px; }
.faq__head .kicker { margin-bottom: 16px; }
.faq__head p.body { margin-top: 16px; }
.faq-group + .faq-group { margin-top: 40px; }
.faq-group__title { margin-bottom: 12px; }
.faq-item { border-top: 1px solid var(--rule); }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 20px 0;
  font: 600 17px/1.4 var(--font-body);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary .icon { width: 20px; height: 20px; color: var(--ink); }
.faq-item[open] summary .i-plus, .faq-item:not([open]) summary .i-minus { display: none; }
.faq-item__a { padding-bottom: 20px; max-width: 64ch; font-size: 16px; line-height: 1.7; }
@media (min-width: 960px) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .faq__head { grid-column: 1 / 5; position: sticky; top: 96px; align-self: start; }
  .faq__groups { grid-column: 5 / 13; }
}

/* Final CTA (the one navy band) */
.cta-band { background: var(--ink); color: #fff; padding-block: var(--section-y); }
.cta-band :focus-visible { outline-color: #fff; }
.cta-band__grid { display: grid; gap: 32px; }
.cta-band h2 { color: #fff; }
.cta-band .lead { margin-top: 16px; color: var(--on-ink-2); }
.cta-band__alt { margin-top: 12px; font-size: 15px; color: var(--on-ink-2); }
.cta-band__spots { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--on-ink-3); font-variant-numeric: tabular-nums; }
.cta-band__spots strong { color: #fff; font-weight: 600; }
@media (min-width: 960px) {
  .cta-band__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .cta-band__text { grid-column: 1 / 8; }
  .cta-band__actions { grid-column: 9 / 13; }
}

/* ==========================================================================
   Auth pages (/join, /login, /forgot)
   ========================================================================== */

.auth { padding: 32px 0 64px; }
@media (min-width: 960px) { .auth { padding: 64px 0 96px; } }
.auth--narrow { padding: 32px 0 64px; }
@media (min-width: 960px) { .auth--narrow { padding: 80px 0 96px; } }
.auth .banner-slot:not(:empty) { margin-bottom: 24px; }
.auth .banner-slot > * + * { margin-top: 12px; }
.auth-sub { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--text-muted); text-wrap: balance; }
.auth .form { margin-top: 32px; }
.auth-alt { margin-top: 24px; font-size: 15px; }
.auth-terms { margin-top: 16px; }
.auth-terms a { color: var(--text-muted); text-decoration-color: var(--rule-strong); }
.auth-terms a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.auth-hint { margin-top: 24px; display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.auth-hint .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--text-muted); }
/* Text actions that are buttons ("Have an invite or referral code?", "Send a new code") look like the site's links. */
.text-action { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: left; }
.text-action:disabled { color: var(--text-muted); text-decoration: none; cursor: default; }
.invite-toggle { justify-self: start; margin: -8px 0 -4px; }
.form .btn--block { margin-top: 4px; }
.form-step-kicker { margin-bottom: 12px; }
.resend-row { margin-top: 12px; }
.resend-row .text-action { font-variant-numeric: tabular-nums; }
.resend-status { display: flex; gap: 6px; align-items: flex-start; }
.resend-status .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--green); }
.resend-status strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sent-to { margin-top: 12px; font-size: 17px; line-height: 1.5; color: var(--text-muted); }
.sent-to strong { color: var(--ink); overflow-wrap: anywhere; }
.sent-to #change-email { display: block; width: fit-content; margin-top: 8px; }

.join-grid { display: grid; gap: 40px; }
.join-form { max-width: 400px; width: 100%; }
.trial-plate { background: var(--paper-2); border-radius: var(--r-lg); padding: 24px; overflow: hidden; container-type: inline-size; }
.trial-plate .stat { margin-top: 12px; }
.trial-plate__lede { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.trial-plate .meter { margin-top: 24px; }
.trial-plate .meter__label { font-size: 14px; }
@container (min-width: 420px) {
  .trial-plate .meter__count { display: inline; margin-top: 0; white-space: nowrap; }
  .trial-plate .meter__sep { display: inline; }
}
.trial-plate .checklist { margin-top: 24px; }
.trial-plate .phone { margin: 32px auto 0; }
@media (min-width: 600px) and (max-width: 959.98px) {
  .join-grid { justify-items: center; }
  .join-form, .trial-plate { width: 100%; max-width: 400px; }
}
@media (min-width: 960px) {
  .join-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .join-form { grid-column: 1 / 6; }
  .trial-plate { grid-column: 7 / 13; padding: 40px; }
}

/* ==========================================================================
   Account
   ========================================================================== */

.account { padding: 32px 0 64px; }
@media (min-width: 960px) { .account { padding: 56px 0 96px; } }
.account__meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; color: var(--text-muted); }
.account__meta .email { overflow-wrap: anywhere; }
.account__notice:not(:empty) { margin-top: 24px; }
.account__rows { margin-top: 40px; }
.acct-row { display: grid; gap: 16px; padding-block: 32px; border-top: 1px solid var(--rule); }
.acct-row__label p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.acct-row__content { min-width: 0; }
@media (min-width: 960px) {
  .acct-row { grid-template-columns: 260px 1fr; gap: 48px; padding-block: 40px; }
}

.plan-card .h3, .plan-card .stat { margin-top: 12px; }
/* Waiting for Stripe to confirm (/account?welcome=1): an indeterminate 2px bar along the top inner edge. */
.plan-card--pending { position: relative; overflow: hidden; }
.plan-card__progress { position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; background: var(--rule); }
.plan-card__progress::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: var(--ink);
  animation: plan-progress 1.6s var(--ease) infinite;
}
@keyframes plan-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) { .plan-card__progress { display: none; } }
.plan-card__details { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.plan-card__actions { margin-top: 24px; }
@media (max-width: 639.98px) { .plan-card__actions .btn { width: 100%; } }
.plan-card__note { margin-top: 12px; display: flex; gap: 6px; align-items: flex-start; }
.plan-card .notice { margin-top: 16px; }
.plan-card .stat .unit { font-size: .55em; letter-spacing: -0.01em; }
.founder-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

.app-block { display: block; }
.app-block p { font-size: 15px; line-height: 1.55; }
.app-block .h3 + p { margin-top: 8px; }
/* Stacked rows: the row's own h2 is the heading, so this line reads as the first line of the content. */
@media (max-width: 959.98px) { .app-block .h3 { font: 600 16px/1.4 var(--font-body); letter-spacing: 0; } }
.app-block strong { color: var(--ink); overflow-wrap: anywhere; }
.app-block .caption { margin-top: 8px; display: flex; gap: 6px; align-items: center; }
.app-block .caption:first-of-type { margin-top: 12px; }
.app-block .caption .icon { width: 16px; height: 16px; }
.app-block--next { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.app-block__actions { margin-top: 16px; }
@media (max-width: 639.98px) { .app-block__actions .btn { width: 100%; } }

.invite-actions { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.invite-actions .btn { width: 100%; }
.invite-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .invite-actions, .invite-actions:has(> :only-child) { display: flex; }
  .invite-actions .btn { width: auto; }
}
.invite-code { margin-top: 16px; font-size: 15px; }
.invite-code strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.plain-list { list-style: none; padding: 0; margin-top: 20px; }
.plain-list li { padding-block: 12px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.plain-list li:last-child { border-bottom: 1px solid var(--rule); }

.kv > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding-block: 12px; border-top: 1px solid var(--rule); }
.kv > div:first-child { border-top: 0; padding-top: 0; }
.kv dt { font-size: 14px; color: var(--text-muted); }
.kv dd { font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
/* Value plus action: the action sits 12px after the text, or starts its own line flush left when it wraps. */
.kv__value { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 4px; }
@media (min-width: 640px) {
  .kv > div { grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; }
}
.signout { margin-top: 24px; }
.signout + .caption { margin-top: 8px; }

.danger-copy { font-size: 15px; line-height: 1.6; max-width: 60ch; }
.danger .notice { margin-top: 16px; }
.danger .btn { margin-top: 20px; }

.goodbye { padding-block: 32px; }
.goodbye .lead { margin-top: 16px; }
.goodbye p:last-child { margin-top: 24px; }
.goodbye h1:focus { outline: none; }

.load-error .notice { margin-top: 24px; }
.load-error .btn { margin-top: 16px; }

/* ==========================================================================
   Legal pages
   ========================================================================== */

.legal { padding: 32px 0 96px; }
@media (min-width: 960px) { .legal { padding-top: 64px; } }
.legal__grid { display: grid; }
.legal__title .kicker { margin-bottom: 16px; }
.legal__title .caption { margin-top: 12px; }
.short-version {
  margin-top: 32px;
  background: var(--paper-2);
  border-radius: var(--r-lg);
  padding: 24px;
}
.short-version h2 { font: 600 clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem)/1.3 var(--font-head); letter-spacing: -0.01em; }
.short-version ul { list-style: none; padding: 0; margin-top: 16px; display: grid; gap: 10px; }
.short-version li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 17px; line-height: 1.6; }
.short-version .icon { width: 20px; height: 20px; color: var(--ink); margin-top: 4px; }
.toc-mobile { margin-top: 24px; padding: 0; }
.toc-mobile summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink);
}
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::marker { content: ""; }
.toc-mobile[open] summary .i-plus, .toc-mobile:not([open]) summary .i-minus { display: none; }
.toc-mobile ol { list-style: none; padding: 0 20px 16px; margin: 0; display: grid; }
.toc-mobile a { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text); text-decoration: none; border-top: 1px solid var(--rule); }
.toc-mobile a:hover { color: var(--ink); text-decoration: underline; }
.toc { display: none; }
.toc ol { list-style: none; padding: 0; margin: 12px 0 0; }
.toc a {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 0 4px 12px;
  border-left: 2px solid transparent;
  border-radius: var(--r-0);
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
}
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); }

.prose { margin-top: 8px; font-size: 17px; line-height: 1.7; color: var(--text); min-width: 0; }
.prose > p, .prose > ul, .prose > ol, .prose > .table-wrap { margin-top: 16px; }
.prose h2 {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
  font: 600 24px/1.3 var(--font-head);
  letter-spacing: -0.01em;
}
.prose h2:first-child { margin-top: 48px; }
.prose h3 { margin-top: 32px; font: 600 18px/1.4 var(--font-head); }
.prose h2 + p, .prose h3 + p, .prose h2 + ul { margin-top: 16px; }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: 8px; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: "\2013"; position: absolute; left: -1.25em; color: var(--text-muted); }
.prose strong { color: var(--ink); }
.prose a { overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th { text-align: left; font: 600 13px/1.4 var(--font-body); color: var(--text-muted); border-bottom: 1px solid var(--rule-strong); padding: 12px; }
.prose td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }

@media (min-width: 960px) {
  .legal__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
  .legal__title { grid-column: 4 / 11; grid-row: 1; max-width: 680px; }
  .toc-mobile { display: none; }
  .toc { display: block; grid-column: 1 / 4; grid-row: 1 / span 2; position: sticky; top: 96px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; }
  .prose { grid-column: 4 / 11; grid-row: 2; max-width: 680px; }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
  .toc { grid-column: 1 / 5; padding-right: 16px; }
  .legal__title, .prose { grid-column: 5 / 13; }
}

/* ==========================================================================
   404
   ========================================================================== */

.notfound { padding: 64px 0 96px; }
@media (min-width: 960px) { .notfound { padding: 128px 0; } }
.notfound__inner { max-width: 720px; }
.notfound h1 { margin-top: 16px; }
.notfound .lead { margin-top: 16px; }
.notfound .btn-row { margin-top: 32px; }
.notfound__links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 15px; }
.notfound__links .link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
@media (max-width: 639.98px) {
  .notfound .btn-row .btn { width: 100%; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
  .btn:hover .icon--arrow { transform: none; }
  .menu { transition: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .skip, .toc, .toc-mobile, .footer__cols, .menu, .invite-bar, .header-sentinel { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .prose, .prose p, .prose li { color: #000; font-size: 11pt; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; }
  .short-version { border: 1px solid #999; }
  .site-footer { padding: 16pt 0 0; }
}