/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"DM Serif Display Fallback";src:local("Georgia");font-weight:400;size-adjust:101.27%;ascent-override:102.30%;descent-override:33.08%;line-gap-override:0.00%}
@font-face{font-family:"DM Sans Fallback";src:local("Arial");font-weight:400;size-adjust:105.80%;ascent-override:93.76%;descent-override:29.30%;line-gap-override:0.00%}
@font-face{font-family:"DM Sans Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:103.21%;ascent-override:96.11%;descent-override:30.04%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   Femicoredaily - femicoredaily.com

   COMPONENT SYSTEM taken from the UI reference at alkatidde.com: a soft
   rounded product card in the hero's right column, a curved tint blob behind
   it, pill fact chips, hairline-bordered cards on a light ground, a three-up
   price ladder with the best value raised, and an accordion FAQ.

   COLOUR is NOT taken from that reference. It is derived from the product
   bottle in assets/:
     - the slate-blue label band  #90a8b0 - #b0c0c8, darkened to #3B6580 so
       that white text on it AND the token itself on the tinted clay both
       clear WCAG AA. Both directions were measured, not eyed.
     - the near-black navy of the FEMICORE wordmark, which becomes the ink
     - a cranberry secondary #A32740, taken from the cranberry extract that is
       the second name on the printed panel and the one the vendor's own asset
       names call "red-toned"
   The GROUND is PALE CLAY, which is this site's assigned slot. Warm earthy
   ground against a cool slate accent is the whole identity, and it is
   deliberately not the warm blush that alkatidedaily.com already holds.

   TYPE: DM Serif Display (display) + DM Sans (body).

   CHROME for this site, and the header is the distinctive part of it:
     - TWO-ROW HEADER WHERE THE SECOND ROW IS THE STICKY ONE. The brand row
       scrolls away; the menu strip beneath it stays. The two rows are
       SIBLINGS of <body>, never nested, because a sticky element can only
       travel inside its parent's box and a wrapper around both would let the
       strip scroll off with it.
     - ASYMMETRIC 70/30 FOOTER: a wide brand and method panel carrying the NAP
       block on the left, a narrow stacked link column on the right.
     - 18px cards with a hairline and a very soft shadow, 12px buttons with the
       header CTA as the only pill, and a quiet fade-up between sections.

   Rules that are not negotiable anywhere in this file:
     - every .wrap companion uses padding-block, never a padding shorthand,
       or the page gutter is wiped below the container width (pitfall 46)
     - overflow-x:clip on html and body, never hidden, which would kill every
       position:sticky on the page (pitfall 5)
     - nothing a visitor reads sits below the floors in typography.md
   ========================================================================== */

/* ---- DESIGN TOKENS -------------------------------------------------------- */
:root{
  /* ---- ground: pale clay (assigned slot) ---- */
  --paper:#F1EBE1;
  --paper-tint:#E7DFD2;
  --paper-card:#ffffff;
  --paper-deep:#DCD1C0;

  /* ---- ink, from the wordmark on the label, warmed for the clay ground ---- */
  --ink:#262019;
  --ink-dk:#262019;
  --ink-soft:#3D352C;
  --muted:#4A4137;
  --faint:#5F5548;
  --line:#DFD4C6;
  --line-soft:#EAE2D7;

  /* ---- accent, from the slate-blue band on the bottle.
         Darkened from the band's #90a8b0 until white text on it and the token
         itself on the tinted ground both clear WCAG AA. Measured, not eyed. ---- */
  --accent:#3B6580;
  --accent-deep:#2A4C61;
  --accent-tint:#EAF1F6;
  --accent-line:#C0D6E2;
  --accent-glow:rgba(59,101,128,.22);

  /* ---- secondary, from the cranberry on the panel ---- */
  --gold:#A32740;
  --gold-deep:#7A1A2F;
  --gold-soft:#FBEDEF;
  --gold-line:#EAC5CC;

  /* ---- type ---- */
  --display:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif;
  --serif:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif;
  --sans:'DM Sans','DM Sans Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1120px;
  --measure:760px;
  --measure-wide:980px;
  --r:18px;
  --r-s:10px;
  --r-l:28px;
  --radius:18px;
  --shadow:0 12px 34px rgba(42,33,38,.08);
  --shadow-sm:0 3px 14px rgba(42,33,38,.055);
  --shadow-lg:0 26px 60px rgba(42,33,38,.14);
}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
/* scroll-padding clears the STICKY MENU STRIP only (~57px), not a whole
   header, because the brand row above it scrolls away and is not there when
   an anchor lands. Measured against .nav, not guessed. */
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:74px}
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.0625rem}
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.18;
  font-weight:400;letter-spacing:0}
b,strong{color:var(--ink-soft);font-weight:700}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:22px}

/* ---- 1. UTILITY BAR ------------------------------------------------------ */
.util{background:var(--accent-deep);color:rgba(255,255,255,.88);font-size:0.9062rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  padding-block:9px}
.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}

/* ---- 2. NAV: two rows, and the SECOND one is the sticky one -------------
   The brand row is in normal flow and scrolls away. The menu strip beneath it
   pins to the top and stays for the whole page.

   THE TWO ROWS ARE SIBLINGS, NOT NESTED. A sticky element can only travel
   inside its parent's box, so wrapping both rows in one <header> would let the
   strip scroll off the moment that wrapper cleared the viewport -- which looks
   exactly like sticky "not working" and is the commonest way this layout is
   got wrong. .nav's parent is <body>, so its travel is the whole document.

   body has overflow-x:clip rather than hidden, which is what keeps every
   position:sticky on this page alive (pitfall 5). Do not change it to hidden.

   Anything else that sticks has to clear THIS STRIP rather than a full
   header: the hero rail offset and scroll-padding-top below are both measured
   against it (pitfall 4). */
