/* Kolari Shades — Arm 0, Fixed Baseline
   Faithful reproduction of kolarivision.com/kolari-shades/ visual language.
   Deliberately NOT redesigned. Only defect fixes. */

:root{
  --blue:#2075D3; --blue-hover:#185FAD; --blue-dark-bg:#5B9EE8;
  --page:#F9F9FA; --alt:#F2F2F2; --dark:#1D1D1D;
  --text:#121212; --muted:#696969; --line:#E3E3E3;
  --wrap:1200px; --gut:clamp(20px,5vw,40px);
  --sect:clamp(56px,8vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--text);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--blue)}
h1,h2,h3,.h{font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-weight:600; line-height:1.2; letter-spacing:0; margin:0}
h1 strong,h2 strong,h3 strong{font-weight:700}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.sect{padding-block:var(--sect)}

/* accent bar before headings — their signature detail */
.bar{position:relative; padding-left:22px}
.bar::before{content:""; position:absolute; left:0; top:.12em; bottom:.12em; width:8px; background:var(--blue)}

/* ---------- header ---------- */
.topbar{background:#000; color:#fff; font-size:12.5px; letter-spacing:.02em}
.topbar .wrap{display:flex; gap:18px; align-items:center; justify-content:space-between; min-height:44px; padding-block:8px; flex-wrap:wrap}
.topbar a{color:#fff; text-decoration:none}
.topbar .ship{font-weight:600}
header.site{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
header.site .wrap{position:relative}
header.site .wrap{display:flex; align-items:center; gap:28px; min-height:72px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); flex:0 0 auto}
.logo svg{display:block; height:30px; width:auto}
nav.main{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
nav.main a{color:var(--text); text-decoration:none; font-size:15px; font-weight:600; padding:6px 0}
nav.main a:hover{color:var(--blue)}

/* Their own mobile header is 98px with the nav behind a toggle. Left open, this
   replica stacked a two-line topbar on a four-row nav for 310px of header, put
   the H1 at 417 instead of 168, and pushed the only CTA off the first screen on
   a shorter phone. That would have cost the control arm conversions the page it
   controls for does not lose. */
.navtoggle{display:none}
@media(max-width:759px){
  .topbar .tel{display:none}
  header.site .wrap{min-height:58px; gap:16px}
  .logo svg{height:24px}
  .navtoggle{
    display:flex; align-items:center; gap:9px; margin-left:auto;
    background:none; border:1px solid var(--line); border-radius:50px;
    padding:8px 16px; font:600 14px/1 inherit; font-family:inherit;
    color:var(--text); cursor:pointer;
  }
  .navtoggle:focus-visible{outline:3px solid #0b3d78; outline-offset:3px}
  .navtoggle-bars{
    width:15px; height:10px; flex:0 0 auto;
    border-top:2px solid currentColor; border-bottom:2px solid currentColor;
    position:relative;
  }
  .navtoggle-bars::after{
    content:""; position:absolute; left:0; right:0; top:50%; margin-top:-1px;
    border-top:2px solid currentColor;
  }
  nav.main{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; background:#fff; margin:0;
    border-bottom:1px solid var(--line); padding:6px var(--gut) 14px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  nav.main a{padding:13px 0; border-bottom:1px solid var(--line)}
  nav.main a:last-child{border-bottom:0}
  header.site.nav-open nav.main{display:flex}
  header.site{position:sticky}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-weight:700; font-size:16px; padding:15px 40px; border-radius:50px;
  border:0; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{background:var(--blue-hover); transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #0b3d78; outline-offset:3px}
.btn.lg{font-size:19px; padding:17px 52px}

/* ---------- hero ---------- */
.hero{position:relative; background:#0b0c0e; color:#fff; overflow:hidden}
.hero picture,.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.6) 48%,rgba(0,0,0,.18) 100%)}
.hero .wrap{position:relative; z-index:2; padding-block:clamp(72px,13vw,132px)}
.hero .eyebrow{letter-spacing:.18em; font-size:13px; font-weight:700; text-transform:uppercase; color:rgba(255,255,255,.86); margin:0 0 14px}
.hero h1{font-weight:500; font-size:clamp(1.95rem,4.8vw,3rem); color:#fff; max-width:11ch}
.hero p.sub{font-size:clamp(1.02rem,2vw,1.2rem); color:rgba(255,255,255,.86); max-width:46ch; margin:20px 0 0}
.hero .price{margin:22px 0 26px; font-size:16px; color:rgba(255,255,255,.92)}
.hero .price b{font-weight:700; color:#fff}
.rule{height:8px; background:var(--blue)}

/* ---------- generic bands ---------- */
.band-alt{background:var(--alt)}
.band-dark{background:var(--dark); color:#fff}
.band-dark h2,.band-dark h3{color:#fff}
.band-dark a{color:var(--blue-dark-bg)}
.lede{font-size:clamp(1.25rem,2.6vw,1.5rem)}
.sect h2{font-size:clamp(1.6rem,3.4vw,1.875rem); margin-bottom:18px}
.sect p{max-width:62ch}
.muted{color:var(--muted)}

.split{display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,60px); align-items:center}
@media(min-width:860px){ .split{grid-template-columns:1fr 1fr} .split.rev>*:first-child{order:2} }
.split img{width:100%; border-radius:2px}

.feature-grid{display:grid; gap:clamp(26px,4vw,44px); grid-template-columns:1fr}
@media(min-width:760px){ .feature-grid{grid-template-columns:repeat(3,1fr)} }
.feature h3{font-size:1.22rem; font-weight:600; margin-bottom:10px}
.feature p{font-size:15.5px; color:var(--muted); margin:0}

/* ---------- spectral graph ---------- */
.graph{display:grid; gap:clamp(24px,4vw,48px); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .graph{grid-template-columns:1.5fr 1fr} }
.legend{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.legend li{display:flex; align-items:center; gap:11px; font-size:14.5px; letter-spacing:.04em}
.dot{width:11px; height:11px; border-radius:50%; flex:0 0 auto}

/* ---------- comparison ---------- */
figure.compare{margin:0}
figure.compare img{width:100%}
figure.compare figcaption{font-size:14px; color:var(--muted); margin-top:12px}

/* ---------- buy block (THE FIX) ---------- */
.buy{display:grid; grid-template-columns:1fr; gap:clamp(30px,5vw,56px); align-items:start}
@media(min-width:900px){ .buy{grid-template-columns:1.05fr .95fr} }
.gallery{display:grid; gap:12px}
.gallery .main{background:#fff; border:1px solid var(--line); border-radius:3px; overflow:hidden}
.gallery .main img{width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; padding:14px}
.thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.thumbs button{
  padding:0; background:#fff; border:1px solid var(--line); border-radius:3px; cursor:pointer; overflow:hidden;
  transition:border-color .18s var(--ease);
}
.thumbs button[aria-current="true"]{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue)}
.thumbs img{width:100%; aspect-ratio:1; object-fit:contain; padding:6px; background:#fff}
.buy .title{font-size:1.3rem; font-weight:600; font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif}
.buy .prices{font-size:clamp(1.9rem,4vw,2.5rem); font-weight:700; font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; margin:6px 0 4px}
.buy .fin{color:var(--muted); font-size:15px; margin:0 0 20px}
.hr{height:1px; background:var(--line); margin:22px 0}
.opt-label{font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 10px}
.swatches{display:flex; gap:10px; margin-bottom:6px}
.swatches button{
  flex:1; padding:13px 8px; border:1px solid var(--line); background:#fff; border-radius:3px;
  font:inherit; font-size:15px; cursor:pointer; transition:.18s var(--ease);
}
.swatches button[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#fff; font-weight:700}
table.sku{width:100%; border-collapse:collapse; margin-top:8px; font-size:15px}
table.sku th{text-align:left; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; padding:0 0 10px; border-bottom:1px solid var(--line)}
table.sku th:last-child,table.sku td:last-child{text-align:right; white-space:nowrap}
table.sku td{padding:13px 0; border-bottom:1px solid var(--line); vertical-align:top}
table.sku tr:last-child td{border-bottom:0}
.tier{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:20px; background:#E8F1FC; color:var(--blue-hover); margin-left:8px}
.trust{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:9px; font-size:15px; color:var(--muted)}
.trust li{display:flex; gap:10px; align-items:flex-start}
.trust svg{flex:0 0 auto; margin-top:3px}

/* ---------- final ---------- */
.final{background:var(--dark); color:#fff; text-align:center}
.final h2{font-size:clamp(1.6rem,3.4vw,1.875rem)}
.final p{margin-inline:auto}

footer.site{background:#111; color:rgba(255,255,255,.66); font-size:14px}
footer.site .wrap{padding-block:40px; display:flex; flex-wrap:wrap; gap:18px 32px; justify-content:space-between; align-items:center}
footer.site a{color:rgba(255,255,255,.86)}

.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff;
  border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:14px; justify-content:space-between;
  transform:translateY(110%); transition:transform .3s var(--ease);
}
.sticky.on{transform:none}
.sticky .p{font-weight:700; font-size:15px; line-height:1.25}
.sticky .p span{display:block; font-weight:400; font-size:12.5px; color:var(--muted)}
.sticky .btn{padding:12px 26px; font-size:15px}
.paylogos{margin:0; line-height:0}
.paylogos img{height:26px; width:auto; opacity:.85}
body{padding-bottom:0}
body.has-sticky{padding-bottom:76px}

.skip{position:absolute; left:-9999px; background:#fff; padding:12px 18px; z-index:99}
.skip:focus{left:12px; top:12px}

/* NOTE: there is deliberately no opacity-gated scroll-reveal on these pages.
   Any animation that hides content until JS un-hides it can leave a blank page
   if the observer never fires. That is the exact defect found on the client's
   live page, and on an A/B test arm it would silently invalidate the result.
   Content renders immediately. Motion is limited to hover and focus states. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}