/* Kolari Shades — Arm B, "The Optics Lab" (authority-led)
   Persuasion mechanism: credibility transfer. Signature element: the spectral
   transmittance chart as a live inline SVG instrument readout.
   Design language: measurement report. Near-black ground, hairline rules,
   monospaced data, restrained logo-gradient accents. */

:root{
  --bg:#0E0F11; --bg-2:#15171A; --panel:#191C20;
  --ink:#F2F4F6; --dim:rgba(242,244,246,.62); --faint:rgba(242,244,246,.50);
  --rule:rgba(242,244,246,.12); --rule-2:rgba(242,244,246,.06);
  --blue:#2075D3; --blue-lt:#5B9EE8; --teal:#46C2C9; --violet:#8E7FE8; --pink:#DB73AA;
  --wrap:1200px; --gut:clamp(20px,5vw,44px);
  --sect:clamp(64px,9vw,112px);
  --ease:cubic-bezier(.22,1,.36,1);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%; height:auto; display:block}
a{color:var(--blue-lt)}
h1,h2,h3{margin:0; font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-weight:600; line-height:1.2; letter-spacing:0}
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; font-weight:600; letter-spacing:0}
h1 strong,h2 strong{font-weight:700}
p{margin:0 0 18px; color:var(--dim)}
.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut)}
.sect{padding-block:var(--sect); border-top:1px solid var(--rule-2)}
.narrow{max-width:62ch}

/* instrument-style labels */
.lab{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.lab::before{content:""; width:26px; height:1px; background:var(--blue-lt); flex:0 0 auto}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ---------- header ---------- */
header.site{position:sticky; top:0; z-index:60; background:rgba(14,15,17,.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.logo svg{height:26px; width:auto; display:block}
.btn{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none;
  font-family:inherit; font-weight:700; font-size:16px; padding:14px 32px; border-radius:2px;
  border:0; cursor:pointer; transition:background .18s var(--ease);
}
.btn:hover{background:#185FAD}
.btn:focus-visible{outline:3px solid var(--blue-lt); outline-offset:3px}
.btn.lg{font-size:18px; padding:17px 42px}
.btn.sm{padding:10px 20px; font-size:14.5px}
.btn.line{background:transparent; border:1px solid var(--rule); color:var(--ink)}
.btn.line:hover{background:rgba(255,255,255,.06)}

/* ---------- hero ---------- */
.hero .wrap{padding-block:clamp(34px,4vw,52px)}
.hero-grid{display:grid; gap:clamp(30px,5vw,54px); grid-template-columns:1fr; align-items:center}
@media(min-width:900px){ .hero-grid{grid-template-columns:1.02fr .98fr} }
.hero h1{max-width:19ch}
.hero .sub{font-size:clamp(1.02rem,2vw,1.15rem); max-width:46ch; margin-top:16px}
.specrow{display:grid; grid-template-columns:repeat(3,auto); gap:20px 30px; margin:22px 0 0; justify-content:start}
.specrow div{border-left:1px solid var(--rule); padding-left:14px}
.specrow .v{font-family:var(--mono); font-size:1.5rem; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.specrow .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-top:4px}
.hero img{border-radius:3px}

/* ---------- SIGNATURE: spectral chart ---------- */
.chart-shell{background:var(--panel); border:1px solid var(--rule); border-radius:3px; padding:clamp(18px,3vw,30px)}
.chart-head{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.chart-head .t{font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint)}
svg.spectral{width:100%; height:auto; display:block; overflow:visible}
svg.spectral .grid{stroke:var(--rule-2); stroke-width:1}
svg.spectral .axis{stroke:var(--rule); stroke-width:1}
svg.spectral text{font-family:var(--mono); font-size:10px; fill:var(--faint); letter-spacing:.06em}
svg.spectral .bandlab{font-size:10px; letter-spacing:.18em}
svg.spectral .trace{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}

/* The chart is the whole argument of this arm, and on a phone its axis labels
   rendered at 3.5px: the viewBox is 900 wide and the shell is about 312, so a
   10 unit label lands at a third of its size. Below 880 the labels are scaled up
   and the chart keeps a floor width it can be scrolled across, so the curves stay
   at a scale you can actually read. */
.charthint{display:none; margin:0 0 12px; font-size:13px; color:var(--dim)}
@media(max-width:879px){
  .chart-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  svg.spectral{min-width:620px}
  svg.spectral text{font-size:18px}
  svg.spectral .bandlab{font-size:17px; letter-spacing:.14em}
  svg.spectral .trace{stroke-width:3.4}
  svg.spectral .grid,svg.spectral .axis{stroke-width:1.6}
  .charthint{display:block}
}
.keys{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:22px; padding-top:18px; border-top:1px solid var(--rule-2)}
.keys button{
  display:flex; align-items:center; gap:9px; background:none; border:0; padding:4px 0; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); transition:color .16s var(--ease);
}
/* The off state used to stack opacity .5 on an already faint colour, which put
   a live control at about 2.2:1. The swatch carries the state instead. */
.keys button[aria-pressed="false"]{color:var(--faint)}
.keys button[aria-pressed="false"] i{opacity:.3}
.keys button:hover{color:var(--ink)}
.keys button:focus-visible{outline:2px solid var(--blue-lt); outline-offset:3px}
.keys i{width:16px; height:3px; border-radius:2px; flex:0 0 auto; display:block}

/* ---------- layout ---------- */
.two{display:grid; gap:clamp(30px,5vw,60px); 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:1px; grid-template-columns:1fr; background:var(--rule-2); border:1px solid var(--rule-2)}
@media(min-width:760px){ .three{grid-template-columns:repeat(3,1fr)} }
.three>div{background:var(--bg); padding:28px 26px}
.three h3{margin-bottom:10px}
.three p{font-size:15px; margin:0}

.stack{display:grid; gap:1px; background:var(--rule-2); border:1px solid var(--rule-2)}
.layer{background:var(--bg-2); padding:18px 22px; display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center}
.layer .n{font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:.1em}
.layer .d{font-size:15px; color:var(--dim)}
.layer .v{font-family:var(--mono); font-size:12.5px; color:var(--blue-lt); white-space:nowrap}

/* ---------- table ---------- */
/* Same problem as Arm A: the Kolari columns are last, so a phone shows only the
   competitors' until the reader swipes. Pin the row label, fade the cut edge,
   and say so in a line above the table. */
.tablewrap{position:relative; margin-top:34px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tablehint{display:none; margin:30px 0 10px; font-size:13px; color:var(--dim)}
@media(max-width:719px){
  .tablehint{display:block}
  .tablewrap{
    margin-top:0;
    background:
      linear-gradient(to right,var(--bg) 30%,rgba(14,15,17,0)) left center/40px 100% no-repeat,
      linear-gradient(to left,var(--bg) 30%,rgba(14,15,17,0)) right center/40px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) left center/14px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.55),rgba(0,0,0,0)) right center/14px 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(--bg);
    box-shadow:1px 0 0 var(--rule-2);
  }
}
table.vs{width:100%; border-collapse:collapse; min-width:660px; font-size:14.5px}
table.vs th,table.vs td{padding:14px 13px; text-align:left; border-bottom:1px solid var(--rule-2)}
table.vs thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); font-weight:400; white-space:nowrap}
table.vs tbody th{font-weight:600; color:var(--ink)}
table.vs td{color:var(--dim); font-family:var(--mono); font-size:13px}
table.vs .own{background:rgba(32,117,211,.10); color:var(--ink)}
table.vs thead .own{background:rgba(32,117,211,.18); color:var(--blue-lt)}

