/* style.css - everything below the fold. Loaded asynchronously; the pre-css
   guard in critical.css holds every transition until this has landed. */

/* ============================================================== the motion ==
   One vocabulary, one budget. UI_STANDARD section 12.3:
     section entrance <= 420ms, no delay, <= 18px
     child stagger    <= 300ms each, <= 55ms x index, CAPPED AT 6
     hover            <= 160ms
   Transform and opacity only. The start state is added by script (html.js),
   so a reader with no script, or with reduced motion, gets a finished page. */

html.js [data-r]{opacity:0;transform:translate3d(0,var(--rise),0)}
html.js [data-r].is-in{opacity:1;transform:none;
  transition:opacity var(--t-child) var(--ease) calc(var(--i,0) * var(--stagger)),
             transform var(--t-in) var(--ease-out) calc(var(--i,0) * var(--stagger))}

/* Tables wipe row by row rather than rising as a slab. */
html.js tbody tr[data-r]{opacity:0;transform:translate3d(-8px,0,0)}
html.js tbody tr[data-r].is-in{opacity:1;transform:none;
  transition:opacity 240ms var(--ease) calc(var(--i,0) * 40ms),
             transform 240ms var(--ease-out) calc(var(--i,0) * 40ms)}

/* Figures scale from .98 and let the image catch up a beat later. */
html.js .fig[data-r]{opacity:0;transform:scale(.982)}
html.js .fig[data-r].is-in{opacity:1;transform:none;
  transition:opacity 300ms var(--ease),transform var(--t-in) var(--ease-out)}

/* An answer panel does not move. It is the thing they stopped to read. */
html.js .answer[data-r],html.js .answer{opacity:1;transform:none}

/* Bars and meters fill from their own origin. */
.dens__a i,.sc__bar i,.rq__b i,.btl__bar i,.seal__b i{transform-origin:left center}
html.js .dens__a i,html.js .sc__bar i,html.js .rq__b i{transform:scaleX(0)}
html.js .is-in .dens__a i,html.js .is-in .sc__bar i,
html.js .is-in .rq__b i{transform:scaleX(1);
  transition:transform 460ms var(--ease-out) calc(60ms + var(--i,0) * 40ms)}

/* The steps' connecting rule draws first. */
html.js .steps[data-r]::before{transform:scaleY(0);transform-origin:top center}
html.js .steps[data-r].is-in::before{transform:scaleY(1);
  transition:transform 420ms var(--ease-out)}

@media(prefers-reduced-motion:reduce){
  html.js [data-r],html.js [data-r].is-in,html.js tbody tr[data-r],
  html.js .fig[data-r]{opacity:1!important;transform:none!important;
    transition:none!important}
  html.js .dens__a i,html.js .sc__bar i,html.js .rq__b i,
  html.js .steps[data-r]::before{transform:none!important;
    transition:none!important}
  *{animation:none!important}
}

/* ============================================================== the rhythm ==
   paper -> plum band -> paper. A dark band opens with a copper hairline at
   its top edge, which is the only ornament that marks the change of ground. */

.sec{padding:clamp(42px,5.4vw,84px) 0;position:relative}
.sec--ink{background-color:var(--ground);color:var(--fg)}
.sec--ink::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background-color:var(--brand-f)}
.sec + .sec:not(.sec--ink){border-top:1px solid var(--rule)}
.sec--ink + .sec:not(.sec--ink){border-top:0}
.sec > .shell > :last-child{margin-bottom:0}
.sub{margin:34px 0 12px;font-size:clamp(17px,1.8vw,20px);
  font-family:var(--font-ui)}

/* ============================================================ plain content ==*/
.sec p{max-width:var(--text)}
.lead{font-size:clamp(17.5px,1.7vw,20.5px);color:var(--fg-m);max-width:62ch}
.bul,.num{max-width:var(--text);padding-left:1.25em;margin:0 0 1.2em}
.bul li,.num li{margin-bottom:.58em}
.bul{list-style:none;padding-left:0}
.bul li{position:relative;padding-left:1.6em}
.bul li::before{content:"";position:absolute;left:0;top:.6em;width:8px;
  height:8px;background-color:var(--brand-f);border-radius:2px}
