/* ===========================================================================
   KAIROS ENGINEERING — shared design system
   ---------------------------------------------------------------------------
   Design language lifted from overlay_v4.py, so the site and the product read
   as one object. Greys are the overlay's own (28/28/30, 58/58/60, 142/142/147).

   THE RULE: colour appears ONLY inside the footage. The UI is greyscale.
   There is no --red, no --green, no --amber. If a distinction needs making,
   make it typographically or positionally — weight, size, order, rule width.

   No build step and no third-party requests. This file is served from the same
   origin as the pages, which is what the privacy page promises.

   CACHE BUSTING: every page links this as kairos.css?v=YYYYMMDDx, and site.js
   the same way. With no build step there is no content hash, so a returning
   visitor would otherwise sit on a stale stylesheet after every edit. **Bump
   the token in all five pages whenever this file or site.js changes** —
   one command:
       perl -pi -e 's/\?v=[0-9a-z]+/?v=NEWTOKEN/g' *.html

   Page-specific rules stay in that page's own <style> block. Anything that
   appears on two or more pages belongs here.
   ======================================================================== */

:root{
  --bg:#0D0D0F; --surface:#151517; --surface-2:#1C1C1E;
  --line:#2A2A2C; --line-2:#3A3A3C;
  --txt:#FFFFFF; --sub:#8E8E93; --sub-2:#6E6E73;
  --scrim-a:rgba(8,8,10,.94); --scrim-b:rgba(8,8,10,.55); --scrim-c:rgba(8,8,10,0);
  --fc:"Arial Narrow","Roboto Condensed","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fb:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --fm:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(64px,11vh,132px);
}
:root[data-theme="light"]{
  --bg:#FAFAFA; --surface:#FFFFFF; --surface-2:#F2F2F4;
  --line:#E1E1E4; --line-2:#D2D2D6;
  --txt:#101012; --sub:#6E6E73; --sub-2:#8E8E93;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--fb);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--txt);color:var(--bg)}
:focus-visible{outline:2px solid var(--txt);outline-offset:3px}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}

/* ---------- type ------------------------------------------------------
   Condensed for headings and numbers, mono for labels, regular sans for
   prose. Condensed at paragraph length is a readability tax. */
.h1,.h2,.h3,.num{font-family:var(--fc);font-stretch:75%;font-weight:700;
  letter-spacing:-.015em;line-height:1.03;margin:0}
.h1{font-size:clamp(38px,6.6vw,86px)}
.h2{font-size:clamp(28px,4.2vw,52px);line-height:1.06}
.h3{font-size:clamp(19px,2.1vw,25px);line-height:1.15}
.h4{font-family:var(--fc);font-stretch:75%;font-weight:700;font-size:17px;
  letter-spacing:-.01em;line-height:1.2;margin:0}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* mono labels — measurements, eyebrows, keys */
.lbl{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sub);font-weight:500}

.lead{font-size:clamp(16px,1.5vw,19px);color:var(--sub);max-width:46ch;margin:0}
.prose{max-width:64ch;color:var(--sub);font-size:15px}
.prose p{margin:0 0 1.05em}
.prose p:last-child{margin-bottom:0}
.prose b,.prose strong{color:var(--txt);font-weight:600}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}

/* ---------- header ----------------------------------------------------
   Static and ruled off by default. Add .over to float it on a hero video —
   only index.html does that. */
