/* Halfbridge Engineering — site stylesheet
   Drawing-sheet aesthetic: drafting-film ground, ink lines, copper accent, solder-mask green for "done". */

@font-face{font-family:"Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Cond";src:url("fonts/ibm-plex-sans-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Cond";src:url("fonts/ibm-plex-sans-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#e9ece8;
  --sheet:#f5f6f3;
  --ink:#141816;
  --ink-2:#39423d;
  --muted:#626c66;
  --line:#c3cac4;
  --line-strong:#8e978f;
  --grid:rgba(20,24,22,.055);
  --accent:#b0501a;
  --accent-ink:#ffffff;
  --accent-soft:#f0dccd;
  --mask:#1c5a40;
  --mask-soft:#d3e5da;
  --hatch:rgba(20,24,22,.12);
  --focus:#1f63c7;
  --pcb:#2e6a4c;--solder:#a7b0b5;--ins:#c23b2e;--lead:#6d7479;--part:#3b3f42;--iron:#4a4f53;
  --sans:"Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --cond:"Plex Cond","Plex Sans","Arial Narrow",system-ui,sans-serif;
  --w:1180px;
  --gut:20px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0c100e;--sheet:#131815;--ink:#e3e8e4;--ink-2:#b8c1bb;--muted:#8a948e;--line:#29312c;--line-strong:#4a544e;
  --grid:rgba(227,232,228,.045);--accent:#e3843f;--accent-ink:#170b03;--accent-soft:#3a2414;--mask:#6fc79c;--mask-soft:#15301f;
  --hatch:rgba(227,232,228,.12);--focus:#7fb0ff;--pcb:#2f7453;--solder:#cfd6da;--ins:#e0574a;--lead:#9aa2a7;--part:#1d2123;--iron:#7a8186;color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--sans);text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--cond);font-weight:700;line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.3rem;font-weight:600;letter-spacing:0}
p{margin:0}
.prose p+p,.prose p+ul,.prose ul+p,.prose h2+p,.prose h3+p,.prose p+h2,.prose p+h3,.prose ul+h2,.prose ul+h3,.prose table+p,.prose p+table,.prose ol+p,.prose p+ol,.prose table+h2,.prose ol+h2,.prose .note+h2,.prose p+.note{margin-top:1em}
.prose h2{margin-top:2.2rem;font-size:1.75rem}
.prose h3{margin-top:1.6rem}
.prose ul,.prose ol{margin:0;padding-left:1.25em}
.prose li+li{margin-top:.35em}
.prose{max-width:70ch}
code,.mono{font-family:var(--mono);font-size:.92em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--sheet);padding:8px 12px;z-index:99}
.skip:focus{left:8px}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--gut)}
.sheet{background:var(--sheet);border:1px solid var(--line-strong)}

