/* ============================================================
   Stockpile — marketing site shell (adaptive light / dark)
   Matches the FINAL homepage: warm-paper / dark surfaces via
   prefers-color-scheme, glass nav pill, floating soft-shadow
   cards, gradient primary button. Gabarito for display.
   Green (#30d158) stays scan-confirm only.
   ============================================================ */

/* ------------------------------------------------------------
   SCALE SYSTEM — one type & spacing ladder for the whole site.
   Spacing: strict 4px grid.  Type: 12·16·20·24·28·32 (also 4px grid)
   + fluid Gabarito display sizes with 4px-aligned bounds.
   Radius: 8·12·16·20·22·28·pill.
   Every page (index + sub-pages) references these tokens; nothing
   sets a raw font-size / structural margin off this ladder.
   ------------------------------------------------------------ */
:root {
  /* spacing — 4px grid */
  --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-14: 56px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px;

  /* type ladder — fixed steps, all on the 4px grid */
  --fs-eyebrow: 12px;   /* mono kickers, pills, micro-labels   */
  --fs-caption: 12px;   /* meta, footnotes, footer, captions   */
  --fs-ui: 16px;        /* nav, buttons, list rows, quote body */
  --fs-body: 16px;      /* reading body copy                   */
  --fs-lead: 20px;      /* intros / closing line               */
  --fs-title: 24px;     /* wordmark, small sub-headings         */
  --fs-title-lg: 28px;  /* large sub-headings                  */
  --fs-stat: 32px;      /* Gabarito numerals / decorative marks */

  /* display steps (Gabarito, fluid) — bounds are 4px-aligned */
  --fd-hero: clamp(40px, 5.2vw, 64px);
  --fd-section: clamp(28px, 3.6vw, 40px);
  --fd-closing: clamp(36px, 5vw, 52px);

  /* line-heights */
  --lh-tight: 1.04;   --lh-snug: 1.12;   --lh-heading: 1.2;
  --lh-ui: 1.5;       --lh-body: 1.55;

  /* radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px;
  --r-card: 20px; --r-xl: 28px; --r-pill: 999px;
}

:root {
  --brand: #5e5ce6;
  --brand-pressed: #4341c9;
  --brand-dark: #7d7bff;
  --scan: #30d158;                 /* reserved: scan-confirm only */
  --radius: var(--r-card);
  --maxw: 1040px;
  --primary-bg: linear-gradient(135deg, #8583ff, #5e5ce6);
  --primary-shadow: 0 10px 26px rgba(94,92,230,.5), inset 0 1px 0 rgba(255,255,255,.4);

  /* light ("breaklight") */
  --bg: #f1f0fa;
  --glow: radial-gradient(circle at 12% -6%, rgba(125,123,255,.22), transparent 58%),
          radial-gradient(circle at 96% 0%, rgba(94,92,230,.14), transparent 44%);
  --ink: #0f1014;
  --sub: rgba(60,60,67,.62);
  --page-text: #3a3a40;
  --card: #ffffff;
  --card-shadow: 0 2px 10px rgba(16,17,20,.06), 0 14px 36px rgba(94,92,230,.10);
  --card-border: 1px solid rgba(0,0,0,.04);
  --hair: rgba(0,0,0,.09);
  --nav-bg: rgba(255,255,255,.6);
  --nav-border: rgba(255,255,255,.7);
  --nav-inset: rgba(255,255,255,.8);
  --nav-link: rgba(60,60,67,.7);
  --code-bg: #ececf1;
  --code-ink: #31309a;
  --ghost-bg: #ffffff;
  --ghost-color: #0f1014;
  --ghost-border: 1px solid rgba(0,0,0,.09);
  --ghost-shadow: 0 1px 3px rgba(16,17,20,.05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0c11;
    --glow: radial-gradient(circle at 15% -6%, rgba(125,123,255,.26), transparent 56%),
            radial-gradient(circle at 94% 2%, rgba(94,92,230,.2), transparent 46%);
    --ink: #f5f5f7;
    --sub: rgba(235,235,245,.62);
    --page-text: rgba(235,235,245,.78);
    --card: rgba(28,29,36,.62);
    --card-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
    --card-border: 1px solid rgba(255,255,255,.1);
    --hair: rgba(255,255,255,.1);
    --nav-bg: rgba(28,29,36,.55);
    --nav-border: rgba(255,255,255,.12);
    --nav-inset: rgba(255,255,255,.14);
    --nav-link: rgba(235,235,245,.75);
    --code-bg: rgba(255,255,255,.1);
    --code-ink: #c9c8ff;
    --ghost-bg: rgba(255,255,255,.06);
    --ghost-color: #f5f5f7;
    --ghost-border: 1px solid rgba(255,255,255,.16);
    --ghost-shadow: none;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);
}

.display {
  font-family: "Gabarito", -apple-system, sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: var(--lh-snug);
}

a { color: inherit; }

/* ---------- header ---------- */
.site-header {
  position: relative;
  background: transparent;
  border: 0;
}
.site-header .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
}
.wordmark {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: "Gabarito", sans-serif;
  font-weight: 800; font-size: var(--fs-title); text-decoration: none;
  letter-spacing: -0.015em; color: var(--ink);
}
.wordmark .tag {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--r-xs);
  background: var(--brand); flex: none;
  box-shadow: 0 4px 12px rgba(94,92,230,.4), inset 0 1px 0 rgba(255,255,255,.35);
}
.wordmark .tag svg { display: block; }

