/* ============================================================
   Keyless Solutions
   One light theme, two dark moments (the home hero and the bands that change
   material), written as a single cascade. The old file stacked a dark theme,
   a light theme and a token override on top of each other; this replaces all
   three. Every fix the audits measured is carried forward with its reason.

   PALETTE (every text pair measured)
   Ground #F3F5F7, surface #FFFFFF, tone #E8ECF0, ink band #0E1417.
   Text #0F1519 (17:1 on ground), #2E3840 (11:1), #56616A (5.8:1).
   Teal #0B6E5C is the text-safe teal: 5.7:1 on ground, 5.9:1 under white
   button text. The brand accent #44DBBD scores 1.73:1 on white, so it is
   NEVER text on a light ground and never carries white text. It is a fill
   under near-black text (10.9:1) and an accent on the ink band (#5FE3C6 for
   text there, 11.4:1).

   TYPE
   Archivo for display, set a touch wide (wdth 110) from tablet up, weight
   600, tight tracking. Onest for reading. No mono face: figures are set in
   the reading face. Three literal small steps: 13, 15/16, 20.

   SHAPE
   Fewer boxes. Tonal grounds instead of border plus shadow, one radius family
   (14, 20, 28, pill), hairlines only where rows need separating.

   MOTION THESIS
   Content settles, it never performs. A block rises 20px and fades in as it
   enters the viewport, bound to the scroll so it can never lag behind it;
   pages cross-fade into each other; only things you can press respond to the
   pointer. Everything is visible without it: all of it sits behind @supports
   and prefers-reduced-motion.
   ============================================================ */

/* ---------- fonts: fallbacks sized to the real faces ----------
   Arial scaled to Onest's and Archivo's average advance and vertical metrics
   (measured from the woff2 files with fontTools), so text does not reflow
   when the web font arrives. */
@font-face{font-family:'Onest Fallback';src:local('Arial'),local('Helvetica Neue');
  size-adjust:106.21%;ascent-override:91.33%;descent-override:28.72%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica Neue');
  size-adjust:102.51%;ascent-override:85.65%;descent-override:20.49%;line-gap-override:0%}

:root{
  --ground:#F3F5F7;
  --surface:#FFFFFF;
  --tone:#E8ECF0;
  --tone-2:#DCE2E8;
  --ink-band:#0E1417;
  --stage:linear-gradient(180deg,#F8FAFB 0%,#EDF1F4 100%);

  --fg:#0F1519;
  --fg-2:#2E3840;
  --fg-3:#56616A;
  --line:#D6DDE3;
  --line-strong:#8794A3;   /* control boundaries: 3.3:1 on white (WCAG 1.4.11) */

  --teal:#0B6E5C;
  --teal-press:#095A4B;
  --mint:#44DBBD;
  --mint-ink:#5FE3C6;
  --mint-tint:#E0F3ED;
  --accent-text:var(--teal);
  --focus:var(--teal);

  --btn-bg:var(--teal);
  --btn-fg:#FFFFFF;
  --btn-bg-hover:var(--teal-press);
  --btn2-bg:rgba(15,21,25,.07);
  --btn2-bg-hover:rgba(15,21,25,.12);
  --btn2-fg:var(--fg);
  --card-bg:var(--surface);

  --amber:#8A5B00;
  --red:#B0231E;
  --green:#177F4E;

  --display:'Archivo','Archivo Fallback',ui-sans-serif,system-ui,sans-serif;
  --body:'Onest','Onest Fallback',ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --wdth:100%;

  /* Stepped, not fluid: the gutter and the section spacing change at three
     widths, so every band on a page shares the same measure. */
  --gutter:20px; --sec:72px; --sec-lg:88px; --sec-xl:96px;
  --bleed-in:var(--gutter);   /* where full-bleed content lines up with .wrap */
  --wrap-max:1760px;   /* 28 Sep 2026: Nick, use the whole width on a PC */
  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Names the page markup still uses in inline styles. They point at the
     palette above so an inline colour can never fall out of the theme. */
  --txt:#0F1519; --txt-2:#2E3840; --txt-3:#56616A;
  --ink-2:#55616B; --ink-800:#E8ECF0; --edge:#AFBBCA; --hair:#D6DDE3;
  --line-1:#D6DDE3; --paper:#FFFFFF; --paper-2:#F3F5F7; --paper-line:#D6DDE3;
  --paper-ink:#0F1519; --paper-muted:#56616A; --teal-print:#0E7A66;
}
@media(min-width:721px){:root{--wdth:110%;--gutter:clamp(40px,4vw,80px);--sec:104px;--sec-lg:128px;--sec-xl:136px}}
@media(min-width:1280px){:root{--gutter:56px;--sec:128px;--sec-lg:152px;--sec-xl:168px}}
@media(min-width:1441px){:root{--bleed-in:calc((100vw - 1440px) / 2 + 56px)}}

/* Dark bands change material, so they carry their own palette. Every
   component reads these tokens, so nothing inside needs a dark override. */
.hero2, section.installfull, .pdp-stats{
  color-scheme:dark;
  --fg:#F3F6F7; --fg-2:#C3CDD2; --fg-3:#9DAAB1;
  --txt:#F3F6F7; --txt-2:#C3CDD2; --txt-3:#9DAAB1;
  --line:rgba(255,255,255,.14);
  --teal:#5FE3C6; --accent-text:#5FE3C6; --focus:#5FE3C6;
  --btn-bg:var(--mint); --btn-fg:#0B1114; --btn-bg-hover:#6BE6CC;
  --btn2-bg:rgba(255,255,255,.10); --btn2-bg-hover:rgba(255,255,255,.17); --btn2-fg:#F3F6F7;
  --card-bg:rgba(255,255,255,.05);
  background:#0E1417;color:#F3F6F7;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--fg);font-family:var(--body);
  font-size:17px;line-height:1.6;font-weight:400;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
/* height:auto matters now every image carries width and height: without it
   the height attribute became the rendered height and stretched the photo. */
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration:none;text-underline-offset:3px;
  -webkit-tap-highlight-color:transparent}
a:hover{color:var(--teal-press);text-decoration:underline}
button{font:inherit}
:where(a,button,input,select,textarea,label){touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
main:focus{outline:none}
[hidden]{display:none !important}   /* .btn is inline-flex: without this, el.hidden did nothing */
.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}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-stretch:var(--wdth);color:var(--fg);
  margin:0 0 16px;font-weight:600;overflow-wrap:break-word}
/* 88px, not 96: at 96 a long one-line h1 ("Supply, fit and service.") rasterised
   its second half at the wrong size in Chrome's full-page capture. */
h1{font-size:clamp(42px,1.5rem + 4.4vw,88px);line-height:.95;letter-spacing:-.04em}
h2{font-size:clamp(30px,1.2rem + 2.6vw,56px);line-height:1.02;letter-spacing:-.032em}
h3{font-size:22px;line-height:1.25;letter-spacing:-.015em}
h4{font-size:15px;line-height:1.4;letter-spacing:0}
h1,h2{text-wrap:balance}
/* The emphasis word carries the accent, at the same weight. 700 against 800
   was invisible. */
h1 b,h1 strong,h2 b,h2 strong{font-weight:inherit;color:var(--accent-text)}
p{margin:0 0 16px;text-wrap:pretty}
:where(main) p,:where(main) li{max-width:72ch}
.lede{font-size:clamp(18px,1rem + .45vw,21px);line-height:1.5;color:var(--fg-2);max-width:56ch}
/* The small line over a heading. Sentence case, reading weight, no tracking:
   it is context, not a badge. */
.eyebrow{display:block;font-family:var(--body);font-size:15px;line-height:1.4;
  font-weight:500;letter-spacing:0;text-transform:none;color:var(--fg-3);margin:0 0 14px}
.eyebrow > a{color:inherit;text-decoration:underline;text-decoration-thickness:1px}
/* 52px was the old h1 floor; "understanding" at that size is wider than a
   320px phone's column. Under 375 the floor drops with the screen. */
