/* Kolari Shades — Arm A, "Show Me" (demonstration-led)
   Persuasion mechanism: demonstration. Signature element: the interactive
   resolution-chart slider. Design is evidential, not decorative:
   high contrast, large type, media at full width, blue reserved for action. */

:root{
  --blue:#2075D3; --blue-hover:#185FAD; --blue-text:#1F6EC6;
  --ink:#0C0D0F; --ink-2:#1D1D1D;
  --paper:#FFFFFF; --paper-2:#F4F5F6; --line:#E1E3E6; --line-dark:rgba(255,255,255,.14);
  --muted:#5F656D; --muted-dark:rgba(255,255,255,.68);
  --wrap:1200px; --gut:clamp(20px,5vw,44px);
  --sect:clamp(64px,9vw,116px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--blue)}
h1,h2,h3{margin:0; font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; line-height:1.2; letter-spacing:0; font-weight:600}
h1{font-weight:500; font-size:clamp(1.95rem,4.8vw,3rem)}
h2{font-size:clamp(1.6rem,3.4vw,1.875rem)}
h3{font-size:1.25rem; letter-spacing:0; font-weight:600}
p{margin:0 0 18px}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.sect{padding-block:var(--sect)}
.narrow{max-width:64ch}
.muted{color:var(--muted)}
.dark{background:var(--ink); color:#fff}
.dark .muted{color:var(--muted-dark)}
.paper2{background:var(--paper-2)}
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-text); margin:0 0 16px;
}
.dark .eyebrow,.hero .eyebrow{color:#7FB4F0}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px}
.logo{display:flex; align-items:center; text-decoration:none}
.logo svg{height:28px; width:auto; display:block}
.btn{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-weight:700; font-size:16px; padding:14px 32px; border-radius:4px; border:0;
  cursor:pointer; transition:background .18s var(--ease), transform .18s var(--ease);
  font-family:inherit; letter-spacing:-.01em;
}
.btn:hover{background:var(--blue-hover); transform:translateY(-1px)}
.btn:focus-visible{outline:3px solid #0b3d78; outline-offset:3px}
.btn.lg{font-size:18px; padding:18px 44px}
.btn.sm{padding:11px 22px; font-size:15px}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.dark .btn.ghost{color:#fff; border-color:rgba(255,255,255,.4)}
.btn.ghost:hover{background:var(--ink); color:#fff}

/* ---------- hero ---------- */
.hero{background:var(--ink); color:#fff; position:relative; overflow:hidden}
.hero .wrap{position:relative; z-index:2; padding-block:clamp(56px,9vw,104px)}
.hero-grid{display:grid; gap:clamp(32px,5vw,56px); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.05fr .95fr} }
.hero h1{color:#fff; max-width:12ch}
.hero .sub{font-size:clamp(1.05rem,2.1vw,1.3rem); color:var(--muted-dark); max-width:44ch; margin:22px 0 0}
.pricing{margin:26px 0 24px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.pricing .amt{font-size:1.6rem; font-weight:700; letter-spacing:0}
.pricing .fin{font-size:15px; color:var(--muted-dark)}
.hero-media img{width:100%; border-radius:5px}
.microtrust{display:flex; gap:18px 26px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-dark)}
.microtrust span{font-size:13.5px; color:var(--muted-dark); display:flex; gap:8px; align-items:center}
.microtrust svg{flex:0 0 auto}

/* ---------- SIGNATURE: comparison slider ---------- */
.compare{
  position:relative; width:100%; aspect-ratio:3523/1196; overflow:hidden;
  border-radius:5px; background:#111; touch-action:pan-y; user-select:none;
}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* Fallback-safe: without JS both images stack, Kolari on top and fully visible. */
.compare .top{clip-path:inset(0 0 0 50%)}
.compare .handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background:#fff;
  transform:translateX(-1px); pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.25);
}
.compare .knob{
  position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; background:#fff; box-shadow:0 3px 14px rgba(0,0,0,.4);
  display:grid; place-items:center; pointer-events:none;
}
.compare .knob svg{display:block}
.compare .tag{
  position:absolute; top:14px; font-size:11.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:6px 12px; border-radius:3px; background:rgba(0,0,0,.66); color:#fff;
}
.compare .tag.l{left:14px} .compare .tag.r{right:14px}
.compare input[type=range]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize;
}
.compare input[type=range]:focus-visible{opacity:1; background:rgba(32,117,211,.18); outline:3px solid var(--blue); outline-offset:-3px}
.compare-cap{font-size:14px; color:var(--muted); margin-top:14px}
.dark .compare-cap{color:var(--muted-dark)}

/* ---------- video ---------- */
.vid{position:relative; border-radius:5px; overflow:hidden; background:#000}
.vid video{width:100%; display:block}

/* ---------- generic layout ---------- */
.two{display:grid; gap:clamp(30px,5vw,64px); grid-template-columns:1fr; align-items:center}
@media(min-width:880px){ .two{grid-template-columns:1fr 1fr} .two.rev>*:first-child{order:2} }
.three{display:grid; gap:clamp(24px,3.4vw,40px); grid-template-columns:1fr}
@media(min-width:760px){ .three{grid-template-columns:repeat(3,1fr)} }
.card{border:1px solid var(--line); border-radius:5px; padding:26px; background:#fff}
.dark .card{border-color:var(--line-dark); background:rgba(255,255,255,.03)}
.card p{margin:10px 0 0; font-size:15.5px; color:var(--muted)}
.dark .card p{color:var(--muted-dark)}
.stat{font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-size:clamp(2.1rem,4.4vw,3rem); font-weight:600; letter-spacing:0; line-height:1.1}

/* ---------- comparison table ---------- */
/* The table is wider than a phone, and the two Kolari columns are the last ones,
   so on mobile the only columns on screen were the competitors'. The row label is
   pinned, a fade marks the cut edge and a line says to swipe. */
.tablewrap{position:relative; margin-top:38px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tablehint{display:none; margin:34px 0 10px; font-size:13px; color:var(--muted)}
table.vs{width:100%; border-collapse:collapse; min-width:640px; font-size:15px}
table.vs th,table.vs td{padding:15px 14px; text-align:left; border-bottom:1px solid var(--line)}
@media(max-width:719px){
  .tablehint{display:block}
  .tablewrap{margin-top:0}
  .tablewrap{
    background:
      linear-gradient(to right,var(--paper-2) 30%,rgba(244,245,246,0)) left center/44px 100% no-repeat,
      linear-gradient(to left,var(--paper-2) 30%,rgba(244,245,246,0)) right center/44px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(12,13,15,.18),rgba(12,13,15,0)) left center/16px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(12,13,15,.18),rgba(12,13,15,0)) right center/16px 100% no-repeat;
    background-attachment:local,local,scroll,scroll;
  }
  table.vs tbody th,table.vs thead th:first-child{
    position:sticky; left:0; z-index:1; background:var(--paper-2);
    box-shadow:1px 0 0 var(--line);
  }
}
table.vs thead th{font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:700; white-space:nowrap}
table.vs tbody th{font-weight:600}
table.vs .own{background:#EEF5FD}
table.vs thead .own{background:#DCEAFB; color:var(--blue-hover)}
table.vs td.no{color:#6B7177}

/* ---------- picker ---------- */
.picker{display:grid; gap:20px; grid-template-columns:1fr}
@media(min-width:720px){ .picker{grid-template-columns:repeat(3,1fr)} }
.style{border:1px solid var(--line); border-radius:5px; overflow:hidden; background:#fff; display:flex; flex-direction:column}
.style img{width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; padding:16px}
.style .body{padding:20px 22px 24px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; flex:1}
.style h3{font-size:1.1rem}
.style .who{font-size:14.5px; color:var(--muted); margin:0; flex:1}
.style .tiers{display:grid; gap:8px; margin-top:6px}
.tierlink{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; border:1px solid var(--line); border-radius:4px;
  text-decoration:none; color:var(--ink); font-size:14.5px; font-weight:600;
  transition:.16s var(--ease);
}
.tierlink:hover{border-color:var(--blue); background:#F5F9FE}
.tierlink b{font-weight:800}
.tierlink small{display:block; font-weight:500; color:var(--muted); font-size:12.5px}

/* ---------- risk / faq ---------- */
.risk{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:760px){ .risk{grid-template-columns:repeat(3,1fr)} }
/* Child selector, not descendant: `.risk div` also matched the inner
   heading+paragraph wrapper and laid the two out side by side, which broke
   every label onto its own line ("24- / month / warranty"). */
.risk>div{display:flex; gap:13px; align-items:flex-start}
.risk svg{flex:0 0 auto; margin-top:2px}
.risk h3{font-size:1rem; margin-bottom:4px}
.risk p{font-size:14.5px; margin:0; color:var(--muted-dark)}
details.faq{border-bottom:1px solid var(--line); padding:6px 0}
details.faq summary{
  cursor:pointer; padding:18px 0; font-weight:600; font-size:16px; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; font-size:22px; font-weight:400; color:var(--muted); flex:0 0 auto}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin:0 0 18px; color:var(--muted); max-width:70ch}
details.faq summary:focus-visible{outline:3px solid var(--blue); outline-offset:3px}

/* ---------- footer / sticky ---------- */
footer.site{background:var(--ink); color:var(--muted-dark); font-size:14px; border-top:1px solid var(--line-dark)}
footer.site .wrap{padding-block:36px; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between}
footer.site a{color:rgba(255,255,255,.86)}
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70; background:#fff; border-top:1px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.sticky .p{font-weight:800; font-size:15px; line-height:1.2}
.sticky .p span{display:block; font-weight:400; font-size:12.5px; color:var(--muted)}
.pressband{background:var(--paper-2); border-block:1px solid var(--line); padding:26px 0}
.pressband .plab{margin:0 0 14px; font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.pnames{display:flex; flex-wrap:wrap; gap:14px 36px; align-items:baseline}
.pnames span{font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-size:17px; font-weight:600; color:var(--ink-2); opacity:.72}
.paylogos{margin:0; line-height:0}
.paylogos img{height:26px; width:auto; opacity:.9}
body{padding-bottom:74px}

/* hero CTA pair + mid-page buy strip */
.ctarow{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
/* On a phone the two CTAs sat at different widths because each sized to its
   own label. Stack them at equal width so neither reads as the lesser one. */
@media(max-width:560px){
  .ctarow{display:grid; grid-template-columns:1fr; gap:12px}
  .ctarow .btn{width:100%; text-align:center; padding-inline:20px}
}
.btn.ghost{background:transparent; color:var(--paper); border:1px solid rgba(255,255,255,.34)}
.btn.ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6)}
.buystrip{background:var(--ink); color:var(--paper); border-radius:6px; padding:30px 34px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; margin-top:44px}
.buystrip .t{font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-size:1.25rem; font-weight:600; margin:0}
.buystrip .s{margin:7px 0 0; font-size:14.5px; color:var(--muted-dark)}
.rec{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 9px; border-radius:20px; background:#E8F1FC; color:#185FAD; vertical-align:2px}

.skip{position:absolute; left:-9999px; background:#fff; padding:12px 18px; z-index:99}
.skip:focus{left:12px; top:12px}
.ph{background:#FFF6DA; border:1px dashed #D8B84E; padding:2px 7px; border-radius:3px; font-size:.86em; color:#6B5410}

/* No opacity-gated scroll reveal anywhere on this page. Content that needs JS
   to become visible can blank an entire test arm. See Arm 0 note. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
}

.card .stars{margin:0; font-size:15px; letter-spacing:2px; color:#946400}
.card .attrib{margin:14px 0 0; font-size:13px; color:var(--muted)}
.dark .card .attrib{color:var(--muted-dark)}