/* 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}

/* Meters and bars fill from their own origin. */
.ceil__bar i,.dchk__bar i,.tenth__bar i,.grd__bar i,.sc__bar i,.rq__b i,
.cap__tr i{transform-origin:left center}
html.js .ceil__bar i,html.js .dchk__bar i,html.js .tenth__bar i,
html.js .grd__bar i,html.js .sc__bar i,html.js .rq__b i{transform:scaleX(0)}
html.js .is-in .ceil__bar i,html.js .is-in .dchk__bar i,
html.js .is-in .tenth__bar i,html.js .is-in .grd__bar 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 .ceil__bar i,html.js .dchk__bar i,html.js .tenth__bar i,
  html.js .grd__bar 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 -> teal band -> paper, with a brand rule where a band begins. */

.sec{padding:clamp(40px,5.4vw,82px) 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:4px;
  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__h{max-width:22ch;margin:0 0 14px}
.sec__l{font-size:clamp(16.5px,1.5vw,19px);color:var(--fg-m);max-width:62ch;
  margin:0 0 30px}
.sec > .shell > :last-child{margin-bottom:0}
.sub{margin:34px 0 12px;font-size:clamp(17px,1.8vw,20px);
  font-family:var(--font-ui)}

.phead{padding:clamp(26px,3.6vw,48px) 0 clamp(20px,2.6vw,34px);
  border-bottom:1px solid var(--rule);background-color:var(--bone-3)}
.phead h1{max-width:20ch;margin:10px 0 12px}
.phead__l{font-size:clamp(16.5px,1.6vw,19.5px);color:var(--fg-m);
  max-width:62ch;margin:0}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  font-size:13px;color:var(--fg-m)}
.crumb li + li::before{content:"/";margin-right:8px;color:var(--rule-2)}
.crumb a{color:var(--fg-m);text-decoration:none}
.crumb a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px}

/* ============================================================ 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:.55em}
.bul{list-style:none;padding-left:0}
.bul li{position:relative;padding-left:1.5em}
.bul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;
  height:7px;background-color:var(--brand-f);border-radius:1px}
.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:480px;font-size:14.4px}
.tw caption{text-align:left;padding:14px 16px;font-weight:700;font-size:14.6px;
  border-bottom:1px solid var(--rule);background-color:var(--card-2)}
.tw th,.tw td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
.tw thead th{font-size:12.4px;letter-spacing:.07em;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))}}
.card{background-color:var(--card);border:1px solid var(--rule);
  border-radius:var(--r);padding:0;position:relative;overflow:hidden;
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease)}
/* the card signature for this build: a full-bleed tinted band across the top,
   with the heading sitting inside it rather than above it */
.card h3{margin:0;padding:15px 20px;background-color:var(--wash);
  border-bottom:1px solid var(--rule);font-size:16.6px}
.card > p{padding:18px 20px}
.card:hover{transform:translateY(-3px);border-color:var(--rule-2)}
.card p{margin:0;font-size:15.4px;color:var(--fg-m);max-width:none}
.card__f{margin:0!important;padding:13px 20px!important;
  border-top:1px solid var(--rule);font-size:13.2px!important;
  font-family:var(--font-num);color:var(--fg)!important;
  background-color:var(--card-2)}

/* ----------------------------------------------------------------- steps --- */
.steps{list-style:none;margin:0 0 20px;padding:0;position:relative;
  max-width:var(--text)}
.steps::before{content:"";position:absolute;left:18px;top:18px;bottom:18px;
  width:2px;background-color:var(--rule)}
