/* ==========================================================================
   AutoScientia — design system
   Warm paper canvas, ink-well navy workhorse, coral/mint punctuation.
   Derived from the existing Tracky style reference (tokens unchanged).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colors */
  --color-inkwell-navy: #151b31;
  --color-coral-emphasis: #ff5858;
  --color-mint-pulse: #86e0c1;
  --color-butter-yellow: #fedf89;
  --color-graphite: #333333;
  --color-slate: #6d6f75;
  --color-ash-canvas: #f2f2f2;
  --color-paper-white: #ffffff;
  --color-pure-ink: #000000;
  --color-warm-stone: #e8e7e5;
  --color-blue-soft: #bcd7ff;

  /* Typography */
  --font-grifter: 'Bowlby One', 'GRIFTER', ui-sans-serif, system-ui, sans-serif;
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  /* Type scale */
  --text-caption: 12px;
  --leading-caption: 1.5;
  --tracking-caption: -0.12px;
  --text-body-sm: 14px;
  --leading-body-sm: 1.55;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.55;
  --tracking-body: -0.16px;
  --text-body-lg: 18px;
  --leading-body-lg: 1.5;
  --tracking-body-lg: -0.18px;
  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.2px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.3;
  --tracking-heading-sm: -0.24px;
  --text-heading: 36px;
  --leading-heading: 1.2;
  --tracking-heading: -0.36px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.16;
  --tracking-heading-lg: 1.44px;
  --text-display: 64px;
  --leading-display: 1.1;
  --tracking-display: 1.92px;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-100: 100px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 20px;

  /* Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-cards: 16px;
  --radius-badges: 8px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;
  --radius-featurecards: 24px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
  --shadow-sm-2: rgba(138, 133, 125, 0.2) 0px 1px 4px 0px;
  --shadow-lift: rgba(138, 133, 125, 0.28) 0px 16px 32px -12px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {  scroll-behavior: smooth;
  /* keeps in-page anchor targets clear of the sticky header */
  scroll-padding-top: 104px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-inter);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-inkwell-navy);
  background-color: var(--color-ash-canvas);
  /* faint paper dot-grid */
  background-image: radial-gradient(rgba(21, 27, 49, 0.05) 1px, transparent 1.1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--color-butter-yellow); color: var(--color-inkwell-navy); }

:focus-visible {
  outline: 2px solid var(--color-coral-emphasis);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-24);
}
.section { padding: var(--spacing-72) 0; }
.section--tight { padding: var(--spacing-40) 0; }
.section--flush { padding-top: 0; }
.section--gap { margin-top: var(--section-gap); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--spacing-16); }

.grid { display: grid; gap: var(--spacing-24); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--aside { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-48); align-items: center; }

/* ---------- Type helpers ---------- */
.grifter { font-family: var(--font-grifter); font-weight: 400; letter-spacing: 0.03em; }
.coral { color: var(--color-coral-emphasis); }
.muted { color: var(--color-slate); }
.hand { font-family: var(--font-hand); font-weight: 600; }

h1, h2, h3 { letter-spacing: var(--tracking-heading-sm); }
h1.grifter, h2.grifter { letter-spacing: 0.03em; line-height: 1.08; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-grifter);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-inkwell-navy);
  background: var(--color-paper-white);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-sm-2);
  margin-bottom: var(--spacing-16);
}
.eyebrow--mint { background: var(--color-mint-pulse); box-shadow: none; }
.eyebrow--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-mint-pulse);
  box-shadow: none;
}
.eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-coral-emphasis);
  flex: none;
}
.eyebrow--mint .dot { background: var(--color-inkwell-navy); }

.section-title {
  font-family: var(--font-grifter);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 36px);
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--color-inkwell-navy);
  max-width: 26ch;
}
.section-title--wide { max-width: none; }
.section-sub {
  margin-top: var(--spacing-16);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
  color: var(--color-slate);
  max-width: 62ch;
}
.lead { font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-slate); }
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); color: var(--color-slate); }
.mono-nums { font-variant-numeric: tabular-nums; }

.underline-squiggle { position: relative; display: inline-block; white-space: nowrap; }
.underline-squiggle svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.22em;
  width: 100%;
  height: 0.34em;
  overflow: visible;
}
.underline-squiggle path {
  stroke: var(--color-coral-emphasis);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
}
/* the draw-on animation only runs when JS is available to trigger it */
html.js .underline-squiggle path { stroke-dasharray: 300; stroke-dashoffset: 300; }
html.js .reveal.is-visible .underline-squiggle path,
html.js .underline-squiggle.is-visible path { animation: draw 1.2s ease-out 0.15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- Banner ---------- */
.banner {
  position: relative;
  background: var(--color-butter-yellow);
  padding: 10px 56px;
  text-align: center;
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-inkwell-navy);
  z-index: 60;
}
.banner a { color: var(--color-coral-emphasis); font-weight: 600; text-decoration: none; }
.banner a:hover { text-decoration: underline; }
.banner-close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  opacity: 0.65;
  padding: 4px 8px;
}
.banner-close:hover { opacity: 1; }
.banner.is-hidden { display: none; }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 242, 242, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--color-warm-stone); box-shadow: 0 1px 0 rgba(21, 27, 49, 0.04); }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  gap: var(--spacing-24);
  position: relative;
}
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-inkwell-navy);
  display: grid;
  place-items: center;
  flex: none;
}
.logo-word { font-weight: 600; font-size: 19px; letter-spacing: -0.24px; }

.nav-menu { display: flex; align-items: center; gap: var(--spacing-24); }
/* Nav links. The CTA is an anchor too, so it is excluded here: a class+type
   selector outranks .btn--primary, and without :not(.btn) the button inherits
   the link colour — navy text on its own navy background. */
.nav-menu a:not(.btn) {
  font-size: var(--text-body-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-body-sm);
  text-decoration: none;
  color: var(--color-inkwell-navy);
  opacity: .82;
  position: relative;
}
.nav-menu a:hover { opacity: 1; }
.nav-menu a.is-active { opacity: 1; }
.nav-menu a.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-coral-emphasis);
}
.nav-menu .btn { opacity: 1; }
.nav-cta { margin-left: var(--spacing-8); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-buttons);
  border: 1px solid var(--color-warm-stone);
  background: var(--color-paper-white);
  place-items: center;
  gap: 4px;
}
.nav-toggle span {
  display: block;
  width: 16px; height: 2px;
  background: var(--color-inkwell-navy);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-inter);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  border-radius: var(--radius-buttons);
  padding: 13px 20px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--sm { font-size: var(--text-body-sm); padding: 9px 14px; }
