/* memohivedaily.com - MemoHive, USA authorized retailer.
   Design slot row 342 (_generators/batch9_assignments.py):
   Rufina over Yantramanav; a chalk-blue ground with sand panels; a header whose
   ordering button is a tall block flush to the right edge; a footer whose page
   index is split off by a drawn diagonal, with the contact facts filling the
   upper half; the recall-ring hero motif; a disc-and-key mark.

   COLOUR IS READ OFF THE BOTTLE.
   The MemoHive label is a near-black navy - sampled across the label face at
   #010c1b through #06111f - with the wordmark, the hexagon and the bee drawn in
   a warm gold that runs #9f763d to #c6a364 depending on the highlight, over a
   white cap and a white bottle. So navy is the dark ground, gold is the metal,
   and the page itself is the chalk blue and sand the slot asks for.

   WHICH TOKEN THE SHARED TOOLS PICK UP.
   hero_motifs.py and brand_marks.py both take the MOST SATURATED token in the
   root block between 0.15 and 0.72 lightness. That is the gold, deliberately:
   the recall ring has to travel round the bottle in the one colour the label
   already draws a circle in, and a blue ring on a blue ground is invisible.
   Every other colour here is kept below it in saturation on purpose.

   TWO STRINGS THIS COMMENT MUST NEVER CONTAIN, because two shared tools split
   the file on them: the root selector spelled out, and a close brace. Both take
   the text after the first occurrence and stop at the first brace, so a mention
   up here hands them an empty token list and they silently fall back to a
   default palette.

   Everything above CRITICAL-END is inlined into every page head: the topline,
   the header, the hero and the motif - the whole first screen. */

/* ---- tokens */
:root{
  /* the ground: chalk blue, with sand for the panels */
  --paper:#e7edf4;
  --sand:#f4ecdc;
  --card:#ffffff;
  --tint:#dbe4ee;
  /* ink, cooled to sit on the chalk */
  --ink:#12212f;
  --ink-2:#37485a;
  --ink-3:#5b6a79;
  /* the label navy: the dark band, the footer slab and the ordering block */
  --navy:#0d1f35;
  --navy-2:#17304c;
  --navy-3:#071322;
  --on-navy:#e4ebf3;
  --on-navy-2:#a7bbd0;
  /* accent: the deep blue the listing artwork is built on */
  --accent:#1c4b71;
  --accent-d:#123449;
  --accent-l:#dbe7f1;
  /* metal: the gold on the label. The most saturated token here, on purpose */
  --gold:#b5883f;
  --gold-d:#7d5c25;
  --gold-l:#f2e7cf;
  /* hairlines and states */
  --line:#cdd8e4;
  --line-2:#b0c0d1;
  --sand-line:#e0d2b4;
  --good:#1c6b45;
  --warn:#8a5f1c;
  /* metrics */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --radius:4px;
  --radius-lg:10px;
  --cta-w:168px;
  --shadow:0 1px 2px rgba(13,31,53,.06),0 12px 30px rgba(13,31,53,.08);
  --shadow-lg:0 24px 56px rgba(13,31,53,.18);
  --navh:92px;
  --serif:"Rufina",Georgia,"Times New Roman",serif;
  --sans:"Yantramanav",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--navh) + 18px)}
