/* MLAIA design direction C, "engineering bold".
   Shared design system for pages that opt in with <body class="c-page">.
   Add .c-reading to the body for the light reading variant (long articles).
   Every selector is prefixed with .c- or scoped under body.c-page, so loading this file
   on a page changes nothing unless that page uses these classes.
   How to use it: _tools/design-c/README.md */

/* ---------- 1. Tokens ---------- */
.c-page{
  /* surfaces */
  --c-bg:#0c0e0d;          /* page */
  --c-bg-2:#121514;        /* raised panels, alternate sections */
  --c-bg-3:#070908;        /* instrument screens */
  --c-grid:#171b19;        /* graticule lines */
  --c-rule:#262b28;        /* dividers */
  --c-rule-2:#6b736d;      /* control borders (>=3:1 on --c-bg) */
  /* text */
  --c-fg:#eceee9;          /* headings, strong text: 16.9:1 on --c-bg */
  --c-text:#cfd4ce;        /* body copy: 12.9:1 */
  --c-muted:#9ca39d;       /* labels, notes: 7.4:1 */
  /* data colours: traces, readouts and the one accent word in a display headline */
  --c-amber:#ffb547;       /* raw / input signal */
  --c-blue:#71d4ff;        /* processed / output signal */
  --c-focus:#ffb547;       /* focus ring: 10:1 on --c-bg */
  /* buttons */
  --c-btn-bg:#eceee9; --c-btn-fg:#0c0e0d; --c-btn-hover:#ffb547;
  /* type */
  --c-display:"Archivo",system-ui,sans-serif;
  --c-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --c-mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --c-fs-display:clamp(48px,8.2vw,148px);
  --c-fs-h2:clamp(38px,5.2vw,84px);
  --c-fs-h3:clamp(24px,2.4vw,36px);
  --c-fs-lead:clamp(18px,1.5vw,21px);
  --c-fs-body:18px;
  --c-fs-small:16px;
  --c-fs-label:12px;
  /* space and grid */
  --c-gutter:40px;
  --c-max:1440px;
  --c-sec:112px;
  --c-gap:56px;
  --c-scope-h:300px;
}
.c-page.c-reading{
  --c-bg:#ebe9e4; --c-bg-2:#e2dfd9; --c-bg-3:#0c0e0d; --c-grid:#dedad3;
  --c-rule:#cdc9c1; --c-rule-2:#77736c;
  --c-fg:#151716; --c-text:#2b2f2c; --c-muted:#555b56;
  --c-amber:#9a5300; --c-blue:#075f8f; --c-focus:#075f8f;
  --c-btn-bg:#151716; --c-btn-fg:#ebe9e4; --c-btn-hover:#9a5300;
}
@media (max-width:900px){.c-page{--c-gutter:24px;--c-sec:80px;--c-gap:32px}}
@media (max-width:640px){.c-page{--c-gutter:16px;--c-sec:64px;--c-fs-body:17px;--c-scope-h:220px}}

/* ---------- 2. Base ---------- */
body.c-page{margin:0;background:var(--c-bg);color:var(--c-text);font:400 var(--c-fs-body)/1.6 var(--c-body);-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;overflow-x:hidden}
.c-page *,.c-page *::before,.c-page *::after{box-sizing:border-box}
:where(.c-page) :where(h1,h2,h3,h4){color:var(--c-fg);margin:0;font-family:var(--c-display);text-wrap:balance}
:where(.c-page) :where(p){margin:0 0 1em}
:where(.c-page) :where(a){color:var(--c-fg);text-decoration-thickness:1px;text-underline-offset:4px}
:where(.c-page) :where(a:hover){color:var(--c-amber)}
.c-page img,.c-page svg{max-width:100%}
.c-page :focus{outline:none}
.c-page :focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
.c-page ::selection{background:var(--c-amber);color:#0c0e0d}
.c-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.c-skip{position:fixed;top:-100px;left:110px;z-index:9999;background:var(--c-btn-bg);color:var(--c-btn-fg)!important;padding:12px 16px;font:600 15px/1 var(--c-body)}
.c-skip:focus{top:12px}
.c-mono{font-family:var(--c-mono)}
.c-amber{color:var(--c-amber)} .c-blue{color:var(--c-blue)}
@media (prefers-reduced-motion:reduce){.c-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* ---------- 3. Layout ---------- */
.c-wrap{width:100%;max-width:var(--c-max);margin:0 auto;padding:0 var(--c-gutter)}
.c-sec{padding:var(--c-sec) 0;border-bottom:1px solid var(--c-rule)}
.c-sec--alt{background:var(--c-bg-2)}
.c-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--c-gap)}
.c-split__head{position:sticky;top:32px;align-self:start}
@media (max-width:1000px){.c-split{grid-template-columns:1fr}.c-split__head{position:static}}

