/* CNC Compared — design system v3 (wake 111). Light-first, dark via prefers-color-scheme or [data-theme].
   Tokens from the operator's brief: paper/surface/ink/graphite/muted/rule, safety orange, blueprint blue, ply. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(/fonts/space-grotesk-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url(/fonts/space-grotesk-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(/fonts/space-grotesk-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  --paper: #FAF9F6; --surface: #FFFFFF; --ink: #16191D; --graphite: #4B5563; --muted: #6B7280; --rule: #E4E1D8; --rule-2: #EFECE4;
  --safety: #EA580C; --safety-text: #C2410C; --blueprint: #1D4ED8; --blueprint-soft: #E8EEFC; --ply: #D9B98A; --ply-2: #C9A56F;
  --ok: #15803D; --ok-soft: #E7F4EC; --warn: #B45309; --warn-soft: #FDF3E7; --img-bg: #FFFFFF;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --disp: "Space Grotesk", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 12px; --shadow: 0 1px 2px rgba(22, 25, 29, .05), 0 6px 20px rgba(22, 25, 29, .06);
  /* drawings */
  --d-line: #16191D; --d-t: #FFFFFF; --d-f: #EDEBE5; --d-s: #DAD6CC; --d-dark: #4B5563;
  --d-a-t: #FDBA8C; --d-a-f: #F97316; --d-a-s: #C2410C; --d-wa: rgba(29, 78, 216, .08);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111418; --surface: #181C21; --ink: #E7E5E0; --graphite: #C2C6CD; --muted: #9CA3AF; --rule: #2A2F36; --rule-2: #20252B;
    --safety: #FB923C; --safety-text: #FB923C; --blueprint: #7EA6FF; --blueprint-soft: #1C2740; --ply: #8F7650; --ply-2: #75603F;
    --ok: #4ADE80; --ok-soft: #14301F; --warn: #FBBF24; --warn-soft: #33270F; --img-bg: #F4F3EF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --d-line: #D9DCE1; --d-t: #2A2F36; --d-f: #22272D; --d-s: #1B1F24; --d-dark: #9CA3AF; --d-wa: rgba(126, 166, 255, .12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111418; --surface: #181C21; --ink: #E7E5E0; --graphite: #C2C6CD; --muted: #9CA3AF; --rule: #2A2F36; --rule-2: #20252B;
  --safety: #FB923C; --safety-text: #FB923C; --blueprint: #7EA6FF; --blueprint-soft: #1C2740; --ply: #8F7650; --ply-2: #75603F;
  --ok: #4ADE80; --ok-soft: #14301F; --warn: #FBBF24; --warn-soft: #33270F; --img-bg: #F4F3EF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --d-line: #D9DCE1; --d-t: #2A2F36; --d-f: #22272D; --d-s: #1B1F24; --d-dark: #9CA3AF; --d-wa: rgba(126, 166, 255, .12);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 28px; } }
a { color: var(--safety-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--safety); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--disp); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 4.2vw, 2.6rem); font-weight: 700; margin: .2rem 0 .8rem; }
h2 { font-size: 1.375rem; font-weight: 600; margin: 2.6rem 0 .9rem; }
h3 { font-size: 1.125rem; font-weight: 600; margin: 0 0 .4rem; }
p, ul, ol { margin: 0 0 1rem; }
.num, .n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lede { font-size: 1.125rem; color: var(--graphite); max-width: 46rem; }
.eyebrow { font: 600 .8125rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--safety-text); margin: 0 0 .4rem; }
.fine, .hint { font-size: .875rem; color: var(--muted); }
.np { color: var(--warn); font-style: italic; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: .5rem .8rem; border-radius: 6px; z-index: 50; }
.skip:focus { left: 8px; }

