/* ============================================================
   clean.css — the redesign (2026-09-25)

   Loaded last, after site.css and buff.css. Jake's brief, in two
   rounds: easy to read, minimal, professional, far less red — and
   then "that's still a restyle, redesign it". So:

   - a neutral palette (white / near-black, greys, hairlines) with
     colour coming from the drawings of the product, not the UI;
   - a new page structure: section bands that alternate, a size
     bench for the four plates, icon-led steps, illustrated page
     heads on every inner page, and a dark closing panel;
   - drawn illustrations of real plates (assets/ill/, generated by
     tools/draw-illustrations.py): white-on-red capitals, the core
     showing at the bevel, drilled holes, wording the site already
     uses. They are CSS backgrounds, so none of their words become
     page text;
   - the beam and its sparks (buff.css / buff.js) are untouched.

   Copy, headings, links and schema are unchanged — every rule here
   is presentation.
   ============================================================ */

:root{
  --canvas:#ffffff;
  --card:#f5f5f3;
  --panel:#f6f6f4;
  --hairline:#e7e6e3;
  --divider:#d3d1cd;
  --graphite:#111111;
  --ink:#111111;
  --pencil:#4a4946;
  --faint:#b5b3af;
  --label:#6e6c68;
  --action-bg:#111111;
  --action-fg:#ffffff;
  --photo-filter:none;
  --tile:#ffffff;

  --r-card:16px;
  --r-btn:10px;
  --wrap:1180px;
  --section-gap:clamp(80px,10vw,136px);

  /* the plate's own face — a plain grotesque in bold capitals, which is
     what a real engraved plate carries, not the site's text face */
  --plate-font:'DIN Alternate','Bahnschrift','D-DIN','DIN 1451','Helvetica Neue',Arial,sans-serif;
}
:root[data-theme="dark"]{
  --canvas:#0b0b0b;
  --card:#161616;
  --panel:#111111;
  --hairline:#242424;
  --divider:#353535;
  --graphite:#f2f2f0;
  --ink:#f2f2f0;
  --pencil:#b0aeaa;
  --faint:#4a4a4a;
  --label:#8c8a86;
  --action-bg:#f2f2f0;
  --action-fg:#0b0b0b;
  --photo-filter:brightness(.92);
  --tile:#f4f3f1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#0b0b0b;
    --card:#161616;
    --panel:#111111;
    --hairline:#242424;
    --divider:#353535;
    --graphite:#f2f2f0;
    --ink:#f2f2f0;
    --pencil:#b0aeaa;
    --faint:#4a4a4a;
    --label:#8c8a86;
    --action-bg:#f2f2f0;
    --action-fg:#0b0b0b;
    --photo-filter:brightness(.92);
    --tile:#f4f3f1;
  }
}

/* ============================================================
   BASE
   ============================================================ */
body{font-weight:400;font-size:16px;line-height:1.6;letter-spacing:-.005em}
strong,b{font-weight:600}
::selection{background:var(--ink);color:var(--canvas)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

/* the drafting grid and its washes go — plain paper */
.gridbg{background-image:none}
.gridbg::before{display:none}
.hero::before,.hero .halo-a,.dark::before,.dark .halo{display:none}

.ilink,.note a,.prose a,.dark a,.dark .ilink,.quote .ilink{
  color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.2em;text-decoration-color:var(--divider)}
.ilink:hover,.note a:hover,.prose a:hover,.dark a:hover,.dark .ilink:hover,.quote .ilink:hover{
  color:var(--ink);text-decoration-color:var(--ink)}

/* ---------------- header ---------------- */
.hdr{background:color-mix(in srgb,var(--canvas) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--hairline)}
.hdr-in{min-height:68px}
.logo b{font-size:15px;font-weight:600;letter-spacing:-.02em}
.logo .sub{font-family:var(--sans);font-size:12px;letter-spacing:0;text-transform:none;
  font-weight:400;line-height:1.4}
.nav a{font-size:14.5px;font-weight:450;color:var(--pencil)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.theme-tog{border-radius:10px;padding:8px 10px}

/* ---------------- buttons ---------------- */
.btn,.nav .cta{border-radius:var(--r-btn);font-family:var(--sans);font-size:15px;font-weight:500;
  letter-spacing:-.01em;text-transform:none;min-height:46px;padding:0 20px;box-shadow:none;
  transition:opacity .15s ease,border-color .15s ease,background-color .15s ease}
.nav .cta{min-height:38px;padding:0 16px;font-size:14px;display:inline-flex;align-items:center}
.btn-p,.btn-a,.nav .cta{background:var(--action-bg);color:var(--action-fg);
  border:1px solid var(--action-bg);box-shadow:none}
.btn-p:hover,.btn-a:hover,.nav .cta:hover{
  background:var(--action-bg);color:var(--action-fg);opacity:.84;transform:none}
.btn-s,.btn-o{background:var(--canvas);color:var(--ink);border:1px solid var(--divider)}
.btn-s:hover,.btn-o:hover{border-color:var(--ink);color:var(--ink);transform:none}
.btn-p:active,.btn-a:active{transform:none}
.btn-row{gap:10px}

/* ---------------- labels ---------------- */
/* the eyebrow is a small outlined pill — a quiet index for the section */
.kicker,.dark .kicker,.quote .kicker{display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--pencil);opacity:1;margin-bottom:18px;
  padding:5px 12px;border:1px solid var(--hairline);border-radius:999px;background:var(--canvas)}
.kicker::before,.dark .kicker::before{display:none}
.sec-note,.quote .sec-note{font-family:var(--sans);font-size:14px;color:var(--label);opacity:1;
  letter-spacing:0;text-transform:none}
.crumbs{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--label)}
.crumbs a{color:var(--label)}
.crumbs a:hover{color:var(--ink)}

/* ---------------- headings & text ---------------- */
h1,h2,h3{font-weight:600}
.sec h2,.dark h2,.quote h2,.rsec > h2,.tsec > h2,.proc h2{
  font-size:clamp(2rem,3.8vw,48px) !important;line-height:1.08;letter-spacing:-.035em;
  font-weight:600;max-width:22ch;color:var(--ink)}