/* ---------- 4. Type ---------- */
.c-kicker{display:flex;gap:12px;align-items:baseline;font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted);margin:0 0 20px;letter-spacing:.02em}
.c-kicker .c-idx{color:var(--c-fg)}
.c-display{font:800 var(--c-fs-display)/.88 var(--c-display);font-stretch:62%;letter-spacing:-.005em;max-width:10em}
.c-display .c-accent{color:var(--c-amber)}
.c-h2{font:800 var(--c-fs-h2)/.92 var(--c-display);font-stretch:62%;max-width:14em}
.c-h3{font:700 var(--c-fs-h3)/1.05 var(--c-display);font-stretch:85%}
.c-lead{font-size:var(--c-fs-lead);line-height:1.55;color:var(--c-text);max-width:40em;margin:24px 0 0}
.c-head{margin-bottom:48px}
.c-note{font:400 13px/1.7 var(--c-mono);color:var(--c-muted);border-top:1px solid var(--c-rule);padding-top:16px;margin:32px 0 0;max-width:62em}
.c-prose{max-width:68ch;font-size:19px;line-height:1.7}
.c-prose h2{font:800 clamp(32px,3.6vw,52px)/1 var(--c-display);font-stretch:70%;margin:2em 0 .6em}
.c-prose h3{font:700 26px/1.15 var(--c-display);font-stretch:85%;margin:1.6em 0 .5em}
.c-prose p,.c-prose li{color:var(--c-text)}
.c-prose blockquote{margin:1.5em 0;padding-left:20px;border-left:3px solid var(--c-rule-2)}
.c-prose code{font:400 .85em var(--c-mono)}

/* ---------- 5. Buttons and links ---------- */
.c-btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:15px 22px;background:var(--c-btn-bg);color:var(--c-btn-fg)!important;font:600 15px/1.2 var(--c-display);font-stretch:110%;text-decoration:none;border:0;border-radius:0;cursor:pointer}
.c-btn:hover{background:var(--c-btn-hover);color:#0c0e0d!important}
.c-reading .c-btn:hover{color:#fff!important}
.c-btn--ghost{background:transparent;color:var(--c-fg)!important;box-shadow:inset 0 0 0 1px var(--c-rule-2)}
.c-btn--ghost:hover{background:transparent;color:var(--c-amber)!important;box-shadow:inset 0 0 0 1px var(--c-amber)}
.c-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.c-link{font:600 16px/1.4 var(--c-display);font-stretch:95%;color:var(--c-fg);text-decoration:underline;text-decoration-color:var(--c-rule-2);text-underline-offset:5px}
.c-link:hover{text-decoration-color:currentColor}
.c-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin:28px 0 0}

/* ---------- 6. Navigation ---------- */
.c-nav{position:relative;z-index:20;border-bottom:1px solid var(--c-rule);background:var(--c-bg)}
.c-nav__inner{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px}
.c-logo{font:800 22px/1 var(--c-display);font-stretch:125%;letter-spacing:.02em;text-decoration:none;color:var(--c-fg)!important}
.c-nav-links{display:flex;align-items:center;gap:28px;font:400 12px/1 var(--c-mono)}
.c-nav-links a{color:var(--c-muted);text-decoration:none;padding:8px 0}
.c-nav-links a[aria-current]{color:var(--c-fg);box-shadow:inset 0 -2px 0 var(--c-fg)}
.c-nav-links a:hover{color:var(--c-amber)}
.c-nav-links .c-btn{color:var(--c-btn-fg);padding:12px 16px;min-height:40px;font-size:14px}
.c-menu{display:none;min-height:44px;padding:0 16px;background:transparent;color:var(--c-fg);border:1px solid var(--c-rule-2);font:400 12px/1 var(--c-mono);cursor:pointer}
@media (max-width:900px){
  .c-menu{display:block}
  .c-nav-links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--c-gutter) 20px;background:var(--c-bg);border-bottom:1px solid var(--c-rule)}
  .c-nav-links.open{display:flex}
  .c-nav-links a{padding:14px 0;font-size:14px;border-bottom:1px solid var(--c-rule)}
  .c-nav-links a[aria-current]{box-shadow:none}
  .c-nav-links .c-btn{margin-top:16px;justify-content:center}
}
.c-crumb{font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted);margin:0 0 18px}
.c-crumb a{color:var(--c-muted)}