header{position:relative;z-index:40;border-bottom:1px solid var(--line)}
header.over{position:absolute;top:0;left:0;right:0;border-bottom:0}
.hdr{display:flex;align-items:center;gap:26px;height:74px}
.mark{font-family:var(--fc);font-stretch:75%;font-weight:700;font-size:17px;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.mark .tick{width:3px;height:15px;background:currentColor;display:block}
.mark small{font-family:var(--fm);font-size:9px;letter-spacing:.16em;
  font-weight:400;opacity:.6;text-transform:uppercase}
nav.top{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.top a,nav.top button{font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:inherit;opacity:.68;
  padding:8px 11px;background:none;border:0;cursor:pointer;font-weight:500}
nav.top a:hover,nav.top button:hover{opacity:1}
nav.top a.here{opacity:1;box-shadow:inset 0 -2px 0 currentColor}
header.on-video{color:#fff}
@media(max-width:620px){nav.top a.hide-sm{display:none}}

/* ---------- sections --------------------------------------------------- */
section{padding:var(--gap) 0;border-top:1px solid var(--line)}
section.first{border-top:0}
.sechead{display:grid;grid-template-columns:118px minmax(0,1fr);gap:clamp(20px,4vw,56px);
  align-items:start;margin-bottom:clamp(38px,5vw,62px)}
.sechead .idx{padding-top:7px}
.sechead .idx .n{font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--sub-2);
  display:block;margin-top:5px}
.sechead .body{max-width:60ch}
.sechead .h2{margin-bottom:16px}
@media(max-width:760px){.sechead{grid-template-columns:1fr;gap:14px}.sechead .idx{padding-top:0}}

/* ---------- page head (inner pages) -----------------------------------
   The equivalent of the landing hero for a page with no video: a big
   condensed title, a lead, and a strip of hard facts down the side. */
.pagehead{padding:clamp(52px,8vh,96px) 0 clamp(34px,5vh,56px)}
.pagehead .h1{font-size:clamp(34px,5.4vw,68px);max-width:17ch}
.pagehead .lead{margin-top:20px}
.pagehead .lbl{display:block;margin-bottom:20px}

/* ---------- facts strip (key/value) ------------------------------------ */
.meta{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);margin-top:34px}
.meta div{flex:1 1 150px;padding:15px 18px;border-right:1px solid var(--line)}
.meta div:last-child{border-right:0}
.meta .k{font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sub-2);display:block;margin-bottom:6px}
.meta .v{font-family:var(--fc);font-stretch:75%;font-weight:700;font-size:23px;
  font-variant-numeric:tabular-nums;line-height:1}
.meta .v small{font-family:var(--fm);font-size:10px;font-weight:400;color:var(--sub);
  letter-spacing:.06em;margin-left:4px}
@media(max-width:760px){.meta div{border-right:0;border-bottom:1px solid var(--line)}
  .meta div:last-child{border-bottom:0}}

/* ---------- channel grid ----------------------------------------------- */
.chans{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:34px 0 0}
.chans div{background:var(--bg);padding:14px 16px}
.chans .n{font-family:var(--fm);font-size:12.5px;color:var(--txt);display:block}
.chans .u{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sub-2);display:block;margin-top:4px}

/* ---------- card row ---------------------------------------------------
   Hairline-separated cells. Three up by default, .two for two. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:8px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards>div{background:var(--bg);padding:24px 24px 26px}
.cards .lbl{display:block;margin-bottom:13px}
.cards .h3,.cards .h4{margin-bottom:9px}
.cards p{color:var(--sub);font-size:14.5px;margin:0}
@media(max-width:760px){.cards,.cards.two{grid-template-columns:1fr}}

/* ---------- tables (reference pages) -----------------------------------
   Tell pages stay dense. A signal list optimises for finding. */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:14px;
  margin-top:34px}
.tbl th{text-align:left;font-family:var(--fm);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sub-2);padding:11px 14px;font-weight:500;
  border-bottom:1px solid var(--line-2);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);color:var(--sub);
  vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td b{color:var(--txt);font-weight:600}
.tbl td .mono{font-size:13px}
.tbl td.yr{font-family:var(--fm);font-size:12px;color:var(--sub-2);white-space:nowrap}
@media(max-width:700px){.tbl{display:block;overflow-x:auto;white-space:nowrap}
  .tbl td,.tbl th{white-space:normal;min-width:150px}}

/* status marker — greyscale, so the distinction is weight and fill, never hue.
   done = filled, live = filled outline, open = dim outline. */
.st{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--line-2);color:var(--sub);white-space:nowrap;
  display:inline-block;line-height:1.4}
