@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --blue: #1A06FF;
  --bg-light: #FAFAFA;
  --bg-dark: #0A0A0A;
  --card-light: #FFFFFF;
  --card-dark: #111111;
  --text-light: #FAFAFA;
  --text-dark: #0A0A0A;
  --text-muted-dark: rgba(10, 10, 10, 0.7);
  --text-muted-light: rgba(250, 250, 250, 0.7);
  --border-light: rgba(0, 0, 0, 0.06);
  --border-dark: rgba(255, 255, 255, 0.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.06);
  
  --radius-card: 20px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Semantic color vars — always mean what they say */
  --white: #FFFFFF;
  --black: #0A0A0A;
  --black-card: #111111;
  --gray-100: #FAFAFA;
  --gray-200: #E5E5E7;
  --gray-300: rgba(255, 255, 255, 0.7);
  --gray-400: rgba(255, 255, 255, 0.6);
  --gray-500: rgba(255, 255, 255, 0.45);
}

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

/* ======================== CONTEXTUAL COLOR VARIABLE OVERRIDES ======================== */
/* On light-background pages, remap gray-300/400/500 and --white to dark-readable equivalents.
   These vars are white-based (designed for dark backgrounds), but inline styles use them
   on elements that may render on light backgrounds. */

.page--white,
.page--blue {
  --gray-300: rgba(10, 10, 10, 0.7);
  --gray-400: rgba(10, 10, 10, 0.6);
  --gray-500: rgba(10, 10, 10, 0.45);
  --white: #0A0A0A;
}

/* Restore original light-on-dark values for dark containers nested inside light pages */
.page--white .card--dark,
.page--white .card--blue,
.page--blue .card--dark,
.page--blue .card--blue,
.page--white .flow-step--dark,
.page--blue .flow-step--dark,
.page--white .callout--dark,
.page--blue .callout--dark {
  --gray-300: rgba(255, 255, 255, 0.7);
  --gray-400: rgba(255, 255, 255, 0.6);
  --gray-500: rgba(255, 255, 255, 0.45);
  --white: #FFFFFF;
}

/* Restore for flow-steps with inline dark bg (background:var(--blue) or var(--black)) */
.page--white .flow-step[style*="background:var(--blue)"],
.page--white .flow-step[style*="background:var(--black)"],
.page--blue .flow-step[style*="background:var(--blue)"],
.page--blue .flow-step[style*="background:var(--black)"] {
  --gray-300: rgba(255, 255, 255, 0.7);
  --gray-400: rgba(255, 255, 255, 0.6);
  --gray-500: rgba(255, 255, 255, 0.45);
  --white: #FFFFFF;
}

/* Ensure card--white and light cards inside any page keep dark text vars */
.card--white,
.card--outline,
.card--outline-blue {
  --gray-300: rgba(10, 10, 10, 0.7);
  --gray-400: rgba(10, 10, 10, 0.6);
  --gray-500: rgba(10, 10, 10, 0.45);
  --white: #0A0A0A;
}

/* On dark pages, card--white still needs dark text vars */
.page--dark .card--white,
.page--dark .card--outline,
.page--dark .card--outline-blue {
  --gray-300: rgba(10, 10, 10, 0.7);
  --gray-400: rgba(10, 10, 10, 0.6);
  --gray-500: rgba(10, 10, 10, 0.45);
  --white: #0A0A0A;
}

/* Browser card content on light pages: white bg needs dark text vars */
.page--white .card--browser .browser-content,
.page--blue .card--browser .browser-content {
  --gray-300: rgba(10, 10, 10, 0.7);
  --gray-400: rgba(10, 10, 10, 0.6);
  --gray-500: rgba(10, 10, 10, 0.45);
  --white: #0A0A0A;
}

