/* Africar Spares Warehouse: the homepage.
 *
 * Loaded by home.html only (block extra_head), after site.css, whose tokens it
 * uses. The homepage does not load catalog.css or pages.css (home.html empties
 * the page_css block), so everything it shows is styled here or in site.css:
 * its shelf cards, Add to quote, the price gate and the trade facts carry their
 * own rules. The approved current-brand mockup
 * (design/mockups/current-brand/index.html) with "Claude's pick" baked in as
 * the only styling: the light banners (the hero plate, its part bays and the
 * trade band in --banner #D6D6D6 with ink text) and the pale tile wash (the
 * Sensors and Timing tiles and the brands band in --tile-tint #FFE1E3). No
 * colour studio and no root-class toggles.
 *
 * Class names that inner pages also use (.steps, .checks, .tick, .cards,
 * .card, .spec, .rm, .narrow, .price) are not used here; the homepage
 * versions carry their own names (.q-steps, .i-checks, .i-tick, .sh-cards,
 * .sh-card, .i-spec, .q-rm, .ov-narrow, .sh-price), so neither side can restyle
 * the other. Everything sits inside div.home.
 *
 * Breakpoints follow the shell: 1340, 1100, 900, 760 (phones), 480, 360.
 */

/* ── Base for the homepage sections ───────────────────────────────────── */
:where(.home) :is(ul,ol,dl,dd,figure){margin:0}
:where(.home) :is(ul,ol){padding:0;list-style:none}
:where(.home) :is(button,input){font:inherit;color:inherit}
/* an unsized icon would render at 300x150: 16px unless a rule below sizes it (zero specificity) */
:where(.home svg:not([class])){width:16px;height:16px;flex:none}

/* section rhythm: a heading over a 3px ink rule */
.sec{padding-block:var(--sec)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);margin-bottom:var(--s6);padding-bottom:20px;border-bottom:var(--rule-heavy)}
.home .h2{font-size:var(--fs-h2);line-height:1;letter-spacing:var(--track-tight);font-weight:800}
.sec-head .sub{margin-top:var(--s3);color:var(--muted);font-size:var(--fs-md);max-width:60ch}
.sec-head > .tlink,.sec-head > .gate{flex:none;white-space:nowrap;margin-bottom:2px}

/* ════════════════════════════════════════════════════════════════════════
   Hero: a light counter holding the red search slab on top (client, 2026-10-11:
   the search at the top of the page), the grey plate docked under it, and the
   hint row. The markup keeps the headline first; the grid puts the slab above it
   ════════════════════════════════════════════════════════════════════════ */
/* --give: a site banner or a flash message (after Add to quote, sign in, sign out) sits above the
   hero and takes part of the first screen, so the hero gives that much back from its part-bay row
   and its top padding and the search slab still ends inside the first screen */
.hero{--give:0px;--overhang:0px;--bay-h:max(110px,clamp(150px,25vh,250px) - var(--give));--accent:var(--accent-on-dark)}
.banner ~ main .hero{--give:40px}
.flash ~ main .hero{--give:80px}
.banner ~ .flash ~ main .hero{--give:120px}
.counter{display:flow-root;background:linear-gradient(180deg,var(--sage-light) 0%,var(--sage-soft) 100%);padding-top:max(12px,clamp(24px,5vh,56px) - var(--give) / 4)}

/* the plate: ruled cells on a light rule colour, outlined so it holds its edge on the counter.
   The slab is its first row, though it comes after the headline in the source; the cells fill
   rows 2 and 3 under it. */
.plate{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.55fr);grid-template-rows:auto auto var(--bay-h);gap:1px}
/* the ruled ground: the rule colour shows in the gaps between the cells; the outline and the
   rounded foot are drawn here, under the cells (z-index -1 in the plate's stacking context), so
   the slab row is neither ruled, outlined nor clipped. The bottom corner cells round themselves. */
.plate-bg{position:absolute;z-index:-1;inset:0;grid-area:2 / 1 / 4 / -1;background:var(--banner-rule);box-shadow:0 0 0 1px var(--banner-rule);border-radius:0 0 var(--r-plate) var(--r-plate)}
.intro{grid-column:1 / 4;grid-row:2;background:var(--banner);color:var(--ink);padding:clamp(28px,4.2vh,44px) 40px clamp(26px,3.8vh,36px);container-type:inline-size}
/* the plate's own hint row and lede: phones only (≤760) */
.plate-help,.plate-lede{display:none}
.home .intro h1{color:var(--ink);font-weight:800;font-size:clamp(34px,min(13.6cqi,12vh),128px);line-height:.9;letter-spacing:-.04em;margin-left:-.04em}
.intro h1 span{display:block}
.intro-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s6);margin-top:clamp(18px,3.2vh,30px)}
/* a narrow plate (windows of about 1101-1200px) would squeeze the lede into a thin column beside
   the two links: stack them, as at 1100 and below */
@container (max-width:759px){.intro-foot{flex-direction:column;align-items:flex-start;gap:14px}}
.lede{font-size:var(--fs-lead);line-height:1.5;max-width:42ch}
.lede strong{font-weight:700}
.hero-links{display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:700;flex:none}
.hero-links a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.hero-links a:hover{text-decoration-color:var(--ink)}

