/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Libre Franklin Fallback";src:local("Arial");font-weight:400;size-adjust:105.06%;ascent-override:91.95%;descent-override:23.42%;line-gap-override:0.00%}
@font-face{font-family:"Libre Franklin Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:100.08%;ascent-override:96.52%;descent-override:24.58%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback";src:local("Arial");font-weight:400;size-adjust:108.31%;ascent-override:95.66%;descent-override:30.93%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:103.13%;ascent-override:100.46%;descent-override:32.48%;line-gap-override:0.00%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Arial");font-weight:400;size-adjust:134.24%;ascent-override:75.98%;descent-override:22.35%;line-gap-override:0.00%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:123.96%;ascent-override:82.29%;descent-override:24.20%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ============================================================
   DESIGN SYSTEM v10 — "assay"
   Each section is a measured result with its working shown. Green on deep
   navy, a ruled baseline taken from the panel itself, and two readings held
   apart by colour: green is what the label earns, amber is what the
   arithmetic takes back.
   ============================================================ */
:root{
  color-scheme: light;
  --paper:#FFFFFF; --card:#FFFFFF; --tint:#F2F7F4; --sunk:#E6EFE9;
  --ink:#13201B; --ink-2:#44584E; --ink-3:#566A60;
  --line:#DBE4DE; --line-2:#EEF4F0; --rule:#13201B;
  --slab:#0F1D2E; --slab-2:#172A40; --slab-3:#223A55; --slab-line:#2E4A69;
  --on-slab:#E6EEF6; --on-slab-2:#9FB4C8;
  --a:#15803D; --a-hi:#1A9A4A; --a-deep:#0B5A2A; --a-ink:#13702F;
  --a-dk:#5FD98A; --a-tint:#E7F5EC; --a-line:#A8DEBD; --a-on:#FFFFFF;
  --data:#15803D; --data-soft:#E7F5EC;
  --ok:#15803D; --ok-soft:#E7F5EC;
  --warn:#9A4C0B; --warn-soft:#FCF0E3;
  --bad:#B42318; --bad-dk:#FDA29B; --bad-soft:#FEE4E2;

  --fd:'Libre Franklin','Libre Franklin Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
  --fb:'Source Serif 4','Source Serif 4 Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono','JetBrains Mono Fallback','SFMono-Regular',Menlo,Consolas,monospace;

  --t--1:clamp(11.5px,.3vw + 10.8px,12.5px);
  --t-0:clamp(16px,.25vw + 15.2px,17.5px);
  --t-1:clamp(17.5px,.5vw + 16px,20px);
  --t-2:clamp(20px,1.1vw + 17px,25px);
  --t-3:clamp(24px,2vw + 18px,34px);
  --t-4:clamp(30px,3.4vw + 19px,48px);
  --t-5:clamp(36px,4.8vw + 17px,68px);

  --r-xs:4px; --r-s:10px; --r:14px; --r-l:18px; --r-xl:26px; --pill:999px;
  --e:cubic-bezier(.22,.68,.24,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --sh-1:0 1px 0 var(--line);
  --sh-2:0 1px 2px rgba(22,33,31,.05), 0 10px 20px rgba(22,33,31,.055);
  --sh-3:0 2px 6px rgba(22,33,31,.07), 0 22px 44px rgba(22,33,31,.10);
  --sh-a:0 3px 12px rgba(12,110,120,.3);
  --gut:clamp(16px,4vw,48px);
  --wrap:1240px; --col-text:700px; --col-wide:960px;
  --rail:0px; --rail-gap:0px;
  /* v5 motion: quick and short */
  --t-ui:.2s; --t-hover:.14s; --stagger:35ms;
  --d:0ms; --p:0; --w:0%; --len:0; --off:0; --pct:0;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0B1410; --card:#121E18; --tint:#15221C; --sunk:#0E1A14;
    --ink:#E8F0EB; --ink-2:#B4C6BC; --ink-3:#9CB0A5;
    --line:#26362D; --line-2:#1A2821; --rule:#E8F0EB;
    --slab:#060E17; --slab-2:#0F1E2E; --slab-3:#1A3048; --slab-line:#2E4A69;
    --a:#3BBE68; --a-hi:#55D483; --a-deep:#15803D; --a-ink:#5FD98A;
    --a-dk:#8FEAB0; --a-tint:#072514; --a-line:#0B5A2A; --a-on:#04140B;
    --data:#5FD98A; --data-soft:#072514;
    --ok:#5FD98A; --ok-soft:#072514;
    --warn:#E8A454; --warn-soft:#2B1F10;
    --bad:#FDA29B; --bad-dk:#FDA29B; --bad-soft:#2C1513;
    --sh-1:0 1px 0 var(--line);
    --sh-2:0 1px 2px rgba(0,0,0,.5), 0 10px 20px rgba(0,0,0,.42);
    --sh-3:0 2px 6px rgba(0,0,0,.55), 0 22px 44px rgba(0,0,0,.48);
    --sh-a:0 3px 12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
    --paper:#0B1410; --card:#121E18; --tint:#15221C; --sunk:#0E1A14;
    --ink:#E8F0EB; --ink-2:#B4C6BC; --ink-3:#9CB0A5;
    --line:#26362D; --line-2:#1A2821; --rule:#E8F0EB;
    --slab:#060E17; --slab-2:#0F1E2E; --slab-3:#1A3048; --slab-line:#2E4A69;
    --a:#3BBE68; --a-hi:#55D483; --a-deep:#15803D; --a-ink:#5FD98A;
    --a-dk:#8FEAB0; --a-tint:#072514; --a-line:#0B5A2A; --a-on:#04140B;
    --data:#5FD98A; --data-soft:#072514;
    --ok:#5FD98A; --ok-soft:#072514;
    --warn:#E8A454; --warn-soft:#2B1F10;
    --bad:#FDA29B; --bad-dk:#FDA29B; --bad-soft:#2C1513;
  --sh-1:0 1px 0 var(--line);
  --sh-2:0 1px 2px rgba(0,0,0,.5), 0 10px 20px rgba(0,0,0,.42);
  --sh-3:0 2px 6px rgba(0,0,0,.55), 0 22px 44px rgba(0,0,0,.48);
  --sh-a:0 3px 12px rgba(0,0,0,.5);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:104px;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--t-0)/1.66 var(--fb);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
.row{appearance:none;-webkit-appearance:none;background:transparent;border:0;
  text-align:left;color:inherit;font:inherit;width:100%}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.16;
  letter-spacing:-.03em;margin:0;text-wrap:balance}
h1{font-size:var(--t-5);letter-spacing:-.042em;line-height:1.1}
h2{font-size:var(--t-4);letter-spacing:-.036em}
h3{font-size:var(--t-2);letter-spacing:-.022em}
p{margin:0}
.site-foot{font-size:16px;line-height:1.7}
.site-foot p{font-size:16px}
a{color:var(--a-ink);text-decoration-thickness:1px;text-underline-offset:3px}
.slab a:not(.btn),.site-foot a:not(.btn),.hero a:not(.btn),.ctap a:not(.btn),
.buybar a:not(.btn),.strip a:not(.btn),.score-wrap a:not(.btn){color:var(--a-dk)}
a.btn.btn--primary,.nav a.btn--primary,.hero a.btn--primary,.pack a.btn--primary,
.slab a.btn--primary,.buybar a.btn--primary,.ctap a.btn--primary{color:var(--a-on)}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.wrap{width:min(100% - (var(--gut) * 2),var(--wrap));margin-inline:auto}
.narrow{width:min(100%,var(--col-text));margin-inline:auto}
.wide{width:min(100%,var(--col-wide));margin-inline:auto}
.hide-sm{}

/* ---------- sections: ivory leaves with a margin rail ---------- */
.sec{position:relative;padding-block:clamp(46px,5.6vw,88px)}
.sec--tight{padding-block:clamp(24px,3.2vw,40px)}
.sec--card{background:var(--card)}
.sec--tint{background:var(--tint)}
.slab{background:var(--slab);color:var(--on-slab)}
.slab h2,.slab h3{color:#fff}
.sec + .sec{border-top:1px solid var(--line)}
.slab + .sec,.sec + .slab{border-top:0}
body{counter-reset:chap}
.sec[id]:not(.sec--tight){counter-increment:chap}
.sec--tight[id] > .wrap::before{content:none!important}
/* the card deck: each section is a surfaced panel with a numbered header rail */
.sec > .wrap{position:relative}
.sec[id] > .wrap::before{
  content:counter(chap,decimal-leading-zero);
  display:inline-block;font:600 11px/1 var(--fm);letter-spacing:.16em;
  color:var(--a-ink);background:var(--a-tint);border:1px solid var(--a-line);
  border-radius:var(--pill);padding:7px 13px;margin-bottom:18px}
.slab[id] > .wrap::before{color:var(--a-dk);background:rgba(85,214,226,.12);
  border-color:rgba(85,214,226,.3)}
.sec--card,.sec--tint{position:relative}
@media (min-width:860px){
  .sec--card > .wrap,.sec--tint > .wrap{background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-l);padding:clamp(26px,3vw,46px);box-shadow:var(--sh-2)}
  .sec--tint > .wrap{background:var(--tint)}
  .sec--card,.sec--tint{background:transparent;padding-block:clamp(22px,2.6vw,40px)}
  .sec--card + .sec--card,.sec--tint + .sec--card,.sec--card + .sec--tint,
  .sec--tint + .sec--tint{border-top:0}
}

/* ---------- v5 motion: quick, 10px, staggered ---------- */
.js [data-rise] > *{opacity:1}
.js [data-rise][data-in] > *{animation:v7rise .36s var(--e-out) both}
.js [data-rise][data-in] > *:nth-child(1){animation-delay:0ms}
.js [data-rise][data-in] > *:nth-child(2){animation-delay:35ms}
.js [data-rise][data-in] > *:nth-child(3){animation-delay:70ms}
.js [data-rise][data-in] > *:nth-child(4){animation-delay:105ms}
.js [data-rise][data-in] > *:nth-child(5){animation-delay:140ms}
.js [data-rise][data-in] > *:nth-child(n+6){animation-delay:170ms}
@keyframes v7rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- eyebrow: a small-caps rule, not a chip ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;
  font:600 10.5px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--a-ink);padding:9px 15px 9px 12px;border-radius:var(--pill);
  background:var(--a-tint);box-shadow:inset 0 0 0 1px var(--a-line)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--a)}
.slab .eyebrow{color:var(--a-dk);background:rgba(240,177,92,.12);
  box-shadow:inset 0 0 0 1px rgba(240,177,92,.28)}
.slab .eyebrow::before{background:var(--a-dk)}

/* ---------- buttons: navy block, gold rule grows on hover ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font:600 14.5px/1.3 var(--fb);letter-spacing:.005em;
  padding:17px 30px;border:0;border-radius:var(--pill);cursor:pointer;text-decoration:none;
  transition:transform var(--t-hover) var(--e),box-shadow var(--t-hover) var(--e),
             background var(--t-hover) var(--e),color var(--t-hover) var(--e)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,var(--a-hi),var(--a));
  transform:translateY(101%);transition:transform var(--t-ui) var(--e)}
.btn--primary{background:var(--a);color:var(--a-on);box-shadow:var(--sh-a)}
.btn--primary::after{background:linear-gradient(180deg,var(--a-hi),var(--a-deep))}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(140,80,9,.3)}
.btn--primary:hover::after{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost::after{background:var(--ink)}
.btn--ghost:hover{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn--ghost:hover::after{transform:translateY(0)}
.slab .btn--ghost,.buybar .btn--ghost,.ctap .btn--ghost,.hero .btn--ghost{color:#fff;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.slab .btn--ghost::after,.buybar .btn--ghost::after,.ctap .btn--ghost::after,
.hero .btn--ghost::after{background:#fff}
.slab .btn--ghost:hover,.ctap .btn--ghost:hover,.hero .btn--ghost:hover{color:var(--slab);
  box-shadow:inset 0 0 0 1.5px #fff}
.btn--wide{width:100%}
.btn--cart svg{width:18px;height:18px;flex:0 0 auto}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ============================================================
   HERO — navy field, an at-a-glance grid, the bottle on an amber wash
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--slab);color:var(--on-slab);
  padding-block:clamp(32px,4.2vw,60px) clamp(40px,5vw,76px)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 620px at 78% 22%,rgba(85,214,226,.20),transparent 60%),
             radial-gradient(820px 560px at 4% 92%,rgba(28,58,110,.55),transparent 62%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--slab-line) 1px,transparent 1px);
  background-size:100% 46px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(24px,3.2vw,56px);align-items:center}
@media (min-width:901px){.hero-grid{align-items:start}.hero-art{padding-top:22px}}
@media (min-width:1100px){.hero-art{position:sticky;top:96px;align-self:start}}
.hero h1{color:#fff;margin-block:20px 20px}
.hero h1 em{font-style:normal;color:var(--a-dk)}
.hero-sub{font-size:14.5px;color:var(--on-slab-2);margin:16px 0 20px}

/* quick answer: a journal abstract, ruled top and bottom */
.answer{position:relative;background:transparent;border:0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  border-radius:0;padding:18px 0 20px;margin-bottom:24px}
.answer p{margin:0;font-size:var(--t-1);line-height:1.58;color:var(--ink-2)}
.answer p b{color:var(--ink)}
.answer-label{display:block;font:500 10.5px/1 var(--fm);letter-spacing:.22em;
  text-transform:uppercase;color:var(--a-ink);margin:0 0 12px}
.slab .answer,.hero .answer{border-top-color:var(--a-dk);border-bottom-color:var(--slab-line)}
.slab .answer p,.hero .answer p{color:var(--on-slab-2)}
.slab .answer p b,.hero .answer p b{color:#fff}
.slab .answer-label,.hero .answer-label{color:var(--a-dk)}

/* readout: three figures on a hairline row */
.readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px}
.readout div{padding:18px 18px 16px;border-left:1px solid var(--line)}
.readout div:first-child{border-left:0;padding-left:0}
.readout b{display:block;font:400 clamp(28px,3.4vw,42px)/1.12 var(--fm);color:var(--ink);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.readout b i{font-style:normal;font-size:.42em;color:var(--a-ink);margin-left:4px;letter-spacing:0}
.readout span{display:block;font:500 10px/1.45 var(--fm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:9px}
.slab .readout,.hero .readout{border-color:var(--slab-line)}
.slab .readout div,.hero .readout div{border-left-color:var(--slab-line)}
.slab .readout b,.hero .readout b{color:#fff}
.slab .readout b i,.hero .readout b i{color:var(--a-dk)}
.slab .readout span,.hero .readout span{color:var(--on-slab-2)}

/* ticks: ruled checklist */
.ticks{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:0}
.ticks li{position:relative;padding:12px 0 12px 28px;font-size:15.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line-2)}
.ticks li:last-child{border-bottom:0}
.ticks li::before{content:"";position:absolute;left:2px;top:18px;width:10px;height:5px;
  border-left:1.5px solid var(--a);border-bottom:1.5px solid var(--a);transform:rotate(-45deg)}
.slab .ticks li,.hero .ticks li{color:var(--on-slab-2);border-bottom-color:var(--slab-line)}
.slab .ticks li::before,.hero .ticks li::before{border-color:var(--a-dk)}

/* stage: the bottle on an amber wash */
.stage{position:relative;display:grid;place-items:center;padding:16px}
.stage-glow{position:absolute;width:min(84%,400px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(85,214,226,.3),transparent 70%);filter:blur(10px)}
.js .stage-glow{animation:v7glow 8s ease-in-out infinite}
@keyframes v7glow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.stage img{position:relative;z-index:1;max-height:min(54vh,460px);width:auto;
  filter:drop-shadow(0 26px 32px rgba(0,0,0,.5))}
.js .stage img{animation:v7float 10s ease-in-out infinite}
@keyframes v7float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.stage::after{content:"";position:absolute;bottom:12px;left:50%;transform:translateX(-50%);
  width:44%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent 74%);filter:blur(8px)}
.tag{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;
  background:rgba(19,42,84,.9);border:1px solid var(--slab-line);border-radius:var(--pill);
  padding:8px 18px 8px 8px;backdrop-filter:blur(6px)}
.tag i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--a);color:var(--a-on);font-style:normal;font:600 11px/1 var(--fm)}
.tag b{display:block;font:500 14.5px/1.1 var(--fm);color:#fff;letter-spacing:-.02em}
.tag small{display:block;font:500 9.5px/1.3 var(--fm);letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-slab-2);margin-top:3px}
.tag--1{top:2%;left:-5%}
.tag--2{bottom:6%;right:-4%}
@media (max-width:1140px){.tag--1{left:0}.tag--2{right:0}}

.seals{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line)}
.seal{display:flex;align-items:center;gap:9px;font:500 11.5px/1.3 var(--fm);
  letter-spacing:.05em;color:var(--ink-3)}
.seal i{width:5px;height:5px;background:var(--a);flex:0 0 auto;border-radius:50%}
.slab .seals,.hero .seals{border-top-color:var(--slab-line)}
.slab .seal,.hero .seal{color:var(--on-slab-2)}
.slab .seal i,.hero .seal i{background:var(--a-dk)}

/* ---------- findings strip: four figures on navy ---------- */
.strip{background:var(--slab-2);color:var(--on-slab);border-block:1px solid var(--slab-line)}
.strip .wrap{padding-left:0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.strip div{padding:22px 22px 20px;border-left:1px solid var(--slab-line)}
.strip div:first-child{border-left:0;padding-left:0}
.strip b{display:block;font:500 clamp(22px,2.3vw,30px)/1.15 var(--fm);color:var(--a-dk);
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.strip span{display:block;font:400 12.5px/1.5 var(--fb);color:var(--on-slab-2);margin-top:8px}
@media (max-width:860px){
  .strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip div{padding:18px 16px}
  .strip div:nth-child(odd){border-left:0;padding-left:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--slab-line)}
}
@media (max-width:460px){
  .strip .wrap{grid-template-columns:minmax(0,1fr)}
  .strip div{border-left:0;padding-left:0}
  .strip div + div{border-top:1px solid var(--slab-line)}
}

/* ---------- rail nav ---------- */
.railnav{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line)}
.railnav .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding-left:0}
.railnav .wrap::-webkit-scrollbar{display:none}
@media (min-width:901px){.railnav .wrap{flex-wrap:wrap;overflow:visible}}
.railnav a{position:relative;flex:0 0 auto;padding:14px 16px;text-decoration:none;
  color:var(--ink-3);font:500 12px/1 var(--fm);letter-spacing:.09em;
  white-space:nowrap;text-transform:uppercase;transition:color var(--t-hover)}