.steps li{display:flex;gap:16px;padding:0 0 22px;position:relative}
.steps li:last-child{padding-bottom:0}
.step__n{width:38px;height:38px;flex:0 0 auto;border-radius:50%;
  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:6px 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:18px 20px;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{border-left-color:var(--brand-f);background-color:var(--wash)}
.note--stop{border-left-color:var(--over);background-color:var(--over-w)}
.note--info{border-left-color:var(--rule-2)}

/* ---------------------------------------------------------------- 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;
  box-shadow:var(--shadow-now)}
.answer__t{font-size:11.6px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.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(150px,26%) 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:-.035em;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}
@media(min-width:700px){.lrow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1050px){.lrow{grid-template-columns:repeat(4,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:20ch;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;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 52px;
  position:relative}
.refs li::before{content:counter(r);position:absolute;left:16px;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 teal 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}

.stair__t,.dchk__t,.chr__t,.jd__t,.cpd__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)}
.stair__t b,.dchk__t b,.chr__t b,.jd__t b,.cpd__t b,.fit__t b{
  font-size:17.5px;font-family:var(--font-ui)}
.stair__t span,.dchk__t span,.chr__t span,.jd__t span,.cpd__t span,
.fit__t span{font-size:13px;color:var(--fg-m);font-family:var(--font-num)}

/* --------------------------------------------- the supplement facts panel -- */
.sfp{max-width:780px}
.sfp__tabs{display:flex;gap:4px;border-bottom:2px solid var(--fg);
  margin-bottom:18px}
html:not(.js) .sfp__tabs{display:none}
.sfp__tab{background:none;border:0;font:inherit;font-weight:650;font-size:14.6px;
  padding:10px 18px;cursor:pointer;color:var(--fg-m);
  border-radius:var(--pill) var(--pill) 0 0;
  transition:background-color var(--t-hover) var(--ease)}
.sfp__tab[aria-selected="true"]{background-color:var(--fg);color:var(--card)}
.sfp__tab:hover[aria-selected="false"]{background-color:var(--card-2)}
.sfp__pane[hidden]{display:none}
.sfp__h{margin:0 0 4px}
html.js .sfp__h{position:absolute!important;width:1px;height:1px;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sfp__meta{font-family:var(--font-num);font-size:13.4px;margin:0 0 10px;
  padding-bottom:9px;border-bottom:7px solid var(--fg)}
.sfp__t{width:100%;border-collapse:collapse;font-family:var(--font-num);
  font-size:14.4px}
.sfp__t thead th{font-size:11.2px;text-align:right;padding:0 0 5px;
  border-bottom:1px solid var(--fg);line-height:1.2;font-weight:700}
.sfp__t thead th:first-child{text-align:left}
.sfp__t tbody th{text-align:left;font-weight:600;padding:8px 10px 8px 0;
  border-bottom:1px solid var(--rule-2)}
.sfp__t tbody td{text-align:right;padding:8px 0;font-weight:700;
  border-bottom:1px solid var(--rule-2);white-space:nowrap}
.sfp__t tbody td:last-child{width:5.4em}
.sfp__blend th,.sfp__blend td{font-weight:800!important;border-bottom:0!important;
  padding-top:12px!important}
.sfp__sub{font-family:var(--font-num);font-size:12.8px;line-height:1.62;
  color:var(--fg-m);margin:4px 0 0;padding:0 0 11px;
  border-bottom:7px solid var(--fg);max-width:none}
.sfp__sub i{font-style:italic}
.sfp__fn{font-family:var(--font-num);font-size:11.4px;margin:9px 0 0;
  color:var(--fg-m);max-width:none;line-height:1.6}
.sfp__oi{font-size:13.6px;margin:12px 0 0;padding-top:12px;
  border-top:1px solid var(--rule);max-width:none}
.sfp__src{font-size:12.8px;color:var(--fg-m);margin:18px 0 0;padding-top:14px;
  border-top:1px solid var(--rule);max-width:none}

/* ------------------------------------------------------------ the staircase */
.stair__l{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:3px}
html:not(.js) .stair__l{display:none}
/* Two rows per step: the name and its ceiling on one line, the bar underneath
   spanning the rest of the width. Overlaying the name ON the bar was the first
   attempt and it put 13px type over a 15px bar at every length. */
.stair__s{display:grid;grid-template-columns:24px 1fr auto;
  grid-template-rows:auto auto;column-gap:10px;row-gap:6px;align-items:baseline;
  width:100%;background:none;border:0;padding:7px 8px;cursor:pointer;
  font:inherit;text-align:left;border-radius:var(--r-sm);
  transition:background-color var(--t-hover) var(--ease)}
.stair__s:hover,.stair__s.is-on{background-color:var(--wash)}
.stair__r{grid-area:1/1;font-family:var(--font-num);font-size:11.4px;
  color:var(--fg-m);text-align:right}
.stair__n{grid-area:1/2;font-size:13.6px;font-weight:600}
.stair__v{grid-area:1/3;font-family:var(--font-num);font-size:12.8px;
  font-weight:700;color:var(--brand);white-space:nowrap}
/* the step itself: a bar whose width IS 15.47/k, so the list is the chart */
.stair__b{grid-area:2/2/3/4;height:11px;width:var(--w);min-width:4px;
  background-color:var(--brand-f);border-radius:var(--pill);
  justify-self:start;align-self:center}
@media(max-width:700px){
  .stair__s{grid-template-columns:20px 1fr auto;column-gap:7px}
  .stair__n{font-size:12.6px}
}
.stair__d{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.stair__d li{background-color:var(--card);padding:14px 17px;
  transition:background-color var(--t-hover) var(--ease)}
.stair__d li.is-on{background-color:var(--wash)}
html.js .stair__d li:not(.is-on){display:none}
html.js .stair__d li.is-on{display:block}
.stair__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  margin-bottom:7px}
.stair__hd b{font-size:16px}
.stair__hd i{color:var(--fg-m);font-size:13.6px}
.stair__rat{font-family:var(--font-num);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand);background-color:var(--wash);
  border-radius:var(--pill);padding:2px 9px}
.stair__c{font-size:14.6px;margin:0;max-width:none}
.stair__c b{font-family:var(--font-num)}
.stair__s2{font-size:14px;color:var(--fg-m);margin:9px 0 0;max-width:none}
.stair__f{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:15px;max-width:none}

/* ----------------------------------------------------------- the dose check */
.dchk__l{list-style:none;margin:0;padding:0;display:grid;gap:19px}
.dchk__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;
  margin-bottom:7px}
