/* Gogelatinesculpt - near-white paper, near-black ink, one magenta.

   A newspaper that has been handed a label and told to read it. Flat surfaces,
   hairline rules, no radius anywhere, and a hard horizontal seam through the
   hero that the bottle stands across. Colour appears only where it carries
   meaning: four validated evidence hues and one accent. Fourteen interactive
   components, every one usable without JavaScript. */

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

/* ---------- tokens ---------- */
:root{
  --ink:#111114; --ink-2:#474750; --ink-3:#63636C;
  --bg:#F7F7F5; --bg-2:#EFEDE7; --surface:#FFFFFF; --tint:#EEEDE9; --pink:#FBF0F6;
  --line:#D6D5CE; --rule:#E4E2DB;
  --accent:#B0176F; --accent-fill:#A3126B; --accent-mid:#8E0F5C; --accent-deep:#6B0B45;
  --accent-2:#1A5FB4;
  --dark:#111114; --dark-ink:#F4F3F0; --dark-ink-2:#BCBCC6; --dark-ink-3:#92929E;
  --dark-accent:#FF8FC6; --dark-line:#2C2C34;
  --warn:#8F4700; --warn-bg:#FBF1E6; --warn-line:#E0C3A2;

  --cat-printed:#0A7247; --cat-ceiling:#1A5FB4; --cat-silent:#A8237B; --cat-caution:#8F4700;

  --radius:0px; --radius-sm:0px; --pill:2px;
  --shadow:0 1px 1px rgba(17,17,20,.05), 0 8px 20px rgba(17,17,20,.06);
  --lift:0 2px 3px rgba(17,17,20,.07), 0 18px 40px rgba(17,17,20,.11);
  --glow:0 8px 22px rgba(163,18,107,.22);

  --s1:.5rem; --s2:.875rem; --s3:1.25rem; --s4:2rem; --s5:3rem; --s6:4.5rem;
  --ease:cubic-bezier(.22,1,.36,1);
  --t-hover:150ms; --t-ui:280ms; --t-reveal:640ms;

  --wrap:1210px; --text:720px; --wide:980px;
  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --head-h:70px; --w:1; --mx:50%; --my:0%;
  /* how far the bottle hangs below the seam. One number, used by the shot and
     by the spacer that reserves room for it, so they can never disagree. */
  --cross:clamp(74px,9vw,132px);
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;
  scroll-padding-top:calc(var(--head-h) + 7.5rem);
  /* the buy bar is fixed to the bottom, so without this a tab stop scrolled
     into view can come to rest underneath it */
  scroll-padding-bottom:7.5rem}
body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink-2);
  font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
/* Site 9 painted a fixed rule grid behind everything. This one paints nothing:
   a position:fixed layer repaints on every scrolled frame and this site has
   fourteen components that would rather have those milliseconds. */
h1,h2,h3{color:var(--ink);font-family:var(--display);font-weight:800;line-height:1.06;
  letter-spacing:-.028em;margin:0 0 .7rem}
h1{font-size:clamp(2.1rem,4.4vw,3.6rem);letter-spacing:-.04em}
h2{font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:-.034em}
h3{font-size:1.14rem;line-height:1.28;letter-spacing:-.016em}
.h3{font-size:1.14rem;line-height:1.28;font-family:var(--display);font-weight:800;
  color:var(--ink);margin:0 0 .5rem;letter-spacing:-.016em}
p{margin:0 0 1.1rem}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent-deep)}
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}
.narrow{width:min(100% - 3rem,var(--text));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}
.band-dark :focus-visible,.strip :focus-visible,.foot :focus-visible,
.buybar :focus-visible,.hero__dark :focus-visible,.footcta :focus-visible,
.chap:not(.chap--lit) :focus-visible,.lb :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}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* ---------- top strip ---------- */
.strip{background:var(--ink);color:var(--dark-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:500 11.5px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.strip b{color:var(--dark-accent);font-weight:600}
.strip a{color:var(--dark-ink);text-decoration:none;font-weight:600;
  display:inline-block;padding-block:.3rem}
.strip a:hover{color:var(--dark-accent)}
.strip .dot{width:3px;height:3px;background:var(--dark-ink-3);flex:none}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:90;background:rgba(247,247,245,.95);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);
  transition:transform var(--t-ui) var(--ease)}
