/* mindsaves.com - MindSave, USA Authorized MindSave Retailer desk.
DESIGN SLOT, batch 9 row 343 (_generators/batch9_assignments.py):
Italiana / Khula, warm granite ground with ivory cards, a header whose name
sits in a deep outlined frame with the destinations stacked inside it, and a
footer that lists the pages beneath a very wide restatement of the guarantee.
Hero motif: save-latch. Brand mark: shield + anchor.
There is no LOOKS FOR reference on batch 9, so the slot carries the whole
differentiation budget and it is taken literally. The recurring gesture on
this site is A DRAWN FRAME: the header is one, the product sits in one, every
card is one, the guarantee band is one. Nothing here is shadow-lifted; the
ivory panels are held on the granite by a rule, not by a glow.
WHERE THE COLOUR COMES FROM
The bottle: a near-black cap and shoulder, an off-white label, and one violet
that appears three times -- the brain glyph, the "Save" in the wordmark, and
the band across the foot of the label. Sampled off
assets/mindsave-wide-blue-brand-wordmark.png the violet reads #6847b2, and the
deep indigo in the label band reads #301d48. Those two are --accent and
--accent-d. The ground is NOT taken from the bottle: the label is off-white
and the slot asks for granite, so the page is warm stone with the label's own
ivory used for every card, which is how the product reads as the pale object
on the page rather than as one more pale rectangle among many.
Everything above CRITICAL-END is inlined into every page head, so the first
screen paints without waiting for this file. The topline strip and the hero
motif both live up there on purpose: appended to the end of the sheet they
load async and flash unstyled at the very top of the page.
AFTER EDITING THIS FILE: run
python _generators/restamp_assets.py mindsaves.com
or a returning visitor keeps this stylesheet for a year (pitfall 49), and
rebuild, or the inlined copy in every page goes stale (pitfall 47). */
/* ---- tokens */
:root{
/* ground: warm granite. Darker than the estate's usual creams on purpose --
the ivory cards have to sit ON something for the frame idea to read. */
--paper:#d7d2c9;
--tint:#c9c3b8; /* the deeper granite band between ivory sections */
--panel:#fbf8f2; /* ivory: cards, the product ground, tables */
--panel-2:#f2eee5; /* ivory, one step down, for table heads */
/* The hero's own field, and the ONE token hero_motifs.py reads as the ground
it builds the save-latch gradient from: that tool takes the lightest token
whose NAME matches paper/card/ground/bg/surface, and the granite is too
dark to qualify. Naming it here means the gradient the tool writes starts
and ends on exactly the colour this rule already paints, so the hero does
not change appearance when the motif is applied. */
--surface:#f7f3ea;
/* ink */
--ink:#1c1822;
--ink-2:#433d4e;
/* Measured against all three grounds, not just the paper one: 5.8:1 on the
granite, 4.98:1 on the DEEPER granite band and 8.2:1 on an ivory card. The
first value it carried cleared AA on the paper and landed at 4.52 on the
tint band, which is a pass with no margin left for rounding. Do not
lighten: .note, figcaptions and table captions all use it, and half of
them sit on the band. */
--ink-3:#4f4859;
--line:#b6afa3; /* the hairline on granite */
--line-2:#a49c8e;
--line-ivory:#ded7c8; /* the hairline inside an ivory card */
/* accent: the label violet */
--accent:#6847b2;
--accent-d:#301d48; /* the deep indigo of the label band; frames, bands */
--accent-m:#4b3184; /* the mid step, for links on ivory */
--accent-l:#eae4f5;
--accent-line:#c6b8e0;
--accent-ink:#e7e0f4; /* text on --accent-d. 13.4:1. */
/* the bottle's cap, kept as the secondary ramp */
--slate:#24222a;
--slate-l:#e6e3dc;
/* states */
--good:#1d6042;
/* Deliberately desaturated. brand_marks.py and hero_motifs.py both pick the
MOST SATURATED token in a lightness band as the site's accent, and a bright
amber warning colour beats the label violet on that test -- which would
have drawn the brand mark and the whole hero gradient in a colour that is
nowhere on the bottle (pitfall 64, measured rather than assumed). */
--warn:#6b4f1e;
/* metrics */
--wrap:1160px;
--measure:760px;
--measure-wide:980px;
--guar:1400px; /* the footer guarantee band is wider than the wrap */
--radius:2px;
--radius-card:3px;
--navh:118px;
--pack-img:168px;
--figw:330px;
--shadow:0 1px 0 0 rgba(28,24,34,.10);
--shadow-lg:0 2px 0 0 var(--accent-d);
--serif:"Italiana",Didot,Georgia,"Times New Roman",serif;
--sans:"Khula",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* ---- base */
*,*::before,*::after{box-sizing:border-box}
*{min-width:0}
html,body{margin:0;padding:0}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:132px}
body{
overflow-x:clip;
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:17px;
line-height:1.74;
-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
table{max-width:100%}
a{color:var(--accent-m);text-underline-offset:3px}
a:hover{color:var(--accent-d)}
/* Italiana has ONE weight and a very fine stroke, so it is display type only:
h1 and h2 carry it at size, and h3/h4 stay on Khula at 700 where a hairline
serif would simply go missing. Letter-spacing is opened up because Italiana
sets very tight by default. */
h1,h2{font-family:var(--serif);color:var(--ink);font-weight:400;line-height:1.14;
letter-spacing:.012em;margin:0 0 .42em}
h3,h4{font-family:var(--sans);color:var(--ink);font-weight:700;line-height:1.3;margin:0 0 .5em}
h1{font-size:clamp(2.2rem,1.5rem + 2.5vw,3.35rem)}
h2{font-size:clamp(1.75rem,1.3rem + 1.7vw,2.6rem)}
h3{font-size:1.14rem;letter-spacing:.005em}
h4{font-size:1.02rem}
p,li{font-size:1.0625rem}
p{margin:0 0 1.05em}
/* The gutter comes from a WIDTH constraint, never from padding, so no component
sharing the element can wipe it with a `padding: 12px 0` shorthand -- the
defect in pitfall 46, which is invisible above the container's max-width and
which no overflow test can see. */
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-d);color:#fff;
padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--accent-d);outline-offset:2px}
/* The eyebrow names the JOB of the section under it. Every section has one. */
.eyebrow{
display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.2em;
text-transform:uppercase;color:var(--accent-d);margin:0 0 14px;
padding:3px 0 6px;border-bottom:2px solid var(--accent-d);
}
/* ---- buttons: square blocks with a hard offset edge, no gradient, no pill */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:54px;padding:14px 30px;
font-family:var(--sans);font-size:1rem;font-weight:700;letter-spacing:.04em;
text-transform:uppercase;
border:2px solid var(--accent-d);border-radius:var(--radius);cursor:pointer;
text-decoration:none;background:var(--accent-d);color:#fff;
transition:background .18s ease,border-color .18s ease,transform .12s ease;
}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn--cta{box-shadow:4px 4px 0 0 var(--accent)}
.btn--cta:hover{box-shadow:4px 4px 0 0 var(--accent-d)}
.btn--lg{min-height:62px;padding:16px 38px;font-size:1.02rem}
.btn--ghost{background:transparent;color:var(--accent-d);border-color:var(--accent-d);
box-shadow:none}
.btn--ghost:hover{background:var(--accent-l);color:var(--accent-d);border-color:var(--accent-d)}
.btn--block{width:100%}
/* ---- topline strip: the five trust facts, ABOVE the navigation.
Role, lot, dose and count, guarantee, order phone. It exists so the nav does
not have to carry them: getexitide shipped without one, pushed the lot into
the menu as a chip, crowded the navigation and still left the other four
facts off the page entirely (hero.md). Above CRITICAL-END, or it is the first
thing on the page and it flashes unstyled. */
.util{background:var(--slate);color:#ddd7cc;font-size:.875rem;line-height:1.5}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;padding-block:7px}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item+.util__item::before{
content:"";width:1px;height:13px;background:#6b6472;flex:0 0 auto;margin-right:11px;
}
.util b{color:#fff;font-weight:700}
.util__tel{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap;text-decoration:none;
letter-spacing:.03em}
.util__tel:hover{color:#fff;text-decoration:underline}
/* ---- header: ONE deep outlined frame, the name inside it at the left, the
destinations STACKED in two rows inside the same frame at the right.
That is the design slot and it is taken literally: the frame is a 3px rule in
the label's own indigo, drawn on ivory, sitting on the granite ground.
The menu is a GRID with two fixed rows and auto column flow, not a wrapping
flex row. That matters: a wrapping row changes height as the viewport changes
and the header jumps. Two rows is two rows at every width above the burger
breakpoint, so the frame measures one constant height (~78px) from 1180 up. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);padding-block:10px}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
flex-wrap:nowrap;background:var(--panel);border:3px solid var(--accent-d);
border-radius:var(--radius);padding:9px 10px 9px 16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
.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(--serif);font-size:1.5rem;font-weight:400;letter-spacing:.02em}
.bw b em{font-style:normal;color:var(--accent)}
.bw small{font-size:0.9062rem;font-weight:600;color:var(--ink-3);letter-spacing:.09em;
text-transform:uppercase}
.nav__right{display:flex;align-items:center;gap:18px;min-width:0}
.menu{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;
gap:0 20px;list-style:none;margin:0;padding:0;justify-items:start}
.menu a{display:inline-block;padding:2px 0;font-size:.9375rem;font-weight:600;
color:var(--ink-2);text-decoration:none;white-space:nowrap;
border-bottom:2px solid transparent}
.menu a:hover{color:var(--accent-d)}
.menu a[aria-current="page"]{color:var(--accent-d);border-bottom-color:var(--accent)}
.nav__buy{flex:none;min-height:56px;padding:10px 20px;font-size:.875rem;white-space:nowrap;
box-shadow:none}
.burger{display:none;width:48px;height:46px;background:transparent;
border:2px solid var(--accent-d);border-radius:var(--radius);cursor:pointer;padding:11px 10px}
.burger span{display:block;height:2px;background:var(--accent-d);margin:0 0 5px}
.burger span:last-child{margin:0}
/* ---- the hero ------------------------------------------------------------
TWO COLUMNS, PRODUCT ON THE LEFT. The estate's default arrangement is copy
left and the bottle right inside a white card, and design-system.md names
that skeleton as the thing five sites once shared. Here the bottle stands in
a drawn ivory frame on the LEFT, the reading matter is on the right, and the
save-latch brackets close in on the frame from both sides.
The H1 sits at the top of the right column. Measured at 1440x900 its top
lands around y=178, well inside the fold -- the rule hero.md is most
insistent about, and the one a centred stacked hero broke at y=796.
The ![]()
is never animated: it is the LCP element and it is preloaded. The
movement is the two brackets (hero_motifs.py, pseudo-elements of
.hero__media) plus one slow lift on .hero__card at the end of this file. */
.hero{position:relative;padding:44px 0 56px;background:var(--surface)}
.hero__grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
gap:10px 52px;align-items:start}
/* EXPLICIT PLACEMENT, not auto-flow. Auto-placement puts the media in row 1
column 1 and the eyebrow in row 1 column 2, and then drops the H1 into row 2
COLUMN 1, underneath the bottle. A two-column hero whose left column spans
three rows has to name every cell. */
.hero__media{position:relative;grid-column:1;grid-row:1 / 4;align-self:start;
display:flex;align-items:center;justify-content:center;padding:6px 0 10px}
.hero__stick{position:relative;width:100%;display:flex;flex-direction:column;
align-items:center}
/* The drawn frame the bottle stands in. It is only 74% of the media column, so
the latch brackets -- 22% wide, pinned to the media column's two edges -- are
visible outside it and overlap it by a few percent, which is what makes them
read as closing ON the bottle rather than floating beside it (design-system
rule 6: a shape sized INSIDE the card renders nothing). */
.hero__card{
position:relative;z-index:2;width:min(360px,76%);
background:linear-gradient(170deg,var(--panel),var(--slate-l));
border:3px solid var(--accent-d);border-radius:var(--radius);
padding:26px 18px 0;display:flex;align-items:flex-end;justify-content:center;
}
/* Two selectors deep on purpose. hero_motifs.py writes
`.hero__card img{position:relative;z-index:3}` into the critical block on
every run, and that block is inserted AFTER these rules -- a single-class
selector here would lose the cascade to it. */
.hero .hero__card img{width:84%;height:auto;margin-bottom:-14px;z-index:3;position:relative}
.hero__tag{
position:relative;z-index:4;margin:14px 0 0;background:var(--accent-d);color:#fff;
border-radius:var(--radius);padding:7px 14px;font-size:.9375rem;font-weight:600;
letter-spacing:.04em;
}
.hero__tag b{color:#fff;font-weight:700}
/* the right column: everything a reader reads */
.hero__copy{grid-column:2;grid-row:3;display:flex;flex-direction:column;align-items:flex-start}
.hero .eyebrow{grid-column:2;grid-row:1;margin-bottom:10px}
.hero h1{grid-column:2;grid-row:2;margin:0 0 18px;max-width:17ch}
.h1__key{display:block;font-family:var(--sans);color:var(--accent-d);font-size:.3em;
font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1.1em}
.answer{
background:var(--panel);border:2px solid var(--accent-d);border-radius:var(--radius);
padding:20px 22px;margin:0 0 18px;width:100%;
}
.answer .qtag{
display:inline-block;font-size:0.8438rem;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--accent-d);margin-bottom:8px;
}
.answer p{margin:0;font-size:1.0625rem}
.hero__road{font-size:1rem;color:var(--ink-2);margin:0 0 16px}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding-left:28px;margin:0 0 .52em;font-size:1rem}
.ticks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--good);font-weight:700}
.trust__row{display:flex;flex-wrap:wrap;gap:8px 20px;margin-block:0 18px;padding:0;list-style:none;
font-size:1rem;font-weight:600;color:var(--ink-2)}
.trust__row li{display:inline-flex;align-items:center;gap:8px}
.trust__row li::before{content:"";width:9px;height:9px;flex:0 0 auto;background:var(--accent);
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 16px}
/* --ink-2, not --ink-3: the payment line sits on the bare motif gradient rather
than on an ivory card, and hero copy is measured against every stop of that
gradient, not against the token's usual ground (responsive.md proof 4). */
.pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 6px;
font-size:.9375rem;color:var(--ink-2)}
.pay img{width:180px;height:25px}
/* the three fact blocks at the foot of the hero. Stripped from twenty-six
heroes on 17 Sep 2026 by a pass asked to change the CONTENT, and restored the
next day -- pitfall 76. They stay. They span both columns, under the bottle
frame and the copy, which is also what stops the left column looking short. */
.hero__sub{
grid-column:1 / -1;grid-row:4;display:flex;flex-wrap:wrap;gap:8px 26px;margin:26px 0 0;
padding-top:20px;border-top:2px solid var(--line-2);
font-size:1rem;font-weight:600;color:var(--ink-2);
}
.hero__sub span{display:inline-flex;align-items:center;gap:9px}
.hero__sub span::before{content:"";width:8px;height:8px;background:var(--accent-d);flex:0 0 auto}
.factpills{grid-column:1 / -1;grid-row:5;display:flex;flex-wrap:wrap;gap:10px;
list-style:none;margin:16px 0 0;padding:0}
.factpills li{font-size:.9375rem;font-weight:600;color:var(--ink-2);
background:var(--panel);border:1px solid var(--line-2);padding:7px 15px;
border-radius:var(--radius)}
.factpills li b{color:var(--ink);font-weight:700}
.figures{grid-column:1 / -1;grid-row:6;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;margin:18px 0 0}
.figures div{background:var(--accent-d);color:#fff;border-radius:var(--radius);
padding:16px 18px}
.figures b{display:block;font-family:var(--serif);font-size:2.2rem;font-weight:400;
color:#fff;line-height:1}
.figures span{display:block;font-size:.9062rem;font-weight:600;color:var(--accent-ink);
margin-top:6px}
/* ---- inner page head */
.crumbs{font-size:.9375rem;color:var(--ink-3);margin:22px 0 14px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent-d)}
.lead{font-size:1.14rem;color:var(--ink-2);max-width:var(--measure)}
/* ---- hero motif -- save-latch ---------------------------------------- */
.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(186deg,#f7f3ea,#ddd4e0 60%,#f7f3ea)}.hero__media::before,.hero__media::after{content:'';position:absolute;top:22%;height:56%;width:22%;z-index:1;pointer-events:none;border:2px solid rgba(104,71,178,0.50);animation:msLatch 10s cubic-bezier(.4,1.25,.5,1) infinite}.hero__media::before{left:-2%;border-right:0;border-radius:10px 0 0 10px}.hero__media::after{right:-2%;border-left:0;border-radius:0 10px 10px 0;animation-delay:.25s}@keyframes msLatch{0%{transform:translateX(-16%);opacity:.12}40%,72%{transform:translateX(0);opacity:.68}100%{transform:translateX(-16%);opacity:.12}}
@media(prefers-reduced-motion:reduce){.hero__card{animation:none!important}.hero__media::before,.hero__media::after{animation:none!important;opacity:0!important}}
/* --- hero responsive rules, copied into the critical block
A phone painted the desktop hero from the inline block and then
jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
These are COPIES: the originals stay below, so the cascade is
unchanged and the first paint is already correct. */
@media (max-width:1060px){
.hero__grid{gap:10px 34px}
.hero h1{max-width:20ch}
}
@media (max-width:900px){
/* The stacked hero on a phone, ordered by hand. The copy column is promoted with display:contents so its children become grid items -- and every sibling it exposes gets an explicit order, or an unordered one defaults to 0 and jumps above the eyebrow (hero.md). The shot goes directly after the H1: a buyer arriving from an ad wants to see the bottle before the 60-word answer, not after it. */ .hero__grid{grid-template-columns:1fr;gap:0}
.hero__copy{display:contents}
.hero .eyebrow{order:1;grid-column:auto;grid-row:auto}
.hero h1{order:2;grid-column:auto;grid-row:auto;max-width:100%}
.hero__media{order:3;grid-column:auto;grid-row:auto;margin:6px 0 20px}
.hero .answer{order:4}
.hero__cta{order:5}
.hero__road{order:6}
.hero__sub{order:8;grid-column:auto;grid-row:auto}
.hero .ticks{order:9}
.hero .trust__row{order:10}
.hero .pay{order:11}
}
@media (max-width:760px){
/* The stacked hero is a budget, not a layout. hero.md's targets on a 390x844 phone are: H1 above 300, the shot visible by ~600, the Quick Answer above ~850 and the CTA by ~1100. Measured, the first draft put the answer at 994 and the button at 1357, because a 294px-wide frame around a 711x1450 bottle is 540px tall on its own. Everything below buys that back: a tighter top, a smaller headline, and a frame sized to the phone rather than to the column it sits in on a desktop. */ .hero{padding:14px 0 36px}
.hero .eyebrow{margin-bottom:8px}
.hero h1{font-size:1.94rem;margin:0 0 10px}
.hero__media{margin:2px 0 8px}
.hero__card{width:min(206px,58%);padding:18px 14px 0}
.hero__tag{margin-top:10px;padding:6px 12px}
.hero .answer{padding:16px 18px;margin-bottom:10px}
}
@media (min-width: 981px){
.hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
.hero__media{position: relative; top: 0; min-height: 0;}
}
/*!CRITICAL-END*/
/* ---- sections: granite and ivory, separated by a rule rather than a shadow */
.sec{padding:60px 0;position:relative}
.sec--tight{padding:8px 0 10px}
.sec--tint{background:var(--tint);border-block:2px solid var(--line-2)}
.sec--panel{background:var(--panel);border-block:2px solid var(--accent-d)}
.sec--band{background:var(--accent-d);color:var(--accent-ink);border-block:0}
.sec--band h2,.sec--band h3{color:#fff}
.sec--band p,.sec--band li{color:var(--accent-ink)}
.sec--band .eyebrow{color:#cbb9ec;border-bottom-color:rgba(255,255,255,.4)}
.sec--band a{color:#dbcdf5}
.sec--center{text-align:center}
.sec__head{max-width:var(--measure);margin:0 0 28px}
.sec__head h2{margin:0 0 12px}
.sec__head p,.sec__head .lead{color:var(--ink-2);margin:0}
.sec--center .sec__head{margin-inline:auto}
.sec--center .sec__head .lead{margin-inline:auto}
/* One measure, centred. Single-column content gets --measure; multi-column
components keep the full wrap. Released below 1060px or a tablet gets a fixed
760px box in a 700px viewport (responsive.md). */
@media (min-width:1060px){
.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,.sec>.wrap>p,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.pullquote,
.sec>.wrap>.keypoints,.sec>.wrap>blockquote{max-width:var(--measure);margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{
max-width:var(--measure-wide);margin-inline:auto}
}
/* ---- tables */
.tablewrap{overflow-x:auto;margin:0 0 1.2em;border:2px solid var(--accent-d);
border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:1rem}
caption{text-align:left;padding:15px 18px 2px;font-size:.9375rem;color:var(--ink-3)}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-ivory);
vertical-align:top}
th{font-family:var(--sans);font-weight:700;color:var(--ink);background:var(--panel-2);
font-size:.95rem}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--ink)}
.dtable{min-width:520px}
.note{font-size:.9375rem;color:var(--ink-3)}
/* ---- lists that carry content */
.chips{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0 0 1.2em;padding:0}
.chips li{display:inline-flex;align-items:flex-start;gap:9px;font-size:1rem;color:var(--ink-2)}
.chips .ck{color:var(--good);font-weight:700}
/* ---- numbered steps */
.steps{display:grid;gap:16px;margin:0 0 1.2em;counter-reset:s}
.step{position:relative;background:var(--panel);border:2px solid var(--accent-d);
border-radius:var(--radius);padding:22px 24px 22px 74px}
.step__n{position:absolute;left:0;top:0;width:52px;height:100%;display:grid;
place-items:center;background:var(--accent-d);color:#fff;font-family:var(--serif);
font-weight:400;font-size:1.5rem}
.step__n::before{counter-increment:s;content:counter(s)}
.step h3{margin:0 0 6px}
.step p:last-child{margin:0}
/* ---- cards: drawn frames on ivory, with an indigo cap rule */
.grid{display:grid;gap:20px}
.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))}
.grid>*{min-width:0}
.card,.whycard{position:relative;background:var(--panel);border:2px solid var(--accent-d);
border-top-width:8px;border-radius:var(--radius);padding:22px 24px}
.card h3,.whycard h3{margin:0 0 8px}
.card p:last-child,.card ul:last-child,.whycard p:last-child{margin-bottom:0}
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whygrid>*{min-width:0}
/* ---- callout, alert, quote, keypoints */
.callout{background:var(--accent-l);border:2px solid var(--accent-line);
border-left:6px solid var(--accent);border-radius:var(--radius);
padding:20px 22px;margin:0 0 1.2em}
.callout b:first-child{display:block;margin-bottom:6px;color:var(--accent-d)}
.callout p:last-child{margin:0}
.alert{background:#f7efdd;border:2px solid #dcc79b;border-left:6px solid var(--warn);
border-radius:var(--radius);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(--serif);font-size:1.55rem;line-height:1.36;color:var(--ink);
border-left:6px solid var(--accent-d);padding:6px 0 6px 24px;margin:0 0 1.2em}
.pullquote cite{display:block;font-family:var(--sans);font-size:.9375rem;font-style:normal;
font-weight:600;color:var(--ink-3);margin-top:12px}
.keypoints{background:var(--panel);border:2px solid var(--accent-d);
border-left-width:8px;border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em}
.keypoints>b{display:block;margin-bottom:10px;font-size:1.06rem}
.keypoints ul{margin:0;padding-left:20px}
.keypoints li{margin:0 0 .5em}
.flag{display:inline-block;font-size:0.8438rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;color:#fff;background:var(--accent-d);padding:4px 12px;
border-radius:var(--radius);margin-bottom:9px}
.pill{display:inline-block;font-size:.85rem;font-weight:700;color:var(--accent-d);
background:var(--accent-l);border-radius:var(--radius);padding:4px 12px}
/* ---- image beside copy */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;
align-items:center;margin:0 0 1.2em}
.split>*,.split__media{min-width:0}
.split--rev .split__media{order:-1}
.split__media img{width:100%;border:3px solid var(--accent-d);border-radius:var(--radius);
background:var(--panel)}
.split p:last-child{margin:0}
/* ---- captioned images. There is no bare image grid in this system: .gallery
is retired and every .shots figure carries a heading and 30-45 words. */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 0 1.2em}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots>*{min-width:0}
.shots figure{margin:0;background:var(--panel);border:2px solid var(--accent-d);
border-radius:var(--radius);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:16px 18px;font-size:.9375rem;border-top:2px solid var(--accent-d)}
.shots figcaption b{display:block;margin-bottom:5px;font-size:1.0625rem;color:var(--ink)}
.shots figcaption span,.shots figcaption p{color:var(--ink-2)}
figure.portrait img{width:var(--figw,330px);margin-inline:auto}
/* ---- seal wall. auto-fit rather than a fixed four: at 768 a fixed four gave
169px a card and the captions wrapped to one word a line (responsive.md
proof 2). The 240px floor resolves to 4 at 1440, 2 at 768 and 1 on a phone. */
.badgewall{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;margin:0 0 1.2em}
.badgewall>*{min-width:0}
.badgewall figure{margin:0;text-align:center;background:var(--panel);
border:2px solid var(--accent-d);border-radius:var(--radius);padding:20px 18px}
.badgewall img{width:72px;height:72px;object-fit:contain;margin:0 auto 12px}
.badgewall b{display:block;font-size:1rem;margin-bottom:5px}
.badgewall span{font-size:.9375rem;color:var(--ink-2)}
/* ---- the trust strip band under the hero */
.trust{background:var(--panel);border-block:2px solid var(--accent-d)}
.trust .trust__row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 32px;
padding-block:22px;margin-block:0}
.trust figure{margin:0;display:flex;align-items:center;gap:11px;font-size:.9375rem;
font-weight:600}
.trust figure img{width:56px;height:56px;object-fit:contain}
.trust__note{flex:1 1 280px;font-size:.9375rem;color:var(--ink-3);margin:0}
/* ---- star distribution */
.meter{margin:0 0 1.2em}
.meter__row{display:grid;grid-template-columns:74px 1fr 54px;gap:12px;align-items:center;
margin:0 0 9px;font-size:.9375rem}
.meter__bar{height:12px;background:var(--line);border-radius:var(--radius);overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--accent-d)}
.stars{color:var(--accent);letter-spacing:1px}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
.stats div b{display:block;font-family:var(--serif);font-size:2.3rem;font-weight:400;
line-height:1.05}
.stats div span{display:block;font-size:.9375rem;margin-top:4px}
/* ---- who it is for */
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:0 0 1.2em}
.whofor>*{min-width:0}
.forlist{background:var(--panel);border:2px solid var(--accent-d);border-top-width:8px;
border-top-color:var(--good);border-radius:var(--radius);padding:22px 24px}
.forlist--no{border-top-color:var(--accent)}
.forlist ul{list-style:none;margin:0;padding:0}
.forlist li{position:relative;padding-left:26px;margin:0 0 .6em;font-size:1.062rem}
.forlist li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
.forlist--no li::before{content:"\2715";color:var(--accent)}
/* ---- add-to-cart panel: ONE component, used by the home page and pricing */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
align-items:stretch;margin:0 0 22px}
.buy>*{min-width:0}
/* Every card carries the 3px border and only the featured one colours it in:
box-sizing is border-box, so a border on one card alone steals 3px from its
content box and drops its button out of line with the other two
(responsive.md proof 3). */
.buy__card{display:flex;flex-direction:column;background:var(--panel);
border:3px solid var(--line-2);border-radius:var(--radius);overflow:hidden;position:relative}
.buy__card--feature{border-color:var(--accent-d);box-shadow:var(--shadow-lg)}
.buy__head{background:var(--panel-2);border-bottom:3px solid var(--line-2);padding:15px 20px}
.buy__card--feature .buy__head{background:var(--accent-d);border-bottom-color:var(--accent-d)}
.buy__card--feature .buy__head .buy__name,
.buy__card--feature .buy__head .buy__supply{color:#fff}
.buy__card--feature .buy__flag{background:#fff;color:var(--accent-d)}
.buy__flag{display:inline-block;font-size:0.8438rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;background:var(--accent-l);color:var(--accent-d);
padding:3px 10px;border-radius:var(--radius);margin-bottom:8px}
.buy__name{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:0 0 2px}
.buy__supply{font-size:.9375rem;font-weight:600;color:var(--ink-3);margin:0;min-height:24px}
.buy__body{display:flex;flex-direction:column;flex:1;padding:22px 22px 24px}
.buy__img{width:auto;max-width:100%;height:var(--pack-img,168px);object-fit:contain;
margin-inline:auto;margin-bottom:16px}
.buy__price{font-family:var(--serif);font-size:2.9rem;font-weight:400;line-height:1;
text-align:center;margin:0}
.buy__cur{font-size:1.1rem;vertical-align:.7em}
.buy__per{display:block;font-family:var(--sans);font-size:.9062rem;font-weight:700;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.buy__total{text-align:center;font-size:1rem;margin:14px 0 16px}
.buy__total s{color:var(--ink-3);font-weight:600;margin-left:8px}
.buy__perks{list-style:none;margin:0 0 18px;padding:0;font-size:.9375rem}
.buy__perks li{position:relative;padding-left:24px;margin:0 0 7px;color:var(--ink-2)}
.buy__perks li::before{content:"\2713";position:absolute;left:0;color:var(--good);font-weight:700}
/* The "why this pack" note sits ABOVE the button, and the button is followed
only by the payment strip, which is the same height on all three cards. With
the note underneath instead, three blurb lengths produced three different
button tops inside three cards of identical height -- responsive.md proof 3.
margin-top:auto then pushes every button to one baseline. Reason, then
action, is the better reading order anyway. */
.buy__why{font-size:.9375rem;color:var(--ink-3);margin:12px 0 18px}
.buy__add{margin-top:auto;min-height:56px}
.buy__cart{flex:0 0 auto}
/* Two selectors deep, deliberately. pack_cards.py appends
`.card--pack img{height:var(--pack-img,168px);object-fit:contain}` to the END
of this sheet, and that rule would otherwise win over a single-class selector
and blow the 180x25 payment strip up to the height of the bottle slot. The
image slot itself is already the same 168px, so the tool and this file agree
about the one thing they both set. */
.buy__card .buy__pay{width:180px;height:25px;object-fit:contain;margin:14px auto 0}
.buy__foot{margin:0}
/* ---- FAQ. The padding lives on , the click target: on the
row measures ~30px against the 44px minimum (pitfall 73). */
.faq{border:2px solid var(--accent-d);border-radius:var(--radius);overflow:hidden;
background:var(--panel);margin:0 0 1.2em;text-align:left}
.faq details{border-bottom:1px solid var(--line-ivory)}
.faq details:last-child{border-bottom:0}
.faq summary{padding:18px 50px 18px 22px;cursor:pointer;position:relative;list-style:none;
font-family:var(--sans);font-weight:700;font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;
font-family:var(--sans);font-size:1.5rem;font-weight:400;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq__b{padding:0 22px 20px}
.faq__b p:last-child,.faq__b ul:last-child{margin-bottom:0}
/* ---- the editorial score card */
.facts{background:var(--panel);border:2px solid var(--accent-d);border-radius:var(--radius);
overflow:hidden;margin:0 0 1.2em}
.facts__h{background:var(--accent-d);color:#fff;font-family:var(--serif);font-weight:400;
font-size:1.4rem;padding:12px 20px}
.facttab{min-width:0}
.facttab th{background:transparent;font-weight:600;color:var(--ink-2)}
/* ---- references and byline */
.refs{margin:0 0 1.2em}
.refs ol{padding-left:22px;margin:0}
.refs li{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
/* A printed URL is one unbreakable token, and at 390px it pushed a single
past the viewport on eleven pages of another site -- clipped, unscrollable and
invisible to every static check. `anywhere` also lowers the element's
min-content, which is what stops an ancestor being sized by the longest URL. */
.refs li,.refs li a{overflow-wrap:anywhere}
.byline{display:flex;gap:20px;background:var(--panel);border:2px solid var(--accent-d);
border-left-width:8px;border-radius:var(--radius);padding:22px 24px;margin:0 0 1.2em;
text-align:left}
.byline__mark{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;
background:var(--accent-d);color:#fff;font-family:var(--serif);font-weight:400;
font-size:1.4rem;border-radius:var(--radius)}
.byline b{display:block;margin-bottom:6px}
.byline p{font-size:.9375rem;color:var(--ink-2);margin:0}
.meta{font-size:.9375rem;color:var(--ink-3)}
/* ---- closing CTA */
.final{background:var(--panel);border:3px solid var(--accent-d);border-radius:var(--radius);
padding:32px 34px;text-align:left}
.final--media{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.final__img img{width:280px}
.final h2{margin:0 0 12px}
.final__price{font-weight:700;color:var(--ink-2)}
.final__sm{font-size:.9375rem;color:var(--ink-3);margin:14px 0 0}
/* ---- related */
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;text-align:left}
.rel>*{min-width:0}
.rel a{display:block;background:var(--panel);border:2px solid var(--accent-d);
border-radius:var(--radius);padding:22px 24px;text-decoration:none;color:var(--ink);
transition:background .18s ease}
.rel a:hover{background:var(--accent-l)}
.rel b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:400;
margin-bottom:6px}
.rel span{font-size:.9375rem;color:var(--ink-2)}
/* ---- forms. 16px minimum on inputs, or iOS Safari zooms on focus and never
zooms back (pitfall 86). */
.form{display:grid;gap:16px;max-width:var(--measure)}
.formcard{background:var(--panel);border:2px solid var(--accent-d);border-radius:var(--radius);
padding:24px 26px;margin:0 0 1.2em}
.field label{display:block;font-weight:700;font-size:.9688rem;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;
padding:13px 14px;border:2px 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:.9375rem;color:var(--ink-3);margin-top:5px}
/* ---- blog */
.article{max-width:var(--measure);margin-inline:auto}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9375rem;color:var(--ink-3);
border-block:2px solid var(--line-2);padding-block:12px;margin:0 0 22px}
.toc{background:var(--panel);border:2px solid var(--accent-d);border-radius:var(--radius);
padding:20px 24px;margin:0 0 28px}
.toc b{display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:0 0 5px;font-size:1.062rem}
.article h2{scroll-margin-top:140px}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.posts>*{min-width:0}
.posts article{background:var(--panel);border:2px solid var(--accent-d);
border-radius:var(--radius);overflow:hidden}
.posts article img{width:100%}
.posts .posts__b{padding:20px 22px}
.posts h3{margin:0 0 8px;font-size:1.1rem}
.posts p{font-size:1.062rem;color:var(--ink-2);margin:0 0 .6em}
.article .final--media{grid-template-columns:1fr;gap:18px}
.article .final__img img{width:220px}
/* ---- footer ---------------------------------------------------------------
The design slot: the pages listed BENEATH A VERY WIDE RESTATEMENT OF THE
GUARANTEE. So the guarantee comes first, set in Italiana at --guar (1400px,
deliberately wider than the 1160px wrap the rest of the site lives in), and
everything else -- the four page columns, the contact cards, the seals, the
legal slab -- sits under it. */
.fguar{background:var(--accent-d);color:var(--accent-ink);padding-block:44px 40px}
.fguar__in{width:min(var(--guar),calc(100% - 40px));margin-inline:auto}
.fguar__k{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.22em;
text-transform:uppercase;color:#cbb9ec;margin-bottom:18px}
/* 44ch, not 34. The slot asks for a VERY WIDE restatement of the guarantee and
the band is 1400px, but a 34ch measure filled only the left two thirds of it
and the rest read as dead space rather than as width. At the clamp's top size
44ch fills the band and still breaks into five readable lines. */
.fguar blockquote{font-family:var(--serif);font-size:clamp(1.5rem,1rem + 1.9vw,2.6rem);
line-height:1.26;color:#fff;margin:0 0 18px;max-width:44ch}
.fguar__by{font-size:.9688rem;color:var(--accent-ink);margin:0}
.fguar__by a{color:#fff;font-weight:600}
footer{background:var(--panel);border-top:2px solid var(--accent-d)}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding-block:36px}
.fgrid>*{min-width:0}
.fgrid>div{padding-inline:26px;border-left:1px solid var(--line-ivory)}
.fgrid>div:first-child{padding-left:0;border-left:0}
.fgrid>div:last-child{padding-right:0}
.fh{font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--accent-d);margin:0 0 12px;font-family:var(--sans)}
.fgrid ul{list-style:none;margin:0 0 24px;padding:0}
.fgrid li{margin:0}
/* inline-block, not block: the box still shrink-wraps to the text so the hover
underline stays the width of the words, and the negative margin gives the row
its height back, so the footer is unchanged to the pixel (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(--accent-d)}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
padding-block:28px;border-top:2px solid var(--line-ivory)}
.fdesk__grid>*{min-width:0}
.fdesk__k{display:block;font-size:.8125rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--accent-d);margin-bottom:8px}
.fdesk__card b{display:block;font-size:1.06rem;color:var(--ink);margin-bottom:8px}
.fdesk__card p{font-size:1.062rem;color:var(--ink-2);margin:0}
.fseals{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-block:22px;
border-top:1px solid var(--line-ivory)}
.fseals img{width:44px;height:44px;object-fit:contain}
.fseals span{flex:1 1 260px;font-size:.9375rem;color:var(--ink-3)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-bottom:28px}
.fpay img{width:212px;height:30px}
.fpay span{flex:1 1 260px;font-size:.9375rem;color:var(--ink-3)}
.disc{background:var(--tint);border-top:2px solid var(--line-2);padding-block:32px 36px}
.disc p,.disc li{font-size:.9375rem;color:var(--ink-2)}
.disc b{color:var(--ink)}
.copy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:.9375rem;
color:var(--ink-3)}
.legal p,.legal li{font-size:1.0625rem}
/* ---- sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--accent-d);
color:#fff;transform:translateY(105%);transition:transform .25s ease;
border-top:3px solid var(--accent)}
.buybar.show{transform:none}
.buybar__in{display:flex;align-items:center;gap:18px;width:min(var(--wrap),calc(100% - 40px));
margin-inline:auto;padding-block:12px}
.buybar__t{font-size:.9375rem;min-width:0}
.buybar__t b{display:block;font-size:1rem}
.buybar__t span{color:var(--accent-ink)}
.buybar .btn{margin-left:auto;flex:0 0 auto;background:#fff;color:var(--accent-d);
border-color:#fff;box-shadow:none}
.buybar .btn:hover{background:var(--accent-l);color:var(--accent-d);border-color:var(--accent-l)}
/* ---- reveal */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
[data-reveal]{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
}
/* ---- responsive.
The nav row SHEDS rather than wraps: the menu tightens, the CTA goes, then
the whole menu collapses into the burger. The two-row menu grid keeps a
constant height at every width above 980, so the frame never jumps. */
@media (max-width:1180px){
.menu{gap:0 16px}
.menu a{font-size:.9rem}
.fgrid>div{padding-inline:20px}
}
@media (max-width:1120px){
/* The topline sheds before it wraps, exactly as the nav row does. Five items
need about 1,150px; below that the dose goes first -- it is in the hero's
own fact pills and on how-to-use.html -- and the lot follows at 760. */
.util__item--trim2{display:none}
}
@media (max-width:1060px){
.hero__grid{gap:10px 34px}
.hero h1{max-width:20ch}
}
@media (max-width:980px){
.nav__buy{display:none}
}
@media (max-width:900px){
:root{--navh:96px}
.burger{display:block}
.menu{display:none;position:absolute;left:0;right:0;top:100%;grid-auto-flow:row;
grid-template-rows:none;gap:0;background:var(--panel);
border:3px solid var(--accent-d);padding:6px 20px 14px;margin-top:10px;z-index:120}
.menu.open{display:grid}
.menu a{padding:12px 0;border-bottom:1px solid var(--line-ivory);width:100%}
.menu a[aria-current="page"]{border-bottom-color:var(--line-ivory)}
.nav__row{position:relative}
.nav__right{gap:12px}
/* The stacked hero on a phone, ordered by hand. The copy column is promoted
with display:contents so its children become grid items -- and every
sibling it exposes gets an explicit order, or an unordered one defaults to
0 and jumps above the eyebrow (hero.md). The shot goes directly after the
H1: a buyer arriving from an ad wants to see the bottle before the 60-word
answer, not after it. */
.hero__grid{grid-template-columns:1fr;gap:0}
.hero__copy{display:contents}
/* display:contents promotes the copy column's children into .hero__grid and
they bring their grid-column values with them, which would open implicit
columns the single-column template cannot place. Reset first, then order. */
.hero .hero__copy>*{grid-column:auto;grid-row:auto}
.hero .eyebrow{order:1;grid-column:auto;grid-row:auto}
.hero h1{order:2;grid-column:auto;grid-row:auto;max-width:100%}
.hero__media{order:3;grid-column:auto;grid-row:auto;margin:6px 0 20px}
.hero .answer{order:4}
.hero__cta{order:5}
.hero__road{order:6}
.hero__sub{order:8;grid-column:auto;grid-row:auto}
.hero .ticks{order:9}
.hero .trust__row{order:10}
.hero .pay{order:11}
.factpills{order:12;grid-column:auto;grid-row:auto}
.figures{order:13;grid-column:auto;grid-row:auto}
.whygrid,.grid.g3,.grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.fgrid>div{padding-inline:0;border-left:0}
.fdesk__grid{grid-template-columns:1fr;gap:22px}
.final--media{grid-template-columns:1fr;gap:22px}
.final__img img{width:240px}
}
@media (max-width:760px){
/* Five topline items wrap to three lines and eat 103px of an 844px screen.
Keep the role, the guarantee and the order phone; the lot and the dose are
on the pages that need them (hero.md). */
.util__item--trim{display:none}
.util__row{gap:2px 14px}
.util__tel{margin-left:0}
.sec{padding:46px 0}
/* The stacked hero is a budget, not a layout. hero.md's targets on a 390x844
phone are: H1 above 300, the shot visible by ~600, the Quick Answer above
~850 and the CTA by ~1100. Measured, the first draft put the answer at 994
and the button at 1357, because a 294px-wide frame around a 711x1450 bottle
is 540px tall on its own. Everything below buys that back: a tighter top,
a smaller headline, and a frame sized to the phone rather than to the
column it sits in on a desktop. */
.hero{padding:14px 0 36px}
.hero .eyebrow{margin-bottom:8px}
.hero h1{font-size:1.94rem;margin:0 0 10px}
.h1__key{font-size:.34em;margin-bottom:.9em}
.hero__media{margin:2px 0 8px}
.hero__card{width:min(206px,58%);padding:18px 14px 0}
.hero__tag{margin-top:10px;padding:6px 12px}
.hero .answer{padding:16px 18px;margin-bottom:10px}
.figures{grid-template-columns:1fr;gap:12px}
.grid.g2,.grid.g3,.grid.g4,.whygrid{grid-template-columns:1fr}
.buy{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
/* Stacked, the ladder must not lead with the smallest pack. DOM order stays
2, 3, 6; the best-value card comes first on a phone (design-system.md). */
.buy__card:nth-child(1){order:3}
.buy__card:nth-child(2){order:1}
.buy__card:nth-child(3){order:2}
.shots,.shots--wide{grid-template-columns:1fr}
.rel,.posts{grid-template-columns:1fr}
.split,.whofor{grid-template-columns:1fr}
.split--rev .split__media{order:0}
.meter__row{grid-template-columns:62px 1fr 48px}
.buybar__in{flex-wrap:wrap;gap:10px;padding-block:10px}
.buybar .btn{width:100%;margin-left:0}
.final{padding:26px 22px}
.fgrid{grid-template-columns:1fr}
}
@media (max-width:430px){
.stats{grid-template-columns:1fr}
.bw b{font-size:1.3rem}
}
/* ---- the one lift the motif does not own ---------------------------------
hero_motifs.py owns the movement AROUND the bottle -- the two save-latch
brackets closing in and holding. This is the frame itself settling by a few
pixels, slow enough to read as something coming to rest rather than as a
bounce. Transform only, on .hero__card, never on the ![]()
: the image is the
LCP element and it is preloaded, and an element that starts at opacity:0 is
not recorded as painted at all (hero.md). */
@media (prefers-reduced-motion:no-preference){
.hero__card{animation:msSettle 11s ease-in-out infinite}
@keyframes msSettle{0%,100%{transform:translateY(0)}52%{transform:translateY(-7px)}}
}
/* ---- 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: nav heights run 66-99px across
the estate and change when a bar compacts, and a hardcoded offset tucks the
product under the bar on the taller ones.
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, which is what the old house rule did.
Requires .hero NOT to clip on the block axis -- any non-visible overflow on
an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
whose first fix got this wrong. */
@media (min-width: 981px) {
.hero__grid { align-items: start; }
.hero__media {
position: sticky;
top: calc(var(--navh, 88px) + 14px);
align-self: start;
min-height: calc(100vh - var(--navh, 88px) - 28px);
min-height: calc(100svh - var(--navh, 88px) - 28px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
resolve against the nearest positioned ancestor; `static` re-parents them to
a box several times wider -- measured at 1800px against a 523px column --
and the ring lands across the headline. Worse, the same query stops it
animating, so it SITS there: ask for less motion, get the one broken hero.
`relative` lays out identically to `static` and keeps the containing block.
`top:0` is not decoration: the rule above sets a top offset of one nav height
plus 14px, which a relative box would apply for real and push the plate
~110px down the page (pitfall 65). Written WITHOUT naming that custom
property in the usual var() form on purpose -- preflight's undefined-variable
check reads comments too, so a property named here is a property it believes
the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
.hero__media { position: relative; top: 0; min-height: 0; }
}
/* --- pack cards read as one repeated object ----------------------------
A pricing row is three cards that have to share their edges, their image
slot and their button baseline. The vendor product shots are different
shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
blurbs are different lengths, so without these three rules the images
render at three sizes and the three CTAs sit at three heights.
The height lives here and not on the ![]()
attributes on purpose: those
must keep stating each file's true ratio, or fix_img_dims.py rewrites them
and CLS gets worse. Override per site with --pack-img. */
.card--pack{display:flex;flex-direction:column}
.card--pack img{width:auto;max-width:100%;height:var(--pack-img,168px);
object-fit:contain;margin-inline:auto;margin-bottom:14px}
.card--pack>.btn{margin-top:auto}
/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
background fights the band they sit in. Appended: each
rule below is correct in isolation and only their
combination fails, so the originals stay as written. */
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 22px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */
/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(105%)}
/* ==== end directional chrome ==== */
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
the guarantee and the contact routes, set as fine print. Running text
and links sit at 16px, column headings at 15px (uppercase and
letter-spaced, so they read larger than the number). Last in the file
on purpose: it outranks the phone breakpoints that shrank them. */
footer li a{font-size:16px}
footer .copy{font-size:16px}
footer .disc li{font-size:16px}
footer .disc p{font-size:16px}
footer .fdesk__k{font-size:16px}
footer .fh{font-size:15px}
footer .fpay span{font-size:16px}
footer .fseals span{font-size:16px}
/* ==== end footer type floor ==== */