/* the part bays: studio renders in a soft light well */
.bay{position:relative;overflow:hidden;background:radial-gradient(62% 56% at 50% 54%,var(--banner) 0%,var(--banner-shade) 72%)}
.home .bay img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;filter:drop-shadow(0 18px 22px var(--render-shadow))}
.bay figcaption{position:absolute;left:18px;bottom:14px;display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.bay figcaption::before{content:"";width:14px;height:2px;background:var(--accent)}
.bay-link{position:absolute;inset:0;display:block;color:inherit;text-decoration:none}
.bay-link:hover figcaption{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;text-decoration-color:var(--accent-ink)}
.bay-link:focus-visible{outline-offset:-4px}
.bay-main{grid-column:4;grid-row:2 / 4;border-bottom-right-radius:var(--r-plate)}
.bay-main + .bay-sm{border-bottom-left-radius:var(--r-plate)}
.home .bay-main img{padding:44px 40px 64px}
/* the small renders carry about 30% transparent margin top and bottom, so they are scaled up to
   fill their bay; the box is inset (not padded) so it stays in the plate and the caption keeps
   its clearance */
.home .bay-sm img{top:12px;left:14px;width:calc(100% - 28px);height:calc(100% - 52px);scale:1.3}

/* the slab: the search, on top of the plate's cells, its full width */
.slab{grid-column:1 / -1;grid-row:1;position:relative;z-index:2;margin:0;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;background:var(--slab-bg);color:var(--slab-fg);border-radius:var(--r-plate) var(--r-plate) 0 0}
.slab label{display:flex;align-items:center;gap:12px;padding:0 16px 0 14px;font-weight:800;font-size:var(--fs-lead);letter-spacing:-.005em;white-space:nowrap;cursor:text}
.slab label svg{width:20px;height:20px}
/* the field anchors the suggestions under the input */
.slab .field{position:relative;min-width:0}
.slab input{display:block;width:100%;height:60px;min-width:0;margin:0;border:0;border-radius:var(--r);padding:0 20px;background:var(--white);color:var(--ink);font-size:20px;font-weight:500;letter-spacing:-.01em;outline:3px solid transparent;outline-offset:-3px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 55%,transparent);-webkit-appearance:none;appearance:none}
.slab input::placeholder{color:var(--placeholder);opacity:1}
/* one clear button only: the field's own (below), not the browser's */
.slab input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
/* focus: a 3px ink ring inside the white field (16:1 on white); the site's red ring would vanish on the red slab */
.slab input:focus-visible{box-shadow:inset 0 0 0 3px var(--ink)}
.slab button{display:flex;align-items:center;justify-content:center;gap:10px;height:60px;padding:0 30px;border:0;border-radius:var(--r);background:var(--slab-btn-bg);color:var(--slab-btn-fg);font-weight:700;font-size:var(--fs-md);cursor:pointer;white-space:nowrap;transition:background-color .15s}
.slab button:hover{background:var(--slab-btn-hover)}
.slab button:focus-visible{outline-color:var(--slab-fg);outline-offset:3px}
/* Clear search (x): a 44px button inside the field's right edge, shown only while the field
   holds text (an empty field shows its placeholder) and only with JS (x-cloak); the text stops
   short of it once Alpine has marked the field .has-clear, so without JS it keeps the full width.
   Its ring is ink and inset, so it stays inside the white field. */
.slab .q-box{position:relative;display:block}
.slab input.has-clear:not(:placeholder-shown){padding-right:60px}
.slab .field-clear{position:absolute;top:50%;right:8px;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r);background:none;color:var(--muted)}
.slab input:placeholder-shown + .field-clear{display:none}
.slab .field-clear:hover{background:var(--sage-light);color:var(--ink)}
.slab .field-clear:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.home .slab .field-clear svg{width:18px;height:18px}
/* the suggestions (shared .suggest-box styles, site.css) drop from the field over the hint row; on
   phones, where the button sits under the field, from the slab's foot (see ≤760), so the list
   never covers Search parts; there home.js (fit()) ends it inside the screen. They close when
   focus moves out of the form (home.html). */
.slab .suggest{top:calc(100% + 6px);max-height:calc(100vh - var(--head-h) - 96px);max-height:calc(100dvh - var(--head-h) - 96px);overflow-y:auto;overscroll-behavior:contain}

.hero-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;padding-top:calc(var(--overhang) + 16px);font-size:var(--fs-ui);color:var(--muted)}
/* the proof strip: four facts in a ruled row under the slab, ink on the page grey, each a link
   to where it is told in full; a red dash marks each, as on the part bays' captions */
.proof{flex:1 0 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-bottom:4px;border-bottom:1px solid var(--line)}
.proof li{display:flex;min-width:0}
.proof li + li{border-left:1px solid var(--line)}
.proof a{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 20px;color:var(--ink);font-weight:600;text-decoration:none;line-height:1.3}
.proof li:first-child a{padding-left:0}
.proof a::before{content:"";flex:none;width:14px;height:2px;background:var(--accent-ink)}
.proof span{min-width:0}
.proof b{font-weight:800}
.proof a:hover span{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.hero-foot .tlink{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);font-weight:700}
.hero-links--foot{display:none}

/* ════════════════════════════════════════════════════════════════════════
   Ranges: four tiles, rows aligned across them, then "Also in the range"
   ════════════════════════════════════════════════════════════════════════ */