@media(max-width:374px){h1{font-size:clamp(34px,11.4vw,42px)}}
/* Reading pages set a narrow column in their markup; section heads there are
   signposts, not posters. */
main > .wrap[style*="max-width"] h2:not(.h3){font-size:clamp(26px,1rem + 1.5vw,38px);
  line-height:1.1;letter-spacing:-.025em;margin-top:clamp(36px,4vw,56px)}
/* h2 that keeps the h3 look: promoted so no heading level is skipped. */
h2.h3{font-size:22px;line-height:1.25;letter-spacing:-.015em;margin:0 0 12px;animation:none}
h2.h3 b,h2.h3 strong{color:inherit;font-weight:700}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 24px;border-radius:var(--r-pill);border:0;
  background:var(--btn-bg);color:var(--btn-fg);font-family:var(--body);font-size:16px;
  font-weight:600;line-height:1.2;letter-spacing:-.005em;text-align:center;cursor:pointer;
  text-decoration:none;
  transition:background-color .2s var(--ease),transform .14s var(--ease),color .2s var(--ease)}
.btn:hover{background:var(--btn-bg-hover);color:var(--btn-fg);text-decoration:none}
.btn:active{transform:translateY(1px) scale(.98)}
.btn.ghost{background:var(--btn2-bg);color:var(--btn2-fg)}
.btn.ghost:hover{background:var(--btn2-bg-hover);color:var(--btn2-fg)}
.btn.big{min-height:56px;padding:14px 30px;font-size:17px}
.hero-cta,.pdp-cta{display:flex;flex-wrap:wrap;gap:12px}
/* Pairs that sit in a paragraph: the second carries an inline margin-left:8px,
   so on a wrap it started 8px in. The gap moves to the first one's right. */
.btn[style*="margin-left:8px"]{margin-left:0 !important}
.btn:has(+ .btn[style*="margin-left:8px"]){margin-right:8px}
@media(max-width:720px){p > .btn,div > .btn{margin-bottom:10px}
  .hero-cta > .btn,.pdp-cta > .btn,.doclinks > .btn{margin-bottom:0}
  .pdp-cta > .btn{flex:1 1 auto}}

/* ---------- header ---------- */
.skip{position:fixed;top:0;left:0;z-index:2000;width:1px;height:1px;padding:0;margin:0;
  border:0;overflow:hidden;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);
  background:var(--teal);color:#fff;font-weight:600;text-decoration:none}
.skip:focus,.skip:focus-visible{width:auto;height:auto;padding:12px 18px;overflow:visible;
  clip:auto;clip-path:none;border-radius:0 0 12px 0}

header.site{position:sticky;top:0;z-index:80;
  background:rgba(243,245,247,.86);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:4px;min-height:76px;padding-block:12px}
.brand{display:flex;align-items:center;margin-right:20px;color:var(--fg)}
.brand:hover{text-decoration:none}
header.site .brand img{aspect-ratio:auto 900/267;transform-origin:left center}
.nav .links{display:flex;gap:2px;flex-wrap:wrap}
.nav a.n{font-size:15px;font-weight:500;color:var(--fg-2);padding:10px 14px;
  border-radius:var(--r-pill);transition:background-color .2s var(--ease),color .2s var(--ease)}
.nav a.n:hover{color:var(--fg);background:rgba(15,21,25,.06);text-decoration:none}
/* Marked by more than colour (WCAG 1.4.1): teal against the other links is
   about 2:1, so the current page is underlined as well. */
.nav a.n[aria-current=page]{color:var(--teal);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:7px}
.nav .sp{margin-left:auto}
.burger{display:none;margin-left:auto;border:0;border-radius:var(--r-pill);
  background:var(--btn2-bg);color:var(--fg);font-weight:600;font-size:15px;cursor:pointer}
.burger:hover{background:var(--btn2-bg-hover)}
header.site .btn{min-height:44px;padding:0 20px;font-size:15px}
header.site .btn + .btn{margin-left:8px}

/* Measured, not guessed. The nav runs nine links, and at 1280 any tenth
   control pushed it to a second row. So the call control shows only where
   there is room: up to 1229 the links sit behind the burger (icon only), from
   1401 the bar carries the number in full, and in between it stays out. */
.callbtn{white-space:nowrap;display:none;align-items:center;gap:8px}
.callbtn .call-icon{flex:none}
@media(min-width:1401px){.callbtn{display:inline-flex}}

/* 1229, not 860: from 861 to about 1215 the nine links wrapped to a second row
   and squashed the logo, so the burger covers tablets and small laptops. */
@media(max-width:1229px){
  .nav .links{display:none}
  .nav .links.open{display:flex}
  .burger{display:inline-flex}
  .nav .sp{display:none}
  .callbtn{display:inline-flex;margin-left:auto}
  .callbtn .call-full{display:none}
}

/* ---------- sections and rhythm ----------
   Roomy after the hero and before a new topic, white bands for the range and
   the photographs, one ink band for the material change. */
main{display:block}
section{position:relative;padding:var(--sec) 0}
section > .wrap{position:relative;z-index:1}
section.deep,section.installband-full{background:var(--surface);--card-bg:var(--ground)}
section.tint{padding:var(--sec-lg) 0}
main > section:first-child:not(.hero2){padding-top:clamp(48px,6vw,96px)}
.hero2 + section{padding:var(--sec-xl) 0 var(--sec)}
/* Pages that are one column of content get their breathing room at the end. */
main:has(> .wrap:last-child):not(:has(.pdp-band)){padding-bottom:var(--sec)}
main > .wrap:first-child > .eyebrow:first-child,
main > .wrap:first-child > h1:first-child{margin-top:clamp(12px,3vw,40px)}
main > .wrap:first-child > h1{margin-bottom:20px}