/* header */
.hdr { background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 20; }
.hdr-in { display: flex; align-items: center; gap: 1rem; min-height: 60px; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); font: 600 1.05rem/1 var(--disp); white-space: nowrap; }
.logo b { color: var(--safety-text); font-weight: 700; }
.logo svg { width: 24px; height: 24px; fill: none; stroke: var(--safety); stroke-width: 2; stroke-linejoin: round; }
.mainnav { display: flex; gap: .2rem; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.mainnav a { font: 500 .9375rem/1 var(--sans); color: var(--graphite); text-decoration: none; padding: .75rem .7rem; border-radius: 8px; white-space: nowrap; }
.mainnav a:hover { background: var(--rule-2); color: var(--ink); }
.mainnav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--safety); border-radius: 0; }
.theme { flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 560px) { .logo span { font-size: .95rem; } .mainnav a { padding: .75rem .45rem; font-size: .875rem; } .theme { width: 40px; height: 40px; } }

.crumbs { font-size: .8125rem; color: var(--muted); margin: 1rem 0 .4rem; }
.crumbs a { color: var(--muted); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .65rem 1.1rem; border-radius: 10px;
  font: 600 .9375rem/1.1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid var(--safety); background: var(--safety); color: #16191D; }
.btn:hover { filter: brightness(1.05); color: #16191D; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.wide { width: 100%; margin-top: .6rem; }
.btn[aria-pressed="true"] { background: var(--blueprint); border-color: var(--blueprint); color: #fff; }

/* hero */
.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.2rem; align-items: center; padding: 1.2rem 0 1rem; }
.stats { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; font-size: .9375rem; color: var(--graphite); }
.stats b { font-size: 1.375rem; color: var(--ink); margin-right: .25rem; font-weight: 500; }
.hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; }
.hero-chart { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1rem .6rem; box-shadow: var(--shadow); }
.hero-chart figcaption { font-size: .8125rem; color: var(--muted); margin-top: .4rem; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 1.2rem; } }

.sect { padding-top: 1.4rem; border-top: 1px solid var(--rule); }

/* toolbar */
.toolbar { position: sticky; top: 60px; z-index: 10; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px);
  padding: .7rem 0 .6rem; margin: 0 -16px; padding-left: 16px; padding-right: 16px; border-bottom: 1px solid var(--rule); }
.fchips { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .5rem; scrollbar-width: thin; }
.fchips button { flex: none; min-height: 40px; font: 500 .875rem/1 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 999px; padding: .5rem .9rem; cursor: pointer; white-space: nowrap; }
.fchips button i { font: 500 .8125rem/1 var(--mono); font-style: normal; color: var(--muted); margin-left: .3rem; }
.fchips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fchips button[aria-pressed="true"] i { color: var(--paper); opacity: .75; }
.tctl { display: flex; gap: .6rem; flex-wrap: wrap; }
.fld { display: flex; flex-direction: column; gap: .25rem; font: 600 .8125rem/1 var(--sans); color: var(--graphite); }
.fld.grow { flex: 1 1 12rem; }
.fld select, .fld input { min-height: 42px; font: 400 .9375rem/1.2 var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: .5rem .7rem; }
.count { font-size: .875rem; color: var(--muted); margin: .9rem 0; }