body{
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img,svg,table{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:700;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.28rem + 2.2vw,2.95rem);letter-spacing:-.012em}
h2{font-size:clamp(1.5rem,1.16rem + 1.15vw,2.1rem);letter-spacing:-.008em}
h3{font-size:1.2rem}
h4{font-size:1.04rem}
p,li,dd,dt,blockquote{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* The eyebrow names the JOB of the section beneath it. A short gold rule sits
   to its LEFT rather than under it, so the label reads as an index entry: the
   same drawn line the footer diagonal and the hero ring are made of. */
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:.875rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 12px;
}
.eyebrow::before{content:"";width:26px;height:2px;flex:0 0 auto;background:var(--gold)}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px 26px;border:2px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;
  background:var(--navy);color:#fff;
  transition:background .18s ease,transform .18s ease,border-color .18s ease;
}
.btn:hover{background:var(--navy-2);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:#12212f;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.btn--gold:hover{background:var(--gold-d);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn--ghost:hover{background:var(--card);color:var(--navy);border-color:var(--navy)}
.btn--lg{min-height:58px;padding:15px 30px;font-size:1.05rem}
.btn--wide{width:100%}

/* ---- topline strip: the five trust facts, ABOVE the navigation.
   Role, lot, dose and count, guarantee, order phone. It exists so the nav does
   not have to carry any of them. It lives above CRITICAL-END because it is the
   first thing painted; appended to the end of this file it would load async and
   flash unstyled at the very top of the page. */
.util{background:var(--navy-3);color:var(--on-navy-2);font-size:.9375rem;line-height:1.4}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.util__item+.util__item::before{
  content:"";width:1px;height:13px;flex:0 0 auto;margin-right:5px;
  background:var(--gold);opacity:.6;
}
.util b{color:var(--on-navy);font-weight:700}
.util a{color:inherit;text-decoration:none}
.util a:hover{color:var(--gold-l);text-decoration:underline}

/* ---- header.
   The slot: the ordering button is a TALL BLOCK FLUSH TO THE RIGHT EDGE. It is
   not a pill inside the row, it is a gold column the full height of the header
   running to the viewport edge, and the row reserves its width so nothing can
   slide under it. Identity left, destinations centre, the support number right
   of them, then the block.

   It is hidden below 560px. A nav CTA plus a burger plus a long brand overflowed
   at 390 on another site in this estate and had to be pulled; the sticky buy bar
   carries the order button on a phone instead. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);
  border-bottom:1px solid var(--line)}
.nav__row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding-block:12px;padding-right:calc(var(--cta-w) + 22px);
}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand>svg{width:38px;height:38px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--serif);font-size:1.5rem;font-weight:700;letter-spacing:-.018em}
.bw b em{font-style:normal;color:var(--gold-d)}
.bw small{font-size:0.9062rem;font-weight:500;color:var(--ink-3);letter-spacing:.09em;
  text-transform:uppercase}
.menu{display:flex;flex-wrap:nowrap;gap:0 20px;list-style:none;margin:0;padding:0;
  justify-content:center;line-height:1.3}
.menu a{
  display:inline-block;padding:3px 0 4px;font-size:.9375rem;font-weight:500;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--accent)}
.menu a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--gold)}
/* min-width:max-content, NOT the global min-width:0. A 1fr grid track floors at
   its item's min-content width, and the global reset sets that floor to zero,
   so a nowrap phone number collapses its track and prints through its neighbour. */
.nav__tel{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;
  min-width:max-content}
.nav__tel__l{font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.nav__tel__n{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.nav__tel__n:hover{color:var(--accent)}
/* THE SLOT. Flush right, full header height, square. */
.nav__cta{
  position:absolute;right:0;top:0;bottom:0;width:var(--cta-w);z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--gold);color:#12212f;text-decoration:none;
  border-left:3px solid var(--navy);
  transition:background .18s ease;
}
.nav__cta:hover{background:var(--gold-d);color:#fff}
.nav__cta span{font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.nav__cta b{font-family:var(--serif);font-size:1.22rem;font-weight:700;line-height:1}
.burger{
  display:none;width:46px;height:44px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:11px 10px;
}
.burger span{display:block;height:2px;background:var(--ink);margin:0 0 5px}
.burger span:last-child{margin:0}

/* ---- hero: copy LEFT on the chalk, the bottle RIGHT on a sand disc.

   The motion is the recall-ring motif on .hero__media's pseudo-elements
   (hero_motifs.py): a faint gold ring, and one arc that travels the whole way
   round it and comes back to where it started. Retrieval, not search - the
   thing this product is sold to support is getting back to something you
   already have, so the arc returns rather than scanning onwards.

   The sand disc behind the bottle is sized SMALLER than the ring, or the ring
   would be drawn behind an opaque plate and render nothing. Nothing animates
   the <img>: it is the LCP element and it is preloaded. Nothing animates the
   H1: an element that starts at opacity:0 is not painted, so the LCP time would
   move with the animation. The only movement on the card is a slow float. */
.hero{position:relative;overflow-x:clip;background:var(--paper);padding:40px 0 56px;
  border-bottom:1px solid var(--line)}
.hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:48px;align-items:start;
}
.hero__copy{display:flex;flex-direction:column;min-width:0}
/* Sized DOWN from the global h1 and capped in px rather than ch: a ch measure
   resolves against each element's own font-size, so one token gives every
   heading a different edge. At 1440 this lands the headline on three lines
   inside a ~600px column, which keeps the Quick Answer and the CTA above 900. */
.hero h1{margin:0 0 18px;max-width:580px;font-size:clamp(1.9rem,1.2rem + 2vw,2.65rem)}
.hero h1 em{font-style:normal;color:var(--accent)}

/* The Quick Answer sits on its own opaque sand card. */
.answer{
  background:var(--sand);border:1px solid var(--sand-line);border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 24px;margin:0 0 16px;
}
.answer p{margin:0 0 .7em;font-size:1.0625rem}
.answer p:last-child{margin:0}
.answer b{font-weight:700}
.qtag{
  display:inline-block;font-size:0.8438rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-d);margin:0 0 7px;
}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px;max-width:620px}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em;font-size:1.0625rem}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;
  border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);
  transform:rotate(-45deg);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 18px;
  font-size:.9375rem;color:var(--ink-3)}
