/* goquiettone.com — Quiet Tone, U.S. authorized retailer desk.
   Design slot: batch8_assignments.py, row 323. Baloo 2 / Prompt, a plum-tinted
   greige ground, a header plate divided by vertical hairlines into three equal
   zones, a footer whose tinted band carries the guarantee and pack recap above a
   white destination grid, and the tone-still hero motif.

   The slot's footer band was written as a "bonus recap". This pack names no
   bonus of any kind, so there is nothing to recap and nothing is invented: the
   band carries the 180-day guarantee and the three-pack ladder instead, which is
   what a buyer standing at the foot of the page actually wants.

   Colour comes from the bottle, not from the LOOKS FOR reference. The label sets
   "Quiet" in a plum-black and "Tone" in teal over a teal waveform, so the ground
   is the plum and the accent is the teal. The reference (kerafirmmpro.com)
   contributed component shapes and nothing else.

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

/* ---- tokens */
:root{
  --ink:#2a2226;            /* body text, the label's plum-black */
  --ink-2:#5d5157;          /* secondary */
  --ink-3:#847880;          /* captions, meta */
  --plum:#3f2b3a;           /* headings */
  --plum-d:#2b1c28;         /* deep, for dark bands */
  --plum-2:#573c50;
  /* The label's wordmark teal, pulled down far enough to carry a brand mark on
     white. brand_marks.py picks a site's accent by taking the most saturated
     :root token inside a lightness band, so the bottle's brightest teal is
     deliberately NOT a token: it appears as a literal in the motif, where a
     gradient can use it, and the token stays the version a 36px glyph can be
     drawn in. */
  --teal:#0f8e9a;           /* the label's wordmark and waveform */
  --teal-d:#0a7784;         /* the accessible text teal */
  --wash:#e2f3f5;           /* teal wash */
  --paper:#efe9ec;          /* the page: plum-tinted greige */
  --panel:#ffffff;
  --tint:#e6dce2;           /* the deeper plum greige */
  --line:#ded2d8;
  --line-2:#c6b6c0;
  --good:#12765d;
  --warn:#8a5a10;
  --wrap:1200px;
  --measure:760px;
  --measure-wide:980px;
  --radius:10px;
  --radius-lg:18px;
  --shadow:0 1px 2px rgba(42,34,38,.05), 0 10px 30px rgba(42,34,38,.08);
  --shadow-lg:0 22px 60px rgba(63,43,58,.20);
  --navh:120px;
  --display:"Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"Prompt",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.76;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(--plum)}
h1,h2,h3,h4{font-family:var(--display);color:var(--plum);font-weight:700;line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,1.3rem + 2.2vw,3.05rem);letter-spacing:-.01em}
h2{font-size:clamp(1.48rem,1.16rem + 1.2vw,2.16rem)}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1.03rem;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(--plum-d);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:9px;
  font-family:var(--text);font-size:.78125rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal-d);
  margin:0 0 10px;
}
/* three ticks of a waveform, the label's own graphic at its smallest scale */
.eyebrow::before{
  content:"";width:18px;height:11px;flex:0 0 auto;
  background:repeating-linear-gradient(90deg,var(--teal) 0 2px,transparent 2px 6px);
}

/* ---- 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.02rem;font-weight:700;letter-spacing:.01em;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  background:var(--plum);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(100deg,var(--teal-d) 0%,var(--teal) 100%)}
.btn--lg{min-height:62px;padding:17px 38px;font-size:1.1rem}
.btn--ghost{background:none;color:var(--plum);box-shadow:inset 0 0 0 2px var(--line-2)}
.btn--ghost:hover{background:var(--wash);color:var(--plum-d)}
.btn--wide{width:100%}

/* ---- header: one plate, three equal zones, vertical hairlines between them.
   The hairline is a border on the zone rather than a background stripe, so the
   three columns stay exactly equal at every width and the rule cannot drift out
   of register with the grid. */
.nav{position:sticky;top:0;z-index:100;background:var(--panel);box-shadow:0 1px 0 var(--line)}
.nav__plate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
/* padding-BLOCK on the zones, never the shorthand on the plate: .nav__plate
   also carries .wrap, and `padding:10px 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). */
.nav__zone{display:flex;align-items:center;min-width:0;padding-block:12px;padding-inline:0}
.nav__zone+.nav__zone{border-left:1px solid var(--line);padding-inline-start:22px}
.nav__zone--menu{justify-content:center}
.nav__zone--act{justify-content:flex-end;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--plum)}
.brand__glyph{width:36px;height:36px;flex:0 0 auto}
/* Size the mark by ELEMENT as well as by class. brand_marks.py rewrites the
   <svg> inside .brand and does not carry class="brand__glyph" onto the
   replacement, so a rule keyed only to that class stops applying the moment the
   tool runs and the glyph renders at its intrinsic size -- a masthead two
   different heights on one site (pitfall 16). */
