/* ALG Shop — one stylesheet. Every colour is a token; no hex in a component. */
:root{ --ui:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,system-ui,sans-serif; }
:root, [data-alg-theme="dark"] {
  --canvas:#0F1114; --page:#1C2025; --surface:#22262B; --well:#2A2E34; --well2:#15181C;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.06);
  --line-mid:rgba(255,255,255,.26); --line-hard:rgba(255,255,255,.46);
  --t1:#F2F3F5; --t2:#B7BCC5; --t3:#9AA0AA; --t4:#6F7580; --t4-ink:#8F959E;
  --accent:#F32740; --accent-ink:#FF6B77; --accent-press:#C61E33; --chip:#E4253C;
  --ok:#34C77B; --ok-ink:#34C77B; --warn:#F5B942; --warn-ink:#F5B942;
  --on-solid:#FFFFFF; --tierplus:#E4253C; --tierplus-bd:#FFFFFF;
  --shot-a:#2E333A; --shot-b:#151A20; --logo-l:none; --logo-d:block;
  /* the sign-in email is the same in both themes, so its miniature is too */
  --mail-head:#1C2025; --mail-paper:#FFFFFF; --mail-ink:#1A1D23; --mail-dim:#666C78;
}
[data-alg-theme="light"] {
  --canvas:#DCDEE2; --page:#FFFFFF; --surface:#FFFFFF; --well:#F5F4F1; --well2:#EEEDF0;
  --line:#DCDEE2; --line-soft:#EEEDF0; --line-mid:#8A8F97; --line-hard:#1A1D23;
  --t1:#1A1D23; --t2:#3A3E47; --t3:#666C78; --t4:#8A8F97; --t4-ink:#656A72;
  --accent:#E3353C; --accent-ink:#C62231; --accent-press:#B0252B; --chip:#C62231;
  --ok:#0FAE7C; --ok-ink:#0A7A57; --warn:#FDD85E; --warn-ink:#8A6A00;
  --on-solid:#FFFFFF; --tierplus:#1A1D23; --tierplus-bd:#1A1D23;
  --shot-a:#E6E4DF; --shot-b:#F5F4F1; --logo-l:block; --logo-d:none;
}

*{box-sizing:border-box;min-width:0}
html,body{margin:0}
body{background:var(--page);color:var(--t2);font:400 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.aa{color:var(--accent)}
.eyebrow{font:600 12.5px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.wrap{max-width:1680px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.dim{color:var(--t3)}
h1,h2,h3{margin:0;color:var(--t1);letter-spacing:-.02em}
h1{font:900 clamp(38px,6vw,76px)/1.0 var(--ui);letter-spacing:-.03em}
h2{font:900 clamp(26px,3.2vw,40px)/1.05 var(--ui)}
h3{font:900 clamp(19px,2vw,24px)/1.15 var(--ui)}

/* ---------- buttons ---------- */
.btn,.btn2,.btn3{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;font:700 15px var(--ui);cursor:pointer;border:0;white-space:nowrap}
.btn{background:var(--accent);color:var(--on-solid)}
.btn:hover{background:var(--accent-press)}
.btn2{background:transparent;color:var(--t1);border:1px solid var(--line-hard)}
.btn2:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn3{background:transparent;color:var(--t1);padding:6px 0;border-bottom:2px solid var(--accent)}
.btn[disabled],.btn2[disabled]{opacity:.4;cursor:not-allowed}
.btn.sm,.btn2.sm{padding:9px 16px;font-size:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- header ---------- */
header.top{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:20px;height:72px}
.logo{height:34px}
.logo.l{display:var(--logo-l)} .logo.d{display:var(--logo-d)}
.search{flex:1;min-width:140px;display:flex;align-items:center;height:44px;background:var(--well);border:1px solid var(--line);padding:0 12px;gap:10px}
.search input{flex:1;background:transparent;border:0;color:var(--t1);font:400 15px var(--ui);outline:none;min-width:0}
.search input::placeholder{color:var(--t3)}
.search .pn{font:600 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--accent-ink)}
nav.main{display:flex;gap:18px;font:700 14px var(--ui);color:var(--t1)}
nav.main a:hover{color:var(--accent-ink)}
.who{display:flex;align-items:center;gap:12px}
.whoname{text-align:right;line-height:1.25}
.whoname b{display:block;font:700 13px var(--ui);color:var(--t1)}
.whoname span{font:500 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.cartbtn{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line-hard);
  font:500 13px "JetBrains Mono",ui-monospace,monospace;color:var(--t1);cursor:pointer;background:transparent}
.cartbtn.hot{border-color:var(--accent);color:var(--accent-ink)}
.themeswitch{display:inline-flex;border:1px solid var(--line-mid);height:34px;flex:none}
.themeswitch button{background:transparent;border:0;cursor:pointer;font:600 11px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.08em;color:var(--t3);padding:0 10px;min-height:32px}
.themeswitch button[aria-pressed="true"]{background:var(--t1);color:var(--surface)}
.burger{display:none;background:transparent;border:1px solid var(--line-mid);color:var(--t1);width:44px;height:44px;cursor:pointer;font-size:18px}
@media(max-width:1100px){
  nav.main,.whoname{display:none}
  .burger{display:block}
}

/* message bar */
/* ═══ THE TWO BARS ═════════════════════════════════════════════════════
   Both were 12–13px mono sentences. Mono at 12px with .08em tracking is
   a caption face — fine for a part number, wrong for the three things we
   most want a buyer to know. These now run in the UI face at 14.5px,
   each claim led by its own icon, with the claim bold and the
   qualifier quiet. Roughly a third fewer words and about 20% larger. */
.msgbar{background:var(--well2);border-bottom:1px solid var(--line);
  font:500 14.5px var(--ui);letter-spacing:0;color:var(--t2)}
.msgbar .wrap{display:flex;gap:clamp(18px,3.2vw,46px);align-items:center;justify-content:center;
  padding-block:11px;flex-wrap:wrap}
.msgbar span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.msgbar b{color:var(--t1);font-weight:700}
/* The icon carries the accent so the row reads as a row of marks, not a
   wall of red words. */
.bico{width:19px;height:19px;flex:none;color:var(--accent);stroke-width:1.7}

/* ---------- hero ---------- */
.hero{position:relative;min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:80px 44px;overflow:hidden;background:var(--page)}
.heroshots{position:absolute;inset:0 0 0 10%;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.14) 11%,#000 36%,#000 85%,rgba(0,0,0,.30) 95%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.14) 11%,#000 36%,#000 85%,rgba(0,0,0,.30) 95%,transparent 100%)}
.hs{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.hs.on{opacity:1}
.hs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(4,6,9,.9),transparent)}
.heroveil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to right,var(--page) 13%,color-mix(in srgb,var(--page) 72%,transparent) 30%,color-mix(in srgb,var(--page) 28%,transparent) 48%,transparent 64%),
  linear-gradient(to top,var(--page) 3%,transparent 34%)}
.hero .wrap{position:relative;width:100%;z-index:1}
.heroin{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:20px;max-width:min(720px,62%)}
.heroin h1,.heroin .herosub,.heroin .eyebrow{text-align:left;align-self:stretch}
.heroin .bigfind{width:100%;max-width:640px}
.herosub{font:400 clamp(16px,2vw,20px) var(--ui);color:var(--t2)}
.bigfind{display:flex;align-items:stretch;height:60px;background:var(--surface);border:1px solid var(--line-hard);max-width:700px}
.bigfind .pn{display:flex;align-items:center;font:600 12px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;color:var(--accent-ink);padding:0 14px}
.bigfind input{flex:1;background:transparent;border:0;color:var(--t1);font:400 16px var(--ui);outline:none;min-width:0}
.bigfind button{background:var(--accent);color:var(--on-solid);border:0;font:700 15px var(--ui);padding:0 28px;cursor:pointer}
.herodots{position:absolute;right:clamp(16px,4vw,48px);bottom:22px;display:flex;gap:8px;z-index:2}
.herodots button{border:0;cursor:pointer;padding:0;width:32px;height:3px;background:rgba(255,255,255,.26)}
.herodots button[aria-pressed="true"]{background:var(--accent)}

/* ---------- generic blocks ---------- */
.proof{background:var(--well2);border-block:1px solid var(--line)}
.proof .wrap{display:flex;gap:clamp(18px,3vw,42px);flex-wrap:wrap;padding-block:18px;
  font:500 15px var(--ui);letter-spacing:0;color:var(--t2);justify-content:space-between}
.proof .wrap span{display:inline-flex;align-items:center;gap:9px}
.proof b{color:var(--t1);font-weight:700}
.proof .bico{width:22px;height:22px}
.proof small.dim{font-size:13px}

/* ═══ ON A PHONE THE BARS BECOME ONE SWIPEABLE ROW ═════════════════════
   Stacked, the two bars came to 320px — most of a phone's first screen
   spent on claims, before a single product. Wrapping is the wrong
   behaviour here: these are peer items, not a paragraph. So below the
   tablet breakpoint they stop wrapping and scroll sideways, the way a
   category chip row does on any storefront. Nothing is hidden; it is
   the same five claims, reachable with a thumb, in 44px instead of
   218px. Scroll-snap so a swipe lands on a whole claim, not half of
   one, and the scrollbar is hidden because the overflowing content is
   its own affordance. */
@media (max-width:860px){
  .msgbar .wrap, .proof .wrap{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .msgbar .wrap::-webkit-scrollbar, .proof .wrap::-webkit-scrollbar{display:none}
  .msgbar .wrap>span, .proof .wrap>span{scroll-snap-align:start;flex:none;white-space:nowrap}
  .proof .wrap{gap:22px;padding-block:14px}
  .msgbar .wrap{gap:20px}
}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--ok)}
.dot.w{background:var(--warn)} .dot.g{background:var(--t4)}

section.band{border-bottom:1px solid var(--line);padding-block:clamp(36px,5vw,56px)}
section.band.wellbg{background:var(--well2)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}

.dist{border-top:3px solid var(--accent);background:var(--well2);border-bottom:1px solid var(--line)}
/* The three boxes were capped at 560px, which left the black gutter
   James flagged. The copy column is set to its comfortable measure
   (~46ch) and the boxes take everything else — so they widen with the
   window instead of the page growing an empty margin. */
.dist .wrap{padding-block:clamp(32px,4vw,44px);display:grid;
  grid-template-columns:minmax(360px,0.85fr) minmax(420px,1.15fr);
  gap:clamp(24px,4vw,56px);align-items:center}
.dist .four{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.dist .four.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1100px){.dist .four.three{grid-template-columns:1fr}}
.dist .four div{background:var(--well2);padding:16px 18px}
.dist .four b{display:block;font:900 16px var(--ui);color:var(--t1);margin-bottom:4px}
.dist .four span{font-size:14px;color:var(--t2)}
/* ─── WHERE THE TWO-COLUMN SECTION GIVES UP ───────────────────────────
   It used to hold copy-beside-cards down to 900px. It shouldn't: at
   1100px each card is about 160px wide, and once the icon and padding
   take their share the copy has ~80px to work in — the same sentence
   that reads as three lines on a desktop ran to six, and the row of
   cards stopped looking like a row. So the section stacks a good deal
   earlier and the cards get the full width to stay at three lines. */