/* ---------- grids ---------- */
.grid{display:grid;gap:clamp(14px,1.6vw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
/* That h1 shares a two-column grid with a card on /app; 7vw keeps "Four ways
   in." on one line from 721 up. */
@media(min-width:721px){.grid.g2 > * > h1{font-size:clamp(44px,6.4vw,104px)}}

/* ---------- cards ----------
   A text card is a tonal tile: no border, no shadow. A product card is not a
   box at all: the product stands on its own stage and the words sit under it. */
.card{position:relative;display:block;color:inherit;border-radius:var(--r-md);
  background:var(--card-bg);padding:30px;
  transition:background-color .25s var(--ease)}
a.card{text-decoration:none}
a.card:hover{text-decoration:none;color:inherit;background:var(--mint-tint)}
a.card:hover :where(h2,h3,.nm){color:var(--teal)}
.card h3,.card h2.h3{margin-bottom:10px}
.card p{margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.card .desc{display:block;font-size:16px;line-height:1.55;color:var(--fg-2)}
.card .nm{display:block;font-family:var(--display);font-stretch:var(--wdth);font-size:21px;
  font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--fg);margin:0 0 4px;
  transition:color .2s var(--ease)}
.card .dim{display:block;font-size:15px;line-height:1.45;color:var(--fg-3);margin:0 0 10px}
.card .price{display:inline-block;margin-top:14px;font-size:15px;font-weight:600;color:var(--teal)}
.card:has(> .shot){background:transparent;padding:0;border-radius:var(--r-lg)}
/* Three across of plain text (services, trade, what the app does) is a list,
   not six boxes: each item opens under a hairline, like a spec sheet. Link
   cards keep their tile, because the tile is the thing you press. */
.g3 > div.card{background:transparent;border-radius:0;padding:24px 0 0;
  border-top:1px solid rgba(15,21,25,.22)}
.g3:has(> div.card){row-gap:clamp(36px,4vw,56px)}
/* the four signposts under the answers: compact, so they read as a row of
   ways in rather than four more cards */
.g4 > .card{padding:20px 22px}
.g4 > .card h3{font-size:19px;margin-bottom:6px}
.g4 > .card .desc{font-size:15px}
@media(max-width:720px){.g4{gap:8px}
  .qhead{font-size:22px}
  .card{padding:24px}.call{padding:20px 22px}.scale{padding:26px 22px}.fitcard{padding:24px 20px}}
.card:has(> .shot):hover{background:transparent}
a.card:has(> .shot):focus-visible{outline-offset:6px}
.card:has(> .shot) .desc{font-size:16px}
a.more{font-weight:600}
a.more::after{content:"\2192" / "";display:inline-block;margin-left:.4em;
  transition:transform .2s var(--ease)}
a.more:hover::after{transform:translateX(3px)}

/* ---------- the product stage ----------
   Rebuilt once, deliberately simple: a fixed-height flex box, a light plane,
   and an image bounded on both axes. width/height 100% and never auto: a lazy
   image with no intrinsic size collapsed to 0x0 at auto, never intersected
   the viewport and never loaded. */
.shot{display:flex;align-items:center;justify-content:center;overflow:hidden;
  height:clamp(230px,21vw,300px);padding:clamp(16px,2vw,28px);margin-bottom:18px;
  border-radius:var(--r-lg);background:var(--stage)}
.shot > img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;
  object-fit:contain;filter:drop-shadow(0 14px 18px rgba(20,32,42,.18));
  transition:transform .6s var(--ease)}
.card:hover .shot > img{transform:scale(1.045)}
.shot.noimg span{font-size:14px;font-weight:500;color:var(--fg-3);text-align:center}

/* ---------- home: hero ---------- */
.hero2{position:relative;overflow:hidden;min-height:min(90vh,880px);background-color:#0E1417;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.hero2 .hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  padding:var(--sec-lg) 56px var(--sec-lg) var(--bleed-in)}
.hero2 .eyebrow{color:var(--fg-2)}
.hero2 h1{font-size:clamp(52px,1rem + 6.2vw,116px);line-height:.92;letter-spacing:-.045em;
  max-width:12ch;margin-bottom:24px}
.hero2 .lede{font-size:clamp(18px,1rem + .4vw,21px);max-width:44ch}
.hero2 .hero-cta{margin-top:32px}
.hero2 .hero-art{position:relative;overflow:hidden}
.hero2 .hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:88% 50%;filter:brightness(1.16) contrast(1.05)}
.hero2 .hero-art::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#0E1417 0%,rgba(14,20,23,.5) 16%,rgba(14,20,23,0) 46%)}
.hero2 .kicker{display:flex;flex-wrap:wrap;gap:20px 0;margin-top:48px}
.hero2 .kicker > div{padding-right:28px}
.hero2 .kicker > div + div{padding-left:28px;border-left:1px solid var(--line)}
.hero2 .kicker b{display:block;font-family:var(--display);font-stretch:var(--wdth);font-size:28px;
  font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--fg)}
.hero2 .kicker span{display:block;margin-top:4px;font-size:15px;color:var(--fg-3);white-space:nowrap}
@media(max-width:900px){
  .hero2{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero2 .hero-copy{order:2;padding:40px var(--gutter) 56px}
  .hero2 .hero-art{order:1;height:46vh;min-height:300px;max-height:460px}
  .hero2 .hero-art::after{background:linear-gradient(0deg,#0E1417 0%,rgba(14,20,23,0) 50%)}
  .hero2 .kicker{margin-top:36px}
  .hero2 .kicker > div{padding-right:18px}
  .hero2 .kicker > div + div{padding-left:18px}
}
@media(max-width:560px){
  .hero2 .hero-cta{gap:10px}
  .hero2 .hero-cta .btn{flex:1 1 auto;min-height:52px;padding:0 20px;font-size:16px}
  .hero2 .kicker{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,1fr);gap:0}
  .hero2 .kicker > div{padding-right:10px}
  .hero2 .kicker > div + div{padding-left:12px}
  .hero2 .kicker b{font-size:20px;white-space:nowrap}
  .hero2 .kicker span{font-size:13px;line-height:1.35;white-space:normal}
}

/* ---------- home: the 43mm statement ---------- */
.bignum{display:block;font-family:var(--display);font-stretch:var(--wdth);font-weight:600;
  font-size:clamp(120px,16vw,240px);line-height:.85;letter-spacing:-.055em;color:var(--fg)}
.bignum .mm{font-size:clamp(36px,4.6vw,72px);font-weight:500;letter-spacing:-.02em;
  color:var(--teal);margin-left:.06em}
/* Tabular figures only where a figure moves: Onest's tabular 1 is a full
   figure wide, so "155" read as "1 55" anywhere else. */
[data-count]{font-variant-numeric:tabular-nums}
.scale{background:var(--card-bg);border-radius:var(--r-lg);padding:40px}
.scale-cap{font-size:15px;font-weight:600;color:var(--fg-2);margin:0 0 22px}
/* A grid gives the bar its own track to be a percentage of, so the bars stay
   proportional to each other and inside the card. The fixed value column keeps
   every track identical, which is what makes 43mm against 65mm honest. */
.srow{display:grid;grid-template-columns:88px minmax(0,1fr) 56px;align-items:center;
  gap:14px;margin-bottom:14px}
.sl{min-width:0;font-size:15px;font-weight:600;color:var(--fg)}
.sbar{justify-self:start;width:var(--w);max-width:100%;height:10px;border-radius:var(--r-pill);
  background:var(--line-strong);transform-origin:left center}
.sbar.win{background:var(--teal)}
.sv{min-width:0;text-align:right;font-size:15px;font-weight:600;color:var(--fg-2)}
.srow:has(.win) .sl,.srow:has(.win) .sv{color:var(--teal)}
@media(max-width:560px){.srow{grid-template-columns:70px minmax(0,1fr) 48px;gap:10px}
  .sl,.sv{font-size:14px}}

/* ---------- home: the range ---------- */
.rangerow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);
  margin-top:40px}
.rangerow .shot{height:clamp(240px,21vw,320px)}
.rangerow .card .nm{font-size:22px}
.rangerow .card .dim{font-size:14px;margin-bottom:0}
.rangerow + p{margin-top:16px}
/* Under 1081 the row scrolls sideways. auto-flow must be reset with the
   columns: re-declaring one without the other once collapsed three of five
   tiles to 22px slivers on every phone. */
@media(max-width:1080px){
  .rangerow{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;
    overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
    scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
  .rangerow .card{scroll-snap-align:start}
}
@media(max-width:720px){.rangerow{grid-auto-columns:72%}}
.cylgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3vw,44px) clamp(14px,1.6vw,24px);margin-top:40px}
@media(min-width:1500px){.cylgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:900px){.cylgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cylgrid{grid-template-columns:minmax(0,1fr)}}
.grid:has(> .card > .shot){row-gap:clamp(28px,3vw,44px)}

/* ---------- home: every dimension, drawn ---------- */
.dimwrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,88px);align-items:center}
@media(max-width:900px){.dimwrap{grid-template-columns:minmax(0,1fr)}}
.dimwrap .shot{height:clamp(320px,40vw,580px);padding:clamp(20px,3vw,44px);margin:0}

