/* ============================================================================
   kolm-2026.css — THE DATASHEET MACHINE
   Single clean layer, authored from docs/design/KOLM_DESIGN_SYSTEM.md.
   ----------------------------------------------------------------------------
   One :root token block. One resolved font (Geist Sans + Geist Mono).
   Three-layer model: ROOM (floor) -> GLASS/PLATE (surface) -> CONTENT (ink).
   Elevation is a luminance ladder, never a black drop-shadow. One hue
   (--accent = "in spec", ~3% of pixels, never a button fill). Mono is
   load-bearing for every numeral/price/hex/unit/ID/label. Near-total
   stillness: two curves, four durations, one signature (the Calibration
   Sweep). Everything is prefers-reduced-motion-safe and JS-fail-open.
   Hierarchy is by SPECIFICITY, not an !important war.
   ============================================================================ */

/* ── FONTS — one resolved decision: self-hosted Geist Sans + Geist Mono ── */
@font-face{font-family:Geist;src:url(/fonts/Geist.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  size-adjust:100%;ascent-override:92%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:"Geist Mono";src:url(/fonts/GeistMono.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  size-adjust:100%;ascent-override:92%;descent-override:24%;line-gap-override:0%;}

/* ── TOKENS — the one :root (design system §1) ────────────────────────────── */
:root{
  /* ── ROOM & SURFACES — luminance ladder (never #000, never grey) ── */
  --room:#08090A;        /* floor / page bg — locked brand equity        */
  --panel:#0F1011;       /* default plate the artifact rests on           */
  --register:#15171A;    /* raised register-fill / lifted/hovered card    */
  --engraved:#1B1E22;    /* engraved-label plate / keyline-fill (highest) */
  --well:#0C0D0E;        /* sunk code/console floor (the one darker step) */
  --paper:#F4F2EC;       /* the ONE lit object — artifact sheet only      */
  /* ── INK RAMP — cool-white readout ── */
  --ink:#F7F8F8;         /* primary text / brightest UI value             */
  --ink-2:#D0D6E0;       /* secondary / lede / body                       */
  --ink-3:#8A8F98;       /* muted, captions, units (floor for legible)    */
  --ink-4:#62666D;       /* LARGE-TEXT-ONLY (≥24px/19px-bold) + non-text marks; never body/labels */
  --ink-faint:#3A3D42;   /* microprint, near-floor (decorative only, zero readable content) */
  /* ── HAIRLINES — translucent foreground, never grey hex ── */
  --line:rgba(255,255,255,.07);       /* default rule                     */
  --line-2:rgba(255,255,255,.12);     /* register divider / ring          */
  --line-top:rgba(255,255,255,.16);   /* top-light specular bevel         */
  /* ── ACCENT — verdict / in-spec ONLY, ~3% of pixels ── */
  --accent:#3FE5A0;                                  /* VERIFIED / IN SPEC, full only */
  --accent-scan:color-mix(in oklab,#3FE5A0 22%,transparent); /* live scan-line */
  --accent-idle:#23493B;                             /* dimmed-phosphor inert sibling */
  --accent-dead:oklch(83% 0.04 163);                 /* out-of-tolerance / error */
  --accent-glow:#3FE5A033;                            /* the ONLY glow on the page */
  --accent-wash:#3FE5A011;                            /* single atmospheric backlight */
  --accent-soft:#3FE5A014;                            /* verified chip fill (faint)    */
  --accent-edge:color-mix(in oklab,#3FE5A0 30%,var(--line-2)); /* verified ring */
  /* ── PHOSPHOR FIELD — one scoped, masked atmosphere layer (CSS-only) ── */
  /* Premium Backdrop 2026 — "Captured Signal Field" (Dir A, CSS-only base):
     lifted atmos base + two off-center unequal blooms (green + fenced cool)
     + vignette, slow GPU-only drift, film grain over all. See
     docs/design/premium-overhaul-2026.md §2. Animate transform/opacity ONLY. */
  --room-atmos:#0A0D0E;                 /* lifted atmosphere base (NOT the #08090A floor) */
  --depth-cool:rgba(60,120,140,.10);    /* FENCED cool depth tone ≈ #0E1A22 — atmosphere ONLY,
                                           never text/buttons/badges/semantics              */
  --field-pool-green:rgba(63,229,160,.14); /* phosphor bloom — the brand light  */
  --field-pool-green-2:rgba(63,229,160,.09); /* second, fainter green pool      */
  --field-floor:#07080A;                /* vignette sink toward the floor       */
  --field-grain-o:.045;                 /* grain opacity — 0.03–0.05 ONLY (>.07 = dirty screen) */
  --field-blob:#3FE5A01A;               /* aurora blob, ~10% accent (legacy)*/
  --field-haze:#3FE5A00F;               /* outer haze, ~6% (legacy)        */
  --field-veil:rgba(255,255,255,.018);  /* cool depth lift (legacy)        */
  --field-fade:84%;                     /* section mask cutoff             */
  --ease-out-quad:cubic-bezier(.25,.46,.45,.94);   /* nav popovers         */
  --ease-out-quart:cubic-bezier(.165,.84,.44,1);   /* register tick-in     */
  /* ── CTA — inverted ink-on-room (accent is NOT a button fill) ── */
  --cta-fill:#EAF2EE; --cta-ink:#08090A;
  --cta-fill-hover:#FFFFFF; --cta-fill-press:#D7E0DB;
  --cta-ghost-bg:rgba(255,255,255,.045); --cta-ghost-bg-h:rgba(255,255,255,.09);
  --cta-ghost-bd:rgba(255,255,255,.22);  --cta-ghost-bd-h:rgba(255,255,255,.34);
  /* ── TYPE — families & weights ── */
  --font-sans:Geist,system-ui,"Segoe UI",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --w-body:400; --w-ui:510; --w-display:640;          /* the ONLY 3 weights */
  /* ── TYPE — fluid size scale ── */
  --fs-hero:clamp(2.75rem,1.9rem + 4.2vw,5rem);        /* 44→80 */
  --fs-h1:clamp(2.25rem,1.7rem + 2.7vw,3.5rem);        /* 36→56 */
  --fs-h2:clamp(1.625rem,1.35rem + 1.4vw,2.25rem);     /* 26→36 */
  --fs-h3:clamp(1.25rem,1.13rem + .6vw,1.5rem);        /* 20→24 */
  --fs-lede:clamp(1.125rem,1.05rem + .35vw,1.3125rem); /* 18→21 */
  --fs-body:1rem;          /* 16 */   --fs-sm:.875rem;     /* 14 */
  --fs-eyebrow:.75rem;     /* 12 */   --fs-micro:.6875rem; /* 11 */
  --fs-metric:clamp(2rem,1.4rem + 2.6vw,2.75rem);      /* register value 32→44 */
  --fs-price:clamp(2.25rem,1.7rem + 2.4vw,3rem);       /* pricing 36→48 */
  /* ── TYPE — tracking (monotonic by size) ── */
  --track-hero:0; --track-h1:0; --track-h2:0;
  --track-h3:0; --track-body:0; --track-eyebrow:.09em; --track-label:.12em;
  /* ── TYPE — line-heights & measure ── */
  --lh-hero:1.02; --lh-head:1.08; --lh-lede:1.5; --lh-body:1.6;
  --lh-mono:1.45; --lh-eyebrow:1;
  --measure:38rem;         /* ~608px prose clamp — BINDING, every template */
  /* ── SPACING — 4/8 base (locked) ── */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  /* ── SECTION RHYTHM — three named rhythms only ── */
  --rhy-1:clamp(40px,4.5vw,64px);   /* tight: sub-blocks within a section */
  --rhy-2:clamp(64px,7.5vw,104px);  /* default: between content blocks    */
  --rhy-3:clamp(80px,10vw,128px);   /* major: between named sections       */
  --section-y:var(--rhy-3);
  /* ── SHELL, GUTTER, GRID ── */
  --maxw:1200px;        /* default shell                   */
  --maxw-wide:1320px;   /* bento/feature rows ONLY          */
  --maxw-prose:38rem;   /* alias of --measure for legacy prose pages */
  --gutter:24px; --gutter-sm:16px; --nav-h:64px; --nav-pop-bg:rgba(15,16,17,.94);
  /* ── BREAKPOINTS (reference; used in media queries) ── */
  --bp-sm:640px; --bp-md:960px; --bp-lg:1200px;
  /* ── RADII ── */
  --r-sm:2px; --r-md:6px; --r:12px; --r-lg:14px; --r-pill:999px;
  --r-xl:12px;          /* legacy alias used by .ui / large panels */
  /* ── MATERIAL primitives — composed once, reused everywhere ── */
  --plate:inset 0 0 0 1px var(--line-2), 0 1px 0 var(--line-top); /* ring + bevel */
  --bevel:0 1px 0 var(--line-top);
  --ring:inset 0 0 0 1px var(--line-2);
  --sheen:linear-gradient(180deg,#ffffff0a,transparent);
  --glass-tint:rgba(8,9,10,.72);
  --glass-blur:blur(12px) saturate(150%);
  /* ── MOTION — two curves, four durations ── */
  --dur-micro:150ms;   /* hover/focus state change          */
  --dur-enter:400ms;   /* element entrance / reveal          */
  --dur-tick:500ms;    /* count-up numeral settle            */
  --dur-sweep:600ms;   /* signature Calibration Sweep ONLY   */
  --ease-out:cubic-bezier(.165,.84,.44,1); /* easeOutQuart: entrances, reveals, sweep */
  --ease-mat:cubic-bezier(.4,0,.2,1);       /* Material: hover/focus, color/bg changes */
  --stagger:70ms;
  /* ── FOCUS — phosphor "located" ring (the one accent-on-control exception) ── */
  --focus-ring:0 0 0 2px var(--room), 0 0 0 4px var(--accent);
  /* ── CONTROL sizing (a11y floor) ── */
  --ctrl-min:44px; --ctrl-min-sm:44px; --tap:44px;
  /* ── ON-SHEET ink palette — fenced to the lit --paper artifact only ── */
  --sheet-ink:#16191C;      /* values — 16.8:1 on paper (was #1B1E22)      */
  --sheet-ink-2:#39403A;    /* sub-values / no-<b> mono — 7.4:1 (was #4C554F) */
  --sheet-ink-3:#545B56;    /* register labels — 5.4:1 AA (was #6B746E FAIL) */
  --sheet-line:rgba(17,22,19,.10); --sheet-line-2:rgba(17,22,19,.26);
  --sheet-accent:#0A6E45;   /* "in spec" verdict — 5.4:1 AA (was #0B7A4C)  */
  --sheet-high:#B3401F;
  --sheet-pip-idle:#A9B0A6; /* unlit pip on paper (non-text, 3:1+)         */
  /* ── LEGACY ALIASES — names page inline-styles still reference. These are
     token aliases that resolve into the canonical ladder above; they add NO
     new visual language and NO second layer. (design system §13) ── */
  --bg:var(--room); --obsidian:var(--room);
  --paper-2:var(--panel); --surface-1:var(--panel); --surface-2:var(--register);
  --surface-3:var(--engraved); --paper-sink:var(--well); --raised:var(--register);
  --ink-deep:var(--well); --code-well:var(--well);
  --on-ink:var(--ink); --on-ink-2:var(--ink-2); --on-ink-3:var(--ink-3);
  --on-accent:var(--cta-ink);
  --accent-text:var(--accent); --accent-hi:var(--cta-fill-hover); --accent-tint:var(--accent-wash);
  --line-soft:var(--line);
  --display:var(--font-sans); --sans:var(--font-sans); --mono:var(--font-mono);
  --weight-text:var(--w-body); --weight-ui:var(--w-ui); --weight-display:var(--w-display);
  --fs-h4:1rem;
  --ease:var(--ease-mat); --ease-exp:var(--ease-out); --ease-enter:var(--ease-out);
  --dur-1:var(--dur-micro); --dur-2:var(--dur-enter); --dur-fast:var(--dur-micro);
  --ring-inset:var(--bevel);
}

/* ── BASE DOCUMENT ────────────────────────────────────────────────────────── */
*{box-sizing:border-box;}
html{font-family:var(--font-sans);font-weight:var(--w-body);font-size:16px;
  line-height:var(--lh-body);font-feature-settings:"cv01","ss03","calt";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;
  scroll-behavior:smooth;color-scheme:dark;background:var(--room);overflow-x:clip;}
body{margin:0;overflow-x:clip;color:var(--ink-2);background:var(--room);
  /* L1 ROOM — calm near-black floor; atmosphere now lives in .field, scoped per-section */
  font-size:var(--fs-body);letter-spacing:var(--track-body);}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px);}
::selection{background:color-mix(in oklab,var(--accent) 24%,transparent);color:var(--ink);}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border:3px solid var(--room);border-radius:999px;}
::-webkit-scrollbar-track{background:transparent;}
a,button,input,select,textarea,summary,[role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
/* skip link — first tab stop on every page, visible only on focus */
.skip-link{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:200;width:auto;height:auto;
  overflow:visible;clip-path:none;padding:12px 18px;background:var(--panel);color:var(--ink);
  border:1px solid var(--accent);border-radius:var(--r-md);font-weight:var(--w-ui);font-size:14.5px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── TYPE SYSTEM (design system §2) ───────────────────────────────────────── */
.mono,code,kbd,.num,.price,.hex,.unit,.ctrl-id,.ctrlid,[data-mono]{
  font-family:var(--font-mono);font-feature-settings:"tnum","zero","calt";
  font-variant-numeric:tabular-nums;}
h1,.h1,h2,.h2,h3,.h3,.hero__h1{font-family:var(--font-sans);color:var(--ink);margin:0;}
.hero-title,.hero__h1{font-weight:var(--w-display);font-size:var(--fs-hero);
  line-height:var(--lh-hero);letter-spacing:var(--track-hero);text-wrap:balance;}
h1,.h1{font-weight:var(--w-display);font-size:var(--fs-h1);
  line-height:var(--lh-head);letter-spacing:var(--track-h1);text-wrap:balance;}
h2,.h2{font-weight:var(--w-display);font-size:var(--fs-h2);line-height:var(--lh-head);
  letter-spacing:var(--track-h2);text-wrap:balance;margin-bottom:var(--s4);}
h3,.h3{font-weight:var(--w-ui);font-size:var(--fs-h3);line-height:var(--lh-head);
  letter-spacing:var(--track-h3);}
h4{font-family:var(--font-sans);font-weight:var(--w-ui);color:var(--ink);margin:0;}
.lede{font-family:var(--font-sans);font-weight:var(--w-body);font-size:var(--fs-lede);
  line-height:var(--lh-lede);letter-spacing:0;color:var(--ink-2);max-width:var(--measure);
  text-wrap:pretty;margin:var(--s4) 0 0;}
p,.body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--track-body);
  color:var(--ink-2);max-width:var(--measure);text-wrap:pretty;}
.caption,small{font:var(--w-body) var(--fs-sm)/1.4 var(--font-mono);color:var(--ink-3);}
.metric{font:var(--w-display) var(--fs-metric)/1 var(--font-mono);
  font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--ink);}
b,strong{font-weight:620;color:var(--ink);}
em{font-style:italic;font-weight:var(--w-body);}
.muted{color:var(--ink-3);}
.ok-text,.ok,.foil-text{color:var(--accent);font-weight:var(--w-ui);}
.go{color:var(--accent);}
.section-title{font-family:var(--font-sans);font-weight:var(--w-display);
  font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:var(--track-h2);color:var(--ink);}
.running-head{font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--w-ui);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}
/* links + focus (design system §8.10) */
a{color:var(--ink);text-decoration:none;}
p a:not([class]),.lede a:not([class]){color:var(--ink);
  border-bottom:1px solid var(--line-2);transition:border-color var(--dur-micro) var(--ease-out);}
p a:not([class]):hover,.lede a:not([class]):hover{border-bottom-color:var(--accent);}
:where(a,.btn,button,input,select,textarea,[tabindex]):focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-md);}
:focus:not(:focus-visible){outline:none;}

/* ── LAYOUT — shell, gutter, measure (design system §4) ───────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;
  padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));}
.wrap--wide{max-width:var(--maxw-wide);}
.prose,.section>p,.section__intro{max-width:var(--measure);}
.section{padding-block:var(--section-y);border-top:1px solid var(--line);position:relative;}
.section--flush{border-top:0;}
.section--tight,.sect--dense{padding-block:var(--rhy-2);}
.sect--air{padding-block:var(--rhy-3);}
.section--band{background:var(--well);}
/* a raised proof chamber — luminance step, a top hairline catching light */
.section--ink{background:var(--sheen),var(--engraved);color:var(--ink);
  border-top:1px solid var(--line-top);isolation:isolate;}
.section--ink>.wrap{position:relative;z-index:1;}
.section--lit{border-top:1px solid var(--line-top);isolation:isolate;}
.section__head{max-width:66ch;margin-bottom:clamp(32px,3.6vw,46px);}
.rule{height:1px;background:var(--line);border:0;margin:0;}
.rule--seal{height:2px;width:44px;background:var(--accent);border:0;}
@media (max-width:960px){.wrap{--gutter:20px;}}
@media (max-width:640px){.wrap{--gutter:16px;}}
/* grid utilities — the only allowed grids (design system §4) */
.grid{display:grid;gap:var(--s5);}
.grid>*,.split>*,.bento>*,.hero__grid>*,.steps>*,.metrics>*,.tiers>*{min-width:0;}
.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));}
@media (max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.grid{gap:var(--s4);}.grid--2,.grid--3,.grid--4{grid-template-columns:1fr;}}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:var(--s5);}}
.hero__grid{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s8);align-items:center;}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr;gap:var(--s7);}}
.bento{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s5);}
.bento__main{grid-row:1/span 3;}
@media (max-width:960px){.bento{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.bento{grid-template-columns:1fr;}.bento__main{grid-row:auto;}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5);}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);}
@media (max-width:760px){.metrics{grid-template-columns:1fr;gap:var(--s5);}}

/* ── MATERIAL / GLASS — L2 surface layer (design system §5) ───────────────── */
/* fake-glass plate — the DEFAULT, applied everywhere. Elevate by luminance,
   never by a black drop-shadow. No backdrop-filter on cards. */
.card,.panel,.plate,.tier,.step,.register,.diag,.tbl-wrap,.report{
  position:relative;border-radius:var(--r);
  background:var(--sheen),var(--panel);
  box-shadow:var(--plate);
  transition:background var(--dur-micro) var(--ease-mat),
             box-shadow var(--dur-micro) var(--ease-mat);}
.card.is-raised,.register{background:var(--sheen),var(--register);}
.engraved{background:var(--sheen),var(--engraved);}
/* hover = ONE luminance step up — no lift, no glow */
.card:hover,.plate:hover{background:var(--sheen),var(--register);
  box-shadow:inset 0 0 0 1px var(--line-top),0 1px 0 var(--line-top);}
/* pointer-tracked light: CSS renders it, kolm-2026.js feeds --mx/--my.
   Fine pointers only; without JS or on touch nothing renders. */
@media (hover:hover) and (pointer:fine){
  .card::before,.step::before,.tier::before,.flow__node::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,-30%),
      var(--accent-wash),rgba(255,255,255,.03) 38%,transparent 64%);
    opacity:0;transition:opacity 260ms var(--ease-mat);}
  .card:hover::before,.step:hover::before,.tier:hover::before,.flow__node:hover::before{opacity:1;}
}
.card>*,.step>*,.tier>*,.flow__node>*{position:relative;z-index:1;}
/* real glass — backdrop-filter, RATIONED to nav / .ui / .hud only */
.nav,.ui,.hud{
  background:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--ring),var(--bevel);}
@supports not (backdrop-filter:blur(1px)){.nav,.ui,.hud{background:var(--panel);}}
@media (prefers-reduced-transparency:reduce){
  .nav,.ui,.hud{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--engraved);}}
/* sunk surface — .well / code console (the one darker step) */
.well,.code,.ui__code,.report{background:var(--well);
  box-shadow:inset 0 1px 0 #00000040,var(--ring);
  border-left:2px solid var(--line-2);border-radius:10px;color:var(--ink);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.well .ln{color:var(--ink-3);}
.well .hdr{color:var(--ink-3);}

/* ── BUTTONS (design system §8.1) ─────────────────────────────────────────── */
/* accent is NEVER a button fill; primary inverts to ink-on-room */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:var(--w-ui) var(--fs-sm)/1 var(--font-sans);letter-spacing:0;
  padding:0 18px;min-height:var(--ctrl-min);border:1px solid transparent;border-radius:var(--r-md);
  cursor:pointer;white-space:nowrap;text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:background var(--dur-micro) var(--ease-mat),border-color var(--dur-micro) var(--ease-mat),
             color var(--dur-micro) var(--ease-mat),box-shadow var(--dur-micro) var(--ease-mat);}
.btn--primary{background:var(--cta-fill);color:var(--cta-ink);border-color:transparent;
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(8,9,10,.18);font-weight:var(--w-display);}
.btn--primary:hover{background:var(--cta-fill-hover);}
.btn--primary:active{background:var(--cta-fill-press);box-shadow:inset 0 1px 1px rgba(8,9,10,.22);}
.btn--primary:focus-visible{box-shadow:var(--focus-ring),inset 0 1px 0 #fff;}
.btn--ghost{background:var(--cta-ghost-bg);color:var(--ink);border-color:var(--cta-ghost-bd);
  box-shadow:inset 0 1px 0 var(--line-top);}
.btn--ghost:hover{background:var(--cta-ghost-bg-h);border-color:var(--cta-ghost-bd-h);color:var(--ink);}
.btn--ghost:active{background:rgba(255,255,255,.06);}
.btn--sm{min-height:var(--ctrl-min-sm);padding:0 13px;font-size:13px;}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none;}
.btn svg{width:15px;height:15px;}
.btn--primary svg{opacity:.85;}
.btn.is-loading{color:transparent;pointer-events:none;position:relative;}
.btn.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;
  border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:var(--accent);
  animation:btn-spin .7s linear infinite;}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.btn.is-loading::after{animation:none}}

/* ── EYEBROW / KICKER / INDEX — instrument labels (design system §8.3) ────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);font-weight:var(--w-ui);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent);flex:none;}
.kicker,.idx{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);
  font-size:10.5px;font-weight:600;letter-spacing:var(--track-eyebrow);text-transform:uppercase;
  color:var(--ink-2);margin:0 0 18px;padding:5px 11px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:rgba(255,255,255,.022);}
.idx::before{content:"\00a7";color:var(--accent);letter-spacing:0;}
.kicker .n{color:var(--accent);}
/* control-id chip — MACHINE voice */
.ctrl-id,.ctrlid{display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:11px;font-weight:var(--w-ui);letter-spacing:.02em;color:var(--ink-2);
  padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);white-space:nowrap;}
.ctrl-id b,.ctrlid b{color:var(--ink);font-weight:600;margin-right:6px;}

/* ── BADGES / CHIPS / PILLS — status registers (design system §8.2) ───────── */
.badge,.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);}
.badge{padding:5px 11px;}.chip{padding:4px 10px;}
.badge--ok,.chip--ok{color:var(--accent);border-color:var(--accent-edge);background:var(--accent-soft);}
.badge--ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.badge--idle,.chip--idle{color:var(--ink-3);border-color:var(--line-2);}
.badge--idle::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-idle);flex:none;}
.badge--err,.chip--err{color:var(--accent-dead);border-color:color-mix(in oklab,var(--accent-dead),transparent 70%);}
.badge a,.chip a{color:inherit;border-bottom:1px solid var(--line-2);}
.badge a:hover,.chip a:hover{border-color:currentColor;}
.pill{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:9.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;
  border-radius:var(--r-sm);border:1px solid var(--line-2);color:var(--ink-2);}
.pill--ok{color:var(--accent);border-color:var(--accent-edge);background:var(--accent-soft);}
.pill--dead,.pill--err{color:var(--accent-dead);border-color:rgba(255,255,255,.14);}
.pill--idle{color:var(--accent-idle);border-color:var(--line);}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
/* proof strip / band */
.band{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s4) 0;}
.band--bleed{width:100vw;margin-inline:calc(50% - 50vw);}
.band__item{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);}
.band__item svg{width:16px;height:16px;color:var(--ink-3);flex:none;}
.band__item a{color:var(--ink);border-bottom:1px solid var(--line-2);}
.band__item a:hover{border-color:var(--accent);}
/* the three-bar mark, as a system */
.bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:14px;}
.bars i{width:3px;border-radius:1px;background:var(--accent);}
.bars i:nth-child(1){height:8px;}.bars i:nth-child(2){height:14px;}.bars i:nth-child(3){height:5px;}

/* ── CARD — a register (design system §8.4) ───────────────────────────────── */
.card{padding:var(--s5);}
.card__k{font:600 10.5px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:12px;}
.card__k::after{content:"";flex:1;height:1px;background:var(--line);min-width:16px;}
.card h3{margin:var(--s3) 0 var(--s2);font:var(--w-display) 19px/1.18 var(--font-sans);
  letter-spacing:0;color:var(--ink);}
.card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;}
.card__map{margin-top:var(--s4);padding-top:13px;border-top:1px solid var(--line);
  font:var(--w-ui) 11px/1.6 var(--font-mono);color:var(--ink-3);letter-spacing:.02em;}
.card__map a{color:var(--ink);border-bottom:1px solid var(--line-2);}
.card__map a:hover{border-color:var(--accent);}
.is-pass{background:var(--accent-soft);border-left:2px solid var(--accent);}
/* reserved engraved-glyph art slot — first child of a card/step */
.card__art{display:block;position:relative;height:64px;margin:2px 0 18px;color:rgba(255,255,255,.32);pointer-events:none;}
.card__art svg{display:block;width:100%;height:64px;}
.card__art::before,.card__art::after{content:"";position:absolute;width:7px;height:7px;}
.card__art::before{top:0;left:0;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);}
.card__art::after{bottom:0;right:0;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);}
.gy-s{fill:none;stroke:currentColor;stroke-width:1;}
.gy-s2{fill:none;stroke:rgba(255,255,255,.17);stroke-width:1;}
.gy-f{fill:rgba(255,255,255,.10);}
.gy-r{fill:rgba(255,255,255,.34);}
.gy-dt{fill:currentColor;}
.gy-p{fill:var(--accent);}
.gy-ps{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-linecap:square;stroke-linejoin:miter;}
/* severity problem card — a 1px gradient light along the top edge */
.pc{overflow:hidden;}
.pc::after{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--sevc,var(--accent)),transparent);opacity:.55;}
.pc__tag{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
  font:600 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.pc__tag .sev-d{color:var(--sevc,var(--accent));}
.pc .ev{display:block;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);line-height:1.6;}
.pc .ev em{font-style:normal;color:var(--ink-2);}

/* ── PROCESS STEP (design system §8.7) ────────────────────────────────────── */
.step{padding:var(--s5);background:var(--sheen),var(--well);border-radius:var(--r-sm);}
.step__n{font:600 11px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;
  color:var(--accent);display:inline-flex;gap:8px;align-items:center;margin-bottom:var(--s4);}
.step__n::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);}
.step h3{margin:0 0 var(--s2);font:var(--w-display) 20px/1.2 var(--font-sans);letter-spacing:0;}
.step p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;}
.how__foot{margin-top:26px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.7;}
.how__foot b{color:var(--ink-2);font-weight:var(--w-ui);}
/* metrics — number is display voice, mono tabular */
.metric{border-left:1px solid var(--line-2);padding-left:var(--s4);}
.metric__n{font:var(--w-display) var(--fs-metric)/1 var(--font-mono);color:var(--ink);
  letter-spacing:0;font-variant-numeric:tabular-nums;}
.metric__l{margin-top:var(--s3);color:var(--ink-2);font-size:14px;line-height:1.55;}
.metric__l b{color:var(--ink);}
/* ledger list — noun phrases, each with one green pass-tick */
.ledger{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:11px;}
.ledger li{position:relative;padding-left:26px;font-size:14.5px;color:var(--ink-2);line-height:1.5;}
.ledger li>b{color:var(--ink);}
.ledger li::before{content:"";position:absolute;left:0;top:4px;width:14px;height:14px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ── KEY-VALUE REGISTER (design system §8.9) ──────────────────────────────── */
.register{font-family:var(--font-mono);font-size:13px;line-height:1.55;color:var(--ink-3);
  display:grid;gap:11px;font-variant-numeric:tabular-nums;padding:var(--s5);}
.register__row{display:grid;grid-template-columns:max-content 1fr;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line);}
.register__row:last-child{border-bottom:0;padding-bottom:0;}
.register__k{color:var(--ink-3);text-transform:uppercase;letter-spacing:var(--track-label);
  font-size:10.5px;font-weight:var(--w-ui);}
.register__v{color:var(--ink-2);word-break:break-all;}
.register__v b{color:var(--ink);font-weight:var(--w-ui);}
.register .ann,.report .ann{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:var(--r-sm);
  border:1px solid var(--line);color:var(--ink-3);font-size:10.5px;background:var(--panel);font-style:normal;}
.ann{font-style:normal;}
/* key-material variant — values sit in recessed wells, select-all */
.register--keys .register__v{display:block;padding:8px 11px;background:var(--well);
  border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-2);user-select:all;}
.register--keys .register__row{grid-template-columns:minmax(120px,max-content) 1fr;align-items:center;}

/* ── CONSOLE PLATE — the one sunk surface (design system §8.5) ────────────── */
.plate--rows{padding:0;overflow:hidden;}
.plate--rows:hover{background:var(--sheen),var(--panel);box-shadow:var(--plate);}
.plate__hd{font:500 11px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-3);
  padding:14px 22px;border-bottom:1px solid var(--line);}
.plate__hd .ok{color:var(--accent);}
.plate__foot{display:flex;align-items:center;gap:14px;padding:18px 26px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);flex-wrap:wrap;}
.plate__foot a{color:var(--ink-2);border-bottom:1px solid var(--line-2);}
.plate__foot a.go{color:var(--accent);border-bottom-color:var(--accent-edge);}
/* report well — machine voice, sunk */
.report{padding:var(--s5);font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
  color:var(--ink-2);overflow-x:auto;}
.report .lbl{color:var(--ink-3);}
.report .h{color:var(--ink);font-weight:var(--w-ui);word-break:break-all;}

/* ── TABLES (design system §8.9) ──────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);}
.tbl{width:100%;min-width:640px;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px;}
.tbl th,.tbl td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
.tbl thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-3);background:var(--well);}
.tbl td{font-family:var(--font-sans);font-size:14px;color:var(--ink-2);}
.tbl td b,.tbl tbody th b{color:var(--ink);font-weight:620;}
.tbl td:first-child b,.tbl tbody th:first-child b{font-family:var(--font-mono);}
.tbl td.num{font-family:var(--font-mono);font-size:13.5px;text-align:right;}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:0;}
.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:rgba(255,255,255,.025);}
.tbl .yes{color:var(--accent);}.tbl .no{color:var(--ink-3);}.tbl .muted{color:var(--ink-3);font-size:13px;}
.tbl .map,.tbl .mapped{font-family:var(--font-mono);font-size:12.5px;color:var(--accent);white-space:nowrap;}

/* ── PRICING TIER (design system §8.6) ────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);align-items:stretch;}
@media (max-width:1000px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;}}
.tier{display:flex;flex-direction:column;padding:var(--s6);font-variant-numeric:tabular-nums;}
.tier--feat{box-shadow:inset 0 0 0 1px var(--accent-edge),var(--bevel);}
.tier__name{font:600 10.5px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);}
.tier--feat .tier__name{color:var(--accent);}
.tier__price{font:var(--w-display) var(--fs-price)/1 var(--font-mono);letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--ink);margin:var(--s3) 0 2px;}
.tier__per{font-size:.42em;font-weight:var(--w-ui);letter-spacing:0;}
.tier__sub{color:var(--ink-3);font-size:13px;min-height:34px;line-height:1.5;}
.tier ul{list-style:none;padding:0;margin:var(--s4) 0;display:grid;gap:10px;}
.tier li{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.tier li svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:3px;}
.tier .btn{margin-top:auto;width:100%;}
/* price plate — homepage ledger rows */
.prow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;gap:18px;align-items:center;
  padding:19px 26px;border-top:1px solid var(--line);}
.prow:first-child{border-top:0;}
.prow__name{font:var(--w-display) 17px/1 var(--font-sans);letter-spacing:0;color:var(--ink);}
.prow__name .chip{margin-left:10px;vertical-align:2px;}
.prow__d{font-size:13.5px;color:var(--ink-2);}
.prow__p{font-family:var(--font-mono);font-size:15px;font-weight:600;text-align:right;white-space:nowrap;color:var(--ink);}
.prow__p small{display:block;font-size:10.5px;font-weight:var(--w-ui);color:var(--ink-3);letter-spacing:.05em;}
.prow__r{margin-left:auto;}
.prow__r.a{color:var(--accent);}
.prow--hot{background:linear-gradient(90deg,var(--accent-wash),transparent 60%);}
@media (max-width:720px){.prow{grid-template-columns:minmax(0,1fr) auto;padding:16px 20px;}
  .prow__d{grid-column:1/-1;}.plate__foot{padding:16px 20px;}}
.scope{margin-top:30px;font-family:var(--font-mono);font-size:11.5px;line-height:1.7;color:var(--ink-3);max-width:74ch;}

/* ── FORMS & INPUTS — inputs are SUNK (design system §8.8) ────────────────── */
.fld,.intake-field,.roi-field{width:100%;min-height:46px;padding:12px 14px;
  font:var(--w-body) var(--fs-sm)/1.4 var(--font-sans);letter-spacing:0;color:var(--ink);
  background:var(--well);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.25);
  transition:border-color var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out),
             background var(--dur-micro) var(--ease-out);}
.fld::placeholder,.intake-field::placeholder{color:var(--ink-4);}
.fld:hover,.intake-field:hover,.roi-field:hover{border-color:var(--line-top);background:var(--panel);}
.fld:focus,.fld:focus-visible,.intake-field:focus,.roi-field:focus{outline:none;border-color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.25),0 0 0 3px var(--accent-glow);}
.fld:disabled{opacity:.5;cursor:not-allowed;}
textarea.fld{min-height:120px;resize:vertical;line-height:1.55;}
.fld--mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0;}
.fld-group{display:grid;gap:8px;margin-bottom:var(--s5);}
.fld-label{font:var(--w-ui) 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.fld-msg{margin:0;font:400 12px/1.4 var(--font-sans);color:var(--ink-3);}
.fld-group.is-error .fld,.intake-field.is-error{border-color:var(--accent-dead);}
.fld-group.is-error .fld-msg{color:var(--accent-dead);display:block;}
.fld-group.is-ok .fld{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-glow);}

/* ── NAV — glass, the one rationed backdrop-filter (design system §8.11) ──── */
.nav{position:sticky;top:0;z-index:50;background:var(--glass-tint);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 0 var(--line-top);}
.nav__in{display:flex;align-items:center;gap:var(--s5);height:var(--nav-h);}
.nav__brand{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-family:var(--font-sans);font-weight:var(--w-display);font-size:18.5px;letter-spacing:0;color:var(--ink);}
.nav__brand svg{width:20px;height:20px;}.nav__brand svg rect{fill:var(--accent);}
.nav__brand b{color:var(--ink);font-weight:var(--w-display);}
.nav__links{display:flex;align-items:center;gap:var(--s2);margin-inline:auto;}
/* Bare-anchor nav baseline — audit-host pages + /docs/api still use plain <a>
   children of .nav__links (the main nav uses .nav__top). Restores the muted/
   hover/tap-target state for that shared markup so it doesn't render unstyled. */
.nav__links>a:not(.nav__top):not(.nav__cta):not(.btn){display:inline-flex;align-items:center;min-height:44px;
  padding:0 12px;border-radius:var(--r-md);border-bottom:0;
  font:var(--w-ui) 14px/1 var(--font-sans);letter-spacing:0;color:var(--ink-2);
  transition:color var(--dur-micro) var(--ease-mat),background var(--dur-micro) var(--ease-mat);}
.nav__links>a:not(.nav__top):not(.nav__cta):not(.btn):hover{color:var(--ink);background:rgba(255,255,255,.05);}
/* Active flat canonical link (page agents set aria-current="page"). Mirrors the
   .nav__top[aria-current] underline so the dropdown bar and the flat bar agree. */
.nav__links>a:not(.nav__top):not(.nav__cta):not(.btn)[aria-current="page"]{color:var(--ink);position:relative;}
.nav__links>a:not(.nav__top):not(.nav__cta):not(.btn)[aria-current="page"]::after{content:"";position:absolute;
  left:12px;right:12px;bottom:-2px;height:1.5px;background:var(--accent);border-radius:2px;}
/* Secondary surface link (Audit). Compiler stays primary: this reads quieter,
   reachable but not co-equal. A hairline lead-in marks it as a separate group. */
.nav__sec{color:var(--ink-3);}
.nav__sec::before{content:"";width:1px;height:18px;background:var(--line-2);margin-right:6px;align-self:center;}
@media(max-width:880px){.nav__sec::before{display:none;}}
.nav__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-bottom:0;
  border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--ink-2);
  transition:color var(--dur-micro) var(--ease-mat),border-color var(--dur-micro) var(--ease-mat);}
.nav__icon svg{width:20px;height:20px;}
.nav__icon:hover{color:var(--ink);border-color:var(--ink-3);}
.nav__top{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--r-md);
  font:var(--w-ui) 14px/1 var(--font-sans);letter-spacing:0;color:var(--ink-2);background:transparent;border:0;cursor:pointer;
  transition:color var(--dur-micro) var(--ease-mat),background var(--dur-micro) var(--ease-mat);}
.nav__top:hover,.nav__top[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.05);}
.nav__top[aria-current]{color:var(--ink);position:relative;}
.nav__top[aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:-2px;height:1.5px;
  background:var(--accent);transform-origin:left;border-radius:2px;}
.nav__caret{width:12px;height:12px;opacity:.7;transition:transform var(--dur-micro) var(--ease-mat);}
.nav__top[aria-expanded="true"] .nav__caret{transform:rotate(180deg);}
.nav__group{position:relative;}
.nav__pop{position:absolute;top:calc(100% + 8px);left:0;min-width:280px;padding:8px;display:grid;gap:2px;
  background:var(--nav-pop-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:var(--r);box-shadow:var(--plate),0 24px 60px -28px rgba(0,0,0,.7);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity var(--dur-micro) var(--ease-out-quad),transform var(--dur-micro) var(--ease-out-quad),visibility var(--dur-micro);}
.nav__group:hover .nav__pop,.nav__group:focus-within .nav__pop,.nav__top[aria-expanded="true"]+.nav__pop{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;}
.nav__pop a{display:grid;gap:2px;padding:9px 12px;border-radius:var(--r-md);border-bottom:0;}
.nav__pop a b{color:var(--ink);font:var(--w-ui) 14px/1.2 var(--font-sans);letter-spacing:0;}
.nav__pop a span{color:var(--ink-3);font:var(--w-body) 12px/1.3 var(--font-mono);}
.nav__pop a:hover,.nav__pop a:focus-visible{background:rgba(255,255,255,.06);}
.nav__actions{margin-left:0;display:flex;align-items:center;gap:var(--s3);}
.nav__status{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 6px;border-bottom:0;
  font:var(--w-ui) 12px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-2);}
.nav__status i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);flex:none;}
.nav__rule{width:1px;height:20px;background:var(--line-2);flex:none;}
.nav__cta{background:var(--cta-fill);color:var(--cta-ink);border:1px solid transparent;
  border-radius:var(--r-pill);padding:0 16px;font-weight:var(--w-display);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(8,9,10,.18);}
.nav__cta:hover{background:var(--cta-fill-hover);color:var(--cta-ink);}
.nav__cta:active{background:var(--cta-fill-press);}
.nav.is-scrolled{background:rgba(8,9,10,.82);box-shadow:inset 0 1px 0 0 var(--line-top),0 1px 0 var(--line);}
.nav__toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
  margin-left:var(--s2);background:transparent;border:1px solid var(--line-2);border-radius:var(--r-md);color:var(--ink);cursor:pointer;}
.nav__toggle svg{width:20px;height:20px;}.nav__toggle:hover{border-color:var(--ink-3);}
.theme-toggle{display:none;}
@media(prefers-reduced-motion:reduce){.nav__pop,.nav__caret{transition:none;}}
@media (max-width:980px){
  .nav__toggle{display:inline-flex;}
  .nav__actions .nav__status,.nav__actions .nav__rule,.nav__actions .btn--ghost:not(.nav__cta){display:none;}
  .nav__links{position:absolute;top:var(--nav-h);left:0;right:0;z-index:49;flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:var(--s3) max(var(--gutter),env(safe-area-inset-left));background:var(--panel);border-bottom:1px solid var(--line);
    display:none;max-height:calc(100dvh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;}
  .nav.is-open .nav__links{display:flex;}
  .nav__group{position:static;}
  .nav__top{min-height:50px;padding:0;font-size:16px;justify-content:space-between;border-bottom:1px solid var(--line);border-radius:0;}
  .nav__top[aria-current]::after{display:none;}
  .nav__pop{position:static;min-width:0;padding:4px 0 8px 12px;background:none;backdrop-filter:none;box-shadow:none;
    opacity:1;visibility:visible;transform:none;display:none;}
  .nav__top[aria-expanded="true"]+.nav__pop{display:grid;}
  .nav__pop a span{display:none;}
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */
.hero{position:relative;z-index:0;isolation:isolate;padding:clamp(76px,9vw,136px) 0 var(--section-y);border-top:0;}
.home .hero{padding-top:clamp(76px,9vw,136px);}
/* ── PREMIUM BACKDROP 2026 — "Captured Signal Field" (Dir A, CSS-only) ─────────
   Real atmospheric depth (lifted base + two off-center unequal blooms: phosphor
   green + FENCED cool depth tone + vignette) → slow GPU-only drift → film grain.
   Section-clipped, decorative, z-index:-1, sits behind the glass everywhere.
   Animate transform/opacity ONLY. Full reduced-motion / reduced-transparency /
   forced-colors / reduced-data / high-contrast fallbacks below. §2 of spec. */
.field{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;isolation:isolate;
  /* (a) lifted atmosphere base — kills the flat-black read; the #08090A floor stays page default */
  background:var(--room-atmos);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,#000 var(--field-fade),transparent 100%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000 0%,#000 var(--field-fade),transparent 100%);}
.field canvas{display:block;width:100%;height:100%;}   /* keep: legacy canvas slot, harmless (Dir-A motes fail-open) */
.field--band{position:absolute;inset:0;z-index:-1;pointer-events:none;}
/* L1 — depth: two off-center UNEQUAL blooms (green + fenced cool) for asymmetry,
   a deeper green core, and a vignette toward the floor. Slow drift, transform-only. */
.field::before{content:"";position:absolute;inset:-20%;   /* overscan capped at -20% (fill-rate) */
  background:
    radial-gradient(60% 50% at 18% 12%,var(--field-pool-green),transparent 70%),
    radial-gradient(70% 60% at 88% 4%,var(--depth-cool),transparent 72%),
    radial-gradient(46% 52% at 64% 78%,var(--field-pool-green-2),transparent 70%),
    radial-gradient(120% 90% at 50% 122%,var(--field-floor),transparent 76%);
  will-change:transform;transform:translate3d(0,0,0);
  animation:field-drift 52s ease-in-out infinite alternate;}
/* L3 — FILM GRAIN: monochrome feTurbulence, rides ON the gradient via overlay.
   Anti-banding on the dark blooms = the cheap→expensive lever. NEVER animated. */
.field::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:var(--field-grain-o);          /* 0.03–0.05 ONLY                       */
  mix-blend-mode:overlay;                /* soft-light is gentler on near-black  */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* slow, barely-perceptible drift — transform/opacity only, never coords/filter */
@keyframes field-drift{
  0%{transform:translate3d(0,0,0) scale(1.04);}
  100%{transform:translate3d(-2.5%,2%,0) scale(1.09);}}
/* ── BACKDROP FALLBACKS (mandatory, §2 accessibility) ───────────────────────── */
/* reduced-motion → keep the still depth + grain (beautiful without drift) */
@media(prefers-reduced-motion:reduce){.field::before{animation:none;}}
/* reduced-transparency / forced-colors → drop grain (it's pure decoration) */
@media(prefers-reduced-transparency:reduce),(forced-colors:active){.field::after{display:none;}}
/* high-contrast → dim the glows so foreground contrast never drops below AA */
@media(prefers-contrast:more){.field::before{opacity:.5;}.field::after{display:none;}}
/* reduced-data / coarse-pointer → lighten the field, no grain compositing cost */
@media(prefers-reduced-data:reduce){.field::after{display:none;}}
.hero__in{max-width:940px;}
.hero__h1{max-width:17ch;font-size:var(--fs-hero);font-weight:var(--w-display);
  letter-spacing:var(--track-hero);line-height:var(--lh-hero);margin:0 0 22px;text-wrap:balance;color:var(--ink);}
.hero__h1 .go,h1 .go,h2 .go,h3 .go{color:var(--accent);}
.hero__grid>div:first-child{padding-right:clamp(0px,3vw,48px);}
@media (max-width:960px){.hero__grid>div:first-child{padding-right:0;}}
.hero .lede{max-width:58ch;margin-bottom:30px;}
.hero__cta{display:flex;gap:12px;margin-top:var(--s6);flex-wrap:wrap;}
.hero__cta .btn{min-height:46px;padding:0 22px;font-size:15px;}
.hero__cta .btn--ghost{background:var(--cta-ghost-bg);color:var(--ink);border-color:var(--cta-ghost-bd);}
.hero__cta .btn--ghost:hover{background:var(--cta-ghost-bg-h);border-color:var(--cta-ghost-bd-h);color:var(--ink);}
.hero__claim{margin-top:var(--s4);font-size:13px;color:var(--ink-3);line-height:1.6;max-width:56ch;}
.hero__claim b{color:var(--ink-2);}
.hero__rail{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:8px;}
.hero__proof{display:flex;gap:12px 22px;flex-wrap:wrap;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line);}
.hero__proof span{font-family:var(--font-mono);font-size:11.5px;font-weight:var(--w-ui);letter-spacing:.04em;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:7px;}
.hero__proof .dot{width:3px;height:3px;border-radius:0;background:var(--accent);flex:none;}
@media (min-width:1100px){.hero__proof{display:grid;grid-template-columns:repeat(2,max-content);column-gap:22px;row-gap:12px;}}
@media (max-width:640px){.hero__proof{display:none;}}
.hero code,.feat code{font-family:var(--font-mono);font-size:.9em;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line);padding:1px 6px;border-radius:5px;}
/* "try it" cue + trust micro-line */
.tryit{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;
  font-weight:var(--w-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 var(--s3);}
.tryit::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);}
.trustline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:var(--s5);font-size:13px;color:var(--ink-3);}
.trustline span{display:inline-flex;align-items:center;gap:7px;}
.trustline svg{width:14px;height:14px;color:var(--accent);flex:none;}

/* ── THE SIGNATURE — hero artifact + Calibration Sweep (design system §7) ─── */
/* one artifact per page; the only element with a non-inset shadow + the only
   one that animates. Ships class="artifact is-sealed" (sealed end-state). */
.artifact,.rep,.vw{position:relative;background:var(--paper);border-radius:6px;color:var(--sheet-ink);
  border-top:1px solid var(--line-top);
  box-shadow:0 1px 0 var(--line-top),0 0 0 1px var(--line-2),0 60px 120px -40px var(--accent-wash);}
.artifact{padding:24px 28px;}
.artifact>*{position:relative;z-index:1;}
.artifact__scan{position:absolute;inset-inline:0;top:0;height:2px;background:var(--accent-scan);
  transform:scaleX(0);opacity:0;pointer-events:none;}
.regmark{position:absolute;width:13px;height:13px;border:1px solid var(--ink-4);opacity:.42;pointer-events:none;}
.regmark--tl{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.regmark--tr{top:-1px;right:-1px;border-left:0;border-bottom:0;}
.regmark--bl{bottom:-1px;left:-1px;border-right:0;border-top:0;}
.regmark--br{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.artifact__head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.artifact__head .ctrl-id{background:transparent;border-color:var(--sheet-line-2);color:var(--sheet-ink-2);}
@media (max-width:640px){.artifact__head .ctrl-id{white-space:normal;max-width:100%;}}
.register__k{font-family:var(--font-mono);}
.artifact .register{padding:0;color:var(--sheet-ink-2);gap:0;background:none;}
.artifact .register__row{grid-template-columns:104px 1fr;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--sheet-line);position:relative;
  transition:background var(--dur-micro) var(--ease-mat),padding-left var(--dur-micro) var(--ease-mat);}
.artifact .register__row:hover{background:rgba(17,22,19,.045);
  padding-left:8px;margin-inline:-8px;padding-right:8px;border-radius:var(--r-sm);}
.artifact .register__k{color:var(--sheet-ink-3);font-size:10px;font-weight:var(--w-ui);
  letter-spacing:.13em;padding-top:2px;}
/* hover tick-in under the label (forensic "alive" read) */
.artifact .register__k::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:36px;
  background:var(--sheet-accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-micro) var(--ease-out-quart);}
.artifact .register__row:hover .register__k::after{transform:scaleX(1);}
.artifact .register__v{display:flex;align-items:baseline;gap:6px;color:var(--sheet-ink);
  font-size:15px;opacity:1;word-break:normal;font-variant-numeric:tabular-nums;}  /* resting opacity:1 */
.artifact .register__v b{color:var(--sheet-ink);font-weight:var(--w-display);
  font-variant-numeric:tabular-nums;letter-spacing:0;}
.artifact .register__u{color:var(--sheet-ink-2);font-size:12px;font-weight:var(--w-body);}
.artifact .register__row--sig .register__v{font-size:12.5px;word-break:break-all;}
.artifact .register__row--sig b{font-weight:var(--w-ui);}
/* verified phosphor pip — lit only when sealed (3% accent rule) */
.artifact .register__pip{width:6px;height:6px;border-radius:50%;margin-left:auto;flex:none;
  align-self:center;background:var(--sheet-pip-idle);transition:background var(--dur-micro) var(--ease-mat);}
.is-sealed .register__pip{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.artifact__verdict{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--sheet-line);}
.artifact__verdict span{font-family:var(--font-mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--sheet-ink-2);}                              /* was --ink-4 (invisible on paper) */
.is-sealed .artifact__verdict span{color:var(--sheet-accent);font-weight:var(--w-ui);}
.artifact__check{width:16px;height:16px;}
.artifact__check path{fill:none;stroke:var(--accent-idle);stroke-width:2;stroke-dasharray:24;stroke-dashoffset:24;}
/* sealed / verified end-state (ships server-side) */
.is-sealed.artifact,.artifact.is-sealed{box-shadow:0 1px 0 var(--line-top),0 0 0 1px var(--accent-glow),0 24px 80px -20px var(--accent-glow);}
.is-sealed .artifact__check path{stroke:var(--sheet-accent);stroke-dashoffset:0;}
/* fade ONLY the one animating, motion-allowed sweep — never the resting state */
@media(prefers-reduced-motion:reduce){.artifact__scan{display:none;}}
@media(prefers-reduced-motion:no-preference){
  [data-sweep] .artifact:not(.is-sealed) .register__v[data-val]{opacity:0;transition:opacity .12s var(--ease-mat);}
  .is-sealed .artifact__check path{transition:stroke-dashoffset var(--dur-sweep) var(--ease-out);}
}

/* ── PAGE-TEMPLATE HELPERS (design system §9) ─────────────────────────────── */
/* editorial spine rail */
.sect-rail{display:grid;grid-template-columns:minmax(56px,120px) minmax(0,1fr);gap:0 clamp(14px,2.4vw,34px);}
.sect-rail__rail{position:relative;}
.sect-rail__rail .idx,.sect-rail__rail .eyebrow{writing-mode:vertical-rl;position:sticky;
  top:calc(var(--nav-h) + 40px);padding:11px 5px;margin:0;letter-spacing:.16em;}
.sect-rail__rail .idx::before,.sect-rail__rail .eyebrow::before{letter-spacing:0;}
.sect-rail__rail::after{content:"";position:absolute;left:14px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,var(--line-2),var(--line) 40%,transparent);z-index:-1;}
.sect-rail__body{position:relative;min-width:0;}
.sect-rail__body .section__head{position:relative;z-index:1;}
@media (max-width:720px){
  .sect-rail{grid-template-columns:1fr;gap:0;}
  .sect-rail__rail .idx,.sect-rail__rail .eyebrow{writing-mode:horizontal-tb;position:static;
    padding:5px 11px;margin:0 0 var(--s4);letter-spacing:.14em;}
  .sect-rail__rail::after{display:none;}
}
/* sticky table-of-contents (docs) */
.toc-rail{position:sticky;top:calc(var(--nav-h) + 40px);display:grid;gap:1px;font-family:var(--font-mono);font-size:12px;}
.toc-rail a{display:block;padding:7px 12px;color:var(--ink-3);border-left:1px solid var(--line);
  transition:color var(--dur-micro),border-color var(--dur-micro);}
.toc-rail a:hover{color:var(--ink);border-left-color:var(--line-2);}
.toc-rail a.is-here{color:var(--accent);border-left-color:var(--accent);}
/* hairline index list (research / changelog) */
.ledger-index{display:grid;margin:var(--s5) 0 0;padding:0;list-style:none;}
.ledger-index>*{display:grid;grid-template-columns:104px max-content minmax(0,1fr);gap:10px 20px;
  align-items:baseline;padding:15px 6px;border-top:1px solid var(--line);color:var(--ink);}
.ledger-index>*:last-child{border-bottom:1px solid var(--line);}
.ledger-index .li-date{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);
  letter-spacing:.04em;font-variant-numeric:tabular-nums;}
.ledger-index .li-title{font-size:14.5px;font-weight:var(--w-ui);letter-spacing:0;}
.ledger-index a:hover{background:rgba(255,255,255,.022);}
@media (max-width:640px){.ledger-index>*{grid-template-columns:88px minmax(0,1fr);}.ledger-index .li-title{grid-column:1/-1;}}
/* rules-only row archetype — no boxes */
.ledger-rows{display:grid;border-top:1px solid var(--line-2);}
.lrow{display:grid;grid-template-columns:minmax(150px,.6fr) minmax(0,1.7fr) minmax(0,1fr);
  gap:10px 32px;align-items:baseline;padding:24px 4px;border-bottom:1px solid var(--line);}
.lrow__k{font:600 10.5px/1.7 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);}
.lrow__k .sev-d{color:var(--sevc,var(--accent));}
.lrow__t h3{margin:0 0 6px;font:var(--w-display) 19px/1.18 var(--font-sans);letter-spacing:0;}
.lrow__t p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6;}
.lrow__f{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);line-height:1.65;letter-spacing:.02em;}
.lrow__f em{font-style:normal;color:var(--ink-2);}
.lrow__f a{color:var(--ink-2);border-bottom:1px solid var(--line-2);}
.lrow__f a:hover{border-color:var(--accent);}
@media (max-width:860px){.lrow{grid-template-columns:1fr;gap:8px;padding:20px 0;}}
/* the row scan-sweep + table-row alias */
.trow{position:relative;}
@media (hover:hover) and (pointer:fine){
  .lrow,.prow,.trow{position:relative;overflow:hidden;}
  .lrow:hover,.prow:hover,.trow:hover{background-color:rgba(255,255,255,.016);}
}
/* evidence timeline */
.spine{position:relative;display:grid;gap:var(--s6);padding-left:30px;margin:var(--s5) 0 0;}
.spine::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--line-2),var(--line) 70%,transparent);}
.spine>*{position:relative;}
.spine>*::before{content:"";position:absolute;left:-25.5px;top:7px;width:5px;height:5px;background:var(--accent);}
/* artifact stage */
.plinth{position:relative;max-width:720px;margin-inline:auto;}
/* flow — the Audit -> Sign -> Verify pipeline */
.flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch;gap:0;margin-top:var(--s7);}
.flow__node{position:relative;display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5);
  background:var(--sheen),var(--well);border:1px solid var(--line);border-top-color:var(--line-top);border-radius:var(--r-lg);}
.flow__ic{width:40px;height:40px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);color:var(--accent);}
.flow__ic svg{width:21px;height:21px;}
.flow__n{font:600 10.5px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);}
.flow__t{font-size:16.5px;font-weight:600;color:var(--ink);letter-spacing:0;}
.flow__d{font-size:13.5px;color:var(--ink-2);line-height:1.5;margin:0;}
.flow__link{display:flex;align-items:center;justify-content:center;padding:0 var(--s3);color:var(--ink-3);}
.flow__link svg{width:26px;height:14px;}
@media (max-width:820px){.flow{grid-template-columns:1fr;}.flow__link{padding:var(--s2) 0;transform:rotate(90deg);}}

/* ── DIAGRAM FRAME + SVG vocabulary ───────────────────────────────────────── */
.diag{padding:20px;overflow:hidden;}
.diag svg{display:block;width:100%;height:auto;position:relative;}
.diag__cap{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--line);font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.04em;}
.diag__cap b{color:var(--ink-2);font-weight:var(--w-ui);}
.dg-box{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.22);}
.dg-box--ok{fill:var(--accent-soft);stroke:var(--accent-edge);}
.dg-box--void{fill:color-mix(in oklab,var(--accent-dead),transparent 90%);stroke:color-mix(in oklab,var(--accent-dead),transparent 55%);}
.dg-line{fill:none;stroke:rgba(255,255,255,.22);}
.dg-flow{fill:none;stroke:var(--accent);stroke-width:1.4;}
.dg-label{fill:var(--ink-3);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;}
.dg-label--up{text-transform:uppercase;letter-spacing:.14em;font-size:9px;font-weight:600;}
.dg-t{fill:var(--ink);font-family:var(--font-sans);font-size:12.5px;font-weight:600;}
.dg-mono{fill:var(--ink-2);font-family:var(--font-mono);font-size:10.5px;}
.dg-ok,.dg-dot{fill:var(--accent);}
.dg-void-t{fill:var(--accent-dead);}
.dg-k{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;}
/* stat sparkline */
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:13px;vertical-align:-1px;}
.spark i{width:3px;height:calc(var(--v,.6) * 100%);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.3) 0 1px,transparent 1px 3px);}
.spark i.on{background:repeating-linear-gradient(0deg,var(--accent) 0 1px,transparent 1px 3px);}

/* ── HOMEPAGE PRODUCT UI MOCKUP — real glass (.ui) ────────────────────────── */
.ui{margin-top:clamp(48px,6vw,84px);border-radius:var(--r-xl);overflow:hidden;position:relative;isolation:isolate;}
.ui__bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.ui__live{width:7px;height:7px;border-radius:999px;background:var(--accent);}
.ui__name{color:var(--ink-2);}
.ui__meta{margin-left:auto;position:relative;}
.ui__grid{display:grid;grid-template-columns:184px 1fr;}
.ui__rail{display:flex;flex-direction:column;padding:14px;gap:2px;border-right:1px solid var(--line);counter-reset:step;}
.ui__step{position:relative;padding:9px 12px;border-radius:7px;font-size:13px;font-weight:var(--w-ui);color:var(--ink-3);}
.ui__step.is-on{background:rgba(255,255,255,.05);color:var(--ink);}
.ui__step::after{counter-increment:step;content:"0" counter(step);position:absolute;right:12px;top:50%;
  transform:translateY(-50%);color:var(--ink-3);font-family:var(--font-mono);font-size:10px;}
.ui__step.is-on::after{color:var(--accent);}
.ui__step + .ui__step{border-top:1px solid var(--line);}
.ui__code{margin:0;padding:22px 24px;font-family:var(--font-mono);font-size:13px;line-height:1.75;
  color:var(--ink-2);overflow-x:auto;white-space:pre;}
.ui__code .m{color:var(--ink-3);}
.ui__code .a{color:var(--accent);}
.ui__code .s{color:var(--ink);}
.ui__tick-from{display:none;}
@media (max-width:820px){
  .ui__grid{grid-template-columns:1fr;}
  .ui__rail{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);}
}

/* ── FEATURE SECTIONS ─────────────────────────────────────────────────────── */
.feat__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,92px);align-items:center;}
.feat--rev .feat__ui{order:-1;}
.feat__copy h2{margin-bottom:16px;max-width:17ch;}
.feat__copy .lede{margin-bottom:24px;}
.feat__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.feat__list li{position:relative;padding-left:22px;color:var(--ink-2);font-size:15px;line-height:1.5;}
.feat__list li::before{content:"";position:absolute;left:1px;top:8px;width:6px;height:6px;border-radius:999px;background:var(--accent);}
@media (max-width:820px){.feat__in{grid-template-columns:1fr;gap:26px;}.feat--rev .feat__ui{order:0;}}
/* small UI panels (homepage) */
.panel__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--ink-2);}
.panel__head .a{color:var(--accent);}
.panel__head .m{color:var(--ink-3);}
.panel__rows{padding:6px;}
.panel__rows .prow{display:flex;align-items:center;gap:8px;padding:13px 12px;border-top:0;
  font-family:var(--font-mono);font-size:13px;color:var(--ink-2);grid-template-columns:none;}
.panel__rows .prow + .prow{border-top:1px solid var(--line);}
.panel__rows .prow .m{color:var(--ink-3);}

/* ── PROOF + CTA BANDS ────────────────────────────────────────────────────── */
.proof__row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:44px 0;}
/* Law #3: mono is load-bearing — every numeral is Geist Mono. The proof
   numerals (the most prominent metrics on the site) MUST be mono, not sans.
   .is-mono retains the smaller size used for long alphanumeric tokens (Ed25519). */
.proof__cell b{display:block;font-family:var(--font-mono);font-size:clamp(28px,3vw,42px);
  font-weight:var(--w-display);letter-spacing:0;color:var(--ink);font-variant-numeric:tabular-nums;}
.proof__cell b.is-mono{font-size:clamp(22px,2.2vw,30px);color:var(--ink);}
.proof__cell span{display:block;margin-top:7px;font-size:13.5px;color:var(--ink-2);}
@media (max-width:820px){.proof__row{grid-template-columns:repeat(2,1fr);gap:30px 16px;}}
.cta,.cta-final,.cta-band{text-align:center;position:relative;z-index:0;
  padding:clamp(84px,10vw,132px) 0;border-top:1px solid var(--line);overflow:hidden;}
.cta::before,.cta-final::before,.cta-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(640px 320px at 50% 100%,var(--accent-glow),transparent 70%);}
.cta>.wrap,.cta-final>.wrap,.cta-band>.wrap,.cta__in{position:relative;z-index:1;}
.cta__in{max-width:620px;margin:0 auto;}
.cta h2,.cta-final h2,.cta-band h2{color:var(--ink);margin:0 auto var(--s4);max-width:24ch;
  font-size:clamp(32px,3.6vw,48px);letter-spacing:0;}
.cta .lede,.cta-final .lede,.cta-band .lede{color:var(--ink-2);margin:0 auto 28px;max-width:44ch;}
.cta .hero__cta,.cta-final .hero__cta,.cta-band .hero__cta{justify-content:center;}
.cta-final .bars,.cta-band .bars{height:20px;margin-bottom:26px;}
.cta-final .bars i,.cta-band .bars i{width:4px;}
.cta-final .bars i:nth-child(1),.cta-band .bars i:nth-child(1){height:11px;}
.cta-final .bars i:nth-child(2),.cta-band .bars i:nth-child(2){height:20px;}
.cta-final .bars i:nth-child(3),.cta-band .bars i:nth-child(3){height:7px;}
.cta-caveats{color:var(--ink-3);font-size:13px;line-height:1.6;max-width:82ch;margin:var(--s5) auto 0;}

/* ── FOOTER (design system §8.12) ─────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding:var(--s8) 0 max(var(--s7),env(safe-area-inset-bottom));
  color:var(--ink-3);font-size:14px;background:var(--well);}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr));gap:var(--s6);}
@media (max-width:820px){.foot__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.foot__tag{color:var(--ink-3);font-size:13px;max-width:34ch;}
.foot__col h3,.foot__col h4{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 var(--s3);}
.foot__col a:not(.nav__brand){display:flex;align-items:center;min-height:44px;padding:8px 0;
  font:13.5px var(--font-sans);color:var(--ink-2);border-bottom:0;transition:color var(--dur-micro) var(--ease-out);}
.foot__col a:hover{color:var(--ink);}
.foot__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);
  margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line);}
.foot__bottom a{display:inline-flex;align-items:center;min-height:44px;}
.foot__copy{margin-left:auto;color:var(--ink-3);font-size:13px;}

/* ── PAGE-LOCAL HOOKS — names the templates depend on (intake/roi/snip/etc) ─ */
.legal-doc,.legal-meta{max-width:var(--measure);}
.legal-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-family:var(--font-mono);
  font-size:11.5px;color:var(--ink-3);letter-spacing:.04em;}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-family:var(--font-mono);
  font-size:12.5px;color:var(--ink-2);}
.kv .lbl{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;}
.banner{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r-md);
  border:1px solid var(--line-2);background:var(--sheen),var(--panel);color:var(--ink-2);font-size:14px;}
.banner .go{color:var(--accent);}
.posture-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2);}
.posture-item:last-child{border-bottom:0;}
.row-actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;}
.empty{color:var(--ink-3);font-size:14px;text-align:center;padding:var(--s7) var(--s4);}
.warn{color:var(--accent-dead);}
/* code snippet block */
.snip{position:relative;background:var(--well);border-radius:10px;border-left:2px solid var(--line-2);
  box-shadow:inset 0 1px 0 #00000040,var(--ring);overflow:hidden;}
.snip__bar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;color:var(--ink-3);}
.snip__name{color:var(--ink-2);letter-spacing:.04em;}
.snip__copy{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:4px 10px;cursor:pointer;}
.snip__copy:hover{color:var(--ink);border-color:var(--line-top);}
.snip__copy.is-copied{color:var(--accent);border-color:var(--accent-edge);}
.snip__pre{margin:0;padding:16px;font-family:var(--font-mono);font-size:13px;line-height:1.7;
  color:var(--ink-2);overflow-x:auto;white-space:pre;}
.snip__note{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);padding:0 16px 14px;}
/* intake / lead form */
.intake-field{min-height:46px;}
.intake-field--wide{grid-column:1/-1;}
.intake-error{color:var(--accent-dead);font:400 12px/1.4 var(--font-sans);margin-top:6px;}
.intake-result__top{display:flex;align-items:center;gap:12px;margin-bottom:var(--s4);}
.intake-result__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}
@media (max-width:560px){.intake-result__grid{grid-template-columns:1fr;}}
/* ROI calculator */
.roi-field{font-family:var(--font-mono);}
.roi-input{display:grid;gap:8px;margin-bottom:var(--s4);}
.roi-help{font-size:12px;color:var(--ink-3);line-height:1.5;}
.roi-suf{font-family:var(--font-mono);color:var(--ink-3);font-size:12px;}
.roi-slider{width:100%;accent-color:var(--accent);}
/* microprint / registration furniture */
.foil-line{height:1px;width:100%;border:0;margin:0;display:block;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);}
.foil-strip{display:none;}
.microprint{font-family:var(--font-mono);font-size:8px;line-height:1;letter-spacing:.30em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;overflow:hidden;user-select:none;}
.framed{position:relative;}
.num-ghost{position:absolute;top:-.10em;right:clamp(-40px,-2vw,0px);z-index:0;
  font-family:var(--font-sans);font-weight:var(--w-display);font-size:clamp(72px,16vw,120px);
  line-height:1;letter-spacing:0;color:rgba(255,255,255,.06);pointer-events:none;user-select:none;
  font-variant-numeric:tabular-nums;}
.num-ghost--deep{top:-.78em;}
.dither-edge{height:6px;border:0;margin:0;pointer-events:none;
  background:radial-gradient(circle at 1.5px 1.5px,var(--accent-edge) 1px,transparent 1.5px) 0 0/7px 3px repeat-x;}
.seam{position:relative;height:11px;margin:2px 0 30px;border:0;pointer-events:none;}
.seam::before{content:"";position:absolute;inset:0;background-repeat:repeat-x;
  background-image:
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.32) .8px,transparent 1.3px),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.18) .8px,transparent 1.3px),
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) .8px,transparent 1.3px);
  background-position:0 0,2px 4px,1px 8px;background-size:4px 4px,6px 4px,10px 3px;}
.rule--ticks{height:8px;border:0;margin:0;background:
  repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 28px) top/100% 8px no-repeat,
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 7px) top/100% 4px no-repeat;}
/* legacy .field canvas rules removed — Phosphor Field is CSS-only (see HERO block) */

/* ── MOTION — reveal-on-scroll (fail-open) + sweep (design system §6) ─────── */
.reveal{opacity:1;transform:none;}
.js-reveal .reveal{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);}
.js-reveal .reveal.in{opacity:1;transform:none;}
.js-reveal .reveal:nth-child(2){transition-delay:var(--stagger);}
.js-reveal .reveal:nth-child(3){transition-delay:calc(2*var(--stagger));}
.js-reveal .reveal:nth-child(n+4){transition-delay:calc(3*var(--stagger));}
[data-art-reveal]{opacity:1;transform:none;}
.js-reveal [data-art-reveal]{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);}
.js-reveal [data-art-reveal].in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js-reveal .reveal,.js-reveal [data-art-reveal]{opacity:1;transform:none;transition:none;}
}
/* Product media is the commercial proof object for each route. Keep it
   inspectable before scroll observers run and readable in narrow captures. */
.kolm-surface-media{opacity:1!important;visibility:visible!important;transform:none!important;}
@media (max-width:640px){.kolm-surface-media{min-width:280px;}}
/* count-up: literal final value is the fallback; tabular-nums kills jitter */
[data-count],.count{font-variant-numeric:tabular-nums;}
/* hero entrance — CSS-only, armed by .js-reveal, reduced-motion gated */
@media (prefers-reduced-motion:no-preference){
  .js-reveal .hero [data-enter]{animation:heroEnter var(--dur-enter) var(--ease-out) backwards;}
  .js-reveal .hero [data-enter="2"]{animation-delay:40ms;}
  .js-reveal .hero [data-enter="3"]{animation-delay:80ms;}
  .js-reveal .hero [data-enter="4"]{animation-delay:120ms;}
  .js-reveal .hero [data-enter="5"]{animation-delay:160ms;}
  .js-reveal .hero [data-enter="6"]{animation-delay:200ms;}
}
@keyframes heroEnter{from{opacity:0;transform:translateY(10px);}}
/* nav brand mark — view-transition carry-over, no transform/shadow change */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  .nav .nav__brand{view-transition-name:kolm-brand;}
}

/* ── ARTIFACT ANATOMY — the lit --paper sheet, in detail. Used by the report
   artifact (.rep), the live verifier widget (.vw), and the audit sheet. The
   on-sheet ink palette (--sheet-*) is FENCED to these lit objects only; chrome
   stays on the room ladder. One sheet per page; the only non-inset shadow. ── */
/* .rep — the signed report as a lit instrument */
.rep__bar{display:flex;align-items:center;gap:10px;padding:11px 18px;background:var(--engraved);
  box-shadow:inset 0 1px 0 var(--line-top);border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;}
.rep__bar .t{font-family:var(--font-mono);font-size:11px;font-weight:var(--w-ui);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);}
.rep__bar .chip{margin-left:auto;}
.rep__sheet{background:var(--paper);color:var(--sheet-ink);padding:22px;position:relative;overflow:hidden;}
.rep__head{display:flex;align-items:center;gap:12px;padding-bottom:15px;border-bottom:1px solid var(--sheet-line-2);}
.rep__sub{font:var(--w-display) 18px/1.2 var(--font-sans);letter-spacing:0;color:var(--sheet-ink);}
.rep__id{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;
  color:var(--sheet-ink-2);padding:3px 8px;border:1px solid var(--sheet-line-2);border-radius:2px;}
.rep__id::before{content:"SN ";color:var(--sheet-ink-3);font-weight:var(--w-ui);}
.rep__sig{position:relative;padding:20px 18px 14px;background:var(--panel);border-radius:0 0 6px 6px;}
/* on-sheet severity scale */
.sev{padding:17px 0 15px;border-bottom:1px solid var(--sheet-line);}
.sev__bar{position:relative;display:flex;height:7px;gap:3px;margin-bottom:7px;}
.sev__bar i{display:block;height:100%;border-radius:1px;}
.sev__bar .s-h{flex:7;background:var(--sheet-high);}
.sev__bar .s-m{flex:4;background:color-mix(in oklab,var(--sheet-high) 55%,var(--paper));}
.sev__bar .s-l{flex:1;background:var(--sheet-ink-3);}
.sev__bar .s-i{flex:1;background:var(--sheet-line-2);}
.sev__row{display:flex;align-items:baseline;gap:10px;margin-top:14px;font-family:var(--font-mono);
  font-size:12.5px;color:var(--sheet-ink-2);}
.sev__row .lbl{font-size:9.5px;font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;}
.sev__row b{color:var(--sheet-high);font-weight:600;}
/* on-sheet finding rows + pills */
.find{display:flex;gap:12px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--sheet-line);}
.find>div{min-width:0;}
.find__t{font-weight:600;font-size:14px;letter-spacing:0;line-height:1.4;color:var(--sheet-ink);}
.find__e{font-family:var(--font-mono);font-size:11.5px;color:var(--sheet-ink-2);margin-top:3px;line-height:1.55;overflow-wrap:anywhere;}
.find__m{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--sheet-ink-2);margin-top:6px;text-transform:uppercase;}
.find__more{font-family:var(--font-mono);font-size:11px;color:var(--sheet-ink-2);padding:11px 0 2px;}
.pill--med{background:color-mix(in oklab,var(--sheet-high) 14%,transparent);color:var(--sheet-high);border-color:color-mix(in oklab,var(--sheet-high) 40%,transparent);}
.pill--low{background:color-mix(in oklab,var(--sheet-ink-3) 14%,transparent);color:var(--sheet-ink-2);border-color:var(--sheet-line-2);}
.pill--info{background:color-mix(in oklab,var(--sheet-ink-3) 10%,transparent);color:var(--sheet-ink-2);border-color:var(--sheet-line-2);}
.pill--ok{background:color-mix(in oklab,var(--sheet-accent) 12%,transparent);color:var(--sheet-accent);border-color:color-mix(in oklab,var(--sheet-accent) 35%,transparent);}
/* on-sheet signature strip */
.sig__row{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;color:var(--ink-2);min-width:0;}
.sig__row + .sig__row{margin-top:7px;}
.sig__k{color:var(--ink-3);flex:none;}
.sig__v{white-space:nowrap;overflow:hidden;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 97%);
          mask-image:linear-gradient(90deg,#000 0%,#000 72%,transparent 97%);}
.sig__ok{margin-left:auto;flex:none;color:var(--accent);display:inline-flex;gap:6px;align-items:center;}
/* .vw — the live verifier widget (kept hook-compatible with the verify JS) */
.vw{position:relative;color:var(--sheet-ink);border-radius:10px;overflow:hidden;background:var(--paper);
  box-shadow:0 1px 0 var(--line-top),0 0 0 1px var(--line-2),0 60px 120px -40px var(--accent-wash);}
.vw__bar{display:flex;align-items:center;gap:9px;padding:12px 18px;border-bottom:1px solid var(--sheet-line);
  background:color-mix(in oklab,var(--paper) 92%,#000);}
.vw__title{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--sheet-ink-2);letter-spacing:.12em;text-transform:uppercase;}
.vw__status{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;font-weight:600;padding:4px 10px;
  border-radius:2px;border:1px solid var(--sheet-line-2);color:var(--sheet-ink-2);letter-spacing:.08em;text-transform:uppercase;}
.vw__status.is-ok{color:var(--sheet-accent);border-color:color-mix(in oklab,var(--sheet-accent) 35%,transparent);}
.vw__status.is-bad{color:var(--sheet-high);border-color:color-mix(in oklab,var(--sheet-high) 35%,transparent);}
.vw__body{padding:var(--s5);}
.vw__head{display:flex;align-items:center;gap:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--sheet-line);margin-bottom:var(--s3);}
.vw__id{min-width:0;}
.vw__subject{font:var(--w-display) 17px/1.2 var(--font-sans);color:var(--sheet-ink);letter-spacing:0;}
.vw__sub{font-family:var(--font-mono);font-size:10.5px;color:var(--sheet-ink-2);margin-top:5px;}
.vw__score{margin-left:auto;text-align:right;flex:none;}
.vw__score b{font:var(--w-display) 32px/1 var(--font-mono);color:var(--sheet-ink);font-variant-numeric:tabular-nums;display:block;letter-spacing:0;}
.vw__score b.is-changed{color:var(--sheet-high);text-decoration:line-through;text-decoration-color:var(--sheet-high);}
.vw__score span{font-family:var(--font-mono);font-size:9.5px;font-weight:600;color:var(--sheet-ink-2);text-transform:uppercase;letter-spacing:var(--track-label);}
.vw__sev{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--s3);}
.vw__chip{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border:1px solid var(--sheet-line);
  border-radius:2px;color:var(--sheet-ink-2);letter-spacing:.03em;}
.vw__chip.is-high{color:var(--sheet-high);border-color:color-mix(in oklab,var(--sheet-high) 35%,transparent);}
.vw__fields{font-family:var(--font-mono);font-size:12.5px;line-height:1.5;}
.vw__row{display:grid;grid-template-columns:140px 1fr;gap:10px;padding:6px 0;border-bottom:1px solid var(--sheet-line);}
.vw__row:last-child{border-bottom:0;}
.vw__key{color:var(--sheet-ink-3);}
.vw__val{color:var(--sheet-ink-2);word-break:break-all;}
.vw__val.is-changed{color:var(--sheet-high);text-decoration:underline wavy var(--sheet-high);text-underline-offset:3px;}
.vw__el{color:var(--sheet-ink-3);}
.vw__detail{color:var(--sheet-ink-3);}
.vw__checks{margin-top:var(--s3);display:grid;gap:8px;}
.vw__check{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;color:var(--sheet-ink-2);}
.vw.is-live .vw__check{opacity:0;transform:translateY(4px);transition:opacity 280ms var(--ease-out),transform 280ms var(--ease-out);}
.vw.is-live .vw__check.show{opacity:1;transform:none;}
.vw__check .mk{width:15px;height:15px;flex:none;}
.vw__check.ok .mk{color:var(--sheet-accent);}
.vw__check.bad .mk{color:var(--sheet-high);}
.vw__prov{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--sheet-line);
  font-family:var(--font-mono);font-size:11px;color:var(--sheet-ink-2);line-height:1.5;}
.vw__prov b{color:var(--sheet-ink);font-weight:var(--w-ui);}
.vw__prov.is-bad b{color:var(--sheet-high);}
.vw__fw{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s3);}
.vw__actions{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap;}
.vw__actions .btn--ghost{color:var(--sheet-ink);border-color:var(--sheet-line-2);background:transparent;}
.vw__actions .btn--ghost:hover{border-color:var(--sheet-ink);background:rgba(17,22,19,.05);}
.vw__actions-k{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sheet-ink-2);margin:var(--s4) 0 0;}
.vw__attack{font-family:var(--font-mono);border-color:color-mix(in oklab,var(--sheet-high) 35%,transparent);color:var(--sheet-high);}
.vw :focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--sheet-accent);}
@media (prefers-reduced-motion:reduce){.vw.is-live .vw__check{transition:none;opacity:1;transform:none;}}
/* the seal roundel (rendered by the verify widget) — lives on the sheet */
.seal{position:relative;display:inline-block;width:var(--seal-size,128px);height:var(--seal-size,128px);color:var(--sheet-ink-3);}
.seal svg{width:100%;height:100%;display:block;overflow:visible;}
.seal .seal-ring,.seal .seal-ring-2{fill:none;stroke:currentColor;}
.seal .seal-bars rect{fill:currentColor;}
.seal .seal-type{fill:currentColor;font-family:var(--font-mono);font-size:5px;font-weight:var(--w-ui);letter-spacing:.2em;text-transform:uppercase;}
.seal .seal-rot{transform-origin:50% 50%;transform-box:fill-box;}
.seal .seal-fracture{fill:none;stroke:var(--sheet-high);stroke-width:1.6;opacity:0;}
.seal.is-sealed{color:var(--sheet-accent);}
.seal.is-void{color:var(--sheet-high);}
.seal.is-void .seal-type{opacity:.45;}
.seal.is-void .seal-fracture{opacity:1;}
.seal.is-pending{color:var(--sheet-ink-3);}
/* legacy vertical verification flow (audit sheet): node -> join -> node */
.flow__t-k{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:20px;}
.fnode{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--line);border-radius:10px;
  background:var(--sheen),var(--panel);font-family:var(--font-mono);font-size:12.5px;color:var(--ink-2);}
.fnode .fk{color:var(--ink-3);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;flex:none;width:86px;}
.fjoin{height:22px;width:1px;margin-left:28px;background:linear-gradient(180deg,var(--line-2),var(--accent-edge));}
.fnode--ok{border-color:var(--accent-edge);background:var(--accent-soft);color:var(--accent);}
.fnode--ok .fk{color:var(--accent);}
/* one live product state on the homepage .ui: compiling -> signed */
.ui__tick-to{position:absolute;right:0;top:0;opacity:0;white-space:nowrap;}
@media (prefers-reduced-motion:no-preference){
  .ui__tick-from{display:inline;animation:tfo 520ms 1.3s forwards;}
  .ui__tick-to{animation:tfi 520ms 1.3s forwards;}
}
@keyframes tfo{to{opacity:0;}}
@keyframes tfi{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.ui__tick-from,.ui__tick-to{animation:none;}}
/* section/eyebrow aliases the templates use */
.compiler-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:var(--fs-eyebrow);font-weight:var(--w-ui);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px;}
.compiler-kicker::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent);flex:none;}
.proof{position:relative;}
.proof-strip{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);padding:var(--s4) 0;}
.bars--ink i{background:var(--sheet-ink);}
.bad{color:var(--accent-dead);}


/* ============================================================
   LEGACY TOKEN COMPAT — not part of the Datasheet Machine system.
   Defines tokens still referenced by un-migrated audit.kolm.ai
   surfaces + a few legacy inline styles on main-site pages, so no
   var() resolves empty. Do not use these in new work.
   ============================================================ */
:root {
  --sheet:#F3F5F2; --sheet-2:#EBEEE9;
  --sheet-accent-soft:rgba(11,122,76,.10); --sheet-high-soft:rgba(255,130,102,.12); --sheet-high-edge:rgba(255,130,102,.34);
  --shadow-tint:rgba(4,8,9,.55);
  --void:#E0A89F; --void-soft:rgba(224,168,159,.12); --void-edge:rgba(224,168,159,.34);
  --sev-critical:#FF8266; --sev-high:#FF8266; --sev-med:#E3C368; --sev-medium:#E3C368; --sev-low:#8FB7E8;
  --accent-deep:#5FEDB1; --accent-on-ink:var(--accent); --attn-text:#E3C368; --ink-deep-sink:#08090A;
}

/* ============================================================
   SIGNATURE INSTRUMENT — the hero pipeline on REAL liquid glass.
   Replaces the repetitive datasheet rectangle. Shows the product:
   your API calls -> capture -> compile -> signed .kolm -> runs
   anywhere -> verify. The glass panel refracts the .field behind it.
   ============================================================ */
.instrument{position:relative;border-radius:var(--r-lg);padding:18px 20px 16px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),var(--glass-tint);
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--line-2);border-top-color:var(--line-top);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 0 rgba(0,0,0,.5), 0 44px 100px -40px rgba(0,0,0,.8);}
@supports not (backdrop-filter:blur(1px)){.instrument{background:var(--register);}}
@media (prefers-reduced-transparency:reduce){.instrument{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--engraved);}}
.instrument__bar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font:var(--w-ui) 10px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding-bottom:13px;margin-bottom:4px;border-bottom:1px solid var(--line);}
.instrument__bar b{color:var(--ink-2);font-weight:var(--w-ui);}
.instrument__bar .live{color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
.instrument__bar .live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 7px var(--accent-glow);}
@media (prefers-reduced-motion:no-preference){.instrument__bar .live::before{animation:inst-pulse 2.4s ease-in-out infinite;}}
@keyframes inst-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}

/* pipe⁺ (graphics-kit-2026) — beveled top-lit nodes, an always-on phosphor spine,
   and one traveling bright pulse = "behavior captured." Upgraded in place;
   geometry/viewBox unchanged. Falls back to flat fills where defs are absent. */
.pipe{display:block;width:100%;height:auto;}
.pipe text{font-family:var(--font-mono);}
/* nodes: top-lit beveled plates (one light source, contact shadow) */
.pipe .nd{fill:url(#ndFace) var(--register);stroke:var(--line-2);stroke-width:1;filter:url(#ndShadow);} /* fallback fill where defs absent */
.pipe .nd-hi{fill:none;stroke:var(--nd-bevel-top,rgba(255,255,255,.18));stroke-width:1;} /* 1px top specular */
.pipe .nd-art{fill:url(#ndArt) var(--paper);stroke:none;filter:url(#ndShadow);} /* fallback fill where defs absent */
.pipe .spine{stroke:var(--line-2);stroke-width:1.4;fill:none;stroke-linecap:round;}
/* base flow: a faint always-on phosphor trace (verified spine) */
.pipe .flow{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;opacity:.32;}
/* the pulse: a short bright dash traveling the spine = "behavior captured" */
.pipe .flow-pulse{stroke:var(--accent);stroke-width:2.2;fill:none;stroke-linecap:round;
  stroke-dasharray:14 198;stroke-dashoffset:212;filter:drop-shadow(0 0 5px var(--accent-glow));}
.pipe .lbl{fill:var(--ink);font-size:12.5px;font-weight:var(--w-ui);letter-spacing:.01em;}
.pipe .lbl-art{fill:var(--sheet-ink);font-size:12.5px;font-weight:var(--w-display);letter-spacing:.01em;}
.pipe .sub{fill:var(--ink-3);font-size:9px;letter-spacing:.05em;}
.pipe .sub-art{fill:var(--sheet-ink-2);font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;}
.pipe .tag{fill:var(--ink-4);font-size:8px;letter-spacing:.18em;text-transform:uppercase;}
.pipe .ok{fill:var(--accent);}
.pipe .ok-stroke{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.pipe .chip{fill:rgba(255,255,255,.025);stroke:var(--line);stroke-width:1;}
.pipe .chip-t{fill:var(--ink-2);font-size:9px;letter-spacing:.04em;}
.pipe .seal{fill:var(--sheet-accent);}
.pipe .reg{stroke:var(--line);stroke-width:1;}        /* registration tick at each node corner */
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .pipe .flow-pulse{animation:pipe-pulse 3.6s cubic-bezier(.45,0,.55,1) infinite;}
  [data-art-reveal] .pipe .flow{animation:pipe-breathe 3.6s ease-in-out infinite;}
}
@keyframes pipe-pulse{0%{stroke-dashoffset:212;}70%,100%{stroke-dashoffset:0;}}
@keyframes pipe-breathe{0%,100%{opacity:.24;}50%{opacity:.42;}}
@media (prefers-reduced-motion:reduce){.pipe .flow{opacity:.4;} .pipe .flow-pulse{display:none;}}

/* ============================================================
   .KOLM ANATOMY — premium ASCII exploded-view (text-art).
   Shows the NOUN: what's inside one signed portable file.
   Box-drawing in Geist Mono; one phosphor element = the seal.
   ============================================================ */
.kolm-art{position:relative;border-radius:var(--r-lg);padding:18px 20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),var(--glass-tint);
  -webkit-backdrop-filter:blur(18px) saturate(165%);backdrop-filter:blur(18px) saturate(165%);
  border:1px solid var(--line-2);border-top-color:var(--line-top);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 70px -30px rgba(0,0,0,.7);}
@supports not (backdrop-filter:blur(1px)){.kolm-art{background:var(--register);}}
.kolm-art__hd{display:flex;justify-content:space-between;font:var(--w-ui) 10px/1 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid var(--line);}
.kolm-art pre{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.85;color:var(--ink-3);
  white-space:pre;overflow-x:auto;letter-spacing:0;-webkit-font-smoothing:antialiased;}
.kolm-art .rail{color:var(--ink-4);}
.kolm-art .f{color:var(--ink);font-weight:var(--w-display);}
.kolm-art .k{color:var(--ink);}
.kolm-art .u{color:var(--ink-3);}
.kolm-art .seal{color:var(--accent);}
@media (max-width:560px){.kolm-art pre{font-size:10px;}}
@media (max-width:380px){.kolm-art pre{font-size:9px;letter-spacing:0;}}

/* ============================================================================
   ARTISANAL GRAPHICS KIT — 2026   (docs/design/graphics-kit-2026.md)
   Retires the "bare rectangle": every plate becomes a crafted, milled material,
   and seven SVG diagram organs (pipe⁺ above, intercept, runtime-ramp, verify-
   loop, kolm-anatomy, capture-stream, .kglyph) ship on the existing glass.
   Reuses the fenced accent/line/ink ramps (NO new accents). Animates only
   transform / opacity / stroke-dashoffset (compositor-safe). Reduced-motion,
   reduced-transparency and forced-colors safe. Green ≈3% of pixels = verified.
   Hierarchy by specificity — no !important. Existing classes untouched.
   ============================================================================ */

/* ── 1a · TOKENS (derived from existing ramps; no new accents) ─────────────── */
:root{
  /* pipe⁺ */
  --nd-fill:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014));
  --nd-bevel-top:rgba(255,255,255,.18); --nd-shadow:rgba(0,0,0,.45);
  --flow-core:#3FE5A0; --flow-halo:#3FE5A0;            /* pulse = the one moment */
  /* runtime-ramp */
  --ramp-rung-h:54px; --ramp-gap:10px;
  --ramp-fill:rgba(255,255,255,.025);                  /* idle bar (= .pipe .chip) */
  --ramp-fit:var(--accent-soft);                       /* selected rung wash */
  --ramp-bar-idle:var(--line-2); --ramp-bar-fit:var(--accent);
  /* verify-loop */
  --vl-void:#E0A89F;                                   /* fail tone (reuses --void family) */
  --vl-trace:rgba(255,255,255,.06);                    /* idle data path */
  --vl-dash:14 320;                                    /* sealed-pulse comet */
  /* kolm-anatomy */
  --anat-plate:rgba(255,255,255,.022); --anat-edge:rgba(255,255,255,.07);
  --anat-shadow:rgba(4,8,9,.55); --anat-dy:14;         /* px y-offset per layer */
  /* capture-stream */
  --cap-row:rgba(255,255,255,.022);                    /* ledger row fill */
  --cap-tick:var(--accent-scan);                       /* governed tick */
  --cap-flow:var(--accent);                            /* live capture line */
  --cap-dash:14 10;                                    /* stream dash rhythm */
  /* card-system */
  --mill:linear-gradient(180deg,rgba(255,255,255,.05),transparent 3px); /* milled top edge */
  --tick:var(--line-top);                              /* corner registration mark */
  --glyph-ink:rgba(255,255,255,.34);                   /* engraved glyph stroke */
  --glyph-lit:var(--accent);                           /* lit ONLY when [data-state=ok] */
  --r-plate:var(--r);
  /* section-illustration (.kglyph) */
  --glyph-stroke:1.25; --glyph-h:rgba(255,255,255,.10);  /* top highlight */
  --glyph-line:rgba(255,255,255,.16); --glyph-dim:var(--ink-4);
}

/* ── 1b · CARD-SYSTEM — milled top rail + registration tick + crafted glyph ── */
/* every plate gets a milled top rail + a registration tick — not a bare box */
.card,.plate,.panel{overflow:clip;}
.card::after,.plate::after,.panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--mill);
  -webkit-mask:linear-gradient(#000,#000);mask:linear-gradient(#000,#000);}
.card>.tick{position:absolute;top:8px;right:8px;width:9px;height:9px;z-index:2;
  border-top:1px solid var(--tick);border-right:1px solid var(--tick);
  opacity:.5;transition:opacity 180ms var(--ease-mat);}
.card:hover>.tick{opacity:.9;}
/* the crafted glyph — fills the reserved .card__art slot, 40px, top-lit */
.card__glyph{display:block;width:40px;height:40px;margin:0 0 var(--s4);
  color:var(--glyph-ink);overflow:visible;}
/* …but when the wrapper carries a full-bleed .kglyph illustration (grid--2 cards),
   the 40px corner-thumbnail sizing crushes the 100×60 artwork. Promote the figure to
   the full-width .card__art slot (corner registration marks + svg-driven height). */
.card__glyph:has(>.kglyph){position:relative;width:100%;height:auto;
  margin:2px 0 18px;overflow:visible;color:rgba(255,255,255,.32);pointer-events:none;}
.card__glyph:has(>.kglyph)>.kglyph{width:100%;height:auto;}
.card__glyph:has(>.kglyph)::before,
.card__glyph:has(>.kglyph)::after{content:"";position:absolute;width:7px;height:7px;}
.card__glyph:has(>.kglyph)::before{top:0;left:0;
  border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);}
.card__glyph:has(>.kglyph)::after{bottom:0;right:0;
  border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);}
.card__glyph [stroke]{stroke:currentColor;stroke-width:1.25;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;}
.card__glyph .face{fill:rgba(255,255,255,.025);}      /* lit top facet */
.card__glyph .edge{stroke:var(--line-top);}           /* one-source highlight edge */
.card[data-state=ok] .card__glyph{color:var(--glyph-lit);}
.card[data-state=ok] .card__glyph .gleam{opacity:1;}
.card__glyph .gleam{opacity:0;stroke:var(--accent);transition:opacity 220ms var(--ease-mat);}
.reveal .card__glyph{transform:translateY(3px);opacity:0;
  transition:transform 420ms var(--ease-mat),opacity 420ms var(--ease-mat);}
.reveal.in .card__glyph{transform:none;opacity:1;}
@media (prefers-reduced-motion:reduce){.reveal .card__glyph{transform:none;opacity:1;transition:none;}}
@media (prefers-reduced-transparency:reduce),(forced-colors:active){
  .card::after,.plate::after,.panel::after{display:none;}}

/* ── 1d · INTERCEPT — drop-in proxy: pass-through wire + no-rewrite wedge ───── */
.icpt{display:block;width:100%;height:auto;}
.icpt text{font-family:var(--font-mono);}
.icpt .spine{stroke:var(--line-2);stroke-width:1.4;fill:none;}
.icpt .nd{fill:rgba(255,255,255,.02);stroke:var(--line-2);stroke-width:1;}
.icpt .nd-art{fill:var(--paper);stroke:none;}
.icpt .lbl{fill:var(--ink);font-size:12.5px;font-weight:var(--w-ui);letter-spacing:.01em;}
.icpt .lbl-art{fill:var(--sheet-ink);font-size:12px;font-weight:var(--w-display);letter-spacing:.01em;}
.icpt .sub{fill:var(--ink-3);font-size:9px;letter-spacing:.04em;}
.icpt .sub-art{fill:var(--sheet-ink-2);font-size:8.5px;letter-spacing:.06em;}
.icpt .tag{fill:var(--ink-4);font-size:8px;letter-spacing:.18em;text-transform:uppercase;}
/* the wedge — only lit node on the wire (accent = active intercept) */
.icpt-kolm{fill:rgba(63,229,160,.05);stroke:var(--accent);stroke-width:1.4;
  filter:drop-shadow(0 0 7px var(--accent-glow));}
.icpt-kolm + text{fill:var(--accent);}
.icpt .flow{stroke:var(--accent);stroke-width:1.6;fill:none;stroke-linecap:round;
  stroke-dasharray:10 290;stroke-dashoffset:300;}
.icpt-tap{stroke:var(--accent);stroke-width:1.3;fill:none;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:3 4;opacity:.85;}                    /* recording branch */
.icpt-pip{fill:var(--accent);}
.icpt-seal{stroke:var(--sheet-accent);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .icpt .flow{animation:icpt-flow 3.2s cubic-bezier(.4,0,.6,1) infinite;}
  [data-art-reveal] .icpt-pip{animation:icpt-tap 3.2s cubic-bezier(.4,0,.6,1) infinite;
    transform-box:fill-box;transform-origin:center;will-change:transform,opacity;}
}
@keyframes icpt-flow{0%{stroke-dashoffset:300;}60%,100%{stroke-dashoffset:0;}}
@keyframes icpt-tap{0%,45%{transform:scale(1);opacity:.5;}
  60%{transform:scale(1.9);opacity:1;}100%{transform:scale(1);opacity:.5;}}
@media (prefers-reduced-motion:reduce){.icpt .flow{stroke-dashoffset:0;}}

/* ── 1e · RUNTIME-RAMP — same .kolm ranked across runtimes; .is-fit = green ── */
.runtime-ramp{isolation:isolate;}
.ramp .rng{fill:var(--ramp-fill);stroke:var(--line-2);stroke-width:1;}
.ramp .bar{fill:var(--ramp-bar-idle);opacity:.5;transform-origin:left center;will-change:transform;}
.ramp .rl{fill:var(--ink);font:var(--w-display) 13px var(--font-sans);letter-spacing:.01em;}
.ramp .rs{fill:var(--ink-4);font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;}
.ramp .rc{fill:var(--ink-3);font-size:11px;}
.ramp .rt{fill:var(--ink-4);font-size:9px;letter-spacing:.04em;}
.ramp .tick{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* the one selected, in-spec rung — green is verdict, ~3% of pixels */
.ramp .is-fit .rng{fill:var(--ramp-fit);stroke:var(--accent-edge);}
.ramp .is-fit .bar{fill:var(--accent);opacity:.16;}
.ramp .is-fit .rl{fill:var(--accent);}
.ramp .is-fit .rc{fill:var(--accent);}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .ramp .bar{transform:scaleX(0);animation:ramp-grow var(--dur-sweep) var(--ease-out) forwards;}
  [data-art-reveal] .ramp .rung:nth-child(3) .bar{animation-delay:.07s;}
  [data-art-reveal] .ramp .rung:nth-child(4) .bar{animation-delay:.14s;}
  [data-art-reveal] .ramp .rung:nth-child(5) .bar{animation-delay:.21s;}
  [data-art-reveal] .ramp .is-fit .bar{animation:ramp-grow var(--dur-sweep) var(--ease-out) forwards,ramp-fit 2.6s var(--ease-mat) .4s infinite;}
}
@keyframes ramp-grow{to{transform:scaleX(1);}}
/* GPU-only pulse: opacity on the accent wash, never filter (premium-overhaul §2/§5) */
@keyframes ramp-fit{0%,100%{opacity:.16;}50%{opacity:.34;}}
@media (prefers-reduced-motion:reduce){.ramp .bar{transform:none;animation:none;}}

/* ── 1f · VERIFY-LOOP — trust kernel; data-vl drives valid|void (fail-open) ── */
.vl{margin-top:6px}
.vl .vl-trace{stroke:var(--vl-trace);stroke-width:1.6;fill:none}
.vl .vl-flow{stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--vl-dash);stroke-dashoffset:334}
.vl-band{fill:var(--accent-soft);stroke:var(--accent-edge);stroke-width:1}
.vl-text{fill:var(--accent);font:var(--w-display) 11px/1 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase}
.vl-mark{stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;
  transform-box:fill-box;transform-origin:center}
.vl-ok{stroke:var(--accent);--ox:-26px;transform:translateX(-26px)}
.vl-void{stroke:var(--vl-void);--ox:0px}
.vloop[data-vl="valid"] .vl-ok{opacity:1}
/* VOID — single source swap, no new layer */
.vloop[data-vl="void"] .vl-flow{stroke:var(--vl-void)}
.vloop[data-vl="void"] .vl-band{fill:var(--void-soft);stroke:var(--void-edge)}
.vloop[data-vl="void"] .vl-text{fill:var(--vl-void)}
.vloop[data-vl="void"] .vl-void{opacity:1}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .vl-flow{animation:vl-seal 3.6s var(--ease-out) infinite}
  [data-art-reveal] .vloop[data-vl] .vl-mark{animation:vl-stamp 3.6s var(--ease-out) infinite}
}
@keyframes vl-seal{0%{stroke-dashoffset:334}60%,100%{stroke-dashoffset:0}}
@keyframes vl-stamp{0%,58%{opacity:0;transform:scale(.85) translateX(var(--ox,0))}
  66%{opacity:1;transform:scale(1.12) translateX(var(--ox,0))}
  72%,100%{opacity:1;transform:scale(1) translateX(var(--ox,0))}}
@media (prefers-reduced-motion:reduce){
  .vl-flow{stroke-dashoffset:0;animation:none}
  .vloop[data-vl] .vl-mark{animation:none}}
@media (forced-colors:active){
  .vl-band{fill:Canvas;stroke:CanvasText}.vl-text,.vl-flow{stroke:LinkText;fill:LinkText}}

/* ── 1g · KOLM-ANATOMY — SVG exploded view of one signed .kolm artifact ────── */
.anat{position:relative;border-radius:var(--r-lg);padding:18px 20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.01)),var(--glass-tint);
  -webkit-backdrop-filter:blur(18px) saturate(165%);backdrop-filter:blur(18px) saturate(165%);
  border:1px solid var(--line-2);border-top-color:var(--line-top);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 70px -30px rgba(0,0,0,.7);}
@supports not (backdrop-filter:blur(1px)){.anat{background:var(--register);}}
.anat__hd{display:flex;justify-content:space-between;font:var(--w-ui) 10px/1 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:13px;
  padding-bottom:11px;border-bottom:1px solid var(--line);}
.anat svg{display:block;width:100%;height:auto;}
.anat .face{fill:var(--anat-plate);stroke:var(--anat-edge);stroke-width:1;}
.anat .bevel{stroke:var(--line-top);stroke-width:1;fill:none;opacity:.6;}      /* top-light edge */
.anat .lead{stroke:var(--line);stroke-width:1;fill:none;stroke-dasharray:2 3;}  /* leader lines */
.anat .lbl{fill:var(--ink);font:var(--w-display) 12px/1 var(--font-mono);letter-spacing:.01em;}
.anat .sub{fill:var(--ink-3);font:var(--w-ui) 8.5px/1 var(--font-mono);letter-spacing:.10em;text-transform:uppercase;}
.anat .reg{stroke:var(--ink-4);stroke-width:1;fill:none;}                       /* corner reg marks */
.anat .seal{fill:var(--accent);}
.anat .seal-ring{stroke:var(--accent);stroke-width:1.4;fill:none;}
.anat .scan{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-linecap:round;
  stroke-dasharray:8 240;stroke-dashoffset:248;opacity:.9;}
.anat .layer{transform:translateY(0);transition:transform .5s var(--ease-mat);}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .anat .scan{animation:anat-scan 3.6s cubic-bezier(.4,0,.6,1) infinite;}
  [data-art-reveal] .anat .seal-ring{animation:inst-pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}}
@keyframes anat-scan{0%{stroke-dashoffset:248;}55%,100%{stroke-dashoffset:0;}}
@media (prefers-reduced-transparency:reduce){.anat .face{fill:rgba(255,255,255,.05);}}

/* ── 1h · CAPTURE-STREAM — live ledger: API line crystallizes into signed rows ─ */
.cap{display:block;width:100%;height:auto;font-family:var(--font-mono);}
.cap-flow{fill:none;stroke:var(--cap-flow);stroke-width:1.6;stroke-linecap:round;opacity:.16;}
.cap-stream{fill:none;stroke:var(--cap-flow);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:var(--cap-dash);}
.cap-gate{fill:rgba(255,255,255,.025);stroke:var(--line-2);stroke-width:1;}
.cap-eye{fill:var(--accent);}
.cap-tag{fill:var(--ink-4);font-size:8px;letter-spacing:.18em;text-transform:uppercase;}
.cap-bg{fill:var(--cap-row);stroke:var(--line);stroke-width:1;}
.cap-id{fill:var(--ink-3);font-size:9px;letter-spacing:.04em;}
.cap-fill{fill:rgba(255,255,255,.10);}
.cap-ok{fill:none;stroke:var(--cap-tick);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.cap-seal{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 3px var(--accent-glow));}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .cap-stream{animation:cap-run 3.4s linear infinite;}
  [data-art-reveal] .cap-eye{animation:inst-pulse 2.4s ease-in-out infinite;}
  [data-art-reveal] .cap-r{opacity:0;animation:cap-land .5s var(--ease-out) forwards;
    animation-delay:calc(.5s + var(--i)*.32s);}
}
@keyframes cap-run{to{stroke-dashoffset:-48;}}
@keyframes cap-land{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.cap-r{opacity:1;}}

/* ── 1i · SECTION-ILLUSTRATION (.kglyph) — hairline glyph for feature cards ─── */
.kglyph{display:block;width:100%;height:auto;aspect-ratio:5/3;border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),rgba(255,255,255,.012);
  box-shadow:inset 0 1px 0 var(--glyph-h),inset 0 0 0 1px var(--line);isolation:isolate;overflow:hidden;}
.kglyph *{vector-effect:non-scaling-stroke;}
.kglyph .ln{stroke:var(--glyph-line);stroke-width:var(--glyph-stroke);fill:none;stroke-linecap:round;stroke-linejoin:round;}
.kglyph .dim{stroke:var(--glyph-dim);stroke-width:1;fill:none;stroke-dasharray:2 3;}
.kglyph .fill{fill:rgba(255,255,255,.03);stroke:var(--glyph-line);stroke-width:1;}
.kglyph .ok{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 4px var(--accent-glow));}
.kglyph .seal{fill:var(--accent);}
.kglyph .reg{stroke:var(--glyph-dim);stroke-width:1;}
.kglyph .t{fill:var(--ink-3);font:var(--w-ui) 8px/1 var(--font-mono);letter-spacing:.04em;}
.kglyph .flow{stroke:var(--accent);stroke-width:1.5;fill:none;stroke-linecap:round;
  stroke-dasharray:5 7;stroke-dashoffset:0;}
@media(prefers-reduced-motion:no-preference){
  .card:hover .kglyph .flow{animation:kg-flow 2.6s linear infinite;will-change:stroke-dashoffset;}}
@keyframes kg-flow{to{stroke-dashoffset:-24;}}
@media(prefers-reduced-motion:reduce){.kglyph .flow{animation:none;}}
@media(prefers-contrast:more){.kglyph .ok,.kglyph .flow{filter:none;}}
/* ── end ARTISANAL GRAPHICS KIT — 2026 ──────────────────────────────────────── */

/* ============================================================
   PREMIUM BACKDROP — "Captured Signal" volumetric field.
   Fixed + site-wide, injected once by kolm-2026.js (wireBackdrop).
   Atmosphere (lifted, never flat black) + two volumetric phosphor
   shafts + drifting capture motes (the product thesis) + film grain.
   FENCED cool depth tone in atmosphere ONLY; green stays the accent.
   GPU-only (transform/opacity); reduced-motion freezes to a lit still.
   ============================================================ */
:root{ --depth:#13242E; --depth-glow:rgba(70,140,165,.20); --shaft:rgba(63,229,160,.17); }
.field{display:none !important;}  /* superseded by the fixed .bg backdrop */
/* body becomes a stacking context so the z-index:-2 .bg paints OVER body's own
   opaque floor but behind all content (else body's bg hides the backdrop). */
body{position:relative;z-index:0;}
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(72% 54% at 77% 2%, rgba(63,229,160,.12) 0%, transparent 56%),
    radial-gradient(120% 92% at 82% -10%, var(--depth) 0%, transparent 58%),
    radial-gradient(95% 78% at 13% 113%, rgba(46,100,130,.17) 0%, transparent 60%),
    radial-gradient(135% 125% at 50% 46%, transparent 28%, #050607 100%),
    var(--room);}
.bg__haze{position:absolute;left:50%;top:42%;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;
  background:radial-gradient(circle, var(--depth-glow) 0%, transparent 62%);filter:blur(8px);
  will-change:transform,opacity;animation:bg-breathe 26s ease-in-out infinite;}
.bg__shaft{position:absolute;top:-30vh;left:50%;width:62vmax;height:170vh;transform-origin:50% 0;
  will-change:transform,opacity;mix-blend-mode:screen;}
.bg__shaft::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, var(--shaft) 0%, rgba(63,229,160,.05) 22%, rgba(63,229,160,.02) 48%, transparent 78%);
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0% 100%);filter:blur(26px);}
.bg__shaft--a{transform:translateX(-50%) rotate(-9deg);animation:bg-sweepA 32s ease-in-out infinite;}
.bg__shaft--a::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, var(--shaft) 0%, rgba(63,229,160,.045) 30%, transparent 74%);
  clip-path:polygon(46% 0, 54% 0, 72% 100%, 28% 100%);filter:blur(6px);opacity:.7;}
.bg__shaft--b{transform:translateX(-50%) rotate(7deg);opacity:.5;animation:bg-sweepB 40s ease-in-out infinite;}
.bg__motes{position:absolute;inset:0;}
.bg__mote{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);opacity:0;
  will-change:transform,opacity;box-shadow:0 0 6px 1px rgba(63,229,160,.5);animation:bg-drift linear infinite;}
.bg__mote.lg{width:3px;height:3px;box-shadow:0 0 9px 2px rgba(63,229,160,.45);}
.bg__mote.pkt{width:9px;height:1px;border-radius:1px;box-shadow:0 0 7px 1px rgba(63,229,160,.45);}
.bg__grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:200px 200px;will-change:transform;animation:bg-grain 1.1s steps(4) infinite;}
@keyframes bg-breathe{0%,100%{transform:scale(1);opacity:.78}50%{transform:scale(1.18);opacity:1}}
@keyframes bg-sweepA{0%,100%{transform:translateX(-50%) rotate(-11deg)}50%{transform:translateX(-46%) rotate(-5deg)}}
@keyframes bg-sweepB{0%,100%{transform:translateX(-50%) rotate(8deg);opacity:.46}50%{transform:translateX(-54%) rotate(3deg);opacity:.58}}
@keyframes bg-drift{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.8}85%{opacity:.55}100%{transform:translate3d(var(--dx,20px),var(--dy,-120vh),0);opacity:0}}
@keyframes bg-grain{0%{transform:translate(0,0)}25%{transform:translate(-6%,3%)}50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,4%)}100%{transform:translate(5%,2%)}}
@media (prefers-reduced-motion:reduce){.bg__haze,.bg__shaft--a,.bg__shaft--b,.bg__mote,.bg__grain{animation:none !important;}.bg__mote{opacity:.4;}}
@media (prefers-reduced-transparency:reduce){.bg__grain{display:none;}}

/* ============================================================================
   EXPLAINER + DIAGRAM KIT - visuals wave 2026-06-14
   Reusable, page-agnostic data-viz + explanatory primitives. ADDITIVE ONLY:
   no existing selector or token is modified. Everything inherits the Datasheet
   Machine idiom - squared radii, mono labels, engraved hairlines, restrained
   green accent (verdict only, ~3% of pixels), dark --room floor, one lit --paper
   object. Reveals reuse the existing .reveal/.in + [data-art-reveal] observers;
   counts reuse [data-count]. Every component ships a prefers-reduced-motion
   fallback and conveys no essential meaning by color or motion alone (mark+text).
   Components: kchart - kflow - kdef - kspec - kmatrix - ktimeline - kthreat - kcal
   ============================================================================ */

/* shared kit tokens (scoped names, additive) */
:root{
  --k-grid:rgba(255,255,255,.06);      /* chart gridlines           */
  --k-axis:var(--line-2);              /* chart axes                 */
  --k-bar:rgba(255,255,255,.10);       /* default bar/track fill     */
  --k-bar-2:rgba(255,255,255,.18);     /* second series             */
  --k-mark:var(--ink-3);               /* generic dot/node          */
  --k-best:var(--accent);             /* highlighted "best" value   */
  --k-lbl:var(--ink-3);                /* mono micro labels         */
}

/* shared figure shell - corner registration marks, like .card__art */
.kfig{position:relative;display:block;margin:0;}
.kfig__cap{margin-top:12px;font:var(--w-body) 12px/1.5 var(--font-mono);
  color:var(--ink-3);letter-spacing:.01em;}
.kfig__cap b{color:var(--ink-2);font-weight:var(--w-ui);}
.k-reg{position:absolute;width:8px;height:8px;pointer-events:none;}
.k-reg--tl{top:0;left:0;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2);}
.k-reg--br{bottom:0;right:0;border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2);}

/* ── 1 · KCHART - inline-SVG data-viz primitives ────────────────────────────── */
.kchart{display:block;width:100%;height:auto;font-family:var(--font-mono);overflow:visible;}
.kchart .k-grid{stroke:var(--k-grid);stroke-width:1;}
.kchart .k-axis{stroke:var(--k-axis);stroke-width:1.2;fill:none;stroke-linecap:square;}
.kchart .k-axlbl{fill:var(--ink-3);font-size:9px;letter-spacing:.10em;text-transform:uppercase;}
.kchart .k-tick{fill:var(--ink-4);font-size:8.5px;letter-spacing:.04em;}
.kchart .k-lbl{fill:var(--ink-2);font-size:10px;letter-spacing:.02em;}
.kchart .k-val{fill:var(--ink);font-size:11px;font-weight:var(--w-display);letter-spacing:.01em;}
/* (a) scatter / bubble */
.kchart .k-pt{fill:var(--k-mark);stroke:var(--room);stroke-width:1;}
.kchart .k-pt.is-best{fill:var(--k-best);stroke:var(--accent);}
.kchart .k-ring{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:.7;}
.kchart .k-cross{stroke:var(--accent);stroke-width:1;stroke-dasharray:2 3;fill:none;opacity:.6;}
/* (b) bars - grouped/stacked */
.kchart .k-bar{fill:var(--k-bar);}
.kchart .k-bar.s2{fill:var(--k-bar-2);}
.kchart .k-bar.is-best{fill:var(--accent);opacity:.85;}
.kchart .k-base{stroke:var(--k-axis);stroke-width:1.2;}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .kchart .k-bar{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;
    animation:k-bar-grow var(--dur-sweep) var(--ease-out) forwards;}
  [data-art-reveal] .kchart .k-pt{opacity:0;animation:k-pt-in .4s var(--ease-out) forwards;
    animation-delay:calc(.2s + var(--i,0)*.06s);}
}
@keyframes k-bar-grow{to{transform:scaleY(1);}}
@keyframes k-pt-in{to{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .kchart .k-bar{transform:none;animation:none;}.kchart .k-pt{opacity:1;animation:none;}}
/* (c) CSS meter-row - extends the ramp idiom, no SVG needed */
.kmeter{display:grid;gap:10px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;margin:0;padding:0;list-style:none;}
.kmeter__row{display:grid;grid-template-columns:minmax(72px,max-content) 1fr max-content;gap:14px;align-items:center;}
.kmeter__k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.kmeter__track{position:relative;height:10px;border-radius:var(--r-sm);background:var(--ramp-fill);
  box-shadow:var(--ring);overflow:hidden;}
.kmeter__bar{position:absolute;inset:0 auto 0 0;width:var(--kv,0%);background:var(--k-bar);
  border-radius:inherit;}
.kmeter__row.is-best .kmeter__bar{background:var(--accent);opacity:.85;}
.kmeter__row.is-best .kmeter__v{color:var(--accent);}
.kmeter__v{font-size:12px;font-weight:var(--w-display);color:var(--ink);text-align:right;}
@media (prefers-reduced-motion:no-preference){
  .reveal .kmeter__bar{width:0;transition:width var(--dur-sweep) var(--ease-out);}
  .reveal.in .kmeter__bar{width:var(--kv,0%);}}
@media (max-width:520px){.kmeter__row{grid-template-columns:1fr max-content;}
  .kmeter__k{grid-column:1/-1;}}

/* ── 2 · KFLOW - numbered process flow w/ connectors + readout chips ─────────── */
.kflow{display:grid;grid-template-columns:repeat(var(--kn,3),minmax(0,1fr));gap:var(--s4);
  counter-reset:kstep;align-items:stretch;}
.kstep{position:relative;display:flex;flex-direction:column;gap:10px;padding:var(--s5);
  background:var(--sheen),var(--well);border-radius:var(--r-sm);box-shadow:var(--ring);counter-increment:kstep;}
.kstep__n{display:inline-flex;align-items:center;gap:9px;
  font:600 10.5px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--accent);}
.kstep__n::before{content:counter(kstep,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  border:1px solid var(--accent-edge);border-radius:var(--r-sm);background:var(--accent-soft);
  color:var(--accent);font-size:11px;font-weight:var(--w-display);}
.kstep__n::after{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);}
.kstep h3,.kstep__t{margin:0;font:var(--w-display) 16px/1.2 var(--font-sans);letter-spacing:0;color:var(--ink);}
.kstep p,.kstep__d{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);}
.kstep__read{margin-top:auto;display:inline-flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-top:11px;border-top:1px solid var(--line);font-family:var(--font-mono);}
.kstep__read .n{font-size:15px;font-weight:var(--w-display);color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:0;}
.kstep__read .u{font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);}
/* connector chevron - drawn between steps, hidden on the last */
.kstep::after{content:"";position:absolute;right:calc(var(--s4)*-1 - 1px);top:50%;width:var(--s4);height:1px;
  background:var(--line-2);z-index:1;pointer-events:none;}
.kstep:last-child::after{display:none;}
@media (max-width:760px){
  .kflow{grid-template-columns:1fr;}
  .kstep::after{right:auto;left:50%;top:auto;bottom:calc(var(--s4)*-1 - 1px);width:1px;height:var(--s4);transform:translateX(-50%);}
}

/* ── 3 · KDEF - inline definition affordance (term + popover) ────────────────── */
.kdef{position:relative;display:inline-flex;align-items:center;min-height:38px;color:inherit;font:inherit;cursor:help;
  border-bottom:1px dotted var(--ink-3);text-underline-offset:2px;background:none;padding:0 2px;margin:-10px 0;
  -webkit-text-decoration:none;text-decoration:none;}
.kdef:hover,.kdef:focus-visible{border-bottom-color:var(--accent);color:var(--ink);outline:none;}
.kdef:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--r-sm);}
/* on no-JS the parenthetical stays inline + visible; JS hides it then wires the tip */
.kdef__plain{font-family:var(--font-mono);font-size:.86em;color:var(--ink-3);}
.kdef-tip{position:absolute;left:0;top:calc(100% + 8px);z-index:60;width:max-content;max-width:280px;
  padding:11px 13px;background:var(--engraved);color:var(--ink-2);
  border:1px solid var(--line-2);border-top-color:var(--line-top);border-radius:var(--r-md);
  box-shadow:var(--plate),0 18px 44px -22px rgba(0,0,0,.75);
  font:var(--w-body) 13px/1.5 var(--font-sans);letter-spacing:0;text-transform:none;
  white-space:normal;opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out),visibility var(--dur-micro);}
.kdef-tip::before{content:"";position:absolute;left:14px;top:-5px;width:8px;height:8px;rotate:45deg;
  background:var(--engraved);border-left:1px solid var(--line-2);border-top:1px solid var(--line-top);}
.kdef-tip b{color:var(--ink);font-weight:var(--w-ui);}
.kdef[aria-expanded="true"] + .kdef-tip,.kdef-tip.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
@media (prefers-reduced-motion:reduce){.kdef-tip{transition:none;}}
@media (prefers-reduced-data:reduce){.kdef-tip{display:none;}.kdef{cursor:default;}}

/* ── 4 · KSPEC - annotated diagram: captions joined to parts by callout lines ── */
.kspec{position:relative;border-radius:var(--r-lg);padding:18px 20px;isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008)),var(--panel);
  box-shadow:var(--plate);}
.kspec svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-mono);}
.kspec .ks-node{fill:rgba(255,255,255,.025);stroke:var(--line-2);stroke-width:1;}
.kspec .ks-node.is-key{fill:var(--paper);stroke:none;}
.kspec .ks-bevel{stroke:var(--line-top);stroke-width:1;fill:none;}
.kspec .ks-lead{stroke:var(--line-2);stroke-width:1;fill:none;stroke-dasharray:2 3;}
.kspec .ks-dot{fill:var(--accent);}
.kspec .ks-num{fill:var(--accent);font-size:9px;font-weight:var(--w-display);letter-spacing:.04em;}
.kspec .ks-lbl{fill:var(--ink);font-size:11.5px;font-weight:var(--w-ui);letter-spacing:.01em;}
.kspec .ks-sub{fill:var(--ink-3);font-size:8.5px;letter-spacing:.10em;text-transform:uppercase;}
.kspec .ks-lbl-art{fill:var(--sheet-ink);font-size:11px;font-weight:var(--w-display);}
.kspec .ks-reg{stroke:var(--ink-4);stroke-width:1;fill:none;}
/* HTML callout list companion (used when captions live outside the SVG) */
.kspec__legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-2);}
.kspec__legend li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:baseline;}
.kspec__legend .ks-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border:1px solid var(--accent-edge);border-radius:var(--r-sm);background:var(--accent-soft);
  color:var(--accent);font-size:10px;font-weight:var(--w-display);}
.kspec__legend b{color:var(--ink);font-weight:var(--w-ui);}

/* ── 5 · KMATRIX - feature/tier comparison table ────────────────────────────── */
.kmatrix-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--plate);}
.kmatrix{width:100%;min-width:560px;border-collapse:collapse;font-size:13.5px;
  font-variant-numeric:tabular-nums;background:var(--panel);}
.kmatrix th,.kmatrix td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;}
.kmatrix thead th{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--track-label);
  text-transform:uppercase;font-weight:600;color:var(--ink-3);background:var(--well);}
.kmatrix tbody th,.kmatrix td:first-child{text-align:left;font-weight:var(--w-ui);color:var(--ink-2);}
.kmatrix tbody th{font-weight:var(--w-ui);color:var(--ink);font-size:14px;}
.kmatrix tbody tr:last-child td,.kmatrix tbody tr:last-child th{border-bottom:0;}
.kmatrix tbody tr:hover td,.kmatrix tbody tr:hover th{background:rgba(255,255,255,.025);}
.kmatrix thead th.is-feat{color:var(--accent);}
.kmatrix col.is-feat,.kmatrix td.is-feat{background:var(--accent-soft);}
/* cell states - ALWAYS mark + text, never color alone */
.kcell{display:inline-flex;align-items:center;gap:7px;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.02em;}
.kcell::before{content:"";width:13px;height:13px;flex:none;border-radius:var(--r-sm);
  background:center/12px no-repeat;}
.kcell--full{color:var(--accent);}
.kcell--full::before{background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.kcell--part{color:var(--ink-2);}
.kcell--part::before{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-3);
  background-image:linear-gradient(135deg,transparent 49%,var(--ink-3) 49% 51%,transparent 51%);}
.kcell--none{color:var(--ink-4);}
.kcell--none::before{background:none;box-shadow:inset 0 0 0 1.5px var(--ink-faint);}
.kmatrix--sticky td:first-child,.kmatrix--sticky tbody th{position:sticky;left:0;z-index:1;
  background:var(--panel);box-shadow:1px 0 0 var(--line);}
.kmatrix--sticky tbody tr:hover th{background:var(--register);}

/* ── 6 · KTIMELINE - dated nodes + category tags ────────────────────────────── */
.ktl{list-style:none;margin:0;padding:0;position:relative;}
.ktl::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line-2);}
.ktl__item{position:relative;padding:0 0 var(--s5) 30px;}
.ktl__item:last-child{padding-bottom:0;}
.ktl__dot{position:absolute;left:0;top:4px;width:15px;height:15px;border-radius:var(--r-sm);
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line-2);}
.ktl__item.is-now .ktl__dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ktl__date{font:var(--w-ui) 10.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);}
.ktl__head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:5px 0 4px;}
.ktl__t{font:var(--w-display) 15px/1.25 var(--font-sans);letter-spacing:0;color:var(--ink);}
.ktl__tag{font:600 9px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  padding:3px 7px;border:1px solid var(--line-2);border-radius:var(--r-sm);}
.ktl__d{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2);}
@media (prefers-reduced-motion:no-preference){
  .reveal .ktl__item{opacity:0;transform:translateY(8px);transition:opacity var(--dur-enter) var(--ease-out),transform var(--dur-enter) var(--ease-out);}
  .reveal.in .ktl__item{opacity:1;transform:none;}
  .reveal.in .ktl__item:nth-child(2){transition-delay:.06s;}
  .reveal.in .ktl__item:nth-child(3){transition-delay:.12s;}
  .reveal.in .ktl__item:nth-child(4){transition-delay:.18s;}
  .reveal.in .ktl__item:nth-child(n+5){transition-delay:.24s;}}
/* horizontal variant for wide rails */
.ktl--row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(160px,1fr);gap:0;overflow-x:auto;}
.ktl--row::before{left:6px;right:6px;top:11px;bottom:auto;width:auto;height:1px;}
.ktl--row .ktl__item{padding:26px 18px 0 0;}
.ktl--row .ktl__dot{top:4px;left:0;}
@media (max-width:640px){.ktl--row{grid-auto-flow:row;grid-auto-columns:auto;}
  .ktl--row::before{left:7px;right:auto;top:6px;bottom:6px;width:1px;height:auto;}
  .ktl--row .ktl__item{padding:0 0 var(--s5) 30px;}}

/* ── 7 · KTHREAT - attack-surface rows w/ ownership marker ───────────────────── */
.kthreat{display:grid;gap:1px;background:var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--plate);}
.kthreat__hd,.kthreat__row{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;}
.kthreat__hd>*,.kthreat__row>*{background:var(--panel);padding:13px 16px;}
.kthreat__hd>*{background:var(--well);font:600 10px/1 var(--font-mono);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-3);}
.kthreat__surface{display:flex;flex-direction:column;gap:3px;}
.kthreat__surface b{color:var(--ink);font-weight:var(--w-ui);font-size:14px;}
.kthreat__surface span{font-size:12.5px;color:var(--ink-3);line-height:1.5;}
.kthreat__own{display:inline-flex;align-items:center;gap:8px;align-self:center;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;}
.kthreat__own::before{content:"";width:14px;height:14px;flex:none;}
.kthreat__own--kolm{color:var(--accent);}
.kthreat__own--kolm::before{background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l5.5 2.2v3.6c0 3.3-2.3 5.7-5.5 6.9C4.8 13 2.5 10.6 2.5 7.3V3.7z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M5.4 7.9l1.8 1.8 3.4-3.6' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5l5.5 2.2v3.6c0 3.3-2.3 5.7-5.5 6.9C4.8 13 2.5 10.6 2.5 7.3V3.7z' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M5.4 7.9l1.8 1.8 3.4-3.6' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.kthreat__own--you{color:var(--ink-3);}
.kthreat__own--you::before{background:var(--ink-4);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.5' r='2.8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M2.8 14c.4-2.9 2.6-4.4 5.2-4.4S12.8 11.1 13.2 14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.5' r='2.8' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3Cpath d='M2.8 14c.4-2.9 2.6-4.4 5.2-4.4S12.8 11.1 13.2 14' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;}
@media (max-width:640px){.kthreat__hd,.kthreat__row{grid-template-columns:1fr;}
  .kthreat__hd>*:last-child{display:none;}.kthreat__own{align-self:start;}}

/* ── 8 · KCAL - compliance status ring / track per standard ─────────────────── */
.kcal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin:0;padding:0;list-style:none;}
.kcal__item{display:flex;align-items:center;gap:13px;padding:var(--s4);
  background:var(--sheen),var(--panel);border-radius:var(--r-sm);box-shadow:var(--ring);}
.kcal__ring{position:relative;width:42px;height:42px;flex:none;}
.kcal__ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg);}
.kcal__ring .kc-track{fill:none;stroke:var(--line-2);stroke-width:3;}
.kcal__ring .kc-arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:var(--kc-dash,113);stroke-dashoffset:var(--kc-off,113);}
.kcal__ring .kc-mark{fill:var(--ink);font:var(--w-display) 11px/1 var(--font-mono);text-anchor:middle;}
.kcal__b{display:flex;flex-direction:column;gap:3px;min-width:0;}
.kcal__std{font:var(--w-ui) 14px/1.1 var(--font-sans);letter-spacing:0;color:var(--ink);}
.kcal__state{display:inline-flex;align-items:center;gap:6px;font:600 9.5px/1 var(--font-mono);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);}
.kcal__state::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent-idle);}
/* states by attribute - mark glyph differs, never color alone */
.kcal__item[data-state="shipped"] .kc-arc{stroke:var(--accent);}
.kcal__item[data-state="shipped"] .kcal__state{color:var(--accent);}
.kcal__item[data-state="shipped"] .kcal__state::before{background:var(--accent);}
.kcal__item[data-state="progress"] .kc-arc{stroke:var(--ink-2);}
.kcal__item[data-state="progress"] .kcal__state::before{background:var(--ink-3);
  -webkit-mask:none;box-shadow:inset 0 0 0 2px var(--ink-3);background:transparent;}
.kcal__item[data-state="open"] .kc-arc{stroke:var(--ink-4);}
.kcal__item[data-state="open"] .kcal__state{color:var(--ink-4);}
.kcal__item[data-state="open"] .kcal__state::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-faint);}
@media (prefers-reduced-motion:no-preference){
  [data-art-reveal] .kcal__ring .kc-arc{stroke-dashoffset:113;animation:kc-fill var(--dur-sweep) var(--ease-out) forwards;}}
@keyframes kc-fill{to{stroke-dashoffset:var(--kc-off,113);}}
@media (prefers-reduced-motion:reduce){.kcal__ring .kc-arc{animation:none;}}
/* ── end EXPLAINER + DIAGRAM KIT - 2026-06-14 ───────────────────────────────── */

/* ============================================================================
   SOTA INSTRUMENT + MOTION SYSTEM - graphics-100x wave 2026-06-15
   ----------------------------------------------------------------------------
   The backbone of the 100x graphics upgrade. ADDITIVE ONLY: no existing
   selector, token, keyframe or function above is modified - this block only
   adds new names (k* prefixed) and a set of motion-primitive classes. Every
   page explainer wraps in .kinst (a unified precise-instrument frame) and uses
   the elevated components below. All motion is GPU-only (transform / opacity /
   stroke-dashoffset), finite, eased, < ~3s, IO-triggered by kolm-2026.js, and
   fully disabled (static end-state shown, all information legible) under
   prefers-reduced-motion. Decorative SVG is aria-hidden; figures carry labels.
   One accent (--accent) = the verified / active signal only. Inherits the
   Datasheet Machine idiom: squared radii, mono labels, engraved hairlines,
   layered luminance depth, one lit --paper object.

   MOTION PRIMITIVES (driven by kolm-2026.js KMotion, all reduced-motion-safe):
     [data-km="flow"]   FLOW   - packets travel connectors w/ animated dash trail
     [data-km="draw"]   DRAW-IN- strokes + bars draw/grow on first reveal
     [data-km="settle"] SETTLE - scatter points / nodes ease into final position
     [data-km="stamp"]  STAMP  - a signature / verdict seal stamps in
     [data-km="breathe"]BREATHE- subtle idle pulse on the one active/verified node
   A component opts in by carrying data-km; JS adds .km-run when it scrolls into
   view (one-shot for finite motions; persistent for flow/breathe idle loops).
   Without JS or under reduced-motion the CSS resting state is the final frame.
   ============================================================================ */

/* ── shared SOTA tokens (derived from existing ramps; NO new accents) ───────── */
:root{
  --ki-grid:rgba(255,255,255,.05);        /* engraved instrument grid          */
  --ki-grid-2:rgba(255,255,255,.025);     /* finer sub-grid                    */
  --ki-plate:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.008)); /* milled top facet */
  --ki-depth:0 1px 0 var(--line-top),inset 0 0 0 1px var(--line-2),
             0 2px 4px -2px rgba(0,0,0,.5),0 24px 60px -34px rgba(0,0,0,.85); /* multi-layer depth */
  --ki-depth-hi:0 1px 0 var(--line-top),inset 0 0 0 1px var(--line-2),
             0 2px 6px -2px rgba(0,0,0,.5),0 40px 90px -38px var(--accent-wash); /* lit verified depth */
  --kp-node:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); /* stage node face */
  --kp-conn:rgba(255,255,255,.10);        /* idle connector rail               */
  --kp-pkt:var(--accent);                 /* traveling packet                  */
}

/* ── 0 · KINST - the unified precise-instrument FRAME ───────────────────────── */
/* A premium container that reads as a scientific instrument, not a flat card:
   layered depth + a crisp top-light hairline, an engraved 1px grid, optional
   registration corner marks, a mono micro-label strip, squared radii. Drop ANY
   elevated component inside it (or use it bare around legacy diagrams). */
.kinst{position:relative;border-radius:var(--r-lg);padding:0;isolation:isolate;overflow:clip;
  background:var(--ki-plate),var(--panel);
  box-shadow:var(--ki-depth);}
/* engraved grid floor - two superimposed line sets, masked to fade at edges */
.kinst::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background-image:
    linear-gradient(var(--ki-grid-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--ki-grid-2) 1px,transparent 1px),
    linear-gradient(var(--ki-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--ki-grid) 1px,transparent 1px);
  background-size:14px 14px,14px 14px,70px 70px,70px 70px;
  -webkit-mask-image:radial-gradient(130% 110% at 50% 0%,#000 55%,transparent 100%);
          mask-image:radial-gradient(130% 110% at 50% 0%,#000 55%,transparent 100%);
  opacity:.7;}
.kinst>*{position:relative;z-index:1;}
/* registration corner marks (decorative) - opt in with .kinst--marks */
.kinst--marks>.kinst__mark{position:absolute;width:11px;height:11px;z-index:2;opacity:.45;pointer-events:none;}
.kinst__mark--tl{top:9px;left:9px;border-top:1px solid var(--line-top);border-left:1px solid var(--line-top);}
.kinst__mark--tr{top:9px;right:9px;border-top:1px solid var(--line-top);border-right:1px solid var(--line-top);}
.kinst__mark--bl{bottom:9px;left:9px;border-bottom:1px solid var(--line-top);border-left:1px solid var(--line-top);}
.kinst__mark--br{bottom:9px;right:9px;border-bottom:1px solid var(--line-top);border-right:1px solid var(--line-top);}
/* mono micro-label / caption strip (header) */
.kinst__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px 18px;margin:0;border-bottom:1px solid var(--line);
  font:var(--w-ui) 10px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);}
.kinst__bar b{color:var(--ink-2);font-weight:var(--w-ui);}
.kinst__bar .n{color:var(--ink);}
.kinst__live{color:var(--accent);display:inline-flex;align-items:center;gap:6px;}
.kinst__live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 7px var(--accent-glow);flex:none;}
@media (prefers-reduced-motion:no-preference){.kinst__live::before{animation:inst-pulse 2.4s ease-in-out infinite;}}
.kinst__body{padding:18px 20px;}
/* footer caption strip - engraved readout line */
.kinst__foot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--line);
  font:var(--w-body) 11.5px/1.5 var(--font-mono);color:var(--ink-3);letter-spacing:.02em;}
.kinst__foot b{color:var(--ink-2);font-weight:var(--w-ui);}
.kinst__foot .go{color:var(--accent);}
/* verified end-state lifts depth toward the accent (one moment only) */
.kinst.is-verified{box-shadow:var(--ki-depth-hi);}
@media (prefers-reduced-transparency:reduce),(forced-colors:active){.kinst::before{display:none;}}

/* ── MOTION PRIMITIVE base contract (shared by all data-km components) ───────── */
/* resting CSS state == final frame. JS toggles .km-run when in view. */
@media (prefers-reduced-motion:reduce){
  [data-km]{--km-disabled:1;}
}

/* (a) FLOW - packets travel a connector with an animated dash trail ----------- */
/* non-scaling-stroke: the connector SVG is stretched (preserveAspectRatio none)
   so without this the tiny viewBox blows the stroke into a giant bar. Keep px. */
.kflowline{stroke:var(--kp-conn);stroke-width:1.6;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.kflowtrail{stroke:var(--accent);stroke-width:1.8;fill:none;stroke-linecap:round;opacity:.34;vector-effect:non-scaling-stroke;}
.kflowpkt{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--kpk-dash,14 200);stroke-dashoffset:var(--kpk-off,214);
  filter:drop-shadow(0 0 4px var(--accent-glow));}
@media (prefers-reduced-motion:no-preference){
  [data-km~="flow"].km-run .kflowpkt{animation:km-flow var(--kpk-dur,3.4s) cubic-bezier(.45,0,.55,1) infinite;}
  [data-km~="flow"].km-run .kflowtrail{animation:km-flow-breathe 3.4s ease-in-out infinite;}
}
@keyframes km-flow{0%{stroke-dashoffset:var(--kpk-off,214);}68%,100%{stroke-dashoffset:0;}}
@keyframes km-flow-breathe{0%,100%{opacity:.26;}50%{opacity:.44;}}
@media (prefers-reduced-motion:reduce){.kflowpkt{stroke-dashoffset:0;opacity:.4;}.kflowtrail{opacity:.4;}}

/* (b) DRAW-IN - strokes draw, bars grow on first reveal (one-shot) ------------ */
.kdraw{stroke-dasharray:var(--kd-len,400);stroke-dashoffset:var(--kd-len,400);}
@media (prefers-reduced-motion:no-preference){
  [data-km~="draw"].km-run .kdraw{animation:km-draw var(--kd-dur,1.1s) var(--ease-out) forwards;
    animation-delay:calc(var(--i,0)*.08s);}
  [data-km~="draw"].km-run .kgrow{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;
    animation:km-grow var(--dur-sweep) var(--ease-out) forwards;animation-delay:calc(.1s + var(--i,0)*.07s);}
}
@keyframes km-draw{to{stroke-dashoffset:0;}}
@keyframes km-grow{to{transform:scaleY(1);}}
@media (prefers-reduced-motion:reduce){.kdraw{stroke-dashoffset:0;}.kgrow{transform:none;}}

/* (c) SETTLE - scatter points / nodes ease into final position (one-shot) ----- */
@media (prefers-reduced-motion:no-preference){
  [data-km~="settle"] .ksettle{opacity:0;transform:translateY(7px) scale(.9);
    transform-box:fill-box;transform-origin:center;}
  [data-km~="settle"].km-run .ksettle{animation:km-settle .5s var(--ease-out) forwards;
    animation-delay:calc(.12s + var(--i,0)*.05s);}
}
@keyframes km-settle{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.ksettle{opacity:1;transform:none;}}

/* (d) STAMP - a signature / verdict seal stamps in (one-shot) ----------------- */
.kstamp{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;}
@media (prefers-reduced-motion:no-preference){
  [data-km~="stamp"].km-run .kstamp{animation:km-stamp .56s cubic-bezier(.2,1.5,.4,1) forwards;
    animation-delay:var(--ks-delay,.4s);}
}
@keyframes km-stamp{0%{opacity:0;transform:scale(.7);}60%{opacity:1;transform:scale(1.08);}100%{opacity:1;transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.kstamp{opacity:1;transform:none;}}

/* (e) BREATHE - subtle idle pulse on the one active / verified node ----------- */
@media (prefers-reduced-motion:no-preference){
  [data-km~="breathe"].km-run .kbreathe{transform-box:fill-box;transform-origin:center;
    animation:km-breathe 2.6s ease-in-out infinite;}
}
@keyframes km-breathe{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@media (prefers-reduced-motion:reduce){.kbreathe{opacity:1;}}

/* ── 1 · KPIPE - a true CONNECTED PIPELINE instrument ───────────────────────── */
/* numbered stage nodes with state + animated flow connectors + a per-stage
   readout chip holding a concrete value. Horizontal on wide, vertical on narrow.
   The data visibly moves stage to stage (FLOW primitive on the connector SVG). */
.kpipe{position:relative;display:grid;grid-template-columns:repeat(var(--kn,4),minmax(0,1fr));
  gap:0;align-items:stretch;counter-reset:kpstage;}
.kpstage{position:relative;display:flex;flex-direction:column;gap:9px;padding:16px 16px 15px;
  background:var(--kp-node);border-radius:var(--r-md);box-shadow:var(--ring),0 1px 0 var(--line-top);
  counter-increment:kpstage;margin:6px;}
.kpstage__n{display:inline-flex;align-items:center;gap:9px;
  font:600 10px/1 var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);}
.kpstage__n::before{content:counter(kpstage,decimal-leading-zero);
  display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;flex:none;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:rgba(255,255,255,.03);
  color:var(--ink-2);font-size:11px;font-weight:var(--w-display);}
.kpstage__t{margin:0;font:var(--w-display) 15px/1.2 var(--font-sans);letter-spacing:0;color:var(--ink);}
.kpstage__d{margin:0;font-size:13px;line-height:1.5;color:var(--ink-2);}
/* readout chip - the concrete value held at this stage */
.kpstage__read{margin-top:auto;display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--well);
  font-family:var(--font-mono);}
.kpstage__read .n{font-size:15px;font-weight:var(--w-display);color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:0;}
.kpstage__read .u{font-size:9.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);}
/* the verified / active stage - accent ring + lit number + breathe target */
.kpstage.is-active{box-shadow:inset 0 0 0 1px var(--accent-edge),0 1px 0 var(--line-top);
  background:linear-gradient(180deg,var(--accent-soft),rgba(255,255,255,.012));}
.kpstage.is-active .kpstage__n{color:var(--accent);}
.kpstage.is-active .kpstage__n::before{border-color:var(--accent-edge);background:var(--accent-soft);color:var(--accent);}
.kpstage.is-active .kpstage__read{border-color:var(--accent-edge);}
.kpstage.is-active .kpstage__read .n{color:var(--accent);}
.kpstage__pip{position:absolute;top:14px;right:14px;width:7px;height:7px;border-radius:50%;
  background:var(--accent-idle);}
.kpstage.is-active .kpstage__pip{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
@media (prefers-reduced-motion:no-preference){
  [data-km~="breathe"].km-run .kpstage.is-active .kpstage__pip{animation:inst-pulse 2.4s ease-in-out infinite;}
}
/* the connector SVG: a thin rail threaded through the stage-number row (NOT a
   full-height overlay - that stretched the viewBox and blew up the stroke). */
.kpipe__conn{position:absolute;left:14px;right:14px;top:34px;height:2px;z-index:0;pointer-events:none;overflow:visible;}
.kpipe>.kpstage{z-index:1;background:var(--kp-node);}
@media (max-width:760px){
  .kpipe{grid-template-columns:1fr;}
  .kpipe__conn{display:none;}
  .kpstage{margin:5px 6px;}
  .kpstage:not(:last-child)::after{content:"";position:absolute;left:50%;bottom:-6px;width:1px;height:6px;
    background:var(--accent);opacity:.5;transform:translateX(-50%);}
}

/* ── 2 · KSCATTER - polished positioning plot (SETTLE + ring/crosshair) ─────── */
/* extends .kchart language; this is the structured scatter idiom with axis
   labels, gridlines, settling points, and a ring+crosshair on the best point. */
.kscatter{display:block;width:100%;height:auto;font-family:var(--font-mono);overflow:visible;}
.kscatter .ks-grid{stroke:var(--ki-grid);stroke-width:1;}
.kscatter .ks-grid-2{stroke:var(--ki-grid-2);stroke-width:1;}
.kscatter .ks-axis{stroke:var(--k-axis);stroke-width:1.2;fill:none;stroke-linecap:square;}
.kscatter .ks-axlbl{fill:var(--ink-3);font-size:9px;letter-spacing:.10em;text-transform:uppercase;}
.kscatter .ks-tick{fill:var(--ink-4);font-size:8.5px;letter-spacing:.04em;}
.kscatter .ks-lbl{fill:var(--ink-2);font-size:10px;letter-spacing:.01em;}
.kscatter .ks-pt{fill:var(--k-mark);stroke:var(--room);stroke-width:1.5;}
.kscatter .ks-pt.is-best{fill:var(--accent);stroke:var(--room);}
.kscatter .ks-ring{fill:none;stroke:var(--accent);stroke-width:1.3;opacity:.85;}
.kscatter .ks-cross{stroke:var(--accent);stroke-width:1;stroke-dasharray:2 3;fill:none;opacity:.55;}
.kscatter .ks-best-lbl{fill:var(--accent);font-size:10px;font-weight:var(--w-display);letter-spacing:.02em;}
@media (prefers-reduced-motion:no-preference){
  [data-km~="settle"] .kscatter .ks-ring{opacity:0;}
  [data-km~="settle"].km-run .kscatter .ks-ring{animation:km-settle .5s var(--ease-out) forwards;animation-delay:.5s;}
}
@media (prefers-reduced-motion:reduce){.kscatter .ks-ring{opacity:.85;}}

/* ── 3 · KBARS - grouped/stacked bars (DRAW-IN growth, gridlines, labels) ───── */
/* uses .kchart .k-bar styles; this is just the structured wrapper + value chips.
   New gradient bar fills for depth (subtle, not flat). */
.kbars{display:block;width:100%;height:auto;font-family:var(--font-mono);overflow:visible;}
.kbars .kb-grid{stroke:var(--ki-grid);stroke-width:1;}
.kbars .kb-axis{stroke:var(--k-axis);stroke-width:1.2;fill:none;stroke-linecap:square;}
.kbars .kb-axlbl{fill:var(--ink-3);font-size:9px;letter-spacing:.10em;text-transform:uppercase;}
.kbars .kb-tick{fill:var(--ink-4);font-size:8.5px;letter-spacing:.04em;}
.kbars .kb-lbl{fill:var(--ink-2);font-size:10px;letter-spacing:.01em;}
.kbars .kb-val{fill:var(--ink);font-size:11px;font-weight:var(--w-display);letter-spacing:.01em;}
.kbars .kb-bar{fill:url(#kbarGrad) var(--k-bar);transform-box:fill-box;transform-origin:bottom;}
.kbars .kb-bar.s2{fill:url(#kbarGrad2) var(--k-bar-2);}
.kbars .kb-bar.is-best{fill:url(#kbarGradAcc) var(--accent);}
.kbars .kb-val.is-best{fill:var(--accent);}
@media (prefers-reduced-motion:no-preference){
  [data-km~="draw"] .kbars .kb-bar{transform:scaleY(0);}
  [data-km~="draw"].km-run .kbars .kb-bar{animation:km-grow var(--dur-sweep) var(--ease-out) forwards;
    animation-delay:calc(.1s + var(--i,0)*.07s);}
}
@media (prefers-reduced-motion:reduce){.kbars .kb-bar{transform:none;}}

/* ── 4 · KSPEC3D - exploded depth diagram: layered plates + callouts + seal ──── */
/* slight isometric/offset depth, callout lines from captions to parts, and a
   signature-covers bracket; the seal STAMPS in. Use for the .kolm anatomy. */
.kspec3d{display:block;width:100%;height:auto;font-family:var(--font-mono);overflow:visible;}
.kspec3d .k3-plate{fill:url(#k3plate) var(--register);stroke:var(--line-2);stroke-width:1;}
.kspec3d .k3-plate.is-key{fill:url(#k3paper) var(--paper);stroke:none;}
.kspec3d .k3-side{fill:rgba(0,0,0,.28);}                 /* extruded depth side */
.kspec3d .k3-bevel{stroke:var(--line-top);stroke-width:1;fill:none;opacity:.7;}
.kspec3d .k3-lead{stroke:var(--line-2);stroke-width:1;fill:none;stroke-dasharray:2 3;}
.kspec3d .k3-dot{fill:var(--accent);}
.kspec3d .k3-num{fill:var(--accent);font-size:9px;font-weight:var(--w-display);letter-spacing:.04em;}
.kspec3d .k3-lbl{fill:var(--ink);font-size:11px;font-weight:var(--w-ui);letter-spacing:.01em;}
.kspec3d .k3-sub{fill:var(--ink-3);font-size:8px;letter-spacing:.10em;text-transform:uppercase;}
.kspec3d .k3-lbl-art{fill:var(--sheet-ink);font-size:10.5px;font-weight:var(--w-display);}
.kspec3d .k3-sub-art{fill:var(--sheet-ink-2);font-size:8px;letter-spacing:.06em;}
.kspec3d .k3-bracket{stroke:var(--accent);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.kspec3d .k3-seal{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.kspec3d .k3-seal-fill{fill:var(--accent);}
.kspec3d .k3-reg{stroke:var(--ink-4);stroke-width:1;fill:none;}
@media (prefers-reduced-motion:no-preference){
  [data-km~="settle"] .kspec3d .k3-layer{opacity:0;transform:translate(4px,5px);transform-box:fill-box;}
  [data-km~="settle"].km-run .kspec3d .k3-layer{animation:km-settle .55s var(--ease-out) forwards;
    animation-delay:calc(.1s + var(--i,0)*.09s);}
}
@media (prefers-reduced-motion:reduce){.kspec3d .k3-layer{opacity:1;transform:none;}}

/* ── 5 · KSEAL - refined animated seal (ring + check stamp + accent glow) ────── */
/* the verify motif: a precise registration ring, a check that draws, and a faint
   accent glow when verified. STAMP + DRAW primitives combine. */
.kseal{display:inline-block;width:var(--kseal-sz,64px);height:var(--kseal-sz,64px);position:relative;}
.kseal svg{display:block;width:100%;height:100%;overflow:visible;}
.kseal .kse-track{fill:none;stroke:var(--line-2);stroke-width:2;}
.kseal .kse-ring{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--kse-len,201);stroke-dashoffset:var(--kse-len,201);transform:rotate(-90deg);transform-origin:center;}
.kseal .kse-tick{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--kse-tlen,22);stroke-dashoffset:var(--kse-tlen,22);}
.kseal .kse-pip{fill:var(--accent);opacity:0;}
.kseal .kse-txt{fill:var(--ink-3);font:600 7px/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;}
.kseal.is-verified{filter:drop-shadow(0 0 10px var(--accent-glow));}
@media (prefers-reduced-motion:no-preference){
  [data-km~="stamp"].km-run .kseal .kse-ring{animation:km-draw 1s var(--ease-out) forwards;}
  [data-km~="stamp"].km-run .kseal .kse-tick{animation:km-draw .5s var(--ease-out) .7s forwards;}
  [data-km~="stamp"].km-run .kseal .kse-pip{animation:km-stamp .5s cubic-bezier(.2,1.5,.4,1) .55s forwards;}
}
@media (prefers-reduced-motion:reduce){
  .kseal .kse-ring{stroke-dashoffset:0;}.kseal .kse-tick{stroke-dashoffset:0;}.kseal .kse-pip{opacity:1;}}

/* ── kbars/kspec3d shared SVG gradient defs are emitted inline per-figure ───── */
/* (see showcase / page snippets: <defs> with id kbarGrad, kbarGrad2, kbarGradAcc,
   k3plate, k3paper). Defs are scoped per-svg so multiple figures coexist. */

/* ── ELEVATE legacy diagrams: give them the .kinst frame at no markup cost ───── */
/* when a legacy diagram (.pipe/.cap/.anat/.vl/.ramp/.icpt) sits inside .kinst its
   own backdrop is dropped so the frame's grid + depth read through cleanly. */
.kinst .pipe,.kinst .cap,.kinst .icpt,.kinst .kscatter,.kinst .kbars,.kinst .kspec3d{position:relative;z-index:1;}
.kinst .anat,.kinst .kolm-art,.kinst .kspec{background:transparent;box-shadow:none;border:0;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;}
.kinst .instrument{background:transparent;box-shadow:none;border:0;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;}

/* ── end SOTA INSTRUMENT + MOTION SYSTEM - 2026-06-15 ───────────────────────── */