.dchk__hd b{font-size:15.4px}
.dchk__tag{font-size:11.2px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 10px;border-radius:var(--pill);
  background-color:var(--over-w);color:var(--over)}
.dchk__bar{position:relative;height:16px;background-color:var(--card-2);
  border:1px solid var(--rule);border-radius:var(--pill);overflow:hidden}
.dchk__bar i{display:block;height:100%;width:var(--w);
  background-color:var(--over);border-radius:var(--pill)}
.dchk__bar u{position:absolute;right:9px;top:50%;translate:0 -50%;
  text-decoration:none;font-family:var(--font-num);font-size:10.6px;
  font-weight:700;color:var(--fg-m)}
.dchk__n{font-size:14.2px;color:var(--fg-m);margin:8px 0 0;max-width:none}
.dchk__n b{color:var(--fg);font-family:var(--font-num)}
.dchk__f{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule);
  font-size:14.6px;max-width:none}

/* ---------------------------------------------------- the ten with no dose */
.nod{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:1px;
  background-color:var(--rule);overflow:hidden}
.nod li{background-color:var(--card);padding:15px 18px}
.nod__hd{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px;margin-bottom:6px}
.nod__hd b{font-size:15.2px}
.nod__r{font-family:var(--font-num);font-size:12.4px;color:var(--brand)}
.nod li p{margin:0;font-size:14.2px;color:var(--fg-m);max-width:none}

/* -------------------------------------------------------- the 20:1 equation */
.equiv{max-width:760px}
.equiv__row{display:grid;gap:14px;align-items:center;margin-bottom:18px;
  grid-template-columns:1fr}
@media(min-width:660px){.equiv__row{grid-template-columns:1fr auto 1fr}}
.equiv__a,.equiv__b{text-align:center;padding:18px 16px;border-radius:var(--r);
  background-color:var(--card-2);border:1px solid var(--rule)}
