/* Neuro Nodes — production styles */
:root{
  --paper:#f5f6f4; --paper-2:#eceeea; --paper-3:#e3e6e1;
  --rule:#d8dbd4; --rule-soft:#e6e8e3;
  --ink:#0a0b0a; --ink-2:#1e211d; --ink-mute:#6c6f68; --ink-dim:#9a9d94; --ink-faint:#b9bcb3;
  --dark:#0a0b0a; --dark-2:#121410; --dark-3:#1a1d18; --dark-rule:#2a2d27;
  --d-text:#eef0ea; --d-mute:#8b8f86; --d-dim:#5f635b;
  --accent-h:82; --accent-c:0.20;
  --accent:oklch(0.88 var(--accent-c) var(--accent-h));
  --accent-ink:oklch(0.55 0.20 var(--accent-h));
  --accent-glow:oklch(0.88 var(--accent-c) var(--accent-h) / 0.35);
  --font-disp:'Major Mono Display',ui-monospace,monospace;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Fragment Mono',ui-monospace,monospace;
  --sp:96px; --rail:168px; --wrap:1608px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11";overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}

/* display headings — Major Mono Display is single-weight; stroke fakes ~600 heft */
h1,h2{-webkit-text-stroke:.5px currentColor;text-stroke:.5px currentColor;paint-order:stroke fill}

/* hover affordances (replacing inline style-hover) */
.h-ink{transition:color .2s}
.h-ink:hover{color:var(--ink)}
.h-accent,.h-dark{transition:all .25s}
.h-accent:hover{background:var(--accent);color:var(--ink)}
.h-dark:hover{background:var(--ink);color:var(--paper)}
.h-paper3{transition:background .3s}
.h-paper3:hover{background:var(--paper-3)}

/* ch.05 · NN backend live-balance pulse */
@keyframes nnpulse{0%,100%{opacity:1}50%{opacity:.2}}
.nn-pulse{animation:nnpulse .85s ease-in-out infinite}

/* ── h-ink base color ── */
.h-ink{color:var(--ink-mute)}

/* ── Layout skeleton ── */
.sec-wrap{max-width:var(--wrap);margin:0 auto;padding:0 44px}
.ch-grid{display:grid;grid-template-columns:var(--rail) 1fr}
.ch-grid>*{min-width:0} /* grid items default to min-width:auto — wide content must not blow out the track */
.ch-rail{padding-top:var(--sp);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.ch-rail.dark{color:var(--d-mute)}
.ch-num{color:var(--ink);font-size:13px;letter-spacing:.18em;margin-top:5px}
.ch-rail.dark .ch-num{color:var(--accent)}
.ch-lbl{margin-top:3px;color:var(--ink-dim)}
.ch-rail.dark .ch-lbl{color:var(--d-dim)}
.ch-col{border-left:1px solid var(--rule);padding:var(--sp) 0 var(--sp) 40px}
.ch-col.dark{border-left-color:var(--dark-rule)}

/* ── Section type ── */
.sec-dark{background:var(--dark);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}

/* ── Shared heading + subtitle ── */
.sec-h2{font-family:var(--font-disp);font-size:clamp(24px,2.8vw,38px);line-height:.96;letter-spacing:-0.005em;text-transform:lowercase;color:var(--ink)}
.sec-h2.dark{color:var(--d-text)}
.sec-sub{margin-top:11px;font-size:14px;line-height:1.5;font-weight:300;color:var(--ink-mute);max-width:520px}
.sec-sub.dark{color:var(--d-mute)}

/* ── Shared buttons ── */
.btn-primary{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:all .25s}
.btn-secondary{display:inline-flex;align-items:center;gap:9px;padding:13px 20px;font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:all .25s}

/* ── ch.01 carousel panels ── */
.car-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,#1c1f1a 0%,#0a0b0a 72%);background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);background-size:38px 38px}
.car-tl{position:absolute;top:13px;left:13px;width:13px;height:13px;border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent)}
.car-br{position:absolute;bottom:13px;right:13px;width:13px;height:13px;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)}
.car-fade{position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,#070806 6%,rgba(7,8,6,.55) 52%,transparent 100%)}
.car-foot{position:absolute;left:30px;right:30px;bottom:30px}
.car-desc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .85s cubic-bezier(.19,1,.22,1);opacity:0}
.car-desc p{max-width:480px;font-size:13.5px;line-height:1.5;color:var(--d-mute);font-weight:300;margin-bottom:16px}
.car-num{font-family:var(--font-disp);font-size:clamp(40px,4.6vw,76px);line-height:.82;color:var(--accent);letter-spacing:-.02em}
.car-lbl{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--d-text);margin-top:9px}

/* ── ch.02 pipeline tabs ── */
.tab-item{min-width:0;padding:16px;cursor:pointer;transition:background .3s;position:relative;overflow:hidden}
.tab-bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transition:opacity .3s}
.tab-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.tab-title{font-family:var(--font-disp);font-size:17px;text-transform:lowercase;line-height:1;margin-top:7px;white-space:nowrap}