.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:38px;height:38px;flex:none;display:grid;place-items:center;
  border-radius:var(--radius);background:var(--ink)}
.brand .mark svg{width:23px;height:23px}
.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(--mono);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(--tint)}
.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:44px;height:44px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius);cursor:pointer;place-items:center;flex:none}
.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 13px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  padding:1.05rem 1.7rem;border-radius:var(--radius);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:var(--accent-fill);color:#fff;box-shadow:var(--glow)}
.btn.btn--primary:hover{transform:translateY(-2px);background:var(--accent-mid);color:#fff}
.btn.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.btn--ghost:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
.btn.btn--onDark{background:var(--dark-accent);color:var(--dark)}
.btn.btn--onDark:hover{transform:translateY(-2px);background:#F6BC8B;color:var(--dark)}
.btn.btn--wide{width:100%}

/* ---------- breadcrumb, keep reading, progress ---------- */
.crumb{font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-3);padding:1.2rem 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 ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--ink);
  border-top:2px solid var(--accent-fill);color:var(--dark-ink-2);
  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(--dark-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{position:sticky;top:calc(var(--head-h) + .5rem);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(--mono);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}
.split--57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.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))}
.cv{content-visibility:auto;contain-intrinsic-size:auto 640px}
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(--mono);
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin:0 0 1rem;
  padding:.45rem .8rem .45rem .7rem;border-left:4px solid var(--accent-fill);
  background:var(--pink);align-self:flex-start}
.answer{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent-fill);
  border-radius:var(--radius);padding:1.25rem 1.4rem;font-size:16px;line-height:1.68;
  color:var(--ink-2);margin:0 0 1.2rem;box-shadow:var(--shadow)}
.answer__tag{margin:0 0 .5rem;font:600 10px/1 var(--mono);letter-spacing:.19em;
  text-transform:uppercase;color:var(--accent)}
.answer__more{margin:.85rem 0 0;padding-top:.85rem;border-top:1px solid var(--rule);
  font-size:14px;color:var(--ink-3)}
.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 12px/1 var(--mono);color:var(--ink-2);border:1px solid var(--line);
  background:var(--surface);border-radius:var(--radius-sm);padding:.5rem .75rem}
.hero__dark .pills li{color:var(--dark-ink-2);border-color:var(--dark-line);
  background:transparent}
.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(--mono);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}
.hero__dark .microcopy{color:var(--dark-ink-3)}

/* ---------- 12. the 60-second summary ---------- */
.sixty{border:1px solid var(--line);border-top:4px solid var(--accent-fill);
  background:var(--surface);padding:clamp(1.2rem,2.4vw,1.8rem);box-shadow:var(--shadow)}
.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(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line);padding:.4rem .6rem}
.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:.75rem 0;border-top:1px solid var(--rule);font-size:15.5px;
  line-height:1.6;color:var(--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.7 var(--mono);
  color:var(--accent);letter-spacing:.04em}
.sixty li b{color:var(--ink);font-weight:700}

/* ---------- chapters and the two-track spine ---------- */
/* Site 9 ran one flat stack of sections down the page. This one groups them
   into numbered chapters, each opened by a full-bleed marker, and runs a
   sticky label down the left track inside a chapter so you always know which
   one you are in. Defined above the hero marker on purpose: everything above
   it is inlined into every page, and a chapter marker that arrives with the
   async stylesheet moves the whole page under it. */
.chap{position:relative;background:var(--dark);color:var(--dark-ink-2);
  padding:clamp(2rem,4vw,3.4rem) 0;border-block:1px solid var(--dark-line)}
.chap--lit{background:var(--tint);color:var(--ink-2);border-color:var(--line)}
.chap .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.2rem clamp(1.2rem,3vw,2.6rem);align-items:start}
.chap__n{grid-column:1;grid-row:1/3;margin:0;font:800 clamp(2.6rem,7vw,5.2rem)/.8 var(--display);
  letter-spacing:-.05em;color:var(--dark-accent);font-variant-numeric:tabular-nums}
.chap--lit .chap__n{color:var(--accent)}
.chap__t{grid-column:2;grid-row:1;margin:0 0 .45rem;color:var(--dark-ink);
  font-size:clamp(1.5rem,2.8vw,2.3rem)}
