/* nplusonelabs.com home and 404: dark keynote look (2026-10-22). The /builds viewer keeps styles.css. */
:root {
  --bg: #000000;
  --ink: #F2F2EF;
  --mute: #9A9A96;
  --faint: #6E6E6A;
  --line: #1C1C1E;
  --red: #E5352B;
  --twin: #D7E6F5;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --pad: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.mono { font-family: var(--mono); }
.r { color: var(--red); }
::selection { background: var(--red); color: #fff; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 26px var(--pad); }
.mark { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.mark b { font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.mark .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.top nav { display: flex; gap: 28px; }
.top nav a { font-size: 14px; text-decoration: none; color: var(--mute); transition: color .15s; }
.top nav a:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: min(calc(100vh - 88px), 900px); padding-left: var(--pad); }
.hero h1 { font-size: clamp(46px, 6.4vw, 96px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 800; font-stretch: 96%; margin: 0 0 32px; text-wrap: balance; }
.hero p { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; margin: 0 0 14px; max-width: 32em; }
.problem { color: var(--mute); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid var(--ink); transition: background .15s, border-color .15s, color .15s; }
.btn.solid { background: var(--ink); color: #000; }
.btn.solid:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn.line { border-color: #3A3A3C; color: var(--ink); }
.btn.line:hover { border-color: var(--ink); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

.fig { position: relative; margin: 0; align-self: center; }
.fig img { display: block; width: 100%; height: auto; }
.fig figcaption { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.fig figcaption b { font-weight: 400; color: var(--twin); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.step { padding: 40px var(--pad) 48px; border-right: 1px solid var(--line); }
.step:last-child { border-right: 0; }
.step .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--red); }
.step h2 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 14px 0 8px; }
.step p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.5; }

.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px var(--pad); border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--faint); }
.foot a { color: var(--mute); text-decoration: none; }
.foot a:hover { color: var(--ink); }

.e404 { min-height: calc(100vh - 160px); display: flex; flex-direction: column; justify-content: center; padding: 0 var(--pad); }
.e404 .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--red); margin-bottom: 18px; }
.e404 h1 { font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 28px; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding: 24px var(--pad) 0; min-height: 0; }
  .fig { margin: 8px calc(-1 * var(--pad)) 0; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--line); padding: 28px var(--pad) 32px; }
  .step:last-child { border-bottom: 0; }
  .mark .tag, .top nav a.wide { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* v2 sections: proof, pilot, founder, roadmap, contact */
.top nav { align-items: center; }
.top nav a.nav-cta { color: var(--ink); border: 1px solid #3A3A3C; padding: 8px 14px; }
.top nav a.nav-cta:hover { border-color: var(--red); color: var(--ink); }
.band { border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 112px) var(--pad); }
.band-head { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
.band h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; margin: 0 0 18px; text-wrap: balance; }
.band-head p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--mute); margin: 0; }
.hot { color: #FF8A3D; }
.band h3 { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 12px 0 8px; }
.band .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--faint); }

.fine { max-width: 760px; margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--faint); }
.fine a { color: var(--mute); }
.fine a:hover { color: var(--ink); }

.trio, .stairs { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 36px; }
.stairs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trio li, .stairs li { padding: 28px 24px 8px 0; margin-right: 24px; }
.trio p, .stairs p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--mute); }
.trio .n { color: var(--red); }
.stairs li { border-top: 2px solid transparent; margin-top: -1px; }
.stairs li.now { border-top-color: var(--red); }
.stairs li.now .n { color: var(--red); }
.stairs li.concept h3, .stairs li.concept p { color: var(--faint); }