/* ── ch.03 hotspots ── */
.hs-zone{position:absolute;cursor:pointer;z-index:8;opacity:1;transition:opacity .35s,border-color .3s;border:1.6px solid rgba(238,240,234,.45)}
.hs-tl{position:absolute;top:-1px;left:-1px;width:13px;height:13px;border-top:1.6px solid var(--accent);border-left:1.6px solid var(--accent)}
.hs-br{position:absolute;bottom:-1px;right:-1px;width:13px;height:13px;border-bottom:1.6px solid var(--accent);border-right:1.6px solid var(--accent)}
.hs-badge{position:absolute;top:-1px;left:-1px;display:flex;align-items:center;gap:8px;background:rgba(10,11,10,.82);padding:6px 10px;transition:background .3s}
.info-card{position:absolute;z-index:12;background:rgba(10,11,9,.94);border:1px solid var(--dark-rule);border-left:3px solid var(--accent);padding:20px 22px;box-shadow:0 26px 64px rgba(0,0,0,.6);opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
.info-card-head{display:flex;align-items:center;gap:11px}
.info-card-title{font-family:var(--font-disp);font-size:18px;text-transform:lowercase;color:var(--d-text)}
.info-card-body{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--d-mute);font-weight:300}

/* ── ch.04 process steps ── */
.proc-step{flex:1;padding:24px;display:flex;gap:13px;align-items:flex-start;position:relative}
.step-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--accent-ink);text-transform:uppercase}
.step-title{font-family:var(--font-disp);font-size:18px;text-transform:lowercase;color:var(--ink);margin-top:7px}
.step-body{font-size:13px;color:var(--ink-mute);font-weight:300;line-height:1.5;margin-top:7px}
.step-time{position:absolute;right:24px;bottom:22px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}

/* ── ch.05 vendor tabs ── */
.vend-item{padding:18px;display:flex;flex-direction:column;gap:12px;height:86px;justify-content:flex-start;background:transparent;transition:background .3s}
.vend-tag{font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);border:1px solid var(--rule);padding:4px 7px;transition:color .3s,border-color .3s}

/* ── ch.05 trust columns ── */
.trust-col{border-top:1px solid var(--ink);display:flex;flex-direction:column;gap:11px}
.trust-lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--accent-ink);text-transform:uppercase}
.trust-title{font-family:var(--font-disp);font-size:16px;line-height:1;text-transform:lowercase;white-space:nowrap;color:var(--ink)}
.trust-body{font-size:13px;color:var(--ink-mute);font-weight:300;line-height:1.5}

/* ── ch.06 admin panels ── */
.admin-panel{background:var(--dark);display:grid;grid-template-columns:minmax(0,190px) 1fr;gap:22px;align-items:center;padding:24px 26px}
.admin-title{font-family:var(--font-disp);font-size:20px;text-transform:lowercase;color:var(--d-text)}
.admin-body{margin-top:9px;font-size:13px;line-height:1.55;color:var(--d-mute);font-weight:300}

/* ── contact list items ── */
.contact-item{display:flex;gap:11px;padding:13px 0;font-family:var(--font-mono);font-size:11.5px;line-height:1.55}

/* ── contact form (modal) ── */
.cf-lbl{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.cf-in{width:100%;font-family:var(--font-body);font-size:13.5px;color:var(--ink);background:var(--paper);border:1px solid var(--ink);padding:11px 12px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.cf-in:focus{box-shadow:inset 0 0 0 1px var(--accent-ink);border-color:var(--accent-ink)}
.cf-in::placeholder{color:var(--ink-faint)}
select.cf-in{cursor:pointer}
select.cf-in:invalid{color:var(--ink-faint)}
.cf-sel{position:relative;display:block}
.cf-sel::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--accent-ink);font-size:11px}
.cf-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0}

/* ── contact · onboarding node flow ── */
.onb-flow{position:relative;display:flex;align-items:stretch;gap:46px;margin-top:20px}
.onb-node{position:relative;z-index:1;flex:1;min-width:0;background:#fbfcfa;border:1px solid var(--rule);padding:16px 18px 18px;box-shadow:0 16px 36px rgba(10,11,10,.08);animation:onb-float 7s ease-in-out infinite}
.onb-node-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.onb-time{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.onb-node .step-title{margin-top:8px}
.onb-node .step-body{margin-top:6px}
.onb-sock{position:absolute;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:var(--paper);border:1.5px solid var(--accent-ink)}
.onb-sock.in{left:-5.5px}
.onb-sock.out{right:-5.5px;background:var(--accent)}
/* wires are SVG béziers redrawn per-frame from the real socket positions, so they stay connected while nodes float */
.onb-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.onb-wires path{fill:none;stroke:var(--rule);stroke-width:2}
.onb-wires path.onb-pulse{stroke:var(--accent-ink);stroke-dasharray:.22 .78;animation:onb-dash 2.8s linear infinite}
@keyframes onb-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes onb-dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* ── scroll reveal (classes are added by JS; no-JS and reduced-motion users never see the hidden state) ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.19,1,.22,1)}
.rv-in{opacity:1;transform:none}

