/* ============================================================
   Tidel.ai — design system v3 · "Tideline"
   Fonts & palette inherited from the Tidel catalogs
   (Bricolage Grotesque / DM Sans / DM Mono · warm grey, navy,
   steel blue). Brand-site layout language, motion added in v3.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  /* colour */
  --bg:#d7d6d2;
  --bg-raise:rgba(255,255,255,0.45);
  --bg-panel:rgba(255,255,255,0.55);
  --ink:#2b3a53;
  --ink-2:rgba(43,58,83,0.64);
  --ink-3:rgba(43,58,83,0.38);
  --accent:#4d81b0;
  --accent-deep:#3d6e9c;
  --accent-2:#7a9ec1;
  --hairline:rgba(43,58,83,0.16);
  --hairline-strong:rgba(43,58,83,0.30);
  --ok:#4e8a5e;
  /* dark band */
  --band-bg:#243049;
  --band-panel:#1c2740;
  --band-ink:#e9e7e1;
  --band-mut:rgba(233,231,225,0.62);
  --band-faint:rgba(233,231,225,0.38);
  --band-accent:#9fc0de;
  --band-hairline:rgba(233,231,225,0.16);
  /* type */
  --f-display:"Bricolage Grotesque","Noto Sans SC",sans-serif;
  --f-body:"DM Sans","Noto Sans SC",system-ui,sans-serif;
  --f-mono:"DM Mono",ui-monospace,monospace;
  /* rhythm */
  --sect:clamp(5.5rem,10vw,8.5rem);
  --head-gap:3.2rem;
  --ease:cubic-bezier(.22,.61,.2,1);
}

html{scroll-behavior:smooth;}
html,body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{min-height:100vh;font-size:1.0625rem;}
::selection{background:rgba(77,129,176,0.28);}

img,canvas{max-width:100%;display:block;}
a{color:var(--accent);}

/* ---------- shared micro-type ---------- */
.eyebrow,
.section-rule .label{
  font-family:var(--f-mono);font-size:0.72rem;font-weight:400;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);
}
.mono-note{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.08em;color:var(--ink-3);}

/* ---------- layout shells ---------- */
.container{max-width:1140px;margin-inline:auto;padding-inline:2rem;}

/* ---------- top navigation (sticky, condensing) ---------- */
.topbar{position:sticky;top:0;z-index:60;background:transparent;transition:background .3s var(--ease),box-shadow .3s var(--ease);}
.topbar::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--hairline);opacity:0;transition:opacity .3s;}
.topbar.scrolled{background:rgba(215,214,210,0.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
.topbar.scrolled::after{opacity:1;}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.7rem;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;transition:padding .3s var(--ease);}
.topbar.scrolled .topbar-in{padding-block:0.95rem;}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--accent);z-index:1;transition:none;}
.wordmark{font-family:var(--f-display);font-size:1.7rem;font-weight:700;letter-spacing:-0.03em;color:var(--ink);text-transform:none;line-height:1;text-decoration:none;white-space:nowrap;}
.wordmark .dot{color:var(--accent);}
.topnav{display:flex;align-items:center;gap:2.1rem;flex-wrap:wrap;justify-content:flex-end;}
.topnav a{color:var(--ink-2);text-decoration:none;transition:color .15s;white-space:nowrap;}
.topnav a:hover{color:var(--ink);}
.topnav a.active{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:2px;}
.topnav a.nav-cta{color:var(--ink);border:1px solid var(--hairline-strong);padding:0.55rem 1.05rem;border-radius:3px;transition:all .15s;}
.topnav a.nav-cta:hover{border-color:var(--ink);background:var(--ink);color:var(--bg);}
.topnav a.nav-cta.active{border-color:var(--ink);border-bottom-width:1px;padding-bottom:0.55rem;}