/* ---------- home: supplied, measured, fitted (the ink band) ---------- */
section.installfull{background-color:#0E1417}
section.installfull h2{color:var(--fg)}
section.installfull p{color:var(--fg-2)}
.pts{list-style:none;padding:0;margin:0;font-size:17px;color:var(--fg-2)}
.pts li{position:relative;padding:14px 0 14px 32px;border-bottom:1px solid var(--line);
  break-inside:avoid;max-width:none}
.pts li::before{content:'';position:absolute;left:0;top:19px;width:18px;height:18px;
  border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
section.installfull .pts li::before{background-color:var(--mint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.5' fill='none' stroke='%230B1114' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
section.installfull .pts{columns:2;column-gap:40px}
@media(max-width:720px){section.installfull .pts{columns:1}}

/* ---------- home: real installs rail ---------- */
.railwrap{position:relative}
.installrail{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;margin:0;
  padding:36px var(--bleed-in);scroll-padding-inline:var(--bleed-in);
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.installrail::-webkit-scrollbar{height:8px}
.installrail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.installrail figure{flex:0 0 clamp(250px,25vw,370px);margin:0;scroll-snap-align:start}
.installrail img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-md);background:var(--tone)}
.installrail figcaption{display:none}
.installrail:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--r-md)}
/* A 3676px scroller with nothing focusable locked keyboard users out. Positive
   insets: negative ones hung past the full-bleed wrapper and scrolled the page. */
.railbtn{position:absolute;top:44%;z-index:3;width:52px;height:52px;border-radius:50%;border:0;
  background:var(--surface);color:var(--fg);cursor:pointer;font-size:24px;line-height:1;
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(15,21,25,.16);
  transition:transform .2s var(--ease),opacity .2s var(--ease)}
.railbtn:hover{transform:scale(1.06)}
.railbtn:active{transform:scale(.96)}
.railbtn[disabled]{opacity:0;pointer-events:none}
.railbtn.prev{left:clamp(10px,2vw,28px)}
.railbtn.next{right:clamp(10px,2vw,28px)}
@media(max-width:720px){.railbtn{display:none}}

/* ---------- home: the close ---------- */
section.tealband{padding:40px 0 var(--sec)}
section.tealband .wrap{width:calc(100% - 2 * clamp(12px,3vw,64px));
  max-width:calc(var(--wrap-max) - 2 * var(--gutter));border-radius:clamp(24px,3vw,40px);
  background:var(--mint-tint);padding:96px 56px}
@media(max-width:720px){section.tealband .wrap{padding:56px 24px}}
section.tealband h2{font-size:clamp(34px,1.2rem + 3.4vw,72px)}
section.tealband .lede{color:var(--fg-2)}

/* ---------- tables ---------- */
.tw{overflow-x:auto;border-radius:var(--r-md);background:var(--card-bg);padding:6px 20px}
.tw:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
table{width:100%;border-collapse:collapse;font-size:16px;min-width:640px}
/* A two-column label and value table has no reason to scroll at any width. */
.tw table:not(:has(tr > :nth-child(3))){min-width:0}
th,td{padding:15px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);
  color:var(--fg-2);line-height:1.5}
thead th{font-size:14px;font-weight:600;color:var(--fg-3);letter-spacing:0;text-transform:none;
  border-bottom-color:var(--line-strong);background:transparent}
tbody th{font-weight:500;color:var(--fg-3);font-size:15px}
tbody tr > td:first-child{color:var(--fg);font-weight:500}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:none}
td.mono,.mono{font-family:inherit;font-size:15.5px;letter-spacing:0}
.yes{color:var(--teal);font-weight:600}
.no{color:var(--fg-3)}
/* "to confirm" on figures the manufacturer publishes two ways. */
.unconf{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:var(--r-pill);
  font-family:var(--body);font-size:13px;line-height:1.5;font-weight:600;letter-spacing:0;
  text-transform:none;color:#7A5200;background:#FBEFD2;vertical-align:1px;cursor:help;
  white-space:nowrap}