.brandrow{background:var(--paper);border-bottom:1px solid var(--line-soft)}
.brandrow__in{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-block:17px}
.brandrow__r{display:flex;align-items:center;gap:14px;flex:none}
.nav{position:sticky;top:0;z-index:900;background:rgba(241,235,225,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(38,32,25,.05)}
.nav__row{display:flex;align-items:center;gap:26px;padding-block:10px;
  flex-wrap:nowrap}
.navmenus{flex:1 1 auto;min-width:0}
.menu{display:flex;align-items:center;gap:21px;flex-wrap:nowrap}
.menu a{font-family:var(--sans);font-size:.9375rem;font-weight:500;
  color:var(--ink-soft);white-space:nowrap;position:relative;padding-block:5px}
.menu a:hover{color:var(--accent-deep);text-decoration:none}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);border-radius:2px;transition:right .22s ease}
.menu a:hover::after,.menu a[aria-current]::after{right:0}
.brand{display:flex;align-items:center;gap:0;flex:none}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;margin-right:11px;flex:none}
.brand__t{display:block;line-height:1.05}
.brand__prod{display:block;font-family:var(--display);font-size:1.36rem;
  color:var(--ink);letter-spacing:.005em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.brand__firm{display:block;font-family:var(--sans);font-size:.6875rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.nav__cta{flex:none;margin-left:auto}
.nav__cta .btn{border-radius:999px;padding:10px 22px}
.nav__tel{flex:none;font-weight:700;font-size:.9062rem;color:var(--accent-deep);
  white-space:nowrap;border:1px solid var(--accent-line);border-radius:999px;
  padding:7px 15px;background:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:36px;
  padding:7px;flex:none}
.burger span{display:block;height:2px;background:var(--ink);margin:5px 0;
  border-radius:2px;transition:transform .2s ease,opacity .2s ease}

/* ---- 3. BUTTONS: 12px, the nav CTA is the only pill ---------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;font-size:.9688rem;line-height:1.2;
  padding:14px 27px;border-radius:12px;border:1px solid transparent;
  cursor:pointer;text-align:center;transition:transform .2s ease,box-shadow .2s ease,
  background .2s ease,color .2s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 9px 24px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);box-shadow:0 15px 32px var(--accent-glow)}
.btn--ghost{background:#fff;color:var(--accent-deep);border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--gold);color:#fff}
.btn--gold:hover{background:var(--gold-deep);color:#fff}
.btn--lg{padding:17px 33px;font-size:1.0312rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: copy LEFT, product RIGHT in a tall rounded card ------------ */
.hero{position:relative;background:var(--paper);border-bottom:1px solid var(--line);
  overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;
  align-items:start;padding-block:50px 64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--accent-line);color:var(--accent-deep);font-weight:700;
  font-size:.8438rem;padding:8px 17px;border-radius:999px;box-shadow:var(--shadow-sm);
  letter-spacing:.03em}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.25rem);margin:19px 0 0;line-height:1.08}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:.9375rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-top:13px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:23px 0 0}
.hero__sub{margin:18px 0 0;font-size:1.0625rem;max-width:56ch}

.ticks{margin:21px 0 0;display:grid;gap:10px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem}
.ck{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.6875rem;font-weight:700;margin-top:4px}

.pay{display:flex;align-items:center;gap:13px;margin:19px 0 0;
  font-size:.9062rem;color:var(--faint)}
.pay img{width:230px;height:29px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.factpills li{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:.9062rem;color:var(--faint)}
.factpills li b{color:var(--ink-soft)}

.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;
  border-radius:var(--r);background:#fff;overflow:hidden;border:1px solid var(--line)}
.figures div{padding:17px 19px}
.figures div+div{border-left:1px solid var(--line-soft)}
.figures b{display:block;font-family:var(--display);font-size:1.85rem;line-height:1;
  color:var(--accent-deep)}
.figures span{display:block;margin-top:6px;font-size:0.9062rem;color:var(--faint)}

.hero__media{position:relative}
.hero__stick{position:relative;display:block}
/* The assigned slot: the bottle sits inside a TALL soft rounded card with a
   botanical tint washed behind it. The tint is a pseudo-element of the card
   rather than of .hero__media, because the hero motif owns .hero__media's
   pseudo-elements and the two would overwrite each other. */
.hero__card{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);padding:30px 28px 34px;box-shadow:var(--shadow-lg);
  text-align:center;overflow:hidden}
.hero__card::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(74% 46% at 50% 68%,var(--accent-tint),transparent 72%),
    radial-gradient(52% 30% at 22% 24%,var(--gold-soft),transparent 74%);
  z-index:0}
.hero__card img{position:relative;margin-inline:auto;max-width:100%;z-index:1}
.hero__tag{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);
  background:var(--accent-deep);color:#fff;font-size:0.9062rem;font-weight:700;
  letter-spacing:.09em;padding:8px 17px;border-radius:999px;white-space:nowrap;z-index:4}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-s);padding:12px 16px;box-shadow:var(--shadow-lg);
  font-size:.9375rem;font-weight:700;color:var(--ink);z-index:4;line-height:1.25}
.floaty small{display:block;color:var(--gold-deep);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700;margin-top:4px}
.floaty--tl{top:16px;left:-16px}
.floaty--br{bottom:30px;right:-16px}