/* ---------- buttons ---------- */
.hero-ctas{display:flex;gap:0.8rem;flex-wrap:wrap;margin-top:2.4rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;font-family:var(--f-mono);font-size:0.74rem;letter-spacing:0.13em;text-transform:uppercase;text-decoration:none;padding:0.95rem 1.55rem;border-radius:3px;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .3s var(--ease);cursor:pointer;border:1px solid transparent;line-height:1;}
.btn-primary{background:var(--ink);color:var(--bg);}
.btn-primary:hover{background:var(--accent-deep);color:#fff;}
.btn-outline{border-color:var(--hairline-strong);color:var(--ink);background:transparent;}
.btn-outline:hover{border-color:var(--ink);}
.btn-text{font-family:var(--f-mono);font-size:0.74rem;letter-spacing:0.13em;text-transform:uppercase;text-decoration:none;color:var(--accent);display:inline-flex;align-items:center;gap:0.5rem;}
.btn-text .arr{transition:transform .18s var(--ease);}
.btn-text:hover .arr{transform:translateX(4px);}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero .container{position:relative;z-index:1;padding-top:clamp(3.4rem,8vh,6.2rem);padding-bottom:clamp(15rem,30vh,20rem);}
.hero .eyebrow{display:block;margin-bottom:1.6rem;}
.hero h1{font-family:var(--f-display);font-size:clamp(3.1rem,6.6vw,5.3rem);font-weight:800;line-height:1.01;letter-spacing:-0.035em;color:var(--ink);text-wrap:balance;max-width:18ch;}
.hero h1 .accent{color:var(--accent);}
/* typed headline caret */
.hero h1 .type-caret::after{content:"▍";color:var(--accent);margin-left:0.05em;animation:cursor-blink .85s steps(1) infinite;}
.hero h1 .type-caret.caret-off::after{content:"";animation:none;}
.hero h1 .type-ghost::after{content:"▍";opacity:0;}  /* holds the not-yet-typed line open, invisibly */
/* keep the typed line from re-wrapping when the caret adds width (mobile wraps anyway) */
@media (min-width:761px){.hero h1 .type-caret{white-space:nowrap;}}
.hero .lede{font-size:clamp(1.15rem,1.6vw,1.3rem);line-height:1.55;color:var(--ink-2);max-width:36em;margin-top:1.8rem;}
.hero .lede strong{color:var(--ink);font-weight:500;}
#tide{position:absolute;inset:auto 0 0 0;width:100%;height:clamp(240px,38vh,360px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 96%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 34%,#000 96%,transparent 100%);}

/* ---------- proof band ---------- */
.stats{border-block:1px solid var(--hairline);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);}
.stat{background:var(--bg);padding:1.9rem 1.5rem 1.7rem;}
.stat .n{font-family:var(--f-display);font-size:clamp(1.8rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-0.02em;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;}
.stat .l{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin-top:0.55rem;line-height:1.5;}

/* ---------- manifesto ---------- */
.manifesto{padding-block:var(--sect);}
.manifesto .mline{font-family:var(--f-display);font-weight:700;letter-spacing:-0.03em;line-height:1.12;font-size:clamp(1.9rem,4vw,3.1rem);max-width:24ch;text-wrap:balance;}
.manifesto .mline+.mline{margin-top:0.9rem;}
.manifesto .m-dim{color:var(--ink-3);}
.manifesto .m-ink{color:var(--ink);}
.manifesto .m-acc{color:var(--accent);}
.manifesto .m-note{margin-top:2.6rem;max-width:44em;color:var(--ink-2);font-size:1rem;}

/* anchor landing offset (in-page jumps) */
[id]{scroll-margin-top:5.5rem;}

/* breathing room between the hero (heading + scene) and the first principles section */
#principles{padding-top:clamp(3rem,5.5vw,5rem);}

/* ---------- generic section head ---------- */
.sect{padding-block:0 var(--sect);}
.sect-pad{padding-top:var(--sect);}
.sect-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:var(--head-gap);}
.sect-head .eyebrow{display:block;margin-bottom:1.1rem;}
.sect-head h2{font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-0.025em;line-height:1.08;color:var(--ink);text-wrap:balance;max-width:22ch;}
.sect-head .side{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--ink-3);text-align:right;}

/* ---------- pillars (capability areas, home) ---------- */
.pillar{display:grid;grid-template-columns:minmax(96px,150px) 1fr;gap:1rem 3rem;padding-block:3.4rem;border-top:1px solid var(--hairline);}
.pillar:last-of-type{border-bottom:1px solid var(--hairline);}
.pillar-num{font-family:var(--f-display);font-size:clamp(3rem,5vw,4.4rem);font-weight:800;letter-spacing:-0.03em;line-height:0.9;color:rgba(77,129,176,0.30);font-variant-numeric:tabular-nums;}
.pillar-body h3{font-family:var(--f-display);font-size:clamp(1.55rem,2.3vw,2.05rem);font-weight:700;letter-spacing:-0.02em;line-height:1.12;color:var(--ink);}
.pillar-body>p{margin-top:1.1rem;max-width:44em;color:var(--ink-2);}
.pillar-kw{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0.4rem 0;font-family:var(--f-mono);font-size:0.78rem;letter-spacing:0.04em;color:var(--ink-3);}
.pillar-kw b{color:var(--ink);font-weight:400;}
.pillar-kw .sep{margin-inline:0.9rem;color:var(--ink-3);}
.pillar-body .btn-text{margin-top:1.7rem;}