/* ---------- callouts ---------- */
.call{background:var(--card-bg);border-radius:var(--r-md);padding:24px 28px;margin:24px 0}
.call .lbl{display:block;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--teal);margin:0 0 8px}
.call p{color:var(--fg-2);margin-bottom:10px}
.call p:last-child{margin-bottom:0}
.call.warn{background:#FBF3E2} .call.warn .lbl{color:#7A5200}
.call.bad{background:#FBEDEB}  .call.bad .lbl{color:#A3201B}
.call.ok{background:#E6F3EC}   .call.ok .lbl{color:#14693F}
.cand{background:var(--card-bg);border-radius:var(--r-md);padding:24px;margin-bottom:14px;
  box-shadow:inset 0 0 0 2px var(--teal)}
.cand .lbl,.cand-lbl{color:#14693F}
.cand-lbl{font-size:15px;font-weight:600;margin:0 0 6px}
.ruled{background:var(--card-bg);border-radius:var(--r-sm);padding:16px 20px;margin-bottom:10px;
  color:var(--fg-2)}
.ruled strong{color:var(--fg)}
.finishnote{margin:12px 0 0;font-size:14px;line-height:1.5;color:#6B4800;background:#FBF3E2;
  border-radius:var(--r-sm);padding:10px 14px}

/* ---------- forms ---------- */
.fl{display:block;margin-bottom:18px;font-size:15px;font-weight:600;color:var(--fg)}
/* 16px or more: under 16px iOS Safari zooms the page on focus and stays zoomed. */
.fl input,.fl textarea,.fl select{display:block;width:100%;min-height:52px;margin-top:8px;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:13px 16px;
  font-family:var(--body);font-size:17px;font-weight:400;background:#FFFFFF;color:#0F1519;
  transition:border-color .2s var(--ease)}
.fl input:hover,.fl textarea:hover,.fl select:hover{border-color:#5E6B78}
.fl input:focus,.fl textarea:focus,.fl select:focus{outline:3px solid var(--focus);outline-offset:2px;
  border-color:var(--teal)}
.fl select{-webkit-appearance:none;appearance:none;line-height:1.3;cursor:pointer;padding-right:44px;
  background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141A1F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center/12px 8px}
.fl textarea{resize:vertical;min-height:132px;line-height:1.5}
.fl input[type=file]{padding:9px 10px;font-size:16px;cursor:pointer}
.fl input[type=file]::file-selector-button{border:0;border-radius:var(--r-pill);background:var(--tone);
  color:#0F1519;font:600 15px/1.2 var(--body);padding:9px 16px;margin-right:12px;cursor:pointer}
.fl input::placeholder,.fl textarea::placeholder{color:#5E6A73;opacity:1}
fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}
legend{padding:0;margin-bottom:12px;font-size:14px;font-weight:600;color:var(--fg-3);
  letter-spacing:0;text-transform:none}

/* the fit tool */
.fitcard{background:var(--card-bg);border-radius:var(--r-lg);padding:36px}
.qhead{font-family:var(--display);font-stretch:var(--wdth);font-size:25px;
  font-weight:600;letter-spacing:-.02em;line-height:1.3;margin:0 0 8px;color:var(--fg)}
.qsub{font-size:16px;color:var(--fg-2);margin-bottom:22px}
.choices{display:grid;gap:10px}
.choice{position:relative;display:block}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice > span{display:block;border:1px solid var(--line-strong);border-radius:var(--r-md);
  background:#FFFFFF;padding:18px 20px 18px 56px;cursor:pointer;position:relative;
  transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}
.choice > span::before{content:'';position:absolute;left:20px;top:21px;width:20px;height:20px;
  border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-strong);background:#fff;
  transition:box-shadow .2s var(--ease)}
.choice:hover > span{border-color:var(--teal)}
.choice input:checked + span{border-color:var(--teal);background:#EEF8F5;
  box-shadow:inset 0 0 0 1px var(--teal)}
.choice input:checked + span::before{box-shadow:inset 0 0 0 6px var(--teal)}
.choice input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}
.choice .t{display:block;font-weight:600;font-size:17px;margin-bottom:2px;color:#0F1519}
.choice .d{display:block;font-size:15px;line-height:1.5;color:#2E3840}
.steps{display:flex;gap:8px;margin:28px 0 24px;flex-wrap:wrap}
.steps span{font-size:14px;font-weight:500;color:var(--fg-3);background:var(--tone);
  border-radius:var(--r-pill);padding:8px 16px;letter-spacing:0}
.steps span.on{background:var(--teal);color:#FFFFFF}
.steps span.done{color:var(--fg-2)}
/* the paragraph under Next had no gap at all from 768 up */
div:has(> #ks-next){margin-bottom:24px}
@media(max-width:720px){div:has(> #ks-next){margin-bottom:14px}}

/* option pills: the radio itself is hidden, the label is the control */
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0;width:0;height:0}
.opts label span{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:var(--r-pill);background:#FFFFFF;border:1px solid var(--line-strong);
  font-size:15px;font-weight:500;color:#2E3840;
  transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease)}
.opts label:hover span{border-color:#0F1519}
.opts input:checked + span{border-color:var(--teal);background:var(--teal);color:#FFFFFF;font-weight:600}
.opts input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- support pages ---------- */
.qa{border-bottom:1px solid var(--line);padding:28px 0}
.qa:last-of-type{border-bottom:none}
.qa h3,.qa h2.h3{font-size:21px;margin:0 0 10px}
.qa p{margin:0 0 12px;color:var(--fg-2)}
.qa p:last-child{margin-bottom:0}
.qa ul{margin:12px 0 0;padding-left:22px;color:var(--fg-2);line-height:1.7}
.qa ul li{margin-bottom:8px}
ol.steps-list{counter-reset:ks;list-style:none;padding:0;margin:16px 0 0}
ol.steps-list li{counter-increment:ks;position:relative;padding:2px 0 16px 46px;
  color:var(--fg-2);line-height:1.7}
ol.steps-list li::before{content:counter(ks);position:absolute;left:0;top:0;width:30px;height:30px;
  border-radius:50%;background:var(--tone);color:var(--fg);font-family:var(--display);
  font-size:14px;font-weight:600;display:grid;place-items:center}
/* The Jump to list on the long support pages. */
.ks-index{background:var(--card-bg);border-radius:var(--r-md);padding:20px 24px;margin:26px 0 8px}
.ks-index .lbl{font-size:15px;font-weight:600;color:var(--fg-3);letter-spacing:0;
  text-transform:none;margin:0 0 10px}
.ks-index ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 24px}
.ks-index li{margin:0}
.ks-index a{display:block;padding:4px 0;font-size:15px;line-height:1.5;text-decoration:none}
.ks-index a:hover{text-decoration:underline}
/* The sticky header would otherwise cover what has focus (WCAG 2.4.11).
   ks.js gives each Jump to heading an inline scroll-margin; the header is
   counted once here instead, so the inline one is neutralised. */
html{scroll-padding-top:80px}
@media(min-width:1230px){html{scroll-padding-top:94px}}
main h2[id]{scroll-margin-top:0 !important}

/* links in running text are underlined: teal against body text is about 2:1,
   under the 3:1 colour alone needs. :where keeps this at the weight of a bare
   "a", so buttons, cards and the jump list keep their own rules. */
:where(main p,main li,main dd,main .desc) a:where(:not(.btn):not(.card)){
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* breadcrumbs: underlined, since link against current page is under 3:1 */
nav[aria-label="Breadcrumb"]{padding:18px 0;font-size:14px;color:var(--fg-3)}
nav[aria-label="Breadcrumb"] a{color:var(--fg-2);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px}
nav[aria-label="Breadcrumb"] a:hover{color:var(--teal)}
main > .wrap:has(> #ks-pdp),main > #ks-cyl-page,#ks-acc-page > .wrap:first-child{padding-top:10px}

/* standalone contact lines, each its own row */
a.contact-line{display:flex;align-items:center;width:fit-content;max-width:100%;font-size:18px;
  font-weight:500}
a.contact-line + br{display:none}

/* ---------- product page ---------- */
.pdp-band,.pdp-hero{width:100vw;margin-left:calc(50% - 50vw)}
.pdp-band{padding:var(--sec) 0}
.pdp-hero{background:var(--surface);--card-bg:var(--ground);
  padding:clamp(20px,3vw,48px) 0 clamp(64px,7vw,112px)}
.pdp-spec{background:var(--ground)}
.pdp-docs{background:var(--surface);--card-bg:var(--ground)}
.pdp-features{background:var(--ground)}
.pdp-spec + .pdp-features{background:var(--surface);--card-bg:var(--ground)}
.pdp-app{background:var(--surface);--card-bg:var(--ground)}
.pdp-spec + .pdp-features + .pdp-app{background:var(--ground);--card-bg:var(--surface)}
.pdp-installed{background:var(--ground)}
.pdp-range{background:var(--surface);--card-bg:var(--ground)}
.pdp-band h2{font-size:clamp(32px,1.2rem + 2.4vw,56px);margin-bottom:14px}

.pdp-hgrid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,5vw,88px);align-items:center}
@media(max-width:940px){.pdp-hgrid{grid-template-columns:minmax(0,1fr)}}
/* The wrapper is a plain column that does not clip; the clipped square is the
   stage inside it. As one element, the thumbnails rendered at zero height. */
.pdp-hart{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;min-width:0}
/* The image row is minmax(0,1fr), not auto: an auto row took the photo's own
   height and the portrait install photo ran 163px out of the stage. */
.pdp-stage{width:100%;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);row-gap:10px;
  padding:clamp(18px,3vw,44px);border-radius:var(--r-lg);background:var(--stage)}
.pdp-stage img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(20,32,42,.22))}
.pdp-hero-img{animation:pdpIn .5s var(--ease) both}
@keyframes pdpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pdp-stage > .finishnote{margin:0;align-self:end}
.pdp-noimg{display:grid;place-items:center;width:100%;height:100%;min-height:240px;padding:0 16px;
  text-align:center;font-size:15px;font-weight:500;color:var(--fg-3)}
.pdp-thumbs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.pdp-thumbs button{width:72px;height:72px;padding:8px;border:0;border-radius:var(--r-sm);
  background:var(--tone);cursor:pointer;display:grid;place-items:center;overflow:hidden;
  transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.pdp-thumbs button:hover{background:var(--tone-2)}
.pdp-thumbs button[aria-pressed="true"]{background:var(--surface);box-shadow:inset 0 0 0 2px var(--teal)}
.pdp-thumbs img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.pdp-hcopy h1{font-size:clamp(56px,1rem + 5.4vw,108px);line-height:.92;letter-spacing:-.045em;
  margin:4px 0 16px}
.pdp-hcopy .lede{max-width:44ch;margin-bottom:28px}
.pdp-keyfacts{display:flex;flex-wrap:wrap;gap:16px 0;padding:22px 0;margin-bottom:8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pdp-keyfacts > div{padding-right:28px}
.pdp-keyfacts > div + div{padding-left:28px;border-left:1px solid var(--line)}
.pdp-keyfacts b{display:block;font-family:var(--display);font-stretch:var(--wdth);font-weight:600;
  font-size:30px;letter-spacing:-.03em;line-height:1;color:var(--fg)}
.pdp-keyfacts span{display:block;margin-top:8px;font-size:14px;letter-spacing:0;text-transform:none;
  color:var(--fg-3)}
.pdp-hcopy fieldset{margin:24px 0 0}
.pdp-cta{margin-top:28px}
@media(max-width:560px){.pdp-keyfacts > div{padding-right:18px}.pdp-keyfacts > div + div{padding-left:18px}}

.pdp-specgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4vw,72px);align-items:start}
@media(max-width:900px){.pdp-specgrid{grid-template-columns:minmax(0,1fr)}}
.pdp-docs .doclinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media(max-width:560px){.pdp-docs .doclinks .btn{width:100%}}

.pdp-fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,104px);align-items:center}
.pdp-fgrid-rev .pdp-appart{order:2}
@media(max-width:900px){.pdp-fgrid{grid-template-columns:minmax(0,1fr)}}
.pdp-hgrid,.pdp-fgrid,.pdp-specgrid,.pdp-hgrid > *,.pdp-fgrid > *{min-width:0}
.pdp-fart{display:flex;align-items:center;justify-content:center;overflow:hidden;
  border-radius:var(--r-lg);background:var(--stage);padding:clamp(24px,3vw,48px);
  min-height:clamp(360px,40vw,580px)}
.pdp-fart img{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(20,32,42,.2))}
.pdp-fart img{max-height:480px}
.featlist,.applist{list-style:none;padding:0;margin:28px 0 0}
.featlist li{display:flex;gap:20px;align-items:flex-start;padding:22px 0;max-width:none;
  border-top:1px solid var(--line)}
.featlist li:last-child{border-bottom:1px solid var(--line)}
.featlist li b{display:block;font-family:var(--display);font-stretch:var(--wdth);font-size:20px;
  font-weight:600;letter-spacing:-.015em;color:var(--fg);margin-bottom:4px}
.featlist li span{display:block;font-size:16px;color:var(--fg-2);line-height:1.55}
.ksicon{width:40px;height:54px;flex:none;color:var(--teal);display:block}
.applist li{position:relative;padding:10px 0 10px 30px;font-size:17px;color:var(--fg-2)}
.applist li::before{content:'';position:absolute;left:0;top:19px;width:14px;height:2px;
  border-radius:2px;background:var(--teal)}
.pdp-appart{display:flex;align-items:center;justify-content:center}
.phone{width:280px;height:560px;max-width:100%;border-radius:48px;background:#0E1417;
  border:10px solid #1D252B;display:flex;align-items:center;justify-content:center;padding:24px;
  box-shadow:0 40px 80px -30px rgba(15,21,25,.45)}
@media(max-width:900px){.phone{width:220px;height:440px;border-radius:40px;border-width:8px}}
.phone span{color:#AEBAC1;font-size:15px;text-align:center;line-height:1.6;letter-spacing:0;
  text-transform:none}

.pdp-stats{padding:var(--sec) 0}
.capstrip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:22px;
  background:var(--card-bg);border-radius:var(--r-lg);padding:30px 24px;margin-bottom:clamp(40px,5vw,64px)}
.capstrip > div{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.capstrip .ksicon{width:38px;height:50px;color:var(--mint)}
.capstrip span{font-size:14px;line-height:1.4;color:var(--fg-2)}
/* A tile we do not hold reads as "confirming" and is visibly quieter than a
   held fact. The fade is on the icon only: faded whole, the label failed. */
.capstrip .unheld .ksicon{opacity:.5}
.capstrip .unheld span{color:var(--fg-3);font-style:italic}
@media(max-width:900px){.capstrip{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}}
@media(max-width:560px){.capstrip{grid-template-columns:repeat(2,minmax(0,1fr))}}
.statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;text-align:center}
.statrow b{display:block;font-family:var(--display);font-stretch:var(--wdth);font-weight:600;
  font-size:clamp(34px,3.6vw,56px);letter-spacing:-.035em;line-height:1;color:var(--fg)}
.statrow span{display:block;margin-top:12px;font-size:15px;letter-spacing:0;text-transform:none;
  color:var(--fg-2);font-weight:500}
@media(max-width:720px){.statrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}}

.pdp-installed .instgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);margin-top:32px}
.pdp-installed figure{margin:0;min-width:0}
.pdp-installed img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r-md);background:var(--tone)}
.pdp-installed figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--fg-3)}
.pdp-installed .beforeshot img{filter:saturate(.82)}
.pdp-installed .beforeshot figcaption::before{content:'Before';display:inline-block;margin-right:8px;
  padding:1px 9px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:#7A5200;
  background:#FBEFD2;vertical-align:1px}
@media(max-width:900px){.pdp-installed .instgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pdp-installed .instgrid{grid-template-columns:minmax(0,1fr)}}
.pdp-range .rangerow{margin-top:32px}
/* six other models: six across, so none is left alone on a second row */
@media(min-width:1081px){.rangerow:has(> :nth-child(6)){grid-template-columns:repeat(6,minmax(0,1fr))}}

/* cylinder page: one stage beside the facts */
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);
  align-items:start;padding-bottom:30px}