.chap--lit .chap__t{color:var(--ink)}
.chap__d{grid-column:2;grid-row:2;margin:0;font-size:15.5px;line-height:1.62;
  color:var(--dark-ink-2);max-width:66ch}
.chap--lit .chap__d{color:var(--ink-2)}

.spine{display:grid;grid-template-columns:132px minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.8rem)}
.spine__lab{position:sticky;top:calc(var(--head-h) + 1.4rem);align-self:start;
  margin:0;padding-top:.3rem;font:600 10.5px/1.6 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);border-top:2px solid var(--accent-fill);
  padding-block:.55rem 0}
.band-dark .spine__lab{color:var(--dark-ink-3);border-top-color:var(--dark-accent)}
.spine__body{min-width:0}

/* ---------- hero: the seam ---------- */
/* Two full-bleed bands meet on a hard magenta line and the bottle stands
   across it. Nothing here is absolutely positioned against content whose
   height the browser does not know yet, which is why this hero measures 0.00
   CLS: the light band, the bottle box and the dark band are three blocks in
   source order, and the only overhang is --cross, a fixed length that a
   spacer of exactly the same length reserves room for on the other side. */
.hero{position:relative;overflow:clip}

.hero__lit{position:relative;z-index:2;background:var(--bg);
  padding:clamp(1.6rem,3vw,3rem) 0 clamp(1.8rem,3.4vw,3.2rem);
  border-bottom:4px solid var(--accent-fill)}
.hero__top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.4rem,3vw,3.2rem);align-items:start}
.hero__head{grid-column:1;grid-row:1;min-width:0}
.hero h1{margin-bottom:.9rem;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--accent);
  box-shadow:inset 0 -.26em 0 rgba(176,23,111,.13)}
.hero__deck{font-size:clamp(1.05rem,1.55vw,1.22rem);line-height:1.6;color:var(--ink-2);
  max-width:56ch;margin:0 0 1.15rem}

/* the bottle. A box with a declared ratio, and an image pinned to its bottom
   edge that is allowed to hang --cross below it. */
.hero__shot{grid-column:2;grid-row:1;position:relative;z-index:3;margin:0;
  width:min(100%,330px);justify-self:center;aspect-ratio:330/561;
  /* end, not start: the copy column is taller than this one, so a shot aligned
     to the top of the row stops well short of the seam and the bottle never
     crosses it. Aligned to the end, the box finishes on the row's baseline and
     the image hangs --cross below that, into the dark band. */
  align-self:end}
.hero__shot img{position:absolute;left:0;right:0;bottom:calc(-1 * var(--cross));
  width:100%;height:auto;
  filter:drop-shadow(0 22px 30px rgba(17,17,20,.28))}

.hero__dark{position:relative;z-index:1;background:var(--dark);color:var(--dark-ink-2);
  padding:0 0 clamp(1.4rem,2.6vw,2.4rem)}
.hero__bot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:0 clamp(1.4rem,3vw,3.2rem)}
/* the room the overhanging bottle needs, stated once, in the same unit */
.hero__pad{grid-column:2;grid-row:1;height:var(--cross)}
.hero__act{grid-column:1;grid-row:2;padding-bottom:.4rem}
.hero__dark h2,.hero__dark h3,.hero__dark .h3{color:var(--dark-ink)}
.hero__dark p{color:var(--dark-ink-2)}
.hero__dark a{color:var(--dark-accent)}

/* the census strip: one cell per substance the label names, the six the
   seller's own panel shows filled in. The figure and the finding are the
   same object. */
.census{grid-column:1;grid-row:1;padding:clamp(1.3rem,2.4vw,2rem) 0 1.1rem}
/* The same figure appears on light paper on the ingredients page, where every
   --dark-* token in it drops to under 2:1. */
.census--lit{grid-column:auto;grid-row:auto;padding:0}
.census--lit .census__lab{color:var(--ink-3)}
.census--lit .census__lab b{color:var(--accent)}
.census--lit .census__row li{background:var(--line);border-top-color:var(--ink-3)}
.census--lit .census__row li.on{background:var(--accent-fill);border-top-color:var(--accent-deep)}
.census--lit .census__cap{color:var(--ink-2)}
.census--lit .census__cap b{color:var(--ink)}
.census__lab{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;align-items:baseline;
  margin:0 0 .7rem;font:600 10.5px/1.5 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--dark-ink-3)}
