/* Intelligence Solved — shared site stylesheet
   Destination: assets/css/is-design-system.css in mgubuan/intelligence-solved-vercel
   Link from every page, first, before any inline <style> block:
     <link rel="stylesheet" href="/assets/css/is-design-system.css">
   Self-contained on purpose: one file to drop in, no @import chain.
   Generated from the Intelligence Solved design system. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Reenie+Beanie&display=swap');

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --ink: #0F0E0C;
  --ink-elevated: #1B1916;
  --ink-deeper: #08070A;
  --line: #292622;
  --line-strong: #3A3630;
  --cream: #F4F1EA;
  --cream-soft: #E8E3D7;
  --text-mid: #C9C2B6;
  --text-low: #8B847A;
  --ink-on-cream-low: #5E5749;
  --accent: #FF5631;
  --accent-press: #E8431F;
  --accent-quiet: rgba(255, 86, 49, 0.12);
  --trust: #3B5BFF;
  --warm: #E8D49A;

  --font-brand: 'Archivo', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-hand: 'Reenie Beanie', cursive;

  /* Type scale. Hero is the only oversized step; everything else reads at
     document scale so a page of headings does not shout. */
  --size-display: clamp(2.75rem, 5.2vw, 4.5rem);   /* 44 → 72px, hero only */
  --size-h1: clamp(2.125rem, 3.6vw, 3.25rem);      /* 34 → 52px */
  --size-h2: clamp(1.625rem, 2.6vw, 2.25rem);      /* 26 → 36px */
  --size-h3: clamp(1.1875rem, 1.7vw, 1.5rem);      /* 19 → 24px */
  --size-h4: 1.0625rem;
  --size-body-lg: 1.1875rem;
  --size-body-md: 1.0625rem;
  --size-body-sm: 0.95rem;
  --size-ui-label: 0.6875rem;

  --weight-brand: 800;
  --weight-display: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  --leading-display: 1.02;
  --leading-h1: 1.06;
  --leading-h2: 1.16;
  --leading-h3: 1.3;
  --leading-body: 1.6;

  --tracking-display: -0.05em;
  --tracking-h1: -0.035em;
  --tracking-h2: -0.025em;
  --tracking-h3: -0.015em;
  --tracking-label: 0.14em;

  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 56px;
  --space-section: 80px;
  --space-section-lg: 120px;
  --shell-max: 1180px;
  --shell-gutter: 20px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 320ms;
}

/* ── Base elements ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: var(--font-sans); font-size: var(--size-body-md); line-height: var(--leading-body); text-wrap: pretty; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--font-brand); color: var(--cream); margin: 0; text-wrap: balance; }
h1 { max-width: 22ch; font-size: var(--size-h1); font-weight: var(--weight-brand); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); }
h2 { font-size: var(--size-h2); font-weight: var(--weight-display); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--size-h3); font-weight: var(--weight-semibold); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); }
h4 { font-size: var(--size-h4); font-weight: var(--weight-semibold); line-height: var(--leading-h3); }

/* Hero type. One per page — the landing headline, nothing else. */
.hero h1, .display { max-width: 18ch; font-size: var(--size-display); font-weight: var(--weight-brand); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
/* Section headings sit a step below the hero, not level with it. */
.section-heading, .problem-heading, .cta-row h2, .decision-copy h2 { max-width: 24ch; font-size: var(--size-h2); font-weight: var(--weight-brand); letter-spacing: var(--tracking-h2); }

p { margin: 0; max-width: 68ch; }
small { font-size: var(--size-body-sm); }
strong { font-weight: var(--weight-semibold); color: inherit; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--cream); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
ul, ol { margin: 0; padding-left: 1.15em; }
li::marker { color: var(--accent); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ── Shared chrome ──────────────────────────────────────── */
.site-shell { width: min(var(--shell-max), calc(100% - 40px)); margin: 0 auto; }
.wordmark { color: var(--cream); font-family: var(--font-brand); font-weight: var(--weight-brand); letter-spacing: -.05em; text-decoration: none; white-space: nowrap; }
.period, .accent { color: var(--accent); }

.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav .wordmark { font-size: 18px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-link { color: var(--text-mid); font-size: var(--size-body-sm); text-decoration: none; }
.nav-link:hover { color: var(--cream); }

.eyebrow, .section-label, .card-index, .micro { font-family: var(--font-mono); font-size: var(--size-ui-label); line-height: 1.4; font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.eyebrow { color: var(--accent); margin-bottom: var(--space-md); }
.section-label { color: var(--text-low); margin-bottom: var(--space-md); }

.button { border: 0; border-radius: var(--radius-sm); padding: 14px 18px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font-weight: var(--weight-display); text-decoration: none; transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--accent); color: var(--cream); }
.button-primary:hover { background: var(--cream); color: var(--ink); }
.button-secondary { background: var(--ink-elevated); color: var(--cream); border: 1px solid var(--line); }
.button-secondary:hover { color: var(--cream); border-color: var(--line-strong); }
.button-small { min-height: 40px; padding: 10px 14px; font-size: var(--size-body-sm); }
.button-wide { width: 100%; }
.arrow { font-size: 19px; line-height: 1; }

.section { padding: var(--space-section) 0; border-bottom: 1px solid var(--line); }
.section-intro { max-width: 68ch; color: var(--text-mid); font-size: var(--size-body-lg); line-height: 1.65; margin: var(--space-md) 0 44px; }
.hero-copy { max-width: 68ch; margin: 26px 0 0; color: var(--text-mid); font-size: var(--size-body-lg); line-height: 1.6; }

/* Cream bands invert text colors. */
.problem-section, .decision-section, .how-block, .modal { background: var(--cream); color: var(--ink); }
.problem-section h1, .problem-section h2, .problem-section h3,
.decision-section h1, .decision-section h2, .decision-section h3,
.how-block h3, .modal h2 { color: var(--ink); }
.problem-section .section-label, .decision-section .section-label { color: var(--ink-on-cream-low); }
.problem-copy, .decision-copy p, .how-block p, .how-block li { color: #514c45; font-size: var(--size-body-md); line-height: 1.65; }

.footer { padding: 34px 0; border-top: 1px solid var(--line); color: var(--text-low); }
.footer-row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--size-ui-label); letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 660px) {
  .site-shell { width: min(100% - 28px, var(--shell-max)); }
  .section { padding: 64px 0; }
  h1 { max-width: none; }
  .hero h1, .display { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}