.pay img{width:196px;height:auto}
.hero__sub{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;
  font-size:1rem;font-weight:700;color:var(--ink-2);
}
.hero__sub span{display:inline-flex;align-items:center;gap:8px}
.hero__sub span::before{content:"";width:7px;height:7px;flex:0 0 auto;border-radius:50%;
  background:var(--gold)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.9375rem;color:var(--ink-2);background:var(--card);
  border:1px solid var(--line);border-radius:999px;padding:6px 15px;
}
.factpills li b{color:var(--ink);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--card);border:1px solid var(--line);
  border-bottom:3px solid var(--gold);border-radius:var(--radius);padding:13px 16px}
.figures b{display:block;font-family:var(--serif);font-size:1.62rem;font-weight:700;
  color:var(--navy);line-height:1.08}
.figures span{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:2px}

/* the product column */
.hero__media{position:relative;align-self:start}
.hero__stick{position:relative;width:100%;max-width:440px;margin-inline:auto}
/* the sand plate. 76% of the column, so the 120% ring clears it on every side. */
.hero__plate{
  position:absolute;left:50%;top:50%;width:76%;aspect-ratio:1;translate:-50% -50%;
  z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--sand),#ece0c7);
  box-shadow:inset 0 0 0 1px rgba(181,136,63,.45),0 26px 50px rgba(13,31,53,.14);
}
.hero__card{
  position:relative;z-index:2;margin:0;padding:34px 30px 58px;
  animation:mhFloat 9.5s ease-in-out infinite;
}
.hero__card img{width:100%;max-width:300px;height:auto;margin-inline:auto}
@keyframes mhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hero__tag{
  position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:3;white-space:nowrap;
  background:var(--card);border:1px solid var(--line-2);border-radius:999px;
  padding:7px 17px;font-size:.9375rem;color:var(--ink-2);box-shadow:var(--shadow);
}

/* ---- inner page head */
.phead{padding:32px 0 12px;background:var(--paper);border-bottom:1px solid var(--line)}
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.phead h1{margin:0 0 18px;max-width:var(--measure-wide)}
.phead .answer{max-width:var(--measure-wide)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}


/* ---- hero motif -- recall-ring ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(140deg,#dedbd3,#e7edf4 44%,#e7edf4)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;border:2px solid rgba(181,136,63,0.30);animation:mdHold 11s ease-in-out infinite}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;pointer-events:none;border:2px solid transparent;border-top-color:rgba(181,136,63,0.62);animation:mdSweep 11s cubic-bezier(.5,0,.3,1) infinite}@keyframes mdHold{0%,100%{opacity:.22}55%{opacity:.5}}@keyframes mdSweep{0%{transform:rotate(0deg)}55%,72%{transform:rotate(360deg)}100%{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width:981px)` for the
   sticky product column, and a stacked hero whose media column is still sticky
   with min-height:100vh puts a full screen of empty space between the H1 and the
   Quick Answer. Change one breakpoint and the other has to change with it. */