@media(max-width:1480px){.dist .wrap{grid-template-columns:1fr}}

/* FOUR DOORS, SO NEVER THREE ACROSS. Same fault as .projs: auto-fit gave
   three columns around 900px and left the fourth door alone on its own
   row. Four divides by 4, 2 and 1 — those are the only counts allowed. */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(max-width:1080px){.doors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.doors{grid-template-columns:1fr}}
.doors>div{background:var(--page);padding:clamp(24px,3vw,36px) clamp(16px,3vw,40px) clamp(30px,3.6vw,46px);display:flex;flex-direction:column;gap:8px;
  position:relative;overflow:hidden;isolation:isolate}
/* ─── THE WATERMARK ───────────────────────────────────────────────────
   Sized in cqw so it scales with the PANEL, not the window — a viewport
   unit would make it gigantic on a wide monitor and invisible on a
   phone. Anchored bottom-right so it fills the dead corner the copy
   leaves empty rather than sitting behind the headline. Opacity is the
   whole trick: .055 in light and .075 in dark is enough to read as
   texture and not enough to fight the text for the eye. */
.doors>div{container-type:inline-size}
.doors>div::before{content:attr(data-wm);position:absolute;z-index:-1;
  /* Sat half-outside the panel at first and read as a rendering fault
     rather than as a watermark. It has to be fully inside its own box:
     the descender line tucked just under the bottom padding, and the
     size taken from the LONGEST word ("Cross Ref") so all four sit on
     the same line however many letters they have. */
  right:.10em;bottom:.02em;
  font:900 clamp(38px,19cqw,92px)/1 var(--ui);letter-spacing:-.045em;
  color:var(--t1);opacity:.06;white-space:nowrap;pointer-events:none;user-select:none}
:root[data-theme="dark"] .doors>div::before{opacity:.085}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .doors>div::before{opacity:.085}}
/* The copy has to sit above it whatever the stacking context does. */
.doors>div>*{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .doors>div::before{transition:opacity .25s ease}
  .doors>div:hover::before{opacity:.10}
}
.doors p{margin:0;color:var(--t2)}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px}
.tile{border:1px solid var(--line);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;text-align:left;padding:0}
.tile:hover{border-color:var(--accent)}
.tile .shot{display:block;aspect-ratio:16/10;background:var(--well2) center/cover no-repeat;position:relative}
.tile .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,9,.55),rgba(4,6,9,0) 58%)}
.tile .lab{display:block}
.tile .lab{padding:14px 16px 16px}
.tile b{display:block;font:900 19.5px var(--ui);color:var(--t1);letter-spacing:-.01em}
.tile small{font:500 12.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}

.lines{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.ln .lnshot{display:block;aspect-ratio:16/10;background:var(--well2) center/cover no-repeat;position:relative;margin:-18px -18px 14px}
.ln .lnshot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,9,.62),rgba(4,6,9,.05) 62%)}
.ln .lnseg{position:absolute;left:10px;bottom:9px;z-index:1;font:600 11.5px/1 "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:6px 9px}
.ln .lnbody{display:flex;flex-direction:column;gap:7px;flex:1}
.ln{border:1px solid var(--line);border-top:3px solid var(--accent);background:var(--surface);overflow:hidden;
  padding:20px;display:flex;flex-direction:column;gap:7px;cursor:pointer;text-align:left}
.ln:hover{background:var(--well)}
.ln b{font:900 21px var(--ui);color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln p{margin:0;font-size:15px;line-height:1.5;color:var(--t2)}
.ln small{margin-top:auto;padding-top:8px;font:500 12.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--t3)}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;font:600 11px "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.08em;padding:3px 7px;border:1px solid var(--line);color:var(--t3);white-space:nowrap}
.chip.pro{background:var(--chip);border-color:var(--chip);color:var(--on-solid)}
.chip.proplus{background:var(--tierplus);border-color:var(--tierplus-bd);color:var(--on-solid)}
.chip.new{background:var(--chip);border-color:var(--chip);color:var(--on-solid)}
.chip.taa{border-color:var(--line-mid);color:var(--t2)}

/* ---------- product grid ---------- */
.layout{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;padding-block:28px}
@media(max-width:960px){.layout{grid-template-columns:1fr}.rail{display:none}.rail.open{display:block}}
.rail{border:1px solid var(--line);background:var(--surface);position:sticky;top:88px}
.railhead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.facet{border-bottom:1px solid var(--line-soft);padding:12px 16px}
.facet>b{display:block;font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:8px}
.facet label{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:14px;color:var(--t2)}
.facet label:hover{color:var(--t1)}
.facet input{accent-color:var(--accent);width:15px;height:15px}
.facet .n{margin-left:auto;font:500 12px "JetBrains Mono",ui-monospace,monospace;color:var(--t3)}

.pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--accent);color:var(--accent-ink);
  background:transparent;font:500 12px "JetBrains Mono",ui-monospace,monospace;padding:5px 9px;cursor:pointer}

.rows{border:1px solid var(--line);background:var(--surface)}
.row{display:grid;grid-template-columns:92px 1fr 190px 150px 170px;gap:16px;padding:14px 16px;
  border-bottom:1px solid var(--line-soft);align-items:center}
.row:last-child{border-bottom:0}
.row:hover{background:var(--well)}
.row .thumb{aspect-ratio:1;background:var(--well2);position:relative;overflow:hidden}
.row .thumb img{width:100%;height:100%;object-fit:contain;padding:6px}
.rowmid{min-width:0}
.row .pn{font:600 14px "JetBrains Mono",ui-monospace,monospace;color:var(--t1);cursor:pointer}
.row .pn:hover{color:var(--accent-ink)}
.row .nm{font-size:14px;color:var(--t2);margin:3px 0 6px}
.row .spec{font:500 12px "JetBrains Mono",ui-monospace,monospace;color:var(--t3)}
.row .price{text-align:right}
.row .price .big{font:900 22px var(--ui);color:var(--t1);letter-spacing:-.02em}
.row .price .was{font:500 12px "JetBrains Mono",ui-monospace,monospace;color:var(--t3);text-decoration:line-through}
.row .price .lab{font:500 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.row .avail{font:500 13px "JetBrains Mono",ui-monospace,monospace;color:var(--t2);display:flex;align-items:center;gap:7px}
.addbox{display:flex;gap:8px;align-items:stretch}
.addbox input{width:64px;background:var(--well);border:1px solid var(--line-mid);color:var(--t1);
  font:600 15px "JetBrains Mono",ui-monospace,monospace;text-align:center;padding:9px 4px;outline:none}
@media(max-width:1100px){
  .row{grid-template-columns:64px 1fr;grid-auto-rows:min-content}
  .row .price,.row .avail,.addbox{grid-column:2}
  .row .price{text-align:left}
}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:1.1fr 1fr 380px;gap:clamp(20px,3vw,44px);padding-block:24px;align-items:start}
@media(max-width:1200px){.pdp{grid-template-columns:1fr 1fr}.buybox{grid-column:1/-1}}
@media(max-width:760px){.pdp{grid-template-columns:1fr}}
.plate{aspect-ratio:4/3;background:linear-gradient(155deg,var(--shot-a),var(--shot-b));display:flex;align-items:center;justify-content:center;position:relative}
.plate span{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;color:var(--t4);position:relative}
.plate::before{content:"";position:absolute;width:46%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--t4) 16%,transparent)}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:10px}
.thumbs div{aspect-ratio:1;background:linear-gradient(155deg,var(--shot-a),var(--shot-b));border:1px solid var(--line)}
.thumbs div:first-child{border-color:var(--accent)}
.keyspecs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);margin-top:20px}
.keyspecs div{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.keyspecs div:nth-child(2n){border-right:0}
.keyspecs span{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.keyspecs b{font:600 15px "JetBrains Mono",ui-monospace,monospace;color:var(--t1)}
.tabs{display:flex;gap:4px 20px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-top:24px}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;padding:10px 0;cursor:pointer;
  font:700 15px var(--ui);color:var(--t3)}
.tabs button[aria-selected="true"]{color:var(--t1);border-bottom-color:var(--accent)}
.specrow{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.specrow b{font:500 13px "JetBrains Mono",ui-monospace,monospace;color:var(--t1);text-align:right}
.dls{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px}
.buybox{border:1px solid var(--line);border-top:3px solid var(--accent);background:var(--surface);padding:22px;position:sticky;top:88px}
.bigprice{font:900 42px var(--ui);color:var(--t1);letter-spacing:-.02em;line-height:1}
.breaks{border:1px solid var(--line);margin:14px 0}
.breaks div{display:flex;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--line-soft);
  font:500 13px "JetBrains Mono",ui-monospace,monospace;color:var(--t2)}
.breaks div:last-child{border-bottom:0}
.breaks div b{color:var(--t1)}
.qty{display:flex;align-items:stretch;border:1px solid var(--line-mid);width:fit-content}
.qty button{width:42px;background:transparent;border:0;color:var(--t1);font-size:18px;cursor:pointer}
.qty input{width:70px;background:transparent;border:0;border-inline:1px solid var(--line-mid);color:var(--t1);
  text-align:center;font:600 16px "JetBrains Mono",ui-monospace,monospace;outline:none}

/* ---------- tables / cart / checkout ---------- */
.tbl{width:100%;border-collapse:collapse;border:1px solid var(--line);background:var(--surface)}
.tbl th{background:var(--well);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);
  font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--t2);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font:600 14px "JetBrains Mono",ui-monospace,monospace;color:var(--t1);white-space:nowrap}
