:root {
  --vellum: #EFEFE9;
  --surround: #E3E4DD;
  --graphite: #15171A;
  --body: #3A3E3A;
  --mute: #565A55;
  --hairline: #B9BBB3;
  --grid: #D6D7D0;
  --blue: #1F3F8F;
  --redline: #C42A1F;
  --paper: #FFFFFF;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surround); color: var(--graphite); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--graphite); }
a:hover { color: var(--blue); }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.page { padding: 20px; }
.sheet { max-width: 1200px; margin: 0 auto; background: var(--vellum); border: 1.5px solid var(--graphite); }
.mono { font-family: var(--mono); }
.red { color: var(--redline); }
.blue { color: var(--blue); }
.muted { color: var(--mute); }

/* Wordmark: always "N+1 Labs" or "Factory N+1", never bare N+1 */
.wordmark { font-size: 24px; font-weight: 800; font-stretch: 118%; letter-spacing: -0.04em; text-decoration: none; }
.wordmark .labs { font-stretch: 100%; font-weight: 500; letter-spacing: 0; font-size: 17px; margin-left: 8px; }

.top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 32px; border-bottom: 1px solid var(--graphite); }
.brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px; }
.brand .tag { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--mono); font-size: 12px; }
.nav a { text-decoration: none; padding: 6px 0; }

.hero { display: flex; flex-wrap: wrap; }
.hero-copy { flex: 1 1 500px; min-width: 0; padding: 64px 40px 48px 32px; display: flex; flex-direction: column; gap: 24px; border-right: 1px solid var(--graphite); }
.product { font-size: 20px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; }
h1 { margin: 0; font-size: clamp(40px, 6.2vw, 78px); line-height: 0.96; font-weight: 800; font-stretch: 112%; letter-spacing: -0.04em; }
.lede { margin: 0; font-size: 19px; line-height: 1.55; color: var(--body); max-width: 520px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--graphite); }
.btn.solid { background: var(--graphite); color: var(--vellum); }
.btn.solid:hover { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.btn.line:hover { background: var(--paper); }

.hero-fig { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; }
.revtable { font-family: var(--mono); font-size: 12px; border-bottom: 1px solid var(--graphite); }
.revrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 120px; }
.revrow + .revrow { border-top: 1px solid var(--hairline); }
.revrow > div { padding: 10px 16px; }
.revrow.head { color: var(--mute); }
figure { margin: 0; padding: 24px 28px; display: flex; flex-direction: column; gap: 10px; }
figure svg { width: 100%; height: auto; background: var(--paper); border: 1px solid var(--graphite); display: block; }
figcaption { font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--mute); }

.band { border-top: 1px solid var(--graphite); }
.band-head { padding: 20px 32px; border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; }
.loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.step { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--hairline); }
.step:last-child { border-right: 0; }
.step .k { font-family: var(--mono); font-size: 12px; }
.step h3 { margin: 0; font-size: 19px; font-weight: 700; }
.step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--body); }
.return { border-top: 1px dashed var(--blue); padding: 12px 32px; font-family: var(--mono); font-size: 12px; color: var(--blue); }

.split { display: flex; flex-wrap: wrap; }
.split-copy { flex: 1 1 440px; min-width: 0; padding: 48px 32px; border-right: 1px solid var(--graphite); display: flex; flex-direction: column; gap: 16px; }
.eyebrow { font-family: var(--mono); font-size: 12px; color: var(--mute); }
h2 { margin: 0; font-size: 34px; line-height: 1.05; font-weight: 800; font-stretch: 108%; letter-spacing: -0.02em; }
.split-copy p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); max-width: 500px; }
.compare { flex: 1 1 420px; min-width: 0; font-family: var(--mono); font-size: 13px; }
.crow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crow + .crow { border-top: 1px solid var(--hairline); }
.crow.head { border-bottom: 1px solid var(--graphite); color: var(--mute); }
.crow > div { padding: 12px 20px; }
.stations { flex: 1 1 420px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); font-family: var(--mono); font-size: 13px; }
.station { padding: 24px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--hairline); }
.station:nth-child(odd) { border-right: 1px solid var(--hairline); }
.station:nth-last-child(-n+2) { border-bottom: 0; }
.station strong { font-family: var(--sans); font-size: 19px; }

.cert-band { border-top: 1px solid var(--graphite); background: var(--graphite); padding: 56px clamp(16px, 4vw, 48px); }
.cert { max-width: 900px; margin: 0 auto; background: var(--vellum); box-shadow: inset 0 0 0 10px var(--vellum), inset 0 0 0 11px var(--graphite); padding: 44px clamp(24px, 5vw, 56px); display: flex; flex-direction: column; gap: 26px; }
.cert-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--graphite); padding-bottom: 18px; font-family: var(--mono); font-size: 11px; }
.cert-head .title { font-size: 12px; letter-spacing: 0.12em; color: var(--blue); }
.cert h2 { font-size: clamp(28px, 4vw, 46px); line-height: 1.02; letter-spacing: -0.03em; }
.fields { border: 1px solid var(--graphite); font-family: var(--mono); font-size: 13px; }
.field { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); }
.field + .field { border-top: 1px solid var(--hairline); }
.field > div { padding: 12px 16px; line-height: 1.5; }
.field > div:first-child { color: var(--mute); border-right: 1px solid var(--hairline); }
.cert-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }

.titleblock { border-top: 1.5px solid var(--graphite); display: flex; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; }
.titleblock > div { flex: 1 1 160px; padding: 14px 24px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--graphite); }
.titleblock > div:first-child { flex: 2 1 320px; padding-left: 32px; }
.titleblock > div:last-child { border-right: 0; }

@media (max-width: 700px) {
  .page { padding: 10px; }
  .top, .band-head, .return { padding-left: 18px; padding-right: 18px; }
  .hero-copy { padding: 44px 18px 36px; border-right: 0; border-bottom: 1px solid var(--graphite); }
  .split-copy { padding: 36px 18px; border-right: 0; border-bottom: 1px solid var(--graphite); }
  figure { padding: 18px; }
  .step { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .revrow { grid-template-columns: 52px minmax(0, 1fr) 104px; }
  .revrow > div { padding: 10px 10px; }
  .crow > div { padding: 12px 10px; }
  .field { grid-template-columns: minmax(0, 1fr); }
  .field > div:first-child { border-right: 0; padding-bottom: 0; }
  .titleblock > div, .titleblock > div:first-child { border-right: 0; border-bottom: 1px solid var(--hairline); padding-left: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Problem / what we build / value */
.psv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.psv-cell { padding: 40px 32px; display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--hairline); }
.psv-cell:last-child { border-right: 0; }
.psv-cell .k { font-size: 12px; }
.psv-cell h2 { font-size: 26px; }
.psv-cell p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); }