.railnav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--a);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-ui) var(--e)}
.railnav a:hover{color:var(--ink)}
.railnav a.on{color:var(--a-ink)}
.railnav a.on::after{transform:scaleX(1)}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;pointer-events:none;
  transform-origin:left;transform:scaleX(var(--p,0));background:var(--a)}
.shead{max-width:64ch;margin-bottom:clamp(24px,3vw,40px)}
.shead h2{margin-block:14px 14px}
.shead p{color:var(--ink-2);font-size:var(--t-1)}
.slab .shead p{color:var(--on-slab-2)}

/*!CRIT-END-1*/

/* ============================================================
   PROSE
   ============================================================ */
.sec .wrap>*,.sec .narrow>*,.sec .wide>*{margin-block:0 24px}
.sec .wrap>*:last-child,.sec .narrow>*:last-child,.sec .wide>*:last-child{margin-bottom:0}
.sec h2{margin-block:0 18px}
.sec h3{margin-block:34px 12px}
.sec .wrap>h3:first-child{margin-top:0}
.sec p{color:var(--ink-2)}
.sec>.wrap>p,.sec>.narrow>p,.sec>.wide>p{max-width:70ch}
.slab>.wrap>p,.slab>.narrow>p,.slab .shead p{color:var(--on-slab-2)}
.lede{font-size:var(--t-2)!important;line-height:1.4;color:var(--ink)!important;
  font-family:var(--fd);font-weight:600;letter-spacing:-.025em;max-width:30ch!important}
.slab .lede{color:#fff!important}
.sec>.wrap>ul:not([class]),.sec>.wrap>ol:not([class]),
.sec>.narrow>ul:not([class]),.sec>.narrow>ol:not([class]){padding-left:0;list-style:none;
  display:grid;gap:0;max-width:72ch;border-top:1px solid var(--line)}
.sec>.wrap>ul:not([class])>li,.sec>.narrow>ul:not([class])>li{position:relative;
  padding:13px 0 13px 26px;color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.sec>.wrap>ul:not([class])>li::before,.sec>.narrow>ul:not([class])>li::before{
  content:"";position:absolute;left:3px;top:21px;width:8px;height:2px;background:var(--a)}
.sec>.wrap>ol:not([class]),.sec>.narrow>ol:not([class]){counter-reset:o}
.sec>.wrap>ol:not([class])>li,.sec>.narrow>ol:not([class])>li{position:relative;
  padding:13px 0 13px 40px;counter-increment:o;color:var(--ink-2);
  border-bottom:1px solid var(--line-2)}
.sec>.wrap>ol:not([class])>li::before,.sec>.narrow>ol:not([class])>li::before{
  content:counter(o,decimal-leading-zero);position:absolute;left:0;top:14px;
  font:600 11.5px/1.6 var(--fm);letter-spacing:.1em;color:var(--a-ink)}
.slab>.wrap>ul:not([class])>li,.slab>.wrap>ol:not([class])>li,
.slab .narrow>ul:not([class])>li,.slab .refs>li{color:var(--on-slab-2);
  border-bottom-color:var(--slab-line)}
.slab>.wrap>ul:not([class]),.slab>.wrap>ol:not([class]){border-top-color:var(--slab-line)}
.slab>.wrap>ol:not([class])>li::before{color:var(--a-dk)}
.slab>.wrap>ul:not([class])>li::before{background:var(--a-dk)}
b,strong{font-weight:700;color:var(--ink)}
.slab b,.slab strong{color:#fff}
q{quotes:"\201C" "\201D"}

.pull{position:relative;padding:4px 0 4px 24px;border-left:3px solid var(--a);max-width:62ch}
.pull p{font-family:var(--fd);font-weight:600;font-size:var(--t-2);line-height:1.34;
  letter-spacing:-.025em;color:var(--ink)!important;margin:0 0 12px!important;max-width:none}
.pull cite{display:block;font:500 12px/1.5 var(--fm);font-style:normal;color:var(--ink-3)}
.slab .pull{border-left-color:var(--a-dk)}
.slab .pull p{color:#fff!important}
.slab .pull cite{color:var(--on-slab-2)}

/* ---------- callout / alert: ruled, flat ---------- */
.callout,.alert{position:relative;border:1px solid var(--line);border-left:3px solid var(--data);
  border-radius:var(--r-xs);padding:20px 22px;background:var(--card);max-width:none}
.alert{border-left-color:var(--bad)}
.callout h3,.alert h3{margin:0 0 8px!important;font-size:var(--t-1);letter-spacing:-.025em}
.alert h3{color:var(--bad)}
.callout p,.alert p{margin:0!important;max-width:68ch;color:var(--ink-2)}
.slab .callout,.slab .alert{background:rgba(255,255,255,.04);border-color:var(--slab-line)}
.slab .callout{border-left-color:var(--data)}
.slab .alert{border-left-color:var(--bad-dk)}
.slab .alert h3{color:var(--bad-dk)}
.slab .callout h3{color:#fff}
.slab .callout p,.slab .alert p{color:var(--on-slab-2)}

/* ---------- card grid: hairline cells ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;max-width:none}
.grid-1{grid-template-columns:1fr}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.card{position:relative;background:var(--card);padding:24px 22px;
  transition:background var(--t-ui) var(--e)}
.card:hover{background:var(--tint)}
.card .num{display:block;font:600 11px/1 var(--fm);letter-spacing:.2em;
  color:var(--a-ink);margin-bottom:14px}
.card h3{font-size:var(--t-1);margin:0 0 9px!important}
.card p{font-size:15px;margin:0!important;color:var(--ink-2);max-width:none}
.slab .grid{background:var(--slab-line);border-color:var(--slab-line)}
.slab .card{background:var(--slab-2)}
.slab .card:hover{background:var(--slab-3)}
.slab .card h3{color:#fff}
.slab .card p{color:var(--on-slab-2)}
.slab .card .num{color:var(--a-dk)}

/* ---------- steps: ruled rail ---------- */
.steps{list-style:none;padding:0;counter-reset:st;display:grid;gap:0;max-width:none;
  border-top:1px solid var(--line)}
.steps>li{position:relative;padding:22px 0 22px 64px;counter-increment:st;
  border-bottom:1px solid var(--line)}
.steps>li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:22px;
  font:600 13px/1 var(--fm);letter-spacing:.12em;color:var(--a-ink)}
.steps>li::after{content:"";position:absolute;left:38px;top:20px;width:1px;bottom:-1px;
  background:var(--line)}
.steps>li:last-child::after{bottom:22px}
.steps h3{margin:0 0 7px!important;font-size:var(--t-1)}
.steps p{margin:0!important;font-size:15px;max-width:64ch}
.slab .steps,.slab .steps>li{border-color:var(--slab-line)}
.slab .steps>li::before{color:var(--a-dk)}
.slab .steps>li::after{background:var(--slab-line)}
.slab .steps p{color:var(--on-slab-2)}
.slab .steps h3{color:#fff}
.slab .faq-a p{color:var(--on-slab-2)}

/* ---------- figures ---------- */
figure{margin:0;max-width:none}
.frame{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--card)}
.frame img{width:100%;display:block}
.frame--card{padding:16px;background:var(--tint)}
figcaption{margin-top:12px;font:500 12.5px/1.65 var(--fm);color:var(--ink-3);max-width:66ch}
.slab figcaption{color:var(--on-slab-2)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);align-items:center;max-width:none}
/* grid items default to min-width:auto, so a wide image can push a track
   past the viewport unless the track and the item are both allowed to shrink */
.split>*{min-width:0}
.split figure{min-width:0}
.split--narrow-img{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.split>div>*{margin-block:0 16px}
.split>div>*:last-child{margin-bottom:0}
.split h3{margin-top:0!important}

/* ---------- tables: ruled, mono heads ---------- */
.tw,.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card);-webkit-overflow-scrolling:touch;max-width:none}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
caption{caption-side:bottom;text-align:left;padding:13px 20px 15px;
  font:500 12px/1.6 var(--fm);color:var(--ink-3);border-top:1px solid var(--line-2)}
thead th{text-align:left;background:var(--tint);color:var(--ink);
  font:600 10.5px/1.3 var(--fm);letter-spacing:.16em;text-transform:uppercase;
  padding:14px 20px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td,tbody th{padding:14px 20px;border-bottom:1px solid var(--line-2);color:var(--ink-2);
  vertical-align:top;text-align:left}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover td,tbody tr:hover th{background:var(--tint)}
tbody td:first-child,tbody th[scope="row"]{color:var(--ink);font-weight:600}
tbody th[scope="row"]{width:34%;min-width:190px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;max-width:none;border-top:1px solid var(--line)}
.faq>details{border-bottom:1px solid var(--line);background:transparent}
.faq>details>summary{list-style:none;cursor:pointer;padding:19px 52px 19px 0;position:relative;
  font-family:var(--fd);font-weight:600;font-size:16.5px;letter-spacing:-.02em;color:var(--ink)}
.faq>details>summary::-webkit-details-marker{display:none}
.faq>details>summary::after,.faq>details>summary::before{content:"";position:absolute;
  right:14px;top:50%;background:var(--a);transition:transform var(--t-ui) var(--e)}
.faq>details>summary::before{width:13px;height:2px;margin-top:-1px}
.faq>details>summary::after{width:2px;height:13px;margin-top:-6.5px;right:19.5px}
.faq>details[open]>summary::after{transform:scaleY(0)}
.faq>details>summary:hover{color:var(--a-ink)}
.faq-a{padding:0 0 20px}
.faq-a p{margin:0!important;color:var(--ink-2);font-size:15.5px;line-height:1.7;max-width:72ch}

/* ---------- findings ---------- */
.finds{display:grid;gap:0;max-width:none;border-top:1px solid var(--line)}
.find{position:relative;border-bottom:1px solid var(--line);background:transparent}
.find>summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto 1fr auto;gap:18px;align-items:start;padding:20px 0}
.find>summary::-webkit-details-marker{display:none}
.find-n{font:600 12px/1.5 var(--fm);letter-spacing:.14em;color:var(--a-ink);padding-top:2px}
.find-t{font-family:var(--fd);font-weight:700;font-size:var(--t-1);letter-spacing:-.025em;
  color:var(--ink);line-height:1.28}
.find-c{position:relative;width:20px;height:20px;margin-top:5px;flex:0 0 auto}
.find-c::before,.find-c::after{content:"";position:absolute;left:50%;top:50%;background:var(--a);
  transform:translate(-50%,-50%);transition:transform var(--t-ui) var(--e)}
.find-c::before{width:13px;height:2px}
.find-c::after{width:2px;height:13px}
.find[open] .find-c::after{transform:translate(-50%,-50%) scaleY(0)}
.find>summary:hover .find-t{color:var(--a-ink)}
.find-body{padding:0 0 22px 46px}
.find-body p{margin:0!important;color:var(--ink-2);font-size:15.5px;max-width:74ch}
.slab .finds,.slab .find{border-color:var(--slab-line)}
.slab .find-t{color:#fff}
.slab .find-body p{color:var(--on-slab-2)}
.slab .find-n{color:var(--a-dk)}
.slab .find-c::before,.slab .find-c::after{background:var(--a-dk)}

/* ---------- dose scale ---------- */
.meter{border:1px solid var(--line);border-radius:var(--r-s);padding:clamp(20px,2.6vw,30px);
  background:var(--card);max-width:none}
.meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  flex-wrap:wrap;margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.meter-top b{font-family:var(--fd);font-size:var(--t-2);letter-spacing:-.03em;line-height:1.16}
.meter-top span{font:500 12.5px/1.5 var(--fm);color:var(--ink-3);max-width:34ch;text-align:right}
.bars{display:grid;gap:13px}
.bar{display:grid;grid-template-columns:minmax(150px,1.4fr) minmax(0,3fr) auto;
  gap:16px;align-items:center}
.bar>i{font-style:normal;font-size:14px;line-height:1.35;color:var(--ink-2)}
.bar .track{position:relative;display:block;height:10px;border-radius:2px;
  background:var(--sunk);overflow:hidden}
.bar .track>span{position:absolute;left:0;top:0;bottom:0;border-radius:2px;
  width:var(--w,0%);background:var(--a);transform:scaleX(0);transform-origin:left}
.js .track[data-in]>span,.js [data-in] .bar .track>span{transform:scaleX(1);
  transition:transform .5s var(--e-out) var(--d,0ms)}
.no-js .bar .track>span{transform:scaleX(1)}
.bar--here>i{color:var(--ink);font-weight:700}
.bar--here .track>span{background:linear-gradient(90deg,var(--a-deep),var(--a-hi))}
.bar>em{font-style:normal;font:600 13px/1 var(--fm);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.axis{display:flex;justify-content:space-between;margin-top:8px;padding-left:calc(150px + 16px)}
.axis span{font:500 10px/1 var(--fm);color:var(--ink-3);letter-spacing:.06em}
.meter-note{margin:18px 0 0!important;padding-top:16px;border-top:1px solid var(--line);
  font-size:14.5px;line-height:1.7;color:var(--ink-2);max-width:none}
.slab .meter{background:rgba(255,255,255,.04);border-color:var(--slab-line)}
.slab .meter-top,.slab .meter-note{border-color:var(--slab-line)}
.slab .meter-top b{color:#fff}
.slab .meter-top span,.slab .axis span,.slab .bar>i{color:var(--on-slab-2)}
.slab .bar--here>i,.slab .bar>em{color:#fff}
.slab .bar .track{background:rgba(255,255,255,.08)}
.slab .meter-note{color:var(--on-slab-2)}

/* ---------- supplement facts panel ---------- */
.lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,36px);align-items:start;max-width:none}
.panel{background:var(--card);border:2px solid var(--rule);border-radius:2px;overflow:hidden}
.panel-h{padding:14px 16px 12px;border-bottom:7px solid var(--rule)}
.panel-h b{display:block;font-family:var(--fd);font-size:25px;letter-spacing:-.04em;
  line-height:1;color:var(--ink)}
.panel-h span{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.panel-hint{margin:0!important;padding:9px 16px;font:600 10px/1 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--a-ink);background:var(--a-tint);
  border-bottom:1px solid var(--line)}
.rows{list-style:none;margin:0;padding:0 16px;display:block;max-width:none}
.rows>li{padding:0}
.rows>li::before{display:none}
.row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background var(--t-hover)}
.rows>li:last-child .row{border-bottom:0}
.row:hover,.row[aria-expanded="true"]{background:var(--a-tint)}
.row-n{font-size:14px;color:var(--ink);font-weight:700;line-height:1.35}
.row-n .row-sub{display:block;font-weight:400;font-size:11.5px;color:var(--ink-3);
  margin-top:3px;line-height:1.45;font-style:italic}
.row--ind .row-n{padding-left:16px;font-weight:400}
.row-a{font:700 14px/1 var(--fm);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.row-d{font:500 12.5px/1 var(--fm);color:var(--ink-3);min-width:30px;text-align:right}
.flagdot{display:inline-block;width:5px;height:5px;background:var(--a);
  margin-left:7px;vertical-align:2px;border-radius:1px}
.row--flag .row-a{color:var(--a-ink)}
.panel-f{margin:0!important;padding:12px 16px 15px;border-top:5px solid var(--rule);
  font-size:12px;color:var(--ink-2);line-height:1.6;max-width:none}

.detail{position:sticky;top:112px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:24px;min-height:210px}
.detail-k{margin:0 0 11px!important;font:600 10px/1 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--a-ink)}
.detail h3{margin:0 0 5px!important;font-size:var(--t-2)}
.detail-amt{margin:0 0 15px!important;font:600 13.5px/1.4 var(--fm);color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.detail>div{display:flex;flex-wrap:wrap;gap:7px}
.pill{display:inline-flex;align-items:center;font:600 10px/1 var(--fm);letter-spacing:.12em;
  text-transform:uppercase;padding:7px 11px;border-radius:var(--r-xs)}
.pill--bad{background:var(--bad-soft);color:var(--bad)}
.pill--warn{background:var(--warn-soft);color:var(--warn)}
.pill--ok{background:var(--ok-soft);color:var(--ok)}
.pill--data{background:var(--data-soft);color:var(--data)}
.ev{display:flex;align-items:center;gap:11px;margin-top:16px;padding-top:14px;
  border-top:1px solid var(--line-2)}
.ev-dots{display:flex;gap:3px}
.ev-dots i{width:20px;height:5px;border-radius:1px;background:var(--line)}
.ev-dots i.on{background:var(--a)}
.ev>span:last-child{font:500 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.detail>p:not([class]){margin:14px 0 0!important;font-size:15px;line-height:1.7;color:var(--ink-2)}
.detail-src{margin:16px 0 0!important;padding-top:13px;border-top:1px solid var(--line-2);
  font:500 12px/1.6 var(--fm)!important;color:var(--ink-3)!important}

/* ---------- fit check ---------- */
.fit{border:1px solid var(--slab-line);border-radius:var(--r-s);background:var(--slab-2);
  color:var(--on-slab);padding:clamp(20px,2.6vw,32px);max-width:none;display:grid;gap:0}
.fit .q{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;
  padding:15px 0;border-bottom:1px solid var(--slab-line)}
.fit .q p{margin:0!important;color:var(--on-slab);font-size:15.5px;flex:1 1 260px;max-width:none}
.yn{display:inline-flex;gap:6px;flex:0 0 auto}
.yn label{position:relative;cursor:pointer}
.yn input{position:absolute;opacity:0;width:0;height:0}
.yn span{display:grid;place-items:center;min-width:58px;padding:10px 15px;border-radius:var(--r-xs);
  font:600 12.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--on-slab-2);
  box-shadow:inset 0 0 0 1px var(--slab-line);
  transition:color var(--t-hover) var(--e),background-color var(--t-hover) var(--e),
    box-shadow var(--t-hover) var(--e)}
.yn label:hover span{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.yn input:checked + span{background:var(--a);color:#fff;box-shadow:none}
.yn input:focus-visible + span{outline:2px solid var(--a-dk);outline-offset:2px}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin-top:18px;
  padding:20px;border-radius:var(--r-xs);background:rgba(255,255,255,.05);
  border-left:3px solid var(--a-dk)}
.verdict>i{font-style:normal;display:grid;place-items:center;width:46px;height:46px;
  border-radius:var(--r-xs);background:rgba(143,176,255,.14);color:var(--a-dk);
  font:600 15px/1 var(--fm)}
.verdict b{display:block;font-family:var(--fd);font-size:var(--t-1);letter-spacing:-.025em;
  color:#fff;margin-bottom:8px}
.verdict p{margin:0!important;color:var(--on-slab-2);font-size:15px;max-width:66ch}
.verdict[data-v="warn"]{border-left-color:var(--warn)}
.verdict[data-v="warn"]>i{background:rgba(224,165,63,.14);color:var(--warn)}
.verdict[data-v="bad"]{border-left-color:var(--bad-dk)}
.verdict[data-v="bad"]>i{background:rgba(255,142,128,.14);color:var(--bad-dk)}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,2.6vw,36px);align-items:start;max-width:none;
  background:var(--slab-2);color:var(--on-slab);border:1px solid var(--slab-line);
  border-radius:var(--r-s);padding:clamp(20px,2.6vw,32px)}
.field{display:block;margin-bottom:22px}
.field:last-child{margin-bottom:0}
.field>span:first-child{display:block;font:600 10.5px/1.4 var(--fm);letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-slab-2);margin-bottom:11px}
.field>span:first-child b{color:var(--a-dk)}
.money{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--slab-line);border-radius:var(--r-xs);padding:2px 14px;
  transition:border-color var(--t-ui)}
.money:focus-within{border-color:var(--a-dk)}
.money b{font:600 18px/1 var(--fm);color:var(--a-dk)}
.money input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;
  font:600 24px/1 var(--fm);padding:14px 0;letter-spacing:-.03em;width:100%}
.money input::-webkit-outer-spin-button,.money input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.segs{display:flex;gap:6px;flex-wrap:wrap}
.segs label{cursor:pointer;position:relative}
.segs input{position:absolute;opacity:0;width:0;height:0}
.segs span{display:block;padding:11px 16px;border-radius:var(--r-xs);font:600 11.5px/1 var(--fm);
  letter-spacing:.1em;color:var(--on-slab-2);box-shadow:inset 0 0 0 1px var(--slab-line);
  transition:all var(--t-hover) var(--e)}
.segs label:hover span{color:#fff}
.segs input:checked + span{background:var(--a);color:var(--a-on);box-shadow:none}
.segs input:focus-visible + span{outline:2px solid var(--a-dk);outline-offset:2px}
.out{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:1px;
  background:var(--slab-line);border-radius:var(--r-xs);overflow:hidden}
.out>div{background:var(--slab-3);padding:18px 16px}
.out b{display:block;font:600 clamp(19px,2.1vw,25px)/1.2 var(--fm);color:#fff;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.out span{display:block;margin-top:8px;font:500 10px/1.4 var(--fm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-slab-2)}
.calc .calc-note,.calc-note{margin:16px 0 0!important;font-size:13px;line-height:1.65;color:var(--on-slab-2);
  max-width:none}
.calc-note a,.calc-note b{color:var(--a-dk)}

/* ---------- day grid + slider ---------- */
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(32px,1fr));gap:5px;max-width:none}
.days .day{aspect-ratio:1;display:grid;place-items:center;border-radius:2px;
  font:600 11px/1.15 var(--fm);background:var(--sunk);color:var(--ink-2);
  transition:background var(--t-ui) var(--e),color var(--t-ui) var(--e)}
.days .day.used{background:var(--a);color:var(--a-on)}
.slab .days .day{background:rgba(255,255,255,.07);color:var(--on-slab-2)}
.slab .days .day.used{background:var(--a-dk);color:var(--slab)}
.sec>.wrap>.field>span:first-child,.sec>.narrow>.field>span:first-child{
  color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:13.5px;
  font-family:var(--fb);font-weight:500}
.sec>.wrap>.field>span:first-child b,.sec>.narrow>.field>span:first-child b{color:var(--a-ink)}
.slab .wrap>.field>span:first-child{color:var(--on-slab-2)}
.slab .wrap>.field>span:first-child b{color:var(--a-dk)}
.slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:2px;
  background:linear-gradient(90deg,var(--a) var(--pct,0%),var(--sunk) var(--pct,0%));
  outline:none;cursor:pointer}