/* ---------- 7. Hero with live instrument ---------- */
.c-hero{position:relative;border-bottom:1px solid var(--c-rule);background:
  linear-gradient(var(--c-grid) 1px,transparent 1px) 0 0/64px 64px,
  linear-gradient(90deg,var(--c-grid) 1px,transparent 1px) 0 0/64px 64px,var(--c-bg)}
.c-instrument{display:grid;grid-template-columns:minmax(0,1fr) 340px;border-bottom:1px solid var(--c-rule)}
.c-screen{position:relative;height:var(--c-scope-h);background:rgba(7,9,8,.55);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;overflow:hidden}
.c-screen--y{cursor:ns-resize}
.c-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.c-legend{margin:0;padding:14px var(--c-gutter);font-size:var(--c-fs-small);line-height:1.55;color:var(--c-text);border-bottom:1px solid var(--c-rule);background:var(--c-bg)}
.c-legend b{font-weight:600}
.c-readout{padding:20px 24px;border-left:1px solid var(--c-rule);background:var(--c-bg-2);display:flex;flex-direction:column;justify-content:center}
.c-readout__title{font:400 var(--c-fs-label)/1.4 var(--c-mono);color:var(--c-muted);margin:0 0 14px;letter-spacing:.02em}
.c-readout dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.c-readout dl div{min-width:0}
.c-readout dt{font:400 11px/1.4 var(--c-mono);color:var(--c-muted)}
.c-readout dd{margin:2px 0 0;font:700 22px/1.1 var(--c-display);font-stretch:85%;color:var(--c-fg);font-variant-numeric:tabular-nums}
.c-readout .c-big dd{font-size:clamp(30px,2.6vw,40px);font-weight:800;font-stretch:75%}
.c-readout .c-raw dd{color:var(--c-amber)} .c-readout .c-out dd{color:var(--c-blue)}
.c-readout__note{font:400 11px/1.5 var(--c-mono);color:var(--c-muted);margin:14px 0 0}
@media (min-width:1001px){.c-instrument .c-screen{height:auto;min-height:var(--c-scope-h)}}
/* Instrument controls: native range inputs in the C look (keyboard and touch work natively). */
.c-ctls{display:grid;gap:2px;margin-top:12px;padding-top:10px;border-top:1px solid var(--c-rule)}
.c-ctl{display:grid;grid-template-columns:48px minmax(0,1fr) 62px;align-items:center;gap:10px;min-height:40px;font:400 12px/1 var(--c-mono)}
.c-ctl__name{color:var(--c-muted)}
.c-ctl__val{color:var(--c-fg);text-align:right;font-variant-numeric:tabular-nums}
.c-ctl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:36px;margin:0;background:transparent;cursor:pointer}
.c-ctl input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--c-rule-2)}
.c-ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:-9px;border-radius:50%;background:var(--c-fg);border:3px solid #0c0e0d;box-shadow:0 0 0 1px var(--c-fg)}
.c-ctl input[type=range]::-moz-range-track{height:2px;background:var(--c-rule-2)}
.c-ctl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--c-fg);border:3px solid #0c0e0d;box-shadow:0 0 0 1px var(--c-fg)}
.c-ctl input[type=range]:focus-visible{outline:none}
.c-ctl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #0c0e0d,0 0 0 5px var(--c-focus)}
.c-ctl input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #0c0e0d,0 0 0 5px var(--c-focus)}
.c-ctl:focus-within .c-ctl__name{color:var(--c-fg)}
.c-hero__copy{position:relative;padding-top:48px;padding-bottom:56px}
.c-hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;margin-top:32px;flex-wrap:wrap}
.c-hero__row p{margin:0;max-width:36em;font-size:var(--c-fs-lead);color:var(--c-text)}
.c-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:48px 0 0;border-top:1px solid var(--c-rule)}
.c-specs div{padding:16px 24px 0 0}
.c-specs dt{font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted)}
.c-specs dd{margin:6px 0 0;font:600 19px/1.3 var(--c-display);font-stretch:95%;color:var(--c-fg)}
.c-specs-title{font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted);margin:48px 0 0}
.c-specs-title+.c-specs{margin-top:12px}
.c-creds{margin:28px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 32px;font:400 var(--c-fs-label)/1.8 var(--c-mono);color:var(--c-muted)}
.c-creds li::before{content:"/ ";color:var(--c-fg)}
@media (max-width:1000px){
  .c-instrument{grid-template-columns:1fr}
  .c-readout{border-left:0;border-top:1px solid var(--c-rule)}
  .c-readout dl{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .c-readout{padding:12px 16px 14px}
  .c-readout__title{margin-bottom:8px}
  .c-readout dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}
  .c-readout dd{font-size:19px}
  .c-readout .c-big dd{font-size:26px}
  .c-readout .c-opt{display:none}
  .c-readout dt{font-size:10px}
  .c-ctl{min-height:44px;grid-template-columns:44px minmax(0,1fr) 58px}
  .c-legend{font-size:15px;padding:12px var(--c-gutter)}
  .c-hero__copy{padding-top:32px;padding-bottom:40px}
  .c-specs{grid-template-columns:1fr}
  .c-specs div{padding:12px 0;border-bottom:1px solid var(--c-rule)}
  .c-hero__row .c-btns{width:100%}
  .c-hero__row .c-btn{flex:1 1 100%;justify-content:center}
}