.tiles{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));grid-template-rows:auto auto 1fr auto;gap:0 1px;background:var(--line);border:1px solid var(--line)}
.tile{grid-row:span 4;display:grid;grid-template-rows:subgrid;background:var(--white);color:var(--ink);text-decoration:none}
/* the render is centred absolutely, so its box never depends on the cell's track sizing */
.tile-img{position:relative;aspect-ratio:3 / 2;overflow:hidden}
.home .tile-img img{position:absolute;inset:0;margin:auto;width:86%;height:100%;object-fit:contain}
.tile-img--rack{background:var(--studio-rack)}
.home .tile-img--rack img{width:100%;height:100%}
.home .tile h3{align-self:end;padding:22px 22px 0;font-size:22px;line-height:1.1;letter-spacing:-.025em;font-weight:800}
.tile .leaves{padding:8px 22px 0;color:var(--muted);font-size:var(--fs-ui);line-height:1.45;max-width:32ch;text-wrap:pretty}
.tile .count{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 22px 0;padding:14px 0 18px;border-top:1px solid var(--line);font-weight:700;font-size:var(--fs-body)}
.tile .count svg{width:18px;height:18px;flex:none;color:var(--petrol);transition:transform .2s}
.tile:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--accent-ink)}
.tile:hover .count svg{transform:translateX(4px)}
.tile:focus-visible{position:relative;z-index:2;outline-offset:-4px}
/* Sensors and Timing components: the pale red wash, dark text */
.tile--tint{background:var(--tile-tint)}
.tile--tint .count{border-top-color:var(--tile-rule)}

.also{display:flex;border:1px solid var(--line);border-top:0;background:var(--white);font-size:var(--fs-ui)}
.also-label{flex:none;display:flex;align-items:center;padding:14px 18px;background:var(--sage-light);font-weight:700;white-space:nowrap}
.also a{flex:1 1 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-left:1px solid var(--line);text-decoration:none;font-weight:600;white-space:nowrap}
.also a > span{color:var(--muted)}
.also a:hover{background:var(--sage-light)}
.also a:hover > span{color:var(--ink)}
.also a:focus-visible{outline-offset:-3px}

/* ════════════════════════════════════════════════════════════════════════
   From the shelf (and "You looked at")
   ════════════════════════════════════════════════════════════════════════ */
.shelf{background:var(--sage-light);border-block:1px solid var(--line)}
.gate{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--ink);font-size:var(--fs-ui)}
.gate svg{width:16px;height:16px;color:var(--petrol)}
.sh-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-bottom:0}
.sh-card{display:flex;flex-direction:column;min-width:0;background:var(--white)}
.sh-img{position:relative;aspect-ratio:6 / 5;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.home .sh-img img{width:80%;height:88%;object-fit:contain}
.sh-noimg{color:var(--muted);font-size:var(--fs-sm);font-weight:600}
.sh-badges{position:absolute;left:10px;top:10px;display:flex;gap:6px}
.sh-badge{display:inline-block;padding:5px 8px;border-radius:var(--r);background:var(--ink);color:var(--white);font-size:12px;font-weight:700;line-height:1}
.sh-badge.sh-sale{background:var(--cta-bg);color:var(--cta-fg)}
.sh-body{display:flex;flex-direction:column;flex:1;padding:16px 20px 18px}
.sh-text{flex:1}
/* the heading holds the part number, the brand and the catalogue description, and links to the part */
.home .sh-card h3{font-size:inherit;font-weight:inherit;letter-spacing:normal;line-height:inherit}
.sh-card h3 a{display:block;text-decoration:none}
.sh-card h3 a:hover .sh-desc{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sh-sku{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sh-sku b{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.01em;line-height:1.1}
/* the brand: 12px 700 caps, as on every brand label (Fühler® prints FÜHLER®) */
.sh-sku > span{font-size:12px;font-weight:700;color:var(--petrol);letter-spacing:.07em;text-align:right;text-transform:uppercase}
.sh-desc{display:block;margin-top:10px;font-size:13.5px;line-height:1.55;font-weight:500;letter-spacing:.02em;color:var(--ink);text-wrap:pretty;overflow-wrap:anywhere}
.sh-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sh-foot form{margin:0}
.sh-lock{display:flex;align-items:center;gap:7px;min-height:40px;font-size:var(--fs-sm);font-weight:600;color:var(--muted);text-decoration:none}
.sh-lock svg{width:16px;height:16px;flex:none;color:var(--petrol)}
a.sh-lock:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sh-price{font-weight:800;font-size:var(--fs-md)}
/* a shown price is excl. VAT (the client: "All prices shown are excluding VAT."): a small muted
   line under the figure (5.6:1 on white) */
.sh-pr{display:flex;flex-direction:column;line-height:1.2}
.sh-vat{margin-top:2px;font-size:12px;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--muted);white-space:nowrap}
.btn-add{min-height:40px;padding:0 14px;border:2px solid var(--petrol);border-radius:var(--r);background:var(--white);color:var(--petrol);font-weight:700;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.btn-add:hover{background:var(--petrol);color:var(--white)}
.shelf-lip{height:8px;background:var(--petrol);border-radius:0 0 var(--r) var(--r)}
/* "You looked at": up to four parts the visitor opened, often fewer, so the cards stand apart
   (each with its own rule) and a short row leaves no empty ruled cells */
.viewed{margin-top:var(--s7)}
.home .viewed-title{margin-bottom:var(--s4);font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.15}
.shelf .wrap > .viewed:first-child{margin-top:0}
.viewed .sh-cards{gap:12px;background:none;border:0}
.viewed .sh-card{border:1px solid var(--line)}

/* ════════════════════════════════════════════════════════════════════════
   Brands band: the pale red wash, brands in the range
   ════════════════════════════════════════════════════════════════════════ */
.brands{--accent:var(--petrol);background:var(--tile-tint);color:var(--ink);padding-block:var(--sec)}
.brands-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px}
.brands-intro{display:flex;flex-direction:column;align-items:flex-start}
.home .brands h2{align-self:stretch;color:var(--ink);padding-bottom:22px;border-bottom:3px solid var(--panel)}
.brands h2 span{display:block;white-space:nowrap}
.brands-intro p{margin-block:16px 20px;font-size:var(--fs-lead);color:var(--muted)}
.brands-intro .tlink{display:inline-flex;align-items:center;min-height:32px;margin-top:4px;color:var(--ink)}
.home .blist-cap{padding-bottom:12px;font-size:var(--fs-ui);line-height:1.5;letter-spacing:0;font-weight:700;color:var(--ink)}
.blist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--tile-rule);border:1px solid var(--tile-rule)}
.blist > a{display:grid;grid-template-columns:min(164px,44%) minmax(0,1fr);align-items:center;gap:18px;padding:18px;background:var(--band-cell);text-decoration:none}
.blist > a:hover{background:var(--band-cell-hover)}
.blist > a:focus-visible{position:relative;z-index:2;outline-offset:-4px}
/* a white plate per logo; a logo that fails to load leaves its name on the plate */
.logo-plate{height:84px;display:flex;align-items:center;justify-content:center;padding:10px 16px;background:var(--white);border-radius:var(--r);font-weight:800;font-size:var(--fs-ui);letter-spacing:.04em;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.home .logo-plate img{width:auto;height:auto;max-width:100%;max-height:54px}
/* a squarer logo with white space built into the file: let it use the plate's full height */
.home .logo-plate img.lp-hauser{max-height:100%}
/* the Fuhler wordmark fills its file edge to edge: size it down so the four read evenly */
.home .logo-plate img.lp-fuhler{max-width:82%;max-height:40px}
.blist p{font-size:var(--fs-ui);line-height:1.45;color:var(--ink)}
.bmore{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 18px;background:var(--band-strip);font-size:var(--fs-ui);font-weight:700;color:var(--ink)}
.bmore span{margin-right:10px}
.bmore a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1.5px solid color-mix(in srgb,var(--ink) 55%,transparent);border-radius:var(--r);color:var(--ink);font-weight:800;letter-spacing:.04em;text-decoration:none}
/* the darker red: #C42129 on the strip is only 4.2:1 at this size, #A81B22 is 5.3:1 */
.bmore a:hover{border-color:var(--cta-hover);color:var(--cta-hover)}