.slab .slider{background:linear-gradient(90deg,var(--a-dk) var(--pct,0%),rgba(255,255,255,.12) var(--pct,0%))}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:3px;
  background:var(--a);border:3px solid var(--paper);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform var(--t-hover) var(--e)}
.slider::-webkit-slider-thumb:hover{transform:scale(1.12)}
.slider::-moz-range-thumb{width:14px;height:14px;border-radius:3px;background:var(--a);
  border:3px solid var(--paper);cursor:pointer}
.slider:focus-visible{box-shadow:0 0 0 3px var(--a-line)}

/* ---------- score: dial + srows ---------- */
.score-wrap{background:var(--slab-2);color:var(--on-slab);border:1px solid var(--slab-line);
  border-radius:var(--r-s);padding:clamp(20px,2.8vw,34px);max-width:none;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3vw,42px);align-items:center}
.dial{position:relative;display:grid;place-items:center;width:160px}
.dial svg{width:160px;height:160px;transform:rotate(-90deg)}
.dial circle{fill:none;stroke-width:7;stroke-linecap:butt}
.dial .bgc{stroke:rgba(255,255,255,.1)}
.dial .fgc{stroke:var(--a-dk);stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .dial[data-in] .fgc,.js [data-in] .dial .fgc{stroke-dashoffset:var(--off);
  transition:stroke-dashoffset .7s var(--e-out)}
.no-js .dial .fgc{stroke-dashoffset:var(--off)}
.dial-v{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  text-align:center}
.dial-v b{display:block;font:600 42px/1.3 var(--fm);color:#fff;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums}
.dial-v span{display:block;margin-top:5px;font:500 10px/1.3 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-slab-2)}
.srows{display:grid;gap:0}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--slab-line)}
.srow:last-child{border-bottom:0}
.srow>span:first-child b{display:block;font-family:var(--fd);font-weight:700;font-size:15px;
  letter-spacing:-.02em;color:#fff}
.srow>span:first-child small{display:block;margin-top:3px;font-size:12.5px;line-height:1.5;
  color:var(--on-slab-2)}
.dots{display:flex;gap:3px}
.dots i{width:9px;height:9px;border-radius:1px;background:rgba(255,255,255,.14);display:block;
  transform:scaleY(.3);opacity:0}
.dots i.on{background:var(--a-dk)}
.js [data-in] .dots i{transform:none;opacity:1;transition:transform .22s var(--e-out),opacity .22s}
.js [data-in] .dots i:nth-child(2){transition-delay:40ms}
.js [data-in] .dots i:nth-child(3){transition-delay:80ms}
.js [data-in] .dots i:nth-child(4){transition-delay:120ms}
.js [data-in] .dots i:nth-child(5){transition-delay:160ms}
.no-js .dots i{transform:none;opacity:1}
.srow-n{font:600 12px/1 var(--fm);color:var(--a-dk);font-variant-numeric:tabular-nums}

/* ---------- score block ---------- */
.score{display:grid;gap:0;max-width:none;border-top:1px solid var(--line)}
.score-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--line)}
.score-row>b{display:block;font-family:var(--fd);font-weight:700;font-size:16px;
  letter-spacing:-.025em;color:var(--ink)}
.score-row>b small{display:block;margin-top:7px;font-family:var(--fb);font-weight:400;
  font-size:14.5px;line-height:1.65;color:var(--ink-2);letter-spacing:0;max-width:86ch}
.score-dots{display:flex;gap:3px;flex:0 0 auto;margin-top:5px}
.score-dots i{width:10px;height:10px;border-radius:1px;background:var(--line);display:block;
  transform:scaleY(.3);opacity:0}
.score-dots i.on{background:var(--a)}
.js [data-in] .score-dots i{transform:none;opacity:1;
  transition:transform .22s var(--e-out),opacity .22s}
.js [data-in] .score-dots i:nth-child(2){transition-delay:40ms}
.js [data-in] .score-dots i:nth-child(3){transition-delay:80ms}
.js [data-in] .score-dots i:nth-child(4){transition-delay:120ms}
.js [data-in] .score-dots i:nth-child(5){transition-delay:160ms}
.no-js .score-dots i{transform:none;opacity:1}
.score-total{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:20px;
  border-top:2px solid var(--a)}
.score-total b{font:600 clamp(40px,5.6vw,58px)/1.15 var(--fm);color:var(--ink);letter-spacing:-.06em}
.score-total b i{font-style:normal;font-size:.36em;color:var(--ink-3);margin-left:2px}
.score-total span{font-family:var(--fd);font-weight:700;font-size:var(--t-2);color:var(--a-ink);
  letter-spacing:-.025em}
.slab .score,.slab .score-row{border-color:var(--slab-line)}
.slab .score-row>b{color:#fff}
.slab .score-row>b small{color:var(--on-slab-2)}
.slab .score-dots i{background:rgba(255,255,255,.14)}
.slab .score-dots i.on{background:var(--a-dk)}
.slab .score-total{border-top-color:var(--a-dk)}
.slab .score-total b{color:#fff}
.slab .score-total b i{color:var(--on-slab-2)}
.slab .score-total span{color:var(--a-dk)}

/* ---------- ingredient grid ---------- */
.ing-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));max-width:none}
.ing{display:block;text-decoration:none;background:var(--card);padding:22px 20px;
  transition:background var(--t-ui) var(--e)}
.ing:hover{background:var(--a-tint)}
.ing b{display:block;font-family:var(--fd);font-weight:700;font-size:16.5px;
  letter-spacing:-.028em;color:var(--ink);line-height:1.22}
.ing i{display:block;margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.ing em{display:inline-block;margin-top:12px;font-style:normal;font:600 12px/1 var(--fm);
  padding:7px 11px;border-radius:var(--r-xs);background:var(--a-tint);color:var(--a-ink);
  box-shadow:inset 0 0 0 1px var(--a-line)}
.ing p{margin:12px 0 0!important;font-size:14.5px;line-height:1.6;color:var(--ink-2);max-width:none}
.slab .ing-grid{background:var(--slab-line);border-color:var(--slab-line)}
.slab .ing{background:var(--slab-2)}
.slab .ing:hover{background:var(--slab-3)}
.slab .ing b{color:#fff}
.slab .ing i,.slab .ing p{color:var(--on-slab-2)}
.slab .ing em{background:rgba(143,176,255,.13);color:var(--a-dk);box-shadow:inset 0 0 0 1px rgba(143,176,255,.26)}

/* ---------- pros / two column ---------- */
.pc{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));max-width:none}
.pc>div{background:var(--card);padding:24px 22px}
.pc h3{margin:0 0 15px!important;font-size:var(--t-1);color:var(--ink)}
.pc ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pc li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2);line-height:1.6}
.pc li::before{content:"";position:absolute;left:2px;top:10px;width:9px;height:2px;background:var(--a)}
.pc>div:last-child li::before{background:var(--ink-3)}
.pc a{color:var(--a-ink)}

/* ---------- seals ---------- */
.seal-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));max-width:none}
.seal-cell{background:var(--card);padding:22px 20px;transition:background var(--t-ui) var(--e)}
.seal-cell:hover{background:var(--tint)}
.seal-img{height:54px;margin-bottom:15px;display:flex;align-items:center}
.seal-img img{height:100%;width:auto;object-fit:contain}
.seal-cell figcaption{margin:0;max-width:none}
.seal-cell b{display:block;font-family:var(--fd);font-weight:700;font-size:15.5px;
  letter-spacing:-.025em;color:var(--ink);margin-bottom:8px}
