/* ═══════════════════════════════════════════════════════════════════════════════
   Kpali marketing site — every colour, radius and step below is lifted from
   /root/waka/theme.ts so app and site are one brand. Do not invent values here:
   if a number is missing, it is missing in theme.ts first.

   Palette mapping (theme.ts → CSS custom properties):
     ground / surface / well / line / ink / inkSecondary / inkGlyph / accent
   Light: #EDEDEF · #FFFFFF · #F1F1F4 · rgba(16,24,40,.08) · #0A0B0D · #646B77 · #8A9099 · #CE39E4
   Dark:  #0A0B0D · #17181C · #1F2126 · rgba(255,255,255,.08) · #F4F6F8 · #9AA1AA · #7E858E · #E879F9

   Ink on accent: theme.ts's own measured numbers (see the ACCENT block there) put
   BLACK ink on the light accent at 5.00:1 vs white at ~3.9:1, and dark.onAccent is
   #0A0B0D — so accent fills take dark ink in BOTH schemes.

   The light-mode inversion (white cards on a grey ground) is the whole look — keep it.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --ground: #EDEDEF;
  --surface: #FFFFFF;
  --well: #F1F1F4;
  --line: rgba(16, 24, 40, 0.08);
  --ink: #0A0B0D;
  --ink-secondary: #646B77;
  --ink-glyph: #8A9099;
  --accent: #CE39E4;
  --on-accent: #0A0B0D;

  /* Space (4pt rhythm) */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px;
  --sp-xl: 20px; --sp-xxl: 24px; --sp-xxxl: 32px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-xxl: 26px; --r-pill: 999px;

  /* Type — theme.ts scale (px → rem), lineHeight baked in where used */
  --t-micro: 0.6875rem;  /* 11 */
  --t-caption: 0.75rem;  /* 12 */
  --t-label: 0.8125rem;  /* 13 */
  --t-body: 0.9375rem;   /* 15 */
  --t-title: 1.0625rem;  /* 17 */
  --t-heading: 1.25rem;  /* 20 */
  --t-display: 1.5rem;   /* 24 */
  --t-hero: 2rem;        /* 32 — scaled up responsively for the web hero only */

  --cta-height: 54px;    /* Layout.ctaHeight */
  --touch-min: 44px;     /* Layout.touchMin */

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0A0B0D;
    --surface: #17181C;
    --well: #1F2126;
    --line: rgba(255, 255, 255, 0.08);
    --ink: #F4F6F8;
    --ink-secondary: #9AA1AA;
    --ink-glyph: #7E858E;
    --accent: #E879F9;
    --on-accent: #0A0B0D;
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.4;   /* body 15/21 from theme.ts */
  font-weight: 500;   /* Weight.regular */
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

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

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

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

.shell {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--sp-xl);
}

.skip {
  position: absolute;
  left: var(--sp-lg);
  top: -100px;
  z-index: 10;
  background: var(--surface);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.skip:focus-visible { top: var(--sp-lg); }

.muted { color: var(--ink-secondary); }

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  gap: var(--sp-lg);
}

.brand {
  font-size: var(--t-heading);
  font-weight: 800; /* Weight.heavy */
  letter-spacing: -0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 3px; /* Hair.xs */
}

.brand-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--accent);
  display: inline-block;
}

.nav {
  display: flex;
  list-style: none;
  gap: var(--sp-xxl);
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--t-label);
  font-weight: 600; /* Weight.medium */
  color: var(--ink-secondary);
  text-decoration: none;
}
.nav a:hover { color: var(--ink); }

/* ── Type helpers ─────────────────────────────────────────────────────────── */

.eyebrow {
  font-size: var(--t-caption);
  line-height: 1.33;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: var(--sp-md);
}

h1 {
  font-size: clamp(var(--t-hero), 5.5vw, 3.25rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
}

h2 {
  font-size: clamp(var(--t-display), 3.5vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h3 { font-size: var(--t-title); line-height: 1.3; font-weight: 700; }

.lede, .section-lede {
  font-size: var(--t-title);
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 34em;
}

.quiet-note {
  font-size: var(--t-label);
  line-height: 1.45;
  color: var(--ink-secondary);
  margin-top: var(--sp-xl);
  max-width: 44em;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cta-height);
  padding: 0 var(--sp-xxl);
  border-radius: var(--r-pill);
  font-size: var(--t-body);
  font-weight: 700;
  text-decoration: none;
  transition: transform 120ms cubic-bezier(0.2, 0, 0, 1); /* Motion.instant · ease.standard */
}
.btn:active { transform: scale(0.97); } /* Motion.pressScale */

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(56px, 10vw, 112px) var(--sp-xxxl); }

.hero-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }

.hero .lede { margin-top: var(--sp-xl); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-xxxl);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: calc(var(--sp-xxxl) + var(--sp-lg));
}

.stat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-lg) var(--sp-xxl);
  min-width: 128px;
}

.stat dt {
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--ink-secondary);
  order: 2;
}

.stat dd {
  font-size: var(--t-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── Sections & cards ─────────────────────────────────────────────────────── */

.section { padding-block: clamp(48px, 7vw, 88px); }
.section .section-lede { margin-top: var(--sp-lg); }

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: var(--sp-xxl);
}

/* ── Services ─────────────────────────────────────────────────────────────── */

.service-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-xxxl);
}

