:root{--ink:#090907;--carbon:#13120f;--paper:#f3f0e8;--paper2:#e8e2d4;--white:#fffdf6;--gold:#d3a94f;--gold2:#f0d77a;--gold3:#8a6725;--muted:#706a5c;--line:rgba(39,32,18,.16);--lined:rgba(240,215,122,.17);--sans:"Avenir Next","Helvetica Neue",Arial,sans-serif;--body:"Helvetica Neue","Segoe UI",Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit}img{display:block;max-width:100%}::selection{background:var(--gold);color:var(--ink)}:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}.skip-link{position:fixed;z-index:100;top:10px;left:10px;padding:9px 13px;color:var(--ink);background:var(--white);transform:translateY(-150%)}.skip-link:focus{transform:none}
.dev-header{position:fixed;z-index:50;inset:0 0 auto;height:76px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;color:var(--white);border-bottom:1px solid rgba(255,255,255,.11);transition:background .18s,height .18s}.dev-header.is-scrolled{height:64px;background:rgba(9,9,7,.95);backdrop-filter:blur(16px)}.dev-brand{display:flex;align-items:center;gap:0;color:var(--gold);text-decoration:none;font:400 20px/1 var(--sans);letter-spacing:-.035em}.dev-brand img{width:30px;height:30px}.dev-header nav{display:flex;align-items:center;gap:clamp(17px,2.4vw,34px)}.dev-header nav a{color:#aaa69d;text-decoration:none;font-size:13px;font-weight:650}.dev-header nav a:hover{color:var(--white)}.dev-header .source-link{padding:12px 16px;color:var(--ink);background:var(--gold);border-radius:0}.dev-header .source-link:hover{color:var(--ink);background:var(--gold2)}.dev-header .source-link span{margin-left:7px}
.dev-hero{min-height:840px;position:relative;overflow:hidden;padding:142px clamp(20px,6vw,96px) 80px;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.74fr);gap:8vw;align-items:center;color:var(--white);background:radial-gradient(circle at 84% 20%,rgba(211,169,79,.13),transparent 29%),var(--ink)}.dev-grid{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(rgba(211,169,79,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(211,169,79,.05) 1px,transparent 1px);background-size:66px 66px;mask-image:linear-gradient(#000,transparent)}.hero-copy,.system-map{position:relative;z-index:1}.eyebrow,.section-head>p,.section-head>div>p,.operate-copy>p,.dev-closing>p{margin:0 0 21px;color:var(--gold);font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.58)}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(211,169,79,.11)}.hero-copy h1{margin:0;font-family:var(--sans);font-size:clamp(52px,6.2vw,94px);font-weight:450;line-height:.94;letter-spacing:-.065em}.hero-copy h1 em{color:var(--gold);font-style:normal}.hero-copy>p:not(.eyebrow){max-width:680px;margin:28px 0 0;color:rgba(255,255,255,.58);font-size:16px;line-height:1.7}.hero-actions,.dev-closing>div{display:flex;flex-wrap:wrap;gap:11px;margin-top:31px}.button{min-height:50px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:24px;border:1px solid transparent;border-radius:0;text-decoration:none;font-size:13px;font-weight:750;transition:transform .2s ease,background .2s ease}.button.primary{color:var(--ink);background:var(--gold)}.button.primary:hover{background:var(--gold2)}.button.secondary{color:var(--white);border-color:rgba(255,255,255,.22)}
.system-map{overflow:hidden;border:1px solid rgba(211,169,79,.28);border-radius:0;background:#17150f;box-shadow:0 35px 90px rgba(0,0,0,.34)}.map-head{height:50px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--lined);color:var(--gold);font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em}.map-head i{color:rgba(255,255,255,.3);font-style:normal}.map-lane,.map-core{position:relative;padding:40px 16px 15px;display:grid;gap:7px}.map-lane{grid-template-columns:repeat(3,1fr)}.map-lane b,.map-core>div{padding:10px;border:1px solid rgba(255,255,255,.1);border-radius:0;color:rgba(255,255,255,.7);background:rgba(255,255,255,.025);font-size:9.5px}.lane-label{position:absolute;top:14px;left:16px;color:rgba(255,255,255,.32);font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.11em}.map-arrow{text-align:center;color:var(--gold);font-family:var(--mono);font-size:12px}.map-core{grid-template-columns:repeat(2,1fr);margin:0 16px;border:1px solid rgba(211,169,79,.25);border-radius:0;background:rgba(211,169,79,.045)}.map-core b,.map-core small{display:block}.map-core small{margin-top:2px;color:rgba(255,255,255,.3);font-size:9.5px;font-weight:400}
.section-pad{padding:clamp(90px,9vw,145px) clamp(20px,6vw,96px)}.section-head{display:grid;grid-template-columns:1fr minmax(300px,.55fr);gap:8vw;align-items:end}.section-head>p{grid-column:1/-1;margin-bottom:-4vw;color:var(--gold3)}.section-head h2,.operate h2,.dev-closing h2{margin:0;font-family:var(--sans);font-size:clamp(44px,5.2vw,80px);font-weight:450;line-height:.98;letter-spacing:-.055em}.section-head.split>div>p{color:var(--gold3)}.section-head.split>p{grid-column:auto;margin:0;color:var(--muted);font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.7;letter-spacing:0;text-transform:none}
.start{background:var(--paper)}.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:68px}.path-grid a{min-height:0;padding:26px 24px 24px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:0;background:rgba(255,253,246,.68);text-decoration:none;transition:transform .16s,border-color .16s}.path-grid a:hover{transform:translateY(-4px);border-color:var(--gold)}.path-grid span,.operate-grid span{color:var(--gold3);font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em}.path-grid h3{margin:14px 0 12px;font-size:clamp(22px,1.9vw,30px);font-weight:450;line-height:1.12;letter-spacing:-.035em}.path-grid p{margin:0 0 22px;color:var(--muted);font-size:13px;line-height:1.55}.path-grid i{margin-top:auto;color:var(--gold3);font-family:var(--mono);font-size:10px;font-style:normal;text-transform:uppercase;letter-spacing:.07em}
.architecture{background:var(--white)}.reference-list{margin-top:70px;border-top:1px solid var(--line)}.reference-list a{min-height:126px;padding:22px 0;display:grid;grid-template-columns:55px 1fr auto;gap:20px;align-items:center;border-bottom:1px solid var(--line);text-decoration:none}.reference-list>a>span{color:var(--gold3);font-family:var(--mono);font-size:9.5px}.reference-list b,.reference-list small{display:block}.reference-list b{font-size:18px}.reference-list small{max-width:700px;margin-top:5px;color:var(--muted);font-size:10px}.reference-list i{color:var(--gold3);font-family:var(--mono);font-size:9.5px;font-style:normal;text-transform:uppercase}.reference-list a:hover b{color:var(--gold3)}
.operate{color:var(--white);background:#100f0c}.operate-copy{display:grid;grid-template-columns:1fr .95fr;gap:8vw;align-items:end}.operate-copy>p{grid-column:1/-1;margin-bottom:-4vw}.operate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:65px}.operate-grid a{min-height:260px;padding:28px;display:flex;flex-direction:column;border:1px solid var(--lined);border-radius:0;background:rgba(211,169,79,.03);text-decoration:none}.operate-grid b{margin:auto 0 10px;font-size:24px}.operate-grid p{margin:0;color:rgba(255,255,255,.42);font-size:10px;line-height:1.6}.operate-grid a:hover{background:rgba(211,169,79,.065)}
.dev-closing{min-height:620px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--white);background:var(--ink)}.dev-closing>img{position:absolute;width:min(52vw,570px);opacity:.05}.dev-closing>p,.dev-closing h2,.dev-closing>div{position:relative;z-index:1}.dev-closing h2{max-width:900px}.dev-closing>div{justify-content:center}.dev-footer{min-height:130px;padding:28px clamp(20px,6vw,96px);display:grid;grid-template-columns:1fr 1fr auto;gap:25px;align-items:center;color:rgba(255,255,255,.4);background:#050504;font-size:9.5px}.dev-footer p{margin:0}
@media(max-width:900px){.dev-header nav a:not(.source-link){display:none}.dev-hero{grid-template-columns:1fr;gap:50px;padding-top:120px}.system-map{width:min(100%,620px)}.section-head,.section-head.split,.operate-copy{grid-template-columns:1fr;gap:30px}.section-head>p,.section-head.split>p,.operate-copy>p{grid-column:1;margin-bottom:0}.path-grid,.operate-grid{grid-template-columns:1fr}.path-grid a{min-height:0}.dev-footer{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.dev-header{height:66px}.dev-header .source-link{padding:10px 12px;font-size:12px}.dev-brand{font-size:15px}.dev-hero{padding-left:16px;padding-right:16px}.hero-copy h1{font-size:clamp(49px,14vw,66px)}.hero-actions .button{width:100%}.map-lane,.map-core{grid-template-columns:1fr}.section-pad{padding-left:18px;padding-right:18px}.section-head h2,.operate h2,.dev-closing h2{font-size:46px}.path-grid a{padding:24px}.reference-list a{grid-template-columns:35px 1fr}.reference-list i{display:none}.dev-footer{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ============================================================
   The guided path — five interactive stops, in question order
   ============================================================ */
.path { background: var(--paper2, #e8e2d4); }
.path-lede { max-width: 68ch; }
.path-steps {
  max-width: none;
  margin: 46px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--line, rgba(39,32,18,.16));
  border: 1px solid var(--line, rgba(39,32,18,.16));
  counter-reset: step;
}
.path-steps li { background: var(--paper, #f3f0e8); }
.path-steps a {
  padding: 22px clamp(18px, 3vw, 30px);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
  text-decoration: none;
  color: inherit;
  transition: background .16s ease;
}
.path-steps a:hover { background: var(--white, #fffdf6); }
.path-steps i {
  color: var(--gold3, var(--gold, #8a6725));
  font: 650 13px/1.15 var(--mono, ui-monospace, monospace);
  font-style: normal;
  letter-spacing: .04em;
  padding-top: 3px;
}
.path-steps b {
  display: block;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.015em;
}
.path-steps p {
  margin: 9px 0 0;
  max-width: 76ch;
  color: var(--muted, #706a5c);
  font-size: 14px;
  line-height: 1.6;
}
.path-steps em {
  margin-top: 11px;
  display: inline-block;
  color: var(--gold3, var(--gold, #8a6725));
  font: 650 10px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .13em;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* The retrieval lab is the one to take if you only take one. */
.path-steps li:nth-child(2) a { box-shadow: inset 3px 0 0 var(--gold, #d3a94f); }
.path-foot {
  max-width: none;
  margin: 22px 0 0;
  color: var(--muted, #706a5c);
  font-size: 13.5px;
}
.path-foot a {
  color: var(--gold3, var(--gold, #8a6725));
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .path-steps a { grid-template-columns: 1fr; gap: 8px; }
  .path-steps i { padding-top: 0; }
}
/* .section-head styles its first <p> as a mono kicker; the path's lede is
   body copy and must opt out of that. */
.path .path-lede {
  max-width: 72ch;
  margin: 26px 0 0;
  color: var(--muted, #706a5c);
  font: 400 17px/1.6 var(--body, "Helvetica Neue", Arial, sans-serif);
  letter-spacing: normal;
  text-transform: none;
}

/* ============================================================
   Hero — one request, traced
   ============================================================ */
.trace {
  position: relative;
  padding: 18px;
  background: linear-gradient(150deg, #17150f, #0d0d0a);
  border: 1px solid rgba(211, 169, 79, .3);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
  color: var(--paper, #f3f0e8);
}
.trace-head {
  padding: 2px 4px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.trace-head span {
  display: block;
  color: var(--gold, #d3a94f);
  font: 650 9.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.trace-head b { margin-top: 8px; display: block; font-size: 13px; font-weight: 650; }
.trace-run {
  flex-shrink: 0;
  padding: 9px 13px;
  color: #12110e;
  background: var(--gold, #d3a94f);
  border: 0;
  font: 700 11px/1 var(--sans, sans-serif);
  cursor: pointer;
  transition: background .16s ease;
}
.trace-run:hover { background: var(--gold2, #f0d77a); }
.trace-run span { margin-left: 10px; }
.trace-run.is-running { background: var(--gold2, #f0d77a); animation: tracePulse 1.1s ease-in-out infinite; }
@keyframes tracePulse { 0%,100% { opacity: 1 } 50% { opacity: .62 } }

.trace-lane {
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .022);
  border: 1px solid rgba(211, 169, 79, .13);
}
.trace-lane > span {
  margin-right: 4px;
  color: #7d786e;
  font: 650 9.5px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.trace-lane i {
  padding: 5px 8px;
  color: #b3ada2;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  font: 10px/1 var(--mono, ui-monospace, monospace);
  font-style: normal;
}
.trace-in { border-bottom: 0; }
.trace-out { border-top: 0; }

.trace-stages {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(211, 169, 79, .16);
  border: 1px solid rgba(211, 169, 79, .16);
}
.trace-stages button {
  width: 100%;
  padding: 14px 12px;
  display: block;
  text-align: left;
  color: #a09a90;
  background: #100f0c;
  border: 0;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.trace-stages button:hover { background: #17150f; color: var(--paper, #f3f0e8); }
.trace-stages em {
  display: block;
  color: #6f6a61;
  font: 650 9.5px/1 var(--mono, ui-monospace, monospace);
  font-style: normal;
  letter-spacing: .1em;
}
.trace-stages b { margin-top: 10px; display: block; font-size: 15px; font-weight: 650; }
.trace-stages small { margin-top: 5px; display: block; font-size: 10.5px; line-height: 1.4; }
.trace-stages button.is-on {
  color: var(--paper, #f3f0e8);
  background: #201c13;
  box-shadow: inset 0 -3px 0 var(--gold, #d3a94f);
}
.trace-stages button.is-on em { color: var(--gold, #d3a94f); }

.trace-detail { margin-top: 14px; padding: 15px 14px; background: rgba(255, 255, 255, .028); border: 1px solid rgba(211, 169, 79, .16); }
.trace-detail.is-in { animation: traceIn .32s ease both; }
@keyframes traceIn { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }
.trace-detail p { margin: 0; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.trace-detail p + p { margin-top: 11px; padding-top: 11px; border-top: 1px solid rgba(211, 169, 79, .1); }
.trace-detail span {
  color: #7d786e;
  font: 650 9.5px/1.5 var(--mono, ui-monospace, monospace);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.trace-detail b { font-size: 12.5px; font-weight: 400; line-height: 1.6; color: #cfc9be; }
.trace-refuses span { color: #c98a72; }
.trace-refuses b { color: #e6ddd1; }
.trace-vol {
  margin-top: 13px;
  padding-top: 12px;
  display: block;
  border-top: 1px solid rgba(211, 169, 79, .1);
  color: var(--gold, #d3a94f);
  font: 650 10px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
  text-decoration: none;
}
.trace-vol:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 760px) {
  .trace-stages { grid-template-columns: repeat(2, 1fr); }
  .trace-detail p { grid-template-columns: 1fr; gap: 5px; }
}

/* Display type keeps Avenir Next; everything read at length is Helvetica Neue,
   matching cogni.build. */
h3, .path-steps b, .dev-chrome-next b { font-family: var(--sans); }
.path-steps b { font-weight: 450; letter-spacing: -.03em; }

/* The wordmark is the same lockup as cogni.build: Avenir Next, the "cogni"
   syllable at 650, the rest at 400. Only the prefix differs. */
.dev-brand b { font-weight: 650; }

.path .path-lede { max-width: 72ch; }

/* Hero body copy, matched to cogni.build's scale and rhythm. */
.dev-hero .hero-copy > p:not(.eyebrow) { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.58; max-width: 680px; margin-top: 30px; }
.dev-hero .hero-actions { margin-top: 36px; gap: 12px; }
.dev-hero .hero-copy > p:not(.eyebrow) { color: #aaa69d; }
/* Eyebrow matched to cogni.build exactly. */
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .17em; margin-bottom: 23px; }