/* nav as a glass pill (matches homepage) */
.nav-links {
  display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--nav-border);
  box-shadow: inset 0 1px 0 var(--nav-inset);
}
.nav-links a {
  text-decoration: none; color: var(--nav-link);
  font-size: var(--fs-ui); font-weight: 600; white-space: nowrap;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a:last-child {
  color: #fff; font-weight: 700; padding: var(--sp-2) var(--sp-4);
  background: var(--brand); box-shadow: 0 4px 12px rgba(94,92,230,.35);
}
.nav-links a:last-child:hover { color: #fff; }

@media (max-width: 820px) {
  .nav-links a:not(:last-child) { display: none; } /* reachable via footer */
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-6); border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--fs-ui); text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-ink { background: var(--primary-bg); color: #fff; box-shadow: var(--primary-shadow); }
.btn-ghost {
  font-weight: 600; background: var(--ghost-bg); color: var(--ghost-color);
  border: var(--ghost-border); box-shadow: var(--ghost-shadow);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ---------- article / content pages ---------- */
.page {
  position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto; padding: var(--sp-14) var(--sp-6) var(--sp-24);
}
.page::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  pointer-events: none; background: var(--glow);
}
.page h1 {
  font-family: "Gabarito", sans-serif; font-weight: 800; letter-spacing: -0.025em;
  line-height: var(--lh-snug); font-size: var(--fd-section); margin-bottom: var(--sp-2);
}
.page .updated { color: var(--sub); font-size: var(--fs-caption); margin-bottom: var(--sp-10); }
.page h2 {
  font-family: "Gabarito", sans-serif; font-weight: 700; line-height: var(--lh-heading);
  font-size: var(--fs-title); margin: var(--sp-10) 0 var(--sp-3); letter-spacing: -0.015em; color: var(--ink);
}
.page h3 { font-size: var(--fs-lead); font-weight: 700; line-height: var(--lh-heading); margin: var(--sp-6) 0 var(--sp-2); color: var(--ink); }
.page p, .page li { color: var(--page-text); margin-bottom: var(--sp-3); }
.page strong { color: var(--ink); }
.page ul { padding-left: var(--sp-6); }
.page a:not(.btn) {
  color: var(--brand); text-decoration: none;
  font-weight: 600;
}
.page a:not(.btn):hover { text-decoration: underline; }
.page .card {
  background: var(--card); border: var(--card-border);
  border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: var(--sp-6); margin: var(--sp-6) 0;
}
.page .card p:last-child { margin-bottom: 0; }
.page code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--code-bg); color: var(--code-ink);
  padding: 2px 6px; border-radius: var(--r-xs); font-size: var(--fs-caption);
}
.page .btn { margin-top: var(--sp-2); }

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--hair);
  padding: var(--sp-10) var(--sp-6) var(--sp-14); color: var(--sub); font-size: var(--fs-caption);
}
.site-footer .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); justify-content: space-between;
}
.site-footer a { color: var(--sub); text-decoration: none; display: inline-block; padding: 6px 0; }
.site-footer a:hover { color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

/* ---------- focus & motion ---------- */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}