@font-face{font-family:"Inter";src:url("../fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Jessup Energy Solutions: redesign prototype. PASS 1 (structure + direction). DRAFT, not live. */

:root{
  /* surfaces */
  --paper:#F7F7F4; --white:#FFFFFF; --stone:#EEEEE8; --line:#DFDFD8; --line-2:#C8C8BF;
  /* ink */
  --ink:#0A1A2A; --ink-2:#3B4C5D; --ink-3:#6A7988;
  --night:#0A1A2A; --night-2:#112336; --night-line:#22374C;
  /* brand accent (PLACEHOLDER until the logo arrives) */
  --signal:#F5A623; --signal-ink:#6B4200;
  /* wire colors, shared with the diagrams */
  --w-pos:#D62D20; --w-neg:#111A24; --w-gnd:#1E8449; --w-ac:#6C3483; --w-pv:#E67E22; --w-com:#1F6FB2;
  /* type */
  --sans:"Geist",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1240px; --gut:clamp(20px,4vw,48px); --r:18px; --r-sm:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em;line-height:1.04;margin:0 0 .5em}
h1{font-size:clamp(2.7rem,6.2vw,5.4rem);letter-spacing:-.04em}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:1.35rem;letter-spacing:-.02em;line-height:1.2}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase}
.muted{color:var(--ink-2)}
.eyebrow{display:flex;align-items:center;gap:10px;font:500 .74rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 22px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--w-pos);border-radius:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;z-index:99}
:focus-visible{outline:2px solid var(--w-com);outline-offset:3px;border-radius:6px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s}
.site-head.scrolled{border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:600;letter-spacing:-.02em;font-size:1.02rem;white-space:nowrap}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--ink);display:grid;place-items:center}
.brand .mark i{width:9px;height:9px;border-radius:50%;background:var(--signal)}
.brand small{display:block;font:500 .6rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>a,.nav>button{font:500 .95rem var(--sans);color:var(--ink);text-decoration:none;background:none;border:0;padding:10px 14px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav>button:hover,.nav [aria-expanded="true"]{background:var(--stone)}
.nav>a[aria-current="page"]{background:var(--stone)}
.nav .chev{width:10px;height:10px;transition:transform .2s}
.nav [aria-expanded="true"] .chev{transform:rotate(180deg)}
.head-cta{display:flex;align-items:center;gap:10px;margin-left:10px}
.cart{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--white);text-decoration:none}
.cart:hover{border-color:var(--ink)}
.menu-btn{display:none}

/* mega menu */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(10,26,42,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px;padding-top:36px;padding-bottom:40px}
.mega h4{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.mega a{display:block;text-decoration:none;padding:9px 0;border-top:1px solid var(--line)}
.mega a:hover strong{text-decoration:underline;text-underline-offset:3px}
.mega strong{display:block;font-weight:500;font-size:1rem}
.mega span{display:block;font-size:.86rem;color:var(--ink-3);line-height:1.4}
.mega .feature{background:var(--paper);border-radius:var(--r);padding:20px;border:0}
.mega .feature a{border:0;padding:0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font:500 .98rem var(--sans);text-decoration:none;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:transform .15s,background .2s,color .2s,border-color .2s}
.btn:hover{transform:translateY(-1px);background:#14304a}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink);background:var(--white)}
.btn.sm{padding:10px 18px;font-size:.92rem}
.btn.signal{background:var(--signal);border-color:var(--signal);color:#1b1100}
.btn.signal:hover{background:#ffb83d}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- hero ---------- */
.hero{padding:clamp(36px,6vw,84px) 0 clamp(56px,8vw,112px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,6vw,96px);align-items:center}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--w-pos);border-radius:3px;transform-origin:left;animation:draw 1.1s .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.lead{font-size:clamp(1.1rem,1.5vw,1.3rem);color:var(--ink-2);max-width:34em;line-height:1.55}
.hero .actions{margin:34px 0 40px}
.proofs{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--ink-2)}
.proofs li{display:flex;align-items:center;gap:8px}
.proofs li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-gnd)}
.hero-fig{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--stone);aspect-ratio:1180/1402;box-shadow:0 40px 80px -40px rgba(10,26,42,.45)}
.hero-fig img{width:100%;height:100%;object-fit:cover}
.pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;z-index:2}
.pin::before{content:"";width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 0 0 6px rgba(255,255,255,.35);flex:none}
.pin b{font:500 .68rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.95);color:var(--ink);padding:7px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 18px -6px rgba(10,26,42,.4)}
.pin.l{flex-direction:row-reverse}

