/* XGRIP — built to OUTPUTS/brand-theme-guide/XGRIP_Theme_Guide.html (v1) */

:root{
  --charcoal:#1A1A1A;
  --black:#000000;
  --red:#A02C2C;
  --card:#F1F1F1;
  --hairline:#DDDDDD;
  --label:#6E6E6E;
  --paper:#FFFFFF;
  --heading:'Montserrat',Arial,Helvetica,sans-serif;
  --body:'Liberation Sans',Arial,Helvetica,sans-serif;
  --wrap:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:var(--body);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}

/* ---------- type ---------- */
h1,h2,h3,.mono{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;margin:0;
}
h1{font-size:clamp(26px,4.0vw,46px);line-height:1.16;letter-spacing:.14em;font-weight:500}
h2{font-size:clamp(17px,2.1vw,23px);line-height:1.3;letter-spacing:.17em}
h3{font-size:13px;letter-spacing:.2em}
.kicker{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.26em;font-size:11px;color:var(--red);
}
/* Will 08-24: kickers to brand red. Applied to the class, so it carries to
   every page's kicker rather than leaving the four annotated ones odd. On dark
   backgrounds they stay grey — red on black does not hold up at 11px. */
.kicker.on-dark{color:#9a9a9a}
p{margin:0 0 18px;max-width:64ch}
.lead{font-size:18px;line-height:1.6;color:#333}
.dot{color:var(--red)}

/* ---------- header ---------- */
header.site{
  background:var(--charcoal);position:sticky;top:0;z-index:50;
  border-bottom:1px solid #2a2a2a;
}
header.site .bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;padding:12px 32px;max-width:var(--wrap);margin:0 auto;
}
header.site .logo img{height:60px;width:auto}
nav.main{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
nav.main a{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:11.5px;color:#e8e8e8;text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--red)}
nav.main a.active{border-bottom-color:var(--red);color:#fff}
nav.main a.cta{
  border:1px solid #4a4a4a;padding:9px 16px;color:#fff;
}
nav.main a.cta:hover{background:var(--red);border-color:var(--red)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;
  padding:15px 30px;text-decoration:none;border:1px solid var(--charcoal);
  color:var(--charcoal);background:transparent;transition:.15s;
}
.btn:hover{background:var(--charcoal);color:#fff}
.btn.solid{background:var(--red);border-color:var(--red);color:#fff}
.btn.solid:hover{background:var(--charcoal);border-color:var(--charcoal)}
.btn.light{border-color:#5a5a5a;color:#fff}
.btn.light:hover{background:#fff;color:var(--charcoal);border-color:#fff}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- sections ---------- */
section{padding:88px 0}
section.tight{padding:60px 0}
section.dark{background:var(--charcoal);color:#eee}
section.dark p{color:#c4c4c4}
section.black{background:var(--black);color:#eee}
section.cardbg{background:var(--card)}
.rule{height:1px;background:var(--hairline);border:0;margin:0}

/* ---------- hero ---------- */
.hero{background:var(--black);color:#fff;padding:0}
.hero .grid{
  display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:0;
  max-width:var(--wrap);margin:0 auto;
}
.hero .copy{padding:96px 48px 96px 32px}
.hero h1{color:#fff}
.hero p{color:#b9b9b9;max-width:44ch;margin-top:22px;font-size:17px}
.hero .shot{min-height:520px;position:relative}
/* Hero photograph. The image is built with black edges so it melts into the
   hero rather than sitting in it as a rectangle. */
.hero .shot .heroshot{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}
@media(max-width:900px){
  .hero .shot,.hero .shot .heroshot{min-height:0}
  .hero .shot .heroshot{height:auto;object-fit:contain}
}

/* on-gun photography placeholder */
.ph{
  border:1px dashed #4d4d4d;background:
    repeating-linear-gradient(135deg,#141414 0 14px,#181818 14px 28px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px;height:100%;min-height:520px;color:#8e8e8e;
}
.ph .tag{
  font-family:var(--heading);letter-spacing:.24em;font-size:10.5px;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
}
.ph strong{
  font-family:var(--heading);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:14px;color:#d8d8d8;display:block;margin-bottom:10px;
}
.ph span{font-size:13px;max-width:34ch;line-height:1.55;color:#8e8e8e}
.ph.lightph{border-color:#c3c3c3;background:repeating-linear-gradient(135deg,#f3f3f3 0 14px,#ececec 14px 28px);color:#767676;min-height:340px}
.ph.lightph strong{color:#3a3a3a}
.ph.lightph span{color:#767676}

/* ---------- proof strip ---------- */
.proof{background:var(--charcoal);padding:0}
.proof ul{
  list-style:none;margin:0 auto;padding:26px 32px;max-width:var(--wrap);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 32px;
}
.proof li{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.22em;font-size:10.5px;color:#cfcfcf;
}
.proof li b{color:#fff;font-weight:500}

/* ---------- three columns ---------- */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;margin-top:12px}
.cols h3{margin-bottom:14px}
/* Will 08-24: brand red on the three why-headings, numbers dropped. On black
   #A02C2C measures about 2.6:1, under the 4.5:1 minimum. His call, recorded. */
section.dark .cols h3{color:var(--red)}
.cols p{font-size:15.5px;margin:0;color:#3a3a3a}
section.dark .cols p{color:#c0c0c0}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .txt{order:2}

/* ---------- product grid ---------- */
.platform{margin-top:52px}
.platform .head{
  display:flex;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--hairline);padding-bottom:12px;margin-bottom:26px;
}
.platform .head h3{white-space:nowrap}
.platform .head .count{font-size:12px;color:var(--label);letter-spacing:.1em}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.p{background:var(--card);padding:22px 20px 20px;display:flex;flex-direction:column}
.p .imgbox{height:112px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.p .imgbox img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.p .sku{font-family:var(--heading);font-size:11.5px;letter-spacing:.16em;font-weight:500}
.p .fit{font-size:13.5px;color:#3a3a3a;margin-top:7px;line-height:1.45}
.p .cal{font-size:12px;color:var(--label);margin-top:6px}

/* ---------- retailers ---------- */
.rtl{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--hairline)}
.rtl a{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:28px 4px;border-bottom:1px solid var(--hairline);text-decoration:none;
}
.rtl .rtxt{min-width:0}
.rtl a:nth-child(odd){padding-right:32px}
.rtl a:nth-child(even){padding-left:32px;border-left:1px solid var(--hairline)}
.rtl .nm{font-family:var(--heading);font-size:13px;letter-spacing:.18em;font-weight:500}
/* Retailer logos, Will 08-25: beside the name, hard right. Capped by height so
   a wordmark and a square mark sit on the same baseline; max-width stops a wide
   wordmark from squeezing the name. flex-shrink:0 keeps it off the text. */
/* Will 08-26: these were much too small, Nashville worst of all. Two things were
   wrong. The cap was 30px, and the files carried dead margin -- 67% of the Nashville
   square was empty black, so its wordmark was rendering about 10px tall. The logos
   are now cropped to their content, and the cap is 46px, which matches the height of
   the name-plus-description block beside it. */
.rtl .rlogo{height:46px;width:auto;max-width:200px;object-fit:contain;flex:0 0 auto}
.rtl .ds{font-size:14px;color:var(--label);margin-top:6px}
.rtl a:hover .nm{color:var(--red)}

/* ---------- forms ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;max-width:760px;margin-top:30px}
.form .full{grid-column:1/-1}
label{display:block;font-family:var(--heading);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:8px}
input,select,textarea{
  width:100%;padding:13px 14px;border:1px solid var(--hairline);background:var(--paper);
  font-family:var(--body);font-size:15px;color:var(--charcoal);border-radius:0;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--charcoal)}
textarea{min-height:130px;resize:vertical}

/* ---------- misc ---------- */
.facts{list-style:none;padding:0;margin:22px 0 0;max-width:60ch}
.facts li{padding:14px 0;border-bottom:1px solid var(--hairline);font-size:15.5px;display:flex;gap:20px}
.facts li b{font-family:var(--heading);font-weight:500;font-size:11px;letter-spacing:.18em;color:var(--label);min-width:150px;text-transform:uppercase;padding-top:3px}
section.dark .facts li{border-bottom-color:#333}
.steps{counter-reset:s;list-style:none;padding:0;margin:34px 0 0}
.steps li{counter-increment:s;position:relative;padding:0 0 30px 62px;max-width:70ch}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--heading);font-size:13px;letter-spacing:.16em;color:var(--red);
}
.steps li h3{margin-bottom:8px;color:var(--red)}   /* Will 08-25: match the red headers on About */
.steps li p{font-size:15.5px;margin:0;color:#3a3a3a}

/* Method diagram beside the text. Will 08-26. The three drawings are 230px
   wide and are served at native size -- the column is fixed at 230px and the
   image is never asked to grow, because upscaled line art looks worse than
   small line art. A method with no diagram falls back to full width via
   .nofig, so the page is never broken by a missing file. */
.steps li{display:grid;grid-template-columns:1fr 230px;gap:30px;align-items:start;max-width:none}
.steps li.nofig{display:block}
.steps .steptxt{max-width:70ch}
.steps .stepfig{
  background:var(--card);padding:14px;display:flex;
  align-items:center;justify-content:center;
}
.steps .stepfig img{width:230px;max-width:100%;height:auto;mix-blend-mode:multiply}
/* 760 is the rung on the existing ladder (1000 - 900 - 760 - 640 - 520 - 460).
   Below it the text column and a fixed 230px figure fight for room, so stack. */
@media(max-width:760px){
  .steps li{grid-template-columns:1fr;gap:16px}
  .steps .stepfig{justify-content:flex-start;padding:12px}
}

/* ---------- footer ---------- */
footer.site{background:var(--black);color:#8d8d8d;padding:58px 0 40px;font-size:13px}
footer.site .top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:38px;border-bottom:1px solid #262626}
footer.site img.fl{height:38px;margin-bottom:20px}
footer.site h3{color:#e4e4e4;margin-bottom:16px;font-size:11px}
footer.site a{color:#a8a8a8;text-decoration:none;display:block;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site .legal{padding-top:26px;line-height:1.75;font-size:12px;color:#6d6d6d}
footer.site .legal em{font-style:normal;color:#8d8d8d}

/* ---------- review annotations (mockup only) ---------- */
.note{
  background:#FFF8E1;border-left:3px solid var(--red);padding:16px 20px;
  font-size:13.5px;line-height:1.6;color:#4a4034;margin:0;
}
.note b{font-family:var(--heading);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:6px;font-weight:500}
.note p{margin:0 0 8px;max-width:none;font-size:13.5px}
.note p:last-child{margin:0}
.notebar{background:#FFF8E1;border-bottom:1px solid #e8dcb8}
.notebar .wrap{padding-top:14px;padding-bottom:14px}

@media(max-width:900px){
  .hero .grid,.split,.cols,.rtl,.form,footer.site .top{grid-template-columns:1fr}
  .hero .copy{padding:64px 32px}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .rtl a:nth-child(even){padding-left:4px;border-left:0}
  .rtl a:nth-child(odd){padding-right:4px}
  .split.rev .txt{order:0}
  section{padding:60px 0}
  nav.main{gap:18px}
}

/* ======================================================================
   Structure pages — added when F was built out to match A–E.
   Adapter Finder, Products tiles, brand pages, dealer forms and assets.
   Written against F's existing palette and type scale; nothing above
   this line was changed.
   ====================================================================== */

.narrow{max-width:760px}
.muted{color:var(--label)}
.notebox{
  background:var(--card);border-left:3px solid var(--hairline);
  padding:16px 20px;font-size:13.5px;line-height:1.6;color:#4a4a4a;
}
.arrowlink{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:10.5px;color:var(--red);
  text-decoration:none;display:inline-block;
}
.arrowlink:hover{text-decoration:underline}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--hairline)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}

/* ---------- category tiles ---------- */
/* ---------- home range: one tile per manufacturer (Will 08-24) ---------- */
.oemgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px;
}
@media(max-width:1000px){.oemgrid{grid-template-columns:repeat(2,1fr)}}
/* Narrower than this is handled in the mobile block at the end of the file. */
.oemtile{
  background:var(--paper);padding:26px 24px 22px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:background .25s;
}
.oemtile:hover{background:#fff;box-shadow:0 0 0 1px var(--hairline)}
.oem-shot{
  background:var(--card);margin:-26px -24px 20px;padding:26px 24px;
  display:flex;align-items:center;justify-content:center;min-height:150px;
}
.oem-shot img{max-height:130px;width:auto}
.oem-nophoto{color:var(--label);font-size:12.5px}
.oem-name{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:14px;margin-bottom:8px;
}
.oem-count{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.24em;font-size:10px;color:var(--red);
}
.oem-go{
  margin-top:auto;padding-top:20px;font-family:var(--heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--label);
}
.oemtile:hover .oem-go{color:var(--red)}

.cattile{
  background:var(--paper);padding:34px 30px 30px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;min-height:210px;transition:background .25s;
}
.cattile:hover{background:var(--card)}
.ct-name{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:15px;margin-bottom:10px;
}
.ct-count{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.24em;font-size:10px;color:var(--red);margin-bottom:16px;
}
.ct-models{font-size:13.5px;line-height:1.6;color:#5a5a5a}
.ct-go{
  margin-top:auto;padding-top:24px;font-family:var(--heading);font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--label);
}
.cattile:hover .ct-go{color:var(--red)}

/* ---------- brand page SKU rows ---------- */
.skurow{
  display:grid;grid-template-columns:260px 1fr;gap:44px;align-items:start;
  padding:38px 0;border-bottom:1px solid var(--hairline);
}
.skurow .pic{background:var(--card);padding:18px;display:flex;align-items:center;justify-content:center;min-height:190px}
.skurow .pic img{max-height:180px;width:auto;margin:0 auto}
.spectable{border-collapse:collapse;width:100%;max-width:520px}
.spectable th,.spectable td{
  text-align:left;padding:9px 0;border-bottom:1px solid var(--hairline);
  font-size:14px;vertical-align:top;
}
.spectable th{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:10px;color:var(--label);width:150px;
}
.oblique{
  color:var(--label);font-size:11.5px;text-align:center;line-height:1.5;
  border:1px dashed var(--hairline);padding:38px 14px;
}
/* Per-SKU carousel. Arrows replaced the dots on Will's call 08-25 — full width
   so the arrows sit at the grey card's inner edges rather than hugging a narrow
   cutout. The dot rules are gone from F; A–D still carry their own. */
.pcar{position:relative;width:100%}
.pcar .fr{display:none;text-align:center}
.pcar .fr.on{display:block}
.pnav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.82);color:var(--label);
  transition:background .15s,color .15s;
}
.pnav.prev{left:-6px}
.pnav.next{right:-6px}
.pnav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.pnav:hover{background:var(--paper);color:var(--red)}
.pnav:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(hover:none){
  /* No hover on a phone, so the resting state has to be legible on its own. */
  .pnav{background:var(--paper);color:var(--charcoal)}
}

/* ---------- adapter finder ---------- */
.finder{border:1px solid var(--hairline)}
.fcols{display:grid;grid-template-columns:1fr 1fr 1.15fr}
/* Four-column finder, Will 08-24. Manufacturer is the narrowest column — seven
   short labels — and the result column stays widest because it carries a photo. */
.fcols.four{grid-template-columns:.8fr 1fr 1.15fr 1.25fr}
@media(max-width:1000px){
  .fcols.four{grid-template-columns:1fr 1fr}
  .fcols.four .fcol{border-bottom:1px solid var(--hairline)}
  .fcols.four .fcol:nth-child(2n){border-right:0}
}
@media(max-width:640px){
  .fcols.four{grid-template-columns:1fr}
  .fcols.four .fcol{border-right:0}
}
.fcol{border-right:1px solid var(--hairline);min-width:0}
.fcol:last-child{border-right:0}
.fhead{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:10.5px;padding:16px 20px;
  border-bottom:1px solid var(--hairline);background:var(--card);
}
.fhead .num{color:var(--red);margin-right:8px}
.flist{max-height:420px;overflow-y:auto}
.flist .grp{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;font-size:9.5px;color:var(--label);
  padding:16px 20px 7px;
}
.flist button{
  display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:10px 20px;font-family:var(--body);font-size:14px;color:var(--charcoal);
  border-left:2px solid transparent;line-height:1.4;
}
.flist button:hover{background:var(--card)}
.flist button[aria-pressed="true"]{background:var(--card);border-left-color:var(--red)}
.fempty{padding:22px 20px;color:var(--label);font-size:13.5px;line-height:1.6}
.fresult{padding:22px 20px}
.fresult img{max-height:150px;width:auto;margin:0 auto 18px}
.fresult .sku{
  font-family:var(--heading);font-weight:500;letter-spacing:.14em;
  font-size:19px;margin:8px 0 16px;
}
.fspec{border-collapse:collapse;width:100%;margin-bottom:20px}
.fspec th,.fspec td{
  text-align:left;padding:7px 0;border-bottom:1px solid var(--hairline);
  font-size:13px;vertical-align:top;
}
.fspec th{
  font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;font-size:9.5px;color:var(--label);width:74px;
}

/* ---------- forms on the structure pages ---------- */
.field{margin-bottom:22px}
.field label{
  display:block;font-family:var(--heading);font-weight:500;text-transform:uppercase;
  letter-spacing:.18em;font-size:9.5px;color:var(--label);margin-bottom:7px;
}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--hairline);
  font-family:var(--body);font-size:14.5px;background:var(--paper);color:var(--charcoal);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--red);outline-offset:-2px}
.btn.ghost{background:transparent;border:1px solid var(--hairline);color:var(--charcoal)}
.btn.ghost:hover{border-color:var(--red);color:var(--red)}

/* ---------- dealer asset rows ---------- */
.assetrow{
  padding:22px 0;border-bottom:1px solid var(--hairline);
  display:grid;grid-template-columns:1fr 90px;gap:20px;align-items:start;
}
.assetrow h3{font-size:11.5px}
.assetrow p{font-size:13.5px;margin:9px 0 0;max-width:62ch;color:#5a5a5a}
.assetrow .fmt{text-align:right}

/* ---------- FAQ ---------- */
.faqitem{padding:22px 0;border-bottom:1px solid var(--hairline)}
.faqitem h3{font-size:10.5px;letter-spacing:.2em;margin-bottom:11px}
.faqitem p{font-size:14px;max-width:74ch;color:#5a5a5a;margin:0}

@media(max-width:900px){
  .grid2,.grid3,.grid4,.fcols{grid-template-columns:1fr}
  .skurow{grid-template-columns:1fr;gap:24px}
  .fcol{border-right:0;border-bottom:1px solid var(--hairline)}
  .flist{max-height:300px}
}

/* ---------- hero carousel (Will 08-25) -------------------------------
   Three slides in the hero: 1911, Glock in hand, Smith & Wesson. Slide one
   is the only one visible until the script runs, so with JavaScript off the
   hero is exactly what it was before — one photograph, no empty box.
   Auto-advance stops for prefers-reduced-motion and while a dot has focus. */
.hcar{position:relative;width:100%;height:100%;min-height:520px}
.hslide{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s ease;
}
.hslide.is-on{opacity:1;visibility:visible}
.hslide .heroshot{width:100%;height:100%;min-height:520px;object-fit:cover;display:block}
.hslide .ph{height:100%;min-height:520px}
.hdots{
  position:absolute;left:0;right:0;bottom:18px;z-index:2;
  display:flex;gap:4px;justify-content:center;
}
.hdots button{
  width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.hdots button span{
  display:block;width:28px;height:2px;background:#6a6a6a;transition:background .3s ease;
}
.hdots button[aria-current="true"] span{background:var(--red)}
.hdots button:focus-visible{outline:2px solid var(--red);outline-offset:-6px}
@media(max-width:900px){
  .hcar,.hslide .heroshot,.hslide .ph{min-height:0}
  .hslide .heroshot{height:auto;object-fit:contain}
  .hcar{min-height:340px}
  .hslide .ph{min-height:340px}
}
@media(prefers-reduced-motion:reduce){
  .hslide{transition:none}
}

/* ======================================================================
   MOBILE PASS — 2026-08-24
   Everything above this line is the desktop design and is unchanged. This
   block only takes effect at narrow widths, so reverting the mobile work
   means deleting from here to the end of the file.

   Three things drove it: the header nav wrapped to three lines, the finder
   stacked into four full-length lists, and tap targets were built for a
   mouse. Breakpoints: 1000 tablet, 860 phone menu, 640 phone, 460 small
   phone.
   ====================================================================== */

/* ---------- header: hamburger below 1000 ----------
   Raised from 860 to 1000 on 2026-08-25. Measured: the logo (144px at its
   60px height) plus five nav links, their gaps and the CTA button need about
   1004px to sit on one line — so between 861 and 1004 the nav was wrapping to
   a second row with no hamburger to rescue it. 1000 is already a breakpoint in
   this file, so the two now line up and no band is left uncovered. */
.navtoggle{display:none}

@media(max-width:1000px){
  header.site .bar{flex-wrap:wrap;gap:12px;padding:10px 20px}
  header.site .logo img{height:40px}

  .navtoggle{
    display:flex;align-items:center;gap:10px;background:transparent;
    border:1px solid #3d3d3d;color:#e8e8e8;cursor:pointer;
    padding:10px 14px;min-height:44px;
    font-family:var(--heading);font-weight:500;text-transform:uppercase;
    letter-spacing:.2em;font-size:10.5px;
  }
  .navtoggle .bars{display:flex;flex-direction:column;justify-content:center;gap:4px;width:16px}
  .navtoggle .bars span{display:block;height:1.5px;background:#e8e8e8;transition:.2s}
  .bar.navopen .navtoggle{border-color:var(--red)}
  .bar.navopen .navtoggle .bars span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .bar.navopen .navtoggle .bars span:nth-child(2){opacity:0}
  .bar.navopen .navtoggle .bars span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

  nav.main{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;
    border-top:1px solid #2a2a2a;margin-top:4px}
  /* The header is sticky, so an open menu must never grow taller than the
     screen and trap the page behind it. */
  .bar.navopen nav.main{display:flex;max-height:62vh;overflow-y:auto}
  nav.main a{padding:15px 2px;border-bottom:1px solid #242424;min-height:44px;
    display:flex;align-items:center;font-size:12px}
  nav.main a.active{border-bottom-color:#242424;color:#fff}
  nav.main a.cta{border:1px solid #4a4a4a;justify-content:center;margin:16px 0 6px;padding:15px}
}

/* ---------- adapter finder as a phone stepper ---------- */
.fhead .flabel{display:inline}
.fhead .fval{display:none}

@media(max-width:640px){
  .flist{max-height:none;overflow:visible}

  .fcols.four .fhead{
    display:flex;align-items:baseline;gap:8px;cursor:pointer;min-height:48px;
    padding:14px 18px;
  }
  .fcols.four .fhead .flabel{flex:0 0 auto}
  /* Once a step is answered its heading carries the answer and the list folds. */
  .fcols.four .fcol.is-done .fhead .fval{
    display:block;margin-left:auto;text-align:right;color:var(--charcoal);
    font-family:var(--body);letter-spacing:0;text-transform:none;font-size:13.5px;
    line-height:1.35;
  }
  .fcols.four .fcol.is-done .fhead .flabel{color:var(--label)}
  .fcols.four .fcol .fbody{display:none}
  .fcols.four .fcol.is-open .fbody{display:block}
  .fcols.four .fcol.is-open .fhead{background:var(--paper);border-bottom-color:var(--hairline)}

  .flist button{padding:14px 18px;font-size:15px;min-height:48px}
  .flist .grp{padding:14px 18px 6px}
  .fempty{padding:18px}
  .fresult{padding:18px}
  .fresult img{max-height:120px}
  .fspec th{width:66px}
}

/* ---------- everything else ---------- */
@media(max-width:640px){
  .wrap{padding:0 20px}
  section{padding:48px 0}
  section.tight{padding:36px 0}

  h1{letter-spacing:.09em;line-height:1.2}
  h2{letter-spacing:.13em}
  .lead{font-size:16.5px}

  .hero .copy{padding:44px 20px 40px}
  .hero p{font-size:16px;margin-top:18px}
  .btns{gap:10px}
  .btn{padding:15px 22px;min-height:48px;display:inline-flex;align-items:center}

  /* Four proof points read better as a 2x2 block than a wrapping row. */
  .proof ul{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;padding:20px}

  .split{gap:32px}
  .grid2{gap:32px}
  .cols{gap:34px}

  .oemgrid{grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
  .oemtile{padding:18px 16px 16px}
  .oem-shot{margin:-18px -16px 14px;padding:16px;min-height:112px}
  .oem-shot img{max-height:92px}
  .oem-name{font-size:12.5px;letter-spacing:.14em}
  .oem-go{padding-top:14px;font-size:9.5px}

  /* Label above value: 150px of label in a 320px column left nothing. */
  .facts li{flex-direction:column;gap:5px;padding:13px 0}
  .facts li b{min-width:0}

  .pgrid{grid-template-columns:1fr;gap:14px}
  .platform .head{flex-wrap:wrap;gap:6px 14px}
  .platform .head h3{white-space:normal}

  .steps li{padding-left:0;padding-bottom:26px}
  .steps li::before{position:static;display:block;margin-bottom:8px}

  .skurow{padding:28px 0}
  .skurow .pic{min-height:150px;padding:14px}
  .skurow .pic img{max-height:140px}
  .spectable th{width:112px;font-size:9.5px}
  .spectable th,.spectable td{font-size:13.5px}

  .assetrow{grid-template-columns:1fr;gap:8px}
  .assetrow .fmt{text-align:left}

  .rtl a{padding:20px 2px;min-height:44px}
  .rtl .rlogo{height:38px;max-width:150px}
  .form{gap:14px;margin-top:22px}
  .field input,.field select,.field textarea,input,select,textarea{
    font-size:16px;padding:13px 12px;  /* 16px stops iOS zooming the page on focus */
  }

  footer.site{padding:44px 0 32px}
  footer.site .top{gap:28px;padding-bottom:28px}
  footer.site a{padding:11px 0;min-height:44px;display:flex;align-items:center}
  /* 44px touch target on a phone, matching the rest of the mobile pass. The
     old .pdots rule here reached 27px and is gone with the dots. */
  .pnav{width:44px;height:44px}
  .pnav svg{width:20px;height:20px}
  .pnav.prev{left:-10px}
  .pnav.next{right:-10px}
}

@media(max-width:460px){
  .oemgrid{grid-template-columns:1fr}
  .oem-shot{min-height:132px}
  .oem-shot img{max-height:112px}
  .proof ul{grid-template-columns:1fr}
  .fcols.four .fcol.is-done .fhead .fval{font-size:13px}
}

/* Retailer rows stack on a phone so the logo is not squeezed against the name. */
@media(max-width:520px){
  .rtl a{flex-direction:column;align-items:flex-start;gap:12px}
  .rtl .rlogo{height:26px}
}