/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Rokkitt Fallback";src:local("Georgia");font-weight:400;size-adjust:95.83%;ascent-override:85.25%;descent-override:33.39%;line-gap-override:0.00%}
@font-face{font-family:"Rokkitt Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:84.77%;ascent-override:96.38%;descent-override:37.75%;line-gap-override:0.00%}
@font-face{font-family:"Radio Canada Fallback";src:local("Arial");font-weight:400;size-adjust:105.17%;ascent-override:89.86%;descent-override:24.25%;line-gap-override:0.00%}
@font-face{font-family:"Radio Canada Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:101.26%;ascent-override:93.32%;descent-override:25.18%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* quiettonedaily.com — Quiet Tone, U.S. stocking partner desk.
   Design slot 332 (batch8_assignments.py): Rokkitt / Radio Canada, a powder-blue
   ground with cream panels, a narrow strip of facts sitting above a taller
   identity plate, a footer that puts the seals and the payment marks on one rule
   above three ranks of destinations, and the quiet-ring hero motif.

   The colour comes off the bottle, not off the LOOKS FOR reference: the deep
   teal of the "Tone" wordmark and the warm charcoal of "Quiet", set on the
   powder blue the slot assigns, with every panel in cream so the page reads as
   paper laid on a cool ground rather than as white on white.

   Everything above CRITICAL-END is inlined into every page head. */

/* ---- tokens */
:root{
  --ink:#2b201f;            /* the wordmark's warm charcoal */
  --ink-2:#574a48;          /* secondary */
  --ink-3:#7d716f;          /* captions, meta */
  --teal:#008a94;           /* the label's "Tone" */
  --teal-d:#006670;
  --teal-l:#2bb3bd;
  --deep:#0f3b44;           /* the bands: header strip, footer, dark sections */
  --deep-2:#17505c;
  --wash:#e3f1f2;           /* teal wash */
  --paper:#dce8f2;          /* the page: powder blue */
  --panel:#fdf9ef;          /* the panels: cream */
  --tint:#cbdeeb;           /* a deeper powder blue */
  --line:#c2d6e4;           /* rules on the blue ground */
  --line-2:#a9c2d4;
  --line-w:#e7dcc4;         /* rules inside a cream panel */
  --good:#0f6f5c;
  --warn:#8d5c14;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:6px;
  --radius-lg:14px;
  --shadow:0 1px 2px rgba(15,59,68,.06), 0 12px 30px rgba(15,59,68,.09);
  --shadow-lg:0 22px 58px rgba(15,59,68,.22);
  --navh:150px;
  --display:"Rokkitt","Rokkitt Fallback",Georgia,"Times New Roman",serif;
  --text:"Radio Canada","Radio Canada Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---- base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{
  overflow-x:clip;background:var(--paper);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.72;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-d);text-underline-offset:3px}
a:hover{color:var(--deep)}
h1,h2,h3,h4{font-family:var(--display);color:var(--deep);font-weight:700;line-height:1.14;margin:0 0 .5em}
h1{font-size:clamp(2.05rem,1.34rem + 2.3vw,3.2rem);letter-spacing:-.012em}
h2{font-size:clamp(1.54rem,1.2rem + 1.25vw,2.24rem);letter-spacing:-.008em}
h3{font-size:1.26rem;font-weight:700}
h4{font-size:1.06rem;font-weight:700}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}

/* the eyebrow names the JOB of the section beneath it */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);
  margin:0 0 10px;
}
.eyebrow::before{
  content:"";width:22px;height:8px;flex:0 0 auto;
  /* a two-crest wave, drawn in CSS: the mark family this slot carries */
  background:
    radial-gradient(circle at 50% 100%,transparent 4px,var(--teal) 4px 5.4px,transparent 5.6px) 0 0/11px 8px repeat-x;
}

/* ---- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:15px 32px;
  font-family:var(--display);font-size:1.06rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:var(--radius);cursor:pointer;text-decoration:none;
  background:var(--deep);color:#fff;
  transition:filter .18s ease,transform .18s ease;
}
.btn:hover{filter:brightness(1.16);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--teal{background:linear-gradient(98deg,var(--teal-d) 0%,var(--teal) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.16rem}
.btn--ghost{background:none;color:var(--deep);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--deep)}
.btn--wide{width:100%}

/* ---- topline strip: the five facts, above the identity plate.
   Role, lot, dose and count, guarantee, order phone. It sits ABOVE
   CRITICAL-END because it is the first thing painted; appended to the end of
   the stylesheet it would load async and flash unstyled at the very top of
   the page. The lot and the dose are trimmed on phones, where five items wrap
   to three lines and eat most of a hundred pixels. */