/* ---------- dark band ---------- */
.band{background:var(--band-bg);color:var(--band-ink);padding-block:var(--sect);position:relative;overflow:hidden;}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 900px 520px at 88% -10%,rgba(122,158,193,0.16),transparent 62%);pointer-events:none;}
.band .container{position:relative;z-index:1;}
.band .eyebrow{color:var(--band-accent);display:block;}
.band h2{font-family:var(--f-display);font-size:clamp(2rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-0.025em;line-height:1.08;color:var(--band-ink);text-wrap:balance;margin-top:1.1rem;max-width:22ch;}
.band + .sect{padding-top:var(--sect);}
.band-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;margin-top:var(--head-gap);}

/* terminal artifact */
.term{position:relative;background:var(--band-panel);border:1px solid var(--band-hairline);border-radius:6px;}
.term::before,.term::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;}
.term::before{top:-5px;left:-5px;border-top:1px solid var(--band-accent);border-left:1px solid var(--band-accent);}
.term::after{bottom:-5px;right:-5px;border-bottom:1px solid var(--band-accent);border-right:1px solid var(--band-accent);}
.term-bar{display:flex;align-items:center;gap:0.6rem;padding:0.8rem 1.2rem;border-bottom:1px solid var(--band-hairline);font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--band-faint);}
.term-bar .dots{display:flex;gap:5px;}
.term-bar .dots span{width:8px;height:8px;border-radius:50%;background:var(--band-hairline);display:block;}
.term-bar .st{margin-left:auto;color:var(--band-accent);transition:opacity .4s;}
.term[data-typing] .term-bar .st{opacity:0;}
.term.done .term-bar .st{opacity:1;}
.term-log{padding:1.5rem 1.6rem;font-family:var(--f-mono);font-size:0.82rem;line-height:2.05;color:var(--band-mut);overflow-x:auto;}
.term-log .p{color:var(--band-faint);}
.term-log .k{color:var(--band-accent);}
.term-log .ok{color:#8fbf9c;}
.term-log .tl-hidden{display:none;}
.term-log .typing::after{content:"▋";display:inline-block;margin-left:2px;color:var(--band-accent);animation:cursor-blink 0.9s steps(1) infinite;}
@keyframes cursor-blink{50%{opacity:0;}}

/* verification / methodology steps — label column shared across rows so all steps align */
.steps{display:grid;gap:0;grid-template-columns:max-content 1fr;}
.step{display:grid;grid-column:1 / -1;grid-template-columns:9.5rem 1fr;gap:1.4rem;padding-block:1.6rem;border-top:1px solid var(--band-hairline);}
@supports (grid-template-columns:subgrid){
  .step{grid-template-columns:subgrid;}
}
.step:first-child{border-top:none;padding-top:0.2rem;}
.step .i{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--band-accent);padding-top:0.45rem;}
.step h3{font-family:var(--f-display);font-size:1.22rem;font-weight:700;letter-spacing:-0.01em;line-height:1.25;color:var(--band-ink);}
.step p{margin-top:0.45rem;font-size:0.95rem;line-height:1.6;color:var(--band-mut);}
.band-note{margin-top:2.8rem;font-family:var(--f-mono);font-size:0.75rem;letter-spacing:0.06em;color:var(--band-faint);}
.band-note a{color:var(--band-accent);text-decoration:none;}

