/* ===========================================================================
   Elium Lighting — design system
   Palette and type per Elium Brand Guidelines (2024):
     01 SEASALT    #F8F8F8
     02 PLATINUM   #D5D6D8
     03 TAUPE GRAY #969699
     04 JET        #333333
     05 VERMILION  #E03E37
   Primary type: Axiforma (Light / Book / Regular / Semi-Bold)
   Secondary type: Lato (Light / Regular / Bold)
   Axiforma is a licensed font — drop the webfont files in assets/fonts/ and
   the @font-face block below picks it up. Poppins is the fallback until then.
   =========================================================================== */

:root{
  /* Brand */
  --seasalt:#F8F8F8;
  --platinum:#D5D6D8;
  --taupe:#969699;
  --jet:#333333;
  --vermilion:#E03E37;

  /* Light theme (default) */
  --bg:var(--seasalt);
  --bg-2:#EDEEEF;          /* recessed band — seasalt toward platinum */
  --surface:#FFFFFF;
  --surface-2:#F3F4F5;

  /* Text tiers. Each one clears WCAG AA (4.5:1) against all four surfaces
     above — checked with a contrast calculator, not by eye. The old --fg-3
     (#6E6F72) came to 4.32:1 on --bg-2 and the old --fg-4 (brand taupe,
     #969699) only 2.54:1, which axe-core flagged as a serious violation on
     every page. Taupe is still the brand colour and is still used for rules
     and decoration; it is just no longer used to set type. */
  --fg:var(--jet);         /* 10.9:1 worst case */
  --fg-2:#4F5052;          /*  6.9:1 */
  --fg-3:#5E5E61;          /*  5.6:1 */
  --fg-4:#6C6C6F;          /*  4.5:1 — the lightest tier that still passes */

  --line:rgba(51,51,51,.14);
  --line-2:rgba(51,51,51,.30);

  --accent:var(--vermilion);
  --accent-soft:rgba(224,62,55,.10);
  /* Brand vermilion is 3.68:1 on the lightest surface — fine for a button
     fill or a 2px rule, short of AA for small text. Type set in red uses this
     slightly darker mix instead; the two are hard to tell apart side by side. */
  --accent-text:#C9312B;   /*  4.6:1 */

  --btn-bg:var(--jet);
  --btn-fg:var(--seasalt);
  --btn-bg-h:#1F1F1F;

  --shadow-s:0 1px 2px rgba(51,51,51,.05), 0 6px 16px -8px rgba(51,51,51,.12);
  --shadow-m:0 2px 4px rgba(51,51,51,.05), 0 18px 40px -18px rgba(51,51,51,.22);

  /* Metrics */
  --max:1320px;
  --gut:clamp(20px,4vw,60px);
  --nav-h:96px;
  --subnav-h:46px;
  --pnbar-h:46px;
  --r:3px;
  --r-lg:8px;

  --f-display:'Axiforma','Poppins',system-ui,-apple-system,sans-serif;
  --f-body:'Lato',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg:var(--jet);
  --bg-2:#3D3D3D;
  --surface:#3A3A3A;
  --surface-2:#454545;

  --fg:var(--seasalt);
  --fg-2:#D2D3D4;
  --fg-3:#AFAFB2;
  --fg-4:var(--platinum);

  --line:rgba(248,248,248,.16);
  --line-2:rgba(248,248,248,.32);

  --accent:var(--vermilion);
  --accent-soft:rgba(224,62,55,.18);

  --btn-bg:var(--seasalt);
  --btn-fg:var(--jet);
  --btn-bg-h:#FFFFFF;

  --shadow-s:none;
  --shadow-m:0 20px 50px -24px rgba(0,0,0,.6);

  background:var(--bg);
  color:var(--fg);
}

/* Vermilion does not carry enough contrast on Jet — labels go platinum there
   and red is kept for marks, rules and fills. */
[data-theme="dark"] .eyebrow{color:var(--platinum)}
[data-theme="dark"] .eyebrow::before{background:var(--vermilion);opacity:1}
[data-theme="dark"] .feat__n,
[data-theme="dark"] .pnb__step{color:var(--platinum)}

/* Axiforma — supply the licensed webfonts to activate.
@font-face{font-family:'Axiforma';src:url('../fonts/Axiforma-Book.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Axiforma';src:url('../fonts/Axiforma-Regular.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Axiforma';src:url('../fonts/Axiforma-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Axiforma';src:url('../fonts/Axiforma-Light.woff2') format('woff2');font-weight:300;font-display:swap}
*/

*,*::before,*::after{box-sizing:border-box}

/* The UA rule for [hidden] is display:none, but any author `display` (e.g.
   .pcard{display:flex}) outranks it — filtered-out cards stayed painted.
   Filtering relies on the hidden attribute, so make it authoritative. */
[hidden]{display:none !important}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + 20px)}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;              /* NOT hidden — `hidden` here breaks sticky */
}

img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Links sitting inside a run of text must be distinguishable without relying
   on colour (WCAG 1.4.1), so they are underlined; navigation links, cards and
   buttons are structurally obvious and stay clean. Colour is --accent-text
   rather than brand vermilion because 13px red on seasalt is only 4.0:1. */
p a:not(.btn):not(.pill):not(.chip),
li:not(.mega__list li):not(.ftr__list li) > a:not(.btn):not(.pill):not(.chip):not(.srch__hit),
.lede a:not(.btn),
.muted a:not(.btn):not(.pill){
  color:var(--accent-text);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
p a:not(.btn):hover,.lede a:not(.btn):hover,.muted a:not(.btn):not(.pill):hover{color:var(--fg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--vermilion);color:#FFF}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* --- Layout primitives --------------------------------------------------- */

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-nar{max-width:900px;margin-inline:auto;padding-inline:var(--gut)}
/* Section rhythm. Was clamp(64px,9vw,132px), which put ~260px of empty space
   between every pair of sections at desktop width and pushed the product pages
   to nearly nine screens. Tightened so more of the page is content without
   the layout feeling crammed. */
.section{padding-block:clamp(40px,5vw,76px)}
.section--tight{padding-block:clamp(32px,3.6vw,54px)}
.bleed-line{border-top:1px solid var(--line)}
.panel{background:var(--bg-2)}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4,h5{
  font-family:var(--f-display);font-weight:600;letter-spacing:-.022em;
  line-height:1.08;margin:0;text-wrap:balance;color:var(--fg);
}

.d1{font-size:clamp(2.4rem,5.6vw,4.6rem);letter-spacing:-.032em;line-height:1.04}
.d2{font-size:clamp(1.85rem,3.8vw,3rem);letter-spacing:-.028em}
.d3{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.024em}
.d4{font-size:clamp(1.1rem,1.6vw,1.35rem);letter-spacing:-.02em}

.eyebrow{
  font-family:var(--f-body);font-size:.6875rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 18px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.5;flex:none}
.eyebrow--plain::before{display:none}

.lede{font-size:clamp(1.02rem,1.3vw,1.185rem);color:var(--fg-2);line-height:1.68;max-width:62ch;text-wrap:pretty}
.muted{color:var(--fg-3)}
.small{font-size:.8125rem;line-height:1.6}

/* --- Buttons ------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border:1px solid var(--line-2);border-radius:var(--r);
  font-size:.8125rem;font-weight:600;letter-spacing:.055em;text-transform:uppercase;
  color:var(--fg);background:transparent;
  transition:background .24s var(--ease),border-color .24s var(--ease),color .24s var(--ease),transform .2s var(--ease),box-shadow .24s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
@media(max-width:560px){
  .btn{white-space:normal;text-align:center;justify-content:center;word-break:break-word}
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg);box-shadow:var(--shadow-s)}
.btn--primary:hover{background:var(--btn-bg-h);border-color:var(--btn-bg-h);color:var(--btn-fg)}
.btn--ghost{border-color:transparent;padding-inline:0;color:var(--accent-text)}
.btn--ghost:hover{background:none;border-color:transparent;color:var(--fg)}
.btn--sm{padding:9px 15px;font-size:.6875rem}
.btn--block{display:flex;justify-content:center;width:100%}
.btn .ar{transition:transform .24s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}

/* --- Header -------------------------------------------------------------- */

.hdr{
  position:sticky;top:0;z-index:120;
  background:rgba(248,248,248,.88);
  backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--line);
}
.hdr__bar{
  height:var(--nav-h);display:flex;align-items:center;gap:clamp(18px,3vw,46px);
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
}
/* flex:none + an explicit pixel width (set from the SVG viewBox in shell.js)
   stop the header row shrinking the lockup while its height is held. */
.hdr__logo{flex:none}
.logo-mark{
  display:flex;flex-direction:column;align-items:stretch;width:max-content;
}
.logo-mark svg.logo-lockup{
  display:block;flex-shrink:0;overflow:hidden;
  max-width:none;aspect-ratio:294/158;
}
.logo-rule{
  display:block;height:1px;background:var(--line-2);margin:5px 0 4px;
}
.logo-tagline{
  font-family:var(--f-display);font-size:8px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
  line-height:1;text-align:center;white-space:nowrap;
  text-rendering:geometricPrecision;
}
.logo-tagline sup{font-size:.65em;line-height:0;vertical-align:.7em;margin-left:.04em}
.hdr__nav{display:flex;align-items:center;gap:clamp(12px,2vw,32px);height:100%;flex:1}
.hdr__link{
  display:flex;align-items:center;gap:7px;height:100%;
  font-size:.8125rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fg-3);transition:color .2s var(--ease);position:relative;
}
.hdr__link:hover,.hdr__link[aria-expanded="true"],.hdr__link.is-active{color:var(--fg)}
.hdr__link.is-active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.hdr__link svg{opacity:.55;transition:transform .24s var(--ease)}
.hdr__link[aria-expanded="true"] svg{transform:rotate(180deg)}
.hdr__cta{display:flex;align-items:center;gap:14px;margin-left:auto}

.burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;margin-left:auto}
.burger span{display:block;width:20px;height:1.5px;background:var(--fg);position:relative;transition:.24s var(--ease)}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:1.5px;background:var(--fg);transition:.24s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0;transform:rotate(45deg)}
.burger.is-open span::after{top:0;transform:rotate(-45deg)}

/* --- Mega menu ----------------------------------------------------------- */

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 28px 48px -26px rgba(51,51,51,.30);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega__inner{
  max-width:var(--max);margin-inline:auto;padding:28px var(--gut) 26px;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;overscroll-behavior:contain;
}

.mega__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.mega__col h4{
  font-family:var(--f-body);font-size:.625rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-4);margin:0 0 12px;
}
.mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mega__list a{
  display:block;padding:6px 0;font-size:.875rem;font-weight:400;color:var(--fg-2);
  transition:color .16s var(--ease);
}
.mega__list a:hover{color:var(--vermilion)}
.mega__list .note{display:none}
.mega__list .ap{
  display:inline-block;min-width:26px;font-family:var(--f-display);font-weight:700;
  font-size:.8125rem;color:var(--accent);
}

/* full product list column */
.mega__all{columns:2;column-gap:22px}
.mega__all a{
  display:block;padding:5px 8px;margin-inline:-8px;border-radius:var(--r);
  font-size:.8125rem;color:var(--fg-2);break-inside:avoid;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.mega__all a:hover{background:var(--bg-2);color:var(--fg)}

/* bottom strip: beam angles + trim styles */
.mega__strip{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:34px;
}
.mega__strip h4{
  font-family:var(--f-body);font-size:.625rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-4);margin:0 0 14px;
}
.picker{display:flex;gap:10px;flex-wrap:wrap}
.picker a{
  display:flex;flex-direction:column;gap:2px;min-width:96px;
  padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);transition:.18s var(--ease);
}
.picker a:hover{border-color:var(--accent);background:var(--accent-soft)}
.picker .k{font-family:var(--f-display);font-size:1rem;font-weight:700;letter-spacing:-.02em}
.picker .v{font-size:.6875rem;color:var(--fg-4);letter-spacing:.04em;text-transform:uppercase}

/* --- Mobile nav ---------------------------------------------------------- */

.mnav{
  position:fixed;inset:var(--nav-h) 0 0;z-index:110;background:var(--bg);
  overflow-y:auto;overscroll-behavior:contain;padding:8px 0 60px;
  opacity:0;visibility:hidden;transform:translateX(18px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
}
.mnav.is-open{opacity:1;visibility:visible;transform:none}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{
  list-style:none;padding:17px var(--gut);display:flex;justify-content:space-between;
  align-items:center;font-family:var(--f-display);font-size:1.05rem;font-weight:600;cursor:pointer;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:'+';color:var(--accent);font-size:1.15rem}
.mnav details[open] summary::after{content:'–'}
.mnav__sub{padding:0 var(--gut) 18px}
.mnav__sub h5{
  font-family:var(--f-body);font-size:.625rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-4);margin:14px 0 8px;
}
.mnav__sub a{display:block;padding:9px 0;font-size:.9rem;color:var(--fg-2);border-bottom:1px solid var(--line)}
.mnav__chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 0 6px}
.mnav__chips a{border:1px solid var(--line);border-radius:100px;padding:7px 13px;font-size:.8125rem;color:var(--fg-2)}
.mnav__flat{padding:17px var(--gut);display:block;font-family:var(--f-display);font-size:1.05rem;font-weight:600;border-bottom:1px solid var(--line)}
.mnav__foot{padding:26px var(--gut)}

/* --- Hero ---------------------------------------------------------------- */

.hero--video{min-height:min(80vh,760px)}
/* Landscape 16:9 source in a wide banner. Slight top bias keeps the housing
   and ceiling line in frame when the banner is taller than 16:9; a dead centre
   crop clips the fixture. Overrides the 16:9 iframe sizing below. */
.hero--video .hero__media video{
  position:absolute;inset:0;top:0;left:0;transform:none;
  width:100%;height:100%;min-width:0;min-height:0;
  object-fit:cover;object-position:center 25%;
}
@media(max-width:700px){
  .hero--video{min-height:min(72vh,620px)}
  /* Tall phone crop of a landscape file is left/right; keep the fixture centred. */
  .hero--video .hero__media video{object-position:center center}
}
/* Someone who has asked the OS for less motion gets the poster frame. The
   video element still renders it, so nothing needs to change in the markup. */
@media(prefers-reduced-motion:reduce){
  .hero--video .hero__media video{display:none}
  .hero--video .hero__media{
    background:#0f0f0f url("../img/hero-poster.jpg") center 25%/cover no-repeat;
  }
}
.hero{
  position:relative;min-height:min(84vh,820px);display:flex;align-items:flex-end;overflow:hidden;
  background:radial-gradient(56% 62% at 66% 24%,rgba(224,62,55,.26) 0%,transparent 62%),
             linear-gradient(180deg,#3D3D3D 0%,#2B2B2B 84%);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media iframe,.hero__media video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;border:0;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(43,43,43,.22) 0%,rgba(43,43,43,0) 40%,rgba(43,43,43,.55) 88%,#333333 100%);
}
.hero--video .hero__scrim{
  background:linear-gradient(180deg,rgba(43,43,43,.10) 0%,rgba(43,43,43,0) 45%,rgba(43,43,43,.45) 90%,#333333 100%);
}
.hero__body{position:relative;z-index:2;width:100%;padding-block:clamp(46px,7vw,86px)}
.hero__title{max-width:17ch}
.hero__sub{margin-top:24px;max-width:52ch}
.hero__actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px}

.hero-page{
  position:relative;padding-block:clamp(26px,3vw,44px) clamp(20px,2.4vw,32px);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}

/* --- Stat band ----------------------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;margin:0}
.stats > div{padding:24px 26px 24px 0;border-right:1px solid var(--line)}
.stats > div + div{padding-left:26px}
.stats > div:last-child{border-right:0}
.stats dt{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);margin-bottom:9px}
.stats dd{margin:0;font-family:var(--f-display);font-size:clamp(1.5rem,2.4vw,2.15rem);font-weight:600;letter-spacing:-.032em}
.stats dd span{font-size:.85rem;color:var(--fg-3);font-family:var(--f-body);font-weight:400;letter-spacing:0;margin-left:5px}

/* --- Section head -------------------------------------------------------- */

.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,5vw,72px);align-items:end;margin-bottom:clamp(34px,4.5vw,58px)}
.shead__r{padding-bottom:6px}
@media(max-width:860px){.shead{grid-template-columns:1fr;gap:18px}}

/* --- Cards --------------------------------------------------------------- */

.grid{display:grid;gap:clamp(28px,3vw,44px) clamp(24px,2.6vw,40px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.fcard{
  position:relative;background:transparent;border:0;border-top:1px solid var(--line);
  padding:22px 0 0;display:flex;flex-direction:column;gap:12px;
  transition:border-color .26s var(--ease);
}
a.fcard:hover{border-top-color:var(--jet)}
a.fcard:hover h3{color:var(--vermilion)}
.fcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.fcard__kicker{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4)}
.fcard h3{font-size:1.2rem;transition:color .2s var(--ease)}
.fcard p{margin:0;font-size:.875rem;color:var(--fg-3);line-height:1.6;max-width:38ch}
.fcard__sizes{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;padding-top:14px}

/* image-led family card */
.fcard__fig{
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border-radius:var(--r);
  background:var(--bg-2);
  margin-bottom:4px;
}
.fcard__fig img{width:58%;height:auto;max-height:76%;object-fit:contain;transition:transform .5s var(--ease)}
a.fcard:hover .fcard__fig img{transform:scale(1.04)}
.fcard--img{border-top:0;padding-top:0;gap:14px}

/* Trademark mark on coined names (Downsizer). Sized off the parent so it scales
   with a 3.6rem display heading and a .75rem chip alike, and given
   line-height:0 so a superscript never adds leading to the line it sits on. */
.tm{
  font-size:.42em;line-height:0;vertical-align:.85em;
  letter-spacing:0;font-weight:inherit;margin-left:.06em;
}

.chip{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:5px 10px;border:1px solid var(--line);border-radius:100px;
  font-family:var(--f-display);font-size:.75rem;font-weight:500;color:var(--fg-3);
  background:transparent;transition:.2s var(--ease);
}
a.chip:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chip--new{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}
.chip--flag{
  border:0;background:transparent;color:var(--vermilion);
  text-transform:uppercase;letter-spacing:.14em;font-size:.625rem;padding:0;min-width:0;font-weight:700;
}

/* --- Feature tiles ------------------------------------------------------- */

.feat{
  background:transparent;border:0;border-top:1px solid var(--line);
  padding:20px 0 0;display:flex;flex-direction:column;gap:9px;
}
/* The graphic the current site pairs with each specification note. Decorative,
   so the alt text is empty and the wrapper is aria-hidden — the heading and
   body already say what the picture shows. */
.feat__fig{
  --figh:132px;
  --figpad:10px;
  display:grid;place-items:center;overflow:hidden;
  height:var(--figh);margin-bottom:16px;padding:var(--figpad);
  border-radius:var(--r);
  background:radial-gradient(72% 72% at 50% 40%,rgba(224,62,55,.09) 0%,transparent 74%),var(--bg-2);
}
/* An explicit pixel cap, not max-height:100%. The percentage resolves against
   the grid area and was being ignored, so a 1024px-wide render overflowed the
   panel by 200px. Derived from the panel height so the two stay in step. */
.feat__fig img{
  max-height:calc(var(--figh) - var(--figpad) * 2);
  max-width:100%;width:auto;height:auto;object-fit:contain;
}
.feat__fig--pair{grid-auto-flow:column;gap:8px}
.feat__fig--pair img{max-width:48%}
@media(max-width:620px){.feat__fig{--figh:112px}}

.feat__n{font-family:var(--f-display);font-size:.75rem;font-weight:700;letter-spacing:.1em;color:var(--accent-text)}
.feat h3{font-size:1.05rem}
.feat p{margin:0;font-size:.875rem;color:var(--fg-3);line-height:1.62;max-width:40ch}

/* --- Product card -------------------------------------------------------- */

.pcard{
  position:relative;display:flex;flex-direction:column;background:transparent;border:0;
}
.pcard__fig{
  /* 4:3 rather than square. The render only occupies the middle of the frame
     anyway, and squaring it cost ~80px of height per row of cards — a whole
     extra screen of scrolling across the listing. */
  position:relative;aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--r);
  background:var(--bg-2);
  overflow:hidden;transition:background .3s var(--ease);
}
.pcard:hover .pcard__fig{background:#E8E9EA}
.pcard__fig img{width:52%;height:auto;max-height:84%;object-fit:contain;transition:transform .5s var(--ease)}
.pcard:hover .pcard__fig img{transform:scale(1.05)}
.pcard__ap{
  position:absolute;top:12px;left:12px;font-family:var(--f-display);font-size:.75rem;font-weight:600;
  color:var(--fg-3);letter-spacing:.02em;
}
.pcard__new{position:absolute;top:10px;right:10px}
.pcard__body{padding:14px 0 0;display:flex;flex-direction:column;gap:5px;flex:1}
.pcard__kicker{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4)}
.pcard h3{font-size:1.02rem;transition:color .2s var(--ease)}
.pcard:hover h3{color:var(--vermilion)}
.pcard p{margin:0;font-size:.8125rem;color:var(--fg-3);line-height:1.55}
.pcard__meta{margin-top:auto;padding-top:9px;display:flex;flex-wrap:wrap;gap:10px}
.tag{font-size:.6875rem;letter-spacing:.02em;color:var(--fg-4);border:0;padding:0}
.tag + .tag::before{content:'·';margin-right:10px;opacity:.5}