/* Browser bar filename text on light pages needs to be dark-readable */
.page--white .card--browser .browser-bar,
.page--blue .card--browser .browser-bar {
  --gray-400: rgba(10, 10, 10, 0.5);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--gray-100);
  color: var(--text-dark);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ======================== PAGE SECTIONS ======================== */
.page {
  width: 100%;
  min-height: 100vh;
  padding: 100px 96px 80px 96px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  background: var(--bg-light);
  color: var(--text-dark);
}

.page > * {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

.page--dark {
  background: var(--bg-dark) !important;
  color: var(--text-light) !important;
}

/* page--blue now behaves as a light page with dark text */
.page--blue {
  background: var(--bg-light) !important;
  color: var(--text-dark) !important;
}

/* ======================== HEADER / TOPBAR ======================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 60px;
  flex-wrap: wrap;
}

.topbar .pill:not(:first-child) {
  /* display: none !important; */
}

/* ======================== BADGES / PILLS ======================== */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55) !important;
  white-space: nowrap;
}

.page--dark .pill {
  color: rgba(250, 250, 250, 0.55) !important;
}

.pill--blue {
  color: var(--blue) !important;
  font-weight: 600 !important;
}

.pill--white {
  color: rgba(250, 250, 250, 0.75) !important;
}

.pill--dark {
  color: rgba(10, 10, 10, 0.7) !important;
}

.tag-row .pill {
  margin-right: 12px;
  color: rgba(10, 10, 10, 0.55) !important;
}

.page--dark .tag-row .pill {
  color: rgba(250, 250, 250, 0.55) !important;
}

.cover-badge-row .pill:not(:first-child) {
  display: none !important;
}

/* ======================== TYPOGRAPHY ======================== */
.display-xl, .display-lg, .display-md, .section-title {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: inherit;
}

.display-xl { font-size: 64px; }
.display-lg { font-size: 48px; }
.display-md { font-size: 32px; }

.heading-lg {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: inherit;
}

.heading-md {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: inherit;
}

.heading-sm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: inherit;
}

.body-lg, .cover-subtitle {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-muted-dark);
}

.body-md {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-muted-dark);
}

.body-sm {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted-dark);
}

/* Dark scope text color overrides */
.page--dark .body-lg, .page--dark .cover-subtitle,
.page--dark .body-md, .page--dark .body-sm, .page--dark .section-desc,
.card--dark .body-lg, .card--dark .body-md, .card--dark .body-sm,
.card--blue .body-lg, .card--blue .body-md, .card--blue .body-sm,
.flow-step--dark .body-lg, .flow-step--dark .body-md, .flow-step--dark .body-sm,
.callout--dark .body-lg, .callout--dark .body-md, .callout--dark .body-sm {
  color: var(--text-muted-light) !important;
}

/* Ensure body text inside light/white elements on dark pages remains dark and legible */
.page--dark .flow-step--blue .body-lg,
.page--dark .flow-step--blue .body-md,
.page--dark .flow-step--blue .body-sm,
.page--dark .flow-step--white .body-lg,
.page--dark .flow-step--white .body-md,
.page--dark .flow-step--white .body-sm,
.page--dark .card--white .body-lg,
.page--dark .card--white .body-md,
.page--dark .card--white .body-sm {
  color: var(--text-muted-dark) !important;
}


.mono {
  font-family: 'JetBrains Mono', monospace;
}

.text-blue { color: var(--blue) !important; }
.text-white { color: #FAFAFA !important; }
.text-black { color: #0A0A0A !important; }
.text-gray { color: rgba(10, 10, 10, 0.5) !important; }
.page--dark .text-gray { color: rgba(250, 250, 250, 0.5) !important; }

.label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue) !important;
}

/* ======================== CARDS ======================== */
.card {
  background: var(--card-light) !important;
  border-radius: var(--radius-card);
  padding: 32px !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card);
  color: var(--text-dark) !important;
}