/* ---------- labels ---------- */
.lbl{font:500 .72rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.lbl b{color:var(--accent);font-weight:500}
.tag{display:inline-block;font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;padding:4px 6px;color:var(--muted)}
.tag.ours{color:var(--accent)}
.tag.done{color:var(--mask)}

/* ---------- header ---------- */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);border-bottom:1px solid var(--line-strong)}
.hdr .wrap{display:flex;align-items:center;gap:20px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand svg{width:30px;height:30px;flex-shrink:0}
.brand .wm{display:flex;flex-direction:column;line-height:1}
.brand .wm b{font:700 1.18rem/1 var(--cond);letter-spacing:.04em;text-transform:uppercase}
.brand .wm span{font:400 .62rem/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{font:500 .82rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:9px 12px;color:var(--ink-2)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--accent)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;font:500 .84rem/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;
  padding:13px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--sheet)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{background:var(--ink);border-color:var(--ink);color:var(--sheet)}
.btn.sm{padding:9px 12px;font-size:.76rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.nav .btn{margin-left:10px;color:var(--accent-ink)}
.menu{display:none;margin-left:auto}
.menu summary{list-style:none;cursor:pointer;font:500 .8rem/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);padding:10px 12px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{background:var(--ink);color:var(--sheet)}
.menu .panel{position:absolute;left:0;right:0;top:100%;background:var(--sheet);border-bottom:1px solid var(--line-strong);padding:8px var(--gut) 18px;display:grid;gap:0}
.menu .panel a{font:500 .95rem/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--line)}
.menu .panel .btn{margin-top:14px;justify-content:center}
@media (max-width:900px){.nav{display:none}.menu{display:block}}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line-strong);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.hero .wrap{padding-block:56px 40px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:end}
.hero h1 .a{color:var(--accent)}
.hero .lead{font-size:1.14rem;color:var(--ink-2);margin-top:22px;max-width:56ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero .lbl{margin-bottom:18px}
.spec{border:1px solid var(--line-strong);background:var(--sheet);font-family:var(--mono);font-size:.82rem}
.spec .row{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:9px 14px;border-top:1px solid var(--line)}
.spec .row:first-child{border-top:0}
.spec .row span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;padding-top:2px}
.spec .row span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.spec .hd{background:var(--ink);color:var(--sheet);padding:8px 14px;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:32px;padding-block:40px 32px}}

/* ---------- pipeline selector ---------- */
.pipe{border-bottom:1px solid var(--line-strong);background:var(--sheet)}
.pipe .wrap{padding-block:34px 38px}
.pipe-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px;margin-bottom:18px}
.pipe-head h2{font-size:1.65rem}
.stages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.stages button{font:500 .78rem/1.2 var(--mono);text-align:left;padding:9px 11px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);cursor:pointer}
.stages button small{display:block;color:var(--muted);font-weight:400;font-size:.68rem;margin-top:2px}
.stages button[aria-pressed="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.stages button[aria-pressed="true"] small{color:var(--line)}
.chain-scroll{overflow-x:auto;padding-bottom:6px}
.chain{display:grid;grid-template-columns:repeat(11,minmax(92px,1fr));min-width:1040px;position:relative}
.chain .blk{position:relative;padding:12px 10px 12px;border:1px solid var(--line-strong);margin-right:14px;background:var(--bg);text-decoration:none;color:var(--ink);min-height:96px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s,border-color .2s}
.chain .blk:last-child{margin-right:0}
.chain .blk::after{content:"";position:absolute;right:-15px;top:50%;width:14px;border-top:1px solid var(--line-strong)}
.chain .blk:last-child::after{display:none}
.chain .blk .c{font:500 .66rem/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.chain .blk .n{font:600 .95rem/1.15 var(--cond);margin-top:8px}
.chain .blk .s{font:500 .62rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:10px;color:var(--muted)}
.chain .blk.yours{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--hatch) 5px 6px),var(--bg);color:var(--muted)}
.chain .blk.yours .s{color:var(--mask)}
.chain .blk.ours{border-color:var(--accent);background:var(--accent-soft)}
.chain .blk.ours .s{color:var(--accent)}
.chain .blk.ours .c{color:var(--accent)}
.chain .blk.opt .s{color:var(--muted)}
.chain .blk:hover{border-color:var(--ink)}
.pipe-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:0;border:1px solid var(--line-strong);margin-top:22px;background:var(--bg)}
.pipe-out>div{padding:14px 16px;border-right:1px solid var(--line)}
.pipe-out .v{font:600 1.45rem/1.15 var(--cond);margin-top:6px;font-variant-numeric:tabular-nums}
.pipe-out .act{display:flex;align-items:center;padding:14px;border-right:0}
.pipe-note{margin-top:10px;font-size:.8rem;color:var(--muted)}
@media (max-width:820px){.pipe-out{grid-template-columns:1fr 1fr}.pipe-out>div:nth-child(2){border-right:0}.pipe-out>div:nth-child(-n+2){border-bottom:1px solid var(--line)}.pipe-out .act{grid-column:1/-1;border-top:1px solid var(--line)}}

