/* Goglucotide - warm paper, lifted cards, one deep teal.

   The first pass at this site was a dark bench with the product lit on a white
   card. It read as heavy and technical rather than as a product page. This is
   a reskin: warm off-white paper, 18px radii, two-layer shadows, a large
   friendly type stack, and the dark ground demoted to a counterpoint band.
   Colour still appears only where it carries meaning: four validated evidence
   hues and one accent. Fourteen interactive components, every one usable
   without JavaScript. Every fact, page and source is unchanged. */

*,*::before,*::after{box-sizing:border-box}

/* ---------- tokens ---------- */
:root{
  --ink:#14201D; --ink-2:#4A5854; --ink-3:#5F6B67;
  --bg:#FBF9F5; --bg-2:#F3EFE8; --surface:#FFFFFF; --tint:#EFF5F2; --pink:#EFF5F2;
  --line:#E4DED4; --rule:#EDE8DF;
  --accent:#0B7A60; --accent-fill:#0B7A60; --accent-mid:#096550; --accent-deep:#05442F;
  --accent-2:#1B4F8A;
  /* the DARK counterpoint band: the 60-second summary and the closing CTA */
  --dark:#122622; --dark-ink:#F2F7F5; --dark-ink-2:#BCCCC7; --dark-ink-3:#93A5A0;
  --dark-accent:#4FDDB0; --dark-line:#2A403A;
  --warn:#7A4E05; --warn-bg:#FDF6E6; --warn-line:#EBD9A8;

  /* mark colours, validated for a light surface */
  --cat-printed:#00875C; --cat-ceiling:#2F6DC4; --cat-over:#C33C80; --cat-caution:#9C6A0C;
  /* darker steps of the same four hues, for 11.5px type where 4.5:1 applies */
  --cat-printed-t:#046347; --cat-ceiling-t:#1E4F91; --cat-over-t:#96235E; --cat-caution-t:#7A5108;

  --radius:18px; --radius-sm:12px; --pill:999px;
  /* two layers, both soft: one to seat the card on the paper, one to float it.
     A single hard shadow is what made the first pass look pasted on. */
  --shadow:0 1px 2px rgba(20,32,29,.05), 0 8px 24px -8px rgba(20,32,29,.10);
  --lift:0 2px 4px rgba(20,32,29,.05), 0 24px 56px -16px rgba(20,32,29,.18);
  --glow:0 12px 36px -10px rgba(11,122,96,.42);

  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem; --s6:4.5rem;
  --ease:cubic-bezier(.16,1,.3,1);
  --t-hover:160ms; --t-ui:300ms; --t-reveal:700ms;

  --wrap:1220px; --text:720px; --wide:980px;
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --head-h:74px; --w:1; --mx:50%; --my:0%;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;overflow-x:clip;
  scroll-padding-top:calc(var(--head-h) + 1.25rem);scroll-padding-bottom:7.5rem}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink-2);
  font:400 17px/1.72 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);font-family:var(--display);font-weight:700;line-height:1.1;
  letter-spacing:-.022em;margin:0 0 .7rem}
h1{font-size:clamp(1.95rem,3.5vw,3.05rem);letter-spacing:-.034em;font-weight:800}
h2{font-size:clamp(1.55rem,2.6vw,2.2rem);letter-spacing:-.03em;font-weight:700}
h3{font-size:1.16rem;line-height:1.32;letter-spacing:-.016em}
.h3{font-size:1.16rem;line-height:1.32;font-family:var(--display);font-weight:700;
  color:var(--ink);margin:0 0 .5rem;letter-spacing:-.014em}
p{margin:0 0 1.1rem}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#8FEBCC}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
.mid{width:min(100% - 3rem,var(--wide));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:.5rem;z-index:200;background:var(--accent-fill);color:#fff;
  padding:.75rem 1.2rem;border-radius:var(--radius);text-decoration:none;font-weight:700;
  transform:translateY(-200%);transition:transform var(--t-ui) var(--ease)}
.skip:focus{transform:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
/* The page ground is dark and the counterpoint is light, so this is the
   reverse of the last ten sites: the default --accent ring belongs to the dark
   ground, and the LIGHT surfaces are the ones that need an override. */
.band-dark :focus-visible,.shot :focus-visible{outline-color:var(--dark-accent)}
.no{color:var(--ink-3);font-style:italic}
.lede{font-size:clamp(1.04rem,1.5vw,1.2rem);line-height:1.64;color:var(--ink-2);
  max-width:64ch;margin:0 0 1.2rem}
.disc{font-size:14.5px;line-height:1.68;color:var(--ink-3)}
.disc a,.note a,.foot a{overflow-wrap:anywhere}
a[href^="mailto:"],a[href^="http"]{overflow-wrap:anywhere}
td,th,li,p{overflow-wrap:break-word}
/* ---------- top strip ---------- */
.strip{background:var(--bg-2);color:var(--ink-2);border-bottom:2px solid var(--accent-fill)}
.strip .wrap{display:flex;gap:.45rem 1.4rem;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:.55rem 0;text-align:center;
  font:600 12px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.strip b{color:var(--accent);font-weight:600}
.strip a{color:var(--ink);text-decoration:none;font-weight:600;
  display:inline-block;padding-block:.95rem;min-height:44px;box-sizing:border-box}
.strip a:hover{color:var(--accent)}
.strip .dot{width:4px;height:4px;border-radius:var(--pill);background:var(--line);flex:none}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:90;background:rgba(251,249,245,.94);
  backdrop-filter:saturate(1.35) blur(14px);border-bottom:1px solid var(--rule);
  transition:transform var(--t-ui) var(--ease),box-shadow var(--t-ui) var(--ease)}
/* once the page has moved under it the bar earns a shadow; at the top it has
   nothing to sit above and a shadow there just looks like a mistake */
.head--float{box-shadow:0 1px 0 rgba(20,32,29,.04), 0 10px 30px -18px rgba(20,32,29,.28)}
.head--hide{transform:translateY(-108%)}
.head .wrap{display:flex;align-items:center;gap:1.1rem;min-height:var(--head-h)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);
  flex:0 1 auto;min-width:0}
/* the wordmark is the one thing in the bar that can give way; without
   min-width:0 a flex item refuses to shrink below its content and pushes
   the menu button off the right edge at 360px. */
.brand .nm{min-width:0;overflow:hidden}
.brand .mark{width:42px;height:42px;flex:none;display:grid;place-items:center;
  border-radius:14px;background:linear-gradient(145deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:0 6px 16px -6px rgba(11,122,96,.55);color:#fff}
.brand .mark svg{width:24px;height:24px}
.brand .nm{font:700 19px/1.05 var(--display);letter-spacing:-.022em;font-stretch:112%}
.brand .nm small{display:block;font:500 9.5px/1.4 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
.nav{margin-left:auto;display:flex;align-items:center;gap:.05rem;flex-wrap:nowrap;min-width:0}
.nav a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:600;
  padding:.5rem .68rem;border-radius:var(--radius-sm);white-space:nowrap;position:relative;
  transition:color var(--t-hover) var(--ease),background var(--t-hover) var(--ease)}
.nav a:hover{color:var(--ink);background:var(--bg-2)}
.nav a[aria-current=page]{color:var(--accent);background:var(--tint)}
.head .tel{font:600 14px/1 var(--sans);color:var(--ink);text-decoration:none;
  white-space:nowrap;flex:none}
.head .tel:hover{color:var(--accent)}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--surface);
  border-radius:14px;cursor:pointer;place-items:center;flex:none;box-shadow:var(--shadow)}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;
  background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.drawer{display:none}