/* ---------- picker ---------- */
.picker{display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule-2); border:1px solid var(--rule-2)}
@media(min-width:720px){ .picker{grid-template-columns:repeat(3,1fr)} }
.style{background:var(--bg-2); display:flex; flex-direction:column}
.style img{width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; padding:18px}
.style .body{padding:22px; display:flex; flex-direction:column; gap:9px; flex:1}
.style .who{font-size:14.5px; color:var(--dim); margin:0; flex:1}
.tierlink{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; border:1px solid var(--rule); border-radius:2px; text-decoration:none;
  color:var(--ink); font-family:var(--mono); font-size:12.5px; transition:.16s var(--ease);
}
.tierlink:hover{border-color:var(--blue-lt); background:rgba(32,117,211,.10)}
.tierlink small{display:block; color:var(--faint); font-size:10.5px; letter-spacing:.08em}

.risk{display:grid; gap:1px; grid-template-columns:1fr; background:var(--rule-2); border:1px solid var(--rule-2)}
@media(min-width:760px){ .risk{grid-template-columns:repeat(3,1fr)} }
.risk>div{background:var(--bg-2); padding:26px}
.risk p{font-size:14.5px; margin:8px 0 0}

details.faq{border-bottom:1px solid var(--rule-2)}
details.faq summary{cursor:pointer; padding:19px 0; font-weight:600; font-size:16.5px; 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-family:var(--mono); color:var(--faint); flex:0 0 auto}
details.faq[open] summary::after{content:"\2013"}
details.faq p{margin:0 0 18px; max-width:70ch; font-size:15.5px}
details.faq summary:focus-visible{outline:2px solid var(--blue-lt); outline-offset:3px}

footer.site{border-top:1px solid var(--rule); font-size:13.5px}
footer.site .wrap{padding-block:34px; display:flex; flex-wrap:wrap; gap:14px 30px; justify-content:space-between; color:var(--faint)}
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--bg-2); border-top:1px solid var(--rule);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.sticky .p{font-family:var(--mono); font-size:14px; font-weight:700}
.sticky .p span{display:block; font-weight:400; font-size:11px; color:var(--faint); letter-spacing:.08em}
.pressband{background:var(--bg-2); border-block:1px solid var(--rule); padding:24px 0}
.pressband .plab{margin:0 0 13px; font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.pnames{display:flex; flex-wrap:wrap; gap:13px 34px; align-items:baseline}
.pnames span{font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-size:16px; font-weight:600; color:var(--dim)}
.paylogos{margin:0; line-height:0}
.paylogos img{height:26px; width:auto; opacity:.72}
body{padding-bottom:72px}

/* 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(--ink); border:1px solid var(--rule)}
.btn.ghost:hover{background:rgba(242,244,246,.07); border-color:rgba(242,244,246,.34)}
.buystrip{background:var(--panel); border:1px solid var(--rule); border-radius:2px; padding:28px 32px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; margin-top:42px}
.buystrip .t{font-family:Montserrat,"Open Sans",Helvetica,Arial,sans-serif; font-size:1.2rem; font-weight:600; margin:0}
.buystrip .s{margin:7px 0 0; font-size:14px; color:var(--dim)}
.rec{display:inline-block; margin-left:8px; font-family:var(--mono); font-size:10px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:2px;
  background:rgba(32,117,211,.18); color:var(--blue-lt); vertical-align:2px}

.skip{position:absolute; left:-9999px; background:#fff; color:#000; padding:12px 18px; z-index:99}
.skip:focus{left:12px; top:12px}
.ph{background:rgba(216,184,78,.16); border:1px dashed rgba(216,184,78,.6); padding:2px 7px; border-radius:2px; font-size:.86em; color:#E3C875}

/* No opacity-gated scroll reveal. See Arm 0 note. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  svg.spectral .trace{stroke-dasharray:none!important; stroke-dashoffset:0!important}
}