.census__lab b{color:var(--dark-accent);font-weight:700}
.census__row{display:flex;gap:3px;margin:0 0 .6rem;padding:0;list-style:none}
.census__row li{flex:1 1 0;min-width:0;height:34px;background:var(--dark-line);
  border-top:2px solid #40404A}
.census__row li.on{background:var(--accent-fill);border-top-color:var(--dark-accent)}
.census__cap{margin:0;font-size:13.5px;line-height:1.6;color:var(--dark-ink-2);max-width:62ch}
.census__cap b{color:var(--dark-ink);font-weight:600}

/* the spec cells: four numbers from the panel, set in mono, divided by rules */
.spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--dark-line);border-left:1px solid var(--dark-line);
  margin:0 0 1.2rem}
.spec div{border-right:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);
  padding:.8rem .85rem}
.spec dt{margin:0 0 .3rem;font:600 9.5px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dark-ink-3)}
.spec dd{margin:0;font:700 17px/1.2 var(--display);letter-spacing:-.02em;color:var(--dark-ink)}
.spec dd small{display:block;margin-top:.2rem;font:400 11.5px/1.4 var(--sans);
  letter-spacing:0;color:var(--dark-ink-3)}

/* the seal strip: monochrome, at the very foot of the dark band */
.hero__seals{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;
  border-top:1px solid var(--dark-line);padding-top:1.1rem;margin-top:.4rem}
.hero__seals img{width:42px;height:42px;filter:grayscale(1) brightness(1.9) contrast(.85);
  opacity:.9}
.hero__seals p{margin:0;font-size:12px;line-height:1.55;color:var(--dark-ink-3);max-width:34ch}

.paystrip{display:flex;align-items:flex-start;gap:1.1rem 2rem;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:1.15rem}
.paystrip__col{display:flex;flex-direction:column;gap:.5rem}
.paystrip__note{font-size:12px;line-height:1.55;color:var(--ink-3);max-width:26ch}
.paystrip .seals{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.paystrip .seals img{width:40px;height:40px}

/* ---------- 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:#F8CCA6}
.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)}
.band-dark .sc,.band-dark .stat,.band-dark .pack,.band-dark .scrolly__step,
.band-dark .fitcheck,.band-dark .planner,.band-dark .faq details,
.band-dark .hotspot__panel,.band-dark .steps li,.band-dark .secnav{
  background:#1A1A20;border-color:var(--dark-line);color:var(--dark-ink-2)}
.band-dark .sc__why,.band-dark .planner__cell span,.band-dark .pack__supply{
  color:var(--dark-ink-2)}
.band-dark .sc__n,.band-dark .sc-total__n{color:var(--dark-ink-3)}
.band-dark .sc__n b,.band-dark .sc-total__n b,.band-dark .stat b,
.band-dark .planner__cell b,.band-dark .pack__each{color:var(--dark-accent)}
.band-dark .sc__meter,.band-dark .planner__bar .track{background:#243040;
  border-color:var(--dark-line)}
.band-dark .card,.band-dark .note{background:#1A1A20;border-color:var(--dark-line);
  color:var(--dark-ink-2)}
.band-dark .card h3,.band-dark .note h3{color:var(--dark-ink)}
.band-dark .tbl-wrap{background:#1A1A20;border-color:var(--dark-line)}
.band-dark thead th{background:#243040;color:var(--dark-accent);border-color:var(--dark-line)}
.band-dark th,.band-dark td{border-color:var(--dark-line);color:var(--dark-ink-2)}
.band-dark tbody th{color:var(--dark-ink)}
.band-dark tbody tr:hover{background:#243040}
.band-dark .answer{background:#1A1A20;border-color:var(--dark-line);color:var(--dark-ink-2)}
.band-dark .answer__tag{color:var(--dark-accent)}
.band-dark .ticks li{color:var(--dark-ink-2)}
.band-dark .ticks li::before{color:var(--dark-accent)}
.band-cream{background:var(--surface);border-block:1px solid var(--line)}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.6rem,3.2vw,3.2rem);align-items:center}
.split--57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.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(--line);border-top:3px solid var(--accent-fill);
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;
  transition:transform var(--t-hover) var(--ease),box-shadow var(--t-hover) var(--ease)}
.card:hover{transform:translateY(-3px);box-shadow:var(--lift)}
.card h3{margin:0}
.card p{margin:0;font-size:15.5px;color:var(--ink-2)}
.card--tint{background:var(--bg-2)}

/* ---------- tables ---------- */
.tbl-wrap{position:relative;overflow-x:auto;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line)}
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 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);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(--bg-2)}

