/* The Supplement Brief - Fresh Mint theme
   Minimal-modern / app-like review layout. sb- BEM-lite components.
   Order: fonts > tokens > reset > base > layout > chrome > components > sections > utilities > responsive */

/* ---- Web font + metric-matched fallbacks (anti-CLS) ---- */
@font-face{font-family:"Hanken fallback";src:local("Arial");size-adjust:96%}
@font-face{font-family:"Figtree fallback";src:local("Arial");size-adjust:97%}

/* ---- Design tokens ---- */
:root{
  --sb-font-head:"Hanken Grotesk","Hanken fallback",system-ui,sans-serif;
  --sb-font-body:"Figtree","Figtree fallback",system-ui,sans-serif;

  --sb-ink:#14181d;
  --sb-ink-soft:#2b3138;
  --sb-muted:#4f574f;
  --sb-brand:#0c9d63;
  --sb-brand-deep:#066c44;
  --sb-brand-darker:#055638;
  --sb-mint:#eef9f2;
  --sb-mint-2:#e2f3ea;
  --sb-mint-line:#cfe7d8;
  --sb-surface:#ffffff;
  --sb-panel:#f6faf7;
  --sb-border:#d9e6dd;
  --sb-border-soft:#e7efe9;
  --sb-gold:#f0a818;
  --sb-gold-off:#d8e3db;
  --sb-bad:#b23b32;
  --sb-warn:#b5740a;
  --sb-ink-on-brand:#ffffff;

  --sb-star-on:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 18.6 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z' fill='%23f0a818'/></svg>");
  --sb-star-off:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 18.6 5.9 21.4l1.4-6.8L2.2 9.9l6.9-.8z' fill='%23d8e3db'/></svg>");

  --sb-wrap:1080px;
  --sb-gap:clamp(1rem,3.2vw,1.6rem);
  --sb-radius:16px;
  --sb-radius-sm:10px;
  --sb-shadow:0 1px 2px rgba(20,24,29,.05),0 8px 26px rgba(20,24,29,.06);
  --sb-shadow-soft:0 1px 2px rgba(20,24,29,.04),0 4px 14px rgba(20,24,29,.05);
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,figure,blockquote,dl,dd,ul,ol,fieldset,legend{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img{max-width:100%;display:block;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--sb-brand-deep)}
table{border-collapse:collapse;width:100%}

/* ---- Base ---- */
html{scroll-behavior:smooth}
body{
  font-family:var(--sb-font-body);
  color:var(--sb-ink);
  background:var(--sb-surface);
  line-height:1.62;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--sb-font-head);line-height:1.12;color:var(--sb-ink);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.4vw,2.05rem);margin:0 0 .5rem}
h3{font-size:1.18rem;font-weight:700;margin:0 0 .35rem}
p{margin:0 0 1rem}
strong{font-weight:700;color:var(--sb-ink)}
:focus-visible{outline:3px solid var(--sb-brand);outline-offset:2px;border-radius:4px}

/* ---- Skip link ---- */
.sb-skip{position:absolute;left:-9999px;top:0;background:var(--sb-ink);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 10px 0;z-index:200;font-weight:600}
.sb-skip:focus{left:0}

/* ---- Layout ---- */
.sb-wrap{width:100%;max-width:var(--sb-wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,1.6rem)}
.sb-section{padding-block:clamp(2.1rem,5vw,3.2rem)}
.sb-section--tint{background:var(--sb-mint);border-block:1px solid var(--sb-mint-line)}
.sb-section--panel{background:var(--sb-panel)}
.sb-kicker{font-family:var(--sb-font-head);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--sb-brand-deep);margin:0 0 .55rem}
.sb-lede{font-size:1.08rem;color:var(--sb-ink-soft);max-width:60ch}
.sb-prose p{max-width:68ch}
.sb-prose h2{margin-top:.2rem}
.sb-anchor{scroll-margin-top:84px}