@media(max-width:900px){.pdp{grid-template-columns:minmax(0,1fr);gap:28px}.pdp > *{min-width:0}}
.pdp .gal .main{display:flex;align-items:center;justify-content:center;overflow:hidden;
  min-height:clamp(320px,40vw,540px);padding:clamp(24px,3vw,48px);border-radius:var(--r-lg);
  background:var(--stage)}
.pdp .gal .main img{max-width:100%;max-height:420px;width:auto;height:auto;
  filter:drop-shadow(0 22px 28px rgba(20,32,42,.22))}
.pdp h1{font-stretch:var(--wdth)}

/* ---------- product shots on a white ground ----------
   The accessory photos, the KSL render and the manufacturer's drawings are
   JPEGs shot on white. Multiply makes that white take the stage colour and
   leaves the product untouched, so nothing shows a white box. filter:none
   matters as much: a drop-shadow on an opaque JPEG is drawn from the whole
   rectangle. PNG cut-outs keep theirs, because it follows the product. */
.pdp-stage img[src*="acc-"][src$=".jpg"],.shot img[src*="acc-"][src$=".jpg"],
.pdp-thumbs img[src*="acc-"][src$=".jpg"],.pdp-fart img[src*="acc-"][src$=".jpg"],
.pdp-stage img[src*="ksl-lever"],.shot img[src*="ksl-lever"],
.pdp-thumbs img[src*="ksl-lever"],.pdp-fart img[src*="ksl-lever"],
.pdp-stage img[src*="dimensions"],.pdp-fart img[src*="dimensions"],
.pdp-thumbs img[src*="dimensions"],.shot img[src*="dimensions"],
.pdp-stage img[src*="ks200-features"],.pdp-fart img[src*="ks200-features"],
.pdp-thumbs img[src*="ks200-features"]{mix-blend-mode:multiply;filter:none}
/* The KS200 drawing is the one held at low resolution (391 x 429). Upscaled
   into a big stage its figures turn to mush, so it stays at native size. */
.shot img[src*="ks200-dimensions"],.pdp-fart img[src*="ks200-dimensions"]{
  max-width:391px;max-height:429px;width:auto;height:auto}