/* ---------- 8. Draggable handle on an instrument (added by mlaia-c.js) ---------- */
.c-handle{position:absolute;z-index:3;touch-action:none}
.c-handle--x{top:0;bottom:0;width:44px;margin-left:-22px;cursor:ew-resize}
.c-handle--y{left:0;right:0;height:44px;margin-top:-22px;cursor:ns-resize}
.c-handle__line{position:absolute;background:var(--c-fg);opacity:.75}
.c-handle--x .c-handle__line{top:0;bottom:0;left:21px;width:2px}
.c-handle--y .c-handle__line{left:0;right:0;top:21px;height:2px}
.c-handle__grip{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--c-fg);border:3px solid #0c0e0d;box-shadow:0 0 0 1px var(--c-fg)}
.c-handle__grip::before,.c-handle__grip::after{content:"";position:absolute;top:50%;left:50%;border:4px solid transparent}
.c-handle--x .c-handle__grip{left:7px;bottom:22%}
.c-handle--x .c-handle__grip::before{border-right:5px solid #0c0e0d;transform:translate(-11px,-50%)}
.c-handle--x .c-handle__grip::after{border-left:5px solid #0c0e0d;transform:translate(2px,-50%)}
.c-handle--y .c-handle__grip{top:7px;left:20px}
.c-handle--y .c-handle__grip::before{border-bottom:5px solid #0c0e0d;transform:translate(-50%,-11px)}
.c-handle--y .c-handle__grip::after{border-top:5px solid #0c0e0d;transform:translate(-50%,2px)}
.c-handle__chip{position:absolute;white-space:nowrap;padding:6px 10px;background:var(--c-fg);color:#0c0e0d;font:500 12px/1 var(--c-mono);pointer-events:none}
.c-handle--x .c-handle__chip{top:14px;left:22px}
.c-handle--y .c-handle__chip{left:60px;top:22px;transform:translateY(-50%)}
.c-handle:focus-visible{outline:none}
.c-handle:focus-visible .c-handle__grip{outline:3px solid var(--c-focus);outline-offset:3px}
.c-handle:focus-visible .c-handle__chip{box-shadow:0 0 0 3px var(--c-focus)}

/* ---------- 9. Application rows with a live trace ---------- */
.c-apps{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-rule)}
.c-app{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(200px,300px);gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--c-rule);color:inherit!important;text-decoration:none}
.c-app__num{font:400 var(--c-fs-label)/1 var(--c-mono);color:var(--c-muted);align-self:start;padding-top:10px}
.c-app h3{font:700 clamp(26px,2.6vw,40px)/1.02 var(--c-display);font-stretch:85%;margin:0 0 10px}
.c-app p{margin:0;color:var(--c-text);max-width:36em}
.c-app__go{display:inline-block;margin-top:10px;font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted)}
a.c-app:hover h3,a.c-app:hover .c-app__go{color:var(--c-amber)}
.c-trace{display:block;width:100%;height:96px;background:var(--c-bg-3);border:1px solid var(--c-rule)}
@media (max-width:760px){
  .c-app{grid-template-columns:1fr;gap:12px;padding:24px 0}
  .c-app__num{padding:0}
  .c-trace{height:72px}
}

/* ---------- 10. Lab teaser (spectrogram) and link tiles ---------- */
.c-lab{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:1px solid var(--c-rule)}
.c-lab__vis{display:flex;flex-direction:column;border-right:1px solid var(--c-rule);background:var(--c-bg-3);min-width:0}
.c-lab__vis .c-screen{flex:1;height:auto;min-height:400px;background:var(--c-bg-3)}
.c-lab__vis .c-legend{background:var(--c-bg-3);border-bottom:0;border-top:1px solid var(--c-rule);padding:14px 20px}
.c-screen__label{position:absolute;left:14px;top:12px;z-index:2;font:400 11px/1.6 var(--c-mono);color:var(--c-muted);background:rgba(7,9,8,.8);padding:2px 6px;pointer-events:none}
.c-screen__label b{color:var(--c-fg);font-weight:500}
.c-lab__txt{padding:40px}
.c-lab__txt .c-lead{margin-bottom:28px}
@media (max-width:1000px){
  .c-lab{grid-template-columns:1fr}
  .c-lab__vis{border-right:0;border-bottom:1px solid var(--c-rule)}
  .c-lab__vis .c-screen{min-height:280px}
  .c-lab__txt{padding:28px var(--c-gutter)}
}
.c-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-rule);border-left:1px solid var(--c-rule);margin-top:48px}
.c-tile{display:block;padding:24px;border-right:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);text-decoration:none;color:inherit!important}
.c-tile small{display:block;font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted);margin-bottom:12px}
.c-tile strong{display:block;font:700 23px/1.12 var(--c-display);font-stretch:88%;color:var(--c-fg);margin-bottom:8px}
.c-tile > span{display:block;font-size:var(--c-fs-small);line-height:1.55;color:var(--c-text)}
a.c-tile:hover{background:var(--c-bg-2)}
a.c-tile:hover strong{color:var(--c-amber)}
@media (max-width:1000px){.c-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.c-tiles{grid-template-columns:1fr}}

/* ---------- 11. Callout and numbered cells ---------- */
.c-callout{display:grid;grid-template-columns:1fr 1fr;gap:24px 56px;margin-top:48px;padding:40px;background:var(--c-bg-2);border:1px solid var(--c-rule)}
.c-callout h3{font:800 clamp(28px,3vw,46px)/1 var(--c-display);font-stretch:70%;margin:0 0 18px}
.c-callout p{color:var(--c-text)}
@media (max-width:900px){.c-callout{grid-template-columns:1fr;padding:28px var(--c-gutter)}}
.c-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--c-rule);border-left:1px solid var(--c-rule)}
.c-cell{padding:28px;border-right:1px solid var(--c-rule);border-bottom:1px solid var(--c-rule);display:flex;flex-direction:column}
.c-cell__num{font:400 var(--c-fs-label)/1 var(--c-mono);color:var(--c-muted);margin-bottom:28px}
.c-cell h3{font:700 24px/1.1 var(--c-display);font-stretch:88%;margin:0 0 12px}
.c-cell p{font-size:var(--c-fs-small);line-height:1.6;color:var(--c-text)}
.c-cell .c-link{margin-top:auto;padding-top:8px}
.c-cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.c-cells--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.c-cells,.c-cells--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.c-cells,.c-cells--4,.c-cells--2{grid-template-columns:1fr}.c-cell{padding:22px 0;border-right:0}.c-cells{border-left:0}}

