/* Unicorn Dev – shared layout for all styles (created 2026-11-03, styles F/G/H added 2026-11-03).
   Content lives once in index.html; every style is a theme on <html data-theme="d|b|c|e|f|g|h">.
   Theme files only change look and feel – never content. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
ol,ul{list-style:none}
:focus-visible{outline:2px solid var(--focus,currentColor);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* Style-specific elements: data-only="d b" shows an element only in those styles */
[data-theme=d] [data-only]:not([data-only~=d]),
[data-theme=b] [data-only]:not([data-only~=b]),
[data-theme=c] [data-only]:not([data-only~=c]),
[data-theme=e] [data-only]:not([data-only~=e]),
[data-theme=f] [data-only]:not([data-only~=f]),
[data-theme=g] [data-only]:not([data-only~=g]),
[data-theme=h] [data-only]:not([data-only~=h]){display:none!important}

main > section{scroll-margin-top:118px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}

/* ---------- top bar: style switcher + navigation ---------- */
.topbar{position:sticky;top:0;z-index:50}
.sw-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-top:6px;padding-bottom:6px}
.sw-claim{font-size:13.5px;line-height:1.35}
.sw-ico{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin-right:8px;color:var(--sw-ico,currentColor)}
.sw-short{display:none}
.sw-tabs{display:flex;gap:4px;flex:none}
.sw-tabs button{display:inline-flex;align-items:center;gap:7px;padding:3px;font-size:13px;line-height:1.1;white-space:nowrap}
/* wrapping-paper swatches: every chip shows its own style, independent of the current one */
.sw-chip{display:block;flex:none;width:22px;height:22px;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
[data-set-style=d] .sw-chip{background:linear-gradient(135deg,#0a0a0c 0 36%,#7cf7e4 36%,#d78bff 50%,#ffd58a 64%,#0a0a0c 64%)}
[data-set-style=b] .sw-chip{background:linear-gradient(transparent 70%,#00f0ff 70% 76%,transparent 76%),linear-gradient(#ffd319,#ff2e97 52%,#12002b 52%)}
[data-set-style=c] .sw-chip{background:linear-gradient(135deg,#ffb3e1,#c9a7ff 35%,#9edbff 65%,#9ff5d3)}
[data-set-style=e] .sw-chip{background:linear-gradient(135deg,#ffe600 0 50%,#ff4fa3 50%);box-shadow:inset 0 0 0 2px #0d0d0d}
[data-set-style=f] .sw-chip{background:linear-gradient(transparent 52%,rgba(255,214,0,.8) 52% 78%,transparent 78%),linear-gradient(#a9c8e8 1px,transparent 1px) 0 0/5px 5px,linear-gradient(90deg,#a9c8e8 1px,transparent 1px) 0 0/5px 5px,#fffdf5}
[data-set-style=g] .sw-chip{background:radial-gradient(circle,transparent 4.5px,#fff 4.5px 5.5px,transparent 6px),linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px) 0 0/5px 5px,linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px) 0 0/5px 5px,#1452b0}
[data-set-style=h] .sw-chip{background:linear-gradient(#151412,#151412) 4px 4px/14px 4px no-repeat,linear-gradient(#f1ede3 0 11px,transparent 11px),repeating-linear-gradient(#f1ede3 0 2px,#77736b 2px 3px)}
html .sw-tabs button[aria-checked=true]{padding-right:11px}
.switcher .sw-tabs button[aria-checked=false] .sw-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.needs-try .sw-tabs{flex:0 1 auto;flex-wrap:wrap;max-width:100%}
html .needs-try .sw-tabs button{padding-right:11px}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.mark-box{display:grid;place-items:center;flex:none}
.mark{width:24px;height:30px}
.nav-links{display:flex;gap:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;text-align:center;transition:transform .15s,box-shadow .15s,background-color .15s,color .15s,border-color .15s}
.ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hero-copy{position:relative}
.facts{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{display:flex;flex-direction:column;gap:8px}
.fact + .fact{border-left:var(--fact-sep,0)}
.marquee{overflow:hidden;white-space:nowrap}
.marquee > div{display:inline-block;animation:ud-scroll 28s linear infinite}
@keyframes ud-scroll{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{position:relative}
.sec-head{margin-bottom:44px}
.needs-try{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;margin:-14px 0 36px}
.cards{display:grid;grid-template-columns:repeat(4,1fr)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:step}
.step{counter-increment:step}
.tiers{display:grid;grid-template-columns:repeat(5,1fr)}
.tier{display:flex;flex-direction:column}
.tier .spd{margin-top:auto;padding-top:12px;font-weight:600}
.catch{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start}
.catch-list{display:grid;gap:8px;margin:14px 0 0}
.catch-list li{position:relative;padding-left:26px}
.catch-list li::before{content:"✓";position:absolute;left:2px;top:0;font-weight:700;color:var(--catch-ok,currentColor)}
html[data-theme] .catch .catch-total{margin-top:14px;font-weight:700;color:inherit}
.extras{display:grid;grid-template-columns:repeat(3,1fr)}
.inv{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.chart-row{display:grid;grid-template-columns:110px 1fr 56px;gap:14px;align-items:center}
.chart-row > span:last-child{text-align:right}
.chart-track{display:block}
.chart-b{display:block}
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.sig{margin-top:22px}
.sig b{display:block}
.sig a{text-decoration:underline}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details a{text-decoration:underline}
.compare-wrap{overflow-x:auto}
.compare{width:100%;border-collapse:collapse}
.compare th,.compare td{text-align:left;vertical-align:top}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr}
.calc-out{border-left:var(--calc-sep,0)}
.ctl + .ctl{margin-top:26px}
.ctl-top{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin-bottom:8px}
.ctl-scale{display:flex;justify-content:space-between;font-size:12.5px;opacity:.75;margin-top:2px}
.tier-btns{display:flex;flex-wrap:wrap;gap:8px}
.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.res{display:flex;flex-direction:column;gap:6px}
.bars{margin:24px 0 18px}
.bar-row + .bar-row{margin-top:14px}
.bar-lab{display:flex;justify-content:space-between;gap:10px;margin-bottom:6px}
.bar{overflow:hidden}
.bar i{display:block;height:100%;transition:width .4s}

/* range slider – themes set the custom properties */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:var(--trk-h,6px);border-radius:var(--trk-r,99px);border:var(--trk-b,0);background:var(--fill-img) 0 0/var(--p) 100% no-repeat,var(--track)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--th,20px);height:var(--th,20px);border-radius:var(--th-r,50%);background:var(--thumb);border:var(--th-b,0);box-shadow:var(--th-sh,none);margin-top:calc((var(--trk-h,6px) - var(--th,20px)) / 2 - var(--trk-bw,0px))}
input[type=range]::-moz-range-track{height:var(--trk-h,6px);border-radius:var(--trk-r,99px);border:var(--trk-b,0);background:var(--track)}
input[type=range]::-moz-range-progress{height:var(--trk-h,6px);border-radius:var(--trk-r,99px);background:var(--fill-img)}
input[type=range]::-moz-range-thumb{width:var(--th,20px);height:var(--th,20px);border-radius:var(--th-r,50%);background:var(--thumb);border:var(--th-b,0);box-shadow:var(--th-sh,none)}

/* ---------- responsive (html[data-theme] beats theme selectors) ---------- */
@media (max-width:1100px){
  html[data-theme] .cards{grid-template-columns:1fr 1fr}
  html[data-theme] .tiers{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  html[data-theme] .nav-links{display:none}
  html[data-theme] .sw-long{display:none}
  html[data-theme] .hero-in{grid-template-columns:1fr}
  html[data-theme] .facts{grid-template-columns:1fr 1fr}
  html[data-theme] .fact:nth-child(3){border-left:0}
  html[data-theme] .fact:nth-child(n+3){border-top:var(--fact-sep,0)}
  html[data-theme] .calc,html[data-theme] .inv,html[data-theme] .about{grid-template-columns:1fr}
  html[data-theme] .calc-out{border-left:0;border-top:var(--calc-sep,0)}
  html[data-theme] .steps{grid-template-columns:1fr 1fr}
  html[data-theme] .extras{grid-template-columns:1fr}
}
@media (max-width:600px){
  html[data-theme] .wrap{padding-left:16px;padding-right:16px}
  html[data-theme] .sw-claim strong{display:none}
  html[data-theme] .sw-short{display:inline}
  html[data-theme] .sw-in{gap:10px}
  /* phones: the top bar shows the swatches only (names stay readable for screen readers) */
  html[data-theme] .switcher .sw-tabs{gap:6px;padding:0;border:0;background:none;box-shadow:none}
  html[data-theme] .switcher .sw-tabs button{padding:0;margin:0;border:0;border-radius:6px;background:none;box-shadow:none;transform:none}
  html[data-theme] .switcher .sw-tabs button .sw-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html[data-theme] .switcher .sw-chip{width:20px;height:20px}
  html[data-theme] .switcher .sw-tabs button[aria-checked=true] .sw-chip{outline:2px solid currentColor;outline-offset:2px}
  html[data-theme] .nav-cta{display:none}
  html[data-theme] .cards,html[data-theme] .steps,html[data-theme] .tiers{grid-template-columns:1fr}
  html[data-theme] .res-grid{grid-template-columns:1fr}
  html[data-theme] .catch{grid-template-columns:1fr;gap:6px}
  html[data-theme] .chart-row{grid-template-columns:90px 1fr 46px;gap:10px}
  html[data-theme] .compare th,html[data-theme] .compare td{padding:12px 10px!important;font-size:14px}
}
@media (max-width:370px){
  html[data-theme] .sw-short{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}