.util{background:var(--deep);color:#a9c9cf;font-size:.8125rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding-block:8px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
.util__item+.util__item::before{content:"";width:14px;height:1px;background:#3f7681;
  flex:0 0 auto;margin-right:9px}
.util b{color:#eef7f4;font-weight:600}
.util a{color:inherit;text-decoration:none}
.util a:hover{text-decoration:underline}
@media (max-width:760px){
  .util__item--trim{display:none}
  .util__row{gap:4px 13px}
}

/* ---- header: the identity plate, taller than the strip above it.
   A cream plate carrying the wordmark, the role and the price rail, closed by
   a teal rule, with the menu on its own row inside the same plate. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);
  box-shadow:0 1px 0 var(--line),0 10px 24px rgba(15,59,68,.07)}
/* padding-BLOCK, never the shorthand: these elements also carry .wrap, and
   `padding:16px 0` would set padding-inline to 0 and wipe the page gutter.
   Invisible above the container max-width, and no overflow test can see it
   (pitfall 46). */
.plate__row{display:flex;align-items:center;gap:20px;padding-block:16px}
.brand{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--deep)}
/* the "underline" mark construction: a wordmark over a drawn rule, no icon */
.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;
  border-radius:2px;background:#008a94}
.brand>svg{width:34px;height:34px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.06}
.bw b{font-family:var(--display);font-size:1.62rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.bw b em{font-style:normal;color:var(--teal)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.nav__rail{margin-left:auto;display:flex;align-items:center;gap:18px;min-width:0}
.nav__price{text-align:right;line-height:1.2;min-width:0}
.nav__price b{display:block;font-family:var(--display);font-size:1.24rem;font-weight:700;color:var(--deep)}
.nav__price span{font-size:.78125rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:46px;padding:11px 22px;font-size:.98rem}
.burger{
  display:none;width:48px;height:46px;background:transparent;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;padding:12px 11px;
}
.burger span{display:block;height:2px;background:var(--deep);margin:0 0 5px}
.burger span:last-child{margin:0}
/* the menu row, inside the plate, under a teal rule */
.nav__menu{border-top:2px solid var(--teal)}
.menu{
  display:flex;flex-wrap:wrap;gap:0 26px;list-style:none;margin:0;padding:0;
  align-items:center;min-height:44px;
}
.menu a{
  display:inline-block;padding:11px 0;font-family:var(--text);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent;
}
.menu a:hover{color:var(--deep)}
.menu a[aria-current="page"]{color:var(--deep);border-bottom-color:var(--teal)}
.menu__more{display:none}

/* ---- hero: the bottle LEFT under the rings, the copy RIGHT.
   DOM order is copy-then-media so the H1 is the first thing in the section;
   the grid places the media in column one. */
.hero{position:relative;background:var(--paper);padding:52px 0 58px}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.hero__copy{display:flex;flex-direction:column;min-width:0;grid-column:2;grid-row:1}
.hero__media{grid-column:1;grid-row:1;min-width:0}
.hero h1{margin:0 0 18px}
.hero h1 em{font-style:normal;color:var(--teal-d)}
.answer{
  background:var(--panel);border:1px solid var(--line-w);
  border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;margin:0 0 18px;box-shadow:var(--shadow);
}
.answer p{margin:0 0 .75em;font-size:1.06rem}
.answer p:last-child{margin:0}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 20px;max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 20px}
.hero__sub{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 18px;font-size:.925rem;font-weight:600;color:var(--ink-2)}
.hero__sub span{display:inline-flex;align-items:center;gap:7px}
.hero__sub span::before{content:"\2713";color:var(--good);font-weight:700}
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.factpills li{
  font-size:.875rem;font-weight:500;color:var(--ink-2);background:var(--panel);
  border:1px solid var(--line-w);padding:7px 14px;border-radius:999px;min-width:0;
}
.factpills li b{color:var(--deep);font-weight:700}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.figures div{background:var(--panel);border:1px solid var(--line-w);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;font-weight:700;color:var(--deep);line-height:1.1}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.hero__card{position:relative;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:340px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(15,59,68,.34))}
.hero__cap{margin:16px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-2);text-align:center}
.trust__row{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"\2713";color:var(--good);font-weight:700}

/* ---- inner page head */
.phead{padding:34px 0 12px;background:var(--panel);border-bottom:1px solid var(--line-w)}
.crumbs{font-size:.875rem;color:var(--ink-3);margin:0 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--teal-d)}
.phead h1{margin:0 0 16px;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)}