/* ---- Header ---- */
.sb-top{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--sb-border)}
.sb-top__row{display:flex;align-items:center;gap:1rem;min-height:62px}
.sb-brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--sb-ink);font-family:var(--sb-font-head);font-weight:800;letter-spacing:-.02em;font-size:1.07rem;margin-right:auto}
.sb-brand__mark{width:30px;height:30px;flex:0 0 auto;border-radius:8px}
.sb-brand__tag{display:block;font-family:var(--sb-font-body);font-weight:500;font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;color:var(--sb-muted);line-height:1}
.sb-nav{display:flex;align-items:center;gap:.3rem}
.sb-nav a{text-decoration:none;color:var(--sb-ink-soft);font-weight:600;font-size:.95rem;padding:.5rem .6rem;border-radius:8px}
.sb-nav a:hover{background:var(--sb-mint);color:var(--sb-brand-deep)}
.sb-nav a[aria-current="page"]{color:var(--sb-brand-deep)}
.sb-top .sb-btn{margin-left:.4rem}
.sb-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--sb-border);background:#fff;border-radius:10px;cursor:pointer}
.sb-burger span,.sb-burger span::before,.sb-burger span::after{content:"";display:block;width:19px;height:2px;background:var(--sb-ink);border-radius:2px;position:relative}
.sb-burger span::before{position:absolute;top:-6px}
.sb-burger span::after{position:absolute;top:6px}

/* ---- Disclosure banner ---- */
.sb-disc{background:var(--sb-mint-2);border-bottom:1px solid var(--sb-mint-line);font-size:.86rem;color:var(--sb-ink-soft)}
.sb-disc__row{display:flex;gap:.55rem;align-items:flex-start;padding-block:.6rem}
.sb-disc__tag{flex:0 0 auto;font-family:var(--sb-font-head);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sb-brand-deep);background:#fff;border:1px solid var(--sb-mint-line);padding:.18rem .5rem;border-radius:999px;margin-top:.05rem}
.sb-disc a{font-weight:600}