.mut{color:var(--fg-m)}
.ok{color:var(--ok);font-weight:600}
.bad{color:var(--over);font-weight:700}

/* --------------------------------------------------------------- tables --- */
.tw{overflow-x:auto;margin:0 0 26px;border:1px solid var(--rule);
  border-radius:var(--r);background-color:var(--card);
  -webkit-overflow-scrolling:touch}
.tw table{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
.tw--tight table{min-width:470px;font-size:14.4px}
.tw caption{text-align:left;padding:14px 17px;font-weight:700;font-size:14.6px;
  border-bottom:1px solid var(--rule);background-color:var(--card-2)}
.tw th,.tw td{padding:12px 17px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
.tw thead th{font-size:12.2px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-m);font-weight:700;white-space:nowrap}
.tw tbody th{font-weight:700;width:1%;white-space:nowrap}
.tw tbody tr:last-child th,.tw tbody tr:last-child td{border-bottom:0}
.tw tbody tr:nth-child(even){background-color:var(--card-2)}
.tw td b,.tw th b{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- cards --- */
.cards{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 20px}
@media(min-width:700px){
  .cards--2,.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the card signature for this build: a filled panel with a small copper tick
   in its top-left corner that lengthens on hover. Nothing else moves. */
.card{background-color:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:20px 22px;position:relative;overflow:hidden;
  transition:border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease)}
.card::before{content:"";position:absolute;left:0;top:0;width:26px;height:3px;
  background-color:var(--brand-f);
  transition:width var(--t-hover) var(--ease)}
.card:hover{border-color:var(--rule-2);box-shadow:var(--shadow-now)}
.card:hover::before{width:64px}
.card h3{margin:0 0 9px;font-size:16.6px}
.card p{margin:0;font-size:15.4px;color:var(--fg-m);max-width:none}
.card p b{color:var(--fg)}

/* ----------------------------------------------------------------- steps --- */
.steps{list-style:none;margin:0 0 20px;padding:0;position:relative;
  max-width:var(--text)}
.steps::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;
  width:2px;background-color:var(--rule)}
.steps li{display:flex;gap:17px;padding:0 0 22px;position:relative}
.steps li:last-child{padding-bottom:0}
.step__n{width:40px;height:40px;flex:0 0 auto;border-radius:var(--r-sm);
  background-color:var(--brand-f);color:#fff;display:grid;place-items:center;
  font-family:var(--font-num);font-weight:700;font-size:15px;position:relative;
  z-index:1}
.step__b h3{margin:7px 0 5px;font-size:17.5px}
.step__b p{margin:0;font-size:15.4px;color:var(--fg-m)}

/* ----------------------------------------------------------------- notes --- */
.note{border:1px solid var(--rule);border-left:4px solid var(--brand-f);
  border-radius:var(--r);padding:19px 21px;margin:0 0 22px;
  background-color:var(--card);max-width:var(--text)}
.note h3{margin:0 0 8px;font-size:16.5px}
.note p{margin:0 0 .7em;font-size:15.4px;color:var(--fg-m)}
.note p:last-child{margin-bottom:0}
.note--warn,.note--flag{border-left-color:var(--brand-f);
  background-color:var(--wash)}
.note--stop{border-left-color:var(--over);background-color:var(--over-w)}
.note--tip{border-left-color:var(--ok);background-color:var(--ok-w)}

/* ---------------------------------------------------------------- answer --- */
.answer{border:1px solid var(--rule-2);border-radius:var(--r);
  padding:clamp(20px,2.6vw,30px);margin:0 0 22px;max-width:74ch;
  background-color:var(--card);box-shadow:var(--shadow-now)}
.answer__t{font-size:11.4px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);margin-bottom:13px}
.answer p{font-size:16.6px;margin:0 0 .85em;max-width:none}
.answer p:last-child{margin-bottom:0}

/* ------------------------------------------------------------------- dl ---- */
.dl{margin:0 0 22px;border:1px solid var(--rule);border-radius:var(--r);
  background-color:var(--card);overflow:hidden}
.dl > div{display:grid;gap:4px 20px;padding:14px 18px;
  border-bottom:1px solid var(--rule)}