.st.done{background:var(--txt);color:var(--bg);border-color:var(--txt);font-weight:600}
.st.wip{border-color:var(--txt);color:var(--txt)}
.st.none{color:var(--sub-2)}

/* ---------- does / does not --------------------------------------------
   The old version was a red/green table. Colour-coded pros and cons is an
   AI tell, and the greyscale rule kills it anyway. The distinction is now
   order and mark: "does" comes first and is set in the text colour,
   "does not" follows and is set in the sub colour. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:34px}
.split>div{background:var(--bg);padding:0 0 22px}
.split h4{margin:0;padding:14px 22px;font-family:var(--fm);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sub);font-weight:500;
  border-bottom:1px solid var(--line)}
.split ul{margin:18px 0 0;padding:0 22px 0 40px;list-style:none}
.split li{position:relative;font-size:14.5px;margin:0 0 13px;color:var(--sub)}
.split li:last-child{margin-bottom:0}
.split li b{color:var(--txt);font-weight:600}
.split li:before{position:absolute;left:-20px;font-family:var(--fm);font-size:13px;
  color:var(--sub-2)}
.split .yes li:before{content:"+"}
.split .no li:before{content:"\2013"}
.split .no li{color:var(--sub-2)}
.split .no li b{color:var(--sub)}
@media(max-width:760px){.split{grid-template-columns:1fr}}

/* ---------- callout band ----------------------------------------------- */
.band{border:1px solid var(--line-2);border-left-width:3px;padding:18px 22px;
  margin-top:34px;background:var(--surface);font-size:14.5px;color:var(--sub)}
.band b{color:var(--txt);font-weight:600}

/* ---------- buttons ----------------------------------------------------- */
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;text-decoration:none;padding:14px 22px;border:1px solid var(--line-2);
  color:var(--txt);display:inline-block}
.btn:hover{border-color:var(--txt)}
.btn.solid{background:var(--txt);color:var(--bg);border-color:var(--txt)}
.btn.solid:hover{background:var(--sub);border-color:var(--sub)}

/* ---------- the TX CUT block ------------------------------------------- */
.tx{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,4vw,54px);
  align-items:center;border:1px solid var(--line);padding:clamp(26px,4vw,46px)}
.jp{font-family:var(--fm);text-align:center;border:1px solid var(--line-2);padding:22px 26px;
  line-height:1.9;white-space:nowrap;background:var(--surface)}
.jp .big{display:block;font-family:var(--fc);font-stretch:75%;font-weight:700;
  font-size:clamp(26px,3.4vw,40px);letter-spacing:.14em;line-height:1;margin-bottom:11px}
.jp .sub{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--sub-2)}
@media(max-width:700px){.tx{grid-template-columns:1fr}}

/* ---------- closing block ----------------------------------------------- */
.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:820px){.close{grid-template-columns:1fr}}

/* ---------- signup ------------------------------------------------------
   Two skins. The bare .signup sits on footage (light text, blur). The
   .onpage variant sits on the page background. */
.signup{margin-top:34px;max-width:470px}
.signup form{display:flex;gap:0;border:1px solid rgba(255,255,255,.34);background:rgba(8,8,10,.5);
  backdrop-filter:blur(6px)}
.signup input{flex:1;min-width:0;background:none;border:0;color:#fff;font-family:var(--fb);
  font-size:15px;padding:15px 16px;outline:none}
.signup input::placeholder{color:rgba(255,255,255,.45)}
.signup button{font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;background:#fff;color:#0D0D0F;border:0;padding:15px 22px;cursor:pointer;
  white-space:nowrap}
.signup button:hover{background:var(--sub)}
.signup button:disabled{opacity:.5;cursor:not-allowed}
.signup .micro{font-family:var(--fm);font-size:10px;letter-spacing:.06em;line-height:1.7;
  color:rgba(255,255,255,.55);margin-top:11px}