.btn--lg { font-size: var(--text-body-lg); padding: 15px 24px; }
.btn--primary { background: var(--color-inkwell-navy); color: var(--color-paper-white); box-shadow: var(--shadow-subtle); }
.btn--primary:hover { box-shadow: var(--shadow-sm); }
.btn--ghost { background: transparent; color: var(--color-inkwell-navy); border-color: var(--color-warm-stone); }
.btn--ghost:hover { border-color: var(--color-slate); background: var(--color-paper-white); }
.btn--inverse { background: var(--color-paper-white); color: var(--color-inkwell-navy); box-shadow: var(--shadow-sm-2); }
.btn--inverse:hover { box-shadow: var(--shadow-lift); }
.btn--link { padding: 0; color: var(--color-coral-emphasis); font-weight: 600; }
.btn--link:hover { transform: none; text-decoration: underline; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--spacing-16); align-items: center; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: var(--tracking-caption);
  border-radius: var(--radius-badges);
  padding: 6px 10px;
  background: var(--color-ash-canvas);
  color: var(--color-inkwell-navy);
  white-space: nowrap;
}
.badge--mint { background: var(--color-mint-pulse); }
.badge--butter { background: var(--color-butter-yellow); }
.badge--navy { background: var(--color-inkwell-navy); color: var(--color-paper-white); }
.badge--outline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.9); }
.badge--coral { background: rgba(255, 88, 88, 0.14); color: #d83535; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  position: relative;
}
.card h3 { font-size: var(--text-subheading); font-weight: 600; letter-spacing: var(--tracking-subheading); }
.card p { font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.card--pad { padding: var(--spacing-32); }
.card--lift { transition: transform .2s ease, box-shadow .2s ease; }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--color-ash-canvas);
}
.card-icon--mint { background: var(--color-mint-pulse); }
.card-icon--butter { background: var(--color-butter-yellow); }
.card-icon--blue { background: var(--color-blue-soft); }
.card-icon--navy { background: var(--color-inkwell-navy); }

.card-num {
  font-family: var(--font-grifter);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--color-slate);
}
.card-kicker {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-slate);
}

/* Dark feature card */
.dark-card {
  position: relative;
  background: var(--color-inkwell-navy);
  border-radius: var(--radius-featurecards);
  padding: var(--spacing-48);
  color: var(--color-paper-white);
  overflow: visible;
}
.dark-card h2 {
  font-family: var(--font-grifter);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 36px);
  letter-spacing: 0.03em;
  line-height: 1.2;
  max-width: 20ch;
}
.dark-card h3 { font-size: var(--text-subheading); font-weight: 600; letter-spacing: var(--tracking-subheading); }
.dark-card p { margin-top: var(--spacing-16); font-size: var(--text-body); line-height: 1.6; color: rgba(255, 255, 255, 0.78); max-width: 48ch; }
.dark-card .btn { margin-top: var(--spacing-32); }
.dark-copy { max-width: 54%; position: relative; z-index: 2; }
.dark-list { list-style: none; margin-top: var(--spacing-24); display: grid; gap: 10px; max-width: 46ch; }
.dark-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-body-sm); color: rgba(255, 255, 255, 0.82); }
.dark-list li::before {
  content: '';
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  flex: none;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.2 2.2 4.6-5' stroke='%23151b31' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px 16px;
}

/* Overlapping tilted paper card */
.overlap-card {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%) rotate(-5deg);
  width: 300px;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-20);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
  color: var(--color-inkwell-navy);
  z-index: 3;
}
.overlap-card--paper { transform: translateY(-50%) rotate(-7deg); }
.overlap-card--up { transform: translateY(-58%) rotate(3deg); }
.overlap-card h4 { font-size: var(--text-body-sm); font-weight: 600; }
.oc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--spacing-12); }
.oc-rows { display: grid; gap: 8px; }
.oc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-ash-canvas);
  border-radius: var(--radius-buttons);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
}
.oc-row .tick {
  width: 16px; height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--color-slate);
  flex: none;
  position: relative;
}
.oc-row.is-done .tick { background: var(--color-mint-pulse); border-color: var(--color-mint-pulse); }
.oc-row.is-done .tick::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-inkwell-navy);
}
.oc-row .val { margin-left: auto; font-size: 11px; color: var(--color-slate); background: var(--color-paper-white); border-radius: 6px; padding: 2px 6px; }
.oc-bar { height: 6px; border-radius: 999px; background: var(--color-warm-stone); overflow: hidden; margin-top: 10px; }
.oc-bar span { display: block; height: 100%; border-radius: 999px; background: var(--color-mint-pulse); width: var(--fill, 72%); }
html.js .oc-bar span { width: 0; transition: width 1.4s ease .3s; }
html.js .overlap-card.is-visible .oc-bar span { width: var(--fill, 72%); }

/* ---------- Doodles, blobs, annotations ---------- */
.blob { position: absolute; z-index: 0; pointer-events: none; }
.blob--mint { fill: #86e0c1; }
.blob--blue { fill: #bcd7ff; }
.blob--butter { fill: #fedf89; }
.blob--float { animation: float 16s ease-in-out infinite alternate; }
.blob--float-slow { animation: float 24s ease-in-out infinite alternate-reverse; }
@keyframes float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(14px, -22px, 0) scale(1.05); }
}

.annotation {
  position: absolute;
  font-family: var(--font-hand);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: #4a7dff;
  pointer-events: none;
  z-index: 4;
}
.annotation--navy { color: var(--color-inkwell-navy); }
.annotation--coral { color: var(--color-coral-emphasis); }
.annotation svg { margin-top: 4px; }

.sparkle { position: absolute; pointer-events: none; color: var(--color-inkwell-navy); opacity: .5; }
.sparkle--mint { color: var(--color-mint-pulse); opacity: .9; }
.sparkle--twinkle { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.85); }
  50% { opacity: .95; transform: scale(1.06); }
}

.mascot { position: absolute; pointer-events: none; z-index: 3; }
.mascot--bob { animation: bob 6s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

/* ---------- Page header (interior pages) ---------- */
.page-hero {
  position: relative;
  padding: var(--spacing-72) 0 var(--spacing-40);
  overflow: hidden;
}
.page-hero h1 {
  font-family: var(--font-grifter);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 48px);
  letter-spacing: 0.03em;
  line-height: 1.12;
  max-width: 24ch;
}
.page-hero .section-sub { max-width: 58ch; }
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption);
  color: var(--color-slate);
  margin-bottom: var(--spacing-16);
}
.crumbs a { text-decoration: none; color: var(--color-slate); }
.crumbs a:hover { color: var(--color-coral-emphasis); }