/* ---------- callouts, steps, figures ---------- */
.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}
.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(--line);
  transition:border-color var(--t-hover) var(--ease)}
.steps li:hover{border-color:var(--accent)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:1.35rem;
  top:1.42rem;font:600 1.05rem/1 var(--mono);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(--line)}
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(--mono);
  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;background:currentColor;flex:none;
  margin-top:.18em}
.tag--printed{color:var(--cat-printed)}
.tag--ceiling{color:var(--cat-ceiling)}
.tag--silent{color:var(--cat-silent)}
.tag--caution{color:var(--cat-caution)}
.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(--mono);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(--mono);
  border-radius:var(--radius-sm);box-shadow:var(--lift);
  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 3px var(--surface),0 0 0 5px var(--ink);background:var(--ink)}
.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(--line);
  border-left:3px solid var(--accent-fill);border-radius:var(--radius-sm);padding:1.1rem 1.3rem}
.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(--mono);color:var(--accent);margin-right:.5rem}
.hotspots__hint{font:500 12px/1.5 var(--mono);color:var(--ink-3);margin:.9rem 0 0}
.hotspots:not(.hotspots--on) .hotspots__hint{display:none}

/* 3. tabs */
.tabs__list{display:flex;gap:0;flex-wrap:wrap;margin:0 0 1.3rem;padding:0;
  border-bottom:2px solid var(--line)}
.tabs:not(.tabs--on) .tabs__list{display:none}
.tabs__list button{background:none;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;cursor:pointer;padding:.7rem 1.05rem;font:700 13px/1 var(--sans);
  color:var(--ink-3);transition:color var(--t-hover) var(--ease),
    border-color var(--t-hover) var(--ease)}
.tabs__list button:hover{color:var(--ink)}
.tabs__list button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent-fill)}
.tabs--on [role=tabpanel]{animation:fadeUp .28s var(--ease) both}
.tabs__h{font:700 1.1rem/1.3 var(--display);color:var(--ink);margin:0 0 .55rem;
  font-stretch:112%}
.tabs--on .tabs__h{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(--radius);color:var(--ink);
  font:400 15px/1 var(--sans);padding:.9rem 1.1rem}
.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(--mono);color:var(--ink-3);white-space:nowrap}
.faqfilter__empty{margin:0;padding:1.1rem 1.3rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);font-size:15.5px}

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

/* 6. supply planner */
.planner{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.7rem;box-shadow:var(--shadow)}
.planner__ctl{display:none}
.planner--on .planner__ctl{display:block;margin-bottom:1.4rem}
.planner__ctl label{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.8rem}
.planner input[type=range]{width:100%;accent-color:var(--accent-fill);height:2rem}
.planner__ticks{display:flex;justify-content:space-between;margin-top:.2rem}
.planner__tick{font:500 12px/1 var(--mono);color:var(--ink-3)}
.planner__tick.is-on{color:var(--accent)}
.planner__out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.planner__cell{border-top:2px solid var(--line);padding-top:.8rem}
.planner__cell b{display:block;font:700 1.7rem/1.1 var(--display);color:var(--accent);
  font-variant-numeric:tabular-nums;font-stretch:112%}
.planner__cell span{font:500 11.5px/1.45 var(--mono);color:var(--ink-3)}
.planner__bar{margin-top:1.3rem}
.planner__bar .track{height:12px;border-radius:var(--radius-sm);background:var(--tint);
  position:relative;overflow:hidden;border:1px solid var(--line)}
.planner__bar .fill{position:absolute;inset:0 auto 0 0;width:var(--pct,100%);
  background:var(--accent-fill);transition:width var(--t-ui) var(--ease)}
.planner__bar p{margin:.6rem 0 0;font-size:13.5px;color:var(--ink-3)}
.planner__warn{margin-top:1rem}

/* 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(--mono);margin-bottom:.65rem}

/* 10. ingredient explorer */
.explorer__list{display:flex;gap:0;flex-wrap:wrap;margin:0 0 1.5rem;padding:0;
  border-bottom:2px solid var(--line)}