/* ---------- footer ---------- */
footer.site{background:var(--tone);color:var(--fg-2);padding:var(--sec) 0 28px}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,minmax(0,1fr));gap:32px 48px}
@media(max-width:820px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* At 320 the email address set the first column's minimum width and pushed
   the Range column past the screen, so the brand column takes its own row. */
@media(max-width:560px){footer.site .fgrid > :first-child{grid-column:1/-1}}
/* Column headings are h2.fh (as h4s under an h1 they skipped levels), so
   every property of the old look is restated here against the h2 rule. */
footer.site h4,footer.site h2.fh{font-family:var(--body);font-stretch:100%;font-size:15px;
  line-height:1.5;font-weight:600;letter-spacing:0;text-transform:none;margin:0 0 10px;
  color:var(--fg);animation:none}
footer.site a{display:block;color:var(--fg-2);font-size:15px;padding:5px 0;width:fit-content}
footer.site a:hover{color:var(--teal);text-decoration:underline}
footer.site p{color:var(--fg-2);font-size:15px;line-height:1.6}
footer.site .fgrid > :first-child img{margin-bottom:18px}
.fbot{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin-top:clamp(40px,5vw,64px);
  padding-top:20px;border-top:1px solid var(--tone-2);font-size:13px;color:var(--fg-3)}
.fbot span{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
/* An underline, not a border: on phones the link is a 44px target, and a
   border would sit at the foot of the box, well clear of the words. #55616B
   is 4.6:1 on the footer; the old #C2CCDA rule was 1.18:1, invisible. */
footer.site .fbot a{display:inline;padding:0;font-size:13px;color:var(--fg-2);
  text-decoration:underline;text-decoration-color:#55616B;text-decoration-thickness:1px;
  text-underline-offset:4px}
footer.site .fbot a:hover{color:var(--teal);text-decoration-color:var(--teal)}

/* ================= PHONE HEADER =================
   One row at every phone width. Before this the logo was squashed, "Where to
   buy" wrapped and made the bar 110px, and opening Menu pinned the links in a
   column off the right edge. The open menu is a sheet that drops below the
   bar, so opening it never takes space from the row. */
@media(max-width:1229px){
  header.site .nav{min-height:64px;padding-block:10px;gap:6px;flex-wrap:nowrap}
  /* the logo is the one item allowed to give way, and it keeps its ratio */
  header.site .brand{display:flex;align-items:center;min-height:44px;flex:0 1 auto;min-width:72px;
    margin-right:auto}
  header.site .brand img{height:auto !important;width:auto !important;max-width:100%;max-height:34px}
  header.site .burger{align-items:center;flex:none;margin:0;min-height:44px;padding:0 18px;white-space:nowrap}
  header.site .btn{flex:none;min-height:44px;margin:0;padding:0 16px;white-space:nowrap}
  header.site .btn + .btn{margin-left:0}
  header.site .callbtn{width:44px;padding:0;margin:0}
  /* header.site is sticky, so it is the containing block: the sheet spans the
     screen under the bar. On a landscape phone the list wraps into a second
     column rather than scrolling; overflow-y is the fallback. */
  header.site .nav .links{position:absolute;top:100%;left:0;right:0;width:auto;
    flex-direction:column;flex-wrap:wrap;gap:0;
    padding:8px var(--gutter) 20px;background:var(--ground);
    max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;
    border-radius:0 0 var(--r-lg) var(--r-lg);border-top:1px solid var(--line);
    box-shadow:0 30px 60px -20px rgba(15,21,25,.28)}
  header.site .nav a.n{display:flex;align-items:center;min-height:54px;padding:0 4px;
    font-size:19px;font-weight:500;color:var(--fg);border-radius:0;
    border-bottom:1px solid var(--line)}
  header.site .nav a.n:last-child{border-bottom:0}
  header.site .nav a.n:hover{background:transparent;color:var(--teal)}
  header.site .nav a.n[aria-current=page]{color:var(--teal)}
}
@media(max-width:560px){header.site .brand img{max-height:30px}}
/* Under 360 "Where to buy" takes two short lines inside the same 44px button. */
@media(max-width:359px){
  header.site .nav{gap:5px}
  header.site .burger{padding:0 12px}
  header.site .nav > a.btn:not(.callbtn){white-space:normal;max-width:84px;padding:0 10px;
    font-size:13px;line-height:1.1}
}

/* ---- tap targets on phones (44px) ---- */
@media(max-width:720px){
  footer.site .fgrid a{display:flex;align-items:center;min-height:44px;padding:0}
  .ks-index a{display:flex;align-items:center;min-height:44px;padding:0}
  /* inline links on a line of their own: the hit area grows, the layout does not */
  nav[aria-label="Breadcrumb"] a{display:inline-block;padding:12px 0;margin:-12px 0}
  .eyebrow > a{display:inline-block;padding:14px 0;margin:-14px 0}
  .tw td a:not(.btn){display:inline-block;padding:10px 0;margin:-10px 0}
  main a.more{display:inline-flex;align-items:center;min-height:44px}
  a.contact-line{min-height:48px}
  footer.site .fbot a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- wide tables on phones ----
   Every wide table has a 640px floor, so on a phone it shows two or three
   columns. Under 720 the wide ones get a swipe line that stays put, edge
   shadows that show which way there is more, and a first column that stays
   put so a number never loses its label. */
@media(max-width:720px){
  .tw:has(tr > :nth-child(3)){padding:0;
    background:
      linear-gradient(90deg,var(--card-bg) 30%,rgba(255,255,255,0)) 0 0/36px 100% no-repeat local,
      linear-gradient(270deg,var(--card-bg) 30%,rgba(255,255,255,0)) 100% 0/36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%,rgba(15,21,25,.18),rgba(15,21,25,0)) 0 0/14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%,rgba(15,21,25,.18),rgba(15,21,25,0)) 100% 0/14px 100% no-repeat scroll,
      var(--card-bg)}
  .tw:has(tr > :nth-child(3))::before{content:'Swipe for more columns \2192';display:block;
    position:sticky;left:0;padding:12px 15px;font-size:14px;font-weight:600;line-height:1.4;
    color:var(--fg-3);border-bottom:1px solid var(--line)}
  /* a fixed width keeps the stuck column to about a third of the card */
  .tw:has(tr > :nth-child(3)) tr > :first-child{position:sticky;left:0;z-index:1;width:118px;
    padding-left:14px;padding-right:12px;background:var(--card-bg);box-shadow:inset -1px 0 0 var(--line)}
  .tw{padding:4px 14px}
}

/* ---------- nothing may widen the page ----------
   A section holding a sideways reveal clips its own sides. clip, not hidden:
   clip makes no scroll container, so the vertical reveals still show. */
main section:has([data-rv="l"],[data-rv="r"]){overflow-x:clip}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes ksRise{from{opacity:0;translate:0 20px}to{opacity:1;translate:none}}
@keyframes ksBar{from{transform:scaleX(0)}to{transform:none}}
@keyframes ksDrift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.06) translateY(-40px)}}
@keyframes ksHeader{to{background:rgba(243,245,247,.94);box-shadow:0 12px 32px -22px rgba(15,21,25,.4)}}
@keyframes ksLogo{to{transform:scale(.9)}}
@keyframes ksSheet{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: no-preference){
  /* page to page: the header holds still while the page cross-fades */
  @view-transition{navigation:auto}
  header.site{view-transition-name:ks-header}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;
    animation-timing-function:var(--ease)}
  @media(max-width:1229px){header.site .nav .links.open{animation:ksSheet .22s var(--ease) both}}

  /* The scale bars are data, so they grow on a clock, not on the scroll: a
     scroll-bound bar left half grown where the reader stopped would draw 64mm
     shorter than 43mm. ks.js adds .in as the card nears the viewport; without
     it the bars simply sit at their true widths. */
  .scale.in .sbar{animation:ksBar .7s var(--ease) both}
  .scale.in .srow:nth-of-type(2) .sbar{animation-delay:.06s}
  .scale.in .srow:nth-of-type(3) .sbar{animation-delay:.12s}
  .scale.in .srow:nth-of-type(4) .sbar{animation-delay:.18s}
  .scale.in .srow:nth-of-type(5) .sbar{animation-delay:.24s}

  /* Scroll-driven, not time-driven: progress is the element's own place in
     the viewport, so a fast scroll can never outrun it and leave a blank
     band. Without support the page is simply static. */
  @supports (animation-timeline: view()){
    [data-rv],.stagger > *{animation:ksRise linear both;animation-timeline:view();
      animation-range:entry 0% entry 70%}
    .stagger > :nth-child(2){animation-range:entry 4% entry 74%}
    .stagger > :nth-child(3){animation-range:entry 8% entry 78%}
    .stagger > :nth-child(4){animation-range:entry 12% entry 82%}
    .stagger > :nth-child(5){animation-range:entry 16% entry 86%}
    .stagger > :nth-child(n+6){animation-range:entry 20% entry 90%}
    .hero2 .hero-art img{animation:ksDrift linear both;animation-timeline:scroll(root);
      animation-range:0 90vh}
    header.site{animation:ksHeader linear both;animation-timeline:scroll(root);
      animation-range:0 140px}
    header.site .brand img{animation:ksLogo linear both;animation-timeline:scroll(root);
      animation-range:0 140px}
  }
}

/* Reduced motion: whatever is added later is caught here too. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  html,.installrail{scroll-behavior:auto !important}
}

@media print{
  body{background:#fff;color:#000}
  header.site,footer.site,.skip,.railbtn{display:none}
  /* the ink bands print as ink rather than as light type on blank paper */
  .hero2,section.installfull,.pdp-stats{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:#0E7A66}
}

/* Where to buy: the two places to buy come first, each with its own heading */
.retail{margin-top:34px;align-items:stretch}
.for-item{margin:26px 0 0;font-size:18px;color:var(--fg-2)}
.for-item b{color:var(--fg)}
.retail > .card{display:flex;flex-direction:column;padding:clamp(24px,3vw,40px)}
.retail .kind{margin:0 0 6px;font-size:15px;font-weight:600;color:var(--accent-text)}
.retail h2.retail-name{font-size:clamp(30px,1.1rem + 1.8vw,46px);line-height:1.05;margin:0 0 14px}
.retail .desc{margin:0 0 20px}
.retail .go{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:10px}
.retail .go .btn{margin:0}
.tradepart{margin-top:clamp(56px,7vw,96px)}
.tradepart > h2{font-size:clamp(34px,1.2rem + 3vw,64px);margin:0 0 16px}
.call.stockist{margin-top:28px}
.call.stockist h3{font-size:clamp(26px,1rem + 1.4vw,36px);line-height:1.1;letter-spacing:-.02em;margin:0 0 10px}

