/* ── Strategy C tokens ─────────────────────────────────────────── */
:root { --scale: 1; }

/* Global 90% zoom removed — pages now render at native 100% to match the
   homepage (template rollout). */

/* ── Mobile safeguards (added in mobile pass) ─────────────────── */
/* iOS Safari: prevent rubber-banding viewport jumps when nav drawer opens */
html, body {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}
/* Honour notched safe-area insets globally */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* When the central drawer is open, body padding is overridden by the
   .md-drawer-locked rule in partials.css to keep scroll position. */
/* Header positioning now lives in partials.css (self-contained) so the
   homepage can use the shared header without loading site.css. */



/* ================================================================
   Capacoty — site.css
   Shared design tokens + universal rules extracted from all pages.
   Load order: partials.css → site.css → page <style> block.
   DO NOT edit page-specific tokens here — they live in each page.
   Generated by Phase 3 CSS extraction.
   ================================================================ */

/* ── Design tokens (identical across all pages) ─────────────── */
:root {
  /* Ground */
  --bg: #fbfaf6;

  /* Surfaces */
  --plate: #ffffff;
  --plate-2: #f6f4ef;
  --surface: #ffffff;
  --surface-2: #faf6ed;

  /* Ink */
  --ink: #0a0a0a;
  --ink-2: #1a1a1a;
  --muted: rgba(10,10,10,.62);
  --soft: rgba(10,10,10,.42);
  --hair: rgba(10,10,10,.09);
  --hair-2: rgba(10,10,10,.16);
  --border: rgba(43,36,24,.12);

  /* Brand accent — orange */
  --accent: #d4f564;
  --accent-deep: #aec952;
  --accent-tint: #f4f9d8;
  --accent-dim: rgba(212,245,100,.10);
  --accent-bd: rgba(212,245,100,.28);
  --brand: #d4f564;
  --brand-dark: #aec952;

  /* Warm tint (lime-adjacent highlight) */
  --warm-tint: #f0f8d8;

  /* Atmospherics */
  --navy: #0c1a2e;
  --sky: #c4e0f5;
  --mint: #c8e8d8;

  /* Radii */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
}

/* ── Container (1320px canonical; referral overrides to 1100px locally) */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 48px);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior:smooth; }
a { text-decoration:none;color:inherit; }
button { cursor:pointer;font-family:inherit;border:none;background:none; }
img { max-width:100%;display:block; }

/* ── Reveal animations ──────────────────────────────────────── */
.reveal { opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.4,0,.2,1),transform .55s cubic-bezier(.4,0,.2,1) }
.reveal.vis { opacity:1;transform:none; }

/* ── Mobile: hero-like spread for homepage sections + softer per-section fade ──
   The hero uses ~36px side insets (clamp(2.25rem,7vw,3rem)) while the sections
   below inherit .container's 20px, which reads cramped on phones. Match the
   hero's margins, loosen stacked-card gaps, and make each section's fade-in a
   little more pronounced as it scrolls into view. */
@media (max-width: 760px) {
  .maths .container,
  .rpt-section .container,
  .tm-section .container,
  .numbers .container,
  .feat-section .container,
  .founder .container,
  .hl .container,
  .cap-peek-band .container,
  .closing {
    padding-left: clamp(2.25rem, 7vw, 3rem);
    padding-right: clamp(2.25rem, 7vw, 3rem);
  }
  .rpt-grid { gap: 1.4rem; }
  .numbers-grid { gap: 1.1rem; }
  .maths { padding: 4.5rem 0 5rem; }
  .reveal {
    transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
  }
}
.d1 { transition-delay:.06s; }
.d2 { transition-delay:.12s; }
.d3 { transition-delay:.18s; }
.d4 { transition-delay:.24s; }
.d5 { transition-delay:.30s; }
.d6 { transition-delay:.36s; }

/* ── Layout helpers ─────────────────────────────────────────── */
.page-wrap { max-width: 800px; margin: 0 auto; padding: 96px 24px 80px; }
.logo-text { font-family: 'DM Sans', sans-serif; font-size: 22px; color: #fff; letter-spacing: -.02em; }
/* Global H1 typography rule lives in /partials/partials.css next to
   the @font-face block — it ships with the cache-busted partials. */
.hero-sub strong { color:var(--ink);font-weight:600; }

/* ── Nav pseudo-states (parent selectors stay page-local) ─── */
.nav-burger.open span:nth-child(2) { opacity:0;transform:scaleX(0); }
.nav-cta:hover::before { transform:translateX(0); }
.nav-inner>.nav-actions { justify-self:end; }
.nav-inner>.nav-center { justify-self:center; }
.nav-inner>.nav-logo { justify-self:start; }
.nav-link.active { background:rgba(10,10,10,.07);font-weight:600; }

/* ── Drawer pseudo-states ───────────────────────────────────── */
.drawer-overlay.open { opacity:1;pointer-events:all; }
.drawer-overlay.open .drawer-panel { transform:translateX(0); }
.drawer-cta::before { content:'';position:absolute;inset:0;background:#0c1a2e;transform:translateX(101%);transition:transform .55s cubic-bezier(.4,0,.2,1);z-index:-1; }
.drawer-cta:hover::before { transform:translateX(0); }
.drawer-btn.active { background:var(--plate);color:var(--ink); }

/* ── Subscription verify overlay ────────────────────────────── */
#drawer-user-name { display:none;font-size:13px;font-weight:700;color:#5a7d0c;padding:10px 16px 6px;border-bottom:1px solid var(--hair);margin-bottom:4px; }
#sub-verify-overlay.open { display:flex; }

/* ── Button hover pseudo-states ─────────────────────────────── */
.btn-dark:hover::before { transform:translateX(0); }
.btn-outline:hover::before { transform:translateX(0); }
.cap-btn-primary:hover::before { transform: translateX(0); }

/* ── Doc pages (legal + release-notes) ─────────────────────── */
.doc-header { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 2px solid var(--border); }
.doc-meta { font-size: 13px; color: var(--text-3); margin-bottom: 8px; }
.doc-body a { color:#5a7d0c; text-decoration: underline; text-underline-offset: 2px; }
.doc-body p { font-size: 14px; color: var(--text-2); margin-bottom: 10px; line-height: 1.75; }
.doc-body p strong { color: var(--text); }
.doc-body ul { padding-left: 20px; margin-bottom: 10px; }
.doc-body ul li { font-size: 14px; color: var(--text-2); margin-bottom: 6px; line-height: 1.7; }
.doc-body .sub-heading { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; margin-top: 14px; }