.brand>svg{width:36px;height:36px;flex:0 0 auto}
.bw{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.bw b{font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.01em}
.bw b em{font-style:normal;color:var(--teal-d)}
.bw small{font-size:.75rem;font-weight:500;color:var(--ink-3)}
.nav__price{text-align:right;line-height:1.2}
.nav__price b{display:block;font-family:var(--display);font-size:1.18rem;font-weight:700;color:var(--plum)}
.nav__price span{font-size:.78125rem;font-weight:500;color:var(--ink-3)}
.nav__buy{min-height:44px;padding:10px 20px;font-size:.94rem}
.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(--plum);margin:0 0 5px}
.burger span:last-child{margin:0}
.menu{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px 20px;
  list-style:none;margin:0;padding:0;align-items:center;
}
.menu a{
  display:inline-block;padding:5px 0;font-family:var(--display);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;
}
.menu a:hover{color:var(--plum)}
.menu a[aria-current="page"]{color:var(--plum);border-bottom-color:var(--teal)}
.menu__more{display:none}

/* ---- hero: copy LEFT, bottle RIGHT on the open plum-greige ground */
.hero{position:relative;background:var(--paper);padding:52px 0 58px;overflow-x:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.hero__copy{display:flex;flex-direction:column;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);
  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:500;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);padding:6px 14px;border-radius:999px;
}
.factpills li b{color:var(--plum);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);padding:13px 15px;border-radius:var(--radius);min-width:0}
.figures b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:700;color:var(--plum);line-height:1.12}
.figures span{display:block;font-size:.8125rem;font-weight:500;color:var(--ink-3);margin-top:3px}
.hero__media{position:relative;align-self:center}
.hero__card{position:relative;z-index:2;text-align:center;padding:10px}
.hero__card img{width:100%;max-width:440px;height:auto;margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(42,34,38,.26))}
.hero__cap{margin:14px 0 0;font-size:.8125rem;font-weight:500;color:var(--ink-3);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:500;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 10px;background:var(--panel);border-bottom:1px solid var(--line)}
.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)}

/* ---- topline strip: the five facts a buyer wants before reading anything.
   Role, lot, dose and count, guarantee, order phone -- above the navigation, so
   the NAV does not have to carry them (hero.md). 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. */