/* ---------- Home hero ---------- */
.hero {
  position: relative;
  padding: var(--spacing-64) 0 var(--spacing-48);
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero h1 {
  font-family: var(--font-grifter);
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 64px);
  letter-spacing: 0.03em;
  line-height: 1.06;
  max-width: 22ch;
  margin: 0 auto var(--spacing-24);
}
.hero-sub {
  font-size: var(--text-body-lg);
  line-height: 1.6;
  color: var(--color-slate);
  max-width: 60ch;
  margin: 0 auto var(--spacing-32);
}
.hero .btn-row { justify-content: center; }
.hero-note { margin-top: var(--spacing-20); font-size: var(--text-caption); color: var(--color-slate); }
/* Sits under the hero console, which is a mock of the product rather than live data. */
.console-note {
  margin-top: var(--spacing-12);
  font-size: var(--text-caption);
  color: var(--color-slate);
  text-align: center;
}
.hero-glow {
  position: absolute;
  inset: -20% -10% 0;
  z-index: 1;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 30%), rgba(134, 224, 193, 0.28), transparent 68%);
  pointer-events: none;
  transition: opacity .3s ease;
}
.hero-pills { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: var(--spacing-24); }

/* ---------- Loop console (hero graphic) ----------
   The panel is a mock of the product, not live telemetry: the ring shows the
   four steps, the marker is driven by the step the loop is on (data-step on
   the svg), and the centre names that step.
   ------------------------------------------------------------------------- */
.console {
  position: relative;
  margin-top: var(--spacing-48);
  background:
    radial-gradient(120% 85% at 6% -12%, rgba(134, 224, 193, 0.16), transparent 58%),
    radial-gradient(90% 70% at 100% 108%, rgba(255, 88, 88, 0.10), transparent 60%),
    var(--color-inkwell-navy);
  border-radius: var(--radius-featurecards);
  box-shadow: 0 30px 60px -30px rgba(21, 27, 49, 0.55);
  overflow: hidden;
}
/* hairline that fades in from both ends along the top edge */
.console::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(134, 224, 193, 0.55), rgba(255, 88, 88, 0.3), transparent);
  z-index: 3;
}
.console-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.console-topbar .t-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.console-topbar .t-title {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}
.console-meta {
  margin-left: var(--spacing-16);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}
.console-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-inkwell-navy);
  background: var(--color-mint-pulse);
  border-radius: 999px;
  padding: 5px 13px;
  box-shadow: 0 0 0 1px rgba(134, 224, 193, 0.35), 0 6px 16px -8px rgba(134, 224, 193, 0.7);
}
.console-pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-inkwell-navy);
  animation: pulse 1.8s ease-in-out infinite;
}
.console-body {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--spacing-40);
  padding: var(--spacing-40);
  align-items: center;
  /* faint technical grid so the panel reads as an instrument */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 30px 30px;
}
.loop-wrap { position: relative; }
.loop-svg { width: 100%; max-width: 440px; margin-inline: auto; display: block; }

/* ring layers */
.lp-core { opacity: .9; }
.lp-ticks {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
  stroke-dasharray: 1.5 7;
  transform-origin: 50% 50%;
  transform-box: view-box;
  animation: lp-spin 74s linear infinite;
}
.lp-inner {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}
.lp-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 12;
}
@keyframes lp-spin { to { transform: rotate(360deg); } }

/* The four quarter arcs; stroke paint comes from the per-quarter gradients in
   the markup. Each arc is drawn node-to-node, so the quarter that lights up
   has to be the one ARRIVING at the current step. Lighting the one leaving it
   puts the brightest end of the arc on a node that is not lit. The quarter
   just travelled stays faint, which also shows the direction of travel. */
.lp-seg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  transition: opacity .3s ease;
}
/* arriving at the current step: arc N-1 for step N */
.loop-svg[data-step="0"] .lp-seg[data-seg="3"],
.loop-svg[data-step="1"] .lp-seg[data-seg="0"],
.loop-svg[data-step="2"] .lp-seg[data-seg="1"],
.loop-svg[data-step="3"] .lp-seg[data-seg="2"] {
  opacity: 1;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 7px rgba(134, 224, 193, 0.5));
  animation: lp-draw .9s cubic-bezier(.4, 0, .2, 1) both;
}
/* the quarter just travelled */
.loop-svg[data-step="0"] .lp-seg[data-seg="2"],
.loop-svg[data-step="1"] .lp-seg[data-seg="3"],
.loop-svg[data-step="2"] .lp-seg[data-seg="0"],
.loop-svg[data-step="3"] .lp-seg[data-seg="1"] {
  opacity: .3;
  stroke-dashoffset: 0;
}
@keyframes lp-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* The marker is a halo around the current node rather than a dot on top of
   it: one per step, faded in when that step is current. A dot would sit over
   the step number; a ring around it cannot. */
.lp-halo {
  fill: none;
  stroke: var(--color-mint-pulse);
  stroke-width: 2;
  opacity: 0;
  transition: opacity .35s ease;
}
.loop-svg[data-step="0"] .lp-halo[data-halo="0"],
.loop-svg[data-step="1"] .lp-halo[data-halo="1"],
.loop-svg[data-step="2"] .lp-halo[data-halo="2"],
.loop-svg[data-step="3"] .lp-halo[data-halo="3"] {
  opacity: .8;
  animation: lp-halo 2.4s ease-in-out infinite;
}
@keyframes lp-halo { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }

/* steps */
.lp-node circle {
  fill: rgba(255, 255, 255, 0.06);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1.5;
  transition: fill .35s ease, stroke .35s ease, stroke-width .35s ease;
}
.lp-node text {
  fill: rgba(255, 255, 255, 0.85);
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  transition: fill .35s ease;
}
.lp-node.is-on circle { fill: var(--color-mint-pulse); stroke: var(--color-paper-white); stroke-width: 2; }
.lp-node.is-on text { fill: var(--color-inkwell-navy); }
.lp-node.is-on { filter: drop-shadow(0 0 16px rgba(134, 224, 193, 0.6)); }