.tablescroll{overflow-x:auto}
.cols{display:grid;grid-template-columns:1fr 400px;gap:28px;align-items:start;padding-block:24px}
@media(max-width:1000px){.cols{grid-template-columns:1fr}}
.card{border:1px solid var(--line);background:var(--surface);padding:20px}
.card.hot{border-top:3px solid var(--accent)}
.sum{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:15px}
.sum b{font:600 15px "JetBrains Mono",ui-monospace,monospace;color:var(--t1)}
.sum.total{border-top:1px solid var(--line);margin-top:10px;padding-top:14px;align-items:baseline}
.sum.total b{font:900 28px var(--ui);letter-spacing:-.02em}
.pay{border:1px solid var(--line)}
.payopt{padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer;display:block}
.payopt:last-child{border-bottom:0}
.payopt.on{border-left:3px solid var(--accent);background:var(--well)}
.payopt .hd{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.payopt .hd b{font:700 15px var(--ui);color:var(--t1)}
.payopt .hd span{font:600 13px "JetBrains Mono",ui-monospace,monospace;color:var(--t3)}
.payopt p{margin:6px 0 0;font-size:14px;color:var(--t2)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.field input,.field select,.field textarea{background:var(--well);border:1px solid var(--line-mid);color:var(--t1);
  padding:11px 13px;font:400 15px var(--ui);outline:none;width:100%}
.field textarea{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:14px;min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.note{border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--well);padding:14px 16px;font-size:14px;color:var(--t2)}
.note.ok{border-left-color:var(--ok)}
.note b{color:var(--t1)}
.gate{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--well);padding:16px 18px}

/* mark for fast order rows */
.mk{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font:700 14px var(--ui);flex:none}
.mk.ok{background:var(--ok);color:#fff}
.mk.warn{background:var(--warn);color:#241b00}
.mk.bad{background:var(--well2);color:var(--t3);border:1px solid var(--line-mid)}

footer.ft{background:var(--well2);border-top:1px solid var(--line);margin-top:40px}
/* The two halves sit on ONE line. Without align-items the flex default
   is stretch, so each span filled the row height and its text hung at
   the top — and because the left half carries 28px social buttons and
   the right half is plain text, the two never lined up. Centre both and
   they read as one row, which is what they are. */
footer.ft .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px 28px;
  flex-wrap:wrap;padding-block:26px;
  font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
footer.ft .wrap > span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 4px;line-height:1.9}
.socrow{margin-left:14px}
/* The footnotes are SENTENCES. All-caps monospace is a label style — set
   as a paragraph it stops being readable, which is the whole job of a
   footnote. These get the same face as the rest of the page. */
footer.ft .wrap.ftnote{display:block;font:400 13px/1.7 var(--ui);letter-spacing:0;text-transform:none;
  color:var(--t3);padding-block:0 26px}

/* persona switcher — demo only */
.persona{position:fixed;right:16px;bottom:16px;z-index:90;background:var(--surface);border:1px solid var(--line-hard);
  padding:12px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:calc(100vw - 32px)}
.persona b{font:500 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.persona button{background:transparent;border:1px solid var(--line-mid);color:var(--t2);cursor:pointer;
  font:600 11px "JetBrains Mono",ui-monospace,monospace;padding:6px 9px}
.persona button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:100;background:var(--t1);color:var(--surface);
  padding:13px 20px;font:700 14px var(--ui);opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- small screens: the header stacks, the switch moves to the menu ---------- */
@media(max-width:860px){
  .topin{height:auto;flex-wrap:wrap;padding-block:12px;gap:10px 12px}
  .search{order:3;flex-basis:100%;min-width:0}
  .who{margin-left:auto;gap:8px}
  .themeswitch{display:none}
  .cartbtn{padding:9px 10px}
  .msgbar .wrap{font-size:13px;gap:14px}
  .msgbar .bico{width:17px;height:17px}
  .burger{order:2}
}
@media(max-width:520px){
  .who .btn2.sm{padding:8px 10px;font-size:13px}
  .persona{left:16px;right:16px;justify-content:center}
}
.burgermenu{display:none;border-top:1px solid var(--line);background:var(--surface)}
.burgermenu.open{display:block}
.burgermenu .wrap{display:flex;flex-direction:column;padding-block:10px 16px;gap:2px}
.burgermenu a{padding:12px 0;border-bottom:1px solid var(--line-soft);font:700 16px var(--ui);color:var(--t1)}
.burgermenu .row2{display:flex;justify-content:space-between;align-items:center;padding-top:14px}


/* ══ added 2026-09-13 ════════════════════════════════════════════════════
   Real photography, the auto-running carousel, and the product page
   pieces that came with the real catalog.                               */

/* --- featured carousel: the fixture standing in the room it lights --- */
.carbox{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--well2)}
.feat{position:relative;display:grid;grid-template-columns:minmax(280px,46%) 1fr;
  gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(22px,3vw,44px);min-height:400px;isolation:isolate}
.feat::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--scene);
  background-size:cover;background-position:center}
.feat::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(8,10,13,.90) 0%,rgba(8,10,13,.80) 46%,rgba(8,10,13,.66) 100%)}
[data-alg-theme="light"] .feat::after{
  background:linear-gradient(90deg,rgba(10,12,16,.86) 0%,rgba(10,12,16,.76) 46%,rgba(10,12,16,.62) 100%)}