.seal-cell span{display:block;font-size:14px;line-height:1.6;color:var(--ink-2)}
.slab .seal-grid{background:var(--slab-line);border-color:var(--slab-line)}
.slab .seal-cell{background:var(--slab-2)}
.slab .seal-cell b{color:#fff}
.slab .seal-cell span{color:var(--on-slab-2)}

/* ---------- trust strip ---------- */
.trust{max-width:none}
.trust .wrap{padding:0}
.trust ul{list-style:none;margin:0;padding:0;display:grid;align-items:center;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:18px clamp(16px,2.4vw,34px)}
@media (min-width:1100px){.trust ul{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media (max-width:620px){.trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trust li{display:flex;align-items:center;gap:11px;padding-left:0}
.trust li::before{display:none}
.trust li img{height:34px;width:auto;object-fit:contain;flex:0 0 auto}
.trust li span{font:500 11px/1.35 var(--fm);letter-spacing:.04em;color:var(--ink-3);min-width:0}

/* ---------- refs / kr / toc ---------- */
.refs{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:rf;max-width:none;
  border-top:1px solid var(--line)}
.refs>li{position:relative;padding:14px 0 14px 42px;counter-increment:rf;font-size:14.5px;
  color:var(--ink-2);line-height:1.6;border-bottom:1px solid var(--line-2)}
.refs>li::before{content:counter(rf,decimal-leading-zero);position:absolute;left:0;top:15px;
  font:600 11.5px/1.6 var(--fm);letter-spacing:.1em;color:var(--a-ink)}
.refs a{word-break:break-word}
.slab .refs>li::before{color:var(--a-dk)}
.kr{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));max-width:none}
.kr a{display:block;text-decoration:none;background:var(--card);padding:22px 20px;
  transition:background var(--t-ui) var(--e)}
.kr a:hover{background:var(--a-tint)}
.kr b{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:700;
  font-size:16.5px;letter-spacing:-.028em;color:var(--ink)}
.kr b::after{content:"→";color:var(--a);font-size:14px;transition:transform var(--t-hover) var(--e)}
.kr a:hover b::after{transform:translateX(3px)}
.kr span{display:block;margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.slab .kr{background:var(--slab-line);border-color:var(--slab-line)}
.slab .kr a{background:var(--slab-2)}
.slab .kr a:hover{background:var(--slab-3)}
.slab .kr b{color:#fff}
.slab .kr b::after{color:var(--a-dk)}
.slab .kr span{color:var(--on-slab-2)}
.toc{border:1px solid var(--line);border-radius:var(--r-s);padding:22px 24px;
  background:var(--tint);max-width:none}
.toc>b{display:block;font:600 10.5px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:15px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:tc;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px 24px}
.toc li{counter-increment:tc;padding-left:0}
.toc li::before{display:none}
.toc a{display:inline-flex;gap:9px;text-decoration:none;color:var(--ink-2);font-size:14.5px;
  transition:color var(--t-hover)}
.toc a::before{content:counter(tc,decimal-leading-zero);font:600 10.5px/1.5 var(--fm);
  letter-spacing:.1em;color:var(--a);flex:0 0 auto}
.toc a:hover{color:var(--a-ink)}
.slab .toc{background:rgba(255,255,255,.04);border-color:var(--slab-line)}
.slab .toc a{color:var(--on-slab-2)}
.slab .toc a::before{color:var(--a-dk)}
.slab .toc>b{color:var(--on-slab-2)}

/* ---------- stats: ruled field row ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;max-width:none}
.stats>div{background:var(--card);padding:24px 20px}
.stats b{display:block;font:600 clamp(25px,3.2vw,36px)/1.15 var(--fm);letter-spacing:-.05em;
  color:var(--a-ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:10px;font:500 11px/1.5 var(--fm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.slab .stats{background:var(--slab-line);border-color:var(--slab-line)}
.slab .stats>div{background:var(--slab-2)}
.slab .stats b{color:var(--a-dk)}
.slab .stats span{color:var(--on-slab-2)}

/* ---------- packs: ruled docket cards ---------- */
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:16px;align-items:stretch;max-width:none}
.pack{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--t-ui) var(--e),box-shadow var(--t-ui) var(--e)}
.pack:hover{border-color:var(--a-line);box-shadow:var(--sh-2)}
.pack--best{border-color:var(--a)}
.pack-ribbon{position:absolute;top:0;right:0;z-index:2;font:600 9.5px/1 var(--fm);
  letter-spacing:.18em;text-transform:uppercase;padding:8px 12px;background:var(--a);color:var(--a-on)}
.pack-flag{padding:18px 22px 15px;background:var(--tint);border-bottom:1px solid var(--line)}
.pack--best .pack-flag{background:var(--a-tint);border-bottom-color:var(--a-line)}
.pack-flag b{display:block;font:600 10px/1 var(--fm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--a-ink)}
.pack-flag span{display:block;margin-top:7px;font-size:13px;color:var(--ink-3)}
.pack-body{padding:0 22px 22px;flex:1;display:flex;flex-direction:column}
.pack-shot{display:grid;place-items:center;padding:20px 0 14px;min-height:150px}
.pack-shot img{max-height:140px;width:auto}
.pack-name{margin:0!important;font-family:var(--fd);font-weight:700;font-size:var(--t-2);
  letter-spacing:-.035em;color:var(--ink)}
.pack-days{margin:7px 0 0!important;font-size:13px;line-height:1.55;color:var(--ink-3)}
.pack-meter-label{display:flex;justify-content:space-between;gap:12px;margin-top:18px;
  font:500 10px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pack-meter-label b{color:var(--a-ink);font-size:10px}
.pack-meter{position:relative;height:6px;margin-top:8px;border-radius:2px;background:var(--sunk);
  overflow:hidden}
.pack-meter>span{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:2px;
  background:var(--a)}
.pack-price{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.pack-price b{display:block;font-family:var(--fm);font-weight:600;font-size:26px;
  letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.pack-price span{display:block;margin-top:7px;font-size:13px;line-height:1.55;color:var(--ink-3)}
.pack-perks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px;flex:1}
.pack-perks li{position:relative;padding-left:24px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.pack-perks li::before{content:"";position:absolute;left:2px;top:9px;width:10px;height:5px;
  border-left:2px solid var(--a);border-bottom:2px solid var(--a);transform:rotate(-45deg)}
.pack .btn{margin-top:20px}
.pack-pay{display:flex;justify-content:center;margin-top:14px}
.pack-pay img{height:18px;width:auto;opacity:.62}
.pack-foot{margin-top:18px}
.pack-note{margin:0!important;padding:16px 20px;border:1px solid var(--line);
  border-radius:var(--r-xs);background:var(--tint);font-size:13.5px;line-height:1.7;
  color:var(--ink-2);max-width:none}
.slab .pack-note{background:rgba(255,255,255,.04);border-color:var(--slab-line);color:var(--on-slab-2)}

/* ---------- CTA panel ---------- */
.ctap{position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--slab);
  color:var(--on-slab);padding:clamp(28px,4vw,52px);border:1px solid var(--slab-line);max-width:none}
.ctap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--slab-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--slab-line) 1px,transparent 1px);
  background-size:56px 56px;opacity:.45;
  -webkit-mask-image:radial-gradient(110% 100% at 88% 0%,#000,transparent 72%);
  mask-image:radial-gradient(110% 100% at 88% 0%,#000,transparent 72%)}
.ctap>*{position:relative}
.ctap h2{color:#fff;margin:0 0 14px!important;font-size:var(--t-3)}
.ctap p{color:var(--on-slab-2);max-width:62ch;margin:0 0 24px!important}
.ctap .btn-row{margin-bottom:0}
.ctap>p:last-child{margin:16px 0 0!important;color:var(--on-slab-2);font-size:13.5px}
.ctap p b,.ctap p strong{color:#fff}
.ctap p a:not(.btn){color:var(--a-dk)}

/* ---------- designed refusal slot ---------- */
.refusal{position:relative;border:1px dashed var(--a-line);border-radius:var(--r-s);
  padding:clamp(24px,3.4vw,42px);background:var(--a-tint);overflow:hidden;max-width:none}
.refusal>*{position:relative}
.refusal h3{margin:0 0 14px!important;font-size:var(--t-3);max-width:24ch}
.refusal p{max-width:64ch;color:var(--ink-2)}
.refusal-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  gap:12px;margin-top:24px}
.refusal-slots>div{aspect-ratio:4/3;border-radius:var(--r-xs);border:1px dashed var(--a-line);
  display:grid;place-items:center;text-align:center;padding:16px;
  font:500 11.5px/1.55 var(--fm);color:var(--ink-3);
  background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(46,91,216,.05) 8px 9px)}

/* ---------- flip cards ---------- */
.flips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:14px;max-width:none}
.flip{position:relative;min-height:194px;perspective:1100px;cursor:pointer;background:none;
  border:0;padding:0;text-align:left;font:inherit;color:inherit;display:block;width:100%}
.flip-in{position:relative;display:block;width:100%;min-height:194px;
  transform-style:preserve-3d;transition:transform .4s var(--e)}
.flip[aria-pressed="true"] .flip-in{transform:rotateY(180deg)}
.flip-f,.flip-b{position:absolute;inset:0;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;border-radius:var(--r-s);padding:22px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.flip-f{background:var(--card);border:1px solid var(--line)}
.flip-b{background:var(--slab-2);color:var(--on-slab);transform:rotateY(180deg);
  border:1px solid var(--slab-line);justify-content:center}
.flip-hint{position:absolute;top:20px;right:20px;font:600 9.5px/1 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3)}
.flip-t{font-family:var(--fd);font-weight:700;font-size:var(--t-1);letter-spacing:-.025em;color:var(--ink)}
.flip-l{font:600 10px/1 var(--fm);letter-spacing:.18em;text-transform:uppercase;color:var(--a-ink)}
.flip-amt{font:600 22px/1.15 var(--fm);color:var(--a-ink);letter-spacing:-.04em}
.flip-sub{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.flip-b q{font-size:14.5px;line-height:1.6;color:#fff}
.flip-b cite{margin-top:11px;font:500 11.5px/1.5 var(--fm);font-style:normal;color:var(--on-slab-2)}
.flip:hover .flip-f{border-color:var(--a-line)}

/* ---------- page head / crumbs / legal ---------- */
.page-head{padding-block:clamp(28px,3.6vw,52px) clamp(20px,2.4vw,30px);
  border-bottom:1px solid var(--line);background:var(--tint)}
.page-head h1{font-size:var(--t-4);margin-block:14px 14px}
.page-head p{max-width:66ch;color:var(--ink-2);font-size:var(--t-1)}
.page-meta{margin-top:18px;display:flex;gap:9px 22px;flex-wrap:wrap;
  font:500 11.5px/1 var(--fm);letter-spacing:.06em;color:var(--ink-3)}
.page-meta span{display:flex;align-items:center;gap:8px}
.page-meta span::before{content:"";width:5px;height:5px;background:var(--a);border-radius:1px}
.crumb{font:500 11.5px/1.6 var(--fm);letter-spacing:.06em;color:var(--ink-3);padding-block:15px 2px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px}
.crumb li{display:flex;align-items:center;gap:9px}
.crumb li + li::before{content:"/";color:var(--line)}
.crumb a{color:var(--ink-3);text-decoration:none;transition:color var(--t-hover)}
.crumb a:hover{color:var(--a-ink);text-decoration:underline;text-underline-offset:3px}
.crumb [aria-current]{color:var(--ink-2);font-weight:600}
.legal>*{margin-block:0 18px}
.legal p{font-size:13.5px;line-height:1.75;color:var(--on-slab-2);max-width:none}
.legal b{color:#fff}
.legal a{color:var(--a-dk)}

/* ---------- footer: compact, ruled ---------- */
.site-foot{background:var(--slab);color:var(--on-slab-2);
  padding-block:clamp(40px,5vw,64px) calc(30px + 72px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--slab-line)}
.foot-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:clamp(20px,2.4vw,36px);
  padding-bottom:30px;border-bottom:1px solid var(--slab-line)}
.foot-grid h3{font:500 10px/1 var(--fm);letter-spacing:.22em;text-transform:uppercase;
  color:#fff;margin:0 0 16px;font-family:var(--fm)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-grid a{color:var(--on-slab-2);text-decoration:none;font-size:14px;
  transition:color var(--t-hover)}
.foot-grid a:hover{color:var(--a-dk)}
.foot-brand p{font-size:13.5px;line-height:1.7;color:var(--on-slab-2);max-width:40ch}
.foot-brand h3{font-family:var(--fd);font-weight:600;font-size:24px;letter-spacing:-.022em;text-transform:none;
  color:#fff;margin-bottom:12px;letter-spacing:-.03em}
.foot-seals{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-block:22px;
  border-bottom:1px solid var(--slab-line)}
.foot-seals img{height:38px;width:auto;opacity:.85;border-radius:50%}
.foot-seals img.pay{height:20px;margin-left:auto;opacity:.6}
.site-foot .legal{padding-top:26px;border-top:1px solid var(--a-line);position:relative}
:root:not([data-theme="light"]) .site-foot .legal,
:root[data-theme="dark"] .site-foot .legal{border-top-color:var(--a-deep)}
.legal>p:first-child{font-size:14.5px;color:var(--on-slab)}


/* ============================================================
   v4 NEW COMPONENTS
   ============================================================ */

/* ---------- blank panel: a Supplement Facts panel with nothing in it ---------- */
.blank{background:var(--card);border:2px solid var(--rule);border-radius:2px;overflow:hidden;
  max-width:none}
.blank-h{padding:14px 16px 12px;border-bottom:7px solid var(--rule)}
.blank-h b{display:block;font-family:var(--fd);font-size:25px;letter-spacing:-.04em;line-height:1;
  color:var(--ink)}
.blank-h span{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3);font-style:italic}
.blank-rows{padding:0 16px}
.blank-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:10px 14px;
  align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
@media (max-width:620px){.blank-row{grid-template-columns:1fr}.blank-row span{text-align:left}}
.blank-row:last-child{border-bottom:0}
.blank-row b{font-size:14px;color:var(--ink-3);font-weight:600}
.blank-row span{font:500 11.5px/1.45 var(--fm);letter-spacing:.09em;text-transform:uppercase;
  color:var(--bad);text-align:right}
.blank-fill{height:9px;border-radius:2px;margin-top:7px;
  background:repeating-linear-gradient(135deg,var(--line-2) 0 7px,transparent 7px 8px);
  box-shadow:inset 0 0 0 1px var(--line)}
.blank-f{margin:0!important;padding:13px 16px 15px;border-top:5px solid var(--rule);
  font-size:12.5px;color:var(--ink-2);line-height:1.6;max-width:none}
.blank-f b{color:var(--bad)}

/* ---------- tabs: as printed / worked out ---------- */
.tabs{max-width:none}
.tabs-b{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:0}
.tabs-b button{position:relative;padding:14px 20px;background:none;border:0;cursor:pointer;
  font:600 12px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  transition:color var(--t-hover)}
.tabs-b button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--a);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-ui) var(--e)}
.tabs-b button:hover{color:var(--ink)}
.tabs-b button[aria-selected="true"]{color:var(--a-ink)}
.tabs-b button[aria-selected="true"]::after{transform:scaleX(1)}
.tabs-p{padding-top:22px}
.tabs-p[hidden]{display:none!important}
.js .tabs-p{animation:v4fade .2s var(--e-out) both}
@keyframes v4fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.slab .tabs-b{border-bottom-color:var(--slab-line)}
.slab .tabs-b button{color:var(--on-slab-2)}
.slab .tabs-b button:hover{color:#fff}
.slab .tabs-b button[aria-selected="true"]{color:var(--a-dk)}
.slab .tabs-b button::after{background:var(--a-dk)}

/* ---------- bound: descending-order upper bounds ---------- */
.bound{border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  overflow:hidden;max-width:none}
.bound-h{padding:18px 22px;border-bottom:1px solid var(--line);background:var(--tint);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:baseline}
.bound-h b{font-family:var(--fd);font-size:var(--t-1);letter-spacing:-.03em;color:var(--ink)}
.bound-h span{font:500 12px/1.5 var(--fm);color:var(--ink-3)}
.bound-r{display:grid;grid-template-columns:auto minmax(0,1.3fr) minmax(0,2fr) auto;
  gap:16px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line-2)}
.bound-r:last-of-type{border-bottom:0}
.bound-r>i{font-style:normal;font:600 11.5px/1 var(--fm);letter-spacing:.12em;color:var(--a-ink)}
.bound-r>b{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.bound-r>b small{display:block;font-weight:400;font-size:12px;color:var(--ink-3);margin-top:3px;
  font-style:italic}
.bound-t{position:relative;height:9px;border-radius:2px;background:var(--sunk);overflow:hidden}
.bound-t>span{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:2px;
  background:linear-gradient(90deg,var(--a-deep),var(--a-hi));transform:scaleX(0);
  transform-origin:left}
.js [data-in] .bound-t>span{transform:scaleX(1);transition:transform .45s var(--e-out) var(--d,0ms)}
.no-js .bound-t>span{transform:scaleX(1)}
.bound-r>em{font-style:normal;font:600 13.5px/1.3 var(--fm);color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.bound-f{padding:16px 22px;border-top:1px solid var(--line);background:var(--tint);
  font-size:14px;line-height:1.7;color:var(--ink-2)}
.bound-f b{color:var(--ink)}
.slab .bound{background:rgba(255,255,255,.04);border-color:var(--slab-line)}
.slab .bound-h,.slab .bound-f{background:rgba(255,255,255,.04);border-color:var(--slab-line)}
.slab .bound-h b,.slab .bound-r>b,.slab .bound-r>em,.slab .bound-f b{color:#fff}
.slab .bound-h span,.slab .bound-r>b small,.slab .bound-f{color:var(--on-slab-2)}
.slab .bound-r{border-bottom-color:var(--slab-line)}
.slab .bound-r>i{color:var(--a-dk)}
.slab .bound-t{background:rgba(255,255,255,.08)}

/* ---------- FAQ live search ---------- */
.fsearch{position:relative;margin-bottom:18px;max-width:none}
.fsearch input{width:100%;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:15px 18px 15px 44px;font:400 15.5px/1 var(--fb);
  color:var(--ink);outline:none;transition:border-color var(--t-ui)}
.fsearch input:focus{border-color:var(--a)}
.fsearch input::placeholder{color:var(--ink-3)}
.fsearch::before{content:"";position:absolute;left:17px;top:50%;width:12px;height:12px;
  margin-top:-8px;border:2px solid var(--ink-3);border-radius:50%}
.fsearch::after{content:"";position:absolute;left:27px;top:50%;width:6px;height:2px;
  margin-top:3px;background:var(--ink-3);transform:rotate(45deg)}
.fcount{margin:0 0 16px!important;font:500 12px/1 var(--fm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.faq>details[hidden]{display:none!important}
.fnone{padding:24px 0;font-size:15.5px;color:var(--ink-3)}
.fnone[hidden]{display:none!important}
.fsearch mark,.faq mark{background:var(--a-tint);color:var(--a-ink);border-radius:2px;
  padding:0 2px;font-weight:600}

/*!CRIT-2*/
/* ============================================================
   HEADER · NAV · BUYBAR   (critical)
   ============================================================ */
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--a);
  color:var(--a-on);border-radius:0 0 var(--r-xs) 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}
.site-head{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:inset 0 -3px 0 -2px var(--a-line);
  transition:transform .26s var(--e)}
.site-head.is-hidden{transform:translateY(-100%)}
.topstrip{background:var(--slab);color:var(--on-slab-2);font:500 11px/1.4 var(--fm);
  letter-spacing:.09em;text-transform:uppercase;padding:8px 0}
.topstrip .wrap{display:flex;justify-content:space-between;gap:9px 20px;align-items:center;
  flex-wrap:wrap}
.topstrip b{color:var(--a-dk);font-weight:600}
.topstrip a{color:#fff;text-decoration:none}
.navbar{padding-block:8px}
.navbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  flex:0 0 auto;background:var(--slab);color:var(--a-dk);
  font-family:var(--fd);font-weight:600;font-size:15px;line-height:1;letter-spacing:.01em;
  box-shadow:0 0 0 1px var(--a-line)}
.brand-txt b{display:block;font-family:var(--fd);font-weight:600;font-size:19px;
  letter-spacing:-.022em;color:var(--ink);line-height:1.05}
.brand-txt i{display:block;font-style:normal;font:500 9px/1.3 var(--fm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.nav{display:flex;align-items:center;gap:0}
.nav>a{padding:10px 13px;text-decoration:none;color:var(--ink-2);font-size:14.5px;font-weight:500;
  border-radius:var(--r-xs);transition:color var(--t-hover),background var(--t-hover);
  white-space:nowrap}
.nav>a:hover{color:var(--a-ink);background:var(--a-tint)}
.nav .nav-tel{font-family:var(--fm);font-weight:600;font-size:13px;color:var(--ink);
  padding:10px 13px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1px var(--line);margin-left:8px}
.nav .nav-tel:hover{box-shadow:inset 0 0 0 1px var(--a);background:transparent}
.burger{display:none;width:44px;height:44px;border:0;border-radius:var(--r-xs);
  background:transparent;cursor:pointer;position:relative;flex:0 0 auto}
.burger>span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);
  transition:transform .24s var(--e),opacity .16s}
.burger>span:nth-child(1){top:15px}
.burger>span:nth-child(2){top:21px}
.burger>span:nth-child(3){top:27px}
.burger[aria-expanded="true"]>span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"]>span:nth-child(2){opacity:0}
.burger[aria-expanded="true"]>span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.drawer{display:none}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--slab);
  border-top:1px solid var(--slab-line);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom,0px));
  transform:translateY(105%);transition:transform .28s var(--e)}
.buybar.is-on{transform:none}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.buybar-txt b{display:block;color:#fff;font-family:var(--fd);font-weight:600;font-size:16px;letter-spacing:-.02em}
.buybar-txt small{display:block;margin-top:3px;font:500 11.5px/1.3 var(--fm);color:var(--on-slab-2)}
.buybar .btn{padding:13px 22px;font-size:14px;white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:24px}
  .foot-grid{grid-template-columns:1.5fr 1fr 1fr;gap:28px}
  .score-wrap{grid-template-columns:1fr;justify-items:start}
  .score-wrap .srows{width:100%}
}
@media (max-width:1100px){
  .nav,.navbar .nav-tel{display:none}
  .burger{display:block}
  .drawer{display:block;position:fixed;inset:0;z-index:99;overflow:hidden;visibility:hidden;
    opacity:0;transition:opacity .22s var(--e),visibility .22s}
  .drawer.is-open{visibility:visible;opacity:1}
  .drawer::before{content:"";position:absolute;inset:0;background:rgba(13,24,38,.55)}
  .drawer ul{position:absolute;right:0;top:0;bottom:0;width:min(86vw,330px);margin:0;
    list-style:none;background:var(--paper);border-left:1px solid var(--line);
    padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(22px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;display:grid;align-content:start;gap:0;
    transform:translateX(100%);transition:transform .26s var(--e)}
  .drawer.is-open ul{transform:none}
  .drawer li{padding:0}
  .drawer li::before{display:none}
  .drawer a{display:block;padding:14px 12px;text-decoration:none;color:var(--ink);
    font-family:var(--fd);font-weight:600;font-size:16px;border-bottom:1px solid var(--line-2)}
  .drawer a:hover{color:var(--a-ink);background:var(--a-tint)}
  .lab-grid,.calc{grid-template-columns:1fr}
  .detail{position:static}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:4px}
  .hero-head,.hero-body,.hero-art{min-width:0}
  .hero-copy{display:contents}
  .hero-head{order:1}
  .hero-art{order:2;margin-block:2px 14px;padding-top:0}
  .hero-body{order:3;display:flex;flex-direction:column}
  .hero-body .answer{order:1}
  .hero-body .btn-row{order:2;margin-bottom:20px}
  .hero-body .hero-sub{order:3}
  .hero-body .readout{order:4;margin-top:20px}
  .hero-body .ticks{order:5;margin-top:20px}
  .hero-body .seals{order:6}
  .stage img{max-height:min(38vh,320px)}
  .tag{display:none}
  .split,.split--narrow-img{grid-template-columns:minmax(0,1fr)}
  .axis{padding-left:0}
  .bar{grid-template-columns:1fr auto;gap:7px 14px}
  .bar .track{grid-column:1/-1;order:3}
  .meter-top span{text-align:left}
}
@media (max-width:620px){
  .topstrip .wrap>span:nth-child(1){display:none}
  .hide-sm{display:none}
  .readout{grid-template-columns:1fr}
  .readout div{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:13px 0;border-left:0;border-top:1px solid var(--line)}
  .slab .readout div,.hero .readout div{border-top-color:var(--slab-line)}
  .readout div:first-child{border-top:0}
  .readout b{font-size:23px}
  .readout span{margin-top:0;text-align:right}
  .foot-grid{grid-template-columns:1fr;gap:26px}
  .score-row{grid-template-columns:1fr;gap:12px}
  .score-dots{margin-top:0}
  .find>summary{grid-template-columns:auto 1fr;gap:14px}
  .find-c{display:none}
  .find-body{padding-left:40px}
  .fit .q{flex-direction:column;align-items:flex-start;gap:12px}
  .yn{width:100%}
  .yn label{flex:1}
  .yn span{width:100%}
  .verdict{grid-template-columns:1fr}
  .buybar .wrap{gap:12px}
  .buybar-txt b{font-size:13.5px}
  .buybar-txt small{font-size:11px}
  .buybar .btn{padding:12px 17px;font-size:13px}
  .pack-shot{min-height:130px}
  .steps>li{padding-left:44px}
  .steps>li::after{left:26px}
  .toc ol{grid-template-columns:1fr}
  .trust li span{max-width:12ch;font-size:11px}
  .dial,.dial svg{width:136px;height:136px}
  .dial-v b{font-size:36px}
  .sec[id] > .wrap::before{margin-bottom:14px;padding-bottom:11px}
}
/*!CRIT-END-2*/

/* ---------- dark-section reconciliation ---------- */
.slab .tw,.slab .tscroll,.slab .pc,.slab .panel,.slab .detail,
.slab .refusal,.slab .packs,.slab .pack-note{color:var(--ink)}
.slab .tw b,.slab .tscroll b,.slab .pc b,.slab .panel b,.slab .detail b,
.slab .refusal b,.slab .packs b,.slab .pack-note b,.slab .tw strong,
.slab .pc strong,.slab .detail strong,.slab .refusal strong,.slab .packs strong{color:var(--ink)}
.slab .tw a,.slab .tscroll a,.slab .pc a,.slab .panel a,.slab .detail a,
.slab .refusal a,.slab .packs a,.slab .pack-note a{color:var(--a-ink)}
/* .faq paints no background of its own, so on a slab it stays a dark-surface component */
.slab .faq{color:var(--on-slab);border-top-color:var(--slab-line)}
.slab .faq>details{border-bottom-color:var(--slab-line)}
.slab .faq>details>summary{color:#fff}
.slab .faq>details>summary:hover{color:var(--a-dk)}
.slab .faq>details>summary::before,.slab .faq>details>summary::after{background:var(--a-dk)}
.slab .faq-a p,.slab .faq-a li{color:var(--on-slab-2)}
.slab .faq-a b,.slab .faq-a strong{color:#fff}
.slab .faq a{color:var(--a-dk)}
.slab .tw td,.slab .tw th,.slab .tscroll td,.slab .tscroll th{color:var(--ink-2)}
.slab .tw thead th,.slab .tscroll thead th{color:var(--ink)}
.slab .tw tbody td:first-child,.slab .tw tbody th[scope="row"]{color:var(--ink)}
.slab .tw caption,.slab .tscroll caption{color:var(--ink-3)}
.slab .pc li,.slab .refusal p,.slab .pack-days,.slab .pack-price span,
.slab .pack-perks li,.slab .pack-note{color:var(--ink-2)}
.slab .pc h3,.slab .refusal h3,.slab .pack-name,
.slab .pack-price b{color:var(--ink)}
.slab .faq,.slab .faq>details{border-color:var(--slab-line)}
.slab .refusal .eyebrow{color:var(--a-ink);border-color:var(--a-line);background:var(--a-tint)}
.slab .refusal .eyebrow::before{background:var(--a)}
.slab .refusal-slots>div{color:var(--ink-3)}
.slab .panel-h b,.slab .row-n,.slab .row-a{color:var(--ink)}
.slab .panel-h span,.slab .panel-f,.slab .row-n .row-sub,.slab .row-d{color:var(--ink-2)}
.slab .pack-flag b{color:var(--a-ink)}
.slab .pack-flag span{color:var(--ink-3)}
.slab .page-meta,.slab .crumb,.slab .crumb a{color:var(--on-slab-2)}
.slab .days .day{color:var(--on-slab-2)}

/* ---------- misc ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stars{display:inline-flex;gap:2px;color:var(--a);letter-spacing:.06em}
:where(a,button,summary,input,[tabindex]):focus-visible{outline:2px solid var(--a);
  outline-offset:2px;border-radius:2px}
::selection{background:var(--a);color:#fff}
@media print{.site-head,.buybar,.railnav,.progress,.drawer,.ticker{display:none!important}}

/*!CRIT-3*/
.no-js [data-rise]>*{opacity:1!important;transform:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-rise]>*{opacity:1!important;transform:none!important}
  .bar .track>span{transform:scaleX(1)!important}
  .dial .fgc{stroke-dashoffset:var(--off)!important}
  .dots i,.score-dots i{transform:none!important;opacity:1!important}
  .ticker-in{animation:none!important}
}

/* ============================================================
   v7 COMPONENTS — at a glance, drawn explainers, price table,
   timeline, rating card, origin cards, review audit, byline
   ============================================================ */

/* ---------- at a glance: the hero quick-facts grid ---------- */
.glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 0 22px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.glance>div{background:var(--card);padding:13px 15px 14px;min-width:0}
.glance dt{font:600 9.5px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 6px}
.glance dd{margin:0;font:600 14px/1.35 var(--fb);color:var(--ink);letter-spacing:-.01em}
.hero .glance,.slab .glance{background:var(--slab-line);border-color:var(--slab-line)}
.hero .glance>div,.slab .glance>div{background:var(--slab-2)}
.hero .glance dt,.slab .glance dt{color:var(--on-slab-2)}
.hero .glance dd,.slab .glance dd{color:#fff}
@media (max-width:900px){.glance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.glance{grid-template-columns:minmax(0,1fr)}}

/* ---------- flow: numbered explainers that draw themselves in ---------- */
.flow{position:relative}
.flow-l{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:none;max-width:none}
.flow-l>li{--i:0;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:18px;padding:20px 0 22px;align-items:start}
.flow-l>li::after{content:"";position:absolute;left:21px;top:54px;bottom:-2px;width:2px;
  background:var(--a-line);transform:scaleY(0);transform-origin:top}
.flow-l>li:last-child::after{display:none}
.js [data-flow][data-in] .flow-l>li::after{
  animation:v7draw .42s var(--e-out) both;animation-delay:calc(var(--i) * 110ms + 180ms)}
@keyframes v7draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.flow-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  flex:0 0 auto;background:var(--a-tint);color:var(--a-ink);border:1.5px solid var(--a-line);
  font:600 13.5px/1 var(--fm);letter-spacing:.02em;position:relative;z-index:1}
.js [data-flow] .flow-n{opacity:0;transform:scale(.72)}
.js [data-flow][data-in] .flow-n{animation:v7pop .34s var(--e-out) both;
  animation-delay:calc(var(--i) * 110ms)}
@keyframes v7pop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
.no-js .flow-n{opacity:1;transform:none}
.flow-b b{display:block;font-family:var(--fd);font-weight:700;font-size:var(--t-1);
  letter-spacing:-.022em;color:var(--ink);margin:9px 0 7px}
.flow-b span{display:block;color:var(--ink-2);font-size:15.5px;line-height:1.68;max-width:70ch}
.js [data-flow] .flow-b{opacity:0}
.js [data-flow][data-in] .flow-b{animation:v7rise .36s var(--e-out) both;
  animation-delay:calc(var(--i) * 110ms + 60ms)}
.no-js .flow-b{opacity:1}
.slab .flow-n{background:rgba(85,214,226,.14);border-color:rgba(85,214,226,.34);color:var(--a-dk)}
.slab .flow-l>li::after{background:rgba(85,214,226,.3)}
.slab .flow-b b{color:#fff}
.slab .flow-b span{color:var(--on-slab-2)}
@media (max-width:620px){
  .flow-l>li{gap:14px}
  .flow-n{width:38px;height:38px;font-size:12px}
  .flow-l>li::after{left:18px;top:48px}
}

/* ---------- price comparison table ---------- */
.ptable table{font-variant-numeric:tabular-nums}
.ptable tbody th{white-space:nowrap}
.ptable td{font-family:var(--fm);font-size:14px}
.ptable thead th:nth-child(2){color:var(--a-ink)}
.tnote{margin-top:14px!important;font-size:14px;color:var(--ink-3);line-height:1.7}
.slab .tnote{color:var(--on-slab-2)}

/* ---------- timeline ---------- */
.tline{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:none;
  grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.tline>li{position:relative;padding:48px 16px 0 0}
.tline>li::before{content:"";position:absolute;left:0;top:14px;right:0;height:2px;
  background:var(--line);transform:scaleX(0);transform-origin:left}
.js [data-flow][data-in].tline>li::before{animation:v7drawx .4s var(--e-out) both;
  animation-delay:calc(var(--i) * 130ms)}
@keyframes v7drawx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.no-js .tline>li::before{transform:none}
.tline>li:last-child::before{right:16px}
.tl-m{position:absolute;left:0;top:4px;width:22px;height:22px;border-radius:50%;
  background:var(--card);border:2px solid var(--a);display:grid;place-items:center;
  font:0/0 a;z-index:1}
.tl-m::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--a)}
.tl-b b{display:block;font-family:var(--fd);font-weight:700;font-size:var(--t-1);
  letter-spacing:-.02em;color:var(--ink);margin-bottom:7px}
.tl-b span{display:block;color:var(--ink-2);font-size:14.5px;line-height:1.66}
.tline>li>.tl-m{font:600 10.5px/1 var(--fm)}
.tline .tl-m{text-indent:0}
.tl-lab{display:block;font:600 10.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--a-ink);margin-bottom:8px}
.slab .tline>li::before{background:var(--slab-line)}
.slab .tl-m{background:var(--slab);border-color:var(--a-dk)}
.slab .tl-m::after{background:var(--a-dk)}
.slab .tl-b b{color:#fff}
.slab .tl-b span{color:var(--on-slab-2)}
@media (max-width:860px){
  .tline{grid-template-columns:minmax(0,1fr);gap:0}
  .tline>li{padding:0 0 26px 38px}
  .tline>li::before{left:10px;top:22px;bottom:-4px;right:auto;width:2px;height:auto;
    transform:scaleY(0);transform-origin:top}
  .js [data-flow][data-in].tline>li::before{animation-name:v7draw}
  .tline>li:last-child::before{display:none}
  .tl-m{top:0}
}

/* ---------- rating card ---------- */
.ratecard{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--card)}
.rc-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(90px,1fr) auto;
  gap:6px 16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.rc-row>b{font-family:var(--fd);font-weight:700;font-size:15.5px;color:var(--ink);letter-spacing:-.015em}
.rc-row>small{grid-column:1/-1;font-size:13.5px;color:var(--ink-3);line-height:1.6}
.rc-bar{display:block;height:8px;border-radius:999px;background:var(--sunk);overflow:hidden}
.rc-bar>i{display:block;height:100%;width:var(--w,0%);border-radius:999px;
  background:linear-gradient(90deg,var(--a-deep),var(--a-hi));transform:scaleX(0);transform-origin:left}
.js [data-in] .rc-bar>i,.js .rc-bar[data-in]>i{transform:scaleX(1);
  transition:transform .5s var(--e-out);transition-delay:calc(var(--i) * 70ms)}
.no-js .rc-bar>i{transform:scaleX(1)}
.rc-row>em{font-style:normal;font:600 14px/1 var(--fm);color:var(--ink);font-variant-numeric:tabular-nums}
.rc-total{display:flex;align-items:baseline;gap:12px;padding:20px;background:var(--tint)}
.rc-total b{font:600 clamp(34px,4.4vw,46px)/1.2 var(--fm);color:var(--ink);letter-spacing:-.05em}
.rc-total span{font-family:var(--fd);font-weight:700;font-size:var(--t-1);color:var(--a-ink)}
.slab .ratecard{background:var(--slab-2);border-color:var(--slab-line)}
.slab .rc-row{border-bottom-color:var(--slab-line)}
.slab .rc-row>b,.slab .rc-row>em,.slab .rc-total b{color:#fff}
.slab .rc-row>small{color:var(--on-slab-2)}
.slab .rc-bar{background:rgba(255,255,255,.1)}
.slab .rc-total{background:var(--slab-3)}
.slab .rc-total span{color:var(--a-dk)}
@media (max-width:620px){
  .rc-row{grid-template-columns:minmax(0,1fr) auto}
  .rc-bar{grid-column:1/-1;order:3}
  .rc-row>small{order:4}
}

/* ---------- origin cards ---------- */
.orgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));gap:14px}
.org{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:20px}
.js [data-flow] .org{opacity:0}
.js [data-flow][data-in] .org{animation:v7rise .36s var(--e-out) both;
  animation-delay:calc(var(--i) * 80ms)}