@media (max-width:980px){
  .hero{padding-top:32px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__stick{max-width:400px}
  /* display:contents promotes the copy column's children to grid items so each one can be ordered individually. The naive collapse is wrong in both directions: order:-1 on the media puts a 390px image above everything and pushes the H1 to y~700, and leaving DOM order alone drops the product three screens down. */ .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:none}
  .hero__media{order:3;margin-bottom:6px}
  /* The CTA comes BEFORE the roadmap line on a phone: the mobile order is eyebrow, H1, shot, Quick Answer, CTA, and the roadmap sentence is a later addition with no place in it. Left at order 5 it pushes the CTA most of a screen further down. */ .hero__cta{order:5}
  .hero__road{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  /* THE PHONE HERO IS A BUDGET, NOT A SCALE-DOWN. Measured at 390x844 before these five rules: the Quick Answer began at y=1057 and the CTA at y=1398, against hero.md's targets of ~850 and ~1100. Everything above the button is therefore trimmed on purpose - the headline by four points, the product column to 300px, the card's own padding, the grid gap and the answer's padding. The bottle is smaller on a phone than it would like to be because a button nobody scrolls to is worth less than a larger photograph. */ .hero{padding-top:24px;padding-bottom:36px}
  .hero__grid{gap:18px}
  .hero h1{font-size:1.62rem;margin-bottom:14px}
  .hero__media{max-width:300px;margin-inline:auto}
  .hero__stick{max-width:300px}
  .hero__card{padding:8px 14px 52px}
  .hero__card img{max-width:184px}
  /* The lot chip is absolutely positioned and has no width of its own, so with `left:50%` and nothing on the right its available width is half the column: at 390 it shrink-to-fit into a 112px column, wrapped to five lines and sat across the bottle. Span the column instead and let it use the card's own bottom padding, which is why that padding is 52px here and 30 elsewhere. */ .hero__tag{left:0;right:0;translate:none;white-space:normal;text-align:center; max-width:none;border-radius:var(--radius);padding:6px 10px; font-size:0.9062rem;line-height:1.34}
}
@media (min-width:981px){
  .hero__media{position:sticky; top:calc(var(--navh,92px) + 14px); align-self:start; min-height:calc(100vh - var(--navh,92px) - 28px); min-height:calc(100svh - var(--navh,92px) - 28px); display:flex; flex-direction:column; align-items:center; justify-content:center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!CRITICAL-END*/

/* ---- sections. Four grounds: chalk, sand, white card, navy. Band edges are
   hairlines; the only shadows on this site are under the bottle and under the
   cards that hold a price. */
.sec{padding:60px 0;position:relative}
.sec--sand{background:var(--sand);border-block:1px solid var(--sand-line)}
.sec--card{background:var(--card);border-block:1px solid var(--line)}
.sec--navy{background:var(--navy);color:var(--on-navy);border-block:1px solid var(--navy-3)}
.sec--navy h2,.sec--navy h3,.sec--navy h4{color:#fff}
.sec--navy p,.sec--navy li,.sec--navy dd,.sec--navy dt{color:var(--on-navy)}
.sec--navy .eyebrow{color:var(--gold-l)}
.sec--navy .lead{color:var(--on-navy-2)}
.sec--navy a{color:var(--gold-l)}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head .lead{margin:0}

/* One measure, centred. Single-column content takes --measure; multi-column
   components keep the full wrap. Released below 1060px or a tablet gets a fixed
   760px box. */
@media (min-width:1060px){
  .sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
  .sec>.wrap>.keypoints,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps,.sec>.wrap>.versus,
  .sec>.wrap>.qa{max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:520px}
caption{text-align:left;padding:14px 18px 0;font-size:.9375rem;color:var(--ink-3)}
th,td{padding:13px 17px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--sans);font-weight:700;color:var(--ink);background:var(--tint);
  font-size:.9375rem}
td{font-size:1rem}
tbody tr:last-child td{border-bottom:0}
.tnote,.note{font-size:.9375rem;color:var(--ink-3);margin:-.3em 0 1.2em}
.dtable{min-width:520px}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 24px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:34px;height:34px;display:grid;place-items:center;
  background:var(--navy);color:var(--gold-l);font-family:var(--serif);font-weight:700;
  border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards: flat, hairline, with a short gold rule at the top-left corner */
.grid{display:grid;gap:18px}
.grid>*{min-width:0}
.grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px}
.card::before{content:"";position:absolute;left:24px;top:-1px;width:34px;height:3px;
  background:var(--gold)}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--sand .card{border-color:var(--sand-line)}
.sec--navy .card{background:var(--navy-2);border-color:#23436a}
.sec--navy .card h3{color:#fff}
.sec--navy .card p,.sec--navy .card li{color:var(--on-navy)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--accent-l);border:1px solid #bed2e2;border-radius:var(--radius);
  padding:20px 24px;margin:0 0 1.2em}
.callout>b{display:block;margin-bottom:6px;color:var(--accent)}
.callout p:last-child,.callout ul:last-child{margin:0}
.alert{background:var(--gold-l);border:1px solid #e0cda2;border-left:4px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:20px 24px;margin:0 0 1.2em}
.alert>b{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--serif);font-size:1.3rem;line-height:1.5;color:var(--ink);
  border-left:4px solid var(--gold);padding:2px 0 2px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;
  color:var(--ink-3);margin-top:10px}
.keypoints{background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:10px;font-family:var(--serif);font-size:1.1rem}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin:0 0 .5em}
.cautions{list-style:none;margin:0;padding:0}
.cautions li{position:relative;padding-left:22px;margin:0 0 .45em;font-size:1.0625rem}
.cautions li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;
  background:var(--gold-d)}

/* ---- the answer-engine block */
.qa{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--navy);
  border-radius:0 0 var(--radius) var(--radius);padding:22px 24px;margin:0 0 1.2em}
.qa>p:first-child{margin-top:0}
.qa .tablewrap{margin-bottom:0}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;
  align-items:center;margin:0 0 1.2em}
.split__img,.split__body{min-width:0}
.split--flip .split__img{order:-1}
.split__img img{width:100%;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card)}
.split__body p:last-child{margin:0}

/* ---- stat band, used inside .sec--navy */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center}
.stats div b{display:block;font-family:var(--serif);font-size:2.25rem;font-weight:700;
  color:var(--gold-l);line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:var(--on-navy-2);margin-top:4px}

