/* HUMBLE site. Rules: docs/design/ANTI_VIBECODE.md. One accent, IBM Plex, sharp corners, no shadows,
   no gradients, no hover motion. Dark is the default; light is a warm off-white, never #fff. */

:root {
  /* Brand Tokens (Avtansh's Brand Kit & BRAND.md) */
  --brand-paper: #f4e9dc;      /* drafting paper background */
  --brand-paper-2: #e9dccd;    /* paper shadows, cards */
  --brand-ink: #0d1030;        /* logo, headline ink */
  --brand-ink-2: #55546c;      /* sub-headline grey */
  --brand-blue: #2d4fa0;       /* "fixes itself." accent text */
  --brand-electric: #1f3bff;   /* the fix: blue thread, corrected command box */
  --brand-crack: #f0287a;      /* the break: pink cracks, failing command highlight */
  --brand-line: #b9aa9c;       /* blueprint lines */

  --bg: #111315; --surface: #171a1d; --line: #2a2e33;
  --ink: #e9e7e2; --muted: #9a9893; --accent: #56c08c; --accent-ink: #0d1a13;
  --del: #d98b7a; --r: 2px;
  --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1120px; --gutter: clamp(20px, 5vw, 48px);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: var(--brand-paper); --surface: var(--brand-paper-2); --line: var(--brand-line);
  --ink: var(--brand-ink); --muted: var(--brand-ink-2); --accent: var(--brand-electric); --accent-ink: var(--brand-paper); --del: var(--brand-crack);
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--brand-paper); --surface: var(--brand-paper-2); --line: var(--brand-line);
    --ink: var(--brand-ink); --muted: var(--brand-ink-2); --accent: var(--brand-electric); --accent-ink: var(--brand-paper); --del: var(--brand-crack);
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--bg);
  background-image: 
    linear-gradient(to right, color-mix(in srgb, var(--brand-line) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--brand-line) 14%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.mono, code, pre { font-family: var(--mono); }
code { font-size: .9em; padding: 0 .25em; border: 1px solid var(--line); border-radius: var(--r); }
b { font-weight: 600; }
.wrap { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 10; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Header */
.top { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 32px; height: 64px; }
.mark { font-weight: 600; letter-spacing: .14em; text-decoration: none; font-size: 15px; margin: 0; display: inline-flex; align-items: center; }
.brand-nav-link { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo-svg { display: block; height: 26px; width: auto; color: var(--ink); fill: currentColor; transition: opacity 0.15s; }
.brand-nav-link:hover .brand-logo-svg { opacity: 0.85; }
.brand-blue-accent { color: var(--brand-blue); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.top nav { display: flex; gap: 24px; margin-left: auto; }
.top nav a, .foot nav a { text-decoration: none; color: var(--muted); font-size: 15px; }
.top nav a:hover, .foot nav a:hover { color: var(--ink); }
.theme { background: none; border: 1px solid var(--line); color: var(--muted); font: 500 13px var(--mono); padding: 6px 10px; border-radius: var(--r); cursor: pointer; }
.theme:hover { color: var(--ink); border-color: var(--muted); }
@media (max-width: 720px) { .top nav a:not(:last-child) { display: none; } .top-in { gap: 16px; } }

/* Type */
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; margin: 0; }
h1 { font-size: clamp(48px, 9vw, 112px); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.eyebrow { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 20px; }
.lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 58ch; margin: 28px 0 0; }
.sub { color: var(--muted); max-width: 62ch; margin: 16px 0 48px; }
.prose p { margin: 0 0 16px; max-width: 64ch; } .prose p:last-child { margin: 0; }
.muted { color: var(--muted); }

/* Controls: hover changes colour only, never position or size */
.btn { display: inline-block; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); border-radius: var(--r);
  font: 500 15px var(--sans); padding: 12px 20px; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn:disabled { opacity: .6; cursor: progress; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.link:hover { text-decoration-color: var(--ink); }
.actions { display: flex; align-items: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }

/* Sections */
section { padding: clamp(72px, 11vw, 140px) 0; }
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hero { padding-top: clamp(72px, 12vw, 150px); padding-bottom: clamp(56px, 8vw, 100px); }
.hero-stage { margin-top: 64px; min-height: 0; }
.hero-stage:not(:empty) { min-height: clamp(240px, 34vw, 420px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fact { margin: 40px 0 0; max-width: 70ch; color: var(--muted); font-size: 18px; }
.fact b { color: var(--ink); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Crew: a numbered sequence, not cards */
.crew-stage:not(:empty) { min-height: 280px; margin: 0 0 48px; }
.crew { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.crew li { display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.crew .n { color: var(--accent); font-size: 14px; padding-top: 4px; }
.crew p { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }

/* Proof */
.shot { margin: 0 0 72px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--bg); }
.shot figcaption { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.case h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 14px; }
.case p { color: var(--muted); margin: 0 0 20px; }
.diff { margin: 0; padding: 22px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); font-size: 14px; line-height: 1.75; overflow-x: auto; }
.diff span { display: block; white-space: pre; }
.diff .add { color: var(--accent); } .diff .del { color: var(--del); } .diff .ctx { color: var(--muted); }

/* Try it */
.check { max-width: 760px; }
.lbl { display: block; font: 500 13px var(--mono); color: var(--muted); margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; }
.row { display: flex; gap: 10px; }
.row input { flex: 1; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; font: 400 16px var(--mono); }
.row input:focus { border-color: var(--accent); outline: none; }
@media (max-width: 560px) { .row { flex-direction: column; } }
.examples { color: var(--muted); font-size: 14px; margin: 14px 0 0; }
.examples button { background: none; border: 0; padding: 0 10px 0 0; color: var(--ink); font: 400 14px var(--mono); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; cursor: pointer; }
.examples button:hover { text-decoration-color: var(--accent); }
#result { margin-top: 40px; max-width: 900px; }
.res-head h3 a { text-decoration: none; } .res-head .meta { color: var(--muted); font-size: 14px; display: block; margin-top: 6px; }
.sec-t { font: 500 13px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 32px 0 12px; }
.conf, .steps { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.conf li, .steps li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.conf .what { font-weight: 600; } .conf .src { color: var(--muted); font-size: 13px; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 12px; }
.steps .id { color: var(--muted); font: 400 13px var(--mono); } .steps .cmd { font: 400 14px var(--mono); }
.steps .k { grid-column: 2; color: var(--muted); font-size: 13px; } .steps .skip .cmd { color: var(--muted); text-decoration: line-through; }
.none, .err, .next { margin: 12px 0 0; color: var(--muted); } .err { color: var(--del); }
.next { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Skeleton loader for the check result */
.skel { display: grid; gap: 12px; }
.skel i { display: block; height: 14px; background: var(--line); border-radius: var(--r); }
.skel i:nth-child(1) { width: 38%; height: 22px; } .skel i:nth-child(2) { width: 62%; } .skel i:nth-child(3) { width: 88%; } .skel i:nth-child(4) { width: 74%; } .skel i:nth-child(5) { width: 81%; }
@media (prefers-reduced-motion: no-preference) {
  .skel i { animation: skel 1.4s ease-in-out infinite; } .skel i:nth-child(2n) { animation-delay: .2s; }
  @keyframes skel { 50% { opacity: .45; } }
}

/* Reveal: content is visible by default; motion/index.js adds .will-reveal only when JS and motion are allowed */
.will-reveal { opacity: 0; transform: translateY(18px); }
.revealed { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 48px 0 56px; }
.foot-in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: baseline; }
.foot .muted { margin: 0; font-size: 15px; } .foot nav { display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 860px) { .foot-in { grid-template-columns: 1fr; } }

/* Plain pages (terms, privacy) */
.page { max-width: 760px; padding-top: 80px; padding-bottom: 120px; }
.page h1 { font-size: clamp(40px, 6vw, 64px); margin-bottom: 32px; }
.page h2 { font-size: 22px; margin: 40px 0 10px; letter-spacing: -.01em; }
.page p, .page li { color: var(--muted); max-width: 64ch; }

/* ===== v3: Apple/Meta-style motion, colour and shape (Karmanya, 26 Sep 16:40) ===== */
:root {
  --c-scout: #4f8cff; --c-planner: #9b7bff; --c-runner: #ff8a3d; --c-doctor: #ff5c7a; --c-verifier: #2fbf85; --c-scribe: #f5c542;
  --r-card: 22px; --ease: cubic-bezier(.16,1,.3,1);
}

/* Full-bleed hero: big centred type over slowly drifting agent shapes */
.hero-full { position: relative; overflow: hidden; padding: clamp(96px, 16vw, 200px) 0 clamp(64px, 9vw, 110px); text-align: center; border-bottom: 1px solid var(--line); }
.hero-full .eyebrow, .hero-full .lede { margin-left: auto; margin-right: auto; }
.hero-full h1 { font-size: clamp(56px, 11vw, 150px); }
.hero-full .actions { justify-content: center; }
.hero-full .inner { position: relative; z-index: 1; }
.shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.shape { position: absolute; width: var(--s, 96px); height: var(--s, 96px); opacity: .9; will-change: transform; }
.shape svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .shape { animation: drift var(--d, 14s) ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(var(--dx, 24px), var(--dy, -28px), 0) rotate(var(--rot, 18deg)); } }
}
.hero-full .btn { border-radius: 999px; padding: 14px 26px; }

/* Stats that count up */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: 56px auto 0; max-width: 900px; text-align: left; }
.stats > div { background: var(--bg); padding: 26px 28px; }
.stats b { display: block; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -.03em; font-weight: 600; }
.stats span { color: var(--muted); font-size: 15px; display: block; margin-top: 10px; }
.stats > div:nth-child(1) b { color: var(--c-scout); } .stats > div:nth-child(2) b { color: var(--c-doctor); } .stats > div:nth-child(3) b { color: var(--c-verifier); }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr; } }

/* Crew list: each agent wears its colour and shape */
.crew li { grid-template-columns: 72px 1fr; }
.crew .n { display: flex; align-items: center; gap: 10px; }
.crew .glyph { width: 18px; height: 18px; flex: none; }
.crew li:nth-child(1) .n { color: var(--c-scout); } .crew li:nth-child(2) .n { color: var(--c-planner); } .crew li:nth-child(3) .n { color: var(--c-runner); }
.crew li:nth-child(4) .n { color: var(--c-doctor); } .crew li:nth-child(5) .n { color: var(--c-verifier); } .crew li:nth-child(6) .n { color: var(--c-scribe); }

/* Horizontal proof gallery, Apple "Explore the lineup" style: large cards, the next one peeks in */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 820px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px var(--gutter) 28px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: thin; }
/* A thin scrollbar in the page's own colours: the default white bar broke the paper look under the gallery. */
.gallery { scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: 6px; }
.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-track { background: transparent; }
.gallery::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.gallery::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.gallery > * { scroll-snap-align: start; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg); overflow: hidden; display: flex; flex-direction: column; }
.gallery .cap { padding: 22px 26px 26px; }
.gallery .cap h3 { font-size: 22px; margin-bottom: 8px; } .gallery .cap p { color: var(--muted); margin: 0 0 14px; }
.gallery .tag { display: inline-block; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; margin-bottom: 14px; }
.gallery .diff { border: 0; border-radius: 0; flex: 1; font-size: 15px; padding: 32px; }
.gallery .big { flex: 1; display: grid; place-items: center; padding: 48px 32px; font-size: clamp(72px, 10vw, 140px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.gallery-nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: -8px; }
.gallery-nav button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: 500 18px var(--sans); cursor: pointer; }
.gallery-nav button:hover { border-color: var(--ink); }
.shot { border-radius: var(--r-card); }

/* Stronger Apple-style reveal: longer rise, slight scale, slower settle */
.will-reveal { opacity: 0; transform: translateY(44px) scale(.985); }
.revealed { transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
h2.revealed { transition-duration: 1.2s; }

/* ===== v4: premium polish (emil-design-eng: custom curves, press feedback, stagger + blur, clip reveals) ===== */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }
html { -webkit-tap-highlight-color: transparent; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--ink); }
h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; }
section[id] { scroll-margin-top: 80px; }