/* ════════════════════════════════════════════════════════════════════════
   Similar isn't the same part: the annotated connector and the three checks
   ════════════════════════════════════════════════════════════════════════ */
.insp{border:1px solid var(--line);background:var(--white)}
/* the trace, dots and label squares sit on ink: white marks */
.i-spec{--accent:var(--accent-on-ink)}

/* the frame crops a 1400x933 stage; the photo, the SVG trace and the labels share that space */
.frame{--ar:2.16;--cy:453;position:relative;aspect-ratio:var(--ar);overflow:hidden;background:var(--studio);container-type:inline-size}
.stage{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1400 / 933;translate:0 calc(var(--cy) / 933 * -100%)}
.home .stage img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ov .cas{fill:none;stroke:var(--ink);stroke-width:8;stroke-linejoin:round;stroke-linecap:round}
.ov .lin{fill:none;stroke:var(--accent);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round}
.ov .dot{fill:var(--accent);stroke:var(--ink);stroke-width:4}
.ov .ov-narrow{display:none}
.co,.tag{transition:opacity .25s}
/* a label hangs left of its mark (--tx:-100%); --room, its own width in em, keeps it inside the
   frame where the frame is narrow (761-870px), so "Pin count 3" is never cut by the left edge */
.tag{--tx:-100%;--room:0px;position:absolute;left:max(calc(var(--x) / 1400 * 100%),var(--room));top:calc(var(--y) / 933 * 100%);translate:var(--tx) -50%;display:flex;align-items:center;gap:.55em;padding:.5em .8em .5em .7em;background:var(--ink);color:var(--white);font-size:clamp(13px,1.3cqi,16px);font-weight:700;line-height:1.1;white-space:nowrap;border-radius:var(--r)}
.tag::before{content:"";width:.6em;height:.6em;flex:none;background:var(--accent)}
.tag b{font-weight:800;color:var(--tag-num);margin-left:.1em;padding-left:.55em;border-left:1px solid rgba(255,255,255,.3)}
.tag-shape{--x:200;--y:300;--room:7.8em}
.tag-pins{--x:200;--y:437;--room:9em}
.tag-fix{--x:1250;--y:612}
.legend{display:none}
.i-spec[data-focus] .co,.i-spec[data-focus] .tag{opacity:.14}
.i-spec[data-focus] .is-on{opacity:1}

/* the page's one orchestrated motion: the trace draws once on arrival (home.js arms it).
   The labels come in by an animation, not a transition: it holds each one hidden only until its
   turn and then lets go, so afterwards the key's dimming (.14 above) applies at once, as it does
   to the marks. home.js adds .done once it has played, so it never replays (a label the phone
   layout hides would otherwise replay it when the window widens). */