.explorer:not(.explorer--on) .explorer__list{display:none}
.explorer__list button{display:flex;align-items:center;gap:.5rem;background:none;border:0;
  border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;padding:.7rem 1rem;
  font:700 13px/1 var(--sans);color:var(--ink-3);
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.explorer__list button:hover{color:var(--ink)}
.explorer__list button[aria-selected=true]{color:var(--accent);
  border-bottom-color:var(--accent-fill)}
.explorer__list button i{width:8px;height:8px;background:currentColor;flex:none;opacity:.85}
.explorer__pane{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.explorer__h{font:700 1.12rem/1.3 var(--display);color:var(--ink);margin:0 0 .55rem;
  font-stretch:112%}
.explorer--on .explorer__h{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(--mono);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(--line);display:flex;flex-direction:column;
  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(-3px);box-shadow:var(--lift)}
.pack--best{border-color:var(--accent-fill);box-shadow:var(--shadow)}
.pack__flag{margin:0;text-align:center;font:700 11px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;padding:.7rem;background:var(--bg-2);color:var(--ink-3)}
.pack--best .pack__flag{background:var(--accent-fill);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(--mono);color:var(--ink-3)}
.pack__shot{margin:.7rem 0;display:grid;place-items:center;min-height:140px}
.pack__each{font:700 2.4rem/1 var(--display);color:var(--accent);font-stretch:112%}
.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:.62em;width:.6rem;height:2px;
  background:var(--accent-fill)}
.pack__foot{margin-top:auto;display:grid;gap:.75rem;justify-items:center}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.6rem}
.faq details{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--line);transition:border-color var(--t-hover) var(--ease)}
.faq details[open]{border-left-color:var(--accent-fill)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 3rem 1.1rem 1.3rem;position:relative;
  font:700 1rem/1.36 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:1.3rem;top:1.4rem;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);rotate:45deg;
  transition:rotate var(--t-ui) var(--ease)}
.faq details[open] summary::after{rotate:225deg;top:1.55rem}
.faq .a{padding:0 1.3rem 1.25rem;font-size:15.5px;color:var(--ink-2)}
.faq .a p:last-child{margin-bottom:0}

/* ---------- stats, scorecard ---------- */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem;text-align:center}
.stat{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--accent-fill);padding:1.5rem 1rem}
.stat b{display:block;font:700 clamp(2rem,3.3vw,2.8rem)/1 var(--display);color:var(--accent);
  font-variant-numeric:tabular-nums;margin-bottom:.3rem;font-stretch:112%}
.stat span{font:500 11.5px/1.5 var(--mono);color:var(--ink-3)}
.scorecard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}
.sc{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  padding:1.35rem 1.45rem;display:flex;flex-direction:column;gap:.7rem;
  transition:border-color var(--t-hover) var(--ease)}
.sc:hover{border-color:var(--accent)}
.sc__head{display:flex;align-items:baseline;gap:1rem;justify-content:space-between}
.sc__head h3{margin:0;font-size:1rem;line-height:1.3;overflow-wrap:break-word}
.sc__n{margin:0;flex:none;white-space:nowrap;color:var(--ink-3);font:500 13px/1 var(--mono)}
.sc__n b{font:700 1.6rem/1 var(--display);color:var(--accent);margin-right:.16rem;
  font-stretch:112%}
.sc__meter{height:6px;border-radius:2px;background:var(--tint);overflow:hidden;
  border:1px solid var(--line)}
.sc__meter span{display:block;height:100%;background:var(--accent-fill);
  transform-origin:left center;transform:scaleX(var(--w,1))}
.sc__why{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);overflow-wrap:break-word}
.sc-total{display:flex;align-items:flex-start;gap:1.5rem;margin-top:1.5rem;padding-top:1.5rem;
  border-top:2px solid var(--line);flex-wrap:wrap}