/* ---------- sections ---------- */
section{position:relative}
.block{padding:clamp(64px,9vw,128px) 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.head p{color:var(--ink-2);font-size:1.12rem;max-width:30em;margin:0}
.head h2{margin:0}
.band-stone{background:var(--stone)}
.band-night{background:var(--night);color:#E9EEF3}
.band-night .eyebrow{color:#8BA0B4}
.band-night .muted,.band-night .head p{color:#A7B6C4}

/* system cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(10,26,42,.35);border-color:var(--line-2)}
.card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--stone)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .ph img{transform:scale(1.04)}
.card .body{padding:26px 26px 28px;display:flex;flex-direction:column;gap:14px;flex:1}
.card .top{display:flex;justify-content:space-between;align-items:center}
.pill{font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.pill.flag{background:var(--signal);border-color:var(--signal);color:#1b1100}
.card h3{font-size:1.7rem;margin:0}
.card .for{color:var(--ink-2);margin:0;font-size:1rem}
.spec{list-style:none;margin:6px 0 0;padding:0;font-size:.92rem}
.spec li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.spec li span:first-child{color:var(--ink-3)}
.spec li span:last-child{font-weight:500;text-align:right}
.card .go{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.card .go .price{font:500 .78rem var(--mono);letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:linear-gradient(90deg,var(--w-pos) 0 50%,var(--line-2) 50%);}
.step{padding:0 28px 0 0;position:relative}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);display:grid;place-items:center;font:500 .8rem var(--mono);margin-bottom:26px;position:relative;z-index:1}
.step h3{margin-bottom:.4em}
.step p{color:var(--ink-2);font-size:.98rem}

/* cut list */
.cut{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:center}
.big-n{font:500 clamp(5rem,13vw,11rem)/.9 var(--sans);letter-spacing:-.06em;margin:0 0 18px;color:#fff}
.big-n small{font-size:.28em;letter-spacing:-.02em;color:#8BA0B4;margin-left:.2em}
.sheet{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r);overflow:hidden}
.sheet-h{display:flex;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--night-line);font:500 .72rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8BA0B4}
.cl{width:100%;border-collapse:collapse;font-size:.95rem}
.cl td{padding:13px 22px;border-bottom:1px solid var(--night-line);vertical-align:middle}
.cl tr:last-child td{border-bottom:0}
.cl td:first-child{font:500 .78rem var(--mono);color:#8BA0B4;width:56px}
.cl td:last-child{text-align:right;font:500 .84rem var(--mono);color:#fff;white-space:nowrap}
.sw{display:inline-block;width:26px;height:6px;border-radius:3px;margin-right:10px;vertical-align:middle}

/* footer (pass 1 minimal) */
.site-foot{background:var(--night);color:#A7B6C4;padding:72px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-foot h4{font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8BA0B4;margin:0 0 16px}
.site-foot a{display:block;text-decoration:none;padding:5px 0;color:#E9EEF3}
.site-foot a:hover{text-decoration:underline}
.foot-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--night-line);font-size:.85rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:980px){
  .hero-grid,.cut,.head{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:40px}
  .steps::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}

/* ---------- PASS 2 additions ---------- */
.ticks{list-style:none;margin:18px 0 22px;padding:0}
.ticks li{position:relative;padding:9px 0 9px 28px;border-top:1px solid var(--line);font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:2px solid var(--w-gnd);border-bottom:2px solid var(--w-gnd);transform:rotate(-45deg)}
.note{font:500 .72rem/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin:18px 0 0}

/* explorer */
.explorer{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:20px;align-items:stretch}
.diagram{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,2.4vw,32px);background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;background-position:11px 11px}
.diagram svg{width:100%;height:auto;overflow:visible}
.diagram .t{font-family:var(--sans);fill:var(--ink)} .diagram .m{font-family:var(--mono);fill:var(--ink-3)}
.diagram .blk{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.diagram .opt{fill:#fff;stroke:var(--ink-3);stroke-width:1.4;stroke-dasharray:6 5}
.diagram .chip{fill:var(--paper);stroke:var(--line-2)} .diagram .chip.dash{stroke-dasharray:5 4}
.diagram .pos{stroke:var(--w-pos);stroke-width:5;fill:none}.diagram .neg{stroke:var(--w-neg);stroke-width:5;fill:none}
.diagram .pv{stroke:var(--w-pv);stroke-width:6;fill:none}.diagram .ac{stroke:var(--w-ac);stroke-width:6;fill:none}
.diagram .com{stroke:var(--w-com);stroke-width:3;fill:none;stroke-dasharray:3 6;stroke-linecap:round}
.diagram .k{cursor:pointer;outline:none}
.diagram .k rect:not(.chip){transition:fill .2s,stroke .2s,stroke-width .2s}
.diagram .k:hover .blk,.diagram .k:hover .opt{stroke-width:2.6}
.diagram .k:focus-visible rect:first-of-type{stroke:var(--w-com);stroke-width:3.2}
.diagram .k.on > rect:not(.chip){fill:var(--ink);stroke:var(--ink);stroke-dasharray:none}
.diagram .k.on > .t{fill:#fff}.diagram .k.on > .m{fill:#9FB1C2}
.diagram .k.on .chip{fill:#fff}
.diagram .k.on .t.c{fill:var(--ink)}
.legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-3)}
.legend li{display:flex;align-items:center;gap:8px}.legend i{width:22px;height:5px;border-radius:3px;display:block}
.detail{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column}
.detail h3{font-size:1.8rem;margin:.1em 0 .4em}
.detail .mono{color:var(--ink-3);margin:0}
.detail .btn{align-self:flex-start;margin-top:auto}
.detail .ticks{margin-bottom:26px}.detail .ticks li{font-size:.93rem}

/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:34px 30px 30px;text-decoration:none;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-4px);box-shadow:0 30px 50px -30px rgba(10,26,42,.35)}
.tile .stub{display:block;width:44px;height:6px;border-radius:3px;margin-bottom:26px}
.tile h3{font-size:1.5rem}.tile p{color:var(--ink-2);margin-bottom:24px}.tile .more{margin-top:auto;font-weight:500}
.pill.soon{position:absolute;right:22px;top:26px}

/* guide */
.guide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,88px);align-items:center}
.sheet-fig{margin:0;position:relative;transform:rotate(1.2deg)}
.sheet-fig::before{content:"";position:absolute;inset:0;background:#fff;border:1px solid var(--line);border-radius:6px;transform:rotate(-2.6deg) translate(-10px,6px)}
.sheet-fig img,.sheet-fig svg{position:relative;width:100%;height:auto;background:#fff;border:1px solid var(--line-2);border-radius:6px;box-shadow:0 40px 70px -35px rgba(10,26,42,.45)}
.sheet-fig svg .t{font-family:var(--sans)}.sheet-fig svg .m{font-family:var(--mono)}

/* mosaic */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(2,clamp(200px,24vw,330px));gap:14px;grid-template-areas:"a a a a a b b b c c c c" "d d d d e e e e f f f f"}
.mosaic figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r-sm);background:var(--line)}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.mosaic figure:hover img{transform:scale(1.05)}
.mosaic figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);color:var(--ink);padding:6px 10px;border-radius:999px;font-size:.66rem}