/* Force all text inside base .card to be dark */
.card .body-md, .card .body-sm, .card .body-lg,
.card .heading-sm, .card .heading-md, .card .heading-lg {
  color: var(--text-muted-dark);
}

.card li { color: var(--text-muted-dark) !important; }

/* ---- Dark Card ---- */
.card--dark {
  background: var(--card-dark) !important;
  color: #FAFAFA !important;
  border: 1px solid var(--border-dark) !important;
  box-shadow: none !important;
}

.card--dark, .card--dark * {
  color: rgba(250, 250, 250, 0.9);
}

.card--dark .body-md, .card--dark .body-sm, .card--dark .body-lg,
.card--dark .heading-sm, .card--dark .heading-md {
  color: rgba(250, 250, 250, 0.85) !important;
}

.card--dark li { color: rgba(250, 250, 250, 0.85) !important; }

/* ---- Blue Card (dark bg with blue accent) ---- */
.card--blue {
  background: var(--card-dark) !important;
  color: rgba(250, 250, 250, 0.9) !important;
  border: 1px solid rgba(26, 6, 255, 0.3) !important;
  border-left: 4px solid var(--blue) !important;
  box-shadow: none !important;
}

.card--blue, .card--blue * {
  color: rgba(250, 250, 250, 0.9);
}

.card--blue .body-md, .card--blue .body-sm {
  color: rgba(250, 250, 250, 0.8) !important;
}

.card--blue li { color: rgba(250, 250, 250, 0.8) !important; }

/* ---- Blue Subtle Card ---- */
.card--blue-subtle {
  background: rgba(26, 6, 255, 0.06) !important;
  border: 1px solid rgba(26, 6, 255, 0.12) !important;
  color: var(--text-dark) !important;
  box-shadow: none !important;
}

.card--blue-subtle .body-md, .card--blue-subtle .body-sm, .card--blue-subtle .heading-sm {
  color: var(--text-muted-dark) !important;
}

.card--blue-subtle li { color: var(--text-muted-dark) !important; }

/* On dark pages, blue-subtle gets a dark variant */
.page--dark .card--blue-subtle {
  background: rgba(26, 6, 255, 0.15) !important;
  border: 1px solid rgba(26, 6, 255, 0.3) !important;
  color: #FAFAFA !important;
}

.page--dark .card--blue-subtle .body-md,
.page--dark .card--blue-subtle .body-sm,
.page--dark .card--blue-subtle .heading-sm,
.page--dark .card--blue-subtle .heading-md {
  color: rgba(250, 250, 250, 0.85) !important;
}

.page--dark .card--blue-subtle li { color: rgba(250, 250, 250, 0.85) !important; }

/* ---- White Card ---- */
.card--white {
  background: var(--card-light) !important;
  color: var(--text-dark) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card) !important;
}

.card--white, .card--white * {
  color: var(--text-dark);
}

.card--white .body-md, .card--white .body-sm, .card--white .heading-sm {
  color: var(--text-muted-dark) !important;
}

.card--white li { color: var(--text-muted-dark) !important; }

/* ---- Outline Card ---- */
.card--outline {
  background: transparent !important;
  border: 1px solid rgba(10, 10, 10, 0.15) !important;
  box-shadow: none !important;
  color: var(--text-dark) !important;
}

.card--outline li { color: var(--text-muted-dark) !important; }

/* ---- Outline Blue Card ---- */
.card--outline-blue {
  background: transparent !important;
  border: 1px solid rgba(26, 6, 255, 0.2) !important;
  border-left: 4px solid var(--blue) !important;
  box-shadow: none !important;
  color: var(--text-dark) !important;
}

.card--outline-blue li { color: var(--text-muted-dark) !important; }

/* ---- Glass Card ---- */
/* Default glass on light page */
.card--glass {
  background: rgba(0, 0, 0, 0.03) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  color: var(--text-dark) !important;
  box-shadow: none !important;
}