@media (prefers-reduced-motion:no-preference){
  .i-spec.armed .draw{stroke-dasharray:1 1;stroke-dashoffset:1}
  .i-spec.armed .pop{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center}
  .i-spec.armed:not(.run) .tag{opacity:0}
  .i-spec.armed.run .draw{stroke-dashoffset:0;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.25,1) var(--d,0s)}
  .i-spec.armed.run .pop{opacity:1;transform:none;transition:opacity .2s var(--d,0s),transform .4s cubic-bezier(.2,1.4,.4,1) var(--d,0s)}
  .i-spec.armed.run:not(.done) .tag{animation:i-tag-in .3s var(--d,0s) backwards}
}
@keyframes i-tag-in{from{opacity:0;translate:var(--tx) calc(-50% + 6px)}}

.i-row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);border-top:1px solid var(--line)}
.i-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.i-checks li{display:grid;grid-template-columns:28px minmax(0,1fr);align-content:start;gap:6px 14px;padding:24px 26px 26px;border-right:1px solid var(--line);transition:background-color .2s}
.i-checks li.is-on{background:var(--sage-light)}
.i-tick{grid-row:span 2;width:26px;height:26px;display:grid;place-items:center;background:var(--petrol);color:var(--white);border-radius:var(--r)}
.home .i-tick svg{width:13px;height:13px}
.i-checks strong{font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:800;padding-top:1px}
.i-checks li > span:not(.i-tick){color:var(--muted);font-size:var(--fs-body);max-width:34ch}
.i-cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:24px 26px 26px;background:var(--sage-light)}
.i-cta p{font-weight:600;line-height:1.45}

/* ════════════════════════════════════════════════════════════════════════
   Quick quote: the copy and its steps beside the pad, a ruled link row under both
   ════════════════════════════════════════════════════════════════════════ */
.ident + .quick{padding-top:0}
.qq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:1px solid var(--line);background:var(--white)}
.q-copy{--px:40px;--pb:36px;display:flex;flex-direction:column;padding:40px var(--px) var(--pb);background:var(--sage-light);border-right:1px solid var(--line)}
.q-copy .h2 span{display:block}
.q-lede{margin-top:16px;color:var(--muted);font-size:var(--fs-lead);max-width:44ch}
.q-steps{margin:28px 0;border-top:var(--rule-heavy);counter-reset:step}
.q-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:baseline;padding:16px 0;border-bottom:1px solid var(--sage);counter-increment:step;font-size:var(--fs-md);font-weight:700}
.q-steps li::before{content:counter(step);font-size:32px;line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--petrol)}
/* the reply time the client gave (2026-10-10), quiet, under the step it qualifies */
.q-steps .q-sub{grid-column:2;margin-top:4px;font-size:var(--fs-ui);font-weight:500;line-height:1.45;color:var(--muted)}
/* docked at the foot of the panel, as the slab is docked under the hero plate */
.steps-close{margin:auto calc(-1 * var(--px)) calc(-1 * var(--pb));padding:18px var(--px);background:var(--note-bg);color:var(--note-fg);font-weight:700;font-size:var(--fs-md);line-height:1.35}

/* a column, so the actions and the sign-in note sit level with the red cell opposite */
.pad{display:flex;flex-direction:column;padding:36px 40px 32px}
.home .pad h3{font-size:var(--fs-h3);line-height:1.5;letter-spacing:-.018em;font-weight:800}
.pad table{width:100%;margin-top:18px;border-collapse:collapse}
.pad th{padding:0 0 8px;border-bottom:2px solid var(--ink);text-align:left;font-size:var(--fs-sm);font-weight:700;color:var(--muted)}
.pad .c-n{width:36px}
.pad .c-q{width:100px}
.pad .c-x{width:52px}
.pad td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.pad td.c-n{font-weight:800;font-size:var(--fs-ui);color:var(--petrol)}
.pad td.c-q{padding-left:10px}
.pad th.c-q{text-align:right}
.pad td.c-x{text-align:right}
.pad input{width:100%;height:46px;margin:0;padding:0 12px;border:1px solid var(--field-line);border-radius:var(--r);background:var(--porcelain);color:var(--ink);font-weight:600}
.pad input::placeholder{color:var(--placeholder);font-weight:500;opacity:1}
.pad input:focus{background:var(--white)}
/* the site's focus ring (site.css :focus-visible), 3px red, held close so it clears the next row */
.pad input:focus-visible{outline:3px solid var(--petrol);outline-offset:1px}
.pad .qty{text-align:right}
.q-rm{width:44px;height:44px;display:inline-grid;place-items:center;padding:0;border:0;border-radius:var(--r);background:none;color:var(--muted);cursor:pointer}
.q-rm:hover{background:var(--sage-light);color:var(--ink)}
.home .q-rm svg{width:16px;height:16px}
.addline{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin-block:8px 10px;padding:0;border:0;background:none;font-weight:800;color:var(--petrol);cursor:pointer}
.addline:hover{text-decoration:underline;text-underline-offset:4px}
.pad-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.pad-foot .tlink{display:inline-flex;align-items:center;min-height:44px}
.p-note{display:flex;align-items:flex-start;gap:8px;margin-top:14px;font-size:var(--fs-sm);color:var(--muted)}
.p-note svg{flex:none;margin-top:.2em;color:var(--petrol)}