/* ── chapter scroll-spy — rail of the in-view chapter tints to accent ── */
.ch-num,.ch-lbl{transition:color .45s}
section.ch-live .ch-rail .ch-num{color:var(--accent-ink)}
section.ch-live .ch-rail.dark .ch-num{color:var(--accent)}
section.ch-live .ch-rail .ch-lbl{color:var(--ink)}
section.ch-live .ch-rail.dark .ch-lbl{color:var(--d-text)}

/* ════ responsive (inline styles need !important to override) ════ */
@media (max-width:1100px){
  :root{--rail:120px;--sp:80px}
}
@media (max-width:900px){
  :root{--sp:44px}
  .sec-wrap{padding:0 18px}
  /* chapter rail collapses to a horizontal strip above content */
  .ch-grid{grid-template-columns:1fr}
  .ch-rail{display:flex;gap:10px;align-items:baseline;padding:var(--sp) 0 12px}
  .ch-rail .ch-num,.ch-rail .ch-lbl{margin-top:0}
  .ch-col{border-left:none;padding-top:0 !important;padding-left:0 !important;padding-right:0 !important}
  /* hero */
  .hero-grid{grid-template-columns:1fr !important;gap:26px !important}
  .hero-bullets{grid-template-columns:1fr 1fr !important}
  .hero-bullets>div{padding:12px 12px 0 0 !important;border-right:none !important}
  .hero-reveal{height:90px !important}
  /* ch.01 carousel: vertical liquid accordion — tap a card, its row expands (same easing as desktop) */
  [data-car-grid]{grid-template-columns:1fr !important;grid-template-rows:1fr 1fr 1fr;height:150vw !important;max-height:640px;transition:grid-template-rows .85s cubic-bezier(.19,1,.22,1) !important}
  [data-car]{min-height:0;border-right:none !important;border-bottom:1px solid var(--dark-rule)}
  .car-desc p{font-size:12.5px}
  .car-foot{left:18px;right:18px;bottom:18px}
  .car-num{font-size:40px}
  /* ch.02 tabs become a swipe row; liquid stage goes full-bleed */
  [data-tab-grid]{display:flex !important;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-item{flex:0 0 auto;padding:12px 14px}
  .stage-view,[data-tab-grid],.dash-view{margin-left:-18px;margin-right:-18px}
  /* ch.03 workspace: hotspots off, info cards stack under the image */
  [data-hs-wrap]{aspect-ratio:auto !important;padding-bottom:8px}
  [data-hs-wrap]>img{position:static !important;height:auto !important}
  .hs-zone,[data-hs-veil],[data-hs-hint]{display:none !important}
  .info-card{position:static !important;opacity:1 !important;transform:none !important;width:auto !important;margin:12px 14px 0;pointer-events:auto;padding:14px 16px}
  /* ch.04 */
  .proc-grid{grid-template-columns:1fr !important}
  .proc-grid>div:last-child{border-left:none !important;border-top:1px solid var(--ink)}
  .proc-step{padding:16px 14px}
  .step-time{right:14px;bottom:14px}
  .mock-stage{aspect-ratio:auto !important;overflow-x:auto !important;justify-content:flex-start !important;padding:18px 12px}
  /* ch.05 — routing diagram goes vertical (boxes stacked, wires between) */
  .vend-grid{grid-template-columns:1fr 1fr !important}
  .vend-item{height:auto;padding:12px 14px;gap:8px;border-bottom:1px solid var(--rule)}
  .route-pad{padding:18px 14px 16px !important}
  .route-row{flex-direction:column}
  .route-row>div{flex:0 0 auto !important}
  .route-row>div:nth-child(2),.route-row>div:nth-child(4){padding:10px 0 !important;gap:10px !important}
  .trust-grid{grid-template-columns:1fr 1fr !important;gap:0 16px}
  .trust-col{border-right:none !important;padding:16px 0 0 0 !important}
  .trust-title{white-space:normal}
  /* ch.06 — keep 2-up for density */
  .admin-grid{grid-template-columns:1fr 1fr !important}
  .admin-panel{grid-template-columns:1fr;gap:12px;padding:14px;align-items:start}
  .admin-title{font-size:17px}
  .admin-body{font-size:12px;margin-top:6px}
  /* contact */
  .contact-grid{grid-template-columns:1fr !important;gap:26px !important}
  .contact-grid>div:last-child{max-width:none !important}
  .onb-flow{flex-direction:column;gap:30px}
  .onb-sock.in{left:50%;top:-5.5px;transform:translateX(-50%)}
  .onb-sock.out{right:auto;left:50%;top:auto;bottom:-5.5px;transform:translateX(-50%)}
  .foot-grid{grid-template-columns:1fr !important;gap:10px !important;justify-items:start}
  .foot-grid>div{justify-content:flex-start !important}
  .foot-grid>span:last-child{justify-content:flex-start !important}
}
@media (max-width:560px){
  .sec-h2{font-size:22px}
  .hero-grid h1{font-size:27px !important}
  .admin-panel{padding:12px}
  .info-card{margin:10px 10px 0}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ch-num,.ch-lbl{transition:none}
  .onb-node,.onb-wires path.onb-pulse{animation:none}
}