/* --- Filter bar ---------------------------------------------------------- */

.filters{
  position:sticky;top:var(--nav-h);z-index:60;
  background:rgba(248,248,248,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.filters__inner{max-width:var(--max);margin-inline:auto;padding:12px var(--gut);display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
.fgroup{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fgroup__label{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);margin-right:2px}
.fbtn{
  padding:6px 12px;border:1px solid var(--line);border-radius:100px;background:transparent;
  font-size:.75rem;font-weight:400;color:var(--fg-2);transition:.2s var(--ease);
}
.fbtn:hover{border-color:var(--line-2);color:var(--fg)}
.fbtn[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}
.fcount{margin-left:auto;font-size:.75rem;color:var(--fg-4);letter-spacing:.04em}
.fclear{font-size:.75rem;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* auto-fit rather than auto-fill: a family filtered down to one visible
   card (e.g. products.html?aperture=3) still reserved as many 262px tracks
   as the row had room for, leaving the real card stranded in a narrow
   column with dead space beside it. auto-fit collapses the empty tracks —
   but with an unbounded 1fr max a lone remaining card then stretched to
   fill the whole row, a giant mostly-empty image tile. Capping the track
   at 320px keeps a card close to its normal size either way; any leftover
   row width is just trailing gutter, not something to fill. */
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,320px));gap:18px}
.pgroup{margin-bottom:clamp(30px,3.4vw,48px)}
/* Name, count and description all read left-to-right on one line. The blurb
   used to be pushed to the far right and right-aligned, which meant reading
   the group name, jumping the width of the page, then reading backwards. */
.pgroup__head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.pgroup__head h2{font-size:1.25rem}
.pgroup__head .n{font-size:.75rem;color:var(--fg-4);letter-spacing:.06em}
.pgroup__head p{
  margin:0;font-size:.8125rem;color:var(--fg-3);
  flex:1 1 22ch;min-width:0;max-width:64ch;
}
.pgroup__head p::before{content:'—';margin-right:8px;color:var(--fg-4)}
@media(max-width:760px){.pgroup__head p::before{display:none}}
.empty{padding:70px 0;text-align:center;color:var(--fg-3)}

/* --- Breadcrumb ---------------------------------------------------------- */

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.75rem;color:var(--fg-4);margin-bottom:24px}
.crumbs a{color:var(--fg-3);transition:color .2s}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.45}

/* --- Product hero -------------------------------------------------------- */

.phero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,70px);align-items:center}
.phero__fig{
  position:relative;aspect-ratio:1/1;border:0;border-radius:var(--r);
  display:grid;place-items:center;overflow:hidden;
  background:var(--bg-2);
}
.phero__fig img{width:64%;height:auto;max-height:82%;object-fit:contain;filter:drop-shadow(0 22px 38px rgba(51,51,51,.22))}
.phero__fig--double{display:flex;align-items:center;justify-content:center;gap:10px}
.phero__fig--double img{width:42%;height:auto;max-height:82%;object-fit:contain;filter:drop-shadow(0 22px 38px rgba(51,51,51,.22))}
.phero__badge{position:absolute;top:16px;left:16px;display:flex;gap:6px}
@media(max-width:900px){.phero{grid-template-columns:1fr}.phero__fig{order:-1;aspect-ratio:4/3}}

.keyspecs{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line);margin-top:28px;background:transparent}
.keyspecs div{padding:16px 24px 16px 0;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.keyspecs div:nth-child(2n){padding-left:24px}
.keyspecs div:nth-child(2n){border-right:0}
.keyspecs div:nth-last-child(-n+2){border-bottom:0}
.keyspecs dt{font-size:.625rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-4);margin-bottom:6px}
.keyspecs dd{margin:0;font-family:var(--f-display);font-size:1rem;font-weight:600;letter-spacing:-.018em}

/* --- Spec table ---------------------------------------------------------- */

.spectable{width:100%;border-collapse:collapse;font-size:.875rem}
.spectable th,.spectable td{text-align:left;padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spectable th{width:36%;font-weight:500;color:var(--fg-4);font-size:.6875rem;letter-spacing:.13em;text-transform:uppercase;padding-right:24px}
.spectable td{color:var(--fg-2)}
.spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0}

/* Listing-page heading: title left, description beside it, both top-aligned.
   align-items was set to end, not start — on a wide viewport the h1 column
   runs much taller than the short description column, and bottom-aligning
   them left a large empty gap above the description (and above the Find a
   product link beneath it) instead of the two simply starting together. */
.listhead{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(18px,3vw,50px);align-items:start;
}
.listhead .lede{margin:0;padding-bottom:6px}
@media(max-width:820px){.listhead{grid-template-columns:1fr;gap:12px;align-items:start}}

/* Compact cross-links to the other families at this size. */
.relrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.relchip{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);font-size:.875rem;color:var(--fg);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.relchip:hover{border-color:var(--line-2);background:var(--bg)}
.relchip__ap{
  font-family:var(--f-display);font-weight:600;font-size:.8125rem;
  color:var(--fg-4);flex:none;min-width:2.2em;
}
.relchip__n{min-width:0;overflow:hidden;text-overflow:ellipsis}
.relchip__m{margin-left:auto;font-size:.75rem;color:var(--fg-4);flex:none;padding-left:8px}
.relchip__fig{
  flex:none;width:44px;height:44px;border-radius:2px;display:grid;place-items:center;overflow:hidden;
  background:var(--bg-2);
}
.relchip__fig img{width:78%;height:auto;object-fit:contain}
@media(max-width:520px){.relchip__m{display:none}}

/* --- Find a product: filter-first view -----------------------------------
   Filters run across the top rather than down a side rail: they are the point
   of the page, they read left to right in roughly the order a specifier
   decides things, and the results get the full width underneath. */

.findbar{padding-block:clamp(20px,2.4vw,32px) clamp(40px,5vw,76px)}

.findgrid{
  display:flex;flex-wrap:wrap;
  gap:clamp(16px,2vw,26px) clamp(18px,2.4vw,32px);
  padding-bottom:clamp(18px,2vw,26px);
}
.fgrp{flex:1 1 calc(var(--n,3) * 78px);min-width:calc(var(--n,3) * 70px)}
@media(max-width:700px){.fgrp{flex:1 1 100%;min-width:0}}

.fgrp h3{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font-family:var(--f-body);font-size:.6875rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 8px;
}
.fgrp__n{
  font-size:.625rem;font-weight:400;letter-spacing:.04em;text-transform:none;
  color:var(--fg-4);
}

.ftiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:5px}

.ftile{
  display:grid;justify-items:center;gap:0;
  padding:7px 4px 6px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);text-align:center;color:var(--fg);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.ftile:hover{border-color:var(--line-2)}
/* A combination with no products left is shown, not hidden — seeing that 2"
   has no tunable option is information. */
.ftile:disabled,.fchip:disabled{opacity:.32;cursor:not-allowed}
.ftile:disabled:hover,.fchip:disabled:hover{border-color:var(--line)}
.ftile[aria-pressed="true"]{
  border-color:var(--fg);background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--fg);
}
.ftile__d{display:block;width:28px;height:28px;color:var(--fg-2)}
.ftile[aria-pressed="true"] .ftile__d{color:var(--fg)}
.ftile__l{font-size:.6875rem;font-weight:600;line-height:1.25;margin-top:2px}
.ftile__n{font-size:.625rem;color:var(--fg-4);line-height:1.2;text-wrap:balance}

/* Option tooltips ---------------------------------------------------------
   Two behaviours from one element. With a pointer, it is a popover above the
   option, so the row of tiles stays compact. Without one — a phone, a tablet —
   there is no hover to discover, so the same text is rendered inline under the
   label instead of being unreachable. */