/* builders + final */
.builders{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center}
.b-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.b-list li{border:1px solid var(--night-line);background:var(--night-2);border-radius:var(--r);padding:22px 24px;display:flex;flex-direction:column;gap:4px}
.b-list b{font-weight:500;font-size:1.15rem;color:#fff}.b-list span{color:#A7B6C4;font-size:.95rem}
.final{text-align:center;padding-bottom:clamp(80px,11vw,152px)}
.final h2{max-width:14em;margin:0 auto .45em}

@media(max-width:980px){
  .explorer,.guide,.builders{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:210px;grid-template-areas:"a a" "b c" "d d" "e f"}
}

/* pass 2 fix: explorer = full-width diagram, detail strip below */
.explorer{grid-template-columns:1fr;gap:16px}
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:clamp(24px,4vw,56px);align-items:start;padding:30px 34px}
.detail .ticks{columns:2;column-gap:36px;margin:0}
.detail .ticks li{break-inside:avoid}
.detail .btn{margin-top:0}
.d-act{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.d-act .note{margin-top:10px}
@media(max-width:980px){.detail{grid-template-columns:1fr}.detail .ticks{columns:1}}

/* ---------- PASS 3: kits page ---------- */
.page-head{padding:clamp(36px,5vw,72px) 0 clamp(28px,4vw,48px)}
.page-head h1{font-size:clamp(2.4rem,5vw,4.2rem);margin-bottom:.3em}
.page-head .lead{margin:0}
.crumbs{display:flex;gap:10px;color:var(--ink-3);margin-bottom:26px}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.subnav{position:sticky;top:72px;z-index:40;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);border-block:1px solid var(--line)}
.subnav nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.subnav a{white-space:nowrap;text-decoration:none;font-weight:500;font-size:.93rem;padding:8px 16px;border-radius:999px;color:var(--ink-2)}
.subnav a:hover{background:var(--stone);color:var(--ink)}
.subnav a.on{background:var(--ink);color:#fff}
.block.tight{padding-top:clamp(36px,5vw,64px)}
.band-stone + .block, .block + .band-stone{scroll-margin-top:130px}
section[id]{scroll-margin-top:128px}

.matcher{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px}
.matcher .mono{color:var(--ink-3);margin-right:4px}
.chip-btn{font:500 .95rem var(--sans);padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--white);color:var(--ink);cursor:pointer;transition:all .2s}
.chip-btn:hover{border-color:var(--ink)}
.chip-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.match-msg{flex-basis:100%;color:var(--ink-2);font-size:.98rem;min-height:1.6em;margin-top:2px}
.cards.matching .card:not(.match){opacity:.45;transform:scale(.985)}
.cards.matching .card.match{border-color:var(--ink);box-shadow:0 30px 60px -30px rgba(10,26,42,.45)}
.match-badge{position:absolute;left:16px;top:16px;background:var(--signal);color:#1b1100;font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:999px;opacity:0;transform:translateY(-6px);transition:all .25s}
.card.match .match-badge{opacity:1;transform:none}
.card .ph{position:relative}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card.flat{cursor:default}.card.flat:hover{transform:none;box-shadow:none}
.card.flat .go{align-items:center}

.compare{margin-top:28px;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.compare summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 26px;font-weight:500;font-size:1.05rem}
.compare summary::-webkit-details-marker{display:none}
.plus{width:14px;height:14px;position:relative}.plus::before,.plus::after{content:"";position:absolute;background:var(--ink);left:0;right:0;top:6px;height:2px;border-radius:2px;transition:transform .25s}.plus::after{transform:rotate(90deg)}
details[open] .plus::after{transform:rotate(0)}
.tbl-wrap{overflow-x:auto;padding:0 8px 8px}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
.tbl th,.tbl td{text-align:left;padding:15px 18px;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border-top:0}
.tbl tbody th{font-weight:500;color:var(--ink-3);width:200px}
.tbl td{font-weight:500}
.band-stone .tbl-wrap{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:8px}

.sizebar{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}.sizebar .mono{color:var(--ink-3)}
.seg{display:inline-flex;background:var(--white);border:1px solid var(--line-2);border-radius:999px;padding:4px}
.seg button{font:500 .93rem var(--sans);border:0;background:none;padding:9px 20px;border-radius:999px;cursor:pointer;color:var(--ink-2);transition:all .2s}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.stages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stage{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.3fr) auto;gap:clamp(14px,3vw,36px);align-items:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px 26px;transition:border-color .2s,transform .2s}
.stage:hover{border-color:var(--ink)}
.stage .no{color:var(--ink-3)}
.stage h3{margin:0 0 2px;font-size:1.25rem}.stage p{margin:0}
.stage .s-spec{font-weight:500;font-size:.97rem}
.stage .s-act{display:flex;align-items:center;gap:16px}
.stage .code{color:var(--ink-3);font-size:.7rem}
.stage.na{background:transparent;border-style:dashed}.stage.na .s-spec{font-weight:400;color:var(--ink-3)}

.parts-teaser{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:clamp(40px,6vw,72px)}
.parts-teaser h2{font-size:clamp(1.8rem,3.4vw,2.8rem)}.parts-teaser .lead{margin:0;max-width:30em}
.soon-inline{display:inline-block;margin-bottom:16px}
@media(max-width:980px){
  .cards.two{grid-template-columns:1fr}
  .stage{grid-template-columns:34px 1fr;row-gap:10px}.stage .s-spec,.stage .s-act{grid-column:2}
  .subnav{top:72px}
}

/* ---------- PASS 3: product page ---------- */
.product{padding:clamp(28px,4vw,56px) 0 clamp(56px,8vw,104px)}
.product .crumbs{margin-bottom:24px;flex-wrap:wrap}
.p-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);align-items:start}
.gallery{position:sticky;top:96px}
.g-main{border-radius:var(--r);overflow:hidden;background:var(--stone);aspect-ratio:4/3;border:1px solid var(--line)}
.g-main img{width:100%;height:100%;object-fit:cover;transition:opacity .15s}
.g-main img.swap{opacity:0}.g-main img.contain{object-fit:contain;background:#fff;padding:14px}
.g-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.g-thumbs button{padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--stone);cursor:pointer;aspect-ratio:4/3;opacity:.7;transition:all .2s}
.g-thumbs button:hover{opacity:1}.g-thumbs button.on{border-color:var(--ink);opacity:1}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.g-thumbs .sch img{object-fit:contain;background:#fff;padding:4px}
.buy h1{font-size:clamp(2.4rem,4.4vw,3.6rem);margin:.35em 0 .3em}
.buy .top{display:flex;justify-content:space-between;align-items:center}
.keys{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.keys li{padding:16px 14px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:2px}.keys li:first-child{border-left:0}
.keys b{font-weight:500;font-size:1.25rem;letter-spacing:-.02em}.keys span{font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.opts{border:0;padding:0;margin:0 0 24px}
.opts legend{padding:0;margin-bottom:10px;color:var(--ink-3)}
.opt{display:grid;grid-template-columns:22px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);background:var(--white);border-radius:14px;margin-bottom:8px;cursor:pointer;transition:border-color .2s,background .2s;position:relative}
.opt:hover{border-color:var(--line-2)}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-2);display:grid;place-items:center;transition:all .15s}
.opt.on{border-color:var(--ink)}
.opt.on .box{background:var(--ink);border-color:var(--ink)}
.opt.on .box::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.opt:has(input:focus-visible){outline:2px solid var(--w-com);outline-offset:2px}
.opt b{display:block;font-weight:500;font-size:.98rem}.opt span:not(.box){display:block;font-size:.84rem;color:var(--ink-3);line-height:1.4}
.opt em{font-style:normal;color:var(--w-gnd)}
.opt.fixed{cursor:default}
.price-row{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0;border-top:1px solid var(--line)}
.price-row .mono{color:var(--ink-3)}.price-row strong{font-weight:500;font-size:1.2rem}
.block-btn{width:100%;justify-content:center;padding:17px 24px}
.trust{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--ink-2)}
.trust li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--w-gnd);margin-right:8px;vertical-align:middle}