.no-js .org{opacity:1}
.org b{display:block;font-family:var(--fd);font-weight:700;font-size:15.5px;color:var(--ink);
  letter-spacing:-.018em;margin-bottom:8px}
.org i{display:block;font-style:normal;font:600 10px/1.4 var(--fm);letter-spacing:.12em;
  text-transform:uppercase;color:var(--a-ink);margin-bottom:11px}
.org p{margin:0!important;font-size:14.5px;line-height:1.66;color:var(--ink-2);max-width:none}
.slab .org{background:var(--slab-2);border-color:var(--slab-line)}
.slab .org b{color:#fff}
.slab .org i{color:var(--a-dk)}
.slab .org p{color:var(--on-slab-2)}

/* ---------- the review audit ---------- */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,246px),1fr));gap:16px}
.rv{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;display:flex;flex-direction:column}
.rv-img{position:relative;aspect-ratio:7/9;overflow:hidden;background:var(--sunk)}
.rv-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(.95)}
.rv figcaption{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px}
.rv figcaption>b{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--ink);letter-spacing:-.02em}
.rv-meta{font:500 11px/1.4 var(--fm);color:var(--ink-3);letter-spacing:.02em}
.rv-open{margin:0!important;font-size:14.5px;line-height:1.62;color:var(--ink-2);max-width:none}
.rv-tail{margin:0!important;font-size:14.5px;line-height:1.62;max-width:none;
  color:var(--ink);background:var(--a-tint);border-left:3px solid var(--a);
  padding:10px 12px;border-radius:0 var(--r-xs) var(--r-xs) 0}
.slab .rv{background:var(--slab-2);border-color:var(--slab-line)}
.slab .rv figcaption>b{color:#fff}
.slab .rv-open{color:var(--on-slab-2)}
.slab .rv-tail{color:#fff;background:rgba(85,214,226,.12);border-left-color:var(--a-dk)}

/* ---------- the tells ---------- */
.tells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));gap:14px}
.tell{background:var(--bad-soft);border:1px solid var(--line);border-left:3px solid var(--bad);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:20px}
.js [data-flow] .tell{opacity:0}
.js [data-flow][data-in] .tell{animation:v7rise .36s var(--e-out) both;
  animation-delay:calc(var(--i) * 80ms)}
.no-js .tell{opacity:1}
.tell b{display:block;font-family:var(--fd);font-weight:700;font-size:15.5px;color:var(--ink);
  letter-spacing:-.018em;margin-bottom:9px}