/* cards */
.mgrid { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s ease; }
.card:hover { border-color: var(--graphite); }
.card[hidden] { display: none; }
.card-img { display: block; }
.ph { position: relative; aspect-ratio: 4 / 3; background: var(--img-bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ph > svg { width: 78%; height: 78%; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; background: #fff; }
.ph .credit { position: absolute; right: 8px; bottom: 6px; font: 500 .75rem/1 var(--sans); color: #4B5563; background: rgba(255, 255, 255, .9); padding: .2rem .4rem; border-radius: 4px; }
.card-b { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.mk { font: 600 .8125rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .2rem; }
.card h3 { font-size: 1.2rem; margin: 0 0 .35rem; }
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--safety-text); }
.spec { font: 500 .875rem/1.3 var(--mono); color: var(--graphite); margin: 0 0 .6rem; }
.chips { list-style: none; padding: 0; margin: 0 0 .7rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.chips li { font: 500 .8125rem/1 var(--sans); padding: .38rem .55rem; border-radius: 6px; background: var(--rule-2); color: var(--graphite); }
.chips li.ok { background: var(--ok-soft); color: var(--ok); }
.chips li.no { background: var(--warn-soft); color: var(--warn); }
.chips li.na { background: var(--rule-2); color: var(--muted); }
.pr { margin: auto 0 .7rem; }
.pr .num { font-size: 1.375rem; font-weight: 500; }
.pr s { color: var(--muted); font: .875rem var(--mono); margin-left: .25rem; }
.pr small { font-size: .8125rem; color: var(--muted); margin-left: .25rem; }
.card-f { display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid var(--rule-2); padding-top: .6rem; }
.cmpb { min-height: 40px; font: 600 .875rem/1 var(--sans); background: var(--surface); color: var(--blueprint); border: 1px solid var(--blueprint); border-radius: 8px; padding: .5rem .8rem; cursor: pointer; }
.cmpb[aria-pressed="true"] { background: var(--blueprint); color: #fff; }
.sn { font-size: .8125rem; color: var(--muted); text-decoration: none; }
.sn:hover { color: var(--warn); }

/* tray */
.tray { position: sticky; bottom: 12px; z-index: 15; display: flex; align-items: center; gap: .8rem; width: fit-content; max-width: 100%; margin: 0 auto 1rem;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: .4rem .45rem .4rem 1.1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: .9375rem; }
.tray[hidden] { display: none; }
.tray .btn { min-height: 40px; }
.tray button { min-height: 40px; font: 500 .875rem var(--sans); color: var(--paper); background: none; border: 0; cursor: pointer; padding: 0 .6rem; opacity: .8; }

/* tables */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); margin: 0 0 1.2rem; position: relative; }
.dt { border-collapse: collapse; width: 100%; font: 400 .9375rem/1.45 var(--sans); }
.dt.wide { min-width: 860px; }
.dt caption { text-align: left; font-size: .875rem; color: var(--muted); padding: .7rem .9rem 0; }
.dt th, .dt td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.dt thead th { font: 600 .8125rem/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--graphite); background: var(--rule-2); white-space: nowrap; }
.dt tbody th { font-weight: 600; }
.dt td.n, .dt th.n { text-align: right; white-space: nowrap; }
.dt.wide tbody th, .dt.wide thead th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 12rem; }
.dt.wide thead th:first-child { background: var(--rule-2); }
.sheet th { width: 32%; color: var(--graphite); }
.swipe { display: none; }
@media (max-width: 860px) { .swipe { display: inline; color: var(--blueprint); } }

/* figures and drawings */
.fig { margin: 0 0 1.4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem; }
.fig figcaption { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }
.fig.cad { background: var(--surface) linear-gradient(var(--rule-2) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--rule-2) 1px, transparent 1px) 0 0 / 24px 24px; }
svg.ill, svg.dia { display: block; width: 100%; height: auto; }
.fig.cad svg.dia { max-width: 760px; margin: 0 auto; }
svg.ill polygon, svg.ill path, svg.ill ellipse, svg.ill rect { stroke: var(--d-line); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.m.t, .enc.t { fill: var(--d-t); } .m.f, .enc.f { fill: var(--d-f); } .m.s, .enc.s { fill: var(--d-s); }
.m.dark, svg .m.dark.t, svg .m.dark.f, svg .m.dark.s { fill: var(--d-dark); }
.a.t { fill: var(--d-a-t); } .a.f { fill: var(--d-a-f); } .a.s { fill: var(--d-a-s); }
.wood.t { fill: var(--ply); } .wood.f { fill: var(--ply-2); } .wood.s { fill: var(--ply-2); }
.glass { fill: var(--surface); opacity: .85; stroke: var(--d-line); stroke-width: 1; }
.glare { fill: #fff; opacity: .25; stroke: none !important; }
.bit, .bit.t, .bit.f { fill: var(--d-dark); }
.ghost.f, .ghost.t { fill: none; stroke: var(--d-line) !important; stroke-dasharray: 5 4; }
.ph svg.ill { --d-line: #16191D; --d-t: #FFFFFF; --d-f: #EDEBE5; --d-s: #DAD6CC; --d-dark: #4B5563; --ply: #D9B98A; --ply-2: #C9A56F; }
.wa { fill: var(--d-wa); stroke: var(--blueprint); stroke-width: 2; }

svg .grid { stroke: var(--blueprint); stroke-width: 1; opacity: .25; }
.paper { fill: var(--surface); stroke: var(--d-line); stroke-width: 1.2; stroke-dasharray: 6 4; }
svg .lbl { fill: var(--ink); font: 500 15px/1 var(--sans); stroke: none; }
svg .lbl.sm { font-size: 14px; } svg .lbl.xs { font-size: 13px; fill: var(--graphite); } svg .lbl.b { font-weight: 700; font-size: 15px; }
svg .lbl.xs.inv { fill: var(--ink); }
svg.dia rect.m, svg.dia rect.a, svg.dia path.a, svg.dia path.m, svg.dia circle.m { stroke: var(--d-line); stroke-width: 1.2; }
svg.dia .a.f { fill: var(--d-a-t); }
.thread { stroke: var(--d-line); stroke-width: 1.2; opacity: .5; }
.nutthread { fill: none; stroke: var(--surface); stroke-width: 1.4; stroke-dasharray: 3 5; }
.ball { fill: var(--surface); stroke: var(--d-line); stroke-width: 1.2; }
.ret { fill: none; stroke: var(--d-a-s); stroke-width: 7; stroke-linecap: round; }
.arrow { fill: none; stroke: var(--blueprint); stroke-width: 2; }
.ahead { fill: var(--blueprint); }
.hole { fill: var(--surface); stroke: var(--d-line); stroke-width: 1.2; }
.vent { stroke: var(--d-a-s); stroke-width: 3; stroke-linecap: round; }
.cable { fill: none; stroke: var(--d-dark); stroke-width: 4; }
.leader { stroke: var(--ink); stroke-width: 1.3; } .dim { stroke: var(--ink); stroke-width: 1.3; stroke-dasharray: 4 3; }
.dot { fill: var(--safety); }
.gl { stroke: var(--rule); stroke-width: 1; } .axis { stroke: var(--graphite); stroke-width: 1.2; }
.dot-ball { fill: var(--blueprint); stroke: var(--surface); stroke-width: 2; }
.dot-lead { fill: var(--safety); stroke: var(--surface); stroke-width: 2; }
.dot-na { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
svg .dotl { fill: var(--ink); font-size: 12.5px; }

/* posts */
.posts { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.post { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.post-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: .9rem; background: var(--paper);
  background-image: linear-gradient(var(--rule-2) 1px, transparent 1px), linear-gradient(90deg, var(--rule-2) 1px, transparent 1px); background-size: 20px 20px; }
.post-img svg { max-height: 100%; width: auto; max-width: 100%; }
.post-b { padding: .9rem 1rem 1.1rem; }
.post h3 { font-size: 1.125rem; margin: 0 0 .4rem; }
.post h3 a { color: var(--ink); text-decoration: none; }
.post h3 a:hover { color: var(--safety-text); }
.post p { font-size: .9375rem; color: var(--graphite); margin: 0; }
.more { font-weight: 600; }

details.notes-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: .2rem 1rem; margin: 0 0 1rem; }
details.notes-box summary { cursor: pointer; font-weight: 600; padding: .7rem 0; min-height: 44px; }
.notes li { margin-bottom: .6rem; }

/* product page */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: .6rem; }
.prod-h h1 { margin-bottom: .6rem; }
.prod-img { margin: 0; }
.prod-img .ph { border: 1px solid var(--rule); border-radius: var(--r); }
.prod-img figcaption { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }
.prod-side { position: sticky; top: 76px; }
.buybox { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1.1rem; box-shadow: var(--shadow); }
.bp { margin: 0 0 .2rem; } .bp .num { font-size: 2rem; font-weight: 500; } .bp s { color: var(--muted); font-family: var(--mono); margin-left: .4rem; }
.keyspecs { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; margin: .9rem 0; padding: .8rem 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); font-size: .9375rem; }
.keyspecs dt { color: var(--muted); } .keyspecs dd { margin: 0; }
@media (max-width: 1023px) {
  .prod { grid-template-columns: 1fr; gap: 16px; }
  .prod-main { display: contents; }
  .prod-h { order: 1; } .prod-side { order: 2; position: static; } .prod-img { order: 3; }
}
.box2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.box2 > div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem 1.1rem; }
.box2 ul { padding-left: 1.2rem; margin: 0; } .box2 li { margin-bottom: .45rem; font-size: .9375rem; }
.have li::marker { content: "✓  "; color: var(--ok); } .need li::marker { content: "→  "; color: var(--warn); }
@media (max-width: 700px) { .box2 { grid-template-columns: 1fr; } }
.feats { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 0 0 1.2rem; }
.feat { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 1rem; display: flex; flex-direction: column; font-size: .9375rem; }
.feat h3 { font: 600 .8125rem/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--safety-text); }
.feat p { margin: 0 0 .5rem; } .feat .more { margin-top: auto; font-size: .875rem; }
.feat .mini svg { max-height: 70px; }
.minis { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.mini a { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; padding-bottom: .8rem; }
.mini a > span, .mini a > b { padding: 0 .9rem; } .mini .mk { padding-top: .7rem; } .mini b { font: 600 1rem var(--disp); }

/* compare */
.picker { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: .6rem; align-items: end; margin: 1rem 0; }
.tog { display: flex; align-items: center; gap: .45rem; min-height: 42px; font-size: .9375rem; white-space: nowrap; }
.tog input { width: 20px; height: 20px; accent-color: var(--blueprint); }
@media (max-width: 860px) { .picker { grid-template-columns: 1fr 1fr; } .tog { grid-column: 1 / -1; } }
.cmpt { table-layout: fixed; min-width: 640px; }
.cmpt th:first-child, .cmpt td:first-child { width: 150px; }
.cmpt tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; font-size: .875rem; color: var(--graphite); }
.cmpt thead th { position: sticky; top: 0; background: var(--surface); text-transform: none; letter-spacing: 0; font-size: 1rem; color: var(--ink); vertical-align: bottom; white-space: normal; }
.cmpt .cph { display: block; text-decoration: none; color: var(--ink); }
.cmpt .cph .ph { border-radius: 8px; border: 1px solid var(--rule-2); margin-bottom: .4rem; }
.cmpt small { display: block; font: 400 .8125rem var(--sans); color: var(--muted); }
.cmpt tr.diff td { background: var(--blueprint-soft); }
@media (max-width: 640px) { .cmpt { min-width: calc(110px + 2 * 42vw); } .cmpt th:first-child, .cmpt td:first-child { width: 110px; } }

