:root{
  --ink:#0b0b0d;
  --ink-2:#5f6268;
  --ink-3:#9a9da4;
  --line:#e7e7ea;
  --soft:#f5f5f7;
  --panel:#0c0d0f;
  --panel-2:#17181b;
  --blue:#1268ff;
  --red:#c8382f;
  --nav-h:68px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0}
.wrap{max-width:1280px;margin:auto;padding:0 30px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.mono{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}
/* sticky nav must not sit on top of a section you jumped to */
section[id]{scroll-margin-top:calc(var(--nav-h) + 34px)}

/* ---------------------------------------------------------------- bars */
.top{background:var(--panel);color:#fff;text-align:center;padding:8px;font-size:11px;letter-spacing:.13em;font-weight:700}
.top.test{background:#3b2a06;color:#ffc94d}
nav{height:var(--nav-h);position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:24px;width:auto;display:block}
.brand b{font-size:18px;letter-spacing:-.04em}
.brand span{font-size:10.5px;color:#8a8d94;letter-spacing:.15em;text-transform:uppercase;font-weight:750;
  border-left:1px solid var(--line);padding-left:10px}
.links{display:flex;gap:24px;font-size:13.5px;font-weight:600;color:#3d4046}
.links a{padding:6px 0;position:relative}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--ink);transition:right .25s}
.links a:hover::after{right:0}
.navright{display:flex;align-items:center;gap:12px;flex:none}
.navtel{font-size:13px;font-weight:700;white-space:nowrap}
.navtel small{display:block;font-size:9.5px;font-weight:600;color:var(--ink-3);letter-spacing:.09em;text-transform:uppercase}
.btn{border:0;border-radius:999px;padding:11px 18px;font-weight:700;cursor:pointer;font-family:inherit;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;line-height:1;
  transition:transform .18s,opacity .18s,background .18s}
.btn:hover{transform:translateY(-1px);opacity:.92}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.dark{background:#111;color:#fff}
.blue{background:var(--blue);color:#fff}
.soft{background:#f0f1f3;color:#111}
.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.cartbtn{position:relative}
.cartbtn b{position:absolute;top:-3px;right:-3px;background:var(--blue);color:#fff;font-size:10px;min-width:19px;height:19px;
  border-radius:999px;display:grid;place-items:center;padding:0 5px}

/* ---------------------------------------------------------------- mobile nav */
/* The burger is hidden on desktop and takes over from .links below 1080px.
   Without it the links were simply hidden and nothing replaced them, which
   left a phone with no way to reach any section. */
.burger{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  padding:0;place-items:center;flex:none;border-radius:10px}
.burger:hover{background:#f0f1f3}
.burger span{display:block;width:19px;height:1.8px;background:#111;border-radius:2px;
  transition:transform .24s,opacity .16s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}

.mobmenu{display:none;position:fixed;left:0;right:0;top:calc(var(--nav-h) + var(--top-h,0px));
  z-index:59;background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);padding:8px 0 18px;
  max-height:calc(100vh - var(--nav-h));overflow-y:auto;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:transform .22s,opacity .22s}
.mobmenu.on{transform:translateY(0);opacity:1;pointer-events:auto}
.mobmenu a{display:block;padding:15px 0;font-size:16px;font-weight:650;color:#1a1c20;
  border-bottom:1px solid var(--line)}
.mobmenu a:last-of-type{border-bottom:0}
/* the two buttons at the foot of the panel are anchors too, so they have to
   opt back out of the plain-link treatment above */
.mobmenu a.mobtel,.mobmenu a.mobcta{border-bottom:0;text-align:center}
.mobmenu a.mobcta{color:#fff;padding:14px 18px}
.mobtel{display:none;margin-top:16px;padding:14px 0;text-align:center;border-radius:999px;
  background:#f0f1f3;font-size:14px;font-weight:700;color:#111}
.mobtel small{display:block;font-size:10px;font-weight:600;color:var(--ink-3);
  letter-spacing:.09em;text-transform:uppercase;margin-top:3px}

.mobcta{display:none;margin-top:10px;width:100%}

@media(max-width:1080px){
  .links{display:none}
  .burger{display:grid}
  .mobmenu{display:block}
}
@media(max-width:700px){
  .navtel{display:none}
  .mobtel{display:block}
  /* Below this the brand, two pill buttons and the burger no longer fit on
     one row and the bar overflows the viewport. Get a quote moves into the
     panel; Partner sign in stays, since it is the reason a dealer is here. */
  #navQuote{display:none}
  .mobcta{display:flex}
  .navright{gap:6px}
  .nav{gap:8px}
  .btn{padding:10px 14px;font-size:12.5px}
}

/* ---------------------------------------------------------------- hero */
.hero{background:var(--panel);color:#fff;border-radius:0 0 40px 40px;overflow:hidden;position:relative}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 480px at 78% 18%, rgba(255,255,255,.09), transparent 62%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding-block:74px 64px}
.kick{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-weight:750;color:#b9bcc3;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
  padding:7px 14px;border-radius:999px}
.kick i{width:6px;height:6px;border-radius:50%;background:#4ade80;font-style:normal}
.hero h1{font-size:clamp(40px,5.1vw,70px);line-height:.98;letter-spacing:-.05em;font-weight:700;margin:22px 0 0}
.hero h1 em{font-style:normal;color:#7f838c}
.hero .lead{font-size:18px;line-height:1.6;color:#b9bcc3;max-width:50ch;margin:22px 0 0}
.hero .cta{display:flex;gap:11px;margin-top:32px;flex-wrap:wrap}
.heroart{position:relative;aspect-ratio:1;border-radius:32px;overflow:hidden;background:#000;
  box-shadow:0 40px 90px rgba(0,0,0,.5)}
.heroart img{width:100%;height:100%;object-fit:contain;display:block}
.trust{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12)}
.trust > div{padding:24px 22px 30px}
.trust > div + div{border-left:1px solid rgba(255,255,255,.12)}
.trust b{display:block;font-size:22px;letter-spacing:-.03em;margin-bottom:5px}
.trust span{font-size:11.5px;color:#8f939a;line-height:1.45;display:block}
@media(max-width:940px){.hero-in{grid-template-columns:1fr;padding-block:52px 46px}.heroart{max-width:460px}.trust{grid-template-columns:1fr 1fr}
  .trust div:nth-child(3){border-left:0}.trust div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}}
@media(max-width:560px){.hero{border-radius:0 0 26px 26px}.trust{grid-template-columns:1fr}
  .trust div+div{border-left:0;border-top:1px solid rgba(255,255,255,.12)}}

/* ---------------------------------------------------------------- sections */
.sec{padding-block:92px}
.head{display:flex;justify-content:space-between;align-items:end;gap:44px;margin-bottom:26px}
.head h2{font-size:clamp(32px,4.2vw,48px);letter-spacing:-.05em;line-height:1.02}
.head p{max-width:460px;color:var(--ink-2);line-height:1.6;margin:0;font-size:15px}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#74767d}

.gate{display:flex;align-items:center;gap:16px;background:var(--soft);border-radius:18px;padding:14px 18px;margin-bottom:24px;flex-wrap:wrap}
.gate .txt{font-size:13.5px;color:var(--ink-2);flex:1;min-width:230px;line-height:1.5}
.gate .txt b{color:var(--ink)}
.gate.on{background:#eef4ff}
.gate.quoteonly{background:var(--panel)}
.gate.quoteonly .txt{color:#9da0a6}
.gate.quoteonly .txt b{color:#fff}
.gate.quoteonly .btn{background:#fff;color:#111;flex:none}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-size:13px;font-weight:600;
  color:var(--ink-2);cursor:pointer;font-family:inherit;transition:.16s}
.chip:hover{border-color:#c9c9cf}
.chip[aria-pressed="true"]{background:#111;border-color:#111;color:#fff}
.chip small{font-weight:500;opacity:.55;margin-left:5px}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.loading{grid-column:1/-1;padding:80px 20px;text-align:center;color:var(--ink-3);font-size:14px}
.card{background:var(--soft);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1)}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 60px rgba(0,0,0,.11)}
.mainpic{height:310px;position:relative;display:flex;align-items:center;justify-content:center;padding:26px;
  background:radial-gradient(120% 90% at 50% 22%, #ffffff 0%, #f0f0f3 78%);overflow:hidden}
.mainpic img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.14))}
.card:hover .mainpic img{transform:scale(1.055)}
.mainpic.flat{background:#0c0d0f;padding:0}
.mainpic.flat img{filter:none;max-width:none;max-height:none;width:100%;height:100%}
.mainpic.noimg::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:30px;color:#b3b6bd;font-size:12px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  line-height:1.7;background:repeating-linear-gradient(45deg,#fafafb,#fafafb 11px,#f1f1f4 11px,#f1f1f4 22px)}
.body{padding:22px;display:flex;flex-direction:column;flex:1}
.type{font-size:10px;letter-spacing:.14em;color:#81848b;font-weight:800;text-transform:uppercase}
.body h3{font-size:20px;letter-spacing:-.032em;margin:8px 0;line-height:1.15}
.desc{font-size:12.5px;color:#71747b;line-height:1.55;min-height:38px}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.meta span{font-size:10px;background:#fff;padding:6px 9px;border-radius:999px;color:var(--ink-2);font-weight:650}

.swatchbar{margin:16px 0 4px}
.swlabel{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:#81848b;margin-bottom:9px;min-height:12px}
.swrow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.sw{width:24px;height:24px;border-radius:50%;border:1px solid rgba(0,0,0,.14);background:var(--c);padding:0;cursor:pointer;
  transition:transform .18s,box-shadow .18s;flex:none}
.sw:hover{transform:scale(1.16)}
.sw.active{box-shadow:0 0 0 2px var(--soft),0 0 0 4px #111}
.sw.off{opacity:.42;cursor:not-allowed;position:relative}
.sw.off:hover{transform:none}
.sw.off::after{content:"";position:absolute;left:-3px;right:-3px;top:calc(50% - 1px);height:1.5px;background:#5f6268;transform:rotate(-45deg)}
.swdiv{width:1px;height:20px;background:#dcdce0;margin:0 2px;flex:none}
.view{width:34px;height:34px;border-radius:8px;border:1px solid #dcdce0;background:#fff;overflow:hidden;padding:0;cursor:pointer;
  flex:none;transition:transform .18s}
.view:hover{transform:scale(1.09)}
.view.active{box-shadow:0 0 0 2px var(--soft),0 0 0 4px #111}
.view img{width:100%;height:100%;object-fit:cover}

.foot{border-top:1px solid #dedee1;margin-top:auto;padding-top:15px}
.footlocked{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:750;color:var(--ink-2)}
.footlocked em{font-style:normal;color:var(--blue);transition:transform .2s}
.card:hover .footlocked em{transform:translateX(3px)}
.pricing{display:none}
.dealer .pricing{display:block}
.dealer .footlocked{display:none}
.vrow{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #e4e4e7}
.vrow:last-child{border-bottom:0}
.vname{font-size:12px;font-weight:650;flex:1;min-width:0}
.vname small{display:block;font-weight:500;color:#8a8d94;font-size:10px}
.vprice{font-size:12px;font-weight:750;white-space:nowrap;text-align:right}
.vprice small{display:block;font-weight:500;color:#8a8d94;font-size:9.5px}
.askprice{font-size:11px;font-weight:650;color:var(--ink-3);white-space:nowrap}
.vrow.unpriced .vname{opacity:.55}
.step{display:flex;align-items:center;background:#fff;border:1px solid #dedee1;border-radius:999px}
.step button{width:26px;height:26px;border:0;background:none;cursor:pointer;font-size:14px;font-weight:700;color:var(--ink-2);line-height:1}
.step input{width:30px;border:0;text-align:center;font-family:inherit;font-size:12px;font-weight:700;background:none;outline:none;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

@media(max-width:1020px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid{grid-template-columns:1fr}.head{display:block}.head p{margin-top:14px}}

/* ---------------------------------------------------------------- white label */
.wl{background:var(--soft);border-radius:38px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.wl h2{font-size:clamp(32px,4.2vw,50px);letter-spacing:-.05em;line-height:1.0;margin:14px 0 18px}
.wl p{color:var(--ink-2);line-height:1.65;margin:0 0 24px;font-size:15.5px}
.wlsteps{display:grid;gap:12px}
.wlstep{background:#fff;border-radius:18px;padding:18px 20px;display:flex;gap:16px;align-items:flex-start;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}
.wlstep:hover{transform:translateX(5px);box-shadow:0 12px 34px rgba(0,0,0,.07)}
.wlstep .n{font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:var(--blue);
  background:#eaf1ff;border-radius:7px;padding:5px 8px;flex:none;margin-top:1px}
.wlstep b{display:block;font-size:14px;margin-bottom:4px}
.wlstep span{font-size:12.5px;color:var(--ink-2);line-height:1.55}
@media(max-width:880px){.wl{grid-template-columns:1fr;padding:34px;border-radius:28px;gap:32px}}

/* ---------------------------------------------------------------- why */
.why{background:var(--panel);color:#fff;border-radius:38px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:52px}
.why h2{font-size:clamp(34px,4.4vw,52px);line-height:1.0;letter-spacing:-.05em;margin:12px 0 18px}
.why > div:first-child > p{color:#b9bcc3;line-height:1.65;margin:0 0 26px}
.points{display:grid;gap:11px;align-content:center}
.point{background:var(--panel-2);border:1px solid #292a2e;padding:18px;border-radius:18px;
  transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s}
.point:hover{transform:translateY(-3px);border-color:#3d3f45}
.point b{display:block;font-size:13.5px;margin-bottom:4px}
.point span{font-size:12px;color:#9da0a6;line-height:1.55;display:block}
@media(max-width:880px){.why{grid-template-columns:1fr;padding:34px;border-radius:28px;gap:32px}}

/* ---------------------------------------------------------------- about */
/* Named areas so the facts can sit under the heading on desktop but read
   after the story on a phone, where a data table before the prose is backwards. */
.about{display:grid;grid-template-columns:.85fr 1fr;column-gap:70px;row-gap:0;align-items:start;
  grid-template-areas:"intro story" "facts story";
  /* row 1 hugs the heading; the spare height from the longer story column all
     lands in row 2 instead of opening a gap under it */
  grid-template-rows:auto 1fr}
.aintro{grid-area:intro}
.about .story{grid-area:story}
.about .facts{grid-area:facts;align-self:start}
.about h2{font-size:clamp(32px,4.2vw,48px);letter-spacing:-.05em;line-height:1.02;margin:14px 0 0}
.story p{color:var(--ink-2);line-height:1.75;font-size:15.5px;margin:0 0 18px}
.story p:first-child{font-size:18px;color:var(--ink);line-height:1.6}
/* Sits in the narrow left column, so it reads as a stacked spec list rather
   than boxes squeezed two-across. */
.facts{margin-top:34px;border-top:1px solid var(--line)}
.facts > div{padding:15px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:18px;row-gap:4px;align-items:baseline}
.facts .k{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:750;padding-top:3px}
.facts .v{font-size:19px;font-weight:700;letter-spacing:-.03em}
.facts .n{font-size:12.5px;color:var(--ink-2);margin-top:3px;line-height:1.5;grid-column:2}
@media(max-width:880px){.about{grid-template-columns:1fr;row-gap:30px;grid-template-areas:"intro" "story" "facts"}}

/* ---------------------------------------------------------------- contact */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contactgrid h2{font-size:clamp(32px,4.2vw,46px);letter-spacing:-.05em;margin:12px 0 15px}
.contactgrid > div > p{color:var(--ink-2);line-height:1.6}
.details{display:grid;gap:12px;margin-top:26px}
.detail{background:var(--soft);border-radius:18px;padding:18px;transition:background .2s}
.detail:hover{background:#eef0f3}
.detail small{display:block;color:#81848a;text-transform:uppercase;letter-spacing:.1em;font-weight:750;margin-bottom:5px;font-size:10px}
.detail b{font-size:14px}
.form{background:var(--soft);border-radius:28px;padding:30px}
.f{margin-bottom:13px}
.f label{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:#81848a;margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;
  border:1px solid #e2e2e6;border-radius:12px;padding:12px 14px;outline:none;transition:.16s}
.f input:focus,.f select:focus,.f textarea:focus{border-color:#111}
.form .btn{width:100%;padding:14px;margin-top:6px}
.formnote{font-size:11px;color:#8a8d94;margin:12px 0 0;line-height:1.55}
@media(max-width:880px){.contactgrid{grid-template-columns:1fr;gap:34px}.form{padding:22px}}

footer{border-top:1px solid var(--line);padding:34px 0 54px;color:#83868c;font-size:12px}
.fin{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1280px;margin:auto;padding:0 30px}

/* ---------------------------------------------------------------- drawer + modal */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .25s;z-index:70}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:#fff;z-index:80;transform:translateX(100%);
  transition:transform .34s cubic-bezier(.32,.72,0,1);display:flex;flex-direction:column;box-shadow:-20px 0 60px rgba(0,0,0,.16)}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--line)}
.dhead h3{font-size:20px;letter-spacing:-.03em}
.dhead button{border:0;background:none;font-size:22px;cursor:pointer;color:#8a8d94;line-height:1}
.ditems{flex:1;overflow:auto;padding:8px 24px}
.ditem{display:flex;gap:12px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.ditem .n{flex:1;font-size:13px;font-weight:650;line-height:1.3}
.ditem .n small{display:block;font-weight:500;color:#8a8d94;font-size:11px;margin-top:3px}
.ditem .p{font-size:13px;font-weight:750;white-space:nowrap}
.ditem .x{border:0;background:none;color:#b3b6bd;cursor:pointer;font-size:15px;padding:0 2px}
.empty{text-align:center;color:var(--ink-3);font-size:13px;padding:70px 20px;line-height:1.7}
.dfoot{border-top:1px solid var(--line);padding:20px 24px 24px}
.sum{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);margin-bottom:9px}
.sum.tot{font-size:19px;font-weight:750;color:var(--ink);border-top:1px solid var(--line);padding-top:13px;margin-top:13px}
.pay{display:flex;gap:8px;margin:14px 0 12px}
.pay button{flex:1;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 8px;font-family:inherit;
  font-size:12px;font-weight:650;cursor:pointer;color:var(--ink-2);line-height:1.3}
.pay button small{display:block;font-weight:500;font-size:10px;opacity:.7;margin-top:2px}
.pay button[aria-pressed="true"]{border-color:#111;color:#111;background:#f7f7f9}
.dfoot .btn{width:100%;padding:15px}
.dnote{font-size:10.5px;color:var(--ink-3);text-align:center;margin:11px 0 0;line-height:1.6}
@media(max-width:620px){.drawer{width:100%}}

.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-46%) scale(.97);width:400px;max-width:92vw;background:#fff;
  border-radius:28px;padding:34px 30px 30px;z-index:80;opacity:0;pointer-events:none;transition:.26s;
  box-shadow:0 30px 80px rgba(0,0,0,.26)}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.modal h3{font-size:25px;letter-spacing:-.04em}
.msub{font-size:13px;color:#8a8d94;line-height:1.55;margin:8px 0 20px}
.mclose{position:absolute;top:18px;right:20px;border:0;background:none;font-size:22px;color:#b3b6bd;cursor:pointer;line-height:1}
.err{font-size:12.5px;color:var(--red);background:#fdeceb;border-radius:10px;padding:10px 12px;margin:0 0 12px;line-height:1.5}

/* ---------------------------------------------------------------- motion */
.rise{opacity:0;transform:translateY(20px)}
.rise.in{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
.stag>*{opacity:0;transform:translateY(16px)}
.stag.in>*{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1)}
.stag.in>*:nth-child(1){transition-delay:.03s}
.stag.in>*:nth-child(2){transition-delay:.09s}
.stag.in>*:nth-child(3){transition-delay:.15s}
.stag.in>*:nth-child(4){transition-delay:.21s}
.stag.in>*:nth-child(5){transition-delay:.27s}
.stag.in>*:nth-child(6){transition-delay:.33s}
@keyframes heroUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero-in>div>*{animation:heroUp .7s cubic-bezier(.22,1,.36,1) both}
.hero-in>div>*:nth-child(2){animation-delay:.07s}
.hero-in>div>*:nth-child(3){animation-delay:.14s}
.hero-in>div>*:nth-child(4){animation-delay:.21s}
.heroart{animation:heroUp .9s cubic-bezier(.22,1,.36,1) .12s both}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .rise,.stag>*{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------------------------------------------------------------- product detail page */
.pdp{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;padding:44px 0 40px;align-items:start}
.crumb{font-size:12px;color:var(--ink-3);font-weight:600;padding:22px 0 0}
.crumb a:hover{color:var(--ink)}
.pdpshot{border-radius:30px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:46px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 22%, #ffffff 0%, #eeeef1 78%);position:relative}
.pdpshot img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 26px 40px rgba(0,0,0,.16));
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.pdpshot.flat{background:#0c0d0f;padding:0}
.pdpshot.flat img{width:100%;height:100%;filter:none}
.pdpshot.noimg::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:40px;color:#b3b6bd;font-size:13px;font-weight:750;letter-spacing:.07em;text-transform:uppercase;
  background:repeating-linear-gradient(45deg,#fafafb,#fafafb 13px,#f1f1f4 13px,#f1f1f4 26px)}
.pdp h1{font-size:clamp(32px,4vw,46px);letter-spacing:-.048em;line-height:1.04;margin:10px 0 16px}
.pdp .blurb{font-size:16.5px;color:var(--ink-2);line-height:1.65;margin:0 0 26px}
.specs{border-top:1px solid var(--line);margin-top:8px}
.specrow{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.specrow .k{color:var(--ink-2)}
.specrow .v{font-weight:650;text-align:right}
.pdpbuy{background:var(--soft);border-radius:22px;padding:22px;margin-top:26px}
.pdpbuy h4{margin:0 0 4px;font-size:14px}
.pdpbuy .sub{font-size:12.5px;color:var(--ink-2);margin:0 0 16px;line-height:1.5}
.pdpbuy > .btn{width:100%;padding:14px}
.related{padding-block:20px 90px}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:32px;padding:20px 0 30px}}

/* long-form detail under the swatches. Each block only renders when the
   source listing actually had one, so the spacing has to work whether all
   three are present or only the paragraph. */
.detail{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.detail h3{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#81848b;
  font-weight:750;margin:0 0 12px}
.detail h3+*{margin-top:0}
.detail>*+h3{margin-top:28px}
.detail p{font-size:14.5px;line-height:1.72;color:var(--ink-2);margin:0 0 12px}
.detail p:last-child{margin-bottom:0}
.detail ul{margin:0;padding:0;list-style:none}
.detail li{font-size:14.5px;line-height:1.6;color:var(--ink-2);padding:7px 0 7px 20px;position:relative}
.detail li::before{content:"";position:absolute;left:2px;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--blue)}

/* ---------------------------------------------------------------- counter reel */
.reel{background:var(--panel);color:#fff;border-radius:38px;padding:52px;display:grid;
  grid-template-columns:.72fr 1fr;gap:56px;align-items:center;position:relative;overflow:hidden}
.reel::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 420px at 22% 30%, rgba(255,255,255,.07), transparent 62%)}
.reel > *{position:relative}
.reelvid{position:relative;border-radius:26px;overflow:hidden;background:#000;aspect-ratio:720/1140;
  box-shadow:0 34px 70px rgba(0,0,0,.5)}
.reelvid video{width:100%;height:100%;object-fit:cover;display:block}
.reelbtn{position:absolute;left:14px;bottom:14px;width:38px;height:38px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:grid;place-items:center;opacity:0;transition:opacity .22s,transform .18s}
.reelvid:hover .reelbtn,.reelbtn:focus-visible{opacity:1}
.reelbtn:hover{transform:scale(1.07)}
.reelbtn svg{width:15px;height:15px;fill:#fff}
.reel h2{font-size:clamp(30px,3.9vw,46px);line-height:1.04;letter-spacing:-.05em;margin:12px 0 18px}
.reel > div > p{color:#b9bcc3;line-height:1.65;margin:0 0 26px;font-size:15.5px;max-width:52ch}
.reelpoints{display:grid;gap:14px}
.reelpoints > div{padding-left:16px;border-left:2px solid #2c2e33;transition:border-color .28s}
.reelpoints > div:hover{border-color:var(--blue)}
.reelpoints b{display:block;font-size:13.5px;margin-bottom:3px}
.reelpoints span{font-size:12.5px;color:#9da0a6;line-height:1.55;display:block}
@media(max-width:880px){
  .reel{grid-template-columns:1fr;padding:32px;border-radius:28px;gap:30px}
  .reelvid{max-width:300px;margin:auto}
  .reelbtn{opacity:1}
}

/* ---------------------------------------------------------------- density toggle */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.toolbar .filters{margin-bottom:0}
.density{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:#fff;flex:none}
.density button{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:650;color:var(--ink-2);padding:7px 15px;border-radius:999px;transition:.16s}
.density button svg{width:13px;height:13px;fill:currentColor}
.density button[aria-pressed="true"]{background:#111;color:#fff}

/* ---------------------------------------------------------------- stock */
.badge{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:5px 10px;border-radius:999px;font-size:10px;font-weight:750;letter-spacing:.04em;color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.1);transition:opacity .25s}
.badge i{width:6px;height:6px;border-radius:50%;display:block}
.card:hover .badge{opacity:0}
.mainpic.flat .badge{background:rgba(0,0,0,.62);color:#fff;box-shadow:none}

/* ---------------------------------------------------------------- list view */
.lhead,.lrow{display:grid;grid-template-columns:52px minmax(0,2.1fr) minmax(0,1.7fr) 118px 92px 84px;
  gap:16px;align-items:center}
.lhead{padding:0 14px 10px;border-bottom:1px solid var(--line);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:var(--ink-3)}
.lrow{padding:12px 14px;border-bottom:1px solid var(--line-soft,#f0f0f2);transition:background .18s}
.lrow:hover{background:var(--soft)}
.lpic{width:52px;height:52px;border-radius:9px;overflow:hidden;background:#f0f0f3;display:flex;
  align-items:center;justify-content:center;padding:5px}
.lpic.flat{padding:0;background:#0c0d0f}
.lpic img{max-width:100%;max-height:100%;object-fit:contain}
.lpic.flat img{width:100%;height:100%;object-fit:cover}
.lname{font-size:14px;font-weight:650;line-height:1.3;min-width:0}
.lname small{display:block;font-size:10px;font-weight:500;color:var(--ink-3);letter-spacing:.03em;margin-bottom:2px}
.lspec{display:flex;gap:5px;flex-wrap:wrap;min-width:0}
.lspec em{font-style:normal;font-size:10px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);
  border-radius:5px;padding:3px 6px;white-space:nowrap}
.lstock{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:650;white-space:nowrap}
.lstock i{width:6px;height:6px;border-radius:50%;flex:none}
.lstock.warn{color:#a2620f}
.lstock.bad{color:var(--red)}
.lstock.grey{color:var(--ink-3)}
.lcase{font-size:11.5px;color:var(--ink-2);white-space:nowrap;text-align:right}
.lgo{font-size:11.5px;font-weight:700;color:var(--blue);text-align:right;white-space:nowrap;
  transition:transform .2s;display:inline-block}
.lrow:hover .lgo{transform:translateX(3px)}
@media(max-width:1080px){
  .lhead,.lrow{grid-template-columns:44px minmax(0,2fr) 112px 84px}
  .lspec,.lgo{display:none}
  .lpic{width:44px;height:44px}
}
@media(max-width:560px){
  .lhead{display:none}
  .lrow{grid-template-columns:44px minmax(0,1fr);gap:12px;row-gap:8px;padding:14px}
  .lstock,.lcase{grid-column:2;text-align:left;justify-self:start}
}

/* ---------------------------------------------------------------- form success */
.sent{text-align:center;padding:14px 6px 8px}
.sent .tick{width:52px;height:52px;border-radius:50%;background:#e8f6ec;color:#166534;display:grid;place-items:center;
  font-size:24px;font-weight:700;margin:0 auto 20px;animation:pop .45s cubic-bezier(.22,1.4,.4,1) both}
.sent h3{font-size:23px;letter-spacing:-.035em;margin:0 0 12px}
.sent p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.sent .small{font-size:12.5px;color:var(--ink-3);margin-bottom:22px}
.sent .small b{color:var(--ink-2)}
.sent .btn{padding:13px 24px}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.sent .tick{animation:none}}

/* ---------------------------------------------------------------- order matrix */
.matrix{margin-top:4px}
.nomatrix{font-size:12px;color:var(--ink-3);padding:10px 0;line-height:1.5}
.mhead,.mrow{display:grid;grid-template-columns:minmax(74px,1fr) repeat(var(--cols,5),minmax(0,42px));
  gap:6px;align-items:center}
.matrix.single .mhead,.matrix.single .mrow{grid-template-columns:minmax(74px,1fr) 62px}
.mhead{padding-bottom:7px;border-bottom:1px solid #e0e0e4;margin-bottom:4px}
.mcorner{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;color:var(--ink-3)}
.mcol{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.mcol i{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.16);flex:none}
.mcol em{font-style:normal;font-size:8.5px;font-weight:650;color:var(--ink-3);letter-spacing:.02em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow{padding:5px 0}
.mlab{font-size:12px;font-weight:650;line-height:1.2;min-width:0}
.mlab small{display:block;font-weight:500;color:#8a8d94;font-size:9.5px;margin-top:2px}
.qty{width:100%;min-width:0;border:1px solid #dcdce0;border-radius:8px;background:#fff;text-align:center;
  font-family:inherit;font-size:13px;font-weight:650;padding:7px 2px;outline:none;transition:.15s;color:var(--ink)}
.qty::placeholder{color:#c4c6cb;font-weight:400}
.qty:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(18,104,255,.12)}
.qty:not(:placeholder-shown){border-color:#111;background:#f7f7f9}
.mfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px solid #e0e0e4}
.mtot{font-size:11px;font-weight:650;color:var(--ink-2);min-width:0;line-height:1.35}
.madd{padding:9px 15px;font-size:12px;flex:none}
.pdpbuy .matrix{margin-top:14px}
.pdpbuy .mfoot{flex-wrap:wrap}
.pdpbuy .madd{width:auto;padding:11px 20px;font-size:13px}
.pdpbuy .mtot{font-size:12px;flex:1 1 auto}
.pdpbuy .mlab{font-size:13px}
.pdpbuy .qty{padding:9px 2px;font-size:14px}
.pdpbuy .mhead,.pdpbuy .mrow{gap:8px;grid-template-columns:minmax(96px,1fr) repeat(var(--cols,5),minmax(0,52px))}
.ditem .cdot{display:inline-block;width:9px;height:9px;border-radius:50%;border:1px solid rgba(0,0,0,.18);
  margin:0 3px 0 5px;vertical-align:0}
@media(max-width:420px){
  .mhead,.mrow{grid-template-columns:minmax(62px,1fr) repeat(var(--cols,5),minmax(0,36px));gap:4px}
  .qty{font-size:12px;padding:6px 1px}
}

.ok{font-size:12.5px;color:#166534;background:#e8f6ec;border-radius:10px;padding:10px 12px;margin:0 0 12px;line-height:1.5}

.sent .small b.warn{color:#8a5a00}

/* ---------------------------------------------------------------- compliance */
.comply{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid #292a2e;margin-top:4px;padding-top:16px}
.cmark{font-size:10.5px;font-weight:800;letter-spacing:.09em;color:#c9ccd2;
  border:1px solid #3a3c42;border-radius:6px;padding:5px 9px;flex:none}
.cmark.ce{opacity:.55}
.comply p{flex:1 1 240px;font-size:11.5px;color:#8f939a;line-height:1.55;margin:0}
.comply a{color:#8baaff;text-decoration:underline;text-underline-offset:2px}
.comply a:hover{color:#a9c0ff}

/* product page */
.specrow .cmarks{display:inline-flex;gap:5px;vertical-align:-1px}
.specrow .cmarks em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;
  color:var(--ink-2);border:1px solid var(--line);border-radius:5px;padding:3px 6px}
.docbtn{display:block;width:100%;margin-top:10px;padding:12px;background:#fff;color:var(--ink);
  border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;text-align:center;text-decoration:none;transition:.16s}
.docbtn:hover{border-color:#111}

/* ================================================================ retail displays
   Hero slideshow plus the two program sections that sit above the catalog.
   Every class here is new. Nothing above this line is touched, and the names
   are prefixed where the sheet already owns a word: .step is the order-quantity
   control, so the program steps are .pstep. */

/* -- hero slideshow ------------------------------------------------------
   Both slides occupy the same grid cell so the trust bar below never shifts
   when they swap, and they share one aspect ratio for the same reason. The
   cable shot letterboxes into the black frame it already sits on. */
.hero .heroart.vid{aspect-ratio:900/720;background:#8f8f8f}
.heroart.vid video{width:100%;height:100%;object-fit:cover;display:block}
.heroart .vtag{position:absolute;left:16px;bottom:16px;z-index:2;background:rgba(12,13,15,.72);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:10.5px;
  font-weight:700;letter-spacing:.13em;padding:7px 12px;border-radius:999px}
.herotag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#0b0b0d;background:#fff;
  padding:7px 13px;border-radius:999px}
.beat{font-size:17px;font-weight:700;letter-spacing:-.01em;color:#fff;margin:24px 0 0}
.beat i{font-style:normal;color:#6f737a;margin:0 9px}

.vbtn{position:absolute;right:14px;bottom:14px;z-index:2;width:34px;height:34px;border:0;
  border-radius:50%;background:rgba(12,13,15,.72);backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;font-size:11px;display:grid;place-items:center}

/* -- program steps ------------------------------------------------------- */
.psteps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:46px}
.pstep{padding:0 26px;position:relative}
.pstep:first-child{padding-left:0}
.pstep:not(:first-child)::before{content:"";position:absolute;left:0;top:9px;bottom:4px;width:1px;background:var(--line)}
.pstep .n{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:13.5px;font-weight:800;margin-bottom:16px}
.pstep h3{font-size:13px;font-weight:800;letter-spacing:.1em;margin-bottom:10px}
.pstep p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.ploop{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.ploop b{color:var(--ink)}

/* -- what is inside ------------------------------------------------------ */
.inside{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:start}
.itable{width:100%;border-collapse:collapse;font-size:14px}
.itable th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.13em;color:var(--ink-3);
  padding:0 0 12px;border-bottom:1px solid var(--line)}
.itable th:last-child,.itable td:last-child{text-align:right}
.itable td{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.itable td:last-child{color:var(--ink);font-weight:700}
.itable tfoot td{font-weight:800;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0;padding-top:14px}
.qbox{background:var(--soft);border-radius:18px;padding:24px;margin-top:26px}
.qbox .t{font-size:14px;font-weight:800;margin-bottom:8px}
.qbox p{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0 0 16px}

@media(max-width:940px){
  .psteps{grid-template-columns:1fr 1fr}
  .pstep{padding:0 18px 26px}
  .pstep:nth-child(3){padding-left:0}
  .pstep:nth-child(3)::before{display:none}
  .inside{grid-template-columns:1fr;gap:34px}
}
@media(max-width:600px){
  .psteps{grid-template-columns:1fr}
  .pstep{padding:0 0 24px}
  .pstep::before{display:none!important}
}

/* the display section owns its heading rather than borrowing .head, which is
   built to push a paragraph out to the right of the catalog title */
.dprog h2{font-size:clamp(32px,4.2vw,48px);letter-spacing:-.05em;line-height:1.02;margin:12px 0 0}
.dprog p{color:var(--ink-2);line-height:1.65;margin:18px 0 0;font-size:16px;max-width:66ch}
.inside{margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.ih2{font-size:clamp(26px,3vw,34px);letter-spacing:-.04em;line-height:1.05;margin:12px 0 0;font-weight:700}
.ilead{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:16px 0 0;max-width:44ch}

/* the single-video hero needs its own play control */
.hero .heroart{position:relative}

/* The trust strip carries two different kinds of fact: what the company is,
   and what is in the display. Four identical tiles in a row read as one list,
   so "112 units" looked like a company number. Labelling the pairs is what
   makes each figure mean something. */
.trust2{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid rgba(255,255,255,.12)}
.trust2 .tgroup{padding:20px 0 30px}
.trust2 .tgroup + .tgroup{border-left:1px solid rgba(255,255,255,.12)}
.trust2 .tgroup:first-child .tcells > div:first-child{padding-left:0}
.tlabel{font-size:10px;font-weight:800;letter-spacing:.16em;color:#6f737a;
  padding:0 22px 14px;margin:0}
.trust2 .tgroup:first-child .tlabel{padding-left:0}
.tcells{display:grid;grid-template-columns:1fr 1fr}
.tcells > div{padding:0 22px}
.tcells > div + div{border-left:1px solid rgba(255,255,255,.12)}
.trust2 b{display:block;font-size:22px;letter-spacing:-.03em;margin-bottom:5px}
.trust2 span{font-size:11.5px;color:#8f939a;line-height:1.45;display:block}
@media(max-width:940px){
  .trust2{grid-template-columns:1fr}
  .trust2 .tgroup + .tgroup{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .trust2 .tgroup .tlabel{padding-left:0}
  .trust2 .tgroup .tcells > div:first-child{padding-left:0}
}
@media(max-width:560px){
  .tcells{grid-template-columns:1fr}
  .tcells > div + div{border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:18px}
  .tcells > div{padding-left:0}
}

/* Contact: the five info cards ran 824px against a 632px form, which left a
   long tail of white space beside it. Tighter cards and a two-up row for the
   short ones bring the column back to the form's height. */
.details{gap:9px;margin-top:22px}
.detail{padding:13px 16px;border-radius:14px}
.detail small{margin-bottom:3px}
.detail b{font-size:13.5px;line-height:1.4}
.details .pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}
@media(max-width:560px){.details .pair{grid-template-columns:1fr}}

/* Two full-width sections stacked their own vertical padding, so the seam
   between the display table and the catalog read as a hole. */
#displays{padding-bottom:34px}

/* ============================================================== footer
   A one-line footer had nowhere to put the legal pages, and those pages are
   the ones a buyer looks for before wiring money to a supplier they have not
   met. Columns first, then the legal row. */
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
  max-width:1280px;margin:auto;padding:0 30px 34px}
.fbrand b{display:block;font-size:15px;color:var(--ink);letter-spacing:-.02em;margin-bottom:10px}
.fbrand p{margin:0 0 6px;line-height:1.6;font-size:12px;color:#83868c}
.fbrand a{color:#83868c}
.fbrand a:hover{color:var(--ink)}
.fcol h4{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
  color:#9a9da4;margin:0 0 12px}
.fcol a{display:block;font-size:12.5px;color:#5f6268;padding:5px 0;line-height:1.4}
.fcol a:hover{color:var(--ink)}
.flegal{border-top:1px solid var(--line);max-width:1280px;margin:auto;padding:20px 30px 0;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.flegal nav{display:flex;gap:18px;flex-wrap:wrap}
.flegal a{color:#83868c}
.flegal a:hover{color:var(--ink)}
.flegal button{border:0;background:none;font:inherit;color:#83868c;cursor:pointer;padding:0}
.flegal button:hover{color:var(--ink)}
@media(max-width:880px){
  .fcols{grid-template-columns:1fr 1fr;gap:28px}
  .flegal{flex-direction:column;align-items:flex-start;gap:12px}
}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}

/* legal pages */
.legal{max-width:760px;margin:auto;padding:54px 30px 80px}
.legal h1{font-size:clamp(30px,4vw,42px);letter-spacing:-.04em;line-height:1.05;margin:0 0 10px}
.legal .upd{font-size:12px;color:var(--ink-3);margin:0 0 34px}
.legal h2{font-size:19px;letter-spacing:-.02em;margin:34px 0 10px}
.legal h3{font-size:15px;margin:22px 0 8px}
.legal p,.legal li{font-size:15px;line-height:1.72;color:var(--ink-2)}
.legal ul{padding-left:20px;margin:10px 0}
.legal li{margin-bottom:6px}
.legal strong{color:var(--ink)}
.legal a{color:var(--blue)}
.legal .note{background:var(--soft);border-radius:16px;padding:18px 20px;margin:26px 0;font-size:14px}
.legal table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0}
.legal th{text-align:left;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);padding:0 10px 10px 0;border-bottom:1px solid var(--line)}
.legal td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
/* the old one-line footer rule still drew a rule under the legal row */
footer .fin{display:none}
.flegal{padding-bottom:0}
footer{padding-bottom:44px}

/* Retail value of the display. The figure is summed from the contents table
   at run time rather than typed in, because a hard-coded total silently goes
   wrong the moment a price or a quantity changes, and a buyer can check this
   number against mottousa.com in about a minute. */
.retailval{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid #e3e4e7}
.retailval b{display:block;font-size:27px;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.retailval em{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--ink-2);margin:6px 0 7px}
.retailval span{display:block;font-size:12px;line-height:1.5;color:var(--ink-3)}

/* Boxes arrive with the colourways mixed, so the grid asks for boxes rather
   than a quantity per colour. The swatches stay, because a buyer still wants
   to know what is in the box; they are now a statement of contents rather
   than a set of choices. */
.massort{padding:2px 0 13px;font-size:11.5px;line-height:1.5;color:var(--ink-2)}
.massort b{color:var(--ink);font-weight:700}
.matrix.single .mlab small{white-space:nowrap}