.acc{display:grid;gap:10px}
.acc details{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s}
.acc details[open]{border-color:var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:150px 1fr auto;gap:16px;align-items:center;padding:20px 26px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .mono{color:var(--ink-3);font-size:.7rem}
.acc summary b{font-weight:500;font-size:1.15rem;letter-spacing:-.01em}
.acc .inc{font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--w-gnd);border:1px solid var(--w-gnd);border-radius:999px;padding:3px 8px;margin-left:10px;vertical-align:middle}
.acc details[open] .plus::after{transform:rotate(0)}
.cl2{width:100%;border-collapse:collapse;font-size:.95rem;border-top:1px solid var(--line)}
.cl2 td{padding:12px 26px;border-bottom:1px solid var(--line)}
.cl2 tr:last-child td{border-bottom:0}
.cl2 td:first-child{font:500 .76rem var(--mono);color:var(--ink-3);width:176px}
.cl2 td:last-child{text-align:right;font:500 .84rem var(--mono);white-space:nowrap}
.cl2 .sw{margin-right:10px}

.three{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.three .col{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:28px 28px 14px}
.three h3{font-size:1.3rem;margin-bottom:.2em}
.ticks.x li::before{width:10px;height:10px;border:0;transform:none;top:19px;left:3px;background:linear-gradient(45deg,transparent 42%,var(--w-pos) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--w-pos) 42% 58%,transparent 58%)}
.band-stone .ticks li{border-top-color:var(--line-2)}
@media(max-width:980px){
  .p-grid,.three{grid-template-columns:1fr}
  .gallery{position:static}
  .acc summary{grid-template-columns:1fr auto}.acc summary .mono{grid-column:1/-1}
  .cl2 td{padding:10px 18px}.cl2 td:first-child{width:50px}
}
.stage{grid-template-columns:34px minmax(0,1fr) minmax(0,1.25fr) 232px}
.stage .s-act{justify-content:space-between}
@media(max-width:980px){.stage{grid-template-columns:34px 1fr}}
.keys b{white-space:nowrap;font-size:1.08rem}.keys li{padding:14px 12px}

