/* AirFexLABS — v2
   Enterprise scale, old sobriety: large type, one idea per band, near-monochrome with one accent.
   One appearance, declared. No prefers-color-scheme, no [data-theme].
   Zero third-party requests. Zero JavaScript. Zero border-radius. Zero box-shadow. */

/* ---------- fonts: self-hosted, no external request ---------- */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Contrast measured with the WCAG formula against the background each token is used on. */
  --ink:#0E1A2B;          /* text; hero and closing background. 16.2:1 on paper */
  --paper:#F7F6F2;        /* page */
  --paper-2:#ECEAE3;      /* alternate bands. 14.5:1 with ink */
  --ink-2:#4A5562;        /* secondary text. 7.0:1 on paper */
  --action:#1F5FAD;       /* links and buttons, never --accent. 5.9:1 on paper */
  --action-hover:#174A87;
  --accent:#8A5A12;       /* "this was measured" on light. 5.5:1 */
  --accent-on-dark:#D9A441; /* the same on ink. 7.8:1 */
  --on-dark:#F7F6F2;      /* text on ink. 16.2:1 */
  --muted-on-dark:#A9B4C0;/* secondary text on ink. 8.3:1 */
  --rule:#DAD7CE;         /* decoration only: 1.33:1, never a border that carries meaning */
  --rule-dark:#2A3A50;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --section-y:clamp(64px,9vw,120px);
  --container:1200px;
  --pad-x:clamp(16px,5vw,40px);

  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-h1:clamp(38px,6vw,64px);
  --t-h2:clamp(28px,3.6vw,40px);
  --t-h3:21px;
  --t-lede:clamp(19px,1.8vw,22px);
  --t-body:18px;
  --t-small:15px;
  --t-label:12px;
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2);max-inline-size:22ch}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em}
p{margin:0}
a{color:var(--action);text-underline-offset:3px}
a:hover{color:var(--action-hover)}
:focus-visible{outline:2px solid var(--action);outline-offset:3px}

.container{max-inline-size:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.prose{max-inline-size:62ch;color:var(--ink-2)}
section{padding-block:var(--section-y);scroll-margin-top:72px}
section h2 + .prose{margin-block-start:var(--s5)}
.band{background:var(--paper-2)}

/* The small uppercase label above a headline: the scale contrast is what reads as enterprise. */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-block-end:var(--s4)}

/* ---------- header ---------- */
.masthead{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s3) var(--s6);padding-block:var(--s4)}
.wordmark{display:inline-flex;align-items:center;gap:var(--s2);font-weight:600;font-size:19px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.wordmark:hover{color:var(--ink)}
.mark{inline-size:10px;block-size:10px;background:var(--accent-on-dark)}
.labs{font-family:var(--mono);font-weight:500;font-size:.78em;letter-spacing:.12em;margin-inline-start:2px}
.nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin-inline-start:auto}
.nav a{font-size:var(--t-small);color:var(--ink);text-decoration:none}
.nav a:hover{color:var(--action)}
.nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.langs{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-2)}
.langs a{color:var(--ink-2)}

/* ---------- buttons: --action only ---------- */
.btn{display:inline-block;background:var(--action);color:#fff;font-weight:600;font-size:var(--t-small);
  padding:14px 22px;text-decoration:none;border:1px solid var(--action)}
.btn:hover{background:var(--action-hover);border-color:var(--action-hover);color:#fff}
.btn-small{padding:8px 14px}
.btn-ghost{background:transparent;color:var(--on-dark);border-color:var(--muted-on-dark)}
.btn-ghost:hover{background:transparent;color:var(--on-dark);border-color:var(--on-dark)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin-block-start:var(--s7)}

/* ---------- hero and closing: the two dark bands ---------- */
.hero,.closing{background:var(--ink);color:var(--on-dark)}
.hero .eyebrow{color:var(--muted-on-dark)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--muted-on-dark);max-inline-size:44ch;
  margin-block-start:var(--s6)}