/* The copy column runs well past 1,300px, so a statically placed card ends up
   stranded beside the bottom of it. A sticky rail keeps the bottle beside
   whatever the reader is on.

   THE OFFSET IS THE STICKY MENU STRIP, NOT A WHOLE HEADER. On this site the
   brand row scrolls away and only the ~57px menu strip stays, so a rail
   offset by the old two-row height would have left a 60px hole under the
   strip. Offset by 0 and measure (pitfall 4).

   Capped by height so it SCALES on a short laptop rather than being switched
   off by a min-height query, which is the mistake that made this feature
   silently disappear on an earlier build (pitfall 15). */
@media(min-width:1025px){
  .hero__media{position:sticky;top:78px;align-self:start;
    height:calc(100vh - 92px);min-height:350px;
    display:flex;align-items:flex-start;justify-content:center}
  .hero__stick{max-height:calc(100vh - 128px)}
  .hero__stick img{max-height:calc(100vh - 300px);min-height:180px;
    width:auto;object-fit:contain}
}

.hero__rating{display:flex;align-items:center;gap:10px;margin:17px 0 0;
  font-size:.9375rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}
.rev__stars{color:var(--gold);letter-spacing:1px}

/* ---- 5. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:21px 25px;margin:22px 0 0;
  box-shadow:var(--shadow-sm)}
/* In the hero the answer is not a card: the reference runs it as flowing
   paragraphs under the H1. The wrapper stays, because it is the speakable
   selector and the AEO block; only the card styling comes off. */
.hero .answer{background:none;box-shadow:none;border:0;border-left:3px solid var(--gold);
  border-radius:0;padding:2px 0 2px 20px;margin:19px 0 0}
.hero .answer .qtag{display:none}
.hero .answer p{font-size:1.0625rem;color:var(--muted);margin:0 0 .8em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:700;font-size:.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:.55em}
.answer p{margin:0;font-size:1.0625rem}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:24px 38px;padding-block:22px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9062rem;color:var(--faint);margin-top:8px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The nav collapse and the hero's phone ordering decide what the first paint
   looks like, so they sit ABOVE the critical marker and are inlined into every
   page head. Below it, a phone would paint the hero in DOM order until the
   async sheet landed, which is a visible jump on the one screen that matters. */
@media(max-width:1330px){.menu{gap:16px}.menu a{font-size:.9062rem}}
@media(max-width:1190px){.nav__tel{display:none}}
@media(max-width:1024px){
  /* The burger moves into the STICKY strip rather than the brand row, so the
     menu is still reachable after the brand row has scrolled away. That is the
     whole reason this layout puts the menu on the second row. */
  .nav__row{gap:14px}
  .navmenus{position:fixed;inset:0 0 0 auto;width:min(326px,86vw);
    background:#fff;padding:86px 26px 26px;transform:translateX(102%);
    transition:transform .28s ease;z-index:940;box-shadow:var(--shadow-lg);
    overflow-y:auto}
  .navmenus.open{transform:translateX(0)}
  .menu{flex-direction:column;align-items:flex-start;gap:2px}
  .menu a{font-size:1.0625rem;padding-block:12px;width:100%}
  .menu a::after{display:none}
  .burger{display:block;order:1;flex:none}
  .nav__cta{margin-left:auto;order:2}
  /* A second header row costs a phone ~57px before the hero starts, so both
     rows are tightened here to keep the hero targets in hero.md: H1 above
     300px and the CTA above 1100px. Measured at 390x844, not estimated. */
  .brandrow__in{padding-block:9px}
  .nav__row{padding-block:8px}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:20px;padding-block:22px 46px}
  /* display:contents promotes the copy column's children to grid items so the
     phone order can be set individually. DOM order is untouched: the Quick
     Answer still follows the H1 for parsers and for the speakable selector. */
  .hero__copy{display:contents}
  .hero__copy>.pill{order:1;justify-self:start}
  .hero__copy>h1{order:2}
  .hero__media{order:3}
  .hero__copy>.answer{order:4}
  .hero__copy>.hero__cta{order:5}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.pay{order:7}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.ticks{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card{padding:16px 16px 20px}
  .hero__card img{max-width:222px}
  .floaty{display:none}
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.05rem;margin-top:14px}
  .hero .answer{margin-top:15px;padding-left:16px}
  .figures{grid-template-columns:1fr}
  .figures div+div{border-left:0;border-top:1px solid var(--line-soft)}
  /* The burger is the one control a phone user must hit, and at 42x36 it was
     under the 44px minimum (pitfall 62). Measured, not assumed. */
  .burger{width:44px;height:44px;padding:10px 7px}
}
@media(max-width:430px){
  .nav__cta .btn{display:none}
  .util__item:nth-child(2){display:none}
}


/* ---- hero motif -- petal-drift ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:radial-gradient(130% 95% at 26% 12%,#e3c8c4,#f1ebe1 58%,#f1ebe1)}.hero__media::before,.hero__media::after{content:'';position:absolute;left:50%;top:0;width:148%;aspect-ratio:1.35;translate:-50% -26%;border-radius:62% 38% 55% 45%/58% 52% 48% 42%;background:radial-gradient(60% 60% at 40% 40%,rgba(163,39,64,0.42),transparent 72%);animation:fcPetal 19s ease-in-out infinite;z-index:1}.hero__media::after{animation-delay:9.5s;scale:.82}@keyframes fcPetal{0%,100%{transform:rotate(-4deg) translateY(0);opacity:.72}50%{transform:rotate(5deg) translateY(2.5%);opacity:.42}}
@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: 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 PAGE ONLY. class="hero" is on index.html and nowhere else on this
   site, so every selector here is anchored to .hero; the one pricing rule is
   anchored to body:has(.hero). Above the marker because it moves boxes and
   because it overrides rules that are themselves inlined. Keep it small. */