.lede{font-size:18px;line-height:1.6;letter-spacing:-.01em;color:var(--pencil);max-width:62ch}
.note{font-size:15px;line-height:1.65;color:var(--pencil)}
.prose p{font-size:16px;line-height:1.7}

/* ---------------- the engraved plate (HTML) ----------------
   Same construction as before; the legend now uses the plate's own
   grotesque in bold capitals — what 64-200(3) actually asks for —
   instead of the site's monospace. */
.plate .top,.plate .main,.plate .sub{font-family:var(--plate-font);font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.plate .top{font-weight:800;letter-spacing:.12em}
.plate .sub{font-weight:600;letter-spacing:.08em}

/* ---------------- cards (shared) ---------------- */
.card,.pcard,.duo > article{background:var(--canvas);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:28px;box-shadow:none;animation:none;
  transition:border-color .2s ease,box-shadow .2s ease}
.card:hover,.pcard:hover,.duo > article:hover{transform:none;border-color:var(--divider);
  box-shadow:0 12px 32px -20px rgba(0,0,0,.28)}
.card:hover .card-body h3{color:inherit}
.card-body h3{font-size:18px;font-weight:600}
.card-body h3 .mm{font-family:var(--sans);font-size:13px;color:var(--label)}
.card-body p,.pcard p{font-size:15px;line-height:1.6;color:var(--pencil)}
.card-foot{font-family:var(--sans);font-size:13px;color:var(--label);border-top:1px solid var(--hairline)}
.card-foot b{color:var(--label);font-weight:500}
.pcard .k{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--label);opacity:1;margin-bottom:8px}
.pcard .v{font-size:20px;font-weight:600;letter-spacing:-.02em}
.pcard.ink{background:var(--action-bg);color:var(--action-fg);border-color:var(--action-bg)}
.pcard.ink .k{color:var(--action-fg);opacity:.62}
.pcard.ink p{color:var(--action-fg);opacity:.8}

/* callouts get an info mark, not a coloured slab */
.call,.call.amber{position:relative;background:var(--card);border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:24px 28px 24px 64px}
.call::before{content:"";position:absolute;left:24px;top:25px;width:22px;height:22px;
  background:var(--ink);-webkit-mask:url(ill/i-info.svg) center/contain no-repeat;
  mask:url(ill/i-info.svg) center/contain no-repeat}
.call .k,.call.amber .k{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);margin-bottom:6px}
.call p{font-size:15px;line-height:1.65;color:var(--pencil)}
.pull{border-left:2px solid var(--ink)}
.pull cite,.quoteband cite{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none}
.quoteband{background:var(--panel);border-color:var(--hairline)}

/* ---------------- tables ---------------- */
.tw{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--canvas)}
.tbl{font-size:15px}
.tbl caption{font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-transform:none;color:var(--ink);background:none;border-bottom:1px solid var(--hairline);
  padding:18px 24px}
.tbl thead th{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--label);background:var(--card)}
.tbl th,.tbl td{padding:15px 24px}
.tbl td.r{font-family:var(--sans);font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.tbl tbody tr:hover{background:var(--card)}
/* plate counts as a bar — one step per plate, so the kits compare at a glance */
.kbar{display:inline-block;vertical-align:middle;height:8px;margin-right:14px;border-radius:4px;
  width:calc(var(--n) * 6px);max-width:30vw;background:var(--ink);opacity:.85}
.tbl tbody tr:hover .kbar{opacity:1}
.js .reveal .kbar{transform-origin:left center;transform:scaleX(0);
  transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s}
.js .reveal.in .kbar,.js .reveal.shown .kbar{transform:none}

/* ============================================================
   HOME
   ============================================================ */

/* ---------------- hero ---------------- */
.hero{border-bottom:0}
.hero-in{padding:clamp(56px,7vw,104px) var(--pad) clamp(40px,5vw,72px);
  grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,88px)}
.pill{border:1px solid var(--hairline);padding:5px 12px;border-radius:999px;margin-bottom:28px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--pencil)}
.pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);
  animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 22%,transparent)}
.hero h1{font-size:clamp(3.2rem,7.4vw,96px);line-height:.96;letter-spacing:-.05em;
  font-weight:600;margin-bottom:28px}
.hero h1 .shimmer{font-family:var(--sans);font-weight:600;font-size:1em;line-height:inherit;
  letter-spacing:inherit;color:var(--label)}
.hero .lede{font-size:clamp(17px,1.45vw,19px);line-height:1.6;color:var(--pencil);max-width:46ch}
.hero .lede strong{color:var(--ink)}
.hero p[style] .ilink{font-size:15px;color:var(--pencil)}
.stats{gap:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--hairline);border-radius:var(--r-card);padding:0;margin-top:40px;max-width:520px}
.stats > div{padding:16px 18px;border-left:1px solid var(--hairline)}
.stats > div:first-child{border-left:0}
.stats .n{font-family:var(--sans);font-size:21px;font-weight:600;letter-spacing:-.02em}
.stats .k{font-family:var(--sans);font-size:13px;font-weight:400;letter-spacing:0;line-height:1.4;
  text-transform:none;color:var(--label);margin-top:4px}
/* the photograph, with one real plate from the kit laid over its corner */
.hero-shot{padding-bottom:56px}
.hero-shot .frame{border-radius:20px;border:1px solid var(--hairline);box-shadow:none}
.hero-shot .frame:hover{box-shadow:none}
.hero-shot::after{content:"";position:absolute;z-index:2;left:-6%;bottom:0;width:58%;
  aspect-ratio:189/118;pointer-events:none;
  background:url(ill/hero-plate.svg) center/contain no-repeat;
  animation:heroIn 1s cubic-bezier(.22,.7,.25,1) .55s both}