.signup .micro a{color:rgba(255,255,255,.8)}
.signup .msg{display:none;margin-top:12px;font-size:13.5px;padding:10px 13px;
  border-left:2px solid #fff;background:rgba(255,255,255,.08);color:#fff}
.signup .msg.on{display:block}
@media(max-width:560px){.signup form{flex-direction:column}.signup button{padding:14px}}

.signup.onpage form{border-color:var(--line-2);background:var(--surface);backdrop-filter:none}
.signup.onpage input{color:var(--txt)}
.signup.onpage input::placeholder{color:var(--sub-2)}
.signup.onpage button{background:var(--txt);color:var(--bg)}
.signup.onpage button:hover{background:var(--sub)}
.signup.onpage .micro{color:var(--sub-2)}
.signup.onpage .micro a{color:var(--sub)}
.signup.onpage .msg{border-color:var(--txt);background:var(--surface-2);color:var(--txt)}

/* ---------- footer ------------------------------------------------------ */
footer{border-top:1px solid var(--line);padding:46px 0 60px}
.foot{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:baseline}
.foot .fine{font-size:12.5px;color:var(--sub-2);max-width:56ch;line-height:1.65}
.foot nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:20px}
.foot nav a{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sub);text-decoration:none}
.foot nav a:hover{color:var(--txt)}

/* ---------- copy beats --------------------------------------------------
   Placeholder briefs, not copy. Toggle them off with the chip bottom-right
   to judge the layout clean. Anything inside .beat is for Lachy to write —
   agent prose in his voice was read as obviously AI and rejected.

   The label reserves its own space with padding-top rather than hanging above
   the block on a negative offset. A negative offset overlaps whatever sits
   directly above, which happens any time a beat follows a paragraph of real
   copy — and an unreadable brief is worse than no brief. */
.beat{position:relative;display:block;color:var(--sub);
  border-bottom:1px dashed var(--line-2);padding:15px 0 2px}
.beat::before{content:attr(data-beat);position:absolute;top:0;left:0;
  font-family:var(--fm);font-size:8.5px;line-height:1.4;letter-spacing:.15em;
  text-transform:uppercase;color:var(--sub-2);white-space:nowrap;font-weight:500}
body.beats-off .beat{padding-top:0}
.h1 .beat,.h2 .beat,.h3 .beat,.h4 .beat{font-family:var(--fc);font-stretch:75%}
li>.beat,td>.beat,p>.beat{display:inline-block}
body.beats-off .beat{border-bottom:0;color:inherit}
body.beats-off .beat::before{display:none}
/* ---------- review chips + block refs -----------------------------------
   REVIEW WORKFLOW. Every addressable block carries data-ref="HOME.02" or
   similar. Hit the REFS chip and each one shows its tag, so feedback can be
   "HOME.03 video is too tall" instead of "the bit near the board thing".
   The refs are also element ids, so HOME.03 is reachable at #HOME.03 and
   cross-references in prose link to them rather than saying "section 04" —
   a number in a sentence goes stale the moment a section moves. */
.chips{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:8px}
.chips button{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;background:var(--surface-2);color:var(--sub);
  border:1px solid var(--line-2);padding:9px 13px;cursor:pointer}
.chips button:hover{color:var(--txt);border-color:var(--txt)}
.chips button.on{background:var(--txt);color:var(--bg);border-color:var(--txt)}

[data-ref]{position:relative}
body.refs-on [data-ref]{outline:1px dashed var(--line-2);outline-offset:6px}
body.refs-on [data-ref]::after{content:attr(data-ref);position:absolute;top:-9px;left:-1px;
  z-index:60;font-family:var(--fm);font-size:9px;letter-spacing:.12em;font-weight:600;
  background:var(--txt);color:var(--bg);padding:2px 6px;pointer-events:none;
  white-space:nowrap}

/* scrolled-to blocks get a moment of emphasis, so a shared #HOME.03 link
   lands somewhere obvious rather than just jumping */
:target{outline:1px solid var(--line-2);outline-offset:10px}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}