/* ---------- buttons: square-cut, small uppercase, trailing arrow ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font:700 14.5px/1 var(--display);letter-spacing:-.005em;text-transform:none;
  padding:1.05rem 1.8rem;border-radius:14px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),
    background var(--t-hover) var(--ease),color var(--t-hover) var(--ease)}
.btn::after{content:"";width:14px;height:8px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M0 4h11M8 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.6'/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'><path d='M0 4h11M8 1l3 3-3 3' fill='none' stroke='black' stroke-width='1.6'/></svg>") no-repeat center/contain;
  transition:translate var(--t-hover) var(--ease)}
.btn:hover::after{translate:3px 0}
.btn.btn--primary{background:linear-gradient(140deg,#0E8A6C 0%,var(--accent-fill) 55%,var(--accent-mid) 100%);color:#fff;box-shadow:var(--glow)}
.btn.btn--primary:hover{transform:translateY(-2px);background:var(--accent-mid);color:#fff;
  box-shadow:0 16px 40px -12px rgba(11,122,96,.5)}
.btn.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line);
  box-shadow:var(--shadow)}
.btn.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);
  box-shadow:0 14px 32px -14px rgba(20,32,29,.3)}
.btn.btn--onDark{background:#fff;color:var(--accent-deep);box-shadow:none}
.btn.btn--onDark:hover{transform:translateY(-2px);background:var(--dark-accent);
  color:var(--dark)}
.btn.btn--wide{width:100%}

/* ---------- breadcrumb, keep reading, progress ---------- */
.crumb{font:500 13px/1.5 var(--sans);color:var(--ink-3);padding:1.4rem 0 0}
.crumb ol{list-style:none;display:flex;gap:.45rem;flex-wrap:wrap;margin:0;padding:0}
.crumb li::after{content:"/";margin-left:.45rem;color:var(--line)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.kr a{text-decoration:none;color:inherit}
.kr .card h3{color:var(--accent)}
.progress{position:fixed;left:0;top:0;height:3px;z-index:120;width:100%;transform-origin:left;
  transform:scaleX(0);background:var(--accent-fill);transition:transform .12s linear}

/* ---------- sticky buy bar ---------- */
/* :focus-within brings it back. It is position:fixed, so when the keyboard
   reaches the button while the bar is translated away the browser cannot
   scroll it into view - focus simply vanishes for one stop, on the primary
   call to action. */
.buybar:focus-within{transform:none!important}
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(1.3) blur(14px);
  border-top:1px solid var(--rule);color:var(--ink-2);
  box-shadow:0 -10px 40px -20px rgba(20,32,29,.35);
  transform:translateY(105%);transition:transform var(--t-ui) var(--ease)}
.buybar--on{transform:none}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem 0;flex-wrap:wrap}
.buybar__txt{display:grid;gap:.15rem;font-size:14px}
.buybar__txt b{color:var(--ink);font-size:15.5px}
.buybar .btn{padding:.85rem 1.5rem;font-size:13px}

/* ---------- section progress nav ---------- */
.secnav{display:flex;gap:.3rem;flex-wrap:wrap;padding:.3rem;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);margin:0 auto 2.2rem;
  width:fit-content;max-width:100%;list-style:none;box-shadow:var(--shadow)}
.secnav a{display:block;padding:.55rem .95rem;border-radius:var(--radius-sm);
  text-decoration:none;font:600 13px/1 var(--sans);color:var(--ink-3);white-space:nowrap;
  transition:color var(--t-hover) var(--ease),background var(--t-hover) var(--ease)}
.secnav a:hover{color:var(--ink);background:var(--tint)}
.secnav a.is-on{color:#fff;background:var(--accent-fill)}
/* .secnav--sticky is deliberately NOT position:sticky. Its parent is a
   section wrapper only a little taller than the bar, so a sticky bar there
   travels a few pixels and stops - it reads as a bug, not a feature. The
   index rail is the thing that stays on screen on this site. */
.secnav--sticky{z-index:60;background:var(--bg)}

/* ---------- section headings ---------- */
.sec-head{max-width:70ch;margin:0 0 2.1rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lede{margin-inline:auto}
.kicker{font:600 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .85rem;display:flex;align-items:center;gap:.65rem}
.kicker::before{content:"";width:16px;height:2px;background:var(--accent-fill)}
.sec-head.center .kicker{justify-content:center}
section{padding:clamp(2.7rem,4.6vw,4.8rem) 0}

/* ---------- layout primitives (duplicated into the inlined CSS on purpose:
   leaving them out lets the page lay itself out twice) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.2vw,3.2rem);align-items:center}
.grid{display:grid;gap:1.1rem}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Each section carries its OWN measured height in --cvh, written into the
   markup after the build by cvsize.js; the 700px here is only the fallback for
   a section that pass never saw. A single flat figure was wrong in both
   directions - the home page ran 36% short, pricing 15% long - and a document
   whose height moves while you scroll it is a scrollbar that moves under your
   cursor. `auto` means the browser swaps in the real height the moment the
   section renders, so these figures only govern the first pass. */
.cv{content-visibility:auto;contain-intrinsic-size:auto var(--cvh,700px)}
main>section.cv:nth-of-type(-n+3){content-visibility:visible}
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent-fill);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.card p{margin:0;font-size:15.5px;color:var(--ink-2)}
.note{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent-fill);border-radius:var(--radius);padding:1.4rem 1.5rem}

/* ---------- above-the-fold primitives ---------- */
/* These paint in the first screen of EVERY page, not just the home page,
   because the inner-page header is an h1 followed by an .answer block. They
   therefore live above the hero marker, where critical_css() inlines them
   whether or not the page has a hero. Site 8 learned this the hard way: a
   rule that only arrives with the async stylesheet moves everything under
   it, and the reflow lands about a second in, which is exactly where CLS
   is still counting. */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:600 11px/1 var(--sans);
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;
  padding:.5rem .95rem;border-radius:var(--pill);
  background:var(--tint);border:1px solid rgba(11,122,96,.18);align-self:flex-start}
.answer{background:var(--surface);border:1px solid var(--rule);
  border-left:4px solid var(--accent-fill);
  border-radius:var(--radius);padding:1.4rem 1.6rem;font-size:16.5px;line-height:1.7;
  color:var(--ink-2);margin:0 0 1.3rem;box-shadow:var(--shadow)}
.answer__tag{margin:0 0 .5rem;font:600 10px/1 var(--sans);letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent)}
.answer b,.answer strong{color:var(--ink);font-weight:700}
.pills{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.1rem;padding:0;list-style:none}
.pills li{font:500 12.5px/1 var(--sans);color:var(--ink-2);border:1px solid var(--rule);
  background:var(--surface);border-radius:var(--pill);padding:.55rem .9rem;
  box-shadow:0 1px 2px rgba(20,32,29,.04)}

.ticks{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.55rem;counter-reset:tk}
.ticks li{counter-increment:tk;position:relative;padding-left:2rem;font-size:16px;
  color:var(--ink-2)}
.ticks li::before{content:counter(tk,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font:600 11px/1.5 var(--sans);color:var(--accent);letter-spacing:.04em}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}
.microcopy{font-size:14px;color:var(--ink-3);margin:0 0 1.1rem}

/* ---------- 12. the 60-second summary ---------- */
/* the 60-second block is the one place on a light page that goes dark: it is
   the answer before the argument starts, and it should read as a different
   kind of thing from the prose around it */
.sixty{border-radius:var(--radius);background:var(--dark);color:var(--dark-ink-2);
  padding:clamp(1.4rem,2.8vw,2.2rem);box-shadow:var(--lift);
  background-image:radial-gradient(620px 320px at 88% -10%,rgba(79,221,176,.14),transparent 70%)}
.sixty h2,.sixty .h3{color:var(--dark-ink)}
.sixty__h{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin:0 0 .9rem}
.sixty__h h2,.sixty__h .h3{margin:0}
.sixty__t{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--dark-accent);border:1px solid rgba(255,255,255,.18);padding:.45rem .7rem;
  border-radius:var(--pill)}
.sixty ol{margin:0;padding:0;list-style:none;display:grid;gap:.1rem;counter-reset:sx}
.sixty li{counter-increment:sx;display:grid;grid-template-columns:2.2rem minmax(0,1fr);
  gap:.9rem;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.11);font-size:15.5px;
  line-height:1.62;color:var(--dark-ink-2)}
.sixty li:first-child{border-top:0;padding-top:0}
.sixty li::before{content:counter(sx,decimal-leading-zero);font:600 11px/1.75 var(--sans);
  color:var(--dark-accent);letter-spacing:.04em}
.sixty li b{color:var(--dark-ink);font-weight:700}
.sixty a{color:var(--dark-accent)}

/* ---------- exhibits and the index rail ---------- */
/* Site 10 grouped sections into chapter markers you scrolled past once
   you scrolled past once. This one keeps the index ON SCREEN: a numbered rail
   down the left that marks where you are, so the structure stays available all
   the way down rather than only at the joins. Defined above the hero marker on
   purpose - everything above it is inlined into every page, and a rail that
   arrives with the async stylesheet moves the column beside it. */
.dossier{display:grid;grid-template-columns:186px minmax(0,1fr);
  gap:clamp(1.4rem,3vw,3rem);align-items:start}
/* sticky goes on the GRID ITEM, not on the list inside it. A sticky element
   only travels within its own containing block, and the <nav> is exactly as
   tall as the list, so sticking the list to the nav pinned it to nothing and
   the rail scrolled away with the first screen. */
