/* Nenya product page, B variant (local preview, 2026-10-11). Loaded after the v2 layers; reuses their tokens,
   clay surfaces and mini explainers. js/nenya-b.js drives the scroll demo. */

.nb-kick{margin:0 0 14px;color:var(--mut)}
.nv2 h3{font-weight:560;letter-spacing:-.02em;line-height:1.18}  /* the site h3 (the v2 layer set 500) */
.nb-lede{margin:18px 0 0;color:var(--mut)}

/* 1. Hero */
.nv2{--nb-ov:clamp(90px,10vw,170px)}
.nv2-hero.nb-hero{min-height:0;padding:clamp(56px,7vw,110px) 0 calc(var(--nb-ov) + clamp(56px,6vw,96px))}
.nb-hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);align-items:center;gap:clamp(28px,4vw,72px)}
.nb-hero-app{position:relative;display:flex;justify-content:flex-end}
.nb-h1{margin:0;color:var(--plum);max-width:11ch}
.nv2-hero.nb-hero .nb-tag{margin:clamp(18px,2.2vw,30px) 0 0;color:rgba(35,31,43,.78)}
.nb-shots-cmd{display:flex;justify-content:center;margin-top:clamp(36px,4vw,56px)}
.nb-shots-cmd .nb-cmd{margin-top:0}
.nb-stats{max-width:780px;margin-top:clamp(30px,3.6vw,48px)}
.nb-stats-lead{margin:0 0 14px;color:var(--plum);opacity:.65}
.nb-stats dl{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px);margin:0;padding-top:16px;border-top:1px solid rgba(35,31,43,.16)}
.nb-stats dt{color:var(--plum);font-size:clamp(34px,3.6vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1}
.nb-stats dt b{font-weight:500}
.nb-stats dt i{font-style:normal;color:inherit}
.nb-stats dd{max-width:16ch;margin:8px 0 0;color:rgba(35,31,43,.74);font-size:var(--fs-small);line-height:1.35}
.nb-stats-src{max-width:72ch;margin:16px 0 0;color:rgba(35,31,43,.6);font-size:12px;line-height:1.45}

/* Hero habitat: pixel art of an axolotl's lake (js/nenya-b.js section 4) in place of the topographic field */
.nv2-hero.nb-hero{background:#CFE6E6}
.nv2-hero.nb-hero::before{display:none}
.nv2-hero.nb-hero::after{z-index:0;background:linear-gradient(90deg,rgba(238,234,227,.94) 0%,rgba(238,234,227,.74) 33%,rgba(238,234,227,0) 58%)}
.nb-habitat{position:absolute;inset:0;z-index:0;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}

/* The Nenya icon */
.nb-appicon{flex:none;width:64px;height:64px;image-rendering:pixelated}
.nb-core-h .axo{display:inline-block;width:30px;margin-right:10px;vertical-align:-2px}

/* Hero product views: Overview behind, chat in front */
.nb-shots{position:relative;z-index:2;margin-top:calc(-1 * var(--nb-ov));padding-bottom:clamp(90px,9vw,140px);background:linear-gradient(to bottom,transparent 0,transparent var(--nb-ov),var(--chalk) var(--nb-ov))}
.nb-shots-stage{position:relative}
.nb-chip-1{left:clamp(14px,3vw,48px);top:-24px}
.nb-chip-2{position:absolute;z-index:4;left:-18px;bottom:-20px}
/* the app windows follow the Nenya design preview (2026-10-11): system font, macOS greys, hairlines, blue actions */
.app{overflow:hidden;border-radius:10px;background:#F1F1F1;color:#1D1D1F;font:400 13.5px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:0;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 30px 70px rgba(20,28,48,.18)}
.app p{margin:0}
.app small{display:block;color:#8A8A8E;font-size:11.5px;font-weight:400}
.app-lights{display:flex;align-items:center;gap:7px}
.app-lights i{width:11px;height:11px;border-radius:50%;background:#FF5F57}
.app-lights i:nth-child(2){background:#FEBC2E}
.app-lights i:nth-child(3){background:#28C840}
.ag{flex:none;display:inline-grid;place-items:center;width:17px;height:17px;object-fit:contain}
.ag-codex{border-radius:50%;background:#1D1D1F;color:#fff;font:600 7px/1 ui-monospace,Menlo,monospace}
.ag-gem{border-radius:3px;background:#4C68A8;color:#fff;font:700 9px/1 ui-monospace,Menlo,monospace}
/* home window: a floating sidebar card and a centred column */
.app-home{display:grid;grid-template-columns:250px minmax(0,1fr);width:100%;max-width:1060px;min-height:430px;margin:0 auto}
.hm-side{padding:14px 0 14px 14px}
.hm-side .app-lights{margin:0 0 14px 2px}
.hm-card{height:calc(100% - 25px);padding:10px 8px;border-radius:9px;background:#F7F7F7;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.05)}
.hm-h{margin:16px 8px 8px!important;color:#3A3A3C;font-size:11.5px;font-weight:600}
.hm-h:first-child{margin-top:4px!important}
.hm-ag,.hm-ses,.hm-his{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px}
.hm-ag span:last-child,.hm-ses span:last-of-type,.hm-his span:not(.ag){flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.hm-ag small{margin-top:1px}
.hm-grp{display:flex;justify-content:space-between;padding:8px 8px 2px;font-size:12px}
.hm-grp span{color:#8A8A8E}
.hm-ses.sel{background:#F3E1D6}
.hm-ses em{font-style:normal;color:#E0912E;font-size:10px}
.hm-his{color:#6E6E73}
.hm-his small{flex:none;font-size:10px}
.hst{flex:none;width:9px;height:9px;border-radius:50%;background:#E3E3E6}
.hst-dot{background:#E8853C}
.hst-spin{background:none;border:1.6px solid #3A72DB;border-right-color:transparent}
.hm-fold{margin-top:12px!important;padding:4px 6px;color:#6E6E73;font-size:11px}
.hm-main{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 34px 92px}
.hm-main>*{width:100%;max-width:520px}
.hm-title{margin:2px 0 6px!important;color:#6E6E73;font-weight:600;text-align:center}
.hm-return{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:8px;background:#DAE7DF;color:#2B3A31;font-size:13px}
.hm-return span{flex:1}
.hm-return a,.hm-rows a{flex:none;color:#3A72DB;font-weight:500}
.hm-sum{margin-top:6px!important;font-size:14.5px}
.hm-rows{border-radius:8px;background:#E2E2E4;overflow:hidden}
.hm-rows p{display:flex;align-items:center;gap:11px;padding:11px 14px;font-size:13px}
.hm-rows p+p{border-top:1px solid #D2D2D6}
.hm-rows span{flex:1;min-width:0}
.hm-rows em{font-style:normal;color:#8A8A8E}
.hm-rows small{flex:none;font-size:12px}
.ri{flex:none;width:12px;color:#5FA37A;font-style:normal;text-align:center}
.hm-bub{align-self:flex-end;width:auto!important;max-width:min(82%,430px)!important;margin-right:max(0px,calc((100% - 520px) / 2))!important;padding:6px 12px;border-radius:13px;background:#E1E1E1;color:#3A3A3C;font-size:11.5px}
.hm-chip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;background:#F7F7F7;box-shadow:0 0 0 1px rgba(0,0,0,.14)}
.hm-chip p{flex:1;min-width:0}
.hm-chip b{font-weight:600}
.hm-chip b em{margin-left:4px;color:#6E6E73;font-size:10px;font-style:normal;font-weight:400}
.hm-btn{flex:none;padding:4px 12px;border-radius:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18);font-size:12px}
.hm-comp{position:absolute;left:50%;bottom:18px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;width:calc(100% - 68px)!important;max-width:520px;padding:11px 13px;border-radius:9px;background:#F7F7F7;box-shadow:0 0 0 1px rgba(0,0,0,.14),inset 0 0 0 1px rgba(58,114,219,.18);transform:translateX(-50%)}
.hm-comp p{color:#A1A1A6}
.hm-comp small{grid-row:2;font-size:10px}
.hm-comp i{grid-row:1/3;grid-column:2;align-self:end;width:17px;height:17px;border-radius:50%;background:#D6D6DA}
/* session window on its Steps tab */
.app-chat{position:relative;z-index:3;width:100%;max-width:470px}
.app-sw{background:#fff}
.sw-top{display:flex;align-items:center;gap:10px;padding:14px 16px 12px}
.sw-title{flex:1;min-width:0}
.sw-title b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sw-on{color:#5FA37A}
.sw-acts{display:flex;gap:10px;color:#3A3A3C;font-size:11px}
.sw-tabs{display:flex;justify-content:center;gap:2px;margin:0 auto 12px!important;padding:2px;width:max-content;border-radius:7px;background:#ECECEE;font-size:12px}
.sw-tabs span{padding:3px 9px;border-radius:5px}
.sw-tabs .on{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.sw-steps{margin:0;padding:12px 16px 18px;list-style:none;border-top:1px solid #E5E5EA}
.sw-steps li{display:grid;grid-template-columns:54px 20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 6px;border-radius:6px;font-size:13.5px}
.sw-steps time{color:#8A8A8E;font-size:11px;text-align:right}
.si{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;box-shadow:0 0 0 1px #C9C9CE;color:#6E6E73;font:normal 9px/1 -apple-system,sans-serif}
.sw-warn{color:#E0912E}
.sw-nen{grid-template-columns:54px minmax(0,1fr)!important;margin:0 0 4px 0;padding:0 6px!important;background:none!important}
.sw-nen img{grid-column:1;justify-self:end;width:15px;height:15px;border-radius:3px;image-rendering:pixelated}
.sw-nen span{grid-column:2;padding:8px 11px;border-radius:7px;background:#DDE4F7;color:#24324F}
.sw-hot{background:#DCE3F6}
.sw-hot a{color:#3A72DB;font-size:10.5px}
.sw-steps li{opacity:0;animation:nb-in .4s var(--ease) forwards}
.sw-steps .s1{animation-delay:.3s}.sw-steps .s2{animation-delay:.8s}.sw-steps .s3{animation-delay:1.4s}.sw-steps .s4{animation-delay:2s}.sw-steps .s5{animation-delay:2.6s}.sw-steps .s6{animation-delay:3.2s}
@keyframes nb-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* 2. Demo: launch week, Claude Code on its own (its terminal) and with Nenya (the session window), on the pixel lake */
.nb-demo{position:relative}
.nb-head{padding-top:clamp(40px,5vw,72px)}
.nb-player{display:none;margin-top:clamp(20px,2.4vw,32px);padding:0 var(--gut)}
.nb-demo.nb-live{padding-bottom:clamp(64px,8vw,120px)}
.nb-demo.nb-live .nb-player{display:block}
.nb-frame{max-width:1120px;margin:0 auto;padding:18px;border-radius:8px;background:#CFE6E6 var(--hab,none) center/cover no-repeat;image-rendering:pixelated;box-shadow:inset 0 0 0 1px var(--line)}
.nb-stage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;height:clamp(520px,46vw,600px)}
.nb-brief{padding:14px 20px;border-radius:8px;background:rgba(255,253,249,.94);box-shadow:0 0 0 1px rgba(35,31,43,.12)}
.nb-brief-t{margin:0;font-size:clamp(15px,1.4vw,19px);font-weight:450;letter-spacing:-.01em;line-height:1.3}
.nb-brief-t b{font-weight:600}
.nb-panes{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-height:0}
.nb-pane{display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0}
.nb-score-t small b{display:inline-block}
.nb-score-t small b.bump{animation:nb-bump .35s var(--ease)}
@keyframes nb-bump{40%{transform:scale(1.35)}}
.nb-term,.nb-app{display:grid;min-height:0;overflow:hidden;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.14),0 18px 40px rgba(20,28,48,.18)}
.nb-wtop{display:flex;align-items:center;gap:10px;padding:10px 14px}
.nb-wtop .app-lights{flex:none}
/* on its own: Claude Code in a terminal; it waits at the prompt after every sub-task */
.nb-term{grid-template-rows:auto minmax(0,1fr) auto;background:#1C1C21;color:#D6D6DA;font:400 12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.nb-term .nb-wtop{border-bottom:1px solid #2C2C33;color:#8E8E96;font-size:11.5px}
.nb-term .nb-wtop span{flex:1;text-align:center;margin-right:40px}
.cc-hi{padding:7px 10px;border:1px solid #D77757;border-radius:6px;color:#8E8E96}
.cc-hi p{margin:0}
.cc-hi p:first-child{color:#E6E6EA}
.cc-hi b,.cc-spin b{color:#D77757;font-weight:400}
.nb-term .nb-feed{gap:5px}
.nb-term .nb-feed .m{margin:0;color:#D6D6DA}
.nb-term .nb-feed .you{margin-top:6px;color:#9C9CA6}
.nb-term .nb-feed .you::before{content:"> "}
.nb-term .nb-feed .agent::before{content:"⏺ ";color:#E6E6EA}
.nb-term .nb-feed .tool::before{content:"⏺ ";color:#6BC46D}
.nb-term .nb-feed .tool b{color:#F2F2F4;font-weight:600}
.nb-term .nb-feed .res{display:block;padding-left:2ch;color:#8E8E96}
.nb-term .nb-feed .res::before{content:"⎿  "}
.nb-term .nb-feed .tag{align-self:flex-start;margin:2px 0 0;padding:2px 8px;border-radius:3px;background:rgba(224,98,69,.2);color:#F6A48F;font-weight:500}
.nb-term .nb-feed .tag::before{content:"✗ "}
.cc-bot{padding:0 12px 10px}
.cc-spin{margin:0 0 6px;color:#D77757;visibility:hidden}
.cc-spin.on{visibility:visible}
.cc-spin b{display:inline-block;animation:cc-turn 1.2s steps(6) infinite}
.cc-spin small{color:#6E6E76;font-size:inherit}
@keyframes cc-turn{to{transform:rotate(360deg)}}
.cc-in{margin:0;min-height:2.4em;padding:6px 10px;border:1px solid #4A4A52;border-radius:6px;color:#F2F2F4}
.cc-in::before{content:"> ";color:#9C9CA6}
.cc-caret{display:inline-block;width:.55em;height:1.1em;margin-left:1px;vertical-align:-.2em;background:#D6D6DA;animation:cc-blink 1s steps(1) infinite}
.typing .cc-caret{animation:none}
@keyframes cc-blink{50%{opacity:0}}
.cc-hint{margin:4px 2px 0;color:#6E6E76;font-size:11px}
/* with Nenya: the home window from the design preview (sessions by project, run chips, a needs-you card, Ask Nenya) */
.nb-home{grid-template-columns:minmax(140px,32%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:#F1F1F1;color:#1D1D1F;font:400 13px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif}
.nh-side{display:flex;flex-direction:column;min-height:0;padding:12px 0 12px 12px}
.nh-side .app-lights{margin:0 0 12px 2px}
.nh-card{flex:1;min-height:0;overflow:hidden;padding:8px 6px;border-radius:9px;background:#F7F7F7;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.05)}
.nh-card p{margin:0}
.nh-card .hm-h{margin:14px 6px 6px!important}
.nh-card .hm-h:first-child{margin-top:2px!important}
.nh-card .hm-grp{padding:6px 6px 2px}
.nh-card .hm-ses,.nh-card .hm-his{gap:7px;padding:5px 6px;font-size:12.5px}
.nh-card .hm-ses span,.nh-card .hm-his span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.nh-card .ag{width:14px;height:14px}
.nh-card .new{animation:nb-in .3s var(--ease) both}
.nh-card .hst-spin{animation:nh-spin .9s linear infinite}
@keyframes nh-spin{to{transform:rotate(360deg)}}
.nh-g{flex:none;font-style:normal;font-size:11px}
.nh-g.off{color:#D9534F}
.nh-main{position:relative;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;min-width:0;min-height:0;padding:12px 14px 12px}
.nh-pill{grid-row:1;justify-self:center;margin:2px 0 10px;color:#3A3A3C;font-size:12.5px;font-weight:600}
.nh-pill.need::before{content:"● ";color:#E8853C}
.nh-need{grid-row:2;display:none;align-items:center;gap:10px;margin:0 0 10px;padding:10px 12px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.nh-need.on{display:flex;animation:nb-in .3s var(--ease) both}
.nh-need p{flex:1;margin:0;font-size:12.5px;font-weight:600;line-height:1.35}
.nh-btn{flex:none;padding:4px 11px;border-radius:5px;background:#0B57D9;color:#fff;font-size:12px;transition:filter .12s,transform .12s}
.nh-btn.press{filter:brightness(.78);transform:scale(.95)}
.nb-home .nb-feed{grid-row:3;gap:8px;padding:0 1px 10px}
.nb-home .nb-comp{grid-row:4}
.nh-bub{align-self:flex-end;max-width:90%;margin:0;padding:6px 11px;border-radius:13px;background:#E1E1E1;color:#3A3A3C;font-size:12.5px}
.nh-chip{display:grid;grid-template-columns:16px minmax(0,1fr) auto auto;align-items:center;gap:1px 10px;padding:8px 10px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.16);transition:box-shadow .3s}
.nh-chip>.ag{grid-column:1;grid-row:1/3;width:16px;height:16px}
.nh-ct{display:contents}
.nh-t{grid-column:2;grid-row:1}
.nh-chip small{grid-column:2;grid-row:2}
.nh-a{grid-column:3;grid-row:1/3}
.nh-chip .hm-btn{grid-column:4;grid-row:1/3}
/* off course and steered back: the sentence runs the full width under the title */
.nh-chip.off small,.nh-chip.rec small{grid-column:2/5}
.nh-chip.off>.ag,.nh-chip.rec>.ag{grid-row:1;align-self:center}
.nh-chip.off .hm-btn,.nh-chip.rec .hm-btn{grid-row:1}
.nh-chip.rec .nh-a{grid-column:2/4;grid-row:3;justify-self:start;margin-top:3px}
.nh-t{display:flex;align-items:baseline;gap:6px;margin:0}
.nh-t b{min-width:0;overflow:hidden;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.nh-t em{flex:none;color:#6E6E73;font-size:11px;font-style:normal}
.nh-t em:not(:empty)::before{content:"◎ "}
.nh-chip small{display:block;color:#6E6E73;font-size:11.5px;line-height:1.35}
.nh-chip.off .nh-t em{color:#D9534F}
.nh-chip.off .nh-t em::before{content:"⑂ "}
.nh-chip.rec{box-shadow:0 0 0 1px #8CCBA4}
.nh-chip.rec small,.nh-chip.off small{color:#3A3A3C}
.nh-a{color:#0B57D9;font-size:12px}
.nh-a:empty{display:none}
.nh-chip .hm-btn{padding:3px 10px;font-size:11.5px}
.nh-cursor{position:absolute;left:0;top:0;z-index:3;width:15px;height:21px;fill:#1D1D1F;stroke:#fff;stroke-width:1.3;opacity:0;pointer-events:none;transition:transform .9s var(--ease),opacity .25s,scale .12s}
.nh-cursor.on{opacity:1}
.nh-cursor.tap{scale:.82}
.nb-comp{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:9px 12px;border-radius:9px;background:#F7F7F7;box-shadow:0 0 0 1px rgba(0,0,0,.14),inset 0 0 0 1px rgba(58,114,219,.18)}
.nb-comp-t{margin:0;min-height:1.4em}
.nb-comp-t em{font-style:normal;color:#A1A1A6}
.nb-comp small{grid-row:2;color:#8A8A8E;font-size:10px}
.nb-comp i{grid-row:1/3;grid-column:2;align-self:end;width:16px;height:16px;border-radius:50%;background:#D6D6DA}
/* the scoreboard above each window: who it is, what you put in, and parts done (a segment each, a big count).
   When the last part lands the Nenya scoreboard turns green and the window glows. */
.nb-score{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);padding:8px 14px 8px 14px;border-radius:8px;background:rgba(255,253,249,.96);color:var(--plum);box-shadow:0 0 0 1px rgba(35,31,43,.12);transition:background .45s,color .45s,box-shadow .45s}
.nb-score-t{flex:none;margin:0;line-height:1.25}
.nb-score-t>b{display:block;font-size:14px;font-weight:600;white-space:nowrap}
.nb-score-t small{display:block;color:rgba(35,31,43,.62);font-size:12px;white-space:nowrap;transition:color .45s}
.nb-score-t small b{font-weight:600}
.nb-seg{flex:1;display:flex;gap:3px;min-width:60px}
.nb-seg i{flex:1;height:10px;border-radius:2px;background:rgba(35,31,43,.1);transition:background .3s}
.nb-seg i.on{background:#3E8A5E;animation:nb-seg .5s var(--ease)}
@keyframes nb-seg{0%{transform:scaleY(1)}35%{transform:scaleY(1.9);filter:brightness(1.25)}100%{transform:scaleY(1)}}
.nb-score-n{flex:none;margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.nb-score-n b{display:inline-block;font-weight:600;transition:color .45s}
.nb-score-n span{margin-left:2px;color:rgba(35,31,43,.55);font-size:13px;font-weight:500;letter-spacing:0;transition:color .45s}
.nb-n .nb-score-n b{color:#3E8A5E}
.nb-score-n b.bump{animation:nb-big .5s var(--ease)}
@keyframes nb-big{30%{transform:scale(1.55);text-shadow:0 0 16px rgba(62,138,94,.55)}}
.nb-score.all{background:#3E8A5E;color:#fff;box-shadow:0 0 0 1px #2F6E4A,0 0 0 6px rgba(62,138,94,.22)}
.nb-score.all .nb-score-t small,.nb-score.all .nb-score-n span{color:rgba(255,255,255,.82)}
.nb-score.all .nb-score-n b{color:#fff}
.nb-score.all .nb-seg i.on{background:#fff}
.nb-app.all{animation:nb-glow 1.6s ease-out both}
@keyframes nb-glow{0%{box-shadow:0 0 0 1px rgba(0,0,0,.14),0 18px 40px rgba(20,28,48,.18)}25%{box-shadow:0 0 0 3px #3E8A5E,0 0 0 12px rgba(62,138,94,.25),0 18px 40px rgba(20,28,48,.18)}100%{box-shadow:0 0 0 2px #3E8A5E,0 0 0 6px rgba(62,138,94,.14),0 18px 40px rgba(20,28,48,.18)}}
/* the check that flies from a finished part into the count */
.nb-fly{position:absolute;left:0;top:0;z-index:6;width:22px;height:22px;border-radius:50%;background:#3E8A5E;color:#fff;font-size:13px;font-weight:700;line-height:22px;text-align:center;box-shadow:0 0 0 3px rgba(62,138,94,.25);pointer-events:none}
.nb-fly.go{transition:transform .56s cubic-bezier(.45,0,.25,1)}
/* a Nenya line inside a chip (the session window's callout style) and the flash when a part is done */
.nh-note{grid-column:2/5;display:flex;gap:7px;align-items:flex-start;margin:6px 0 1px!important;padding:6px 9px;border-radius:6px;background:#DDE4F7;color:#24324F;font-size:11.5px;line-height:1.35;animation:nb-in .3s var(--ease) both}
.nh-note img{flex:none;width:12px;height:12px;margin-top:1px;border-radius:2px;image-rendering:pixelated}
.nh-chip.just{animation:nh-flash 1.1s ease-out}
.nh-chip.just small{color:#3E8A5E;font-weight:600}
@keyframes nh-flash{0%,25%{background:#DDF0E3;box-shadow:0 0 0 1px #8CCBA4}100%{background:#fff}}
/* markers by a chip: remembered, drift caught, fixed, all done */
.nb-call{position:absolute;left:0;top:0;z-index:5;padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 0 0 1px rgba(35,31,43,.2),2px 2px 0 var(--plum);pointer-events:none;animation:nb-call .35s var(--ease) both;transition:opacity .3s}
.nb-call.out{opacity:0}
.nb-call.memory{background:var(--ultra);color:#fff}
.nb-call.drift{background:var(--gold);color:var(--plum)}
.nb-call.fix,.nb-call.done{background:#3E8A5E;color:#fff}
.nb-call.drift::before{content:"⑂ "}
.nb-call.wait{background:var(--plum);color:#fff}
.nb-score-x{display:inline-block;margin-left:8px;color:#3E8A5E;font-size:13px;font-style:normal;font-weight:600;letter-spacing:0}
.nb-score-x.bump{animation:nb-bump .4s var(--ease)}
.nb-score.all .nb-score-x{color:#fff}
.nb-call.fix::before,.nb-call.done::before{content:"✓ "}
@keyframes nb-call{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
/* the end card on each side: what it finished */
.nb-pane{position:relative}
.nb-sum{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;padding:16px 18px 14px;border-radius:6px;background:#FFFDF9;color:var(--plum);box-shadow:0 0 0 1px rgba(35,31,43,.16),var(--offset,3px 3px 0 #231F2B);opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .45s var(--ease);pointer-events:none}
.nb-sum.on{opacity:1;transform:none}
.nb-sum-n{position:absolute;top:12px;right:16px;margin:0;color:rgba(35,31,43,.4);font-size:clamp(30px,3vw,42px);font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.nb-n .nb-sum-n{color:#3E8A5E}
.nb-sum-h{padding-right:90px}
.nb-sum-h{margin:0 0 10px;font-size:clamp(17px,1.6vw,22px);font-weight:560;letter-spacing:-.015em;line-height:1.2}
.nb-sum-l{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px;margin:0;padding:0;list-style:none;font-size:14px}
.nb-sum-l li{display:flex;gap:8px;color:rgba(35,31,43,.42)}
.nb-sum-l li::before{content:"○";flex:none;width:1em;text-align:center}
.nb-sum-l li.done{color:var(--plum)}
.nb-sum-l li.done::before{content:"✓";color:#3E8A5E;font-weight:600}
.nb-sum-f{margin:10px 0 0;color:rgba(35,31,43,.72);font-size:13.5px;line-height:1.4}
/* both feeds fill from the top; once full, older lines fade out at the top */
.nb-feed{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:10px 14px 12px}
.nb-feed>*{flex:none}
.nb-feed.scrolled{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px);mask-image:linear-gradient(to bottom,transparent 0,#000 40px)}
.nb-feed>.new{animation:nb-in .3s var(--ease) both}
.nb-foot{display:flex;align-items:center;gap:12px;padding:0 2px}
.nb-pp{position:relative;flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,253,249,.92);cursor:pointer}
.nb-pp::before,.nb-pp::after{content:"";position:absolute;top:10px;width:3px;height:10px;border-radius:1px;background:var(--plum)}
.nb-pp::before{left:11px}
.nb-pp::after{left:16px}
.nb-pp.paused::before{left:12px;top:9px;width:0;height:0;border-radius:0;background:none;border-left:9px solid var(--plum);border-top:6px solid transparent;border-bottom:6px solid transparent}
.nb-pp.paused::after{display:none}
.nb-prog{flex:1;height:4px;margin:0;border-radius:2px;background:rgba(255,253,249,.7);overflow:hidden}
.nb-prog i{display:block;width:0;height:100%;background:var(--plum)}

/* The story as two columns (reduced motion or scripts off); visually hidden once the demo runs */
.nb-story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);padding-top:clamp(24px,3vw,40px);padding-bottom:clamp(64px,8vw,120px)}
.nb-demo.nb-live .nb-story{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nb-script-h{margin:0 0 10px;font-weight:560}
.nb-script ol{margin:0;padding:0;list-style:none}
.nb-script li{padding:7px 0;border-top:1px solid var(--line);font-size:15px}
.nb-script li[data-k=you]{font-style:italic}
.nb-script li[data-k=you]::before{content:"You: ";font-style:normal;color:var(--mut)}
.nb-script li[data-k=spin],.nb-script li[data-k=state],.nb-script li[data-k=run]{display:none}
.nb-script li[data-k=sum]{font-weight:560}
.nb-script li[data-k=tag]{font-weight:560}
.nb-script-x li[data-k=tag]{color:var(--verm)}
.nb-script-n li[data-k=tag]{color:var(--ultra)}

/* 3. Architecture */
.nb-arch .h2{max-width:20ch}
.nb-plug{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:clamp(24px,4vw,64px);margin-top:clamp(32px,4vw,56px);padding:clamp(22px,3vw,36px);border-radius:28px;background:#2A2533;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.nb-plug-txt h3{margin:0 0 10px}
.nb-plug-txt p{margin:0;font-size:var(--fs-body);line-height:1.55}
.nb-plug-sm{margin-top:16px!important;color:var(--mut);font-size:var(--fs-small)!important}
.nb-stack{display:grid;gap:8px}
.nb-sl{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;border-radius:16px;background:#3A3446;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.nb-sl .mono{color:var(--mut)}
.nb-sl p{margin:0;font-size:16px;font-weight:500}
.nb-sl b{font-weight:500}
.nb-sl small{color:var(--mut);font-size:10.5px}
.nb-sl-n{background:linear-gradient(160deg,#4C46F0,#3A34E6 55%,#2B26C4);box-shadow:inset 4px 4px 10px rgba(255,255,255,.18),inset -6px -6px 14px rgba(0,0,40,.28),0 16px 34px rgba(10,8,70,.45)}
.nb-sl-n .mono{color:rgba(238,234,227,.82)}
.nb-sl .nb-plug-tag{padding:4px 9px;border-radius:999px;background:var(--gold);color:var(--plum);font-size:10px;font-style:normal}
.nb-plug .nb-sl-n{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden;opacity:0;transform:translateX(48px);transition:max-height .6s var(--ease) .5s,padding .6s var(--ease) .5s,opacity .5s ease .9s,transform .6s var(--ease) .9s}
.nb-plug.in .nb-sl-n{max-height:80px;padding-top:14px;padding-bottom:14px;opacity:1;transform:none}
.nb-cyc{display:grid}
.nb-cyc b{grid-area:1/1;opacity:0;animation:nb-cyc 7.5s infinite}
.nb-cyc b:nth-child(2){animation-delay:2.5s}
.nb-cyc b:nth-child(3){animation-delay:5s}
.nb-sl:nth-child(3) .nb-cyc b{animation-delay:1.2s}
.nb-sl:nth-child(3) .nb-cyc b:nth-child(2){animation-delay:3.7s}
.nb-sl:nth-child(3) .nb-cyc b:nth-child(3){animation-delay:6.2s}
@keyframes nb-cyc{0%{opacity:0;transform:translateY(6px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-6px)}}
.nb-dia{display:grid;grid-template-columns:minmax(150px,1fr) 56px minmax(0,2.5fr) 56px minmax(150px,1fr);align-items:stretch;margin-top:clamp(36px,5vw,64px)}
.nb-col{display:flex;flex-direction:column;justify-content:center;gap:18px}
.nb-col-r{justify-content:space-between;padding:58px 0 10px}
.nb-node{padding:18px;border-radius:20px;background:#2E2938;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px rgba(0,0,0,.3)}
.nb-node .mono{margin:0 0 6px;color:var(--mut)}
.nb-node-t{margin:0;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.25}
.nb-tools{background:#2A2533;box-shadow:inset 0 0 0 1px rgba(238,234,227,.16),0 20px 40px rgba(0,0,0,.3)}
.nb-core{padding:18px;border-radius:28px;background:linear-gradient(160deg,#4C46F0,#3A34E6 55%,#2B26C4);box-shadow:inset 6px 6px 14px rgba(255,255,255,.18),inset -8px -8px 18px rgba(0,0,40,.28),0 30px 60px rgba(10,8,70,.45)}
.nb-core-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 4px 14px}
.nb-core-h span{font-size:26px;font-weight:500;letter-spacing:-.03em}
.nb-core-h small{color:rgba(238,234,227,.75)}
.nb-layers{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.nb-layers li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:#FFFDF9;color:var(--plum);box-shadow:var(--clay-hi),var(--clay-lo),0 8px 18px rgba(0,0,40,.18);opacity:0;transform:translateY(12px)}
.nb-dia.in .nb-layers li{animation:nb-in .6s var(--ease) forwards}
.nb-dia.in .nb-layers li:nth-child(2){animation-delay:.1s}
.nb-dia.in .nb-layers li:nth-child(3){animation-delay:.2s}
.nb-dia.in .nb-layers li:nth-child(4){animation-delay:.3s}
.nb-dia.in .nb-layers li:nth-child(5){animation-delay:.4s}
.nb-dia.in .nb-layers li:nth-child(6){animation-delay:.5s}
.nb-layers b{font-size:16px;font-weight:560}
.nb-layers p{margin:2px 0 0;font-size:14px;line-height:1.4;color:rgba(35,31,43,.74)}
.nb-layers small{max-width:15ch;font-size:10px;line-height:1.3;text-align:right;color:rgba(35,31,43,.5)}
.nb-ln{color:var(--ultra)}
.nb-layers .nb-guard{background:var(--gold)}
.nb-wire{position:relative}
.nb-wire i{position:absolute;left:0;right:0;height:2px;background:rgba(238,234,227,.25)}
.nb-wire i::after{content:"";position:absolute;top:-2px;left:0;width:16px;height:6px;border-radius:3px;background:var(--gold);animation:nb-flow 2.2s linear infinite}
.nb-wire i.w-m::after{animation-delay:-.8s}
.nb-wire i.w-t::after{animation-delay:-1.5s}
@keyframes nb-flow{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 16px);opacity:0}}
.w-a{top:50%}
.w-m{top:96px}
.w-t{bottom:52px}
.gate{position:absolute;left:50%;top:-11px;width:5px;height:24px;border-radius:3px;background:var(--verm);transform:translateX(-50%)}
.nb-kt{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,48px)}
.nb-kt-c{padding:22px 24px;border-radius:22px;background:#2E2938}
.nb-kt-n{background:#2C2896}
.nb-kt h3{margin:0 0 12px}
.nb-kt ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.nb-kt li{display:flex;gap:10px;font-size:var(--fs-body);line-height:1.45}
.nb-kt li::before{content:"•";color:var(--mut)}
.nb-kt-n li::before{content:"✓";color:var(--gold)}
.nb-note{max-width:90ch;margin:22px 0 0;color:var(--mut);font-size:var(--fs-small)}

/* 4. Benefits */
.nb-ben .h2{max-width:20ch;margin-bottom:clamp(24px,3vw,40px)}
.nb-ben-grid{grid-template-columns:repeat(4,1fr)}
.nb-ben .mini{grid-template-rows:100px auto auto;align-content:start;gap:6px;padding:14px 16px 18px}
.nb-ben .mini h3{margin-top:8px;font-size:var(--fs-h3);font-weight:560;letter-spacing:-.02em;line-height:1.18}
.nb-ben .mini p{margin:0;font-size:var(--fs-small);line-height:1.45;color:rgba(35,31,43,.72)}
.nb-ben .mini:nth-child(5){animation-delay:-1s}
.nb-ben .mini:nth-child(6){animation-delay:-3s}
.nb-ben .mini:nth-child(7){animation-delay:-5s}
.nb-ben .mini:nth-child(8){animation-delay:-7s}

/* 5. Evidence additions */
.nb-lede-proof{max-width:62ch}
/* 5. Benchmarks: three small charts, directly labelled */
.nb-ms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(28px,3.4vw,48px);padding-top:clamp(20px,2vw,28px);border-top:1px solid var(--line)}
.nb-m{display:flex;flex-direction:column;margin:0}
.nb-m h3{margin:0}
.nb-m h3 em{font-style:normal;color:var(--ultra)}
.nb-m-sub{margin:6px 0 18px;color:var(--mut);font-size:var(--fs-small);line-height:1.4}
.nb-rows{display:grid;gap:12px}
.nb-row p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 5px;font-size:var(--fs-small);line-height:1.3}
.nb-row p span,.nb-row p b{color:rgba(35,31,43,.7)}
.nb-row p b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.nb-row i{display:block;height:6px;background:rgba(35,31,43,.07)}
.nb-row s{display:block;width:0;height:100%;background:rgba(35,31,43,.3);transition:width 1s var(--ease)}
.nb-row.us p span,.nb-row.us p b{color:var(--plum);font-weight:500}
.nb-row.us s{background:var(--ultra)}
.nb-m figcaption{margin-top:auto;padding-top:16px;color:var(--mut);font-size:12px;line-height:1.4}
.nb-proof-src{margin:clamp(24px,3vw,40px) 0 0;color:var(--mut);font-size:12px}

/* Invite line (replaces the install command) */
.nb-ask{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.nb-ask>span{color:var(--mut);font-size:var(--fs-small)}
.nb-shots-cmd .nb-ask{justify-content:center}
.nb-shots-cmd .nb-ask>span{color:var(--plum);font-size:var(--fs-body);font-weight:450}
.nb-install .nb-ask{justify-content:center;margin-top:clamp(20px,2.4vw,32px)}
.nb-install .nb-ask>span{color:var(--plum);font-size:var(--fs-body);font-weight:450}
.nb-final .nb-ask{margin-top:clamp(24px,3vw,40px)}
.nb-final .nb-ask>span{color:rgba(35,31,43,.86);font-size:var(--fs-body);font-weight:450}
.nb-talk{display:inline-block;margin-top:16px;font-weight:500;text-decoration:underline;text-underline-offset:5px}
.nb-get .nb-ask .btn,.nb-install .nb-ask .btn,.nb-shots-cmd .nb-ask .btn{border:0;box-shadow:inset 4px 4px 10px rgba(255,255,255,.18),inset -5px -6px 12px rgba(0,0,0,.35),0 14px 26px rgba(35,31,43,.25)}

/* Get Nenya band */
.nb-get{padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line)}
.nb-get-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
.nb-get-h{flex:1 1 auto;margin:0}
.nb-get .nb-cmd{margin-top:0}
.nb-get .btn{border:0;box-shadow:inset 4px 4px 10px rgba(255,255,255,.18),inset -5px -6px 12px rgba(0,0,0,.35),0 14px 26px rgba(35,31,43,.25)}

/* Get Nenya, benefits and benchmarks: tighter, and the colours vary (gold band, pixel-lake tray, blue) */
.nb-get{padding:clamp(28px,3.4vw,44px) 0}
.nb-get .nb-ask>span{color:var(--plum);font-size:var(--fs-body);font-weight:450}
.nb-ben.pad,.nb-proof.pad{padding:clamp(52px,6vw,92px) 0}
.nb-ben .bd-board.nb-ben-grid{background:#CFE6E6 var(--hab,none) center/cover no-repeat;image-rendering:pixelated}
.nb-ben .mini{display:flex;flex-direction:column;justify-content:flex-start;background:rgba(255,253,249,.8);-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
.nb-ben .mini h3{order:1;margin-top:2px}
.nb-ben .mini p{order:2}
.nb-ben .mini .xp{order:3;margin-top:14px}
.nb-proof .nb-m h3 em{color:var(--gold)}
.nb-proof .nb-m-sub,.nb-proof .nb-m figcaption,.nb-proof .nb-proof-src{color:var(--mut)}
.nb-proof .nb-row p span,.nb-proof .nb-row p b{color:rgba(238,234,227,.78)}
.nb-proof .nb-row.us p span,.nb-proof .nb-row.us p b{color:var(--chalk)}
.nb-proof .nb-row i{background:rgba(238,234,227,.16)}
.nb-proof .nb-row s{background:rgba(238,234,227,.5)}
.nb-proof .nb-row.us s{background:var(--gold)}

/* 6. Install: one command */
.nb-install-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.nb-install .h2{max-width:none}
.nb-install-sub{margin:14px 0 0;color:var(--mut)}
.nb-cmd{display:inline-flex;align-items:center;gap:12px;max-width:100%;margin-top:clamp(24px,3vw,36px);padding:8px 8px 8px 20px;border-radius:999px;background:#FFFDF9;box-shadow:var(--clay-hi),var(--clay-lo),var(--clay-drop);font:400 clamp(14px,1.3vw,17px)/1 var(--mono)}
.nb-cmd-p{color:var(--mut)}
.nb-cmd code{min-width:0;overflow:hidden;color:var(--plum);font:inherit;white-space:nowrap;text-overflow:ellipsis;user-select:all}
.nb-copy{display:inline-flex;flex:none;align-items:center;gap:7px;height:38px;padding:0 15px;border:0;border-radius:999px;background:var(--plum);color:var(--chalk);font:500 13px/1 var(--sans);cursor:pointer;transition:transform .2s var(--ease),background .2s}
.nb-copy:hover{transform:translateY(-1px)}
.nb-copy svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.nb-copy.done{background:var(--ultra)}
.nb-copy-ta{position:fixed;left:-9999px;top:0;opacity:0}
.nb-inv{margin-top:18px;font-weight:500;text-decoration:underline;text-underline-offset:5px}

/* 7. Use cases */
.nb-uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(28px,4vw,48px)}
.nb-uc{display:flex;flex-direction:column;gap:10px;padding:22px 22px 18px;border-radius:26px;background:#FFFDF9;color:var(--plum);box-shadow:var(--clay-hi),var(--clay-lo),var(--clay-drop);opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.nb-uc.in{opacity:1;transform:none}
.nb-uc:nth-child(3n+2){transition-delay:.08s}
.nb-uc:nth-child(3n){transition-delay:.16s}
.nb-uc-tag{align-self:flex-start;margin:0;padding:5px 10px;border-radius:999px;background:var(--plum);color:var(--chalk)}
.nb-uc h3{margin:6px 0 0}
.nb-uc-d{margin:0;font-size:var(--fs-small);line-height:1.45;color:rgba(35,31,43,.75)}
.nb-uc dl{display:grid;gap:8px;margin:6px 0 0}
.nb-uc dl div{padding:10px 12px;border-radius:14px}
.nb-uc .bad{background:rgba(224,98,69,.1)}
.nb-uc .good{background:rgba(58,52,230,.08)}
.nb-uc dt{margin:0 0 4px}
.nb-uc .bad dt{color:#B4432A}
.nb-uc .good dt{color:var(--ultra)}
.nb-uc dd{margin:0;font-size:var(--fs-small);line-height:1.4}
.nb-uc-len{display:flex;align-items:baseline;justify-content:space-between;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line)}
.nb-uc-len .mono{color:var(--mut)}
.nb-uc-len b{font-weight:560}

/* 8. Closing CTA */
.nb-final{position:relative;overflow:hidden;padding:clamp(90px,11vw,170px) 0;background:#CFE6E6}
.nb-final::before{display:none}
.nb-final::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(238,234,227,.94) 0%,rgba(238,234,227,.74) 34%,rgba(238,234,227,0) 60%)}
.nb-final .wrap{position:relative;z-index:2}
.nb-final .cl-deco{z-index:1}
.nb-final-h{margin:0;max-width:12ch;color:var(--plum)}
.nb-final-tag{margin:clamp(18px,2.2vw,30px) 0 0;color:var(--plum)}
.nb-final .btn{border:0;transition:transform .2s var(--ease),box-shadow .2s}
.nb-final .btn.primary{box-shadow:inset 4px 4px 10px rgba(255,255,255,.18),inset -5px -6px 12px rgba(0,0,0,.35),0 14px 26px rgba(35,31,43,.25)}
.nb-final .btn.ghost{background:#FFFDF9;box-shadow:var(--clay-hi),var(--clay-lo),0 12px 24px rgba(35,31,43,.12)}
.nb-final .btn:hover{transform:translateY(-2px)}
.nb-cmd-final{margin-top:22px}

/* Responsive */
@media (max-width:1100px){
  .app-home{grid-template-columns:minmax(0,1fr)}
  .app-home .hm-side{display:none}
  .nb-hero-grid{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}
  .nb-chip-2{display:none}
  .nb-ben-grid{grid-template-columns:repeat(2,1fr)}
  .nb-uc-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .nb-plug{grid-template-columns:1fr}
  .nb-sl{grid-template-columns:86px minmax(0,1fr) auto}
  .nb-dia{grid-template-columns:1fr}
  .nb-col-r{flex-direction:column;padding:0;gap:12px}
  .nb-wire{height:34px}
  .nb-wire i{top:0;bottom:0;left:50%;right:auto;width:2px;height:auto}
  .nb-wire i::after{display:none}
  .nb-wire i.w-t{display:none}
  .nb-layers small{display:none}
  .nb-kt{grid-template-columns:1fr}
  .nb-hero-grid{grid-template-columns:1fr}
  .nb-hero-app{justify-content:flex-start}
  .nb-ms{grid-template-columns:1fr}
  .nb-scrub{grid-template-columns:1fr}
  .nb-scrub output{text-align:left}
  .nb-r{grid-template-columns:1fr;gap:8px}
}
@media (max-width:760px){
  .nv2{--nb-ov:70px}
  .nb-shots{padding-bottom:56px}
  .nb-cells{grid-template-columns:1fr 1fr}
  .nb-cells>div:nth-child(3){border-left:0}
  .nb-cells>div:nth-child(n+3){border-top:1px solid rgba(35,31,43,.1)}
  .nb-lr,.nb-lax{grid-template-columns:minmax(90px,34%) minmax(0,1fr);gap:10px}
  .nb-brief{padding:10px 14px}
  .nb-brief-t{font-size:15px}
  .nb-stats dl{grid-template-columns:1fr 1fr;row-gap:20px}
  .nb-player{padding:0 10px}
  .nb-frame{padding:8px;border-radius:24px}
  .nb-stage{height:960px}
  .nb-panes{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:10px}
  .nb-home{grid-template-columns:minmax(0,1fr)}
  .nh-side{display:none}
  .nb-sum-l{font-size:12.5px}
  .nb-sum{padding:12px 14px}
  .nb-score{flex-wrap:wrap;row-gap:6px}
  .nb-seg{order:3;flex-basis:100%}
  .nb-score-n{margin-left:auto}
  .nb-cmd{gap:8px;padding-left:14px;font-size:12px}
  .nb-copy span{display:none}
  .nb-term{font-size:11.5px}
  .nb-app{font-size:12.5px}
  .nb-story{grid-template-columns:1fr}
  .nb-ben-grid,.nb-uc-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .app-ov,.app-chat{animation:none}
  .sw-steps li{opacity:1;animation:none}
  .nb-layers li{opacity:1;transform:none;animation:none!important}
  .nb-uc{opacity:1;transform:none;transition:none}
  .nb-wire i::after{animation:none;display:none}
  .nb-plug .nb-sl-n{transition:none}
  .nb-cyc{display:flex;flex-wrap:wrap;gap:.4em}
  .nb-cyc b{opacity:1;animation:none}
  .nb-cyc b+b::before{content:"· "}
  .nb-rli-svg.done .bar-extra{animation:none}
}

/* the footer reading map (the topographic visual under the wordmark) is off on the product page */
.foot .fmap{display:none}

/* Flat finish (2026-10-11): the site's own language in place of the inherited clay depth. Solid pill buttons,
   flat fills with 1px hairlines, small corners, no floating, and the site's hard offset shadow for emphasis.
   Revert this block to bring the clay look back. */
.nv2{--clay-hi:0 0 0 0 transparent;--clay-lo:0 0 0 0 transparent;--clay-drop:0 0 0 1px rgba(35,31,43,.12);--offset:3px 3px 0 var(--plum)}
.fl,.mini,.app-ov,.app-chat{animation:none}
.nv2 .btn,.nv2-hero .btn,.nv2-hero .btn.primary,.nb-get .btn,.nb-final .btn,.nb-final .btn.primary,.nb-get .nb-ask .btn,.nb-install .nb-ask .btn,.nb-shots-cmd .nb-ask .btn{border:0;box-shadow:none}
.nv2-hero .btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.nv2-hero .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.cl-chip{border-radius:999px;box-shadow:0 0 0 1px rgba(35,31,43,.16)}
.cl-chip-blue{box-shadow:none}
/* benefits */
.bd-board,.nb-ben .bd-board.nb-ben-grid{border-radius:6px;box-shadow:inset 0 0 0 1px rgba(35,31,43,.14)}
.mini,.nb-ben .mini{border-radius:6px;box-shadow:0 0 0 1px rgba(35,31,43,.16),var(--offset);transition:transform .2s var(--ease)}
.mini:hover{box-shadow:0 0 0 1px rgba(35,31,43,.16),var(--offset);transform:translate(-1px,-1px)}
.mn-rule,.mn-doc,.mn-back,.mn-tok,.mn-dot,.mn-track b,.mn-who,.mn-rec,.mn-prog .mn-fill,.mn-run .mn-fill{box-shadow:none}
.mn-prog,.mn-run{box-shadow:inset 0 0 0 1px rgba(35,31,43,.12)}
/* demo: a plain frame instead of the old topographic art */
.nb-pp{box-shadow:inset 0 0 0 1px rgba(35,31,43,.3)}
/* architecture */
.nb-core{border-radius:8px;background:var(--ultra);box-shadow:none}
.nb-layers li{border-radius:4px;box-shadow:none}
.nb-sl-n{background:var(--ultra);box-shadow:none}
.nb-plug,.nb-node,.nb-kt-c,.nb-sl{border-radius:6px}
/* use cases */
.nb-uc{border-radius:6px;box-shadow:0 0 0 1px rgba(35,31,43,.16),var(--offset)}

/* No mono type on the product page (Jacob, 2026-10-11: "classic agent slop"). The site's --mono points at the
   sans here, and anything set in the mono label style becomes plain sentence-case text. The demo's terminal
   window keeps its own monospace, as Claude Code does. */
:root,.nv2,.foot{--mono:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.nv2 .mono,.foot .mono{text-transform:none;letter-spacing:0;font-size:var(--fs-small);font-weight:500}
/* architecture: plain labels, no numbers or technical tags on the six functions, and the closing line */
.nb-sl-k,.nb-node-k{color:var(--mut);font-size:var(--fs-small);font-weight:500}
.nb-node-k{margin:0 0 6px}
.nb-sl-n .nb-sl-k{color:rgba(238,234,227,.85)}
.nb-sl .nb-plug-tag{font-size:11.5px;font-weight:560}
.nb-layers li{grid-template-columns:minmax(0,1fr)}
.nb-arch-foot{max-width:none;margin:clamp(44px,5.4vw,76px) auto 0!important;color:#fff;font-weight:600;text-align:center}
.nb-arch.pad{padding-bottom:clamp(18px,2vw,26px)}

/* Review fixes (2026-10-12) */
/* the invite button under the app window was chalk on chalk */
.nb-shots .btn.primary{background:var(--plum);color:var(--chalk)}
/* the hero clears the fixed nav at every width, and renders straight away (no layout shift on load) */
.nv2-hero.nb-hero{padding-top:max(clamp(56px,7vw,110px),calc(var(--nav-h) + 28px));content-visibility:visible}
/* phones and small tablets: the invite button stays in the header beside Menu */
@media (max-width:900px){
  .nav nav{display:block;margin-right:calc(var(--nb-menu-w,74px) + 10px)}
  .nav nav li:not(:last-child){display:none}
  .nav .ea{height:36px;padding:0 14px;font-size:13.5px;white-space:nowrap}
}
@media (max-width:760px){
  /* top-to-bottom wash so the seaweed stays clear of the copy and stats */
  .nv2-hero.nb-hero::after{background:linear-gradient(180deg,rgba(238,234,227,.92) 0%,rgba(238,234,227,.85) 55%,rgba(238,234,227,0) 80%)}
}
@media (max-width:380px){
  .nav nav{margin-right:calc(var(--nb-menu-w,74px) + 6px)}
  .nav .ea{padding:0 10px;font-size:12.5px}
}

/* "Watch the demo": a small, quiet link tucked under the app window's bottom-right corner (2026-10-12) */
.nb-watch{display:flex;align-items:center;gap:6px;width:max-content;margin:10px max(4px,calc((100% - 1060px) / 2 + 4px)) 0 auto;color:rgba(35,31,43,.5);font-size:12.5px;font-weight:450;transition:color .2s}
.nb-watch:hover{color:var(--plum);text-decoration:underline;text-underline-offset:3px}
.nb-watch:focus-visible{outline:2px solid var(--ultra);outline-offset:3px;border-radius:3px}
.nb-watch i{flex:none;width:0;height:0;border-left:6px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent}
.nb-shots-cmd{margin-top:clamp(26px,3vw,40px)}
.nb-demo{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* The hero video as the product view (2026-10-13): the final cut, 16:9 (9:16 on phones), full width of the slot.
   The aspect ratio reserves its space before it loads. */
.nb-shots{overflow-x:clip}
.nb-hero-wrap{position:relative;width:100%;max-width:1060px;margin:0 auto}
.nb-hero-video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:#231F2B;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 30px 70px rgba(20,28,48,.18);cursor:pointer;transform-origin:50% 100%;transition:transform .3s cubic-bezier(.3,.7,.3,1)}
.nb-hero-video.sag{transform:rotate(.8deg) translateY(5px)}
.nb-hero-video.snap{transition:transform .22s cubic-bezier(.2,1.6,.4,1)}
.nb-sound{position:absolute;right:12px;bottom:12px;padding:5px 11px;border:0;border-radius:999px;background:rgba(35,31,43,.62);color:#fff;font:500 11.5px/1.2 Inter,system-ui,sans-serif;cursor:pointer;opacity:.75;transition:opacity .2s}
.nb-hero-wrap:hover .nb-sound,.nb-sound:focus-visible,.nb-sound[aria-pressed=true]{opacity:1}
.nb-sound:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.nb-watch{border:0;background:none;cursor:pointer;font-family:inherit}
.nb-watch[hidden]{display:none}
@media (max-width:699.98px){.nb-hero-video{aspect-ratio:9/16}}
@media (prefers-reduced-motion:reduce){.nb-watch{display:none!important}.nb-hero-video{transition:none}}

/* footer legal links (Privacy, Terms, Data policy) in the .legal row, beside the copyright (shipped 2026-10-13) */
.legal-nav{display:flex;flex-wrap:wrap;gap:8px 24px}.legal-nav a:hover{color:var(--gold)}

/* Used-by logo row (2026-10-19): between the hero video and the demo. Two rows of official marks drift in opposite
   directions on a doubled track (a CSS marquee, paused on hover, edges faded by a mask), at one height and one ink
   (brightness(0) keeps alpha and turns every mark black), slightly transparent so the row floats. Reduced motion:
   no drift, the copies hide, both rows wrap into a static field. Official files stay untouched. */
.nb-wall{position:relative;z-index:3;margin-top:clamp(-108px,-7.5vw,-56px);padding:clamp(20px,2.4vw,36px) 0 clamp(68px,7vw,104px);overflow:hidden}
.nb-wall-h{margin:0 0 clamp(22px,2.6vw,34px);font:400 clamp(17px,1.5vw,22px)/1.35 var(--sans);color:rgba(35,31,43,.8);text-align:center;letter-spacing:-.005em}
.nb-wall-n{font-weight:600;color:var(--verm);font-variant-numeric:tabular-nums}
.nb-wall-field{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.nb-wall-row{overflow:hidden}
.nb-wall-track{display:flex;width:max-content;animation:nb-drift 88s linear infinite}
.nb-wall-row-2 .nb-wall-track{animation-direction:reverse;animation-duration:104s}
.nb-wall-row:hover .nb-wall-track{animation-play-state:paused}
.nb-wall-list{display:flex;align-items:center;gap:clamp(36px,4.2vw,64px);margin:0;padding:0 clamp(18px,2.1vw,32px);list-style:none}
.nb-wall-list li{display:flex;align-items:center;justify-content:center;flex:none}
.nb-wall-list img{display:block;height:26px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0);opacity:.56;transition:opacity .25s,transform .25s}
.nb-wall-list img.wl-sym{height:30px;max-width:48px}
.nb-wall-list li:hover img{opacity:.92;transform:translateY(-2px)}
.nb-wall-list img.wl-deel{height:40px}
.nb-wall-list img.wl-gemini,.nb-wall-list img.wl-cohere,.nb-wall-list img.wl-monzo,.nb-wall-list img.wl-figure,.nb-wall-list img.wl-monaco{height:22px}
.nb-wall-list img.wl-physical-intelligence,.nb-wall-list img.wl-harvey{height:20px}
@keyframes nb-drift{to{transform:translateX(-50%)}}
@media (max-width:700px){.nb-wall{margin-top:-20px;padding-top:28px}.nb-wall-list{gap:26px;padding:0 13px}.nb-wall-list img{height:20px;max-width:112px}.nb-wall-list img.wl-sym{height:24px}.nb-wall-list img.wl-deel{height:30px}.nb-wall-track{animation-duration:60s}.nb-wall-row-2 .nb-wall-track{animation-duration:72s}}
@media (prefers-reduced-motion:reduce){.nb-wall-track{animation:none;width:auto}.nb-wall-dup{display:none}.nb-wall-list{flex-wrap:wrap;justify-content:center;row-gap:18px}.nb-wall-field{mask-image:none;-webkit-mask-image:none}.nb-wall-list img{transition:none}}