.founder { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.portrait img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.05); border: 1px solid var(--line); }
.founder .who { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--mute); margin: 0 0 24px; max-width: 36em; }
.founder .who b { color: var(--ink); font-weight: 700; }
.cv { list-style: none; margin: 0 0 24px; padding: 0; max-width: 40em; }
.cv li { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--mute); }
.cv li:last-child { border-bottom: 1px solid var(--line); }
.cv .org { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink); padding-top: 2px; }
.links { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; font-size: 15px; }
.links a { text-decoration: none; color: var(--ink); border-bottom: 1px solid #3A3A3C; padding-bottom: 2px; }
.links a:hover { border-color: var(--red); }

.contact { text-align: left; }
.contact h2 { font-size: clamp(36px, 4.4vw, 64px); margin-bottom: 8px; }
.direct { margin: 22px 0 0; font-size: 15px; color: var(--mute); }
.direct a { color: var(--ink); }

@media (max-width: 1000px) {
  .stairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .trio, .stairs { grid-template-columns: 1fr; }
  .trio li, .stairs li { margin-right: 0; padding: 22px 0 18px; border-bottom: 1px solid var(--line); }
  .stairs li { border-top: 0; margin-top: 0; }
  .stairs li.now { box-shadow: inset 2px 0 0 var(--red); padding-left: 14px; }
  .founder { grid-template-columns: 1fr; }
  .portrait { max-width: 220px; }
  .cv li { grid-template-columns: 1fr; gap: 4px; }
  .top nav { gap: 16px; }
}

/* ---------- v3: blueprint graphite (2026-10-22) ----------
   Graphite, not pure black; a faint blueprint grid where the twin lives;
   one vellum "drawing sheet" section for rhythm. Colour is functional:
   white = the real thing, blue = the twin / simulation, red = a flagged failure and the +1. */
:root {
  --bg: #0E1013;        /* graphite base */
  --bg-2: #13161A;      /* raised band */
  --bg-3: #1A1E24;      /* panel */
  --ink: #EDEEE8;       /* warm white, vellum-tinted */
  --mute: #A3A8AD;
  --faint: #6F757C;
  --line: #262B32;
  --red: #E5352B;
  --twin: #9CC3EE;      /* blueprint blue */
  --vellum: #EFEFE9;
  --graphite: #15171A;
  --blue-ink: #1F3F8F;  /* engineer's blue, on vellum */
  --red-ink: #C42A1F;   /* redline, on vellum */
  --g-minor: rgba(156, 195, 238, 0.05);
  --g-major: rgba(156, 195, 238, 0.10);
}
html, body { background: var(--bg); }
.grid-bg { position: relative; isolation: isolate; }
.grid-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--g-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, var(--g-major) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(var(--g-minor) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--g-minor) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 30%, transparent 85%); }