.equiv__b{background-color:var(--wash);border-color:var(--brand-f)}
.equiv__a b,.equiv__b b{display:block;font-family:var(--font-num);
  font-size:clamp(24px,3.2vw,32px);font-weight:700;line-height:1}
.equiv__b b{color:var(--brand)}
.equiv__a span,.equiv__b span{display:block;font-size:12.8px;color:var(--fg-m);
  margin-top:7px}
.equiv__x{font-family:var(--font-num);font-size:19px;font-weight:700;
  color:var(--brand);text-align:center}
.equiv__c{font-size:15.2px;margin:0 0 12px;max-width:none}
.equiv__f{font-size:14px;color:var(--fg-m);margin:0;padding-top:14px;
  border-top:1px solid var(--rule);max-width:none}

/* ------------------------------------------------------------- the chromium */
.chr__l{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:14px}
.chr__hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:6px}
.chr__hd b{font-size:14.6px}
.chr__hd span{font-family:var(--font-num);font-size:13px;color:var(--brand)}
.chr__bar{position:relative;height:15px;background-color:var(--card-2);
  border:1px solid var(--rule);border-radius:var(--pill);overflow:hidden}
.chr__bar i{position:absolute;top:0;bottom:0;left:var(--p);width:var(--w);
  border-radius:var(--pill)}
.chr--this{background-color:var(--brand-f)}
.chr--ai{background-color:var(--ok)}
.chr--mvm{background-color:var(--rule-2)}
.chr--sup{background-color:var(--fg)}
.chr__n{display:none}
.chr__grid{display:grid;gap:12px;margin-bottom:20px}
@media(min-width:720px){.chr__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.chr__c{padding:16px 17px;border-radius:var(--r);background-color:var(--card-2);
  border:1px solid var(--rule)}
.chr__c b{display:block;font-family:var(--font-num);font-size:26px;
  font-weight:700;color:var(--brand);line-height:1}
.chr__c span{display:block;font-size:13px;color:var(--fg-m);margin-top:7px}
.chr__f{font-size:14.8px;margin:0;padding-top:16px;
  border-top:1px solid var(--rule);max-width:none}

/* ------------------------------------------- the window against the waiting */
.jd__axis{position:relative;height:74px;margin-bottom:26px;
  background-color:var(--card-2);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.jd__win,.jd__judge{position:absolute;top:0;height:42px;display:flex;
  align-items:center;padding:0 12px;overflow:hidden}
.jd__win{left:0;width:var(--w);background-color:var(--ok-w);
  border-right:2px solid var(--ok)}
.jd__judge{left:var(--p);width:var(--w);background-color:var(--over-w);
  border-left:2px solid var(--over)}
.jd__win span,.jd__judge span{font-size:11.2px;font-weight:650;
  white-space:nowrap;line-height:1.25}
.jd__win span{color:var(--ok)}
.jd__judge span{color:var(--over)}
@media(max-width:700px){.jd__win span,.jd__judge span{font-size:10px;
  white-space:normal}}
.jd__ticks{position:absolute;left:0;right:0;bottom:0;height:32px}
.jd__ticks u{position:absolute;left:var(--p);top:0;bottom:0;
  border-left:1px solid var(--rule-2);text-decoration:none}
.jd__ticks b{position:absolute;left:4px;bottom:6px;font-family:var(--font-num);
  font-size:11px;color:var(--fg-m);font-weight:600}
.jd__l{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:17px}
.jd__hd{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:6px}
.jd__hd b{font-size:15.4px}
.jd__hd span{font-family:var(--font-num);font-size:13px;color:var(--fg-m)}
.jd__bar{height:15px;background-color:var(--card-2);border:1px solid var(--rule);
  border-radius:var(--pill);overflow:hidden}
.jd__bar i{display:block;height:100%;width:var(--w);
  background-color:var(--brand-f);border-radius:var(--pill)}
.jd__n{font-size:14.2px;color:var(--fg-m);margin:8px 0 0;max-width:none}
.jd__out{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;
  padding:16px 18px;border-radius:var(--r);background-color:var(--over-w);
  border:1px solid var(--over);margin-bottom:18px}
.jd__out b{font-family:var(--font-num);font-size:22px;font-weight:700;
  color:var(--over);flex:0 0 auto}
.jd__out span{font-size:14.4px;flex:1 1 260px}
.jd__f{font-size:14.8px;margin:0;padding-top:16px;
  border-top:1px solid var(--rule);max-width:none}

/* ------------------------------------------------------------- the packs -- */
.packs{display:grid;gap:16px;grid-template-columns:1fr;align-items:stretch;
  margin:0 0 24px}
@media(min-width:720px){.packs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pack{position:relative;background-color:var(--card);
  border:1px solid var(--rule);border-radius:var(--r);padding:22px 20px;
  display:flex;flex-direction:column;box-shadow:var(--shadow-now);
  transition:transform var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease)}
.pack:hover{transform:translateY(-3px);border-color:var(--rule-2)}
.pack--best{border-color:var(--brand-f)}
.pack__tag{position:absolute;top:-11px;left:50%;translate:-50% 0;
  background-color:var(--brand-f);color:#fff;font-size:11.4px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:4px 14px;
  border-radius:var(--pill);white-space:nowrap}
.pack__shot{height:168px;display:grid;place-items:center;margin:8px 0 16px;
  overflow:hidden}
/* display:contents makes the <img> the grid item; without it the wrapper is an
   inline box and the image sizes itself out of the card. */
.pack__shot picture{display:contents}
.pack__shot img{max-height:168px;max-width:100%;width:auto;height:auto;
  object-fit:contain}
.pack h3{margin:0 0 14px;font-size:19px;text-align:center}
.pack__d{margin:0 0 18px}
.pack__d > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;padding:9px 0;border-bottom:1px solid var(--rule)}
.pack__d > div:last-child{border-bottom:0}
.pack__d dt{font-size:13.4px;color:var(--fg-m)}
.pack__d dd{margin:0;font-family:var(--font-num);font-size:16px;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right}
.pack .btn{margin-top:auto;width:100%}

/* ------------------------------------------------------ the cost per day -- */
.cpd__ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:18px}
html:not(.js) .cpd__ctl{display:none}
.cpd__ctl label{font-weight:700;font-size:14.4px}
.cpd__ctl select{font:inherit;font-size:15px;padding:10px 12px;
  border:1px solid var(--rule-2);border-radius:var(--r);
  background-color:var(--card);color:var(--fg);min-width:200px}