/* ---------- why grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
.why-cell{background:var(--bg);padding:2rem 1.9rem 2.2rem;transition:background .25s var(--ease);}
.why-cell:hover{background:var(--bg-raise);}
.why-cell .i{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);}
.why-cell h3{font-family:var(--f-display);font-size:1.22rem;font-weight:700;letter-spacing:-0.01em;line-height:1.25;margin-top:0.9rem;color:var(--ink);}
.why-cell p{margin-top:0.6rem;font-size:0.95rem;line-height:1.62;color:var(--ink-2);}

/* ---------- blog rows (home) ---------- */
.post-rows{display:grid;}
.post-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr max-content;gap:2rem;align-items:baseline;padding-block:1.5rem;border-top:1px solid var(--hairline);text-decoration:none;}
.post-row:last-child{border-bottom:1px solid var(--hairline);}
.post-row .d{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.post-row .t{font-family:var(--f-display);font-size:1.3rem;font-weight:700;letter-spacing:-0.015em;line-height:1.25;color:var(--ink);transition:color .15s;}
.post-row .g{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}
.post-row:hover .t{color:var(--accent);}

/* ---------- closing CTA ---------- */
.contact-cta{border-top:1px solid var(--hairline);padding-block:var(--sect);}
.contact-cta .eyebrow{display:block;}
.contact-cta h2{font-family:var(--f-display);font-size:clamp(2.3rem,4.6vw,3.5rem);font-weight:800;letter-spacing:-0.03em;line-height:1.05;color:var(--ink);text-wrap:balance;max-width:18ch;margin-top:1.1rem;}
.contact-cta p{margin-top:1.5rem;max-width:40em;color:var(--ink-2);}

/* ---------- footer (unified) ---------- */
.site-foot{border-top:1px solid var(--hairline);padding-block:3.5rem 3rem;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:3rem;}
.foot-brand .wordmark{font-size:1.5rem;}
.foot-brand p{margin-top:1rem;font-size:0.92rem;color:var(--ink-3);max-width:30em;line-height:1.6;}
.foot-col .h{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.1rem;}
.foot-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:0.95rem;padding-block:0.32rem;transition:color .15s;}
.foot-col a:hover{color:var(--accent);}
.foot-base{margin-top:3.2rem;padding-top:1.6rem;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.06em;color:var(--ink-3);}
.foot-base a{color:var(--ink-2);text-decoration:none;}
.foot-base a:hover{color:var(--accent);}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:300;mix-blend-mode:difference;opacity:0;transition:opacity .35s var(--ease);}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:#e9e7e1;}
.cursor-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(233,231,225,0.85);
  transition:opacity .35s var(--ease),width .28s var(--ease),height .28s var(--ease),margin .28s var(--ease),background-color .28s var(--ease),border-color .28s var(--ease);}