/* reading pages */
.read { max-width: 720px; }
.read h2 { margin-top: 2.2rem; }
.byline { font-size: .875rem; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: .6rem 0; }
.read .fig { margin-left: 0; margin-right: 0; }
.read li { margin-bottom: .4rem; }
.sources { font-size: .9375rem; }
aside.next { margin-top: 2.4rem; padding: 1rem 1.2rem; border: 1px solid var(--rule); border-left: 4px solid var(--safety); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; }
aside.next p { margin: 0 0 .3rem; } aside.next a { font-weight: 600; }

/* footer */
.ftr { margin-top: 4rem; border-top: 1px solid var(--rule); background: var(--surface); padding: 1.6rem 0 2.6rem; font-size: .875rem; color: var(--graphite); }
.ftr p { max-width: 60rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.cmpt tr.grp th { background: var(--rule-2); font: 600 .8125rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); position: static; }
.cmpt .ph.noimg { display: none; }
.cmpt .ph:empty { display: none; }
.leadl { stroke: var(--muted); stroke-width: .8; }
.fld select, .fld input { width: 100%; min-width: 0; }
.picker > * { min-width: 0; }
@media (max-width: 600px) {
  .hdr { position: static; }
  .hdr-in { flex-wrap: wrap; gap: 0 .5rem; padding-top: .4rem; }
  .logo { flex: 1; }
  .mainnav { order: 3; width: 100%; margin: 0 -8px; justify-content: space-between; }
  .toolbar { top: 0; }
  .prod-side { top: 0; }
}
@media (max-width: 600px) {
  .hero-chart { overflow-x: auto; }
  .hero-chart svg { min-width: 600px; }
  .hero-chart figcaption::after { content: " Swipe the chart sideways →"; color: var(--blueprint); }
}
.chips li.ok { color: #166534; } .chips li.na { color: #4B5563; } .chips li.no { color: #92400E; }
:root[data-theme="dark"] .chips li.ok { color: var(--ok); } :root[data-theme="dark"] .chips li.na { color: var(--muted); } :root[data-theme="dark"] .chips li.no { color: var(--warn); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips li.ok { color: var(--ok); } :root:not([data-theme="light"]) .chips li.na { color: var(--muted); } :root:not([data-theme="light"]) .chips li.no { color: var(--warn); } }
.read .tscroll .dt { min-width: 680px; }
.read .tscroll .dt tbody th { min-width: 10rem; }
.read .tscroll .dt td { white-space: nowrap; }

/* ---- v4 (wake 114): typed filters, finder, visualizer, cost estimate, X-vs-Y ---- */
.bench { margin-top: .7rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: .1rem .9rem; }
.bench summary { cursor: pointer; font: 600 .9375rem/2.6 var(--sans); }
.bench p { font-size: .875rem; color: var(--graphite); margin: .2rem 0 .7rem; }
.bench-in { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; padding-bottom: .9rem; }
.bench-in .fld input { width: 7rem; }
.active { font-size: .875rem; color: var(--graphite); margin: .6rem 0 0; }
.active button, .linkbtn { font: inherit; color: var(--blueprint-text, var(--blueprint)); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.tool { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 1.1rem 1.2rem; margin: 1.2rem 0; }
.tool fieldset { border: 0; margin: 0 0 1.1rem; padding: 0; }
.tool legend { font: 600 1.05rem/1.3 var(--disp); margin-bottom: .55rem; padding: 0; }
.opts { display: flex; flex-wrap: wrap; gap: .45rem; }
.opts label { display: inline-flex; align-items: center; gap: .45rem; min-height: 42px; padding: .45rem .8rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: .9375rem; }
.opts input { accent-color: var(--safety); width: 1.05rem; height: 1.05rem; margin: 0; }
.opts label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.results { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.results li { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; padding: .8rem 1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.results .why { grid-column: 1 / -1; font-size: .875rem; color: var(--graphite); margin: 0; }
.results .p { font: 600 1rem/1.3 var(--mono); }
.viz-wrap { overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.viz-wrap svg { display: block; width: 100%; height: auto; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; padding: 0; margin: .7rem 0 0; font-size: .875rem; }
.viz-legend i { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px; vertical-align: -2px; margin-right: .35rem; border: 2px solid currentColor; }
.cost td.n, .cost th.n { text-align: right; font-family: var(--mono); }
.cost tfoot th, .cost tfoot td { font-weight: 700; border-top: 2px solid var(--ink); }
.vs-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; margin: 1rem 0 1.4rem; }
.vs-head .vs { font: 700 1.4rem/1 var(--disp); color: var(--safety-text); }
.vs-head .side { text-align: center; }
.vs-head .side .ph { max-width: 280px; margin: 0 auto .5rem; }
.diff td.win { font-weight: 600; }
.pairs { columns: 2 18rem; padding-left: 1.1rem; }
.pairs li { margin: 0 0 .35rem; break-inside: avoid; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .7rem; list-style: none; padding: 0; }
.swatches li { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; font: 500 .8125rem/1.4 var(--mono); }
.swatches li span { display: block; height: 3.2rem; }
.swatches li b { display: block; padding: .4rem .6rem 0; font-family: var(--sans); }
.swatches li code { display: block; padding: 0 .6rem .45rem; }
@media (max-width: 640px) { .vs-head { grid-template-columns: 1fr; } .vs-head .vs { text-align: center; } }
.h3 { font: 600 1.15rem/1.3 var(--disp); margin: 1.2rem 0 .3rem; }
.wide-read { max-width: 820px; }
.total { font-size: 1.05rem; margin: .8rem 0 0; }
.tool .fld { margin-bottom: .6rem; }
.tool .fld select { max-width: 100%; }
.dt.sheet td.src { white-space: nowrap; font-size: .8125rem; }
.hist { padding-left: 1.1rem; }
.doors-cnc { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem; }
.doors-cnc .feat h3 a { color: var(--ink); text-decoration: none; }
.doors-cnc .feat h3 a::after { content: " →"; color: var(--safety-text); }
.doors-cnc .feat h3 { font: 600 1.15rem/1.3 var(--disp); text-transform: none; letter-spacing: 0; color: var(--ink); }
.dt thead a { color: var(--ink); }