/* ---------------------------------------------------------------------------
   dextri.app — one stylesheet for every page.

   Palette, type scale, spacing and radii are the app's, mirrored from
   mobile/src/design/tokens.ts so the site and the product look like the same
   thing. Those values are still Theo's placeholders; when he sets the real
   ones, change that file and the :root block here, and nowhere else.

   Dark only. "Dark is the design, not a courtesy mode" (Theo, 2026-08-08) —
   the same reason mobile/src/design/theme.tsx defaults to dark rather than to
   the OS. So there is no light palette and no prefers-color-scheme block, and
   every colour is painted explicitly.

   System face throughout, matching FONT in tokens.ts: SF Pro on Apple
   hardware, chosen on device over the alternatives, and it costs no download.
   --------------------------------------------------------------------------- */

:root {
  /* Palette — DARK in tokens.ts */
  --surface:        #0e0e0f;
  --surface-raised: #1a1a1c;
  --border:         #2c2c2f;
  --ink:            #f4f4f5;
  --ink-muted:      #a1a1a6;
  --on-accent:      #ffffff;
  --accent:         #4da3ff;
  --success:        #3ec27f;
  --warning:        #e0a33a;
  --danger:         #ff6b6b;

  /* SPACE */
  --xs: 4px;  --sm: 8px;  --md: 16px;  --lg: 24px;  --xl: 40px;  --xxl: 64px;

  /* RADIUS */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --shell: 900px;
}

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;          /* TYPE.body */
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--lg);
}

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

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

/* --- type roles, straight off TYPE in tokens.ts --------------------------- */

h1 { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2 { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0; }
h3 { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0; }
p  { margin: 0; }

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
}

.caption { font-size: 13px; color: var(--ink-muted); margin: 0; }
.muted   { color: var(--ink-muted); }
.lede    { color: var(--ink-muted); max-width: 62ch; }

/* --- header / nav --------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding-block: var(--lg);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.wordmark {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0;
  color: var(--ink);
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--md);
  flex-wrap: wrap;
}

.nav a {
  font-size: 14px;
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: 2px;
  border-bottom: 1px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.nav .nav-cta {
  color: var(--accent);
  font-weight: 600;
  border-bottom: none;
}

/* --- sections ------------------------------------------------------------- */

section { padding-block: var(--xl); }
section + section { border-top: 1px solid var(--border); }

.stack    { display: flex; flex-direction: column; gap: var(--md); }
.stack-sm { display: flex; flex-direction: column; gap: var(--sm); }
.stack-lg { display: flex; flex-direction: column; gap: var(--lg); }

/* Page opener — title plus one paragraph, on the inner pages. */
.page-head { display: flex; flex-direction: column; gap: var(--md); padding-block: var(--xl) 0; }

/* --- waitlist form -------------------------------------------------------- */

.signup { display: flex; flex-direction: column; gap: var(--sm); max-width: 460px; }

.field-row { display: flex; gap: var(--sm); flex-wrap: wrap; }

.field-row input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  padding: 12px var(--md);
}
.field-row input[type="email"]::placeholder { color: var(--ink-muted); }
.field-row input[type="email"]:focus { border-color: var(--accent); outline: none; }

.btn {
  flex: 0 0 auto;
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  padding: 12px var(--lg);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn[disabled] { opacity: .55; cursor: default; }

.form-note { font-size: 13px; color: var(--ink-muted); min-height: 1.5em; }
.form-note[data-state="ok"]   { color: var(--success); }
.form-note[data-state="fail"] { color: var(--danger); }

/* --- illustrations -------------------------------------------------------- */

.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--md); }

.plate { display: flex; flex-direction: column; gap: var(--sm); }

.plate figure {
  margin: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.plate svg { display: block; width: 100%; height: auto; }

.plate figcaption { display: flex; flex-direction: column; gap: var(--xs); }
.plate figcaption p { font-size: 13px; color: var(--ink-muted); }
.plate figcaption .name { font-size: 16px; font-weight: 600; color: var(--ink); }

/* --- numbered / divided lists --------------------------------------------- */

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.rows li {
  display: flex;
  flex-direction: column;
  gap: var(--xs);
  padding-block: var(--md);
  border-top: 1px solid var(--border);
}
.rows li:first-child { border-top: 0; padding-top: 0; }
.rows p { color: var(--ink-muted); }

/* --- cards ---------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--md); }

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

.card.is-featured { border-color: var(--accent); }

.card ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: var(--sm); }
.card li { color: var(--ink-muted); font-size: 15px; }

.price { display: flex; align-items: baseline; gap: var(--sm); }
.price .amount { font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.price .per { font-size: 13px; color: var(--ink-muted); }

/* Prices are not set. This marks the ones standing in for a decision. */
.tbd {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--warning);
  border: 1px solid var(--warning);
  border-radius: var(--r-sm);
  padding: 2px var(--sm);
}

/* --- prose (legal and FAQ pages) ------------------------------------------ */

.prose { display: flex; flex-direction: column; gap: var(--lg); max-width: 68ch; }
.prose h2 { margin-top: var(--sm); }
.prose p, .prose li { color: var(--ink-muted); }
.prose ul, .prose ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: var(--sm); }
.prose strong { color: var(--ink); font-weight: 600; }

.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: var(--sm) var(--md) var(--sm) 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
.prose td { color: var(--ink-muted); }

.table-wrap { overflow-x: auto; }

/* --- FAQ ------------------------------------------------------------------ */

.faq { display: flex; flex-direction: column; }

.faq details {
  border-top: 1px solid var(--border);
  padding-block: var(--md);
}
.faq details:first-of-type { border-top: 0; }

.faq summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-muted); font-weight: 400; font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }

.faq details > p, .faq details > ul { margin-top: var(--sm); color: var(--ink-muted); }

/* --- draft banner --------------------------------------------------------- */

/* On the two pages carrying unreviewed legal text. DELETE the element once a
   lawyer has been through the page — it is deliberately impossible to miss so
   that it cannot ship by accident. */
.draft-banner {
  margin-top: var(--lg);
  background: var(--surface-raised);
  border: 1px solid var(--warning);
  border-radius: var(--r-md);
  padding: var(--md);
  font-size: 14px;
  color: var(--ink-muted);
}
.draft-banner strong { color: var(--warning); }

/* --- footer --------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--border);
  padding-block: var(--lg) var(--xl);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--md);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-muted);
}

.foot nav { display: flex; gap: var(--md); flex-wrap: wrap; }
.foot a { text-decoration: none; color: var(--ink-muted); }
.foot a:hover { color: var(--ink); }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 720px) {
  .plates { grid-template-columns: minmax(0, 1fr); gap: var(--lg); }
  .top { gap: var(--sm); }
  .nav { gap: 12px; }
  .nav a { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}