/* ---------- 12. Records (case studies) ---------- */
.c-record{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--c-gap);padding:56px 0;border-top:1px solid var(--c-rule)}
.c-record__big{font:800 clamp(56px,8vw,136px)/.86 var(--c-display);font-stretch:62%;margin:0 0 20px;color:transparent;-webkit-text-stroke:1.2px var(--c-muted);overflow-wrap:anywhere}
.c-record__big--fill{color:var(--c-fg);-webkit-text-stroke:0}
.c-record__who{font:400 var(--c-fs-label)/1.8 var(--c-mono);color:var(--c-muted);margin:0 0 20px}
.c-record h3{font:700 clamp(24px,2.2vw,32px)/1.1 var(--c-display);font-stretch:85%;margin:0 0 14px}
.c-record__outcome{margin-top:20px;padding-top:16px;border-top:1px solid var(--c-rule)}
.c-record__outcome strong{color:var(--c-fg)}
.c-facts h4{font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-muted);margin:0 0 8px;letter-spacing:.02em}
.c-facts p{margin:0 0 28px}
.c-facts p:last-child{margin-bottom:0}
@media (max-width:900px){.c-record{grid-template-columns:1fr;padding:40px 0}}

/* ---------- 13. Quotes ---------- */
.c-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px}
.c-quote{margin:0;padding-top:24px;border-top:2px solid var(--c-fg)}
.c-quote p{font:500 clamp(20px,1.7vw,24px)/1.35 var(--c-display);font-stretch:95%;color:var(--c-fg);margin:0 0 18px}
.c-quote cite{display:block;font:400 var(--c-fs-label)/1.7 var(--c-mono);font-style:normal;color:var(--c-muted)}

/* ---------- 14. Chips, steps ---------- */
.c-chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:40px 0 0;padding:24px 0 0;border-top:1px solid var(--c-rule)}
.c-chips strong{font:400 var(--c-fs-label)/1.5 var(--c-mono);color:var(--c-fg);margin-right:8px}
.c-chips span{font:400 var(--c-fs-label)/1 var(--c-mono);color:var(--c-text);padding:9px 12px;border:1px solid var(--c-rule-2)}
.c-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--c-rule)}
.c-step{padding:28px 28px 0 0}
.c-step+.c-step{padding-left:28px;border-left:1px solid var(--c-rule)}
.c-step__num{display:block;font:800 72px/.9 var(--c-display);font-stretch:62%;color:transparent;-webkit-text-stroke:1.2px var(--c-muted);margin-bottom:20px}
.c-step h3{font:700 23px/1.12 var(--c-display);font-stretch:88%;margin:0 0 12px}
.c-step p{font-size:var(--c-fs-small);color:var(--c-text)}
@media (max-width:900px){.c-steps{grid-template-columns:1fr 1fr}.c-step:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:640px){.c-steps{grid-template-columns:1fr}.c-step,.c-step+.c-step{padding:24px 0;border-left:0;border-bottom:1px solid var(--c-rule)}}

/* ---------- 15. FAQ ---------- */
.c-faq{max-width:980px}
.c-faq details{border-top:1px solid var(--c-rule)}
.c-faq details:last-of-type{border-bottom:1px solid var(--c-rule)}
.c-faq summary{display:flex;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font:600 clamp(19px,1.7vw,24px)/1.25 var(--c-display);font-stretch:92%;color:var(--c-fg)}
.c-faq summary::-webkit-details-marker{display:none}
.c-faq summary::after{content:"+";font:400 20px/1 var(--c-mono);color:var(--c-muted);flex:none}
.c-faq details[open] summary::after{content:"\2212"}
.c-faq summary:hover{color:var(--c-amber)}
.c-faq details p{max-width:62em;margin:0 0 24px;color:var(--c-text)}

/* ---------- 16. Contact and form ---------- */
.c-contact{background:var(--c-bg-2);padding:var(--c-sec) 0;border-bottom:1px solid var(--c-rule);scroll-margin-top:0}
.c-contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--c-gap)}
.c-contact h2{overflow-wrap:break-word}
.c-contact__copy p{color:var(--c-text);max-width:34em}
.c-contact__copy .c-h2{margin-bottom:28px}
.c-form{display:grid;gap:18px;align-content:start}
.c-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.c-form label{display:grid;gap:8px;font:400 var(--c-fs-label)/1.4 var(--c-mono);color:var(--c-fg)}
.c-form input,.c-form textarea{width:100%;min-width:0;padding:13px 14px;background:var(--c-bg);color:var(--c-fg);border:1px solid var(--c-rule-2);border-radius:0;font:400 16px/1.4 var(--c-body)}
.c-form textarea{min-height:130px;resize:vertical}
.c-form input:focus-visible,.c-form textarea:focus-visible{outline:3px solid var(--c-focus);outline-offset:1px;border-color:var(--c-fg)}
.c-form .c-btn{justify-self:start}
.c-form p{font-size:14px;margin:0;color:var(--c-text)}
.c-form button:disabled{opacity:.6;cursor:wait}
@media (max-width:900px){.c-contact__grid{grid-template-columns:1fr}}
@media (max-width:640px){.c-form__row{grid-template-columns:1fr}.c-form .c-btn{justify-self:stretch;justify-content:center}}

