/* =========================================================================
ONE stylesheet owns this page. No override stack, no !important wars.
Dark by design: the product is light on a dark surface — that is the pitch.
========================================================================= */
:root{
--bg:#0A0C0F; --sf:#12161C; --sf2:#181E26; --sf3:#1E252F;
--line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.17);
--ink:#F4F7FA; --ink2:#A9B4C0; --ink3:#717E8C;
--acc:#FF7A33; --acc2:#FFA96B; --good:#48D597;
--r:16px; --r2:12px;
--mx:1240px;
--fs:16px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{max-width:100%;overflow-x:hidden}
.deck>*{min-width:0}
.split>*,.split--m>*,.split--e>*{min-width:0}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
margin:0; background:var(--bg); color:var(--ink);
font:400 var(--fs)/1.62 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,video{max-width:100%;display:block}
a{color:var(--acc2);text-decoration:none}
a:hover{text-decoration:underline}
/* Display face used with restraint: headlines only. Archivo set slightly wide —
the brand is about light spreading across a surface, and the headline does that too. */
h1,h2{margin:0;line-height:1.11;letter-spacing:-.025em;font-weight:800;
font-family:Archivo,Manrope,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
font-variation-settings:"wdth" 112;text-wrap:balance}
h3,h4{margin:0;line-height:1.18;letter-spacing:-.02em;font-weight:800}
/* digits that line up in columns line up properly */
.tbl,.spec,.sum,.reach__n,.wz__n,.buy__p,.cfgband__p,.bnd__p,.scorecard{font-variant-numeric:tabular-nums}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
/* ---------- review harness (not part of the design) ---------- */
.hz{background:linear-gradient(180deg,#141A22,#0F141A);border-bottom:1px solid var(--line2);padding:22px 0 0}
.hz__in{max-width:var(--mx);margin:0 auto;padding:0 24px}
.hz__t{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:700;margin:0 0 8px}
.hz h1{font-size:clamp(22px,3.2vw,32px);margin:0 0 6px}
.hz p{color:var(--ink2);max-width:74ch;font-size:15px}
.sw{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 0;padding:0;list-style:none}
.sw button{
appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:14px;
background:var(--sf2);color:var(--ink2);border:1px solid var(--line2);
border-bottom:none;border-radius:12px 12px 0 0;padding:13px 20px;line-height:1.2;
display:flex;flex-direction:column;gap:2px;text-align:left;transition:.16s;
}
.sw button small{font-weight:500;font-size:11.5px;color:var(--ink3);letter-spacing:.02em}
.sw button:hover{color:var(--ink);background:var(--sf3)}
.sw button[aria-selected=true]{background:var(--bg);color:var(--ink);border-color:var(--line2);box-shadow:inset 0 3px 0 var(--acc)}
.sw button[aria-selected=true] small{color:var(--acc2)}
/* ---------- page frame ---------- */
.pg{display:none}
.pg.on{display:block}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 24px}
/* ---------- sticky order bar (repeating CTA) ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgba(10,12,15,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar__in{max-width:var(--mx);margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:18px;min-width:0}
.bar__n{font-weight:800;font-size:14.5px;white-space:nowrap;letter-spacing:-.01em;
flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar__l{display:flex;gap:20px;margin-left:6px;overflow-x:auto;scrollbar-width:none}
.bar__l::-webkit-scrollbar{display:none}
.bar__l a{color:var(--ink2);font-size:13.5px;font-weight:600;white-space:nowrap}
.bar__l a:hover{color:var(--ink);text-decoration:none}
.bar__r{margin-left:auto;display:flex;align-items:center;gap:14px;flex:0 0 auto;min-width:0}
.bar__p{font-weight:800;font-size:15px;white-space:nowrap}
.bar__p span{color:var(--ink3);font-weight:600;font-size:12px}
@media(max-width:880px){.bar__l{display:none}}
@media(max-width:700px){
.sw{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sw::-webkit-scrollbar{display:none}
.sw button{flex:0 0 auto;padding:10px 14px;font-size:13px}
.hz__in{padding:0 16px}
}
@media(max-width:560px){
.bar__in{padding:9px 16px;gap:10px}
.bar__p{font-size:13.5px}
.bar__p span{display:none}
.bar__r{gap:8px}
.wrap{padding:0 16px}
.card,.cfgband{padding:20px 16px}
.close{padding:24px 16px}
}
/* ---------- buttons ---------- */
.btn{
max-width:100%;appearance:none;cursor:pointer;font:inherit;font-weight:800;font-size:15px;
background:var(--acc);color:#160A02;border:1px solid var(--acc);
border-radius:11px;padding:13px 22px;line-height:1.2;white-space:nowrap;
transition:.16s;box-shadow:0 6px 20px -8px rgba(255,122,51,.75);
}
.btn:hover{background:var(--acc2);border-color:var(--acc2);transform:translateY(-1px)}
.btn--g{background:transparent;color:var(--ink);border-color:var(--line2);box-shadow:none}
.btn--g:hover{background:var(--sf3);border-color:var(--ink3);color:var(--ink)}
.btn--sm{padding:10px 16px;font-size:13.5px}
.btn--w{width:100%;justify-content:center;text-align:center;display:block;padding:15px 22px;font-size:16px}
/* ---------- stars (REAL: 7 published reviews) ---------- */
.st{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink2);font-weight:600}
.st b{color:var(--acc);letter-spacing:1px;font-size:14px}
.st a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
/* ---------- hero ---------- */
.hero{padding:34px 0 6px}
.hero__g{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(340px,.68fr);gap:34px;align-items:start}
.hero__eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 13px}
.pill{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(255,122,51,.15);color:var(--acc2);border:1px solid rgba(255,122,51,.32)}
.pill--n{background:var(--sf2);color:var(--ink2);border-color:var(--line2)}
.hero h1{font-size:clamp(28px,4vw,42px);margin:0 0 12px;max-width:19ch}
.hero__sub{color:var(--ink2);font-size:17px;max-width:52ch;margin:0 0 18px}
.hero__sub b{color:var(--ink);font-weight:700}
@media(max-width:960px){.hero__g{grid-template-columns:1fr;gap:26px}}
/* ---------- media stage: ONE consistent scale everywhere ---------- */
.stage{position:relative;border-radius:var(--r);overflow:hidden;background:#05070A;border:1px solid var(--line);aspect-ratio:16/10}
.stage video,.stage img{width:100%;height:100%;object-fit:cover}
.stage>video,.stage>img{position:absolute;inset:0}
.stage>[data-off]{opacity:0;visibility:hidden;pointer-events:none}
.stage--sq{aspect-ratio:1/1}
.stage--wide{aspect-ratio:16/9}
.stage--tall43{aspect-ratio:4/3}
.stage--tall{aspect-ratio:4/5}
.stage__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;font-size:12.5px;color:#DCE3EA;font-weight:600;background:linear-gradient(180deg,transparent,rgba(4,6,9,.9))}
.reel button[aria-pressed=true]
/* ---------- buy box ---------- */
.buy{background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--line2);border-radius:var(--r);padding:20px}
.buy__p{display:flex;align-items:baseline;gap:9px;margin:0 0 3px}
.buy__p b{font-size:34px;font-weight:800;letter-spacing:-.03em}
.buy__p i{font-style:normal;font-size:12.5px;color:var(--ink3);font-weight:600}
.buy__note{font-size:12.5px;color:var(--ink3);margin:0 0 16px}
.fld{margin:0 0 14px}
.fld__l{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin:0 0 7px}
.fld__l em{font-style:normal;color:var(--acc2);letter-spacing:0;text-transform:none;font-size:12px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{
appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:13.5px;
background:var(--sf3);color:var(--ink2);border:1px solid var(--line2);
border-radius:9px;padding:8px 12px;line-height:1.15;transition:.14s;text-align:center
}
.chips button small{display:block;font-size:9.5px;font-weight:600;color:var(--ink3);letter-spacing:.03em;margin-top:1px}
.chips button:hover{color:var(--ink);border-color:var(--ink3)}
.chips button[aria-pressed=true]{background:rgba(255,122,51,.15);border-color:var(--acc);color:var(--ink)}
.chips button[aria-pressed=true] small{color:var(--acc2)}
.buy__inc{border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:grid;gap:7px}
.inc{display:flex;gap:9px;font-size:13.5px;color:var(--ink2);align-items:flex-start;line-height:1.45}
.inc svg{flex:0 0 15px;margin-top:3px;color:var(--good)}
.inc b{color:var(--ink);font-weight:700}
.buy__cta{margin-top:16px;display:grid;gap:8px}
.buy__t{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:13px;font-size:11.5px;color:var(--ink3);font-weight:600}
/* ---------- answer block card (DIRECTION B) ---------- */
.deck{display:grid;gap:20px;padding:40px 0}
/* A floor as well as a ceiling: the template keeps tallest:shortest under 2x
on every product that inherits it, not just this one. */
@media(min-width:900px){.deck>/* 440px floor meant R1's "tallest under 2x the shortest" rule capped the deck at
880px - tighter than the 900px cap it is written against, and every product
landed at ratio 1.99. A 470px floor lifts that ceiling above 900 so the cap is
the only binding rule, and evens out the short cards while it is there. */
.card{min-height:470px;display:flex;flex-direction:column;justify-content:center}}
.card{background:var(--sf);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;position:relative;scroll-margin-top:76px}
.card--acc{background:linear-gradient(180deg,#151B23,#111720);border-color:var(--line2)}
.card__q{display:flex;align-items:baseline;gap:11px;margin:0 0 10px}
.card__q h2{font-size:clamp(20px,2.4vw,25px)}
.card__k{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc2);margin:0 0 9px}
.ans{font-size:17.5px;line-height:1.52;color:var(--ink);font-weight:600;margin:0 0 15px;max-width:64ch;letter-spacing:-.006em}
.ans b{color:var(--acc2);font-weight:800}
.copy{color:var(--ink2);font-size:15.2px;max-width:70ch}
.copy b,.copy strong{color:var(--ink);font-weight:700}
.copy ul{margin:0 0 1em;padding-left:19px}
.copy li{margin:0 0 .42em}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:26px;align-items:start}
.split--m{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
.split--e{grid-template-columns:1fr 1fr}
@media(max-width:860px){.split,.split--m,.split--e{grid-template-columns:1fr;gap:20px}}
.figcap{font-size:12.5px;color:var(--ink3);margin-top:8px;line-height:1.45}
/* ---------- disclosure: how tall cards get cut down ---------- */
.more{margin-top:15px;border-top:1px solid var(--line);padding-top:13px}
.more>summary{
cursor:pointer;list-style:none;font-weight:700;font-size:13.5px;color:var(--acc2);
display:flex;align-items:center;gap:7px;user-select:none;min-width:0;flex-wrap:wrap
}
.more>summary::after{flex:0 0 auto}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.2s}
.more[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.more__b{padding-top:14px}
/* ---------- lens picker (Ike-approved technique) ---------- */
.lens__chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.lens__chips button{appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:13.5px;
background:var(--sf3);color:var(--ink2);border:1px solid var(--line2);border-radius:9px;
padding:8px 13px;line-height:1.15;transition:.14s;text-align:center}
.lens__chips button small{display:block;font-size:9.5px;font-weight:600;color:var(--ink3);letter-spacing:.03em;margin-top:1px}
.lens__chips button:hover{color:var(--ink);border-color:var(--ink3)}
.lens__chips button[aria-pressed=true]{background:rgba(255,122,51,.15);border-color:var(--acc);color:var(--ink)}
.lens__chips button[aria-pressed=true] small{color:var(--acc2)}
/* diagrams are diagrams: never crop them */
.stage--dia{background:#0E141C}
.stage--dia img{object-fit:contain;padding:2px}
.lens__panel{display:none}
.lens__panel.on{display:block}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:800;padding:0 12px 9px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);color:var(--ink2)}
.tbl td:last-child{color:var(--ink);font-weight:700}
.tbl tr:last-child td{border-bottom:none}
.tbl small{color:var(--ink3);font-weight:600}
.best{margin-top:12px;font-size:13.5px;color:var(--ink2);background:var(--sf3);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.best b{color:var(--acc2)}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* Without max-width the box grows to its content and the PAGE scrolls sideways
instead of the table. It only showed up once a product with seven lenses
went live and the chart got wider than 375px (M1, Ike 2026-09-01). */
.scrollx>table{min-width:max-content}
/* ---------- wattage helper ---------- */
.wz{background:var(--sf3);border:1px solid var(--line2);border-radius:var(--r2);padding:18px}
.wz__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wz__row .chips{flex-wrap:nowrap}
.wz__row .chips button{flex:1;padding:8px 6px}
@media(max-width:760px){.wz__row{grid-template-columns:1fr}}
.wz__out{margin-top:16px;border-top:1px solid var(--line2);padding-top:15px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.wz__n{font-size:31px;font-weight:800;color:var(--acc);letter-spacing:-.03em;line-height:1}
.wz__n small{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-bottom:3px}
.wz__w{font-size:13.5px;color:var(--ink2);flex:1;min-width:190px;line-height:1.5}
.wz__w b{color:var(--ink)}
/* ---------- proof / reviews ---------- */
.rv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:900px){.rv{grid-template-columns:1fr}}
.rv__c{background:var(--sf2);border:1px solid var(--line);border-radius:var(--r2);padding:16px 17px;display:flex;flex-direction:column;gap:9px}
.rv__s{color:var(--acc);font-size:13px;letter-spacing:1.5px}
.rv__t{font-size:14.5px;color:var(--ink);line-height:1.55;flex:1}
.rv__m{font-size:12px;color:var(--ink3);font-weight:700;display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:9px}
.rv__v{color:var(--good)}
.scorecard{display:flex;align-items:center;gap:20px;flex-wrap:wrap;background:var(--sf3);border:1px solid var(--line2);border-radius:var(--r2);padding:15px 18px;margin:0 0 18px}
.scorecard b{font-size:33px;font-weight:800;letter-spacing:-.03em;line-height:1}
.scorecard .st b{font-size:15px}
/* ---------- use-case grid ---------- */
.uses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1000px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
.use{position:relative;border-radius:var(--r2);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#05070A;display:block}
.use img{width:100%;height:100%;object-fit:cover;object-position:center 62%;transition:.4s}
.use:hover img{transform:scale(1.05)}
.use__t{position:absolute;inset:auto 0 0 0;padding:30px 13px 11px;background:linear-gradient(180deg,transparent,rgba(4,6,9,.92))}
.use__t b{display:block;font-size:14px;font-weight:800;color:#fff;letter-spacing:-.01em}
.use__t span{display:block;font-size:11.5px;color:#B9C4D0;margin-top:1px}
/* ---------- range comparison ---------- */
.rng{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:860px){.rng{grid-template-columns:1fr}}
.rng__c{background:var(--sf2);border:1px solid var(--line);border-radius:var(--r2);padding:16px}
.rng__c--on{border-color:var(--acc);background:linear-gradient(180deg,rgba(255,122,51,.11),var(--sf2))}
.rng__h{font-size:15.5px;font-weight:800;margin:0 0 3px}
.rng__d{font-size:12px;color:var(--acc2);font-weight:700;margin:0 0 9px;letter-spacing:.02em}
.rng__b{font-size:13.5px;color:var(--ink2);line-height:1.5}
/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:900px){.faq{grid-template-columns:1fr}}
.qa{border-bottom:1px solid var(--line)}
.qa>summary{
cursor:pointer;list-style:none;padding:13px 26px 13px 0;font-weight:700;font-size:14.5px;
color:var(--ink);position:relative;user-select:none;line-height:1.42
}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary::after{content:"";position:absolute;right:4px;top:20px;width:7px;height:7px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);transform:rotate(45deg);transition:.2s}
.qa[open]>summary::after{transform:rotate(-135deg);border-color:var(--acc)}
.qa>div{padding:0 20px 15px 0;color:var(--ink2);font-size:14.2px;line-height:1.6}
.faqgrp{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc2);margin:18px 0 4px;padding-top:10px}
.faqgrp:first-child{margin-top:0;padding-top:0}
/* ---------- specs ---------- */
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
@media(max-width:860px){.spec{grid-template-columns:1fr}}
.spec__r{display:grid;grid-template-columns:minmax(120px,.62fr) minmax(0,1fr);gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.2px;align-items:baseline}
.spec__r dt{color:var(--ink3);font-weight:700;font-size:12.5px;letter-spacing:.02em;margin:0}
.spec__r dd{margin:0;color:var(--ink);font-weight:600}
/* ---------- closing CTA ---------- */
.close{background:linear-gradient(135deg,#1A2029,#101620);border:1px solid var(--line2);border-radius:var(--r);padding:32px;text-align:center}
.close h2{font-size:clamp(21px,2.6vw,27px);margin:0 0 9px}
.close p{color:var(--ink2);max-width:56ch;margin:0 auto 20px;font-size:15.5px}
.close__b{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.close__b .btn{max-width:100%;white-space:normal}
.close__l{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:9px 22px;justify-content:center;flex-wrap:wrap;font-size:13.5px}
/* ---------- inline CTA strip (repeat the ask, not the imagery) ---------- */
.ask{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(90deg,rgba(255,122,51,.13),rgba(255,122,51,.03));border:1px solid rgba(255,122,51,.28);border-radius:var(--r2);padding:15px 18px}
.ask p{margin:0;font-size:14.8px;font-weight:700;flex:1;min-width:230px;letter-spacing:-.01em}
.ask span{color:var(--ink2);font-weight:500;display:block;font-size:13.2px;margin-top:2px}
/* ---------- job router (variation C) ---------- */
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media(max-width:560px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.jobs button{
appearance:none;cursor:pointer;font:inherit;text-align:left;background:var(--sf3);
color:var(--ink2);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;transition:.15s
}
.jobs button b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.jobs button small{display:block;font-size:11px;color:var(--ink3);margin-top:1px;line-height:1.35}
.jobs button:hover{border-color:var(--ink3)}
.jobs button[aria-pressed=true]{background:rgba(255,122,51,.14);border-color:var(--acc)}
.jobs button[aria-pressed=true] small{color:var(--acc2)}
/* ---------- measurement readout ---------- */
/* ---------- configurator (reproduced from live, not redesigned) ---------- */
.cfg__step{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.cfg__step:first-of-type{border-top:none;margin-top:4px;padding-top:0}
.cfg__h{font-size:16px;font-weight:800;letter-spacing:-.01em;margin:0 0 12px;color:var(--ink)}
.cfg__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
@media(max-width:760px){.cfg__opts{grid-template-columns:1fr}}
.cfg__opt{display:flex;flex-direction:column;gap:4px;background:var(--sf3);border:1px solid var(--line2);border-radius:10px;padding:9px 12px;cursor:pointer}
.cfg__opt span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.cfg__opt b{font-size:13.5px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:8px}
.cfg__opt i{font-style:normal;color:var(--ink3)}
.reach{background:linear-gradient(180deg,rgba(255,122,51,.10),rgba(255,122,51,.03));border:1px solid rgba(255,122,51,.30);border-radius:var(--r2);padding:15px 17px}
.reach__top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.reach__lbl{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.reach__lbl b{color:var(--acc2)}
.reach__n{font-size:31px;font-weight:800;letter-spacing:-.03em;margin:0 0 3px;line-height:1.05}
.reach__n b{color:var(--acc)}
.reach__s{font-size:13.5px;color:var(--ink2);margin:0}
.reach__s b{color:var(--acc2);font-weight:800}
.tiers{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.tier{font-size:12.5px;background:var(--sf3);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;color:var(--acc2);font-weight:700}
.tier b{color:var(--ink);margin-right:6px;font-weight:800}
.cfg__b3{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.cfg__ct{font-size:12.5px;color:var(--ink3);font-weight:700;margin-left:auto}
.cfg__ct b{color:var(--ink)}
.addons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(max-width:760px){.addons{grid-template-columns:1fr}}
.addon{background:var(--sf2);border:1px solid var(--line2);border-radius:var(--r2);padding:15px;position:relative}
.addon__tag{position:absolute;top:13px;right:14px;font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--acc2);background:rgba(255,122,51,.14);border:1px solid rgba(255,122,51,.3);border-radius:6px;padding:3px 7px}
.addon__t{font-size:15px;font-weight:800;margin:0 0 2px}
.addon__p{font-size:14px;font-weight:800;color:var(--acc);margin:0 0 7px}
.addon__d{font-size:13px;color:var(--ink2);margin:0 0 12px;line-height:1.5}
.sum{border-top:1px solid var(--line2);margin-top:20px;padding-top:18px}
.sum__r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 90px;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink2)}
.sum__r b{text-align:right;color:var(--ink);font-weight:700}
.sum__t{border-bottom:none;font-size:16px;color:var(--ink);font-weight:800;padding-top:12px}
.sum__t b{color:var(--acc);font-size:19px}
/* ---------- the upsell PROPOSAL (clearly marked, not the live build) ---------- */
.prop{border:2px dashed rgba(255,122,51,.5);background:linear-gradient(180deg,rgba(255,122,51,.07),transparent)}
.prop__tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0F0A05;background:var(--acc);border-radius:6px;padding:4px 9px;margin-bottom:11px}
.bundle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:900px){.bundle{grid-template-columns:1fr}}
.bnd{background:var(--sf2);border:1px solid var(--line2);border-radius:var(--r2);padding:16px;display:flex;flex-direction:column;gap:8px}
.bnd--best{border-color:var(--acc);background:linear-gradient(180deg,rgba(255,122,51,.12),var(--sf2))}
.bnd__t{font-size:15.5px;font-weight:800;margin:0}
.bnd__w{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc2);margin:0}
.bnd__l{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px;flex:1}
.bnd__l li{font-size:13px;color:var(--ink2);display:flex;gap:8px;line-height:1.45}
.bnd__l li b{color:var(--ink)}
.bnd__p{border-top:1px solid var(--line);padding-top:10px;margin:6px 0 0;display:flex;align-items:baseline;gap:8px}
.bnd__p b{font-size:21px;font-weight:800}
.bnd__p s{color:var(--ink3);font-size:13px}
.bnd__p em{font-style:normal;color:var(--good);font-size:12px;font-weight:800}
/* ---------- the buy flow is its own band, not a content card ---------- */
.cfgband{background:linear-gradient(180deg,#0D1218,#0A0E13);border:1px solid var(--line2);
border-radius:var(--r);padding:26px 28px;scroll-margin-top:76px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cfgband__hd{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
border-bottom:1px solid var(--line2);padding-bottom:16px;margin-bottom:4px}
.cfgband__hd h2{font-size:clamp(20px,2.4vw,25px)}
.cfgband__p{text-align:right}
.cfgband__p b{display:block;font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1}
.cfgband__p span{font-size:12px;color:var(--ink3);font-weight:600}
.cfgband .cfg__step{border-top:1px solid var(--line);margin-top:20px;padding-top:18px}
.cfgband .cfg__step:first-of-type{border-top:none;margin-top:16px;padding-top:0}
/* ---------- product graphics: light-ground assets on a dark page ----------
These carousel graphics are drawn on white. Rather than fight that, the
product section becomes a deliberate light "spec sheet" break in the page. */
.ps{align-self:start;margin:0;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:var(--r2);overflow:hidden;
display:flex;flex-direction:column}
.ps img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.ps figcaption{font-size:12px;line-height:1.45;color:var(--ink3);padding:9px 11px;border-top:1px solid var(--line);background:var(--sf2)}
.ps--lead img{aspect-ratio:auto}
.ps--dark{background:var(--sf2);border-color:var(--line)}
.ps--dark figcaption{color:var(--ink3);border-top-color:var(--line)}
@media(max-width:900px){.hardfacts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.hardfacts{grid-template-columns:1fr}}
.hf{background:var(--sf3);border:1px solid var(--line2);border-radius:10px;padding:11px 13px}
.hf b{display:block;font-size:13.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.hf span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.45;margin-top:2px}
.stage--fill img{object-fit:contain;width:100%;height:100%;padding:0}
.hardfacts--dark .hf{background:var(--sf3);border-color:var(--line2)}
.hardfacts--dark .hf b{color:var(--ink)}
.hardfacts--dark .hf span{color:var(--ink2)}
.uses{grid-template-columns:repeat(3,minmax(0,1fr))}
.uses{gap:12px}
@media(max-width:1000px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faqgrp{margin-top:30px}
/* ---------- the simple price control at the top ---------- */
.pricetop .pt__q{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 15px;letter-spacing:-.01em}
.chips--even{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.chips--even[data-f="amb"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.chips--even button{padding:9px 4px}
.pt__out{background:linear-gradient(180deg,rgba(255,122,51,.16),rgba(255,122,51,.05));
border:1px solid rgba(255,122,51,.36);border-radius:var(--r2);padding:14px 16px;margin:4px 0 12px}
.pt__lbl{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:0 0 5px}
.pt__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pt__w{font-size:33px;font-weight:800;letter-spacing:-.03em;color:var(--acc);line-height:1}
.pt__p{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1}
.pt__why{font-size:13px;color:var(--ink2);margin:9px 0 0;line-height:1.5}
.pt__why b{color:var(--ink)}
.pt__why em{font-style:normal;color:var(--acc2);font-weight:700}
.more--tight{margin-top:0;border-top:none;padding-top:0}
.ladder{display:grid;gap:5px}
.lrow{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;
background:var(--sf3);border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13px}
.lrow b{font-weight:800;color:var(--ink)}
.lrow span{color:var(--ink2);font-size:12.5px}
.lrow i{font-style:normal;font-weight:800;color:var(--ink);white-space:nowrap}
.lrow--no{opacity:.45}
.lrow--no i{font-weight:600;color:var(--ink3)}
.lrow--fit{border-color:var(--acc);background:rgba(255,122,51,.13)}
.lrow--up{border-color:var(--line2)}
.lrow--fit b,.lrow--fit i{color:var(--acc2)}
/* ---------- downloads ---------- */
.dls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:860px){.dls{grid-template-columns:1fr}}
.dl{display:flex;flex-direction:column;background:var(--sf2);border:1px solid var(--line2);
border-radius:var(--r2);overflow:hidden;text-decoration:none;transition:.16s}
a.dl:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-2px)}
.dl img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;background:#fff}
.dl__b{padding:13px 15px;display:block}
.dl__b b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.dl__b small{display:block;font-size:12.5px;color:var(--ink3);margin-top:2px;line-height:1.45}
.dl__next{padding:15px;justify-content:center;background:linear-gradient(160deg,rgba(255,122,51,.11),transparent)}
/* ---------- cross-sell ---------- */
.xs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:560px){.xs{grid-template-columns:1fr}}
.xsc{display:grid;grid-template-columns:86px 1fr;gap:3px 13px;align-items:center;background:var(--sf2);
border:1px solid var(--line);border-radius:var(--r2);padding:11px 13px;text-decoration:none;transition:.16s}
.xsc:hover{border-color:var(--acc2);text-decoration:none;transform:translateY(-2px)}
.xsc__tag{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--acc2)}
.xsc b{font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.xsc__d{font-size:12px;color:var(--ink2);line-height:1.42}
.xsc__p{font-size:12.5px;font-weight:800;color:var(--acc2);margin-top:2px}
.sl{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:18px;margin-top:16px;
background:linear-gradient(120deg,#161D27,#0F141B);border:1px solid var(--line2);border-radius:var(--r2);padding:18px}
@media(max-width:860px){.sl{grid-template-columns:1fr}}
.sl__k{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);margin:0 0 3px}
.sl__t{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 7px}
.sl__d{font-size:13.8px;color:var(--ink2);margin:0 0 13px;line-height:1.55;max-width:56ch}
.sl__d b{color:var(--ink)}
.sl__r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
@media(max-width:560px){.sl__r{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slc{background:var(--sf3);border:1px solid var(--line2);border-radius:9px;padding:9px 10px;text-decoration:none;display:block}
.slc:hover{border-color:var(--acc);text-decoration:none}
.slc b{display:block;font-size:12.8px;font-weight:800;color:var(--ink)}
.slc span{display:block;font-size:11.5px;color:var(--acc2);font-weight:700;margin-top:1px}
.sl__cta{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:15px;align-self:start}
.sl__cta p{font-size:13.5px;color:var(--ink2);margin:0 0 12px;line-height:1.55}
.sl__cta b{color:var(--ink)}
/* ---------- the product, drawn in the page's own language ---------- */
.unitcard{background:radial-gradient(120% 90% at 22% 30%,rgba(255,122,51,.09),transparent 60%),linear-gradient(180deg,#141A22,#0E131A);border-color:var(--line2)}
.ucard{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:26px;align-items:center}
@media(max-width:900px){.ucard{grid-template-columns:1fr;gap:20px}}
@media(max-width:640px){
.ucard__shot{padding:8px 8px 8px 8px;overflow:hidden}
.dimline{display:none}
.ucard__shot img{max-height:230px}
}
.ucard__shot{position:relative;padding:10px 30px 22px 14px;
background:radial-gradient(70% 70% at 50% 55%,rgba(255,255,255,.055),transparent 70%)}
.ucard__shot img{display:block;width:auto;max-width:100%;max-height:300px;margin:0 auto;
filter:drop-shadow(0 22px 34px rgba(0,0,0,.6))}
.dimline{position:absolute;pointer-events:none}
.dimline i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--acc2);
background:rgba(10,13,18,.86);border:1px solid rgba(255,122,51,.4);border-radius:5px;padding:2px 7px;white-space:nowrap}
.dimline--l{left:14px;right:30px;bottom:2px;border-top:1px dashed rgba(255,122,51,.5);text-align:center}
.dimline--l i{position:relative;top:-10px}
.dimline--h{top:14px;bottom:14px;right:14px;border-right:1px dashed rgba(255,122,51,.5);
display:flex;align-items:center;justify-content:flex-end}
.dimline--h i{transform:translateX(52%)}
@media(max-width:640px){.dimline,.dimline--l,.dimline--h{display:none}}
.uweight{position:absolute;left:6px;top:8px;background:rgba(10,13,18,.8);border:1px solid var(--line2);
border-radius:10px;padding:7px 11px;text-align:center;backdrop-filter:blur(6px)}
.uweight b{display:block;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.uweight small{font-size:10px;color:var(--ink3);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.parts{list-style:none;margin:0;padding:0;display:grid;gap:7px;counter-reset:p}
.parts li{display:grid;grid-template-columns:24px 1fr;gap:3px 11px;align-items:baseline}
.parts__n{grid-row:span 2;width:24px;height:24px;border-radius:7px;background:rgba(255,122,51,.16);
border:1px solid rgba(255,122,51,.4);color:var(--acc2);font-size:11.5px;font-weight:800;
display:flex;align-items:center;justify-content:center}
.parts li b{font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.parts__d{font-size:12.8px;color:var(--ink2);line-height:1.5}
.udeck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
@media(max-width:940px){.udeck{grid-template-columns:1fr}}
.ubox{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:15px 16px}
.ubox--v{padding:12px}
.ubox__k{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--acc2);margin:0 0 11px}
.inbox{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.inbox li{display:grid;grid-template-columns:16px 1fr;gap:2px 9px;align-items:baseline}
.inbox svg{grid-row:span 2;color:var(--good);margin-top:3px}
.inbox b{font-size:13.8px;font-weight:700;color:var(--ink)}
.inbox span{font-size:12.3px;color:var(--ink3);line-height:1.4}
/* ---------- projection angle: the gobo actually skews ---------- */
.skew{background:linear-gradient(180deg,#0C1119,#080B10);border:1px solid var(--line2);border-radius:var(--r2);padding:16px}
.skew__scene{position:relative;height:250px;display:flex;align-items:center;justify-content:center;
perspective:820px;perspective-origin:50% 50%;
background:radial-gradient(60% 70% at 50% 55%,rgba(255,255,255,.05),transparent 70%);
border-radius:10px;overflow:hidden}
.skew__wall{transform-style:preserve-3d;transition:transform .12s linear}
.skew__gobo{width:186px;height:186px;display:block;
filter:drop-shadow(0 0 26px rgba(120,170,255,.34)) drop-shadow(0 0 60px rgba(255,140,60,.16))}
.skew__deg{position:absolute;top:10px;right:12px;font-size:12px;font-weight:800;color:var(--acc2);
background:rgba(10,13,18,.8);border:1px solid rgba(255,122,51,.35);border-radius:6px;padding:3px 9px;
font-variant-numeric:tabular-nums}
.skew__ctl{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;margin-top:13px}
.skew__ctl span{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.skew__ctl input[type=range]{width:100%;accent-color:var(--acc);height:22px;cursor:pointer}
.skew__verdict{margin:11px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2);min-height:40px}
.skew__verdict b{color:var(--ink)}
.skew__verdict em{font-style:normal;font-weight:800}
.skew__verdict em.ok{color:var(--good)}
.skew__verdict em.warn{color:var(--acc2)}
.skew__verdict em.bad{color:#FF6B6B}
/* ---------- throw diagram, drawn to scale ---------- */
.throw{background:linear-gradient(180deg,#0C1119,#080B10);border:1px solid var(--line2);border-radius:var(--r2);padding:16px}
.throw__ctls{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
@media(max-width:760px){.throw__ctls{grid-template-columns:1fr}}
.throw__stage{position:relative;height:250px;display:grid;grid-template-columns:56px 1fr 150px;
align-items:center;gap:0;padding-bottom:26px}
.throw__proj{position:relative;width:34px;height:24px;background:var(--sf3);border:1px solid var(--line2);
border-radius:5px;justify-self:end}
.throw__proj::after{content:"";position:absolute;right:-9px;top:6px;width:9px;height:12px;
background:var(--acc);border-radius:2px}
.throw__pl{position:absolute;left:0;top:-19px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--ink3);white-space:nowrap}
.throw__beam{height:100%;background:linear-gradient(90deg,rgba(255,122,51,.05),rgba(255,122,51,.34));
transition:clip-path .22s ease}
.throw__wall{position:relative;height:100%;border-left:2px solid rgba(255,255,255,.22);
display:flex;align-items:center;gap:10px;padding-left:12px}
.throw__img{background:linear-gradient(180deg,rgba(255,122,51,.62),rgba(255,122,51,.3));
border:1.5px solid var(--acc);border-radius:4px;width:30px;transition:height .22s ease;
min-height:12px;position:relative;box-shadow:0 0 22px rgba(255,122,51,.35)}
.throw__img span{position:absolute;left:38px;top:50%;transform:translateY(-50%);font-size:13px;
font-weight:800;color:var(--acc2);white-space:nowrap;font-variant-numeric:tabular-nums}
.throw__person{width:15px;height:56px;flex:0 0 15px;background:var(--ink3);opacity:.5;
border-radius:7px 7px 3px 3px;position:relative}
.throw__person::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
width:11px;height:11px;border-radius:50%;background:var(--ink3)}
.throw__person::after{content:"6 ft";position:absolute;bottom:-17px;left:50%;transform:translateX(-50%);
font-size:9.5px;color:var(--ink3);font-weight:700}
.throw__rule{position:absolute;left:56px;right:150px;bottom:4px;border-top:1px dashed rgba(255,255,255,.18);
text-align:center}
.throw__rule span{position:relative;top:-9px;background:#0A0E13;padding:0 9px;font-size:10.5px;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.throw__read{margin:14px 0 0;font-size:14px;line-height:1.55;color:var(--ink2)}
.throw__read b{color:var(--ink)}
.throw__read em{font-style:normal;color:var(--acc2);font-weight:800}
@media(max-width:560px){
.throw__stage{grid-template-columns:44px 1fr 120px;height:200px}
.throw__rule{left:44px;right:120px}
}
/* ---------- cross-sell with real hardware ---------- */
.xsc__img{grid-row:span 4;width:86px;height:66px;object-fit:contain;background:#0A0E13;border-radius:8px;
border:1px solid var(--line)}
.slc__img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#0A0E13;border-radius:6px;margin-bottom:6px}
/* ---------- the finder / price control ---------- */
.finder{padding:18px}
.fd__q{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 15px;letter-spacing:-.01em;line-height:1.4}
.fd__step{display:grid;grid-template-columns:22px 1fr;gap:10px;margin-bottom:13px;align-items:start}
.fd__n{width:22px;height:22px;border-radius:7px;background:rgba(255,122,51,.16);border:1px solid rgba(255,122,51,.4);
color:var(--acc2);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.chips--even button small{display:block;font-size:9px;color:var(--ink3);font-weight:700;margin-top:0}
.fd__out{background:linear-gradient(180deg,rgba(255,122,51,.16),rgba(255,122,51,.04));
border:1px solid rgba(255,122,51,.36);border-radius:var(--r2);padding:13px 15px;margin:4px 0 14px}
.fd__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.fd__grid small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.fd__grid b{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:2px;
font-variant-numeric:tabular-nums}
.fd__grid div:first-child b{color:var(--acc)}
.fd__why{font-size:12.5px;color:var(--ink2);margin:11px 0 0;line-height:1.5;border-top:1px solid rgba(255,122,51,.25);padding-top:10px}
.fd__why b{color:var(--ink)} .fd__why em{font-style:normal;color:var(--acc2);font-weight:800}
.fd__ups{display:grid;gap:8px;margin-bottom:14px}
.fd__sel{display:block}
.fd__sel span{display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink3);margin-bottom:4px}
.fd__sel select{width:100%;appearance:none;font:inherit;font-size:13.2px;font-weight:600;color:var(--ink);
background:var(--sf3) url("data:image/svg+xml;utf8,") no-repeat right 11px center;
border:1px solid var(--line2);border-radius:9px;padding:9px 30px 9px 11px;cursor:pointer}
.fd__sel select:hover{border-color:var(--ink3)}
.fd__gobo{background:var(--sf3);border:1px solid var(--line2);border-radius:var(--r2);padding:13px;margin-bottom:12px}
.fd__gobohd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.fd__gobohd b{font-size:13.5px;font-weight:800;color:var(--ink)}
.fd__gobohd span{font-size:11.5px;color:var(--acc2);font-weight:700}
.fd__gobobtns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fd__gobobtns .btn:first-child{grid-column:1/-1}
.fd__gobonote{font-size:11.8px;color:var(--ink3);margin:9px 0 0;line-height:1.45}
.fd__gobonote b{color:var(--ink2)}
.fd__acc{display:grid;gap:7px;margin-bottom:13px}
.fd__accrow{display:grid;grid-template-columns:16px 1fr auto;gap:9px;align-items:center;cursor:pointer;
background:var(--sf3);border:1px solid var(--line2);border-radius:9px;padding:9px 11px}
.fd__accrow:hover{border-color:var(--ink3)}
.fd__accrow input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer}
.fd__accrow b{display:block;font-size:12.8px;font-weight:700;color:var(--ink)}
.fd__accrow small{display:block;font-size:11.2px;color:var(--ink3);line-height:1.35}
.fd__accrow i{font-style:normal;font-size:12.8px;font-weight:800;color:var(--acc2)}
.fd__total{border-top:1px solid var(--line2);padding-top:12px;margin-bottom:14px;display:grid;gap:6px}
.fd__trow{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink2)}
.fd__trow b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.fd__trow b.free{color:var(--good)}
.fd__trow em{font-style:normal;color:var(--ink3)}
.fd__trow--t{border-top:1px solid var(--line);padding-top:9px;margin-top:3px;font-size:15px;color:var(--ink);font-weight:800}
.fd__trow--t b{font-size:20px;color:var(--acc);letter-spacing:-.02em}
.goboshow{background:radial-gradient(70% 70% at 50% 42%,rgba(120,170,255,.13),transparent 68%),
linear-gradient(180deg,#0C1119,#080B10);border:1px solid var(--line2);border-radius:var(--r2);
padding:16px;display:flex;flex-direction:column;align-items:center;text-align:center;height:100%;justify-content:center}
.goboshow img{width:186px;height:186px;filter:drop-shadow(0 0 30px rgba(120,170,255,.34)) drop-shadow(0 0 66px rgba(255,140,60,.18))}
.goboshow__b{margin-top:13px}
.goboshow__b b{display:block;font-size:14.5px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.goboshow__b span{display:block;font-size:12.8px;color:var(--ink2);line-height:1.5;margin-top:4px;max-width:38ch}
/* document previews rather than full-bleed page images */
.dl img{aspect-ratio:2/1;object-fit:cover;object-position:top center;opacity:.55;filter:saturate(.65)}
a.dl:hover img{opacity:.8}
.dl__badge{position:absolute;left:11px;top:11px;font-size:10px;font-weight:800;letter-spacing:.09em;
background:rgba(10,13,18,.86);border:1px solid var(--line2);border-radius:5px;padding:3px 7px;color:var(--acc2)}
.dl{position:relative}
/* ---------- finder: price and wattage first ---------- */
.fd__head{display:flex;justify-content:flex-start;align-items:center;gap:10px;flex-wrap:wrap;
border-bottom:1px solid var(--line2);padding-bottom:13px;margin-bottom:14px}
.fd__price b{display:block;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;
color:var(--ink);font-variant-numeric:tabular-nums}
.fd__price span{display:block;font-size:11.5px;color:var(--ink3);font-weight:600;margin-top:4px}
.fd__wblock{margin-bottom:14px}
.chips--w{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.chips--w button{padding:9px 3px;position:relative}
.chips--w button small{display:block;font-size:10px;color:var(--ink3);font-weight:700;margin-top:1px}
.chips--w button[aria-pressed=true] small{color:var(--acc2)}
.chip--rec::after{content:"";position:absolute;top:-4px;right:-4px;width:8px;height:8px;border-radius:50%;
background:var(--good);border:2px solid var(--sf2)}
.chip--short{opacity:.42}
.fd__wnote{font-size:12.2px;color:var(--ink2);margin:9px 0 0;line-height:1.5}
.fd__wnote b{color:var(--ink)} .fd__wnote em{font-style:normal;font-weight:800}
.fd__wnote em.ok{color:var(--good)} .fd__wnote em.bad{color:#FF6B6B}
.fd__tool{background:var(--sf3);border:1px solid var(--line2);border-radius:var(--r2);padding:12px 13px;margin-bottom:14px}
.fd__tool>summary{cursor:pointer;list-style:none;font-size:12.8px;font-weight:800;color:var(--acc2);
display:flex;align-items:center;gap:7px}
.fd__tool>summary::-webkit-details-marker{display:none}
.fd__tool>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:.2s}
.fd__tool[open]>summary::after{transform:rotate(-135deg)}
.fd__toolb{padding-top:12px}
.fd__dial input[type=range]{width:100%;accent-color:var(--acc);height:22px;cursor:pointer;margin:2px 0 0}
.fd__scale{display:flex;justify-content:space-between;font-size:10px;color:var(--ink3);font-weight:700;margin-top:-2px}
.fd__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ---------- categories ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media(max-width:900px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cats{grid-template-columns:1fr}}
.cat{display:grid;grid-template-columns:70px 1fr;gap:2px 12px;align-items:center;background:var(--sf2);
border:1px solid var(--line);border-radius:var(--r2);padding:11px 13px;text-decoration:none;transition:.16s}
.cat:hover{border-color:var(--acc2);transform:translateY(-2px);text-decoration:none}
.cat img{grid-row:span 3;width:70px;height:56px;object-fit:contain;background:#0A0E13;border-radius:7px;border:1px solid var(--line)}
.cat b{font-size:13.8px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.cat span{font-size:11.8px;color:var(--ink2);line-height:1.4}
.cat em{font-style:normal;font-size:11px;font-weight:800;color:var(--acc2);letter-spacing:.03em}
/* ---------- packages ---------- */
.pk{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
@media(max-width:760px){.pk{grid-template-columns:1fr}}
.pkc{background:linear-gradient(140deg,rgba(255,122,51,.13),transparent);border:1px solid rgba(255,122,51,.34);
border-radius:var(--r2);padding:16px 18px}
.pkc b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:5px}
.pkc p{font-size:13.4px;color:var(--ink2);line-height:1.55;margin:0 0 13px}
.fd__toolk{font-size:12.5px;font-weight:800;color:var(--acc2);margin:0 0 13px;letter-spacing:.01em}
.fd__dial{margin-bottom:13px}
.fd__answer{background:linear-gradient(180deg,rgba(255,122,51,.15),rgba(255,122,51,.04));
border:1px solid rgba(255,122,51,.34);border-radius:var(--r2);padding:12px 14px;margin-top:4px}
.fd__answer .fd__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.fd__answer .fd__grid div:first-child b{color:var(--acc)}
.fd__why{font-size:12.3px;color:var(--ink2);margin:10px 0 0;line-height:1.5;
border-top:1px solid rgba(255,122,51,.24);padding-top:9px}
.fd__why b{color:var(--ink)} .fd__why em{font-style:normal;color:var(--acc2);font-weight:700}
.fd__wnote em.warn{color:var(--acc2)}
.chips--even[data-f="amb"] button{font-size:12.5px;padding:9px 3px}
.fd__escal{background:linear-gradient(180deg,rgba(255,107,107,.16),rgba(255,107,107,.04));
border:1px solid rgba(255,107,107,.4);border-radius:var(--r2);padding:14px 15px;margin:0 0 12px}
.fd__escalk{font-size:12.5px;font-weight:800;color:#FF8A8A;margin:0 0 7px;letter-spacing:.01em}
.fd__escal p{font-size:12.6px;color:var(--ink2);line-height:1.55;margin:0 0 10px}
.fd__escal p b{color:var(--ink)}
.fd__stepper{display:flex;align-items:center;gap:2px;background:var(--sf);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.fd__stepper button{appearance:none;cursor:pointer;background:none;border:none;color:var(--ink);
font:inherit;font-size:15px;font-weight:800;width:26px;height:26px;line-height:1}
.fd__stepper button:hover{background:var(--sf3);color:var(--acc2)}
.fd__stepper b{min-width:22px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.fd__totalk{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);margin:0 0 9px}
.fd__trow em{font-style:normal;color:var(--ink3)}
.angs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-bottom:12px}
.angs button{appearance:none;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
background:var(--sf3);color:var(--ink2);border:1px solid var(--line2);border-radius:9px;
padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:4px;transition:.14s}
.angs button:hover{color:var(--ink);border-color:var(--ink3)}
.angs button[aria-pressed=true]{background:rgba(255,122,51,.15);border-color:var(--acc);color:var(--ink)}
.angs__m{width:13px;height:13px;border-radius:50%;display:block}
.angs__m--ok{background:#22C55E} .angs__m--warn{background:#F5C518} .angs__m--bad{background:#EF4444}
.angfig{margin:0;background:var(--sf2);border:1px solid var(--line2);border-radius:var(--r2);overflow:hidden}
/* Left at 1/1. A 4/3 crop bought the angle card 90px but cut the angle badge
off the top of every shot, and contain pillarboxed the light illustration
inside black bars. The card is inside R1 on its own now - it was split in
two - so the image does not have to pay for it. */
.angfig img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.angfig figcaption{padding:11px 13px;background:var(--sf2);border-top:1px solid var(--line)}
.angfig b{display:block;font-size:14px;font-weight:800;color:var(--ink)}
.angfig span{display:block;font-size:12.5px;color:var(--ink2);line-height:1.45;margin-top:2px}
/* escalation buttons must not overlap */
.fd__escal .btn{margin:4px 6px 0 0;display:inline-block;vertical-align:top}
.ask{align-items:flex-start}
.ask .btn{flex:0 0 auto}
/* ---------- sound toggle on the hero clip ---------- */
.stage__snd{position:absolute;right:11px;top:11px;z-index:3;appearance:none;cursor:pointer;font:inherit;
display:flex;align-items:center;gap:7px;background:rgba(10,13,18,.72);border:1px solid var(--line2);
border-radius:999px;padding:6px 12px 6px 9px;color:var(--ink2);backdrop-filter:blur(6px);transition:.15s}
.stage__snd:hover{color:var(--ink);border-color:var(--ink3)}
.stage__snd[aria-pressed=true]{background:rgba(255,122,51,.85);border-color:var(--acc);color:#160A02}
.stage__snd em{font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.02em}
.stage__sndi{width:13px;height:13px;border-left:4px solid currentColor;border-top:4px solid transparent;
border-bottom:4px solid transparent;position:relative}
.stage__sndi::after{content:"";position:absolute;left:2px;top:-3px;width:7px;height:7px;
border:1.6px solid currentColor;border-left-color:transparent;border-bottom-color:transparent;border-radius:0 6px 0 0}
.stage__snd[aria-pressed=false] .stage__sndi::after{opacity:.35}
/* ---------- manual distance entry ---------- */
.distrow{display:grid;grid-template-columns:1fr 84px;gap:7px;align-items:center}
@media(max-width:560px){.distrow{grid-template-columns:1fr}}
.distin{display:flex;align-items:center;gap:5px;background:var(--sf3);border:1px solid var(--line2);
border-radius:9px;padding:6px 10px}
.distin input{width:100%;background:none;border:none;color:var(--ink);font:inherit;font-size:14px;
font-weight:800;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.distin input::-webkit-outer-spin-button,.distin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.distin input:focus{outline:none}
.distin span{font-size:11.5px;color:var(--ink3);font-weight:700}
/* ---------- install carousel ---------- */
.carou{position:relative}
.carou__track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.carou__track::-webkit-scrollbar{display:none}
.carou__s{flex:0 0 100%;scroll-snap-align:center;margin:0;background:var(--sf2);border:1px solid var(--line);
border-radius:var(--r2);overflow:hidden}
.carou__s img,.carou__s video{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.carou__s figcaption{padding:9px 12px;font-size:12.4px;color:var(--ink2);line-height:1.45;border-top:1px solid var(--line)}
.carou__nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
.carou__nav button{appearance:none;cursor:pointer;background:var(--sf3);border:1px solid var(--line2);
color:var(--ink);width:30px;height:30px;border-radius:50%;font-size:16px;line-height:1;font-weight:800}
.carou__nav button:hover{border-color:var(--acc);color:var(--acc2)}
.carou__dots{display:flex;gap:6px}
.carou__dots i{width:6px;height:6px;border-radius:50%;background:var(--line2);display:block;transition:.16s}
.carou__dots i.on{background:var(--acc);transform:scale(1.35)}
.fd__gobolead{font-size:12.6px;color:var(--ink2);line-height:1.55;margin:0 0 12px}
.fd__gobolead b{color:var(--ink)}
.fd__gline{display:grid;grid-template-columns:1fr auto auto;gap:11px;align-items:center;margin-bottom:11px;
background:var(--sf);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.fd__gline>span{font-size:12.8px;font-weight:700;color:var(--ink)}
.fd__gline em{font-style:normal;font-size:12px;color:var(--acc2);font-weight:800;min-width:72px;text-align:right}
.fd__gobobtns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
@media(max-width:520px){.fd__gobobtns{grid-template-columns:1fr}}
.fd__gobobtns .btn{padding:9px 6px;font-size:12.2px;text-align:center}
.fd__gobobtns .btn:first-child{grid-column:auto}
.fd__lenshint{font-size:11.8px;color:var(--ink3);line-height:1.5;margin:8px 0 0}
.fd__lenshint b{color:var(--ink2)} .fd__lenshint em{font-style:normal;color:var(--acc2)}
/* ---------- bigger, uncropped hero thumbnails ---------- */
@media(min-width:900px){.reel{grid-template-columns:repeat(6,1fr)}}
.reel button:hover img{opacity:1}
/* ---------- the ? explanations ---------- */
.qm{appearance:none;cursor:pointer;text-decoration:none;width:15px;height:15px;border-radius:50%;border:1px solid var(--line2);
background:var(--sf3);color:var(--ink3);font:inherit;font-size:10px;font-weight:800;line-height:1;
padding:0;margin-left:5px;vertical-align:middle}
.qm:hover{color:var(--acc2);border-color:var(--acc);text-decoration:none}
.qm--link{display:inline-flex;align-items:center;justify-content:center}
.fld__l span{position:relative}
.qm__pop{position:absolute;left:0;top:calc(100% + 7px);z-index:20;width:250px;background:var(--sf3);
border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.5;
color:var(--ink2);text-transform:none;letter-spacing:0;font-weight:500;box-shadow:0 14px 34px -12px #000}
.fd__sel span{position:relative}
/* ---------- multi-lens ---------- */
.fd__lensbox{background:var(--sf3);border:1px solid var(--line2);border-radius:var(--r2);padding:12px 13px;margin-bottom:9px}
.fd__lensbox>.fld__l{display:block}
.fd__lensbox>.fld__l em{display:block;margin-top:6px}
.lens-pkg{color:var(--good)}
.fd__lenshint s{color:var(--ink3)}
/* ---------- logo dropzone ---------- */
.drop{display:block;cursor:pointer;text-align:center;border:1.5px dashed var(--line2);border-radius:var(--r2);
padding:16px 12px;background:var(--sf);transition:.15s;margin-bottom:9px}
.drop:hover,.drop.on{border-color:var(--acc);background:rgba(255,122,51,.07)}
.drop b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.drop span{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px}
.gchips{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.gchips li{display:grid;grid-template-columns:34px 1fr auto;gap:9px;align-items:center;background:var(--sf);
border:1px solid var(--line);border-radius:9px;padding:6px 9px}
.gchips img{width:34px;height:34px;object-fit:cover;border-radius:6px;background:#0A0E13;border:1px solid var(--line)}
.gchips i{width:34px;height:34px;border-radius:6px;background:var(--sf3);border:1px solid var(--line);display:block}
.gchips span{font-size:12.2px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gchips button{appearance:none;cursor:pointer;background:none;border:none;color:var(--ink3);font-size:16px;line-height:1}
.gchips button:hover{color:#FF6B6B}
.fd__gobobtns{grid-template-columns:1fr 1fr}
.lenspkg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
@media(max-width:520px){.lenspkg{grid-template-columns:1fr}}
.lpk{appearance:none;cursor:pointer;text-align:left;font:inherit;background:var(--sf);
border:1px solid var(--line2);border-radius:10px;padding:9px 11px;transition:.15s}
.lpk:hover{border-color:var(--acc);transform:translateY(-1px)}
.lpk--best{background:linear-gradient(150deg,rgba(255,122,51,.15),transparent);border-color:rgba(255,122,51,.4)}
.lpk b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.lpk span{display:block;font-size:11px;color:var(--ink3);line-height:1.35;margin-top:1px}
.lpk i{display:block;font-style:normal;font-size:12.5px;font-weight:800;color:var(--acc2);margin-top:4px}
.lpk{position:relative}
.lpk__flag{position:absolute;top:-7px;right:8px;font-size:9px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;background:var(--good);color:#062;border-radius:4px;padding:2px 6px}
.lpk i s{color:var(--ink3);font-weight:600;font-size:11px;margin-left:4px}
.lpk u{display:block;text-decoration:none;font-size:11px;font-weight:800;color:var(--good);margin-top:2px}
.lpk[aria-pressed=true]{border-color:var(--acc);background:rgba(255,122,51,.16)}
.fd__trow--save b{color:var(--good)}
.fd__trow--save span{color:var(--good)}
/* ---------- hero thumbnails: show the whole subject, label underneath ---------- */
.reel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
@media(min-width:820px){.reel{grid-template-columns:repeat(6,minmax(0,1fr))}}
.reel button{appearance:none;cursor:pointer;padding:0;background:none;border:none;display:block;
text-align:center;transition:.15s}
.reel__f{position:relative;display:block;border-radius:10px;overflow:hidden;background:#0A0E13;
border:2px solid var(--line);aspect-ratio:4/3;transition:.15s}
.reel__f img{width:100%;height:100%;object-fit:contain;padding:5px;opacity:.85;transition:.15s}
.reel button:hover .reel__f{border-color:var(--ink3)}
.reel button:hover .reel__f img{opacity:1}
.reel button[aria-pressed=true] .reel__f{border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,122,51,.18)}
.reel button[aria-pressed=true] .reel__f img{opacity:1}
.reel span{display:block;font-size:10.5px;line-height:1.3;color:var(--ink3);font-weight:700;
margin-top:6px;padding:0 2px}
.reel button[aria-pressed=true] span{color:var(--ink)}
.reel__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;
border-radius:50%;background:rgba(10,13,18,.62);border:1.5px solid rgba(255,255,255,.85);backdrop-filter:blur(3px)}
.reel__play::after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
.reel button[aria-pressed=true] .reel__play{background:rgba(255,122,51,.9);border-color:#fff}
/* ---------- compact spec chips under the hero ---------- */
.hbul{list-style:none;margin:11px 0 0;padding:0;display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
@media(max-width:1100px){.hbul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.hbul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hbul li{background:var(--sf);border:1px solid var(--line);border-radius:8px;padding:6px 8px;text-align:center}
.hbul b{display:block;font-size:12px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.2;
font-variant-numeric:tabular-nums}
.hbul span{display:block;font-size:10px;color:var(--ink3);line-height:1.25;margin-top:1px}
.lensslots{display:grid;gap:6px;margin-top:2px}
.lslot{display:grid;grid-template-columns:20px 1fr auto 20px;gap:8px;align-items:center}
.lslot__n{width:20px;height:20px;border-radius:6px;background:var(--sf);border:1px solid var(--line2);
color:var(--ink3);font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.lslot select{width:100%;appearance:none;font:inherit;font-size:12.6px;font-weight:600;color:var(--ink);
background:var(--sf) url("data:image/svg+xml;utf8,") no-repeat right 9px center;
border:1px solid var(--line2);border-radius:8px;padding:7px 26px 7px 9px;cursor:pointer}
.lslot select:hover{border-color:var(--ink3)}
.lslot em{font-style:normal;font-size:11.5px;font-weight:800;color:var(--acc2);white-space:nowrap}
.lslot button{appearance:none;cursor:pointer;background:none;border:none;color:var(--ink3);font-size:15px;line-height:1;padding:0}
.lslot button:hover{color:#FF6B6B}
.lslot i{display:block}
/* ---------- fills the column beside the buy panel on wide screens ---------- */
.pfill{display:none}
@media(min-width:1100px){
/* The left column becomes a flex stack and the fill takes the slack, so the
column can never end short of the buy panel whatever the product's copy. */
.hero__g{align-items:stretch}
.hero__g>div:first-child{display:flex;flex-direction:column}
.pfill{display:flex;flex-direction:column;gap:12px;margin-top:14px;flex:1 1 auto;
justify-content:space-between}
.pfill__b{flex:0 0 auto}
}
.pfill__b{background:var(--sf);border:1px solid var(--line);border-radius:var(--r2);padding:15px 16px}
.pfill__k{font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--acc2);margin:0 0 11px}
.pfq{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--line);font-size:13.2px;line-height:1.55;color:var(--ink2)}
.pfq:last-child{margin:0;padding:0;border-bottom:none}
.pfq cite{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);font-weight:700;margin-top:6px}
.pfill__b--cta{background:linear-gradient(140deg,rgba(255,122,51,.12),transparent);border-color:rgba(255,122,51,.3)}
.pfill__b--cta p{font-size:13.2px;color:var(--ink2);line-height:1.55;margin:0 0 12px}
.pfill__b--cta b{color:var(--ink)}
.pfill__b--cta .btn{margin:0 6px 6px 0}
.pfdocs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pfdoc{display:block;background:var(--sf2);border:1px solid var(--line2);border-radius:10px;overflow:hidden;
text-decoration:none;transition:.15s}
.pfdoc:hover{border-color:var(--acc);text-decoration:none;transform:translateY(-2px)}
.pfdoc img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top center;opacity:.55;filter:saturate(.6)}
.pfdoc:hover img{opacity:.85}
.pfdoc span{display:block;padding:9px 11px;border-top:1px solid var(--line)}
.pfdoc b{display:block;font-size:13px;font-weight:800;color:var(--ink)}
.pfdoc small{display:block;font-size:11px;color:var(--ink3);margin-top:1px}
.pfnote{font-size:12px;color:var(--ink3);line-height:1.5;margin:10px 0 0}
/* ---------- dimensions, base and box: drawn, not pasted ---------- */
.dimgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin:0}
.dimgrid div{border-bottom:1px solid var(--line);padding-bottom:7px}
.dimgrid dt{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);margin:0}
.dimgrid dd{margin:2px 0 0;display:flex;align-items:baseline;gap:6px}
.dimgrid dd b{font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dimgrid dd span{font-size:11px;color:var(--ink3)}
.basefig{background:radial-gradient(70% 70% at 50% 45%,rgba(255,255,255,.05),transparent 70%);
border-radius:10px;padding:4px 6px}
.basefig svg{width:100%;height:auto;display:block}
.ubox__n{font-size:12.2px;color:var(--ink2);line-height:1.5;margin:9px 0 0}
.pfill__logo{height:26px;width:auto;display:block;margin:0 0 12px;opacity:.95}
.pfill__b--lede .lede{font-size:14.5px;line-height:1.62;color:var(--ink);font-weight:500}
.pfill__b--lede p{font-size:13.4px;line-height:1.62;color:var(--ink2);margin:0 0 11px}
.pfill__b--lede p b{color:var(--ink);font-weight:700}
.pfsub{font-size:13.2px;line-height:1.6;color:var(--ink2);margin:0}
.revline{font-family:Archivo,Manrope,sans-serif;font-weight:800;letter-spacing:-.01em;font-size:15px;
color:var(--acc2);margin:14px 0 0!important;display:flex;align-items:center;gap:7px}
.revline span{font-size:20px;line-height:1;color:var(--acc)}
.vfig{margin:0;border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line2)}
.vfig img{width:100%;height:auto;max-height:230px;object-fit:contain;display:block;cursor:zoom-in;padding:6px}
.vfig--tall img{max-height:300px}
.vfig--s img{max-height:170px}
[id^="mount-"] .vfig img{max-height:150px}
[id^="mount-"] .rem li{padding:5px 9px}
[id^="mount-"] .rem{gap:5px}
#lbx{position:fixed;inset:0;z-index:9000;background:rgba(8,10,14,.88);display:none;
align-items:center;justify-content:center;padding:24px;cursor:zoom-out;backdrop-filter:blur(3px)}
#lbx.on{display:flex}
#lbx img{max-width:min(980px,94vw);max-height:88vh;background:#fff;border-radius:12px;padding:14px;
box-shadow:0 30px 90px rgba(0,0,0,.5)}
.lbx__svg{display:none}
#lbx.lbx--svg .lbx__svg{display:block;background:var(--sf2);border:1px solid var(--line2);
border-radius:14px;padding:22px;width:min(1000px,94vw);max-height:88vh;overflow:auto}
#lbx b{position:absolute;top:18px;right:22px;color:#fff;font-size:26px;line-height:1;opacity:.75}
.rem{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.rem li{display:grid;grid-template-columns:26px 1fr;gap:3px 10px;align-items:baseline;
background:var(--sf);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.rem__k{grid-row:span 2;width:26px;height:26px;border-radius:7px;background:rgba(255,122,51,.16);
border:1px solid rgba(255,122,51,.4);color:var(--acc2);font-size:12px;font-weight:800;
display:flex;align-items:center;justify-content:center}
.rem li b{font-size:13.5px;font-weight:800;color:var(--ink)}
.rem__d{font-size:12px;color:var(--ink2);line-height:1.4}
.morewatt{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:9px;padding:8px 11px;
background:rgba(255,122,51,.09);border:1px solid rgba(255,122,51,.28);border-radius:9px;
font-size:12.5px;font-weight:800;color:var(--ink);text-decoration:none;transition:.15s}
.morewatt:hover{background:rgba(255,122,51,.18);border-color:var(--acc);text-decoration:none}
.morewatt span{font-weight:600;color:var(--acc2)}
/* ---------- original installation graphics ---------- */
.gwrap{background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--line);
border-radius:12px;padding:12px 14px;cursor:zoom-in}
.gwrap--wide{padding:14px 16px}
.gfx{display:block;width:100%;height:auto}
.gfx__d{font:800 13px/1.2 Archivo,Manrope,sans-serif;fill:var(--ink);letter-spacing:.01em}
.gfx__u{font:600 11px/1.2 Archivo,Manrope,sans-serif;fill:var(--ink3)}
.gfx__big{font:800 19px/1 Archivo,Manrope,sans-serif;fill:var(--acc2)}
.yrow{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:14px;
align-items:center;margin-top:10px}
@media(max-width:540px){.yrow{grid-template-columns:1fr}}
[id^="mount-"] .split>div:last-child .gwrap{max-width:356px}
.mscs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.msc{margin:0}
.msc figcaption{margin-top:7px;text-align:center;font-size:11px;font-weight:800;
letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);display:grid;gap:3px}
.msc figcaption span{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink3)}
@media(max-width:540px){.mscs{grid-template-columns:1fr;gap:14px}}
.pfill__b--lede .revline{margin:20px 0 10px;font-size:17px;padding-top:16px;
border-top:1px solid rgba(255,122,51,.24)}
.inds{list-style:none;margin:9px 0 0;padding:0;display:grid;gap:9px}
.inds li{display:grid;gap:1px;padding:0 0 0 13px;position:relative}
.inds li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
background:var(--acc);opacity:.75}
.inds b{font-size:12.5px;color:var(--ink);letter-spacing:.005em}
.inds span{font-size:12.5px;line-height:1.5;color:var(--ink2)}
.qbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:15px;padding:10px 14px;
background:var(--sf);border:1px solid var(--line);border-radius:11px}
.qbar__n{font-size:12.5px;font-weight:800;color:var(--ink2);margin-right:2px}
.qbar a{font-size:12.5px;font-weight:700;color:var(--acc2);text-decoration:none;
border-bottom:1px solid rgba(255,169,107,.34);padding-bottom:1px}
.qbar a:hover{color:var(--acc);border-bottom-color:var(--acc)}
/* ---------- people also buy ---------- */
.alsw{margin-top:14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
-webkit-overflow-scrolling:touch;padding-bottom:6px}
.alsr{display:flex;gap:12px;min-width:min-content}
.alsc{flex:0 0 196px;display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:12px;
background:linear-gradient(180deg,var(--sf2),var(--sf));border:1px solid var(--line);
text-decoration:none;transition:.15s}
.alsc:hover{border-color:rgba(255,122,51,.42);transform:translateY(-2px);text-decoration:none}
.alsc__m{height:78px;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.alsc__m img{max-height:78px;max-width:100%;width:auto;object-fit:contain}
.alsg{width:76px;height:68px}
.alsc b{font-size:13px;color:var(--ink);line-height:1.25}
.alsc span{font-size:12px;line-height:1.45;color:var(--ink2);flex:1}
.alsc em{margin-top:4px;font-style:normal;font-size:14px;font-weight:800;color:var(--ink);
display:flex;flex-direction:column;gap:2px}
.alsc em i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--acc2)}
@media(max-width:540px){.alsc{flex-basis:170px}}
.alsc--u{position:relative;border-color:rgba(255,122,51,.30);padding-top:32px}
.alsc__m--u{height:66px}
.alsc__m--u img{max-height:66px}
.alsc__tag{position:absolute;top:9px;left:12px;font-size:9.5px;font-weight:800;letter-spacing:.07em;
text-transform:uppercase;color:var(--acc2);background:rgba(255,122,51,.14);
border:1px solid rgba(255,122,51,.30);border-radius:20px;padding:3px 8px}
.fd__quote{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-4px 0 12px;padding:9px 12px;
background:rgba(255,122,51,.07);border:1px solid rgba(255,122,51,.22);border-radius:10px}
.fd__quote a{font-size:12px;font-weight:800;color:var(--acc2);text-decoration:none;
border-bottom:1px solid rgba(255,169,107,.35);padding-bottom:1px}
.fd__quote a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.pfill__b--cta .qbar{margin-top:12px}
.ubox .gwrap{padding:8px 10px;margin:2px 0 8px}
.ubox .gwrap .gfx{max-height:146px}
.ubox .gwrap:has(.gfx[aria-label^="The main parts"]) .gfx{max-height:112px}
[id^="mount-"] .split>div:first-child .gwrap--wide .gfx{max-height:122px}
.prts{list-style:none;margin:7px 0 4px;padding:0;display:grid;gap:3px}
.prts li{display:flex;align-items:baseline;gap:6px;font-size:11px;line-height:1.3;color:var(--ink2)}
.prts li span{flex:0 0 16px;height:16px;border-radius:5px;background:rgba(255,122,51,.16);
border:1px solid rgba(255,122,51,.34);color:var(--acc2);font-size:9.5px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center}
.prts li b{font-weight:700;color:var(--ink)}
.rmt{display:grid;grid-template-columns:minmax(0,72px) minmax(0,1fr);gap:12px;align-items:start}
.rmt__img{width:100%;height:auto;max-height:158px;object-fit:contain;display:block}
@media(max-width:460px){.rmt{grid-template-columns:70px minmax(0,1fr);gap:11px}}
.pfill__k--rev{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:#FF5A3C;display:inline-flex;align-items:center;gap:8px}
.pfill__k--rev::before{content:"";width:22px;height:2px;background:#FF5A3C;border-radius:2px}
.fdg{display:flex;align-items:center;gap:10px;margin:18px 0 9px}
.fdg::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.fdg__l{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
white-space:nowrap}
.fdg__h{font-size:10.5px;font-weight:600;color:var(--ink3);white-space:nowrap;order:3}
.fd__head + .fdg,.fd__quote + .fdg{margin-top:14px}
.fd__thumb{width:52px;height:52px;object-fit:contain;flex:0 0 52px;margin-right:2px;transform:scaleX(-1);
filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
@media(max-width:520px){.fd__thumb{width:46px;height:46px;flex-basis:46px}}
.fdg--t{width:100%;background:none;border:0;padding:0;cursor:pointer;font:inherit;text-align:left}
.fdg--t:hover .fdg__l{color:var(--ink)}
.fdg--t:hover .fdg__h{color:var(--acc2)}
.fdg__c{order:4;width:9px;height:9px;border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;flex:0 0 auto}
.fdg--t[aria-expanded="false"] .fdg__c{transform:rotate(-135deg) translate(-3px,-3px)}
.fdg__sum{margin:-2px 0 4px;padding:10px 12px;background:var(--sf);border:1px solid var(--line);
border-radius:10px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.fdg__sum b{color:var(--ink)}
.soc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px;padding-top:15px;
border-top:1px solid var(--line)}
.soc__l{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);
margin-right:2px}
.soc a{font-size:12.5px;font-weight:700;color:var(--acc2);text-decoration:none;
border-bottom:1px solid rgba(255,169,107,.32);padding-bottom:1px}
.soc a:hover{color:var(--acc);border-bottom-color:var(--acc)}
background:radial-gradient(120% 160% at 78% 50%,rgba(255,122,51,.10),transparent 62%)}
transition:opacity .4s}
.cwarn{margin-top:16px;padding:14px 16px;border-radius:12px;
background:linear-gradient(180deg,rgba(255,122,51,.09),rgba(255,122,51,.03));
border:1px solid rgba(255,122,51,.26)}
.cwarn b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:5px}
.cwarn p{font-size:13px;line-height:1.6;color:var(--ink2);margin:0}
.cwarn__a{margin-top:9px !important}
.cwarn__a a{font-weight:800;color:var(--acc2);text-decoration:none;
border-bottom:1px solid rgba(255,169,107,.34)}
.cwarn__a a:hover{color:var(--acc)}
.fd__qty__n{font-size:11.5px;color:var(--ink3);margin:-4px 0 12px}
.fd__qty__n b{color:var(--ink2)}
.fd__qty__n a{color:var(--acc2);text-decoration:none;border-bottom:1px solid rgba(255,169,107,.3)}
.qstep{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.qstep{margin-left:auto;flex:0 0 auto}
.qstep button{appearance:none;background:var(--sf2);border:0;color:var(--ink);font:800 14px/1 Archivo,sans-serif;
cursor:pointer;padding:6px 10px;transition:.14s}
.qstep button:hover{background:var(--sf3);color:var(--acc2)}
.qstep b{min-width:28px;text-align:center;font-size:13px;font-variant-numeric:tabular-nums}
.fd__trow--save b{color:var(--good)}
.fd__trow--save span{color:var(--good)}
.lnk{appearance:none;background:none;border:0;padding:0;font:inherit;font-weight:800;color:var(--acc2);
cursor:pointer;border-bottom:1px solid rgba(255,169,107,.34)}
.lnk:hover{color:var(--acc)}
.tiers{display:flex;flex-wrap:wrap;gap:6px 10px;margin:-6px 0 12px;padding:10px 12px;background:var(--sf);
border:1px solid var(--line);border-radius:10px}
.tiers span{font-size:11.5px;color:var(--ink2);white-space:nowrap}
.tiers span b{color:var(--ink)}
.tiers small{flex:1 1 100%;font-size:11px;color:var(--ink3);line-height:1.5;margin-top:2px}
.pfoot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.pfoot__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
max-width:var(--mx);margin:0 auto;padding:0 22px 28px}
.fd__rev{margin:0 0 10px}
.fd__rev .st{font-size:12.5px}
/* Reserved for a live sale or coupon - stays hidden until one is running,
so the slot exists in the template without taking space today. */
.fd__sale{display:flex;align-items:center;gap:9px;margin:0 0 11px;padding:8px 11px;border-radius:9px;
background:rgba(72,213,151,.10);border:1px solid rgba(72,213,151,.30)}
.fd__sale__tag{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
color:var(--good);background:rgba(72,213,151,.16);border-radius:20px;padding:3px 8px}
.fd__sale__t{font-size:12.5px;font-weight:700;color:var(--ink)}
.spec__r--live dd b{color:var(--acc2);font-size:15px}
.spec__w{display:block;font-size:11.5px;color:var(--ink3);margin-top:2px}
.spec__w b{color:var(--ink2) !important;font-size:11.5px !important}
.spec .spec__r--live{grid-column:1/-1}
.hero__promise{font-size:15px;font-weight:800;letter-spacing:-.005em;color:var(--acc2);margin:0 0 10px}
.artstat{margin:0 0 10px;padding:10px 12px;border-radius:9px;background:rgba(255,200,87,.09);
border:1px solid rgba(255,200,87,.3);font-size:12.5px;color:var(--ink2);line-height:1.5}
.artstat.is-ok{background:rgba(72,213,151,.09);border-color:rgba(72,213,151,.32)}
.artstat b{color:var(--ink)}
.artstat__l{display:block;margin-top:4px;font-size:11px;color:var(--ink3)}
.artstat__f{display:block;margin-top:3px;color:#FF8A8A}
[data-artpick].is-over{outline:2px dashed var(--acc);outline-offset:3px}
/* The hero media column sat 4px past the viewport on narrow phones - nothing
scrolled because the browser clipped it, but the right edge was being cut.
Constrain the stage and its poster reel to the column they live in. */
@media(max-width:560px){
.stage,.reel,.reel__f{max-width:100%}
.hero__g,.hero__g>*{min-width:0;max-width:100%}
}
/* ---------- notes ---------- */
.flag{background:rgba(255,122,51,.09);border:1px dashed rgba(255,122,51,.4);border-radius:10px;padding:12px 15px;font-size:13.2px;color:var(--ink2);margin:0 0 18px}
.flag b{color:var(--acc2)}
.foot{padding:44px 0 60px;color:var(--ink3);font-size:12.5px;text-align:center;border-top:1px solid var(--line);margin-top:34px}
/* ---------------------------------------------------------------------------
Copy imported from a product's own description (.owncopy). Direction B fails
R1 if a card runs past 900px, and a description written for the old full-width
template carries figures and spec tables at full size. Constrain its media so
an imported section reads as a card, not a tower.
--------------------------------------------------------------------------- */
.owncopy p{margin:0 0 10px}
.owncopy h3{font-size:16px;line-height:1.3;margin:14px 0 6px}
.owncopy img{max-width:100%;height:auto;max-height:230px;object-fit:contain;display:block;margin:10px auto;border-radius:10px}
.owncopy figure{margin:18px 0;max-width:none}
/* A figure in the copy is a deliberate TEACHING graphic - the lens x distance
diagram, the mounting-angle diagram - and .owncopy img caps every image at
230px tall, which made their figures unreadable (Ike, 2026-09-01). A figure
gets the full column and a real size; a loose ![]()
stays capped. */
.owncopy figure img{width:100%;max-width:100%;max-height:none;height:auto;display:block;margin:0;border-radius:10px;cursor:zoom-in}
.owncopy figure figcaption{font-size:12.5px;opacity:.72;margin-top:8px;line-height:1.45;text-align:left}
.owncopy figcaption{font-size:12.5px;opacity:.72;text-align:center;margin-top:6px}
.owncopy table{width:100%;border-collapse:collapse;font-size:13px;display:block;overflow:auto;max-height:500px}
/* A lens or wattage chart is legitimately long. It scrolls inside the card so
one table cannot turn a card into a 1500px tower (R1). */
.owncopy table::-webkit-scrollbar{width:8px;height:8px}
.owncopy table::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
.owncopy thead th{position:sticky;top:0;background:#14171c;z-index:1}
.owncopy td,.owncopy th{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left;vertical-align:top}
.owncopy ul,.owncopy ol{margin:0 0 10px;padding-left:18px}
.owncopy li{margin:0 0 5px}
.owncopy details{margin:6px 0}
.owncopy a{color:#FF8A3D}
/* Interactive widgets embedded in a product's own copy - the lens chooser, the
FAQ accordion, gallery strips. These are single indivisible elements, so
splitCopy() cannot break them and one of them turns a card into a 1500px
tower. They scroll inside the card instead, which keeps R1 honest without
hiding anything. */
.owncopy .ipq-lc,.owncopy .ipb-lc,.owncopy .ipb-faq,.owncopy .ipq-faq{max-height:620px;overflow:auto}
.owncopy .ipq-lc::-webkit-scrollbar,.owncopy .ipb-lc::-webkit-scrollbar{width:8px}
.owncopy .ipq-lc::-webkit-scrollbar-thumb,.owncopy .ipb-lc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:4px}
/* A product's own labelled parts diagram replaces the drawn callout. Vendor
diagrams are tall, and the unit card blows R1's 900px ceiling without a cap. */
.parts--own{margin:0}
.parts--own img{max-height:250px;object-fit:contain}
.unitcard .ucard__shot img{max-height:210px;object-fit:contain}
/* the drawn callout inside the unit card, same reason */
.unitcard .ubox .gwrap svg{max-height:190px}
/* A product with its own copy fills the top of the Get creative card, so the
two-column split left a tall empty column beside the carousel (Ike,
2026-09-01: "the text block is too big for that image"). One column then. */
.crsolo{display:block}
.crsolo>[hidden]{display:none}
.crsolo .carou{max-width:760px;margin-inline:auto;overflow:hidden}
/* The angle scenes: all five drawn, one shown. Replaces the light-plate vendor
line-art photographs, which read as an indoor fixture on an outdoor page and
sat as a white block on the dark ground (Ike, 2026-09-01). */
.angscs{position:relative}
.angsc{display:none;margin:0}
.angsc.on{display:block}
.angsc .gfx{background:linear-gradient(180deg,#161B22,#11151b);border:1px solid rgba(255,255,255,.08);border-radius:12px}
.angsc figcaption{margin-top:9px;font-size:12.5px;line-height:1.45;color:#9aa1aa}
.angsc figcaption b{display:block;color:#F4F7FA;font-weight:700;font-size:13.5px;margin-bottom:2px}
/* Both housings' callouts sit side by side (Ike, 2026-09-01: "the parts should
be right next to each other to save space"), and .ubox caps a drawing at
146px - which left the numbered dots unreadable. The callout gets height. */
.ubox .gwrap .gfx[aria-label^="The main parts"]{max-height:300px}
.parts--tight li{margin-bottom:6px}
.parts--tight .parts__d{font-size:11.5px;line-height:1.35}
/* The options block got more complete (the cord ladder, sensors, plug region
were all missing), and Ike asked for it not to get taller for it. Two columns
on anything wider than a phone. */
.fd__upgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.fd__upgrid .fd__sel{margin:0}
.fd__upgrid .fd__sel select{width:100%}
@media (max-width:640px){.fd__upgrid{grid-template-columns:1fr}}