.util{background:var(--plum-d);color:#cbb8c6;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:3px;height:3px;border-radius:50%;
  background:#7d5f74;flex:0 0 auto;margin-right:11px}
.util b{color:#f3e9f0;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 14px}
}

/* ---- hero motif -- tone-still ---------------------------------------- */
.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:radial-gradient(116% 84% at 74% 14%,#c7d9dd,#efe9ec 54%,#efe9ec)}.hero__media::before{content:'';position:absolute;left:50%;top:45%;width:146%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 17px,rgba(15,142,154,0.30) 17px 19px);-webkit-mask:radial-gradient(closest-side,#000 26%,transparent 74%);mask:radial-gradient(closest-side,#000 26%,transparent 74%);animation:qtRing 11s cubic-bezier(.16,.72,.28,1) infinite}.hero__media::after{content:'';position:absolute;left:50%;bottom:34px;width:128%;aspect-ratio:7.2;translate:-50% 0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(15,142,154,0.40) 0 3px,transparent 3px 16px);-webkit-mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);animation:qtStill 11s cubic-bezier(.33,0,.18,1) infinite}@keyframes qtRing{0%{transform:scale(.40);opacity:0}16%{opacity:.58}58%{opacity:.14}100%{transform:scale(1);opacity:0}}@keyframes qtStill{0%,100%{transform:scaleY(1);opacity:.46}54%,86%{transform:scaleY(.09);opacity:.15}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}

/*!CRITICAL-END*/
/* ---- sections */
.sec{padding:62px 0;position:relative}
.sec--tint{background:var(--tint)}
.sec--panel{background:var(--panel)}
.sec--dark{background:var(--plum-d);color:#e6d9e2}
.sec--dark h2,.sec--dark h3{color:#fff}
.sec--dark p,.sec--dark li{color:#d3c1cd}
.sec--dark .eyebrow{color:#7fd6de}
.sec--dark a{color:#8fe0e8}
.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:#d3c1cd}

/* 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:#63d2ac}

/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:1px solid var(--line);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);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:#fff;background:var(--plum);font-size:.9375rem}
tbody tr:nth-child(even){background:#fbf8fa}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--plum)}
.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}
.steps>*{min-width:0}
.step{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px 20px 70px}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;left:20px;top:19px;width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal),var(--teal-d));color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.02rem;border-radius:50%;
}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}

/* ---- cards */
.grid{display:grid;gap:18px}
/* A grid item's default min-width is auto, which floors at MIN-CONTENT: a card
   holding a nowrap chip or a .tablewrap keeps its column at that chip's width
   however narrow the grid gets, and the overflow is CLIPPED by
   body{overflow-x:clip} with nothing to scroll and nothing to report. */
.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(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px 22px}
.card::before{
  content:"";position:absolute;left:22px;top:0;width:34px;height:4px;
  border-radius:0 0 3px 3px;background:var(--teal);
}
.card h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.sec--dark .card{background:#3a2635;border-color:#553c4e}

/* ---- callout, alert, quote, keypoints */
.callout{background:var(--wash);border:1px solid #b9e2e7;border-radius:var(--radius);padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--plum)}
.callout p:last-child{margin:0}
.alert{background:#fdf6ea;border:1px solid #efdcbc;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.28rem;font-weight:600;line-height:1.5;color:var(--plum);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);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}
.keypoints ul{margin:0;padding-left:20px}

/* ---- 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--flip .split__img{order:2}
/* Same floor as .grid above: a .tablewrap holding a 520px-min table keeps its
   column 520px wide however narrow the grid is, and `1fr` (= minmax(auto,1fr))
   reintroduces the min-content floor the desktop minmax(0,1fr) avoids.
   min-width:0 belongs on the items at every width, not only in a query. */
.split__img,.split__body{min-width:0}
.split__img img{width:100%;border:1px solid var(--line);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>*{min-width:0}
.stats div b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:700;color:#fff;line-height:1.1}
.stats div span{display:block;font-size:.9375rem;color:#cbb8c6;margin-top:4px}

/* ---- label versus research */
.versus{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;border:1px solid var(--line);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);font-size:.98rem;min-width:0}
.versus>div:nth-child(3n+1){font-weight:600;background:#fbf7f9}
.versus__h{background:var(--plum)!important;color:#fff;font-family:var(--display);font-weight:700;font-size:.92rem}

/* ---- ingredient cards */
.inglist{display:grid;gap:16px}
/* `.ing__dose` is white-space:nowrap, and one of these chips renders past
   200px, which sets the column floor unless the item can shrink. */
.inglist>*{min-width:0}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);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(--plum);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);border-radius:var(--radius-lg);overflow:hidden;position:relative}
.card--pack::before{display:none}
/* No lift on the featured card. A negative margin raises its box, which 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:var(--tint);border-bottom:1px solid var(--line);padding:14px 20px;display:flex;align-items:center;gap:10px}
.card--pack.featured .pack__head{background:linear-gradient(100deg,var(--plum),var(--plum-2));border-bottom-color:var(--plum)}
.card--pack.featured .pack__head b,.card--pack.featured .pack__head span{color:#fff}
.pack__head b{font-family:var(--display);font-size:1.14rem;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(--display);font-size:.75rem;font-weight:700;letter-spacing:.06em;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.35rem;font-weight:700;color:var(--plum);line-height:1;text-align:center}
.pack__per sup{font-size:1rem;font-weight:600;top:-.7em}
.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}
.pack__tot b{font-weight:700}
.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>*{min-width:0}
.shots.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);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(--plum)}
.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);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:.98rem;margin-bottom:4px;color:var(--plum)}
.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),var(--plum))}
.stars{color:#c8891b;letter-spacing:1px}
.stars i{font-style:normal;opacity:.34}

/* ---- FAQ. Padding on <summary>, which is the click target (pitfall 73). */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);margin:0 0 1.2em}
.faq details{border-bottom:1px solid var(--line)}
.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:600;font-size:1.06rem;color:var(--plum)}
.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 that pushed a single <a> past the viewport on
   eleven pages of another site -- clipped, unscrollable, invisible to every
   static check. `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);border-left:4px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0;padding:22px 24px;margin:0 0 1.2em}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(140deg,var(--plum),var(--plum-2));color:#fff;font-family:var(--display);font-weight:700;font-size:1.06rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px;color:var(--plum)}
.byline p{font-size:.9688rem;color:var(--ink-2);margin:0}

/* ---- closing CTA */
.final{background:var(--panel);border:1px solid var(--line);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:210px}
.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);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.08rem;color:var(--plum);margin-bottom:5px}
.rel span{font-size:.9375rem;color:var(--ink-2)}

/* ---- forms. 16px minimum or iOS Safari zooms on focus (pitfall 86). */
.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);border-radius:var(--radius);padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px;color:var(--plum)}
.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);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}

/* ---- footer: a tinted recap band above a white destination grid.
   The slot calls the band a bonus recap. This pack has no bonuses, so the band
   carries the two things that are real -- the 180-day guarantee and the three
   pack prices -- rather than an invented one. */
.frecap{background:var(--tint);border-top:3px solid var(--teal)}
.frecap__box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center;padding-block:44px}
.frecap__box>*{min-width:0}
.frecap__eye{display:inline-block;font-family:var(--text);font-size:.78125rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal-d);margin-bottom:8px}
.frecap__h{font-family:var(--display);font-size:1.62rem;font-weight:700;line-height:1.22;color:var(--plum);margin:0 0 10px}
.frecap p{color:var(--ink-2)}
.frecap__packs{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 18px;padding:0}
.frecap__packs li{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.9375rem;color:var(--ink-2);white-space:nowrap}
.frecap__packs b{color:var(--plum);font-weight:700}
.frecap__sm{font-size:.9375rem;color:var(--ink-3);margin:12px 0 0}
.frecap__img img{width:280px}
footer{background:var(--panel)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:26px;padding-block:44px 32px}
.fgrid>*{min-width:0}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:700;color:var(--plum);letter-spacing:-.01em;line-height:1}
.fbrand span{color:var(--teal-d)}
.frole{font-size:.9375rem;color:var(--ink-2);margin:8px 0 14px}
.fcard p{font-size:.9375rem;color:var(--ink-2);margin:0 0 .7em}
.fcard b{color:var(--plum)}
.fh{font-family:var(--text);font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.fgrid ul{list-style:none;margin:0 0 20px;padding:0}
.fgrid 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
   (pitfall 82). */
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)}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:20px;border-top:1px solid var(--line)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:0 26px}
.fpay img{width:230px;height:auto}
.fpay span{font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:1px solid var(--line);padding-block:28px 32px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--plum)}
.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:.62em;width:8px;height:3px;
  background:repeating-linear-gradient(90deg,var(--teal) 0 2px,transparent 2px 4px)}
.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(--plum-d);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:#cbb8c6}
.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){
  .fgrid{grid-template-columns:1fr 1fr 1fr;gap:24px}
}
@media (max-width:980px){
  :root{--navh:76px}
  /* The three-zone plate collapses to brand + burger, with the menu zone
     dropping to its own full-width row beneath the hairline it used to sit
     beside. */
  .nav__plate{grid-template-columns:minmax(0,1fr) auto}
  .nav__zone+.nav__zone{border-left:0;padding-inline-start:0}
  .nav__zone--menu{grid-column:1/-1;order:3;padding-block:0}
  .menu{display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;width:100%;padding:0 0 12px;border-top:1px solid var(--line)}
  .menu.open{display:flex}
  .menu__more{display:block}
  .menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .menu a[aria-current="page"]{border-bottom-color:var(--line)}
  .burger{display:block}
  .nav__price,.nav__buy{display:none}
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hero__copy{display:contents}
  .hero .eyebrow{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:6px 0 20px}
  .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}
  .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .frecap__box{grid-template-columns:minmax(0,1fr)}
  .frecap__img{display:none}
  .final--media{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:760px){
  body{font-size:16.5px}
  .sec{padding:46px 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 is pushed to the right of a line with no room for it and overhangs
     the card edge. On a phone it sits at the start of its own line and wraps
     its own text. */
  .ing__dose{margin-left:0;white-space:normal}
  .disc__list{columns:1}
  .figures{grid-template-columns:minmax(0,1fr);gap:8px}
  .fgrid{grid-template-columns:1fr 1fr;gap:22px}
  .buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
  .buybar .btn{width:100%;margin-left:0}
}
@media (max-width:440px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .badgewall{grid-template-columns:minmax(0,1fr)}
}

/* ---- hero: the bottle breathes, the ground holds still ---------------------
   Transform only, NEVER opacity: the bottle is the LCP element and an element
   starting at opacity:0 is not recorded as painted (hero.md). The float goes on
   the CARD, never on the <img>, which is preloaded.

   The bottle stands on the open ground with no plate behind it, so it gets its
   own: a soft teal halo and an elliptical contact shadow, both sized to the
   product rather than to the column. */
.hero__card{isolation:isolate}
.hero__card::before{
  content:"";position:absolute;left:50%;top:46%;translate:-50% -50%;
  width:84%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(18,162,176,.26),transparent 70%);
  z-index:0;pointer-events:none;
}
.hero__card::after{
  content:"";position:absolute;left:50%;bottom:30px;translate:-50% 0;
  width:54%;height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,34,38,.34),transparent 74%);
  filter:blur(5px);z-index:0;pointer-events:none;
}
@media (prefers-reduced-motion:no-preference){
  .hero__card{animation:qtFloat 9s 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's height changes
   between breakpoints, and a hardcoded offset tucks the product under the bar.

   min-height makes the sticky box a full screen tall so the shot can be CENTRED
   inside it. Without it the box is only as tall as the image and `top` merely
   pins it under the header.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against (pitfall 65). */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 104px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 104px) - 28px);
    min-height: calc(100svh - var(--navh, 104px) - 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 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 (pitfall 91). */
.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}