/* 1. Hero rhythm, desktop only. Measured at 1440x900: the hero CTA pair ran
   805 -> 929, so the second button was 29px under the fold and the buy
   button sat on the fold line. Tightening the stack above it lifts the whole
   pair clear. The phone stack (display:contents + order, <=980px) is composed
   separately and is not touched. */
@media(min-width:981px){
  .hero .hero__grid{padding-block:30px 56px}
  .hero h1{margin-top:12px}
  .hero .answer{margin-top:14px}
  .hero .answer p{max-width:62ch}
  .hero .hero__cta{margin-top:16px;gap:10px}
  .hero .hero__cta .btn--lg{padding-block:15px}
}

/* 2. The recommended tier is raised with MARGIN, not transform: the reveal
   pass sets transform:none on [data-reveal].in and already kills the old
   translateY(-10px), so that card renders flat today. A negative margin-top
   on a stretched grid item lifts the card's top edge and leaves its bottom
   -- and therefore the Add To Cart baseline the three cards share -- where
   it was. */
@media(min-width:921px){
  body:has(.hero) .pricing .tier--feature{margin-top:-12px}
}

/* 3. Hero ground. The old wash was one dusty-pink blob at 26% 12%, directly
   behind the headline. This puts the cool accent behind the PRODUCT at the
   top right, keeps a whisper of the cranberry low on the left and lifts the
   clay. */