/* sticky glass header */
.top { position: sticky; top: 0; z-index: 10; background: rgba(14, 16, 19, 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }

/* hero: blue glow behind the twin, grid fading out from it */
.hero { background: radial-gradient(ellipse 55% 65% at 78% 48%, rgba(70, 120, 200, 0.16), transparent 70%), var(--bg); }
.hero h1 { font-stretch: 112%; font-weight: 780; letter-spacing: -0.04em; }
.fig img { mix-blend-mode: lighten; }
.fig figcaption b { color: var(--twin); }

.steps { background: var(--bg-2); border-top-color: var(--line); }
.step .n { color: var(--twin); }
.band h2 { font-stretch: 108%; font-weight: 780; }

/* proof: a panel on the grid */
.proof { background: var(--bg-2); }

/* pilot: the vellum drawing sheet */
.pilot { background:
    linear-gradient(rgba(31, 63, 143, 0.09) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgba(31, 63, 143, 0.09) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgba(31, 63, 143, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(31, 63, 143, 0.045) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--vellum);
  color: var(--graphite); border-top: 0; }
.pilot .kicker, .pilot .trio .n { color: var(--red-ink); }
.pilot .band-head p, .pilot .trio p { color: #4A4F4A; }
.pilot .trio { border-top: 1.5px solid var(--graphite); }
.pilot .btn.solid { background: var(--graphite); color: var(--vellum); border-color: var(--graphite); }
.pilot .btn.solid:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.pilot a:focus-visible, .pilot .btn:focus-visible { outline-color: var(--blue-ink); }
.pilot ::selection { background: var(--blue-ink); color: #fff; }

.founder { border-top: 0; }
.portrait img { border-color: var(--line); }
.road { background: var(--bg-2); }
.stairs li.concept .n { color: var(--twin); opacity: .7; }

/* contact: closing glow */
.contact { background: radial-gradient(ellipse 60% 90% at 20% 100%, rgba(229, 53, 43, 0.10), transparent 70%), var(--bg); }
.foot { background: var(--bg); }

@media (max-width: 860px) {
  .grid-bg::before { -webkit-mask-image: radial-gradient(ellipse 120% 60% at 50% 70%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 120% 60% at 50% 70%, #000 30%, transparent 85%); }
  .hero { background: radial-gradient(ellipse 90% 40% at 50% 80%, rgba(70, 120, 200, 0.16), transparent 70%), var(--bg); }
}

/* proof explainer: part, risk, result */
.explain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 1.6vw, 20px); max-width: 1180px; }
.card { position: relative; margin: 0; background: var(--bg); border: 1px solid var(--line); padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.card.result { grid-column: 1 / -1; }
.cap-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--twin); }
.card figcaption { font-size: 15px; line-height: 1.5; color: var(--mute); max-width: 44em; }
.part-img { position: relative; margin: 0 -20px; }
.part-img img { display: block; width: 100%; height: auto; mix-blend-mode: lighten; }
.callout { position: absolute; transform: translate(-22px, -50%); display: flex; align-items: center; gap: 10px; pointer-events: none; }
.callout i { width: 44px; height: 44px; border: 1.5px solid var(--twin); border-radius: 50%; box-shadow: 0 0 0 4px rgba(156, 195, 238, 0.12); flex: none; }
.callout b { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--twin); background: rgba(14, 16, 19, 0.8); padding: 3px 7px; white-space: nowrap; }
.card svg { display: block; width: 100%; height: auto; overflow: visible; }
.card svg text { font-family: var(--mono); font-size: 11px; fill: var(--mute); letter-spacing: 0.02em; }
.card svg .t { font-family: var(--sans); font-size: 14px; font-weight: 700; fill: var(--ink); letter-spacing: 0; }
.card svg .k { font-family: var(--sans); font-size: 14px; fill: var(--mute); letter-spacing: 0; }
.card svg .ro { fill: var(--red); font-weight: 700; }
.card svg .ok { fill: var(--twin); font-weight: 700; }
.card svg .lt { fill: var(--red); }
.card svg .dl { fill: var(--ink); font-size: 12px; }
.hist .bu { fill: var(--twin); opacity: .75; }
.hist .bo { fill: var(--red); }
.hist .ax, .hist .tk { stroke: var(--line); stroke-width: 1; }
.hist .lim { stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 5 4; }
.hookd .floor { stroke: #3A4048; stroke-width: 2; }
.hookd .ghost { fill: none; stroke: #4A525C; stroke-width: 1; stroke-dasharray: 3 3; }
.hookd .beam { fill: #2A3038; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.hookd .rh { fill: rgba(229, 53, 43, 0.55); filter: blur(3px); }
.hookd .rc { fill: rgba(156, 195, 238, 0.35); filter: blur(3px); }
.hookd .push { stroke: var(--mute); stroke-width: 1.5; }
.hookd .pushh { fill: var(--mute); }
.hookd .dim { stroke: var(--faint); stroke-width: 1; }
@media (max-width: 860px) {
  .explain { grid-template-columns: 1fr; }
  .card { padding: 16px 14px 18px; }
  .part-img { margin: 0 -14px; }
}
.hist-n { display: none !important; }
@media (max-width: 600px) {
  .hist-w { display: none !important; }
  .hist-n { display: block !important; }
}

/* hook explainer v2: drafting-style section views */
.card.risk { grid-column: 1 / -1; }
.risk-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.risk-copy p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--mute); max-width: 34em; }
.risk-copy .lead { font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.risk-copy .eq { font-family: var(--mono); font-size: 14px; color: var(--ink); background: var(--bg-3); border-left: 2px solid var(--twin); padding: 10px 14px; display: inline-block; }
.risk-copy .note { font-size: 13px; color: var(--faint); }
.hookd .sec { stroke: #5A6470; stroke-width: 1; }
.hookd .edge { stroke: #8A929C; stroke-width: 1.25; }
.hookd .ol { fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.hookd .ph { fill: none; stroke: #6F7882; stroke-width: 1; stroke-dasharray: 6 3 1.5 3; }
.hookd .brk { fill: none; stroke: #6F7882; stroke-width: 1; }
.hookd .ext { stroke: #59616B; stroke-width: 0.75; }
.hookd .dimln { stroke: #8A929C; stroke-width: 0.9; }
.card svg .dimt { fill: var(--ink); font-size: 13px; }
.card svg .sq { font-family: var(--sans); font-size: 13px; fill: var(--ink); font-weight: 600; letter-spacing: 0; }
.card svg .sqn { fill: var(--twin); font-family: var(--mono); font-weight: 500; }
.hookd .flow { stroke: #59616B; stroke-width: 1; fill: none; }
.card svg .big { font-family: var(--sans); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.hookd .limk { stroke: var(--ink); stroke-width: 1.5; }
@media (max-width: 860px) {
  .risk-grid { grid-template-columns: 1fr; }
}
.card.snap svg { margin-block: auto; }
@media (max-width: 600px) {
  .card svg.cmp text { font-size: 17px; }

  .card svg.cmp .big { font-size: 34px; }
  .card svg.cmp .dimt { font-size: 18px; }
}
.hookd .beyond { fill: none; stroke: #4A525C; stroke-width: 1; stroke-dasharray: 2 3; }
.hookd .contact { fill: var(--red); }
.hookd .pushar { stroke: var(--mute); stroke-width: 1.25; fill: none; }
.card svg .side { font-size: 10px; fill: var(--faint); letter-spacing: 0.12em; text-transform: uppercase; }
.hookd .lead { stroke: var(--faint); stroke-width: 0.9; fill: none; }
.hookd .skb { fill: #1A1F26; stroke: #5A6470; stroke-width: 1; }
.seq-n { display: none !important; }
@media (max-width: 600px) {
  .seq-w { display: none !important; }
  .seq-n { display: block !important; max-width: 340px; margin-inline: auto; }
}
.svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* /deck: investor deck request */
.deck { min-height: calc(100vh - 160px); display: flex; align-items: center; }
.deck-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); width: 100%; max-width: 1180px; align-items: start; }
.deck-copy h1 { font-size: clamp(44px, 5.4vw, 80px); line-height: 1; letter-spacing: -0.04em; font-weight: 780; font-stretch: 112%; margin: 0 0 22px; }
.deck-copy p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--mute); margin: 0 0 26px; max-width: 30em; }
.deck-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 30em; }
.deck-points li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--mute); position: relative; }
.deck-points li::before { content: ""; position: absolute; left: 0; top: 20px; width: 10px; height: 1px; background: var(--twin); }
.deck-form-wrap { background: var(--bg-3); border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); }
.deck-form { display: grid; gap: 18px; }
.deck-form label { display: grid; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.deck-form .opt { color: var(--faint); letter-spacing: 0.06em; text-transform: none; }
.deck-form input, .deck-form textarea { font: inherit; font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--bg); border: 1px solid #343A42; padding: 12px 14px; border-radius: 0; width: 100%; }
.deck-form textarea { resize: vertical; min-height: 104px; }
.deck-form input:focus, .deck-form textarea:focus { outline: none; border-color: var(--twin); box-shadow: 0 0 0 3px rgba(156, 195, 238, 0.15); }
.deck-form ::placeholder { color: var(--faint); }
.deck-form .btn { justify-self: start; cursor: pointer; font-family: var(--sans); }
.deck-form .btn:disabled { opacity: .6; cursor: progress; }
.form-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--mute); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.deck-done h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 780; margin: 0 0 12px; }
.deck-done p { color: var(--mute); font-size: 16px; line-height: 1.55; margin: 0 0 22px; }
@media (max-width: 860px) {
  .deck-grid { grid-template-columns: 1fr; }
  .deck { min-height: 0; }
}
[hidden] { display: none !important; }