.tell p{margin:0!important;font-size:14.5px;line-height:1.66;color:var(--ink-2);max-width:none}
.slab .tell{background:rgba(253,162,155,.1);border-color:var(--slab-line);border-left-color:var(--bad-dk)}
.slab .tell b{color:#fff}
.slab .tell p{color:var(--on-slab-2)}

/* ---------- byline: author, reviewer slot, date ---------- */
.byline{display:flex;flex-wrap:wrap;gap:10px 30px;align-items:flex-start;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--line)}
.byline>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.byline i{font-style:normal;font:600 9.5px/1.3 var(--fm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.byline b{font-family:var(--fd);font-weight:700;font-size:14.5px;color:var(--ink);letter-spacing:-.015em}
.byline em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.byline small{font-size:12.5px;color:var(--ink-3)}
.byline small a{color:var(--a-ink)}
.by-slot{display:inline-block;font-family:var(--fm)!important;font-weight:500!important;
  font-size:12.5px!important;letter-spacing:.02em;color:var(--a-ink)!important;
  background:var(--a-tint);border:1px dashed var(--a-line);border-radius:var(--r-xs);
  padding:5px 10px}
.by-rev.is-filled b{color:var(--ink)}
.byline--c{margin-top:0;padding-top:0;border-top:0;gap:8px 26px}
.foot-by{padding:22px 0 4px;border-top:1px solid var(--slab-line);margin-top:4px}
.foot-by .byline i{color:var(--on-slab-2)}
.foot-by .byline b{color:#fff}
.foot-by .byline em,.foot-by .byline small{color:var(--on-slab-2)}
.foot-by .byline small a{color:var(--a-dk)}
.foot-by .by-slot{color:var(--a-dk)!important;background:rgba(85,214,226,.1);
  border-color:rgba(85,214,226,.4)}
.slab .byline{border-top-color:var(--slab-line)}
.slab .byline i,.slab .byline em,.slab .byline small{color:var(--on-slab-2)}
.slab .byline b{color:#fff}
@media (max-width:620px){.byline{gap:14px 20px}}

/* ---------- reduced motion: nothing draws, everything is simply there ---------- */
@media (prefers-reduced-motion: reduce){
  .js [data-flow][data-in] .flow-n,.js [data-flow][data-in] .flow-b,
  .js [data-flow][data-in] .org,.js [data-flow][data-in] .tell,
  .js [data-flow][data-in] .flow-l>li::after,
  .js [data-flow][data-in].tline>li::before{animation:none!important;opacity:1!important;
    transform:none!important}
  .js [data-in] .rc-bar>i,.js .rc-bar[data-in]>i{transition:none!important;transform:scaleX(1)!important}
}


/* ---- v7 shots: a contact sheet of supplied marketing stills --------------- */
.shots{display:grid;gap:14px;grid-template-columns:1fr;margin-top:20px}
@media (min-width:560px){.shots{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.shots{grid-template-columns:repeat(3,1fr)}}
.shot{margin:0;display:flex;flex-direction:column;gap:10px}
.shot-i{border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--tint);
  aspect-ratio:4/3;display:grid;place-items:center}
.shot-i img{width:100%;height:100%;object-fit:cover;display:block}
.shot figcaption{margin:0;max-width:none;font-size:12px}
.shots-note{margin-top:16px;font:500 12.5px/1.7 var(--fm);color:var(--ink-3);
  border-top:1px solid var(--line);padding-top:14px}
.slab .shot-i{background:var(--slab-2);border-color:var(--slab-line)}
.slab .shots-note{color:var(--on-slab-2);border-top-color:var(--slab-line)}

/*!CRIT-END-3*/

/*!CRIT-4*/
/* Above-the-fold motion and the fill-in slot core. These few rules either
   affect layout or would flash if they arrived late, so they ship inline in
   the critical CSS. Every other rule in the motion and slot layers below is
   deferred with the main stylesheet and is re-declared there identically. */
:root{--rv:0;--w:0;--m:0;--r:0;--py:0px;--rx:0deg;--ry:0deg;--tx:0px;--ty:0px;
  --gx:50%;--gy:50%;--d:15s;--t:0s;--slotline:#084E56}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--slotline:#8FEAB0}}
:root[data-theme="dark"]{--slotline:#8FEAB0}
.slot{background:#FFE14D;color:#1B1208;font-weight:750;font-style:normal;padding:1px 7px 1px 5px;border-radius:6px;outline:2px dashed #C2410C;outline-offset:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:normal;line-height:1.45;margin-inline:2px;max-width:100%;overflow-wrap:anywhere}
.slot::before{content:"\270E";display:inline-block;margin-right:4px;font-weight:400}
.js [data-rv]{opacity:0;transform:translate3d(0,22px,0)}
.js [data-rv][data-in],.js [data-in] [data-rv]{animation:fzRise .52s cubic-bezier(.22,.78,.3,1) both;animation-delay:calc(var(--rv,0) * 48ms)}
@keyframes fzRise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.fzw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.fzw>i{display:inline-block;font-style:inherit;transform:translateY(105%)}
.js .fzw[data-in]>i,.js [data-in] .fzw>i{animation:fzWord .78s cubic-bezier(.17,.84,.26,1) both;animation-delay:calc(var(--w,0) * 52ms)}
@keyframes fzWord{from{transform:translateY(105%)}to{transform:none}}
.js .sec--card[data-rise]>.wrap{opacity:0;transform:translate3d(0,26px,0) scale(.988)}
.js .sec--card[data-rise][data-in]>.wrap{animation:fzDeck .74s cubic-bezier(.2,.8,.26,1) both}
@keyframes fzDeck{from{opacity:0;transform:translate3d(0,26px,0) scale(.988)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js [data-rv],.js .fzw>i,.js .sec--card[data-rise]>.wrap{
    opacity:1!important;transform:none!important;animation:none!important}}
/* Image boxes reserve their space before the deferred stylesheet lands, so a
   page of portraits or stills never reflows under the reader. */
.frame img,.rv-img img,.shot-i img{display:block;width:100%}
.rv-img{aspect-ratio:7/9;overflow:hidden}
.rv-img img{height:100%;object-fit:cover}
.shot-i{aspect-ratio:4/3;overflow:hidden}
.shot-i img{height:100%;object-fit:cover}
.rvw__av{flex:0 0 auto;width:44px;height:44px;border-radius:50%}
.rvws{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.rvws{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.rvws{grid-template-columns:repeat(3,1fr)}}
/* The author box and the pre-footer check box sit high on every page, so their
   layout ships inline too: otherwise they reflow from a tall stack into a grid
   when the deferred stylesheet lands, and push the page down under the reader. */
.abox{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card);padding:18px 20px;display:grid;gap:14px;max-width:760px}
@media (min-width:720px){.abox{grid-template-columns:1fr 1fr}
  .abox .abox-f,.abox p.abox-f{grid-column:1/-1}}
.abox-r{display:grid;gap:3px;min-width:0}
.abox-k{font:600 10.5px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.abox-r>b{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:-.01em;min-width:0}
.abox-d{font-size:12.5px;line-height:1.55}
.abox .abox-f,.abox p.abox-f{margin:0;font-size:12.5px;line-height:1.6}
.cbox{border-top:1px solid var(--line);padding-block:clamp(30px,3.4vw,46px)}
.cbox-l{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:74ch}
.cbox-l li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.62}
.cbox-by{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 30px;padding-top:18px;
  border-top:1px solid var(--line)}
.cbox-by span{display:grid;gap:3px;min-width:0}
.cbox-by i{font-style:normal;font:600 10.5px/1.3 var(--fm);letter-spacing:.14em;
  text-transform:uppercase}
.cbox-by b{font-family:var(--fd);font-weight:700;font-size:14.5px}
.cbox .cbox-f,.cbox p.cbox-f{margin:14px 0 0;font-size:12.5px;line-height:1.6}
/* Icons and the components that hold them. An <svg> with no width renders at
   300x150 until the stylesheet lands, so this sizing has to be inline or the
   page jumps the moment the deferred CSS arrives. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.16em;stroke-width:1.9}
.cbox-l li{display:flex;gap:11px;padding-left:0}
.cbox-l li::before{display:none}
.cbox-l .ic{margin-top:3px;width:18px;height:18px}
.cta-rea{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.cta-rea li{display:flex;align-items:center;gap:8px;padding-left:0}
.cta-rea li::before{display:none}
.glance>div{position:relative;padding-top:34px}
.glance .ic{position:absolute;top:12px;left:14px;width:17px;height:17px}
.kr a{position:relative;display:grid;gap:7px;align-content:start}
.kr a>b{display:flex;align-items:center;gap:9px}
.kr a::after{display:none}
.kr-go{position:absolute;right:16px;bottom:14px;display:inline-flex;opacity:0}
.kr-go .ic{width:18px;height:18px}
.sq{display:grid;gap:18px;grid-template-columns:1fr;margin-top:22px}
@media (min-width:620px){.sq{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.sq{grid-template-columns:repeat(3,1fr)}}
.sq-g ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sq-g a{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:999px;
  text-decoration:none;font-size:13.5px}
.sq-g .ic{width:14px;height:14px}
.pchips{display:grid;gap:10px;grid-template-columns:1fr;margin:22px 0 24px}
@media (min-width:600px){.pchips{grid-template-columns:repeat(3,1fr)}}
.btn--cart{display:inline-flex;align-items:center;gap:10px}
.btn--cart svg{width:19px;height:19px;flex:0 0 auto}
/* Anything that changes a box's size has to be inline, or the page reflows
   when the deferred stylesheet lands. */
.sec>.wrap>h2{position:relative;padding-top:18px}
.sec>.wrap>h2::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;
  border-radius:3px;transform-origin:0 50%}
.sq-g{border:1px solid var(--line);border-radius:var(--r-s);padding:18px 18px 14px}
.sq-g h3{margin:0 0 12px!important;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--fm)}
.pchip{display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-s);position:relative}
.ostrip{padding-block:clamp(22px,2.6vw,34px)}
.ostrip-in{display:grid;gap:16px;align-items:center}
@media (min-width:860px){.ostrip-in{grid-template-columns:minmax(0,1fr) auto;gap:28px}}
/* The header's order button sets the height of the whole header. */
.nav-tel{display:none}
.nav-cta{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  margin-left:10px;padding:8px 20px;line-height:1.15;text-align:center}
.nav-cta>span{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.nav-cta>i{font-style:normal;font:500 10.5px/1.2 var(--fm);letter-spacing:.06em;opacity:.88}
@media (max-width:900px){.nav-cta{display:none}}

/* long unbreakable tokens (MD5 digests, lot codes) must wrap at phone width */
code,kbd,samp{font-family:var(--fm);font-size:.92em;overflow-wrap:anywhere;word-break:break-word}
.tscroll code,td code,th code{overflow-wrap:anywhere}

/* sizing pulled into critical: these set box geometry and caused CLS */
.rs{border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  padding:22px;display:grid;gap:20px}
.rs-bars{display:grid;gap:9px}
.rvw{margin:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  padding:20px 18px 16px;display:grid;gap:12px;align-content:start}
.rs-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.rs-row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center}
.rs-score{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rvws{display:grid;gap:16px;grid-template-columns:1fr}
.rvws{display:grid;gap:16px;grid-template-columns:1fr}
.rvw__top{display:flex;gap:12px;align-items:center}
.rvw__av{flex:0 0 auto;width:44px;height:44px;border-radius:50%}
.rvw__av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--sunk);
  border:1px dashed var(--ink-3);display:block}

/* sets the header's box height: must be critical or every page shifts */
.topstrip{max-height:46px;opacity:1;transition:all .36s cubic-bezier(.3,.8,.3,1)}

/* panel + table geometry pulled into critical to stop deferred-CSS reflow */
.lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,2.6vw,36px);align-items:start;max-width:none}
.panel-h{padding:14px 16px 12px;border-bottom:7px solid var(--rule)}
.panel-f{margin:0!important;padding:12px 16px 15px;border-top:5px solid var(--rule);
  font-size:12px;color:var(--ink-2);line-height:1.6;max-width:none}
.panel-hint{margin:0!important;padding:9px 16px;font:600 10px/1 var(--fm);letter-spacing:.2em;
  text-transform:uppercase;color:var(--a-ink);background:var(--a-tint);
  border-bottom:1px solid var(--line)}
.rows{list-style:none;margin:0;padding:0 16px;display:block;max-width:none}
.row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background var(--t-hover)}
.row-n{font-size:14px;color:var(--ink);font-weight:700;line-height:1.35}
.row-a{font:700 14px/1 var(--fm);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.row-d{font:500 12.5px/1 var(--fm);color:var(--ink-3);min-width:30px;text-align:right}
.detail{position:sticky;top:112px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:24px;min-height:210px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
caption{caption-side:bottom;text-align:left;padding:13px 20px 15px;
  font:500 12px/1.6 var(--fm);color:var(--ink-3);border-top:1px solid var(--line-2)}

/* remaining box-geometry rules, pulled into critical (CLS) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;max-width:none}
.stats b{display:block;font:600 clamp(25px,3.2vw,36px)/1.15 var(--fm);letter-spacing:-.05em;
  color:var(--a-ink);font-variant-numeric:tabular-nums}
.stats span{display:block;margin-top:10px;font:500 11px/1.5 var(--fm);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.rs-count{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.rs-stars{margin:0;font-size:19px;letter-spacing:.14em;color:var(--line)}
.rs-t{height:9px;border-radius:999px;background:var(--sunk);overflow:hidden}
.rs-v{font:500 12.5px/1.3 var(--fm);color:var(--ink-2);justify-self:end}
.rs-n{font:500 12px/1.3 var(--fm);color:var(--ink-3)}
.kr{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-s);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));max-width:none}
.kr a{display:block;text-decoration:none;background:var(--card);padding:22px 20px;
  transition:background var(--t-ui) var(--e)}
.kr a{display:grid;gap:7px;align-content:start;box-shadow:var(--sh-1);
  background:var(--grad-soft)}
.cbox{border-top:1px solid var(--line);background:var(--tint);
  padding-block:clamp(30px,3.4vw,46px)}
.ctap{position:relative;overflow:hidden;border-radius:var(--r-s);background:var(--slab);
  color:var(--on-slab);padding:clamp(28px,4vw,52px);border:1px solid var(--slab-line);max-width:none}
.pchip{position:relative;display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-s);
  text-decoration:none;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--slab-line);
  transition:transform .26s var(--e),box-shadow .26s var(--e),background-color .26s var(--e)}
.ostrip{padding-block:clamp(22px,2.6vw,34px);background:var(--tint);
  border-block:1px solid var(--line)}
.lede{font-size:var(--t-2)!important;line-height:1.4;color:var(--ink)!important;
  font-family:var(--fd);font-weight:600;letter-spacing:-.025em;max-width:30ch!important}
.callout,.alert{position:relative;border:1px solid var(--line);border-left:3px solid var(--data);
  border-radius:var(--r-xs);padding:20px 22px;background:var(--card);max-width:none}
.finds{display:grid;gap:0;max-width:none;border-top:1px solid var(--line)}
.find-body{padding:0 0 22px 46px}
.steps{list-style:none;padding:0;counter-reset:st;display:grid;gap:0;max-width:none;
  border-top:1px solid var(--line)}
/*!CRIT-END-4*/

/* ==========================================================================
   v7.1 MOTION LAYER — "fizz"
   Everything below is additive, transform/opacity only, and switched off
   wholesale by the reduced-motion block at the very end of this file.
   ========================================================================== */

/* ---- 0. defaults for every custom property the motion layer reads ------- */
:root{--rv:0;--w:0;--m:0;--r:0;--py:0px;--rx:0deg;--ry:0deg;--tx:0px;--ty:0px;
  --gx:50%;--gy:50%;--d:15s;--t:0s}

/* ---- 1. scroll progress, with a glowing head ---------------------------- */
.progress{background:transparent}
.progress::before{content:"";display:block;height:100%;width:100%;transform-origin:0 50%;
  transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--a),#22B9C7 46%,var(--a-dk));
  box-shadow:0 0 14px rgba(34,185,199,.75),0 0 3px rgba(34,185,199,.9)}
.progress::after{content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;
  left:calc(var(--p,0) * 100%);margin-left:-4px;background:#8BE6EF;
  box-shadow:0 0 12px 3px rgba(34,185,199,.65);opacity:calc(var(--p,0) * 3)}

/* ---- 2. universal staggered reveal -------------------------------------- */
.js [data-rv]{opacity:0;transform:translate3d(0,22px,0)}
.js [data-rv][data-in],.js [data-in] [data-rv],.js [data-in] [data-rv][data-in]{
  animation:fzRise .52s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--rv,0) * 48ms)}
@keyframes fzRise{from{opacity:0;transform:translate3d(0,22px,0)}
                  to{opacity:1;transform:none}}

/* a section's own entrance: the card deck lifts into place */
.js .sec--card[data-rise]>.wrap{opacity:0;transform:translate3d(0,26px,0) scale(.988)}
.js .sec--card[data-rise][data-in]>.wrap{
  animation:fzDeck .74s cubic-bezier(.2,.8,.26,1) both}
@keyframes fzDeck{from{opacity:0;transform:translate3d(0,26px,0) scale(.988)}
                  to{opacity:1;transform:none}}

/* ---- 3. headline: words slide out from under a mask --------------------- */
.fzw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;
  margin-bottom:-.08em}
.fzw>i{display:inline-block;font-style:inherit;transform:translateY(105%)}
.js .fzw[data-in]>i,.js [data-in] .fzw>i{
  animation:fzWord .78s cubic-bezier(.17,.84,.26,1) both;
  animation-delay:calc(var(--w,0) * 52ms)}
@keyframes fzWord{from{transform:translateY(105%)}to{transform:none}}

/* the accent half of the hero headline gets a sweeping underline */
.hero h1 em{position:relative;padding-bottom:.17em;
  background-image:linear-gradient(90deg,var(--a),var(--a-dk));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 .05em}
.js .hero h1 em{animation:fzUnder 1.05s cubic-bezier(.2,.8,.3,1) .62s both}
@keyframes fzUnder{to{background-size:100% .05em}}

/* ---- 4. the soda fizz: bubbles rising behind the bottle ------------------ */
.fizz{position:absolute;left:0;right:0;top:0;height:min(100%,820px);
  overflow:hidden;pointer-events:none;z-index:0;contain:strict}
.fizz i{position:absolute;bottom:-12%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0%,rgba(170,240,246,.5) 26%,
    rgba(34,185,199,.12) 56%,rgba(85,214,226,.05) 72%,transparent 74%);
  box-shadow:inset 0 0 0 1px rgba(190,244,248,.5),inset -2px -3px 7px rgba(255,255,255,.32);
  opacity:0;will-change:transform,opacity;contain:strict}
.js .fizz i{animation:fzBub var(--d,15s) linear var(--t,0s) infinite}
@keyframes fzBub{
  0%{transform:translate3d(0,0,0) scale(.55);opacity:0}
  7%{opacity:.95}
  50%{transform:translate3d(16px,-420px,0) scale(1)}
  84%{opacity:.55}
  100%{transform:translate3d(-12px,-880px,0) scale(1.2);opacity:0}}

/* ---- 5. aurora wash over the hero and the dark slabs -------------------- */
/* The aurora moves by transform, not by background-position: a background
   repaint of a full-width hero on every frame is the single most expensive
   thing this page could do, and a transform composites instead. */
.hero::before{inset:-22%;will-change:transform}
.js .hero::before{animation:fzAurora 26s ease-in-out infinite alternate}
@keyframes fzAurora{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(2%,2%,0) scale(1.07)}
  100%{transform:translate3d(-1%,3%,0) scale(1.03)}}
.slab{position:relative;overflow:hidden}
.slab>.wrap{position:relative;z-index:1}
.slab::after{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:radial-gradient(44% 40% at 18% 12%,rgba(85,214,226,.13),transparent 62%),
             radial-gradient(40% 46% at 86% 88%,rgba(90,140,235,.14),transparent 64%)}
.slab::after{will-change:transform}
.js .slab::after{animation:fzDrift 30s ease-in-out infinite alternate}
@keyframes fzDrift{from{transform:translate3d(-2%,-1%,0) scale(1)}
                   to{transform:translate3d(3%,2%,0) scale(1.08)}}

/* ---- 6. hero cursor glow (fine pointers only) --------------------------- */
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;
  z-index:0;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(closest-side,rgba(85,214,226,.17),transparent 72%);
  transform:translate3d(var(--gx,0),var(--gy,0),0) translate(-50%,-50%)}
@media (hover:hover) and (pointer:fine){.js .hero.is-live .hero-glow{opacity:1}}
@media (max-width:899px){.hero-glow{display:none}}

