/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Syne Fallback";src:local("Arial");font-weight:400;size-adjust:99.52%;ascent-override:92.95%;descent-override:27.63%;line-gap-override:0.00%}
@font-face{font-family:"Syne Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:114.62%;ascent-override:80.70%;descent-override:23.99%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial");font-weight:400;size-adjust:101.70%;ascent-override:98.33%;descent-override:29.79%;line-gap-override:0.00%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.43%;ascent-override:104.79%;descent-override:31.75%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
Femipros - femipros.com
Component system taken from the UI reference at alkatidde.com: blush/tint
alternating section bands, plan cards with a struck "was" price, a numbered
step row, an accordion FAQ, a badge strip and a dark closing band.
Colour is NOT taken from that reference. It is derived from the product
bottle in assets/: the rose label band sampled at #c685a8 and deepened to
#b84a7b for contrast, with the bottle's own silver trim and white cap
giving the cool steel secondary, on a cool porcelain ground with a blue
cast.
Type: Syne (display) + Hanken Grotesk (body).
Chrome for this site: a THREE-TIER masthead stacked down the centre line -
wordmark, then menu, then CTA - continued by a STACKED hero with the bottle
centred on a wide tinted plinth above the copy. Square 4px buttons, flat
cards with a 3px accent top rule, and a footer that is one wrapping inline
row of every page with the brand and the legal block centred beneath it.
Everything sits on one vertical centre axis; that axis is the identity.
femicoredaily.com sells a near-identical product against this same
reference. It holds copy-left/product-right in a rounded card on a warm
blush ground, with a sticky two-row header and a 70/30 footer. Nothing
here may drift toward that arrangement.
========================================================================== */
/* ---- DESIGN TOKENS -------------------------------------------------------- */
:root{
/* ---- ground: cool porcelain with a blue cast ---- */
--paper:#f2f6fc;
--paper-tint:#e7eef8;
--paper-card:#ffffff;
--paper-deep:#d9e4f2;
/* ---- ink ---- */
--ink:#171d28;
--ink-dk:#10141d;
--ink-soft:#2f3947;
--muted:#485366;
--faint:#555f70;
--line:#cfdaea;
--line-soft:#e0e8f4;
/* ---- accent, from the rose label band on the bottle ---- */
--accent:#b84a7b;
--accent-deep:#8a2b56;
--accent-dark:#4e1530;
--accent-tint:#fbeff4;
--accent-wash:#f4dfe8;
--accent-line:#e3c3d3;
--accent-glow:rgba(184,74,123,.18);
/* ---- secondary, from the bottle's silver trim and white cap ---- */
--steel:#4e5a6b;
--steel-deep:#39424f;
--steel-soft:#eef1f5;
--steel-line:#ccd4de;
/* ---- type ---- */
--display:'Syne','Syne Fallback',ui-sans-serif,'Segoe UI',system-ui,sans-serif;
--serif:'Syne','Syne Fallback',ui-sans-serif,'Segoe UI',system-ui,sans-serif;
--sans:'Hanken Grotesk','Hanken Grotesk Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
/* ---- metrics ---- */
--wrap:1128px;
--measure:760px;
--measure-wide:980px;
--r:4px;
--r-s:3px;
--r-l:8px;
--radius:4px;
--shadow:0 10px 28px rgba(26,31,39,.08);
--shadow-sm:0 2px 10px rgba(26,31,39,.05);
--shadow-lg:0 22px 50px rgba(26,31,39,.14);
}
/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:104px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
line-height:1.7;-webkit-font-smoothing:antialiased;font-size:1.06rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--display);color:var(--ink);line-height:1.17;
font-weight:700;letter-spacing:-.018em}
b,strong{color:var(--ink-soft);font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-deep);color:#fff;
padding:10px 16px;z-index:9999}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}
/* ---- 1. UTILITY BAR ------------------------------------------------------ */
.util{background:var(--accent-dark);color:rgba(255,255,255,.82);font-size:0.9062rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 22px;
padding-block:7px}
.util__item{white-space:nowrap}
.util__item b{color:#fff;font-weight:700}
.util__tel{margin-left:auto;color:#fff;font-weight:700;white-space:nowrap}
.util__tel:hover{color:var(--accent-wash)}
/* ---- 2. NAV: three tiers stacked down the centre line -------------------- */
/* Wordmark, then menu, then CTA, all centred on one vertical axis, which the
centred bottle on its plinth continues directly below. That axis is this
site's identity and it is what separates it from the sister domain.
Three tiers is tall, so only the MIDDLE one is sticky: the wordmark above
and the CTA below scroll away, leaving a 58px bar rather than a 190px
block once the reader has started moving. */
/* The whole masthead sticks; on scroll it COMPACTS to the menu tier alone.
An earlier version made only .nav__bar sticky, which silently did nothing:
a sticky element is bounded by its containing block, and .nav is only as
tall as its three tiers, so the bar scrolled away with it. Measured, not
assumed -- the bar read top=121 after a 1200px scroll instead of top=0. */
.nav{position:sticky;top:0;z-index:900;background:var(--paper)}
.nav.slim .nav__top,.nav.slim .nav__act{display:none}
.nav__top{display:flex;align-items:center;justify-content:center;
padding-block:18px 14px;background:var(--paper)}
.brand{display:inline-flex;flex-direction:column;align-items:center;gap:0;
text-align:center}
.brand:hover{text-decoration:none}
.brand svg{width:0;height:0;display:none}
.brand__firm{display:block;font-family:var(--sans);font-size:.68rem;font-weight:700;
letter-spacing:.34em;text-transform:uppercase;color:var(--faint);
margin-bottom:2px}
.brand__prod{display:block;font-family:var(--display);font-size:2.05rem;
font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em;
white-space:nowrap}
.brand__prod span{color:var(--accent)}
.nav__tel{font-weight:700;font-size:.9rem;color:var(--steel-deep);
white-space:nowrap;border:1px solid var(--steel-line);padding:8px 15px;
background:#fff;border-radius:var(--r-s)}
.nav__tel:hover{border-color:var(--accent);color:var(--accent-deep);
text-decoration:none}
/* tier 2, the one that survives the compaction */
.nav__bar{background:var(--paper-card);
border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:center;gap:26px;
padding-block:0;flex-wrap:nowrap}
/* tier 3 */
.nav__act{background:var(--paper);border-bottom:1px solid var(--line)}
.nav__actrow{display:flex;align-items:center;justify-content:center;
gap:16px;padding-block:13px;flex-wrap:wrap}
.nav__actrow .btn{padding:11px 26px;font-size:.95rem}
.navmenus{display:contents}
.menu{display:flex;align-items:center;gap:26px;flex-wrap:nowrap}
.menu a{font-family:var(--sans);font-size:.93rem;font-weight:600;
color:var(--ink-soft);white-space:nowrap;position:relative;
padding-block:17px;display:block}
.menu a:hover{color:var(--accent-deep);text-decoration:none}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;
height:3px;background:var(--accent);transition:right .24s ease}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
.burger{display:none;background:none;border:0;cursor:pointer;width:44px;
height:44px;padding:8px;flex:none}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;
transition:transform .2s ease,opacity .2s ease}
/* ---- 3. BUTTONS: square, solid ------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
padding:14px 28px;border-radius:var(--r);border:1px solid transparent;
cursor:pointer;text-align:center;letter-spacing:.005em;
transition:background .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{text-decoration:none}
.btn--cta{background:var(--accent);color:#fff}
.btn--cta:hover{background:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--steel-deep);
border-color:var(--steel-line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--steel);color:#fff}
.btn--gold:hover{background:var(--steel-deep)}
.btn--lg{padding:17px 34px;font-size:1.06rem}
.btn--block{display:flex;width:100%}
/* ---- 4. HERO: stacked - bottle centred on a wide tinted plinth ----------- */
/* The assigned arrangement. The product sits ABOVE the copy, centred, so the
whole column is one axis. Nothing here is a two-column grid: that shape
belongs to the sister domain and the two must not converge. */
.hero{background:var(--paper);padding-block:46px 62px;position:relative;
overflow-x:clip;overflow-y:visible}
.hero__inner{position:relative;z-index:2;text-align:center;
display:flex;flex-direction:column;align-items:center}
.hero .eyebrow{order:1}
.hero__media{order:2;position:relative;width:100%;max-width:820px;
margin-block:14px 22px}
.hero__card{position:relative;padding-bottom:22px}
/* the plinth: a wide, low tinted slab the bottle stands on */
.hero__card::before{content:"";position:absolute;left:50%;translate:-50% 0;
bottom:0;width:min(760px,100%);height:150px;
background:linear-gradient(180deg,var(--accent-wash),var(--paper-tint));
border:1px solid var(--accent-line);border-radius:var(--r-l);z-index:0}
/* The shot is capped against the VIEWPORT HEIGHT, never gated on it. A
media query keyed to min-height silently switches the treatment off for
anyone on a laptop, which is pitfall 15 and has shipped here once already.
Capping lets the bottle scale down instead: measured at 1440x650 the
uncapped shot ran 102px past the fold. */
.hero__card img{position:relative;z-index:3;margin-inline:auto;
width:100%;max-width:min(540px,92%);
max-height:calc(100vh - 370px);min-height:180px;object-fit:contain}
.hero__tag{position:absolute;left:50%;translate:-50% 0;bottom:14px;z-index:4;
background:var(--paper-card);border:1px solid var(--accent-line);
font-size:0.9062rem;font-weight:700;color:var(--accent-deep);padding:6px 14px;
border-radius:999px;white-space:nowrap}
.floaty{position:absolute;top:8px;display:flex;flex-direction:column;gap:9px;
z-index:4;text-align:left}
.floaty--l{left:0}
.floaty--r{right:0;text-align:right}
.floaty li{background:var(--paper-card);border:1px solid var(--line);
border-left:3px solid var(--accent);padding:9px 14px;font-size:0.9062rem;
line-height:1.35;color:var(--muted);max-width:190px}
.floaty--r li{border-left:1px solid var(--line);border-right:3px solid var(--steel)}
.floaty li b{display:block;color:var(--ink);font-size:.98rem}
.hero h1{order:3;font-size:clamp(2.1rem,4.6vw,3.35rem);max-width:15ch;
margin-bottom:6px}
.hero h1 span{display:block;color:var(--accent-deep)}
.hero h1 small{display:block;font-family:var(--sans);font-size:1.02rem;
font-weight:600;color:var(--faint);letter-spacing:.01em;margin-top:12px;
text-transform:none}
.hero .answer{order:4}
.hero__sub{order:5;max-width:var(--measure);font-size:1.08rem;
margin-block:20px 0}
.ticks{order:6;display:flex;flex-wrap:wrap;justify-content:center;
gap:10px 26px;margin-top:20px;max-width:880px}
.ticks li{position:relative;padding-left:24px;font-size:1rem;text-align:left;
color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:.56em;width:11px;
height:11px;background:var(--accent);border-radius:2px}
.hero__cta{order:7;display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
margin-top:28px}
.pay{order:8;display:flex;align-items:center;justify-content:center;
gap:12px;flex-wrap:wrap;margin-top:22px;font-size:.92rem;color:var(--faint)}
.factpills{order:9;display:flex;flex-wrap:wrap;justify-content:center;
gap:10px;margin-top:24px}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
padding:8px 15px;font-size:.93rem}
.factpills li b{color:var(--accent-deep)}
.figures{order:10;display:flex;flex-wrap:wrap;justify-content:center;
gap:14px;margin-top:22px}
.figures div{border:1px solid var(--line);background:var(--paper-card);
padding:14px 22px;min-width:150px}
.figures b{display:block;font-family:var(--display);font-size:1.7rem;
color:var(--accent-deep);line-height:1}
.figures span{font-size:.92rem;color:var(--faint)}
.chips{order:11;display:flex;flex-wrap:wrap;justify-content:center;gap:9px;
margin-top:20px}
.chips li{font-size:0.9688rem;border-bottom:2px solid var(--accent-line);
padding-bottom:2px}
/* ---- 5. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:var(--paper-card);border:1px solid var(--accent-line);
border-top:3px solid var(--accent);padding:22px 26px;margin-top:22px;
max-width:var(--measure);text-align:left}
.answer .qtag,.qtag{display:inline-block;font-family:var(--sans);
font-size:0.8438rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
color:var(--accent-deep);margin-bottom:9px}
.answer p{font-size:1.08rem;color:var(--ink-soft);line-height:1.62}
.answer p+p{margin-top:.7em}
.qa{background:var(--accent-tint);border:1px solid var(--accent-line);
padding:20px 24px;margin-block:22px}
.qa b{display:block;color:var(--ink);margin-bottom:6px}
/* ---- 6. TRUST ROW -------------------------------------------------------- */
/* .trust is a flex child of .hero__inner, so it NEEDS an explicit order.
Without one it defaults to 0 and renders above the eyebrow, which is
exactly the trap hero.md warns about: it looked like deliberate design in
a screenshot and only a computed-order read caught it. */
.trust{order:12;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;
margin-top:26px;border-top:1px solid var(--line);padding-top:20px;
width:100%;max-width:900px}
.trust__item{font-size:.92rem;font-weight:600;color:var(--faint);
display:flex;align-items:center;gap:7px}
.trust__item::before{content:"";width:7px;height:7px;background:var(--accent);
border-radius:50%;flex:none}
/* ---- ABOVE-THE-FOLD RESPONSIVE ------------------------------------------- */
@media(max-width:1180px){
.menu{gap:19px}
.menu a{font-size:.88rem}
}
@media(max-width:1040px){
.nav__tel{display:none}
.floaty{position:static;flex-direction:row;justify-content:center;
flex-wrap:wrap;text-align:left;margin-top:16px}
.floaty--r{text-align:left}
.floaty li{max-width:none;flex:1 1 210px}
}
@media(max-width:960px){
.nav__row{justify-content:space-between;gap:0;padding-block:6px}
.navmenus{display:none;position:fixed;inset:0 0 0 auto;width:min(340px,86vw);
background:var(--paper-card);z-index:950;padding:86px 26px 26px;
overflow-y:auto;border-left:1px solid var(--line);
flex-direction:column;align-items:stretch}
.navmenus.open{display:flex}
.menu{flex-direction:column;align-items:stretch;gap:0}
.menu a{padding-block:14px;border-bottom:1px solid var(--line-soft);
font-size:1.02rem}
.menu a::after{display:none}
.burger{display:block}
.nav__bar .wrap.nav__row{justify-content:flex-end}
}
@media(max-width:820px){
.hero{padding-block:22px 40px}
.hero__card::before{height:110px}
.hero h1{max-width:none}
.ticks{gap:8px 18px}
.ticks li{flex:1 1 240px}
/* On a phone the reading order is not the desktop one. The stacked
product-above-copy arrangement is the assigned desktop shape and it
stays; here the H1 comes first so the headline names the product, then
the bottle confirms it, then the Quick Answer and the CTA. Measured
targets at 390x844: H1 above 300, shot by ~600, answer above ~850,
CTA by ~1100. */
.hero h1{order:2;margin-block:0 2px}
.hero h1 small{margin-top:8px}
.hero__media{order:3;margin-block:10px 12px}
.hero__card{padding-bottom:16px}
.hero .answer{order:4;margin-top:16px}
.hero__cta{order:5;margin-top:16px}
.hero__sub{order:6}
.ticks{order:7}
.pay{order:8}
.factpills{order:9}
.figures{order:10}
/* cap the shot so the plinth cannot eat the fold on a small screen */
.hero__card img{max-height:38vh}
.hero__card::before{height:96px}
}
@media(max-width:600px){
.brand__prod{font-size:1.6rem}
.brand__firm{font-size:.62rem;letter-spacing:.26em}
.nav__top{padding-block:10px}
.hero__card img{max-width:96%}
.answer{padding:18px 18px}
.hero__cta .btn{width:100%}
.util__row{gap:4px 14px;font-size:0.9062rem;flex-wrap:nowrap;
justify-content:space-between}
/* Five utility items wrap to four lines at 390px and eat 64px of an 844px
screen. Keep the role and the phone; the lot, the dose and the guarantee
all appear again within the first screenful of the hero. */
.util__item:nth-child(2),.util__item:nth-child(3),
.util__item:nth-child(4){display:none}
.util__item:nth-child(1){overflow:hidden;text-overflow:ellipsis}
.figures div{flex:1 1 44%;min-width:0;padding:12px 14px}
}
/* ---- hero motif -- arc-bloom ---------------------------------------- */
.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(196deg,#f2f6fc,#e8d7e5 44%,#f2f6fc)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:0;width:152%;aspect-ratio:1;translate:-50% -28%;border-radius:50%;border:1.5px solid rgba(184,74,123,0.60);border-bottom-color:transparent;border-left-color:transparent;animation:fpArc 7.5s ease-out infinite;z-index:1}.hero__media::after{animation-delay:3.75s}@keyframes fpArc{0%{scale:.66;opacity:0}22%{opacity:.85}100%{scale:1.5;opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}
/* --- hero responsive rules, copied into the critical block
A phone painted the desktop hero from the inline block and then
jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
These are COPIES: the originals stay below, so the cascade is
unchanged and the first paint is already correct. */
@media (min-width:821px){
.hero__grid .hero__media{position:sticky;top:calc(var(--navh,88px) + 16px); align-self:start}
}
@media (max-width:820px){
/* display:contents drops the copy's children back into the hero grid, so the measured phone order in the block above still applies unchanged. */ .hero__grid{grid-template-columns:1fr;gap:16px;text-align:center}
.hero__copy{display:contents}
}
@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;}
}
/*!SITE-HOME-CRIT-START*/
/* HOME ONLY: class="hero" is on index.html alone, and the shared components
at the end are gated on body:has(.hero). Measured at 1440x900 before this:
the buy button sat at y=1245, 345px below the fold. Desktop order is now
eyebrow, headline, quick answer, BUTTONS, payment line, evidence, at a
rhythm that fits a 768px laptop. The PHONE order is composed below the
marker with display:contents and is untouched -- every rule here is
(min-width:821px) or body:has(.hero). Geometry: above the marker, rebuilt. */
@media (min-width:821px){
section.hero{padding-block:22px 50px}
.hero>.hero__grid{grid-template-columns:1.14fr .86fr;gap:40px}
.hero__copy>.eyebrow{order:1}
.hero__copy>h1{order:2;font-size:clamp(1.95rem,2.5vw,2.25rem);
line-height:1.12;max-width:none;margin-bottom:10px}
.hero__copy>.answer{order:3;margin-top:14px;padding:16px 20px;
border-top-width:1px}
.hero__copy>.answer .qtag{padding:5px 13px;margin-bottom:9px}
.hero__copy>.answer p{font-size:.96rem;line-height:1.52}
.hero__copy>.answer p+p{margin-top:.45em}
/* 34px of side padding made the pair 611px wide in a 595px column, so the
second weight wrapped to its own row; 24px gives 571px and one row */
.hero__copy>.hero__cta{order:4;margin-top:18px}
.hero__copy>.hero__cta .btn{padding-inline:24px}
.hero .hero__card img{max-width:min(540px,98%)}
/* centred for the old centred stack; the column is left-aligned now */
.hero__copy>.pay{order:5;margin-top:14px;justify-content:flex-start}
.hero__copy>.ticks{order:6;margin-top:20px;justify-content:flex-start}
.hero__copy>.factpills{order:7;margin-top:18px;justify-content:flex-start}
.hero__copy>.figures{order:8;margin-top:18px;justify-content:flex-start}
.hero__copy>.trust{order:9;margin-top:22px}
}
/* a 3px top rule miters into a wedge at a 28px corner: it moves inside as an
inset shadow (paint) and the border goes back to a hairline */
body:has(.hero) .card{border-top-width:1px}
/* ribbon, this slot: an inset pill on a rule, plus dashed row separators */
body:has(.hero) .tier__flag{display:block;width:max-content;
margin:20px auto 2px;padding:6px 16px}
body:has(.hero) .tier__rows li{padding-bottom:9px;
border-bottom:1px dashed var(--accent-line)}
body:has(.hero) .tier__rows li:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:961px){
/* start left three cards at three heights, so margin-top:auto above each
Add To Cart had nothing to push against and the CTAs sat 30px apart
(898/928/898). Equal heights hand them one baseline. The raise is margin,
never transform (the reveal pass sets transform:none) and the matching
margin-bottom keeps that box the same height. Uniform border width is the
last 1px: a 2px edge on the featured card alone lifted its button 1px. */
body:has(.hero) .pricing{align-items:stretch}
body:has(.hero) .pricing .tier{border-width:2px}
body:has(.hero) .pricing>.tier--feature{margin-top:-14px;margin-bottom:14px}
}
/*!SITE-HOME-CRIT-END*/
/*!CRITICAL-END*/
/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:64px}
.sec--tight{padding-block:40px 30px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:var(--paper-card)}
.sec--center{text-align:center}
.sec--dark{background:var(--accent-dark);color:rgba(255,255,255,.84)}
.sec--dark h2,.sec--dark h3,.sec--dark b{color:#fff}
.sec--dark a{color:var(--accent-wash)}
.sec__head{max-width:var(--measure);margin-bottom:34px}
.sec--center .sec__head{margin-inline:auto}
.sec__head .rule{display:block;width:54px;height:3px;background:var(--accent);
margin-bottom:16px}
.sec--center .sec__head .rule{margin-inline:auto}
.eyebrow{display:block;font-family:var(--sans);font-size:0.8438rem;font-weight:800;
letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);
margin-bottom:10px}
.sec h2{font-size:clamp(1.65rem,3vw,2.3rem);margin-bottom:12px}
.sec h3{font-size:1.24rem;margin-bottom:8px}
.sec h4{font-size:1.05rem;margin-bottom:6px}
.sec p{margin-bottom:1.05em}
.sec>.wrap>p,.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>h2,.sec>.wrap>h3,
.sec>.wrap>.note,.sec>.wrap>.callout,.sec>.wrap>.alert,.sec>.wrap>.qa,
.sec>.wrap>.pullquote,.sec>.wrap>.refs,.sec>.wrap>.byline,.sec>.wrap>.steps,
.sec>.wrap>.chips,.sec>.wrap>.forlist{max-width:var(--measure);
margin-inline:auto}
.sec--center>.wrap>p{margin-inline:auto}
.lead{font-size:1.16rem;color:var(--ink-soft);line-height:1.62}
.note{font-size:.95rem;color:var(--faint)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.2rem;
line-height:.86;font-weight:800;color:var(--accent);margin:4px 12px 0 0}
.pullquote{border-left:3px solid var(--accent);padding:6px 0 6px 22px;
font-family:var(--display);font-size:1.28rem;line-height:1.42;
color:var(--ink);margin-block:26px}
.callout{background:var(--accent-tint);border:1px solid var(--accent-line);
padding:20px 24px;margin-block:24px}
.callout b{display:block;color:var(--accent-deep);margin-bottom:5px}
.alert{background:#fff6f0;border:1px solid #e8c3ad;border-left:4px solid #c2560f;
padding:20px 24px;margin-block:24px}
.alert b{display:block;color:#8d3d09;margin-bottom:5px}
.flag{display:inline-block;background:var(--accent);color:#fff;font-size:0.8438rem;
font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:4px 11px}
/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper-card);border:1px solid var(--line);
border-top:3px solid var(--accent);padding:24px 24px 26px}
.card h3{font-size:1.14rem}
.card p{margin-bottom:0;font-size:1.062rem}
.card--steel{border-top-color:var(--steel)}
.sec--tint .card{background:var(--paper-card)}
.steps{counter-reset:s;display:grid;gap:16px}
.step{background:var(--paper-card);border:1px solid var(--line);padding:22px 24px;
position:relative;padding-left:70px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:22px;
top:20px;width:32px;height:32px;background:var(--accent);color:#fff;
font-family:var(--display);font-weight:800;font-size:1rem;display:flex;
align-items:center;justify-content:center;border-radius:var(--r-s)}
.step h3{font-size:1.1rem}
.step p{margin-bottom:0}
.chips li{position:relative;padding-left:22px;margin-bottom:10px;font-size:1rem}
.chips li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;
background:var(--accent-line);border-radius:50%}
.keypoints{background:var(--accent-tint);border-left:4px solid var(--accent);
padding:20px 24px;margin-block:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;
font-weight:800;letter-spacing:.18em;text-transform:uppercase;
color:var(--accent-deep);margin-bottom:10px}
.keypoints li{position:relative;padding-left:20px;margin-bottom:9px;font-size:1.062rem}
.keypoints li::before{content:"";position:absolute;left:0;top:.62em;width:8px;
height:8px;background:var(--accent);border-radius:50%}
.keypoints li b{color:var(--accent-deep)}
/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;margin-block:24px;max-width:var(--measure-wide);
margin-inline:auto;border:1px solid var(--line);background:var(--paper-card)}
.dtable{width:100%;border-collapse:collapse;font-size:1rem}
.dtable caption{text-align:left;font-size:1rem;color:var(--faint);
padding:14px 16px;border-bottom:1px solid var(--line)}
.dtable th{background:var(--steel-soft);font-family:var(--sans);font-size:0.9062rem;
font-weight:800;letter-spacing:.06em;text-transform:uppercase;
color:var(--steel-deep);text-align:left;padding:12px 16px;
border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:13px 16px;border-bottom:1px solid var(--line-soft);
vertical-align:top;color:var(--muted)}
.dtable tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}
/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
align-items:center}
.split--flip .split__media{order:-1}
.split__media img{width:100%;border:1px solid var(--line)}
.split__copy p:last-child{margin-bottom:0}
/* ---- 11. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:var(--paper-card);border:1px solid var(--line)}
.shots img{width:100%;display:block}
.shots figcaption{padding:16px 18px 20px;font-size:.97rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.06rem;
color:var(--ink);margin-bottom:6px}
.shots figcaption p{margin-bottom:0;font-size:.97rem}
/* ---- 12. BADGEWALL / PROMO / STATS --------------------------------------- */
.badgewall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.badgewall figure{text-align:center;background:var(--paper-card);
border:1px solid var(--line);padding:20px 16px}
.badgewall img{margin-inline:auto;max-width:100%}
.badgewall figcaption{margin-top:12px;font-size:.93rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:1rem;
margin-bottom:4px}
.promo{background:var(--accent-dark);color:rgba(255,255,255,.85);
padding:34px 34px;display:flex;flex-wrap:wrap;align-items:center;gap:22px;
justify-content:space-between}
.promo b{color:#fff}
.promo p{margin-bottom:0;max-width:62ch}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
background:var(--line)}
.stats div{background:var(--paper-card);padding:26px 20px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2rem;
color:var(--accent-deep);line-height:1.05}
.stats span{font-size:.95rem;color:var(--faint)}
.trustrow{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 34px;
align-items:center}
.trustrow img{max-width:100%}
/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--paper-card);border:1px solid var(--line);
padding:24px;position:relative}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--accent)}
.whycard h3{font-size:1.1rem}
.whycard p{margin-bottom:0;font-size:1.062rem}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.forlist{background:var(--paper-card);border:1px solid var(--line);padding:24px}
.forlist h3{font-size:1.12rem;margin-bottom:12px}
.forlist li{position:relative;padding-left:24px;margin-bottom:10px;font-size:1.062rem}
.forlist li::before{content:"";position:absolute;left:0;top:.55em;width:11px;
height:11px;border-radius:2px;background:var(--accent)}
.forlist--no li::before{background:var(--steel)}
/* ---- 14. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ingthumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
text-align:center;padding-bottom:16px}
.ingcard img{width:100%}
.ingcard b{display:block;font-family:var(--display);font-size:1rem;
color:var(--ink);margin-top:10px;padding-inline:8px}
.ingcard span{display:block;font-size:0.9062rem;color:var(--faint);padding-inline:10px}
.ing{display:grid;gap:20px}
.ing article{background:var(--paper-card);border:1px solid var(--line);
border-left:3px solid var(--accent);padding:24px 26px}
.ing h3{font-size:1.16rem}
.ing p:last-child{margin-bottom:0}
.facts{background:var(--paper-card);border:2px solid var(--ink);
max-width:520px;margin-inline:auto;padding:20px 22px}
.facts h3{font-family:var(--display);font-size:1.5rem;border-bottom:8px solid var(--ink);
padding-bottom:5px;margin-bottom:8px}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th{text-align:left;font-size:.92rem;border-bottom:3px solid var(--ink);
padding:5px 0;color:var(--ink)}
.facttab td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top}
.facttab td:last-child{text-align:right;white-space:nowrap;font-weight:700;
color:var(--ink)}
.facttab .sub td{padding-left:14px;font-size:1rem;color:var(--muted)}
/* ---- 15. PRICING --------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
align-items:start}
.tier{background:var(--paper-card);border:1px solid var(--line);padding:0 0 26px;
text-align:center;position:relative}
.tier--feature{border:2px solid var(--accent)}
.tier__flag{background:var(--accent);color:#fff;font-size:0.8438rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;padding:7px 0}
.tier--feature .tier__flag{background:var(--accent)}
.tier:not(.tier--feature) .tier__flag{background:var(--steel)}
.tier h3{font-family:var(--display);font-size:1.4rem;margin:20px 0 2px}
.tier__sub{font-size:.95rem;color:var(--faint);margin-bottom:12px}
.tier img{margin:6px auto 12px;max-width:100%}
.tier__price{font-family:var(--display);font-size:2.5rem;color:var(--accent-deep);
line-height:1;font-weight:800}
.tier__price sup{font-size:1.1rem;vertical-align:super;font-weight:700}
.tier__was{display:block;font-size:.95rem;color:var(--faint);
text-decoration:line-through;margin-top:6px}
.tier__tot{display:block;font-size:1.02rem;color:var(--ink);font-weight:700;
margin-top:8px}
.tier__ship{display:block;font-size:.93rem;color:var(--accent-deep);
font-weight:700;margin-top:4px}
.tier__rows{text-align:left;padding:18px 24px 20px;margin-top:14px;
border-top:1px solid var(--line-soft)}
.tier__rows li{position:relative;padding-left:20px;font-size:1.062rem;
margin-bottom:8px}
.tier__rows li::before{content:"";position:absolute;left:0;top:.58em;width:8px;
height:8px;background:var(--accent);border-radius:2px}
.tier .btn{margin-inline:24px;width:calc(100% - 48px)}
.pkwrap .tag{position:static}
.guarantee{display:flex;flex-wrap:wrap;align-items:center;gap:26px;
background:var(--paper-card);border:1px solid var(--line);padding:28px 30px;
max-width:var(--measure-wide);margin-inline:auto}
.guarantee img{flex:none;max-width:100%}
.guarantee p:last-child{margin-bottom:0}
/* ---- 16. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tcard{background:var(--paper-card);border:1px solid var(--line);padding:22px 24px}
.tcard .rev-head{font-size:.93rem;color:var(--faint);font-weight:700;
margin-bottom:8px;letter-spacing:.01em}
.tcard blockquote{font-size:1.062rem;color:var(--ink-soft);line-height:1.6}
.tcard .rev-mark{color:var(--accent);font-weight:800;letter-spacing:.08em}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dist{display:grid;gap:9px;max-width:var(--measure);margin-inline:auto}
.dist .row{display:grid;grid-template-columns:56px 1fr 62px;gap:12px;
align-items:center;font-size:.98rem}
.dist .bar{background:var(--paper-deep);height:14px;position:relative}
.dist .bar i{display:block;height:100%;background:var(--accent)}
/* ---- 17. FAQ ------------------------------------------------------------- */
.faq{max-width:var(--measure-wide);margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:var(--paper-card)}
.faq summary{cursor:pointer;padding:18px 22px;font-family:var(--display);
font-weight:700;font-size:1.08rem;color:var(--ink);list-style:none;
display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;
line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq .faq-body{padding:0 22px 20px;font-size:1.02rem}
.faq .faq-body p:last-child{margin-bottom:0}
/* ---- 18. REFS, BYLINE ---------------------------------------------------- */
.refs{font-size:.96rem;color:var(--muted)}
.refs li{position:relative;padding-left:26px;margin-bottom:11px}
.refs li::before{content:counter(r);counter-increment:r;position:absolute;left:0;
top:0;font-weight:800;color:var(--accent-deep);font-size:1.062rem}
.refs{counter-reset:r}
.byline{display:flex;gap:20px;align-items:flex-start;background:var(--paper-card);
border:1px solid var(--line);border-left:3px solid var(--accent);
padding:24px 26px;margin-block:26px}
.byline img{flex:none;max-width:100%}
.byline b{display:block;color:var(--ink);font-family:var(--display);
font-size:1.08rem;margin-bottom:6px}
.byline p{margin-bottom:0;font-size:.98rem}
/* ---- 19. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:16px}
.formcard{background:var(--paper-card);border:1px solid var(--line);padding:26px 28px}
.form label{display:block;font-size:.95rem;font-weight:700;color:var(--ink-soft);
margin-bottom:5px}
.form input,.form select,.form textarea{width:100%;font-family:var(--sans);
font-size:1rem;padding:11px 13px;border:1px solid var(--line);
background:var(--paper);color:var(--ink);border-radius:var(--r-s)}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent);
outline-offset:1px}
/* ---- 20. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--accent-dark);color:rgba(255,255,255,.84);
padding:38px 38px;max-width:var(--measure-wide);margin-inline:auto}
.final h2{color:#fff;margin-bottom:10px}
.final p,.article .final p{color:rgba(255,255,255,.84)}
.final .btn--cta{background:#fff;color:var(--accent-dark)}
.final .btn--cta:hover{background:var(--accent-wash)}
.final--media{display:grid;grid-template-columns:220px minmax(0,1fr);gap:34px;
align-items:center}
.final__img img{width:100%;height:auto;max-width:220px}
.final__price,.article .final .final__price{display:block;color:#fff;
font-weight:700;font-size:1.06rem;margin-bottom:14px}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.rel a{display:block;background:var(--paper-card);border:1px solid var(--line);
border-top:3px solid var(--accent);padding:20px 22px;text-align:left}
.rel a:hover{text-decoration:none;border-color:var(--accent-line)}
.rel b{display:block;font-family:var(--display);font-size:1.06rem;
color:var(--ink);margin-bottom:5px}
.rel span{font-size:.96rem;color:var(--muted)}
/* ---- 21. LEGAL / CRUMBS -------------------------------------------------- */
.legal{max-width:var(--measure);margin-inline:auto}
.legal h2{margin-top:1.4em}
.crumbs{font-size:.92rem;color:var(--faint);padding-block:16px}
.crumbs a{color:var(--faint)}
.meta{font-size:.94rem;color:var(--faint)}
/* ---- 22. FOOTER: two-column editorial, rule-separated, small caps -------- */
footer{background:var(--paper-card);border-top:3px solid var(--accent-dark);
padding-block:52px 34px;font-size:1rem;color:var(--muted)}
.fcontact{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;
align-items:center;border-bottom:1px solid var(--line);padding-bottom:28px;
margin-bottom:34px}
.fcontact img{flex:none;max-width:100%}
.fcontact__t b{display:block;font-family:var(--display);font-size:1.14rem;
color:var(--ink);margin-bottom:6px}
.fcontact__t p{font-size:1.062rem;margin-bottom:0}
/* two wide columns, rule separated */
/* One wrapping inline row of every page, then the brand and the legal block
centred beneath it. The row is a single run of links separated by hairline
rules rather than a column grid, so it reads as one continuous line that
happens to wrap. */
.flinks{display:flex;flex-wrap:wrap;justify-content:center;gap:11px 0;
border-bottom:1px solid var(--line);padding-bottom:24px;margin-bottom:28px}
.flinks a{color:var(--muted);font-size:1rem;line-height:1.15;
padding-inline:15px;border-right:1px solid var(--line);white-space:nowrap}
.flinks a:last-child{border-right:0}
.flinks a:hover{color:var(--accent-deep)}
.fbrandrow{text-align:center;max-width:720px;margin-inline:auto}
.fbrandrow p{font-size:1.062rem;margin-bottom:.8em}
.fbrandrow p:last-of-type{margin-bottom:0}
.fbrand{font-family:var(--display);font-size:1.9rem;font-weight:800;
color:var(--ink);letter-spacing:-.03em;line-height:1;margin-bottom:12px}
.fbrand span{color:var(--accent)}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;
justify-content:center}
.fbadges img{max-width:100%}
.fnap{border-top:1px solid var(--line);margin-top:10px;padding-top:26px;
font-size:.96rem}
.fnap p{margin-bottom:0}
.fnap a{color:var(--muted)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;
border-top:1px solid var(--line);margin-top:26px;padding-top:22px;
font-size:.94rem;color:var(--faint)}
.fpay img{max-width:100%}
.disc{border-top:1px solid var(--line);margin-top:26px;padding-top:24px;
font-size:.94rem;color:var(--faint)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--ink-soft)}
.disc .copy{margin-top:18px;margin-bottom:0;font-size:.92rem}
/* ---- 23. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:880;
background:var(--accent-dark);color:#fff;transform:translateY(105%);
transition:transform .28s ease}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:12px 22px;
display:flex;align-items:center;justify-content:space-between;gap:18px}
.buybar__t{font-size:.96rem;color:rgba(255,255,255,.82)}
.buybar__t b{color:#fff;display:block}
.buybar .from{color:var(--accent-wash);font-weight:700}
.buybar .btn--cta{background:#fff;color:var(--accent-dark)}
/* ---- 24. BLOG ------------------------------------------------------------ */
.article{max-width:var(--measure);margin-inline:auto}
.article h2{font-size:1.72rem;margin:1.5em 0 .5em;scroll-margin-top:110px}
.article h3{font-size:1.2rem;margin:1.3em 0 .4em}
.article p{margin-bottom:1.05em}
.article ul,.article ol{margin-bottom:1.2em}
.article li{position:relative;padding-left:22px;margin-bottom:9px}
.article li::before{content:"";position:absolute;left:0;top:.62em;width:8px;
height:8px;background:var(--accent-line);border-radius:50%}
.article figure{margin-block:26px;background:var(--paper-card);
border:1px solid var(--line)}
.article figure img{width:100%}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);
margin-inline:auto}
.article figcaption{padding:14px 18px 18px;font-size:.96rem;color:var(--faint)}
.postmeta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.95rem;
color:var(--faint);border-top:1px solid var(--line);
border-bottom:1px solid var(--line);padding-block:12px;margin-bottom:26px}
.toc{background:var(--paper-tint);border:1px solid var(--line);
padding:20px 24px;margin-block:26px}
.toc b{display:block;font-family:var(--sans);font-size:.76rem;font-weight:800;
letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);
margin-bottom:10px}
.toc li{margin-bottom:7px;font-size:1.062rem}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line)}
.posts img{width:100%}
.posts .pbody{padding:18px 20px 22px}
.posts h3{font-size:1.1rem;margin-bottom:7px}
.posts p{font-size:1.062rem;margin-bottom:8px}
.posts .meta{font-size:.92rem}
/* A shared component in a narrower column is a new component (pitfall 24) */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.55rem;line-height:1.2;margin:0 0 .4em}
/* ---- 25. MOTION: rule draw on section heads, fade-up on entry ------------ */
[data-reveal]{opacity:0;transform:translateY(14px);
transition:opacity .55s ease,transform .55s ease}
[data-reveal].in{opacity:1;transform:none}
.sec__head .rule{transform-origin:left center;transition:transform .6s ease}
.sec--center .sec__head .rule{transform-origin:center}
.sec__head[data-reveal] .rule{transform:scaleX(.12)}
.sec__head[data-reveal].in .rule{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
.sec__head .rule{transform:none!important;transition:none}
}
/* ---- 26. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
/* `html` here, not the pseudo-class that opens the token block above. Both
match the same element and custom properties inherit identically, but
brand_marks.palette() and hero_motifs.palette() each parse that block by
splitting the stylesheet on that selector's literal text and taking the
second piece. A second occurrence anywhere is therefore a trap, and it
silently falls back to a default accent rather than erroring. Verified by
calling both functions directly; the duplicate is removed anyway so the
next person to add a token does not have to know this. Note the comment
itself must avoid the literal text for the same reason. */
html{--measure:100%;--measure-wide:100%}
.ingthumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
.badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:920px){
.sec{padding-block:48px}
.g3,.g4,.whygrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,1fr);gap:26px}
.split--flip .split__media{order:0}
.posts{grid-template-columns:repeat(2,minmax(0,1fr))}
.rel{grid-template-columns:minmax(0,1fr)}
.tlife{grid-template-columns:minmax(0,1fr)}
.final--media{grid-template-columns:minmax(0,1fr);gap:22px}
.final__img img{max-width:180px;margin-inline:auto}
.flinks a{padding-inline:11px;font-size:.97rem}
/* stacked pricing: best value first, starter last */
.pricing{grid-template-columns:minmax(0,1fr);max-width:440px;
margin-inline:auto}
.pricing .tier:nth-child(1){order:3}
.pricing .tier:nth-child(2){order:1}
.pricing .tier:nth-child(3){order:2}
.tier--feature{transform:none}
}
@media(max-width:760px){
.shots,.shots--wide{grid-template-columns:minmax(0,1fr)}
.whofor{grid-template-columns:minmax(0,1fr)}
.tgrid{grid-template-columns:minmax(0,1fr)}
.fcontact{grid-template-columns:minmax(0,1fr);text-align:left}
.promo{flex-direction:column;align-items:flex-start}
}
@media(max-width:700px){
.g3,.g4,.whygrid,.g2{grid-template-columns:minmax(0,1fr)}
.ingthumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
.badgewall{grid-template-columns:repeat(2,minmax(0,1fr))}
.posts{grid-template-columns:minmax(0,1fr)}
.flinks{gap:9px 0}
.flinks a{padding-inline:9px}
.article .final--media{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:600px){
.sec{padding-block:40px}
.step{padding-left:24px;padding-top:58px}
.step::before{top:18px;left:24px}
.final{padding:28px 22px}
.buybar__in{padding:10px 16px;gap:12px}
.buybar__t{font-size:0.9062rem}
/* Tap target: a button on a phone must be reachable with a thumb. */
.btn{min-height:44px}
.faq summary{min-height:44px}
}
/* brand mark: underline construction */
.brand{position:relative}.brand::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;background:#b84a7b}
/* --- 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}
/* --- two-column hero, the shape the rest of the estate uses --------------
This site's assigned slot was a centred stack with the product ABOVE the
headline, and on a wide screen that buried the page. Measured at 1440x900
before the change: eyebrow at y=300, bottle at y=347, and the H1 starting
at y=796 -- below the fold, with the Quick Answer at 1200 and the CTA at
1651. The first screen was an eyebrow and a photograph.
The owner asked for the estate's arrangement instead (18 Sep 2026): copy on
the left, product on the right, sticky while the copy scrolls past.
The existing order values (eyebrow 1, h1 3, answer 4, ticks 6, cta 7,
pay 8, factpills 9, figures 10, trust 12) still do their job -- they now
order the children of .hero__copy, which is the same sequence minus the
media that used to sit at order 2. */
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:46px;
align-items:start;position:relative;z-index:2}
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;
text-align:left}
.hero__grid .hero__media{width:100%;max-width:none;margin-block:0}
.hero__copy>.trust{justify-content:flex-start}
@media(min-width:821px){
.hero__grid .hero__media{position:sticky;top:calc(var(--navh,88px) + 16px);
align-self:start}
}
@media(max-width:820px){
/* display:contents drops the copy's children back into the hero grid, so
the measured phone order in the block above still applies unchanged. */
.hero__grid{grid-template-columns:1fr;gap:16px;text-align:center}
.hero__copy{display:contents}
}
/* ---- 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; }
}
/* ==== 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*/
/* ==========================================================================
FEMIPROS HOME PAGE -- modern surface + hero motif, assigned slot
--------------------------------------------------------------------------
PAINT ONLY. Radius, shadow, background, colour, transform, transition and
animation move no box, so this block sits below the critical marker and
needs a restamp rather than a rebuild. Anything that moved a box went
above the marker instead, and the site was rebuilt for it.
HOME ONLY. class="hero" is on index.html alone, so `section.hero ...` is
automatically home-only; shared components (.btn, .card, .tier, .faq) are
gated on body:has(.hero), which resolves to nothing on the other 30 pages.
SPECIFICITY, NOT SOURCE ORDER. modern_surface.py and footer_type.py
re-append their own blocks after this one on every build. Every selector
here therefore carries a parent (body:has(.hero) = 0,1,1 or section.hero =
0,1,1) so it outranks their bare .card / .tier / .card--pack rules whatever
the order ends up being. This block never writes --radius, --shadow or
--lift:those are modern_surface's tokens and it would win them back.
SLOT: radius_card 28 / radius_control 18; depth = three stops, contact +
mid + wide, tinted with this site's own ink rgb(23,29,40); ribbon = an
inset pill on a rule; motif family = TRACE, one hairline that travels
around the bottle and releases.
========================================================================== */
:root{
--fp-rcard:28px;
--fp-rctl:18px;
--fp-rchip:999px;
--fp-shadow:0 1px 2px rgba(23,29,40,.05),0 6px 14px rgba(23,29,40,.07),
0 20px 44px rgba(23,29,40,.09);
--fp-lift:0 1px 2px rgba(23,29,40,.06),0 10px 22px rgba(23,29,40,.10),
0 28px 60px rgba(23,29,40,.16);
--fp-cta:0 1px 2px rgba(138,43,86,.22),0 6px 14px rgba(138,43,86,.24),
0 20px 44px rgba(138,43,86,.22);
--fp-ctalift:0 1px 2px rgba(138,43,86,.24),0 10px 22px rgba(138,43,86,.30),
0 28px 60px rgba(138,43,86,.28);
}
/* ---- 1. the hero ground: a soft rose bloom behind the bottle ------------ */
section.hero{background:
radial-gradient(64% 52% at 81% 16%,rgba(184,74,123,.16),rgba(184,74,123,0) 66%),
radial-gradient(54% 46% at 3% 94%,rgba(78,90,107,.11),rgba(78,90,107,0) 62%),
linear-gradient(180deg,#fbfcfe 0%,#ebf1f9 58%,var(--paper) 100%)}
/* ---- 2. HERO MOTIF -- trace ---------------------------------------------
One hairline arc that travels all the way round the bottle and releases,
with a second, slower counter-trace behind it. It lives on the pseudo-
elements of the media column, never on the ![]()
: that image is the LCP
element and is preloaded.
Sized at 146% / 118% of the media column, so the ring reads OUTSIDE the
product card rather than inside an opaque box where it would render as
nothing. Only transform and opacity animate, so nothing repaints.
19s and 27s: this is a capsule taken daily for weeks, not an energy drink.
fpArc is this sheet's existing keyframe name and is left alone. */
section.hero .hero__media::before,
section.hero .hero__media::after{content:"";position:absolute;
left:50%;top:50%;width:146%;aspect-ratio:1;border-radius:50%;
translate:-50% -50%;border:1.5px solid transparent;
z-index:1;pointer-events:none;
animation:fpTrace 19s cubic-bezier(.45,0,.2,1) infinite}
section.hero .hero__media::before{border-top-color:rgba(184,74,123,.52)}
section.hero .hero__media::after{width:118%;
border-left-color:rgba(78,90,107,.30);
animation:fpTraceB 27s linear infinite}
@keyframes fpTrace{
0%{transform:rotate(-40deg);opacity:0}
11%{opacity:.9}
76%{opacity:.9}
100%{transform:rotate(320deg);opacity:0}
}
@keyframes fpTraceB{
0%{transform:rotate(0deg);opacity:.44}
45%{opacity:.10}
100%{transform:rotate(-360deg);opacity:.44}
}
/* ---- 3. the plinth, the tag and the floating facts ---------------------- */
section.hero .hero__card::before{border-radius:var(--fp-rcard);
border-color:rgba(184,74,123,.22);
background:linear-gradient(180deg,rgba(184,74,123,.15),rgba(242,246,252,.70));
box-shadow:0 1px 2px rgba(23,29,40,.04),0 18px 40px rgba(23,29,40,.10)}
section.hero .hero__tag{border-color:rgba(184,74,123,.26);
box-shadow:0 1px 2px rgba(23,29,40,.06),0 6px 14px rgba(23,29,40,.08)}
section.hero .floaty li{border-radius:var(--fp-rctl);
border-color:var(--line-soft);
box-shadow:0 1px 2px rgba(23,29,40,.05),0 6px 14px rgba(23,29,40,.06)}
/* ---- 4. the Quick Answer ------------------------------------------------ */
section.hero .answer{border-radius:var(--fp-rcard);
border-color:rgba(184,74,123,.22);
background:linear-gradient(180deg,#ffffff 0%,rgba(251,239,244,.62) 100%);
box-shadow:inset 0 3px 0 var(--accent),var(--fp-shadow)}
section.hero .answer .qtag{background:var(--accent-tint);
border-radius:var(--fp-rchip);color:var(--accent-deep)}
/* ---- 5. the hero's own chips, ticks and figures ------------------------- */
section.hero .ticks li::before{border-radius:4px;
background:linear-gradient(155deg,var(--accent),var(--accent-deep))}
section.hero .factpills li{border-radius:var(--fp-rchip);
border-color:var(--line-soft);background:rgba(255,255,255,.88);
box-shadow:0 1px 2px rgba(23,29,40,.05),0 6px 14px rgba(23,29,40,.05)}
section.hero .figures div{border-radius:var(--fp-rcard);
border-color:var(--line-soft);background:rgba(255,255,255,.92);
box-shadow:var(--fp-shadow)}
section.hero .trust__item::before{box-shadow:0 0 0 3px rgba(184,74,123,.14)}
/* ---- 6. BUTTONS: the buying CTA carries the gradient, the second weight
stays solid, so the pair reads as two weights rather than two colours.
18px is this slot's control radius; the old 4px square is the dated
signature this pass exists to remove. ---------------------------------- */
body:has(.hero) .btn{border-radius:var(--fp-rctl);
transition:background-color .2s ease,background-image .2s ease,color .2s ease,
border-color .2s ease,box-shadow .24s ease,transform .24s ease}
body:has(.hero) .btn--cta{border-color:transparent;
background-color:var(--accent);
background-image:linear-gradient(180deg,
color-mix(in srgb,var(--accent) 80%,#ffffff) 0%,
var(--accent) 48%,var(--accent-deep) 100%);
box-shadow:var(--fp-cta)}
body:has(.hero) .btn--cta:hover{background-color:var(--accent-deep);
background-image:linear-gradient(180deg,
var(--accent) 0%,var(--accent-deep) 62%,var(--accent-dark) 100%);
box-shadow:var(--fp-ctalift);transform:translateY(-2px)}
body:has(.hero) .btn--ghost{background-color:var(--paper-card);
border-color:var(--steel-line);
box-shadow:0 1px 2px rgba(23,29,40,.05)}
body:has(.hero) .btn--ghost:hover{border-color:var(--accent);
color:var(--accent-deep);
box-shadow:0 1px 2px rgba(23,29,40,.06),0 6px 14px rgba(23,29,40,.09);
transform:translateY(-2px)}
body:has(.hero) .btn--gold{background-image:linear-gradient(180deg,
var(--steel) 0%,var(--steel-deep) 100%);
box-shadow:0 1px 2px rgba(23,29,40,.08),0 6px 14px rgba(23,29,40,.10)}
body:has(.hero) .btn:active{transform:translateY(0)}
/* The two inverted CTAs -- the dark closing band and the buy bar -- keep
their white fill. (0,3,1) beats the gradient rule's (0,2,1). */
body:has(.hero) .final .btn--cta,
body:has(.hero) .buybar .btn--cta{background-image:none;background-color:#ffffff;
color:var(--accent-dark);
box-shadow:0 1px 2px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.18)}
body:has(.hero) .final .btn--cta:hover,
body:has(.hero) .buybar .btn--cta:hover{background-image:none;
background-color:var(--accent-wash);
box-shadow:0 1px 2px rgba(0,0,0,.14),0 10px 22px rgba(0,0,0,.24)}
body:has(.hero) .nav__tel{border-radius:var(--fp-rctl);
transition:border-color .2s ease,color .2s ease,box-shadow .24s ease}
body:has(.hero) .nav__tel:hover{box-shadow:0 1px 2px rgba(23,29,40,.06),
0 6px 14px rgba(23,29,40,.08)}
/* ---- 7. focus, for anyone who is not using a mouse --------------------- */
body:has(.hero) .btn:focus-visible,
body:has(.hero) a:focus-visible,
body:has(.hero) summary:focus-visible,
body:has(.hero) button:focus-visible{outline:3px solid var(--accent-deep);
outline-offset:3px}
/* ---- 8. panels: this slot's 28px card and three-stop depth -------------- */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .tablewrap,
body:has(.hero) .ingcard,
body:has(.hero) .whycard,
body:has(.hero) .byline,
body:has(.hero) .promo,
body:has(.hero) .stats,
body:has(.hero) .final,
body:has(.hero) .shots figure,
body:has(.hero) .pricing .tier{border-radius:var(--fp-rcard);
box-shadow:var(--fp-shadow)}
/* an image or an accent bar that runs to the edge has to be clipped to the
new corner, or it pokes out of it */
body:has(.hero) .whycard,
body:has(.hero) .ingcard,
body:has(.hero) .stats,
body:has(.hero) .shots figure{overflow:hidden}
body:has(.hero) .card{box-shadow:inset 0 3px 0 var(--accent),var(--fp-shadow)}
body:has(.hero) .faq{border-top-color:transparent;
border-radius:var(--fp-rcard);overflow:hidden;box-shadow:var(--fp-shadow)}
body:has(.hero) .faq details:last-of-type{border-bottom-color:transparent}
body:has(.hero) .sec__head .rule{border-radius:var(--fp-rchip);
background:linear-gradient(90deg,var(--accent),rgba(184,74,123,.22))}
body:has(.hero) .step::before{border-radius:50%;
background:linear-gradient(155deg,var(--accent),var(--accent-deep));
box-shadow:0 2px 6px rgba(138,43,86,.30)}
body:has(.hero) .keypoints,
body:has(.hero) .callout{border-color:rgba(184,74,123,.20)}
body:has(.hero) .buybar{box-shadow:0 -6px 14px rgba(23,29,40,.10),
0 -20px 44px rgba(23,29,40,.14)}
/* ---- 9. pricing: the ribbon pill stands on a rule, and the recommended
tier is raised (above the marker, with margin) and tinted ------------- */
body:has(.hero) .tier__flag{border-radius:var(--fp-rchip);position:relative}
body:has(.hero) .tier:not(.tier--feature) .tier__flag{
background:var(--steel-soft);color:var(--steel-deep)}
body:has(.hero) .tier--feature .tier__flag{color:#ffffff;
background:linear-gradient(180deg,
color-mix(in srgb,var(--accent) 82%,#ffffff) 0%,var(--accent-deep) 100%);
box-shadow:0 2px 8px rgba(138,43,86,.28)}
body:has(.hero) .tier__flag::before,
body:has(.hero) .tier__flag::after{content:"";position:absolute;top:50%;
width:58px;height:1px;background:var(--line)}
body:has(.hero) .tier__flag::before{right:calc(100% + 13px)}
body:has(.hero) .tier__flag::after{left:calc(100% + 13px)}
body:has(.hero) .pricing .tier--feature{border-color:var(--accent);
background:linear-gradient(180deg,#ffffff 0%,rgba(251,239,244,.75) 100%);
box-shadow:0 1px 2px rgba(138,43,86,.10),0 12px 26px rgba(138,43,86,.14),
0 28px 60px rgba(23,29,40,.16)}
body:has(.hero) .pricing .tier:not(.tier--feature){border-color:var(--line-soft)}
body:has(.hero) .tier__rows{border-top-color:var(--accent-line)}
body:has(.hero) .tier__rows li::before{border-radius:3px;
background:linear-gradient(155deg,var(--accent),var(--accent-deep))}
/* ---- 10. a surface a reader can click answers the pointer -------------- */
body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .whycard,
body:has(.hero) .shots figure,
body:has(.hero) .card--pack,
body:has(.hero) .pricing .tier{transition:box-shadow .24s ease,
transform .24s ease}
body:has(.hero) .card:hover,
body:has(.hero) .ingcard:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .card--pack:hover,
body:has(.hero) .pricing .tier:hover{box-shadow:var(--fp-lift);
transform:translateY(-2px)}
body:has(.hero) .card:hover{box-shadow:inset 0 3px 0 var(--accent),
var(--fp-lift)}
body:has(.hero) .pricing .tier--feature:hover{
box-shadow:0 1px 2px rgba(138,43,86,.12),0 16px 32px rgba(138,43,86,.18),
0 34px 70px rgba(23,29,40,.20)}
/* ---- 11. reduced motion switches every one of them off ----------------- */
@media (prefers-reduced-motion:reduce){
section.hero .hero__media::before,
section.hero .hero__media::after{animation:none;opacity:.34;transform:none}
body:has(.hero) .btn,
body:has(.hero) .nav__tel,
body:has(.hero) .card,
body:has(.hero) .ingcard,
body:has(.hero) .whycard,
body:has(.hero) .shots figure,
body:has(.hero) .card--pack,
body:has(.hero) .pricing .tier{transition:none}
body:has(.hero) .btn:hover,
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--ghost:hover,
body:has(.hero) .card:hover,
body:has(.hero) .ingcard:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .card--pack:hover,
body:has(.hero) .pricing .tier:hover{transform:none}
}
/*!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 .disc{font-size:16px}
footer .disc .copy{font-size:16px}
footer .flinks a{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
footer .nav__actrow .btn{font-size:16px}
/* ==== end footer type floor ==== */
/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 25 box-shadow declaration(s)
and 12 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 (23,29,40), 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(23,29,40,.06), 0 6px 18px rgba(23,29,40,.07);
--lift:0 2px 6px rgba(23,29,40,.09), 0 16px 34px rgba(23,29,40,.14);
}
/* 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,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.tier,
.article figure{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,
.tier{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier: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,
.tier:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}