html.cursor-on .cursor-dot,html.cursor-on .cursor-ring{opacity:1;}
html.cursor-on.cursor-out .cursor-dot,html.cursor-on.cursor-out .cursor-ring,
html.cursor-on.cursor-text .cursor-dot,html.cursor-on.cursor-text .cursor-ring{opacity:0;}
.cursor-ring.is-link{width:52px;height:52px;margin:-26px 0 0 -26px;background:rgba(233,231,225,0.09);border-color:rgba(233,231,225,0.55);}
.cursor-ring.is-press{width:24px;height:24px;margin:-12px 0 0 -12px;border-color:#e9e7e1;}
html.cursor-on body,html.cursor-on a,html.cursor-on button,html.cursor-on .cat-head,html.cursor-on label.opt{cursor:none;}
html.cursor-on input,html.cursor-on textarea,html.cursor-on select{cursor:text;}
@media (prefers-reduced-motion:reduce),(pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}

/* ---------- reveal motion ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease);}
.js .rv.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  .term-log .typing::after{animation:none;}
}

/* ============================================================
   SHARED FURNITURE (subpages + home)
   ============================================================ */

/* ---------- section rules ---------- */
.section-rule{margin-bottom:2.6rem;display:flex;align-items:baseline;gap:1.3rem;}
.section-rule .line{flex:1;height:1px;background:var(--hairline);}
.section-rule .count{font-family:var(--f-mono);font-size:0.72rem;color:var(--ink-3);letter-spacing:0.05em;text-align:right;}

/* ---------- page hero (subpages) ---------- */
.page-hero{position:relative;padding-block:2rem clamp(4rem,7vw,5.5rem);}
.page-hero .container{position:relative;z-index:1;}
/* themed scene canvas — sits behind the hero copy, fades out under the text column */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 32%,rgba(0,0,0,0.55) 52%,#000 74%);
          mask-image:linear-gradient(to right,transparent 32%,rgba(0,0,0,0.55) 52%,#000 74%);}
@media (max-width:900px){.hero-canvas{display:none;}}
/* extra scene headroom for pages whose hero canvas needs a taller stage */
@media (min-width:901px){.page-hero.hero-roomy{padding-bottom:clamp(6.5rem,10vw,9rem);}}
.page-hero .eyebrow{display:block;margin-bottom:1.4rem;}
.page-hero h1{font-family:var(--f-display);font-size:clamp(2.5rem,4.6vw,3.6rem);font-weight:800;line-height:1.03;letter-spacing:-0.03em;margin-bottom:1.6rem;text-wrap:balance;max-width:20ch;}
.page-hero h1 .accent{color:var(--accent);}
.page-hero .lede{font-size:1.25rem;line-height:1.55;color:var(--ink);max-width:42em;margin-bottom:1rem;}
.page-hero .sub{font-size:1rem;color:var(--ink-2);max-width:46em;line-height:1.7;}
.page-hero .sub strong{color:var(--ink);font-weight:500;}
.page-hero .meta-line{margin-top:1.9rem;font-family:var(--f-mono);font-size:0.75rem;letter-spacing:0.08em;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:0.4rem 0;}
.page-hero .meta-line b{color:var(--ink);font-weight:400;}
.page-hero .meta-line .sep{margin-inline:0.9rem;}
/* echo prompt (coding hero) — a bare shell line living at the foot of the glyph rain */
.echo-line{margin-top:1.9rem;display:flex;align-items:baseline;gap:0.55rem;max-width:31rem;font-family:var(--f-mono);font-size:0.82rem;color:var(--ink-2);}
.echo-line .p{color:var(--ink-3);}
.echo-line .cmd{color:var(--accent);transition:text-shadow .3s;}
.echo-line input{width:16.5rem;background:rgba(255,255,255,0.3);border:0;outline:0;border-bottom:1px solid var(--hairline-strong);border-radius:3px 3px 0 0;font:inherit;color:var(--ink);caret-color:var(--accent);padding:0.28rem 0.55rem;transition:border-color .25s,background .25s;}
.echo-line input:hover{background:rgba(255,255,255,0.45);}
.echo-line input:focus{border-bottom-color:var(--accent);background:rgba(255,255,255,0.5);}
.echo-line input::placeholder{color:var(--ink-2);}
.echo-line .hint{font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;}
.echo-line.sent .cmd{text-shadow:0 0 12px rgba(77,129,176,0.95),0 0 4px rgba(77,129,176,0.7);}
@media (max-width:900px),(prefers-reduced-motion:reduce){.echo-line{display:none;}}

/* ---------- principles (level 2 · philosophy) ---------- */
.prin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem);}
.prin{border-top:1px solid var(--hairline-strong);padding-top:1.6rem;}
.prin .i{font-family:var(--f-display);font-size:clamp(2.2rem,3.4vw,3rem);font-weight:800;letter-spacing:-0.03em;line-height:1;color:rgba(77,129,176,0.30);font-variant-numeric:tabular-nums;}
.prin h3{font-family:var(--f-display);font-size:1.38rem;font-weight:700;letter-spacing:-0.015em;line-height:1.2;color:var(--ink);margin-top:1.2rem;text-wrap:balance;}
.prin p{margin-top:0.8rem;font-size:0.97rem;line-height:1.66;color:var(--ink-2);}

/* ---------- capability categories (level 3 · progressive disclosure) ---------- */
.cats{display:grid;border-top:1px solid var(--hairline);}
.cat{border-bottom:1px solid var(--hairline);}
.cat-head{display:grid;grid-template-columns:max-content 1fr max-content max-content;align-items:baseline;gap:1.6rem;width:100%;padding:1.6rem 0.2rem;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;transition:background .2s var(--ease);}
.cat-head:hover .cat-t{color:var(--accent);}
.cat-i{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--ink-3);min-width:2.2ch;}
.cat-t{font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.55rem);font-weight:700;letter-spacing:-0.015em;line-height:1.2;color:var(--ink);transition:color .15s;}
.cat-k{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.08em;color:var(--ink-3);text-align:right;}
.cat-x{position:relative;width:14px;height:14px;align-self:center;}
.cat-x::before,.cat-x::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink-2);transition:transform .35s var(--ease),background .2s;}
.cat-x::before{width:14px;height:1.5px;transform:translate(-50%,-50%);}
.cat-x::after{width:1.5px;height:14px;transform:translate(-50%,-50%);}
.cat.open .cat-x::after{transform:translate(-50%,-50%) rotate(90deg);}
.cat.open .cat-x::before,.cat.open .cat-x::after{background:var(--accent);}
.js .cat-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .35s var(--ease);}
.js .cat.open .cat-body{grid-template-rows:1fr;opacity:1;}
.cat-body>div{min-height:0;overflow:hidden;}
.cat-inner{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:1rem 3.5rem;padding:0.3rem 0.2rem 2.2rem;margin-left:calc(2.2ch + 1.6rem);}
.cat-inner p{font-size:0.98rem;line-height:1.68;color:var(--ink-2);max-width:52em;}
.cat-inner p+p{margin-top:0.7rem;}
.cat-aside .h{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);margin-bottom:0.7rem;}
.cat-aside ul{list-style:none;}
.cat-aside li{font-family:var(--f-mono);font-size:0.78rem;letter-spacing:0.03em;color:var(--ink-2);padding-block:0.32rem;border-top:1px solid var(--hairline);}
.cat-aside li:first-of-type{border-top:none;padding-top:0;}

