:root{
  --red:#D6262B; --red-deep:#A9181D; --red-soft:#FBE9EA; --brand:#ED1C24;
  --ink:#1F1D1E; --steel:#58595B; --steel-light:#6C6D70;
  --line:#E3E1E1; --panel:#F4F3F3; --bg:#FFFFFF;
  --sidebar:236px; --radius:6px; --top:62px;
  font-family:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
body{-webkit-user-select:none;user-select:none}
input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}
html{color-scheme:light;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-color:#c8c8c8 #f4f3f3}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#c8c8c8;border-radius:5px;border:2px solid #fff}
*::-webkit-scrollbar-track{background:#f4f3f3}
body{margin:0;direction:rtl;color-scheme:light;scrollbar-color:#c8c8c8 transparent;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ---------- top bar ---------- */
.skip{position:absolute;right:-9999px;top:0;z-index:80;background:var(--red);color:#fff;padding:10px 16px;border-radius:0 0 6px 6px;font-weight:700}
.skip:focus{right:12px}
.topbar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;height:var(--top)}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand .logo{height:21px;width:auto;display:block;color:var(--brand);flex:none}
.brand .il{font-weight:500;color:var(--steel);font-size:15px;align-self:center}
.closebar .brand .logo{height:17px}
.search{flex:1;min-width:0;display:flex;align-items:center;max-width:520px;background:var(--panel);border:1px solid transparent;border-radius:999px;padding:0 14px;height:40px;gap:8px}
.search:focus-within{border-color:var(--red);background:#fff}
.search input{flex:1;border:0;background:none;font:inherit;font-size:15px;min-width:0;outline:none;color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--red);color-scheme:light}
.search input::placeholder{color:var(--steel-light)}
.search svg{flex:none;color:var(--steel-light)}
.spacer{flex:1}
.iconbtn{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--ink)}
.iconbtn:hover{background:var(--panel)}
.iconbtn .badge{position:absolute;top:2px;left:2px;background:var(--red);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.iconbtn .badge:empty{display:none}
/* header heart: "happy moment" */
#favBtn svg{transform-origin:50% 55%}
#favBtn svg path{transition:fill .2s,stroke .2s}
#favBtn.lit svg path{fill:var(--red);stroke:var(--red)}
#favBtn.pop svg{animation:heartPop .6s cubic-bezier(.36,.07,.19,.97)}
#favBtn.shrink svg{animation:heartShrink .35s ease}
@keyframes heartPop{0%{transform:scale(1)}25%{transform:scale(.7)}55%{transform:scale(1.4)}75%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes heartShrink{50%{transform:scale(.8)}}
#favBtn .spark{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--red);pointer-events:none;animation:spark .65s ease-out forwards}
#favBtn .spark:nth-child(even){width:5px;height:5px;background:#FF8A8E}
@keyframes spark{0%{transform:translate(0,0) scale(.6);opacity:1}40%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
#favBtn .badge.bump{animation:bump .4s ease}
@keyframes bump{40%{transform:scale(1.45)}}
/* while the welcome hint is open: lift the top bar over the backdrop and let the heart "click" itself */
body.hinting .topbar{z-index:67}
body.hinting #favBtn{background:#fff;box-shadow:0 0 0 0 rgba(226,30,38,.35);animation:ring 1.5s ease-out 1}
body.hinting #favBtn svg{animation:heartBeat 1.5s ease-in-out 1}
body.hinting #favBtn svg path{animation:heartFill 1.5s ease-in-out 1}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(226,30,38,.4)}70%{box-shadow:0 0 0 14px rgba(226,30,38,0)}100%{box-shadow:0 0 0 14px rgba(226,30,38,0)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}18%{transform:scale(.78)}40%{transform:scale(1.28)}58%{transform:scale(.96)}72%{transform:scale(1.06)}}
@keyframes heartFill{0%,12%{fill:none;stroke:var(--ink)}22%,60%{fill:var(--red);stroke:var(--red)}85%,100%{fill:none;stroke:var(--ink)}}
/* welcome modal: the big heart clicks itself */
#hint .ico{position:relative;overflow:visible;animation:hintRing 2.2s ease-out 3}
#hint .ico svg{transform-origin:50% 55%;animation:hintBeat 2.2s ease-in-out 3}
#hint .ico svg path{animation:hintFill 2.2s ease-in-out 3}
#hint .ico .spark{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--red);pointer-events:none;opacity:0;animation:hintSpark 2.2s ease-out 3}
#hint .ico .spark:nth-child(even){width:6px;height:6px;background:#FF8A8E}
@keyframes hintRing{0%,22%{box-shadow:0 0 0 0 rgba(226,30,38,.45)}70%,100%{box-shadow:0 0 0 22px rgba(226,30,38,0)}}
@keyframes hintBeat{0%,12%{transform:scale(1)}20%{transform:scale(.72)}32%{transform:scale(1.35)}44%{transform:scale(.94)}54%,100%{transform:scale(1)}}
@keyframes hintFill{0%,18%{fill:none;stroke:var(--red)}24%,72%{fill:var(--red);stroke:var(--red)}86%,100%{fill:none;stroke:var(--red)}}
@keyframes hintSpark{0%,20%{transform:translate(0,0) scale(.5);opacity:0}24%{opacity:1}62%,100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@media (prefers-reduced-motion:reduce){#hint .ico,#hint .ico svg,#hint .ico svg path,#hint .ico .spark{animation:none!important}}
@media (prefers-reduced-motion:reduce){#favBtn svg,#favBtn .spark,#favBtn .badge,body.hinting #favBtn,body.hinting #favBtn svg path{animation:none!important}}
.menubtn{display:none}

/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:calc(100vh - var(--top))}
.sidebar{border-inline-end:1px solid var(--line);background:var(--bg);position:sticky;top:var(--top);height:calc(100vh - var(--top))}
.sidebar .inner{height:100%;overflow-y:auto;padding:18px 0 40px}
.sidebar h2{font-size:17px;font-weight:900;color:var(--ink);margin:4px 22px 10px}
.sidebar h2 a:hover{color:var(--red)}
.sidebar .homelink{display:block;margin:0 22px 10px;padding:0 0 10px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700}
.sidebar .homelink:hover{color:var(--red)}
.toc{list-style:none;margin:0;padding:0}
.toc>li{border-bottom:1px solid var(--line)}
.toc>li:last-child{border-bottom:0}
.toc .group{display:flex;align-items:center;width:100%;text-align:start;padding:11px 22px;gap:10px;font-weight:700;font-size:15px}
.toc .group .pg{margin-inline-start:auto;font-weight:500;font-size:12px;color:var(--steel-light)}
.toc .group .chev{width:14px;height:14px;color:var(--steel-light);transition:transform .2s}
.toc li.open .group .chev{transform:rotate(-90deg)}
.toc .subs{list-style:none;margin:0;padding:0 0 8px;display:none}
.toc li.open .subs{display:block}
.toc .subs a{display:flex;align-items:center;padding:7px 22px 7px 16px;padding-inline-start:38px;font-size:14px;color:var(--steel);border-inline-start:3px solid transparent}
.toc .subs a .pg{margin-inline-start:auto;font-size:11px;color:var(--steel-light)}
.toc .subs a:hover{color:var(--ink);background:var(--panel)}
.toc .subs a.active{color:var(--red);font-weight:700;border-inline-start-color:var(--red)}
.toc .subs a.empty{opacity:.55}
.toc .subs a.empty::after{content:"בקרוב";font-size:10px;margin-inline-start:8px;background:var(--panel);border-radius:3px;padding:1px 5px;color:var(--steel-light)}
.sidebar .foot{margin:20px 22px 0;font-size:12px;color:var(--steel-light);line-height:1.6}
main{min-width:0;padding-bottom:60px}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- category hero ---------- */
.hero{position:sticky;top:var(--top);z-index:20;overflow:hidden;background:var(--ink);color:#fff;min-height:300px;display:flex;align-items:flex-end;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,center)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(20,18,18,.6) 0%,rgba(20,18,18,.3) 55%,rgba(20,18,18,.05) 100%),linear-gradient(to top,rgba(20,18,18,.75),transparent 55%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:70px;padding-bottom:30px}
.hero .eyebrow{font-size:12px;font-weight:700;letter-spacing:.1em;opacity:.85;margin:0 0 6px}
.hero .eyebrow::before{content:"";display:inline-block;width:22px;height:3px;background:var(--red);vertical-align:middle;margin-inline-end:8px}
.hero h1{font-size:clamp(32px,4.5vw,52px);font-weight:900;margin:0;line-height:1.05;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero p{margin:10px 0 0;font-size:16px;font-weight:500;opacity:.95;max-width:46ch;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.features{display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;font-weight:500}
.features li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-inline-end:7px;vertical-align:middle}
.traits{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px;margin:18px 0 0}
.trait{display:flex;flex-direction:column;gap:2px;width:132px}
.trait img{width:132px;height:96px;object-fit:cover;border-radius:var(--radius);margin-bottom:6px;background:var(--panel)}
#traits-power-16v .trait img{object-fit:cover;background:#fff}
#traits-power-20v .trait img{object-fit:cover;background:#ed1c24}
.trait b{font-size:13px;font-weight:700;line-height:1.3}
.trait span{font-size:12px;color:var(--steel);line-height:1.35}

.section-head{display:flex;align-items:baseline;gap:14px;margin:30px 0 16px}
.section-head h2{font-size:20px;font-weight:900;margin:0}
.section-head .count{color:var(--steel-light);font-size:14px}

/* ---------- product grid ---------- */
/* fixed-size cards: wrap as needed, centred, never more than 4 per row; .models shrinks to the column count so headings align with the cards */
.wrap{container-type:inline-size}
.models{--card:200px;--gap:18px;width:calc(4*var(--card) + 3*var(--gap));max-width:100%;margin:0 auto}
@container (max-width:853px){.models{width:calc(3*var(--card) + 2*var(--gap))}}
@container (max-width:635px){.models{width:calc(2*var(--card) + var(--gap))}}
@container (max-width:417px){.models{width:var(--card)}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,var(--card));gap:var(--gap);justify-content:center}
.card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:#fff;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.card:hover{border-color:#cfcfcf;box-shadow:0 6px 18px rgba(31,29,30,.08)}
.card .ph{position:relative;aspect-ratio:4/5;background:linear-gradient(180deg,#fafafa,#f0f0f0);display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4%;box-sizing:border-box;transition:transform .25s}
.card:hover .ph img{transform:scale(1.04)}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.card .code{font-weight:900;font-size:20px;line-height:1;color:var(--red);display:flex;align-items:center;gap:8px}
.card .name{font-weight:500;font-size:14px;color:var(--ink)}
.card .tag{font-size:12px;color:var(--steel-light)}
.tag bdi,.tagline bdi{unicode-bidi:isolate}
.sep{opacity:.6}
.hot{font-size:10px;font-weight:700;background:var(--red);color:#fff;border-radius:3px;padding:2px 5px;letter-spacing:.05em}
.card .hot{font-size:9px}
.fav{position:absolute;top:10px;left:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;color:var(--steel);box-shadow:0 1px 3px rgba(0,0,0,.12);z-index:2}
.fav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .15s}
.fav.on{color:var(--red)}
.fav.on svg{fill:var(--red)}
.fav:active svg{transform:scale(.85)}
.empty{padding:60px 20px;text-align:center;color:var(--steel);border:1px dashed var(--line);border-radius:var(--radius);margin-top:20px}
.empty b{display:block;font-size:18px;color:var(--ink);margin-bottom:6px}

/* ---------- product page ---------- */
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--steel-light);margin:18px 0 10px;flex-wrap:wrap}
.crumbs a:hover{color:var(--red)}
.crumbs span{opacity:.6}
.product{display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:28px 36px;align-items:start;margin-top:8px}
.product>*{min-width:0}
.specs{grid-column:1 / -1;max-width:900px}
.gallery{position:relative}
.gallery .main .zoomhint:focus-visible{outline:3px solid #fff;outline-offset:2px}
.gallery .main{position:relative;background:linear-gradient(180deg,#fafafa,#f0f0f0);border-radius:var(--radius);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:zoom-in}
.gallery .main>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3%;box-sizing:border-box}
.gallery .main .zoomhint{position:absolute;z-index:3;cursor:pointer;border:0;font:inherit;bottom:10px;inset-inline-end:10px;background:rgba(31,29,30,.7);color:#fff;font-size:12px;padding:4px 9px;border-radius:4px;display:flex;gap:6px;align-items:center}
.thumbs{position:absolute;bottom:10px;inset-inline-start:10px;display:flex;gap:8px;z-index:2}
.thumbs button{width:64px;height:64px;border:2px solid #fff;border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
.thumbs button.on{border-color:var(--red)}
.thumbs img{width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.info .code{font-size:40px;font-weight:900;color:var(--red);line-height:1;display:flex;align-items:center;gap:12px}
.info h1{font-size:24px;font-weight:700;margin:6px 0 4px;text-wrap:balance}
.info .tagline{color:var(--steel);font-size:15px;margin:0 0 16px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 22px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:0 18px;height:44px;border-radius:999px;font-weight:700;font-size:15px;border:1.5px solid var(--ink);background:#fff;color:var(--ink)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.btn:hover{background:var(--panel)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}
.btn.on{border-color:var(--red);color:var(--red)}
.btn.on svg{fill:var(--red)}
.label{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.apps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 20px;padding:0;list-style:none}
.apps li{background:var(--red-soft);color:var(--red-deep);font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px}
.icons{display:flex;flex-wrap:wrap;gap:6px;margin:-8px 0 22px;padding:0;list-style:none}
.icons li{display:flex;align-items:center;height:34px;border:1px solid var(--line);border-radius:17px;background:#fff;padding:0 4px;cursor:default;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.icons img{width:24px;height:24px;flex:none}
.icons span{display:block;max-width:0;opacity:0;white-space:nowrap;font-size:12.5px;font-weight:500;color:var(--steel);padding-inline-start:0;transition:max-width .28s ease,opacity .2s ease,padding .28s ease}
.icons li:hover,.icons li.open,.icons li:focus-visible{border-color:var(--steel-light);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.icons li:hover span,.icons li.open span,.icons li:focus-visible span{max-width:260px;opacity:1;padding-inline-start:7px;padding-inline-end:6px}
.bullets{margin:0 0 8px;padding:0;list-style:none;display:grid;gap:6px}
.bullets li{padding-inline-start:18px;position:relative;font-size:15px}
.bullets li::before{content:"";position:absolute;inset-inline-start:2px;top:9px;width:7px;height:7px;background:var(--red);border-radius:1px;transform:rotate(45deg)}
.specwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.specwrap:focus-visible{outline:2px solid var(--red);outline-offset:2px}
table.spec{width:100%;border-collapse:collapse;font-size:14px}
table.spec th{background:var(--steel);color:#fff;font-weight:700;padding:9px 12px;text-align:center;font-size:14px}
table.spec th:first-child{text-align:start;background:#fff;color:var(--steel-light);font-size:11px;letter-spacing:.1em}
table.spec td{padding:8px 12px;border-top:1px solid var(--line);text-align:center;direction:ltr;font-variant-numeric:tabular-nums}
table.spec td:first-child{text-align:start;direction:rtl;color:var(--steel);font-weight:500;width:36%}
table.spec tr:nth-child(even) td{background:#fafafa}
table.spec tr.bold td{font-weight:700;color:var(--ink)}
.variants-note{font-size:12px;color:var(--steel-light);margin:8px 0 0}
.catref{margin-top:26px;font-size:13px;color:var(--steel-light)}

/* ---------- favourites drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(31,29,30,.45);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(420px,100%);z-index:50;overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility .25s}
.drawer .inner{height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.2);transform:translateX(-100%);transition:transform .25s}
.drawer.show{visibility:visible;pointer-events:auto}
.drawer.show .inner{transform:none}
.drawer header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.drawer header h2{margin:0;font-size:18px;font-weight:900;flex:1}
.drawer .list{flex:1;overflow-y:auto;padding:10px 20px}
.favrow{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.favrow img{width:54px;height:54px;object-fit:contain;background:#f6f6f6;border-radius:4px;flex:none}
.favrow .t{flex:1;min-width:0}
.favrow .t b{color:var(--red);font-size:16px}
.favrow .t div{font-size:13px;color:var(--steel);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.favrow .rm{color:var(--steel-light);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.favrow .rm:hover{background:var(--panel);color:var(--red)}
.drawer .quote{border-top:1px solid var(--line);padding:16px 20px 20px;background:#fafafa}
.drawer .quote h3{margin:0 0 4px;font-size:15px;font-weight:700}
.drawer .quote p{margin:0 0 12px;font-size:13px;color:var(--steel)}
.field{display:grid;gap:4px;margin-bottom:10px}
.field label{font-size:12px;font-weight:700;color:var(--steel)}
.field label .opt{font-weight:400;color:var(--steel-light)}
.field input,.field textarea{font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);caret-color:var(--red);-webkit-text-fill-color:var(--ink);color-scheme:light}
.field input::placeholder,.field textarea::placeholder{color:var(--steel-light);-webkit-text-fill-color:var(--steel-light)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sendrow{display:flex;gap:8px;margin-top:6px}
.sendrow .btn{flex:1;justify-content:center;height:42px;font-size:14px;padding:0 10px;gap:7px}
.sendrow .btn svg{flex:none}
.btn.wa svg{width:20px;height:20px;fill:currentColor;stroke:none}
.btn.wa{background:#0F8038;border-color:#0F8038;color:#fff}
.btn.wa:hover{background:#0B6B2E;border-color:#0B6B2E}
.note{font-size:12px;color:var(--steel-light);margin:10px 0 0}
.formerr{margin:8px 0 0;font-size:13px;font-weight:700;color:var(--red-deep)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);border-width:2px}
html.a11y-dark .formerr{color:var(--red)}
.drawer .emptyfav{text-align:center;padding:50px 20px;color:var(--steel)}
.drawer .emptyfav svg{display:block;width:44px;height:44px;stroke:var(--line);fill:none;stroke-width:1.5;margin:0 auto 12px}
.drawer .emptyfav b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.drawer .emptyfav p{margin:0;font-size:14px;line-height:1.5}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(20,18,18,.94);z-index:60;display:none;touch-action:none;overflow:hidden}
.lightbox.show{display:block}
.lightbox img{position:absolute;top:50%;left:50%;max-width:none;max-height:none;transform-origin:0 0;user-select:none;-webkit-user-drag:none;will-change:transform}
.lightbox .close{position:absolute;top:14px;left:14px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.lightbox .cap{position:absolute;bottom:16px;right:16px;color:#fff;font-size:13px;opacity:.8;z-index:2}
.lightbox .zc{position:absolute;bottom:14px;left:14px;display:flex;gap:6px;z-index:2}
.lightbox .zc button{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:20px;font-weight:700}

/* ---------- fallback panel ---------- */
.fallback{position:fixed;inset:0;z-index:65;background:rgba(31,29,30,.5);display:none;align-items:center;justify-content:center;padding:16px}
.fallback.show{display:flex}
.fb{position:relative;background:#fff;border-radius:10px;padding:22px 22px 18px;width:min(520px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3)}
.fb h3{margin:0 30px 6px 0;font-size:17px}
.fb p{margin:0 0 10px;font-size:14px;color:var(--steel)}
.fb textarea{width:100%;font:inherit;font-size:14px;line-height:1.5;padding:10px;border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);-webkit-text-fill-color:var(--ink);background:#fafafa;resize:vertical;-webkit-user-select:text;user-select:text;color-scheme:light;scrollbar-width:thin;scrollbar-color:#c8c8c8 transparent}
.fb textarea::-webkit-scrollbar{width:8px}
.fb textarea::-webkit-scrollbar-thumb{background:#c8c8c8;border-radius:4px}
.fb textarea::-webkit-scrollbar-track{background:transparent}
.fb .close{position:absolute;top:10px;left:10px}
.fb .sendrow{flex-wrap:wrap}
.fb .sendrow .btn{text-decoration:none;flex:1 1 auto;white-space:nowrap;padding:0 14px}
.fb .sendrow #fbCopy{flex:0 0 auto;padding:0 14px}

/* ---------- first-visit hint & success modal ---------- */
.modal{position:fixed;inset:0;z-index:66;background:rgba(31,29,30,.5);display:none;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.mbox{background:#fff;border-radius:12px;padding:26px 24px 20px;width:min(440px,100%);box-shadow:0 20px 60px rgba(0,0,0,.3);text-align:center;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}
.mbox .ico{width:56px;height:56px;border-radius:50%;background:var(--red-soft);color:var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.mbox .ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mbox .ico.ok{background:#E8F7EC;color:#1E9E4A}
.mbox h3{margin:0 0 8px;font-size:19px;font-weight:900}
.mbox p{margin:0 0 18px;font-size:15px;color:var(--steel);line-height:1.55}
.mbox p b{color:var(--ink)}
.mbox .btn{justify-content:center;min-width:140px}
.hintheart{display:inline-flex;vertical-align:-3px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--line);align-items:center;justify-content:center;margin:0 2px}
.hintheart svg{width:12px;height:12px;fill:var(--red);stroke:var(--red);stroke-width:2}
@media (prefers-reduced-motion:reduce){.mbox{animation:none}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:70;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;bottom:0;right:0;width:min(320px,88vw);height:100vh;z-index:50;overflow:hidden;border:0;background:transparent;visibility:hidden;pointer-events:none;transition:visibility .25s}
  .sidebar .inner{background:var(--bg);box-shadow:0 0 40px rgba(0,0,0,.2);padding-top:14px;transform:translateX(100%);transition:transform .25s}
  .sidebar.show{visibility:visible;pointer-events:auto}
  .sidebar.show .inner{transform:none}
  .sidebar .closebar{display:flex;align-items:center;justify-content:space-between;padding:0 16px 10px 12px}
  .menubtn{display:inline-flex}
  :root{--top:108px}
  .topbar{flex-wrap:wrap;height:auto;padding:10px 12px;gap:8px}
  .search{order:10;flex:1 1 100%;max-width:none;width:100%;height:40px}
  .search input{font-size:16px}
  .brand .il{display:none}
  .search{max-width:none}
  .wrap{padding:0 16px}
  /* Mobile hero is a fixed compact band: title + a two-line description.
     Deliberately NOT scroll-driven - collapsing a sticky, in-flow header
     changes document height under the finger, and iOS momentum scrolling
     turns that into a visible jump. One static size has no such failure mode. */
  .hero{min-height:100px}
  .hero .wrap{padding-top:10px;padding-bottom:10px}
  .hero h1{font-size:26px}
  .hero .eyebrow{display:none}
  .hero p{font-size:12px;line-height:1.45;margin-top:4px;max-width:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* the stock scrim is sized for a 300px hero; a 100px band needs its own,
     stronger one or the text lands on bright parts of the photo */
  .hero .bg::after{background:
    linear-gradient(to left,rgba(20,18,18,.62) 0%,rgba(20,18,18,.44) 60%,rgba(20,18,18,.20) 100%),
    linear-gradient(to top,rgba(20,18,18,.80),rgba(20,18,18,.54) 100%)}
  .features{display:none}
  .traits{gap:12px;margin-top:12px}
  /* phones: three trait tiles per row instead of two. Grid rather than fixed
     widths so it still fits at 320px, and the tile keeps the 132x96 ratio. */
  @media (max-width:480px){
    .traits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;justify-items:stretch}
    .trait{width:auto}
    .trait img{width:100%;height:auto;aspect-ratio:132/96;margin-bottom:5px}
    .trait b{font-size:12px;line-height:1.25}
    .trait span{font-size:11px;line-height:1.3}
  }
  .models{--card:150px;--gap:10px;width:calc(4*var(--card) + 3*var(--gap))}
  @container (max-width:629px){.models{width:calc(3*var(--card) + 2*var(--gap))}}
  @container (max-width:469px){.models{width:calc(2*var(--card) + var(--gap))}}
  @container (max-width:309px){.models{width:var(--card)}}
  .card .body{padding:9px 10px 11px}
  .card .code{font-size:16px}
  .card .name{font-size:12.5px}
  .card .tag{font-size:11px}
  .fav{width:32px;height:32px;top:8px;left:8px}
  .product{grid-template-columns:1fr;gap:22px}
  .gallery{position:static}
  .gallery .main{aspect-ratio:1/1}
  .info .code{font-size:34px}
  .info h1{font-size:21px}
}
@media (min-width:901px){.sidebar .closebar{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.a11y-panel{max-height:calc(100vh - 100px - var(--cbar-h,0px));overflow-y:auto}
/* ---------- accessibility toolbar + cookie consent ---------- */
.a11y-btn{position:fixed;left:16px;bottom:calc(16px + var(--cbar-h,0px));z-index:48;transition:bottom .25s ease;width:48px;height:48px;border-radius:50%;background:#0B6CA8;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 14px rgba(0,0,0,.28)}
.a11y-btn:hover{background:#08557F}
.a11y-btn svg{width:26px;height:26px;fill:currentColor}
.a11y-btn:focus-visible{outline-color:#0B6CA8}
.a11y-panel{position:fixed;left:16px;bottom:calc(74px + var(--cbar-h,0px));z-index:49;transition:bottom .25s ease;width:min(300px,calc(100vw - 32px));background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:14px;display:none}
.a11y-panel.show{display:block}
.a11y-panel h2{margin:0 0 10px;font-size:15px;font-weight:900;display:flex;align-items:center}
.a11y-panel h2 .x{margin-inline-start:auto}
.a11y-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-grid button{border:1px solid var(--line);border-radius:8px;padding:10px 6px;font-size:12.5px;font-weight:500;line-height:1.3;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.a11y-grid button:hover{background:var(--panel)}
.a11y-grid button[aria-pressed="true"]{border-color:var(--red);color:var(--red-deep);background:var(--red-soft);font-weight:700}
.a11y-grid button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.a11y-panel .stmt{display:block;margin-top:10px;font-size:12.5px;text-decoration:underline;color:var(--red-deep)}
.a11y-panel .lvl{text-align:center;font-size:12px;color:var(--steel);margin:8px 0 0}

.cbar{position:fixed;inset-inline:0;bottom:0;z-index:47;background:rgba(31,29,30,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;padding:18px 22px;display:none;box-shadow:0 -4px 20px rgba(0,0,0,.22)}
@supports not (backdrop-filter:blur(1px)){.cbar{background:rgba(31,29,30,.93)}}
html.a11y-contrast .cbar,html.a11y-dark .cbar{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}
.cbar.show{display:block}
body.cbar-up main{padding-bottom:132px}
@media (max-width:600px){body.cbar-up main{padding-bottom:190px}}
.cbar .in{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap}
.cbar p{margin:0;flex:1 1 320px;font-size:15px;line-height:1.6}
.cbar a{text-decoration:underline}
.cbar .btns{display:flex;gap:8px;flex:none}
.cbar button{height:44px;padding:0 24px;border-radius:999px;font-weight:700;font-size:15px}
.cbar .ok{background:var(--red);color:#fff}
.cbar .ok:hover{background:var(--red-deep)}

/* statement page */
.stmtpage{max-width:760px;margin:0 auto;padding:28px 0 60px}
.stmtpage h1{font-size:28px;font-weight:900;margin:0 0 6px}
.stmtpage .upd{color:var(--steel-light);font-size:13px;margin:0 0 22px}
.stmtpage h2{font-size:18px;font-weight:700;margin:26px 0 8px}
.stmtpage p{margin:0 0 10px;font-size:15px;line-height:1.7}
.stmtpage ul{margin:0 0 10px;padding-inline-start:20px;font-size:15px;line-height:1.7}
.stmtpage li{margin-bottom:4px}
.stmtpage .box{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:var(--panel);margin-top:8px}
.stmtpage .box a{text-decoration:underline;color:var(--red-deep)}
.sidebar .foot a{text-decoration:underline}

/* toolbar effects */
html[class*="a11y-fs"] body > *:not(#lightbox):not(#a11yPanel):not(#a11yBtn){zoom:var(--a11y-zoom,1)}
html.a11y-fs2{--a11y-zoom:1.25}
html.a11y-fs3{--a11y-zoom:1.5}
html.a11y-fs4{--a11y-zoom:1.75}
html.a11y-fs5{--a11y-zoom:2}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:2px}
html.a11y-contrast{--ink:#000;--steel:#1B1B1B;--steel-light:#2B2B2B;--line:#000;--panel:#F2F2F2;--red:#A3000A;--red-deep:#730007}
html.a11y-contrast .hero .bg::after{background:rgba(0,0,0,.74)}
html.a11y-contrast .card,html.a11y-contrast .btn{border-width:1.5px}
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html.a11y-dark{--ink:#FFFFFF;--steel:#E8E8E8;--steel-light:#D0D0D0;--line:#565656;--panel:#1A1A1A;--bg:#0D0D0D;--red:#FF8A8F;--red-deep:#FFB3B6;--red-soft:#2E1416}
html.a11y-dark body{background:#0D0D0D}
html.a11y-dark .topbar,html.a11y-dark .sidebar .inner,html.a11y-dark .drawer .inner,html.a11y-dark .a11y-panel,html.a11y-dark .mbox,html.a11y-dark .fb,html.a11y-dark .card,html.a11y-dark .btn,html.a11y-dark .thumbs button,html.a11y-dark .fav{background:#141414}
html.a11y-dark .card .ph,html.a11y-dark .gallery .main{background:#1C1C1C}
html.a11y-dark .search,html.a11y-dark .field input,html.a11y-dark .field textarea,html.a11y-dark .fb textarea{background:#1E1E1E;color:#fff;-webkit-text-fill-color:#fff}
html.a11y-dark .drawer .quote{background:#111}
html.a11y-dark table.spec th{background:#3A3A3A;color:#FFFFFF}
html.a11y-dark table.spec th:first-child{background:#0D0D0D;color:var(--steel-light)}
html.a11y-dark table.spec tr:nth-child(even) td{background:#161616}
html.a11y-dark .a11y-grid button{background:#141414;color:#fff}
html.a11y-dark .hot,html.a11y-dark .iconbtn .badge,html.a11y-dark .btn.primary,html.a11y-dark .cbar .ok{color:#0D0D0D}
html.a11y-dark .btn.primary{background:var(--red);border-color:var(--red)}
html.a11y-dark .hero .bg::after{background:rgba(0,0,0,.8)}
html.a11y-dark .stmtpage .box{background:#141414}
html.a11y-dark .a11y-grid button[aria-pressed="true"]{background:#2E1416;color:#FFB3B6;border-color:#FF8A8F}

/* ---------- welcome (home) page ---------- */
body.home:not(.cbar-up) main{padding-bottom:0}
.homenav{display:none;flex:1;justify-content:center;gap:22px;font-size:14px;font-weight:500;white-space:nowrap}
.homenav a:hover{color:var(--red)}
@media (min-width:1101px){.homenav{display:flex}.topbar .spacer{display:none}}
.welcome{max-width:1180px;margin:0 auto;padding:0 28px}
.wh{position:relative;overflow:hidden;background:#6E6E6E;color:#fff;height:clamp(380px,38vw,520px)}
.wh>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.wh .scrim{position:absolute;inset:0;z-index:0;background:rgba(0,0,0,.45);opacity:1;pointer-events:none}
.wh .in{position:relative;z-index:1;height:100%;max-width:1180px;margin:0 auto;padding:28px 28px 22px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.wh .top{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px 110px;align-items:start}
.wh .eyebrow{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.06em;margin:0 0 10px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.wh .eyebrow::before{content:"";width:28px;height:3px;background:var(--red);display:block;flex:none}
.wh h1{font-size:clamp(26px,4vw,52px);font-weight:900;margin:0;line-height:1.08;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.wh h1 span{display:block;white-space:nowrap}
.wh .lead{padding-top:26px}
.wh .lead p{margin:0;font-size:17px;font-weight:500;opacity:.95;max-width:46ch;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.wh .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.wh .btn{height:46px;padding:0 22px}
.wh .btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.wh .btn.ghost:hover{background:rgba(255,255,255,.12)}
.wh .bullets{list-style:none;margin:0;padding:0;display:flex;gap:10px 28px;flex-wrap:wrap;font-size:17px;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.wh .bullets li{display:flex;align-items:center;gap:9px;white-space:nowrap}
.wh .bullets li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);display:block;flex:none}
.wsec{padding-top:64px;scroll-margin-top:calc(var(--top) + 12px)}
.wsec.first{padding-top:40px}
.wsec .section-head{margin:0 0 16px}
.wsec .section-head h2{font-size:22px}
.wsec .section-head .more{margin-inline-start:auto;font-size:14px;font-weight:700;color:var(--red)}
.wcats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.wcat{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.wcat:hover{border-color:#cfcfcf;box-shadow:0 6px 18px rgba(31,29,30,.08)}
.wcat .ph{position:relative;aspect-ratio:4/3;background:var(--panel);overflow:hidden}
.wcat .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wcat .body{padding:12px 14px 14px;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wcat .name{font-weight:700;font-size:15px}
.wcat .grp{font-size:12px;color:var(--steel-light);white-space:nowrap}
.tpanel{background:linear-gradient(180deg,#fafafa,#F0F0F0);border-radius:var(--radius);padding:36px 36px 32px;display:flex;flex-direction:column;gap:28px}
.thead{text-align:center;max-width:70ch;margin:0 auto}
.thead h2{font-size:clamp(28px,3.4vw,40px);font-weight:900;margin:0 0 8px;line-height:1.1}
.thead .sub{color:var(--steel);font-size:16px;margin:0}
.tcomp{display:grid;grid-template-columns:minmax(170px,230px) auto minmax(170px,230px);justify-content:center;gap:18px 32px;align-items:center}
.tcol{display:grid;gap:12px;align-content:center}
.ttile{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.ttile img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:4px;background:var(--panel)}
.ttile b{font-size:14px;display:block;line-height:1.3}
.ttile span{font-size:12.5px;color:var(--steel);line-height:1.35}
.ttool{display:flex;justify-content:center}
.ttool img{height:clamp(380px,42vw,620px);width:auto;filter:drop-shadow(0 18px 24px rgba(31,29,30,.18))}
.tbadges{display:flex;justify-content:center;gap:12px 40px;flex-wrap:wrap}
.tbadges>div{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.tbadges .bicon{grid-row:span 2;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center}
.tbadges .bicon svg{width:26px;height:26px}
.tbadges b{font-size:15px;line-height:1.2}
.tbadges span{font-size:12.5px;color:var(--steel)}
.tdata{display:grid;grid-template-columns:minmax(220px,1fr) 1.6fr;gap:22px;align-items:start}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tstats div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px;text-align:center}
.tstats b{display:block;font-size:26px;font-weight:900;color:var(--red);line-height:1}
.tstats span{display:block;font-size:12.5px;color:var(--steel);margin-top:6px}
.tspec{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:grid;grid-template-columns:1.4fr 1fr 1fr;font-size:13px}
.tspec>div{padding:8px 12px;border-top:1px solid var(--line)}
.tspec .h{border-top:0;padding:9px 12px}
.tspec .h.k{color:var(--steel-light);font-size:11px;letter-spacing:.1em;font-weight:400}
.tspec .h.m{background:var(--steel);color:#fff;font-weight:700;text-align:center}
.tspec .k{color:var(--steel);font-weight:500}
.tspec .v{text-align:center;font-variant-numeric:tabular-nums}
.tpanel .ctas{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
@media (max-width:1000px){
  .tcomp{grid-template-columns:1fr 1fr}
  .ttool{grid-column:span 2;order:-1}
  .tdata{grid-template-columns:1fr}
  .tstats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.wtech{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.wtech>div{border:1px solid var(--line);border-radius:var(--radius);padding:0 18px 20px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.wtech .ph{margin:0 -18px 10px;height:160px;flex:none;background:#fff;border-bottom:1px solid var(--line)}
.wtech .ph img{width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box}
.wtech .ph img[style*="cover"]{padding:0}
.wtech .tag{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--red);text-align:start}
.wtech b{font-size:16px;line-height:1.3}
.wtech p{margin:0;font-size:14px;color:var(--steel);line-height:1.5}
.wapps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.wapp{position:relative;color:#fff;border-radius:var(--radius);overflow:hidden;min-height:300px;background:var(--ink);color:#fff;display:flex;align-items:flex-end}
.wapp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,center)}
.wapp::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,18,18,.85),transparent 55%)}
.wapp .cap{position:relative;z-index:1;padding:22px}
.wapp:hover .cap b{text-decoration:underline}
.wapp b{font-size:20px;font-weight:900;display:block}
.wapp span{font-size:14px;opacity:.9}
.wbiz{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.wbiz>div{border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:240px}
.wbiz .dark{background:var(--ink);color:#fff}
.wbiz .light{background:var(--panel)}
.wbiz .kicker{font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:8px;opacity:.8}
.wbiz .light .kicker{color:var(--steel-light);opacity:1}
.wbiz h3{font-size:26px;font-weight:900;margin:0 0 10px;line-height:1.15}
.wbiz p{margin:0;font-size:15px;max-width:46ch}
.wbiz .dark p{opacity:.9}
.wbiz .light p{color:var(--steel)}
.wbiz .btn{align-self:flex-start}
.wbiz .dark .btn{background:#fff;border-color:#fff;color:var(--ink)}
.wbiz .dark .btn:hover{background:var(--panel);border-color:var(--panel)}
.wquote{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:36px;align-items:start}
.wquote h2{font-size:clamp(28px,3.4vw,40px);font-weight:900;margin:0 0 10px;line-height:1.1}
.wquote .sub{color:var(--steel);font-size:16px;margin:0 0 26px;max-width:46ch}
.wcontact{display:grid;gap:14px;font-size:15px}
.wcontact div{display:flex;flex-direction:column;gap:2px}
.wcontact small{font-size:12px;font-weight:700;color:var(--steel)}
.wcontact a{font-weight:700;text-align:right}
.wcontact .ways{display:flex;align-items:center;gap:10px}
.wcontact .ways>a[dir="ltr"]{margin-inline-end:2px}
.wcontact .ico{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none}
.wcontact .ico svg{width:17px;height:17px}
.wcontact .ico.tel{background:var(--ink)}
.wcontact .ico.tel:hover{background:#000;color:#fff}
.wcontact .ico.wa{background:#0F8038}
.wcontact .ico.wa:hover{background:#0B6B2E;color:#fff}
.wcontact .ico.wa svg{width:19px;height:19px}

.wform{background:#fafafa;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.wform .field{margin-bottom:0}
.wform .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wform .full{grid-column:span 2}
.wform .field input,.wform .field textarea{min-width:0;width:100%}
.wform .sendrow{margin-top:14px}
.wfoot{border-top:1px solid var(--line);margin-top:64px}
.wfoot .in{max-width:1180px;margin:0 auto;padding:26px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--steel-light)}
.wfoot .logo{height:17px;width:auto;color:var(--brand);display:block}
.wfoot nav{display:flex;gap:18px;flex-wrap:wrap}
.wfoot nav a:hover{color:var(--red)}
html.a11y-dark .tpanel{background:linear-gradient(180deg,#1a1a1a,#141414)}
html.a11y-dark .tstats div,html.a11y-dark .tspec,html.a11y-dark .wform,html.a11y-dark .wcat,html.a11y-dark .wbiz .light{background:#1a1a1a}
@media (max-width:600px){
  .welcome{padding:0 16px}
  .wh{height:clamp(400px,86vw,520px)}
  .wh .scrim{background:rgba(0,0,0,.45)}
  .wh .in{padding:18px 16px 16px;gap:14px}
  .wh .eyebrow{font-size:13px;letter-spacing:.04em}
  .wh .bullets{font-size:13px;gap:6px 16px}
  .wcats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wcat .body{flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px 12px}
  .wcat .name{font-size:14px}
  .wh .top{gap:14px}
  .wh .lead{padding-top:0}
  .wh .lead p{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .wh .ctas{margin-top:16px}
  .wh .btn{height:42px;padding:0 18px;font-size:14px}
  .wsec{padding-top:44px}
  .tpanel{padding:20px 16px;gap:22px}
  .tcomp{grid-template-columns:1fr 1fr}
  .ttool{grid-column:span 2;order:-1}
  .ttool img{height:340px}
  .ttile b{font-size:13px}
  .tstats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .tstats b{font-size:20px}
  .wform{padding:18px}
  .wform .grid{grid-template-columns:1fr}
  .wform .full{grid-column:auto}
  .wbiz>div{padding:24px}
  .wfoot{margin-top:44px}
}

/* ---------- tool advisor ---------- */
.adv-btn{position:fixed;right:16px;bottom:calc(16px + var(--cbar-h,0px));z-index:48;transition:bottom .25s ease,background .15s,width .3s ease,padding .3s ease;
  height:48px;padding:0 18px 0 16px;border-radius:999px;background:var(--red);color:#fff;display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15px;box-shadow:0 3px 14px rgba(0,0,0,.28);overflow:hidden;white-space:nowrap}
.adv-btn:hover{background:var(--red-deep)}
.adv-btn svg{width:22px;height:22px;fill:currentColor;stroke:none;flex:none}
.adv-btn .adv-prompt,.adv-teaser{display:none}
.adv-panel{position:fixed;right:16px;bottom:calc(74px + var(--cbar-h,0px));z-index:49;transition:bottom .25s ease;
  width:min(390px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 130px));background:var(--bg);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 14px 44px rgba(0,0,0,.24);display:none;flex-direction:column;overflow:hidden}
.adv-panel.show{display:flex}
.adv-btn[hidden],.adv-panel[hidden]{display:none!important}
.adv-head{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.adv-head b{font-size:14.5px}
.adv-head .adv-dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.adv-head .adv-x{margin-inline-start:auto}
.adv-log{padding:14px;display:flex;flex-direction:column;gap:12px;overflow-y:auto;flex:1;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#D2D0D0 transparent}
.adv-log::-webkit-scrollbar{width:6px}
.adv-log::-webkit-scrollbar-track{background:transparent}
.adv-log::-webkit-scrollbar-thumb{background:#D2D0D0;border:0;border-radius:3px}
.adv-log::-webkit-scrollbar-thumb:hover{background:#B9B6B6}
.adv-typing{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:4px 12px 12px 12px;
  padding:13px 15px;display:flex;gap:4px;align-items:center}
.adv-typing i{width:6px;height:6px;border-radius:50%;background:var(--steel-light);animation:advdot 1.15s infinite ease-in-out}
.adv-typing i:nth-child(2){animation-delay:.16s}
.adv-typing i:nth-child(3){animation-delay:.32s}
@keyframes advdot{0%,62%,100%{opacity:.26;transform:translateY(0)}31%{opacity:.85;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.adv-typing i{animation:none;opacity:.5}}
.adv-msg{max-width:88%;font-size:14.5px;line-height:1.55}
.adv-msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:4px 12px 12px 12px;padding:10px 13px}
.adv-msg.me{align-self:flex-end;background:var(--ink);color:var(--bg);border-radius:12px 4px 12px 12px;padding:8px 13px;font-weight:500}
.adv-msg.note{align-self:flex-start;background:var(--red-soft);border:1px solid var(--red);border-radius:4px;padding:9px 12px;font-size:13.5px;max-width:92%}
.adv-msg .left{display:block;margin-top:5px;font-size:12px;color:var(--steel-light);font-variant-numeric:tabular-nums}
.adv-chips{display:flex;flex-wrap:wrap;gap:7px;align-self:flex-start;max-width:100%}
.adv-chip{font:inherit;font-size:13.5px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;cursor:pointer;text-align:start;transition:border-color .12s,color .12s}
.adv-chip:hover{border-color:var(--red);color:var(--red)}
.adv-cards{display:grid;gap:7px;align-self:flex-start;width:100%}
/* flex:none matters - overflow-x:auto zeroes this item's automatic minimum
   size, so without it the flex column crushes the table to a few pixels */
.adv-cmp{align-self:stretch;width:100%;flex:none;border:1px solid var(--line);border-radius:6px;overflow-x:auto;background:var(--bg)}
.adv-cmp table{width:100%;border-collapse:collapse;font-size:12.5px}
.adv-cmp th,.adv-cmp td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
.adv-cmp thead th{background:var(--panel);color:var(--red);font-weight:700;font-size:13px;text-align:center;direction:ltr}
.adv-cmp thead th:first-child{color:var(--steel-light);font-weight:500;direction:rtl;text-align:start;width:38%}
.adv-cmp tbody th{font-weight:500;color:var(--steel);text-align:start;line-height:1.35}
.adv-cmp td{text-align:center;direction:ltr;font-variant-numeric:tabular-nums;color:var(--ink)}
.adv-cmp td.top{font-weight:700}
.adv-cmp tr:last-child th,.adv-cmp tr:last-child td{border-bottom:0}
.adv-card{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--bg);overflow:hidden;width:100%;transition:border-color .12s,box-shadow .12s}
.adv-card:hover{border-color:#cfcfcf;box-shadow:0 4px 14px rgba(31,29,30,.08)}
.adv-card-main{display:grid;grid-template-columns:68px minmax(0,1fr);gap:10px;padding:10px 12px;padding-inline-end:46px;background:transparent;border:0;
  text-align:start;font:inherit;cursor:pointer;width:100%;color:inherit}
.adv-card-main:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.adv-card-fav{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--steel);background:rgba(255,255,255,.94);box-shadow:0 1px 4px rgba(0,0,0,.16);z-index:1}
.adv-card-fav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.adv-card-fav.on{color:var(--red)}
.adv-card-fav.on svg{fill:var(--red)}
.ac-fav-status{display:none;align-items:center;gap:6px;padding:7px 12px;border-top:1px solid #f3c9ce;background:var(--red-soft);color:var(--red-deep);font-size:12.5px;font-weight:700}
.adv-card-fav.on~.ac-fav-status{display:flex}
.ac-fav-status svg{width:15px;height:15px;fill:var(--red);stroke:var(--red);stroke-width:2;flex:none}
.adv-card .ac-photo{width:68px;height:68px;border-radius:5px;background:var(--panel);display:flex;align-items:center;justify-content:center;overflow:hidden}
.adv-card .ac-photo img{width:100%;height:100%;object-fit:contain}
.adv-card .ac-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.adv-card .ac-head{display:flex;gap:8px;align-items:baseline}
.adv-card .ac-code{font-weight:700;font-size:13.5px;color:var(--red);direction:ltr;flex:none}
.adv-card .ac-name{font-size:14px;font-weight:700;line-height:1.3}
.adv-card .ac-why{font-size:13px;color:var(--steel);line-height:1.45}
.adv-card .ac-spec{font-size:12px;color:var(--steel-light);direction:ltr;text-align:start;font-variant-numeric:tabular-nums}
.adv-card .ac-weight{display:inline-flex;direction:rtl;gap:.25em;align-items:baseline}
.adv-cta{display:flex;gap:7px;flex-wrap:wrap;align-self:flex-start}
.adv-cta .btn{height:38px;font-size:13.5px;padding:0 15px}
.adv-ask{display:flex;gap:7px;padding:11px 12px;border-top:1px solid var(--line);background:var(--panel);flex:none}
.adv-ask input{flex:1;min-width:0;font:inherit;font-size:15px;padding:9px 13px;border:1px solid var(--line);border-radius:999px;
  background:var(--bg);color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--red);color-scheme:light}
.adv-ask input:focus{outline:none;border-color:var(--red)}
.adv-ask .btn{flex:none;height:40px;padding:0 16px;font-size:14px}
html.a11y-dark .adv-ask input{background:#1e1e1e;color:#fff;-webkit-text-fill-color:#fff;color-scheme:dark}
html.a11y-dark .adv-panel,html.a11y-dark .adv-card,html.a11y-dark .adv-chip{background:#141414}
html.a11y-dark .adv-card-fav{background:#242424}
html.a11y-dark .adv-log{scrollbar-color:#4A4747 transparent}
html.a11y-dark .adv-log::-webkit-scrollbar-thumb{background:#4A4747}
@media (max-width:600px){
  .adv-btn{padding:0;width:52px;height:52px;justify-content:center}
  .adv-btn span{display:none}
  .adv-btn svg{width:24px;height:24px}
  .adv-btn.adv-peek{width:226px;padding:0 16px}
  .adv-btn.adv-peek .adv-prompt{display:inline}
  .adv-teaser{position:fixed;right:20px;bottom:calc(78px + var(--cbar-h,0px));z-index:48;pointer-events:none;box-shadow:0 3px 14px rgba(0,0,0,.18)}
  .adv-teaser[hidden]{display:none!important}
  .adv-teaser:not([hidden]){display:flex}
  .adv-teaser::after{content:"";position:absolute;right:15px;bottom:-5px;width:9px;height:9px;background:var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
  .adv-panel{right:8px;left:8px;width:auto;bottom:calc(70px + var(--cbar-h,0px));max-height:min(80vh,calc(100vh - 120px));max-height:min(80dvh,calc(100dvh - 120px))}
  .adv-ask input{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.adv-btn{transition:bottom .25s ease,background .15s}}