.cpd__out{display:grid;gap:18px;align-items:start}
@media(min-width:700px){.cpd__out{grid-template-columns:auto 1fr}}
html:not(.js) .cpd__out{display:none}
.cpd__big{text-align:center;padding:18px 24px;background-color:var(--fg);
  border-radius:var(--r);min-width:170px}
.cpd__big b{display:block;font-family:var(--font-num);font-size:38px;
  font-weight:800;line-height:1;color:var(--card)}
.cpd__big span{display:block;font-size:12.4px;margin-top:6px;
  color:var(--card);opacity:.72}
.cpd__dl{margin:0}
.cpd__dl > div{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;border-bottom:1px solid var(--rule)}
.cpd__dl > div:last-child{border-bottom:0}
.cpd__dl dt{font-size:14px;color:var(--fg-m)}
.cpd__dl dd{margin:0;font-family:var(--font-num);font-weight:700;font-size:15.4px}
.cpd__f{font-size:14.2px;color:var(--fg-m);margin:18px 0 0;padding-top:15px;
  border-top:1px solid var(--rule);max-width:none}

/* ----------------------------------------------------------- the conflicts - */
.conf{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:18px;
  counter-reset:cf}
.conf li{counter-increment:cf;border:1px solid var(--rule);
  border-radius:var(--r);padding:20px;background-color:var(--card);
  box-shadow:var(--shadow-now)}
.conf h3{margin:0 0 14px;font-size:17px}
.conf h3::before{content:counter(cf) ". ";color:var(--brand);
  font-family:var(--font-num)}