/* ---------- sample datasheet (measured difficulty demo) ---------- */
.sheet{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:6px;position:relative;}
.sheet::before,.sheet::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;}
.sheet::before{top:-5px;left:-5px;border-top:1px solid var(--accent-2);border-left:1px solid var(--accent-2);}
.sheet::after{bottom:-5px;right:-5px;border-bottom:1px solid var(--accent-2);border-right:1px solid var(--accent-2);}
.sheet-bar{display:flex;justify-content:space-between;gap:1rem;padding:0.8rem 1.4rem;border-bottom:1px solid var(--hairline);font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.sheet-rows{padding:1.5rem 1.4rem 1.7rem;display:grid;gap:1rem;}
.srow{display:grid;grid-template-columns:minmax(96px,max-content) 1fr max-content;align-items:center;gap:1.2rem;font-family:var(--f-mono);font-size:0.76rem;letter-spacing:0.04em;color:var(--ink-2);}
.srow .bar{height:8px;background:rgba(43,58,83,0.10);border-radius:2px;overflow:hidden;}
.srow .bar i{display:block;height:100%;background:var(--accent);border-radius:2px;width:var(--w);}
.srow .bar i.dim{background:var(--ink-3);}
.srow .val{color:var(--ink-3);}
.js .rv .bar i{width:0;transition:width 1.1s var(--ease) .25s;}
.js .rv.in .bar i{width:var(--w);}
.sheet-note{padding:0 1.4rem 1.3rem;font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.06em;color:var(--ink-3);}

/* ---------- mono artifact card (robotics / world models) ---------- */
.manifest{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:6px;position:relative;}
.manifest::before,.manifest::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;}
.manifest::before{top:-5px;left:-5px;border-top:1px solid var(--accent-2);border-left:1px solid var(--accent-2);}
.manifest::after{bottom:-5px;right:-5px;border-bottom:1px solid var(--accent-2);border-right:1px solid var(--accent-2);}
.manifest-bar{padding:0.8rem 1.4rem;border-bottom:1px solid var(--hairline);font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;gap:1rem;}
.manifest-bar .st{color:var(--accent);}
.manifest-log{padding:1.4rem;font-family:var(--f-mono);font-size:0.8rem;line-height:2;color:var(--ink-2);overflow-x:auto;}
.manifest-log .k{color:var(--accent);}
.manifest-log .c{color:var(--ink-3);}

/* ---------- split section (artifact + copy) ---------- */
.split{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.split .steps-light{display:grid;}
.steps-light .step{border-color:var(--hairline);}
.steps-light .step .i{color:var(--accent);}
.steps-light .step h3{color:var(--ink);}
.steps-light .step p{color:var(--ink-2);}

/* ---------- access layers (progressive disclosure story) ---------- */
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
.layer{background:var(--bg);padding:1.7rem 1.5rem 1.9rem;position:relative;}
.layer .i{font-family:var(--f-mono);font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-3);}
.layer b{display:block;font-family:var(--f-display);font-size:1.08rem;font-weight:700;letter-spacing:-0.01em;color:var(--ink);margin-top:0.75rem;}
.layer p{margin-top:0.45rem;font-size:0.88rem;line-height:1.6;color:var(--ink-2);}
.layer.is-here{background:var(--bg-raise);}
.layer.is-here .i{color:var(--accent);}
.layer.is-here::after{content:"you are here";position:absolute;top:1.7rem;right:1.5rem;font-family:var(--f-mono);font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);}
.layers-note{margin-top:1.4rem;font-family:var(--f-mono);font-size:0.74rem;letter-spacing:0.06em;color:var(--ink-3);line-height:1.9;}
.layers-note a{color:var(--accent);text-decoration:none;}
.layers-note a:hover{text-decoration:underline;}