.hero{background:
  radial-gradient(62% 54% at 79% 4%,rgba(59,101,128,.14),rgba(59,101,128,0) 70%),
  radial-gradient(56% 50% at 4% 92%,rgba(163,39,64,.10),rgba(163,39,64,0) 72%),
  linear-gradient(180deg,#F7F2EA,#F1EBE1 60%)}

/* 4. HERO MOTIF -- slot family "settle": a soft halo that breathes once, very
   slowly, and then stops. Pseudo-elements of the media column only; the <img>
   is the LCP element, is preloaded, and is never animated. transform and
   opacity only. Sized at 150%/172% of the media column so it reads OUTSIDE
   the opaque product card rather than behind it. Keyframe name is new -- the
   sheet already owns fcPetal. */
.hero .hero__media::before,
.hero .hero__media::after{
  left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;scale:1;
  border-radius:50%;
  background:radial-gradient(closest-side,
    rgba(59,101,128,.19),rgba(59,101,128,.065) 56%,rgba(59,101,128,0) 74%);
  animation:fcHaloSettle 5.6s cubic-bezier(.25,.85,.3,1) .25s both}
.hero .hero__media::after{
  width:172%;
  background:radial-gradient(closest-side,
    rgba(163,39,64,0) 60%,rgba(163,39,64,.14) 78%,rgba(163,39,64,0) 89%);
  animation-duration:7.4s;animation-delay:.6s}
@keyframes fcHaloSettle{
  0%{opacity:0;transform:scale(.88)}
  58%{opacity:1;transform:scale(1.05)}
  100%{opacity:.94;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .hero .hero__media::before,.hero .hero__media::after{animation:none}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:66px}
.sec--tight{padding-block:40px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:#fff}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:34px}
.eyebrow{display:inline-block;font-family:var(--sans);font-size:.8438rem;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.rule{display:block;width:54px;height:3px;background:var(--gold);border-radius:2px;
  margin-bottom:14px}
.sec--center .rule{margin-inline:auto}
.sec h2{font-size:clamp(1.68rem,3vw,2.35rem);margin-bottom:13px}
.sec h3{font-size:1.24rem;margin-bottom:9px}
.sec h4{font-size:1.06rem;margin-bottom:7px}
.lead{font-size:1.125rem;color:var(--muted)}
.note{font-size:.9062rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.note,.sec>.wrap>.pullquote,.sec>.wrap>blockquote{max-width:var(--measure);
  margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:var(--measure-wide);
  margin-inline:auto}
.sec>.wrap>ul,.sec>.wrap>ol{padding-left:0}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:35px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:3px;
  width:25px;height:25px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.062rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.sec>.wrap>ul>li{position:relative;padding-left:26px}
.sec>.wrap>ul>li+li{margin-top:9px}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:4px;top:11px;width:7px;
  height:7px;border-radius:50%;background:var(--gold)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.5rem;
  line-height:.84;color:var(--accent);padding:8px 13px 0 0}

.pullquote{border-left:3px solid var(--gold);padding:6px 0 6px 23px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.32rem;color:var(--ink);
  line-height:1.4}
.pullquote cite{display:block;margin-top:10px;font-style:normal;font-size:.8438rem;
  color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:700}

.crumbs{font-size:.9062rem;color:var(--faint);padding-block:15px 0}
.crumbs a{color:var(--faint)}

/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:27px 25px;box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{font-size:1.16rem}
.card p{font-size:1.0625rem;color:var(--faint)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:16px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:25px 27px 25px 72px;position:relative;box-shadow:var(--shadow-sm);
  counter-increment:s}
.step__n{position:absolute;left:23px;top:25px;width:35px;height:35px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-size:1.04rem}
.step__n::before{content:counter(s)}
.step h3{font-size:1.12rem}
.step p{font-size:1.0625rem;color:var(--faint)}
.step p+p{margin-top:.8em}

.chips{display:grid;gap:11px;margin:18px 0 0}
.chips li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.chips .ck{background:var(--gold);color:#fff;font-size:.8125rem}

.callout{background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:19px 23px;margin:24px auto;
  font-size:1rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border-left:4px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:19px 23px;margin:24px auto;
  font-size:1rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold);color:#fff;font-size:0.8438rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;
  border-radius:999px}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:17px 21px 0;font-family:var(--display);
  color:var(--ink);font-size:1.08rem}
.dtable th,.dtable td{padding:13px 21px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft)}
.dtable thead th{background:var(--accent-tint);color:var(--accent-deep);
  font-size:.9062rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  font-family:var(--sans)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.split--rev{grid-template-columns:.95fr 1.05fr}
.split__media{text-align:center}
.split__media img{margin-inline:auto;border-radius:var(--r)}

/* ---- 11. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,1fr)}
.shots figure{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.shots img{width:100%}
.shots figcaption{padding:19px 21px;font-size:.9062rem;color:var(--faint)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.08rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--accent-deep);color:rgba(255,255,255,.88);
  border-radius:var(--r-l);padding:30px 34px;display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:var(--accent-deep);border-radius:var(--r-l);padding:36px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.15rem;color:#fff;
  line-height:1}
.stats span{display:block;margin-top:8px;font-size:0.9062rem;color:rgba(255,255,255,.82)}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.badgewall figure{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:21px 15px;text-align:center;box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 11px}
.badgewall figcaption{font-size:.9062rem;color:var(--faint)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.95rem;
  margin-bottom:5px;font-family:var(--display)}

/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.whycard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:27px 25px;box-shadow:var(--shadow-sm);border-top:3px solid var(--accent)}
.whycard h3{font-size:1.12rem}
.whycard p{font-size:1.0625rem;color:var(--faint)}
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.forlist{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:27px;box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.12rem;margin-bottom:13px}
.forlist li{display:flex;gap:11px;font-size:1.0625rem;margin-bottom:10px}
.forlist li::before{content:"\2022";color:var(--gold);font-weight:700}

/* ---- 14. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm);display:grid;
  grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:start}
.ingcard>img{border-radius:var(--r-s);width:100%}
.ingcard h3{font-size:1.26rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.ingthumbs img{border-radius:var(--r-s)}
.facts{background:#fff;border:1px solid var(--ink);border-radius:var(--r-s);
  overflow:hidden;max-width:580px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:15px 22px;font-family:var(--display);
  font-size:1.24rem}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.facttab th{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.facttab tr.rule-row th,.facttab tr.rule-row td{border-bottom:3px solid var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}
.facttab .sub{font-size:.9062rem;color:var(--faint);font-weight:400;padding-top:0}

/* ---- 15. QA record sheet ------------------------------------------------- */
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;max-width:900px;margin-inline:auto;box-shadow:var(--shadow-sm)}
.qa__h{background:var(--accent-tint);padding:17px 24px;font-family:var(--display);
  font-size:1.1rem;color:var(--ink)}
.qa dl{margin:0;display:grid;grid-template-columns:34% 1fr}
.qa dt,.qa dd{padding:13px 24px;border-bottom:1px solid var(--line-soft);margin:0}
.qa dt{font-weight:700;color:var(--ink);font-size:1.062rem;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 16. PRICING --------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:32px 24px;text-align:center;position:relative;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column}
.tier--feature{border:2px solid var(--gold);box-shadow:var(--shadow-lg)}
@media(min-width:921px){.tier--feature{transform:translateY(-10px)}}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#fff;font-size:0.8438rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 15px;border-radius:999px;
  white-space:nowrap}
.tier h3{font-size:1.4rem;margin-bottom:2px}
.tier__supply{font-size:.8438rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:15px}
.tier img.pk{margin:0 auto 14px;max-height:150px;width:auto;object-fit:contain}
.tier img.prc{margin:0 auto 10px;max-width:168px;height:auto}
.tier__price{font-family:var(--display);font-size:1.62rem;color:var(--accent-deep);
  line-height:1.2;margin-bottom:6px}
.tier__rows{font-size:.9375rem;color:var(--faint);margin-bottom:19px;display:grid;gap:6px}
.tier__rows .was{text-decoration:line-through}
.tier .btn{margin-top:auto}
.guarantee{display:grid;grid-template-columns:.62fr 1.38fr;gap:34px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;
  box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.44rem;margin-bottom:12px}

/* ---- 17. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:25px;
  box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--gold);letter-spacing:1px;font-size:.95rem}
.tcard b{display:block;margin-top:9px;font-family:var(--sans);font-size:.9375rem;
  color:var(--ink);font-weight:700}
.tcard span{font-size:0.9062rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:11px}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tlife figure{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.tlife figcaption{padding:15px 17px;font-size:.9062rem;color:var(--faint)}
.bars{display:grid;gap:10px;max-width:470px}
.bar{display:grid;grid-template-columns:56px 1fr 54px;gap:12px;align-items:center;
  font-size:.9062rem;color:var(--faint)}
.bar__t{height:10px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--gold);border-radius:5px}
.dist{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;
  box-shadow:var(--shadow-sm)}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:12px;text-align:left}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.faq summary{padding:17px 23px;font-family:var(--display);
  color:var(--ink);cursor:pointer;font-size:1.1rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.45rem;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 23px 19px;font-size:1rem}
.faq__b p+p{margin-top:.8em}

/* ---- 19. REFS, BYLINE ---------------------------------------------------- */
.refs{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:25px 27px;box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.2rem;margin-bottom:13px}
.refs ol{counter-reset:r;display:grid;gap:10px}
.refs li{counter-increment:r;position:relative;padding-left:29px;font-size:1.062rem;
  color:var(--faint);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:700;
  color:var(--gold-deep)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:21px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:25px 27px;
  box-shadow:var(--shadow-sm);margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline b{font-family:var(--display);font-size:1.1rem;color:var(--ink);display:block;
  margin-bottom:8px}
.byline p{font-size:.9375rem;color:var(--faint)}

/* ---- 20. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:27px;box-shadow:var(--shadow-sm)}
.formcard h3{font-size:1.16rem;margin-bottom:7px}
.formcard label{display:block;font-size:.875rem;font-weight:700;color:var(--ink-soft);
  margin:15px 0 6px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 15px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:124px;resize:vertical}
.formcard .btn{margin-top:19px}

/* ---- 21. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--accent-deep);border-radius:var(--r-l);padding:40px 42px;
  color:rgba(255,255,255,.88)}
.final h2{color:#fff;font-size:clamp(1.55rem,3vw,2.15rem);margin-bottom:13px}
.final p{color:rgba(255,255,255,.88)}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-size:1.34rem;color:#fff;margin:15px 0 19px}
.final__sm{margin-top:1.2em;font-size:.9062rem}
.final .btn--cta{background:var(--gold);color:#fff}
.final .btn--cta:hover{background:#c23150;color:#fff}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.rel a{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:23px;
  display:block;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.rel a:hover{transform:translateY(-4px);box-shadow:var(--shadow);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.1rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9375rem;color:var(--faint)}

/* ---- 22. LEGAL ----------------------------------------------------------- */
.legal h2{margin-top:1.5em}
.legal h3{margin-top:1.2em}
.meta{font-size:.9062rem;color:var(--faint)}

/* ---- 23. FOOTER: asymmetric 70/30 ---------------------------------------
   A wide brand-and-method panel on the left carrying the NAP block, and one
   narrow stacked link column on the right. Deliberately NOT an even
   multi-column grid: that shape is already held elsewhere on the estate. */
footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:46px 22px;
  font-size:.9375rem}
footer a{color:rgba(255,255,255,.88)}
footer a:hover{color:#fff}
.fsplit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:52px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14)}
.fmain{min-width:0}
.faside{min-width:0;border-left:1px solid rgba(255,255,255,.14);padding-left:34px}
.fmark{margin-bottom:14px;filter:brightness(0) invert(1);opacity:.92}
.frole{font-size:1.062rem;margin-bottom:1.1em}
.fmethod{background:rgba(255,255,255,.06);border-radius:var(--r);padding:22px 25px;
  margin-bottom:24px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;
  align-items:center}
.fmethod img{flex:none}
.fmethod b{display:block;font-family:var(--display);font-size:1.16rem;color:#fff;
  margin-bottom:6px}
.fmethod p{font-size:1.062rem;color:rgba(255,255,255,.76)}
.fnap{font-size:.9375rem;line-height:1.75}
.fnap strong{color:#fff}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px;
  font-size:0.9062rem}
.fgroup+.fgroup{margin-top:22px}
.fgroup h4{color:#fff;font-family:var(--sans);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:11px;font-weight:700}
.fgroup li{margin-bottom:7px;font-size:1.062rem;line-height:1.5}
.flegal{padding-block:22px;border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.9062rem;line-height:1.9}
.disc{padding-top:18px;font-size:0.9062rem;line-height:1.65;color:rgba(255,255,255,.66)}
.disc p{margin-bottom:.9em}
.disc b{color:rgba(255,255,255,.92)}
.disc .copy{margin-top:16px;color:rgba(255,255,255,.55)}

/* ---- 24. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--accent-deep);
  color:#fff;transform:translateY(110%);transition:transform .3s ease}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding-block:12px;
  padding-inline:22px;display:flex;align-items:center;gap:18px;
  justify-content:space-between;flex-wrap:wrap;font-size:.9062rem}
.buybar__t b{color:#fff}
.buybar .from{color:#F5C3CD;font-weight:700}
.buybar .btn{padding:11px 23px}

/* ---- 25. BLOG ------------------------------------------------------------ */
.article{max-width:768px}
.article h1{font-size:clamp(1.95rem,3.8vw,2.75rem);margin-bottom:15px}
.article h2{font-size:1.56rem;margin:1.9em 0 .6em;scroll-margin-top:112px}
.article h3{font-size:1.2rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:23px;margin-bottom:9px}
.article ul li::before{content:"\2022";position:absolute;left:4px;color:var(--gold);
  font-weight:700}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:31px;margin-bottom:9px;counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--gold-deep);font-weight:700}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}