.featshot{display:flex;align-items:center;justify-content:center;min-height:240px}
.featshot img{max-width:100%;max-height:340px;object-fit:contain}
.featshot img.sd{mix-blend-mode:screen}
.featshot img.sn{filter:drop-shadow(0 22px 34px rgba(0,0,0,.62))}
.featshot img.sl.boxed{background:#fff;padding:14px;box-shadow:0 26px 42px rgba(0,0,0,.5)}
.featshot img.scene{width:100%;height:300px;object-fit:cover;box-shadow:0 26px 42px rgba(0,0,0,.5)}
.featcopy .eyebrow{color:rgba(255,255,255,.72)}
.featcopy h2{color:#fff;font-size:clamp(30px,4.4vw,52px);margin:12px 0 10px;letter-spacing:-.02em}
.featcopy p{margin:0 0 20px;font-size:17px;color:rgba(255,255,255,.80);max-width:44ch}
.featfacts{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;margin-bottom:20px}
.featbuy{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fv{font:900 28px var(--ui);color:#fff;letter-spacing:-.02em;line-height:1.1}
.cardots{display:inline-flex;gap:6px;margin-right:6px}
.cardots button{border:0;padding:0;width:22px;height:3px;background:var(--line-mid);cursor:pointer}
.cardots button[aria-pressed="true"]{background:var(--accent)}

/* --- shop banner --- */
.shopban{position:relative;margin-block:18px 6px;min-height:190px;display:flex;align-items:flex-end;
  padding:clamp(18px,3vw,30px);background-size:cover;background-position:center;border:1px solid var(--line)}
.shopban::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,11,.88),rgba(6,8,11,.42))}
.shopban>div{position:relative;z-index:1}
.shopban h2{color:#fff;margin:8px 0 6px}
.shopban p{margin:0;color:rgba(255,255,255,.80);font-size:15px}
.shopban .eyebrow{color:rgba(255,255,255,.66)}

/* --- product page --- */
.crumb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;
  color:var(--t3);padding-block:16px 4px;overflow-x:auto;white-space:nowrap}
.crumb span{color:var(--t1)}
.pdp .plate{display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp .plate img{width:100%;height:100%;object-fit:contain;padding:18px}
.pdpintro{margin:0;font-size:17px;color:var(--t2);line-height:1.55}
.thumbs button{border:1px solid var(--line);background:var(--well2) center/cover no-repeat;cursor:pointer;
  aspect-ratio:1;padding:0}
.thumbs button.on{border-color:var(--accent)}
.kslist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 24px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.kslist div{font-size:14px;color:var(--t2)}
.tblwrap{overflow-x:auto;border:1px solid var(--line)}
.spectbl{border-collapse:collapse;width:100%;min-width:520px;font-size:13.5px}
.spectbl th{text-align:left;padding:10px 12px;background:var(--well);color:var(--t1);
  font:600 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.spectbl td{padding:9px 12px;border-top:1px solid var(--line-soft);color:var(--t2);vertical-align:top}
.spectbl tr:hover td{background:var(--well)}
.usephoto{border:1px solid var(--line);overflow:hidden}
.usephoto img{display:block;width:100%;height:auto}
.usetags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.accs{border:1px solid var(--line)}
.accrow{display:flex;justify-content:space-between;gap:16px;padding:10px 14px;border-bottom:1px solid var(--line-soft);font-size:14px}
.accrow:last-child{border-bottom:0}
.accrow b{color:var(--t1);font-size:13px;white-space:nowrap}
.breaks div.on{background:var(--well);box-shadow:inset 3px 0 0 var(--accent)}

/* --- narrower screens --- */
@media (max-width:1180px){
  .lines{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .heroin{max-width:100%}
  .feat{grid-template-columns:1fr;min-height:0}
  .featshot{min-height:0}
  .featshot img{max-height:220px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .shopban{min-height:140px}
}
@media (max-width:560px){
  .lines{grid-template-columns:1fr}
}

/* Product cut-outs sit on white, the way every distributor catalogue does it,
   in both themes. Transparent PNGs (img/n) are preferred where we have them. */
/* THE PLATE BEHIND A PRODUCT CUT-OUT.
   Was #fff, which on a dark page is a lit rectangle — the fixture was
   fine, the box around it was the problem. Checked all 59 product images
   first: every one is a transparent PNG/WebP, so there is no baked-in
   white background that needs hiding, and the plate is free to be dark.
   A soft radial keeps a white fixture legible and still frames the image.
   To go back to white, this one line is the whole change. */
.pair{position:relative;background:radial-gradient(120% 90% at 50% 30%, #333942 0%, #1b1f24 70%)}
:root[data-theme="light"] .pair{background:#EDEFF2}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .pair{background:#EDEFF2}}
.pair img{width:100%;height:100%;object-fit:contain}
.pair img.scene{object-fit:cover}
.thumbs button{position:relative;overflow:hidden;background-color:#fff}
.thumbs button img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.thumbs button img.scene{object-fit:cover}

.inuse{margin:12px 0 0;border:1px solid var(--line);overflow:hidden;background:var(--surface)}
.inuse img{display:block;width:100%;height:auto}
.inuse figcaption{padding:9px 12px;font:500 11px "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--t3);border-top:1px solid var(--line-soft)}
.tabs{flex-wrap:wrap}

/* the hero photo is bright in the light theme — the headline still has to win */
[data-alg-theme="light"] .hero{background:#0F1114}
[data-alg-theme="light"] .hs img{filter:brightness(.62) saturate(.94)}
[data-alg-theme="light"] .heroveil{background:
  linear-gradient(to right,rgba(12,14,18,.94) 12%,rgba(12,14,18,.78) 32%,rgba(12,14,18,.34) 52%,rgba(12,14,18,.08) 68%),
  linear-gradient(to top,rgba(12,14,18,.92) 3%,transparent 36%)}
[data-alg-theme="light"] .heroin h1,[data-alg-theme="light"] .heroin .herosub{color:#fff}
[data-alg-theme="light"] .heroin .eyebrow{color:rgba(255,255,255,.72)}
[data-alg-theme="light"] .hero .bigfind{background:rgba(255,255,255,.96)}

/* Partner-network stock. Never names the vendor. */
.avail .part{display:block;margin-top:4px;font:500 11px "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.04em;color:var(--t3)}
.partner{margin-top:10px;padding:9px 11px;border:1px solid var(--line);background:var(--well);
  font-size:13px;color:var(--t2);line-height:1.5}
.partner b{color:var(--t1)}
.partner .asof{display:block;margin-top:3px;font:500 11px "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.06em;color:var(--t3)}
.partner .asof.old{color:var(--warn-ink)}

/* ══ 2026-09-13 · gate, filters, views, configurator, cross-reference ══ */

/* the filter rail scrolls on its own — James: it should not need the page
   to be at the bottom before it moves */
.rail{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 116px);display:flex;flex-direction:column}
.railscroll{overflow-y:auto;overscroll-behavior:contain;padding-right:6px;flex:1;min-height:0}
.railscroll::-webkit-scrollbar{width:9px}
.railscroll::-webkit-scrollbar-thumb{background:var(--line-mid);border-radius:9px}
.facet .more{display:block;margin-top:6px;background:none;border:0;padding:2px 0;cursor:pointer;
  font:500 12px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;color:var(--accent-ink)}
.facet .more:hover{text-decoration:underline}

/* gated cells */
.gatedcell{display:flex;align-items:center;justify-content:flex-end}
.price.gatedcell .btn3{white-space:nowrap}

/* toolbar + view switch */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.viewsw{display:inline-flex;border:1px solid var(--line);overflow:hidden}
.viewsw button{background:transparent;border:0;cursor:pointer;padding:7px 14px;
  font:600 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.viewsw button+button{border-left:1px solid var(--line)}
.viewsw button[aria-pressed="true"]{background:var(--t1);color:var(--canvas)}

/* grid view */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);text-decoration:none}
.pcard:hover{border-color:var(--accent)}
.pcshot{display:block;aspect-ratio:4/3;position:relative;overflow:hidden;background:#fff}
.pcshot img{width:100%;height:100%;object-fit:contain;padding:10px}
.pcshot img.scene{object-fit:cover;padding:0}
.pcbody{display:flex;flex-direction:column;gap:5px;padding:12px 13px 14px}
.pcchips{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:2px}
.pcard b.mono{font-size:12.5px;color:var(--t1)}
.pcname{font-size:13.5px;color:var(--t2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcspec{font:500 11px "JetBrains Mono",ui-monospace,monospace;color:var(--t3);letter-spacing:.03em}
.pcprice{margin-top:6px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:15px;color:var(--t1)}
.pcprice .dim{font:500 11px "JetBrains Mono",ui-monospace,monospace;color:var(--t3)}

/* compare view */
.spectbl.cmp td{white-space:nowrap}
.spectbl.cmp td a{color:var(--accent-ink)}

/* browse-by-building */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding-bottom:40px}
.bcard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;padding:0;overflow:hidden}
.bcard:hover{border-color:var(--accent)}
.bshot{display:block;aspect-ratio:16/9;background:var(--well2) center/cover no-repeat;position:relative}
.bshot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,6,9,.6),transparent 60%)}
.bbody{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.bcard b{font:900 19px var(--ui);color:var(--t1)}
.bsub{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.bcolls{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.bcolls em{font-style:normal;font-size:12px;color:var(--t2);border:1px solid var(--line);padding:3px 7px}
.bn{margin-top:8px;font:700 13px var(--ui);color:var(--accent-ink)}

/* collection -> families */
.famgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding-bottom:40px}
.famcard{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-align:left;padding:0;overflow:hidden}
.famcard:hover{border-color:var(--accent)}
.famshot{display:block;aspect-ratio:4/3;position:relative;background:#fff}
.famshot img{width:100%;height:100%;object-fit:contain;padding:10px}
.famshot img.scene{object-fit:cover;padding:0}
.fambody{display:flex;flex-direction:column;gap:4px;padding:12px 13px 14px}
.famcard b{font:900 17px var(--ui);color:var(--t1)}
.famapp{font-size:12.5px;color:var(--t2)}
.famn{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--t3);margin-top:4px}

/* the Apple-style build-it-out ladder */
.build{margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--line)}
.sechead2 h3{margin:8px 0 4px}
.bstep{border:1px solid var(--line);margin-bottom:12px;background:var(--surface)}
.bstephead{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line-soft)}
.bstephead b{font:700 15px var(--ui);color:var(--t1);flex:1}
.bnum{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--accent);color:var(--on-solid);font:700 12px var(--ui)}
.bstephead .opt{font:500 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--t3)}
.bopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;padding:12px 14px 14px}
.bopt{display:flex;flex-direction:column;gap:3px;text-align:left;cursor:pointer;padding:10px 12px;
  border:1px solid var(--line);background:var(--well2)}
.bopt:hover{border-color:var(--line-hard)}
.bopt.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.bo-n{font:600 13.5px var(--ui);color:var(--t1);line-height:1.35}
.bo-s{font:500 11px "JetBrains Mono",ui-monospace,monospace;color:var(--t3);letter-spacing:.03em}
.bo-p{margin-top:4px;font:700 13px var(--ui);color:var(--accent-ink)}

/* configured-price summary in the buy box */
.cfgsum{border:1px solid var(--line);margin:6px 0 2px;font-size:13px}
.cfgsum>div{display:flex;justify-content:space-between;gap:12px;padding:7px 11px;border-bottom:1px solid var(--line-soft)}
.cfgsum>div:last-child{border-bottom:0}
.cfgsum span{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cfgsum b{color:var(--t1);white-space:nowrap}
.cfgsum .tot{background:var(--well);font-weight:700}
.cfgsum .tot span{color:var(--t1)}
.pdplink{display:inline-block;margin:12px 0 0}

/* cross-reference */
.fastlay{grid-template-columns:1fr minmax(280px,340px)}
.pad{width:100%;background:var(--well2);border:1px solid var(--line);color:var(--t1);padding:14px;
  font:400 13.5px/1.7 "JetBrains Mono",ui-monospace,monospace;resize:vertical;outline:none}
.pad:focus{border-color:var(--accent)}
.padstats{margin:10px 0 14px;font-size:12.5px;color:var(--t3);letter-spacing:.04em}
.padstats .ok{color:var(--ok-ink)} .padstats .warn{color:var(--warn-ink)}
.xrow{grid-template-columns:1fr 160px}
.xin{font-size:13.5px;color:var(--t1)}
.xnote{font-size:12.5px;margin-top:3px}
.xnote.ok{color:var(--ok-ink)} .xnote.warn{color:var(--warn-ink)} .xnote.dim{color:var(--t3)}
.xhit{margin-top:6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.xhit a{color:var(--accent-ink);font-size:13px}
.xopts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.xopt{display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;padding:8px 10px;
  border:1px solid var(--line);background:var(--well2);max-width:260px}
.xopt:hover{border-color:var(--accent)}
.xopt b{font-size:12px;color:var(--t1)} .xopt > span{font-size:12px;color:var(--t2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.xlegend{display:grid;gap:10px;margin-top:6px}
.xlegend div{display:flex;gap:10px;align-items:baseline}
.xlegend b{flex:none;width:96px;font:600 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.xlegend b.ok{color:var(--ok-ink)} .xlegend b.warn{color:var(--warn-ink)} .xlegend b.dim{color:var(--t3)}
.xlegend span{font-size:13.5px;color:var(--t2)}
.sumrows>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
.sumrows span{color:var(--t2)} .sumrows b{color:var(--t1)}

@media (max-width:980px){
  .rail{position:static;max-height:none}
  .railscroll{overflow:visible}
  .fastlay{grid-template-columns:1fr}
}

/* ─── WHAT WE CAN SHIP ─────────────────────────────────────────────────
   The count, then the sentence a person would actually say.          */
.shipbox{margin:14px 0}
.shipline{display:flex;align-items:baseline;gap:10px}
.shipqty{font:900 26px var(--ui);color:var(--t1);letter-spacing:-.02em}
.shiplab{font-size:13px;color:var(--t2)}
.fulfil{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--t2)}
.fulfil.ready{color:var(--ok-ink)}
.fulfil.split{color:var(--t1)}
.fulfil.build{color:var(--warn-ink)}
.fulfil.unknown{color:var(--t3)}
.fulfilcell{display:inline}

/* ─── IN-STOCK ALTERNATIVES ────────────────────────────────────────── */
.alts{margin:14px 0 0;border:1px solid var(--line);background:var(--well2)}
.altshead{padding:10px 12px;border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.altshead b{font:700 13px var(--ui);color:var(--t1);letter-spacing:.01em}
.altshead span{font-size:12.5px;color:var(--t3)}
.alt{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:11px 12px;border-bottom:1px solid var(--line-soft)}
.alt:last-child{border-bottom:0}
.altmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.altsku{font-size:13px;font-weight:600;color:var(--t1);text-decoration:none}
.altsku:hover{color:var(--accent-ink)}
.altmain .nm{font-size:13px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.altspec{font-size:11.5px;color:var(--t3);letter-spacing:.02em}
.altright{display:flex;align-items:center;gap:12px;flex:none}
.altstock{font:500 12px "JetBrains Mono",ui-monospace,monospace;color:var(--ok-ink);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.altprice{font:800 16px var(--ui);color:var(--t1);letter-spacing:-.01em}

/* In the buy box there is no room for a row — stack it. */
.alts.narrow .alt{flex-direction:column;align-items:stretch;gap:8px}
.alts.narrow .altmain .nm{white-space:normal}
.alts.narrow .altright{justify-content:space-between;gap:8px}
.alts.narrow .altright .btn2{width:100%;text-align:center}
.alts.narrow .altright{flex-wrap:wrap}

@media(max-width:640px){
  .alt{flex-direction:column;align-items:stretch;gap:8px}
  .altmain .nm{white-space:normal}
  .altright{justify-content:space-between}
}
.tbl tr.altrow td{padding:0 0 14px;border-top:0}
.tbl tr.altrow .alts{margin-top:0}

/* ─── ORDERING-GUIDE GATING ────────────────────────────────────────────
   An option the datasheet does not allow on this fixture is visible but
   dead — the buyer should see it exists and see why it is not theirs.  */
.bopt.off{opacity:.4;cursor:not-allowed;border-style:dashed}
.bopt.off:hover{border-color:var(--line);background:transparent}
.bopt.off .bo-p{color:var(--t4)}
.bopt .bo-x{grid-column:1/-1;margin-top:6px;font:500 11.5px "JetBrains Mono",ui-monospace,monospace;
  color:var(--warn-ink);letter-spacing:.01em;line-height:1.5}

/* ─── PUBLIC PRODUCT PAGE LINK ─────────────────────────────────────── */
.pdplink{display:flex;align-items:center;gap:12px;margin:14px 0 18px;padding:11px 14px;
  border:1px solid var(--line);background:var(--well);text-decoration:none;transition:border-color .15s}
.pdplink:hover{border-color:var(--accent)}
.pdpl-k{font:600 10.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);flex:none}
.pdpl-v{font-size:14px;color:var(--t1);flex:1;min-width:0}
.pdpl-go{color:var(--t3);font-size:16px;flex:none}

/* ─── HERO CTA ROW ─────────────────────────────────────────────────── */
.herocta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}

/* ─── QUOTE BILL OF MATERIALS ──────────────────────────────────────── */
pre.bom{margin:10px 0;padding:12px;background:var(--well2);border:1px solid var(--line);
  font:500 11.5px "JetBrains Mono",ui-monospace,monospace;color:var(--t2);
  line-height:1.6;overflow-x:auto;white-space:pre;max-height:340px;overflow-y:auto}

/* ─── SHIPPING TERMS PAGE + THE ASTERISK ───────────────────────────── */
.msgbar .ast{color:var(--accent-ink);text-decoration:none;font-weight:700;padding-left:1px}
.ftnote{padding-top:4px;max-width:none}
.ftnote a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.ftnote a:hover{color:var(--accent)}
/* The marker sits in its own narrow column so the text starts on the
   SAME line as the asterisk and stays aligned when it wraps. */
.ftnote p{display:grid;grid-template-columns:26px 1fr;gap:0 4px;margin:0 0 8px;align-items:start}
.ftnote p > a:first-child{text-align:left;letter-spacing:.06em;text-decoration:none;font-weight:700;color:var(--t2)}
.ftnote p > a:first-child:hover{color:var(--accent)}
.tsec{padding:18px 0;border-top:1px solid var(--line)}
.tsec h3{font:800 18px var(--ui);color:var(--t1);margin:0 0 8px;letter-spacing:-.01em}
.tsec p{margin:0;color:var(--t2);line-height:1.75}
.shiporder{margin-top:20px;padding:12px 14px;border:1px solid var(--line);background:var(--well);
  display:flex;flex-direction:column;gap:4px}
.shiporder b{font:700 14px var(--ui);color:var(--t1)}
.shiporder span{font-size:13px;color:var(--t3)}
.shiporder.many{border-color:var(--warn);}
.shiporder.many b{color:var(--warn-ink)}

/* ─── TEAM BAR ─────────────────────────────────────────────────────── */
.persona .pwho{font:600 11px "JetBrains Mono",ui-monospace,monospace;color:var(--t3);
  padding-left:10px;margin-left:4px;border-left:1px solid var(--line-mid);letter-spacing:.06em}
.persona .padmin{font:600 11px "JetBrains Mono",ui-monospace,monospace;color:var(--accent-ink);
  text-decoration:none;letter-spacing:.08em;text-transform:uppercase}
.persona .pout{background:transparent;border:1px solid var(--line-mid);color:var(--t2);
  font:600 11px "JetBrains Mono",ui-monospace,monospace;padding:4px 9px;cursor:pointer;letter-spacing:.06em}
.persona .pout:hover{border-color:var(--accent);color:var(--accent-ink)}
.ft .teamdoor{color:var(--t4-ink);text-decoration:none}
.ft .teamdoor:hover{color:var(--accent-ink)}
.socrow{display:inline-flex;gap:7px;margin-left:14px;vertical-align:middle}
.socrow a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border:1px solid var(--line);color:var(--t3);text-decoration:none;
  transition:color .15s,border-color .15s,background-color .15s}
.socrow a svg{display:block}
.socrow a:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%, transparent)}
.socrow a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ─── ADMIN ────────────────────────────────────────────────────────── */
.adminwrap{padding-block:26px 70px}
.adminhead{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:4px}
.adminlegend{display:flex;gap:18px;flex-wrap:wrap;padding:12px 14px;background:var(--well2);
  border:1px solid var(--line);margin-bottom:26px;font-size:12.5px;color:var(--t3)}
.v{display:inline-block;font:700 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 7px;border:1px solid currentColor;margin-left:8px;white-space:nowrap}
.v.ok{color:var(--ok-ink)} .v.ok2{color:var(--t2)} .v.warn{color:var(--warn-ink)}
.v.off{color:var(--t4-ink)} .v.pend{color:var(--accent-ink)}
.adminlegend .v{margin-left:0;margin-right:6px}
.adgroup{margin-bottom:34px}
.adgroup h3{font:900 21px var(--ui);color:var(--t1);letter-spacing:-.015em;margin:0 0 14px}
.adgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.adgrid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.adcard{border:1px solid var(--line);background:var(--surface);padding:15px 16px;display:flex;
  flex-direction:column;gap:8px}
.adcard.on{border-color:var(--accent);background:var(--well)}
.adcard.unbuilt{border-style:dashed}
.adcard>b{font:800 16px var(--ui);color:var(--t1);letter-spacing:-.01em}
.adtop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.adtop b{font:800 16px var(--ui);color:var(--t1);letter-spacing:-.01em;display:block;margin-bottom:6px}
.adwhat{margin:0;font-size:14px;color:var(--t2);line-height:1.6}
.adwhy{margin:0;font-size:13px;color:var(--t3);line-height:1.65}
.adsrc{font:500 10.5px "JetBrains Mono",ui-monospace,monospace;color:var(--t4-ink);
  letter-spacing:.05em;margin-top:auto;padding-top:4px}
.sw{flex:none;width:46px;height:26px;border-radius:13px;border:1px solid var(--line-mid);
  background:var(--well2);position:relative;cursor:pointer;transition:.16s;padding:0}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--t3);transition:.16s;display:block}
.sw.on{background:var(--accent);border-color:var(--accent)}
.sw.on i{left:23px;background:#fff}
.socgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.soccard{border:1px solid var(--line);background:var(--surface);padding:15px 16px;
  display:flex;flex-direction:column;gap:9px}
.soctop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.soctop b{font:800 17px var(--ui);color:var(--t1)}
.soctop .v{margin-left:0}
.soccard .field{margin-top:auto}
@media(max-width:640px){ .adminlegend{flex-direction:column;gap:8px} }

/* ─── AVAILABILITY FACET ───────────────────────────────────────────── */
.availfacet{border-top:2px solid var(--line-mid)}
.availfacet input[type=radio]{accent-color:var(--accent)}
.facetnote{margin:8px 0 0;font-size:11.5px;color:var(--t4-ink);line-height:1.6}
.toolbar .seeall{margin-left:10px;font:600 12px var(--ui);white-space:nowrap}
.persona.dev{border-color:var(--warn)}
.persona.dev>b{color:var(--warn-ink)}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 10 — FREIGHT, CARTON BREAK, POINTS, NOTES, QUEUES
   ═══════════════════════════════════════════════════════════════════ */

/* ─── freight ─────────────────────────────────────────────────────── */
.freightbox b{font-size:15px}
.freightpitch{margin-top:14px}
.freightpdp{margin-top:14px;padding:11px 13px;border:1px solid var(--line);background:var(--well);
  font-size:13px;line-height:1.6;color:var(--t2)}
.freightpdp b{color:var(--t1)}
.freightpdp.free{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 9%, transparent)}
.freightpdp.free b{color:var(--ok-ink)}
.freightpdp .dim{display:block;margin-top:5px;font-size:12.5px}

/* ─── carton break ────────────────────────────────────────────────── */
.cartonline{font-weight:500}
.cartonon{display:inline-block;margin-top:4px;font:600 11.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ok-ink)}
.cartonoff{display:inline-block;margin-top:4px;font-size:12px;color:var(--t3);text-align:right;line-height:1.45}
.cartonbox{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 0 10px;padding:10px 12px;border:1px dashed var(--line-mid);background:var(--well)}
.cartonbox.on{border-style:solid;border-color:var(--ok);background:color-mix(in srgb, var(--ok) 9%, transparent)}
.cartonbox .cartonoff{text-align:left;margin:0;color:var(--t2)}
.cartonbox .cartonon{margin:0}

/* ─── coupon row ──────────────────────────────────────────────────── */
.couponrow{display:flex;gap:8px;margin:10px 0 6px}
.couponrow input{flex:1;min-width:0;background:var(--well);border:1px solid var(--line-mid);
  color:var(--t1);padding:9px 11px;text-transform:uppercase}

/* ─── back in stock ───────────────────────────────────────────────── */
.watchbox{margin-top:16px;padding:14px;border:1px solid var(--line-mid);background:var(--well)}
.watchbox b{display:block;color:var(--t1);font:900 15px var(--ui)}
.watchbox p{margin:6px 0 10px;font-size:13px;color:var(--t2);line-height:1.55}
.watchbox form{display:flex;gap:7px;flex-wrap:wrap}
.watchbox input{background:var(--page);border:1px solid var(--line-mid);color:var(--t1);padding:8px 10px;font-size:13px}
.watchbox input[name=email]{flex:1;min-width:150px}
.watchbox input[name=qty]{width:64px;text-align:center}
.watchbox .dim{display:block;margin-top:8px;font-size:12.5px}

/* ─── project photos ──────────────────────────────────────────────── */
.revs{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.rev{display:grid;grid-template-columns:190px 1fr;gap:18px;margin:0 0 20px;padding:0 0 20px;
  border-bottom:1px solid var(--line)}
.rev img{width:100%;height:130px;object-fit:cover;border:1px solid var(--line)}
.rev figcaption b{display:block;color:var(--t1);font:900 15px var(--ui)}
.rev .stars{display:block;color:var(--accent);font-size:14px;margin:3px 0 7px;letter-spacing:.1em}
.rev figcaption p{margin:0;font-size:14.5px;color:var(--t2);line-height:1.6}
.revform{margin-top:16px;padding:16px;border:1px solid var(--line-mid);background:var(--well)}
@media(max-width:720px){.rev{grid-template-columns:1fr}}

/* ─── ⒶRCHIPOINTS ─────────────────────────────────────────────────── */
.ptsbal{display:grid;grid-template-columns:250px 1fr;gap:24px;padding:22px;border:1px solid var(--line);
  background:var(--well2);margin-bottom:28px}
.ptshist .sum{padding:6px 0}
.rewards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.reward{padding:16px;border:1px solid var(--line);background:var(--well);display:flex;flex-direction:column;gap:6px}
.reward.can{border-color:var(--ok)}
.reward b{color:var(--t1);font:900 16px var(--ui)}
.reward .mono{font-size:12.5px;color:var(--accent);letter-spacing:.04em}
.reward p{margin:2px 0 10px;font-size:13px;color:var(--t2);line-height:1.5;flex:1}
@media(max-width:820px){.ptsbal{grid-template-columns:1fr}}

/* ─── application notes ───────────────────────────────────────────── */
/* THREE NOTES, SO THREE ACROSS OR ONE — never two, which stranded the
   third. Three has no other divisor that fits on a screen. */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.notes{grid-template-columns:1fr}}
.note-card{position:relative;overflow:hidden;isolation:isolate;container-type:inline-size;
  display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);
  background:var(--well);text-decoration:none;transition:border-color .15s,transform .15s}
.note-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.note-card b{color:var(--t1);font:900 21px/1.25 var(--ui);letter-spacing:-.015em}
.note-card p{margin:0;font-size:15px;color:var(--t2);line-height:1.6;flex:1}
.note-card .go{font:600 13px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);position:relative;z-index:1}
/* The numeral, same language as the doors: bottom-right, sized to the
   card, faint enough to be texture. Slightly fainter than the doors
   because a two-digit numeral is a denser shape than a word. */
.note-card::before{content:attr(data-wm);position:absolute;z-index:-1;right:.06em;bottom:-.04em;
  font:900 clamp(52px,30cqw,110px)/1 var(--ui);letter-spacing:-.05em;
  color:var(--t1);opacity:.05;pointer-events:none;user-select:none}
:root[data-theme="dark"] .note-card::before{opacity:.075}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .note-card::before{opacity:.075}}
.note-card>*{position:relative;z-index:1}
.note-card:hover::before{opacity:.10}
.prose p{font-size:16.5px;line-height:1.75;color:var(--t2);margin:0 0 18px}
.prose b{color:var(--t1)}

/* ─── installed-project strip ─────────────────────────────────────── */
/* ═══ SIX CARDS, SO NEVER FOUR OR FIVE ACROSS ═══════════════════════
   James, 2026-09-15, comparing his desktop against his laptop: the
   strip showed five across and one stranded on a second row with
   1154px of empty space beside it.

   The cause was `repeat(auto-fill, minmax(260px,1fr))` — auto-fill packs
   in as many columns as happen to fit, so the column count rode on the
   window width. There are six projects. Six divides by 3, 2 and 1, and
   by nothing else that fits on a screen — at four columns it orphans
   two, at five it orphans one, and the wider the monitor the worse it
   looked. Fixed counts, every one of which divides six evenly. Add a
   seventh project and this needs revisiting; that is the trade for a
   strip that is never ragged. */
.projs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.projs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.projs{grid-template-columns:1fr}}
/* Taller photo now that each card is about half again as wide, so the
   images keep roughly the letterbox they had at five across. */
@media(min-width:901px){.proj img{height:210px}}
.proj{margin:0;border:1px solid var(--line);background:var(--well)}
.proj img{width:100%;height:170px;object-fit:cover;display:block}
.proj figcaption{padding:15px 17px 17px}
.proj figcaption b{display:block;color:var(--t1);font:900 16.5px var(--ui);letter-spacing:-.01em;margin-bottom:5px}
.proj figcaption span{font-size:14.5px;color:var(--t2);line-height:1.5}

/* ─── exit pop-up ─────────────────────────────────────────────────── */
.exitpop{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;z-index:900;padding:20px}
.exitcard{position:relative;max-width:460px;padding:30px;background:var(--well2);border:1px solid var(--line-mid)}
.exitcard h3{margin:8px 0 10px;font:900 26px var(--ui);letter-spacing:-.01em;color:var(--t1)}
.exitcard p{margin:0 0 16px;font-size:14.5px;color:var(--t2);line-height:1.6}
.exitcard form{display:flex;gap:8px;margin-bottom:10px}
.exitcard input{flex:1;min-width:0;background:var(--page);border:1px solid var(--line-mid);color:var(--t1);padding:11px}
.exitx{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--t3);font-size:24px;cursor:pointer;line-height:1}

/* ─── admin queues and forms ──────────────────────────────────────── */
.qrow{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap;
  padding:15px 0;border-bottom:1px solid var(--line)}
.qmain{flex:1;min-width:240px}
.qmain b{display:block;color:var(--t1);font:900 16px var(--ui)}
.qmain .mono{display:block;font-size:12.5px;color:var(--t3);margin-top:3px}
.qmain .adwhat{margin:8px 0 0}
.qact{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qact select{background:var(--well);border:1px solid var(--line-mid);color:var(--t1);padding:7px 9px;font-size:13px}
.sigs{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.sig{font:600 11.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.03em;padding:3px 7px;border:1px solid var(--line)}
.sig.ok{color:var(--ok-ink);border-color:var(--ok);background:color-mix(in srgb, var(--ok) 9%, transparent)}
.sig.no{color:var(--t3)}
.adform{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:0 0 20px;padding:15px;
  border:1px solid var(--line);background:var(--well)}
.adform input,.adform select{background:var(--page);border:1px solid var(--line-mid);color:var(--t1);
  padding:9px 10px;font-size:13.5px}
.adform.wide{align-items:flex-start}
.ffield{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--t2)}
.ffield label{font:600 11.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.ffield > span{display:flex;gap:6px;align-items:center}
.ffield input{width:86px}

/* ─── funnel, tag cloud, A/B ──────────────────────────────────────── */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.fstep{background:var(--well2);padding:16px 18px}
.fstep .fv{font:900 32px var(--ui);color:var(--t1);letter-spacing:-.02em;margin:6px 0 2px}
.fstep .dim{font-size:12.5px}
.tagcloud{display:flex;gap:8px;flex-wrap:wrap}
.tg{font-size:13px;color:var(--t2);padding:5px 10px;border:1px solid var(--line);background:var(--well)}
.tg b{color:var(--accent);margin-left:4px}
.abbox{display:grid;grid-template-columns:1fr 1fr 2fr;gap:18px;padding:20px;border:1px solid var(--line);
  background:var(--well)}
.abbox .fv{font:900 30px var(--ui);color:var(--t1);margin:5px 0 2px}
.abverdict p{margin:8px 0 0;font-size:14px;color:var(--t2);line-height:1.55}
@media(max-width:820px){.abbox{grid-template-columns:1fr}}

/* The Ⓐ stays brand red wherever it lands — the distributor boxes set a
   colour on the span itself, which was out-specifying .aa */
/* ─── ONE RULE, NOT A LIST ──────────────────────────────────────────────
   This used to be nine hand-added selectors, and it broke again the
   moment a tenth container styled its own descendant spans (.xopt, where
   `display:-webkit-box` on every span also stacked proⒶRCH-II into four
   lines). Any `.card span{color:…}` out-specifies a bare `.aa`, so the
   list could never be finished. The mark and its no-wrap wrapper now win
   outright, everywhere, and no new container can take them back. */
.aa, span.aa, .aaword .aa{color:var(--accent)!important}
.aaword{display:inline!important;white-space:nowrap!important;
  -webkit-line-clamp:none!important;overflow:visible!important}

/* ─── cross-reference: showing the working ───────────────────────────── */
.xread{font-size:11.5px;letter-spacing:.06em;color:var(--t3);margin:5px 0 2px;text-transform:uppercase}
.xsrc{font-size:12.5px;color:var(--t3);margin:2px 0 4px;font-style:italic}
.xspin{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--accent);letter-spacing:.18em;
  animation:xpulse 1.1s ease-in-out infinite}
@keyframes xpulse{0%,100%{opacity:.25}50%{opacity:1}}
.xopt em{display:block;font-style:normal;font-size:11.5px;color:var(--t3);margin-top:3px;line-height:1.45}
.xopt.strong{border-left:3px solid var(--ok)}
.xopt.fair{border-left:3px solid var(--warn)}
.xopt.weak{border-left:3px solid var(--line-mid)}


/* ─── WHO GETS WHAT ──────────────────────────────────────────────────── */
.viewonly{margin-top:16px;border-left-color:var(--warn)}
.accpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:26px}
.apick{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:13px 15px;
  background:var(--well);border:1px solid var(--line);color:var(--t2);cursor:pointer;transition:border-color .15s}
.apick:hover{border-color:var(--line-mid)}
.apick.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%, var(--well))}
.apick b{color:var(--t1);font:900 15px var(--ui)}
.apick .mono{font:500 11.5px "JetBrains Mono",ui-monospace,monospace;color:var(--t3);letter-spacing:.04em}
.apick .kind{font:600 10.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--line);color:var(--t3);margin-top:3px}
.apick .kind.distributor{color:var(--ok);border-color:var(--ok)}

.entgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.entrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--well2);padding:11px 15px}
.entrow.small{padding:8px 15px}
.entrow.dead{opacity:.45}
.entname b{display:block;color:var(--t1);font:700 14px var(--ui)}
.entname .dim{font-size:12px}
.triset{display:inline-flex;border:1px solid var(--line-mid)}
.tri{background:transparent;border:0;border-right:1px solid var(--line-mid);color:var(--t3);cursor:pointer;
  font:600 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px}
.tri:last-child{border-right:0}
.tri.sel.inherit{background:var(--line-mid);color:var(--t1)}
.tri.sel.on{background:var(--ok);color:#0F1114}
.tri.sel.off{background:var(--t4);color:#0F1114}
.triset.ro .tri{cursor:not-allowed;opacity:.55}
.buyerblk{margin:0 0 18px;border:1px solid var(--line)}
.buyerhead{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:11px 15px;background:var(--well)}
.buyerhead b{color:var(--t1);font:900 15px var(--ui)}
.buyerhead .mono{font-size:12px;color:var(--t3)}
.sw.ro{opacity:.5;cursor:not-allowed}


/* ─── SPECIAL PROJECT QUOTE ──────────────────────────────────────────────
   Part numbers and quantities only. There is no priced block to style,
   because there is no longer a priced block. */
.spqlines{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:12px 0 10px}
.spqlines > div{display:flex;justify-content:space-between;gap:14px;background:var(--well);padding:7px 12px;font-size:13.5px}
.spqlines .mono{color:var(--t1)}
.spqlines b{color:var(--t2);font-weight:600}
.spqnote{margin:0 0 14px;font-size:13px;color:var(--t2);line-height:1.6}
.spqnote b{color:var(--t1)}
.spqbtn{width:100%}
.spqok{margin:12px 0 0;font-size:13.5px;color:var(--ok-ink)}


/* ─── SHIPPING & FREIGHT, WRITTEN TO BE READ ─────────────────────────────
   Long measure kills readability; this page is prose, so it gets a
   reading column and real paragraph rhythm rather than the dense spec
   treatment the rest of the store uses. */
.terms{max-width:78ch;padding-block:34px 70px}
.terms h2{margin:10px 0 10px;font:900 40px/1.15 var(--ui);letter-spacing:-.02em;color:var(--t1)}
.terms .lede{margin:0 0 8px;font-size:18px;line-height:1.65;color:var(--t2);max-width:66ch}
.terms .tsec{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.terms .tsec h3{margin:0 0 12px;font:900 21px var(--ui);color:var(--t1);letter-spacing:-.01em}
.terms .tsec p{margin:0 0 14px;font-size:16px;line-height:1.75;color:var(--t2)}
.terms .tsec p:last-child{margin-bottom:0}
.terms .tsec b{color:var(--t1)}
.terms .tsec a{color:var(--t2);text-decoration:underline;text-underline-offset:2px}
.terms .tsec a:hover{color:var(--accent)}
.terms .astm{font-size:14px;color:var(--t3);margin-left:2px}
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
.tcard{padding:18px 20px;border:1px solid var(--line);background:var(--well)}
.tcard.ok{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%, var(--well))}
.tcard b{display:block;margin:8px 0 8px;font:900 22px var(--ui);color:var(--t1);letter-spacing:-.01em}
.tcard.ok b{color:var(--ok-ink)}
.tcard p{margin:0;font-size:14.5px;line-height:1.65;color:var(--t2)}
@media(max-width:760px){.tcards{grid-template-columns:1fr}.terms h2{font-size:31px}}

/* ─── THE STORE'S OWN NAME ─────────────────────────────────────────────
   James, 2026-09-14: "Shop on ALG Shop." … "make sure to make 'ALG Shop'
   the standard ALG red." One token, the brand red, no other treatment —
   it is a name inside a sentence, not a button.                       */
.brandmark { color: #F32740; }   /* the standard ALG red, literally — the hero
     sits on a dark photograph in BOTH themes, so it does not take the
     light-theme accent shift the rest of the page does. */

/* ─── ALG SHOP ACCESS ──────────────────────────────────────────────────
   The page that decides who gets in. It reads top to bottom as one
   decision: find them, look at what Zoho knows, set the tier, name the
   people. Nothing is a modal — an access decision you can see the whole
   of is an access decision you can audit.                            */
.custlist{display:grid;gap:6px;margin-top:14px;max-height:340px;overflow-y:auto;padding-right:4px}
.custrow{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;text-align:left;
  padding:11px 14px;background:var(--s2);border:1px solid var(--line);border-radius:8px;cursor:pointer;
  color:var(--t1);font:inherit}
.custrow:hover{border-color:var(--accent)}
.custrow.sel{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.custrow b{font:700 14.5px var(--ui)}
.custrow .mono{font-size:12px}

.shoppanel{border-left:3px solid var(--accent)}
.sphead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.spgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:18px}
.spfact{background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:14px}
.spfact b{display:block;font:700 15px var(--ui);color:var(--t1);margin:7px 0 6px}
.spfact .dim{font-size:13px;line-height:1.6;display:block}
.sprow{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:10px}
.sprow .field{margin:0;min-width:190px}
.sph4{font:900 19px var(--ui);color:var(--t1);letter-spacing:-.01em;margin:28px 0 6px}
.warnnote{border-left:3px solid var(--accent);background:var(--s2)}

.buyertbl{display:grid;gap:6px;margin-bottom:16px}
.buyerrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:11px 14px;background:var(--s2);border:1px solid var(--line);border-radius:8px}
.buyerrow.off{opacity:.55}
.buyerrow b{display:block;font:700 14.5px var(--ui);color:var(--t1)}
.buyerrow .mono{font-size:12px}
.buyeracts{display:flex;gap:12px;align-items:center}
.addbuyer{padding-top:6px;border-top:1px dashed var(--line)}

.regcard{background:var(--s2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:8px;padding:16px;margin-bottom:12px}
.reghead{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.reghead b{font:700 16px var(--ui);color:var(--t1);display:block}
.regnote{margin:8px 0;font-size:14.5px;line-height:1.6;color:var(--t2)}
.regfacts{display:flex;gap:18px;flex-wrap:wrap;font:600 11px "JetBrains Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:12px}
.regmatch{margin-top:6px;font-size:13px;color:var(--t2);display:flex;gap:6px;flex-wrap:wrap}
.regopt{background:var(--s3);border:1px solid var(--line);border-radius:6px;padding:5px 9px;
  font:600 12px var(--ui);color:var(--t1);cursor:pointer}
.regopt:hover{border-color:var(--accent);color:var(--accent-ink)}

.todolist{margin:0;padding-left:20px;color:var(--t2);font-size:14.5px;line-height:1.9}
@media(max-width:760px){.custrow{grid-template-columns:1fr}.sprow .field{min-width:100%}}

/* ─── THE THREE DISTRIBUTOR BOXES ──────────────────────────────────────
   James: "may be made wider to take up the extra black space… Each box
   should be the same size."

   1fr 1fr 1fr, not auto — equal columns are what makes them the same
   size, and stretch is what makes them the same HEIGHT whatever the copy
   does. The old `.four.three` sized to content, which is why the middle
   one sat short and the block left black space on the right.        */
.distcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.distcard{display:flex;flex-direction:column;background:var(--s2);border:1px solid var(--line);
  border-radius:10px;padding:18px 18px 20px;min-width:0}
.distcard > b{font:900 17px var(--ui);color:var(--t1);letter-spacing:-.01em;margin-bottom:13px;display:block}
/* A bolded phrase inside the body stays body-sized and inline — it is
   emphasis, not a second heading. Direct-child selector above is what
   keeps the two apart. */
.distcard .dctext b{font:inherit;font-weight:800;color:var(--t1);display:inline}
/* ─── ICON BESIDE THE COPY, NOT INSIDE IT ─────────────────────────────
   It used to sit inline ahead of the first word, which made it read as
   punctuation and let the copy wrap around it at a different indent in
   every card. Two columns instead: the icon holds its own, and every
   line of copy starts on the same left edge in all three cards.     */
.dcrow{display:flex;gap:13px;align-items:flex-start}
/* THREE LINES, RESERVED. min-height holds the box open at three lines
   even when the copy runs to two, so the three cards are the same
   height for the same reason rather than by luck. Deliberately NOT
   line-clamp: copy that outgrows the space should be visibly wrong,
   not silently cut off halfway through a sentence.                 */
.dctext{font-size:14.5px;line-height:1.6;color:var(--t2);display:block;
  min-height:4.8em}   /* 3 × 1.6 */
/* `.distcard span` once matched every descendant span, including the one
   aa() wraps around the Ⓐ — the glyph became a block and broke
   "ⒶSCEND" across three lines however hard nowrap tried. The class
   selector keeps that from coming back. */
.dico{width:34px;height:34px;margin-top:2px;color:var(--accent);flex:none;stroke-width:1.5}
/* Three across for as long as three across still reads. Below this the
   copy cannot make three lines at any sensible size, so they stack. */
@media(max-width:880px){.distcards{grid-template-columns:1fr}}

/* ─── THE FOUR DOORS ───────────────────────────────────────────────────
   James: "I need 'Product Lines →' to be moved down to the same Y-axis
   as the other CTAs."  It sat high because its paragraph is one line
   shorter than the others. margin-top:auto pushes every CTA to the foot
   of its own card, so they land on one baseline no matter how long the
   copy above them runs — and stay there when the copy changes.      */
.doors > div{display:flex;flex-direction:column}
.doorcta{align-self:flex-start;margin-top:auto;padding-top:14px}

/* One unbreakable word around the Ⓐ — see aa() in app.js. */
.aaword{white-space:nowrap}

/* ─── MY ORDERS ────────────────────────────────────────────────────────
   An order is five states, not one. The pipe shows all five at once and
   fills each by QUANTITY, so a part shipment is a half-full dot rather
   than a word that rounds it to done or not-started.                 */
.ogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}
.ocard{background:var(--s2);border:1px solid var(--line);border-radius:10px;padding:18px}
.ohead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.ohead b{font:700 16px "JetBrains Mono",ui-monospace,monospace;color:var(--t1);letter-spacing:-.01em}
.ohead .mono.dim{font-size:12px;margin-left:10px}

.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:18px}
.pstep{display:flex;flex-direction:column;gap:6px}
.pstep i{display:block;height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
.pstep i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--f,0);background:var(--t3)}
.pstep.part i::after{background:#E0A33C}
.pstep.on i::after{background:#3FB960}
.pstep b{font:600 10px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3)}
.pstep.on b{color:var(--t2)}
.pstep.part b{color:#E0A33C}

.ofacts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ofacts b{display:block;font:700 14px var(--ui);color:var(--t1);margin-top:4px}
.oship{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:14px}
.oship b{display:block;font:700 14px var(--ui);color:var(--t1);margin-top:4px}
.oship .dim{display:block;font-size:12.5px;margin-top:3px;line-height:1.5}
.trk{display:inline-block;margin-top:4px;font-size:13.5px;color:var(--t1);text-decoration:underline}
.trk:hover{color:var(--accent-ink)}
.oacts{display:flex;gap:14px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tbl tr.late td{background:color-mix(in srgb, var(--accent) 7%, transparent)}
@media(max-width:620px){.ogrid{grid-template-columns:1fr}.ofacts{grid-template-columns:1fr 1fr}.oship{grid-template-columns:1fr}}

/* ─── BUILD STATE, SAID BEFORE ANY OPINION ─────────────────────────────
   The recommendation chips sit lower on the page for a reason: the first
   thing a person needs off this screen is what EXISTS, not what I think
   of it. Two plain sentences, no colour coding to decode. */
.statebar{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
  margin:0 0 18px;padding:16px 18px;background:var(--s2);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:8px}
.statebar b{display:block;font:900 18px var(--ui);color:var(--t1);letter-spacing:-.01em;margin-bottom:5px}
.statebar span{font-size:14px;line-height:1.6;color:var(--t2)}

/* ─── A BUTTON SITTING ON A PHOTOGRAPH ─────────────────────────────────
   "Shop By Building" was a .btn2 — transparent, --t1 text, --line-hard
   border. Those tokens follow the THEME, and in light theme they resolve
   to near-black on a hero that is dark in both themes. The button was
   there the whole time; it was black on black until hover turned it red.

   The hero photo is its own surface and does not take the page's theme,
   so a control on it gets its own colours, fixed in both themes, and
   enough contrast to be a button before anyone points at it.        */
.btn2.onphoto{color:#fff;border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.07);backdrop-filter:blur(2px)}
.btn2.onphoto:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.16)}
.btn2.onphoto:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ─── THE STOCK ANSWER ON A CROSS-REFERENCE LINE ────────────────────────
   Two tiers and they must not look alike. A drop-in reads like the rest
   of the "in stock instead" blocks. A CORRELATED-BUT-NOT-EQUIVALENT one
   is amber and leads with the difference, because a buyer who skims it
   as a substitute gets a fixture back on a pallet. */
.alts.xship{margin-top:12px}
.alts.nearby{border-color:var(--warn);background:color-mix(in srgb, var(--warn) 8%, transparent)}
.alts.nearby .altshead{border-bottom-color:var(--warn)}
.alts.nearby .altshead b{color:var(--warn-ink)}
.alts.nearby .altshead span{color:var(--t2)}

/* ═══ THE WEEK · THE STORE'S OWN REPORT ═════════════════════════════════
   Dense and scannable. A weekly report is read standing up with a coffee,
   so the number is always bigger than its label and the verdict is always
   in words. Nothing here uses colour alone to carry meaning — the arrow
   and the word say it too, for print and for anyone who cannot see the
   difference between the green and the red. */
.rwrap{padding-block:8px 40px}
.rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.rhead h2{margin:8px 0 4px;font-size:30px;letter-spacing:-.01em}
.rpick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rpick label{font:500 11px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t3);display:flex;gap:6px;align-items:center}
.rpick input{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);
  background:var(--well2);color:var(--t1);border-radius:0}

.rtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-bottom:26px}
@media (max-width:1100px){.rtiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.rtiles{grid-template-columns:1fr}}

/* ⚠ SAMPLE DATA MUST BE IMPOSSIBLE TO MISTAKE FOR REAL. The store has no
   live distributor traffic yet, so the report is seeded with a made-up
   fortnight to show James the shape of it. A seeded number read as a
   real one is the worst failure this page could have, so the banner is
   loud, it is at the top, and it carries the button that clears it. */
.rsample{border:2px solid var(--warn);background:color-mix(in srgb, var(--warn) 14%, transparent);
  padding:14px 16px;margin-bottom:20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.rsample b{color:var(--t1);font-size:15px}
.rsample span{font-size:13.5px;color:var(--t2);flex:1;min-width:220px;line-height:1.55}
.rtile{background:var(--well2);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.rlab{font:500 10.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t3)}
.rval{font:800 27px var(--ui);letter-spacing:-.02em;color:var(--t1);line-height:1.1}
.rsub{font-size:12px;color:var(--t3);line-height:1.5}
.rsub em{font-style:normal;color:var(--t4)}
.d{font:600 11.5px var(--ui);margin-right:6px}
.d.up{color:var(--ok-ink)} .d.down{color:var(--accent)}
.d.flat,.d.new{color:var(--t4)}

.rsec{margin:0 0 30px}
.rsec h3{font:700 18px var(--ui);margin:0 0 6px;color:var(--t1)}
.rnote{font-size:13.5px;color:var(--t3);margin:0 0 14px;max-width:78ch;line-height:1.6}
.rempty{font-size:13.5px;color:var(--t4);margin:0;padding:14px 16px;background:var(--well2);border:1px solid var(--line)}
.rsmall{font-size:11.5px;color:var(--t3);line-height:1.45;margin-top:2px}
.rfoot{font-size:12px;color:var(--t4);border-top:1px solid var(--line);padding-top:14px;margin-top:30px;line-height:1.6}

/* the funnel */
.funnel{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.fstep{background:var(--well2);padding:10px 14px}
.fstep.worst{background:color-mix(in srgb, var(--warn) 10%, var(--well2))}
.fbar{height:6px;background:var(--line-mid,var(--line));margin-bottom:7px}
.fbar span{display:block;height:100%;background:var(--accent)}
.fstep.worst .fbar span{background:var(--warn-ink)}
.fmeta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fmeta b{font:800 19px var(--ui);color:var(--t1);min-width:54px}
.flab{font-size:13.5px;color:var(--t1);flex:1;min-width:150px}
.fkeep{font:500 11.5px "JetBrains Mono",ui-monospace,monospace;color:var(--t3)}
.rcall{margin-top:12px;padding:12px 14px;border-left:3px solid var(--warn);
  background:color-mix(in srgb, var(--warn) 7%, transparent);font-size:13.5px;line-height:1.6;color:var(--t2)}
.rcall b{color:var(--t1)}

/* day bars */
.rdays{display:flex;gap:6px;align-items:flex-end;border:1px solid var(--line);
  background:var(--well2);padding:14px;overflow-x:auto}
.rday{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px;flex:1}
.rdbar{height:70px;width:100%;display:flex;align-items:flex-end;background:transparent}
.rdbar span{display:block;width:100%;background:var(--accent);min-height:2px}
.rday b{font:700 13px var(--ui);color:var(--t1)}
.rday span:last-child{font:500 10px "JetBrains Mono",ui-monospace,monospace;color:var(--t3)}

/* tables */
.rtblwrap{overflow-x:auto;border:1px solid var(--line)}
.rtbl{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--well2)}
.rtbl th{text-align:left;font:500 10.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--t3);padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.rtbl td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--t2);vertical-align:top}
.rtbl tr:last-child td{border-bottom:0}
.rtbl td.num,.rtbl th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rtbl td.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;color:var(--t1)}
.rtbl td b{color:var(--t1)}
.rtbl tr.c-none{opacity:.72}