/* The hero motif below is written by _generators/hero_motifs.py. Everything
   between its marker comment and CRITICAL-END is the tool's, and hand edits
   here are overwritten on the next run.

   A fragment of the earlier hand-written quiet-ring block used to sit at this
   point in the file: three rules and a stray closing brace, left behind when
   the tool cut the old block at the first comment INSIDE it instead of at the
   next top-level one. Its `@media(prefers-reduced-motion:reduce){` opener had
   gone, so `animation:none!important` applied unconditionally and killed the
   motif in every motion state, while `opacity:.46` left both rings resting
   visible. validate, preflight and audit all read green over it -- no gate can
   see a dead animation -- and the reduced-motion render comparison could not
   see it either, because the tool's own reduce block still won there. It
   showed up only as `animationName: none` under `no-preference`. The tool's
   block removal is brace- and line-aware now; this note stays as the reason. */
/* ---- hero motif -- quiet-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(168deg,#dce8f2 0%,#b4d7e1 48%,#dce8f2 100%)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:16%;width:150%;aspect-ratio:1;translate:-50% 0;border-radius:50%;border:2px solid rgba(0,138,148,0.42);z-index:0;pointer-events:none;animation:qdRing 6.4s ease-out infinite backwards}.hero__media::after{animation-delay:3.2s;border-width:1px;border-color:rgba(0,138,148,0.30)}@keyframes qdRing{0%{scale:.42;opacity:0}16%{opacity:.90}100%{scale:1.02;opacity:0}}
@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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@media (max-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;grid-column:1;grid-row:auto;margin:6px 0 18px}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
}
@media (max-width:760px){
  .hero{padding:34px 0 42px}
}
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 150px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 150px) - 28px); min-height: calc(100svh - var(--navh, 150px) - 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;}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home page, LAYOUT. Everything here moves a box, so it has to be part of
   the critical block that is inlined into every page head; a restamp alone
   would leave the old geometry inlined in ~30 pages.

   Every rule is scoped to the home page. class="hero" is on index.html and on
   no other page of this site (counted: 1 match on index, 0 on the other 29),
   so a selector starting .hero is home-only, and body:has(.hero) is home-only
   for the things that also exist elsewhere.

   1. THE BUY BUTTON WAS BELOW THE FOLD. Measured in Chromium at 1440x900: the
      hero CTA top sat at y=882 and its bottom at y=948, so 48px of the only
      button on the first screen was off it. The desktop copy column is
      reordered to eyebrow, headline, quick answer, BUTTONS, payment line, then
      the evidence. The phone order is composed separately below 981px with
      display:contents and is deliberately not touched here.

   2. The recommended pack is raised 12px with MARGIN, never transform: the
      reveal pass resolves transform to none on .in and would cancel a lift.
      The negative top margin is paired with an equal positive bottom one, so a
      stretched card keeps its siblings' height -- a bare negative margin makes
      it taller, which is exactly what the note beside .card--pack.featured
      warns about, and the three Add To Cart buttons would stop sharing one
      baseline. Held above 761px only: below that the row is one column and the
      featured card is ordered first, where a negative margin would pull it
      into the section heading.

   3. The pack row gains room above it because the flag now stands outside the
      card's top edge as a tab. Measured: the tab is 36px tall and the featured
      card it sits on is 12px higher again, so 26px of section-head margin left
      the tab's top edge exactly level with the heading's box. 34px of padding
      puts a 14px gap there. */
@media (min-width:981px){
  .hero .hero__copy>.eyebrow{order:1}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__cta{order:4}
  .hero .hero__copy>.hero__sub{order:5}
  .hero .hero__copy>.hero__road{order:6}
  .hero .hero__copy>.factpills{order:7}
  .hero .hero__copy>.figures{order:8}
}
@media (min-width:761px){
  body:has(.hero) .prices{padding-top:34px}
  body:has(.hero) .prices>.card--pack.featured{margin-top:0;margin-bottom:0}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:60px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--deep);color:#d6e7e8}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#bcd4d7}