.article figcaption{font-size:.9062rem;color:var(--faint);margin-top:10px;
  border-left:2px solid var(--gold);padding-inline-start:13px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 13px;font-size:.9062rem;color:var(--faint);
  padding-block:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
/* var(--line) is a hairline colour and measured 1.34:1 against the ground,
   which is invisible rather than subtle. Measured, then raised. */
.postmeta .sep{color:var(--faint);opacity:.55}
.toc{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:21px 25px;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.8438rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--gold-deep);margin:0 0 11px;font-weight:700}
.toc ol{counter-reset:t;display:grid;gap:7px;margin:0}
.toc li{counter-increment:t;position:relative;padding-left:27px;font-size:1.062rem;
  margin-bottom:0}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:700}
.keypoints{background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:21px 25px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:.8438rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:11px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.posts article{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:21px 23px}
.posts h3{font-size:1.12rem;margin-bottom:9px}
.posts p{font-size:1.062rem;color:var(--faint)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:13px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
/* A shared component in a narrower column is a new component (pitfall 24).
   The prose column is 768px where the page wrap is 1120px, so the closing CTA
   needs its own geometry here, and a third set again on a phone. */
.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.6rem;line-height:1.22;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:140px;margin-inline:auto}
  .article .final--media h2{font-size:1.34rem}
  .article .final--media .btn{width:100%}
}
/* Re-assert the dark block with its container as an ancestor, or a later
   .article rule of equal specificity repaints it dark-on-dark (pitfall 57). */