.card--glass .body-md, .card--glass .body-sm, .card--glass .heading-sm, .card--glass .heading-md {
  color: var(--text-muted-dark) !important;
}

.card--glass li { color: var(--text-muted-dark) !important; }

/* Glass on dark pages */
.page--dark .card--glass {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(250, 250, 250, 0.9) !important;
}

.page--dark .card--glass .body-md, .page--dark .card--glass .body-sm,
.page--dark .card--glass .heading-sm, .page--dark .card--glass .heading-md {
  color: rgba(250, 250, 250, 0.8) !important;
}

.page--dark .card--glass li { color: rgba(250, 250, 250, 0.8) !important; }

/* ---- Browser Card ---- */
.card--browser {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card);
  background: var(--card-light);
}

.card--browser .browser-bar {
  background: #F5F5F5 !important;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.card--browser .browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E0E0E0 !important;
}

.card--browser .browser-content {
  padding: 32px !important;
  background: var(--card-light) !important;
  color: var(--text-dark) !important;
}

.card--browser .browser-content .body-md,
.card--browser .browser-content .body-sm,
.card--browser .browser-content .heading-sm {
  color: var(--text-muted-dark) !important;
}

.card--browser .browser-content li { color: var(--text-muted-dark) !important; }

/* Browser card on dark pages */
.page--dark .card--browser {
  border-color: var(--border-dark) !important;
}

.page--dark .card--browser .browser-bar {
  background: #1A1A1A !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}

.page--dark .card--browser .browser-content {
  background: #1A1A1A !important;
  color: rgba(250, 250, 250, 0.9) !important;
}

.page--dark .card--browser .browser-content .body-md,
.page--dark .card--browser .browser-content .body-sm,
.page--dark .card--browser .browser-content .heading-sm {
  color: rgba(250, 250, 250, 0.8) !important;
}

.page--dark .card--browser .browser-content li { color: rgba(250, 250, 250, 0.8) !important; }

/* ======================== GRIDS ======================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }

/* ======================== FLOWCHART ======================== */
.flow {
  display: flex;
  align-items: center;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 28px !important;
  border-radius: 16px !important;
  min-width: 160px;
  flex: 1;
  background: var(--card-light) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-dark) !important;
}

.flow-step--blue {
  background: var(--card-light) !important;
  border: 1px solid rgba(26, 6, 255, 0.2) !important;
  border-top: 3px solid var(--blue) !important;
  color: var(--text-dark) !important;
}

.flow-step--dark {
  background: var(--card-dark) !important;
  border: 1px solid var(--border-dark) !important;
  color: rgba(250, 250, 250, 0.9) !important;
  box-shadow: none !important;
}

.flow-step--dark .heading-lg, .flow-step--dark .heading-md,
.flow-step--dark .body-md, .flow-step--dark .body-sm {
  color: rgba(250, 250, 250, 0.85) !important;
}

.flow-step--white {
  background: var(--card-light) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--text-dark) !important;
}

.flow-arrow {
  font-size: 20px !important;
  color: rgba(10, 10, 10, 0.2) !important;
  font-weight: 300 !important;
  padding: 0 12px;
}

.page--dark .flow-arrow {
  color: rgba(250, 250, 250, 0.2) !important;
}

/* Vertical flow */
.flow-v {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.flow-v .flow-step {
  flex: none !important;
  width: 100%;
}

.flow-v .flow-arrow {
  padding: 8px 0;
  transform: rotate(90deg);
}

/* ======================== PROCESS CIRCLES ======================== */
.process-circle {
  display: inline-block;
  width: auto !important;
  height: auto !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: rgba(10, 10, 10, 0.4) !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
}

.page--dark .process-circle, .card--dark .process-circle, .card--blue .process-circle {
  color: rgba(250, 250, 250, 0.4) !important;
}

.process-circle--blue {
  color: var(--blue) !important;
  font-weight: 500 !important;
}

/* ======================== STAT CALLOUTS ======================== */
.stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 36px;
  font-weight: 500;
  color: var(--blue) !important;
  line-height: 1;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 11px;
  color: rgba(10, 10, 10, 0.5);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ======================== CALLOUT BOXES ======================== */
.callout {
  padding: 24px 28px !important;
  border-radius: 16px !important;
  margin: 32px 0 !important;
  background: var(--card-light) !important;
  border: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-card);
  color: var(--text-dark) !important;
}