.conf__two{display:grid;gap:14px}
@media(min-width:720px){.conf__two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.conf__a,.conf__b{padding:13px 15px;border-radius:var(--r);
  border:1px solid var(--rule)}
.conf__a{background-color:var(--wash);border-color:var(--brand-f)}
.conf__b{background-color:var(--card-2)}
.conf__tag{display:inline-block;font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px;
  color:var(--fg-m)}
.conf__tag--w{color:var(--brand)}
.conf__a p,.conf__b p{margin:0;font-family:var(--font-num);font-size:13.8px;
  line-height:1.5;max-width:none}
.conf__n{margin:14px 0 0;font-size:14.8px;color:var(--fg-m);max-width:none}
.conf__rule{font-size:15px;font-weight:600;padding:14px 16px;
  border-left:4px solid var(--brand-f);background-color:var(--card);
  border-radius:0 var(--r) var(--r) 0;max-width:none}

/* --------------------------------------------------------- the review copy - */
.rq__warn{border:1px solid var(--over);background-color:var(--over-w);
  border-radius:var(--r);padding:15px 17px;margin-bottom:22px;font-size:14.6px;
  line-height:1.55}
.rq__warn b{color:var(--over)}
.rq__grid{display:grid;gap:24px;margin-bottom:24px}
@media(min-width:800px){.rq__grid{grid-template-columns:1fr 1fr}}
.rq h3{margin:0 0 12px;font-size:15.4px}
.rq__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rq__l li{display:flex;align-items:center;gap:10px}
.rq__s{font-family:var(--font-num);font-size:13px;width:2.6em;flex:0 0 auto;
  color:var(--fg-m)}
.rq__b{flex:1 1 auto;height:13px;background-color:var(--card-2);
  border:1px solid var(--rule);border-radius:var(--pill);overflow:hidden}
.rq__b i{display:block;height:100%;width:var(--w);background-color:var(--brand-f)}
.rq__p{font-family:var(--font-num);font-size:12.6px;width:3em;text-align:right;
  flex:0 0 auto}
.rq__ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.rq__ul li{display:flex;gap:12px;align-items:flex-start;font-size:14.4px}
.rq__ul b{font-family:var(--font-num);flex:0 0 auto;color:var(--brand);
  font-size:13.4px;padding-top:2px}
.rq__ul q{color:var(--fg-m)}
.rq p{font-size:14.6px;color:var(--fg-m);max-width:none}
.rq__f{margin:20px 0 0!important;padding-top:16px;
  border-top:1px solid var(--rule)}

/* ----------------------------------------------------------- the label map - */
.lmap__fig{position:relative;border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;margin-bottom:20px;background-color:#0e1116}
.lmap__fig img{width:100%}
.lmap__dots{position:absolute;inset:0}
html:not(.js) .lmap__dots{display:none}
.lmap__d{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;
  width:28px;height:28px;border-radius:50%;border:2px solid #fff;
  background-color:var(--brand-f);color:#fff;cursor:pointer;padding:0;
  display:grid;place-items:center;font-family:var(--font-num);font-size:12.4px;
  font-weight:700;box-shadow:0 2px 9px rgba(0,0,0,.5);
  transition:transform var(--t-hover) var(--ease)}
.lmap__d:hover,.lmap__d.is-on{transform:translate(-50%,-50%) scale(1.22);
  background-color:var(--ink)}
.lmap__l{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden}
.lmap__l li{background-color:var(--card);padding:13px 16px;font-size:14.6px;
  color:var(--fg-m);transition:background-color var(--t-hover) var(--ease)}
.lmap__l li b{color:var(--fg);font-weight:700}
.lmap__l li.is-on{background-color:var(--wash)}
.lmap__f{font-size:13px;color:var(--fg-m);margin:16px 0 0;max-width:none}

/* ------------------------------------------------------------ the fit check */
.fit__l{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.fit__q{border:1px solid var(--rule);border-radius:var(--r);padding:17px 19px;
  background-color:var(--card)}
.fit__q > p{margin:0 0 12px;font-size:15.6px;font-weight:600;max-width:none}
.fit__q > p b{color:var(--brand);font-family:var(--font-num)}
.fit__btns{display:flex;gap:9px;margin-bottom:12px}
html:not(.js) .fit__btns{display:none}
.fit__btns button{font:inherit;font-weight:700;font-size:14.4px;padding:9px 22px;
  border:1.5px solid var(--rule-2);border-radius:var(--r);cursor:pointer;
  background-color:var(--card);color:var(--fg);
  transition:border-color var(--t-hover) var(--ease),
             transform var(--t-hover) var(--ease)}
.fit__btns button:hover{transform:translateY(-1px);border-color:var(--fg)}
.fit__btns button[aria-pressed="true"]{background-color:var(--fg);
  color:var(--card);border-color:var(--fg)}
.fit__o p{margin:0 0 8px;font-size:14.8px;color:var(--fg-m);max-width:none;
  padding-left:14px;border-left:3px solid var(--rule)}
.fit__o p:last-child{margin-bottom:0}
.fit__o p b{color:var(--fg)}
html.js .fit__o p{display:none}
html.js .fit__q[data-a="y"] .fit__y{display:block;border-left-color:var(--brand-f)}
html.js .fit__q[data-a="n"] .fit__n{display:block;border-left-color:var(--brand-f)}

/* ---------------------------------------------------------------- the seals */
.seals{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:1px;
  background-color:var(--rule)}
@media(min-width:760px){.seals{grid-template-columns:repeat(2,minmax(0,1fr))}}
.seals li{background-color:var(--card);padding:18px;display:flex;gap:16px;
  align-items:flex-start}
.seal__i{width:64px;flex:0 0 auto}
.seal__i img{width:100%;height:auto}
.seal__b h3{margin:0 0 6px;font-size:15.6px}
.seal__tag{display:inline-block;font-size:10.8px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand);
  margin-bottom:7px}
.seal__b p{margin:0;font-size:14.4px;color:var(--fg-m);max-width:none}
.seals__f{font-size:14.4px;color:var(--fg-m)}

/* ---------------------------------------------------------- not published -- */
.npub{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:1px;
  background-color:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;padding:0}
.npub li{background-color:var(--card);padding:16px 18px 16px 46px;
  position:relative}
.npub li::before{content:"\2014";position:absolute;left:18px;top:15px;
  font-family:var(--font-num);color:var(--over);font-weight:700}
.npub li b{display:block;font-size:15.4px;margin-bottom:5px}
.npub li p{margin:0;font-size:14.4px;color:var(--fg-m);max-width:none}
.npub__f{font-size:14.6px;color:var(--fg-m)}

/* ------------------------------------------------------------- the score --- */
.sc{display:grid;gap:26px}
@media(min-width:860px){.sc{grid-template-columns:230px 1fr;align-items:start}}
.sc__big{text-align:center;padding:24px 20px;border:1px solid var(--rule-2);
  border-radius:var(--r);background-color:var(--card-2)}
.sc__big b{display:block;font-family:var(--font-num);font-size:62px;
  font-weight:800;line-height:1;color:var(--brand);letter-spacing:-.04em}
.sc__big span{display:block;font-size:13px;color:var(--fg-m);margin-top:6px}
.sc__big p{font-size:12.2px;color:var(--fg-m);margin:14px 0 0;padding-top:12px;
  border-top:1px solid var(--rule);max-width:none}
.sc__l{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.sc__hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:6px}
.sc__hd b{font-size:15.2px}
.sc__v{font-family:var(--font-num);font-weight:700;color:var(--brand)}
.sc__bar{height:9px;background-color:var(--card-2);border:1px solid var(--rule);
  border-radius:var(--pill);overflow:hidden}
.sc__bar i{display:block;height:100%;width:var(--w);background-color:var(--brand-f)}
.sc__w{font-size:14.2px;color:var(--fg-m);margin:7px 0 0;max-width:none}
.sc__f{grid-column:1/-1;font-size:14.2px;color:var(--fg-m);margin:0;
  padding-top:16px;border-top:1px solid var(--rule);max-width:none}

/* ---------------------------------------------------------------- the FAQ -- */
.faq{margin:0 0 20px}
.faq__ctl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:18px}
html:not(.js) .faq__ctl,html:not(.js) .faq__more,html:not(.js) .faq__none{
  display:none}
.faq__ctl label{font-weight:700;font-size:14.4px}
.faq__ctl input[type=search]{flex:1 1 260px;font:inherit;font-size:15.4px;
  padding:12px 14px;border:1.5px solid var(--rule-2);border-radius:var(--r);
  background-color:var(--card);color:var(--fg);min-width:0}
.faq__n{font-family:var(--font-num);font-size:13px;color:var(--fg-m);
  white-space:nowrap}
.faq__l{list-style:none;margin:0;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[hidden]{display:none}
.faq__i details{border:0}
.faq__i summary{cursor:pointer;list-style:none;padding:15px 46px 15px 18px;
  font-weight:700;font-size:15.4px;position:relative;
  transition:background-color var(--t-hover) var(--ease)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{content:"";position:absolute;right:19px;top:22px;
  width:9px;height:9px;border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);rotate:45deg;
  transition:rotate 190ms var(--ease)}
.faq__i details[open] summary::after{rotate:225deg;top:25px}
.faq__i summary:hover{background-color:var(--card-2)}
.faq__a{padding:0 18px 17px}
.faq__a p{margin:0;font-size:15.2px;color:var(--fg-m);max-width:none}
.faq__none{margin:16px 0 0;font-size:15px;color:var(--fg-m)}
.faq__more{margin:18px 0 0}

/* ------------------------------------------------------------- the footer -- */
.foot{padding:clamp(40px,5vw,64px) 0 26px;border-top:3px solid var(--brand-f)}
.foot__top{display:grid;gap:30px;margin-bottom:34px}
@media(min-width:720px){.foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.foot__top{grid-template-columns:1.5fr repeat(4,1fr) 1.6fr}}
.foot .brand__m{background-color:var(--brand-f)}
.foot__b b{display:block;font-size:19px;font-weight:800;margin:12px 0 6px}
.foot__b p{margin:0 0 4px;font-size:13.6px;color:var(--fg-m);max-width:none}
.foot__c h2{font-size:12.4px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-m);margin:0 0 13px;font-weight:800}
.foot__c ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot__c a{font-size:14.2px;text-decoration:none;color:var(--fg);
  transition:color var(--t-hover) var(--ease)}
.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:.06em;text-transform:uppercase;
  color:var(--fg-m);font-weight:700}
.foot__c--k dd{margin:2px 0 0;font-size:14px;line-height:1.5}
.foot__c--k dd a{color:var(--brand)}
.foot__c--k dd span{display:block;font-size:12.2px;color:var(--fg-m)}
.foot__seals{display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  padding:22px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.foot__seal{width:56px}
.foot__seal img{width:100%;height:auto}
.foot__pay{display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.foot__pay img{width:200px;height:auto}
.foot__pay span{font-size:12.4px;color:var(--fg-m);flex:1 1 240px}
.foot__prec{padding:24px 0;border-bottom:1px solid var(--rule)}
.foot__prec h2{font-size:12.4px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fg-m);margin:0 0 14px;font-weight:800}
.foot__prec ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
@media(min-width:900px){.foot__prec ul{grid-template-columns:1fr 1fr;
  gap:9px 34px}}
.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:.56em;width:5px;
  height:5px;background-color:var(--rule-2);border-radius:1px}
.foot__legal{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  justify-content:space-between;padding-top:20px}
.foot__legal nav{display:flex;flex-wrap:wrap;gap:18px}
.foot__legal a{font-size:13px;color:var(--fg-m);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}

/* The sentinel the test harnesses wait on. It must stay the last declaration
   in this file: --css-ready reads as 1 only once the whole sheet has parsed. */
:root{--css-ready:1}