/* An inline link inside a dark block inherits the base rule a{color:
   var(--accent-deep)} -- which is the exact value .promo, .stats, .final and
   .buybar use as their BACKGROUND. That paints dark on dark and the text
   disappears while every structural check still passes (pitfall 57). Measured
   at 1.00:1 on index.html before this rule existed. Re-assert each dark
   container with itself as the ancestor. */
.promo a:not(.btn),.stats a:not(.btn),.final a:not(.btn),
.buybar a:not(.btn),.util a{color:#fff;text-decoration:underline;
  text-underline-offset:3px}
.promo a:not(.btn):hover,.stats a:not(.btn):hover,.final a:not(.btn):hover,
.buybar a:not(.btn):hover{color:#fff;opacity:.86}
.final p,.article .final p{color:rgba(255,255,255,.88)}
.final__price,.article .final .final__price{color:#fff}
.final__sm,.article .final .final__sm{color:rgba(255,255,255,.82)}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 26. MOTION: quiet fade-up ------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(15px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s ease}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.rel a:hover,.posts article:hover{transform:none}
  html{scroll-behavior:auto}
}

/* ---- 27. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.note,.sec>.wrap>.pullquote,.sec>.wrap>blockquote,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
}
@media(max-width:1024px){
  .badgewall{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g3,.g4,.whygrid,.tgrid,.tlife,.rel,.posts{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  /* Stacked, the DOM order would lead with the smallest pack. Lead with the
     one this page actually recommends. */
  .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}
  .final--media{grid-template-columns:1fr;gap:22px}
  .fsplit{grid-template-columns:minmax(0,1fr);gap:30px}
  .faside{border-left:0;border-top:1px solid rgba(255,255,255,.14);
    padding-left:0;padding-top:26px}
  .fmethod{grid-template-columns:minmax(0,1fr);gap:16px}
  .ingcard{grid-template-columns:120px minmax(0,1fr);gap:20px}
}
@media(max-width:700px){
  .sec{padding-block:48px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall{grid-template-columns:1fr}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 24px}
  .ingcard{grid-template-columns:1fr;gap:18px}
  .ingcard>img{max-width:260px;margin-inline:auto}
}
/* Tap target: a button on a phone must be reachable with a thumb. */
@media(max-width:600px){.btn{min-height:44px}}


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

/* The footer column link is the thing you tap, and it was 17px tall in
   35px of row pitch -- under the 24px WCAG AA floor. The padding grows the
   hit area to ~33px and the negative margin gives the space straight back,
   so the footer renders identically. inline-block (not block) keeps the
   hover underline the width of the words. See fix_footer_tap.py. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}

/* ==== 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--wide>figure:only-child{grid-column:1/-1;max-width:calc((100% - 48px) / 3);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(110%)}
/* ==== 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*/
/* ==========================================================================
   femicoredaily.com -- HOME PAGE surface pass. PAINT ONLY: radius, shadow,
   background, colour, transform, transition. Nothing here moves a box, so it
   needs a restamp rather than a rebuild.

   SCOPE. .hero is on index.html only, so ".hero ..." is automatically
   home-only. #pricing, the buttons, the header and the footer also exist on
   other pages, so those are scoped with body:has(.hero).

   SOURCE ORDER IS NOT LOAD-BEARING HERE. modern_surface.py and footer_type.py
   strip and re-append their own blocks on every build and land after this
   one. Every rule below therefore out-specifies them:
     modern_surface  .tier                      (0,1,0)
     this block      body:has(.hero) .pricing .tier   (0,3,1)
   and the depth tokens are declared on <body> rather than on :root, so they
   win by inheritance distance instead of by cascade order.
   ========================================================================== */

/* ---- depth: slot language "two tight stops, crisp" ----------------------
   0 1px 1px contact + a short ambient stop, tinted with THIS site's own ink
   rgb(38,32,25), never neutral black. modern_surface's version is the same
   two-stop idea blurred much wider (0 6px 18px), which is what made every
   panel read soft-edged. */
body:has(.hero){
  --shadow-sm:0 1px 1px rgba(38,32,25,.05), 0 2px 5px rgba(38,32,25,.05);
  --shadow:0 1px 1px rgba(38,32,25,.07), 0 4px 10px rgba(38,32,25,.09);
  --shadow-lg:0 1px 1px rgba(38,32,25,.10), 0 10px 24px rgba(38,32,25,.13);
  --lift:0 1px 1px rgba(38,32,25,.10), 0 8px 20px rgba(38,32,25,.15);
}

/* ---- the buying CTA is the only gradient -------------------------------
   The ghost button beside it stays flat white, so the pair reads as two
   weights. Written as background-IMAGE over the existing background-colour
   and driven by two custom properties, so the cranberry CTA in the closing
   band keeps its own hue instead of being repainted slate. Top stop measured
   against white: #4A7791 is 4.88:1, #B62E49 is 6.09:1. */
body:has(.hero) .btn--cta{
  --g1:#4A7791;--g2:#2A4C61;
  background-image:linear-gradient(168deg,var(--g1),var(--g2));
  box-shadow:0 1px 1px rgba(38,32,25,.10), 0 4px 10px var(--accent-glow)}
body:has(.hero) .btn--cta:hover{
  --g1:#3F6E88;--g2:#22414F;
  box-shadow:0 1px 1px rgba(38,32,25,.12), 0 9px 20px var(--accent-glow)}