/* ---- Breadcrumb ---- */
.sb-crumb{font-size:.84rem;color:var(--sb-muted);padding-block:.7rem}
.sb-crumb ol{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.sb-crumb li{display:flex;gap:.35rem;align-items:center}
.sb-crumb li+li::before{content:"/";color:var(--sb-border)}
.sb-crumb a{text-decoration:none}
.sb-crumb a:hover{text-decoration:underline}
.sb-crumb [aria-current="page"]{color:var(--sb-muted)}

/* ---- Buttons ---- */
.sb-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--sb-font-head);font-weight:700;font-size:.97rem;line-height:1;text-decoration:none;text-align:center;cursor:pointer;border:1px solid transparent;border-radius:12px;padding:.85rem 1.25rem;min-height:46px;transition:transform .12s ease,background .15s ease,box-shadow .15s ease}
.sb-btn--primary{background:var(--sb-brand-deep);color:var(--sb-ink-on-brand);box-shadow:0 6px 16px rgba(6,108,68,.22)}
.sb-btn--primary:hover{background:var(--sb-brand-darker);transform:translateY(-1px)}
.sb-btn--ghost{background:#fff;color:var(--sb-brand-deep);border-color:var(--sb-mint-line)}
.sb-btn--ghost:hover{background:var(--sb-mint);transform:translateY(-1px)}
.sb-btn--light{background:#fff;color:var(--sb-brand-deep);border-color:#fff}
.sb-btn--light:hover{background:#f1fbf5;transform:translateY(-1px)}
.sb-btn--block{display:flex;width:100%}
.sb-btn--lg{font-size:1.06rem;padding:1rem 1.5rem;min-height:54px}
.sb-cta-note{font-size:.8rem;color:var(--sb-muted);margin:.5rem 0 0;max-width:46ch}
.sb-cta-note a{font-weight:600}

/* ---- Hero ---- */
.sb-hero{padding-top:clamp(1.6rem,4vw,2.6rem);padding-bottom:clamp(1.4rem,3.5vw,2.2rem)}
.sb-hero__grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(1.2rem,4vw,2.4rem);align-items:center}
.sb-hero h1{font-size:clamp(1.95rem,5.2vw,3rem);margin:0 0 .7rem}
.sb-hero h1 em{font-style:normal;color:var(--sb-brand-deep)}
.sb-hero__sub{font-size:1.1rem;color:var(--sb-ink-soft);max-width:54ch;margin:0 0 1rem}
.sb-pillrow{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem}
.sb-pill{font-size:.76rem;font-weight:600;color:var(--sb-brand-deep);background:var(--sb-mint);border:1px solid var(--sb-mint-line);border-radius:999px;padding:.3rem .65rem}
.sb-hero__media{position:relative;aspect-ratio:1/1;border-radius:var(--sb-radius);background:radial-gradient(120% 100% at 50% 18%,#ffffff 0%,var(--sb-mint) 62%,var(--sb-mint-2) 100%);border:1px solid var(--sb-mint-line);display:grid;place-items:center;overflow:hidden}
.sb-hero__img{width:100%;height:100%;object-fit:contain;padding:9%;position:relative;z-index:2}
/* CSS fallback bottle (shown until/unless the product image loads) */
.sb-fallback{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.sb-fallback__bottle{width:46%;aspect-ratio:62/100;background:linear-gradient(#ffffff,#f3f7f4);border:1px solid var(--sb-mint-line);border-radius:16px 16px 18px 18px;box-shadow:var(--sb-shadow-soft);position:relative;display:flex;align-items:center;justify-content:center}
.sb-fallback__bottle::before{content:"";position:absolute;top:-13%;width:34%;height:15%;background:#dfeee6;border:1px solid var(--sb-mint-line);border-radius:6px}
.sb-fallback__label{font-family:var(--sb-font-head);font-weight:800;color:var(--sb-brand-deep);font-size:.92rem;letter-spacing:.02em;text-align:center;line-height:1.05}
.sb-fallback__label span{display:block;font-family:var(--sb-font-body);font-weight:600;font-size:.56rem;letter-spacing:.18em;color:var(--sb-muted);margin-top:.3rem}
.is-imaged .sb-fallback{display:none}

/* ---- Byline ---- */
.sb-byline{display:flex;flex-wrap:wrap;gap:.45rem .9rem;align-items:center;font-size:.86rem;color:var(--sb-muted);margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--sb-border-soft)}
.sb-byline strong{color:var(--sb-ink)}
.sb-byline a{font-weight:600}
.sb-byline__dot{color:var(--sb-border)}

/* ---- Stars (display) ---- */
.sb-stars{display:inline-block;width:6em;height:1.12em;vertical-align:-.16em;background-image:var(--sb-star-off);background-size:1.2em 1.2em;background-repeat:repeat-x;position:relative}
.sb-stars::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--pct,100%);background-image:var(--sb-star-on);background-size:1.2em 1.2em;background-repeat:repeat-x}
.sb-stars--sm{width:5em;height:.95em;background-size:1em 1em}
.sb-stars--sm::before{background-size:1em 1em}

/* ---- Verdict box ---- */
.sb-verdict{background:#fff;border:1px solid var(--sb-border);border-radius:var(--sb-radius);box-shadow:var(--sb-shadow);overflow:hidden}
.sb-verdict__head{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;padding:clamp(1.1rem,3vw,1.6rem);background:linear-gradient(180deg,#ffffff, var(--sb-mint))}
.sb-score{text-align:center;background:#fff;border:1px solid var(--sb-mint-line);border-radius:14px;padding:.7rem 1.05rem;min-width:118px;box-shadow:var(--sb-shadow-soft)}
.sb-score__num{font-family:var(--sb-font-head);font-weight:800;font-size:2.7rem;line-height:1;color:var(--sb-brand-deep)}
.sb-score__num span{font-size:1rem;color:var(--sb-muted);font-weight:700}
.sb-score__label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sb-muted);margin-top:.35rem;font-weight:600}
.sb-score .sb-stars{margin-top:.4rem}
.sb-verdict__lead h2{font-size:clamp(1.3rem,3vw,1.7rem)}
.sb-verdict__lead p{margin:.2rem 0 0;color:var(--sb-ink-soft)}
.sb-essentials{border-top:1px solid var(--sb-border-soft)}
.sb-essentials dl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sb-border-soft)}
.sb-essentials div{background:#fff;padding:.85rem 1rem;display:flex;flex-direction:column-reverse;gap:.15rem}
.sb-essentials dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sb-muted);font-weight:600}
.sb-essentials dd{font-family:var(--sb-font-head);font-weight:700;font-size:1rem;color:var(--sb-ink)}
.sb-verdict__foot{padding:clamp(1rem,3vw,1.4rem);border-top:1px solid var(--sb-border-soft);display:flex;flex-wrap:wrap;gap:.7rem 1.1rem;align-items:center}
.sb-verdict__foot .sb-btn{flex:0 0 auto}

/* ---- Quick read (TL;DR) ---- */
.sb-quick{background:var(--sb-mint);border:1px solid var(--sb-mint-line);border-left:5px solid var(--sb-brand);border-radius:var(--sb-radius-sm);padding:1.1rem 1.25rem}
.sb-quick h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sb-brand-deep)}
.sb-quick p{margin:.3rem 0 0;color:var(--sb-ink-soft);max-width:72ch}

/* ---- Price curiosity band (CRO) ---- */
.sb-band{background:linear-gradient(120deg,var(--sb-brand-deep),#0a8a57);color:#fff;border-radius:var(--sb-radius);padding:clamp(1.2rem,3.5vw,1.8rem);display:grid;grid-template-columns:1fr auto;gap:1rem 1.6rem;align-items:center}
.sb-band h2{color:#fff;font-size:clamp(1.25rem,3vw,1.55rem)}
.sb-band p{color:rgba(255,255,255,.92);margin:.3rem 0 0;max-width:62ch}
.sb-band__cta{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.sb-band .sb-cta-note{color:rgba(255,255,255,.82)}
.sb-band .sb-cta-note a{color:#fff}

/* ---- Pros / cons ---- */
.sb-pc{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sb-pc__card{border:1px solid var(--sb-border);border-radius:var(--sb-radius);padding:1.2rem 1.3rem;background:#fff}
.sb-pc__card--pro{border-top:4px solid var(--sb-brand)}
.sb-pc__card--con{border-top:4px solid var(--sb-warn)}
.sb-pc h3{display:flex;align-items:center;gap:.5rem}
.sb-pc ul{display:grid;gap:.6rem;margin-top:.7rem}
.sb-pc li{position:relative;padding-left:1.7rem;color:var(--sb-ink-soft)}
.sb-pc li::before{position:absolute;left:0;top:.05rem;font-weight:800;font-family:var(--sb-font-head)}
.sb-pc__card--pro li::before{content:"+";color:var(--sb-brand-deep)}
.sb-pc__card--con li::before{content:"-";color:var(--sb-warn)}

/* ---- Criteria bars ---- */
.sb-criteria{display:grid;gap:.85rem}
.sb-crit{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;align-items:center}
.sb-crit__name{font-weight:600}
.sb-crit__val{font-family:var(--sb-font-head);font-weight:700;color:var(--sb-brand-deep)}
.sb-crit__track{grid-column:1/-1;height:9px;background:var(--sb-mint-2);border-radius:999px;overflow:hidden}
.sb-crit__fill{height:100%;background:linear-gradient(90deg,var(--sb-brand),#0a8a57);border-radius:999px}

/* ---- Tables ---- */
.sb-tablewrap{overflow-x:auto;border:1px solid var(--sb-border);border-radius:var(--sb-radius);background:#fff}
table.sb-table{font-size:.95rem}
.sb-table caption{text-align:left;font-size:.82rem;color:var(--sb-muted);padding:.7rem 1rem 0}
.sb-table th,.sb-table td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid var(--sb-border-soft);vertical-align:top}
.sb-table thead th{background:var(--sb-mint);font-family:var(--sb-font-head);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sb-ink-soft);border-bottom:1px solid var(--sb-mint-line)}
.sb-table tbody tr:last-child td{border-bottom:0}
.sb-table td:first-child,.sb-table th[scope="row"]{font-weight:600;color:var(--sb-ink)}
.sb-table--compare td:first-child{white-space:nowrap}
.sb-yes{color:var(--sb-brand-deep);font-weight:700}
.sb-no{color:var(--sb-bad);font-weight:700}

/* ---- Testing timeline ---- */
.sb-time{display:grid;gap:0;border-left:2px solid var(--sb-mint-line);margin-left:.4rem}
.sb-time__step{position:relative;padding:0 0 1.3rem 1.5rem}
.sb-time__step:last-child{padding-bottom:0}
.sb-time__step::before{content:"";position:absolute;left:-7px;top:.2rem;width:12px;height:12px;border-radius:50%;background:var(--sb-brand);border:2px solid #fff;box-shadow:0 0 0 1px var(--sb-mint-line)}
.sb-time__when{font-family:var(--sb-font-head);font-weight:700;color:var(--sb-brand-deep);font-size:.95rem}
.sb-time__step p{margin:.2rem 0 0;color:var(--sb-ink-soft)}

/* ---- Pricing ---- */
.sb-price{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sb-plan{border:1px solid var(--sb-border);border-radius:var(--sb-radius);background:#fff;padding:1.2rem;display:flex;flex-direction:column;gap:.3rem;position:relative}
.sb-plan--best{border:2px solid var(--sb-brand);box-shadow:var(--sb-shadow)}
.sb-plan__flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--sb-brand-deep);color:#fff;font-family:var(--sb-font-head);font-weight:700;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:.22rem .7rem;border-radius:999px;white-space:nowrap}
.sb-plan__name{font-family:var(--sb-font-head);font-weight:700;font-size:1.02rem}
.sb-plan__per{font-family:var(--sb-font-head);font-weight:800;font-size:2rem;color:var(--sb-ink);line-height:1}
.sb-plan__per span{font-size:.85rem;color:var(--sb-muted);font-weight:600}
.sb-plan__meta{font-size:.9rem;color:var(--sb-muted)}
.sb-plan__total{font-weight:700}
.sb-plan .sb-btn{margin-top:.6rem}

/* ---- Stats: snapshot ---- */
.sb-bignum{display:grid;grid-template-columns:auto 1fr;gap:1.3rem;align-items:center;background:#fff;border:1px solid var(--sb-border);border-radius:var(--sb-radius);padding:1.2rem 1.3rem;box-shadow:var(--sb-shadow-soft)}
.sb-bignum__score{text-align:center}
.sb-bignum__score b{font-family:var(--sb-font-head);font-weight:800;font-size:3rem;color:var(--sb-brand-deep);line-height:1;display:block}
.sb-bignum__score small{color:var(--sb-muted);font-size:.85rem}
.sb-bignum__say{color:var(--sb-ink-soft);font-size:.96rem}
.sb-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--sb-border-soft);border:1px solid var(--sb-border-soft);border-radius:var(--sb-radius);overflow:hidden;margin-top:1rem}
.sb-statgrid div{background:#fff;padding:1rem;display:flex;flex-direction:column-reverse;gap:.2rem}
.sb-statgrid dt{font-size:.76rem;color:var(--sb-muted);font-weight:600;line-height:1.3}
.sb-statgrid dd{font-family:var(--sb-font-head);font-weight:800;font-size:1.55rem;color:var(--sb-ink)}

/* ---- Stats: distribution / themes ---- */
.sb-dist{display:grid;gap:.55rem}
.sb-dist__row{display:grid;grid-template-columns:3.6rem 1fr 3rem;gap:.7rem;align-items:center;font-size:.92rem}
.sb-dist__bar{height:12px;background:var(--sb-mint-2);border-radius:999px;overflow:hidden}
.sb-dist__fill{height:100%;background:linear-gradient(90deg,var(--sb-gold),#e6951a);border-radius:999px}
.sb-dist__pct{text-align:right;font-weight:700;color:var(--sb-ink-soft)}
.sb-theme .sb-dist__row{grid-template-columns:1fr 8rem 2.8rem}
.sb-theme__name{font-weight:600}
.sb-theme .sb-dist__fill{background:linear-gradient(90deg,var(--sb-brand),#0a8a57)}
.sb-theme--neg .sb-dist__fill{background:linear-gradient(90deg,#cf8a3a,var(--sb-warn))}

/* ---- Stats: quarterly ---- */
.sb-quarter{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem;align-items:end;margin-top:.4rem}
.sb-qbar{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.sb-qbar__col{width:100%;max-width:54px;background:linear-gradient(180deg,#0a8a57,var(--sb-brand-deep));border-radius:8px 8px 0 0}
.sb-qbar__n{font-family:var(--sb-font-head);font-weight:700;font-size:.9rem;color:var(--sb-ink)}
.sb-qbar__q{font-size:.74rem;color:var(--sb-muted)}

/* ---- Testimonials ---- */
.sb-tgroup{margin-top:1.3rem}
.sb-tgroup__h{font-family:var(--sb-font-head);font-weight:700;font-size:1.02rem;color:var(--sb-ink);margin:0 0 .7rem;display:flex;align-items:center;gap:.5rem}
.sb-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem}
.sb-tcard{border:1px solid var(--sb-border);border-radius:var(--sb-radius);background:#fff;padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.6rem}
.sb-tcard--crit{background:#fffdfa;border-color:#ecd9c4}
.sb-tcard__top{display:flex;align-items:center;gap:.65rem}
.sb-ava{width:40px;height:40px;border-radius:50%;background:var(--sb-mint-2);color:var(--sb-brand-deep);display:grid;place-items:center;font-family:var(--sb-font-head);font-weight:800;font-size:.95rem;flex:0 0 auto}
.sb-tcard--crit .sb-ava{background:#f6e8d6;color:var(--sb-warn)}
.sb-tcard__who{font-weight:700;font-size:.92rem;line-height:1.2}
.sb-tcard__meta{font-size:.78rem;color:var(--sb-muted)}
.sb-tcard__q{color:var(--sb-ink-soft);font-size:.95rem;margin:0}
.sb-vbadge{font-size:.7rem;font-weight:700;color:var(--sb-brand-deep);background:var(--sb-mint);border:1px solid var(--sb-mint-line);border-radius:999px;padding:.15rem .5rem;white-space:nowrap}
.sb-tcard__foot{display:flex;align-items:center;gap:.5rem;margin-top:auto}

/* ---- Review form ---- */
.sb-form{background:#fff;border:1px solid var(--sb-border);border-radius:var(--sb-radius);box-shadow:var(--sb-shadow-soft);padding:clamp(1.2rem,3.4vw,1.8rem)}
.sb-form__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.sb-field{display:flex;flex-direction:column;gap:.35rem}
.sb-field--full{grid-column:1/-1}
.sb-field label{font-weight:600;font-size:.92rem}
.sb-field .sb-hint{font-weight:400;color:var(--sb-muted);font-size:.82rem}
.sb-input,.sb-textarea,.sb-select{width:100%;border:1px solid var(--sb-border);border-radius:10px;padding:.7rem .8rem;background:#fff;font-size:1rem}
.sb-input:focus,.sb-textarea:focus,.sb-select:focus{border-color:var(--sb-brand);outline:none;box-shadow:0 0 0 3px rgba(12,157,99,.18)}
.sb-textarea{min-height:120px;resize:vertical}
.sb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* interactive star rating */
.sb-rate{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.sb-rate input{position:absolute;opacity:0;width:1px;height:1px}
.sb-rate label{cursor:pointer;width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:var(--sb-star-off) center/26px 26px no-repeat}
.sb-rate label:hover,.sb-rate label:hover~label,.sb-rate input:checked~label{background-image:var(--sb-star-on)}
.sb-rate input:focus-visible+label{outline:3px solid var(--sb-brand);outline-offset:1px}
.sb-rate__txt{font-size:.85rem;color:var(--sb-muted);margin-left:.5rem;align-self:center}
.sb-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.9rem;color:var(--sb-ink-soft)}
.sb-consent input{margin-top:.25rem;width:20px;height:20px;flex:0 0 auto;accent-color:var(--sb-brand-deep)}
.sb-form__note{font-size:.82rem;color:var(--sb-muted);margin-top:.8rem}
.sb-form__note a{font-weight:600}
.sb-ok{display:none;background:var(--sb-mint);border:1px solid var(--sb-brand);border-radius:12px;padding:1rem 1.1rem;color:var(--sb-brand-deep);font-weight:600}
.sb-ok.is-on{display:block}
.sb-err{color:var(--sb-bad);font-size:.84rem;font-weight:600}

/* ---- FAQ ---- */
.sb-faq{display:grid;gap:.7rem}
.sb-faq details{border:1px solid var(--sb-border);border-radius:var(--sb-radius-sm);background:#fff;overflow:hidden}
.sb-faq summary{cursor:pointer;list-style:none;padding:1rem 1.1rem;font-family:var(--sb-font-head);font-weight:700;font-size:1.02rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.sb-faq summary::-webkit-details-marker{display:none}
.sb-faq summary::after{content:"+";color:var(--sb-brand-deep);font-weight:800;font-size:1.3rem;flex:0 0 auto}
.sb-faq details[open] summary::after{content:"\2212"}
.sb-faq__a{padding:0 1.1rem 1.1rem;color:var(--sb-ink-soft)}
.sb-faq__a p{margin:0}

/* ---- Takeaways ---- */
.sb-takeaways{background:#fff;border:1px solid var(--sb-border);border-radius:var(--sb-radius);padding:clamp(1.2rem,3vw,1.6rem)}
.sb-takeaways ul{display:grid;gap:.7rem;margin-top:.6rem}
.sb-takeaways li{position:relative;padding-left:1.9rem;color:var(--sb-ink-soft)}
.sb-takeaways li::before{content:"";position:absolute;left:0;top:.35rem;width:11px;height:11px;border-radius:3px;background:var(--sb-brand);transform:rotate(45deg)}

/* ---- Final CTA ---- */
.sb-final{background:var(--sb-ink);color:#fff;border-radius:var(--sb-radius);padding:clamp(1.5rem,4vw,2.4rem);text-align:center}
.sb-final h2{color:#fff}
.sb-final p{color:rgba(255,255,255,.85);max-width:60ch;margin-inline:auto}
.sb-final .sb-btn{margin-top:.5rem}
.sb-final .sb-cta-note{color:rgba(255,255,255,.7);margin-inline:auto}
.sb-final .sb-cta-note a{color:#fff}

/* ---- Footer ---- */
.sb-foot{background:#0f1318;color:#c3ccc6;font-size:.9rem;padding-block:2.4rem 1.5rem}
.sb-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1.6rem}
.sb-foot h3{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.7rem}
.sb-foot a{color:#cfe7d8;text-decoration:none}
.sb-foot a:hover{text-decoration:underline}
.sb-foot ul{display:grid;gap:.45rem}
.sb-foot__brand{display:flex;align-items:center;gap:.55rem;margin-bottom:.7rem}
.sb-foot__brand b{color:#fff;font-family:var(--sb-font-head);font-size:1.05rem}
.sb-foot__legal{border-top:1px solid #232b32;margin-top:1.6rem;padding-top:1.2rem;color:#8f9a93;font-size:.82rem;display:grid;gap:.7rem}
.sb-foot__legal p{margin:0;max-width:none}
.sb-foot__nav{display:flex;flex-wrap:wrap;gap:.4rem .9rem}

/* ---- Sticky mobile CTA ---- */
.sb-sticky{display:none}
@media (max-width:760px){
  .sb-sticky{position:fixed;left:0;right:0;bottom:0;z-index:120;background:#fff;border-top:1px solid var(--sb-border);box-shadow:0 -6px 20px rgba(20,24,29,.1);padding:.5rem .8rem;align-items:center;gap:.6rem;transform:translateY(110%);transition:transform .25s ease}
  .sb-sticky.is-on{display:flex;transform:translateY(0)}
  .sb-sticky__txt{font-size:.8rem;line-height:1.25;color:var(--sb-ink-soft);flex:1}
  .sb-sticky__txt b{color:var(--sb-ink);display:block;font-family:var(--sb-font-head)}
  .sb-sticky .sb-btn{padding:.6rem .9rem;min-height:44px}
  .sb-sticky__x{flex:0 0 auto;width:30px;height:30px;border:1px solid var(--sb-border);background:#fff;border-radius:8px;font-size:1rem;line-height:1;color:var(--sb-muted);cursor:pointer}
  body.sb-sticky-on{padding-bottom:68px}
}

/* ---- 404 ---- */
.sb-404{text-align:center;padding-block:clamp(3rem,9vw,6rem)}
.sb-404 h1{font-size:clamp(2.4rem,7vw,4rem);margin-bottom:.4rem}
.sb-404 p{color:var(--sb-muted);max-width:46ch;margin-inline:auto}

/* ---- Utilities ---- */
.sb-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sb-mt0{margin-top:0}
.sb-center{text-align:center}
.sb-stack>*+*{margin-top:1.1rem}
.sb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,1.6rem)}

/* ---- Responsive ---- */
@media (max-width:960px){
  .sb-foot__grid{grid-template-columns:1fr 1fr}
  .sb-statgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .sb-nav,.sb-top>.sb-wrap>.sb-top__row>.sb-btn{display:none}
  .sb-burger{display:inline-flex}
  .sb-top.is-open .sb-nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--sb-border);padding:.6rem;gap:.2rem;box-shadow:var(--sb-shadow)}
  .sb-top.is-open .sb-nav a{padding:.75rem .7rem}
  .sb-hero__grid{grid-template-columns:1fr}
  .sb-hero__media{max-width:330px;margin-inline:auto;order:-1}
  .sb-verdict__head{grid-template-columns:1fr}
  .sb-essentials dl{grid-template-columns:repeat(2,1fr)}
  .sb-pc,.sb-price,.sb-grid2{grid-template-columns:1fr}
  .sb-band{grid-template-columns:1fr}
  .sb-quarter{grid-template-columns:repeat(5,1fr);gap:.4rem}
}
@media (max-width:520px){
  body{font-size:16px}
  .sb-form__grid{grid-template-columns:1fr}
  .sb-essentials dl{grid-template-columns:1fr 1fr}
  .sb-statgrid{grid-template-columns:1fr 1fr}
  .sb-foot__grid{grid-template-columns:1fr}
  .sb-score{min-width:0;width:100%}
  .sb-verdict__head{justify-items:start}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}