.callout--blue {
  border-left: 4px solid var(--blue) !important;
}

.callout--dark {
  background: var(--card-dark) !important;
  border: 1px solid var(--border-dark) !important;
  border-left: 4px solid var(--blue) !important;
  color: rgba(250, 250, 250, 0.9) !important;
  box-shadow: none !important;
}

.callout--warning {
  background: #FFFBF0 !important;
  border: 1px solid rgba(255, 189, 46, 0.2) !important;
  border-left: 4px solid #FFBD2E !important;
}

/* ======================== LIST STYLES ======================== */

/* Default: dark text for lists on light backgrounds */
.check-list li, .bullet-list li, .numbered-list li {
  color: var(--text-muted-dark) !important;
}

/* Dark page lists: light text */
.page--dark > .check-list li,
.page--dark > .bullet-list li,
.page--dark > .numbered-list li,
.page--dark .check-list li,
.page--dark .bullet-list li,
.page--dark .numbered-list li {
  color: rgba(250, 250, 250, 0.8) !important;
}

/* But override back for white/light cards inside dark pages */
.page--dark .card--white li,
.page--dark .card--white .check-list li,
.page--dark .card--white .bullet-list li {
  color: var(--text-muted-dark) !important;
}

.check-list li {
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
  font-size: 13px;
  line-height: 1.6;
}

.check-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--blue) !important;
  font-weight: 500;
  font-size: 13px;
}

.bullet-list li {
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
  font-size: 13px;
  line-height: 1.6;
}

.bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50%;
  background: var(--blue) !important;
}

.numbered-list li {
  padding: 12px 0;
  padding-left: 36px;
  position: relative;
  font-size: 13px;
  line-height: 1.6;
  border-bottom: 1px solid var(--border-light) !important;
}

.page--dark .numbered-list li {
  border-bottom: 1px solid var(--border-dark) !important;
}

.numbered-list li::before {
  color: rgba(10, 10, 10, 0.4) !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 11px;
}

.page--dark .numbered-list li::before {
  color: rgba(250, 250, 250, 0.4) !important;
}

/* ======================== DIVIDERS ======================== */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-light) !important;
  margin: 32px 0 !important;
}

.page--dark .divider {
  background: var(--border-dark) !important;
}

/* ======================== COMPARISON (VS) ======================== */
.vs-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}

.vs-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(10, 10, 10, 0.3) !important;
  letter-spacing: 0.1em;
}

.page--dark .vs-badge {
  color: rgba(250, 250, 250, 0.3) !important;
}

/* ======================== FOOTER ======================== */
.page-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--border-light) !important;
  margin-top: auto;
}

.page--dark .page-footer {
  border-top: 1px solid var(--border-dark) !important;
}

.page-footer .footer-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.3) !important;
}

.page--dark .page-footer .footer-title {
  color: rgba(250, 250, 250, 0.3) !important;
}

.page-footer .footer-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: rgba(10, 10, 10, 0.4) !important;
}

.page--dark .page-footer .footer-number {
  color: rgba(250, 250, 250, 0.4) !important;
}

/* ======================== COVER PAGE ======================== */
.cover-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 240px);
}

.cover-subtitle {
  font-size: 15px;
  max-width: 520px;
  margin-top: 32px;
}

.cover-credit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(250, 250, 250, 0.4) !important;
  margin-top: 60px;
  letter-spacing: 0.05em;
}