/* ---- Home, 28 Sep 2026 (concept B chosen by Nick): photo hero with the tagline and a small
   KS mark, then "Why smart locks" (Keyless's own points) and a big fit checker.
   Premium look: deep rounded cards, soft layered shadows, lifted surfaces. */
.hx{position:relative;overflow:hidden;background:#0b0e10;isolation:isolate}
.hx img.bg{display:block;width:100%;height:min(86vh,880px);object-fit:cover;object-position:82% 50%}
.hx::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,9,11,.82) 0%,rgba(7,9,11,.5) 38%,rgba(7,9,11,0) 66%)}
.hx-copy{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
/* The lockup: mark, two-line tagline, a green rule as wide as the lockup, the h1.
   The same lockup is the share image (img/og-hero.jpg). */
.hx-lock{display:flex;flex-direction:column;align-items:flex-start}
.hx .mark{width:clamp(44px,3.6vw,60px);height:auto;margin:0 0 clamp(18px,2.2vw,32px)}
.hx .tagline{color:#fff;font-family:var(--display);font-stretch:112%;font-size:clamp(52px,1rem + 6vw,116px);font-weight:800;
  letter-spacing:-.025em;line-height:.92;margin:0}
.hx-rule{align-self:stretch;height:4px;border-radius:2px;background:#12A386;margin:clamp(20px,2.4vw,34px) 0 clamp(14px,1.6vw,22px)}
.hx .tagsub{color:#D5DCE0;font-family:var(--body);font-size:clamp(19px,.9rem + 1vw,30px);font-weight:500;letter-spacing:-.01em;margin:0}
@media(max-width:720px){
  .hx img.bg{height:78vh;min-height:520px}
  .hx::after{background:linear-gradient(0deg,rgba(7,9,11,.9) 0%,rgba(7,9,11,.55) 34%,rgba(7,9,11,0) 60%)}
  .hx-copy{justify-content:flex-end;padding-bottom:34px}
  .hx .mark{width:48px;margin-bottom:14px}
}
.why{padding:clamp(48px,6vw,104px) 0 clamp(40px,5vw,88px)}
.why h2{text-align:center;margin:0 0 clamp(26px,3.4vw,48px)}
.whygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.4vw,22px)}
@media(max-width:1080px){.whygrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.whygrid{grid-template-columns:1fr}}
.wcard{position:relative;border-radius:26px;padding:clamp(24px,2.2vw,32px);
  background:linear-gradient(180deg,#FFFFFF 0%,#F7F9FA 100%);border:1px solid rgba(15,21,25,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(15,21,25,.05),0 18px 40px -22px rgba(15,21,25,.28);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.wcard:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(15,21,25,.06),0 28px 52px -24px rgba(15,21,25,.34)}
.wico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:16px;color:var(--teal);
  background:linear-gradient(145deg,#EAF7F3 0%,#D3EEE6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 14px -8px rgba(11,110,92,.45)}
.wcard h3{font-size:clamp(18px,1rem + .3vw,21px);margin:18px 0 8px;letter-spacing:-.01em}
.wcard p{margin:0;color:var(--fg-2);font-size:15.5px;line-height:1.58}
.fitbig{padding:0 0 clamp(56px,7vw,120px)}
.fitpanel{position:relative;overflow:hidden;border-radius:clamp(26px,2.6vw,40px);color:#fff;
  padding:clamp(30px,5vw,84px);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;
  background:radial-gradient(120% 140% at 85% 20%,#1E2A30 0%,#0E1417 55%,#0A0F11 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -40px rgba(8,12,14,.6)}
.fitpanel h2{color:#fff;font-size:clamp(38px,1rem + 4.4vw,84px);line-height:1;margin:10px 0 18px;letter-spacing:-.03em}
.fitpanel .eyebrow{color:var(--mint-ink)}
.fitlede{color:#C9D1D6;font-size:clamp(17px,1rem + .4vw,22px);line-height:1.5;max-width:34em;margin:0}
.fitcta{margin:28px 0 0;display:flex;gap:12px;flex-wrap:wrap}
.fitpanel .btn.ghost{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.fitpanel img{width:100%;max-width:440px;justify-self:center;border-radius:28px;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
@media(max-width:820px){.fitpanel{grid-template-columns:1fr}.fitpanel img{max-width:240px;order:-1}}
/* Check my door in the header on every page (desktop; the phone menu already lists "Will it fit?") */
.hdr-fit{display:none}
@media(min-width:1600px){.hdr-fit{display:inline-flex}}
header.site .btn{white-space:nowrap}

.hx img.bg{animation:hxzoom 18s var(--ease) both}
@keyframes hxzoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hx img.bg{animation:none}}
.hx::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 70% at 70% 40%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%,transparent 80%,rgba(0,0,0,.35))}
.why{background:radial-gradient(70% 60% at 50% 0%,#FFFFFF 0%,rgba(255,255,255,0) 70%)}
.fitpanel::before{content:"";position:absolute;right:8%;top:50%;width:min(38vw,520px);aspect-ratio:1;transform:translateY(-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(68,219,189,.22) 0%,rgba(68,219,189,0) 65%);pointer-events:none}
.fitpanel > *{position:relative}

/* ---- Premium layer, site wide (28 Sep 2026, Nick: "new age, 3D rounded edges, premium").
   Deeper radii, lifted surfaces with soft layered shadows, glass header, gradient buttons. */
:root{--sh-rest:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(15,21,25,.05),0 18px 40px -22px rgba(15,21,25,.28);
  --sh-lift:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(15,21,25,.06),0 30px 56px -26px rgba(15,21,25,.36);
  --surf:linear-gradient(180deg,#FFFFFF 0%,#F7F9FA 100%)}
header.site{background:rgba(243,245,247,.8);-webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  box-shadow:0 1px 0 rgba(15,21,25,.06),0 10px 30px -24px rgba(15,21,25,.35)}
.btn:not(.ghost){background:linear-gradient(180deg,#118A74 0%,#0B6E5C 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px -12px rgba(11,110,92,.7);transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:not(.ghost):hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 16px 28px -14px rgba(11,110,92,.8)}
.btn.ghost{box-shadow:inset 0 0 0 1px rgba(15,21,25,.1),0 6px 16px -12px rgba(15,21,25,.35)}
.card:not(:has(> .shot)),.scale,.tw,.retail > .card,.fitcard{border-radius:26px;background:var(--surf);
  border:1px solid rgba(15,21,25,.06);box-shadow:var(--sh-rest)}
a.card:not(:has(> .shot)){transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
a.card:not(:has(> .shot)):hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.shot,.pdp-stage{border-radius:26px;box-shadow:var(--sh-rest)}
.card:has(> .shot):hover .shot{box-shadow:var(--sh-lift)}
.call{border-radius:22px;box-shadow:0 1px 2px rgba(15,21,25,.04),0 14px 34px -24px rgba(15,21,25,.3)}
.fl input,.fl textarea,.fl select{border-radius:14px;box-shadow:inset 0 1px 2px rgba(15,21,25,.06)}
section.tealband .wrap{border-radius:clamp(26px,2.6vw,40px);box-shadow:0 40px 80px -40px rgba(8,12,14,.5)}

.retail.g3 > .card{min-height:100%}
.fitnote{margin:16px 0 0;padding:14px 16px;border-radius:18px;background:var(--mint-tint);color:var(--fg-2);font-size:15px;line-height:1.5}
.fitnote b{color:var(--fg)}
.call.fitpush{background:linear-gradient(180deg,#F0FAF7,#E3F4EE);border:1px solid rgba(11,110,92,.14)}
.grid.retail > div.card{padding:clamp(24px,2.4vw,36px);border-radius:26px;background:var(--surf);border:1px solid rgba(15,21,25,.06);box-shadow:var(--sh-rest)}
.req{font-weight:600;font-size:12px;color:var(--teal);background:var(--mint-tint);border-radius:999px;padding:2px 8px;margin-left:6px}
.optnote{margin:10px 0 0;font-size:14px;color:var(--fg-2);line-height:1.5}
.g3 > div.card{padding:clamp(22px,2.2vw,32px);border-radius:26px}