/* ---- three columns: the label amount against the amount the research used */
.versus{display:grid;grid-template-columns:1.1fr .8fr 1.6fr;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--card);margin:0 0 1.2em}
.versus>div{padding:13px 17px;border-bottom:1px solid var(--line);font-size:1rem}
.versus__h{background:var(--tint);font-weight:700;font-size:.9375rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px;margin:0 0 1.2em}
.ingcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ingcard__top h3{margin:0}
.ing__latin{font-style:italic;color:var(--ink-3);font-size:.9375rem}
.ing__dose{margin-left:auto;font-family:var(--serif);font-size:1.16rem;font-weight:700;
  color:var(--navy);background:var(--sand);border:1px solid var(--sand-line);
  border-radius:999px;padding:3px 14px}
.ingcard p:last-child{margin:0}

/* ---- captioned images. There is no bare image row on this site. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 20px}
.shots figcaption b{display:block;margin-bottom:5px}
.shots figcaption span{font-size:.9375rem;color:var(--ink-2)}
figure.portrait img{width:var(--figw,320px);margin-inline:auto}

/* ---- seal wall */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0 0 1.2em}
.badgewall figure{margin:0;text-align:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:6px}
/* The seal and its name are centred; the sentence under them is not. Thirty
   words ragged on both edges is the hardest thing on a page to read, and these
   sentences are the whole reason the wall is here. */
.badgewall span{display:block;text-align:left;font-size:.9375rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:72px 1fr 52px;gap:12px;align-items:center;
  margin:0 0 8px;font-size:.9375rem}
.meter__bar{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--gold)}

/* ---- complaints, each with a fair reply */
.cmps{display:grid;gap:16px;margin:0 0 1.2em}
.cmp{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--warn);
  border-radius:0 var(--radius) var(--radius) 0;padding:18px 22px}
.cmp__q{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:6px}
.cmp p:last-child{margin:0}

/* ---- who it is for */
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 1.2em}
.forlist{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--good);
  border-radius:var(--radius);padding:22px 24px}
.forlist--no{border-top-color:var(--warn)}
.forlist h3{margin:0 0 10px}
.forlist ul{margin:0;padding-left:20px}
.forlist li{margin:0 0 .5em}

/* ---- the editorial score */
.facts{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin:0 0 1.2em}
.facts__h{background:var(--navy);color:var(--gold-l);font-family:var(--serif);font-weight:700;
  padding:13px 18px}
.facttab{width:100%;min-width:0;border-collapse:collapse}
.facttab th{background:transparent;font-weight:600;width:62%}
.facttab td{text-align:right;font-weight:700}

/* ---- the add-to-cart panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  align-items:stretch;margin:0 0 22px}
.card--pack{
  display:flex;flex-direction:column;position:relative;background:var(--card);
  border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line);
  border-radius:var(--radius-lg);overflow:hidden;padding:0;
}
.card--pack::before{display:none}
/* box-sizing is border-box, so every card carries the 2px border and only the
   recommended one colours it in. Give the border to one card alone and it steals
   2px of content box and drops its button out of line. */
.card--pack.card--best{border-color:var(--gold);box-shadow:var(--shadow-lg)}
/* EVERY BAND IN THIS CARD CARRIES ITS OWN min-height, and that is deliberate.
   pack_cards.py is the shared pass that keeps this row aligned and it DOES see
   these cards -- its matcher wants a word boundary before "card", and
   `class="card card--pack"` supplies one. What it cannot see is a BEM name:
   `buy__card` fails the same match because an underscore is a word character,
   which is how the sister desk on this product ended up outside the tool. So
   these cards must never be renamed to a BEM form, and the alignment is
   guaranteed at source as well: a fixed image box, a fixed head band, a fixed
   flag, a fixed button and one fixed line below it, with every
   variable-length element above the auto gap. Measured at 1024 and 1440. */
.pack__head{background:var(--tint);border-bottom:1px solid var(--line);padding:13px 20px;
  display:flex;align-items:baseline;gap:10px;min-height:54px}
.card--pack.card--best .pack__head{background:var(--navy);border-bottom-color:var(--navy)}
.card--pack.card--best .pack__head b{color:#fff}
.card--pack.card--best .pack__head span{color:var(--gold-l)}
.pack__head b{font-family:var(--serif);font-size:1.18rem;font-weight:700}
.pack__head span{font-size:.875rem;font-weight:700;color:var(--ink-3);margin-left:auto;
  letter-spacing:.06em;text-transform:uppercase}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 24px;font-size:1rem}
.pack__flag{display:flex;align-items:center;width:fit-content;margin:0 auto 12px;
  background:var(--accent);min-height:28px;
  color:#fff;font-size:0.8438rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px}
.card--pack.card--best .pack__flag{background:var(--gold-d)}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,164px);object-fit:contain;
  margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--serif);font-size:2.5rem;font-weight:700;color:var(--navy);
  line-height:1;text-align:center;margin:0}
.pack__per sup{font-size:1.05rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.9375rem;font-weight:700;
  color:var(--ink-3);margin:5px 0 14px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 16px;
  font-size:1rem}
.pack__tot b{font-weight:700}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:1rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2);
  font-size:inherit}
.pack__perks li::before{content:"";position:absolute;left:1px;top:.55em;width:11px;height:6px;
  border-left:2.5px solid var(--good);border-bottom:2.5px solid var(--good);
  transform:rotate(-45deg)}
/* The auto gap sits between the variable-length blurb and the button, so the
   three CTAs share one baseline however long the three blurbs are. Everything
   below the gap is a fixed number of lines. */
.card--pack .btn{margin-top:auto;min-height:54px}
.pack__marks{text-align:center;font-size:.9375rem;color:var(--ink-3);margin:12px 0 0;
  min-height:25px}
.pack__why{font-size:.9375rem;color:var(--ink-2);margin:12px 0 18px;padding-top:12px;
  border-top:1px solid var(--line)}
/* the supply line, held to one height so three heads cannot disagree */
.pack__head span{min-height:20px;display:inline-flex;align-items:center}
.buy__pay{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:0 0 14px}
.buy__pay img{width:280px;height:auto}
.buy__pay span{font-size:.9375rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);margin:0}

/* ---- FAQ. The padding lives on <summary>, which is the click target: on
   <details> the row measures ~30px against the 44px minimum. */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--card);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 48px 18px 22px;cursor:pointer;position:relative;list-style:none;
  font-family:var(--serif);font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
  font-family:var(--sans);font-size:1.4rem;font-weight:400;color:var(--gold-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 22px 20px}
.faq__body p:last-child,.faq__body ul:last-child{margin-bottom:0}

/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* A reference list prints each source's URL as the link text, and a URL is one
   unbreakable token: at 390 that pushes a single anchor past the viewport,
   clipped and unscrollable. `anywhere` also lowers the element's min-content,
   which is what stops the ancestor being sized by the longest URL in the list. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;
  padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:52px;height:52px;display:block}
.byline__mark svg{width:52px;height:52px}
.byline b{display:block;margin-bottom:6px}
.byline p{font-size:.9375rem;color:var(--ink-2);margin:0}

/* ---- closing CTA, on the navy band */
.final{display:block}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:center}
.final__img img{width:280px}
.final h2{margin:0 0 10px;color:#fff}
.final p{color:var(--on-navy)}
.final__price{font-weight:700;color:var(--gold-l)}
.final__sm{font-size:.9375rem;color:var(--on-navy-2);margin:14px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);
  transition:border-color .18s ease}
.rel a:hover{border-color:var(--gold)}
.rel b{display:block;font-family:var(--serif);font-size:1.1rem;margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum on every control, or iOS Safari zooms the page on
   focus and never zooms back. */
.form{display:grid;gap:16px;max-width:var(--measure)}
.field label{display:block;font-weight:700;font-size:1rem;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--sans);font-size:16px;padding:13px 14px;
  border:1px solid var(--line-2);border-radius:var(--radius);background:var(--card);
  color:var(--ink);
}
.field textarea{min-height:140px;resize:vertical}
.field small{display:block;font-size:.9375rem;color:var(--ink-3);margin-top:5px}

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{scroll-margin-top:calc(var(--navh) + 20px)}
.postmeta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.9375rem;color:var(--ink-3);
  margin:0 0 22px;padding:12px 0;border-block:1px solid var(--line)}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
/* A blog figure is a lone card in the reading column, so it takes the .shots
   figure treatment without the grid: .shots is a three- or two-up row and a
   single item in it renders at half measure, which is too small to read a
   panel off. */