@media(min-width:640px){.dl > div{grid-template-columns:minmax(160px,28%) 1fr}}
.dl > div:last-child{border-bottom:0}
.dl > div:nth-child(even){background-color:var(--card-2)}
.dl dt{font-weight:700;font-size:14.6px}
.dl dd{margin:0;font-size:15.2px;color:var(--fg-m)}
.dl dd a{color:var(--brand)}

/* ----------------------------------------------------------------- misc ---- */
.fig{margin:0 0 24px;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;background-color:var(--card)}
.fig img{width:100%}
.fig figcaption{padding:13px 16px;font-size:13.6px;color:var(--fg-m);
  border-top:1px solid var(--rule);background-color:var(--card-2)}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;margin:0 0 26px}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background-color:var(--card);padding:20px 18px}
.stat__f{display:block;font-family:var(--font-num);
  font-size:clamp(26px,3.6vw,40px);font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--brand);font-variant-numeric:tabular-nums}
.stat__l{display:block;font-size:13.4px;color:var(--fg-m);margin-top:9px}

.lrow{display:grid;gap:1px;background-color:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;
  margin:0 0 22px}
@media(min-width:700px){.lrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){.lrow{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lrow a{background-color:var(--card);padding:18px;text-decoration:none;
  font-weight:700;font-size:15.4px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  transition:background-color var(--t-hover) var(--ease)}
.lrow a:hover{background-color:var(--card-2);color:var(--brand)}
.lrow a span{color:var(--brand);transition:transform var(--t-hover) var(--ease)}
.lrow a:hover span{transform:translateX(4px)}

.ctap{border:1px solid var(--rule-2);border-radius:var(--r);
  padding:clamp(26px,3.6vw,46px);text-align:center;margin:0 0 24px;
  background-color:var(--card)}
.ctap h2{max-width:22ch;margin-inline:auto}
.ctap p{max-width:58ch;margin-inline:auto;color:var(--fg-m)}
.ctap__a{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;
  margin:22px 0 14px}
.ctap a:not(.btn){color:var(--brand)}
.ctap__f{font-size:12.6px;color:var(--fg-m);letter-spacing:.04em}

.refs{list-style:none;counter-reset:r;margin:0 0 22px;padding:0;display:grid;
  gap:1px;background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.refs li{counter-increment:r;background-color:var(--card);
  padding:16px 18px 16px 54px;position:relative}
.refs li::before{content:counter(r);position:absolute;left:17px;top:16px;
  font-family:var(--font-num);font-size:13px;font-weight:700;color:var(--brand)}
.refs a{font-weight:700;font-size:15.4px;color:var(--fg);
  text-decoration:underline;text-decoration-color:var(--rule-2);
  text-underline-offset:3px}
.refs a:hover{text-decoration-color:var(--brand-f);color:var(--brand)}
.ref__p{display:block;font-size:12.6px;color:var(--brand);margin-top:3px;
  letter-spacing:.03em}
.ref__w{display:block;font-size:14px;color:var(--fg-m);margin-top:7px}

/* =========================================================== the widgets ====
   Every one is an ISLAND: .isl redeclares the ground tokens back to paper from
   the raw palette, so a measurement looks the same wherever it is dropped and
   never inherits a plum band's colours by accident. */

.isl{border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(18px,2.4vw,28px);margin:0 0 24px;box-shadow:var(--shadow-now)}
.isl > :last-child{margin-bottom:0}
.isl h3{font-size:17px}

.dens__t,.dose__t,.btl__t,.fit__t{display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--fg)}
.dens__t b,.dose__t b,.btl__t b,.fit__t b{font-size:17.5px;
  font-family:var(--font-ui)}
.dens__t span,.dose__t span,.btl__t span,.fit__t span{font-size:13px;
  color:var(--fg-m);font-family:var(--font-num)}

/* ------------------------------------------------------- the label, as sent */
.front__g{display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:1fr}
@media(min-width:760px){.front__g{grid-template-columns:.8fr 1.2fr}}
.front__f{margin:0;background-color:var(--card-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px;text-align:center}
.front__f img{margin-inline:auto;width:min(100%,260px)}
.front__f figcaption{margin-top:14px;font-size:12.8px;color:var(--fg-m);
  text-align:left}
.front__c{display:grid;gap:16px;align-content:start}
.front__box{border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px;background-color:var(--card)}
.front__box h3{margin:0 0 11px;font-size:15px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg-m)}
.front__box--has{border-left:4px solid var(--ok)}
.front__box--not{border-left:4px solid var(--over);
  background-color:var(--over-w)}
.front__l{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.front__l li{font-family:var(--font-num);font-size:14px;padding-left:20px;
  position:relative;line-height:1.45}
.front__box--has .front__l li::before{content:"\2713";position:absolute;left:0;
  color:var(--ok);font-weight:700}
.front__box--not .front__l li::before{content:"\2715";position:absolute;left:0;
  color:var(--over);font-weight:700}
.front__f2{margin:22px 0 0;font-size:15px;color:var(--fg-m);
  border-top:1px solid var(--rule);padding-top:18px;max-width:none}

/* --------------------------------------------------- three divisions ------- */
.cant{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
@media(min-width:900px){.cant{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cant li{display:grid;gap:14px;grid-template-columns:auto 1fr;
  align-items:start;background-color:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px 20px}
.cant__n{width:34px;height:34px;border-radius:var(--r-sm);
  background-color:var(--teal);color:var(--brand-t);display:grid;
  place-items:center;font-family:var(--font-num);font-weight:700;font-size:15px}
.cant__b h3{margin:4px 0 8px;font-size:16.4px}
.cant__b p{font-size:14.6px;color:var(--fg-m);margin:0 0 .6em;max-width:none}
.cant__b p:last-child{margin-bottom:0}
.cant__sum{font-family:var(--font-num);font-size:13.4px!important;
  color:var(--over)!important;background-color:var(--over-w);
  border-radius:var(--r-sm);padding:6px 10px;display:inline-block}
.cant__f{font-size:15.6px;color:var(--fg-m);border-top:2px solid var(--fg);
  padding-top:16px;max-width:none}

/* ------------------------------------------------------- the bottle slider - */
.btl__ctl{display:grid;grid-template-columns:1fr;gap:8px;align-items:center;
  margin-bottom:20px}
@media(min-width:620px){
  .btl__ctl{grid-template-columns:auto 1fr auto;gap:16px}}
.btl__ctl label{font-size:13.6px;font-weight:700;color:var(--fg-m)}
.btl__ctl input[type=range]{width:100%;accent-color:var(--brand-f);
  height:26px;background:transparent;cursor:pointer}
.btl__ctl output{font-family:var(--font-num);font-size:19px;font-weight:700;
  color:var(--brand);min-width:5.5ch;text-align:right}
.btl__grid{display:grid;grid-template-columns:1fr;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;margin-bottom:18px}
@media(min-width:620px){.btl__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.btl__c{background-color:var(--card);padding:16px 18px}
.btl__c b{display:block;font-family:var(--font-num);
  font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.05;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.btl__c span{display:block;font-size:12.6px;color:var(--fg-m);margin-top:7px}
.btl__c--hot{background-color:var(--wash)}
.btl__c--hot b{color:var(--brand)}
.btl__bar{position:relative;height:12px;border-radius:var(--pill);
  background-color:var(--card-2);border:1px solid var(--rule);
  margin-bottom:34px}
.btl__bar i{position:absolute;inset:0 auto 0 0;width:var(--w,50%);
  border-radius:var(--pill);background-color:var(--brand-f);
  transition:width 320ms var(--ease-out)}
.btl__bar u{position:absolute;left:0;right:0;top:calc(100% + 8px);
  text-decoration:none;font-size:11.8px;color:var(--fg-m);text-align:right}
.btl__bar u b{font-family:var(--font-num);color:var(--fg)}
.btl__note{font-size:16px;font-weight:650;border-left:4px solid var(--brand-f);
  padding-left:14px;max-width:none}
.btl__f{font-size:15px;color:var(--fg-m);max-width:none}
.btl__d{border-top:1px solid var(--rule);padding-top:16px}
.btl__d summary{cursor:pointer;font-weight:700;font-size:14.6px;
  color:var(--brand)}
.btl__d .tw{margin-top:16px;margin-bottom:0}

/* ------------------------------------------------------- the density check - */
.dens__eq{display:grid;grid-template-columns:1fr;gap:10px;align-items:stretch;
  margin-bottom:22px}
@media(min-width:760px){
  .dens__eq{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}}
.dens__a{background-color:var(--card-2);border:1px solid var(--rule);
  border-radius:var(--r);padding:15px 17px}
.dens__a b{display:block;font-family:var(--font-num);
  font-size:clamp(21px,2.6vw,27px);font-weight:800;line-height:1.05;
  letter-spacing:-.04em}
.dens__a span{display:block;font-size:12.4px;color:var(--fg-m);margin-top:7px}
.dens__a--hot{background-color:var(--wash);border-color:var(--brand)}
.dens__a--hot b{color:var(--brand)}
.dens__x{font-family:var(--font-num);font-size:22px;color:var(--fg-m);
  text-align:center;font-weight:700}
.dens__l{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.dens__l li{display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  align-items:baseline}
.dens__l b{font-size:14.8px;font-weight:650}
.dens__l span{font-family:var(--font-num);font-size:14.2px;color:var(--fg-m);
  font-variant-numeric:tabular-nums}
.dens__l i{grid-column:1/-1;display:block;height:10px;width:var(--w,10%);
  min-width:3px;border-radius:var(--pill);background-color:var(--rule-2)}
.dens__l .is-hot b{color:var(--brand)}
.dens__l .is-hot span{color:var(--brand);font-weight:700}
.dens__l .is-hot i{background-color:var(--brand-f)}
.dens__f{font-size:15.4px;color:var(--fg-m);border-top:2px solid var(--fg);
  padding-top:18px;max-width:none}

/* --------------------------------------------------------- studied doses --- */
.dose__l{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.dose__l li{background-color:var(--card);padding:15px 18px}
.dose__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  margin-bottom:7px}
.dose__hd b{font-size:16px}
.dose__hd i{font-size:13.4px;color:var(--fg-m)}
.dose__v{margin-left:auto;font-family:var(--font-num);font-size:15px;
  font-weight:700;color:var(--brand);white-space:nowrap}
.dose__l p{margin:0;font-size:14.4px;color:var(--fg-m);max-width:none}
.dose__f{font-size:15.2px;color:var(--fg-m);max-width:none}

/* ------------------------------------------------------------ the safety --- */
.safe{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
@media(min-width:820px){.safe{grid-template-columns:repeat(2,minmax(0,1fr))}}
.safe li{background-color:var(--over-w);border:1px solid var(--rule);
  border-left:4px solid var(--over);border-radius:var(--r);padding:18px 20px}
.safe li h3{margin:0 0 9px;font-size:16.4px;color:var(--over)}
.safe li p{margin:0;font-size:14.8px;max-width:none}
.safe__f{font-size:15.6px;border-top:2px solid var(--fg);padding-top:16px;
  max-width:none}

/* -------------------------------------------------------------- the packs -- */
.packs{display:grid;gap:16px;grid-template-columns:1fr;margin:0 0 20px}
@media(min-width:760px){.packs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pack{background-color:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:20px;position:relative;text-align:center;
  transition:border-color var(--t-hover) var(--ease),
             box-shadow var(--t-hover) var(--ease)}
.pack:hover{border-color:var(--rule-2);box-shadow:var(--shadow-now)}
.pack__tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background-color:var(--teal);color:var(--brand-t);font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 13px;border-radius:var(--pill);white-space:nowrap}
.pack__shot{min-height:132px;display:grid;place-items:center;margin-bottom:14px}
.pack__shot img{max-height:168px;width:auto}
.pack h3{margin:0 0 14px;font-size:19px}
.pack__d{margin:0 0 18px;text-align:left;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-sm);overflow:hidden}
.pack__d > div{background-color:var(--card);display:flex;
  justify-content:space-between;gap:12px;padding:9px 12px}
.pack__d dt{font-size:12.8px;color:var(--fg-m)}
.pack__d dd{margin:0;font-size:13.4px;font-weight:700;
  font-family:var(--font-num);text-align:right}
.pack__np{color:var(--over)!important;font-weight:700}
.pack .btn{width:100%}
.packs__f{font-size:15.2px;color:var(--fg-m);max-width:none;
  border-top:1px solid var(--rule);padding-top:18px}

/* ----------------------------------------------------------- the conflicts - */
.conf{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
.conf li{background-color:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:18px 20px}
.conf li h3{margin:0 0 13px;font-size:16.6px}
.conf__two{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:720px){.conf__two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.conf__a,.conf__b{border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:13px 15px;background-color:var(--card-2)}
.conf__a{border-left:3px solid var(--brand-f)}
.conf__b{border-left:3px solid var(--rule-2)}
.conf__tag{display:block;font-size:10.8px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-m);font-weight:700;margin-bottom:7px}
.conf__tag--w{color:var(--brand)}
.conf__a p,.conf__b p{margin:0;font-size:14.4px;max-width:none}
.conf__n{margin:13px 0 0;font-size:14.4px;color:var(--fg-m);max-width:none}
.conf__rule{font-size:15.4px;color:var(--fg-m);border-top:2px solid var(--fg);
  padding-top:16px;max-width:none}

/* ---------------------------------------------------------- the review copy */
.rq__warn{background-color:var(--over-w);border:1px solid var(--over);
  border-radius:var(--r);padding:15px 18px;font-size:14.8px;margin-bottom:22px;
  color:var(--fg)}
.rq__warn b{color:var(--over)}
.rq__grid{display:grid;gap:22px;grid-template-columns:1fr;margin-bottom:22px}
@media(min-width:820px){.rq__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rq__grid h3{margin:0 0 13px;font-size:14.6px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fg-m)}
.rq__l{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.rq__l li{display:grid;grid-template-columns:auto 1fr auto;gap:11px;
  align-items:center}
.rq__s{font-family:var(--font-num);font-size:13px;color:var(--fg-m);
  white-space:nowrap}
.rq__b{display:block;height:11px;border-radius:var(--pill);
  background-color:var(--card-2);border:1px solid var(--rule);
  position:relative;overflow:hidden}
.rq__b i{position:absolute;inset:0 auto 0 0;width:var(--w,10%);
  background-color:var(--brand-f)}
.rq__p{font-family:var(--font-num);font-size:13px;font-weight:700;
  min-width:4ch;text-align:right}
.rq__ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:9px}
.rq__ul li{display:grid;grid-template-columns:auto 1fr;gap:12px;
  align-items:baseline;background-color:var(--card-2);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:11px 13px}
.rq__ul b{font-family:var(--font-num);font-size:13px;color:var(--brand);
  white-space:nowrap}
.rq__ul q{font-size:14.2px;color:var(--fg-m)}
.rq__u p{margin:0;font-size:13.6px;color:var(--fg-m);max-width:none}
.rq__f{font-size:15px;color:var(--fg-m);border-top:2px solid var(--fg);
  padding-top:16px;max-width:none}

/* ----------------------------------------------------------- the fit check - */
.fit__l{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fit__q{background-color:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:17px 19px}
.fit__q > p{margin:0 0 13px;font-size:16px;max-width:none}
.fit__q > p b{font-family:var(--font-num);color:var(--brand);margin-right:4px}
.fit__btns{display:flex;gap:9px;margin-bottom:0}
.fit__btns button{font:inherit;font-size:14.4px;font-weight:700;
  padding:9px 22px;border-radius:var(--r-sm);border:1.5px solid var(--rule-2);
  background-color:var(--card);color:var(--fg);cursor:pointer;
  transition:border-color var(--t-hover) var(--ease),
             background-color var(--t-hover) var(--ease)}
.fit__btns button:hover{border-color:var(--fg)}
.fit__btns button[aria-pressed=true]{background-color:var(--brand-f);
  border-color:var(--brand-f);color:#fff}
.fit__o{margin-top:14px}
.fit__o p{margin:0 0 10px;font-size:14.8px;color:var(--fg-m);
  border-left:3px solid var(--rule-2);padding-left:13px;max-width:none}
.fit__o p:last-child{margin-bottom:0}
.fit__o p b{color:var(--fg)}
/* With script, only the answered branch shows; with none, both are printed and
   labelled, so the panel is still a complete document. */
html.js .fit__o{display:none}
html.js .fit__q.is-y .fit__o,html.js .fit__q.is-n .fit__o{display:block}
html.js .fit__q.is-y .fit__n,html.js .fit__q.is-n .fit__y{display:none}
html.js .fit__q.is-y .fit__y{border-left-color:var(--brand-f)}
html.js .fit__q.is-n .fit__n{border-left-color:var(--brand-f)}

/* --------------------------------------------------------------- the seals - */
.seals{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
@media(min-width:760px){.seals{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seals li{background-color:var(--card);padding:15px 17px;display:grid;
  grid-template-columns:auto 1fr;gap:15px;align-items:start}
.seal__i{width:56px;flex:0 0 auto}
.seal__i img{width:56px;height:auto}
.seal__b h3{margin:0 0 6px;font-size:15.4px;display:inline-block;
  margin-right:9px}
.seal__tag{font-size:10.6px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--brand);border:1px solid var(--rule-2);
  border-radius:var(--pill);padding:2px 9px;white-space:nowrap}
.seal__b p{margin:8px 0 0;font-size:13.8px;color:var(--fg-m);max-width:none}
.seals__f{font-size:15.4px;color:var(--fg-m);max-width:none}

/* --------------------------------------------------------- not published --- */
.npub{list-style:none;margin:0 0 20px;padding:0;counter-reset:n;display:grid;
  gap:1px;background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
@media(min-width:820px){.npub{grid-template-columns:repeat(2,minmax(0,1fr))}}
.npub li{counter-increment:n;background-color:var(--card);
  padding:15px 18px 15px 50px;position:relative}
.npub li::before{content:counter(n,decimal-leading-zero);position:absolute;
  left:16px;top:16px;font-family:var(--font-num);font-size:12.4px;
  font-weight:700;color:var(--over)}
.npub li b{display:block;font-size:15.2px;margin-bottom:6px}
.npub li p{margin:0;font-size:14px;color:var(--fg-m);max-width:none}
.npub__f{font-size:15.4px;color:var(--fg-m);border-top:2px solid var(--fg);
  padding-top:16px;max-width:none}

/* ------------------------------------------------------------- the score --- */
.sc__big{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
  padding-bottom:18px;margin-bottom:20px;border-bottom:2px solid var(--fg)}
.sc__big b{font-family:var(--font-num);font-size:clamp(46px,7vw,72px);
  font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--brand);
  font-variant-numeric:tabular-nums}
.sc__big span{font-size:16px;color:var(--fg-m)}
.sc__big p{margin:0 0 0 auto;font-size:12.6px;color:var(--fg-m);
  max-width:none;align-self:flex-end}
.sc__l{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:17px}
.sc__hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:8px}
.sc__hd b{font-size:15.4px}
.sc__v{font-family:var(--font-num);font-size:15px;font-weight:700;
  color:var(--brand)}
.sc__bar{height:9px;border-radius:var(--pill);background-color:var(--card-2);
  border:1px solid var(--rule);position:relative;overflow:hidden}
.sc__bar i{position:absolute;inset:0 auto 0 0;width:var(--w,10%);
  background-color:var(--brand-f)}
.sc__w{margin:9px 0 0;font-size:14px;color:var(--fg-m);max-width:none}
.sc__f{font-size:15px;color:var(--fg-m);border-top:1px solid var(--rule);
  padding-top:16px;max-width:none}

/* ---------------------------------------------------------------- the FAQ -- */
.faq__ctl{display:grid;gap:8px;margin-bottom:20px}
@media(min-width:640px){
  .faq__ctl{grid-template-columns:auto 1fr auto;align-items:center;gap:14px}}
.faq__ctl label{font-size:13.6px;font-weight:700;color:var(--fg-m)}
.faq__ctl input{font:inherit;font-size:15.4px;padding:12px 15px;
  border:1px solid var(--rule-2);border-radius:var(--r);
  background-color:var(--card);color:var(--fg);width:100%}
.faq__ctl input::placeholder{color:var(--fg-m);opacity:.85}
.faq__n{font-family:var(--font-num);font-size:13px;color:var(--fg-m);
  white-space:nowrap}
.faq__l{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.faq__i{background-color:var(--card)}
.faq__i details summary{cursor:pointer;padding:15px 46px 15px 18px;
  font-weight:650;font-size:15.6px;position:relative;list-style:none}
.faq__i details summary::-webkit-details-marker{display:none}
.faq__i details summary::after{content:"";position:absolute;right:18px;
  top:calc(50% - 6px);width:12px;height:12px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);transform:rotate(45deg) translateY(-2px);
  transition:transform var(--t-hover) var(--ease)}
.faq__i details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq__i details[open] summary{color:var(--brand)}
.faq__a{padding:0 18px 17px}
.faq__a p{margin:0;font-size:15px;color:var(--fg-m);max-width:none}
.faq__none{font-size:15px;color:var(--fg-m)}
.faq__more{margin:0}
/* With no script every question is in the document. The "show all" button and
   the search box only matter once script is there to work them. */
html:not(.js) .faq__ctl,html:not(.js) .faq__more{display:none}
/* Before the script runs, only the first block of questions is shown; the
   script removes data-over when the reader asks for the rest, and uses the
   hidden attribute for search filtering. Two mechanisms, no collision. */
html.js .faq__i[data-over]{display:none}
html.js .faq__i[hidden]{display:none!important}

/* ------------------------------------------------------------- the footer -- */
.foot{padding:clamp(40px,5vw,66px) 0 26px;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background-color:var(--brand-f)}
.foot__top{display:grid;gap:26px;grid-template-columns:1fr;
  padding-bottom:30px;border-bottom:1px solid var(--rule)}
@media(min-width:680px){.foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){
  .foot__top{grid-template-columns:1.3fr repeat(4,minmax(0,1fr)) 1.3fr}}
.foot__b b{display:block;font-family:var(--font-d);font-size:19px;
  font-weight:800;letter-spacing:-.035em;margin:12px 0 8px}
.foot__b p{margin:0 0 5px;font-size:13.4px;color:var(--fg-m);max-width:none}
.foot__b .brand__m{background-color:var(--card-2);color:var(--brand)}
.foot__c h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-m);margin:0 0 13px;font-family:var(--font-ui);font-weight:700}
.foot__c ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot__c a{font-size:13.8px;text-decoration:none;color:var(--fg)}
.foot__c a:hover{color:var(--brand);text-decoration:underline;
  text-underline-offset:3px}
.foot__c--k dl{margin:0;display:grid;gap:11px}
.foot__c--k dt{font-size:11.4px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--fg-m);font-weight:700}
.foot__c--k dd{margin:3px 0 0;font-size:13.6px}
.foot__c--k dd a{color:var(--brand);text-decoration:none;font-weight:700}
.foot__c--k dd span{display:block;font-size:11.8px;color:var(--fg-m);
  margin-top:2px}
.foot__seals{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.foot__seal img{width:52px;height:auto;opacity:.9}
.foot__pay{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:center;padding:22px 0;border-bottom:1px solid var(--rule);
  text-align:center}
.foot__pay img{width:min(200px,60vw);height:auto}
.foot__pay span{font-size:12px;color:var(--fg-m);max-width:46ch}
.foot__prec{padding:26px 0;border-bottom:1px solid var(--rule)}
.foot__prec h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-m);margin:0 0 13px;font-family:var(--font-ui);font-weight:700}
.foot__prec ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
@media(min-width:900px){
  .foot__prec ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 30px}}
.foot__prec li{font-size:12.6px;color:var(--fg-m);line-height:1.55;
  padding-left:15px;position:relative}
.foot__prec li::before{content:"";position:absolute;left:0;top:.6em;width:6px;
  height:6px;border-radius:2px;background-color:var(--rule-2)}
.foot__legal{padding-top:22px;display:grid;gap:12px}
@media(min-width:760px){
  .foot__legal{grid-template-columns:auto 1fr;align-items:center}}
.foot__legal nav{display:flex;flex-wrap:wrap;gap:16px}
.foot__legal a{font-size:13px;color:var(--fg);text-decoration:none}
.foot__legal a:hover{color:var(--brand);text-decoration:underline;
  text-underline-offset:3px}
.foot__legal p{margin:0;font-size:12.4px;color:var(--fg-m);max-width:none}
@media(min-width:760px){.foot__legal p{text-align:right}}

/* the sentinel: main.js waits for this to be 1 before releasing pre-css. */
:root{--css-ready:1}