@media (max-width:940px){
  .hero-in{grid-template-columns:1fr}
  .hero-shot::after{left:auto;right:-2%;width:62%}
}
@media (max-width:520px){.stats .n{font-size:18px}.stats > div{padding:12px}}

/* the ticker's job is done by the size bench below; it is decoration
   (aria-hidden), so it simply goes */
.marq{display:none}

/* ---------------- sections ---------------- */
.sec{padding:var(--section-gap) var(--pad)}
.marq + .sec{padding-top:clamp(32px,4vw,56px)}
.sec-hd{margin-bottom:28px;align-items:end}

/* ---------------- 01 — the size bench ----------------
   The four sizes stand on one bench, drawn to scale against each
   other over a ruler, with their notes in columns underneath. */
#kit > .lede{margin-bottom:40px !important}
#kit .grid4{gap:0;background:var(--panel);border:1px solid var(--hairline);border-radius:24px;
  padding:clamp(24px,3vw,40px) clamp(12px,2vw,24px) 8px}
#kit .card{background:none;border:0;border-radius:0;padding:0 clamp(12px,1.6vw,20px) 20px;box-shadow:none}
#kit .card:hover{box-shadow:none}
#kit .card .stage{max-width:none;height:200px;aspect-ratio:auto;margin:0 0 22px;padding-bottom:0;
  border-bottom:0;position:relative}
/* the ruler: a tick per quarter of the stage's six inches, a longer one per inch */
#kit .card .stage::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:10px;
  border-top:1.5px solid var(--ink);opacity:.45;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(100% / 6)) 0 0/100% 10px no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(100% / 24)) 0 0/100% 5px no-repeat}
#kit .card .stage .plate{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#kit .card:hover .stage .plate{transform:translateY(-6px)}
#kit .card-body{padding-top:14px}
#kit .card-body h3{font-size:22px;letter-spacing:-.03em;margin-bottom:8px}
#kit .card-foot{border-top:0;padding-top:4px}
#kit .card-foot b{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--canvas);
  border:1px solid var(--hairline);color:var(--pencil);font-size:12.5px}
#kit > .note{margin-top:22px !important}
@media (max-width:1000px){#kit .card{padding-bottom:28px}}

/* ---------------- 02 — why engraved: a panel band ---------------- */
.dark{--band:var(--panel);--band-fg:var(--ink);
  background:var(--panel);color:var(--ink);border-block:1px solid var(--hairline)}
.dark .in.grid2{gap:clamp(40px,6vw,88px);align-items:start}
.dark p{font-size:16px;line-height:1.7;color:var(--pencil);opacity:1;max-width:56ch}
.dark h2{margin-bottom:24px}
.rulelist{background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-card);gap:1px}
.rulelist div{background:var(--canvas)}
.rulelist div:hover{background:var(--card)}
.rulelist div::before{background:var(--ink);width:2px}
.rulelist .r{color:var(--ink);opacity:1;font-size:13px;font-weight:500}
.rulelist .t{color:var(--pencil);opacity:1;font-size:15px;line-height:1.55}
.js .reveal .engrave .cut{-webkit-mask-image:none;mask-image:none}
.engrave::after,.shot-cut::after,.shot-cut .tick{display:none}
.js .reveal.in .shot-cut img{animation:none}
.shot{border-radius:var(--r-card);border:1px solid var(--hairline)}
.shot img{aspect-ratio:16/10;filter:var(--photo-filter)}
.shot-cap,#code .shot-cap{font-family:var(--sans);font-size:13.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--label);opacity:1;border-top:0;padding-top:0}
/* under the photograph: what "engraved" means, drawn as a section */
#code .figstick::after{content:"";display:block;margin-top:20px;aspect-ratio:476/336;
  border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--tile) url(ill/anatomy.svg) center/94% no-repeat}

/* ---------------- gallery ---------------- */
.gal{max-width:var(--wrap);margin:0 auto;padding:var(--section-gap) var(--pad) 0;gap:16px;
  background:none;border:0;grid-template-columns:repeat(4,1fr)}
.gal figure{aspect-ratio:auto;background:none;overflow:visible}
.gal figure:hover{transform:none}
.gal img{aspect-ratio:4/5;height:auto;border-radius:14px;filter:var(--photo-filter)}
.gal figure:hover img,.gal figure img{transform:none;filter:var(--photo-filter)}
.gal figcaption{position:static;padding:10px 0 0;background:none;color:var(--label);
  font-family:var(--sans);font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none}
@media (max-width:820px){.gal{grid-template-columns:1fr 1fr}}

/* ---------------- 03 — pricing: four steps to the price ---------------- */
#pricing .grid4{gap:14px;margin-bottom:8px}
#pricing .pcard{position:relative;padding-top:88px}
#pricing .pcard::before,#pricing .pcard::after{content:"";position:absolute;left:28px;top:28px;
  width:40px;height:40px;border-radius:11px}
#pricing .pcard::before{background:var(--card);border:1px solid var(--hairline)}
#pricing .pcard::after{background:var(--ink);transform:scale(.55);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#pricing .pcard:nth-child(1){--ico:url(ill/i-stack.svg)}
#pricing .pcard:nth-child(2){--ico:url(ill/i-pin.svg)}
#pricing .pcard:nth-child(3){--ico:url(ill/i-list.svg)}
#pricing .pcard:nth-child(4){--ico:url(ill/i-price.svg)}
#pricing .pcard.ink::before{background:color-mix(in srgb,var(--action-fg) 12%,transparent);border-color:transparent}
#pricing .pcard.ink::after{background:var(--action-fg)}
#pricing .tw{margin-top:28px}

/* ---------------- 04 — process: a band of four cards ---------------- */
.proc{background:var(--panel);border-block:1px solid var(--hairline)}
.proc .wrap > div:first-child{margin-bottom:36px !important}
.steps{gap:14px}
.step{padding:28px;border:1px solid var(--hairline);border-radius:var(--r-card);
  background:var(--canvas);position:relative}
.step::before{display:none}
.step .n{position:absolute;top:30px;right:28px;margin:0;font-family:var(--sans);font-size:13px;
  font-weight:500;color:var(--label)}
.step h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-top:64px}
.step p{font-size:15px;line-height:1.6;color:var(--pencil)}
.step .fig{display:none}
/* each step gets its mark: sent, scheduled, cut, fixed to the wall */
.step > h3::before,.step > h3::after{content:"";position:absolute;left:28px;top:28px;
  width:40px;height:40px;border-radius:11px}
.step > h3::before{background:var(--card);border:1px solid var(--hairline)}
.step > h3::after{background:var(--ink);transform:scale(.55);
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.step:nth-child(1){--ico:url(ill/i-send.svg)}
.step:nth-child(2){--ico:url(ill/i-check.svg)}
.step:nth-child(3){--ico:url(ill/i-laser.svg)}
.step:nth-child(4){--ico:url(ill/i-mount.svg)}

/* ---------------- 05 — FAQ, heading beside the questions ---------------- */
.faqsec{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  grid-template-rows:auto auto 1fr;column-gap:clamp(32px,6vw,96px);align-items:start}
.faqsec > .kicker{grid-column:1;justify-self:start}
.faqsec > h2{grid-column:1;margin-bottom:20px}
.faqsec > .faq{grid-column:2;grid-row:1 / span 3;margin-top:0;max-width:none;
  border-top:1px solid var(--hairline)}
.faqsec > p{grid-column:1;grid-row:3;margin-top:0 !important}
.faqsec > p a{font-family:var(--sans) !important;font-size:15px !important;
  text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--divider)}
@media (max-width:860px){
  .faqsec{grid-template-columns:1fr}
  .faqsec > .faq{grid-column:1;grid-row:auto;margin-top:20px}
  .faqsec > p{grid-row:auto;margin-top:24px !important}
}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{font-size:17px;font-weight:500;letter-spacing:-.01em;padding:22px 48px 22px 0}
.faq summary:hover{color:var(--ink);opacity:.72}
/* a plus in a circle that turns to a minus */
.faq summary::after{width:26px;height:26px;margin-top:-13px;right:0;border:1px solid var(--divider);
  border-radius:50%;transform:none;
  background:linear-gradient(var(--ink),var(--ink)) center/10px 1.5px no-repeat,
             linear-gradient(var(--ink),var(--ink)) center/1.5px 10px no-repeat;
  transition:background-size .2s ease}
.faq details[open] summary::after{transform:none;margin-top:-13px;background-size:10px 1.5px,1.5px 0}
.faq .a{font-size:16px;line-height:1.7;color:var(--pencil);padding-right:48px}

/* ---------------- 06 — the closing panel ---------------- */
.quote{--band:transparent;--band-fg:var(--ink);background:var(--canvas);color:var(--ink);border:0}
.quote>picture>img,.quote>picture{display:none}
.quote::after{display:none}
.quote .in{max-width:var(--wrap);margin:0 auto var(--section-gap);position:relative;overflow:hidden;
  padding:clamp(40px,6vw,76px);border-radius:28px;background:#111111;color:#f2f2f0;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:auto auto;
  row-gap:28px;align-items:start}