.pill{display:inline-block;font:600 10.5px var(--ui);letter-spacing:.04em;padding:2px 7px;
  border:1px solid var(--line);color:var(--t3);text-transform:uppercase}
.pill.live{border-color:var(--ok);color:var(--ok-ink)}
.conf{display:inline-block;font:700 11px var(--ui);letter-spacing:.03em;padding:2px 7px;text-transform:uppercase}
.conf.none{background:var(--line);color:var(--t3)}
.conf.weak{background:color-mix(in srgb, var(--warn) 22%, transparent);color:var(--warn-ink)}
.conf.fair{background:color-mix(in srgb, var(--ok) 18%, transparent);color:var(--ok-ink)}
.verdict{max-width:34ch}

/* levers + notes */
.rlevers{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.rlev{background:var(--well2);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.rlev b{font:800 24px var(--ui);color:var(--t1);letter-spacing:-.01em}
.rnoteadd{display:flex;gap:8px;margin-bottom:12px}
.rnoteadd input{flex:1;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--line);
  background:var(--well2);color:var(--t1)}
.rnotes{list-style:none;margin:0;padding:0;border:1px solid var(--line);background:var(--well2)}
.rnotes li{padding:9px 14px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--t2)}
.rnotes li:last-child{border-bottom:0}
.rnotes b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--t3);margin-right:8px}
.rnotes em{font-style:normal;color:var(--t4);font-size:12px}

@media (max-width:640px){
  .rhead h2{font-size:24px}
  .rval{font-size:23px}
  .fmeta b{min-width:44px;font-size:17px}
  .verdict{max-width:none}
}

/* ---------- sign-in page + walkthrough ----------
   Form on the left, the four-step walkthrough on the right; stacked (form
   first) on narrow screens. The mockups are pictures of screens, so their
   type runs 8–16px: the SHAPE has to read, not every word. Square corners
   and bar dots, like the rest of the store. */
.si-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);max-width:1180px;margin:0 auto;align-items:start}
@media(max-width:900px){.si-grid{grid-template-columns:1fr}}
.siwt{margin:12px 0 0;border:1px solid var(--line);background:var(--surface)}
.siwt-stage{height:328px;padding:18px;background:var(--well2);display:grid}
.siwt-step{display:grid;min-height:0}
.siwt-step[hidden]{display:none}
.siwt-frame{border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0;overflow:hidden;animation:siwtIn .45s ease-out both}
@keyframes siwtIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.siwt-chrome{display:flex;align-items:center;gap:5px;padding:8px 10px;background:var(--well);border-bottom:1px solid var(--line);flex-shrink:0}
.siwt-light{width:8px;height:8px;border-radius:50%;background:var(--line-mid);display:block;flex-shrink:0}
.siwt-url{margin-left:8px;flex:1;font:500 10.5px/1.5 "JetBrains Mono",ui-monospace,monospace;color:var(--t3);background:var(--surface);border:1px solid var(--line);padding:2px 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.siwt-url.is-typing{color:var(--t1)}
.siwt-caret{display:inline-block;width:1px;height:1.05em;vertical-align:-2px;background:var(--accent);margin-left:1px;animation:siwtBlink 1s steps(2) infinite}
@keyframes siwtBlink{50%{opacity:0}}
.siwt-body{flex:1;min-height:0;display:grid;place-items:center;padding:14px 16px;overflow:hidden}
.siwt-body--top{place-items:start stretch}
.siwt-body--empty{background:var(--page)}
.siwt-login{width:100%;max-width:270px;display:flex;flex-direction:column;gap:6px}
.siwt-eyebrow,.siwt-label,.siwt-inbox,.siwt-chip,.siwt-price{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;text-transform:uppercase;line-height:1}
.siwt-eyebrow{font-size:8.5px;letter-spacing:.13em;color:var(--t3)}
.siwt-h{font:900 17px/1.1 var(--ui);letter-spacing:-.02em;color:var(--t1);margin-bottom:6px}
.siwt-label{font-size:8px;letter-spacing:.12em;color:var(--t3)}
.siwt-input{border:1px solid var(--accent);background:var(--well);padding:0 9px;height:29px;font-size:11.5px;color:var(--t1);display:flex;align-items:center;white-space:nowrap;overflow:hidden}
.siwt-btn{display:block;background:var(--accent);color:var(--on-solid);font:700 11px/1 var(--ui);text-align:center;padding:10px 12px;transition:transform .2s,box-shadow .3s}
/* the press is what makes a frame read as an ACTION rather than a picture */
.siwt-btn.is-pressed{transform:scale(.97);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 24%,transparent)}
.siwt-chrome--mail{padding:9px 12px}
.siwt-inbox{font-size:9px;letter-spacing:.12em;color:var(--t3)}
.siwt-mail{width:100%}
.siwt-mailrow{display:flex;gap:8px;align-items:baseline;font-size:10.5px;color:var(--t2);padding:0 0 8px;border-bottom:1px solid var(--line);margin-bottom:12px;white-space:nowrap;overflow:hidden}
.siwt-mailrow b{color:var(--t1)}
.siwt-mailrow em{margin-left:auto;font-style:normal;color:var(--t4-ink);font-size:9.5px}
.siwt-mailcard{max-width:290px;margin:0 auto;border:1px solid var(--line);animation:siwtIn .45s ease-out .35s both}
.siwt-mailhead{background:var(--mail-head);padding:10px 12px}
.siwt-mailhead img{height:17px;width:auto}
.siwt-mailbar{height:3px;background:var(--accent)}
.siwt-mailbody{background:var(--mail-paper);padding:12px 12px 14px}
.siwt-mailbody .siwt-h{display:block;color:var(--mail-ink);font-size:14px;margin-bottom:4px}
.siwt-mailbody p{margin:0 0 10px;font-size:9.5px;line-height:1.5;color:var(--mail-dim)}
.siwt-btn--mail{display:inline-block;padding:9px 14px}
.siwt-shop{width:100%;display:flex;flex-direction:column;gap:5px}
.siwt-shophead{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.siwt-logo{height:18px;width:auto}
.siwt-logo.l{display:var(--logo-l)}
.siwt-logo.d{display:var(--logo-d)}
.siwt-chip{font-size:8.5px;letter-spacing:.12em;color:var(--ok-ink);border:1px solid currentColor;padding:4px 6px}
.siwt-welcome{font:900 16px/1.1 var(--ui);color:var(--t1);letter-spacing:-.02em}
.siwt-sub{font-size:10px;color:var(--t3)}
.siwt-rows{display:grid;gap:5px;margin-top:3px}
.siwt-row{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);padding:5px 9px;background:var(--surface);animation:siwtIn .4s ease-out both}
.siwt-row:nth-child(1){animation-delay:.45s}.siwt-row:nth-child(2){animation-delay:.65s}.siwt-row:nth-child(3){animation-delay:.85s}
.siwt-thumb{width:26px;height:26px;background:var(--well)}
.siwt-lines{display:grid;gap:5px}
.siwt-bar{display:block;height:5px;background:var(--line-mid);opacity:.55}
.siwt-price{display:grid;gap:4px;justify-items:end;font-size:8px;letter-spacing:.1em;color:var(--accent-ink)}
.siwt-price i{display:block;width:38px;height:7px;background:var(--accent);opacity:.3}
.siwt-cap{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line)}
.siwt-num{width:24px;height:24px;background:var(--accent);color:var(--on-solid);display:grid;place-items:center;font:700 12px/1 "JetBrains Mono",ui-monospace,monospace;flex-shrink:0}
.siwt-title{flex:1;font:700 15px/1.3 var(--ui);color:var(--t1)}
.siwt-dots{display:inline-flex;gap:6px}
.siwt-dot{position:relative;border:0;padding:0;width:22px;height:3px;background:var(--line-mid);cursor:pointer;transition:background .3s}
.siwt-dot::after{content:"";position:absolute;inset:-10px -3px}
.siwt-dot.is-on{background:var(--accent)}
.siwt-dot:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:520px){.siwt-stage{height:312px;padding:12px}.siwt-title{font-size:14px}}
@media(prefers-reduced-motion:reduce){.siwt-frame,.siwt-row,.siwt-mailcard,.siwt-caret{animation:none}}