.cover-badge-row {
  display: flex;
  gap: 16px;
  margin-top: 48px;
}

/* ======================== CONTENTS PAGE ======================== */
.toc-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08) !important;
  color: var(--text-dark) !important;
}

.toc-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--blue) !important;
  margin-right: 16px;
  min-width: 28px;
}

.toc-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dark) !important;
}

.toc-page {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(10, 10, 10, 0.4) !important;
  margin-left: 16px;
}

/* ======================== SECTION HEADER ======================== */
.section-header {
  margin-bottom: 48px;
}

.section-header .section-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 450;
  color: rgba(10, 10, 10, 0.4) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.page--dark .section-header .section-number {
  color: rgba(250, 250, 250, 0.4) !important;
}

.section-header .section-title {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section-header .section-desc {
  font-size: 14px;
  color: var(--text-muted-dark);
  margin-top: 16px;
  max-width: 600px;
  line-height: 1.7;
}

.page--dark .section-header .section-desc { 
  color: var(--text-muted-light) !important; 
}

/* ======================== ICON BADGES ======================== */
.icon-badge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  width: 24px !important;
  height: 24px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.icon-badge .icon-inline {
  width: 24px !important;
  height: 24px !important;
  margin-right: 0 !important;
}

/* ======================== STRONG QUOTE ======================== */
.strong-quote {
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  border-left: 3px solid var(--blue) !important;
  padding-left: 20px;
  margin: 32px 0 !important;
  line-height: 1.7;
  color: inherit !important;
}

/* ======================== TAG ROW ======================== */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 !important;
}

/* ======================== HELPER SPACING ======================== */
.mt-4 { margin-top: 4px !important; }
.mt-8 { margin-top: 16px !important; }
.mt-12 { margin-top: 24px !important; }
.mt-16 { margin-top: 32px !important; }
.mt-20 { margin-top: 40px !important; }
.mt-24 { margin-top: 48px !important; }
.mt-32 { margin-top: 64px !important; }
.mt-40 { margin-top: 80px !important; }
.mb-4 { margin-bottom: 4px !important; }
.mb-8 { margin-bottom: 16px !important; }
.mb-12 { margin-bottom: 24px !important; }
.mb-16 { margin-bottom: 32px !important; }
.mb-20 { margin-bottom: 40px !important; }
.mb-24 { margin-bottom: 48px !important; }
.gap-8 { gap: 16px !important; }
.gap-12 { gap: 24px !important; }
.gap-16 { gap: 32px !important; }
.gap-20 { gap: 40px !important; }

/* ======================== PREMIUM SVG ICONS ======================== */
.icon-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 6px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent !important;
  overflow: hidden;
  flex-shrink: 0;
}

.heading-sm .icon-inline, .pill .icon-inline {
  width: 12px;
  height: 12px;
  vertical-align: -1px;
}