.sec--dark .eyebrow{color:#6fc9d2}
.sec--dark .eyebrow::before{background:
  radial-gradient(circle at 50% 100%,transparent 4px,#6fc9d2 4px 5.4px,transparent 5.6px) 0 0/11px 8px repeat-x}
.sec--dark a{color:#8fd8df}
.sec--center{text-align:center}
.sec--center .sec__head{margin-inline:auto}
.sec__head{max-width:var(--measure);margin:0 0 26px}
.sec__head h2{margin:0 0 10px}
.sec__head p{color:var(--ink-2);margin:0}
.sec--dark .sec__head p{color:#bcd4d7}

/* one measure, centred; multi-column components keep the full wrap */
@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>blockquote{max-width:var(--measure);margin-inline:auto}
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
    max-width:var(--measure-wide);margin-inline:auto}
}

/* ---- lists */
.ticks{list-style:none;margin:0 0 1.1em;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .5em}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.sec--dark .ticks li::before{color:#66d0b6}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line-w);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-w);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:#fff;background:var(--deep);font-size:1rem}
tbody tr:nth-child(even){background:#f7f2e5}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--deep)}
.tnote{font-size:.9375rem;color:var(--ink-3);margin:-.4em 0 1.2em}

/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:1px solid var(--line-w);border-radius:var(--radius);padding:20px 22px 20px 70px;min-width:0}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:var(--teal);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.1rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
.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))}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT. Any
   card holding a table or a nowrap chip therefore refuses to shrink and
   overflows the phone silently. min-width:0 at every width, not only in the
   media query. */
.grid>*{min-width:0}
.card{position:relative;background:var(--panel);border:1px solid var(--line-w);border-top:3px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:22px 22px 20px}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#12454f;border-color:#1f5f6b;border-top-color:var(--teal-l)}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #b9dce0;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--deep)}
.callout p:last-child{margin:0}
.alert{background:#fbf3e3;border:1px solid #e9d8b4;border-left:4px solid var(--warn);border-radius:0 var(--radius) var(--radius) 0;padding:20px 22px;margin:0 0 1.2em}
.alert b:first-child{display:block;margin-bottom:6px;color:var(--warn)}
.alert p:last-child{margin:0}
.pullquote{font-family:var(--display);font-size:1.34rem;font-weight:500;line-height:1.48;color:var(--deep);border-left:4px solid var(--teal);padding:4px 0 4px 22px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--text);font-size:.9375rem;font-style:normal;font-weight:400;color:var(--ink-3);margin-top:8px}
.keypoints{background:var(--panel);border:1px solid var(--line-w);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:20px 22px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:8px;color:var(--deep)}
.keypoints ul{margin:0;padding-left:20px}

/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;margin:0 0 1.2em}
.split--flip .split__img{order:2}
/* Same family as .grid>* above: a .tablewrap holding a 520px-min table keeps
   its column 520px wide however narrow the grid is unless the item may shrink. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line-w);border-radius:var(--radius);background:var(--panel)}
.split__body p:last-child{margin:0}

/* ---- stat band */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats>div{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#a9c9cf;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.25fr;border:1px solid var(--line-w);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.versus>div{padding:13px 16px;border-bottom:1px solid var(--line-w);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:600;background:#f7f2e5}
.versus__h{background:var(--deep)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:.98rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* .ing__dose is white-space:nowrap, which sets the card's min-content floor.
   Without this the column resolves wider than the phone and the right-hand
   edge is clipped away with nothing to scroll. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line-w);border-left:3px solid var(--teal-l);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px}
.ingcard__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0 0 10px}
.ingcard__top h3{margin:0}
.ing__latin{font-size:.9375rem;font-style:italic;color:var(--ink-3)}
.ing__dose{margin-left:auto;font-size:.9375rem;font-weight:700;color:#fff;background:var(--deep);padding:4px 12px;border-radius:999px;white-space:nowrap}
.ingcard p:last-child{margin:0}

/* ---- add-to-cart pricing panel */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;margin:0 0 20px}
.prices>*{min-width:0}
.card--pack{display:flex;flex-direction:column;background:var(--panel);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--line-w);border-radius:var(--radius-lg);overflow:hidden;position:relative;border-top-width:2px}
/* No lift on the featured card: a negative margin makes it taller than its
   siblings and trips the rule that a pricing row shares one height and one
   button baseline. The accent border, the deeper shadow, the coloured head
   band and the flag already make it unmistakable. */