.dossier>nav{position:sticky;top:calc(var(--head-h) + 1.3rem);align-self:start}
.idx{margin:0;padding:0;list-style:none;display:grid;gap:.15rem;
  border-left:2px solid var(--rule);
  /* the buy bar is fixed over the bottom of the viewport, so the rail has to
     stop above it or its last two items are unreachable */
  max-height:calc(100vh - var(--head-h) - 8.5rem);
  /* the ring is 2px at a 3px offset, and an overflow:auto box clips it to the
     one edge that happens to sit inside. Give the scroller the 5px back. */
  padding:5px;margin-inline:-5px;
  overflow:auto}
.idx li{margin:0}
.idx a{display:grid;grid-template-columns:2.1rem minmax(0,1fr);gap:.2rem;align-items:baseline;
  padding:.62rem .7rem;color:var(--ink-3);text-decoration:none;font:500 13px/1.35 var(--sans);
  border-left:2px solid transparent;margin-left:-1px;
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.idx a i{font:600 10.5px/1.5 var(--mono);color:var(--ink-3);font-style:normal;
  letter-spacing:.06em}
.idx a:hover{color:var(--ink)}
.idx a.is-on{color:var(--ink);border-left-color:var(--accent);background:var(--surface);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:var(--shadow);
  font-weight:600}
.idx a.is-on i{color:var(--accent)}
/* An implicit grid track is sized to its widest item, so a section holding a
   640px-min table made the whole column 640px wide and every heading in it
   overhung a 390px screen. The track is pinned, and the sections are allowed
   to shrink below their content. */
.dossier__body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4.5vw,3.6rem)}
/* no scroll-margin-top here: html's scroll-padding-top already clears the
   sticky header, and the two offsets ADD - together they put every anchor
   348px below the heading it was meant to land on. */
.exhibit{min-width:0}
.exhibit__no{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 .7rem;
  font:600 10.5px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent)}
.exhibit__no::before{content:"";width:26px;height:2px;border-radius:2px;
  background:var(--accent);flex:none}

/* ---------- hero: the spotlight ---------- */
/* The label prints seven nutrients, each with a percentage of the Daily Value.
   Those seven percentages are still the argument - but the first pass led with
   them and left the product below the fold, which is why it read as a chart
   rather than a product page. So: the bottle is lifted on a card inside a soft
   spotlight with the four printed figures floating around it, and the seven
   percentages run full width underneath as an evidence strip.

   Nothing here is positioned against content whose height is not yet known.
   The card has an explicit aspect-ratio, the wash is sized in pixels with
   contain:strict, and the figure pills sit on the same grid as the card, which
   is why this hero measures 0.00 CLS. */
.hero{position:relative;isolation:isolate;
  padding:clamp(2rem,4vw,4rem) 0 clamp(2.4rem,4.5vw,4rem)}
/* One wide wash, painted once, never animated, and sized in pixels: a
   decorative layer measured as a percentage of its parent grows whenever the
   parent does, and a growing painted box is a layout shift even when nothing
   readable moved. */
.hero__wash{position:absolute;inset:0;z-index:-1;pointer-events:none;contain:strict;
  background:
    radial-gradient(760px 520px at 78% 22%, rgba(11,122,96,.10), transparent 70%),
    radial-gradient(620px 420px at 8% 0%, rgba(47,109,196,.07), transparent 72%),
    linear-gradient(180deg, var(--tint) 0%, rgba(239,245,242,0) 62%)}
.hero .wrap{position:relative;z-index:1}
.hero__top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(1.6rem,3.4vw,3.4rem);align-items:center}
.hero__head{max-width:62ch}
.hero h1{margin-bottom:1rem;text-wrap:balance;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent);
  background:linear-gradient(100deg,var(--accent) 0%,#12A37F 60%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__deck{font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.66;color:var(--ink-2);
  max-width:60ch;margin:0 0 1.5rem}

/* the spotlight: a lifted card with the four printed figures around it */
.spot{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;align-content:center}
.shot{grid-column:1/-1;margin:0 0 .2rem;background:var(--surface);
  border-radius:26px;padding:clamp(1rem,2vw,1.6rem);box-shadow:var(--lift);
  display:grid;gap:.85rem;justify-items:center;align-content:center;
  border:1px solid var(--rule);position:relative;overflow:hidden}
/* the light behind the bottle. Sized to the card, painted behind the image. */
.shot::before{content:"";position:absolute;left:50%;top:14%;width:92%;aspect-ratio:1;
  translate:-50% 0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(11,122,96,.16),transparent 70%)}
/* this scene image is roughly 1:1.9, so capping it by WIDTH gave a 574px-tall
   picture and a 700px card. Cap the height and let the width follow. */
.shot img{position:relative;width:auto;max-width:100%;
  max-height:clamp(290px,30vw,420px);height:auto}
.shot figcaption{position:relative;font-size:13px;line-height:1.6;color:var(--ink-3);
  text-align:center;max-width:44ch}
.shot figcaption b{color:var(--ink);font-weight:600;font-family:var(--mono);font-size:12.5px}
.shot figcaption a{color:var(--accent)}

.figs{display:contents;margin:0}
.figpill{background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  padding:.8rem .95rem;box-shadow:var(--shadow)}
.figpill dt{margin:0 0 .28rem;font:600 10.5px/1.4 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.figpill dd{margin:0;font:800 19px/1.15 var(--display);letter-spacing:-.024em;color:var(--ink)}
.figpill dd small{display:block;margin-top:.22rem;font:400 11.5px/1.45 var(--sans);
  letter-spacing:0;color:var(--ink-3)}
.figpill--1 dd,.figpill--3 dd{color:var(--accent)}

/* the evidence strip: the seven percentages, full width under both columns */
.hero__strip{margin-top:clamp(1.6rem,3vw,2.6rem)}

.hero__seals{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.3rem;
  border-top:1px solid var(--rule);padding-top:1.2rem;margin-top:1.4rem}
.hero__seals img{width:44px;height:44px;opacity:.95}
.hero__seals p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-3);max-width:38ch}

/* the readout */
.readout{grid-column:2;grid-row:2;min-width:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1rem,2.2vw,1.5rem)}
.readout__h{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;margin:0 0 1rem;
  font:600 10.5px/1.5 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3)}
.readout__h b{color:var(--accent);font-weight:700}
.readout ol{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.readout li{display:grid;grid-template-columns:minmax(0,1fr) 5.6rem;gap:.3rem .8rem;
  align-items:center}
.readout__n{grid-column:1;grid-row:1;margin:0;font-size:14.5px;line-height:1.3;color:var(--ink)}
.readout__n small{display:block;font:500 11.5px/1.4 var(--mono);color:var(--ink-3);
  letter-spacing:.03em}
.readout__v{grid-column:2;grid-row:1;text-align:right;font:700 15px/1.2 var(--mono);
  color:var(--ink);font-variant-numeric:tabular-nums}
/* the bar track stops at 100% of the Daily Value; a bar that exceeds it is
   drawn past the end of its own track, which is the point */
.readout__bar{grid-column:1/-1;grid-row:2;position:relative;height:9px;
  background:var(--rule);border-radius:var(--pill)}
.readout__bar i{position:absolute;left:0;top:0;bottom:0;display:block;
  border-radius:var(--pill);width:var(--w,0%);background:var(--cat-printed)}
.readout__bar::after{content:"";position:absolute;left:40%;top:-5px;bottom:-5px;width:1px;
  background:var(--ink-3);opacity:.75}
/* A bar longer than the track would be drawn is capped, and the cap is marked
   so nobody reads a capped bar as its true length. The printed percentage
   beside it is the real figure either way. */
/* A figure past the end of the scale is drawn running OFF the end, hatched,
   rather than stopping flush with the track - a bar that stops at the track
   edge reads as "the maximum", which is the one thing it is not. */
.readout li.is-capped .readout__bar i::after{content:"";position:absolute;left:100%;top:-2px;bottom:-2px;
  width:22px;background:repeating-linear-gradient(115deg,var(--cat-over) 0 3px,transparent 3px 6px)}
.readout li.is-capped .readout__bar i{position:absolute}
.readout__bar{overflow:visible}
.readout li.is-over .readout__v{color:var(--cat-over-t)}
.readout li.is-over .readout__bar i{background:var(--cat-over)}
.readout__cap{margin:1rem 0 0;padding-top:.85rem;border-top:1px solid var(--rule);
  font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.readout__cap b{color:var(--ink);font-weight:600}
.readout__key{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:.6rem 0 0;padding:0;
  list-style:none;font:500 11px/1.5 var(--sans);letter-spacing:.04em;color:var(--ink-3)}
.readout__key li{display:flex;align-items:center;gap:.4rem}
.readout__key i{width:10px;height:10px;border-radius:2px;flex:none}


/* ---------- sections ---------- */
.band-tint{background:var(--bg-2);border-block:1px solid var(--rule)}
.band-warm{background:var(--tint);border-block:1px solid var(--line)}
.band-dark{background:var(--dark);color:var(--dark-ink-2);border-block:1px solid var(--dark-line)}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark .h3{color:var(--dark-ink)}
.band-dark a{color:var(--dark-accent)}
.band-dark a:hover{color:#8BEDCB}
.band-dark .lede,.band-dark p{color:var(--dark-ink-2)}
.band-dark .kicker{color:var(--dark-accent)}
.band-dark .kicker::before{background:var(--dark-accent)}
.band-dark .disc{color:var(--dark-ink-3)}
.band-dark figcaption,.band-dark caption{color:var(--dark-ink-3)}
.band-dark .card p,.band-dark .note p,.band-dark .card .disc{color:var(--dark-ink-2)}
.band-dark summary{color:var(--dark-ink-2)}
.band-dark .fig img{border-color:var(--dark-line)}
/* The light counterpoint band only ever carries prose and links - never a
   card, a table, a pack or a figure. The twenty-five rules that used to sit
   here restyled all of those for a band none of them appear in, and one of
   them (a #243040 table-row hover) would have shipped at 1.56:1 the first day
   a table landed in one. */
.band-dark{background-image:radial-gradient(760px 380px at 85% -20%,
  rgba(79,221,176,.12),transparent 70%)}
.band-dark .card,.band-dark .note{background:rgba(255,255,255,.05);
  border-color:var(--dark-line);color:var(--dark-ink-2);box-shadow:none}
.band-dark .card::before{background:var(--dark-accent)}
.band-dark .card h3,.band-dark .note h3{color:var(--dark-ink)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.2vw,3.2rem);align-items:center}
.grid{display:grid;gap:1.1rem}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- cards: flat, outlined, coloured top rule ---------- */
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--rule);
  padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.55rem;
  box-shadow:var(--shadow);
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease)}
/* a 3px coloured rule across the top of every card is what made a page of
   twelve of them look like a spreadsheet; one small dot does the same job */