body:has(.hero) .final .btn--cta{--g1:#B62E49;--g2:#7A1A2F}
body:has(.hero) .final .btn--cta:hover{--g1:#A32740;--g2:#68162A}

/* ---- one lift language for everything clickable: 2px --------------------
   The cards were on 4px and the pack cards on 2px, so the page lifted by two
   different amounts depending on what you pointed at. */
body:has(.hero) .card:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .posts article:hover{
  transform:translateY(-2px);box-shadow:var(--lift)}

/* ---- focus-visible. The sheet had exactly one :focus rule, on .skip. ---- */
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{
  outline:2px solid var(--accent-deep);outline-offset:3px}
body:has(.hero) .btn--cta:focus-visible,
body:has(.hero) .util a:focus-visible,
body:has(.hero) .final a:focus-visible,
body:has(.hero) .buybar a:focus-visible{outline-color:#fff;outline-offset:2px}

/* ---- pricing: ribbon = slot "inset pill on a rule" ----------------------
   The flag was a plain filled lozenge floating over the card edge. It now
   sits INSET into a hairline that runs out of both of its shoulders. The
   segments are pseudo-elements of the flag itself, so no markup changes and
   no box moves. */
body:has(.hero) .pricing .tier__flag{
  background:var(--paper-card);color:var(--gold-deep);
  border:1px solid var(--gold-line);
  box-shadow:0 1px 1px rgba(38,32,25,.06), 0 4px 10px rgba(38,32,25,.09)}
body:has(.hero) .pricing .tier--feature .tier__flag{
  background:var(--gold);color:#fff;border-color:var(--gold)}
body:has(.hero) .pricing .tier__flag::before,
body:has(.hero) .pricing .tier__flag::after{
  content:'';position:absolute;top:50%;width:54px;height:1px}
body:has(.hero) .pricing .tier__flag::before{
  right:100%;margin-right:9px;
  background:linear-gradient(90deg,rgba(234,197,204,0),var(--gold-line))}
body:has(.hero) .pricing .tier__flag::after{
  left:100%;margin-left:9px;
  background:linear-gradient(270deg,rgba(234,197,204,0),var(--gold-line))}

/* ---- the recommended tier is a different surface, not just a border ----
   modern_surface's .tier{box-shadow:var(--shadow)} had flattened this card
   back to the same shade as the other two. The raise itself is a margin and
   lives above the critical marker; nothing here uses transform at rest, so
   the reveal pass cannot cancel it. */
/* ORDER INSIDE THIS BLOCK IS LOAD-BEARING: .pricing .tier and
   .pricing .tier--feature are both (0,3,1), so the featured card has to come
   SECOND or the generic rule repaints it. The first version of this pass had
   them the other way round and the featured card rendered with exactly the
   same shadow as its neighbours -- measured, not assumed. */
body:has(.hero) .pricing .tier{box-shadow:var(--shadow)}
body:has(.hero) .pricing .tier:hover{box-shadow:var(--lift)}
body:has(.hero) .pricing .tier--feature{
  background:linear-gradient(180deg,var(--gold-soft),#fff 38%);
  border-color:var(--gold);
  box-shadow:0 1px 1px rgba(38,32,25,.10), 0 14px 30px rgba(122,26,47,.15)}
body:has(.hero) .pricing .tier--feature:hover{
  box-shadow:0 1px 1px rgba(38,32,25,.12), 0 20px 38px rgba(122,26,47,.20)}

/* ---- dashed separators between the feature rows ------------------------
   Painted as a background, not as a border: a border or a padding would add
   height to the row and move the three Add To Cart buttons off the single
   baseline the pack cards are engineered to share. */
body:has(.hero) .pricing .tier__rows span:not(:last-child){
  background-image:repeating-linear-gradient(90deg,
    var(--line) 0 3px,rgba(0,0,0,0) 3px 7px);
  background-size:100% 1px;background-repeat:no-repeat;
  background-position:left bottom}

/* ---- hero furniture picks up the crisp depth --------------------------- */
.hero .hero__card{box-shadow:var(--shadow-lg)}
.hero .floaty{box-shadow:var(--shadow-lg)}
.hero .hero__tag{box-shadow:0 1px 1px rgba(38,32,25,.12), 0 6px 14px rgba(38,32,25,.16)}
.hero .pill{box-shadow:var(--shadow-sm)}
.hero .factpills li{transition:border-color .2s ease,color .2s ease}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .card:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .posts article:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/

/*!MOBILE-MENU-FIX-START*/
/* ==========================================================================
   MOBILE MENU FIX - the drawer was trapped inside the header
   --------------------------------------------------------------------------
   header.nav carries a backdrop-filter, which makes it the containing block
   for its position:fixed descendants. The drawer's `inset:0 0 0 auto` then
   resolved against the header's own 412x61 box instead of the viewport, so it
   opened as a 326x112 stub with 326px of content inside it - two links of 7
   reachable, the rest clipped, and the brand covered.

   Dropping the filter below 1025px hands the drawer back to the viewport and
   it becomes the full-height panel it was written to be. Desktop keeps the
   glass, where there is no drawer to break. It is also the cheaper choice on
   a phone: a full-width backdrop-filter on a sticky header is re-sampled on
   every scroll frame.
   ========================================================================== */
@media (max-width:1024px){
  header.nav{-webkit-backdrop-filter:none;backdrop-filter:none}
  /* belt and braces: even if some other ancestor ever traps it again, the
     drawer still gets a real height and can scroll to its last link. */
  .navmenus{max-height:100svh;overflow-y:auto;overscroll-behavior:contain}
}
/*!MOBILE-MENU-FIX-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{font-size:16px}
footer .disc{font-size:16px}
footer .fgroup h4{font-size:15px}
footer .flegal{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 45 box-shadow declaration(s)
   and 4 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 (38,32,25), 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{
  --shadow:0 1px 2px rgba(38,32,25,.06), 0 6px 18px rgba(38,32,25,.07);
  --lift:0 2px 6px rgba(38,32,25,.09), 0 16px 34px rgba(38,32,25,.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. */
.keypoints,
.callout,
.alert,
.faq,
.answer,
.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}