:root[data-theme="dark"] .quote .in{background:#171717;border:1px solid #262626}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quote .in{background:#171717;border:1px solid #262626}}
@media (max-width:1260px){.quote .in{margin-left:var(--pad);margin-right:var(--pad)}}
.quote .in > div:first-child{grid-column:1}
.quote .acts{grid-column:1;grid-row:2;gap:10px;justify-items:start}
/* three plates from the kit, set on the right of the panel */
.quote .in::after{content:"";grid-column:2;grid-row:1 / span 2;align-self:center;
  aspect-ratio:196/240;width:100%;max-width:340px;justify-self:center;background:url(ill/cta.svg) center/contain no-repeat}
@media (max-width:820px){
  .quote .in{grid-template-columns:1fr}
  .quote .in::after{grid-column:1;grid-row:3;max-width:360px}
}
.quote .kicker{color:#cfcdc9;background:transparent;border-color:rgba(255,255,255,.18)}
.quote h2{color:#f7f7f5 !important;max-width:16ch;margin-bottom:16px}
.quote p{font-size:17px;line-height:1.6;color:#b9b7b3;opacity:1}
.quote .btn-a{background:#f7f7f5;color:#111;border-color:#f7f7f5}
.quote .btn-a:hover{background:#f7f7f5;color:#111}
.quote .btn-o{background:transparent;color:#f7f7f5;border-color:rgba(255,255,255,.28)}
.quote .btn-o:hover{border-color:#f7f7f5;color:#f7f7f5}
/* build.py sets this one note's case and tracking inline */
.quote .acts .sec-note{color:#8e8c88;letter-spacing:0 !important;text-transform:none !important;margin-top:4px}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* ---------------- the page head: copy left, drawing right ----------------
   Every inner page head is the same two-column shape; the drawing is
   chosen by the page's body class (build.py adds pg-<slug>). Children
   keep their order in the markup — the drawing is a pseudo-element,
   not content. */
.phead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,72px);
  align-items:center;padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(48px,6vw,80px)}
.phead > *{grid-column:1}
.phead::after{content:"";display:var(--ill-show,none);grid-column:2;grid-row:1 / span 12;
  align-self:center;width:100%;aspect-ratio:var(--ill-ar,520/330);
  background:var(--ill-img) center/contain no-repeat;border-radius:var(--r-card)}
@media (max-width:900px){
  .phead{grid-template-columns:1fr}
  .phead::after{grid-column:1;grid-row:auto;max-width:460px;margin-top:32px}
}
.phead h1,.pgx h1{font-size:clamp(2.5rem,5.2vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1.04}
.pgx h1 em{font-family:var(--sans);font-style:normal;font-weight:600;font-size:1em;
  line-height:inherit;letter-spacing:inherit;color:var(--label)}
.pgx .lede,.phead .lede{font-size:18px;line-height:1.6}
.phead .kicker,.pgx .kicker{margin-bottom:20px}

.pg-kits,.pg-faq,.pg-quote{--ill-img:url(ill/kit.svg);--ill-ar:392/352;--ill-show:block}
.pg-solar-placards{--ill-img:url(ill/placard.svg);--ill-ar:408/360;--ill-show:block}
.pg-solar-warning-labels{--ill-img:url(ill/warnings.svg);--ill-ar:392/276;--ill-show:block}
.pg-pv-labels{--ill-img:url(ill/pv-tags.svg);--ill-ar:392/299;--ill-show:block}
.pg-solar-lamacoids{--ill-img:url(ill/anatomy.svg);--ill-ar:476/336;--ill-show:block}
.pg-custom-solar-labels{--ill-img:url(ill/custom.svg);--ill-ar:476/250;--ill-show:block}
.pg-section-64-checklist{--ill-img:url(ill/checklist.svg);--ill-ar:544/410;--ill-show:block}
.pg-ontario{--ill-img:url(ill/on.svg);--ill-ar:321/240;--ill-show:block}
.pg-british-columbia{--ill-img:url(ill/bc.svg);--ill-ar:392/222;--ill-show:block}
.pg-alberta{--ill-img:url(ill/ab.svg);--ill-ar:392/222;--ill-show:block}
.pg-saskatchewan{--ill-img:url(ill/sk.svg);--ill-ar:301/294;--ill-show:block}
.pg-manitoba{--ill-img:url(ill/mb.svg);--ill-ar:392/240;--ill-show:block}
.pg-nova-scotia{--ill-img:url(ill/ns.svg);--ill-ar:356/240;--ill-show:block}
/* drawings with their own grey line work sit on a pale sheet in both themes */
.pg-solar-lamacoids .phead::after,.pg-custom-solar-labels .phead::after,.pg-section-64-checklist .phead::after{
  background-color:var(--tile);border:1px solid var(--hairline);background-size:88%}

/* the reference pages' head (code, pricing, provinces) keeps its spec block */
.pgx{padding-top:clamp(28px,4vw,48px)}
.pgx-spec{border:1px solid var(--hairline);border-radius:var(--r-card);padding:20px 24px;background:var(--panel)}
.pgx-spec .t,.rsec-hd .n{font-family:var(--sans);font-size:13.5px;letter-spacing:0;text-transform:none;color:var(--label)}
.pgx-spec b{font-family:var(--sans);font-weight:600;font-size:20px}

.toc{background:color-mix(in srgb,var(--canvas) 90%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.p-code .toc{background:color-mix(in srgb,var(--canvas) 90%,transparent)}
.toc-in a{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none}
.toc-in a.on{border-bottom-color:var(--ink)}
.duo p{font-size:15.5px;line-height:1.7}

/* ---------------- footer ---------------- */
.foot,.gridbg .foot,.p-code .foot,.p-price .foot,.p-prov .foot{background:var(--panel);
  border-top:1px solid var(--hairline);padding-top:72px}
.foot-grid .k{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--ink)}
.foot-grid a,.foot-grid li span{font-size:14.5px;color:var(--pencil)}
.foot-grid a:hover{color:var(--ink)}
.foot-grid .attrib{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none}
.foot-btm{font-family:var(--sans);font-size:13.5px;letter-spacing:0}

@media (max-width:600px){
  .hero h1{font-size:clamp(2.9rem,15vw,64px)}
  .card,.pcard,.duo > article,.step{padding:22px}
  #pricing .pcard::before,#pricing .pcard::after,.step > h3::before,.step > h3::after{left:22px;top:22px}
  .call,.call.amber{padding:20px 20px 20px 54px}
  .call::before{left:18px;top:21px}
}
@media (prefers-reduced-motion:reduce){
  .hero-shot::after{animation:none}
  .js .reveal .kbar{transform:none;transition:none}
}
@media print{.hero-shot::after,.quote .in::after,.phead::after{display:none !important}}

/* ---------------- fit fixes ---------------- */
.sec-hd h2{max-width:26ch}
.phead > .kicker{justify-self:start}

/* ============================================================
   FINISH — the Mac pass (2026-09-25)
   Jake: "a new finish, not just black — clear, like a Mac". So the
   page sits on a soft wash of colour, the way macOS sits on its
   wallpaper, and every surface above it is frosted glass: translucent,
   blurred, with a lit top edge. Inner pages read as documents — each
   body is one frosted sheet, split into chapters, with window title
   bars on the tables.
   ============================================================ */
/* The palette, second pass (2026-09-25). Jake kept the finish and asked for
   colours "cleaner, more industrial": the pastel wash became machined metal —
   cool steel and slate in light, graphite and gunmetal in dark — under a
   faint brushed grain. One accent only, safety amber, and it belongs to the
   heat: the beam, its sparks, the live dot. The plates keep their red. */
:root{
  --amber:#ff8a1f;
  --wash-base:#e6e8eb;
  --wash:
    radial-gradient(70% 55% at 0% 0%,rgba(255,255,255,.85),transparent 70%),
    radial-gradient(60% 55% at 100% 8%,rgba(160,172,190,.32),transparent 70%),
    radial-gradient(70% 60% at 100% 100%,rgba(120,134,152,.30),transparent 72%),
    radial-gradient(60% 50% at 0% 100%,rgba(205,210,218,.55),transparent 70%);
  --brush:repeating-linear-gradient(0deg,rgba(0,0,0,.014) 0 1px,transparent 1px 3px);
  --glass:rgba(255,255,255,.56);
  --glass-hi:rgba(255,255,255,.8);
  --glass-edge:rgba(255,255,255,.8);
  --glass-line:rgba(16,20,28,.09);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(16,20,28,.05),
                 0 12px 32px -14px rgba(30,38,52,.22);
  --blur:saturate(1.2) blur(20px);
  /* the beam (buff.js reads these): graphite-hot core on light stock,
     amber heat round it */
  --cut-blend:source-over;
  --cut-core:214,86,6;
  --cut-red:244,124,28;
  --cut-amber:255,170,48;
  --cut-gain:.78;
}
:root[data-theme="dark"]{
  --wash-base:#0c0e11;
  --wash:
    radial-gradient(70% 55% at 0% 0%,rgba(96,110,132,.26),transparent 70%),
    radial-gradient(60% 55% at 100% 6%,rgba(58,68,84,.34),transparent 70%),
    radial-gradient(70% 60% at 100% 100%,rgba(34,42,54,.55),transparent 72%),
    radial-gradient(50% 40% at 50% 0%,rgba(255,138,31,.07),transparent 70%);
  --brush:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
  --glass:rgba(28,31,36,.55);
  --glass-hi:rgba(36,39,45,.74);
  --glass-edge:rgba(255,255,255,.09);
  --glass-line:rgba(255,255,255,.07);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 44px -18px rgba(0,0,0,.75);
  --cut-blend:lighter;
  --cut-core:255,246,232;
  --cut-red:255,112,20;
  --cut-amber:255,184,84;
  --cut-gain:1;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --wash-base:#0c0e11;
    --wash:
      radial-gradient(70% 55% at 0% 0%,rgba(96,110,132,.26),transparent 70%),
      radial-gradient(60% 55% at 100% 6%,rgba(58,68,84,.34),transparent 70%),
      radial-gradient(70% 60% at 100% 100%,rgba(34,42,54,.55),transparent 72%),
      radial-gradient(50% 40% at 50% 0%,rgba(255,138,31,.07),transparent 70%);
    --brush:repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px);
    --glass:rgba(28,31,36,.55);
    --glass-hi:rgba(36,39,45,.74);
    --glass-edge:rgba(255,255,255,.09);
    --glass-line:rgba(255,255,255,.07);
    --glass-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 44px -18px rgba(0,0,0,.75);
    --cut-blend:lighter;
    --cut-core:255,246,232;
    --cut-red:255,112,20;
    --cut-amber:255,184,84;
    --cut-gain:1;
  }
}

/* the wallpaper: fixed behind everything, so glass has something to blur */
html,body{background:var(--wash-base)}
body{background:transparent}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:var(--brush),var(--wash),var(--wash-base)}
.gridbg{isolation:isolate}
body{isolation:isolate}
:root{--hairline:var(--glass-line)}

/* surfaces become glass */
.hdr,.toc,.p-code .toc{background:color-mix(in srgb,var(--wash-base) 55%,transparent);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-line)}
.card,.pcard,.duo > article,.step,.tw,.call,.call.amber,.stats,.rulelist,.pgx-spec,
#kit .grid4,.quoteband,.faqsec > .faq,
#code .figstick::after,.pg-solar-lamacoids .phead::after,.pg-custom-solar-labels .phead::after,
.pg-section-64-checklist .phead::after{
  background-color:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
.card:hover,.pcard:hover,.duo > article:hover{border-color:var(--glass-edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 44px -16px rgba(30,40,90,.26)}
.rulelist{background-color:var(--glass-line);overflow:hidden}
.rulelist div{background:var(--glass-hi)}
.rulelist div:hover{background:var(--glass)}
.tw{background-color:var(--glass-hi)}
.tbl thead th{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.tbl tbody tr:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
#kit .card{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
#kit .card-foot b,.kicker,.dark .kicker,.btn-s,.btn-o{background:var(--glass-hi);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-edge)}
.pill{background:var(--glass);border-color:var(--glass-edge)}
.pcard.ink{background:var(--action-bg);border-color:var(--action-bg)}
#pricing .pcard::before,.step > h3::before{background:var(--glass-hi);border-color:var(--glass-edge)}
.faqsec > .faq{border-radius:var(--r-card);padding:4px 28px;border-top:1px solid var(--glass-edge)}
.faq details:last-child{border-bottom:0}
.hero-shot .frame{border-color:var(--glass-edge);box-shadow:var(--glass-shadow)}
.shot{border-color:var(--glass-edge)}

/* bands dissolve into the wallpaper — the glass carries the structure */
.dark,.proc,.quote{background:transparent;border-color:transparent}
.dark{--band:transparent}
.foot,.gridbg .foot,.p-code .foot,.p-price .foot,.p-prov .foot{
  background:color-mix(in srgb,var(--wash-base) 45%,transparent);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-top:1px solid var(--glass-line)}
/* the closing panel: smoked glass */
.quote .in,:root[data-theme="dark"] .quote .in{background:rgba(14,15,20,.86);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 60px -30px rgba(10,15,40,.55)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .quote .in{
  background:rgba(14,15,20,.86);border:1px solid rgba(255,255,255,.08)}}

/* ---------------- tables as windows ----------------
   The caption row is the title bar: three lights, then the title. */
.tbl caption{position:relative;padding-left:84px;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.tbl caption::before{content:"";position:absolute;left:22px;top:50%;width:50px;height:12px;margin-top:-6px;
  background:
    radial-gradient(circle at 6px 6px,#ff5f57 0 5.5px,transparent 6px),
    radial-gradient(circle at 25px 6px,#febc2e 0 5.5px,transparent 6px),
    radial-gradient(circle at 44px 6px,#28c840 0 5.5px,transparent 6px)}

/* ---------------- inner pages as documents ----------------
   The body of every inner page is one frosted sheet; each h2 in it
   opens a chapter with a rule and room above. Home is left alone. */
body:not(.pg-home) main > .sec,body:not(.pg-home) main > .rsec{
  max-width:var(--wrap);margin:0 auto clamp(28px,4vw,48px);
  padding:clamp(28px,5vw,64px);border-radius:28px;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow)}
@media (max-width:1260px){body:not(.pg-home) main > .sec,body:not(.pg-home) main > .rsec{
  margin-left:var(--pad);margin-right:var(--pad)}}
body:not(.pg-home) main > .sec:last-of-type,body:not(.pg-home) main > .rsec:last-of-type{
  margin-bottom:var(--section-gap)}
.rsec + .rsec{border-top:1px solid var(--glass-edge)}
/* inside a sheet, cards and tables are one step lighter than the sheet */
body:not(.pg-home) main > .sec .card,body:not(.pg-home) main > .sec .pcard,
body:not(.pg-home) main > .sec .duo > article,body:not(.pg-home) main > .sec .call,
body:not(.pg-home) main > .rsec .pcard,body:not(.pg-home) main > .rsec .call{
  background-color:var(--glass-hi);-webkit-backdrop-filter:none;backdrop-filter:none}
/* chapters */
body:not(.pg-home) main > .sec > h2{font-size:clamp(1.7rem,3vw,36px) !important;max-width:28ch}
body:not(.pg-home) main > .sec > h2:not(:first-child){margin-top:clamp(48px,6vw,72px);
  padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--glass-line)}
body:not(.pg-home) main > .sec > p,body:not(.pg-home) main > .sec .prose{max-width:68ch}
body:not(.pg-home) main > .sec h3{letter-spacing:-.02em}
body:not(.pg-home) .crumbs{padding-top:28px}
/* the sheet sets its own top: the inline padding-top:0 some pages carry
   was for sitting flush under the head, which no longer applies */
body:not(.pg-home) main > .sec[style]{padding-top:clamp(28px,5vw,64px) !important}
/* the sticky rail on the code page floats above the sheets */
.toc{margin-bottom:28px}
@media (max-width:600px){
  body:not(.pg-home) main > .sec,body:not(.pg-home) main > .rsec{border-radius:20px;padding:22px}
  .tbl caption{padding-left:78px}
}
body:not(.pg-home) main > .sec .pcard.ink,body:not(.pg-home) main > .rsec .pcard.ink{
  background-color:var(--action-bg);border-color:var(--action-bg)}
body:not(.pg-home) main > .sec > h2{max-width:none;text-wrap:balance}
/* the FAQ page marks each question up as an h2 inside its summary; it
   reads as a question row, not a chapter title */
.faq summary h2,.faq summary h3,
body:not(.pg-home) main > .sec .faq summary h2{display:inline;font-size:17.5px !important;font-weight:500;
  line-height:1.4;letter-spacing:-.01em;margin:0;padding:0;border:0;max-width:none}
body:not(.pg-home) main > .sec > .faq{margin-top:8px;background:none;border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}

/* ---------------- HTML plates match the production artwork ----------------
   The drawings are the builder's real files: TroLase red #C8102E with
   DIN 1451 capitals. The plates built in HTML (the size bench, the pricing
   and code pages) take the same face and colour so the two never
   disagree. DIN Alternate on Apple systems and Bahnschrift on Windows are
   both DIN 1451 cuts. */
.plate{background:linear-gradient(180deg,#d01733,#C8102E 45%,#b80d29)}
.plate .top,.plate .main,.plate .sub{letter-spacing:.02em;text-shadow:none}
.plate .top{letter-spacing:.06em}
/* The HTML plates follow the production files' construction: a flat
   TroLase face, the core showing only as a hairline at the chamfer (not
   a thick four-colour bevel), and — on the warning sizes — the signal
   word reversed out of a white bar in red capitals, exactly as the real
   5 x 2 and 8 x 2 WARNING plates are cut (studio-live/placards). */
.plate{background:#C8102E;border:0;border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset 0 1px 0 1px rgba(255,255,255,.12),
             0 1px 2px rgba(0,0,0,.18),0 10px 22px -12px rgba(60,10,20,.45)}
.plate .main{font-weight:700;letter-spacing:.015em}
.p-price .p62 .top,.p-price .p42 .top{
  align-self:stretch;margin:0 6%;background:#fff;color:#C8102E;border-radius:1px;
  font-weight:700;letter-spacing:.08em;line-height:1.25}
.p-price .p62 .bar,.p-price .p42 .bar{display:none}
.plate .sub{opacity:.9}
.p-price .p62 .top,.p-price .p42 .top{
  justify-self:stretch;text-align:center;padding:.3em 0 .2em}
.p-price .p62 .top,.p-price .p42 .top{font-size:clamp(7px,1.1vw,13px)}
.p-price .p62 .main{font-size:clamp(9px,1.25vw,15px)}
.p-price .p41 .main{font-size:clamp(7px,.85vw,11px)}

/* ============================================================
   THE BENCH — one true scale, lettering in real inches (2026-09-25)
   Jake, full-screen: the bench plates "still look blurred / low res".
   They were sized as a fraction of a narrow column, which put the
   legends at 5-7 px. Now:
   - the four columns are as wide as their plates (5.18 : 5 : 8 : 4 in,
     from build.py's _fit_stage), so every plate is drawn at the same
     px-per-inch and they stand on one bench line (a shared subgrid row);
   - each plate is its own container and its lettering is set in inches
     of that plate (1 in = 100cqi / --w), so a 4 x 1 tag carries the same
     letter height as a 5 x 2 — as real plates do — and nothing is
     smaller than ~12 px on a desktop;
   - the ruler ticks true quarter inches.
   ============================================================ */
#kit .grid4{grid-template-columns:5.18fr 5fr 8fr 4fr;grid-template-rows:auto auto;
  column-gap:clamp(20px,2.6vw,36px);padding:clamp(28px,3.4vw,44px) clamp(20px,2.6vw,36px) 12px}
#kit .card{display:grid;grid-row:span 2;grid-template-rows:subgrid;padding:0 0 20px;min-width:0}
#kit .card:nth-child(1){--cw:5.18}
#kit .card:nth-child(2){--cw:5}
#kit .card:nth-child(3){--cw:8}
#kit .card:nth-child(4){--cw:4}
#kit .card .stage{height:auto;margin:0 0 26px;display:flex;align-items:flex-end;justify-content:flex-start;
  container-type:normal}
#kit .card .stage::after{bottom:-14px;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(100% / var(--cw))) 0 0/100% 10px no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px calc(100% / var(--cw) / 4)) 0 0/100% 5px no-repeat}
#kit .card .stage .plate{width:100%;max-width:none;flex:none;aspect-ratio:var(--w) / var(--h);
  container-type:inline-size;padding:0;gap:0;
  /* resolved in each child, where cqi is this plate's width */
  --in:calc(100cqi / var(--w))}
#kit .card .plate > *{margin:calc(var(--in) * .03) calc(var(--in) * .3)}
/* lettering in inches of the plate, at the production files' proportions
   (a 5 x 2 legend is cut with ~7.4 mm caps; DIN caps are ~0.7 of the size).
   The citation line is not on a real plate, so it only gets a legible floor. */
#kit .card .plate .top{font-size:max(10px,calc(var(--in) * .22));letter-spacing:.08em;line-height:1.3}
#kit .card .plate .main{font-size:calc(var(--in) * .38);line-height:1.12}
#kit .card .plate .sub{font-size:max(9px,calc(var(--in) * .17));letter-spacing:.05em;line-height:1.3}
#kit .card .plate .bar{width:calc(var(--in) * 1.2);height:1px}
#kit .card .p41 .main{font-size:calc(var(--in) * .33)}
#kit .card .p64 .main{font-size:calc(var(--in) * .46)}
#kit .card .p64 .top{font-size:max(10.5px,calc(var(--in) * .25))}
/* the warning sizes: the signal word reversed out of a full-width bar */
#kit .card .p62 .top,#kit .card .p42 .top{justify-self:stretch;align-self:auto;
  margin:0 calc(var(--in) * .3) calc(var(--in) * .05);
  background:#fff;color:#C8102E;border-radius:1px;text-align:center;
  font-size:max(10.5px,calc(var(--in) * .28));font-weight:700;letter-spacing:.1em;padding:.14em 0 .06em}
#kit .card .p62 .bar,#kit .card .p42 .bar{display:none}
/* drill holes at a true 5/32 in, 1/4 in in from the ends */
#kit .card .plate::before,#kit .card .plate::after{width:calc(var(--in) * .156);height:calc(var(--in) * .156);
  margin-top:calc(var(--in) * -.078)}
#kit .card .plate::before{left:calc(var(--in) * .17)}
#kit .card .plate::after{right:calc(var(--in) * .17)}
#kit .card-body{padding-top:0}
/* below the desktop row the columns stop being proportional; each plate
   keeps the same true scale by width, capped so a 4 x 1 is not drawn a
   foot long on a phone */
@media (max-width:1000px){
  #kit .grid4{grid-template-columns:1fr 1fr;row-gap:12px}
  #kit .card .stage{justify-content:center}
  #kit .card .stage .plate{width:min(100%,calc(var(--w) * 44px))}
  #kit .card .stage::after{left:50%;right:auto;width:min(100%,calc(var(--cw) * 44px));transform:translateX(-50%)}
}
@media (max-width:600px){
  #kit .grid4{grid-template-columns:1fr}
  #kit .card .stage .plate{width:min(100%,calc(var(--w) * 40px))}
  #kit .card .stage::after{width:min(100%,calc(var(--cw) * 40px))}
}
/* the size never breaks across lines; the metric figure drops under it when
   the column is narrow (the 4 x 1 column is the narrowest on the bench) */
#kit .card-body h3{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;white-space:nowrap}
#kit .card-body h3 .mm{margin-left:0}

/* ---------------- the pricing page's bench: same rules ----------------
   Its figures are the query containers and each is exactly its plate's
   width, so 100cqi / --w is one inch of that plate. Lettering is set in
   those inches at the production proportions, with a legible floor, and
   the signal word is reversed out of a full-width bar. */
.p-price .bench .plate{padding:0;gap:0;--pin:calc(100cqi / var(--w))}
.p-price .bench .plate > *{margin:calc(var(--pin) * .03) calc(var(--pin) * .3)}
.p-price .bench .plate .top{font-size:max(10px,calc(var(--pin) * .22));letter-spacing:.08em;line-height:1.3}
.p-price .bench .plate .main{font-size:max(11px,calc(var(--pin) * .38));line-height:1.12}
.p-price .bench .plate .sub{font-size:max(9px,calc(var(--pin) * .17));letter-spacing:.05em;line-height:1.3}
.p-price .bench .p41 .main{font-size:max(11px,calc(var(--pin) * .33))}
.p-price .bench .p64 .main{font-size:calc(var(--pin) * .46)}
.p-price .bench .p62 .top,.p-price .bench .p42 .top{justify-self:stretch;align-self:auto;
  margin:0 calc(var(--pin) * .3) calc(var(--pin) * .05);background:#fff;color:#C8102E;border-radius:1px;
  text-align:center;font-size:max(10.5px,calc(var(--pin) * .28));font-weight:700;letter-spacing:.1em;
  padding:.14em 0 .06em}
.p-price .bench .p62 .bar,.p-price .bench .p42 .bar{display:none}
.p-price .bench .plate::before,.p-price .bench .plate::after{display:none}
/* phones: a readable inch, and the plates wrap onto rows instead of
   shrinking to 19 px per inch in one scrolling line (the build sets
   --in inline, hence !important) */
@media (max-width:760px){
  .p-price .bench{--in:34px !important;flex-wrap:wrap;overflow:visible;row-gap:24px}
  .p-price .bench figure{max-width:100%}
}

/* Labels (the shop, 2026-09-25) stays in the header on a phone, where the
   other links give way to the Build button. Last in the file so it
   wins over the header rules above. */
@media (max-width:700px){.nav a.keep{display:inline-flex;align-items:center;min-height:38px}}
@media (max-width:420px){.nav{gap:10px}.nav .cta{padding:0 12px}.nav a.keep{font-size:14px}}
@media (max-width:380px){.hdr-in{padding:0 12px}.logo{gap:7px}.nav{gap:7px}.nav .cta{padding:0 10px;font-size:13.5px}.theme-tog{padding:7px 8px}}
@media (max-width:340px){.logo > span{display:none}}