.card--pack.featured{border-color:var(--teal);box-shadow:var(--shadow-lg)}
.pack__head{background:#f2ece0;border-bottom:1px solid var(--line-w);padding:14px 20px;display:flex;align-items:center;gap:10px;min-width:0}
.card--pack.featured .pack__head{background:var(--deep);border-bottom-color:var(--deep)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.2rem;font-weight:700}
.pack__head span{font-size:.8125rem;font-weight:600;color:var(--ink-3);margin-left:auto;white-space:nowrap}
.pack__flag{position:absolute;right:0;top:0;background:var(--teal);color:#fff;font-family:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;z-index:3;border-radius:0 0 0 var(--radius)}
.pack__body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;margin-inline:auto;margin-bottom:14px}
.pack__per{font-family:var(--display);font-size:2.5rem;font-weight:700;color:var(--deep);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:700;top:-.72em}
.pack__unit{display:block;text-align:center;font-size:.875rem;font-weight:600;color:var(--ink-3);margin:4px 0 12px}
.pack__tot{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:0 0 14px;font-size:1rem;flex-wrap:wrap}
.pack__tot b{font-weight:700}
.pack__was{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.pack__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.pack__perks li{position:relative;padding-left:24px;margin:0 0 6px;color:var(--ink-2)}
.pack__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.card--pack>.pack__body>.btn{margin-top:auto}
.pack__marks{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:center;margin:12px 0 0;font-size:.8125rem;color:var(--ink-3)}
.buy__note{font-size:.9375rem;color:var(--ink-3);text-align:center;margin:0}

/* ---- captioned images */
.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>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line-w);border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px}
.shots figcaption b{display:block;margin-bottom:5px;color:var(--deep)}
.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>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);border:1px solid var(--line-w);border-radius:var(--radius);padding:18px 16px}
.badgewall img{width:74px;height:74px;object-fit:contain;margin:0 auto 10px}
.badgewall b{display:block;font-size:1rem;margin-bottom:4px;color:var(--deep)}
.badgewall span{font-size:.875rem;color:var(--ink-2)}

/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:76px minmax(0,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:linear-gradient(90deg,var(--teal-l),var(--deep))}
.stars{color:#cf9a1e;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target. */
.faq{border:1px solid var(--line-w);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line-w)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:17px 48px 17px 20px;cursor:pointer;position:relative;list-style:none;font-family:var(--display);font-weight:700;font-size:1.14rem;color:var(--deep)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-family:var(--text);font-size:1.34rem;font-weight:400;color:var(--teal-d)}
.faq details[open] summary::after{content:"\2212"}
.faq__body{padding:0 20px 18px}
.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:.9375rem;color:var(--ink-2);margin:0 0 .6em}
/* The reference list prints each source's full URL as the link TEXT, and a URL
   is one unbreakable token. `anywhere` rather than `break-word` because it 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(--panel);border:1px solid var(--line-w);border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline>*{min-width:0}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:var(--deep);color:#fff;font-family:var(--display);font-weight:700;font-size:1.14rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--deep)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line-w);border-top:4px solid var(--teal);border-radius:0 0 var(--radius) var(--radius);padding:30px 32px}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:30px;align-items:center}
.final--media>*{min-width:0}
.final__img img{width:200px}
.final h2{margin:0 0 10px}
.final__price{font-weight:600;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}

/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:1px solid var(--line-w);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
.rel a:hover{border-color:var(--teal);transform:translateY(-2px)}
.rel b{display:block;font-family:var(--display);font-size:1.16rem;color:var(--deep);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

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

/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{font-size:.9375rem;color:var(--ink-3);margin:0 0 20px}
.toc{background:var(--panel);border:1px solid var(--line-w);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--deep)}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1rem}
.posts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:1px solid var(--line-w);border-radius:var(--radius);padding:22px 24px}
.posts h3{margin:0 0 8px}
.posts p{font-size:1rem;color:var(--ink-2)}
.dtable{min-width:520px}

/* ---- closing guarantee band */
.fcta{background:var(--deep);color:#fff;padding:52px 0}
.fcta h2,.fcta__h{color:#fff}
.fcta__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center}
.fcta__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-l);margin-bottom:8px}
.fcta__h{font-family:var(--display);font-size:1.78rem;font-weight:700;line-height:1.2;margin:0 0 10px}
.fcta p{color:#bcd4d7}
.fcta__sm{font-size:.9375rem;color:#9ab6ba;margin:12px 0 0}
.fcta__sm a,.fcta p a{color:#8fd8df}
.fcta__img img{width:280px}

/* ---- footer: the seals and the payment marks on ONE rule, above three ranks
   of destinations, with the desk's own contact block beneath them. */
footer{background:var(--panel)}
.fmarks{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding:24px 0;border-bottom:1px solid var(--line-w)}
.fmarks img{height:44px;width:auto;object-fit:contain}
.fmarks__pay{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0}
.fmarks__pay img{height:30px}
.fmarks span{font-size:.875rem;color:var(--ink-3)}
.franks{padding:6px 0 4px}
.frank{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:15px 0;border-bottom:1px solid var(--line-w)}
.frank__h{flex:0 0 190px;font-family:var(--display);font-size:1.02rem;font-weight:700;color:var(--deep)}
.frank ul{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:0;padding:0;min-width:0}
.frank li{margin:0}
/* inline-block, not block: the box shrink-wraps so the hover underline stays
   the width of the words, and the negative margin gives the row height back. */
footer li a{display:inline-block;padding-block:5px;margin-block:-5px;font-size:.9688rem;color:var(--ink-2);text-decoration:none}
footer li a:hover{color:var(--teal-d)}
.fbase{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:26px;padding:26px 0 30px}
.fbase>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.78rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--teal)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fbase p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fbase b{color:var(--deep)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding:28px 0 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--deep)}
.disc__list{columns:2;column-gap:38px;list-style:none;margin:14px 0 0;padding:0}
.disc__list li{break-inside:avoid;margin:0 0 9px;padding-left:16px;position:relative}
.disc__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:2px;border-radius:2px;background:var(--teal)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.9375rem}

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