/* Press feedback on everything pressable (not hover motion: it answers the user's press) */
.btn, .theme, .gallery-nav button, .examples button { transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.btn:active, .theme:active, .gallery-nav button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .top nav a { transition: color 200ms ease; } }

/* Hero entrance: staggered rise that sharpens out of a slight blur, once, on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-full .inner > * { animation: rise 900ms var(--ease-out) both; }
  .hero-full .inner > :nth-child(1) { animation-delay: 60ms; }
  .hero-full .inner > :nth-child(2) { animation-delay: 140ms; }
  .hero-full .inner > :nth-child(3) { animation-delay: 240ms; }
  .hero-full .inner > :nth-child(4) { animation-delay: 320ms; }
  .hero-full .inner > :nth-child(5) { animation-delay: 400ms; }
  .hero-full .shape { opacity: 0; animation: shape-in 1400ms var(--ease-out) 300ms forwards, drift var(--d, 14s) ease-in-out 1700ms infinite alternate; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
  @keyframes shape-in { from { opacity: 0; transform: scale(0.9); } to { opacity: .9; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .hero-full .inner > * { animation: fade 400ms ease both; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}

/* Scroll reveal: rise + clear a small blur (masks the crossfade) */
.will-reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); }
.revealed { opacity: 1; transform: none; filter: blur(0); transition: opacity 900ms var(--ease-out), transform 1000ms var(--ease-out), filter 900ms var(--ease-out); }

/* Image wipes up into view once (clip-path reveal) */
.clip-hidden { clip-path: inset(0 0 100% 0); }
.clip-shown { clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--ease-in-out); }

/* Shapes: a gentle 3D tilt layer driven by a spring from the pointer (site.js) */
.shapes { perspective: 900px; }
.shape svg { transition: none; }