/* hub: names the step the loop is on */
.lp-hub-disc { fill: rgba(21, 27, 49, 0.72); stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; }
.lp-hub-k {
  fill: var(--color-paper-white);
  font-family: var(--font-inter);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.lp-hub-v {
  fill: rgba(255, 255, 255, 0.45);
  font-family: var(--font-inter);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* stepper under the ring */
.loop-stepper {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: var(--spacing-24);
}
.loop-stepper li {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 11px 6px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-buttons);
  background: rgba(255, 255, 255, 0.03);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.loop-stepper .st-n {
  font-family: var(--font-grifter);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  transition: color .3s ease;
}
.loop-stepper .st-t {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  transition: color .3s ease;
}
.loop-stepper li.is-on {
  background: rgba(134, 224, 193, 0.12);
  border-color: rgba(134, 224, 193, 0.45);
  transform: translateY(-2px);
}
.loop-stepper li.is-on .st-n { color: var(--color-mint-pulse); }
.loop-stepper li.is-on .st-t { color: var(--color-paper-white); }

/* ---------- Run feed ---------- */
.feed {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-cards);
  padding: var(--spacing-20);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
}
.feed-head .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-mint-pulse);
}
.feed-head .live i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.feed-lines { list-style: none; display: grid; gap: 9px; font-size: 13px; line-height: 1.5; }
.feed-lines li {
  display: flex;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  animation: feedIn .4s ease-out;
}
/* the newest line carries a mint rule so the eye lands where the log is */
.feed-lines li:last-child {
  border-left: 2px solid rgba(134, 224, 193, 0.55);
  margin-left: -10px;
  padding-left: 8px;
}
.feed-lines li .t { color: rgba(255, 255, 255, 0.36); font-variant-numeric: tabular-nums; flex: none; }
.feed-lines li .k { color: var(--color-mint-pulse); font-weight: 600; flex: none; }
@keyframes feedIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.feed-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-caption);
  color: rgba(255, 255, 255, 0.45);
}
.feed-foot .ff-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-paper-white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
/* decorative scan: deliberately has no fill value, so it reads as activity
   rather than as a measured proportion */
.ff-meter {
  display: block;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.ff-meter::after {
  content: '';
  display: block;
  width: 34%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(134, 224, 193, 0.85), transparent);
  animation: ff-scan 3.4s linear infinite;
}
@keyframes ff-scan { from { transform: translateX(-120%); } to { transform: translateX(330%); } }

/* ---------- Stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-24);
  margin-top: var(--spacing-48);
}
.stat {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-20);
  box-shadow: var(--shadow-sm-2);
}
.stat-num {
  font-family: var(--font-grifter);
  font-size: 32px;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--color-inkwell-navy);
  font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: 6px; font-size: var(--text-body-sm); font-weight: 500; }
.stat-note { margin-top: 4px; font-size: var(--text-caption); color: var(--color-slate); }

/* ---------- Compare graphic (sequential vs parallel) ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-24); }
.compare-panel {
  border-radius: var(--radius-cards);
  border: 1px dashed var(--color-warm-stone);
  background: var(--color-paper-white);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
}
.compare-panel--mint { border-color: rgba(134, 224, 193, 0.9); background: #fbfffd; }
.compare-panel h4 { font-size: var(--text-body); font-weight: 600; }
.compare-panel .caption { margin-bottom: var(--spacing-16); }
.dot-chain { display: flex; align-items: center; gap: 6px; margin: var(--spacing-20) 0; }
.dot-chain .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--color-warm-stone);
  flex: none;
  animation: chainPulse 6s linear infinite;
  animation-delay: var(--d, 0s);
}
.dot-chain .link { height: 2px; flex: 1; background: var(--color-warm-stone); border-radius: 2px; }
@keyframes chainPulse {
  0%, 12% { background: var(--color-slate); transform: scale(1.18); }
  20%, 100% { background: var(--color-warm-stone); transform: scale(1); }
}
.dot-cloud { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; margin: var(--spacing-20) 0; }
.dot-cloud .dot {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--color-mint-pulse);
  opacity: .25;
  animation: cloudPulse 3.6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes cloudPulse { 0%, 100% { opacity: .22; } 45% { opacity: 1; } }

/* ---------- Loop steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-24); margin-top: var(--spacing-48); }
.step {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.step .num {
  font-family: var(--font-grifter);
  font-size: 26px;
  letter-spacing: 0.03em;
  color: var(--color-coral-emphasis);
}
.step h3 { margin-top: var(--spacing-12); font-size: var(--text-subheading); font-weight: 600; letter-spacing: var(--tracking-subheading); }
.step p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.step .badge { margin-top: var(--spacing-16); }
.step::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -18px;
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--color-warm-stone);
  border-right: 2px solid var(--color-warm-stone);
  transform: translateY(-50%) rotate(45deg);
}
.step:last-child::after { display: none; }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-warm-stone);
  border-bottom: 1px solid var(--color-warm-stone);
  padding: var(--spacing-24) 0;
  margin-top: var(--spacing-48);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: var(--spacing-40);
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-grifter);
  font-size: 20px;
  letter-spacing: 0.03em;
  color: var(--color-inkwell-navy);
  white-space: nowrap;
}
.marquee-item i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  flex: none;
}
.marquee-item:nth-child(odd) i { background: var(--color-coral-emphasis); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 8px; margin-bottom: var(--spacing-20); }
.field label { font-size: var(--text-body-sm); font-weight: 500; letter-spacing: var(--tracking-body-sm); }
.field label .req { color: var(--color-coral-emphasis); }
.field .hint { font-size: var(--text-caption); color: var(--color-slate); }
.field input, .field select, .field textarea {
  font-family: var(--font-inter);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-inkwell-navy);
  background: var(--color-paper-white);
  border: 1px solid var(--color-warm-stone);
  border-radius: var(--radius-inputs);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-slate); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-inkwell-navy);
  box-shadow: 0 0 0 3px rgba(255, 88, 88, 0.22);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-coral-emphasis); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-body-sm); color: var(--color-slate); line-height: 1.5; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-inkwell-navy); flex: none; }
.form-status {
  margin-top: var(--spacing-16);
  font-size: var(--text-body-sm);
  font-weight: 500;
  border-radius: var(--radius-buttons);
  padding: 10px 14px;
  background: var(--color-mint-pulse);
  display: none;
}
.form-status.is-on { display: block; }

/* ---------- Prose (legal + long-form) ---------- */
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--spacing-48); align-items: start; }
.toc { position: sticky; top: 100px; }
.toc h2 { font-size: var(--text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-slate); font-weight: 600; margin-bottom: var(--spacing-12); }
.toc ol { list-style: none; display: grid; gap: 8px; counter-reset: toc; }
.toc a {
  font-size: var(--text-body-sm);
  text-decoration: none;
  color: var(--color-slate);
  display: block;
  padding-left: 4px;
  border-left: 2px solid transparent;
}
.toc a:hover { color: var(--color-inkwell-navy); border-left-color: var(--color-coral-emphasis); }/* Long unbreakable tokens (email addresses in definition lists, URLs in copy)
   must never widen a grid column and push the page sideways. */