/* ---------- cards ---------- */
.card{position:relative;display:flex;flex-direction:column;padding:1.9rem;border:1px solid var(--hairline);border-radius:6px;background:var(--bg-raise);transition:border-color .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);text-decoration:none;color:inherit;}
a.card:hover{border-color:var(--accent);background:var(--bg-panel);transform:translateY(-2px);}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.15rem;}
.card-label{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent);}
.card h3{font-family:var(--f-display);font-size:1.42rem;font-weight:700;line-height:1.18;letter-spacing:-0.015em;color:var(--ink);margin-bottom:0.6rem;}
.card .tagline{font-size:0.97rem;color:var(--ink-2);margin-bottom:1.4rem;line-height:1.58;}
.card .tagline:last-child{margin-bottom:0;}
.card--quiet{cursor:default;}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}

/* keyword chips — quiet mono index */
.chips{display:flex;flex-wrap:wrap;gap:0.4rem 1.1rem;margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--hairline);}
.chip{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.05em;color:var(--ink-3);white-space:nowrap;}
.chip::before{content:"·";color:var(--accent);margin-right:0.45rem;}

/* ---------- capability grid (3-up light steps) ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);}
.cap{padding:1.9rem 1.8rem 2.1rem;background:var(--bg);transition:background .25s var(--ease);}
.cap:hover{background:var(--bg-raise);}
.cap .cap-num{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);margin-bottom:0.85rem;}
.cap h3{font-family:var(--f-display);font-size:1.18rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:0.55rem;line-height:1.27;}
.cap p{font-size:0.94rem;color:var(--ink-2);line-height:1.62;}

/* ---------- contact band (subpages) ---------- */
.contact-band{padding:3rem 0;border-top:1px solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.contact-band h2{font-family:var(--f-display);font-size:clamp(1.7rem,2.6vw,2.2rem);font-weight:700;letter-spacing:-0.02em;line-height:1.12;text-wrap:balance;}
.contact-band p{color:var(--ink-2);margin-top:0.7rem;max-width:34em;}

/* ---------- forms ---------- */
.form-card{border:1px solid var(--hairline);border-radius:6px;background:var(--bg-panel);padding:2.5rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;}
.form-field{display:flex;flex-direction:column;gap:0.5rem;}
.form-field--full{grid-column:1 / -1;}
.form-field label{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
.form-field label .req{color:var(--accent);}
.form-field input,.form-field textarea{font-family:var(--f-body);font-size:1rem;color:var(--ink);background:rgba(255,255,255,0.6);border:1px solid var(--hairline-strong);border-radius:4px;padding:0.8rem 1rem;outline:none;transition:border-color .15s,box-shadow .15s;width:100%;}
.form-field input:focus,.form-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(77,129,176,0.16);}
.form-field textarea{min-height:140px;resize:vertical;}
.interest-options{display:flex;flex-wrap:wrap;gap:0.55rem;}
.interest-options input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip-path:inset(50%);}
.interest-options label.opt{cursor:pointer;font-family:var(--f-mono);font-size:0.76rem;letter-spacing:0.05em;color:var(--ink-2);border:1px solid var(--hairline-strong);border-radius:3px;padding:0.55rem 1.05rem;transition:all .15s;user-select:none;text-transform:none;}
.interest-options label.opt:hover{border-color:var(--accent);color:var(--accent);}
.interest-options input:checked + label.opt{background:var(--ink);border-color:var(--ink);color:var(--bg);}
.form-note{font-size:0.88rem;color:var(--ink-3);}
.form-note a{color:var(--accent);text-decoration:none;}
.form-success{display:none;padding:1.1rem 1.4rem;border:1px solid rgba(78,138,94,0.4);background:rgba(78,138,94,0.10);color:#3d6e4b;border-radius:4px;margin-top:1.3rem;font-size:0.95rem;}
.form-success.show{display:block;}

/* ---------- blog cards (blog index) ---------- */
.post-list{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.post-card .post-date{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);}
.post-card h3{margin-top:0.55rem;}
.post-card .tagline{margin-bottom:0;}
.post-card .post-tag{font-family:var(--f-mono);font-size:0.68rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--accent);}

