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

/* ── Global 90% scale — CSS equivalent of browser zoom ─────────── */
html { zoom: 0.9; }
@supports not (zoom: 0.9) {
  html { transform: scale(0.9); transform-origin: top left; width: 111.11%; }
}

/* ── 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 pill: 1200px centred on desktop, edge-to-edge on mobile ─── */
@media (min-width: 921px) {
  .md-header {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 90%;
    max-width: calc(100vw - 24px);
    top: 10px;
    border-radius: 16px;
  }
}
/* On mobile, partials.css handles the header positioning (left/right insets).
   We keep the radius + top tidy here so it visually matches across pages. */
@media (max-width: 920px) {
  .md-header {
    left: 12px;
    right: 12px;
    top: 10px;
    border-radius: 14px;
    transform: none;
    width: auto;
    max-width: none;
  }
}
@media (max-width: 480px) {
  .md-header {
    left: 8px;
    right: 8px;
    top: 8px;
    border-radius: 12px;
  }
}



/* ================================================================
   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: #2a50f3;
  --accent-deep: #1a3fd9;
  --accent-tint: #e6e9f7;
  --accent-dim: rgba(42,80,243,.10);
  --accent-bd: rgba(42,80,243,.28);
  --brand: #2a50f3;
  --brand-dark: #1a3fd9;

  /* 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; }
.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:var(--accent);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: var(--brand); 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; }