.sc-total__n{margin:0;flex:none;line-height:1;color:var(--ink-3);
  font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.sc-total__n b{display:block;font:700 clamp(2.3rem,4.2vw,3.2rem)/1 var(--display);
  color:var(--accent);margin-bottom:.3rem;letter-spacing:0;font-stretch:112%}
.sc-total__t{margin:0;max-width:64ch;font-size:15px;line-height:1.7;color:var(--ink-2)}

/* ---------- 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. */
.footcta{background:var(--accent-deep);color:#fff;
  padding:clamp(2.2rem,4vw,3.4rem) 0;border-top:4px solid var(--accent-fill)}
.footcta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:1.2rem clamp(1.5rem,4vw,3rem);align-items:center}
.footcta h2{color:#fff;margin:0 0 .5rem;font-size:clamp(1.45rem,2.6vw,2.1rem)}
.footcta p{margin:0;color:rgba(255,255,255,.88);font-size:15.5px;line-height:1.6;max-width:56ch}
.footcta .cta-row{margin:0}
/* .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). */
.footcta .btn.btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.footcta .btn.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff;
  transform:translateY(-2px)}
.footcta :focus-visible{outline-color:#fff}

.foot{background:var(--ink);color:var(--dark-ink-2);font-size:16px;padding-bottom:130px;
  border-top:1px solid var(--dark-line)}
.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.6rem;
  padding:var(--s5) 0 var(--s4)}
.foot h2,.foot h3,.foot .h3{font:600 12px/1.4 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--dark-accent);margin:0 0 .95rem;
  font-family:var(--mono)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot .brand .nm{color:var(--dark-ink)}
.foot .brand .nm small{color:var(--dark-ink-3)}
.foot .brand .mark{background:var(--accent-fill)}
.foot__about{font-size:15px;line-height:1.62;color:var(--dark-ink-2);margin:.9rem 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.25rem 0;display:flex;
  align-items:center;gap:1.1rem;flex-wrap:wrap;justify-content:space-between}
.foot__strip .seals{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.foot__strip .seals img{width:44px;height:44px;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.1rem 0;display:flex;
  align-items:center;gap:.9rem 1.6rem;flex-wrap:wrap}
.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.25rem 0 1.4rem;font-size:13.5px;
  line-height:1.7;color:var(--dark-ink-3);display:grid;gap:.7rem}
.foot__legal b{color:var(--dark-ink-2);font-weight:700}
.foot__end{border-top:1px solid var(--dark-line);padding:.9rem 0 1.2rem;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font:500 12px/1.5 var(--mono);letter-spacing:.06em;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:.55rem .85rem;
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  transition:background var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease)}
.totop:hover{background:var(--dark-line);border-color:var(--dark-ink-3)}
.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(--line);background:var(--surface);box-shadow:var(--shadow)}
/* 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(--line)}
.calc--on .calc__in{display:grid}
.calc__f{padding:1rem 1.1rem;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(--mono);
  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:0;padding:.6rem .65rem}
.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:1rem 1.1rem;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(--mono);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(--line);background:var(--bg-2);padding:.85rem 1.1rem;
  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(--line);
  background:var(--surface);color:inherit;text-align:left}
/* 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}
.zoom__hint{position:absolute;right:.55rem;bottom:.55rem;align-items:center;
  gap:.4rem;background:var(--ink);color:var(--dark-ink);padding:.4rem .6rem;
  font:600 10px/1 var(--mono);letter-spacing:.12em;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 var(--dark-line);
  color:var(--dark-ink-2);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:var(--dark-ink);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 var(--dark-ink-3);color:var(--dark-ink);
  font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:.55rem .7rem;cursor:pointer;white-space:nowrap}
.lb__b:hover{background:var(--dark-line)}
.lb__b[aria-disabled=true]{color:var(--dark-ink-3);border-color:var(--dark-line);
  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(--dark-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(--dark-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}}
/* the site's motion signature: a wipe along the seam axis, left to right. */
@keyframes wipe{from{opacity:0;clip-path:inset(0 100% 0 0)}
  to{opacity:1;clip-path:inset(0 -2px 0 0)}}
.js-reveal .wipe-in{opacity:0;clip-path:inset(0 100% 0 0);
  transition:opacity var(--t-reveal) var(--ease),clip-path var(--t-reveal) var(--ease)}