/* ---------- PASS 4: flow, motion, mobile ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js .rv{opacity:0}
.js .rv.in{opacity:1;animation:rise .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms) backwards}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}.hero-copy>*:nth-child(2){animation-delay:.12s}.hero-copy>*:nth-child(3){animation-delay:.2s}.hero-copy>*:nth-child(4){animation-delay:.28s}.hero-copy>*:nth-child(5){animation-delay:.36s}
.hero-fig{animation:rise 1.1s .15s cubic-bezier(.2,.7,.2,1) backwards}
.pin{animation:pop .6s cubic-bezier(.2,1.4,.4,1) backwards}
.pin:nth-of-type(1){animation-delay:.9s}.pin:nth-of-type(2){animation-delay:1.05s}.pin:nth-of-type(3){animation-delay:1.2s}.pin:nth-of-type(4){animation-delay:1.35s}
@keyframes pop{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%)}}

/* header that adapts */
.site-head{transition:background .3s,color .3s,border-color .25s}
.site-head.dark{background:color-mix(in srgb,var(--night) 88%,transparent);color:#fff;border-bottom-color:var(--night-line)}
.site-head.dark .nav>a:hover,.site-head.dark .nav>button:hover,.site-head.dark .nav [aria-expanded="true"],.site-head.dark .nav>a[aria-current="page"]{background:rgba(255,255,255,.1)}
.site-head.dark .brand small{color:#8BA0B4}
.site-head.dark .btn{background:#fff;border-color:#fff;color:var(--ink)}
.site-head.dark .cart{background:transparent;border-color:var(--night-line);color:#fff}
.site-head.dark .brand .mark{background:#fff}
.site-head.dark .brand .mark i{background:var(--signal)}
.nav>a,.nav>button{color:inherit}

/* steps wire fills */
.steps::before{background:var(--line-2)!important}
.steps::after{content:"";position:absolute;left:0;top:19px;height:2px;width:0;background:var(--w-pos);transition:width 1.9s .25s cubic-bezier(.4,0,.2,1)}
.steps.in::after{width:100%}
.step .n{transition:background .4s,color .4s,border-color .4s}
.steps.in .step .n{background:var(--ink);color:#fff}
.steps.in .step:nth-child(1) .n{transition-delay:.25s}.steps.in .step:nth-child(2) .n{transition-delay:.75s}.steps.in .step:nth-child(3) .n{transition-delay:1.25s}.steps.in .step:nth-child(4) .n{transition-delay:1.75s}

/* cable rail */
.rail{position:absolute;top:0;bottom:0;left:max(10px,calc((100vw - var(--maxw))/2 + var(--gut) - 40px));width:2px;background:var(--line);border-radius:2px;pointer-events:none;z-index:2}
.rail .fill{position:absolute;left:0;top:0;width:2px;background:var(--w-pos);border-radius:2px}
.rail .node{position:absolute;left:-5px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);transition:all .4s}
.rail .node.on{border-color:var(--w-pos);background:var(--w-pos)}
@media(max-width:1319px){.rail{display:none}}

/* sticky buy bar */
.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:55;background:color-mix(in srgb,var(--white) 94%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.stickybuy.show{transform:none}
.stickybuy .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.stickybuy b{font-weight:500;font-size:1.05rem;display:block;line-height:1.2}.stickybuy .mono{color:var(--ink-3)}

/* quiz */
.quiz{padding:clamp(28px,5vw,64px) 0 clamp(64px,9vw,120px)}
.quiz-card{max-width:820px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,4vw,52px);box-shadow:0 40px 80px -50px rgba(10,26,42,.4)}
.q-prog{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:34px}
.q-prog i{height:4px;border-radius:2px;background:var(--line);transition:background .3s}.q-prog i.done{background:var(--ink)}.q-prog i.now{background:var(--w-pos)}
.q-step{color:var(--ink-3);margin:0 0 12px}
.quiz h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:.9em}
.q-opts{display:grid;gap:10px}
.q-opt{text-align:left;font:inherit;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 22px;cursor:pointer;display:flex;flex-direction:column;gap:2px;transition:all .2s}
.q-opt:hover{border-color:var(--ink);background:#fff;transform:translateX(3px)}
.q-opt b{font-weight:500;font-size:1.08rem}.q-opt span{color:var(--ink-3);font-size:.92rem}
.q-back{margin-top:22px;background:none;border:0;font:500 .92rem var(--sans);color:var(--ink-2);cursor:pointer;padding:6px 0}
.q-back:hover{color:var(--ink)}
.result h2{margin-bottom:.3em}.result .pill{margin-bottom:14px;display:inline-block}
.result .why{margin:22px 0}
.result .note{margin-top:20px}

/* mobile */
.menu-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--white);cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:13px;right:13px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,top .25s}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:25px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:21px;transform:rotate(-45deg)}
.nav-cta{display:none!important}
@media(max-width:900px){
  .menu-btn{display:block;margin-left:2px}
  .hide-sm{display:none}
  .head-cta{margin-left:auto}
  .nav{position:fixed;left:0;right:0;top:72px;bottom:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gut) 32px;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s;margin:0}
  body.menu-open .nav{transform:none;visibility:visible}
  body.menu-open{overflow:hidden}
  .nav>a,.nav>button{font-size:1.5rem;font-weight:500;letter-spacing:-.02em;padding:18px 4px;border-radius:0;border-bottom:1px solid var(--line);justify-content:space-between;width:100%}
  .nav>a:hover,.nav>button:hover{background:none}
  .nav>a.nav-cta{display:flex!important;margin-top:22px;background:var(--ink);color:#fff;border-radius:999px;justify-content:center;padding:18px;font-size:1.05rem;border:0}
  .mega{position:fixed;top:72px;left:0;right:0;bottom:0;overflow:auto;background:var(--paper);box-shadow:none;border:0;z-index:2}
  .mega .wrap{grid-template-columns:1fr;gap:28px;padding-top:20px}
  .site-head.dark{background:color-mix(in srgb,var(--paper) 90%,transparent);color:var(--ink)}
  body.menu-open .site-head.dark,.site-head.dark{color:var(--ink)}
  .site-head.dark .btn{background:var(--ink);color:#fff}.site-head.dark .cart{border-color:var(--line-2);color:var(--ink)}
  .site-head.dark .brand .mark{background:var(--ink)}.site-head.dark .brand small{color:var(--ink-3)}
  .hero-fig{max-width:520px;margin:0 auto}
  .keys{grid-template-columns:repeat(2,1fr)}.keys li:nth-child(3){border-left:0}.keys li:nth-child(n+3){border-top:1px solid var(--line)}
  .stickybuy .mono{display:none}
}
@media(max-width:560px){
  body{font-size:16px}
  .hero{padding-top:20px}
  .pin b{font-size:.58rem;padding:5px 7px}
  .pin::before{width:11px;height:11px;border-width:2px}
  .steps{grid-template-columns:1fr}
  .head{gap:14px}
  .foot-grid{grid-template-columns:1fr}
  .cut .big-n{font-size:6.5rem}
  .cl td{padding:11px 14px}
  .mosaic{grid-auto-rows:170px}
  .g-thumbs{gap:6px}
  .brand small{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1}
}

/* =====================================================================
   PASS 4b: conform to /DESIGN.md (Michael's brand system, 2026-11-12).
   Tokens below replace the earlier navy/amber/Geist look. DESIGN.md wins on any conflict.
   ===================================================================== */
:root{
  --ink:#14181F; --white:#FFFFFF; --paper:#FFFFFF; --stone:#F3F5F7; --line:#E3E8EE; --line-2:#C9D0D8;
  --ink-2:#4A5461; --ink-3:#6B7480; --copper:#B8683A; --copper-dk:#D98A5A;
  --night:#14181F; --night-2:#1E242D; --night-line:#2C3440; --signal:#B8683A;
  --font:"Inter","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif; --sans:var(--font); --mono:var(--font);
  --maxw:1200px; --gut:24px; --r:20px; --r-sm:8px;
}
body{font-family:var(--font);font-size:17px;line-height:1.65;background:var(--white);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{letter-spacing:-.01em}
h1{font-size:clamp(2.5rem,5vw,3.5rem);line-height:1.1;font-weight:300}
h2{font-size:clamp(1.65rem,3vw,2rem);line-height:1.25;font-weight:400}
h3{font-size:1.375rem;line-height:1.35;font-weight:500;letter-spacing:-.005em}
.page-head h1,.buy h1{font-size:clamp(2.1rem,4vw,2.75rem);line-height:1.14;font-weight:300}
.lead{font-weight:300;font-size:clamp(1.1rem,1.4vw,1.25rem);color:var(--ink-2)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* labels: small spaced capitals, no mono */
.mono,.eyebrow,.pill,.note,.sheet-h,.legend,.keys span,.tbl thead th,.crumbs{font-family:var(--font)}
.mono{font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{display:block;font-size:.75rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:0 0 18px}
.eyebrow::before{display:block;width:40px;height:2px;background:var(--copper);border-radius:0;margin-bottom:16px}
.eyebrow.center,.final .eyebrow{display:flex;flex-direction:column;align-items:center}
.band-night .eyebrow{color:#9AA3AF}.band-night .eyebrow::before{background:var(--copper-dk)}
.band-night .muted,.band-night .head p{color:#9AA3AF}
.note{letter-spacing:.12em}
.hero-copy .eyebrow{margin-bottom:22px}

/* header: white, 1px line, logo 52px, outlined cart */
.site-head{background:var(--white);backdrop-filter:none;border-bottom:1px solid var(--line)}
.site-head.scrolled{border-bottom-color:var(--line)}
.brand img{height:52px;width:auto}
.nav>a,.nav>button{border-radius:var(--r-sm);font-weight:500}
.nav>a:hover,.nav>button:hover,.nav [aria-expanded="true"],.nav>a[aria-current="page"]{background:var(--stone)}
.cart{border-radius:12px;border:1.5px solid var(--ink);background:transparent}
.cart:hover{background:var(--stone)}
.site-head.dark{background:color-mix(in srgb,var(--night) 94%,transparent);border-bottom-color:var(--night-line)}
.site-head.dark .brand img{content:url("../img/brand/logo-horizontal-dark.svg")}
.site-head.dark .cart{border-color:#fff}
.mega{box-shadow:0 8px 30px rgba(20,24,31,.08);border-bottom:1px solid var(--line)}
.mega .feature{border-radius:var(--r)}

/* buttons: 12 px radius, 48 high */
.btn{height:48px;padding:0 24px;border-radius:12px;font-weight:500;border:1.5px solid var(--ink);background:var(--ink);color:#fff;justify-content:center}
.btn:hover{background:#232A35;transform:none}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover{background:var(--stone);border-color:var(--ink)}
.btn.sm{height:40px;padding:0 18px;font-size:.92rem}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}.btn.light:hover{background:var(--stone)}
.btn.signal{background:#fff;border-color:#fff;color:var(--ink)}
.site-head.dark .btn{background:#fff;border-color:#fff;color:var(--ink)}
.block-btn{height:52px}
.menu-btn{border-radius:12px;border:1.5px solid var(--ink)}

/* hero */
.hero h1 em{font-weight:300}.hero h1 em::after{display:none}
.hero-fig{box-shadow:none;border:1px solid var(--line);background:var(--stone)}
.pin::before{border-color:var(--ink)}
.pin b{border-radius:8px;box-shadow:none;border:1px solid var(--line);letter-spacing:.12em}
.proofs{color:var(--ink-2)}.proofs li::before{background:var(--copper)}
.proofs.mono{letter-spacing:.14em}

/* surfaces and cards: no shadows, 1px lines */
.band-stone{background:var(--stone)}
.card,.tile,.detail,.compare,.opt,.stage,.acc details,.three .col,.keys,.quiz-card{box-shadow:none!important}
.card:hover,.tile:hover{transform:none;box-shadow:none;border-color:var(--ink)}
.card:hover .ph img{transform:none}
.card h3{font-size:1.5rem;font-weight:500}
.card .ph{background:var(--stone)}
.pill{border-radius:8px;letter-spacing:.14em}
.pill.flag{background:var(--ink);border-color:var(--ink);color:#fff}
.match-badge{background:var(--ink);color:#fff;border-radius:8px;letter-spacing:.14em}
.cards.matching .card.match{box-shadow:none;border-color:var(--ink)}
.chip-btn{border-radius:8px;border:1px solid var(--line-2)}
.seg{border-radius:12px}.seg button{border-radius:8px}
.tile .stub{height:2px;width:40px;border-radius:0;background:var(--copper)!important}
.tile h3{font-size:1.375rem}
.ticks li::before{border-color:var(--copper)}
.ticks.x li::before{background:linear-gradient(45deg,transparent 42%,var(--ink-3) 42% 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,var(--ink-3) 42% 58%,transparent 58%)}
.mosaic figure{border-radius:var(--r-sm)}.mosaic figure:hover img{transform:none}
.mosaic figcaption{border-radius:8px;letter-spacing:.12em}
.sheet-fig img,.sheet-fig svg{box-shadow:none}
.sheet-fig{transform:none}.sheet-fig::before{display:none}
.detail h3{font-size:1.5rem}.quiz h2{font-size:clamp(1.6rem,3vw,2rem);font-weight:300}
.result h2{font-size:clamp(1.9rem,3.6vw,2.5rem);font-weight:300}
.stage h3{font-size:1.15rem}
.stickybuy{box-shadow:none;background:var(--white)}
.q-opt{border-radius:12px}.q-opt:hover{transform:none}
.opt{border-radius:12px}
.big-n{font-weight:300}
.cl td:last-child,.cl2 td:last-child{font-family:var(--font);letter-spacing:.02em}

/* single graphite section: cut list (footer aside) */
.band-night{background:var(--night)}
.site-foot{background:var(--ink)}
.site-foot a{color:#fff}.site-foot h4{color:#9AA3AF}.foot-base{color:#9AA3AF;border-top-color:var(--night-line)}
.site-foot p{color:#9AA3AF}

/* steps + rail: graphite wire, copper dot (the logo's dot) */
.steps::after{background:var(--ink);transition:width .6s .1s ease-out}
.steps.in .step .n{background:var(--ink);color:#fff}
.steps.in .step:nth-child(n) .n{transition-delay:.1s}
.step .n{font-family:var(--font);font-weight:500;border-color:var(--ink)}
.rail .fill{background:var(--ink)}
.rail .node{border-color:var(--line-2);background:var(--white)}
.rail .node.on{border-color:var(--copper);background:var(--copper)}

/* diagram: Inter labels, wire colors untouched */
.diagram .t{font-family:var(--font)}.diagram .m{font-family:var(--font);letter-spacing:.02em}
.sheet-fig svg .t,.sheet-fig svg .m{font-family:var(--font)}

/* motion: 150-250 ms, 8 px slides at most */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js .rv.in{animation:rise .25s ease-out calc(var(--d,0ms)*.4) backwards}
.hero-copy>*{animation-duration:.3s}
.hero-copy>*:nth-child(n){animation-delay:calc(var(--i,0)*40ms)}
.hero-fig{animation:rise .35s ease-out backwards}
@keyframes pop{from{opacity:0}to{opacity:1;transform:translate(-50%,-50%)}}
.pin{animation:pop .25s ease-out backwards}
.pin:nth-of-type(n){animation-delay:.5s}
.card .ph img,.mosaic img{transition:none}
.nav,.stickybuy,.mega{transition-duration:.25s}
.hero-copy>*:nth-child(1){animation-delay:0s}.hero-copy>*:nth-child(2){animation-delay:.04s}.hero-copy>*:nth-child(3){animation-delay:.08s}.hero-copy>*:nth-child(4){animation-delay:.12s}.hero-copy>*:nth-child(5){animation-delay:.16s}

@media(max-width:900px){
  .brand img{height:44px}
  .nav>a.nav-cta{border-radius:12px}
  .site-head.dark{background:var(--white);color:var(--ink)}
  .site-head.dark .brand img{content:none}
  .site-head.dark .cart{border-color:var(--ink);color:var(--ink)}
  .site-head.dark .btn{background:var(--ink);color:#fff;border-color:var(--ink)}
}
@media(max-width:560px){:root{--gut:16px}.brand img{height:40px}}
.head .eyebrow,.g-copy .eyebrow,.builders .eyebrow{margin:0 0 18px;font-size:.75rem;color:var(--ink-3);max-width:none}
.band-night .head .eyebrow,.band-night .eyebrow{color:#9AA3AF}
.head h2{margin-top:0}
.band-stone .b-list li{background:var(--white);border:1px solid var(--line)}
.band-stone .b-list b{color:var(--ink)}.band-stone .b-list span{color:var(--ink-2)}
@media(max-width:900px){
  .nav>a,.nav>button{border-radius:0}
  .nav>a.nav-cta{border-radius:12px}
}
@media(max-width:760px){
  .diagram{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .diagram svg{min-width:720px}
  .diagram::after{content:"Swipe to see the whole schematic";display:block;font:500 .68rem var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:10px;position:sticky;left:0}
}

/* =====================================================================
   ROUND 2 (2026-11-12): "clean hospital" + more dark sections.
   White, hairlines, air. Graphite sections used 2-3 times per page for contrast.
   ===================================================================== */
:root{--stone:#F6F8FA;--line:#E6EBF0}
body{background:#fff}
.band-stone{background:#fff}
.block{padding:clamp(80px,11vw,152px) 0}
.block.tight{padding-top:clamp(40px,5vw,72px)}
.head{margin-bottom:clamp(44px,6vw,80px)}
h2{font-weight:300;font-size:clamp(1.75rem,3.2vw,2.25rem)}
h3,.card h3,.tile h3,.detail h3{font-weight:400}
.stage h3,.acc summary b{font-weight:400}
/* hairlines between consecutive white sections */
section.block:not(.band-night)+section.block:not(.band-night){border-top:1px solid var(--line)}
/* plain, clinical surfaces */
.diagram{background-image:none;background:#fff;border-color:var(--line)}
.card,.tile,.detail,.compare,.opt,.stage,.acc details,.three .col,.keys,.tbl-wrap,.quiz-card,.hero-fig,.g-main{border-color:var(--line)}
.card .ph,.hero-fig,.g-main{background:var(--stone)}
.band-stone .tbl-wrap{border:0;padding:0}
.hero{padding:clamp(48px,7vw,104px) 0 clamp(72px,10vw,136px)}
.proofs li{color:var(--ink-3)}
.page-head{padding-bottom:clamp(36px,5vw,64px)}
.subnav{background:#fff}
.pill{border-color:var(--line-2)}
.rail .node{border-width:1.5px}

/* dark sections as a system: same look as the cut list */
.band-night h2,.band-night h3{color:#fff}
.band-night .lead,.band-night p{color:#B8C0CA}
.band-night .eyebrow{color:#9AA3AF}
.band-night .ticks li{border-top-color:var(--night-line);color:#E9EDF1}
.band-night .ticks li::before{border-color:var(--copper-dk)}
.band-night .btn.ghost{color:#fff;border-color:#fff;background:transparent}
.band-night .btn.ghost:hover{background:rgba(255,255,255,.08)}
.band-night .btn{background:#fff;border-color:#fff;color:var(--ink)}.band-night .btn:hover{background:#E9EDF1}
.band-night .btn.ghost{background:transparent;color:#fff}
.band-night .card.flat,.band-night .card{background:var(--night-2);border-color:var(--night-line);color:#fff}
.band-night .card:hover{border-color:#fff}
.band-night .card .for{color:#B8C0CA}
.band-night .pill{border-color:#3A4452;color:#C5CCD4;background:transparent}
.band-night .card .top .mono,.band-night .card .price{color:#9AA3AF!important}
.band-night .card .btn.ghost{height:40px}
.band-night .sheet-fig svg,.band-night .sheet-fig img{border-color:var(--night-line)}
.band-night .note{color:#9AA3AF}
.band-night .guide .g-copy .lead{color:#C5CCD4}
/* hide the second-level card chrome when two cards sit in a dark band */
.cards.two .card.flat .go{border-top:1px solid var(--night-line);padding-top:18px}
.b-list li{background:#fff;border:1px solid var(--line)}
.b-list b{color:var(--ink)}.b-list span{color:var(--ink-2)}

/* =====================================================================
   ROUND 3 (2026-11-12): professional refinement. Same identity, same layout.
   Squarer, quieter, more specification-led. No decorative motion.
   ===================================================================== */
:root{--r:10px;--r-sm:6px}

/* motion: none that is not functional */
.hero-copy>*,.hero-fig,.pin{animation:none!important}
.js .rv{opacity:1}
.steps::before{background:var(--ink)!important;height:1px;top:20px}
.steps::after{display:none}
.step .n{background:var(--ink);color:#fff;border-radius:50%}
.rail{display:none!important}
*{scroll-behavior:auto}

/* shape: 10 px surfaces, 6 px controls, 3 px tags */
.card,.tile,.detail,.compare,.stage,.acc details,.three .col,.keys,.quiz-card,.hero-fig,.g-main,.sheet,.b-list li,.diagram,.mega .feature,.tbl-wrap,.sheet-fig img,.sheet-fig svg,.mosaic figure{border-radius:10px}
.btn,.menu-btn,.cart,.q-opt,.opt,.seg,.chip-btn,.pin b,.cl2,.g-thumbs button{border-radius:6px}
.seg button{border-radius:4px}
.pill,.match-badge,.mosaic figcaption,.acc .inc{border-radius:3px}
.card .ph{border-radius:0}

/* type hierarchy: clear steps, one voice */
.head{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:clamp(32px,6vw,96px)}
.head h2{max-width:14em}
.head p:not(.eyebrow){font-size:1.02rem;line-height:1.65;color:var(--ink-2);max-width:34em;padding-top:2.1rem}
h2{letter-spacing:-.015em}
.card h3{font-size:1.4rem}
.lead{max-width:32em}
.eyebrow::before{width:32px}

/* hero: add the engineering caption, quieter proof row */
.hero-fig{border-radius:10px;overflow:hidden}
.hero-note{margin:14px 0 0;font-size:.82rem;color:var(--ink-3);line-height:1.5;max-width:34em}
.hero-fig-wrap{display:flex;flex-direction:column}
.proofs{gap:8px 28px}

/* application chooser */
.apps{border-top:1px solid var(--ink)}
.app{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) minmax(0,1fr) 28px;gap:24px;align-items:baseline;padding:22px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .15s}
.app:hover{background:var(--stone)}
.app b{font-weight:500;font-size:1.1rem}
.app span{color:var(--ink-2);font-size:.98rem}
.app em{font-style:normal;font-weight:500;text-align:left}
.app i{font-style:normal;text-align:right}
.app small{display:block;color:var(--ink-3);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin-bottom:2px}
.apps-note{margin:18px 0 0;font-size:.88rem;color:var(--ink-3)}

/* engineering section */
.eng{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.tbl.num td{font-variant-numeric:tabular-nums}
.tbl.num thead th:not(:first-child),.tbl.num td{text-align:left}
.tbl.num tbody tr:hover{background:var(--stone)}
.eng .tbl-wrap{padding:0;border:0}
.table-note{font-size:.84rem;color:var(--ink-3);margin:16px 0 0;line-height:1.55;max-width:46em}
.notes{display:grid;gap:0;border-top:1px solid var(--ink)}
.notes div{padding:20px 0;border-bottom:1px solid var(--line)}
.notes h3{font-size:1.1rem;font-weight:500;margin:0 0 6px}
.notes p{margin:0;color:var(--ink-2);font-size:.96rem;line-height:1.6}

/* journey bar (Kits and product pages) */
.journey{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.journey li{padding:16px 24px 0 0;display:flex;gap:14px;align-items:baseline;color:var(--ink-3);font-size:.95rem}
.journey b{font:500 .72rem var(--font);letter-spacing:.16em}
.journey li.now{color:var(--ink)}.journey li.now b{color:var(--copper)}
.journey li span{font-weight:500}

/* callout */
.callout{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;border:1px solid var(--line);border-left:2px solid var(--copper);border-radius:0 10px 10px 0;padding:28px 32px;margin-top:48px}
.callout h3{margin:0 0 4px;font-size:1.2rem;font-weight:500}.callout p{margin:0;color:var(--ink-2);max-width:40em}

/* product: spec section + next steps */
.spec-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(32px,5vw,80px);align-items:start}
.dl{margin:0;border-top:1px solid var(--ink)}
.dl>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl dt{color:var(--ink-3);font-size:.9rem}.dl dd{margin:0;font-weight:500;font-size:.97rem}
.dl dd small{display:block;font-weight:400;color:var(--ink-3);font-size:.84rem;margin-top:2px}
.chip-draft{display:inline-block;font:500 .66rem var(--font);letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line-2);border-radius:3px;color:var(--ink-3);margin-bottom:18px}
.next{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;counter-reset:n}
.next li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.next li::before{counter-increment:n;content:counter(n);font:500 .72rem var(--font);color:var(--ink);border:1px solid var(--line-2);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;margin-top:1px}

/* request a kit */
.req{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.form{display:grid;gap:22px}
.field{display:grid;gap:8px}
.field label,.field legend{font-size:.82rem;font-weight:500;letter-spacing:.04em;color:var(--ink)}
.field input[type=text],.field input[type=email],.field select,.field textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:6px;height:48px;padding:0 14px;width:100%}
.field textarea{height:auto;min-height:110px;padding:12px 14px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--copper);outline-offset:1px;border-color:var(--copper)}
fieldset.field{border:0;padding:0;margin:0}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.choice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:.95rem;line-height:1.35}
.choice:hover{border-color:var(--line-2)}
.choice input{margin-top:3px;accent-color:var(--ink)}
.choice:has(input:checked){border-color:var(--ink)}
.choice small{display:block;color:var(--ink-3);font-size:.82rem}
.summary{position:sticky;top:96px;border:1px solid var(--line);border-radius:10px;padding:28px}
.summary h3{margin:0 0 4px;font-size:1.2rem;font-weight:500}
.summary .mono{color:var(--ink-3)}
.summary .dl{margin-top:18px}.summary .dl>div{grid-template-columns:1fr 1.4fr;padding:11px 0}
.form-note{font-size:.86rem;color:var(--ink-3);line-height:1.55;margin:0}
.sent{border:1px solid var(--ink);border-radius:10px;padding:28px;display:none}
.sent.show{display:block}

/* tidy: single hairline system */
.stage,.acc details,.opt,.three .col{border-color:var(--line)}
.stage:hover,.card:hover,.tile:hover{border-color:var(--ink)}
.block-btn{height:52px}
.card .spec li span:first-child{font-size:.88rem}
.footer-cta{margin-top:18px}

@media(max-width:980px){
  .head,.eng,.spec-sec,.req{grid-template-columns:1fr}
  .head p:not(.eyebrow){padding-top:0}
  .app{grid-template-columns:1fr 28px;row-gap:4px}.app span,.app em{grid-column:1}.app i{grid-column:2;grid-row:1}
  .journey{grid-template-columns:1fr}.journey li{padding:12px 0}
  .summary{position:static}
  .choices{grid-template-columns:1fr}
}
.tbl.num th:first-child,.tbl.num td:first-child{padding-left:0}
.tbl.num td{white-space:nowrap}
.tbl.num tbody th{width:34%}
.compare .tbl th:first-child,.compare .tbl td:first-child{padding-left:18px}
@media(max-width:700px){.tbl.num td{white-space:normal}}

/* port additions */
.acc-faq summary{grid-template-columns:1fr auto}
.acc-faq b{font-weight:500;font-size:1.05rem}
.opt input{opacity:0}