/* ===== v5: Apple typography (Karmanya) =====
   Apple's own pages use SF Pro Display/Text. It is licensed and can't be embedded, so we use the system stack:
   Apple devices render real SF Pro, Windows renders Segoe UI Variable. Metrics copied from apple.com/airpods-pro:
   headlines 600 with near-zero tracking, body 17px / 25px with -0.022em. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
}
body { font-size: 17px; line-height: 1.47059; letter-spacing: -0.022em; font-feature-settings: "kern"; }
h1, h2, h3 { font-weight: 600; }
h1 { letter-spacing: -0.015em; line-height: 1.05; }
.hero-full h1 { font-size: clamp(56px, 10.5vw, 136px); letter-spacing: -0.02em; }
h2 { letter-spacing: -0.009em; line-height: 1.1; }
h3 { letter-spacing: -0.012em; }
.lede { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.42; letter-spacing: -0.012em; font-weight: 400; }
.eyebrow { font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 19px; }
.stats b { letter-spacing: -0.015em; }
.btn { font-weight: 400; font-size: 17px; letter-spacing: -0.022em; }
.eyebrow.mono { font-family: var(--sans); }

/* ===== v6: generative hero field (assets/hero-field.js) replaces the flat shapes ===== */
.hero-full .field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-full .inner { position: relative; z-index: 1; }
/* Keep the headline crisp over moving particles: a soft backing wash, not a box */
.hero-full h1, .hero-full .lede, .hero-full .eyebrow { text-shadow: 0 0 24px var(--bg), 0 0 48px var(--bg); }
.hero-full { min-height: min(92vh, 980px); display: flex; align-items: center; }
.hero-full .inner { width: 100%; }

/* ===== v7: live audit wall (assets/wall.js) ===== */
.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 14px; perspective: 1200px; }
@media (max-width: 980px) { .wall { grid-template-columns: repeat(2, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); text-decoration: none; color: var(--ink); min-height: 132px; position: relative; overflow: hidden; }
.tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--v); }
.tile .v { font: 600 12px var(--mono); letter-spacing: .04em; color: var(--v); }
.tile .n { font-weight: 600; font-size: 15px; line-height: 1.3; word-break: break-word; }
.tile .b { margin-top: auto; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.dots { display: inline-flex; gap: 3px; } .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-doctor); } .dots i.ok { background: var(--c-verifier); }
.tile:active { transform: scale(0.98); }
.wall-note { font-size: 14px; margin: 0 0 48px; }
@media (prefers-reduced-motion: no-preference) {
  .wall:not(.in) .tile { opacity: 0; transform: rotateX(-68deg) translateY(24px); }
  .wall.in .tile { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 45ms); transform-origin: 50% 0; }
}

/* ===== v8: Oat · Blue · Hot pink (Karmanya) =====
   Oat is the default look (never #fff); blue means proven/fixed and is the primary action; hot pink means broken.
   The theme toggle switches to a deep-navy night version. Agent colours are remapped into the same family. */
:root, :root:not([data-theme="dark"]) {
  --bg: #eae4d7; --surface: #dfd7c8; --line: #cec4b2;
  --ink: #15163a; --muted: #5f5b6b;
  --blue: #2440ff; --pink: #ff2d87;
  --accent: var(--blue); --accent-ink: #eae4d7; --del: var(--pink);
  --c-scout: #2440ff; --c-planner: #6a5cff; --c-runner: #ff5fa8; --c-doctor: #ff2d87; --c-verifier: #2440ff; --c-scribe: #15163a;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d0f2e; --surface: #141742; --line: #262a5c;
  --ink: #efe7da; --muted: #a7a3b8;
  --blue: #5b73ff; --pink: #ff4d9b;
  --accent: var(--blue); --accent-ink: #0d0f2e; --del: var(--pink);
  --c-scout: #5b73ff; --c-planner: #8f84ff; --c-runner: #ff7ab8; --c-doctor: #ff4d9b; --c-verifier: #5b73ff; --c-scribe: #efe7da;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #eae4d7; --surface: #dfd7c8; --line: #cec4b2; --ink: #15163a; --muted: #5f5b6b; --accent: var(--blue); --accent-ink: #eae4d7; } }

/* Static poster frame for hero when prefers-reduced-motion is active */
.hero-poster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blue) 5%, transparent), transparent 65%);
}
:root[data-theme="dark"] .hero-poster {
  background-image: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 65%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-full canvas.field { display: none !important; }
}
.eyebrow { color: var(--pink); }
.btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.link { text-decoration-color: var(--pink); }
.stats > div:nth-child(1) b { color: var(--blue); } .stats > div:nth-child(2) b { color: var(--pink); } .stats > div:nth-child(3) b { color: var(--blue); }
.dots i { background: var(--pink); } .dots i.ok { background: var(--blue); }
.diff .add { color: var(--blue); } .diff .del { color: var(--pink); }
.hero-full h1, .hero-full .lede, .hero-full .eyebrow { text-shadow: 0 0 28px var(--bg), 0 0 56px var(--bg); }
::selection { background: color-mix(in srgb, var(--pink) 30%, transparent); }