/* ---------- prose (blog article) ---------- */
.prose{max-width:46em;}
.prose .post-meta{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.3rem;}
.prose .post-meta .tag{color:var(--accent);}
.prose h1{font-family:var(--f-display);font-size:clamp(2.1rem,3.6vw,2.8rem);font-weight:800;line-height:1.07;letter-spacing:-0.025em;margin-bottom:1.5rem;text-wrap:balance;}
.prose h2{font-family:var(--f-display);font-size:1.5rem;font-weight:700;letter-spacing:-0.015em;margin:2.6rem 0 0.9rem;line-height:1.2;}
.prose p{margin-bottom:1.2rem;color:var(--ink);line-height:1.75;}
.prose p.dim{color:var(--ink-2);}
.prose ul,.prose ol{margin:0 0 1.2rem 1.3rem;line-height:1.75;}
.prose li{margin-bottom:0.4rem;}
.prose code{font-family:var(--f-mono);font-size:0.85em;background:rgba(77,129,176,0.10);border:1px solid var(--hairline);padding:1px 6px;border-radius:3px;color:var(--accent-deep);}
.prose blockquote{border-left:2px solid var(--accent-2);padding:0.2rem 0 0.2rem 1.3rem;color:var(--ink-2);margin:1.5rem 0;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .why-grid{grid-template-columns:repeat(2,1fr);}
  .band-grid,.split{grid-template-columns:1fr;}
  .prin-grid{grid-template-columns:1fr;gap:2.2rem;}
  .layers{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .cat-inner{grid-template-columns:1fr;gap:1.4rem;}
}
@media (max-width:760px){
  .container{padding-inline:1.25rem;}
  .topbar-in{padding-block:1.2rem;flex-wrap:wrap;row-gap:0.9rem;}
  .topbar.scrolled .topbar-in{padding-block:0.8rem;}
  .wordmark{font-size:1.5rem;}
  .topnav{gap:1.1rem;}
  .hero .container{padding-bottom:12rem;}
  .hero h1{font-size:clamp(2.5rem,10.5vw,3.1rem);}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .stat{padding:1.4rem 1.2rem;}
  .pillar{grid-template-columns:1fr;gap:1.2rem;padding-block:2.6rem;}
  .pillar-num{font-size:2.4rem;}
  .why-grid{grid-template-columns:1fr;}
  .post-row{grid-template-columns:1fr max-content;row-gap:0.35rem;}
  .post-row .d{grid-column:1 / -1;}
  .foot-grid{grid-template-columns:1fr;gap:2rem;}
  .cat-head{grid-template-columns:max-content 1fr max-content;gap:1rem;}
  .cat-k{display:none;}
  .cat-inner{margin-left:0;padding-bottom:1.8rem;}
  .layers{grid-template-columns:1fr;}
  .layer.is-here::after{position:static;display:block;margin-top:0.5rem;}
  .card-grid,.cap-grid,.post-list{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .contact-band{padding:2.2rem 0;}
  .section-rule .count{display:none;}
}
@media (max-width:480px){
  .hero h1{font-size:2.2rem;}
  .steps{grid-template-columns:1fr;}
  .step{grid-template-columns:1fr;gap:0.35rem;}
  .step .i{padding-top:0;}
  .manifesto .mline{font-size:1.55rem;}
  .prose h1{font-size:1.9rem;}
  .stats-grid{grid-template-columns:1fr 1fr;}
  .srow{grid-template-columns:1fr;gap:0.4rem;}
  .srow .val{display:none;}
}

/* ---------- annotation contact sheet (robotics) ---------- */
.annot-sheet{margin-top:2.6rem;background:var(--bg-panel);border:1px solid var(--hairline);border-radius:6px;position:relative;}
.annot-sheet::before,.annot-sheet::after{content:"";position:absolute;width:16px;height:16px;pointer-events:none;}
.annot-sheet::before{top:-5px;left:-5px;border-top:1px solid var(--accent-2);border-left:1px solid var(--accent-2);}
.annot-sheet::after{bottom:-5px;right:-5px;border-bottom:1px solid var(--accent-2);border-right:1px solid var(--accent-2);}
.annot-sheet-bar{padding:0.8rem 1.4rem;border-bottom:1px solid var(--hairline);font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.annot-sheet-bar .lg{display:inline-flex;align-items:center;gap:0.45rem;text-transform:none;letter-spacing:0.05em;}
.annot-sheet-bar .sw{width:9px;height:9px;border-radius:2px;display:inline-block;margin-left:0.6rem;}
.annot-sheet-bar .sw:first-child{margin-left:0;}
.annot-sheet-bar .sw-a{background:#c0533a;}
.annot-sheet-bar .sw-b{background:#f2f0ea;border:1px solid var(--hairline-strong);}
.annot-sheet-bar .sw-bin{background:#6a9c53;}
.annot-sheet img{width:100%;height:auto;border-radius:0 0 5px 5px;}
.annot-sheet figcaption{padding:0.9rem 1.4rem 1rem;border-top:1px solid var(--hairline);font-size:0.88rem;line-height:1.6;color:var(--ink-2);max-width:none;}