/* First five builds */
.builds-intro { padding: 36px 32px 24px; display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-end; }
.builds-intro h2 { flex: 1 1 380px; }
.builds-intro p { flex: 1 1 420px; margin: 0; font-size: 16px; line-height: 1.65; color: var(--body); max-width: 560px; }
.rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--graphite); border-bottom: 1px solid var(--graphite); }
.pick { appearance: none; font: inherit; text-align: left; background: transparent; color: var(--graphite); border: 0; border-right: 1px solid var(--hairline); padding: 14px 16px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; min-width: 0; }
.pick:last-child { border-right: 0; }
.pick:hover { background: var(--paper); }
.pick:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.pick[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 -3px 0 var(--redline); }
.pick .no { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.pick .nm { font-size: 18px; font-weight: 800; font-stretch: 108%; letter-spacing: -0.01em; line-height: 1.1; }
.pick .mt { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.status { display: inline-block; width: max-content; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 2px 7px; border: 1px solid currentColor; }
.status.now { color: var(--redline); }
.status.next { color: var(--blue); }
.status.later { color: var(--mute); }
.builds-main { display: flex; flex-wrap: wrap; }
.stage { position: relative; flex: 1.6 1 520px; min-width: 0; height: clamp(400px, 62vh, 620px); background: #F7F7F3; border-right: 1px solid var(--graphite); overflow: hidden; }
#view { position: absolute; inset: 0; }
#view canvas { display: block; touch-action: none; }
.labels { position: absolute; inset: 0; pointer-events: none; }
.ptag { font-family: var(--mono); font-size: 11px; background: var(--paper); color: var(--graphite); border: 1px solid var(--graphite); padding: 2px 6px; white-space: nowrap; transform: translateY(-14px); }
.ptag.hot { border-color: var(--redline); color: var(--redline); }
.legend { position: absolute; top: 12px; left: 12px; display: flex; gap: 12px; font-size: 11px; color: var(--mute); background: var(--paper); border: 1px solid var(--hairline); padding: 5px 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; background: var(--redline); vertical-align: -1px; margin-right: 6px; }
.tip { position: absolute; pointer-events: none; background: var(--graphite); color: var(--vellum); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; padding: 6px 9px; max-width: 260px; transform: translate(12px, 12px); }
.hud { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; pointer-events: none; }
.hud > * { pointer-events: auto; }
.group { display: flex; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--graphite); }
.group button { appearance: none; border: 0; border-right: 1px solid var(--hairline); background: transparent; color: var(--graphite); font-family: var(--mono); font-size: 11.5px; min-height: 36px; padding: 0 11px; cursor: pointer; }
.group button:last-child { border-right: 0; }
.group button:hover { background: var(--vellum); }
.group button[aria-pressed="true"] { background: var(--graphite); color: var(--vellum); }
.group button:focus-visible, .slider input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.slider { display: flex; align-items: center; gap: 8px; min-height: 36px; background: var(--paper); border: 1px solid var(--graphite); padding: 0 10px; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.slider input { accent-color: var(--redline); width: clamp(100px, 16vw, 180px); }
.noscript { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font-family: var(--mono); font-size: 12px; color: var(--mute); }
.spec { flex: 1 1 340px; min-width: 0; padding: 26px 28px; display: flex; flex-direction: column; gap: 20px; }
.spec .head { display: flex; flex-direction: column; gap: 8px; }
.spec h3 { margin: 0; font-size: 30px; font-weight: 800; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1; }
.spec .analog { margin: 0; font-size: 15px; color: var(--body); }
.spec .lbl { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.06em; margin-bottom: 8px; }
.counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--graphite); }
.counts > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--hairline); }
.counts > div:last-child { border-right: 0; }
.counts b { font-size: 24px; font-weight: 800; font-stretch: 110%; }
.counts span { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
ol.line { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: st; }
ol.line li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; counter-increment: st; }
ol.line li::before { content: counter(st, decimal-leading-zero); font-family: var(--mono); font-size: 11px; height: 24px; border: 1px solid var(--graphite); display: grid; place-items: center; }
ol.line li.opt::before { border-style: dashed; color: var(--mute); border-color: var(--mute); }
ol.line b { font-weight: 700; font-size: 15px; }
ol.line small { display: block; color: var(--mute); font-family: var(--mono); font-size: 11px; line-height: 1.5; margin-top: 2px; }
ul.yield { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: var(--body); }
ul.yield li::marker { color: var(--redline); }
.proves { border-left: 3px solid var(--blue); padding: 8px 12px; background: var(--paper); font-size: 14.5px; line-height: 1.55; }
.proves .lbl { margin-bottom: 4px; color: var(--blue); }
.watch { font-size: 13.5px; line-height: 1.55; color: var(--mute); }
.bom { border-top: 1px solid var(--graphite); padding: 20px 32px 8px; }
.bom-head { font-size: 11px; color: var(--mute); letter-spacing: 0.06em; margin-bottom: 10px; }
.tablewrap { overflow-x: auto; }
.bom table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.bom th { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; color: var(--mute); text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--graphite); }
.bom td { padding: 9px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.bom td.num { font-family: var(--mono); }
.bom tr.hot td { background: var(--paper); box-shadow: inset 3px 0 0 var(--redline); }
.figfoot { margin: 0; padding: 10px 32px 18px; font-size: 11px; color: var(--mute); }

@media (max-width: 980px) {
  .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pick:nth-child(3) { border-right: 0; }
  .pick:nth-child(-n+3) { border-bottom: 1px solid var(--hairline); }
  .stage { border-right: 0; border-bottom: 1px solid var(--graphite); }
}
@media (max-width: 700px) {
  .psv-cell { padding: 30px 18px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .builds-intro, .bom, .figfoot { padding-left: 18px; padding-right: 18px; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pick { border-bottom: 1px solid var(--hairline); }
  .pick:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .pick:nth-child(even) { border-right: 0; }
  .pick:nth-child(5) { grid-column: 1 / -1; border-right: 0; }
  .stage { height: auto; }
  #view { position: relative; height: 380px; }
  .hud { position: static; padding: 10px 12px 14px; border-top: 1px solid var(--hairline); }
  .tip { display: none; }
  .legend { display: none; }
  .spec { padding: 22px 18px; }
}