/* ---- 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 */
@media (max-width:1100px){
  .fbase{grid-template-columns:1fr 1fr}
  .frank__h{flex:0 0 160px}
}
@media (max-width:980px){
  :root{--navh:112px}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;grid-column:1;grid-row:auto;margin:6px 0 18px}
  .answer{order:4}
  .hero__road{order:5}
  .hero__cta{order:6}
  .hero__sub{order:8}
  .trust__row{order:9}
  .factpills{order:10}
  .figures{order:11}
  .nav__price{display:none}
  .menu{display:none;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 12px}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line-2)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line-2)}
  .burger{display:block}
  .nav__buy{display:none}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .fcta__box{grid-template-columns:minmax(0,1fr)}
  .fcta__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:44px 0}
  .hero{padding:34px 0 42px}
  .grid.g2,.grid.g3,.grid.g4{grid-template-columns:minmax(0,1fr)}
  .prices{grid-template-columns:minmax(0,1fr)}
  .card--pack.featured{order:-1}
  .shots,.shots.s2{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rel,.posts{grid-template-columns:minmax(0,1fr)}
  .split,.split--flip .split__img{grid-template-columns:minmax(0,1fr);order:0}
  .versus{grid-template-columns:minmax(0,1fr)}
  .versus>div:nth-child(3n+1){border-top:2px solid var(--line-2)}
  /* The dose chip is white-space:nowrap and margin-left:auto, so on a narrow
     card it gets pushed onto a line with no room for it and overhangs the
     edge. On a phone let it start its own line and wrap its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:minmax(0,1fr);gap:8px}
  .frank{flex-direction:column;gap:4px}
  .frank__h{flex:0 0 auto}
  .fmarks__pay{margin-left:0}
  .fbase{grid-template-columns:minmax(0,1fr);gap:20px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .badgewall{grid-template-columns:minmax(0,1fr)}
}

/* ---- hero: the bottle breathes inside the rings --------------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted. The float goes on the
   CARD, never on the <img>. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:48%;translate:-50% -50%;
  width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(253,249,239,.85),rgba(253,249,239,0) 72%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:46%;height:16px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(15,59,68,.38),rgba(15,59,68,0) 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:qtFloat 8.5s ease-in-out infinite}
  @keyframes qtFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
}

/* ---- 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: this
   header is three bands and its height changes between breakpoints, so a
   hardcoded offset tucks the product under the bar.

   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, 150px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 150px) - 28px);
    min-height: calc(100svh - var(--navh, 150px) - 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 share their edges, their image slot and
   their button baseline. 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. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,178px);
  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 ==== */

/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ==== home page, PAINT (design slot: rise / 16px card / 10px control /
   deep diffuse ambient / tab ribbon) ==================================
   Radius, shadow, background, colour, transform, transition, animation.
   Nothing below moves a box, so this sits under the critical marker and a
   restamp carries it.

   Scoped with body:has(.hero), which is the home page on this site and also
   outranks modern_surface.py's bare .card and .card--pack rules that are
   appended further down the file. Beaten on specificity, never on order. */

body:has(.hero){
  /* tinted with this site's own ink, 43 32 31, never neutral black */
  --qt-amb:0 22px 60px rgba(43,32,31,.16);
  --qt-amb-hi:0 28px 74px rgba(43,32,31,.24);
  --qt-amb-teal:0 18px 44px rgba(0,99,110,.28);
  --qt-r-card:16px;
  --qt-r-ctl:10px;
}

/* ---- surfaces: ONE deep, very diffuse stop. The appended surface pass left a
   1px contact shadow under a 6px one; two short stops read as a sticker laid
   on the page. One long shadow reads as a panel resting above the powder-blue
   ground, which is what this slot asks for. */
body:has(.hero) .card,
body:has(.hero) .callout,
body:has(.hero) .keypoints,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .final,
body:has(.hero) .tablewrap,
body:has(.hero) .split__img,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .posts article,
body:has(.hero) .figures div{box-shadow:var(--qt-amb)}

body:has(.hero) .card,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .ingcard,
body:has(.hero) .tablewrap,
body:has(.hero) .split__img,
body:has(.hero) .posts article,
body:has(.hero) .figures div{border-radius:var(--qt-r-card)}

/* panels that carry a coloured top rule keep a square top edge, so the rule
   still reads as a rule and not as a hoop */
body:has(.hero) .keypoints,
body:has(.hero) .final{border-radius:0 0 var(--qt-r-card) var(--qt-r-card)}

/* the quick answer keeps its flat left edge against the teal rule; the surface
   pass had rounded all four corners and lost it */
body:has(.hero) .answer{
  border-radius:0 var(--qt-r-card) var(--qt-r-card) 0;
  box-shadow:var(--qt-amb);
}

/* ---- controls sit at the slot's 10px, not at the card radius. Every button
   on this site was resolving to 16px, which is the dated signature in the
   other direction: a control shaped like a panel. */
body:has(.hero) .btn,
body:has(.hero) .burger{border-radius:var(--qt-r-ctl)}

/* the buying CTA is the only gradient on the page; the secondary stays solid,
   so the pair reads as two weights rather than as two buttons */
body:has(.hero) .btn--teal{
  background-image:linear-gradient(135deg,#00a7b2 0%,#008a94 46%,#00636e 100%);
  box-shadow:var(--qt-amb-teal),inset 0 1px 0 rgba(255,255,255,.22);
}
body:has(.hero) .btn--ghost{
  background-color:var(--panel);background-image:none;color:var(--deep);
  box-shadow:inset 0 0 0 2px var(--line-2),0 10px 26px rgba(43,32,31,.10);
}
body:has(.hero) .btn--ghost:hover{background-color:var(--wash)}

/* ---- 2px lift, and a focus ring a keyboard can find */
body:has(.hero) .btn,
body:has(.hero) .card--pack,
body:has(.hero) .posts article,
body:has(.hero) .shots figure,
body:has(.hero) .badgewall figure,
body:has(.hero) .rel a{
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s ease,
             filter .24s ease,background-color .24s ease;
}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .btn--teal:hover{box-shadow:var(--qt-amb-hi),inset 0 1px 0 rgba(255,255,255,.22)}
body:has(.hero) .btn:active{transform:translateY(0)}
body:has(.hero) .card--pack:hover,
body:has(.hero) .posts article:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .badgewall figure:hover,
body:has(.hero) .rel a:hover{box-shadow:var(--qt-amb-hi);transform:translateY(-2px)}
body:has(.hero) .btn:focus-visible,
body:has(.hero) .card--pack a:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .btn:hover,
  body:has(.hero) .card--pack:hover,
  body:has(.hero) .posts article:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .badgewall figure:hover,
  body:has(.hero) .rel a:hover{transform:none}
}

/* ---- pack cards. The flag becomes a tab standing above the card's top edge,
   which is this slot's ribbon. overflow goes visible to let it out, and that
   un-clips the head band, so the head takes the inner radius itself: 16px
   outer less the card's 2px border is 14px.

   NOTHING HERE CHANGES A HEIGHT. The flag is out of flow, and the separators
   between the feature rows are PAINTED as a background image rather than set
   as a border, because a border would add one pixel per row and walk the
   Add To Cart buttons off the single baseline this row is engineered for. */
body:has(.hero) .card--pack{
  overflow:visible;border-radius:var(--qt-r-card);
  box-shadow:inset 0 0 0 1px var(--line-w),var(--qt-amb);
}
body:has(.hero) .card--pack.featured{
  box-shadow:inset 0 0 0 1px var(--teal-l),var(--qt-amb-hi);
}
body:has(.hero) .pack__head{border-radius:14px 14px 0 0}
body:has(.hero) .card--pack.featured .pack__head{
  background-image:linear-gradient(115deg,var(--deep-2) 0%,var(--deep) 62%);
}
body:has(.hero) .pack__flag{
  left:50%;right:auto;top:0;transform:translate(-50%,-100%);
  border-radius:var(--qt-r-ctl) var(--qt-r-ctl) 0 0;
  padding:6px 18px 9px;letter-spacing:.1em;
  box-shadow:0 -10px 26px rgba(43,32,31,.12);
}
body:has(.hero) .card--pack.featured .pack__flag{
  background-image:linear-gradient(135deg,#00a7b2 0%,#00636e 100%);
}
body:has(.hero) .pack__perks li{
  background-image:repeating-linear-gradient(to right,
      var(--line-w) 0 5px,rgba(0,0,0,0) 5px 10px);
  background-size:100% 1px;background-position:left bottom;background-repeat:no-repeat;
}
body:has(.hero) .pack__perks li:last-child{background-image:none}

/* ---- hero motif: RISE. Warmth off the base of the bottle, drifting up and
   fading out.

   It lives on the media column's own pseudo-elements and never on the <img>,
   which is the LCP element and is preloaded. It is sized at 150% of that
   column -- about 753px against a 360px product card -- so it reads OUTSIDE
   the card instead of being hidden behind it.

   This replaces the expanding-ring motif that the hero motif pass left on the
   same two pseudo-elements: two motifs on one hero fight each other. It wins
   on specificity, so it survives a re-run of that pass above the marker. Its
   keyframe is named qtWarmRise, which collides with neither of the two names
   already in this sheet.

   Transform and opacity only, 15s and 19s. This is a capsule taken once a day
   for months, not an energy drink. */
.hero .hero__media::before,
.hero .hero__media::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:auto;bottom:2%;
  width:150%;margin-left:-75%;height:70%;
  aspect-ratio:auto;translate:none;border:0;border-radius:50%;
  transform-origin:50% 100%;opacity:0;
  /* Two stacked gradients, not one: over a powder-blue ground a cream bloom
     alone is nearly invisible, which is the "shipped looking like nothing"
     failure. The warm sand core carries the warmth; the teal skirt carries the
     contrast and is what reads in the two 80px bands either side of the
     bottle, which is the only part of this the reader can actually see. */
  background:
    radial-gradient(44% 40% at 50% 80%,
      rgba(255,246,224,.88) 0%,rgba(231,220,196,.50) 40%,
      rgba(231,220,196,0) 74%),
    radial-gradient(64% 58% at 50% 94%,
      rgba(0,138,148,.40) 0%,rgba(0,138,148,.23) 44%,
      rgba(0,138,148,.09) 66%,rgba(0,138,148,0) 82%);
  animation:qtWarmRise 15s cubic-bezier(.4,0,.5,1) infinite;
}
.hero .hero__media::after{
  width:104%;margin-left:-52%;height:92%;bottom:0;
  background:
    radial-gradient(32% 46% at 50% 86%,
      rgba(0,138,148,.40) 0%,rgba(43,179,189,.22) 44%,
      rgba(0,138,148,0) 78%),
    radial-gradient(24% 28% at 50% 96%,
      rgba(255,246,224,.58) 0%,rgba(255,246,224,0) 70%);
  animation-duration:19s;animation-delay:-9s;
}
/* The opacity peak is at 46%, not at the start. The first cut peaked at 16%,
   where the plume is still at scale .76 and sitting on the base -- which is
   exactly where the 340px bottle covers it, so the brightest moment of the
   motif was the one nobody could see. Measured by pausing the animation and
   differencing the hero against the same frame with the two pseudo-elements
   removed: 4.8% of the hero changed at the old timing. */
@keyframes qtWarmRise{
  0%{opacity:0;transform:translateY(6%) scale(.72)}
  13%{opacity:.5}
  46%{opacity:1}
  74%{opacity:.68}
  100%{opacity:0;transform:translateY(-34%) scale(1.28)}
}
/* The earlier pass switched these off with opacity:0!important under reduced
   motion, which left the hero with nothing at all. Rest them instead: still,
   visible, no animation. Higher specificity, so this !important wins. */
@media (prefers-reduced-motion:reduce){
  .hero .hero__media::before,
  .hero .hero__media::after{
    animation:none!important;opacity:.55!important;
    transform:translateY(-10%) scale(1.06)!important;
  }
}
/* ==== end home page paint ==== */
/*!SITE-HOME-PAINT-END*/
/* ==== 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 li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fbase p{font-size:16px}
footer .fmarks span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 14 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (43,32,31), not neutral black.

   Paint only: border-radius, box-shadow and transform change no
   geometry, so this is safe below the critical marker and needs a
   restamp rather than a rebuild. */
:root{
  --radius:16px;
  --shadow:0 1px 2px rgba(43,32,31,.06), 0 6px 18px rgba(43,32,31,.07);
  --lift:0 2px 6px rgba(43,32,31,.09), 0 16px 34px rgba(43,32,31,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.split__img,
.answer{box-shadow:var(--shadow)}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.keypoints,
.alert,
.byline,
.ingcard,
.final,
.split__img,
.answer{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}