.spec dt, .spec dd, .prose, .legal-meta, .footer-cols a { overflow-wrap: anywhere; }

.prose {
  max-width: 76ch;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--color-paper-white);
  border-radius: 6px;
  padding: 1px 5px;
  color: var(--color-inkwell-navy);
}
.prose > * + * { margin-top: var(--spacing-20); }
.prose h2 {
  font-size: var(--text-heading-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-heading-sm);
  line-height: 1.3;
  margin-top: var(--spacing-48);
  scroll-margin-top: 100px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: var(--text-body-lg); font-weight: 600; margin-top: var(--spacing-32); }
.prose p, .prose li { color: var(--color-graphite); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--color-coral-emphasis); }
.prose a { color: var(--color-coral-emphasis); font-weight: 500; text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.prose strong { font-weight: 600; color: var(--color-inkwell-navy); }
.prose code {
  font-size: 0.92em;
  background: var(--color-ash-canvas);
  border-radius: 6px;
  padding: 2px 6px;
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-body-sm); }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-warm-stone); vertical-align: top; }
.prose th { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-slate); }
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  font-size: var(--text-body-sm);
  color: var(--color-slate);
  background: var(--color-paper-white);
  border-radius: var(--radius-buttons);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm-2);
  margin-bottom: var(--spacing-32);
}
.callout {
  background: var(--color-butter-yellow);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-24);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-inkwell-navy);
}
.callout--ash { background: var(--color-paper-white); box-shadow: var(--shadow-sm-2); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: var(--spacing-12); margin-top: var(--spacing-32); }
.faq details {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-sm-2);
  padding: var(--spacing-20) var(--spacing-24);
}
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-body);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--font-grifter);
  color: var(--color-coral-emphasis);
  font-size: 20px;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: '–'; }
.faq details p { margin-top: var(--spacing-12); font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }

/* ---------- Roles list ---------- */
.role {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  align-items: center;
  justify-content: space-between;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.role:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.role h3 { font-size: var(--text-subheading); font-weight: 600; letter-spacing: var(--tracking-subheading); }
.role p { margin-top: 6px; font-size: var(--text-body-sm); color: var(--color-slate); max-width: 62ch; }
.role-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--spacing-12); }

/* ---------- Timeline ---------- */
.timeline { position: relative; margin-top: var(--spacing-48); display: grid; gap: var(--spacing-24); }
.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--color-mint-pulse), var(--color-warm-stone));
}
.timeline-item { position: relative; padding-left: 56px; }
.timeline-item .marker {
  position: absolute;
  left: 0;
  top: 4px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-inkwell-navy);
  color: var(--color-paper-white);
  display: grid;
  place-items: center;
  font-family: var(--font-grifter);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.timeline-item.is-now .marker { background: var(--color-mint-pulse); color: var(--color-inkwell-navy); }
.timeline-item h3 { font-size: var(--text-subheading); font-weight: 600; letter-spacing: var(--tracking-subheading); }
.timeline-item p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); max-width: 68ch; }

/* ---------- Founder card ---------- */
.founder {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--spacing-32);
  align-items: center;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32);
  box-shadow: var(--shadow-sm-2);
}
.founder-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--color-inkwell-navy);
  display: grid;
  place-items: center;
  position: relative;
  flex: none;
}
.founder-avatar span {
  font-family: var(--font-grifter);
  font-size: 40px;
  letter-spacing: 0.03em;
  color: var(--color-paper-white);
}
.founder-avatar::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px dashed var(--color-mint-pulse);
}
.founder h3 { font-size: var(--text-heading-sm); font-weight: 600; letter-spacing: var(--tracking-heading-sm); }
.founder .role-title { font-size: var(--text-body-sm); font-weight: 500; color: var(--color-coral-emphasis); margin-top: 4px; }
.founder p { margin-top: var(--spacing-12); font-size: var(--text-body-sm); line-height: 1.65; color: var(--color-slate); }

/* ---------- CTA ---------- */
.cta { position: relative; padding: var(--spacing-100) 0; text-align: center; overflow: hidden; }
.cta h2 {
  font-family: var(--font-grifter);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 48px);
  letter-spacing: 0.03em;
  line-height: 1.14;
  max-width: 22ch;
  margin: 0 auto var(--spacing-20);
}
.cta p { color: var(--color-slate); font-size: var(--text-body-lg); margin-bottom: var(--spacing-32); }
.cta .btn-row { justify-content: center; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--color-warm-stone);
  background: var(--color-ash-canvas);
  padding: var(--spacing-48) 0 var(--spacing-32);
}
.footer-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: var(--spacing-48); }
.footer-tag { margin-top: var(--spacing-16); font-size: var(--text-body-sm); color: var(--color-slate); max-width: 34ch; line-height: 1.6; }
/* Compact legal identity strip beneath the copyright row */
.footer-legal {
  margin-top: var(--spacing-12);
  font-size: var(--text-caption);
  color: var(--color-slate);
  line-height: 1.6;
}
.footer-legal a {
  color: var(--color-inkwell-navy);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-warm-stone);
  transition: color .18s ease, border-color .18s ease;
}
.footer-legal a:hover {
  color: var(--color-coral-emphasis);
  border-bottom-color: var(--color-coral-emphasis);
}
.footer-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-20); }
.footer-cols h4 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-slate); font-weight: 600; margin-bottom: var(--spacing-12); }
.footer-cols ul { list-style: none; display: grid; gap: 10px; }
.footer-cols a { font-size: var(--text-body-sm); text-decoration: none; color: var(--color-inkwell-navy); }
.footer-cols a:hover { color: var(--color-coral-emphasis); text-decoration: underline; }
.footer-bottom {
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-20);
  border-top: 1px solid var(--color-warm-stone);
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-caption);
  color: var(--color-slate);
}

/* ---------- 404 ---------- */
.notfound { position: relative; text-align: center; padding: var(--spacing-120) 0; overflow: hidden; }
.notfound .code {
  font-family: var(--font-grifter);
  font-size: clamp(72px, 14vw, 140px);
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--color-inkwell-navy);
}
.notfound .code span { color: var(--color-coral-emphasis); }
.notfound h1 { margin-top: var(--spacing-16); font-size: var(--text-heading-sm); font-weight: 600; }
.notfound p { margin: var(--spacing-12) auto var(--spacing-32); color: var(--color-slate); max-width: 46ch; }
.notfound .btn-row { justify-content: center; }

/* ---------- Content building blocks ---------- */
.h-sub {
  font-size: var(--text-subheading);
  font-weight: 600;
  letter-spacing: var(--tracking-subheading);
  color: var(--color-inkwell-navy);
  margin-bottom: var(--spacing-16);
}
.h-sub--sm { font-size: var(--text-body-lg); margin-bottom: var(--spacing-12); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--spacing-16); }

.quote {
  border-left: 3px solid var(--color-mint-pulse);
  padding: 4px 0 4px var(--spacing-20);
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--color-inkwell-navy);
  max-width: 64ch;
}

.note {
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-slate);
  background: var(--color-paper-white);
  border-radius: var(--radius-buttons);
  padding: 12px 16px;
  box-shadow: var(--shadow-sm-2);
}

/* Definition pairs — key/value rows */
.spec { margin-top: var(--spacing-16); border-top: 1px solid var(--color-warm-stone); }
.spec > div {
  display: grid;
  grid-template-columns: minmax(130px, 32%) minmax(0, 1fr);
  gap: var(--spacing-16);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-warm-stone);
}
.spec dt { font-size: var(--text-body-sm); font-weight: 600; color: var(--color-inkwell-navy); }
.spec dd { font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.dark-card .spec { border-top-color: rgba(255, 255, 255, 0.14); }
.dark-card .spec > div { border-bottom-color: rgba(255, 255, 255, 0.14); }
.dark-card .spec dt { color: var(--color-paper-white); }
.dark-card .spec dd { color: rgba(255, 255, 255, 0.72); }

/* Jump links */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--spacing-24); }
.jump a {
  font-size: var(--text-body-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-inkwell-navy);
  background: var(--color-paper-white);
  border-radius: var(--radius-badges);
  padding: 8px 12px;
  box-shadow: var(--shadow-sm-2);
  transition: transform .16s ease, color .16s ease;
}
.jump a:hover { transform: translateY(-1px); color: var(--color-coral-emphasis); }

/* Glossary terms */
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); margin-top: var(--spacing-20); }
.term {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-20);
  box-shadow: var(--shadow-sm-2);
}
.term h3 { font-size: var(--text-body); font-weight: 600; letter-spacing: -0.16px; }
.term p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.term .badge { margin-top: var(--spacing-12); }
.letter-label {
  font-family: var(--font-grifter);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--color-slate);
  margin-top: var(--spacing-48);
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-warm-stone);
}
.letter-label:first-of-type { margin-top: 0; }

/* ---------- Blog ---------- */
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--spacing-16); }
.post-figure { margin: var(--spacing-40) 0 0; }
.post-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-sm-2);
  background: var(--color-paper-white);
}
.post-figure figcaption { margin-top: 10px; font-size: var(--text-caption); color: var(--color-slate); }

.takeaways {
  background: var(--color-paper-white);
  border-left: 3px solid var(--color-mint-pulse);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
}
.takeaways h2 { font-size: var(--text-body-lg); font-weight: 600; margin: 0 0 var(--spacing-12); letter-spacing: -0.18px; }
.takeaways ul { padding-left: 20px; display: grid; gap: 8px; }
.takeaways li { font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-graphite); }
.takeaways li::marker { color: var(--color-coral-emphasis); }

.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-warm-stone);
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-20);
  font-size: var(--text-body-sm);
  color: var(--color-slate);
}

.post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-16); margin-top: var(--spacing-40); }
.post-nav a {
  display: block;
  text-decoration: none;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-20);
  box-shadow: var(--shadow-sm-2);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-nav a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-nav .pn-label { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-slate); }
.post-nav .pn-title { display: block; margin-top: 6px; font-weight: 600; color: var(--color-inkwell-navy); }
.post-nav a:hover .pn-title { color: var(--color-coral-emphasis); }
.post-nav .next { text-align: right; }

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-24); margin-top: var(--spacing-40); }
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-sm-2);
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--color-ash-canvas);
  border-bottom: 1px solid var(--color-warm-stone);
}
.post-card .pc-body { padding: var(--spacing-20); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h3 { font-size: var(--text-body-lg); font-weight: 600; letter-spacing: -0.18px; line-height: 1.35; }
.post-card p { font-size: var(--text-body-sm); color: var(--color-slate); line-height: 1.6; }
.post-card .pc-meta { margin-top: auto; padding-top: 6px; font-size: var(--text-caption); color: var(--color-slate); }

.featured-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  margin-top: var(--spacing-40);
  background: var(--color-paper-white);
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm-2);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.featured-post:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.featured-post img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.featured-post .fp-body { padding: var(--spacing-40); display: flex; flex-direction: column; gap: var(--spacing-12); justify-content: center; }
.featured-post h2 { font-family: var(--font-grifter); font-weight: 400; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: 0.03em; line-height: 1.2; }
.featured-post p { font-size: var(--text-body-sm); color: var(--color-slate); line-height: 1.6; }
.featured-post .fp-meta { font-size: var(--text-caption); color: var(--color-slate); }

/* Tables inside narrow columns need their own scroll container */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 520px; }

/* Empty state (for sections that are intentionally not populated yet) */
.empty-state {
  border: 1px dashed var(--color-warm-stone);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32);
  background: var(--color-paper-white);
}
.empty-state h3 { font-size: var(--text-body-lg); font-weight: 600; }
.empty-state p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); max-width: 60ch; }

/* ---------- Brand swatches (press & brand page) ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-12); margin-top: var(--spacing-24); }
.swatch { background: var(--color-paper-white); border-radius: var(--radius-buttons); box-shadow: var(--shadow-sm-2); overflow: hidden; }
.swatch-chip { height: 56px; }
.swatch-body { padding: 10px 12px; }
.swatch-body strong { display: block; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-inkwell-navy); }
.swatch-body span { display: block; margin-top: 2px; font-size: var(--text-caption); color: var(--color-slate); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.swatch--dark .swatch-body strong,
.swatch--dark .swatch-body span { color: var(--color-inkwell-navy); }

/* ---------- Two-up usage rules (do / don't) ---------- */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-16); margin-top: var(--spacing-24); }
.rules ul { list-style: none; display: grid; gap: 10px; }
.rules li { position: relative; padding-left: 26px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-graphite); }
.rules li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 2px; border-radius: 2px; background: var(--color-mint-pulse); }
.rules .rules-no li::before { background: var(--color-coral-emphasis); }

/* ---------- One turn inside the loop (homepage) ---------- */
.turn { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: var(--spacing-16); margin-top: var(--spacing-40); }
.turn-item {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-20);
  box-shadow: var(--shadow-sm-2);
  transition: transform .16s ease, box-shadow .16s ease;
}
.turn-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.turn-item .n { font-family: var(--font-grifter); font-size: 12px; letter-spacing: .08em; color: var(--color-slate); }
.turn-item h3 { margin-top: 8px; font-size: var(--text-body); font-weight: 600; letter-spacing: -0.16px; }
.turn-item p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.turn-item .badge { margin-top: var(--spacing-12); }

/* Animated rail: mint runners move forward through the cycle, one coral runner
   comes back around — the loop, drawn as motion rather than described. */
.turn-rail { position: relative; height: 46px; margin-top: var(--spacing-40); }
.turn-rail::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  height: 2px;
  background-image: linear-gradient(90deg, var(--color-warm-stone) 0 9px, transparent 9px 18px);
  background-size: 18px 2px;
}
.runner {
  position: absolute;
  top: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
  box-shadow: 0 0 0 4px rgba(134, 224, 193, 0.22);
  animation: runFwd 7s linear infinite;
  animation-delay: var(--d, 0s);
}
.runner--back {
  top: 22px;
  background: var(--color-coral-emphasis);
  box-shadow: 0 0 0 4px rgba(255, 88, 88, 0.16);
  animation-name: runBack;
}
@keyframes runFwd { from { left: 0; } to { left: calc(100% - 14px); } }
@keyframes runBack { from { left: calc(100% - 14px); } to { left: 0; } }

/* ---------- Evidence ladder ---------- */
.ladder { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--spacing-16); margin-top: var(--spacing-32); }
.rung {
  position: relative;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
}
.rung .rung-num { font-family: var(--font-grifter); font-size: 12px; letter-spacing: .08em; color: var(--color-slate); }
.rung h3 { margin-top: 8px; font-size: var(--text-body-lg); font-weight: 600; letter-spacing: -0.18px; }
.rung p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.rung { transition: transform .16s ease, box-shadow .16s ease; }
.rung:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.rung .badge { margin-top: var(--spacing-12); }
.rung.is-on { background: var(--color-inkwell-navy); }
.rung.is-on h3 { color: var(--color-paper-white); }
.rung.is-on p { color: rgba(255, 255, 255, 0.74); }
.rung.is-on .rung-num { color: var(--color-mint-pulse); }
@media (min-width: 901px) {
  .rung::after {
    content: '';
    position: absolute;
    top: 38px;
    right: -20px;
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-mint-pulse), rgba(134, 224, 193, 0));
  }
  .rung:last-child::after { display: none; }
}

/* ---------- Check list for light surfaces (mirrors .dark-list) ---------- */
.list-check { list-style: none; margin-top: var(--spacing-24); display: grid; gap: 12px; max-width: 52ch; }
.list-check li { position: relative; padding-left: 26px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-graphite); }
.list-check li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-mint-pulse);
}

/* ---------- Quote band (editorial moment on the homepage) ---------- */
.quote-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--spacing-48); align-items: center; }
@media (max-width: 900px) { .quote-band { grid-template-columns: 1fr; gap: var(--spacing-32); } }

/* ---------- Explore strip ---------- */
.explore { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: var(--spacing-16); margin-top: var(--spacing-32); }
.explore a {
  display: block;
  text-decoration: none;
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-sm-2);
  transition: transform .16s ease, box-shadow .16s ease;
}
.explore a:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.explore h3 { margin-top: var(--spacing-16); font-size: var(--text-body-lg); font-weight: 600; letter-spacing: -0.18px; color: var(--color-inkwell-navy); }
.explore p { margin-top: 8px; font-size: var(--text-body-sm); line-height: 1.6; color: var(--color-slate); }
.explore .go { display: inline-block; margin-top: var(--spacing-16); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-coral-emphasis); }

/* ---------- Reveal animation ----------
   Scoped to html.js so that content is never hidden when JavaScript is
   unavailable — the animation is enhancement, not a prerequisite. */
html.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--i, 0) * 70ms); }
html.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; }