/* Light bg icons (stroke #0A0A0A) */
.icon--child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E"); }
.icon--bolt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
.icon--wall { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='12' y1='9' x2='12' y2='15'/%3E%3C/svg%3E"); }
.icon--dna { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5C5 11.5 6 13 8 13s3.5-1.5 4-2.5 1-2.5 3-2.5 3 1.5 3.5 2.5'/%3E%3Cpath d='M4.5 13.5C5 12.5 6 11 8 11s3.5 1.5 4 2.5 1 2.5 3 2.5 3-1.5 3.5-2.5'/%3E%3C/svg%3E"); }
.icon--mic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E"); }
.icon--eye { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon--edit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); }
.icon--cross { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5F57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); }
.icon--check { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A06FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.icon--warning { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBD2E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); }
.icon--list { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); }
.icon--idea { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A06FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A5 5 0 0 0 8 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5'/%3E%3Cline x1='9' y1='18' x2='15' y2='18'/%3E%3Cline x1='10' y1='22' x2='14' y2='22'/%3E%3C/svg%3E"); }
.icon--tree { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 22h20L12 2z'/%3E%3Cline x1='12' y1='11' x2='12' y2='22'/%3E%3C/svg%3E"); }
.icon--chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18.7 8l-5.1 5.2-2.8-2.7L7 14.3'/%3E%3C/svg%3E"); }

/* Dark bg icons (stroke #FAFAFA) */
.page--dark .icon--child, .card--dark .icon--child, .flow-step--dark .icon--child, .card--blue .icon--child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E"); }
.page--dark .icon--bolt, .card--dark .icon--bolt, .flow-step--dark .icon--bolt, .card--blue .icon--bolt { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E"); }
.page--dark .icon--wall, .card--dark .icon--wall, .flow-step--dark .icon--wall, .card--blue .icon--wall { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='12' y1='9' x2='12' y2='15'/%3E%3C/svg%3E"); }
.page--dark .icon--dna, .card--dark .icon--dna, .flow-step--dark .icon--dna, .card--blue .icon--dna { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.5C5 11.5 6 13 8 13s3.5-1.5 4-2.5 1-2.5 3-2.5 3 1.5 3.5 2.5'/%3E%3Cpath d='M4.5 13.5C5 12.5 6 11 8 11s3.5 1.5 4 2.5 1 2.5 3 2.5 3-1.5 3.5-2.5'/%3E%3C/svg%3E"); }
.page--dark .icon--mic, .card--dark .icon--mic, .flow-step--dark .icon--mic, .card--blue .icon--mic { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E"); }
.page--dark .icon--eye, .card--dark .icon--eye, .flow-step--dark .icon--eye, .card--blue .icon--eye { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.page--dark .icon--edit, .card--dark .icon--edit, .flow-step--dark .icon--edit, .card--blue .icon--edit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E"); }
.page--dark .icon--list, .card--dark .icon--list, .flow-step--dark .icon--list, .card--blue .icon--list { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E"); }
.page--dark .icon--tree, .card--dark .icon--tree, .flow-step--dark .icon--tree, .card--blue .icon--tree { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 22h20L12 2z'/%3E%3Cline x1='12' y1='11' x2='12' y2='22'/%3E%3C/svg%3E"); }
.page--dark .icon--chart, .card--dark .icon--chart, .flow-step--dark .icon--chart, .card--blue .icon--chart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAFA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18.7 8l-5.1 5.2-2.8-2.7L7 14.3'/%3E%3C/svg%3E"); }

/* ======================== PAGE--BLUE INLINE STYLE OVERRIDES ======================== */
/* page--blue is now light. Inline styles use var(--white) expecting it to be #FFF.
   Override those specific cases so text reads dark on light bg. */
.page--blue .section-header .section-number { color: rgba(10, 10, 10, 0.5) !important; opacity: 1 !important; }
.page--blue .section-header .section-title { color: var(--text-dark) !important; }
.page--blue .section-header .section-desc { color: var(--text-muted-dark) !important; }
.page--blue .page-footer { border-top-color: var(--border-light) !important; }
.page--blue .page-footer .footer-title { color: rgba(10, 10, 10, 0.3) !important; }
.page--blue .page-footer .footer-number { color: rgba(10, 10, 10, 0.4) !important; }
.page--blue .vs-badge { color: rgba(10, 10, 10, 0.3) !important; }

/* Glass cards on page--blue (light) are already handled */

/* ======================== RESPONSIVE ======================== */
@media (max-width: 768px) {
  .page { 
    padding: 60px 24px; 
    gap: 32px;
  }
  .grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { 
    grid-template-columns: 1fr; 
    gap: 24px;
  }
  .flow { 
    flex-direction: column; 
    gap: 16px;
  }
  .flow-arrow { 
    transform: rotate(90deg); 
    padding: 8px 0;
  }
  .vs-container { 
    grid-template-columns: 1fr; 
    gap: 16px;
  }
}