.ftile,.fchip{position:relative}
.ftip{
  position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%) translateY(4px);
  z-index:60;width:max-content;max-width:min(238px,58vw);
  padding:9px 11px;border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--fg);color:var(--bg);
  font-family:var(--f-body);font-size:.6875rem;font-weight:400;line-height:1.45;
  letter-spacing:0;text-align:left;text-transform:none;text-wrap:pretty;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.ftip::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-4px;
  border:4px solid transparent;border-top-color:var(--fg);
}
.ftile:hover .ftip,.fchip:hover .ftip,
.ftile:focus-visible .ftip,.fchip:focus-visible .ftip{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
/* Keep the popover on screen for the tiles at either end of a row: a centred
   238px popover on a 70px tile hangs 84px past each edge, which the first and
   last columns do not have. */
.ftiles>.ftile:first-child .ftip{left:0;transform:translateX(0) translateY(4px)}
.ftiles>.ftile:first-child:hover .ftip,
.ftiles>.ftile:first-child:focus-visible .ftip{transform:translateX(0) translateY(0)}
.ftiles>.ftile:last-child .ftip{left:auto;right:0;transform:translateX(0) translateY(4px)}
.ftiles>.ftile:last-child:hover .ftip,
.ftiles>.ftile:last-child:focus-visible .ftip{transform:translateX(0) translateY(0)}

/* No hover to discover, and 27 paragraphs stacked inside the tiles turned the
   filter bar into three screens — so on touch the tips live in the glossary
   instead, which is a tap away and reads as prose. */
@media(hover:none){ .ftip{display:none} }

/* Glossary: the same option copy as running text, for touch, for the keyboard
   and for anyone who would rather read the list than hunt for tooltips. */
.fdefs{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(14px,1.6vw,20px);
}
.fdefs>summary{
  cursor:pointer;list-style:none;padding:11px 0;
  font-size:.8125rem;font-weight:600;color:var(--fg-2);
  display:flex;align-items:center;gap:8px;
}
.fdefs>summary::-webkit-details-marker{display:none}
.fdefs>summary::before{
  content:"";width:7px;height:7px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .2s var(--ease);
}
.fdefs[open]>summary::before{transform:rotate(-135deg) translateY(-2px)}
.fdefs>summary:hover{color:var(--fg)}
.fdefs__b{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(14px,2vw,26px);padding:4px 0 20px;
}
.fdefs__g h4{
  font-family:var(--f-body);font-size:.6875rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 8px;
}
.fdefs__g dl{margin:0}
.fdefs__g dt{font-size:.8125rem;font-weight:600;margin-top:9px}
.fdefs__g dt span{font-weight:400;color:var(--fg-3)}
.fdefs__g dd{margin:2px 0 0;font-size:.8125rem;line-height:1.5;color:var(--fg-3)}

.dia{display:block;width:100%;height:100%}
.dia--sw{width:26px;height:13px;border-radius:100px;border:1px solid var(--line-2);margin-top:7px}

.fchips{display:flex;flex-wrap:wrap;gap:5px}
.fchip{
  padding:6px 11px;border:1px solid var(--line);border-radius:100px;
  font-size:.75rem;color:var(--fg-2);background:var(--surface);
  transition:border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease);
}
.fchip:hover{border-color:var(--line-2)}
.fchip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}

/* Count, active chips and clear-all sit between the filters and the results,
   and stay in view while scrolling the results. */
.findbar__foot{
  position:sticky;top:var(--nav-h);z-index:40;
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  padding:12px 0;margin-bottom:clamp(18px,2vw,26px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg);
}
.findres__count{font-size:.8125rem;font-weight:600;flex:none}
.findres__chips{display:flex;flex-wrap:wrap;gap:5px}
.findbar__foot .fclear{margin-left:auto;flex:none}

.fpill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 5px 3px 9px;border-radius:100px;
  background:var(--fg);color:var(--bg);font-size:.6875rem;
}
.fpill button{color:inherit;opacity:.65;font-size:.8125rem;line-height:1;padding:0 2px}
.fpill button:hover{opacity:1}

.pgrid--find{grid-template-columns:repeat(auto-fill,minmax(206px,1fr))}
.findres__empty{padding:40px 0 8px;max-width:52ch}
.findres__empty .lede{margin-top:10px}
.findnote{
  margin:clamp(24px,3vw,38px) 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:.75rem;color:var(--fg-4);max-width:70ch;
}

@media(max-width:560px){
  .findgrid{grid-template-columns:1fr}
  .ftiles{grid-template-columns:repeat(auto-fit,minmax(74px,1fr))}
}

/* --- On-site assistant ---------------------------------------------------- */

.assist{position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);z-index:120}

.assist__fab{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 16px;border-radius:100px;
  background:var(--jet);color:var(--seasalt);
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
  box-shadow:0 10px 26px -10px rgba(51,51,51,.55);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.assist__fab:hover{transform:translateY(-1px);background:#1F1F1F}
.assist.is-open .assist__fab{opacity:0;pointer-events:none}

.assist__panel{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
  width:min(414px,calc(100vw - 28px));
  max-height:min(660px,calc(100vh - 96px));
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(51,51,51,.5);
}
@media(max-width:520px){
  .assist__panel{
    right:8px;left:8px;bottom:8px;width:auto;
    max-height:calc(100vh - 76px);
  }
}

.assist__bar{
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;border-bottom:1px solid var(--line);background:var(--bg);
}
.assist__bar strong{display:block;font-family:var(--f-display);font-size:.9375rem}
.assist__bar span{display:block;font-size:.6875rem;color:var(--fg-3);margin-top:1px}
.assist__x{margin-left:auto;font-size:1.375rem;line-height:1;color:var(--fg-3);padding:0 4px}
.assist__x:hover{color:var(--fg)}

.assist__log{
  flex:1 1 auto;overflow-y:auto;padding:14px 15px;
  display:flex;flex-direction:column;gap:10px;
  font-size:.8125rem;line-height:1.55;
}
.asmsg p{margin:0 0 7px}
.asmsg p:last-child{margin-bottom:0}
.asmsg--me{
  align-self:flex-end;max-width:88%;
  background:var(--jet);color:var(--seasalt);
  padding:8px 12px;border-radius:12px 12px 3px 12px;
}
.asmsg--bot{align-self:stretch;color:var(--fg-2)}
.asmsg__wait{color:var(--fg-4)}
.asmsg__hint{color:var(--fg-4);font-size:.75rem}

/* a resolved configuration */
.asr{
  border:1px solid var(--line);border-radius:var(--r);
  padding:11px 12px;margin:8px 0;background:var(--bg);
}
.asr__head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.asr__head strong{font-family:var(--f-display);font-size:.875rem}
.asr__tag{font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
.asr__part{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;border-top:1px solid var(--line);
}
.asr__pl{flex:none;width:74px;font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4)}
.asr__code{
  flex:1 1 auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;letter-spacing:.01em;color:var(--fg);word-break:break-all;
}
.asr__copy{
  flex:none;font-size:.625rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-text);border:1px solid rgba(201,49,43,.34);
  border-radius:100px;padding:3px 8px;
}
.asr__copy:hover{background:var(--accent-soft)}
.asr__btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.asr__copy--all{border-color:var(--line-2);color:var(--fg)}
.asr__link{
  font-size:.6875rem;font-weight:600;padding:4px 9px;
  border:1px solid var(--line-2);border-radius:100px;color:var(--fg);
  text-decoration:none;
}
.asr__link:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)}

.asr__warn,.asr__note{margin:9px 0 0;padding-left:16px;font-size:.6875rem;line-height:1.5}
.asr__warn{color:var(--accent-text)}
.asr__note{color:var(--fg-3)}
.asr__warn--p{list-style:none;padding-left:0}
.asr__ass{margin-top:8px;font-size:.6875rem;color:var(--fg-3)}
.asr__ass summary{cursor:pointer;color:var(--fg-3)}
.asr__ass ul{margin:6px 0 0;padding-left:16px}

.askb strong{display:block;font-family:var(--f-display);font-size:.875rem;margin-bottom:4px}

/* A quoted document passage. Set as a quotation rather than as the site's own
   prose, because that is exactly what it is — verbatim sheet text, with the
   document and page under it so an installer can check it. */
.aslib strong{display:block;font-family:var(--f-display);font-size:.875rem;margin-bottom:4px}
.aslib blockquote{
  margin:6px 0 0;padding:9px 12px;
  border-left:2px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  background:var(--bg-2);font-size:.8125rem;line-height:1.6;color:var(--fg-2);
}
.aslib__scope{
  display:inline-block;margin-bottom:2px;padding:1px 7px;border-radius:100px;
  background:var(--bg-2);font-size:.625rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--fg-4);
}
.aslib__src{margin:6px 0 0;font-size:.6875rem;color:var(--fg-4)}
.aslib__alt{margin:6px 0 0;font-size:.6875rem;color:var(--fg-4)}
.aslib__alt .asr__link{font-size:.6875rem;padding:1px 0;background:none;border:0;cursor:pointer}
.asdim__r{font-size:.75rem;color:var(--fg-3);white-space:nowrap}

/* Answer chips inside the assistant. Tappable options rather than a text box
   the visitor has to guess at — a novice does not know the vocabulary yet. */