.card::before{content:"";position:absolute;left:1.7rem;top:0;width:34px;height:3px;
  border-radius:0 0 3px 3px;background:var(--accent-fill)}
.card:hover{transform:translateY(-4px);box-shadow:var(--lift);border-color:var(--line)}
.card h3{margin:0}
.card p{margin:0;font-size:15.5px;color:var(--ink-2)}

/* ---------- tables ---------- */
.tbl-wrap{position:relative;overflow-x:auto;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;font-size:15.5px}
caption{text-align:left;font-size:13px;color:var(--ink-3);padding:1rem 1.25rem .3rem}
th,td{text-align:left;padding:.86rem 1.25rem;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink-2)}
thead th{font:600 11.5px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);background:var(--bg-2);white-space:nowrap}
tbody th{color:var(--ink);font-weight:700;font-size:15.5px}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--t-hover) var(--ease)}
tbody tr:hover{background:var(--tint)}

/* ---------- callouts, steps, figures ---------- */
.note{background:var(--surface);border:1px solid var(--rule);
  border-left:4px solid var(--accent-fill);
  border-radius:var(--radius);padding:1.5rem 1.7rem;box-shadow:var(--shadow)}
.note h3{margin:0 0 .6rem;font-size:1.04rem}
.note p:last-child{margin-bottom:0}
.note--warn{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--warn)}
.note--warn h3{color:var(--warn)}
.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:1rem}
.steps li{counter-increment:s;position:relative;padding:1.3rem 1.5rem 1.3rem 4.2rem;
  border-radius:var(--radius);background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--shadow);
  transition:border-color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease)}
.steps li:hover{border-color:var(--accent);transform:translateY(-2px)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:1.35rem;
  top:1.42rem;font:600 1.05rem/1 var(--sans);color:var(--accent)}
.steps h3{margin:0 0 .3rem}
.steps p{margin:0;font-size:15.5px}
.fig{margin:0}
.fig img{border-radius:var(--radius);border:1px solid var(--rule);box-shadow:var(--shadow)}
figcaption{font-size:13px;line-height:1.65;color:var(--ink-3);margin-top:.85rem;max-width:58ch}

/* ---------- evidence chips ---------- */
.tag{display:inline-flex;align-items:flex-start;gap:.45rem;font:600 11.5px/1.35 var(--sans);
  letter-spacing:.03em;padding:.45rem .7rem;border-radius:var(--radius-sm);
  border:1px solid currentColor;
  /* not nowrap: these labels are sentences, and at 320px a nowrap chip runs off
     the side of a page whose html is overflow-x:clip, so the end of the label
     is gone and no scroll brings it back */
  white-space:normal;overflow-wrap:anywhere;max-width:100%}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;
  flex:none;margin-top:.24em}
.tag--printed{color:var(--cat-printed-t)}
.tag--ceiling{color:var(--cat-ceiling-t)}
.tag--over{color:var(--cat-over-t)}
.tag--caution{color:var(--cat-caution-t)}
.legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}

/* ---------- interactive components ---------- */
/* 1. flip cards */
.flip{position:relative}
.flip__btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;
  padding:.55rem 0;margin:.15rem 0 .5rem;min-height:26px;cursor:pointer;
  font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
  align-self:flex-start}
.flip:not(.flip--on) .flip__btn{display:none}
.flip__btn::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;
  transition:rotate var(--t-ui) var(--ease)}
.flip.is-flipped .flip__btn::after{rotate:225deg;translate:0 2px}
.flip__in{display:grid;gap:1rem}
.flip--on .flip__in{display:block}
.flip--on .flip__b{display:none}
.flip--on.is-flipped .flip__a{display:none}
.flip--on.is-flipped .flip__b{display:block;animation:fadeUp .3s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.flip__b{border-top:1px solid var(--rule);padding-top:.9rem}

/* 2. image hotspots */
.hotspots__frame{position:relative;display:inline-block;max-width:100%}
.hotspot{display:none}
.hotspots--on .hotspot{display:grid;position:absolute;place-items:center;width:30px;height:30px;
  translate:-50% -50%;border:2px solid var(--surface);cursor:pointer;
  background:var(--accent-fill);color:#fff;font:700 12.5px/1 var(--sans);
  border-radius:50%;box-shadow:0 2px 10px rgba(20,32,29,.35);
  transition:transform var(--t-hover) var(--ease)}
.hotspots--on .hotspot:hover{transform:translate(-50%,-50%) scale(1.14)}
.hotspots--on .hotspot.is-on{box-shadow:0 0 0 4px rgba(11,122,96,.22),0 2px 10px rgba(20,32,29,.35);
  background:var(--accent-deep);color:#fff;transform:translate(-50%,-50%) scale(1.1)}
.hotspot__panels{margin-top:1.15rem;display:grid;gap:.8rem}
.hotspots--on .hotspot__panels{min-height:9rem}
.hotspot__panel{background:var(--surface);border:1px solid var(--rule);
  border-left:4px solid var(--accent-fill);border-radius:var(--radius);
  padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.hotspot__panel h3{margin:0 0 .35rem;font-size:1rem}
.hotspot__panel p{margin:0;font-size:15.5px}
.hotspot__panel .n{font-family:var(--sans);color:var(--accent);margin-right:.5rem}
.hotspots__hint{font:500 12px/1.5 var(--sans);color:var(--ink-3);margin:.9rem 0 0}
.hotspots:not(.hotspots--on) .hotspots__hint{display:none}

/* 3. tabs */
.tabs__list{display:flex;gap:.25rem;flex-wrap:wrap;margin:0 0 1.4rem;padding:.3rem;
  background:var(--bg-2);border-radius:var(--pill);width:fit-content;max-width:100%}
.tabs:not(.tabs--on) .tabs__list{display:none}
.tabs__list button{background:none;border:0;
  border-bottom:0;cursor:pointer;padding:.7rem 1.15rem;font:600 13.5px/1 var(--sans);
  border-radius:var(--pill);color:var(--ink-3);
  transition:color var(--t-hover) var(--ease),background var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease)}
.tabs__list button:hover{color:var(--ink)}
.tabs__list button[aria-selected=true]{color:var(--ink);background:var(--surface);
  box-shadow:var(--shadow)}
.tabs--on [role=tabpanel]{animation:fadeUp .28s var(--ease) both}
.tabs__h{font:700 1.1rem/1.34 var(--display);color:var(--ink);margin:0 0 .55rem;
  letter-spacing:-.014em}
.tabs--on .tabs__h{margin:0 0 .9rem;display:none}

/* 4. FAQ filter */
.faqfilter__bar{display:none}
.faqfilter--on .faqfilter__bar{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;
  margin:0 0 1.25rem}
.faqfilter__bar input{flex:1;min-width:14rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--pill);color:var(--ink);
  font:400 15px/1 var(--sans);padding:1rem 1.3rem;box-shadow:var(--shadow)}
.faqfilter__bar input::placeholder{color:var(--ink-3)}
.faqfilter__bar input:focus-visible{border-color:var(--accent);
  outline:2px solid var(--accent);outline-offset:2px}
.faqfilter__count{font:500 12px/1 var(--sans);color:var(--ink-3);white-space:nowrap}
.faqfilter__empty{margin:0;padding:1.2rem 1.4rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);font-size:15.5px;
  box-shadow:var(--shadow)}

/* 5. fit check */
.fitcheck{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.7rem;box-shadow:var(--shadow)}
.fitcheck__q{border-top:1px solid var(--rule);padding:1rem 0;display:flex;gap:1rem;
  align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.fitcheck__q:first-of-type{border-top:0;padding-top:0}
.fitcheck__q p{margin:0;font-size:16px;color:var(--ink);max-width:52ch}
.fitcheck__opts{display:flex;gap:.4rem;flex:none}
.fitcheck__opts label{position:relative;cursor:pointer}
.fitcheck__opts input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;
  cursor:pointer}
.fitcheck__opts span{display:block;padding:.58rem 1.1rem;border-radius:var(--radius-sm);
  border:1px solid var(--line);font:700 12.5px/1 var(--sans);color:var(--ink-2);
  transition:color var(--t-hover) var(--ease),background var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease)}
.fitcheck__opts input:checked + span{background:var(--accent-fill);border-color:var(--accent-fill);
  color:#fff}
.fitcheck__opts input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.fitcheck__out{margin-top:1.3rem;padding:1.2rem 1.35rem;border-radius:var(--radius-sm);
  background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--accent-fill)}
.fitcheck__out.is-in{animation:fadeUp .36s var(--ease) both}
.fitcheck__out[data-state=stop]{border-left-color:var(--warn);background:var(--warn-bg);
  border-color:var(--warn-line)}
.fitcheck__out[data-state=ok]{border-left-color:var(--cat-printed)}
.fitcheck__out h3{margin:0 0 .35rem;font-size:1.02rem}
.fitcheck__out p{margin:0;font-size:15.5px}
.fitcheck__note{margin:1rem 0 0;font-size:13px;line-height:1.65;color:var(--ink-3)}

/* 7. carousel */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:min(100%,20.5rem);
  gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.carousel__item{scroll-snap-align:start}
.carousel__nav{display:none}
.carousel--on .carousel__nav{display:flex;gap:.5rem;justify-content:flex-end;margin-bottom:.9rem}
.carousel__nav button{width:42px;height:42px;display:grid;place-items:center;cursor:pointer;
  border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--line);
  color:var(--ink);transition:color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease)}
.carousel__nav button:hover[aria-disabled=false]{border-color:var(--accent);color:var(--accent)}
.carousel__nav button[aria-disabled=true]{color:var(--ink-3);border-color:var(--rule);
  cursor:default}
.carousel__nav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* 8. scrollytelling */
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.5rem,3vw,3rem);align-items:start}
.scrolly__figure{position:relative;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);padding:1.5rem;min-height:18rem;display:grid;place-items:center;
  box-shadow:var(--shadow)}
.scrolly--on .scrolly__figure{position:sticky;top:calc(var(--head-h) + 5rem)}
.scrolly__layer{grid-area:1/1;width:100%}
.scrolly--on .scrolly__layer{transition:opacity var(--t-ui) var(--ease)}
.scrolly__steps{display:grid;gap:1rem}
.scrolly__step{border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--line);padding:1.4rem 1.5rem;
  transition:border-color var(--t-ui) var(--ease),opacity var(--t-ui) var(--ease)}
.scrolly--on .scrolly__step{opacity:.86}
.scrolly--on .scrolly__step.is-on{opacity:1;border-left-color:var(--accent-fill);
  box-shadow:var(--shadow)}
.scrolly__step h3{margin:0 0 .4rem}
.scrolly__step p:last-child{margin-bottom:0}
.scrolly__n{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;
  height:1.6rem;border-radius:var(--radius-sm);background:var(--ink);color:var(--bg);
  font:600 .8rem/1 var(--sans);margin-bottom:.65rem}

/* 10. ingredient explorer */
/* the same segmented control as .tabs, so two components that do the same job
   on the same page do not look like two different ideas */
.explorer__list{display:flex;gap:.25rem;flex-wrap:wrap;margin:0 0 1.5rem;padding:.3rem;
  background:var(--bg-2);border-radius:var(--pill);width:fit-content;max-width:100%}
.explorer:not(.explorer--on) .explorer__list{display:none}
.explorer__list button{display:flex;align-items:center;gap:.5rem;background:none;border:0;
  cursor:pointer;padding:.7rem 1.1rem;border-radius:var(--pill);
  font:600 13.5px/1 var(--sans);color:var(--ink-3);
  transition:color var(--t-hover) var(--ease),background var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease)}
.explorer__list button:hover{color:var(--ink)}
.explorer__list button[aria-selected=true]{color:var(--ink);background:var(--surface);
  box-shadow:var(--shadow)}
.explorer__list button i{width:9px;height:9px;border-radius:50%;background:var(--ink-3);
  flex:none;transition:background var(--t-hover) var(--ease)}
.explorer__list button[aria-selected=true] i{background:var(--accent-fill)}
.explorer__h{font:700 1.12rem/1.34 var(--display);color:var(--ink);margin:0 0 .55rem;
  letter-spacing:-.014em}
.explorer--on .explorer__h{margin:0 0 .9rem;display:none}
.explorer--on [data-ex-panel]{animation:fadeUp .26s var(--ease) both}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s}

/* 11. label ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding:.8rem 0;
  background:var(--bg-2);display:flex;gap:0}
.ticker__row{display:flex;gap:2.4rem;align-items:center;flex:none;padding-right:2.4rem;
  font:500 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap}
.ticker--on .ticker__row{animation:slide 36s linear infinite}
.ticker--on:hover .ticker__row{animation-play-state:paused}
.ticker--on.is-paused .ticker__row{animation-play-state:paused}
.ticker__row span::after{content:"";display:inline-block;width:4px;height:4px;
  background:var(--accent);margin-left:2.4rem;vertical-align:middle}
.ticker__stop{display:block;margin:.5rem auto 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-3);
  font:600 12px/1 var(--sans);padding:.5rem 1rem;cursor:pointer;min-height:28px}
.ticker__stop:hover{color:var(--ink)}
@keyframes slide{to{transform:translateX(-100%)}}

/* ---------- the verdict scale (the signature figure) ---------- */
.scale-wrap{overflow-x:auto;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);padding:1.4rem 1.5rem}
.scale{width:100%;min-width:620px;height:auto;display:block}

/* ---------- pack cards ---------- */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:start}
.pack{position:relative;isolation:isolate;border-radius:var(--radius);overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column;
  box-shadow:var(--shadow);
  transition:border-color var(--t-hover) var(--ease),transform var(--t-hover) var(--ease),
    box-shadow var(--t-hover) var(--ease)}
.pack:hover{transform:translateY(-4px);box-shadow:var(--lift)}
/* the recommended pack is lifted out of the row rather than merely outlined:
   three identical rectangles with one different border colour is a table, not
   a choice */
.pack--best{border-color:rgba(11,122,96,.35);box-shadow:var(--lift);
  transform:translateY(-10px)}
.pack--best:hover{transform:translateY(-14px)}
.pack__flag{margin:0;text-align:center;font:700 11px/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;padding:.85rem;background:var(--bg-2);color:var(--ink-3)}
.pack--best .pack__flag{background:linear-gradient(100deg,var(--accent-fill),var(--accent-mid));
  color:#fff}
.pack__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pack__name{margin:0;font-size:1.3rem}
.pack__supply{margin:0;font:500 12px/1.4 var(--sans);color:var(--ink-3)}
/* one height for all three, or the price lines do not sit on a line */
.pack__shot{margin:.7rem 0;display:grid;place-items:center;height:160px}
.pack__shot img{max-height:160px;width:auto;max-width:100%}
.pack__each{font:800 2.5rem/1 var(--display);color:var(--accent);letter-spacing:-.03em}
.pack__each span{font:500 12px/1 var(--mono);color:var(--ink-3)}
.pack__tot{margin:.2rem 0 .5rem;font-size:15px;color:var(--ink-2)}
.pack__tot b{color:var(--ink)}
.pack__tot s{color:var(--ink-3);margin-left:.45rem}
.pack__perks{list-style:none;margin:.3rem 0 1rem;padding:0;display:grid;gap:.45rem;
  font-size:14.5px;color:var(--ink-2)}
.pack__perks li{position:relative;padding-left:1.35rem}
.pack__perks li::before{content:"";position:absolute;left:0;top:.42em;width:.85rem;height:.85rem;
  border-radius:50%;background:var(--tint);
  box-shadow:inset 0 0 0 1.5px var(--accent-fill)}
.pack__foot{margin-top:auto;display:grid;gap:.75rem;justify-items:center}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem}
.faq details{border-radius:var(--radius);background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--shadow);
  transition:border-color var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.faq details:hover{border-color:var(--line)}
.faq details[open]{border-color:rgba(11,122,96,.3);box-shadow:var(--lift)}
.faq summary{cursor:pointer;list-style:none;padding:1.25rem 3.2rem 1.25rem 1.5rem;
  position:relative;font:700 1.02rem/1.4 var(--sans);color:var(--ink);
  border-radius:var(--radius)}
.faq summary::-webkit-details-marker{display:none}
/* the chevron sits in its own tinted disc: a bare arrow on a white card is
   easy to miss, and it is the only affordance the row has */
.faq summary::before{content:"";position:absolute;right:1.15rem;top:50%;translate:0 -50%;
  width:28px;height:28px;border-radius:50%;background:var(--tint);
  transition:background var(--t-hover) var(--ease)}
.faq details[open] summary::before{background:var(--accent-fill)}
.faq summary::after{content:"";position:absolute;right:1.66rem;top:calc(50% - 4px);
  width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);rotate:45deg;
  transition:rotate var(--t-ui) var(--ease),border-color var(--t-hover) var(--ease)}
.faq details[open] summary::after{rotate:225deg;top:calc(50% - 1px);border-color:#fff}
.faq .a{padding:0 1.5rem 1.4rem;font-size:15.5px;color:var(--ink-2)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
/* Five columns after a CTA block, then a seal row, a payment row, the legal
   block and a return-to-top rule. Headings are h2.h3 so the document outline
   does not gain twenty orphan h3s under the last section's h2. */
/* .btn.btn--ghost is (0,2,0) and lives in the inlined critical CSS, which the
   document places AFTER the async stylesheet link - so an equal-specificity
   override down here loses and the button renders white on white. Match .btn
   as well to take it to (0,3,0). */

/* The footer is the one full-width dark surface on the site. On a warm-paper
   page it closes the document instead of fading out of it, and it is where
   every reference site puts its weight too. Inks come from the --dark-* set,
   which check.py measures against this exact ground. */
.foot{background:var(--dark);color:var(--dark-ink-2);font-size:16px;padding-bottom:130px;
  background-image:radial-gradient(900px 420px at 12% -10%,rgba(79,221,176,.10),transparent 68%)}
.foot a{color:var(--dark-ink);text-decoration:none}
.foot a:hover{color:var(--dark-accent)}
.foot__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.15fr;gap:1.8rem;
  padding:var(--s5) 0 var(--s4)}
.foot h2,.foot h3,.foot .h3{font:600 11.5px/1.4 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--dark-accent);margin:0 0 1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.foot .brand .nm{color:var(--dark-ink)}
.foot .brand .nm small{color:var(--dark-ink-3)}
.foot .brand .mark{background:linear-gradient(145deg,var(--dark-accent) 0%,var(--accent-fill) 100%);
  box-shadow:none;color:var(--dark)}
.foot__about{font-size:15px;line-height:1.65;color:var(--dark-ink-2);margin:1rem 0 0;
  max-width:40ch}
.foot__sub{color:var(--dark-ink-3);font-size:14px;line-height:1.55}
.foot__sub b{color:var(--dark-ink)}
.foot__strip{border-top:1px solid var(--dark-line);padding:1.35rem 0;display:flex;
  align-items:center;gap:1.1rem;flex-wrap:wrap;justify-content:space-between}
.foot__strip .seals{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap}
/* the seal artwork is drawn for white paper; on a dark band each one gets its
   own small white chip rather than floating on the ground looking cut out */
.foot__strip .seals img{width:44px;height:44px;background:#fff;border-radius:12px;
  padding:4px;transition:transform var(--t-hover) var(--ease)}
.foot__strip .seals img:hover{transform:translateY(-3px)}
.foot__pay{border-top:1px solid var(--dark-line);padding:1.2rem 0;display:flex;
  align-items:center;gap:.9rem 1.6rem;flex-wrap:wrap}
.foot__pay img{background:#fff;border-radius:10px;padding:5px 8px}
.foot__pay p{margin:0;font-size:13px;line-height:1.55;color:var(--dark-ink-3);max-width:46ch}
.foot__legal{border-top:1px solid var(--dark-line);padding:1.35rem 0 1.4rem;font-size:13.5px;
  line-height:1.72;color:var(--dark-ink-3);display:grid;gap:.75rem}
.foot__legal b{color:var(--dark-ink-2);font-weight:700}
.foot__end{border-top:1px solid var(--dark-line);padding:1rem 0 1.2rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:500 12.5px/1.5 var(--sans);color:var(--dark-ink-3)}
.totop{display:inline-flex;align-items:center;gap:.5rem;color:var(--dark-ink);
  text-decoration:none;border:1px solid var(--dark-line);padding:.7rem 1rem;
  border-radius:var(--pill);min-height:44px;box-sizing:border-box;
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  transition:background var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.totop:hover{background:rgba(255,255,255,.07);border-color:var(--dark-accent)}
.totop svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- 13. the cost calculator ---------- */
.calc{border:1px solid var(--rule);background:var(--surface);box-shadow:var(--lift);
  border-radius:var(--radius);overflow:hidden}
/* The inputs appear only once interact.js has wired them up. Three selects
   that change nothing, under a note saying "it is an assumption you choose
   here", is worse than not offering the choice. The default row below is
   already a correct answer, and the table under it carries every combination. */
.calc__in{display:none;grid-template-columns:repeat(3,minmax(0,1fr));
  border-bottom:1px solid var(--rule);background:var(--bg-2)}
.calc--on .calc__in{display:grid}
.calc__f{padding:1.1rem 1.3rem;border-right:1px solid var(--rule);min-width:0}
.calc__f:last-child{border-right:0}
.calc__f label{display:block;margin:0 0 .5rem;font:600 10px/1.4 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.calc__f select,.calc__f input{width:100%;font:500 15px/1.3 var(--sans);color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:.7rem .8rem;min-height:44px}
.calc__f input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--accent-fill)}
.calc__f .v{display:block;margin-top:.45rem;font:600 13px/1.3 var(--mono);color:var(--ink)}
.calc__out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.calc__o{padding:1.2rem 1.3rem;border-right:1px solid var(--rule);min-width:0}
.calc__o:last-child{border-right:0}
.calc__o dt{margin:0 0 .35rem;font:600 10px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.calc__o dd{margin:0;font:800 clamp(1.15rem,2vw,1.6rem)/1.1 var(--display);
  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.calc__o dd small{display:block;margin-top:.25rem;font:400 11.5px/1.45 var(--sans);
  letter-spacing:0;color:var(--ink-3)}
.calc__note{border-top:1px solid var(--rule);background:var(--bg-2);padding:1rem 1.3rem;
  margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.calc__note b{color:var(--ink)}

/* ---------- 14. the label lightbox ---------- */
.zoom{position:relative;display:block;width:100%;padding:0;border:1px solid var(--rule);
  background:var(--surface);color:inherit;text-align:left;border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow)}
/* Same reasoning: no cursor and no "tap to enlarge" until there is something
   to tap. The image underneath is the whole picture at full width either way. */
.zoom--on{cursor:zoom-in}
.zoom__hint{display:none}
.zoom--on .zoom__hint{display:inline-flex}
.zoom img{width:100%;height:auto;display:block}
.zoom__hint{position:absolute;right:.55rem;bottom:.55rem;align-items:center;
  gap:.45rem;background:#122622;color:#F2F7F5;padding:.5rem .8rem;
  border-radius:var(--pill);backdrop-filter:blur(6px);
  font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.zoom__hint svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round}
.lb{position:fixed;inset:0;z-index:300;background:rgba(10,10,12,.93);
  grid-template-rows:auto minmax(0,1fr);padding:0;border:0;max-width:100%;max-height:100%;
  width:100%;height:100%}
/* [open] is load-bearing, not decoration. An author `display` declaration beats
   the UA stylesheet's dialog:not([open]){display:none} at any specificity, so a
   bare `.lb{display:grid}` leaves a closed dialog covering the whole page and
   swallowing every click underneath it. */
.lb[open]{display:grid}
.lb::backdrop{background:rgba(10,10,12,.93)}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem clamp(.9rem,3vw,1.6rem);border-bottom:1px solid rgba(255,255,255,.22);
  color:#BCCCC7;font:500 12.5px/1.5 var(--sans)}
/* The title is a full alt text. Left unclamped it wrapped to thirteen lines on
   a phone and took a third of the screen away from the thing being looked at. */
.lb__bar>p{min-width:0;margin:0}
.lb__bar b{color:#F2F7F5;display:block;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.lb__tools{display:flex;gap:.45rem;align-items:center}
.lb__tools{flex:none}
.lb__b{background:transparent;border:1px solid #93A5A0;color:#F2F7F5;
  font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .7rem;cursor:pointer;white-space:nowrap}
.lb__b:hover{background:rgba(255,255,255,.22)}
.lb__b[aria-disabled=true]{color:#93A5A0;border-color:rgba(255,255,255,.22);
  cursor:default}
.lb__b:hover[aria-disabled=true]{background:transparent}
.lb__view{overflow:auto;overscroll-behavior:contain;padding:clamp(.6rem,2vw,1.4rem);
  display:grid;place-items:start center}
.lb__view:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.lb__view img{max-width:none;width:calc(100% * var(--z,1));height:auto;
  transition:width var(--t-ui) var(--ease)}
.lb :focus-visible{outline-color:var(--accent)}

/* ---------- scroll reveal ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)}
.js-reveal .reveal.in{opacity:1;transform:none}
.js-reveal .stagger.in>*{animation:rise var(--t-reveal) var(--ease) both}
.js-reveal .stagger.in>*:nth-child(1){animation-delay:.04s}
.js-reveal .stagger.in>*:nth-child(2){animation-delay:.1s}
.js-reveal .stagger.in>*:nth-child(3){animation-delay:.16s}
.js-reveal .stagger.in>*:nth-child(4){animation-delay:.22s}
.js-reveal .stagger.in>*:nth-child(5){animation-delay:.28s}
.js-reveal .stagger.in>*:nth-child(6){animation-delay:.34s}
.js-reveal .stagger.in>*:nth-child(7){animation-delay:.4s}
.js-reveal .stagger.in>*:nth-child(8){animation-delay:.46s}
.js-reveal .stagger.in>*:nth-child(n+9){animation-delay:.52s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js-reveal .tbl-wrap.in tbody tr{animation:rowIn .5s var(--ease) both}
.js-reveal .tbl-wrap.in tbody tr:nth-child(1){animation-delay:.05s}
.js-reveal .tbl-wrap.in tbody tr:nth-child(2){animation-delay:.1s}
.js-reveal .tbl-wrap.in tbody tr:nth-child(3){animation-delay:.15s}
.js-reveal .tbl-wrap.in tbody tr:nth-child(4){animation-delay:.2s}
.js-reveal .tbl-wrap.in tbody tr:nth-child(5){animation-delay:.25s}
.js-reveal .tbl-wrap.in tbody tr:nth-child(n+6){animation-delay:.3s}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Each section carries its OWN measured height in --cvh, written into the
   markup after the build by cvsize.js; the 700px here is only the fallback for
   a section that pass never saw. A single flat figure was wrong in both
   directions - the home page ran 36% short, pricing 15% long - and a document
   whose height moves while you scroll it is a scrollbar that moves under your
   cursor. `auto` means the browser swaps in the real height the moment the
   section renders, so these figures only govern the first pass. */
.cv{content-visibility:auto;contain-intrinsic-size:auto var(--cvh,700px)}
main>section.cv:nth-of-type(-n+3){content-visibility:visible}

/* Scroll-driven, run by the browser on the compositor. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .js-reveal .reveal{opacity:1;transform:none;transition:none;
      animation:rise linear both;animation-timeline:view();
      animation-range:entry 6% cover 24%}
    .js-reveal .reveal.in{opacity:1;transform:none}
    .js-reveal .stagger>*,
    .js-reveal .stagger.in>*{animation:rise linear both;animation-timeline:view();
      animation-range:entry 4% cover 26%;animation-delay:0s}
    /* Table rows are deliberately NOT scroll-driven: .tbl-wrap is
       overflow-x:auto, so view() resolves against the table's own scroller,
       whose block axis never moves, and every row freezes part-way through.
       They stay on the IntersectionObserver path. */
    .progress{animation:grow linear both;animation-timeline:scroll(root block);transition:none}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

.drawer__x{display:none}

/* ---------- responsive ---------- */
@media(max-width:1400px){
  .head .tel{display:none}
  .nav a{padding:.5rem .5rem;font-size:13px}
}
@media(max-width:1060px){
  .nav{display:none}
  .burger{display:grid;margin-left:auto}
  .drawer{display:block;position:fixed;inset:var(--head-h) 0 0;z-index:88;background:var(--bg);
    padding:1.2rem 1.25rem 3rem;overflow:auto;transform:translateX(100%);visibility:hidden;
    transition:transform var(--t-ui) var(--ease),visibility var(--t-ui)}
  .drawer--on{transform:none;visibility:visible;
    transition:transform var(--t-ui) var(--ease),visibility 0s}
  .drawer ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.1rem}
  .drawer a{display:block;padding:.85rem .65rem;color:var(--ink);text-decoration:none;
    font-size:15px;font-weight:600;border-bottom:1px solid var(--rule)}
  .drawer a:hover{color:var(--accent)}
  .drawer__x{display:flex;align-items:center;gap:.5rem;margin:0 0 1rem auto;
    background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
    color:var(--ink-2);font:600 12px/1 var(--sans);letter-spacing:.1em;
    text-transform:uppercase;padding:.6rem .8rem;cursor:pointer}
  .drawer__x:hover{color:var(--ink);border-color:var(--accent)}
  .drawer__x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
}
@media(max-width:960px){
  .hero .eyebrow{justify-self:start;margin-bottom:1rem}
.scrolly{grid-template-columns:minmax(0,1fr)}
  .scrolly--on .scrolly__figure{position:static}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem}
  .split{align-items:start}
}
@media(max-width:820px){
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
.split{grid-template-columns:minmax(0,1fr)}
  .packs{grid-template-columns:minmax(0,1fr);max-width:420px;margin-inline:auto}
  .pack--best{order:-1}
  .fitcheck__q{flex-direction:column;gap:.7rem}
}
@media(max-width:760px){
  .strip .m-hide{display:none}
  .head .btn--primary{display:none}
  .brand .nm{font-size:17px}
  .head .wrap{gap:.6rem}
}
@media(max-width:560px){
  .brand .nm{font-size:15.5px}
  .brand .nm small{font-size:8.5px;letter-spacing:.08em}
  .brand .mark{width:34px;height:34px}
  .head .wrap{gap:.7rem}
  body{font-size:16.5px}
.wrap,.mid{width:calc(100% - 2rem)}
  .g4{grid-template-columns:minmax(0,1fr)}
  .foot__top{grid-template-columns:minmax(0,1fr)}
  .cta-row .btn{width:100%}
  .buybar__txt span{display:none}
  /* three lines of strip is a third of a phone screen spent before the
     headline; below this width it keeps the guarantee and the number */
  .strip .s-hide{display:none}
  .strip .wrap{font-size:11px;gap:.35rem .9rem}
  .fitcheck{padding:1.25rem 1.15rem}
  .secnav{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
}

/* --- the spotlight hero, folded down --- */
@media(max-width:1060px){
  .dossier{grid-template-columns:150px minmax(0,1fr)}
  .calc__out{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  /* the spotlight stops sitting beside the headline and goes under it; source
     order is head then spot, so nothing is reordered */
  .hero__top{grid-template-columns:minmax(0,1fr)}
  .hero__head{max-width:none}
  .spot{max-width:560px}
  .shot img{width:min(100%,250px)}
  .foot__top{grid-template-columns:1.4fr 1fr 1fr}
}
@media(max-width:760px){
  .cv{contain-intrinsic-size:auto var(--cvh-m,1200px)}
  /* below this width the index rail stops being a rail: sticky in a single
     column just eats the viewport, so it becomes a scrollable row of chips */
  .dossier{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .dossier>nav{position:static}
  .idx{border-left:0;border-bottom:1px solid var(--line);max-height:none;
    grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;
    padding-bottom:.4rem;gap:.3rem}
  .idx a{grid-template-columns:auto;border-left:0;border-bottom:2px solid transparent;
    margin-left:0;white-space:nowrap;padding:.5rem .6rem}
  .idx a.is-on{border-left-color:transparent;border-bottom-color:var(--accent);
    border-radius:var(--radius-sm) var(--radius-sm) 0 0}
  .calc__in{grid-template-columns:minmax(0,1fr)}
  .calc__f{border-right:0;border-bottom:1px solid var(--rule)}
  .calc__f:last-child{border-bottom:0}
  .foot__top{grid-template-columns:1fr 1fr}
  .readout li{grid-template-columns:minmax(0,1fr) 4.6rem}
}
@media(max-width:560px){
  .spot{grid-template-columns:minmax(0,1fr)}
  .shot{border-radius:20px}
  .calc__out{grid-template-columns:minmax(0,1fr)}
  .calc__o{border-right:0;border-bottom:1px solid var(--rule)}
  .calc__o:last-child{border-bottom:0}
  .foot__top{grid-template-columns:minmax(0,1fr)}
  .readout{padding:.9rem}
  .sixty li{grid-template-columns:1.8rem minmax(0,1fr);gap:.7rem}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js-reveal .reveal{opacity:1!important;transform:none!important}
  .js-reveal .stagger.in>*,.js-reveal .stagger>*{animation:none!important}
  .js-reveal .tbl-wrap.in tbody tr{animation:none!important}
  .lb__view img{transition:none}
  .flip--on.is-flipped .flip__b,.tabs--on [role=tabpanel],.fitcheck__out.is-in,
  .explorer--on [data-ex-panel]{animation:none!important}
  .ticker__row{animation:none!important}
  .btn:hover::after{translate:0}
}
@media print{
  /* The screen theme is already ink on warm paper, so print only has to do
     four things: take the chrome off, turn the three DARK surfaces (the
     60-second block, the counterpoint band and the footer) back to paper,
     drop every shadow and glow, and give the body column the whole sheet. */
  :root{--bg:#FFFFFF; --bg-2:#FFFFFF; --surface:#FFFFFF; --tint:#F4F7F5;
    --shadow:none; --lift:none; --glow:none}
  html,body{background:#FFFFFF;color:#2A3633}
  .head,.strip,.buybar,.drawer,.drawer__x,.progress,.secnav,.carousel__nav,.ticker,
  .ticker__stop,.faqfilter__bar,.totop,.lb{display:none}
  /* these are shown by .calc--on / .zoom--on, which is (0,2,0); a bare
     .calc__in here at (0,1,0) loses to it even inside @media print */
  .calc--on .calc__in,.zoom--on .zoom__hint,
  .carousel--on .carousel__nav,.faqfilter--on .faqfilter__bar{display:none}
  /* the three dark surfaces. Printing a dark block wastes a cartridge and
     prints as a grey slab anyway, because backgrounds are off by default and
     the light ink on them is not. */
  .sixty,.band-dark,.foot{background:#FFFFFF!important;background-image:none!important;
    color:#2A3633!important;border:1px solid #C9D2CF}
  .sixty h2,.sixty .h3,.sixty li b,.band-dark h2,.band-dark h3,.foot a,.foot__sub b,
  .band-dark .card h3{color:#101A17!important}
  .sixty li,.band-dark p,.band-dark .lede,.foot__about,.foot__legal{color:#2A3633!important}
  .sixty li::before,.sixty__t,.foot h2,.foot h3,.foot .h3,.band-dark a{color:#07553F!important}
  .sixty li+li,.foot__strip,.foot__pay,.foot__legal,.foot__end{border-color:#D7DEDB!important}
  .band-dark .card,.band-dark .note{background:#FFFFFF!important}
  .card,.note,.pack,.sixty,.calc,.calc__o,.calc__f,.figpill,.readout,.shot,.exhibit,
  .fitcheck,.zoom,.tbl-wrap,.fig img,.faq details{box-shadow:none!important}
  .hero__wash,.shot::before,.card::before{display:none}
  /* the rail is screen furniture: in print it is a dead column that leaves the
     body 572px for a 680px table, and the percentages print sliced in half */
  .dossier{grid-template-columns:minmax(0,1fr)!important;gap:1.2rem}
  .dossier>nav{display:none}
  .idx{position:static;display:none}
  /* the panels are restored below, so their headings have to come back with
     them - otherwise three answers print as one paragraph - and the tab strip
     itself has to go, because on paper it is ink that does nothing */
  .tabs--on .tabs__h,.explorer--on .explorer__h{display:block!important}
  .tabs__list,.explorer__list{display:none}
  .readout__bar i{border:1px solid #000}
  .js-reveal .reveal{opacity:1!important;transform:none!important;animation:none!important}
  .js-reveal .stagger>*{animation:none!important;opacity:1!important}
  .cv{content-visibility:visible!important}
  .foot{padding-bottom:0}
  .tbl-wrap,.scale-wrap,.carousel__track{overflow:visible!important}
  /* the scroller is gone in print, so anything wider than the sheet is simply
     cut off it - a column header that refuses to wrap took the last column of
     eleven tables off the page */
  table{min-width:0!important;font-size:12.5px}
  thead th{white-space:normal}
  .scale{min-width:0}
  /* and the carousel, whose items are laid out in a row 1,360-2,048px wide:
     on paper they stack */
  .carousel__track{display:block!important}
  .carousel__item{width:auto!important;break-inside:avoid;margin-bottom:1rem}
  .flip__in{display:block!important}
  .flip--on .flip__b,.tabs--on [role=tabpanel][hidden],.hotspot__panel[hidden],
  .explorer--on [data-ex-panel][hidden],.scrolly--on .scrolly__layer{
    display:block!important;visibility:visible!important;opacity:1!important}
  .flip__btn{display:none}
  .scrolly--on .scrolly__figure{position:static}
  .pack--best{transform:none!important}
}

/* ---------- forced colors ---------- */
@media(forced-colors:active){
  /* -webkit-text-fill-color:transparent survives a forced palette, so the
     gradient word in the headline would print as nothing at all */
  .hero h1 em{-webkit-text-fill-color:currentColor;background:none;color:CanvasText}
  .scale text{fill:CanvasText}
  .scale rect{fill:Canvas;stroke:CanvasText}
  .scale circle{fill:CanvasText}
  .scale line{stroke:CanvasText}
  /* the diamonds and bars carry meaning as fills, and a fill is what
     forced colors throws away first */
  .scale path,.scale rect,.scale circle{forced-color-adjust:none}
.tag::before{forced-color-adjust:none}
  /* the arrow inherits currentColor, which forced colors resolves for us */
  .btn::after{background:ButtonText}
  .tag,.card,.note,.pack,.fitcheck,.scrolly__step,.scrolly__figure,
  .sixty,.calc,.calc__f,.calc__o,.zoom,.figpill,.readout,.shot{
    border:1px solid CanvasText}
  .btn,.lb__b,.totop{border:1px solid ButtonText}
  /* the readout bars carry the finding, so they must survive a palette that
     throws every background away */
  .readout__bar{border:1px solid CanvasText}
  .readout__bar i{forced-color-adjust:none;background:Highlight}
  .readout li.is-over .readout__bar i{background:Highlight;outline:2px solid CanvasText;
    outline-offset:-2px}
  /* the 100%-of-the-Daily-Value mark is a 1px background stripe */
  .readout__bar::after{background:CanvasText;forced-color-adjust:none;width:2px}
  /* the legend keys are 10px background chips; without this the legend reads
     as two unlabelled bullet points */
  .readout__key i{forced-color-adjust:none;border:1px solid CanvasText}
  .readout__key li:first-child i{background:Canvas}
  .readout__key li+li i{background:Highlight}
  .hotspots--on .hotspot.is-on{forced-color-adjust:none;background:Highlight;color:Canvas}
  /* the reskin's new surfaces: a gradient, a radial wash and a dot leader all
     paint as background, which is the first thing a forced palette throws out */
  .hero__wash,.shot::before,.band-dark,.sixty,.foot{background-image:none!important}
  .card::before{forced-color-adjust:none;background:Highlight}
  .btn.btn--primary{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .tabs__list,.explorer__list{border:1px solid CanvasText}
  .tabs__list button[aria-selected=true],.explorer__list button[aria-selected=true]{
    forced-color-adjust:none;background:Highlight;color:HighlightText}
  .explorer__list button i{forced-color-adjust:none;background:CanvasText}
  .explorer__list button[aria-selected=true] i{background:HighlightText}
  .faq summary::before{forced-color-adjust:none;background:Canvas;
    box-shadow:inset 0 0 0 1px CanvasText}
  .faq details[open] summary::before{background:Highlight}
  .faq details[open] summary::after{border-color:HighlightText}
  .pack__perks li::before{forced-color-adjust:none;background:Canvas;
    box-shadow:inset 0 0 0 1.5px CanvasText}
  .foot__strip .seals img,.foot__pay img{background:Canvas}
  .brand .mark{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .idx a.is-on{border-left-color:Highlight}
}