/* ===== v9: back inside Karmanya's anti-vibecode list (radius, shadows, purple, stripes, boxes, pastels) ===== */
:root { --r: 2px; --r-card: 2px; }
.btn, .hero-full .btn, .gallery-nav button, .gallery > *, .shot, .tile, .stats { border-radius: 2px; }
.hero-full h1, .hero-full .lede, .hero-full .eyebrow { text-shadow: none; }
.tile::before { content: none; }
/* Stats as figures in the type, not three cards: no boxes, no dividers */
.stats.figures { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px; background: none; border: 0; border-radius: 0; overflow: visible; }
.stats.figures > div { background: none; padding: 0; text-align: center; }
.stats.figures span { max-width: 18ch; margin-left: auto; margin-right: auto; }
/* No purple, no pastels: planner is a deep blue, night variants are solid, not light tints */
:root, :root:not([data-theme="dark"]) { --c-planner: #1b2bb8; --c-runner: #ff2d87; }
:root[data-theme="dark"] { --c-planner: #3a4df0; --c-runner: #ff2d87; --c-doctor: #ff2d87; --pink: #ff2d87; --blue: #4b63ff; }

/* ===== v10: Bricolage Grotesque for display, the system (Apple) stack for body and UI (Karmanya) ===== */
:root { --display: "Bricolage Grotesque", var(--sans); }
h1, h2, h3, .stats b, .gallery .big, .mark {
  font-family: var(--display);
  font-optical-sizing: auto;               /* Bricolage's opsz axis: tighter, more characterful at display sizes */
}
h1 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
.hero-full h1 { font-size: clamp(48px, 6.8vw, 84px); letter-spacing: -0.032em; font-weight: 700; line-height: 1.04; font-variation-settings: "opsz" 96; }
h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.04; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
.stats b, .gallery .big { font-weight: 800; letter-spacing: -0.04em; }
.mark { font-weight: 800; letter-spacing: 0.02em; font-size: 17px; }
/* body, eyebrows, buttons, nav and code stay on the system stack (SF Pro / Segoe UI Variable) */
h1 { letter-spacing: -0.025em; } h2 { letter-spacing: -0.022em; font-weight: 650; }
.stats b, .gallery .big { letter-spacing: -0.03em; font-weight: 750; }

/* ===== v11: scroll-scrubbed real run (assets/scrub.js), Apple's scroll-scrub applied to our recording ===== */
.scrub { position: relative; height: 460vh; padding: 0; border-top: 1px solid var(--line); }
.scrub-stick { position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; align-items: center; overflow: hidden; }
.scrub-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: center; width: 100%; }
.scrub-meta h2 { font-size: clamp(34px, 4.4vw, 60px); margin-bottom: 22px; }
.scrub-phase { font-weight: 600; font-size: 19px; margin: 0 0 26px; min-height: 1.5em; transition: color 300ms var(--ease-out); }
.scrub[data-state="fail"] .scrub-phase, .scrub[data-state="doctor"] .scrub-phase { color: var(--pink); }
.scrub[data-state="fix"] .scrub-phase, .scrub[data-state="reset"] .scrub-phase, .scrub[data-state="replay"] .scrub-phase, .scrub[data-state="done"] .scrub-phase { color: var(--blue); }
.scrub-count { display: flex; gap: 40px; margin: 0 0 26px; }
.scrub-count dt { color: var(--muted); font-size: 14px; } .scrub-count dd { margin: 4px 0 0; font: 750 44px/1 var(--display); letter-spacing: -0.03em; }
.scrub-count div:nth-child(1) dd { color: var(--pink); } .scrub-count div:nth-child(2) dd { color: var(--blue); }
.scrub-src { font-size: 14px; }
.scrub-window { height: min(68vh, 620px); overflow: hidden; border-left: 1px solid var(--line); padding-left: 28px; }
.scrub-feed { list-style: none; margin: 0; padding: 0; transition: transform 500ms var(--ease-out); }
.beat { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 12px 0; opacity: .14; transition: opacity 400ms var(--ease-out); }
.beat.on { opacity: .55; } .beat.now { opacity: 1; }
.beat .dot { width: 10px; height: 10px; margin-top: 6px; background: var(--muted); border-radius: 50%; }
.beat b { display: block; font: 500 15px var(--mono); letter-spacing: 0; word-break: break-word; }
.beat span { color: var(--muted); font-size: 14px; }
.k-fail .dot, .k-doctor .dot { background: var(--pink); } .k-fail b { color: var(--pink); }
.k-fix .dot, .k-pass .dot, .k-replay .dot { background: var(--blue); }
.k-doctor b, .k-fix b, .k-reset b { font-family: var(--sans); font-weight: 600; }
.k-reset { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0; padding: 16px 0; }
.k-reset .dot { background: var(--ink); }
.k-done b { font: 750 34px/1 var(--display); color: var(--blue); letter-spacing: -0.02em; }
.k-done .dot { background: var(--blue); width: 14px; height: 14px; margin-top: 10px; }
@media (max-width: 860px) { .scrub-grid { grid-template-columns: 1fr; gap: 20px; } .scrub-window { height: 44vh; border-left: 0; padding-left: 0; } .scrub-count dd { font-size: 32px; } }
.scrub.static { height: auto; padding: 96px 0; } .scrub.static .scrub-stick { position: static; height: auto; } .scrub.static .scrub-window { height: auto; } .scrub.static .beat { opacity: 1; }

/* ===== v12: Futura body (Karmanya): real Futura where the device has it (macOS/iOS ship it), otherwise Jost,
   the open-source Futura revival. Bricolage Grotesque stays on display. Futura's geometric forms set a touch
   larger and looser than SF: 18px body, +0.005em. ===== */
:root { --sans: "Futura", "Futura PT", "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", system-ui, sans-serif; }
body { font-size: 18px; line-height: 1.55; letter-spacing: 0.005em; }
.lede { letter-spacing: 0.002em; line-height: 1.45; }
.btn { letter-spacing: 0.01em; font-weight: 500; }
.eyebrow { font-weight: 500; letter-spacing: 0.02em; }
.top nav a, .foot nav a { letter-spacing: 0.01em; }

/* ===== v13: Before / After README Slider (Zeus) ===== */
.card-diff-slider {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.diff-slider {
  position: relative;
  width: 100%;
  min-height: 290px;
  background: var(--surface);
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
  overflow: hidden;
}
.diff-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  box-sizing: border-box;
}
.diff-after {
  background: var(--surface);
  z-index: 1;
}
.diff-before {
  background: var(--bg);
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0);
  border-right: 1px solid var(--line);
}
.diff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
  font-size: 12px;
}
.diff-pill {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pill-before {
  background: rgba(255, 45, 135, 0.12);
  color: var(--pink, #ff2d87);
  border: 1px solid var(--pink, #ff2d87);
}
.pill-after {
  background: rgba(36, 64, 255, 0.12);
  color: var(--blue, #2440ff);
  border: 1px solid var(--blue, #2440ff);
}
.diff-after .diff-header {
  flex-direction: row-reverse;
}
.diff-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.diff-code {
  flex: 1;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
  overflow: hidden;
}
.c-comment { color: var(--muted); opacity: 0.8; }
.c-add { color: var(--blue, #2440ff); font-weight: 600; }
.c-del { color: var(--pink, #ff2d87); font-weight: 600; }
.c-err { color: var(--pink, #ff2d87); font-size: 11.5px; font-weight: 500; font-family: var(--mono); }
.c-dim { color: var(--muted); font-style: italic; opacity: 0.65; font-size: 12px; }
.c-ctx { color: var(--ink); }
.c-sym { display: inline-block; width: 14px; font-weight: 700; }

.diff-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split, 50%);
  width: 32px;
  transform: translateX(-50%);
  z-index: 10;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.diff-handle:focus-visible .handle-knob {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--ink);
  transform: translateX(-50%);
  opacity: 0.85;
}
.handle-knob {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.diff-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  opacity: 0.7;
  pointer-events: none;
  z-index: 5;
}

/* --- Web Interface Guidelines & Polish --- */
h1, h2, h3 {
  text-wrap: balance;
}
.figures b, .scrub-count dd, .diff-meta, .h-time-indicator, .c-agent-idx {
  font-variant-numeric: tabular-nums;
}
section[id] {
  scroll-margin-top: 80px;
}

/* --- Thinking Orbs & Interactive Agent Console --- */
.hero-agents {
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-agents-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.agent-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0; /* a comfortable tap target */
}
a.agent-live-tag:hover, a.agent-live-tag:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.agent-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.hero-agents-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 960px) {
  .hero-agents-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 520px) {
  .hero-agents-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.agent-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  text-align: center;
  transition: border-color 160ms var(--ease-out), background-color 160ms ease, transform 120ms ease;
  touch-action: manipulation;
  color: inherit;
  font: inherit;
}
.agent-chip:hover {
  border-color: var(--muted);
  background: var(--bg);
}
.agent-chip:active {
  transform: scale(0.97);
}
.agent-chip:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.agent-chip.active {
  border-color: var(--ink);
  background: var(--bg);
}
.agent-chip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 11px;
}
.agent-chip-id {
  font-weight: 700;
  font-size: 11px;
}
.agent-chip-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.agent-chip-orb {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agent-chip-orb canvas {
  width: 44px;
  height: 44px;
  display: block;
}
.agent-chip-role {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
}
.crew-role {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 6px;
  letter-spacing: 0.02em;
}

.crew-orb-wrap {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 2px;
}
.crew-orb-wrap canvas {
  width: 48px;
  height: 48px;
  display: block;
}
.crew li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* ==========================================================================
   THREAD GUIDE — Hero Panel
   ========================================================================== */

.thread-guide-panel {
  margin: 44px auto 0;
  max-width: 860px;
  width: 100%;
  text-align: left;
}

.thread-guide-header {
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line);
}

.thread-guide-header .eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
}

.thread-guide-headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.thread-guide-sub {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  max-width: 60ch;
}

.thread-guide-footer {
  padding: 12px 28px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 600px) {
  .thread-guide-header {
    padding: 18px 16px 14px;
  }
  .thread-guide-footer {
    padding: 10px 16px;
  }
}

/* The thread guide panel inside the hero */
.hero-full .thread-guide-panel { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
#thread-guide-mount { flex-direction: column; align-items: center; position: relative; gap: 4px; }
#thread-guide-mount .thread-panel { width: 100%; max-width: 560px; }

/* ==========================================================================
   PROVE IT LIVE — Hero Verification Panel (REMOVED - replaced by thread guide)
   ========================================================================== */
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font: 13px var(--mono);
  padding: 10px 14px;
  outline: none;
  min-width: 0;
}

.prove-input:focus {
  border-color: var(--accent);
}

.prove-btn {
  background: var(--brand-electric, var(--blue, #1f3bff)) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  font: 600 13px var(--mono) !important;
  padding: 10px 22px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.prove-btn:hover {
  opacity: 0.9;
  background: var(--brand-electric, var(--blue, #1f3bff)) !important;
  color: #fff !important;
}

.prove-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

/* Construction-line motifs */
.construction-corner {
  position: relative;
}
.construction-corner::before,
.construction-corner::after {
  content: "+";
  position: absolute;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand-line);
  pointer-events: none;
  z-index: 4;
}
.construction-corner::before {
  top: -7px;
  left: -5px;
}
.construction-corner::after {
  bottom: -7px;
  right: -5px;
}

/* ===== v13 (Edith): the self-healing opener (#heal, heal.js). The raw layer deliberately looks unstyled
   (browser-default serif, Courier), HUMBLE's annotations cut into it in the site's type; then it heals. ===== */
.heal[hidden] { display: none; }
.heal { position: relative; height: 620vh; }
.heal-stick { position: sticky; top: 64px; height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); overflow: hidden; }
.heal-doc { position: relative; }
.heal-raw { font-family: "Times New Roman", Times, serif; font-size: 17px; line-height: 1.35; color: var(--ink); transition: opacity 400ms var(--ease-out); }
.heal-raw h1 { font: 700 32px/1.15 "Times New Roman", Times, serif; margin: 0 0 12px; letter-spacing: 0; }
.heal-raw p { margin: 0 0 14px; max-width: none; font: inherit; }
.heal-raw pre { font: 14.5px/1.5 "Courier New", Courier, monospace; margin: 0; white-space: pre-wrap; }
.heal-raw .ln { display: block; position: relative; transform-origin: 0 0; padding: 0 4px; margin: 0 -4px; transition: background-color 240ms ease, color 240ms ease; }
.heal-raw .ln .t { display: inline-block; transform-origin: 0 0; }
.heal-raw .ln.gap { height: 1.2em; }
.heal-raw .ln.cm { color: color-mix(in srgb, var(--ink) 62%, var(--bg)); }
.heal-raw .ln.add { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--ease-out), opacity 420ms var(--ease-out), background-color 240ms ease; color: var(--blue); font-weight: 700; }
.heal-raw .ln.add > * { overflow: hidden; }
.heal-raw .ln.add.hid { grid-template-rows: 0fr; opacity: 0; }
.heal-raw .ln.add .t::before { content: "+ "; }
.heal-raw .ln.now { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.heal-raw .ln.fail { background: color-mix(in srgb, var(--pink) 13%, transparent); }
.heal-raw .ln.struck .t { text-decoration: line-through 2px var(--pink); color: var(--pink); }
.heal-raw .ln.assume { background: color-mix(in srgb, var(--pink) 13%, transparent); color: var(--pink); }
.heal-raw .res { display: block; font: 500 12.5px/1.45 var(--mono); padding: 1px 0 5px 2ch; }
.heal-raw .res:empty { display: none; }
.heal-raw .res i { display: block; font-style: normal; opacity: .9; }
.heal-raw .res.r-fail { color: var(--pink); }
.heal-raw .res.r-pass { color: var(--blue); }
.heal-raw .res.r-skip { color: var(--muted); }
.heal-raw .res.r-fail, .heal-raw .res.r-pass { animation: heal-in 360ms var(--ease-out) both; }
@keyframes heal-in { from { opacity: 0; transform: translateY(-4px); filter: blur(2px); } }
.heal-raw .stamp { position: absolute; right: 2%; top: 38%; font: 800 clamp(44px, 7vw, 96px)/1 var(--display); letter-spacing: -.02em; color: var(--blue); border: 4px solid var(--blue); border-radius: 2px; padding: 6px 18px 10px; transform: rotate(-7deg) scale(1.25); opacity: 0; transition: opacity 260ms var(--ease-out), transform 420ms cubic-bezier(.2,1.6,.4,1); pointer-events: none; transform-origin: 50% 50%; }
.heal-raw.stamped .stamp { opacity: 1; transform: rotate(-7deg) scale(1); }
.heal-raw.replay .ln.struck { opacity: .35; }

.heal-done { position: absolute; inset: 0 0 auto 0; pointer-events: none; }
.heal.healed .heal-done { pointer-events: auto; }
.heal-done [data-k] { transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.heal-done .kicker { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; transition: opacity 300ms ease; opacity: 0; }
.heal.healed .heal-done .kicker { opacity: 1; }
.heal-done h2 { font: 700 clamp(40px, 5.2vw, 72px)/.98 var(--display); letter-spacing: -.03em; margin: 0 0 16px; }
.heal-done .lede { font: 400 19px/1.5 var(--sans); color: var(--muted); margin: 0 0 22px; max-width: 46ch; }
.heal-done .cmds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.heal-done .cmds li { font: 500 15.5px/1.6 var(--mono); }
.heal-done .cmds li.cm { font: 400 14px/1.5 var(--sans); color: var(--muted); margin-top: 10px; }
.heal-done .cmds li.add { color: var(--blue); }
.heal-done .cmds li b { display: inline-block; width: 2ch; font-weight: 700; }
.heal-done .proof { margin: 22px 0 0; font-size: 13px; color: var(--blue); border-top: 1px solid var(--line); padding-top: 14px; }

.heal-panel { display: grid; gap: 14px; align-content: center; }
.heal-panel p { margin: 0; max-width: none; }
.heal-panel .phase { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.heal[data-beat="2"] .phase, .heal[data-beat="6"] .phase, .heal[data-beat="8"] .phase, .heal[data-beat="10"] .phase { color: var(--pink); }
.heal-panel .cap { font: 700 clamp(28px, 3.2vw, 46px)/1.04 var(--display); letter-spacing: -.025em; text-wrap: balance; min-height: 3.2em; }
.heal-panel .doctor { font-size: 15.5px; line-height: 1.5; border-top: 1px solid var(--line); padding-top: 12px; }
.heal-panel .doctor b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--pink); margin-bottom: 4px; }
.heal-panel .count { display: flex; gap: 28px; font-size: 15px; color: var(--muted); }
.heal-panel .count b { display: block; font: 700 clamp(44px, 5vw, 68px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.heal-panel .count span:first-child b { color: var(--pink); }
.heal-panel .count span:last-child b { color: var(--blue); }
.heal-panel .src { font-size: 12px; color: var(--muted); }
.heal-panel .heal-out { font-size: 17px; opacity: 0; }
.heal-panel .bar { height: 2px; background: var(--line); overflow: hidden; }
.heal-panel .bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.heal-panel .skipintro { font-size: 12.5px; color: var(--muted); justify-self: start; }
.heal-panel .skipintro:hover { color: var(--ink); }
.heal.healing .heal-panel .doctor { display: none; }

.heal.static { height: auto; }
.heal.static .heal-stick { position: static; height: auto; padding-block: 64px; }
.heal.static .heal-raw { display: none; }
.heal.static .heal-done { position: static; }
.heal.static .heal-panel .bar, .heal.static .heal-panel .skipintro { display: none; }

@media (max-width: 900px) {
  .heal { height: 700vh; }
  .heal-stick { grid-template-columns: 1fr; align-content: start; gap: 14px; padding-top: 16px; }
  .heal-panel { order: -1; gap: 8px; }
  .heal-panel .cap { font-size: 24px; min-height: 2.2em; }
  .heal-panel .count b { font-size: 34px; }
  .heal-panel .src, .heal-panel .doctor { display: none; }
  .heal-raw { font-size: 15px; } .heal-raw h1 { font-size: 24px; } .heal-raw pre { font-size: 12.5px; }
  .heal-raw .ln.cm:not(.assume) { display: none; }
  .heal-done h2 { font-size: 36px; } .heal-done .lede { display: none; }
}
.heal-raw .res { display: inline; padding: 0; margin-left: 2ch; }
.heal-raw .res i { display: block; padding: 0 0 4px 2ch; }
.heal-done h2 { font-size: clamp(34px, 3.8vw, 56px); margin-bottom: 10px; }
.heal-done .lede { font-size: 16px; margin-bottom: 14px; }
.heal-done .cmds li { font-size: 14px; line-height: 1.45; }
.heal-done .cmds li.cm { font-size: 12.5px; margin-top: 7px; }
.heal-done .proof { margin-top: 14px; padding-top: 10px; }

/* ===== v14 (Edith): the HUMBLE intro (intro.js). A drafting board after alche.studio's outro: hairline guides,
   each agent's name condenses to its letter, and the letters spell HUMBLE. Palette only, no shadows. ===== */
.intro { display: none; }
html.js .intro { display: block; position: fixed; inset: 0; z-index: 50; pointer-events: auto; }
html.intro-on { overflow: hidden; }
html.intro-on .top .mark { opacity: 0; }
.intro-board { position: absolute; inset: 0; background: var(--bg); }
.intro-guides { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-guides line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.intro-guides line.faint { stroke-dasharray: 1; opacity: .55; }
.intro-guides .compass { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 2 5; transform-box: fill-box; transform-origin: center; opacity: .9; }
.intro-word { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: 38%; translate: 0 -50%; display: flex; gap: .02em;
  font: 800 clamp(64px, 15vw, 220px)/1 var(--display); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; transform-origin: 0 50%; }
.intro-word span { display: inline-block; min-width: .56em; text-align: center; opacity: 0; }
.intro-word span.in { opacity: 1; }
.intro-stage { position: absolute; left: 0; right: 0; top: 66%; display: grid; justify-items: center; gap: 10px; }
.intro-name { display: flex; font: 750 clamp(40px, 8vw, 116px)/1 var(--display); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.intro-name span { display: inline-block; overflow: hidden; }
.intro-name span.hot { color: var(--pink); }
.intro-role { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.intro-skip { position: absolute; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 28px); background: none; border: 0; padding: 6px 0;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.intro-skip:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .intro-word span { opacity: 1; } }
.intro-stage { display: block; height: 1px; }
.intro-agent { position: absolute; left: 0; right: 0; top: 0; display: grid; justify-items: center; gap: 10px; }

/* ===== v15 (Edith): the intro is scroll-driven, not a video. A pinned section; scroll moves H to E. ===== */
html.js .intro { display: block; position: relative; inset: auto; z-index: auto; height: calc(100vh + 6 * 55vh); pointer-events: auto; }
.intro-stick { position: sticky; top: 64px; height: calc(100vh - 64px); overflow: hidden; background: var(--bg); }
.intro-word { top: 34%; }
.intro-stage { position: absolute; left: 0; right: 0; top: 64%; }
.intro-guides line { stroke-dasharray: 1; }
.intro-hint { position: absolute; left: 0; right: 0; bottom: clamp(20px, 5vh, 44px); margin: 0 auto; max-width: none; text-align: center;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.intro.static { height: auto; }
.intro.static .intro-stick { position: static; height: 50vh; }
.intro.static .intro-hint, .intro.static .intro-stage { display: none; }
.intro-word span { opacity: 0; }

/* ===== v16 (Edith): dark mode is "roasted oat", not navy (Karmanya: the plain blue isn't cutting it). A warm
   espresso near-black from the oat family, so blue and hot pink read cleanly; never pure black, no purple.
   A faint film grain (texture, not a pattern) keeps large areas from looking flat. ===== */
:root[data-theme="dark"] {
  --bg: #16120e; --surface: #1f1a15; --line: #342c24;
  --ink: #efe7da; --muted: #a89b88;
  --blue: #5b73ff; --pink: #ff4d9b;
  --accent: var(--blue); --accent-ink: #16120e; --del: var(--pink);
  --c-scout: #5b73ff; --c-planner: #3a4df0; --c-runner: #ff4d9b; --c-doctor: #ff4d9b; --c-verifier: #5b73ff; --c-scribe: #efe7da;
}
:root[data-theme="dark"] body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .88  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* v17 (Edith): "Scroll through a real run" removed (it repeated the self-healing opener); the opener gets a shorter
   scroll now that it is the one run walkthrough on the page. */
.heal { height: 480vh; }
@media (max-width: 900px) { .heal { height: 560vh; } }

/* v18 (Edith): the 5-second story. The intro's first frame says what HUMBLE does before any scrolling. */
html.js .intro { height: calc(100vh + 6 * 55vh + 25vh); }
.intro-promise { position: absolute; left: 0; right: 0; top: 58%; padding: 0 clamp(16px, 4vw, 40px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.intro-line { margin: 0; max-width: none; font: 700 clamp(26px, 3.6vw, 48px)/1.08 var(--display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.intro-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.intro-steps li { counter-increment: s; }
.intro-steps li::before { content: "0" counter(s) " "; color: var(--blue); font-weight: 600; }
.intro.static .intro-promise { position: static; margin-top: 24px; }
@media (max-width: 700px) { .intro-steps { flex-direction: column; align-items: center; gap: 6px; } .intro-promise { top: 54%; } }

/* v19 (Edith): the README breaks and heals with more force. Once-per-event motion, GPU only, never looped. */
.heal-raw { position: relative; }
.heal-raw .ln.fail .t { animation: heal-glitch 460ms steps(1, end) 1; }
@keyframes heal-glitch {
  0% { transform: none; clip-path: none; }
  12% { transform: translateX(-5px); clip-path: inset(8% 0 58% 0); }
  24% { transform: translateX(6px); clip-path: inset(52% 0 12% 0); }
  36% { transform: translateX(-3px); clip-path: inset(28% 0 38% 0); }
  48% { transform: translateX(2px); clip-path: none; }
  60%, 100% { transform: none; clip-path: none; }
}
.heal-raw.scan::after { content: ""; position: absolute; left: -3%; right: -3%; top: 0; height: 2px; background: var(--pink);
  animation: heal-scan 1100ms cubic-bezier(.45, 0, .2, 1) both; pointer-events: none; }
@keyframes heal-scan {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(var(--scan-h, 400px)); opacity: 0; }
}
.heal-raw .ln.add:not(.hid) .t { animation: heal-reset 520ms cubic-bezier(.23, 1, .32, 1) both; }
@keyframes heal-reset { from { opacity: 0; filter: blur(4px); transform: scaleX(1.12); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) { .heal-raw .ln.fail .t, .heal-raw .ln.add .t { animation: none; } .heal-raw.scan::after { display: none; } }

/* ===== v17 (Zeus): 3-step visual & alche.studio typography & clean crew cards ===== */
.hero-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 16px;
  margin: 52px auto 0;
  max-width: 960px;
  width: 100%;
}
.flow-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 2px);
  padding: 22px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color 180ms ease, background-color 180ms ease;
}
.flow-card:hover {
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
}
.flow-num {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
}
.flow-body h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 650;
  color: var(--ink);
}
.flow-body p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.flow-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--line);
  font-size: 22px;
  user-select: none;
  font-family: var(--mono);
}
@media (max-width: 820px) {
  .hero-flow {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 36px;
  }
  .flow-arrow {
    display: none;
  }
}
.agent-chip-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
  margin: 4px 0 0;
  text-align: center;
}


/* v20 (Edith): the intro moves slower: more scroll per agent (Arnav: "not this fast"). */
html.js .intro { height: calc(100vh + 6 * 80vh + 35vh); }

/* ===== v21 (Edith): alche.studio's design language, in HUMBLE's palette. One site-wide liquid background (fluid.js)
   that ripples a beat behind the cursor, and two full-height hairline column rules. ===== */
html.has-fluid { background: var(--bg); }
html.has-fluid body { background: transparent; }
.fluid-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
html.has-fluid body > *:not(.fluid-bg) { position: relative; z-index: 1; }
html.has-fluid .top { position: sticky; z-index: 5; }
html.has-fluid .intro-stick { background: transparent; }
html::after { content: ""; position: fixed; top: 0; bottom: 0; left: 33.333%; right: 33.333%; z-index: 0; pointer-events: none;
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
@media (max-width: 700px) { html::after { left: 50%; right: auto; border-right: 0; } }

/* v22 (Edith): alche-style section headers and the construction-line outro (sections.js). */
.sec-head { display: grid; gap: 10px; margin: 0 0 18px; }
.sec-index { margin: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.sec-index span { color: var(--blue); }
.sec-rule { display: block; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms cubic-bezier(.23, 1, .32, 1); }
.sec-head.drawn .sec-rule { transform: scaleX(1); }
.outro { position: relative; padding: clamp(80px, 14vh, 160px) clamp(16px, 4vw, 40px) clamp(48px, 8vh, 96px); text-align: center; overflow: hidden; }
.outro-guides { position: absolute; left: 0; right: 0; top: clamp(80px, 14vh, 160px); width: 100%; height: clamp(160px, 22vw, 320px); pointer-events: none; }
.outro-guides .g { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 1400ms cubic-bezier(.23, 1, .32, 1); }
.outro-guides .v { transition-delay: 150ms; }
.outro-guides .arc { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 700ms ease 500ms; }
.outro-guides .a2, .outro-guides .a3 { stroke: var(--pink); transition-delay: 700ms; }
.outro-word { position: relative; margin: 0; display: flex; justify-content: center; font: 800 clamp(72px, 19vw, 300px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.outro-word span { display: inline-block; opacity: 0; transform: translateY(18%); filter: blur(8px); transition: opacity 700ms cubic-bezier(.23, 1, .32, 1), transform 900ms cubic-bezier(.23, 1, .32, 1), filter 700ms ease; }
.outro-word span:nth-child(1) { transition-delay: 900ms; } .outro-word span:nth-child(2) { transition-delay: 980ms; } .outro-word span:nth-child(3) { transition-delay: 1060ms; }
.outro-word span:nth-child(4) { transition-delay: 1140ms; } .outro-word span:nth-child(5) { transition-delay: 1220ms; } .outro-word span:nth-child(6) { transition-delay: 1300ms; }
.outro-line { position: relative; margin: 18px 0 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity 700ms ease 1500ms; }
.outro.drawn .g { stroke-dashoffset: 0; } .outro.drawn .arc { opacity: .9; }
.outro.drawn .outro-word span { opacity: 1; transform: none; filter: blur(0); } .outro.drawn .outro-line { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sec-rule { transform: none; } .outro-guides .g { stroke-dashoffset: 0; } .outro-guides .arc, .outro-word span, .outro-line { opacity: 1; transform: none; filter: none; } }

/* ===== v23 (Edith): the visible alche pass. No panels: one continuous liquid field. Giant editorial type, big air,
   content aligned to the column rules, cards become thin-rule rows. ===== */
html.has-fluid .band { background: transparent; border-bottom: 0; }
section.band, section.wrap, #how, #try { padding-top: clamp(120px, 18vh, 220px); padding-bottom: clamp(60px, 10vh, 120px); }
/* Hero: editorial, left-aligned on the first column rule, huge. */
.hero-full { text-align: left; border-bottom: 0; padding: clamp(140px, 22vh, 260px) 0 clamp(80px, 12vh, 140px); }
.hero-full .inner { max-width: none; padding-left: calc(33.333vw - clamp(16px, 4vw, 40px)); padding-right: clamp(16px, 4vw, 40px); }
.hero-full .eyebrow, .hero-full .lede { margin-left: 0; margin-right: 0; }
.hero-full h1 { font-size: clamp(72px, 13.5vw, 232px); line-height: .9; letter-spacing: -.045em; margin: 18px 0 28px; }
.hero-full .lede { max-width: 34ch; font-size: clamp(18px, 1.5vw, 22px); }
.hero-full .actions { justify-content: flex-start; gap: 28px; }
.hero-full .actions .btn { background: none; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 0 0 4px; color: var(--ink); font-weight: 600; }
.hero-full .actions .btn:hover { background: none; color: var(--blue); border-color: var(--blue); }
.hero-full .stats.figures { margin-top: clamp(56px, 9vh, 96px); gap: clamp(32px, 6vw, 96px); }
/* Headings get room; body copy sits in the middle column band. */
section h2 { font-size: clamp(40px, 6vw, 96px); line-height: .95; letter-spacing: -.035em; max-width: 14ch; }
section .sub, section .prose { max-width: 46ch; }
/* Cards → thin-rule rows: no fills, no boxes. */
.gallery article, .gallery figure, .crew li, .agent-chip, .wall .tile, .bob-list li {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; border-radius: 0 !important; box-shadow: none !important; }
.gallery article, .gallery figure { padding-top: 24px; }
@media (max-width: 700px) {
  .hero-full .inner { padding-left: clamp(16px, 4vw, 40px); }
  .c-timeline {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .c-pill {
    padding: 4px 6px !important;
    font-size: 11px !important;
  }
  .c-spotlight {
    grid-template-columns: 1fr !important;
    padding: 16px !important;
    gap: 16px !important;
  }
  .c-shape-hero {
    width: 56px !important;
    height: 56px !important;
  }
  .c-stage-orb {
    width: 52px !important;
    height: 52px !important;
  }
  .hero-agents-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .h-seq {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  .h-step {
    flex-wrap: wrap !important;
  }
  .h-step-cmd {
    flex-basis: 100% !important;
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
  }
  .h-caption {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .heal-stick {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .heal-doc {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }
  .heal-raw pre {
    word-break: break-all !important;
  }
  .c-art-pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
  }
}



/* ── v24: one alignment grid ─────────────────────────────────────────────────────────────────────────────
   The hero now carries the proof panel and the agents row, so it shares the site's centred --wrap column
   instead of hanging off the one-third rule (it ran from 472 to 1481 of a 1521 px window). */
.hero-full .inner { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.hero-full .prove-live { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
/* The HUMBLE console lives inside the hero: the hero's giant h1 rule must not reach its 14 px title, and the
   mount stacks panel, "watch onboarding again" and "skip intro" instead of laying them out in a row. */
#humble-console-mount { flex-direction: column; align-items: center; position: relative; gap: 4px; }
#humble-console-mount .humble-panel { width: 100%; max-width: 560px; }
.hero-full #humble-console-mount h1.humble-title { font-size: 14px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; font-weight: 600; font-variation-settings: normal; text-shadow: none; white-space: nowrap; }
/* The self-healing opener used its own 1240 px box (140-1380 px at 1536 wide); it now sits on the same column. */
.heal-stick { max-width: var(--wrap); padding-left: var(--gutter); padding-right: var(--gutter); }
/* The proof gallery snapped its first card to the gallery edge (200 px) instead of the column (248 px). */
#proof .gallery { scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter); }

/* ── HUMBLE Initial Loader & First Frame Reveal ─────────────────────────── */
.humble-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: var(--bg);
  background-image: 
    linear-gradient(to right, color-mix(in srgb, var(--brand-line) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--brand-line) 14%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  user-select: none;
  cursor: pointer;
  opacity: 1;
  transition: opacity 280ms cubic-bezier(0.23, 1, 0.32, 1);
}

.loader-top {
  height: 64px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
}

.loader-top .wrap {
  width: 100%;
}

.loader-mark {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.loader-brand-svg {
  display: block;
  height: 26px;
  width: auto;
  color: var(--ink);
  fill: currentColor;
}

.loader-brand-svg .draw-path {
  fill: var(--ink);
  fill-opacity: 0;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: loaderDrawMark 450ms cubic-bezier(0.23, 1, 0.32, 1) forwards,
             loaderFillMark 180ms ease 350ms forwards;
}

@keyframes loaderDrawMark {
  to { stroke-dashoffset: 0; }
}

@keyframes loaderFillMark {
  to { fill-opacity: 1; }
}

.loader-wink-group {
  transform-origin: 167px 35px;
  animation: loaderWinkTick 180ms cubic-bezier(0.34, 1.56, 0.64, 1) 380ms forwards;
}

@keyframes loaderWinkTick {
  0% { transform: rotate(0deg); }
  45% { transform: rotate(14deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

.loader-wordmark-group {
  opacity: 0;
  transform: translateX(-8px);
  animation: loaderWordmarkIn 250ms cubic-bezier(0.23, 1, 0.32, 1) 400ms forwards;
}

@keyframes loaderWordmarkIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.loader-hero {
  padding-top: clamp(72px, 12vw, 150px);
  width: 100%;
  flex: 1;
}

.loader-hero .wrap {
  width: 100%;
}

.loader-hero .eyebrow {
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 20px;
}

.loader-hero h1 {
  font-size: clamp(48px, 6.8vw, 84px);
  letter-spacing: -0.032em;
  font-weight: 700;
  line-height: 1.04;
  margin: 0;
  color: var(--ink);
}

.loader-fade {
  opacity: 0;
  transform: translateY(10px);
  animation: loaderFadeUp 300ms cubic-bezier(0.23, 1, 0.32, 1) 350ms forwards;
}

.loader-delay {
  animation-delay: 450ms;
}

@keyframes loaderFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.humble-loader.closing {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .loader-brand-svg .draw-path {
    animation: none !important;
    stroke-dashoffset: 0 !important;
    fill-opacity: 1 !important;
  }
  .loader-wink-group, .loader-wordmark-group, .loader-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .humble-loader.closing {
    transition: opacity 120ms ease !important;
  }
}


/* ── v25: the full proof page (/proof) is the deepest look at a run: the one filled CTA in the hero ── */
.hero-full .actions .btn.btn-proof { background: var(--blue); color: #fff; border: 0; border-radius: 999px; padding: 13px 24px; font-weight: 700;
  box-shadow: 0 12px 30px -14px var(--blue); transition: transform 160ms var(--ease-out), filter 200ms ease; }
.hero-full .actions .btn.btn-proof:hover { background: var(--blue); color: #fff; filter: brightness(1.1); }
.hero-full .actions .btn.btn-proof:active { transform: scale(0.97); }
.proof-cta { font-weight: 700; color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }