/* KH Labs design system, v1 (2026-11-12). ONE master copy: b2b/design/kh-system.css.
   Every site gets its own copy via design/sync.ps1. Edit the master, never a site copy.

   Rules
   - Black and white like vercel.com: #000 page, black cards with 1px hairlines, #ededed text and ONE muted
     grey #a1a1a1. Colour only where it carries data meaning (verdicts, chart series, resolved/warning, savings).
   - Geist + Geist Mono, self-hosted at /fonts/ (same origin, no third-party request).
   - Rounded system: consoles/cards 20px, inner panels 14px, small chips 10px, buttons and pills 999px.
     No clip-path / mitred corners anywhere (the mark is the only mitred shape).
   - Spacing: 4px base. Use --sp1..--sp10 only (--s1..--s4 are legacy SURFACE names). Sections: --section (120 / 96 / 80).
   - Type scale: 13 14 15 16 18 20 24 | h3 24 | h2 clamp(32..54) | h1 clamp(44..84). Nothing under 13px.
   - 1px hairlines (--line, --line2). No grey-filled panels. No gradients, no glows.
   - Amber (--acc) = warning/held/blocked, green (--ok) = resolved/pass, red (--bad) = fail. Never decoration.
   - Base element styles are wrapped in :where() so site CSS always wins without !important. */

/* ---------- fonts ---------- */
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-21FF,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* metric-matched fallbacks: the swap to Geist does not move the layout */
@font-face{font-family:"Geist Fallback";src:local("Arial");size-adjust:103.5%;ascent-override:97.5%;descent-override:29%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New");size-adjust:100%;ascent-override:97.5%;descent-override:29%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  /* black and white (founder direction 11-12: Vercel-style; greys read as AI-made) */
  --bg:#000; --bg2:#0a0a0a;                       /* page; large surfaces at most #0a0a0a */
  --s1:#000; --s2:#0a0a0a; --s3:#0a0a0a; --s4:#0a0a0a;  /* legacy surface names: all black now */
  --hover:rgb(255 255 255 / .06);                 /* the only fill change on hover (secondary/ghost) */
  --line:rgb(255 255 255 / .1); --line2:rgb(255 255 255 / .16); --line3:rgb(255 255 255 / .3);
  --ink:#ededed; --mute:#a1a1a1;                  /* the ONLY two text colours (#a1a1a1 on #000 = 8.1:1) */
  --soft:#a1a1a1; --dim:#a1a1a1;                  /* legacy names, same one grey */
  /* colour = data meaning only: verdicts, chart series, resolved/warning signals, savings */
  --acc:#f2b544; --acc-ink:#000; --ok:#6fcf97; --ok-ink:#000; --bad:#ff6166; --bad-ink:#000;
  /* light document ground (printable reports only): neutral, not cream */
  --paper:#fff; --p-ink:#0a0a0a; --p-soft:#4d4d4d; --p-mute:#4d4d4d; --p-line:rgb(0 0 0 / .12); --p-acc:#8f5200;
  /* chart series colours (charts and data marks only, never icons, labels or headers) */
  --c-sup:#4fd1c5; --c-sec:#ff6166; --c-bill:#6fcf97; --c-mig:#74a9ff; --c-build:#ededed;
  --c-sup-d:#0d7f74; --c-sec-d:#b8433d; --c-bill-d:#2a8450;
  /* type */
  --sans:"Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif;
  --mono:"Geist Mono","Geist Mono Fallback",ui-monospace,monospace;
  --t-xs:13px; --t-sm:14px; --t-md:15px; --t-base:16px; --t-lg:18px; --t-xl:20px; --t-2xl:24px;
  --t-h3:clamp(20px,1.9vw,24px); --t-h2:clamp(32px,4.1vw,54px); --t-h1:clamp(44px,6vw,84px);
  --xs:13px; --sm:13px; /* legacy aliases used by older site CSS */
  /* spacing: 4px base */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px; --sp10:128px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* deprecated spacing aliases (--s1..--s4 are surfaces) */
  --section:120px;
  /* grid */
  --wrap:1200px; --pad:clamp(20px,4vw,40px); --gap:24px; --nav-h:64px;
  /* radii */
  --r:20px; --r2:14px; --r3:10px; --r-pill:999px;
  /* motion */
  --out:cubic-bezier(.2,.75,.25,1); --spring:cubic-bezier(.16,1,.3,1); --spring2:cubic-bezier(.22,1,.36,1);
  --t-fast:.15s; --t-med:.25s;
  --ring:0 0 0 2px var(--bg),0 0 0 4px #fff;
}
@media (max-width:1080px){:root{--section:96px}}
@media (max-width:720px){:root{--section:80px;--gap:16px}}

/* ---------- base (zero specificity) ---------- */
:where(*,*::before,*::after){box-sizing:border-box}
:where(html){background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#333 var(--bg);scroll-padding-top:calc(var(--nav-h) + 16px)}
:where(body){margin:0;overflow-x:clip}
:where(h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0}
:where(h1,h2,h3,h4){text-wrap:balance;font-weight:600}
:where(p,li,dd,figcaption,blockquote){text-wrap:pretty}
:where(h1){font-size:var(--t-h1);line-height:1;letter-spacing:-.045em}
:where(h2){font-size:var(--t-h2);line-height:1.04;letter-spacing:-.04em}
:where(h3){font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em;font-weight:500}
:where(a){color:inherit;text-decoration:none}
:where(button){font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(img,video,svg,canvas){display:block;max-width:100%}
:where(img,video){height:auto}
:where(code,kbd,samp,pre){font-family:var(--mono);font-size:inherit}
:where(table){border-collapse:collapse}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus{outline:none}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
.num,.tnum{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--pad));margin-inline:auto;padding-inline:var(--pad)}
.k-section{padding-block:var(--section);border-top:1px solid var(--line)}
.k-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--sp7);align-items:end}
.k-lead{color:var(--mute);font-size:var(--t-lg);line-height:1.55;max-width:54ch;text-wrap:pretty}
.k-eyebrow{display:flex;align-items:center;gap:var(--sp2);font:500 13px/16px var(--mono);color:var(--mute);letter-spacing:0}
.k-grid{display:grid;gap:var(--gap)}
.k-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.k-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.k-acts{display:flex;flex-wrap:wrap;gap:var(--sp3);margin-top:var(--sp5)}
@media (max-width:1080px){.k-head{grid-template-columns:minmax(0,1fr);gap:var(--sp5)}.k-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.k-grid--2,.k-grid--3{grid-template-columns:minmax(0,1fr)}.k-lead{font-size:var(--t-base)}}

.skip{position:absolute;left:var(--sp3);top:-80px;z-index:60;padding:10px 14px;border-radius:var(--r3);background:#fff;color:#000;font:500 14px/1 var(--sans)}
.skip:focus{top:var(--sp3)}
.mk{width:1em;height:1em;flex:none}

/* ---------- buttons (Vercel pair: white primary, black hairline secondary) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);font:500 15px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:transform .2s var(--out),background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),opacity var(--t-fast)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn:focus-visible{outline:0;box-shadow:var(--ring)}
.btn svg{width:13px;height:13px;flex:none;transition:transform var(--t-med) var(--out)}
.btn:hover svg.ar{transform:translateX(2px)}
.btn--p,.nav .btn--p,.sheet .btn--p{background:#fff;color:#000}
.btn--p:hover,.nav .btn--p:hover,.sheet .btn--p:hover{background:#e0e0e0}
.btn--g,.btn--s{background:#000;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn--g:hover,.btn--s:hover{background:#1a1a1a;box-shadow:inset 0 0 0 1px var(--line3)}
.btn--g:focus-visible,.btn--s:focus-visible{box-shadow:inset 0 0 0 1px var(--line3),var(--ring)}
.btn--sm{height:36px;padding:0 14px;font-size:14px}
.btn--lg{height:50px;padding:0 24px;font-size:16px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
/* underlined text link */
.link{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:15px;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size var(--t-med) var(--out)}
.link:hover{background-size:0 1px;background-position:100% 100%}
.link svg{width:11px;height:11px}
.k-prose a,a.k-u{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px;transition:text-decoration-color var(--t-fast)}
.k-prose a:hover,a.k-u:hover{text-decoration-color:currentColor}

/* ---------- pills, chips, toggles: black + hairline; active = white fill, black text ---------- */
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:500 13px/24px var(--mono);color:var(--mute);background:#000;box-shadow:inset 0 0 0 1px var(--line2);white-space:nowrap}
.tag--acc{color:var(--acc-ink);background:var(--acc);box-shadow:none}
.tag--ok{color:var(--ok-ink);background:var(--ok);box-shadow:none}
.k-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--r-pill);font:500 14px/32px var(--sans);color:var(--ink);background:#000;box-shadow:inset 0 0 0 1px var(--line2);white-space:nowrap;cursor:pointer;transition:background-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast),transform .2s var(--out)}
.k-chip:hover{background:#1a1a1a;box-shadow:inset 0 0 0 1px var(--line3)}
.k-chip:active{transform:scale(.97)}
.k-chip[aria-pressed="true"],.k-chip[aria-selected="true"],.k-chip.is-on{background:#fff;color:#000;box-shadow:none}
/* verdict pills (colour = meaning): wait / ok / wrong / bad (held, blocked, warning) / fail / pass */
.vd{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:600 12px/24px var(--mono);letter-spacing:.04em;white-space:nowrap}
.vd--wait{color:var(--mute);box-shadow:inset 0 0 0 1px var(--line2)}
.vd--wait i{width:5px;height:5px;border-radius:50%;background:var(--mute)}
.vd--ok{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line3)}
.vd--wrong{color:var(--mute);box-shadow:inset 0 0 0 1px var(--line2)}
.vd--bad{color:var(--acc-ink);background:var(--acc)}
.vd--fail{color:var(--bad-ink);background:var(--bad)}
.vd--pass{color:var(--ok-ink);background:var(--ok)}
@media (max-width:720px){.vd{font-size:13px}}

/* ---------- cards: black, separated by a hairline ---------- */
.k-card{position:relative;display:flex;flex-direction:column;padding:var(--sp6);border-radius:var(--r);background:#000;box-shadow:inset 0 0 0 1px var(--line2)}
.k-card--flat{box-shadow:none;padding-inline:0}
.k-card--paper{background:#fff;color:var(--p-ink);box-shadow:inset 0 0 0 1px var(--p-line)}
/* interactive cards (links or buttons): lift, brighter hairline, press */
a.k-card,button.k-card,.k-card--i{cursor:pointer;transition:transform .25s var(--out),box-shadow var(--t-fast),background-color var(--t-fast)}
a.k-card:hover,button.k-card:hover,.k-card--i:hover{transform:translateY(-2px);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line3)}
a.k-card:active,button.k-card:active,.k-card--i:active{transform:translateY(0) scale(.99);transition-duration:.08s}
a.k-card:focus-visible,button.k-card:focus-visible,.k-card--i:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--line3),var(--ring)}
@media (max-width:720px){.k-card{padding:var(--sp5)}}
@media (hover:none){a.k-card:hover,button.k-card:hover,.k-card--i:hover{transform:none}}
/* never a card inside a card: an inner group is flat, divided by a hairline */
.k-card .k-card,.k-con .k-card{box-shadow:none;border-radius:0;padding:var(--sp4) 0 0;border-top:1px solid var(--line);background:transparent}

/* ---------- console (product UI frame) ---------- */
.k-con{position:relative;border-radius:var(--r);background:#000;box-shadow:inset 0 0 0 1px var(--line2);overflow:hidden}
.k-bar{display:flex;align-items:center;gap:var(--sp3);min-height:46px;padding:12px 18px;border-bottom:1px solid var(--line);font:400 13px/16px var(--mono);color:var(--mute);white-space:nowrap;overflow:hidden}
.k-bar .p{color:var(--ink);font-weight:500}
.k-bar .sep{width:1px;height:14px;background:var(--line2);flex:none}
.k-bar .sp{flex:1}
.k-pane{padding:20px}
@media (max-width:720px){.k-bar{padding:0 14px;gap:10px}.k-pane{padding:16px}}

/* ---------- tables ---------- */
.k-table{width:100%;border-collapse:collapse;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.k-table th{padding:10px 12px;border-bottom:1px solid var(--line2);font:500 13px/16px var(--mono);color:var(--mute);text-align:left;white-space:nowrap}
.k-table td{padding:12px;border-bottom:1px solid var(--line);color:var(--mute);vertical-align:top}
.k-table td b,.k-table td strong{color:var(--ink);font-weight:500}
.k-table tr:last-child td{border-bottom:0}
.k-table .r{text-align:right}
.k-table tbody tr{transition:background-color var(--t-fast)}
.k-table tbody tr:hover{background:var(--bg2)}
.k-tablewrap{overflow-x:auto;border-radius:var(--r2);box-shadow:inset 0 0 0 1px var(--line2)}

/* ---------- form controls ---------- */
.k-field{display:grid;gap:var(--sp2)}
.k-label{font:500 13px/16px var(--mono);color:var(--mute)}
.k-input,.k-select,.k-textarea{width:100%;min-height:44px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;background:#000;color:var(--ink);font:400 15.5px/1.4 var(--sans);caret-color:#fff;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.k-textarea{padding:12px 14px;min-height:120px;resize:vertical}
.k-select{appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23a1a1a1' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.k-input:hover,.k-select:hover,.k-textarea:hover{border-color:var(--line3)}
.k-input:focus,.k-select:focus,.k-textarea:focus{outline:0;border-color:#fff;box-shadow:0 0 0 3px rgb(255 255 255 / .12)}
.k-input::placeholder,.k-textarea::placeholder{color:var(--mute)}
/* switch: black track + hairline; on = white track, black knob */
.k-switch{position:relative;display:inline-block;flex:none;width:40px;height:24px;border-radius:var(--r-pill);background:#000;box-shadow:inset 0 0 0 1px var(--line3);cursor:pointer;transition:background-color var(--t-fast)}
.k-switch::after{content:"";position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--mute);transition:transform .25s var(--out),background-color var(--t-fast)}
.k-switch[aria-checked="true"],.k-switch.is-on{background:#fff;box-shadow:none}
.k-switch[aria-checked="true"]::after,.k-switch.is-on::after{transform:translateX(16px);background:#000}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgb(0 0 0 / .8);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line);font-family:var(--sans);color:var(--ink)}
:where(.nav,.sheet,.site-ft) a{color:inherit;text-decoration:none}
.nav__bar{display:flex;align-items:center;height:var(--nav-h);gap:var(--sp5)}
.brand{display:flex;align-items:center;gap:10px;flex:none;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;color:var(--ink)}
.brand .mk{font-size:22px}
.brand__demo{font-weight:500;color:var(--mute)}
.brand__demo::before{content:"/";margin-right:8px;color:var(--line3);font-weight:400}
.nav__links{display:flex;align-items:center;gap:2px;margin-left:var(--sp2)}
.nav__links > a,.nav__dd > button{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:var(--r-pill);font-size:14.5px;color:var(--mute);white-space:nowrap;transition:color var(--t-fast),background-color var(--t-fast)}
.nav__links > a:hover,.nav__dd > button:hover,.nav__dd.open > button{color:var(--ink);background:var(--hover)}
.nav__links > a[aria-current="page"]{color:var(--ink)}
.nav__dd{position:relative}
.nav__dd > button svg{width:10px;height:10px;transition:transform var(--t-med) var(--out)}
.nav__dd.open > button svg{transform:rotate(180deg)}
.menu{position:absolute;top:calc(100% + 10px);left:-8px;width:640px;padding:8px;display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:16px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2),0 24px 48px -16px rgb(0 0 0 / .8);opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;transition:opacity .2s var(--out),transform .2s var(--out),visibility 0s .2s}
.menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__dd.open .menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s var(--out),transform .2s var(--out),visibility 0s}
.menu a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border-radius:10px;transition:background-color var(--t-fast)}
.menu a:hover,.menu a:focus-visible{background:var(--hover)}
.menu img{width:96px;height:60px;border-radius:8px;object-fit:cover;background:#000;box-shadow:0 0 0 1px var(--line)}
.menu b{display:block;font-weight:500;font-size:14.5px;line-height:20px;color:var(--ink)}
.menu span{display:block;font-size:13px;color:var(--mute);line-height:18px}
.menu a[aria-current="page"] b::after{content:" · you are here";font-weight:400;color:var(--mute);font-size:13px}
.nav .sp{flex:1}
.nav .tag{flex:none}
.nav .btn{height:36px;padding:0 16px;font-size:14px}
.burger{display:none;width:44px;height:44px;margin-right:-10px;place-items:center;border-radius:var(--r-pill)}
.burger svg{width:20px;height:20px}
.burger path{transition:transform var(--t-med) var(--out);transform-origin:10px 10px}
.burger[aria-expanded="true"] path:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] path:last-child{transform:translateY(-4px) rotate(-45deg)}
.sheet{position:fixed;inset:var(--nav-h) 0 0;z-index:39;padding:var(--sp3) var(--pad) var(--sp7);overflow:auto;overscroll-behavior:contain;background:#000;font-family:var(--sans);color:var(--ink);opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .2s var(--out),transform .2s var(--out),visibility 0s .2s}
.sheet.open{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s var(--out),transform .2s var(--out),visibility 0s}
.sheet a:not(.btn){display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-size:18px}
.sheet .sh,.sheet .sh-l{margin:var(--sp6) 0 var(--sp1);font:500 13px/16px var(--mono);color:var(--mute)}
.sheet .btn{display:flex;width:100%;height:50px;margin-top:var(--sp5);font-size:16px}
.sheet .btn + .btn{margin-top:var(--sp3)}
.sheet .note{margin-top:var(--sp5);font:400 13px/20px var(--mono);color:var(--mute)}
html.sheet-open{overflow:hidden}
@media (max-width:1260px){.nav .tag{display:none}}
@media (max-width:1080px){.nav__links{display:none}.burger{display:grid}}
@media (max-width:720px){.nav .btn{display:none}}

/* ---------- footer ---------- */
.site-ft{border-top:1px solid var(--line);padding:var(--sp8) 0 var(--sp6);background:#000;font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.55}
.ft{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:var(--sp7)}
.ft__p{max-width:40ch;margin-top:var(--sp4);color:var(--mute);font-size:15px}
.ft__contact{display:grid;gap:6px;margin-top:var(--sp4);font-size:15px;color:var(--mute)}
.ft__contact a{justify-self:start;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size var(--t-med) var(--out)}
.ft__contact a:hover{background-size:0 1px;background-position:100% 100%}
.ft__demos{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp6)}
.ft__demos a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);transition:color var(--t-fast)}
.ft__demos a span{color:var(--mute);font-size:14px;text-align:right;transition:color var(--t-fast)}
.ft__demos a:hover,.ft__demos a:hover span{color:#fff}
.ft__legal{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:var(--sp7);padding-top:var(--sp5);border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
.ft__legal a{transition:color var(--t-fast)}
.ft__legal a:hover{color:var(--ink)}
@media (max-width:1080px){.ft{grid-template-columns:minmax(0,1fr);gap:var(--sp6)}}
@media (max-width:720px){.ft__demos{grid-template-columns:minmax(0,1fr)}.site-ft{padding-top:var(--sp7)}}

/* ---------- slim CTA strip (demo pages) ---------- */
.kcta{border-top:1px solid var(--line);padding:var(--sp6) 0}
.kcta .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp5);flex-wrap:wrap}
.kcta p{margin:0;font-size:15px;color:var(--mute);max-width:70ch}
.kcta p b{color:var(--ink);font-weight:500}
.kcta__b{display:flex;gap:var(--sp3);flex-wrap:wrap}

/* ---------- scroll reveal (driven by kh-system.js onView) ---------- */
.k-rv{opacity:0;transform:translateY(16px)}
.k-rv.on{opacity:1;transform:none;transition:opacity .6s var(--out) var(--d,0s),transform .7s var(--out) var(--d,0s)}