.article figure{margin:0 0 1.4em;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.article figure img{width:100%}
.article figcaption{padding:16px 20px}
.article figcaption b{display:block;margin-bottom:5px}
.article figcaption span{font-size:.9375rem;color:var(--ink-2)}
/* The mid-article CTA reuses .final--media, whose type is coloured for the
   navy closing band. Inside the reading column there is no navy band under it,
   so the panel brings its own ground: white on chalk blue is pitfall 64. */
.article .final--media{margin:0 0 1.6em;background:var(--navy);border:1px solid var(--navy-3);
  border-radius:var(--radius);padding:24px 28px;gap:26px}
.article .final--media h3{color:#fff;margin:0 0 8px}
.article .final--media p{color:var(--on-navy)}
.article .final__img img{width:200px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.posts article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{margin:0 0 8px;font-size:1.1rem}
.posts p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
.posts .pmeta{font-size:.9375rem;color:var(--ink-3)}

/* ---- footer: one navy slab, split by a DRAWN DIAGONAL.
   Above the line, filling the upper half: the contact facts - who this desk is,
   the two email addresses, the phone, the office and the returns address. Below
   it: the page index. The diagonal is a real hairline drawn corner to corner
   across its own band, not a border and not a rotated box, so it stays crisp at
   every width and needs no overflow rules. */
footer{background:var(--navy);color:var(--on-navy);border-top:4px solid var(--gold)}
footer a{color:var(--on-navy);text-decoration:none}
footer a:hover{color:var(--gold-l);text-decoration:underline}
.fcontact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:34px;
  padding:44px 0 26px}
.fbrand{font-family:var(--serif);font-size:2.3rem;font-weight:700;letter-spacing:-.02em;
  line-height:1;color:#fff}
.fbrand span{color:var(--gold)}
.frole{font-size:.9375rem;color:var(--on-navy-2);margin:12px 0 0}
.fdesk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.fdesk__i b{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.fdesk__i p{font-size:1.062rem;color:var(--on-navy-2);margin:0}
.fdiag{height:74px;margin:0;pointer-events:none;
  background:linear-gradient(to bottom right,
    transparent calc(50% - 1px),rgba(181,136,63,.85) calc(50% - 1px),
    rgba(181,136,63,.85) calc(50% + 1px),transparent calc(50% + 1px))}
.findex{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;padding:6px 0 26px}
.findex .fh{font-size:.8125rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px}
.findex ul{list-style:none;margin:0 0 20px;padding:0}
.findex ul:last-child{margin-bottom:0}
/* inline-block, not block: the box still shrink-wraps to the text so the hover
   underline stays the width of the words, and the negative margin gives the row
   its height back. */
footer li a{display:inline-block;padding-block:7px;margin-block:-7px;font-size:1rem;
  color:var(--on-navy)}
.fbits{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;
  justify-content:space-between;padding:22px 0;border-block:1px solid #23436a}
.fseals,.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.fseals img{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:50%;
  padding:3px}
.fseals span,.fpay span{font-size:.9375rem;color:var(--on-navy-2);max-width:34ch}
.fpay img{width:230px;height:auto;background:#fff;border-radius:var(--radius);padding:5px 8px}
.fnap{padding:22px 0 0}
.fnap p{font-size:.9375rem;color:var(--on-navy-2);margin:0}
.fnap strong{color:#fff}
.disc{padding:22px 0 34px}
.disc p{font-size:.9375rem;color:var(--on-navy-2);margin:0 0 .8em;max-width:var(--measure-wide)}
.disc b{color:#fff}
.disc a{color:var(--gold-l)}
.disc__list{list-style:none;margin:0 0 1em;padding:0;max-width:var(--measure-wide)}
.disc__list li{position:relative;padding-left:20px;margin:0 0 .5em;font-size:1.062rem;
  color:var(--on-navy-2)}
.disc__list li::before{content:"";position:absolute;left:0;top:.82em;width:10px;height:1px;
  background:var(--gold)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid #23436a}

/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--navy-3);
  color:#fff;transform:translateY(105%);transition:transform .25s ease;
  border-top:2px solid var(--gold)}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;max-width:var(--wrap);margin-inline:auto;
  padding:12px 20px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:var(--on-navy-2)}
.buybar .btn{margin-left:auto;flex:0 0 auto;min-height:46px;padding:10px 22px}

/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---- responsive.
   The header sheds in this order: the support number, then the menu into a
   dropdown, then the flush-right ordering block. */
@media (max-width:1180px){
  .menu{gap:0 15px}
  .menu a{font-size:.9rem}
}
@media (max-width:1040px){
  :root{--navh:80px;--cta-w:132px}
  .nav__row{grid-template-columns:auto 1fr;gap:14px;padding-block:11px}
  .nav__tel{display:none}
  .menu{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--card);border-bottom:1px solid var(--line);
    padding:8px 20px 14px;box-shadow:var(--shadow-lg);
  }
  .menu.open{display:flex}
  .menu a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block;justify-self:end}

  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcontact{grid-template-columns:1fr;gap:26px}
  .findex{grid-template-columns:repeat(2,minmax(0,1fr))}
  .final--media{grid-template-columns:1fr;gap:20px}
  .final__img img{width:240px}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The hero stacks at 980, NOT at the 1040 the header collapses at. That number
   is not a preference: hero_sticky.py writes `@media (min-width:981px)` for the
   sticky product column, and a stacked hero whose media column is still sticky
   with min-height:100vh puts a full screen of empty space between the H1 and the
   Quick Answer. Change one breakpoint and the other has to change with it. */
@media (max-width:980px){
  .hero{padding-top:32px}
  .hero__grid{grid-template-columns:1fr;gap:24px}
  .hero__stick{max-width:400px}
  /* display:contents promotes the copy column's children to grid items so each
     one can be ordered individually. The naive collapse is wrong in both
     directions: order:-1 on the media puts a 390px image above everything and
     pushes the H1 to y~700, and leaving DOM order alone drops the product three
     screens down. */
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2;max-width:none}
  .hero__media{order:3;margin-bottom:6px}
  .answer{order:4}
  /* The CTA comes BEFORE the roadmap line on a phone: the mobile order is
     eyebrow, H1, shot, Quick Answer, CTA, and the roadmap sentence is a later
     addition with no place in it. Left at order 5 it pushes the CTA most of a
     screen further down. */
  .hero__cta{order:5}
  .hero__road{order:6}
  .ticks{order:7}
  .hero__sub{order:8}
  .pay{order:9}
  .factpills{order:10}
  .figures{order:11}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  /* THE PHONE HERO IS A BUDGET, NOT A SCALE-DOWN. Measured at 390x844 before
     these five rules: the Quick Answer began at y=1057 and the CTA at y=1398,
     against hero.md's targets of ~850 and ~1100. Everything above the button is
     therefore trimmed on purpose - the headline by four points, the product
     column to 300px, the card's own padding, the grid gap and the answer's
     padding. The bottle is smaller on a phone than it would like to be because
     a button nobody scrolls to is worth less than a larger photograph. */
  .hero{padding-top:24px;padding-bottom:36px}
  .hero__grid{gap:18px}
  .hero h1{font-size:1.62rem;margin-bottom:14px}
  .hero__media{max-width:300px;margin-inline:auto}
  .hero__stick{max-width:300px}
  .hero__card{padding:8px 14px 52px}
  .hero__card img{max-width:184px}
  /* The lot chip is absolutely positioned and has no width of its own, so with
     `left:50%` and nothing on the right its available width is half the column:
     at 390 it shrink-to-fit into a 112px column, wrapped to five lines and sat
     across the bottle. Span the column instead and let it use the card's own
     bottom padding, which is why that padding is 52px here and 30 elsewhere. */
  .hero__tag{left:0;right:0;translate:none;white-space:normal;text-align:center;
    max-width:none;border-radius:var(--radius);padding:6px 10px;
    font-size:0.9062rem;line-height:1.34}
  /* Five topline items wrap to three lines and eat 100px of an 844px screen.
     Keep the role, the guarantee and the phone; the lot and the dose are on the
     pages that need them. */
  .util{font-size:.90625rem;line-height:1.38}
  .util__item--trim{display:none}
  .util__row{gap:3px 13px}
  /* The Quick Answer is the tallest block on a phone hero, so its padding is
     where the CTA's y position is won or lost. */
  .answer{padding:14px 16px;margin-bottom:14px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  /* Stacked, the ladder must not lead with the smallest order. */
  .card--pack.card--best{order:-1}
  .shots,.shots.s2{grid-template-columns:1fr}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:1fr}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:1fr}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  .whofor{grid-template-columns:1fr}
  .figures{grid-template-columns:1fr;gap:8px}
  .meter__row{grid-template-columns:62px 1fr 46px}
  .fdesk{grid-template-columns:1fr}
  .findex{grid-template-columns:1fr}
  .fdiag{height:52px}
  .fbits{gap:18px}
  .ing__dose{margin-left:0}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
/* The flush-right ordering block goes here and not lower. A nav CTA, a burger
   and a full wordmark together overflowed a 390px row on another site in this
   estate and had to be pulled; the sticky buy bar carries the order button on a
   phone, so nothing is lost but the arrangement. */
@media (max-width:559px){
  .nav__cta{display:none}
  .nav__row{padding-right:20px}
  .badgewall{grid-template-columns:1fr}
  .buy__pay img{width:100%}
}

/* ---- hero: sticky, centred product column.
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past. --navh is measured and published by site.js, because a
   hardcoded offset tucks the bottle under the bar on a taller header.

   Requires .hero NOT to clip on the block axis: any non-visible overflow on an
   ancestor becomes the scrollport sticky resolves against. */
@media (min-width:981px){
  .hero__grid{align-items:start}
  .hero__media{
    position:sticky;
    top:calc(var(--navh,92px) + 14px);
    align-self:start;
    min-height:calc(100vh - var(--navh,92px) - 28px);
    min-height:calc(100svh - var(--navh,92px) - 28px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

   The height lives here and not on the <img> attributes on purpose: those
   must keep stating each file's true ratio, or fix_img_dims.py rewrites them
   and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
  object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots.s2>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 20px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */

/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer .disc p{font-size:16px}
footer .fdesk__i b{font-size:16px}
footer .findex .fh{font-size:15px}
footer .fnap p{font-size:16px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */