/* thequietai.com — build pages. GENERATED by _build/build.py. Do not hand-edit.
   Palette, type and spacing are the root's, verbatim: these are the same brand surface,
   one level down. The only per-page variable is --a, the industry accent. */
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces.woff2") format("woff2");
  font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-400.woff2") format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-500.woff2") format("woff2");
  font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-800.woff2") format("woff2");
  font-weight:800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight:400;font-display:swap}
:root{
  --page:#101017; --ground:#171720; --raise:#1e1e29; --line:#2e2e3c;
  --ink:#f4f2ee;  --muted:#a49fa8; --lit:#dcae74; --ochre:#c0884a;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --pad:clamp(16px,3.4vw,34px);
  --a:#dcae74;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);
     line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
/* ⛔ DO NOT REMOVE — the same declaration the root carries, for the same reason. Its
   absence caused a sitewide 70% aspect error at 390px (prod 6a7dab7e15d1061281d24ff7,
   2026-08-13): max-width:100% shrank the width while the height attribute kept pinning
   the height. These pages carry width/height attributes too. */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:760px;margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--lit);color:#12100c;padding:9px 14px;
  border-radius:8px;font-family:var(--mono);font-size:12px}

.nav{border-bottom:1px solid var(--line);background:var(--page);position:sticky;top:0;z-index:40}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:15px;
  max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.mark{font-family:var(--serif);font-size:18px;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.mark i{color:var(--lit);font-style:normal;font-weight:600}
.nav-links{display:flex;gap:22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--lit)}
.nav-cta{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--lit);color:#12100c;border-radius:999px;padding:9px 15px;font-weight:600;
  text-decoration:none;white-space:nowrap}
@media(max-width:760px){.nav-links{display:none}}

/* ── slot 1 · name + one sentence ─────────────────────────────────────────────── */
.bp-head{padding-block:clamp(30px,5vw,54px) clamp(18px,2.4vw,26px);position:relative}
.bp-head::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--a);
  opacity:.34}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--a)}
.crumb .sep{opacity:.5;margin:0 8px}
.bp h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.04;
  letter-spacing:-.02em;margin:0 0 14px}
.bp .lede{color:var(--muted);font-size:17px;margin:0;max-width:46ch}

/* ── slots 2–5 ────────────────────────────────────────────────────────────────── */
.bp-sec{padding-block:clamp(22px,3vw,30px)}
.bp-k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;font-weight:400}
.bp-sec p{margin:0;font-size:16.5px;line-height:1.62;max-width:60ch}
.steps{margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:38px;margin:0 0 14px;
  font-size:16.5px;line-height:1.6;max-width:58ch}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:24px;height:24px;
  border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--mono);font-size:11px;color:var(--a)}

/* slot 4 — the honest core of the page. It gets the accent rule, and it is the only
   place on a build page that carries one. */
.bp-stop{padding-block:clamp(22px,3vw,30px)}
.bp-stop .stop{margin:0;font-size:16.5px;line-height:1.62;max-width:58ch;
  border-left:2px solid var(--a);padding-left:16px}
.bp-stop .stop em{color:var(--ink);font-style:italic}

/* slot 5 — film, else capture, else the band-coloured hatch. The hatch is the backdrop in
   all three states, so a slow, failed or absent picture still reads as a designed slot
   rather than a hole. Two builds have no capture commissioned yet; this is what they show.

   ⛔ SEE-IT WIDTH IS CAPPED, AND THE CAP IS THE WHOLE POINT — 2026-08-22, ROOT-V3-4b9d02.
      MEASURED, not guessed: 21 of the 28 wired captures carry barred plumbing words BURNED
      INTO PIXELS — "Claude" in 11, "the folder" in 8, "ICM" and "orchestration" in one each
      — where no text sweep can ever reach them. OCR over every capture at each rendered
      size gives the scale at which they become legible:
          root tile, 295px wide ...  0 captures legible   ← the approved, wired state
          mobile thumb,  92px ......  0 captures legible
          340px ....................  3 captures legible
          460px .................... 12 hits across 7 captures
          690px .................... 25 hits across 15 captures  ← an unconstrained slot
      So the ROOT is clean at the size it actually paints, and a full-width "See it" slot on
      a build page would have been the surface that made all of it readable. 295px is the
      one scale the operator has already approved and shipped.
   ⚠️ THIS IS MITIGATION, NOT COMPLIANCE, and it must not be reported as a fix: the file
      served is still the full 900px capture, so zoom or "open image in new tab" shows every
      word. Only a re-cut, or a ruling that these are PRODUCT surfaces (which would license
      the 2026-08-13 dependency-disclosure carve-out), actually closes it. Both are somebody
      else's call. Raised in the v3 return's first line. */
.shot{margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--ground) 0 8px,var(--page) 8px 16px);
  aspect-ratio:900/347;max-width:295px}
.shot img,.shot video{width:100%;height:100%;object-fit:cover;object-position:center bottom}

/* ── slots 6–7 ────────────────────────────────────────────────────────────────── */
.bp-try{padding-block:clamp(26px,3.4vw,36px);border-top:1px solid var(--line);
  margin-top:clamp(18px,2.4vw,26px)}
.bp-try .go{display:inline-block}
.tryline{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:14px 0 0}
.bp-back{padding-block:0 clamp(34px,5vw,60px);font-family:var(--mono);font-size:11.5px;
  letter-spacing:.06em}
.bp-back a{color:var(--muted);text-decoration:none}
.bp-back a:hover{color:var(--lit)}

footer{border-top:1px solid var(--line);padding-block:24px;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;max-width:1180px;
  margin:0 auto;padding-inline:var(--pad);font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.foot-in a{color:var(--muted);text-decoration:none}
.foot-in a:hover{color:var(--lit)}
.foot-in .sp{margin-left:auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}