.q-links{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;border-top:1px solid var(--line)}
.q-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:76px;padding:16px 40px;text-decoration:none;font-weight:700;font-size:var(--fs-md)}
.q-links a:only-child{grid-column:1 / -1}
.q-links a + a{border-left:1px solid var(--line)}
.q-links a:hover{background:var(--porcelain)}
.q-links a:focus-visible{outline-offset:-3px}
.q-links small{display:block;margin-top:2px;font-weight:500;font-size:var(--fs-sm);color:var(--muted)}
.home .q-links svg{width:18px;height:18px;color:var(--petrol);transition:transform .2s}
.q-links a:hover > span:first-child{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.q-links a:hover svg{transform:translateX(4px)}

/* ════════════════════════════════════════════════════════════════════════
   Trade band: the light banner grey, ink text, a red top edge
   ════════════════════════════════════════════════════════════════════════ */
.trade{--accent:var(--accent-on-dark);background:var(--banner);color:var(--ink);padding-block:calc(var(--sec) - 6px) var(--sec);border-top:6px solid var(--band-edge)}
.trade-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px 48px}
.home .trade h2{color:var(--ink);font-size:var(--fs-band);line-height:.95;letter-spacing:-.04em;font-weight:800}
.trade-top p{margin-top:18px;font-size:var(--fs-lead);max-width:52ch}
.t-act{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.t-links{display:flex;flex-wrap:wrap;gap:0 28px}
.t-links .tlink{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:48px;background:var(--banner-rule);border:1px solid var(--banner-rule)}
.fact{padding:22px 26px 24px;background:var(--banner)}
/* five facts (no branch record): the last one takes the empty cell */
.fact:last-child:nth-child(3n+2){grid-column:span 2}
.fact dt{font-size:var(--fs-md);font-weight:700;color:var(--ink);letter-spacing:-.01em}
.fact dd{margin-top:8px;font-size:var(--fs-ui);line-height:1.5;color:var(--banner-muted)}
.fact dd + dd{margin-top:6px}
.fact dd.pre{white-space:pre-line}
.fact dd strong{color:var(--ink);font-weight:700}
/* the band closes on a ruled arrow row hung under the facts */
.t-row{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:16px 26px;border:1px solid var(--banner-rule);border-top:0;color:var(--ink);font-weight:700;font-size:var(--fs-md);text-decoration:none;transition:background-color .15s,color .15s}
.home .t-row svg{width:18px;height:18px;color:var(--accent);transition:transform .2s}
.t-row:hover{background:var(--petrol);color:var(--white)}
.t-row:hover span{text-decoration:underline;text-decoration-color:var(--white);text-decoration-thickness:2px;text-underline-offset:5px}
.home .t-row:hover svg{transform:translateX(4px);color:var(--white)}

/* ════════════════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════════════════ */
/* "Also in the range" needs about 1250px on one line; below that, three columns */
@media (min-width:761px) and (max-width:1340px){
  .also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .also-label{grid-column:1 / -1;border-bottom:1px solid var(--line)}
  .also a{border-bottom:1px solid var(--line);white-space:normal;line-height:1.3}
  .also a > span{flex:none}
  .also a:nth-of-type(3n+1){border-left:0}
  .also a:nth-last-of-type(-n+3){border-bottom:0}
}

/* ≤ 1100: tablet */
@media (max-width:1100px){
  .hero{--bay-h:max(100px,clamp(140px,22vh,230px) - var(--give))}
  .counter{padding-top:max(12px,clamp(20px,3.5vh,48px) - var(--give) / 4)}
  .plate{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.3fr)}
  .intro{padding-inline:28px}
  .intro-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .lede{font-size:var(--fs-md)}
  .home .bay-main img{padding:30px 24px 54px}

  /* 2x2, image on top, subgrid rows so titles, text and counts align per row */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto auto 1fr auto);gap:1px}
  .tile-img{aspect-ratio:2 / 1}
  .tile .leaves{max-width:46ch}

  .sh-body{padding:14px 16px 16px}
  .sh-sku{flex-direction:column;gap:4px}
  .sh-sku > span{text-align:left}
  .sh-foot{flex-direction:column;align-items:stretch;gap:8px}
  .sh-foot .btn-add{width:100%}

  .brands-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .brands-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:end}
  .home .brands h2{grid-column:1 / -1;margin-bottom:16px}
  .brands-intro p{margin:0}
  .brands-intro .tlink{margin-top:0;justify-self:end}

  .frame{--ar:2}
  .i-row{grid-template-columns:minmax(0,1fr)}
  .i-checks li{padding:20px 20px 22px}
  .i-checks li:last-child{border-right:0}
  .i-cta{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;border-top:1px solid var(--line)}

  .q-copy{--px:28px;--pb:28px;padding-top:32px}
  .pad{padding:32px 28px 28px}
  .q-links a{padding-inline:28px}
}