.js-reveal .wipe-in.in{opacity:1;clip-path:inset(0 -2px 0 0)}
.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}}
.cv{content-visibility:auto;contain-intrinsic-size:auto 640px}
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. */
    .js-reveal .wipe-in{opacity:1;clip-path:none;transition:none;
      animation:wipe linear both;animation-timeline:view();
      animation-range:entry 8% cover 22%}
    .js-reveal .wipe-in.in{opacity:1}
    .progress{animation:grow linear both;animation-timeline:scroll(root block);transition:none}
    @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---------- 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)}
}
@media(max-width:960px){
  .hero .eyebrow{justify-self:start;margin-bottom:1rem}
  .scrolly,.explorer__pane{grid-template-columns:minmax(0,1fr)}
  .scrolly--on .scrolly__figure{position:static}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem}
  .scorecard{grid-template-columns:minmax(0,1fr)}
  .split{align-items:start}
  .planner__out{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:820px){
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .split,.split--57{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,.narrow,.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}
  .strip .wrap{font-size:10.5px;gap:.35rem .8rem}
  .sc__head{flex-direction:column;gap:.3rem}
  .fitcheck,.planner{padding:1.25rem 1.15rem}
  .secnav{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
}


/* --- the seam hero, folded down --- */
@media(max-width:1060px){
  .spine{grid-template-columns:104px minmax(0,1fr)}
  .spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc__out{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  /* Below this width the bottle no longer crosses the seam: it sits inside
     the light band and the dark band starts clean. --cross goes to zero and
     the spacer that reserves room for the overhang collapses with it, because
     both read the same variable. */
  :root{--cross:0px}
  .hero__top,.hero__bot{grid-template-columns:minmax(0,1fr)}
  .hero__head,.hero__shot,.census,.hero__act{grid-column:1;grid-row:auto}
  .hero__shot{width:min(100%,232px);margin:1.4rem auto 0;justify-self:center;
    align-self:auto}
  .hero__shot img{position:static;bottom:auto}
  .hero__pad{display:none}
  .census{padding-top:clamp(1.1rem,3vw,1.6rem)}
  .hero .eyebrow{justify-self:start}
  .chap .wrap{grid-template-columns:minmax(0,1fr)}
  .chap__n{grid-column:1;grid-row:1;margin-bottom:.3rem}
  .chap__t{grid-column:1;grid-row:2}
  .chap__d{grid-column:1;grid-row:3}
  .foot__top{grid-template-columns:1.4fr 1fr 1fr}
  .footcta .wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .spine{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .spine__lab{position:static;border-top:2px solid var(--accent-fill);
    padding-block:.5rem 0;margin-bottom:.2rem}
  .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}
  .census__row li{height:26px}
}
@media(max-width:560px){
  .spec{grid-template-columns:minmax(0,1fr)}
  .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)}
  .census__row{gap:2px}
  .census__row li{height:22px;border-top-width:2px}
  .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}
  .js-reveal .wipe-in{opacity:1!important;clip-path:none!important;animation:none!important}
  .lb__view img{transition:none}
  .sc__meter span{transform:none!important}
  .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{
  .head,.strip,.buybar,.drawer,.progress,.secnav,.carousel__nav,.ticker,.ticker__stop,
  .faqfilter__bar,.planner__ctl,.calc__in,.zoom__hint,.totop,.lb{display:none}
  .js-reveal .wipe-in{opacity:1!important;clip-path:none!important;animation:none!important}
  .hero__shot img{position:static!important;bottom:auto!important;filter:none}
  .hero__pad{display:none}
  .hero__lit,.hero__dark,.chap,.footcta{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .census__row li{border:1px solid #000}
  .census__row li.on{background:#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}
  .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}
}

/* ---------- forced colors ---------- */
@media(forced-colors:active){
  .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,.sc__meter span,.planner__bar .fill{forced-color-adjust:none}
  /* the arrow inherits currentColor, which forced colors resolves for us */
  .btn::after{background:ButtonText}
  .tag,.card,.note,.pack,.fitcheck,.planner,.scrolly__step,.scrolly__figure,
  .sixty,.calc,.calc__f,.calc__o,.zoom,.spec div,.spine__lab{
    border:1px solid CanvasText}
  .btn,.lb__b,.totop{border:1px solid ButtonText}
  .hero__shot img{filter:none}
  /* the census cells carry the finding, so they must survive a palette
     that throws every background away */
  .census__row li{forced-color-adjust:none;background:Canvas;border:1px solid CanvasText}
  .census__row li.on{background:Highlight;border-color:Highlight}
  .chap__n{forced-color-adjust:none;color:CanvasText}
}