/* ---------- sections ---------- */
.sec{border-bottom:1px solid var(--line-strong)}
.sec>.wrap{padding-block:96px}
.sec.alt{background:var(--sheet)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:52px}
.sec-head .lbl{margin-bottom:12px}
.sec-head p{color:var(--ink-2);max-width:58ch}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:14px}.sec>.wrap{padding-block:46px}}

/* cell grid: shared borders, not floating cards */
.cells{display:grid;border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.cells>*{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:28px}
.cells.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cells.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.cells.c4{grid-template-columns:repeat(2,minmax(0,1fr))}.cells.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cells.c2,.cells.c3,.cells.c4{grid-template-columns:1fr}}
.cell h3{margin-bottom:8px}
.cell p{color:var(--ink-2);font-size:.95rem}
.cell .lbl{margin-bottom:12px;display:block}

a.svc{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);background:var(--sheet);transition:background .15s}
a.svc:hover{background:var(--accent-soft);color:var(--ink)}
a.svc .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
a.svc .top .lbl{margin:0}
a.svc h3{font-size:1.22rem;margin:0}
a.svc p{font-size:.9rem;color:var(--ink-2);flex:1}
a.svc .meta{font:500 .74rem/1.4 var(--mono);color:var(--muted);display:flex;justify-content:space-between;gap:8px;border-top:1px dashed var(--line);padding-top:10px;font-variant-numeric:tabular-nums}
a.svc .meta b{color:var(--ink);font-weight:500}
a.svc.special{background:var(--bg)}