/* ---- 7. product stage: parallax, spin-free float, pulsing ring ---------- */
.stage{perspective:1000px}
.stage img{transform:translate3d(0,var(--py,0px),0)}
.js .stage img{animation:v7float 10s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.js .stage.is-tilt img{animation:none;
  transform:translate3d(var(--tx,0),calc(var(--py,0px) + var(--ty,0px)),0)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.stage-glow{z-index:0}
.stage::before{content:"";position:absolute;width:min(78%,370px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(85,214,226,.22);pointer-events:none}
.js .stage::before{animation:fzRing 4.6s ease-out infinite}
.stage-ring2{position:absolute;width:min(62%,300px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(85,214,226,.3);pointer-events:none;z-index:0}
.js .stage-ring2{animation:fzRing 4.6s ease-out 2.3s infinite}
@keyframes fzRing{0%{transform:scale(.72);opacity:0}
                  22%{opacity:.85}
                  100%{transform:scale(1.26);opacity:0}}
.tag{opacity:0;transform:translate3d(0,10px,0) scale(.9)}
.js .tag{animation:fzPop .72s cubic-bezier(.2,1.5,.42,1) both}
.js .tag--1{animation-delay:.72s}
.js .tag--2{animation-delay:.92s}
@keyframes fzPop{to{opacity:1;transform:none}}
.js .tag i{animation:fzBeat 3.2s ease-in-out 2s infinite}
@keyframes fzBeat{0%,100%{transform:scale(1)}8%{transform:scale(1.14)}16%{transform:scale(1)}}

/* ---- 8. buttons: shine sweep, press, magnetic pull ---------------------- */
.btn{position:relative;overflow:hidden;
  transition:transform .26s cubic-bezier(.2,.9,.3,1),box-shadow .26s ease,color .2s ease}
.btn>span,.btn>svg{position:relative;z-index:2}
.btn::before{content:"";position:absolute;top:0;left:-120%;width:62%;height:100%;z-index:1;
  pointer-events:none;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent)}
.js .btn:hover::before{animation:fzShine .72s ease-out}
@keyframes fzShine{to{left:140%}}
.btn--primary:hover{box-shadow:0 10px 26px -8px rgba(12,110,120,.6)}
.btn:active{transform:scale(.97)}
.js .btn--cart{animation:fzNudge 6s ease-in-out 3s infinite}
@keyframes fzNudge{0%,88%,100%{transform:none}
  91%{transform:translateY(-3px)}94%{transform:translateY(0)}97%{transform:translateY(-1.5px)}}

/* ---- 9. tilt + lift on anything card-shaped ---------------------------- */
.card,.pack,.kr a,.shot,.rv,.ing,.seal-cell,.glance>div{
  transition:transform .32s cubic-bezier(.2,.8,.3,1),box-shadow .32s ease,
             border-color .32s ease,background-color .32s ease}
.js [data-tilt]{transform-style:preserve-3d;will-change:transform}
.js [data-tilt].is-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
  translate3d(0,-4px,0)}
.card:hover,.shot:hover,.seal-cell:hover{box-shadow:0 16px 38px -18px rgba(16,24,40,.42)}
.kr a{position:relative}
.kr a::after{content:"\2192";position:absolute;right:18px;top:50%;margin-top:-.6em;
  opacity:0;transform:translateX(-8px);transition:all .3s cubic-bezier(.2,.8,.3,1);
  color:var(--a-ink);font-weight:700}
.kr a:hover::after{opacity:1;transform:translateX(0)}
.kr a:hover{transform:translate3d(0,-3px,0)}
.glance>div:hover{background:rgba(85,214,226,.1)}

/* ---- 10. chapter numeral: a ring that draws itself ---------------------- */
.sec>.wrap>.eyebrow,.chapter{position:relative}
.js [data-in] .chapter::before{animation:fzSpin .9s cubic-bezier(.3,.8,.3,1) both}
@keyframes fzSpin{from{transform:rotate(-170deg) scale(.7);opacity:0}
                  to{transform:none;opacity:1}}

/* ---- 11. figures: a wipe reveal, then a slow drift ---------------------- */
.frame{position:relative}
.js .frame img{clip-path:inset(0 0 100% 0);transform:scale(1.05)}
.js [data-in] .frame img,.js .frame[data-in] img{
  animation:fzWipe .95s cubic-bezier(.22,.8,.26,1) .08s both}
@keyframes fzWipe{from{clip-path:inset(0 0 100% 0);transform:scale(1.05)}
                  to{clip-path:inset(0 0 0 0);transform:none}}
.frame{overflow:hidden}
.js figure:hover .frame img{transform:scale(1.035);transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.shot-i img{transition:transform 1s cubic-bezier(.2,.8,.3,1)}
.js .shot:hover .shot-i img{transform:scale(1.07)}

/* ---- 12. tables: rows fade in down the page ---------------------------- */
.js [data-in] .tw tbody tr,.js [data-in] .tscroll tbody tr{
  animation:fzRow .46s ease-out both;animation-delay:calc(var(--r,0) * 44ms)}
@keyframes fzRow{from{opacity:0;transform:translate3d(0,9px,0)}to{opacity:1;transform:none}}
.tw tbody tr,.tscroll tbody tr{transition:background-color .22s ease}
.tw tbody tr:hover,.tscroll tbody tr:hover{background:rgba(12,110,120,.045)}
.slab .tw tbody tr:hover,.slab .tscroll tbody tr:hover{background:rgba(85,214,226,.07)}

/* ---- 13. the answer block: a highlight sweeps its key figures ----------- */
.answer b{background-image:linear-gradient(var(--a),var(--a));
  background-repeat:no-repeat;background-position:0 104%;background-size:0 .13em}
.slab .answer b,.hero .answer b{background-image:linear-gradient(var(--a-dk),var(--a-dk))}
.js [data-in] .answer b{animation:fzMark .7s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(.25s + var(--m,0) * 110ms)}
@keyframes fzMark{to{background-size:100% .13em}}

/* ---- 14. list ticks draw themselves ------------------------------------ */
.js [data-in] .ticks>li{animation:fzRise .55s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(.35s + var(--i,0) * 90ms)}
.js [data-in] .pros li,.js [data-in] .pc li{
  animation:fzSlide .5s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--i,0) * 62ms)}
@keyframes fzSlide{from{opacity:0;transform:translate3d(-12px,0,0)}to{opacity:1;transform:none}}

/* ---- 15. the seal row and the glance grid pop in ----------------------- */
.js [data-in] .glance>div{animation:fzPopIn .5s cubic-bezier(.2,1.3,.4,1) both;
  animation-delay:calc(var(--i,0) * 55ms)}
.js [data-in] .seal-cell,.js [data-in] .shot{
  animation:fzPopIn .55s cubic-bezier(.2,1.2,.4,1) both;
  animation-delay:calc(var(--i,0) * 70ms)}
@keyframes fzPopIn{from{opacity:0;transform:translate3d(0,14px,0) scale(.95)}
                   to{opacity:1;transform:none}}

/* ---- 16. the ten portraits deal out like a hand of cards --------------- */
.js [data-in] .rv{animation:fzDeal .66s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--i,0) * 72ms)}
@keyframes fzDeal{from{opacity:0;transform:translate3d(0,26px,0) rotate(-1.6deg) scale(.95)}
                  to{opacity:1;transform:none}}
.rv{transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease}
.js .rv:hover{transform:translate3d(0,-6px,0) rotate(.4deg);
  box-shadow:0 22px 44px -20px rgba(16,24,40,.5)}

/* ---- 17. sticky header condenses on scroll ---------------------------- */
.site-head{transition:transform .4s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,
  backdrop-filter .3s ease}
.site-head.is-stuck{box-shadow:0 10px 30px -18px rgba(11,27,58,.5);
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px) saturate(1.4)}
/* The header is position:sticky, so it stays in normal flow: anything that
   changes its height on scroll moves every element below it. The scrolled
   state is therefore purely visual - shadow, blur and tint - and no rule
   here touches a box dimension. */

/* ---- 18. nav + link underlines grow from the left --------------------- */
.nav>a{position:relative}
.nav>a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--a);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.nav>a:hover::after{transform:scaleX(1)}
.railnav a{position:relative;transition:color .25s ease,transform .25s ease}
.railnav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--a);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.railnav a.on::after,.railnav a:hover::after{transform:scaleX(1)}
.railnav a.on{color:var(--a-ink)}

/* ---- 19. FAQ answers slide open --------------------------------------- */
.faq>details>.faq-a{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .36s cubic-bezier(.3,.8,.3,1)}
.faq>details[open]>.faq-a{grid-template-rows:1fr}
.faq>details>.faq-a>*{min-height:0;overflow:hidden}
.faq>details>summary{transition:color .22s ease,padding-left .28s cubic-bezier(.2,.8,.3,1)}
.faq>details>summary:hover{padding-left:4px}

/* ---- 20. back to top, with its own progress ring ---------------------- */
.totop{position:fixed;right:18px;bottom:18px;z-index:95;width:46px;height:46px;border:0;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;
  background:var(--slab);color:#fff;opacity:0;transform:translate3d(0,14px,0) scale(.85);
  pointer-events:none;transition:all .36s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 10px 26px -10px rgba(11,27,58,.6)}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}
.totop svg{width:18px;height:18px;position:relative;z-index:1}
.totop circle{fill:none;stroke-width:2.4}
.totop .tt-ring{position:absolute;inset:0;transform:rotate(-90deg)}
.totop .tt-bg{stroke:rgba(255,255,255,.2)}
.totop .tt-fg{stroke:var(--a-dk);stroke-dasharray:132;
  stroke-dashoffset:calc(132 - 132 * var(--p,0));transition:stroke-dashoffset .1s linear}
@media (min-width:720px){.totop{right:26px;bottom:26px;width:52px;height:52px}}
body:has(.buybar.is-on) .totop{bottom:88px}

/* ---- 21. the bound and meter bars count their own width --------------- */
.bound-r,.bar{transition:background-color .25s ease}
.js .bound-r:hover,.js .bar:hover{background:rgba(12,110,120,.05)}
.js [data-in] .bound-r{animation:fzSlide .5s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--i,0) * 48ms)}

/* ---- 22. a soft pulse on the one printed figure ----------------------- */
.js [data-in] .bar--here .track>span{animation:fzGlow 2.4s ease-in-out 1.2s 2}
@keyframes fzGlow{0%,100%{box-shadow:none}
  50%{box-shadow:0 0 0 3px rgba(34,185,199,.28)}}

/* ---- 23. section dividers draw in ------------------------------------- */
.sec h2{position:relative}
.js [data-in] .sec h2::after,.js .sec[data-in] h2::after{}
.answer{position:relative;overflow:hidden}
.answer::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:var(--a);transform:scaleX(0);transform-origin:0 50%}
.js [data-in] .answer::before{animation:fzLine .8s cubic-bezier(.2,.8,.3,1) both}
@keyframes fzLine{to{transform:scaleX(1)}}

/* ---- 24. (no page-load curtain: it would delay first paint for nothing) */

/* ---- 25. respect the setting — this switches the whole layer off ------- */
@media (prefers-reduced-motion: reduce){
  .js [data-rv],.js [data-rv][data-in],.js [data-in] [data-rv],
  .js .sec--card[data-rise]>.wrap,.js .sec--card[data-rise][data-in]>.wrap,
  .fzw>i,.js .fzw[data-in]>i,.js [data-in] .fzw>i,
  .js .hero h1 em,.js .fizz i,.js .hero::before,.js .slab::after,
  .js .stage img,.js .stage::before,.tag,.js .tag,.js .tag i,
  .js .btn--cart,.js .btn:hover::before,
  .js [data-in] .frame img,.js .frame[data-in] img,.js .frame img,
  .js [data-in] .tw tbody tr,.js [data-in] .tscroll tbody tr,
  .js [data-in] .answer b,.answer b,
  .js [data-in] .ticks>li,.js [data-in] .pros li,.js [data-in] .pc li,
  .js [data-in] .glance>div,.js [data-in] .seal-cell,.js [data-in] .shot,
  .js [data-in] .rv,.js .rv:hover,.js [data-in] .bound-r,
  .js [data-in] .bar--here .track>span,.js [data-in] .answer::before,
  .js [data-in] .chapter::before{
    animation:none!important;transition:none!important;opacity:1!important;
    transform:none!important;clip-path:none!important;
    background-size:100% .13em,auto!important}
  .hero h1 em{background-size:100% .05em}
  .answer::before{transform:scaleX(1)}
  .fizz,.hero-glow,.stage::before{display:none!important}
  .js [data-tilt].is-tilt{transform:none!important}
}


/* ---- 26. reduced motion: a blanket kill switch -------------------------
   Every animation is forced to its finished frame instantly, so the page is
   complete and still. This is last in the file deliberately. */
@media (prefers-reduced-motion: reduce){
  .js *,.js *::before,.js *::after{
    animation-duration:1ms!important;animation-delay:0s!important;
    animation-iteration-count:1!important;transition-duration:1ms!important;
    transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-rv],.js .fzw>i,.js .tag{opacity:1!important;transform:none!important}
  .js .frame img{clip-path:none!important;transform:none!important}
  .js .hero h1 em{background-size:100% .05em!important}
  .js .answer b{background-size:100% .13em!important}
  .js .answer::before{transform:scaleX(1)!important}
  .fizz,.hero-glow{display:none!important}
}

/* ==========================================================================
   FILL-IN SLOTS
   The block below is the fixed slot specification, copied exactly. The colours
   are deliberately hard-coded so a slot looks identical on every site and on
   every background, light or dark.
   ========================================================================== */