/* ---------- 17. Footer and consent ---------- */
.c-footer{padding:28px 0 36px;font:400 var(--c-fs-label)/1.8 var(--c-mono);color:var(--c-muted)}
.c-footer .c-wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px}
.c-footer nav{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.c-footer a,.c-footer button{color:var(--c-muted);font:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.c-footer a:hover,.c-footer button:hover{color:var(--c-fg)}
.c-consent{position:fixed;z-index:1150;left:124px;bottom:24px;width:min(480px,calc(100% - 148px));padding:20px;background:var(--c-bg-2);color:var(--c-text);border:1px solid var(--c-rule-2);box-shadow:0 16px 48px rgba(0,0,0,.5)}
.c-consent[hidden]{display:none}
.c-consent p{margin:0 0 14px;font-size:15px}
.c-consent .c-btn{min-height:44px;padding:12px 16px;font-size:14px}
@media (max-width:900px){.c-consent{left:16px;right:16px;width:auto}}

/* ---------- 18. Site shell (quick nav) in this theme, this body class only ---------- */
body.c-page .site-quick-nav{background:var(--c-bg)!important;border-right:1px solid var(--c-rule);font-family:var(--c-display)}
body.c-page .site-quick-nav a{color:var(--c-fg)!important;border-radius:0}
body.c-page .site-quick-nav a:hover{background:var(--c-bg-2)}
body.c-page .site-quick-nav .site-contact-link{background:var(--c-btn-bg);color:var(--c-btn-fg)!important}
body.c-page .site-quick-nav .site-contact-link:hover{background:var(--c-btn-hover);color:#0c0e0d!important}
body.c-page .site-quick-nav a:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px}
@media (max-width:900px){body.c-page .site-quick-nav{border-right:0;border-top:1px solid var(--c-rule)}}
.c-specs-title+.c-creds{margin-top:12px}

/* ---------- 19. Collapsible instrument extras (button[data-c-collapse], mlaia-c.js) ---------- */
.c-more dl{margin-top:14px}
.c-more[hidden]{display:none}
.c-more-toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 var(--c-gutter);background:var(--c-bg);color:var(--c-fg);border:0;border-bottom:1px solid var(--c-rule);font:500 13px/1 var(--c-mono);text-align:left;cursor:pointer}
.c-more-toggle[hidden]{display:none}
.c-more-toggle:hover{color:var(--c-amber)}
.c-more-toggle:focus-visible{outline-offset:-3px}
.c-more-toggle__icon{display:inline-block;font-size:16px}
.c-more-toggle[aria-expanded="true"] .c-more-toggle__icon{transform:rotate(180deg)}
@media (max-width:700px){
  .c-hero{display:flex;flex-direction:column}
  .c-hero>.c-instrument,.c-hero .c-readout{display:contents}
  .c-hero .c-screen{order:1}
  .c-hero .c-readout__head{order:2;padding:10px var(--c-gutter) 12px;background:var(--c-bg-2);border-top:1px solid var(--c-rule)}
  .c-hero .c-readout__head dl{grid-template-columns:1fr 1fr}
  .c-hero>.c-legend{order:3}
  .c-hero>.c-more-toggle{order:4}
  .c-hero .c-more{order:5;padding:0 var(--c-gutter) 16px;background:var(--c-bg-2);border-bottom:1px solid var(--c-rule)}
  .c-hero .c-more dl{margin-top:12px;grid-template-columns:1fr 1fr}
  .c-hero>.c-hero__copy{order:6;padding-top:20px}
  .c-hero .c-crumb{margin-bottom:12px}
  .c-hero>.c-legend{font-size:14px;padding-top:10px;padding-bottom:10px}
}