/* datasheet table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line-strong);background:var(--sheet)}
table.ds{width:100%;border-collapse:collapse;font-size:.9rem;min-width:560px}
table.ds caption{caption-side:top;text-align:left;font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--sheet);padding:9px 14px}
table.ds th,table.ds td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.ds thead th{font:500 .7rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:var(--bg);border-bottom:1px solid var(--line-strong)}
table.ds td.num,table.ds th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.ds tr:last-child td{border-bottom:0}
table.ds td:first-child{font-weight:600}
table.ds tfoot td{border-top:1px solid var(--line-strong);font-weight:600}

/* figure */
.fig{border:1px solid var(--line-strong);background:var(--sheet)}
.fig figcaption{font:400 .76rem/1.45 var(--mono);color:var(--muted);padding:10px 14px;border-top:1px solid var(--line)}
.fig svg{display:block;width:100%;height:auto}
.scope-bg{fill:#0d1411}
.scope-grid{stroke:#23332b;stroke-width:1}
.scope-grid.axis{stroke:#35503f}
.tr-a{fill:none;stroke:#e9b64c;stroke-width:2}
.tr-b{fill:none;stroke:#4fd1a0;stroke-width:2}
.scope-txt{font:500 11px var(--mono);fill:#9fb6a9}

/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong)}
.steps>li{list-style:none;border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:22px;counter-increment:s;background:var(--sheet)}
.steps>li::before{content:"STEP " counter(s,decimal-leading-zero);display:block;font:500 .72rem/1 var(--mono);letter-spacing:.1em;color:var(--accent);margin-bottom:14px}
.steps h3{font-size:1.15rem;margin-bottom:8px}
.steps p{font-size:.92rem;color:var(--ink-2)}
.steps{padding:0;margin:0}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

/* two-column content */
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start}
.split aside{position:sticky;top:84px;display:grid;gap:16px}
@media (max-width:960px){.split{grid-template-columns:1fr}.split aside{position:static}}

.page-head{border-bottom:1px solid var(--line-strong);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.page-head .wrap{padding-block:48px 64px}
.crumbs{font:400 .76rem/1.4 var(--mono);color:var(--muted);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{opacity:.6}
.page-head .lead{font-size:1.12rem;color:var(--ink-2);margin-top:18px;max-width:64ch}
.page-head .lbl{margin-bottom:14px}

.lists{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-strong);border-left:1px solid var(--line-strong);margin-top:34px}
.lists>div{border-right:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);padding:20px}
.lists h2{font-size:1.1rem;font-weight:600;margin-bottom:12px}
.lists ul{margin:0;padding:0;list-style:none;font-size:.93rem;color:var(--ink-2)}
.lists li{padding-left:18px;position:relative}
.lists li+li{margin-top:9px}
.lists li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--accent)}
@media (max-width:900px){.lists{grid-template-columns:1fr}}

.mini{display:flex;gap:3px;flex-wrap:wrap;margin-top:22px}
.mini a{font:500 .64rem/1 var(--mono);letter-spacing:.06em;padding:6px 7px;border:1px solid var(--line-strong);text-decoration:none;color:var(--muted);background:var(--bg)}
.mini a.here{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

.prevnext{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-strong);margin-top:40px}
.prevnext a{padding:16px 18px;text-decoration:none;color:var(--ink);background:var(--sheet)}
.prevnext a+a{border-left:1px solid var(--line-strong);text-align:right}
.prevnext a:hover{background:var(--accent-soft)}
.prevnext .lbl{display:block;margin-bottom:6px}
.prevnext b{font:600 1.05rem/1.2 var(--cond)}
.prevnext span.empty{background:var(--bg)}

/* FAQ */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{cursor:pointer;padding:18px 40px 18px 0;font:600 1.1rem/1.3 var(--cond);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:14px;font:400 1.4rem/1 var(--mono);color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq .ans{padding:0 0 20px;color:var(--ink-2);max-width:72ch}
.faq .ans p+p{margin-top:.8em}

/* CTA band */
.band{background:var(--ink);color:var(--sheet)}
.band .wrap{padding-block:48px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.band h2{color:var(--sheet);max-width:26ch}
.band p{color:var(--line);margin-top:10px;max-width:56ch}
.band .btn{border-color:var(--sheet);color:var(--sheet)}
.band .btn.pri{border-color:var(--accent);color:var(--accent-ink)}
.band .btn:hover{background:var(--sheet);color:var(--ink)}

.note{border:1px solid var(--line-strong);border-left:4px solid var(--accent);background:var(--sheet);padding:14px 16px;font-size:.92rem;color:var(--ink-2)}
.note b{color:var(--ink)}

/* footer: drawing title block */
.ftr{padding-block:40px 30px}
.ftr .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px;margin-bottom:34px}
.ftr h4{font:500 .72rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0;font-size:.9rem}
.ftr li+li{margin-top:7px}
.ftr a{text-decoration:none}
.ftr a:hover{text-decoration:underline}
.ftr .about{font-size:.9rem;color:var(--ink-2);max-width:40ch}
.ftr .about p+p{margin-top:10px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}
.linkbtn:hover{color:var(--accent);text-decoration:underline}
@media (max-width:860px){.ftr .cols{grid-template-columns:1fr 1fr}}
.tblock{display:grid;grid-template-columns:2.2fr 3fr 1.2fr .7fr .9fr .8fr;border:1px solid var(--ink);font-family:var(--mono);font-size:.7rem;background:var(--sheet)}
.tblock>div{padding:7px 10px;border-right:1px solid var(--ink)}
.tblock>div:last-child{border-right:0}
.tblock small{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.tblock b{font-weight:500;font-size:.78rem;display:block;overflow-wrap:anywhere}
@media (max-width:760px){.tblock{grid-template-columns:1fr 1fr}.tblock>div{border-bottom:1px solid var(--ink)}.tblock>div:nth-child(2n){border-right:0}.tblock>div:nth-last-child(-n+2){border-bottom:0}}

/* cookie banner */
.ck{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:90;max-width:560px;margin-left:auto;background:var(--sheet);border:1px solid var(--ink);box-shadow:6px 6px 0 var(--line-strong)}
.ck .hd{background:var(--ink);color:var(--sheet);font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:8px 12px}
.ck .bd{padding:14px 14px 16px;font-size:.88rem;color:var(--ink-2)}
.ck .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* forms (shared) */
.fld{display:grid;gap:6px}
.fld label,.fld .lab{font:500 .74rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea,.fld select{font:400 1rem/1.4 var(--sans);padding:11px 12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);width:100%;border-radius:0}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--focus);outline-offset:-1px;border-color:var(--focus)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--ink-2);cursor:pointer}
.chk input{margin-top:4px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.msg{padding:12px 14px;border:1px solid var(--mask);background:var(--mask-soft);color:var(--ink);font-size:.92rem}
.msg.err{border-color:var(--accent);background:var(--accent-soft)}

/* ---------- estimator ---------- */
.est{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;align-items:start}
@media (max-width:960px){.est{grid-template-columns:1fr}}
.est-main{border:1px solid var(--line-strong);background:var(--sheet)}
.est-prog{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line-strong)}
.est-prog span{font:500 .66rem/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 8px;border-right:1px solid var(--line);text-align:center}
.est-prog span:last-child{border-right:0}
.est-prog span.on{background:var(--ink);color:var(--sheet)}
.est-prog span.ok{color:var(--mask)}
@media (max-width:640px){.est-prog span{font-size:0;padding:6px 0}.est-prog span::before{content:attr(data-n);font-size:.7rem}}
.est-step{padding:26px 24px 24px}
.est-step h2{font-size:1.55rem;margin-bottom:6px}
.est-step>p.sub{color:var(--ink-2);margin-bottom:22px;font-size:.95rem}
.opts{display:grid;gap:8px}
.opts.two{grid-template-columns:1fr 1fr}
@media (max-width:640px){.opts.two{grid-template-columns:1fr}}
.opt{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-strong);padding:12px 14px;cursor:pointer;background:var(--bg);transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--ink)}
.opt input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0}
.opt b{font-weight:600;display:block;font-size:.97rem}
.opt small{display:block;color:var(--muted);font-size:.82rem;margin-top:1px}
.opt .hrs{margin-left:auto;font:400 .72rem/1.3 var(--mono);color:var(--muted);white-space:nowrap;text-align:right;padding-left:8px}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.grp+.grp{margin-top:24px}
.grp>.lab{display:block;font:500 .74rem/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg label{border:1px solid var(--line-strong);padding:9px 12px;cursor:pointer;font:500 .84rem/1.2 var(--mono);background:var(--bg)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:1px}
.est-nav{display:flex;justify-content:space-between;gap:10px;padding:16px 24px;border-top:1px solid var(--line-strong);background:var(--bg)}
.est-side{position:sticky;top:84px}
.est-side .spec .row span:last-child{font-weight:500}
.est-side .big{padding:16px 14px 14px;border-top:1px solid var(--line)}
.est-side .big .v{font:700 1.7rem/1.1 var(--cond);font-variant-numeric:tabular-nums;margin-top:6px}
.est-side .fine{font-size:.76rem;color:var(--muted);padding:0 14px 14px;font-family:var(--sans)}
.result-num{font:700 clamp(2.2rem,6vw,3.6rem)/1 var(--cond);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:10px 0 6px}
.result-num small{font:500 .9rem/1 var(--mono);color:var(--muted);letter-spacing:0;margin-left:6px}
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-strong);margin:18px 0}
.res-grid>div{padding:12px 14px;border-right:1px solid var(--line)}
.res-grid>div:last-child{border-right:0}
.res-grid .v{font:600 1.15rem/1.2 var(--cond);margin-top:4px;font-variant-numeric:tabular-nums}
@media (max-width:640px){.res-grid{grid-template-columns:1fr}.res-grid>div{border-right:0;border-bottom:1px solid var(--line)}.res-grid>div:last-child{border-bottom:0}}
.phase-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);font-size:.93rem}
.phase-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.phase-list li span:last-child{font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.disclaimer{border:1px dashed var(--line-strong);padding:12px 14px;font-size:.85rem;color:var(--ink-2);margin:18px 0}
.disclaimer b{color:var(--ink)}
.capture{border-top:1px solid var(--line-strong);margin-top:22px;padding-top:22px}
.capture h3{margin-bottom:6px}
.capture>p{color:var(--ink-2);font-size:.93rem;margin-bottom:16px}
.capture .consents{display:grid;gap:10px;margin-top:4px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media print{.hdr,.ck,.band,.menu{display:none}body{background:#fff}}

table.ds.cap{min-width:0}
table.ds.cap td:first-child{white-space:nowrap}
@media (max-width:520px){table.ds.cap td:first-child{white-space:normal}}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.choice .ch{border:1px solid var(--line-strong);padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.choice .ch .btn{justify-content:center;white-space:normal;text-align:center;line-height:1.3}
.choice .ch p{font-size:.84rem;color:var(--muted)}
@media (max-width:640px){.choice{grid-template-columns:1fr}}
.flow{counter-reset:f;list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.flow li{counter-increment:f;display:grid;grid-template-columns:64px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-strong)}
.flow li::before{content:counter(f,decimal-leading-zero);font:500 1.4rem/1 var(--mono);color:var(--accent)}
.flow li h3{font-size:1.12rem;margin-bottom:4px}
.flow li p{color:var(--ink-2);font-size:.94rem}
.flow li.pay::before{color:var(--mask)}

/* learn / tutorials */
.tfig{margin:20px 0}
.tfig svg{background:var(--sheet);padding:10px}
.sv-pcb{fill:var(--pcb)}.sv-cu{fill:var(--accent)}.sv-lead{fill:var(--lead)}.sv-sold{fill:var(--solder)}
.sv-ins{fill:var(--ins)}.sv-part{fill:var(--part)}.sv-iron{fill:var(--iron)}.sv-ironl{stroke:var(--iron);stroke-width:18;stroke-linecap:round}.sv-tip{fill:var(--lead)}
.sv-strand{stroke:var(--accent);stroke-width:2}.sv-wire-s{fill:none;stroke:var(--solder);stroke-width:4}
.sv-braid{fill:var(--accent);opacity:.55}.sv-braid-full{fill:var(--solder)}
.sv-tw{fill:none;stroke:var(--ink);stroke-width:2.5}.sv-bad{stroke:var(--accent);stroke-width:2}
.sv-t{font:500 13px var(--mono);fill:var(--ink)}.sv-s{font:400 12px var(--mono);fill:var(--muted)}
.sv-ok{fill:var(--mask)}.sv-no{fill:var(--accent)}
.warn{border:1px solid var(--accent);background:var(--accent-soft);padding:12px 14px;font-size:.92rem;margin-bottom:8px}
.stopbox{border:2px solid var(--ink);padding:16px 18px;margin-top:2rem;background:var(--sheet)}
.stopbox .lbl{display:block;margin-bottom:8px;color:var(--accent)}
.stopbox p+p{margin-top:.6em}
.aff{font-size:.78rem;color:var(--muted);margin-top:10px}
table.ds.kit{min-width:620px}
table.ds.kit td:last-child a{white-space:nowrap}
.glist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.glist li{border-bottom:1px solid var(--line-strong)}
.glist a{display:block;padding:14px 0;text-decoration:none;font:600 1.1rem/1.3 var(--cond)}
.tut ol li,.tut ul li{margin-top:.4em}

/* schematics & charts */
.sch{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sch.box{fill:var(--bg)}
.sch.hi{stroke:var(--accent)}
.sch-f{fill:var(--ink)}.sch-hf{fill:var(--accent)}
.sch-t{font:500 12px var(--mono);fill:var(--ink)}
.sch-a{font:400 11px var(--mono);fill:var(--muted)}
.sch-hl{font:500 12px var(--mono);fill:var(--accent)}
.sch-grid{stroke:var(--line);stroke-width:1}
.sch-g{stroke:var(--muted);stroke-width:1}
.sch-dash{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 4;fill:none}
.curve-a{fill:none;stroke:var(--accent);stroke-width:2.5}
.curve-b{fill:none;stroke:var(--mask);stroke-width:2.5}
.res-body{fill:#d8c39c}
.pk-p,.pk-ic{fill:var(--part)}.pk-end{fill:var(--solder)}
.tut .tbl-wrap{margin:14px 0}

/* ---------- v5: calmer layout ---------- */
.hero-one{display:block!important;padding-block:96px 72px!important;max-width:var(--w)}
.hero-one h1{max-width:18ch;font-size:clamp(2.6rem,6vw,4.6rem)}
.hero-one .lead{font-size:1.25rem;max-width:52ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:64px;border-top:1px solid var(--line-strong)}
.facts>div{padding:20px 24px 0 0}
.facts b{display:block;font:700 1.6rem/1.1 var(--cond)}
.facts span{display:block;color:var(--muted);font-size:.92rem;margin-top:6px}
@media (max-width:700px){.facts{grid-template-columns:1fr}.facts>div{padding:16px 0;border-bottom:1px solid var(--line)}}
.pipe .wrap{padding-block:56px 60px}
.pipe-sub{color:var(--ink-2);font-size:.95rem;max-width:40ch}
.pipe-note{display:none}
.groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
@media (max-width:860px){.groups{grid-template-columns:1fr;gap:36px}}
.grp-col h3{font-size:1.5rem;margin-bottom:6px}
.grp-col>p{color:var(--muted);margin-bottom:18px;font-size:.95rem}
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.linklist li{border-bottom:1px solid var(--line)}
.linklist a{display:flex;justify-content:space-between;gap:12px;padding:14px 2px;text-decoration:none;font-weight:600}
.linklist a:hover{color:var(--accent)}
.linklist .from{font:400 .82rem/1.6 var(--mono);color:var(--muted);white-space:nowrap}
.specials{margin-top:56px;display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.specials .linklist{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;border-top:0}
.specials .linklist li{border-top:1px solid var(--line-strong)}
@media (max-width:860px){.specials{grid-template-columns:1fr}.specials .linklist{grid-template-columns:1fr}}
.split2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
.split2 h2{margin:12px 0 18px}
.split2 .big,.big{font-size:1.15rem;color:var(--ink-2);max-width:46ch}
@media (max-width:900px){.split2{grid-template-columns:1fr;gap:36px}}
.price-strip{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:56px;align-items:center}
.bignum{font:700 clamp(3rem,7vw,5rem)/1 var(--cond);margin-top:10px}
.bignum small{font:500 .9rem var(--mono);color:var(--muted);margin-left:8px}
.price-strip p{color:var(--ink-2);max-width:52ch}
@media (max-width:860px){.price-strip{grid-template-columns:1fr;gap:20px}}
.narrow{max-width:820px}
.sec-head.one{display:block;margin-bottom:28px}
.sec-head.one .lbl{display:block;margin-bottom:12px}
.steps>li{padding:28px}
.lists>div{padding:26px}
.theme-btn{background:none;border:1px solid var(--line-strong);color:var(--ink-2);width:36px;height:36px;display:inline-grid;place-items:center;cursor:pointer;margin-left:8px;flex-shrink:0}
.theme-btn:hover{border-color:var(--ink);color:var(--ink)}
.theme-btn svg{width:16px;height:16px}
.menu{margin-left:auto}
@media (max-width:900px){.hdr .theme-btn{margin-left:10px}}
@media (max-width:820px){.sec>.wrap{padding-block:64px}.hero-one{padding-block:64px 48px!important}}

/* ===================== Brand v2 (2026-09): identity, hero, motion ===================== */
/* Motion tokens. Rule: only structure moves (sections, cards, the handover line).
   Prices, numbers, form fields, navigation, legal text and the estimator never animate. */
:root{--t-fast:120ms;--t-base:220ms;--t-slow:420ms;--ease-out:cubic-bezier(.2,.7,.2,1)}
.brand .mg{width:26px;height:30px;color:var(--ink)}
.brand .wm .wm-svg{height:22px;width:auto;display:block;color:var(--ink)}
.brand .wm span{margin-top:4px}
.hero .cta-note{margin-top:12px;font-size:.86rem;color:var(--muted);max-width:60ch}
.handover{margin:40px 0 0;color:var(--ink)}
.handover svg{display:block;width:100%;height:44px}
.handover figcaption{display:flex;justify-content:space-between;font:500 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.handover figcaption span:first-child{width:36%}
.ho-line{stroke-dasharray:1;stroke-dashoffset:0}
.rv-on .handover:not(.in) .ho-line{stroke-dashoffset:1}
.rv-on .handover .ho-line{transition:stroke-dashoffset 900ms var(--ease-out) 200ms}
.proof{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong)}
.proof li{padding:16px 16px 0 0;display:flex;flex-direction:column;gap:4px}
.proof b{font:600 1.05rem/1.2 var(--cond);letter-spacing:.01em}
.proof span{font-size:.86rem;color:var(--muted);line-height:1.4}
@media (max-width:900px){.proof{grid-template-columns:repeat(2,minmax(0,1fr))}.proof li{padding-bottom:12px}}
/* Reveal: 8px rise + fade, 420ms, staggered 60ms, once */
.rv-on .sec-head,.rv-on .groups .grp-col,.rv-on .steps li,.rv-on .cells>*,.rv-on .split2>div,.rv-on .price-strip{opacity:0;transform:translateY(8px);transition:opacity var(--t-slow) var(--ease-out) var(--d,0ms),transform var(--t-slow) var(--ease-out) var(--d,0ms)}
.rv-on .in{opacity:1!important;transform:none!important}
/* Hover and press: colour and 1px only */
.btn{transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn:active{transform:translateY(1px)}
.linklist a .from{transition:transform var(--t-base) var(--ease-out),color var(--t-fast)}
.linklist a:hover .from{color:var(--accent)}
/* Page transition: short cross-fade where the browser supports it */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:160ms}
/* Cookie notice: compact, bottom-left, never over the hero proof row on desktop */
.ck{max-width:420px;margin-left:0}
.ck .bd{font-size:.84rem}
/* Sticky estimate button on phones */
.mcta{display:none}
@media (max-width:820px){.mcta{display:block;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:80;text-align:center;transform:translateY(160%);transition:transform var(--t-base) var(--ease-out)}.mcta.show{transform:none}body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.rv-on .sec-head,.rv-on .groups .grp-col,.rv-on .steps li,.rv-on .cells>*,.rv-on .split2>div,.rv-on .price-strip{opacity:1;transform:none}.ho-line{stroke-dashoffset:0!important}}

/* Cookie consent: full-screen overlay. Accept and Reject share the same size and style (GDPR / AEPD equal prominence). */
.ck{inset:0;max-width:none;margin:0;padding:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,12,16,.72);border:0;box-shadow:none;z-index:200}
.ck[hidden]{display:none}
.ck .hd,.ck .bd{width:min(520px,100%)}
.ck .bd{background:var(--sheet);border:1px solid var(--ink);border-top:0;padding:22px 22px 24px;font-size:1rem;box-shadow:6px 6px 0 var(--line-strong)}
.ck .row{gap:12px;margin-top:18px}
.ck .row .btn{flex:1 1 0;justify-content:center;text-align:center;padding:.95rem 1rem;font-size:1rem}
body:has(.ck:not([hidden])){overflow:hidden}