.hero-art{inline-size:100%;block-size:auto}
.link{fill:none;stroke:var(--rule-dark);stroke-width:1.5}
.node{fill:var(--ink);stroke:var(--muted-on-dark);stroke-width:1.5}
.node-earn{fill:var(--accent-on-dark)}
.art-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;fill:var(--muted-on-dark)}
.art-sub{font-family:var(--mono);font-size:11px;fill:var(--accent-on-dark)}
.zoombox{fill:none;stroke:var(--accent-on-dark);stroke-width:1.5}
.guide{fill:none;stroke:var(--accent-on-dark);stroke-width:1;stroke-dasharray:3 3}
.frame{fill:#0A1320;stroke:var(--muted-on-dark);stroke-width:1}
.bar{fill:var(--muted-on-dark)}
.bar-earn{fill:var(--accent-on-dark)}
.closing h2{max-inline-size:24ch}
.slogan{font-family:var(--mono);font-weight:500;font-size:var(--t-small);letter-spacing:.08em;
  color:var(--accent-on-dark);margin-block-start:var(--s6)}
.definition{max-inline-size:62ch;border-left:2px solid var(--ink);padding-inline-start:var(--s4);
  margin-block-start:var(--s5)}

/* ---------- two-column band: headline left, text right ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:start}
.split > .prose{margin-block-start:0}

/* ---------- numbered steps ---------- */
.steps{list-style:none;padding:0;margin:var(--s7) 0 var(--s6);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.steps li{border-top:2px solid var(--ink);padding-block-start:var(--s5)}
.steps p{color:var(--ink-2);margin-block-start:var(--s3)}
.eyebrow-sub{margin-block-start:var(--s8)}
.step-key{font-family:var(--mono);font-weight:500;font-size:var(--t-small);letter-spacing:.06em;
  text-transform:uppercase}

/* ---------- applications ---------- */
.areas{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s6);margin-block-start:var(--s7)}
.area{border:1px solid var(--ink);padding:var(--s6)}
.area p{color:var(--ink-2);margin-block-start:var(--s4)}
.area-main{background:var(--ink);color:var(--on-dark)}
.area-main p{color:var(--muted-on-dark)}
.more{font-weight:600;font-size:var(--t-small);margin-block-start:var(--s5)}
.area-main .more a{color:var(--on-dark)}

/* ---------- points grid ---------- */
.points{list-style:none;padding:0;margin:var(--s7) 0 0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6)}
.points li{border-top:1px solid var(--ink);padding-block-start:var(--s5)}
.points h3{font-size:18px}
.points p{color:var(--ink-2);font-size:var(--t-small);margin-block-start:var(--s3)}

/* ---------- Moore's law chart: the one figure on the page, so it carries its stamp ---------- */
.moore{margin:0}
.moore svg{inline-size:100%;block-size:auto}
.axis{fill:none;stroke:var(--ink-2);stroke-width:1}
.grid{stroke:var(--rule)}
.axis-text{font-family:var(--mono);font-size:11px;fill:var(--ink-2)}
.trend{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 4}
.dot{fill:var(--accent)}
.figure{font-weight:600;font-size:var(--t-h3);line-height:1.3;margin-block-start:var(--s5)}
.stamp{font-family:var(--mono);font-size:var(--t-label);color:var(--ink-2);margin-block-start:var(--s3)}

/* ---------- method: the layer stack ---------- */
.layers{inline-size:100%;max-inline-size:720px;block-size:auto;margin-block:var(--s7) var(--s6);display:block}
.layer rect{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.layer text{font-family:var(--mono);font-size:13px;fill:var(--ink)}
.layer-ours rect{fill:var(--ink)}
.layer-ours text{fill:var(--on-dark)}

/* ---------- a block that is vision, not product: it must say so before it says anything else ---------- */
.vision{display:inline-block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--ink);padding:var(--s1) var(--s3);margin-block:var(--s5) 0}

/* ---------- 404: a traceroute that never arrives ---------- */
.terminal{font-family:var(--mono);font-size:var(--t-small);line-height:1.7;color:var(--muted-on-dark);
  background:#0A1320;border:1px solid var(--rule-dark);padding:var(--s5);margin:var(--s7) 0 0;
  overflow-x:auto;max-inline-size:62ch}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:var(--muted-on-dark);font-size:var(--t-small);
  border-top:1px solid var(--rule-dark)}
.footer .bar{justify-content:space-between;padding-block:var(--s6)}
.wordmark-quiet,.wordmark-quiet:hover{color:var(--on-dark)}
.footer-tag{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.04em}
.footer-nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.footer-nav a{color:var(--muted-on-dark)}
.footer-nav a:hover{color:var(--on-dark)}
.colophon{font-family:var(--mono);font-size:var(--t-label);padding-block:0 var(--s6)}
.colophon code{color:var(--on-dark)}

/* ---------- narrow screens ---------- */
@media (max-width:900px){
  .hero-grid,.split,.areas{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-art{max-inline-size:320px}
}
@media (max-width:600px){
  .masthead{position:static}
  .nav{margin-inline-start:0;order:3;inline-size:100%}
  .masthead .btn-small{display:none}
  .points{grid-template-columns:minmax(0,1fr)}
  .area{padding:var(--s5)}
}