.asq{display:grid;gap:5px;margin:8px 0 4px}
.asq__opt{
  display:block;text-align:left;width:100%;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.asq__opt:hover:not(:disabled){border-color:var(--fg);background:var(--bg)}
.asq__l{display:block;font-size:.8125rem;font-weight:600;color:var(--fg)}
.asq__n{display:block;font-size:.6875rem;color:var(--fg-4);margin-top:1px}

/* Past turns stay visible but stop being live. */
.asq.is-past,.asstate.is-past{opacity:.5}
.asq.is-past .asq__opt{cursor:default}

.aslink{
  font-size:.6875rem;color:var(--accent-text);text-decoration:underline;
  text-underline-offset:2px;padding:0;
}
.aslink:hover{color:var(--fg)}

/* What the visitor has told us so far, each piece removable. */
.asstate{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:9px}
.asstate__c{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 4px 2px 8px;border-radius:100px;
  background:var(--bg-2);color:var(--fg-2);font-size:.6875rem;
}
.asstate__c button{
  color:var(--fg-4);font-size:.8125rem;line-height:1;padding:0 2px;
}
.asstate__c button:hover{color:var(--fg)}

.ashr{border:0;border-top:1px solid var(--line);margin:11px 0}

.assist__sugg{display:flex;flex-wrap:wrap;gap:5px;padding:0 15px 10px}
.assist__chip{
  border:1px solid var(--line);border-radius:100px;
  padding:5px 10px;font-size:.6875rem;color:var(--fg-2);text-align:left;
}
.assist__chip:hover{border-color:var(--fg);color:var(--fg)}

.assist__form{display:flex;gap:7px;padding:11px 15px;border-top:1px solid var(--line)}
.assist__form input{
  flex:1 1 auto;min-width:0;font:inherit;font-size:.8125rem;
  padding:9px 12px;border:1px solid var(--line-2);border-radius:100px;
  background:var(--surface);color:var(--fg);
}
.assist__form input:focus{border-color:var(--jet)}
.assist__form input:focus:not(:focus-visible){outline:none}
.assist__form button{
  flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--jet);color:var(--seasalt);display:grid;place-items:center;
}
.assist__form button:hover{background:#1F1F1F}
.assist__foot{
  margin:0;padding:0 15px 12px;font-size:.625rem;line-height:1.45;color:var(--fg-4);
}

/* The docked item-number bar on product pages shares this corner on a phone. */
@media(max-width:820px){
  .is-product .assist{bottom:calc(var(--pnbar-h) + 14px)}
}
@media print{.assist{display:none}}

/* --- Plain-language hints on spec labels --------------------------------- */

.hint{
  display:inline-grid;place-items:center;
  width:15px;height:15px;margin-left:6px;padding:0;
  border:1px solid var(--line-2);border-radius:50%;
  font-family:var(--f-body);font-size:.5625rem;font-weight:700;line-height:1;
  color:var(--fg-3);background:transparent;cursor:help;
  vertical-align:1px;position:relative;flex:none;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.hint:hover,.hint[aria-expanded="true"]{border-color:var(--fg);color:var(--fg)}

.hint__pop{
  position:absolute;left:50%;bottom:calc(100% + 9px);
  width:max(232px,20vw);max-width:300px;
  transform:translate(-50%,4px);
  background:var(--jet);color:var(--seasalt);
  padding:11px 13px;border-radius:var(--r);
  font-size:.75rem;font-weight:400;line-height:1.5;letter-spacing:0;
  text-transform:none;text-align:left;
  box-shadow:0 12px 30px -12px rgba(51,51,51,.5);
  opacity:0;visibility:hidden;pointer-events:none;z-index:70;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.hint__pop::after{
  content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--jet);
}
.hint:hover .hint__pop,
.hint:focus-visible .hint__pop,
.hint[aria-expanded="true"] .hint__pop{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* Near the left or right edge the popover would be clipped, so shift it. */
.specgrid > div:nth-child(odd) .hint__pop{left:0;transform:translate(0,4px)}
.specgrid > div:nth-child(odd) .hint:hover .hint__pop,
.specgrid > div:nth-child(odd) .hint:focus-visible .hint__pop,
.specgrid > div:nth-child(odd) .hint[aria-expanded="true"] .hint__pop{transform:translate(0,0)}
.specgrid > div:nth-child(odd) .hint__pop::after{left:14px}

@media(max-width:560px){
  .hint__pop{width:min(78vw,300px)}
}

/* --- Product specifications ---------------------------------------------- */

/* Heading on the left, the spec sentence and its filter pills on the right,
   both top-aligned and only as tall as they need to be. */
.specintro{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,3vw,54px);align-items:start;
  padding-bottom:clamp(20px,2.4vw,30px);
}
.specintro .lede{margin:0}
@media(max-width:820px){.specintro{grid-template-columns:1fr;gap:14px}}

/* Label/value pairs, two per row, filling the width. Replaced a single tall
   table in a half-width column, which read as a wall of text next to a void. */
.specgrid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(28px,4vw,64px);margin:0;
  border-top:1px solid var(--line);
}
.specgrid > div{
  display:grid;grid-template-columns:minmax(120px,30%) minmax(0,1fr);
  gap:0 20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);
}
/* Reserved for values that genuinely need the width. Pill rows fit inside a
   single column at desktop, and forcing them full-width left the right half
   of four rows empty. */
.specgrid__wide{grid-column:1 / -1}
.specgrid dt{
  font-size:.6875rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-4);
}
.specgrid dd{margin:0;font-size:.875rem;color:var(--fg-2)}
@media(max-width:820px){
  .specgrid{grid-template-columns:1fr}
  .specgrid > div{grid-template-columns:1fr;gap:5px}
  .specgrid dd{font-size:.9375rem}
}

.pillrow{display:flex;flex-wrap:wrap;gap:6px}
.pill{border:1px solid var(--line);border-radius:100px;padding:5px 11px;font-size:.75rem;color:var(--fg-2);background:transparent}
@media(hover:none){
  a.pill,.fbtn,.pnb__copy,.subnav__link,.jump a{min-height:34px;display:inline-flex;align-items:center}
  /* Standalone controls need a 24px target (WCAG 2.5.8). Links sitting inside
     a line of text — breadcrumbs, a link in a sentence, a cell in the spec
     table — are explicitly exempt and are left at their natural size so the
     type keeps its rhythm. */
  .fclear{min-height:28px;display:inline-flex;align-items:center;padding-inline:4px}
  .pnb__opt{min-height:38px}
}
a.pill:hover{border-color:var(--accent);color:var(--accent)}

/* --- Downloads ----------------------------------------------------------- */

.dl{
  display:flex;align-items:center;gap:15px;padding:17px 19px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:transparent;
  transition:.24s var(--ease);
}
a.dl:hover{border-color:var(--jet);background:var(--surface)}
.dl__ico{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r);color:var(--accent)}
.dl > span:nth-child(2){min-width:0}
.dl__t{display:block;font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.dl__d{display:block;font-size:.75rem;color:var(--fg-4);margin-top:3px}
.dl__arrow{margin-left:auto;color:var(--fg-4)}
/* Was opacity:.45, which dragged the tile's text to roughly 5:1 * .45 and
   failed AA. Muting the actual colours keeps the "not available" read while
   staying legible; the tile is also marked aria-disabled in the markup. */
.dl.is-disabled{pointer-events:none;border-style:dashed;background:transparent}
.dl.is-disabled .dl__t{color:var(--fg-3)}
.dl.is-disabled .dl__m{color:var(--fg-4)}
.dl.is-disabled .dl__ico{color:var(--fg-4);border-color:var(--line)}

/* --- Aperture switcher --------------------------------------------------- */

.apswitch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.apswitch a{padding:10px 20px;font-family:var(--f-display);font-weight:600;font-size:.8125rem;color:var(--fg-3);border-right:1px solid var(--line);transition:.2s var(--ease)}
.apswitch a:last-child{border-right:0}
.apswitch a:hover{background:var(--bg-2);color:var(--fg)}
.apswitch a[aria-current="page"]{background:var(--fg);color:var(--bg)}

/* --- Notice -------------------------------------------------------------- */

.notice{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid rgba(224,62,55,.35);background:rgba(224,62,55,.08);
  border-radius:var(--r-lg);padding:14px 18px;font-size:.8125rem;color:#8E211C;line-height:1.55;
}
.notice strong{color:#6E1A16}
[data-theme="dark"] .notice{color:#F6C9C6;border-color:rgba(224,62,55,.55);background:rgba(224,62,55,.16)}
[data-theme="dark"] .notice strong{color:#FFFFFF}

/* --- Split / media ------------------------------------------------------- */

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,78px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.mediabox{position:relative;border:0;border-radius:var(--r);overflow:hidden;background:var(--bg-2);aspect-ratio:4/3}
.mediabox iframe,.mediabox video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.mediabox--tall{aspect-ratio:3/4}

/* Trim-styles video alongside the option groups. The option pills are the
   actionable part, so they share the fold with the video instead of sitting
   500px below it. */
.optsplit{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(22px,3vw,46px);align-items:start;
}
.optsplit .optgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){
  .optsplit{grid-template-columns:1fr}
  .optsplit .optgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){.optsplit .optgrid{grid-template-columns:1fr}}

/* A remote video that hasn't loaded should read as a panel, not a void. */
.mediabox{background:var(--bg-2)}

/* --- Trim / beam tiles --------------------------------------------------- */

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px)}
.tile{
  border:0;border-top:1px solid var(--line);background:transparent;
  display:flex;flex-direction:column;transition:.24s var(--ease);
}
a.tile:hover{border-top-color:var(--jet)}
.tile__fig{aspect-ratio:4/3;display:grid;place-items:center;background:var(--bg-2);border-radius:var(--r);margin-top:14px}
.tile__fig img{width:58%;height:auto;max-height:76%;object-fit:contain}
/* The optic scenes are drawn edge to edge — they are a room section, not an
   object on a plinth, so the inset that suits a product photo works against
   them. */
.tile__fig--optic{aspect-ratio:240/140;padding:0;overflow:hidden}
.optic{display:block;width:100%;height:100%;color:var(--fg)}
.tile__b{padding:16px 0 0}
.tile__k{font-family:var(--f-display);font-size:1.35rem;font-weight:700;letter-spacing:-.03em}
.tile__n{font-size:.8125rem;font-weight:600;margin-top:2px}
.tile__d{font-size:.75rem;color:var(--fg-3);margin-top:6px;line-height:1.5}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* --- Dark section helper ------------------------------------------------- */

[data-theme="dark"]{background:var(--bg);color:var(--fg)}
.dark-band{
  background:
    radial-gradient(70% 110% at 78% 8%,rgba(224,62,55,.20) 0%,transparent 58%),
    var(--bg);
}

/* --- Footer -------------------------------------------------------------- */

.ftr{padding-block:clamp(50px,6vw,82px) 30px;border-top:1px solid var(--line)}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:36px}
.ftr__grid h4{font-family:var(--f-body);font-size:.625rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-4);margin:0 0 15px}
.ftr__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ftr__list a{font-size:.8125rem;color:var(--fg-3);transition:color .2s}
.ftr__list a:hover{color:var(--accent)}
.ftr__bot{margin-top:48px;padding-top:22px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:.75rem;color:var(--fg-4)}
.ftr__bot a:hover{color:var(--fg-2)}
.ftr__bot .sp{margin-left:auto}

/* --- Reveal -------------------------------------------------------------- */

/* Scoped to .js (set by an inline script in <head>) so that if site.js fails
   to load or throws, the content is simply visible rather than a blank page. */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* --- Responsive ---------------------------------------------------------- */

@media(max-width:1180px){
  .mega__cols{grid-template-columns:repeat(4,1fr);gap:24px}
}
@media(max-width:1080px){
  .ftr__grid{grid-template-columns:1fr 1fr 1fr}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .mega__cols{grid-template-columns:repeat(2,1fr)}
  .mega__all{columns:2}
  .mega__strip{grid-template-columns:1fr}
}
@media(max-width:900px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div:nth-child(2n){border-right:0}
  .stats > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media(max-width:820px){
  .hdr__nav,.hdr__cta{display:none}
  .burger{display:flex}
  .mega{display:none}
}
@media(max-width:680px){
  .grid--3,.grid--2,.grid--4{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .keyspecs{grid-template-columns:1fr}
  .keyspecs div{border-right:0}
  .keyspecs div:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .keyspecs div:last-child{border-bottom:0}
  .filters__inner{gap:12px}
  .fcount{margin-left:0;width:100%}
  .pgrid{grid-template-columns:repeat(auto-fit,minmax(158px,200px));gap:12px}
  .pcard__body{padding:14px}
  .pcard p{display:none}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ===========================================================================
   Product number builder — reads left to right like the spec sheet's
   ORDERING INFORMATION table. One row of segment columns per part.
   =========================================================================== */

.pnb{display:block}

/* Running item numbers. Lives directly under the sub-nav and stays there for
   the whole page, so the catalog numbers are always visible while scrolling.
   On phones it docks to the bottom of the viewport instead. */
.pnbar{
  position:fixed;top:calc(var(--nav-h) + var(--subnav-h));left:0;right:0;z-index:55;
  background:var(--surface);border-bottom:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;
}
/* revealed once the part number builder comes into view */
.pnbar.is-on{opacity:1;visibility:visible;transform:none}
.pnb__bar{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  min-height:var(--pnbar-h);
  display:flex;align-items:center;gap:0 22px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.pnb__bar::-webkit-scrollbar{display:none}
.pnb__barrow{display:flex;align-items:center;gap:9px;flex:none}
.pnb__rowlabel{font-size:.5625rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-4);flex:none}
.pnb__code{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.8125rem;font-weight:600;
  letter-spacing:.01em;color:var(--fg);white-space:nowrap;
}
.pnb__copy{
  font-size:.5rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vermilion);border:1px solid var(--line);border-radius:100px;padding:3px 7px;flex:none;
  transition:.18s var(--ease);
}
.pnb__copy:hover{border-color:var(--vermilion);background:var(--accent-soft)}
.pnb__copy.is-done{color:#1E7A3E;border-color:rgba(30,122,62,.45)}
.pnb__barcta{margin-left:auto;flex:none;padding-left:8px}

@media(max-width:820px){
  .pnbar{
    top:auto;bottom:0;z-index:90;transform:translateY(10px);
    border-top:1px solid var(--line-2);border-bottom:0;
    box-shadow:0 -8px 24px -14px rgba(51,51,51,.30);
  }
  .pnbar.is-on{transform:none}
  .pnb__bar{gap:0 16px;padding-block:8px}
  .pnb__rowlabel{display:none}
  .pnb__barcta{position:sticky;right:0;background:var(--surface);box-shadow:-10px 0 10px var(--surface)}
  /* clear the docked bar so nothing is hidden behind it */
  /* Was body:has(.pnbar) — :has() is Safari 15.4+, and on older iPads the
     docked item bar covered the last row of footer links. */
  .is-product .ftr{padding-bottom:76px}
}

/* one part = one horizontal row of columns */
.pnb__part{border-top:1px solid var(--line);padding:24px 0 30px}
.pnb__phead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.pnb__step{font-family:var(--f-display);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.pnb__phead h3{font-size:1.1rem}
.pnb__qty{
  font-size:.625rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);
}
.pnb__qty--req{color:#6E1A16;background:rgba(201,49,43,.1);padding:3px 8px;border-radius:2px}
.pnb__part--req{
  margin-top:8px;padding:20px 18px 28px;
  border:1px solid rgba(201,49,43,.35);background:rgba(201,49,43,.04);
}
.pnb__part--req .pnb__pnote{color:var(--fg-2)}
[data-theme="dark"] .pnb__qty--req{color:#F6C9C6;background:rgba(224,62,55,.18)}
[data-theme="dark"] .pnb__part--req{border-color:rgba(224,62,55,.45);background:rgba(224,62,55,.1)}
.pnb__pnote{font-size:.8125rem;color:var(--fg-3);line-height:1.5;margin:0 0 18px;max-width:88ch}

.pnb__segs{
  display:flex;align-items:stretch;gap:0;
  overflow-x:auto;scrollbar-width:thin;padding-bottom:2px;
}
.pnb__seg{flex:1 1 0;min-width:0;padding:0 16px;border-left:1px solid var(--line)}
.pnb__seg--fixed{flex:0 0 auto;min-width:84px;max-width:150px}
.pnb__seg:first-child{padding-left:0;border-left:0}
.pnb__seg:last-child{padding-right:0}
.pnb__seglabel{
  display:block;font-size:.5625rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-4);margin-bottom:9px;white-space:nowrap;
}
.pnb__opts{display:flex;flex-direction:column;gap:3px}

/* every option shows its code AND its meaning, unselected */
.pnb__opt{
  display:block;width:100%;text-align:left;
  padding:6px 8px;border:1px solid transparent;border-radius:var(--r);
  transition:background .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease);
}
.pnb__opt .c{
  display:block;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--fg);
}
.pnb__opt .n{display:block;font-size:.6875rem;line-height:1.35;color:var(--fg-3);margin-top:2px}
.pnb__opt:hover:not(:disabled){background:var(--bg-2)}
.pnb__opt[aria-pressed="true"]{background:var(--jet);border-color:var(--jet)}
.pnb__opt[aria-pressed="true"] .c{color:var(--seasalt)}
.pnb__opt[aria-pressed="true"] .n{color:var(--platinum)}
.pnb__opt:disabled{opacity:.34;cursor:not-allowed}
.pnb__opt:disabled .c{text-decoration:line-through}

.pnb__fixed{
  display:block;padding:6px 8px;border:1px dashed var(--line-2);border-radius:var(--r);
  background:var(--bg-2);
}
.pnb__fixed .c{
  display:block;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.75rem;font-weight:600;color:var(--fg-2);
}
.pnb__fixed .n{display:block;font-size:.6875rem;line-height:1.35;color:var(--fg-4);margin-top:2px}

.pnb__example{font-size:.6875rem;color:var(--fg-4);line-height:1.5;word-break:break-all;margin-top:18px}

.pnb__extras{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);margin-top:10px}
.pnb__extra{border-top:1px solid var(--line);padding-top:20px}
.pnb__extra h4{font-family:var(--f-body);font-size:.5625rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fg-4);margin:0 0 12px}
.pnb__extra ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pnb__extra li{display:flex;gap:12px;font-size:.8125rem;color:var(--fg-2);line-height:1.45}
.pnb__pn{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;font-weight:600;
  color:var(--fg);flex:none;min-width:92px;
}
.pnb__extra .sub{display:block;font-size:.6875rem;color:var(--fg-4);margin-top:2px}

@media(max-width:1080px){
  .pnb__segs{flex-wrap:wrap;gap:22px 0;overflow-x:visible}
  .pnb__seg{flex:1 1 168px;min-width:168px}
  .pnb__seg:first-child{padding-left:16px;border-left:1px solid var(--line)}
}
@media(max-width:680px){
  .pnb__extras{grid-template-columns:1fr}
  .pnb__seg{flex:1 1 140px;min-width:140px;padding-inline:12px}
  .pnb__bar{position:static}
}

/* ===========================================================================
   In-page section nav (product pages)
   =========================================================================== */

.subnav{
  position:sticky;top:var(--nav-h);z-index:70;
  background:rgba(248,248,248,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.subnav__inner{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  height:var(--subnav-h);display:flex;align-items:center;gap:2px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
/* pull the first pill left so its LABEL lines up with the page content edge */
.subnav__inner > .subnav__link:first-child{margin-left:-14px}
.subnav__inner::-webkit-scrollbar{display:none}
.subnav__link{
  flex:none;padding:8px 14px;border-radius:100px;
  font-size:.75rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--fg-3);transition:.2s var(--ease);white-space:nowrap;
}
.subnav__link:hover{color:var(--fg);background:var(--surface)}
.subnav__link.is-current{background:var(--jet);color:var(--seasalt)}
.subnav__cta{margin-left:auto;flex:none;display:flex;gap:8px;padding-left:12px}
@media(max-width:820px){.subnav__cta{display:none}}

/* anchored sections must clear both bars */
/* Only the product pages carry a sub-nav and an item bar; applying their
   offset to every page left a ~92px gap above every in-page anchor target. */
.is-product{scroll-padding-top:calc(var(--nav-h) + var(--subnav-h) + var(--pnbar-h) + 16px)}

/* --- Downloads jump menu -------------------------------------------------- */

.jump{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:14px 18px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);margin-bottom:22px;
}
.jump__label{
  font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-4);margin-right:6px;
}
.jump a{
  padding:7px 13px;border:1px solid var(--line);border-radius:100px;
  font-size:.75rem;font-weight:600;color:var(--fg-2);transition:.2s var(--ease);
}
.jump a:hover{border-color:var(--vermilion);color:var(--vermilion);background:var(--accent-soft)}

/* ===========================================================================
   Search — by catalog number or description
   =========================================================================== */

.hdr__search{position:relative;flex:none;width:clamp(150px,17vw,230px)}
.hdr__search input{
  width:100%;height:36px;padding:0 12px 0 32px;
  border:1px solid var(--line);border-radius:100px;background:var(--surface);
  font-family:var(--f-body);font-size:.8125rem;color:var(--fg);
  transition:border-color .2s var(--ease),width .2s var(--ease);
}
.hdr__search input::placeholder{color:var(--fg-4)}
/* Only suppress the ring for pointer focus; a keyboard user needs to see
   where they are, and this was the one focusable control on the page with no
   visible focus indicator. */
.hdr__search input:focus{border-color:var(--jet)}
.hdr__search input:focus:not(:focus-visible){outline:none}
.hdr__search .mag{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--fg-4);pointer-events:none;
}

.srch{
  position:absolute;top:calc(100% + 8px);right:0;width:min(460px,calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 24px 48px -22px rgba(51,51,51,.34);
  max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.srch.is-open{opacity:1;visibility:visible;transform:none}
.srch__group{padding:8px 0}
.srch__group + .srch__group{border-top:1px solid var(--line)}
.srch__gh{
  font-size:.5625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-4);padding:6px 16px 8px;
}
.srch__hit{
  display:flex;align-items:center;gap:12px;padding:9px 16px;
  transition:background .14s var(--ease);
}
.srch__hit:hover,.srch__hit.is-sel{background:var(--bg-2)}
.srch__thumb{
  width:38px;height:38px;flex:none;border-radius:var(--r);display:grid;place-items:center;
  background:var(--bg-2);
}
.srch__thumb img{width:78%;height:auto}
.srch__t{display:block;font-size:.875rem;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.srch__m{display:block;font-size:.6875rem;color:var(--fg-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srch__m mark,.srch__t mark{background:rgba(224,62,55,.20);color:inherit;border-radius:2px}
.srch__pn{
  margin-left:auto;flex:none;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:.6875rem;color:var(--fg-4);
}
.srch__empty{padding:22px 16px;font-size:.8125rem;color:var(--fg-3);line-height:1.5}
.srch__empty b{color:var(--fg)}

/* search field inside the product finder */
.fsearch{position:relative;flex:none;width:min(280px,100%)}
.fsearch input{
  width:100%;height:32px;padding:0 12px 0 30px;
  border:1px solid var(--line);border-radius:100px;background:transparent;
  font-family:var(--f-body);font-size:.75rem;color:var(--fg);
}
.fsearch input:focus{outline:none;border-color:var(--jet)}
.fsearch input::placeholder{color:var(--fg-4)}
.fsearch .mag{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--fg-4);pointer-events:none}

@media(max-width:1180px){.hdr__search{width:clamp(130px,14vw,180px)}}
@media(max-width:1024px){.hdr__search{display:none}}

/* mobile search lives at the top of the drawer */
.mnav__search{padding:16px var(--gut) 4px;position:relative}
.mnav__search input{
  width:100%;height:40px;padding:0 14px 0 34px;
  border:1px solid var(--line);border-radius:100px;background:var(--surface);
  font-family:var(--f-body);font-size:.875rem;color:var(--fg);
}
.mnav__search input:focus{outline:none;border-color:var(--jet)}
.mnav__search .mag{position:absolute;left:calc(var(--gut) + 12px);top:calc(50% + 6px);transform:translateY(-50%);color:var(--fg-4);pointer-events:none}
.mnav__search .srch{position:static;width:100%;box-shadow:none;border:0;margin-top:10px;max-height:none}
.mnav__search .srch:not(.is-open){display:none}

/* ===========================================================================
   Collapsible builder
   =========================================================================== */


/* ===========================================================================
   Filter bar — progressive disclosure + active chips
   =========================================================================== */

.filters__primary{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;width:100%}
.filters__more{
  display:none;width:100%;padding-top:12px;margin-top:10px;border-top:1px solid var(--line);
  flex-wrap:wrap;gap:6px 22px;align-items:center;
}
.filters.is-expanded .filters__more{display:flex}
.fmore{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border:1px solid var(--line);border-radius:100px;
  font-size:.75rem;font-weight:600;color:var(--fg);transition:.2s var(--ease);
}
.fmore:hover{border-color:var(--jet)}
.fmore svg{transition:transform .24s var(--ease)}
.filters.is-expanded .fmore svg{transform:rotate(180deg)}
.fmore .n{
  font-size:.625rem;font-weight:700;background:var(--vermilion);color:#FFF;
  border-radius:100px;min-width:16px;height:16px;display:none;align-items:center;justify-content:center;padding:0 4px;
}
.fmore .n.is-on{display:inline-flex}

.factive{display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;padding-top:10px}
.factive:empty{display:none}
.factive__chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 8px 5px 12px;border-radius:100px;background:var(--jet);color:var(--seasalt);
  font-size:.6875rem;font-weight:600;letter-spacing:.02em;
}
.factive__chip button{
  display:grid;place-items:center;width:16px;height:16px;border-radius:100px;
  color:var(--platinum);font-size:.75rem;line-height:1;
}
.factive__chip button:hover{background:rgba(255,255,255,.18);color:#FFF}

/* ===========================================================================
   Projects
   =========================================================================== */

.pjgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3.4vw,52px)}
@media(max-width:760px){.pjgrid{grid-template-columns:1fr}}

.pjcard{display:flex;flex-direction:column;gap:14px}
.pjcard__fig{
  position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;
  background:var(--bg-2);display:grid;place-items:center;
}
.pjcard__fig img{width:100%;height:100%;object-fit:cover;object-position:top}
.pjcard__fig--multi img{cursor:pointer}
.pjcard__dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:2}
.pjcard__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:background .15s,transform .15s}
.pjcard__dot:hover{background:rgba(255,255,255,.8)}
.pjcard__dot.is-on{background:#fff;transform:scale(1.3)}
.pjcard__ph{
  display:grid;place-items:center;gap:6px;text-align:center;padding:20px;
  border:1px dashed var(--line-2);border-radius:var(--r);width:100%;height:100%;
  align-content:center;
}
.pjcard__ph span{font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4)}
.pjcard__ph strong{font-family:var(--f-display);font-size:.9375rem;font-weight:600;color:var(--fg-3)}
.pjcard__type{
  position:absolute;top:12px;left:12px;padding:4px 10px;border-radius:100px;
  background:var(--surface);font-size:.625rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-2);
}
.pjcard h3{font-size:1.25rem}
.pjcard__loc{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4);margin-top:-6px}
.pjcard p{margin:0;font-size:.875rem;color:var(--fg-3);line-height:1.6;max-width:52ch}
.pjcard__meta{display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}

/* ===========================================================================
   Cross-reference
   =========================================================================== */

.xref{display:grid;grid-template-columns:340px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:900px){.xref{grid-template-columns:1fr}}

.xref__panel{border-top:1px solid var(--line);padding-top:22px}
.xref__panel h3{font-size:1.05rem;margin-bottom:6px}
.xref__panel p{margin:0 0 16px;font-size:.8125rem;color:var(--fg-3);line-height:1.55}
.xref__opts{display:flex;flex-direction:column;gap:2px}
.xref__opt{
  display:block;width:100%;text-align:left;padding:11px 13px;border-radius:var(--r);
  border:1px solid transparent;transition:.16s var(--ease);
}
.xref__opt:hover{background:var(--bg-2)}
.xref__opt[aria-pressed="true"]{background:var(--jet);border-color:var(--jet)}
.xref__opt .l{display:block;font-size:.875rem;font-weight:600;color:var(--fg)}
.xref__opt .d{display:block;font-size:.6875rem;color:var(--fg-3);margin-top:2px;line-height:1.4}
.xref__opt[aria-pressed="true"] .l{color:var(--seasalt)}
.xref__opt[aria-pressed="true"] .d{color:var(--platinum)}

.xref__pn{position:relative;margin-top:8px}
.xref__pn input{
  width:100%;height:42px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.8125rem;color:var(--fg);
}
.xref__pn input:focus{outline:none;border-color:var(--jet)}

.xref__out{min-height:200px}
.xref__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.xref__head h3{font-size:1.15rem}
.xref__head .n{font-size:.75rem;color:var(--fg-4)}
.xref__note{font-size:.8125rem;color:var(--fg-3);line-height:1.55;margin:0 0 22px;max-width:70ch}
.xref__empty{
  border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:24px;
  font-size:.875rem;color:var(--fg-2);line-height:1.6;
}
.xref__empty strong{color:var(--fg)}
.xref__empty .btn{margin-top:16px}

@media(max-width:680px){[data-hide-mobile]{display:none}}

.tile .btn{white-space:normal;text-align:left}

/* --- Newsletter signup (footer) ------------------------------------------- */
.nl{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);max-width:34ch}
.nl h4{font-family:var(--f-body);font-size:.5625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-4);margin:0 0 10px}
.nl__form{display:flex;gap:8px}
.nl__form input{
  flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);font-family:var(--f-body);font-size:.8125rem;color:var(--fg);
}
.nl__form input:focus{outline:none;border-color:var(--jet)}

/* --- Options grid (product pages) ---------------------------------------- */
.optgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,38px)}
@media(max-width:820px){.optgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.optgrid{grid-template-columns:1fr}}
.optcol{border-top:1px solid var(--line);padding-top:16px}
.optcol h4{
  font-family:var(--f-body);font-size:.5625rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-4);margin:0 0 11px;
}
.pill.is-on{background:var(--jet);border-color:var(--jet);color:var(--seasalt)}

/* --- Downloads: compact, three across -------------------------------------- */
.dlgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:980px){.dlgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.dlgrid{grid-template-columns:1fr}}
.dlgrid .dl{padding:12px 14px;gap:11px;border-radius:var(--r)}
.dlgrid .dl__ico{width:28px;height:28px}
.dlgrid .dl__ico svg{width:13px;height:13px}
.dlgrid .dl__t{font-size:.875rem}
.dlgrid .dl__d{font-size:.6875rem;margin-top:1px}
#downloads{padding-block:clamp(44px,5vw,72px)}
#downloads .shead{margin-bottom:clamp(20px,2.4vw,30px)}
/* Builder now sits right below Overview (second section on the page), so the
   default .section padding plus the default .shead margin stacked into a
   tall, mostly-empty run before the actual builder UI appeared. */
#builder{padding-top:clamp(24px,3vw,40px)}
#builder .shead{margin-bottom:clamp(18px,2.2vw,28px)}

/* screen-reader-only heading (the hero is video-only now) */
/* Sliding it in from top:-60px keeps it off screen but leaves it 144x42 and
   clickable, and `:focus` fires for a mouse too — so a stray click near the
   top-left corner slid a black pill over the logo. Zero-sized and clipped at
   rest, pointer-events off, revealed only by :focus-visible, which is keyboard
   and assistive tech. */
.skiplink{
  position:absolute;left:12px;top:12px;z-index:200;
  width:1px;height:1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;pointer-events:none;
  background:var(--fg);color:var(--bg);
  border-radius:var(--r);font-size:.8125rem;font-weight:600;
}
.skiplink:focus-visible{
  width:auto;height:auto;padding:10px 16px;
  overflow:visible;clip-path:none;pointer-events:auto;
}

.u-visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.phero__stage{display:flex;gap:22px;align-items:flex-start}
.phero__stage .phero__fig{flex:1 1 auto;min-width:0}
.rail{flex:0 0 172px;display:flex;flex-direction:column;gap:10px;padding-top:4px}
@media(max-width:900px){.phero__stage{flex-direction:column}.rail{flex:none;width:100%;flex-direction:row;flex-wrap:wrap;gap:18px 22px}.rail__grp{flex:1 1 140px}}
.rail__grp{flex:0 0 auto;min-width:130px}
.rail__label{display:block;font-family:var(--f-body);font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-4);margin-bottom:6px}
.rail__pills{display:flex;flex-direction:column;gap:4px}
.rail__pill{display:block;width:100%;text-align:left;padding:6px 12px;border:1px solid var(--line);border-radius:100px;font-size:.8125rem;font-weight:500;color:var(--fg-2);background:var(--surface);transition:.18s var(--ease)}
.rail__pill:hover{border-color:var(--line-2)}
.rail__pill[aria-pressed="true"]{background:var(--jet);border-color:var(--jet);color:var(--seasalt);font-weight:600}
.rail__dots{display:flex;gap:8px;flex-wrap:wrap}
.rail__dotwrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.rail__dot{width:22px;height:22px;border-radius:100px;border:1px solid var(--line-2);cursor:pointer;transition:.18s var(--ease);padding:0}
.rail__dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--jet)}
.rail__dotname{font-size:.5625rem;color:var(--fg-4);letter-spacing:.02em}

.twall{display:flex;flex-direction:column;gap:16px}
.twall__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:700px){.twall__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.twall__block{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-2);display:flex;flex-direction:column}
.twall__fig{aspect-ratio:1/1;display:grid;place-items:center;background:var(--bg-2)}
.twall__fig img{width:62%;height:auto;object-fit:contain}
.twall__switcher{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;border-top:1px solid var(--line);background:var(--surface)}
.twall__switcher button{padding:4px 9px;border:1px solid var(--line);border-radius:100px;font-size:.625rem;color:var(--fg-2);background:transparent}
.twall__switcher button[aria-pressed="true"]{background:var(--jet);border-color:var(--jet);color:var(--seasalt)}
.twall__label{padding:8px 10px;font-size:.75rem;font-weight:600;color:var(--fg);border-top:1px solid var(--line)}
.twall__note{font-size:.75rem;color:var(--fg-4);line-height:1.5;max-width:70ch}

/* ===========================================================================
   Listing card v2 — exploded three-part stack
   Per the card handoff doc. Adds onto the existing .pcard / .pgroup__head
   rules above rather than replacing them, since most of their numbers
   (kicker size, title size/weight, .pcard__ap position) already matched the
   doc's spec exactly — this file's design tokens and the doc's numbers were
   clearly cut from the same cloth.
   =========================================================================== */

/* Section head: family name / max output / blurb, one row. .pgroup__head's
   existing flex/baseline/border-bottom (var(--line) = rgba(51,51,51,.14))
   and h2 sizing already matched the doc's spec; .pgroup__max is the one
   genuinely new piece. */
.pgroup__max{
  font-family:var(--f-display);font-weight:600;font-size:.8125rem;color:var(--jet);
  flex:none;
}

/* --- Card figure: no gradient/glow, flat recessed panel ------------------- */
.pcard--stack .pcard__fig{
  background:var(--bg-2);
  /* Fixed 1:1 instead of the base 4:3 — at 1.8x layer scale the tallest
     stack (housing + module + trim, ~285px of content incl. padding) needs
     more headroom than a 4:3 box gives at typical card widths. Square gives
     enough room at any card width in the grid except the narrowest (262px),
     where the tallest stacks lose a little off the top — confirmed
     acceptable rather than assumed. */
  aspect-ratio:1/1;
  transition:background .35s cubic-bezier(.22,1,.36,1);
}
.pcard--stack:hover .pcard__fig{background:#E6E7E9}
/* Double Head's two modules and two trims now sit side by side (see
   .pcard__layerrow below) instead of stacking vertically, so the total
   stack height is back in the normal range and no longer needs a taller
   box than every other family. */

.pcard__figlink{display:block}

.pcard__stack{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 0;gap:7px;
}
/* A <span> is inline by default and ignores an explicit width/height —
   this is what actually reserves the per-layer footprint from the
   geometry table in data.js. */
.pcard__layer{display:block}
/* A paired row (Double Head's two modules, two trims) sits side by side
   within the stack's normal vertical rhythm — one row height contributes
   to the column, not two. */
.pcard__layerrow{display:flex;align-items:flex-start;justify-content:center}
/* One head's own module directly above its own trim, so the two stay
   visually paired regardless of how much narrower the module is than the
   trim below it. Negative margin (not `gap`, which can't go below 0) pulls
   the second column in close to the first — closer to how the two heads
   actually sit in the real fixture (see the spec sheet reference) than a
   plain side-by-side gap allows. */
.pcard__layercol{display:flex;flex-direction:column;align-items:center;gap:7px}
/* The frame above is drawn in 3D perspective, near corner low, far corner
   high — the second head sits at that near corner, so it reads as sitting
   in front of (not just beside) the first one when it's shifted down and
   slightly enlarged, matching the spec sheet reference rather than sitting
   at an identical height like a flat, un-staggered pair. */
.pcard__layercol + .pcard__layercol{margin-left:-24px;margin-top:14px;transform:scale(1.06)}

/* Aperture badge — reuses .pcard__ap as-is; only the hover fade is new. */
.pcard__ap{transition:opacity .2s ease}
.pcard--stack:hover .pcard__ap{opacity:0}

/* --- Hover overlay: real trims, image-only, no labels --------------------- */
.pcard__overlay{
  position:absolute;inset:8px;z-index:2;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .28s ease,transform .34s cubic-bezier(.22,1,.36,1);
}
.pcard--stack:hover .pcard__stack{opacity:0;transition:opacity .3s ease}
.pcard--stack:hover .pcard__overlay{opacity:1;transform:none}
.pcard__ovtile{display:block;height:38px}

/* Home page and Find a Product don't use the hover swap (dense filtering /
   family comparison, not a second look at trims) — this fully neutralizes
   it rather than just skipping the overlay markup, since the fade-out on
   .pcard__stack would otherwise still fire with nothing to fade in to,
   leaving a blank hole on hover. Same selector weight as the rules above
   (one class + :hover + one class each), so source order — this comes
   after — decides which wins. */
.pcard--nohover:hover .pcard__fig{background:var(--bg-2)}
.pcard--nohover:hover .pcard__ap{opacity:1}
.pcard--nohover:hover .pcard__stack{opacity:1}

/* --- Card body: title row + spec-sheet button ------------------------------ */
.pcard__titlerow{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
/* .pcard h3 already sizes to 1.02rem/16.3px with the right weight and
   letter-spacing via the shared h1–h5 rule; only the hover tie-in is new,
   moved from the card anchor (gone) to the card wrapper itself. */
.pcard--stack:hover h3{color:var(--vermilion)}

.pcard__specbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border:1px solid rgba(51,51,51,.22);border-radius:2px;
  font-family:var(--f-body);font-size:.594rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-2);white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.pcard__specbtn:hover{background:var(--jet);border-color:var(--jet);color:var(--seasalt)}

/* --- Spec row: Mount / third stat / Install -------------------------------- */
.pcard__specs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;
  margin:0;padding:10px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.pcard__specs dt{
  font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-4);margin-bottom:3px;
}
.pcard__specs dd{
  margin:0;font-family:var(--f-display);font-weight:500;font-size:.719rem;color:var(--fg);
}

/* --- Trim strip: stated once per card, not repeated 24 times -------------- */
.pcard__trim{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:2px}
.pcard__trimlabel{
  font-size:.625rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-4);
}
.pcard__trimshape{width:10px;height:10px;border:1px solid var(--fg-3);flex:none}
.pcard__trimshape--round{border-radius:50%}
.pcard__trimdiv{width:1px;height:12px;background:var(--line-2);flex:none;margin-inline:2px}
.pcard__dot{
  width:9px;height:9px;border-radius:50%;flex:none;
  border:1px solid rgba(51,51,51,.18);
}
.pcard__trim p{
  flex:1 1 100%;margin:4px 0 0;font-size:.719rem;color:var(--fg-3);line-height:1.5;
}
/* "48 trim options" picks up the sitewide in-text link style automatically
   (p a:not(.btn)... in the base rules) — accent-text, underlined. No new
   rule needed for it. */