.service h3 { margin-top: var(--sp-lg); }
.service p { margin-top: var(--sp-xs); font-size: var(--t-label); line-height: 1.45; color: var(--ink-secondary); }

.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--well);
  color: var(--ink-glyph);
}
.tile svg { width: 22px; height: 22px; } /* Icon.md */

.service-note {
  background: var(--well);
  border: 1px dashed var(--line);
}
.service-note h3 { margin-top: 0; }
.service-note p { margin-top: var(--sp-sm); }

/* ── Steps ────────────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-xxxl);
  counter-reset: step;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--well);
  font-size: var(--t-label);
  font-weight: 700;
  color: var(--ink);
}

.step h3 { margin-top: var(--sp-lg); }
.step p { margin-top: var(--sp-sm); font-size: var(--t-label); line-height: 1.5; color: var(--ink-secondary); }

/* ── App download ─────────────────────────────────────────────────────────── */

.panel {
  border-radius: var(--r-xxl);
  padding: clamp(var(--sp-xxl), 5vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.panel .section-lede { margin-top: var(--sp-lg); }

.store-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-md);
  margin-top: var(--sp-xxxl);
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  min-height: var(--cta-height);
  padding: var(--sp-sm) var(--sp-xxl);
  border-radius: var(--r-lg);
  background: var(--well);
  border: 1px dashed var(--line);
  color: var(--ink-secondary);
  cursor: not-allowed;
}
.store-btn svg { width: 22px; height: 22px; color: var(--ink-glyph); }

.store-text { display: flex; flex-direction: column; text-align: left; }
.store-small { font-size: var(--t-micro); line-height: 1.3; font-weight: 600; }
.store-name { font-size: var(--t-title); line-height: 1.3; font-weight: 700; color: var(--ink); }

/* ── Business / API ───────────────────────────────────────────────────────── */

.biz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-xxxl);
  align-items: start;
}

.code-caption {
  font-size: var(--t-caption);
  font-weight: 600;
  color: var(--ink-secondary);
  margin-bottom: var(--sp-lg);
}

.code-card pre {
  background: var(--well);
  border-radius: var(--r-md);
  padding: var(--sp-xl);
  overflow-x: auto;
}

.code-card code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--t-label);
  line-height: 1.7;
  color: var(--ink);
}

.signup-card p { margin-top: var(--sp-sm); font-size: var(--t-label); color: var(--ink-secondary); }

.signup { margin-top: var(--sp-xl); display: flex; flex-direction: column; gap: var(--sp-sm); }

.signup label { font-size: var(--t-label); font-weight: 600; }

.signup input {
  min-height: var(--touch-min);
  padding: 0 var(--sp-lg);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--ink);
  font-size: var(--t-body);
  font-family: inherit;
}
.signup input::placeholder { color: var(--ink-glyph); }

.signup button {
  min-height: var(--touch-min);
  border-radius: var(--r-pill);
  border: none;
  background: var(--well);
  color: var(--ink-secondary);
  font-size: var(--t-body);
  font-weight: 700;
  font-family: inherit;
  cursor: not-allowed;
}

.signup-card .quiet-note { margin-top: var(--sp-lg); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-xxxl);
  margin-top: var(--sp-xxxl);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-xxl);
}

.footer-brand { font-size: var(--t-title); }
.footer-tag { margin-top: var(--sp-sm); font-size: var(--t-label); color: var(--ink-secondary); }

.footer-head {
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.footer-list { list-style: none; margin-top: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm); }
.footer-list a, .footer-list span { font-size: var(--t-label); }

.footer-bottom {
  margin-top: var(--sp-xxxl);
  padding-top: var(--sp-xl);
  border-top: 1px solid var(--line);
}
.footer-bottom p { font-size: var(--t-caption); color: var(--ink-secondary); }

/* ── Legal page (terms.html) — additive only; reuses the same tokens ──────── */

.legal-shell { max-width: 720px; }

.legal h1 { margin-top: var(--sp-sm); }

.legal .lede { margin-top: var(--sp-xl); }

.legal h2 {
  font-size: var(--t-heading);
  margin-top: var(--sp-xxxl);
  margin-bottom: var(--sp-md);
}

.legal p { margin-top: var(--sp-md); color: var(--ink); }
.legal p.eyebrow { margin-top: 0; }

.legal-updated {
  font-size: var(--t-label);
  color: var(--ink-secondary);
  margin-top: var(--sp-sm);
}

.legal-list {
  margin-top: var(--sp-md);
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
.legal-list li { line-height: 1.5; }

.draft-banner {
  background: var(--well);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-lg) var(--sp-xl);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--ink-secondary);
  margin-bottom: var(--sp-xxxl);
}

.todo {
  background: var(--well);
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  padding: 1px var(--sp-sm);
  font-size: var(--t-label);
  color: var(--ink-secondary);
  white-space: normal;
}

.legal-footer-bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-md);
}
.legal-footer-bottom a { font-size: var(--t-caption); color: var(--ink-secondary); }

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .nav { gap: var(--sp-lg); }
  .stats { width: 100%; }
  .stat { flex: 1 1 40%; }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:active { transition: none; transform: none; }
}