/* ≤ 900: small tablet */
@media (max-width:900px){
  .sh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qq{grid-template-columns:minmax(0,1fr)}
  .q-copy{border-right:0;border-bottom:1px solid var(--line)}
  .q-links a + a{border-left:0;border-top:1px solid var(--line)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:last-child:nth-child(3n+2){grid-column:auto}
  .fact:last-child:nth-child(odd){grid-column:span 2}
  .trade-top{grid-template-columns:minmax(0,1fr)}
  .t-act{align-items:flex-start}
}

/* ≤ 760: phones */
@media (max-width:760px){
  .sec-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:var(--s5);padding-bottom:16px}
  .sec-head .sub{font-size:var(--fs-body)}
  .sec-head > .tlink{display:inline-flex;align-items:center;min-height:44px;margin-block:-8px}

  /* hero: one plate, the search first. The slab (full width, its top rounded), the hint row,
     the headline, the lede, a short throttle-body row and three small bays; then the proof strip and both hero links. The
     intro's lede and links and the foot's hint row give way to the plate's own (home.html). */
  .hero{--overhang:0px;--main-h:max(88px,128px - var(--give) / 2);--bay-h:max(76px,100px - var(--give) / 3)}
  .counter{padding-top:max(8px,14px - var(--give) / 4)}
  .plate{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto auto var(--main-h) var(--bay-h)}
  .plate-bg{grid-row:2 / -1}
  .intro{grid-column:1 / -1;grid-row:3;padding:14px 16px 4px}
  .home .intro h1{font-size:clamp(30px,13.6cqi,56px);line-height:.92}
  .intro-foot{display:none}
  .lede{font-size:15.5px;line-height:1.45}
  .plate-help{grid-column:1 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:center;column-gap:20px;padding:2px 16px;background:var(--banner);color:var(--banner-muted);font-size:var(--fs-ui)}
  .plate-help .tlink{display:inline-flex;align-items:center;color:var(--ink)}
  .plate-lede{grid-column:1 / -1;grid-row:4;display:block;padding:14px 16px 16px;background:var(--banner);color:var(--ink)}
  .bay-main{grid-column:1 / -1;grid-row:5;border-bottom-right-radius:0}
  .bay-main + .bay-sm{border-bottom-left-radius:var(--r-plate)}
  .bay-sm:last-of-type{border-bottom-right-radius:var(--r-plate)}
  .home .bay-main img{padding:10px 14px 10px 44%}
  .bay-main figcaption{left:16px;bottom:auto;top:50%;translate:0 -50%;font-size:var(--fs-ui)}
  .home .bay-sm img{top:8px;left:8px;width:calc(100% - 16px);height:calc(100% - 38px)}
  .bay figcaption{left:10px;bottom:9px;gap:6px;font-size:12px}
  .bay figcaption::before{width:10px}
  .slab{grid-row:1;margin:0;border-radius:var(--r-plate) var(--r-plate) 0 0;grid-template-columns:minmax(0,1fr);gap:8px;padding:10px}
  .slab label{padding:4px 4px 0;font-size:var(--fs-body)}
  .slab label svg{width:18px;height:18px}
  .slab input{height:52px;padding:0 14px;font-size:18px}
  .slab input.has-clear:not(:placeholder-shown){padding-right:52px}
  .slab .field-clear{right:4px}
  .slab button{height:50px;font-size:var(--fs-body)}
  .slab .field{position:static}   /* the list anchors to the slab: under the button, full width */
  .hero-foot{flex-direction:column;align-items:flex-start;gap:0;font-size:var(--fs-ui)}
  .hero-foot > .tlink{display:none}
  .plate-help .tlink{min-height:44px}
  .hero-links--foot{display:flex;width:100%;gap:0 24px;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
  .hero-links--foot a{min-height:44px;color:var(--ink);text-decoration-color:var(--accent-ink)}
  .hero-links--foot a:hover{text-decoration-color:var(--ink)}
  /* the proof strip: two by two, ruled between the cells */
  .proof{flex:none;align-self:stretch;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:6px}
  .proof li + li{border-left:0}
  .proof li:nth-child(even){border-left:1px solid var(--line)}
  .proof li:nth-child(n+3){border-top:1px solid var(--line)}
  .proof li:last-child:nth-child(odd){grid-column:1 / -1}
  .proof a{gap:8px;min-height:48px;padding:6px 10px 6px 12px;font-size:var(--fs-sm)}
  .proof li:nth-child(odd) a{padding-left:0}
  .proof a::before{width:10px}

  /* ranges: list tiles, text left and render right */
  .ranges .sec-head h2 span{display:block}
  .tiles{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tile{grid-row:auto;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr) 42%}
  .tile-img{grid-column:2;grid-row:1 / 5;aspect-ratio:auto;min-height:156px}
  .home .tile-img img{width:90%;height:84%}
  .home .tile h3{grid-column:1;padding:18px 8px 0 16px;font-size:20px}
  .tile .leaves{grid-column:1;padding:6px 8px 0 16px;font-size:var(--fs-sm)}
  .tile .count{grid-column:1;grid-row:4;justify-content:flex-start;margin:14px 8px 0 16px;padding:0 0 16px;border-top:0;font-size:var(--fs-ui)}
  .tile .count svg{order:-1;box-sizing:content-box;width:16px;height:16px;padding:7px;border:1.5px solid currentColor;border-radius:var(--r);color:var(--ink)}
  .also{display:block;font-size:var(--fs-ui)}
  .also-label{padding:12px 16px;border-bottom:1px solid var(--line)}
  .also a{min-height:48px;padding:10px 16px;border-left:0;border-bottom:1px solid var(--line);white-space:normal;line-height:1.3}
  .also a:last-of-type{border-bottom:0}
  .also a > span{flex:none;min-width:4ch;text-align:right}

  /* shelf */
  .sec-head > .gate{white-space:normal}
  .sh-foot{gap:6px;margin-top:12px;padding-top:10px}
  .btn-add,.sh-lock{min-height:44px}

  /* brands */
  .brands-intro{display:block}
  .home .brands h2{margin-bottom:0}
  .brands-intro p{margin-top:14px;font-size:var(--fs-body)}
  .brands-intro .tlink{min-height:44px;margin-top:8px}
  .blist{grid-template-columns:minmax(0,1fr)}
  .blist > a{grid-template-columns:128px minmax(0,1fr);gap:14px;padding:14px}
  .logo-plate{height:64px;padding:8px 10px}
  .home .logo-plate img{max-height:42px}
  .bmore{padding:12px 14px}
  .bmore span{width:100%}

  /* ident: a phone frame, one label on the photo, the key beneath */
  .frame{--ar:1.6}
  .ov .cas{stroke-width:14}
  .ov .lin{stroke-width:6}
  .ov .dot{stroke-width:6}
  .ov .k-fix .cas{stroke-width:10}   /* the bush sits at the photo's edge: keep its ring clear of the frame */
  .ov .ov-wide{display:none}
  .ov .ov-narrow{display:inline}
  .tag{font-size:12.5px}
  .tag-shape,.tag-fix{display:none}
  .tag-pins{--x:490;--y:806;--tx:-50%;--room:0px}
  .legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
  .legend button{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;min-height:64px;padding:8px 12px;border:0;border-left:1px solid var(--line);background:var(--white);color:var(--ink);font-weight:700;font-size:var(--fs-sm);line-height:1.2;text-align:left;cursor:pointer}
  .legend button:first-child{border-left:0}
  .legend button:focus-visible{outline-offset:-3px}
  .legend button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
  .legend button[aria-pressed="true"]:focus-visible{outline-color:var(--white)}   /* red on ink is 2.8:1 */
  .legend svg{width:26px;height:18px;flex:none}
  .legend b{font-weight:800}
  .legend .k-c{fill:none;stroke:var(--ink);stroke-width:4}
  .legend .k-l{fill:none;stroke:var(--accent-ink);stroke-width:2}
  .legend button[aria-pressed="true"] .k-c{stroke:var(--white)}
  .legend button[aria-pressed="true"] .k-l{stroke:var(--accent)}
  .i-checks{grid-template-columns:minmax(0,1fr)}
  .i-checks li{grid-template-columns:26px minmax(0,1fr);gap:4px 12px;padding:18px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .i-tick{width:24px;height:24px}
  .i-checks strong{font-size:var(--fs-md)}
  .i-checks li > span:not(.i-tick){font-size:var(--fs-ui)}
  .i-cta{flex-direction:column;align-items:stretch;gap:14px;padding:20px 16px;border-top:0}
  .i-cta .btn{width:100%}

  /* quick quote */
  .q-copy{--px:16px;--pb:24px;padding-top:28px}
  .q-lede{font-size:var(--fs-body)}
  .q-steps li{grid-template-columns:40px minmax(0,1fr);font-size:var(--fs-body)}
  .q-steps li::before{font-size:28px}
  .steps-close{font-size:var(--fs-body)}
  .pad{padding:24px 16px 22px}
  .q-links a{min-height:64px;padding-inline:16px}
  .pad .c-n{width:24px}
  .pad .c-q{width:72px}
  .pad .c-x{width:44px}
  .pad td.c-q{padding-left:8px}
  .pad input{padding:0 10px}
  .pad-foot{flex-direction:column-reverse;align-items:stretch;gap:8px;text-align:center}
  .pad-foot .tlink{justify-content:center}

  /* trade band */
  .trade-top p{font-size:var(--fs-body)}
  .t-act{align-items:stretch;gap:8px}
  .t-links{flex-direction:column}
  .facts{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .fact:last-child:nth-child(odd){grid-column:auto}
  .fact{padding:18px 16px 20px}
  .t-row{min-height:64px;padding-inline:16px}
}

/* ≤ 480: one product per row */
@media (max-width:480px){
  .sh-cards{grid-template-columns:minmax(0,1fr)}
  .sh-card{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"img body" "foot foot"}
  /* the cell runs the card's full height, so its rule meets the footer rule; the photo stays square */
  .sh-img{grid-area:img;align-self:stretch;aspect-ratio:auto;place-items:start center;padding-top:8px;border-bottom:0;border-right:1px solid var(--line)}
  .home .sh-img img{width:88px;height:88px}
  .sh-noimg{padding:20px 6px;text-align:center;font-size:var(--fs-xs)}
  .sh-badges{left:4px;top:4px;flex-direction:column;align-items:flex-start;gap:4px}
  .sh-body{display:contents}
  .sh-text{grid-area:body;padding:12px 14px}
  .sh-foot{grid-area:foot;flex-direction:row;align-items:center;gap:16px;margin:0;padding:8px 14px 12px}
  .sh-foot form{flex:1}
}

/* ≤ 360: the narrowest phones */
@media (max-width:360px){
  .hero{--main-h:max(84px,116px - var(--give) / 2);--bay-h:max(72px,90px - var(--give) / 3)}
  .tile{grid-template-columns:minmax(0,1fr) 38%}
  .home .tile h3{font-size:19px}
  .blist > a{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px}
  .logo-plate{height:56px;padding:6px 8px}
  .home .logo-plate img{max-height:36px}
  .blist p{font-size:var(--fs-sm)}
  .legend button{padding:8px 10px;font-size:var(--fs-xs)}
  .bmore a{padding:0 14px}
  /* keep the line numbers; take the width from the quantity column */
  .pad .c-n{width:20px}
  .pad .c-q{width:60px}
  .pad td.c-q{padding-left:6px}
}