/* ===========================================================
   Rubricon — site stylesheet
   -----------------------------------------------------------
   Identity note, so this is not re-derived later:

   Rubricon is deliberately NOT granaura/GTC. That system is light
   ground, indigo #1A1F36 + blue #4F8CFF, Georgia serif. This
   one is the opposite register — near-black, system sans with
   a MONOSPACE label layer, one accent. Mono eyebrows/metrics
   over tight sans is what makes a page read as an engineering
   product rather than a services firm, and both cloud startup
   programmes screen out services firms. Do not import Georgia
   here and do not introduce blue.

   ONE accent: signal amber #FFAA3B. It is the line-active
   colour and the waveform colour. A second decorative colour
   spends that signal.

   No webfonts. System stacks only, so the page paints on the
   first byte and crawlers get real HTML with no JS.
   =========================================================== */

:root{
  --bg:#0A0C11;        /* page ground                        */
  --bg2:#0E1117;       /* alternating section                */
  --surf:#12151C;      /* raised panel                       */
  --surf2:#171C25;     /* panel inside a panel               */
  --line:#1E232E;      /* hairline                           */
  --line2:#2B3342;     /* hairline, emphasised               */
  --ink:#F5F7FA;       /* headlines                          */
  --ink2:#CFD6E2;      /* body on dark                       */
  --muted:#8A93A5;     /* captions, labels                   */
  --accent:#FFAA3B;    /* THE accent                         */
  --accent2:#FFC97A;   /* accent, lighter — hover only       */
  --wash:rgba(255,170,59,.10);
  --wash2:rgba(255,170,59,.18);
  --ok:#5EEAD4;        /* pass ticks in score panels ONLY    */

  --sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --maxw:1160px;
  --pad:112px;         /* section vertical padding           */
  --r:10px;            /* radius                             */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font:16.5px/1.66 var(--sans);
  color:var(--ink2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--wash2);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
section{padding:var(--pad) 0}
section.alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.narrow{max-width:760px}

/* ---------------- type ---------------- */
h1,h2,h3,h4{color:var(--ink);font-weight:500;letter-spacing:-.022em;line-height:1.14}
h1{font-size:56px;letter-spacing:-.032em}
h2{font-size:38px;letter-spacing:-.026em}
h3{font-size:20px;font-weight:600;letter-spacing:-.012em;line-height:1.3}
h4{font-size:16px;font-weight:600;letter-spacing:-.006em}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
strong{color:var(--ink);font-weight:600}
.lead{font-size:20px;line-height:1.58;color:var(--ink2)}
.sub{color:var(--muted)}
.small{font-size:14.5px;line-height:1.6}

/* The label layer. Monospace, wide-tracked, uppercase — this is the thing
   that carries the identity. Used for eyebrows, table heads, metric captions,
   diagram node labels and nav. */
.eyebrow{
  font:600 11.5px/1 var(--mono);
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:20px;
}
.eyebrow.dim{color:var(--muted)}
.mono{font-family:var(--mono)}
.rule{width:56px;height:2px;background:var(--accent);margin:26px 0}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font:600 14.5px/1 var(--sans);letter-spacing:-.005em;
  padding:14px 22px;border-radius:8px;border:1px solid transparent;
  transition:background .16s,border-color .16s,color .16s;
  cursor:pointer;
}
.btn-1{background:var(--accent);color:#141005}
.btn-1:hover{background:var(--accent2)}
.btn-2{border-color:var(--line2);color:var(--ink)}
.btn-2:hover{border-color:var(--accent);color:var(--accent)}
.btn .ar{font-family:var(--mono);font-weight:400}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* ---------------- nav ---------------- */
header.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(10,12,17,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
}
.nav .bar{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:10px}
.nav ul{display:flex;align-items:center;gap:30px;list-style:none}
.nav ul a{
  font:500 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);transition:color .15s;
}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--ink)}
.nav .cta{
  font:600 13px/1 var(--sans);letter-spacing:0;text-transform:none;
  color:#141005;background:var(--accent);padding:10px 16px;border-radius:7px;
}
.nav .cta:hover{background:var(--accent2);color:#141005}
.burger{display:none;background:none;border:1px solid var(--line2);border-radius:7px;
  width:40px;height:38px;color:var(--ink);font-size:17px;line-height:1;cursor:pointer}

/* ---------------- hero ---------------- */
.hero{
  padding:96px 0 88px;
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
/* One soft amber wash behind the instrument panel. A gradient, not an image and
   not a filter — nothing here repaints per frame. */
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 78% 18%,rgba(255,170,59,.13),transparent 62%),
    radial-gradient(620px 520px at 96% 78%,rgba(255,170,59,.06),transparent 60%);
}
.hero .wrap{position:relative;z-index:1}
.hgrid{display:grid;grid-template-columns:1.03fr .97fr;gap:64px;align-items:center}
.hero h1{margin-bottom:24px}
.hero .lead{max-width:31em}
.hero .under{
  margin-top:32px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 26px;
  font:500 12.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.hero .under span{display:flex;align-items:center;gap:8px}
.hero .under span::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* ---------------- the instrument panel (hero visual) ----------------
   Shows the product rather than describing it: a live call on the left of the
   loop and its rubric score on the right. Everything is HTML+CSS so it stays
   sharp at any zoom and costs no request. */
.panel{
  background:linear-gradient(180deg,var(--surf) 0%,#0E1219 100%);
  border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 24px 64px -24px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
}
.panel .ph{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid var(--line);
  font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.live{display:flex;align-items:center;gap:7px;color:var(--accent)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulse 1.9s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.panel .ph .sp{margin-left:auto;font-variant-numeric:tabular-nums}

/* Waveform. 28 bars, transform-only animation, staggered by nth-child.
   prefers-reduced-motion must out-specify the per-bar rules, so it repeats the
   :nth-child selector — a bare `.wave i` loses on specificity and the bars keep
   moving. This exact trap bit the granaura hero once. */
.wave{display:flex;align-items:center;justify-content:space-between;height:88px;padding:20px 16px 15px}
.wave i{
  flex:1 1 0;max-width:5px;min-width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent) 0%,rgba(255,170,59,.42) 100%);
  height:100%;transform:scaleY(.16);transform-origin:center;
  animation:bar 1.25s ease-in-out infinite;
}
/* Seven delay groups crossed with co-prime 5n and 11n variation. The visible
   pattern only repeats every 385 bars, so 56 of them read as random. */
.wave i:nth-child(7n+1){animation-delay:-.05s;animation-duration:1.25s}
.wave i:nth-child(7n+2){animation-delay:-.62s;animation-duration:1.60s}
.wave i:nth-child(7n+3){animation-delay:-.31s;animation-duration:.95s}
.wave i:nth-child(7n+4){animation-delay:-.94s;animation-duration:1.40s}
.wave i:nth-child(7n+5){animation-delay:-.18s;animation-duration:1.10s}
.wave i:nth-child(7n+6){animation-delay:-.75s;animation-duration:1.75s}
.wave i:nth-child(7n+7){animation-delay:-.44s;animation-duration:1.05s}
.wave i:nth-child(5n){opacity:.58}
.wave i:nth-child(11n){animation-duration:2.10s;opacity:.42}
@keyframes bar{0%,100%{transform:scaleY(.12)}50%{transform:scaleY(1)}}

.turnlog{padding:2px 16px 16px;border-bottom:1px solid var(--line)}
.turnlog div{display:flex;gap:12px;padding:6px 0;font-size:14px;line-height:1.45}
.turnlog b{
  flex:0 0 58px;font:600 10.5px/1.7 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}
.turnlog div.you b{color:var(--accent)}
.turnlog q{color:var(--ink2);quotes:'"' '"'}
.turnlog .typing{color:var(--muted)}

.scorebox{padding:15px 16px 17px;background:rgba(255,255,255,.014)}
.scorebox .sh{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;
  font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;margin-bottom:14px}
.checks div{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font:13.5px/1.4 var(--sans);color:var(--ink2)}
.checks em{font-style:normal;font-family:var(--mono);font-size:12.5px;color:var(--ok)}
.checks em.warn{color:var(--accent)}
.total{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-top:13px;border-top:1px solid var(--line);
}
.total span{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.total b{font:600 27px/1 var(--mono);color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.total b i{font-style:normal;font-size:14px;color:var(--muted);font-weight:400}

/* ---------------- page head (inner pages) ---------------- */
.phead{padding:82px 0 66px;border-bottom:1px solid var(--line);background:var(--bg2)}
.phead h1{font-size:46px;margin-bottom:20px}
.phead .lead{max-width:44em}

/* ---------------- cards ---------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 26px;transition:border-color .16s;
}
.card:hover{border-color:var(--line2)}
.card h3{margin-bottom:11px}
.card p{font-size:15.5px;color:var(--muted)}
.card .n{
  font:600 11.5px/1 var(--mono);letter-spacing:.16em;color:var(--accent);
  display:block;margin-bottom:16px;
}
.card ul{list-style:none;margin-top:16px}
.card li{position:relative;padding-left:18px;font-size:15px;color:var(--muted);margin-bottom:8px}
.card li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--accent)}
.card li:last-child{margin-bottom:0}
.card.on{border-color:var(--accent);background:linear-gradient(180deg,var(--wash),transparent 46%),var(--surf)}

/* ---------------- section heading block ---------------- */
.shead{max-width:720px;margin-bottom:52px}
.shead h2{margin-bottom:18px}
.shead .lead{font-size:18.5px;color:var(--muted)}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------------- the loop diagram ----------------
   The home page's main visual and the argument of the company in one figure:
   the audit result feeds the next call. Five nodes, then a return rail. */
.loop{margin-top:8px}
.loopline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch}
.node{
  position:relative;background:var(--surf);border:1px solid var(--line);
  padding:24px 20px 22px;text-align:left;
}
.node:first-child{border-radius:var(--r) 0 0 var(--r)}
.node:last-child{border-radius:0 var(--r) var(--r) 0}
.node+.node{border-left:none}
.node .k{
  font:600 10.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:13px;
}
.node h4{margin-bottom:8px;font-size:15.5px}
.node p{font-size:13.5px;line-height:1.5;color:var(--muted)}
/* the connector chevron sitting on the shared border */
.node+.node::before{
  content:'';position:absolute;left:-6px;top:50%;width:10px;height:10px;
  margin-top:-5px;background:var(--bg2);
  border-top:1px solid var(--line2);border-right:1px solid var(--line2);
  transform:rotate(45deg);
}
.node.hot{background:linear-gradient(180deg,var(--wash),transparent 52%),var(--surf);border-color:var(--line2)}
.node.hot .k{color:var(--accent)}
.rail{
  margin-top:0;border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--r) var(--r);
  padding:13px 20px;background:rgba(255,170,59,.045);
  display:flex;align-items:center;gap:12px;
  font:12.5px/1.5 var(--mono);letter-spacing:.03em;color:var(--muted);
}
.rail::before{content:'\21BA';color:var(--accent);font-size:16px;line-height:1}
.rail b{color:var(--ink2);font-weight:500}

/* ---------------- spec rows (definition lists) ---------------- */
.spec{border-top:1px solid var(--line)}
.spec .row{
  display:grid;grid-template-columns:250px 1fr;gap:34px;
  padding:24px 0;border-bottom:1px solid var(--line);
}
.spec dt{
  font:600 12px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  padding-top:2px;
}
.spec dd{color:var(--muted);font-size:15.5px}
.spec dd b{color:var(--ink)}

/* ---------------- steps ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line2)}
.step{padding:26px 24px 26px 0;border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step:not(:first-child){padding-left:24px}
.step .n{
  font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--accent);
  display:block;margin-bottom:14px;
}
.step h4{margin-bottom:9px}
.step p{font-size:14.5px;color:var(--muted)}

/* ---------------- metrics / fact strip ---------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fact{background:var(--bg2);padding:26px 24px}
.fact .m{
  font:600 30px/1.05 var(--mono);letter-spacing:-.03em;color:var(--ink);
  display:block;margin-bottom:9px;font-variant-numeric:tabular-nums;
}
.fact .m span{color:var(--accent)}
.fact p{font-size:13.5px;line-height:1.5;color:var(--muted)}

/* ---------------- stack strip ---------------- */
.stack{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font:500 12.5px/1 var(--mono);letter-spacing:.04em;
  color:var(--ink2);background:var(--surf);border:1px solid var(--line2);
  padding:9px 13px;border-radius:6px;
}
.chip.on{border-color:var(--accent);color:var(--accent);background:var(--wash)}

/* ---------------- note / callout ---------------- */
.note{
  border-left:2px solid var(--accent);background:var(--wash);
  padding:18px 22px;border-radius:0 var(--r) var(--r) 0;
  font-size:15.5px;color:var(--ink2);
}
.note b{color:var(--ink)}

/* ---------------- dark inset band ---------------- */
.band{
  background:linear-gradient(135deg,#101722 0%,#0B0E14 60%);
  border:1px solid var(--line2);border-radius:14px;padding:52px 48px;
}

/* ---------------- table ---------------- */
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th{
  text-align:left;padding:12px 16px 12px 0;border-bottom:1px solid var(--line2);
  font:600 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.tbl td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
.tbl td:first-child{color:var(--ink);font-weight:500;width:30%}
.tblwrap{overflow-x:auto}

/* ---------------- person ---------------- */
.person{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.person .av{
  width:66px;height:66px;border-radius:12px;background:var(--wash);
  border:1px solid var(--line2);display:grid;place-items:center;
  font:600 22px/1 var(--mono);color:var(--accent);
}
.person .pn{font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.person .pr{font:500 12px/1.6 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--accent);margin-bottom:11px}
.person p{font-size:15px;color:var(--muted)}
.person a.li{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--muted);
}
.person a.li:hover{color:var(--accent)}

/* ---------------- CTA band ---------------- */
.cta{
  background:linear-gradient(135deg,#151B26 0%,#0C1017 62%);
  border-top:1px solid var(--line2);
}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:44px;flex-wrap:wrap}
.cta h2{margin-bottom:12px}
.cta p{color:var(--muted);max-width:40em}

/* ---------------- form ---------------- */
.form{display:grid;gap:16px;max-width:560px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
input,textarea{
  width:100%;font:15.5px/1.5 var(--sans);color:var(--ink);
  background:var(--surf);border:1px solid var(--line2);border-radius:8px;
  padding:12px 14px;transition:border-color .15s;
}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:132px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{font-size:14.5px;color:var(--accent);min-height:20px}

/* ---------------- prose (legal pages) ---------------- */
.prose{max-width:760px}
.prose h2{font-size:24px;margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;margin:26px 0 10px}
.prose p,.prose li{font-size:15.5px;color:var(--muted);line-height:1.7}
.prose ul,.prose ol{margin:0 0 16px 20px}
.prose li{margin-bottom:7px}
.prose a{color:var(--accent);border-bottom:1px solid rgba(255,170,59,.3)}
.prose .upd{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------------- footer ---------------- */
footer{background:var(--bg2);border-top:1px solid var(--line);padding:62px 0 34px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:46px}
footer h5{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:18px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer li a{font-size:14.5px;color:var(--ink2);transition:color .15s}
footer li a:hover{color:var(--accent)}
footer .blurb{font-size:14.5px;color:var(--muted);margin-top:16px;max-width:27em}
.fbot{
  border-top:1px solid var(--line);padding-top:24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font:12.5px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted);
}
.fbot a:hover{color:var(--accent)}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){
  :root{--pad:82px}
  h1{font-size:44px} h2{font-size:31px}
  .hgrid{grid-template-columns:1fr;gap:46px}
  .hero{padding:66px 0 62px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .facts{grid-template-columns:repeat(2,1fr)}
  .loopline{grid-template-columns:repeat(2,1fr)}
  .node{border-radius:0!important;border-left:1px solid var(--line)!important;border-top:none}
  .node:nth-child(-n+2){border-top:1px solid var(--line)}
  .node::before{display:none!important}
  .rail{border-top:none}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--line);padding-left:0!important;padding-right:24px}
  .step:nth-child(2n){border-right:none;padding-left:24px!important}
  .spec .row{grid-template-columns:1fr;gap:10px}
}
@media(max-width:760px){
  :root{--pad:64px}
  h1{font-size:35px;letter-spacing:-.026em} h2{font-size:26px} h3{font-size:18px}
  body{font-size:16px}
  .lead{font-size:17.5px}
  .phead h1{font-size:33px}
  .g2,.g3,.g4,.f2{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .loopline{grid-template-columns:1fr}
  .node:nth-child(-n+2){border-top:none}
  .node:first-child{border-top:1px solid var(--line)}
  .steps{grid-template-columns:1fr}
  .step{border-right:none;padding-left:0!important}
  .fgrid{grid-template-columns:1fr 1fr;gap:32px}
  .band{padding:34px 24px}
  .checks{grid-template-columns:1fr}
  /* nav collapses to a disclosure list */
  .burger{display:block}
  .nav ul{
    display:none;position:absolute;left:0;right:0;top:66px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px 28px 20px;
  }
  .nav ul.open{display:flex}
  .nav ul li{border-top:1px solid var(--line)}
  .nav ul a{display:block;padding:15px 0;font-size:13.5px}
  .nav .cta{display:inline-block;margin-top:14px;text-align:center}
  .cta .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .fgrid{grid-template-columns:1fr}
}

/* Motion. The per-bar rules are `.wave i:nth-child(n)` at specificity (0,2,1),
   so the reduced-motion override has to match that or higher — a plain
   `.wave i` at (0,1,1) loses and the animation keeps running. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .wave i:nth-child(n){animation:none;transform:scaleY(.46)}
  .wave i:nth-child(3n){transform:scaleY(.88)}
  .wave i:nth-child(4n+1){transform:scaleY(.24)}
  .wave i:nth-child(7n){transform:scaleY(.66)}
  .live i{animation:none}
  *{transition-duration:.01ms!important}
}

@media print{
  body{background:#fff;color:#111}
  header.nav,.cta,footer,.wave{display:none}
  h1,h2,h3,h4{color:#111}
}

/* ---------------- wordmark ----------------
   Set in the same monospace as the label layer rather than outlined to SVG.
   The mark carries the shape; the wordmark only has to be legible and to put
   the 9 in the accent. */
.brand .wm{font:600 19px/1 var(--mono);letter-spacing:-.015em;color:var(--ink)}
.brand .wm b{color:var(--accent);font-weight:600}
.brand img,.brand svg{width:30px;height:30px;border-radius:7px}
footer .brand .wm{font-size:17px}

/* ---------------- loopline modifiers ----------------
   The node row is reused on the product pages for the turn-latency path and the
   scoring pipeline, which are not five columns. `.railed` squares off the bottom
   corners for the rows that have a return rail underneath them. */
.loopline.c3{grid-template-columns:repeat(3,1fr)}
.loopline.c4{grid-template-columns:repeat(4,1fr)}
.loopline.c6{grid-template-columns:repeat(6,1fr)}
.loopline.railed .node:first-child{border-bottom-left-radius:0}
.loopline.railed .node:last-child{border-bottom-right-radius:0}
.node .k.budget{color:var(--accent);font-size:12.5px;letter-spacing:.06em}
@media(max-width:1000px){
  .loopline.c3,.loopline.c4,.loopline.c6{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .loopline.c3,.loopline.c4,.loopline.c6{grid-template-columns:1fr}
}

/* ---------------- architecture layers ----------------
   Used on /company/. A stacked band per tier, mono label on the left and the
   components on the right — it has to be readable by someone scanning for
   "is there real engineering here", so it favours plainness over drawing. */
.layers{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.layer{
  display:grid;grid-template-columns:196px 1fr;gap:28px;
  padding:22px 24px;border-bottom:1px solid var(--line);background:var(--surf);
}
.layer:last-child{border-bottom:none}
.layer.edge{background:var(--bg2)}
.layer.hot{background:linear-gradient(90deg,var(--wash),transparent 58%),var(--surf)}
.layer .lk{
  font:600 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);
}
.layer.edge .lk{color:var(--muted)}
.layer .ld p{font-size:14.5px;color:var(--muted);margin-bottom:12px}
.layer .stack{gap:7px}
.layer .chip{font-size:11.5px;padding:7px 11px}
@media(max-width:760px){
  .layer{grid-template-columns:1fr;gap:12px}
}

/* A tool call in the hero turn log. Set in mono so it reads as machine output
   next to the two quoted human turns, which is the whole point of showing it. */
.turnlog div.tool{align-items:baseline}
.turnlog div.tool b{color:var(--muted);opacity:.75}
.turnlog div.tool span{font:12.5px/1.5 var(--mono);color:var(--muted);letter-spacing:-.01em}

/* Per-turn telemetry strip in the hero panel. Tabular numerals so the four
   columns line up; the total is the only one in the accent. */
.latency{
  display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 16px;background:rgba(255,255,255,.015);
}
.latency div{flex:1;display:flex;flex-direction:column;gap:5px}
.latency span{font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.latency b{font:600 13.5px/1 var(--mono);color:var(--ink2);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.latency div:last-child b{color:var(--accent)}


/* ---------------- utilities ----------------
   These exist so that no page needs an inline style="" attribute, which lets
   _headers ship `style-src 'self'` with no 'unsafe-inline' exemption. Keep it
   this small: it is a shim for one-off spacing, not a utility framework. If a
   value here starts repeating with intent, give it a real component class. */
.mt0{margin-top:0}
.mt6{margin-top:6px}
.mt16{margin-top:16px}
.mt18{margin-top:18px}
.mt20{margin-top:20px}
.mt26{margin-top:26px}
.mt32{margin-top:32px}
.mb18{margin-bottom:18px}
.mb28{margin-bottom:28px}
.mw720{max-width:720px}
.mw760{max-width:760px}
.gap56{gap:56px}
.align-start{align-items:start}
.h2sm{font-size:26px;margin-bottom:8px}
.lnk{color:var(--accent)}
.lnk:hover{color:var(--accent2)}