.slot{background:#FFE14D;color:#1B1208;font-weight:750;font-style:normal;padding:1px 7px 1px 5px;border-radius:6px;outline:2px dashed #C2410C;outline-offset:1px;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:normal}
.slot::before{content:"\270E";display:inline-block;margin-right:4px;font-weight:400}
a .slot{text-decoration:none}
.slot.is-flash{animation:slotflash 1.4s ease-out}
@keyframes slotflash{0%,40%{box-shadow:0 0 0 0 rgba(194,65,12,.8)}100%{box-shadow:0 0 0 14px rgba(194,65,12,0)}}
.rvw--slot{position:relative;outline:2px dashed #C2410C;outline-offset:-2px}
.rvw--slot::after{content:"Fill in";position:absolute;top:-11px;right:14px;padding:1px 9px;border-radius:999px;background:#FFE14D;color:#1B1208;font-size:12px;font-weight:800}
.slotfind{position:fixed;left:14px;bottom:84px;z-index:70;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:2px dashed #C2410C;border-radius:12px;background:#FFE14D;color:#1B1208;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;box-shadow:0 10px 24px -10px rgba(0,0,0,.4)}
.slotfind:focus-visible{outline:3px solid #1B1208;outline-offset:2px}
.rs .slot,.rvw__meta .slot,.rvw__foot .slot{white-space:nowrap}

/* ---- slot housekeeping for this site ----------------------------------- */
.slot{line-height:1.45;margin-inline:2px}
/* the dashed outline sits outside the box, so inline slots need breathing room */
.rs-score .slot{margin-right:10px}
.rs-count .slot,.cbox-by .slot,.foot-rev .slot{margin-inline:3px}
.rvw__meta .slot,.rvw__foot .slot{margin-inline:0}
.slot *{color:inherit}
.byline .slot,.abox .slot,.cbox .slot,.foot-rev .slot{font-size:.94em}
@media (max-width:460px){
  .slot{padding:1px 5px 1px 4px;font-size:.95em}
  .slotfind{left:10px;right:10px;bottom:78px;font-size:13.5px;justify-content:center}
}
/* a slot never drags the page sideways */
.slot{max-width:100%;overflow-wrap:anywhere}

/* ---- the author / reviewer box ----------------------------------------- */
.abox{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--card);padding:18px 20px;display:grid;gap:14px;max-width:760px}
@media (min-width:720px){.abox{grid-template-columns:1fr 1fr}}
.abox-r{display:grid;gap:3px;min-width:0}
.abox-k{font:600 10.5px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3)}
.abox-r>b{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink);
  letter-spacing:-.01em;min-width:0}
.abox-d{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.abox .abox-f,.abox p.abox-f{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
@media (min-width:720px){.abox-f{grid-column:1/-1}}
.abox-f a{color:var(--a-ink)}
.slab .abox,.hero .abox{background:var(--slab-2);border-color:var(--slab-line)}
.slab .abox-r>b,.hero .abox-r>b{color:#fff}
.slab .abox-d,.hero .abox-d,.slab .abox-k,.hero .abox-k,
.slab .abox-f,.hero .abox-f{color:var(--on-slab-2)}
.slab .abox-f a,.hero .abox-f a{color:var(--a-dk)}

/* ---- the pre-footer "checked against" box ------------------------------ */
.cbox{border-top:1px solid var(--line);background:var(--tint);
  padding-block:clamp(30px,3.4vw,46px)}
.cbox h2{margin:0 0 16px!important;font-size:var(--t-2)}
.cbox-l{list-style:none;margin:0;padding:0;display:grid;gap:11px;max-width:74ch}
.cbox-l li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.62;
  color:var(--ink-2)}
.cbox-l li::before{content:"";position:absolute;left:2px;top:9px;width:11px;height:2px;
  background:var(--a)}
.cbox-by{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 30px;
  padding-top:18px;border-top:1px solid var(--line)}
.cbox-by span{display:grid;gap:3px;min-width:0}
.cbox-by i{font-style:normal;font:600 10.5px/1.3 var(--fm);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.cbox-by b{font-family:var(--fd);font-weight:700;font-size:14.5px;color:var(--ink)}
.cbox .cbox-f,.cbox p.cbox-f{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.cbox-f a{color:var(--a-ink)}

/* ---- the rating summary ------------------------------------------------ */
.rs{border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  padding:22px;display:grid;gap:20px}
.rs[data-unconfirmed]{border-style:dashed;border-color:#C2410C}
.rs-head{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.rs-score{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rs-score>b{font:600 clamp(28px,3.6vw,40px)/1.2 var(--fm);color:var(--ink);
  letter-spacing:-.04em}
.rs-score>span{font-size:13px;color:var(--ink-3)}
.rs-stars{margin:0;font-size:19px;letter-spacing:.14em;color:var(--line)}
.rs-count{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.rs-bars{display:grid;gap:9px}
.rs-row{display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:12px;align-items:center}
.rs-n{font:500 12px/1.3 var(--fm);color:var(--ink-3)}
.rs-t{height:9px;border-radius:999px;background:var(--sunk);overflow:hidden}
.rs-t>i{display:block;height:100%;width:var(--w,0%);background:var(--a);border-radius:999px}
.rs-v{font:500 12.5px/1.3 var(--fm);color:var(--ink-2);justify-self:end}
.rs .rs-foot{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:14px}
@media (max-width:520px){.rs-row{grid-template-columns:54px minmax(0,1fr)}
  .rs-v{grid-column:1/-1;justify-self:start}}

/* ---- the six customer-review slot cards -------------------------------- */
.rvws{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.rvws{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.rvws{grid-template-columns:repeat(3,1fr)}}
.rvw{margin:0;border:1px solid var(--line);border-radius:var(--r-s);background:var(--card);
  padding:20px 18px 16px;display:grid;gap:12px;align-content:start}
.rvw__top{display:flex;gap:12px;align-items:center}
.rvw__av{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--sunk);
  border:1px dashed var(--ink-3);display:block}
.rvw__name{margin:0;font-family:var(--fd);font-weight:700;font-size:15px;color:var(--ink)}
.rvw__meta{margin:4px 0 0;font:500 12px/1.6 var(--fm);color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:4px 6px}
.rvw__text{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.rvw__foot{margin:0;font:500 12px/1.6 var(--fm);color:var(--ink-3);
  display:flex;flex-wrap:wrap;gap:4px 6px;padding-top:11px;border-top:1px solid var(--line)}
.rvw .rvw__slotline{margin:0;font:600 11.5px/1.5 var(--fm);letter-spacing:.04em;
  color:var(--slotline)}
.slab .rvw .rvw__slotline{color:#7FE0EA}
:root{--slotline:#084E56}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--slotline:#8FEAB0}}
:root[data-theme="dark"]{--slotline:#8FEAB0}
.rvw:not(.rvw--slot) .rvw__slotline{display:none}

/* ---- one source line at the foot of a page ----------------------------- */
.srcnote{margin:22px 0 0;padding:14px 16px;border-left:3px solid var(--a);
  background:var(--tint);border-radius:0 var(--r-xs) var(--r-xs) 0;
  font:500 13.5px/1.65 var(--fb);color:var(--ink-2)}
.slab .srcnote{background:var(--slab-2);border-left-color:var(--a-dk);color:var(--on-slab-2)}

/* ==========================================================================
   ORDER PATHS — the header CTA, the mid-page strip, the price chips
   ========================================================================== */

/* ---- the header button carries the lowest published price -------------- */
.nav-tel{display:none}
.nav-cta{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  margin-left:10px;padding:8px 20px;line-height:1.15;text-align:center}
.nav-cta>span{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.nav-cta>i{font-style:normal;font:500 10.5px/1.2 var(--fm);letter-spacing:.06em;opacity:.88}
@media (max-width:900px){.nav-cta{display:none}}

/* ---- a bigger primary button, used wherever ordering is the point ------ */
.btn--xl{padding:18px 32px;font-size:16px}
.btn--cart{display:inline-flex;align-items:center;gap:10px}
.btn--cart svg{width:19px;height:19px;flex:0 0 auto}

/* ---- the three published packs, as chips ------------------------------- */
.pchips{display:grid;gap:10px;grid-template-columns:1fr;margin:22px 0 24px}
@media (min-width:600px){.pchips{grid-template-columns:repeat(3,1fr)}}
.pchip{position:relative;display:grid;gap:2px;padding:14px 16px;border-radius:var(--r-s);
  text-decoration:none;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--slab-line);
  transition:transform .26s var(--e),box-shadow .26s var(--e),background-color .26s var(--e)}
.pchip:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);
  box-shadow:inset 0 0 0 1.5px var(--a-dk)}
.pchip b{font-family:var(--fd);font-weight:700;font-size:13.5px;color:#fff}
.pchip span{font:600 20px/1.2 var(--fm);color:var(--a-dk);letter-spacing:-.03em}
.pchip em{font-style:normal;font:500 11.5px/1.3 var(--fm);color:var(--on-slab-2)}
.pchip i{position:absolute;top:-9px;right:12px;font-style:normal;padding:2px 9px;
  border-radius:999px;background:var(--a);color:var(--a-on);
  font:700 10px/1.5 var(--fm);letter-spacing:.07em;text-transform:uppercase}
.pchip--best{background:rgba(85,214,226,.12);box-shadow:inset 0 0 0 1.5px rgba(85,214,226,.45)}

/* ---- the reasons row under the CTA ------------------------------------- */
.cta-rea{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.cta-rea li{position:relative;padding-left:22px;font-size:13.5px;color:var(--on-slab-2)}
.cta-rea li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:6px;
  border-left:2px solid var(--a-dk);border-bottom:2px solid var(--a-dk);
  transform:rotate(-45deg)}
.ctap-fine{margin:18px 0 0;font-size:12.5px;line-height:1.6;color:var(--on-slab-2)}
.ctap-fine a{color:var(--a-dk)}

/* ---- the mid-page order strip ------------------------------------------ */
.ostrip{padding-block:clamp(22px,2.6vw,34px);background:var(--tint);
  border-block:1px solid var(--line)}
.ostrip-in{display:grid;gap:16px;align-items:center}
@media (min-width:860px){.ostrip-in{grid-template-columns:minmax(0,1fr) auto;gap:28px}}
.ostrip-t{display:grid;gap:5px;min-width:0}
.ostrip-t b{font-family:var(--fd);font-weight:700;font-size:var(--t-1);color:var(--ink);
  letter-spacing:-.02em}
.ostrip-t span{font-size:14px;line-height:1.6;color:var(--ink-2)}
.ostrip-a{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ostrip-alt{font-size:13.5px;color:var(--a-ink);font-weight:600}
.slab .ostrip{background:var(--slab-2);border-block-color:var(--slab-line)}

/* ---- the sticky bar gains the prices and a second route ---------------- */
.buybar-act{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.buybar-alt{font-size:13px;color:var(--a-dk);font-weight:600;white-space:nowrap}
.buybar .wrap{min-width:0}
.buybar-txt{min-width:0;flex:1 1 auto}
.buybar-txt b,.buybar-txt small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buybar-act{flex:0 0 auto}
@media (max-width:760px){.buybar-alt{display:none}}
@media (max-width:420px){
  /* at phone width the bar keeps the price and the button, nothing else */
  .buybar-txt small{display:none}
  .buybar .btn{padding:12px 15px;font-size:12.5px}
  .buybar .btn svg{display:none}}

/* ---- the page head keeps one quiet line; authorship moved to the foot --- */
.pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:18px 0 0;
  padding-top:16px;border-top:1px solid var(--line);
  font:500 13px/1.5 var(--fm);color:var(--ink-3)}
.pmeta b{color:var(--ink-2);font-weight:600}
.pmeta a{color:var(--a-ink);text-decoration:none;
  box-shadow:0 1px 0 color-mix(in srgb,var(--a-ink) 40%,transparent)}
.pmeta a:hover{box-shadow:0 1px 0 var(--a-ink)}
.slab .pmeta,.hero .pmeta{color:var(--on-slab-2);border-top-color:var(--slab-line)}
.slab .pmeta b,.hero .pmeta b{color:#fff}
.slab .pmeta a,.hero .pmeta a{color:var(--a-dk);box-shadow:none;text-decoration:underline}

/* ---- the signed block at the foot of every page ------------------------ */
.cbox .byline{margin-top:18px;padding-top:18px}
.cbox .abox{margin-top:18px}
.cbox-h3{margin:30px 0 14px!important;font-size:var(--t-0)}
.cbox .eyebrow{margin-bottom:10px}

/* ==========================================================================
   MODERN SURFACE LAYER — icons, gradients, elevation
   ========================================================================== */

/* ---- tokens ------------------------------------------------------------ */
:root{
  --grad-a:linear-gradient(135deg,#108A96 0%,#0C6E78 48%,#084E56 100%);
  --grad-a-hi:linear-gradient(135deg,#17A0AD 0%,#0F7C88 48%,#0A5A63 100%);
  --grad-slab:linear-gradient(165deg,#1E2A6B 0%,#141B4D 55%,#0C1138 100%);
  --grad-soft:linear-gradient(165deg,#FFFFFF 0%,#F7F8FA 100%);
  --grad-tint:linear-gradient(135deg,rgba(85,214,226,.16),rgba(85,214,226,.04));
  --grad-line:linear-gradient(90deg,var(--a),rgba(12,110,120,0));
  --sh-1:0 1px 2px rgba(16,24,40,.06);
  --sh-2:0 4px 10px -4px rgba(16,24,40,.12),0 1px 2px rgba(16,24,40,.05);
  --sh-3:0 14px 32px -16px rgba(16,24,40,.26),0 2px 6px rgba(16,24,40,.05);
  --sh-4:0 28px 60px -28px rgba(16,24,40,.38),0 4px 12px rgba(16,24,40,.07);
  --sh-a:0 12px 28px -10px rgba(12,110,120,.46);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --grad-soft:linear-gradient(165deg,#131C2E 0%,#0D1424 100%);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 10px -4px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --sh-3:0 14px 32px -16px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.4);
  --sh-4:0 28px 60px -28px rgba(0,0,0,.72),0 4px 12px rgba(0,0,0,.45);
}}
:root[data-theme="dark"]{
  --grad-soft:linear-gradient(165deg,#131C2E 0%,#0D1424 100%);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 10px -4px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --sh-3:0 14px 32px -16px rgba(0,0,0,.62),0 2px 6px rgba(0,0,0,.4);
  --sh-4:0 28px 60px -28px rgba(0,0,0,.72),0 4px 12px rgba(0,0,0,.45);
}

/* ---- the sprite itself never renders ----------------------------------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1.05em;height:1.05em;flex:0 0 auto;vertical-align:-.16em;
  color:var(--a-ink);stroke-width:1.9}
.slab .ic,.hero .ic,.ctap .ic,.buybar .ic{color:var(--a-dk)}

/* ---- buttons get the gradient and real elevation ----------------------- */
.btn--primary{background:var(--grad-a);box-shadow:var(--sh-a)}
.btn--primary:hover{background:var(--grad-a-hi);box-shadow:0 16px 34px -10px rgba(12,110,120,.56)}
.btn--primary::after{display:none}

/* ---- section cards lift, and carry a gradient hairline ----------------- */
@media (min-width:860px){
  .sec--card>.wrap{box-shadow:var(--sh-2);background:var(--grad-soft)}
  .sec--card>.wrap:hover{box-shadow:var(--sh-3)}
}
.sec>.wrap>h2{position:relative;padding-top:18px}
.sec>.wrap>h2::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;
  border-radius:3px;background:var(--grad-line);transform-origin:0 50%;transform:scaleX(0)}
.js [data-in]>h2::before,.js .sec[data-in]>.wrap>h2::before,
.js [data-in] h2::before{animation:mgLine .66s cubic-bezier(.2,.8,.3,1) .1s both}
@keyframes mgLine{to{transform:scaleX(1)}}
.slab .sec>.wrap>h2::before{background:linear-gradient(90deg,var(--a-dk),rgba(85,214,226,0))}

/* ---- the chapter numeral becomes a gradient pill ----------------------- */
.sec>.wrap>.eyebrow{box-shadow:var(--sh-1)}

/* ---- quick facts: icon, label, value ----------------------------------- */
.glance>div{position:relative;padding-top:34px}
.glance .ic{position:absolute;top:12px;left:14px;width:17px;height:17px}

/* ---- keep-reading cards --------------------------------------------------*/
.kr a{display:grid;gap:7px;align-content:start;box-shadow:var(--sh-1);
  background:var(--grad-soft)}
.kr a:hover{box-shadow:var(--sh-3)}
.kr a>b{display:flex;align-items:center;gap:9px}
.kr a::after{display:none}
.kr-go{position:absolute;right:16px;bottom:14px;display:inline-flex;opacity:0;
  transform:translateX(-6px);transition:all .3s cubic-bezier(.2,.8,.3,1)}
.kr-go .ic{width:18px;height:18px}
.kr a:hover .kr-go{opacity:1;transform:translateX(0)}

/* ---- the checked-against list and the CTA reasons --------------------- */
.cbox-l li{display:flex;gap:11px;padding-left:0}
.cbox-l li::before{display:none}
.cbox-l .ic{margin-top:3px;width:18px;height:18px}
.cta-rea li{display:flex;align-items:center;gap:8px;padding-left:0}
.cta-rea li::before{display:none}

/* ---- what people search ------------------------------------------------ */
.sq{display:grid;gap:18px;grid-template-columns:1fr;margin-top:22px}
@media (min-width:620px){.sq{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.sq{grid-template-columns:repeat(3,1fr)}}
.sq-g{border:1px solid var(--line);border-radius:var(--r-s);padding:18px 18px 14px;
  background:var(--grad-soft);box-shadow:var(--sh-1);
  transition:box-shadow .3s var(--e),transform .3s var(--e)}
.sq-g:hover{box-shadow:var(--sh-3);transform:translateY(-3px)}
.sq-g h3{margin:0 0 12px!important;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-family:var(--fm);color:var(--ink-3)}
.sq-g ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.sq-g a{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:999px;
  text-decoration:none;font-size:13.5px;color:var(--ink-2);background:var(--sunk);
  transition:all .24s var(--e)}
.sq-g a:hover{background:var(--a-tint);color:var(--a-ink);transform:translateX(3px)}
.sq-g .ic{width:14px;height:14px;opacity:.65}
.slab .sq-g{background:var(--slab-2);border-color:var(--slab-line)}
.slab .sq-g a{background:rgba(255,255,255,.05);color:var(--on-slab-2)}
.slab .sq-g a:hover{background:rgba(85,214,226,.14);color:#fff}
.slab .sq-g h3{color:var(--on-slab-2)}

/* ---- the order strip and the price chips gain depth -------------------- */
.ostrip{background:var(--grad-tint);border-block-color:var(--a-line)}
.pchip{box-shadow:inset 0 0 0 1px var(--slab-line),var(--sh-1)}
.pchip--best{box-shadow:inset 0 0 0 1.5px rgba(85,214,226,.5),0 10px 26px -14px rgba(85,214,226,.5)}
.pchip i{background:var(--grad-a)}

/* ---- the hero and the dark slabs take the gradient --------------------- */
.hero{background:var(--grad-slab)}
.slab{background:var(--grad-slab)}
.buybar{background:var(--grad-slab);box-shadow:0 -14px 34px -22px rgba(0,0,0,.7)}
.site-foot{background:var(--grad-slab)}

/* ---- tables, panels and figures sit on the elevation scale ------------- */
.tw,.tscroll{box-shadow:var(--sh-1)}
.frame{box-shadow:var(--sh-2)}
.rvw,.rv,.shot,.card,.seal-cell{box-shadow:var(--sh-1)}
.rvw:hover,.card:hover,.seal-cell:hover,.shot:hover{box-shadow:var(--sh-3)}
.abox,.rs{box-shadow:var(--sh-1);background:var(--grad-soft)}
.totop{background:var(--grad-a);box-shadow:var(--sh-4)}

/* ---- animation coverage: every block type enters, none is left static --- */
.js [data-in] .sq-g{animation:fzPopIn .55s cubic-bezier(.2,1.2,.4,1) both;
  animation-delay:calc(var(--i,0) * 70ms)}
.js [data-in] .pchip{animation:fzPopIn .5s cubic-bezier(.2,1.2,.4,1) both;
  animation-delay:calc(var(--i,0) * 80ms)}
.js [data-in] .kr a{animation:fzRise .54s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--i,0) * 70ms)}
.js [data-in] .cbox-l li{animation:fzSlide .5s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--i,0) * 60ms)}
.js [data-in] .cta-rea li{animation:fzSlide .46s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--i,0) * 70ms)}
.js [data-in] .abox-r{animation:fzRise .5s cubic-bezier(.22,.78,.3,1) both;
  animation-delay:calc(var(--i,0) * 60ms)}
.js [data-in] .ostrip-in{animation:fzRise .56s cubic-bezier(.22,.78,.3,1) both}
.js [data-in] .srcnote{animation:fzSlide .5s cubic-bezier(.22,.78,.3,1) both}
/* an icon draws itself in as its row arrives */
.js [data-in] .ic{animation:mgIcon .42s cubic-bezier(.2,1.4,.4,1) both;
  animation-delay:calc(var(--i,0) * 60ms + 90ms)}
@keyframes mgIcon{from{opacity:0;transform:scale(.6) rotate(-12deg)}
                  to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .js .ic,.js .sq-g,.js .pchip,.js .kr a,.js .cbox-l li,.js .cta-rea li,
  .js .abox-r,.js .ostrip-in,.js .srcnote,.js .sec>.wrap>h2::before{
    animation:none!important;opacity:1!important;transform:none!important}
  .sec>.wrap>h2::before{transform:scaleX(1)!important}
}

/* ---- .blank paints its own white card, so on a dark slab it stays a
       light-surface component and must not inherit the dark-surface link ---- */
.slab .blank,.slab .blank-f,.slab .blank-row,.slab .blank-h{color:var(--ink)}
.slab .blank a:not(.btn){color:var(--a-ink);text-decoration:underline}
.slab .blank-h span,.slab .blank-row b{color:var(--ink-3)}


/* ---- 30. the assay cover --------------------------------------------- */
.ahero{position:relative;background:var(--slab);color:var(--on-slab);overflow:hidden;
  padding-block:clamp(36px,5vw,76px) clamp(40px,5.5vw,84px);
  border-bottom:1px solid var(--slab-line)}
.ahero::before{content:"";position:absolute;inset:-10%;pointer-events:none;opacity:.52;
  background:
    radial-gradient(58% 54% at 80% 16%, color-mix(in srgb,var(--a) 38%,transparent), transparent 70%),
    radial-gradient(46% 44% at 6% 94%, color-mix(in srgb,var(--a-deep) 58%,transparent), transparent 72%)}
/* a ruled baseline, taken from the panel itself */
.ahero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:repeating-linear-gradient(to bottom,
    var(--a-dk) 0 1px, transparent 1px 34px);
  -webkit-mask-image:linear-gradient(100deg,transparent 40%,#000 100%);
          mask-image:linear-gradient(100deg,transparent 40%,#000 100%)}
.ahero-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(24px,3.4vw,60px);align-items:center}
.ahero-grid>*{min-width:0}
.ahero-eyebrow{margin:0 0 14px;font:600 11px/1.3 var(--fm);letter-spacing:.13em;
  text-transform:uppercase;color:var(--a-dk)}
.ahero h1{font-size:var(--t-5);color:#fff;margin:0 0 18px;max-width:18ch;
  font-family:var(--fd);letter-spacing:-.034em}
.ahero-lede{margin:0 0 26px;max-width:62ch;font-size:var(--t-1);line-height:1.62;
  color:var(--on-slab)}
.ahero-lede b{color:#fff}
.ahero-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--slab-line);border:1px solid var(--slab-line);
  border-radius:var(--r-s);overflow:hidden;margin:0 0 26px}
.ahero-figs>div{background:var(--slab-2);padding:15px 16px 14px}
.ahero-figs b{display:block;font:700 clamp(26px,2.6vw,36px)/1 var(--fm);color:var(--a-dk);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ahero-figs span{display:block;margin-top:7px;font-size:12px;line-height:1.35;
  color:var(--on-slab-2)}
.ahero-figs .is-good b{color:#7BE8A4}
.ahero-figs .is-mid b{color:#F0B86A}
.ahero-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 20px}
.ahero .btn--ghost{color:#fff;border-color:var(--slab-line);background:transparent}
.ahero-fine{margin:0;font-size:13px;line-height:1.55;color:var(--on-slab-2)}
.ahero-fine b{color:#fff}
.ahero-fine a{color:var(--a-dk)}
.ahero-art{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.ahero-shot{width:100%;max-width:290px;border-radius:var(--r-l);padding:18px;
  background:linear-gradient(170deg,color-mix(in srgb,var(--a) 22%,transparent),
                             color-mix(in srgb,var(--slab-3) 72%,transparent));
  border:1px solid var(--slab-line);box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.ahero-shot img{width:100%;height:auto}
.ahero-art figcaption{max-width:290px;font-size:12px;line-height:1.5;color:var(--on-slab-2);
  text-align:center}
@media (max-width:900px){
  /* On a phone the bottle belongs directly under the headline, not above it:
     the reader meets the name first and the product second. The copy column
     dissolves so its children and the figure can be ordered together. */
  .ahero-grid{display:flex;flex-direction:column;gap:0}
  .ahero-copy{display:contents}
  .ahero-eyebrow{order:1}
  .ahero h1{order:2;max-width:none;margin-bottom:22px}
  .ahero-art{order:3;margin-bottom:24px}
  .ahero-lede{order:4}
  .ahero-figs{order:5}
  .ahero-act{order:6}
  .ahero-fine{order:7}
  .ahero-shot{max-width:208px;padding:14px}
  .ahero-art figcaption{max-width:260px}
}
@media (max-width:560px){
  .ahero-figs{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* long email addresses and identifiers must wrap at phone width */
b,strong,td,dd,li,p{overflow-wrap:break-word}
.spec dd,.spec dt,td,th{overflow-wrap:anywhere}

/* #15803D on the green tint lands at 4.46:1, just under AA at this size */
.pill--ok{color:var(--a-deep)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pill--ok{color:var(--a-dk)}}
:root[data-theme="dark"] .pill--ok{color:var(--a-dk)}
/* the score is the one figure in the hero that is not a credit */
.ahero-figs .is-score b{color:#F0B86A}