/* If scripting is off, still surface everything that the observers would. */
html:not(.js) .overlap-card { position: static; transform: rotate(-3deg); width: min(360px, 100%); margin: var(--spacing-32) 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid--4, .stats, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
  .console-body { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .console-meta { display: none; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .legal { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .grid--aside { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-post { grid-template-columns: 1fr; }
  .featured-post img { min-height: 220px; }
  .toc { position: static; }
}

@media (max-width: 900px) {
  /* Without JS the links simply stack — no toggle to press. */
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
    padding: var(--spacing-8) 0;
  }
  html.js .nav-toggle { display: grid; }
  html.js .nav-menu {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none;
    gap: 4px;
    background: var(--color-paper-white);
    border: 1px solid var(--color-warm-stone);
    border-radius: 0 0 var(--radius-cards) var(--radius-cards);
    padding: var(--spacing-16);
    box-shadow: var(--shadow-sm);
  }
  html.js .nav-menu.is-open { display: flex; }
  .nav-menu a { padding: 10px 8px; font-size: var(--text-body); }
  .nav-menu a.is-active::after { display: none; }
  .nav-menu .nav-cta { margin: var(--spacing-8) 0 0; }
  .dark-copy { max-width: 100%; }
  .overlap-card, .overlap-card--paper, .overlap-card--up {
    position: static;
    transform: rotate(-3deg);
    width: min(360px, 100%);
    margin: var(--spacing-32) auto 0;
  }
  .dark-card { padding: var(--spacing-32); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare { grid-template-columns: 1fr; }
  .annotation { display: none; }
  .mascot { display: none; }
}

@media (max-width: 520px) {
  /* the hand-drawn underline needs a single line to sit under */
  .underline-squiggle { white-space: normal; }
  .underline-squiggle svg { display: none; }
}

@media (max-width: 640px) {
  .section { padding: var(--spacing-48) 0; }
  .banner { padding: 10px 44px; font-size: 13px; }
  .grid--2, .grid--3, .grid--4, .stats, .steps, .terms, .post-grid, .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { text-align: left; }
  .featured-post .fp-body { padding: var(--spacing-24); }
  .post-card img { height: 160px; }
  .spec > div { grid-template-columns: 1fr; gap: 4px; }
  .split { grid-template-columns: 1fr; gap: var(--spacing-32); }
  .hero { padding-top: var(--spacing-40); }
  .console-body { padding: var(--spacing-20); }
  .console-topbar .t-title,
  .console-meta { display: none; }
  .loop-stepper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .founder { grid-template-columns: 1fr; justify-items: start; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .notfound { padding: var(--spacing-72) 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
  /* The loop diagram still needs to read without motion: show the whole ring
     and park the marker on the first step. */
  .lp-seg { opacity: .5 !important; stroke-dashoffset: 0; }
  .lp-halo { opacity: 0; }
  .lp-halo[data-halo="0"] { opacity: .8; }
  .ff-meter::after { animation: none; opacity: .5; }
}

/* ==========================================================================
   Polish layer
   Small, restrained motion and decoration applied site-wide. Everything here
   is decorative, uses existing tokens only, and is neutralised by the
   prefers-reduced-motion block above, which caps animation durations and
   iteration counts globally with !important.
   ========================================================================== */

/* ---------- Surface details ---------- */
::selection { background: rgba(255, 88, 88, 0.18); color: var(--color-inkwell-navy); }

:focus-visible {
  outline: 2px solid var(--color-inkwell-navy);
  outline-offset: 2px;
  border-radius: var(--radius-badges);
}
.dark-card :focus-visible, .footer :focus-visible, .cta :focus-visible { outline-color: var(--color-mint-pulse); }

* { scrollbar-width: thin; scrollbar-color: rgba(21, 27, 49, 0.3) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-ash-canvas); }
::-webkit-scrollbar-thumb {
  background: rgba(21, 27, 49, 0.26);
  border: 3px solid var(--color-ash-canvas);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(21, 27, 49, 0.46); }

/* ---------- Reading progress: a 2px marker line across the top ---------- */
.progress-line {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 70;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-mint-pulse), var(--color-inkwell-navy) 55%, var(--color-coral-emphasis));
}

/* ---------- Highlighter swipe behind the emphasised word ---------- */
.section-title .coral,
h1 .coral,
.dark-card h2 .coral,
.hero h1 .coral {
  background-image: linear-gradient(180deg, transparent 64%, rgba(255, 88, 88, 0.18) 64%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 1px;
}

/* ---------- Navigation: the underline draws itself in ---------- */
.nav-menu a:not(.btn)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-coral-emphasis);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .24s cubic-bezier(.22, .7, .3, 1);
}
.nav-menu a:not(.btn):hover::after,
.nav-menu a:not(.btn).is-active::after { transform: scaleX(1); }

/* ---------- Cards: a mint rule draws in along the top edge ---------- */
.card, .turn-item, .term, .role { position: relative; }
.card::before,
.turn-item::before,
.term::before,
.step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: var(--radius-cards) var(--radius-cards) 0 0;
  background: linear-gradient(90deg, var(--color-mint-pulse), rgba(134, 224, 193, 0));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .42s cubic-bezier(.22, .7, .3, 1);
  pointer-events: none;
}
.card:hover::before,
.turn-item:hover::before,
.term:hover::before,
.step:hover::before { transform: scaleX(1); }

/* ---------- Buttons and links: small, quick acknowledgements ---------- */
.btn {
  transition: transform .18s ease, box-shadow .2s ease, background-color .2s ease,
    border-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary:hover { transform: translateY(-1px); }
.btn--ghost:hover { border-color: var(--color-inkwell-navy); background: var(--color-paper-white); }
.explore a .go { transition: transform .2s ease; }
.explore a:hover .go { transform: translateX(4px); }

/* ---------- Eyebrow marker breathes ---------- */
.eyebrow .dot { animation: dotBreathe 3.8s ease-in-out infinite; }
@keyframes dotBreathe {
  0%, 100% { transform: scale(.82); opacity: .62; }
  50% { transform: scale(1); opacity: 1; }
}

/* ---------- The mark is a loop, so the loop keeps turning ---------- */
.logo-mark svg { animation: loopTurn 44s linear infinite; }
@keyframes loopTurn { to { transform: rotate(360deg); } }

/* ---------- Dark feature cards: a mint spotlight follows the pointer ---------- */
.dark-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(134, 224, 193, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity .32s ease;
  pointer-events: none;
}
.dark-card.is-glow::after { opacity: 1; }

/* ---------- Illustrations settle into their cards ---------- */
.post-card img, .featured-post img { transition: transform .55s cubic-bezier(.22, .7, .3, 1); }
.post-card:hover img, .featured-post:hover img { transform: scale(1.045); }

/* ---------- Tables: the hovered row is the one being read ---------- */
main tbody tr { transition: background-color .18s ease; }
main tbody tr:hover { background-color: rgba(134, 224, 193, 0.14); }

/* ---------- Stat figures get a hand-placed mint rule ---------- */
html.js .stat-num::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--color-mint-pulse);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .6s cubic-bezier(.22, .7, .3, 1) .1s;
}
html.js .is-visible .stat-num::after { transform: scaleX(1); }

/* ---------- Contents lists follow the reader ---------- */
.toc a[aria-current="true"] {
  color: var(--color-inkwell-navy);
  font-weight: 600;
  border-left-color: var(--color-coral-emphasis);
}

/* ==========================================================================
   Cross-document page transitions
   --------------------------------------------------------------------------
   Moving between pages cross-fades the outgoing document into the incoming
   one, while the sticky header persists so the chrome stays put and only the
   content swaps. Opting in is the single at-rule below.

   Graceful degradation is built in: a browser that does not implement the
   View Transitions API drops every rule in this section on the floor and
   navigates the way it always has. No JavaScript is involved, so the site
   keeps working with scripts disabled, and back/forward stays instant.
   ========================================================================== */

@view-transition { navigation: auto; }

/* The header sits at the top of the viewport on both the outgoing and the
   incoming page, so naming it keeps it steady instead of letting it take part
   in the root cross-fade. Every page has exactly one, as the API requires. */
.nav { view-transition-name: site-nav; }

::view-transition-group(root),
::view-transition-group(site-nav) { animation-duration: .34s; }

@media (prefers-reduced-motion: no-preference) {
  /* Outgoing page: a quick fade with a hint of upward drift. */
  ::view-transition-old(root) {
    animation: vt-page-out .24s cubic-bezier(.4, 0, 1, 1) both;
  }
  /* Incoming page: a touch slower and ease-out, so it settles rather than snaps. */
  ::view-transition-new(root) {
    animation: vt-page-in .34s cubic-bezier(0, 0, .2, 1) both;
  }
  /* The header itself is very nearly identical on both sides, so its own
     cross-fade is short and should barely register. */
  ::view-transition-old(site-nav),
  ::view-transition-new(site-nav) {
    animation-duration: .22s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

@keyframes vt-page-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-page-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* The sticky header is translucent and relies on a backdrop blur, but a
   snapshot has no backdrop to sample. Swap in the flat canvas for the duration
   of the transition so the header can never read as transparent mid-jump. The
   canvas colour is identical on every page, so the swap is invisible. */
html:active-view-transition .nav {
  backdrop-filter: none;
  background: var(--color-ash-canvas);
}

/* Reduced motion: the document swap still happens, but every view-transition
   animation is cancelled so nothing moves or fades. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}