/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Inter Fallback";src:local("Arial");font-weight:400;size-adjust:107.47%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.34%;ascent-override:94.66%;descent-override:23.57%;line-gap-override:0.00%}
@font-face{font-family:"Poppins Fallback";src:local("Arial");font-weight:400;size-adjust:114.10%;ascent-override:92.02%;descent-override:30.67%;line-gap-override:8.76%}
@font-face{font-family:"Poppins Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:108.07%;ascent-override:97.16%;descent-override:32.39%;line-gap-override:9.25%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   ERECPOWER — erecpowero.com
   Component system adapted from the BurnTide reference: Poppins display +
   Inter body, pill buttons with a gradient CTA, soft rounded cards, sticky
   nav, floaty hero badges.
   Palette derived from the ErecPower bottle — gloss black with crimson label
   bands and white type — so the ground is cool near-white, the dark bands are
   near-black, and the accent is the label crimson.
   ========================================================================== */

:root{
  /* near-black, from the bottle */
  --dark:#171316; --dark2:#241d21;
  /* crimson, from the label bands */
  --accent:#b3273c; --accent2:#cf2f47; --accent-deep:#7f1a2b; --accent-ink:#fff;
  --accent-tint:#fdeef1; --accent-line:#f2ced6;
  /* cool ground */
  --paper:#ffffff; --tint:#f8f6f7; --tint2:#efebed; --line:#e6e0e3;
  --ink:#1c181b; --muted:#635c60; --faint:#726c71;
  /* secondary metal */
  --steel:#8d939b; --steel-deep:#6a7079;
  --shadow:0 18px 40px -22px rgba(23,19,22,.45);
  --shadow-soft:0 10px 26px -18px rgba(23,19,22,.35);
  --wrap:1160px; --prose:68ch;
}

*{box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:86px}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px;
  overflow-x:clip;max-width:100%;-webkit-font-smoothing:antialiased}
img,svg,video,iframe,table,figure{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;color:var(--dark);line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.3rem);font-weight:800;letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3.5vw,2.5rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1rem}
table{border-collapse:collapse}
section[id]{scroll-margin-top:86px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.prose,.article,.legal{max-width:var(--prose);margin-inline:auto}
.center{text-align:center}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:var(--accent);padding:10px 16px;border-radius:8px;z-index:2000}
.skip:focus{left:12px;top:12px}

.sec,.section{padding:76px 0}
.sec--tint,.section--tint{background:var(--tint)}
.sec--dark,.section--dark{background:var(--dark);color:#ddd4d8}
.sec--dark h2,.sec--dark h3,.sec--dark h4{color:#fff}
.sec--dark b,.sec--dark strong{color:#fff}
.section__head{max-width:780px;margin-bottom:38px}
.section--center .section__head{margin-inline:auto;text-align:center}

.eyebrow{display:inline-block;font:700 .78rem/1 'Poppins',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);background:var(--accent-tint);
  padding:8px 15px;border-radius:999px;margin-bottom:16px}
.sec--dark .eyebrow{background:rgba(255,255,255,.09);color:#f0c3cb}
.lead{font-size:1.12rem;color:var(--muted)}
.sec--dark .lead{color:#c3b8bd}
.note{font-size:0.9062rem;color:var(--faint)}
.meta{font-size:0.9062rem;color:var(--faint);margin:-.3em 0 1.6em}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:800 1.02rem/1 'Poppins',sans-serif;padding:17px 30px;border-radius:999px;
  cursor:pointer;border:0;transition:.18s;text-align:center;min-height:48px;text-decoration:none}
.btn:hover{text-decoration:none}
.btn--cta{background:linear-gradient(180deg,var(--accent2),var(--accent));color:var(--accent-ink);
  box-shadow:0 12px 26px -10px rgba(179,39,60,.7)}
.btn--cta:hover{transform:translateY(-2px);filter:brightness(1.06);color:#fff}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:var(--dark2);color:#fff;transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--accent);border:2px solid var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);background:var(--accent-tint)}
.btn--lg{padding:20px 40px;font-size:1.1rem}
.btn--block{display:flex;width:100%}

/* ---- topbar + nav ---- */
/* the old centred topbar is replaced by the split utility bar in section 30 */

header.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  transition:transform .32s cubic-bezier(.4,0,.2,1)}
.nav--hidden{transform:translateY(-100%)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
/* two text nodes: a flex gap here would render "Erec Power" */
.brand{display:inline-flex;align-items:center;gap:0;font:800 1.35rem/1 'Poppins',sans-serif;color:var(--dark)}
.brand:hover{text-decoration:none}
.brand span{color:var(--accent)}
.brand svg{width:30px;height:30px;flex:none;margin-right:10px}
.menu{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.menu a{color:var(--dark);font-weight:600;font-size:.94rem}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;min-width:44px;min-height:44px}
.burger span{display:block;width:26px;height:3px;background:var(--dark);border-radius:3px;margin:5px 0}
@media(max-width:1180px){
  .menu{display:none}
  .menu.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);
    padding:6px 20px;box-shadow:var(--shadow);max-height:76vh;overflow:auto}
  .menu.open li{border-top:1px solid var(--line)}
  .menu.open a{display:block;padding:14px 0;min-height:44px}
  .burger{display:block}
}

/* ---- sticky buy bar ---- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--dark);color:#fff;
  transform:translateY(105%);transition:transform .28s ease;box-shadow:0 -6px 24px rgba(0,0,0,.3)}
.buybar.show{transform:translateY(0)}
.buybar__in{display:flex;align-items:center;justify-content:space-between;gap:14px;
  max-width:var(--wrap);margin-inline:auto;padding:10px 20px}
.buybar__t{font-size:.95rem;line-height:1.3}
.buybar__t b{display:block;font-family:'Poppins',sans-serif;font-size:1.02rem}
.buybar__t .from{color:#f0a8b4;font-weight:700}
@media(max-width:560px){.buybar__t{font-size:0.9062rem}.buybar__t b{font-size:.92rem}}

/* ---- hero ---- */
.hero{background:linear-gradient(160deg,#ffffff 0%,#f7f4f5 55%,#f1e9eb 100%);position:relative;overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;padding-block:58px 66px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:#f0c3cb;
  font:700 .74rem/1 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 15px;border-radius:999px;margin-bottom:18px}
.hero h1 span{color:var(--accent)}
.hero__sub{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:0.9688rem;font-weight:600;color:var(--muted)}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:22px}
.ticks{list-style:none;padding:0;margin:20px 0 22px;display:grid;gap:11px}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-weight:500;font-size:1.062rem}
.ticks .ck{flex:0 0 22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:.72rem;margin-top:2px}

/* the copy column is tall, so the pack shot rides a sticky rail and stays centred */
.hero__media{position:relative;text-align:center}
.hero__stick{position:relative;width:100%;background:linear-gradient(155deg,var(--tint) 0%,var(--tint2) 100%);
  border:1px solid var(--line);border-radius:20px;padding:30px 26px;box-shadow:var(--shadow)}
.hero__stick img{margin:0 auto;max-width:84%;filter:drop-shadow(0 22px 30px rgba(23,19,22,.28))}
/* The rail sticks at every desktop height. Gating it on a tall viewport meant
   anyone on a short laptop screen lost the effect entirely; instead the pack
   shot scales down with the viewport so it can never clip. */
@media(min-width:1025px){
  .hero__media{position:sticky;top:92px;align-self:start;
    height:calc(100vh - 92px);min-height:360px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center}
  .hero__stick img{max-height:calc(100vh - 300px);min-height:170px;width:auto;object-fit:contain}
}
.floaty{position:absolute;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:10px 14px;box-shadow:var(--shadow);font:700 .8rem/1.2 'Poppins',sans-serif;color:var(--dark);z-index:2}
.floaty small{display:block;color:var(--accent);font-size:0.9062rem;letter-spacing:.06em;font-weight:700}
.floaty--tl{top:10px;left:-8px}
.floaty--br{bottom:14px;right:-8px}
@media(max-width:560px){.floaty{display:none}}

/* fact pills + figure tiles */
.factpills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}
.factpills li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font-size:0.9062rem;font-weight:600;color:var(--muted)}
.factpills li b{color:var(--accent)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.figures div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 10px;text-align:center}
.figures b{display:block;font-family:'Poppins',sans-serif;font-weight:800;font-size:1.5rem;color:var(--accent);line-height:1.05}
.figures span{font-size:0.9062rem;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}

/* ---- quick answer (AEO) ---- */
.answer{background:#fff;border:1px solid var(--accent-line);border-left:5px solid var(--accent);
  border-radius:0 16px 16px 0;padding:22px 26px;margin:0 0 22px;box-shadow:var(--shadow-soft)}
.answer .tag{display:block;font:800 .7rem/1 'Poppins',sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.8em}
.answer p{margin:0 0 .8em;color:var(--muted)}
.answer p:last-child{margin:0}
.answer p.first{color:var(--dark);font-weight:600;font-size:1.062rem}

/* In the hero the Quick Answer is not a card: the approved layout runs it as
   two flowing paragraphs under the H1. The .answer wrapper stays -- it is the
   speakable selector and the AEO block -- but the card styling and the label
   come off. Keep this above the critical-CSS cut marker so the inline copy
   carries it too, or 31 pages paint the old card first (pitfall 47). */
.hero .answer{background:none;border:0;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .tag{display:none}
.hero .answer p{font-size:1.062rem;color:var(--muted);margin:0 0 .85em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--dark)}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.95rem;color:var(--muted)}
.hero__rating b{color:var(--dark)}
.hero__rating .stars{color:var(--accent);letter-spacing:.08em}
.ticks--gone{display:none}

/* ---- quick-facts table ---- */

/* ---- hero motif -- rise-glow ---------------------------------------- */
.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(164deg,#ffffff,#f6dade 58%,#ffffff)}.hero__media::before{content:'';position:absolute;inset:auto 12% 2% 12%;height:52%;border-radius:50%;background:radial-gradient(closest-side,rgba(207,47,71,0.50),transparent 74%);animation:btRise 7.5s ease-in-out infinite;z-index:1}@keyframes btRise{0%,100%{opacity:.4;transform:translateY(8px) scale(.96)}50%{opacity:.85;transform:translateY(-6px) scale(1.04)}}
@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 (max-width:1024px){
  .hero__grid{display:flex;flex-direction:column;gap:30px;padding-block:40px 52px}
  .hero__media{max-width:420px;margin-inline:auto;width:100%; position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest. display:contents promotes the copy column's children to hero-grid items, so the shot can be placed between the H1 and the answer. */ /* the copy column on these builds is a bare unclassed <div>, so it has to be promoted too -- otherwise only .hero__media is a grid item and the order values on the eyebrow, H1 and answer do nothing at all. */ .hero__copy,.hero__grid > div:not([class]){display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  .hero .hero__cta{order:5}
  .hero .hero__rating{order:5}
  .hero .hero__sub{order:6}
  .hero .ticks{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an order they default to 0 and jump above the eyebrow, so they are pinned below the CTA where they sat before. */ .hero .factpills{order:9}
  .hero .chips{order:10}
  .hero .figures{order:11}
}
@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 hero: the buy button belongs on the first screen -------------
   Measured at 1440x900 BEFORE this block: the hero CTA sat at y=1426 with
   the fold at 900 -- 526px of scrolling before the money page offered
   anything to click, because the evidence (fact pills, ticks, figures) was
   stacked between the Quick Answer and the buttons.

   The copy column is a bare unclassed <div>, so it is promoted to a flex
   column and its children are ordered: eyebrow, headline, Quick Answer,
   BUTTONS, payment line, then the evidence.

   DESKTOP ONLY. Below 1025px the phone order is composed separately with
   display:contents on this same div (see the block above) and its order
   values are tuned to that; this rule must never reach it.

   The headline is the other half of the fix: 3.3rem over five lines in a
   565px column is what pushed the buttons off the screen. 2.9rem on a 1.08
   leading is still a display size and costs the hero nothing.

   Geometry, so it lives ABOVE the critical marker and the inline copy in
   all 29 pages is regenerated from here. */
@media (min-width:1025px){
  .hero__grid>div:not([class]){display:flex;flex-direction:column}
  .hero .hero__grid{padding-block:38px 58px}
  .hero h1{font-size:clamp(2rem,3.5vw,2.9rem);line-height:1.08}
  .hero .pill{order:1;margin-bottom:14px}
  .hero h1{order:2;margin:0 0 16px}
  .hero .answer{order:3;margin:0 0 24px}
  .hero .hero__cta{order:4;margin:0 0 14px}
  .hero .hero__sub{order:5;margin:0 0 26px}
  .hero .factpills{order:6;margin:0 0 14px}
  .hero .ticks{order:7;margin:0 0 20px}
  .hero .figures{order:8;margin:0}
}
/*!SITE-HOME-CRIT-END*/
/*!CRITICAL-END*/
.qa{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;max-width:860px;margin:0 auto}
.qa__head{background:var(--tint);padding:20px 24px;border-bottom:1px solid var(--line)}
.qa__head b{font:800 1.3rem/1.2 'Poppins',sans-serif;color:var(--dark);display:block}
.qa__head p{margin:.5em 0 0;font-size:1.062rem;color:var(--muted)}
.qa dl{margin:0;display:grid;grid-template-columns:minmax(150px,34%) 1fr}
.qa dl>div{display:contents}
.qa dt,.qa dd{margin:0;padding:14px 24px;border-top:1px solid var(--tint2);font-size:1.062rem}
.qa dt{font-weight:700;color:var(--dark)}
.qa dd{color:var(--muted)}
@media(max-width:640px){
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:2px}
  .qa dd{padding-top:2px;border-top:0}
}

/* ---- trust / badges / stats ---- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint)}
.trust__row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 32px;padding:20px}
.trust__item{display:flex;align-items:center;gap:10px;font-size:0.9062rem;font-weight:600;color:var(--muted)}
.trust__item img{width:38px;height:38px;object-fit:contain}
.badges{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center}
.badges img{height:74px;width:auto}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:900px;margin-inline:auto}
.badgewall figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.badgewall img{width:86px;height:86px;object-fit:contain}
.badgewall figcaption{font-size:0.8438rem;color:var(--muted);font-weight:600;line-height:1.3}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 18px;text-align:center;box-shadow:var(--shadow-soft)}
.stat b{display:block;font:800 2.4rem/1 'Poppins',sans-serif;color:var(--accent)}
.stat span{font-size:0.9062rem;color:var(--muted)}
.sec--dark .stat{background:var(--dark2);border-color:#3a2f34}
.sec--dark .stat b{color:#f0a8b4}
.sec--dark .stat span{color:#c3b8bd}

/* ---- grids + cards ---- */
.grid{display:grid;gap:22px}
.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:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--shadow-soft)}
.card .ic{width:54px;height:54px;border-radius:13px;background:var(--accent-tint);display:grid;
  place-items:center;margin-bottom:15px;overflow:hidden}
.card .ic img{height:36px;width:36px;object-fit:contain}
.card h3{margin-bottom:.4em}
.card p{margin:0;color:var(--muted);font-size:1.062rem}
.card p+p{margin-top:.8em}
.sec--dark .card{background:var(--dark2);border-color:#3a2f34}
.sec--dark .card p{color:#c3b8bd}
.idx{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--accent);color:#fff;font:800 .95rem 'Poppins',sans-serif;margin-bottom:12px}

/* ---- split / steps ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split img{border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.usesteps{list-style:none;margin:1.2em 0 0;padding:0;counter-reset:u;display:grid;gap:18px}
.usesteps li{position:relative;padding-left:3.2em;min-height:2.2em}
.usesteps li::before{counter-increment:u;content:counter(u);position:absolute;left:0;top:-.1em;
  width:2.2em;height:2.2em;border-radius:50%;background:var(--accent);color:#fff;
  font:800 1.05rem 'Poppins',sans-serif;display:grid;place-items:center}
.usesteps b{display:block;font-family:'Poppins',sans-serif;font-size:1.06rem;color:var(--dark)}
.usesteps p{margin:.15em 0 0;color:var(--muted);font-size:1.062rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.gallery figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:1/1;background:var(--tint2)}
.gallery img{width:100%;height:100%;object-fit:cover}

/* ---- ingredients ---- */
.ingthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:860px;margin:0 auto 8px}
.ingthumb{text-align:center}
.ingthumb img{width:112px;height:112px;border-radius:50%;object-fit:cover;margin:0 auto .7em;
  border:3px solid var(--accent-line);background:#fff}
.ingthumb b{font-family:'Poppins',sans-serif;font-size:.96rem;display:block;color:var(--dark);line-height:1.2}
.ingthumb span{font-size:0.9062rem;color:var(--faint);display:block}
.inglist{max-width:var(--prose);margin-inline:auto}
.ing{padding:26px 0;border-top:1px solid var(--line)}
.ing:first-child{border-top:0}
.ing__top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.ing h3{margin:0}
.ing__dose{font:700 .76rem/1 'Poppins',sans-serif;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-tint);padding:6px 12px;border-radius:999px;white-space:nowrap}
.ing p{margin:.6em 0 0;color:var(--muted)}
.ing__cite{font-size:.85rem}
.facts{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.facts__img{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow-soft)}
.facttab{width:100%;font-size:.94rem}
.facttab th,.facttab td{text-align:left;padding:.62em .3em;border-bottom:1px solid var(--line)}
.facttab thead th{font:700 .72rem/1 'Poppins',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.facttab td:last-child,.facttab th:last-child{text-align:right;white-space:nowrap;color:var(--muted)}
.facttab .blend td{font-weight:700;color:var(--dark)}

/* ---- benefits ---- */
.benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:2px 36px;max-width:900px;margin-inline:auto}
.benefits li{display:flex;gap:.8em;padding:16px 0;border-top:1px solid var(--line);color:var(--ink)}
.benefits .ck{color:var(--accent);font-weight:800;flex:none}
.forlist{list-style:none;margin:1.1em 0 0;padding:0;display:grid;gap:.7em}
.forlist li{position:relative;padding-left:1.8em;color:var(--ink)}
.forlist .ck{position:absolute;left:0;color:var(--accent);font-weight:800}

/* ---- pricing ---- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:center}
.tier{background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 24px;
  text-align:center;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);
  transition:transform .2s,box-shadow .2s}
.tier:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tier--feature{border:2px solid var(--accent);box-shadow:0 24px 50px -24px rgba(179,39,60,.55);
  transform:scale(1.04);z-index:2}
.tier--feature:hover{transform:scale(1.04) translateY(-5px)}
.tier__flag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font:800 .68rem/1 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;white-space:nowrap;background:var(--dark);color:#fff}
.tier--feature .tier__flag{background:linear-gradient(180deg,var(--accent2),var(--accent));color:#fff}
.tier h3{margin:.3em 0 .1em;font-size:1.3rem}
.tier__supply{font-size:0.8438rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tier__img{height:150px;width:auto;margin:16px auto 10px;object-fit:contain}
.tier--feature .tier__img{height:176px}
.tier__price{font:800 2.7rem/1 'Poppins',sans-serif;color:var(--dark)}
.tier--feature .tier__price{font-size:3.1rem;color:var(--accent)}
.tier__price small{display:block;font:600 .82rem/1 'Inter',sans-serif;color:var(--faint);margin-top:6px}
.tier__tot{font-weight:700;margin:.7em 0 .1em;color:var(--dark)}
.tier__ship{font-size:0.9062rem;font-weight:700;color:var(--accent);margin:.3em 0 1em;
  display:inline-block;background:var(--accent-tint);padding:6px 14px;border-radius:999px}
.tier__ship.pay{color:var(--muted);background:var(--tint2)}
.tier__rows{list-style:none;margin:0 0 20px;padding:0;text-align:left;font-size:.9rem;color:var(--muted);display:grid;gap:.55em}
.tier__rows li{position:relative;padding-left:1.6em}
.tier__rows .ck{position:absolute;left:0;color:var(--accent);font-weight:800}
.tier .btn{margin-top:auto}
.guarantee{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center;
  max-width:860px;margin:40px auto 0;background:var(--accent-tint);border:1px solid var(--accent-line);
  border-radius:20px;padding:26px 30px}
.guarantee img{width:118px;height:auto;flex:none}
.guarantee h3{margin:0 0 .3em}
.guarantee p{margin:0;color:var(--muted);font-size:1.062rem}
.pay{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:26px}
.pay img{height:28px}
.pay span{font-size:0.9062rem;color:var(--faint)}

/* ---- reviews ---- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow-soft)}
.tcard .stars{color:var(--accent);letter-spacing:2px;font-size:.92rem;margin:0 0 .5em}
.tcard h3{font-size:1.05rem;margin:0 0 .4em}
.tcard p{color:var(--muted);font-size:1.062rem;margin:0}
.tcard .who{margin-top:1em;font-size:.85rem;color:var(--dark);font-weight:700}
.tcard .who span{color:var(--faint);font-weight:500}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px}
.tlife figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1;background:var(--tint2)}
.tlife img{width:100%;height:100%;object-fit:cover}
.dist{list-style:none;margin:0;padding:0;max-width:520px}
.dist li{display:grid;grid-template-columns:52px 1fr 46px;align-items:center;gap:12px;margin-bottom:9px;
  font-size:1.062rem;font-weight:700;color:var(--muted)}
.dist .bar{background:var(--tint2);border-radius:999px;height:10px;overflow:hidden}
.dist .bar i{display:block;height:100%;background:var(--accent);border-radius:999px}

/* ---- byline / callouts / faq / refs ---- */
.byline{display:flex;gap:18px;align-items:center;max-width:var(--prose);margin-inline:auto;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 24px}
.byline img{width:66px;height:66px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--accent-line)}
.byline b{color:var(--dark);font-family:'Poppins',sans-serif}
.byline p{margin:.3em 0 0;font-size:0.9062rem;color:var(--muted)}
.callout{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 26px;font-size:.95rem;color:var(--muted)}
.callout b{color:var(--dark)}
.callout p:last-child,.flag p:last-child,.alert p:last-child{margin:0}
.flag{background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:16px;
  padding:22px 26px;font-size:.94rem;color:#6b2230}
.flag b{color:var(--accent-deep)}
.alert{background:#fff7ed;border:1px solid #f5d9b0;border-radius:16px;padding:22px 26px;font-size:.94rem;color:#7a4a18}
.alert b{color:#a35a10}
.alert a{color:#a35a10}
.faq{max-width:var(--prose);margin-inline:auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 2px;
  font:700 1.06rem/1.4 'Poppins',sans-serif;color:var(--dark);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--accent);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 2px 22px;color:var(--muted)}
.faq__b p{margin:0 0 .8em}
.faq__b p:last-child{margin:0}
.refs{max-width:var(--prose);margin-inline:auto;font-size:.9rem;color:var(--muted)}
.refs ol{margin:0;padding-left:1.4em;display:grid;gap:.6em}
.refs a{word-break:break-word}
.dtable{width:100%;font-size:1rem}
.dtable th,.dtable td{text-align:left;padding:.7em .8em;border-bottom:1px solid var(--line);vertical-align:top}
.dtable thead th{font:700 .72rem/1 'Poppins',sans-serif;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);background:var(--accent-tint)}
.dtable td b{color:var(--dark)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

/* ---- forms ---- */
.form{display:grid;gap:16px}
.formcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:var(--shadow-soft)}
.form label{display:block;font-size:0.9062rem;font-weight:700;color:var(--dark);margin-bottom:.4em}
.form input,.form select,.form textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.75em .9em;min-height:46px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form .req{color:var(--accent)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form__hint{font-size:0.9062rem;color:var(--faint);margin:.35em 0 0}
.form__msg{padding:14px 18px;border-radius:12px;font-size:.92rem;display:none}
.form__msg.ok{display:block;background:var(--accent-tint);border:1px solid var(--accent-line);color:var(--accent-deep)}

/* ---- final cta / related ---- */
.final{background:linear-gradient(150deg,var(--dark) 0%,var(--dark2) 100%);border-radius:22px;
  padding:52px 40px;text-align:center;position:relative;overflow:hidden;color:#ddd4d8}
.final::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% -20%,rgba(179,39,60,.42),transparent 62%);pointer-events:none}
.final h2{color:#fff;position:relative}
.final p{color:#c3b8bd;max-width:56ch;margin:0 auto 1.4em;position:relative}
.final b,.final strong{color:#fff}
.final .btn{position:relative}
.final--media{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:center;text-align:left;padding:50px 44px}
/* width:100% so the bottle shot shrinks to its cell instead of spilling out
   of it when this component sits in a narrow column (the mid-article CTA). */
.final--media .final__img img{width:100%;max-width:320px;height:auto;margin-inline:auto;filter:drop-shadow(0 18px 36px rgba(0,0,0,.5))}
.final--media h2{text-align:left}
.final--media p{margin:0 0 1.4em;max-width:54ch}
.final__price{font:800 2rem/1 'Poppins',sans-serif;color:#f0a8b4;margin:.2em 0 .7em}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel a{display:block;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow-soft)}
.rel a:hover{border-color:var(--accent-line);text-decoration:none;transform:translateY(-3px)}
.rel b{display:block;font-family:'Poppins',sans-serif;font-size:1.04rem;color:var(--dark);margin-bottom:.3em}
.rel span{font-size:.88rem;color:var(--muted)}
.crumbs{font-size:0.9062rem;color:var(--faint);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.legal h2{font-size:1.45rem;margin-top:1.6em}
.legal h3{font-size:1.12rem;margin-top:1.3em}
.legal p,.legal li{color:var(--ink)}
.legal ul,.legal ol{padding-left:1.3em;display:grid;gap:.4em;margin:0 0 1.2em}

/* ---- footer ---- */
footer{background:var(--dark);color:#a99da0;padding:54px 0 92px;font-size:.9rem}
footer a{color:#e3d7da}
footer a:hover{color:#fff}
footer b,footer strong{color:#fff}
.fbrand{font:800 1.35rem/1 'Poppins',sans-serif;color:#fff;margin-bottom:.6em;display:block}
.fbrand span{color:#f0a8b4}
.fintro{color:#a99da0;max-width:38ch}
.fbadges{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.fbadges img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:8px;padding:3px}
footer h4{font:700 .76rem/1 'Poppins',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 1em}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
footer ul a{font-size:.87rem}
.fnap{border-top:1px solid rgba(255,255,255,.12);margin-top:34px;padding-top:24px;line-height:1.75}
.fpay{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:22px}
.fpay img{height:26px}
.fpay span{font-size:0.9062rem;color:#a99da0}
.disc{border-top:1px solid rgba(255,255,255,.12);margin-top:24px;padding-top:24px;display:grid;gap:.8em}
.disc p{margin:0;font-size:1.062rem;color:#93878b;line-height:1.6}
.disc b{color:#c9bcc0}
.disc .copy{margin-top:.6em;color:#a99da0}

/* ---- responsive ---- */
@media(max-width:1024px){
  .hero__grid{display:flex;flex-direction:column;gap:30px;padding-block:40px 52px}
  .hero__media{max-width:420px;margin-inline:auto;width:100%;
    position:static;height:auto;display:block;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest.
     display:contents promotes the copy column's children to hero-grid items,
     so the shot can be placed between the H1 and the answer. */
  /* the copy column on these builds is a bare unclassed <div>, so it has to
     be promoted too -- otherwise only .hero__media is a grid item and the
     order values on the eyebrow, H1 and answer do nothing at all. */
  .hero__copy,.hero__grid > div:not([class]){display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  .hero .hero__cta{order:5}
  .hero .hero__rating{order:5}
  .hero .hero__sub{order:6}
  .hero .ticks{order:7}
  .hero .pay{order:8}
  /* Promoting the copy column exposed these as grid items too. Without an
     order they default to 0 and jump above the eyebrow, so they are pinned
     below the CTA where they sat before. */
  .hero .factpills{order:9}
  .hero .chips{order:10}
  .hero .figures{order:11}

  .split,.facts{grid-template-columns:1fr;gap:30px}
  .steps,.tgrid,.rel,.pricing{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(2,1fr)}
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .ingthumbs{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .tlife{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr;gap:28px}
  .final--media{grid-template-columns:1fr;text-align:center;gap:26px;padding:40px 26px}
  .final--media h2{text-align:center}
  .final--media p{margin-inline:auto}
  /* stacked pricing leads with the best value, not the starter */
  .pricing{max-width:430px;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}
  .tier--feature:hover{transform:translateY(-5px)}
}
@media(max-width:700px){
  .g2,.g3,.g4{grid-template-columns:1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .sec,.section{padding:52px 0}
  .fgrid{grid-template-columns:1fr}
  .badgewall,.gallery{grid-template-columns:repeat(2,1fr)}
  .ingthumbs{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}
  .formcard{padding:22px 20px}
  .final{padding:38px 22px}
  .gallery figure:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important;animation:none!important}}

/* ==========================================================================
   30. CHROME LAYER — this site's own header, footer and motion.
   The foundation (tokens, grid, components) is shared across the family;
   everything below is what makes ErecPower read as its own site rather than
   a recolour: a split utility bar, a nav that carries the phone number, a
   footer that opens with a CTA band, angled dark sections and scroll motion.
   ========================================================================== */

/* ---- 30.1 utility bar: facts left, phone right ---- */
.util{background:var(--dark);color:#bdb0b5;font-size:.79rem}
.util__row{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;
  padding:9px 20px;flex-wrap:wrap}
.util__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.util__item b{color:#fff;font-weight:700}
.util__tel{color:#fff;font-weight:700;white-space:nowrap;margin-left:auto}
.util__tel:hover{color:#f0a8b4;text-decoration:none}
@media(max-width:900px){
  .util__row{justify-content:center;font-size:0.9062rem;padding:8px 16px}
  .util__tel{margin-left:0;width:100%;text-align:center}
}
@media(max-width:560px){.util__item:nth-child(2){display:none}}

/* ---- 30.2 nav: stacked wordmark + phone block beside the CTA ---- */
.brand{flex-wrap:wrap;line-height:1}
.brand small{display:block;width:100%;font:600 .56rem/1 'Poppins',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin-top:4px;padding-left:40px}
.nav__tel{display:flex;flex-direction:column;line-height:1.15;text-align:right;
  padding-right:14px;border-right:1px solid var(--line)}
.nav__tel:hover{text-decoration:none}
.nav__tel-l{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}
.nav__tel b{font:800 .98rem/1.2 'Poppins',sans-serif;color:var(--dark)}
.nav__tel:hover b{color:var(--accent)}
.btn--sm{padding:12px 22px;font-size:.92rem;min-height:44px}
@media(max-width:1180px){.nav__tel{display:none}}

/* scroll progress under the header */
.progress{height:3px;background:transparent;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .1s linear}

/* ---- 30.3 angled dark sections ---- */
.sec--dark{position:relative}
.sec--dark::before,.sec--dark::after{content:"";position:absolute;left:0;right:0;height:36px;
  background:inherit;pointer-events:none}
.sec--dark::before{top:-35px;clip-path:polygon(0 100%,100% 0,100% 100%,0 100%)}
.sec--dark::after{bottom:-35px;clip-path:polygon(0 0,100% 0,0 100%)}
@media(max-width:700px){.sec--dark::before,.sec--dark::after{height:20px}
  .sec--dark::before{top:-19px}.sec--dark::after{bottom:-19px}}

/* ---- 30.4 cards gain an accent edge on hover ---- */
.card{position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.card::before{content:"";position:absolute;inset:0 auto auto 0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}
.sec--dark .card:hover{box-shadow:0 20px 40px -24px rgba(0,0,0,.7)}

/* ---- 30.5 footer: CTA band, 4 link groups, inline NAP, back-to-top ---- */
footer{position:relative;padding-top:0}
.fcta{background:linear-gradient(120deg,var(--accent-deep),var(--accent) 55%,var(--accent2));
  color:#fff;padding:44px 0;margin-bottom:48px}
.fcta__row{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.fcta__h{color:#fff;margin:0 0 .3em;font-family:'Poppins',sans-serif;font-weight:800;
  line-height:1.18;letter-spacing:-.01em;font-size:clamp(1.5rem,3vw,2.1rem)}
.fcta p{margin:0;color:#ffd9df}
.eyebrow--light{background:rgba(255,255,255,.16);color:#fff}
.fcta .btn--cta{background:#fff;color:var(--accent-deep);box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.fcta .btn--cta:hover{background:var(--dark);color:#fff}

.fmain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:44px}
.fmain__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.fbrand small{display:none}
.fnap{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:20px;
  font-size:0.9062rem;line-height:1.7;display:grid;gap:.9em}
.fnap p{margin:0}
.fnap b{color:#fff;font-size:0.9062rem;letter-spacing:.08em;text-transform:uppercase;
  display:block;margin-bottom:.2em;font-family:'Poppins',sans-serif}

.totop{position:fixed;right:18px;bottom:86px;z-index:65;width:46px;height:46px;border:0;
  border-radius:50%;background:var(--accent);color:#fff;font-size:1.1rem;cursor:pointer;
  box-shadow:0 10px 22px -10px rgba(179,39,60,.8);opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s,transform .2s}
.totop.show{opacity:1;visibility:visible}
.totop:hover{transform:translateY(-3px)}

@media(max-width:980px){
  .fmain{grid-template-columns:minmax(0,1fr);gap:32px}
  .fmain__links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fcta__row{flex-direction:column;text-align:center;align-items:stretch}
  .fcta .btn{width:100%}
}
@media(max-width:560px){
  .fmain__links{grid-template-columns:minmax(0,1fr)}
  .totop{right:12px;bottom:78px;width:42px;height:42px}
}

/* ---- 30.6 scroll motion ---- */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.9,.3,1),transform .6s cubic-bezier(.22,.9,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal]:nth-child(2){transition-delay:.07s}
[data-reveal]:nth-child(3){transition-delay:.14s}
[data-reveal]:nth-child(4){transition-delay:.21s}

.hero__stick{animation:ep-rise .8s cubic-bezier(.22,.9,.3,1) both}
.hero__stick img{animation:ep-float 7s ease-in-out 1s infinite}
@keyframes ep-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes ep-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.tier--feature .btn--cta{position:relative;overflow:hidden}
.tier--feature .btn--cta::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-18deg);animation:ep-shine 4.5s ease-in-out infinite}
@keyframes ep-shine{0%{left:-70%}55%,100%{left:140%}}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero__stick,.hero__stick img,.tier--feature .btn--cta::after{animation:none!important}
  .progress i{transition:none}
}

/* ==========================================================================
   31. HEADER FIT
   The nav row carries a lot: wordmark + sub-label, seven links, a phone block
   and a CTA. Left to wrap it breaks onto two lines somewhere around 1250px.
   Nothing in the row may wrap; instead the row sheds items as space runs out
   — phone block first, then the whole menu collapses to the burger.
   ========================================================================== */
.nav__row{flex-wrap:nowrap}
.brand{white-space:nowrap;flex:none}
.menu{flex-wrap:nowrap}
.menu a{white-space:nowrap}
.nav__cta{flex:none;white-space:nowrap}
.nav__tel{white-space:nowrap}
.nav__tel b{white-space:nowrap}
.nav__cta .btn{white-space:nowrap}

/* tighten before anything is dropped */
@media(max-width:1440px){.menu{gap:19px}.menu a{font-size:.9rem}}
@media(max-width:1340px){.menu{gap:15px}.menu a{font-size:.87rem}}

/* the phone block is the first thing to go */
@media(max-width:1300px){.nav__tel{display:none}}

/* below the burger breakpoint the wordmark may use the freed space */
@media(max-width:1180px){.brand small{padding-left:40px}}

/* very small screens: keep logo + burger, drop the header CTA (the sticky
   buy-bar and the in-page CTAs already cover it) */
@media(max-width:430px){
  .nav__cta .btn{display:none}
  .brand{font-size:1.2rem}
  .brand svg{width:26px;height:26px;margin-right:8px}
  .brand small{padding-left:34px;font-size:.5rem}
}

/* ==========================================================================
   SHOTS — imagery paired with the content that explains it. Replaces the bare
   .gallery grid: an image on its own tells a buyer nothing.
   ========================================================================== */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:34px}
.shots figure{margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
.shots img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--tint)}
.shots figcaption{padding:22px 24px}
.shots figcaption b{display:block;font-family:'Poppins',system-ui,sans-serif;font-weight:700;font-size:1.12rem;color:var(--dark);
  margin-bottom:.4em;line-height:1.25}
.shots figcaption p{margin:0;color:var(--muted);font-size:.93rem}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
/* pack cutouts are wide and must not be cropped -- the outer bottles are
   the reason the shot exists, so each keeps its own ratio */
.shots--packs img{aspect-ratio:auto;height:auto;object-fit:contain;
  padding:20px 20px 0;background:var(--tint)}
.shots--wide img{aspect-ratio:4/3}
@media(max-width:900px){.shots--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.shots,.shots--wide{grid-template-columns:1fr}}

/* ---- BLOG ---------------------------------------------------------------- */
.postmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 1.8em;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:0.9062rem;color:var(--muted)}
.postmeta b{color:var(--dark)}
.postmeta .sep{color:var(--line)}
.postmeta time{white-space:nowrap}

.toc{background:var(--tint);border:1px solid var(--line);border-radius:16px;
  padding:22px 26px;margin:0 0 2.2em}
.toc h2{font:800 .76rem/1 'Poppins',sans-serif!important;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 1em}
.toc ol{margin:0;padding-left:1.25em;display:grid;gap:.45em;font-size:.95rem}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.article h2{scroll-margin-top:110px}
.article h3{scroll-margin-top:110px}
.article figure{margin:2em 0}
.article figure img{width:100%;border-radius:16px;border:1px solid var(--line)}
.article figcaption{margin-top:.7em;font-size:0.9062rem;color:var(--faint);text-align:center}
/* Tall or square shots keep their own width so a portrait bottle does not eat
   a whole screen; width:auto keeps the reserved box == the painted box. */
.article figure.portrait img{width:100%;max-width:var(--figw,440px);margin-inline:auto}

.keypoints{background:var(--accent-tint);border:1px solid var(--accent-line);
  border-left:4px solid var(--accent);border-radius:0 16px 16px 0;padding:22px 26px;margin:0 0 2em}
/* Direct child only: a <b> inside a bullet is emphasis and must stay inline. */
.keypoints>b{display:block;font:800 .76rem/1 'Poppins',sans-serif;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:1em}
.keypoints ul{margin:0;padding-left:1.2em;display:grid;gap:.5em}
.keypoints li b{color:var(--accent-deep)}

/* The closing CTA reused mid-article: same component, narrower column. */
.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:0 0 .5em}
.article .final--media .final__price{font-size:1.4rem;margin:.3em 0 .7em}
@media(max-width:620px){
  .article .final--media{grid-template-columns:1fr;text-align:center;padding:30px 22px}
  .article .final--media h2{text-align:center;font-size:1.45rem}
}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--paper);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
.posts img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center 38%;
  background:var(--tint)}
.posts .pbody{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.posts h3{margin:0 0 .45em;font-size:1.12rem}
.posts h3 a{color:var(--dark);text-decoration:none}
.posts h3 a:hover{color:var(--accent)}
.posts p{margin:0 0 1em;color:var(--muted);font-size:1.062rem}
.posts .pmeta{margin-top:auto;font-size:0.9062rem;color:var(--faint)}
@media(max-width:900px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
/* brand mark: stack construction */
.brand{flex-direction:column;align-items:center;gap:4px;text-align:center}.brand svg{width:26px;height:26px;margin-right:0!important}


/* ---- 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}

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.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*/
/* ======================================================================
   erecpowero.com -- HOME PAGE surface pass
   slot: motif rise | card 16px | control 10px | deep diffuse ambient |
         ribbon = tab above the card

   Paint only: border-radius, box-shadow, background, colour, transform,
   transition and animation. Nothing here moves a box, so it sits below the
   critical marker and needs a restamp, not a rebuild. (The two exceptions
   are called out where they appear, and both are inside the pricing row,
   whose entire geometry already lives below this marker.)

   Every selector is scoped with body:has(.hero). class="hero" is on
   index.html and nowhere else on this site, so the sticky header, the buy
   bar, the footer and the pack cards -- all of which also exist on the
   other 28 pages -- keep exactly the look they have everywhere else. The
   scope is also what beats modern_surface.py, which re-appends its
   .card/.card--pack/.tier block AFTER this one on every build: this wins on
   specificity (0,2,1+) and never on source order.

   Controls are scoped one step further, to `main`, on purpose: the nav and
   the footer CTA are the same chrome on all 29 pages and are left alone, so
   nothing changes shape as the reader moves between pages.
   ====================================================================== */
body:has(.hero){
  --epo-rc:16px;                                     /* cards and panels   */
  --epo-rb:10px;                                     /* buttons and inputs */
  /* One deep, very diffuse ambient stop -- this slot's depth language --
     tinted with the bottle's own near-black (23,19,22) and the label
     crimson (127,26,43). Never neutral black. */
  --epo-amb:0 22px 60px rgba(23,19,22,.13);
  --epo-amb-lift:0 30px 76px rgba(23,19,22,.17);
  --epo-amb-red:0 22px 60px rgba(127,26,43,.26);
  --epo-amb-red-lift:0 30px 76px rgba(127,26,43,.34);
}

/* ---- the ground ------------------------------------------------------ */
body:has(.hero) .hero{
  background:
    radial-gradient(120% 86% at 84% 14%,rgba(253,238,241,.95) 0%,rgba(253,238,241,0) 56%),
    radial-gradient(86% 64% at 4% 98%,rgba(239,235,237,.85) 0%,rgba(239,235,237,0) 60%),
    linear-gradient(168deg,#ffffff 0%,#fdf8f9 44%,#f9eef1 100%)}

/* ---- controls: 10px, one gradient, one solid ------------------------- */
body:has(.hero) main .btn{border-radius:var(--epo-rb);
  transition:transform .24s cubic-bezier(.22,.9,.3,1),box-shadow .24s ease,
             background-color .24s ease,border-color .24s ease,color .24s ease}
/* the buying CTA is the only gradient on the page, so the pair reads as
   two weights rather than two colours of the same button */
body:has(.hero) main .btn--cta{
  background:linear-gradient(135deg,#d4334c 0%,var(--accent) 52%,var(--accent-deep) 100%);
  box-shadow:var(--epo-amb-red)}
body:has(.hero) main .btn--cta:hover{transform:translateY(-2px);
  box-shadow:var(--epo-amb-red-lift);filter:none}
body:has(.hero) main .btn--ghost{background:var(--paper);border:2px solid var(--accent-line);
  color:var(--accent-deep);box-shadow:var(--epo-amb)}
body:has(.hero) main .btn--ghost:hover{background:var(--accent-tint);
  border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--epo-amb-lift)}
body:has(.hero) main .btn--dark{box-shadow:var(--epo-amb)}
body:has(.hero) main .btn--dark:hover{transform:translateY(-2px);box-shadow:var(--epo-amb-lift)}
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) main .btn:focus-visible{outline:3px solid var(--accent2);outline-offset:3px}

/* ---- the pack shot's plate ------------------------------------------- */
/* translucent on purpose: the warmth behind it has to read THROUGH the
   plate as well as around it. An opaque plate is how the first version of
   a motif like this ships looking like nothing at all. */
body:has(.hero) .hero__stick{position:relative;z-index:1;
  border-radius:var(--epo-rc);
  border:1px solid rgba(242,206,214,.85);
  background:linear-gradient(158deg,rgba(255,255,255,.90) 0%,rgba(250,243,245,.72) 55%,rgba(253,238,241,.60) 100%);
  box-shadow:var(--epo-amb)}
/* the pack shot is the LCP element and is preloaded: it does not move. */
body:has(.hero) .hero__stick img{animation:none}
body:has(.hero) .floaty{border-radius:12px;border:1px solid var(--accent-line);
  background:rgba(255,255,255,.96);box-shadow:var(--epo-amb)}

/* ---- HERO MOTIF -- rise ---------------------------------------------- */
/* Warmth rising from the base of the bottle, drifting up and fading.
   On the media column's pseudo-elements, never on the <img>. Both shapes
   are centred on the column -- which is exactly where the plate is centred
   -- and then pushed down so their mass sits at the bottle's base; both are
   sized LARGER than the plate (measured: 756x540 and 572x620 against a
   511x446 plate) so they read outside it instead of vanishing inside an
   opaque box. 22s and 31s, out of phase: this is a capsule taken daily for
   weeks, not an energy drink. Transform and opacity only.
   epoWarmRise / epoWarmDrift are new names -- btRise, ep-rise, ep-float and
   ep-shine are already taken in this sheet. */
@media (max-width:980px){
  /* below the sticky breakpoint the column is position:static, which would
     re-parent these percentages to .hero -- a box three times wider. Relative
     with top:0 lays out identically and keeps the containing block. */
  body:has(.hero) .hero__media{position:relative;top:0}
}
body:has(.hero) .hero__media::before{content:"";position:absolute;z-index:0;
  left:50%;top:50%;width:148%;height:540px;opacity:.68;pointer-events:none;
  background:radial-gradient(56% 54% at 50% 76%,
    rgba(207,47,71,.46) 0%,rgba(207,47,71,.20) 45%,rgba(207,47,71,0) 76%);
  transform:translate(-50%,-30%);
  animation:epoWarmRise 22s ease-in-out infinite;animation-delay:-6s}
body:has(.hero) .hero__media::after{content:"";position:absolute;z-index:0;
  left:50%;top:50%;width:112%;height:620px;opacity:.6;pointer-events:none;
  background:radial-gradient(40% 48% at 50% 84%,
    rgba(127,26,43,.34) 0%,rgba(179,39,60,.14) 46%,rgba(179,39,60,0) 74%);
  transform:translate(-50%,-34%);
  animation:epoWarmDrift 31s ease-in-out infinite;animation-delay:-11s}
@keyframes epoWarmRise{
  0%,100%{opacity:.48;transform:translate(-50%,calc(-30% + 10px)) scale(.94)}
  50%{opacity:.95;transform:translate(-50%,calc(-30% - 26px)) scale(1.07)}}
@keyframes epoWarmDrift{
  0%,100%{opacity:.34;transform:translate(-50%,calc(-34% + 14px)) scale(.96)}
  50%{opacity:.78;transform:translate(-50%,calc(-34% - 30px)) scale(1.06)}}

/* ---- hero evidence tiles --------------------------------------------- */
body:has(.hero) .hero .figures div{border-radius:var(--epo-rc);
  border:1px solid rgba(230,224,227,.9);background:rgba(255,255,255,.88);
  box-shadow:var(--epo-amb)}
body:has(.hero) .hero .factpills li{background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(23,19,22,.06)}

/* ---- one depth language for the whole page --------------------------- */
/* The panels below the hero already sit at 16px, which is this slot's card
   radius, so only the shade changes: they carried modern_surface's tight
   two-stop contact shadow while the hero and the pack row now carry one
   deep diffuse ambient stop, and two depth languages on one page is what
   makes a page look assembled rather than designed. Every class listed
   here was counted on index.html first (card 12, stat 4, tcard 3, alert 2,
   tablewrap 2, qa/callout/byline/final/faq/guarantee/shots 1 each). */
body:has(.hero) main .card,
body:has(.hero) main .stat,
body:has(.hero) main .tcard,
body:has(.hero) main .callout,
body:has(.hero) main .alert,
body:has(.hero) main .qa,
body:has(.hero) main .tablewrap,
body:has(.hero) main .byline,
body:has(.hero) main .faq,
body:has(.hero) main .shots figure,
body:has(.hero) main .final{box-shadow:var(--epo-amb)}
body:has(.hero) main .qa{border-radius:var(--epo-rc)}
body:has(.hero) main .card:hover,
body:has(.hero) main .tcard:hover,
body:has(.hero) main .shots figure:hover{box-shadow:var(--epo-amb-lift)}

/* ---- pack cards ------------------------------------------------------ */
/* Two geometry rules live here rather than above the marker, and the reason
   is the baseline. The row is `align-items:center`, so three cards of three
   heights were centred and the three Add To Cart buttons sat at three
   offsets (measured: 18192 / 18188 / 18192). `stretch` gives the three cards
   one shared bottom edge, and `margin-top:-22px` then raises the featured
   card WITHOUT moving its bottom -- which is the whole reason the house
   pattern says margin-top and never transform (the reveal pass sets
   transform:none and would erase it). Both rules are overrides of .pricing
   and .tier--feature, whose own geometry is also below this marker, so they
   arrive with it; hoisting a below-the-fold row into 29 inline copies would
   buy nothing. The three button offsets are measured after the change. */
/* The raised card carries its tab 49px above the row, which walked into the
   section lead's last line -- measured, the tab's top sat 9px ABOVE the
   section head's bottom edge. The row is given that height back as
   PADDING: margin-top is a sibling of .section__head's 38px margin-bottom
   and the two simply collapsed to 38, which is why the first attempt moved
   the row by exactly nothing (measured before and after: rowTop 17355 both
   times). Padding does not collapse. */
body:has(.hero) .pricing{align-items:stretch;padding-top:30px}
body:has(.hero) .tier{border-radius:var(--epo-rc);box-shadow:var(--epo-amb);
  transition:transform .24s cubic-bezier(.22,.9,.3,1),box-shadow .24s ease}
body:has(.hero) .tier:hover{transform:translateY(-2px);box-shadow:var(--epo-amb-lift)}
body:has(.hero) .tier--feature{margin-top:-22px;
  background:linear-gradient(180deg,#ffffff 0%,#ffffff 56%,var(--accent-tint) 100%);
  box-shadow:var(--epo-amb-red)}
body:has(.hero) .tier--feature:hover{transform:translateY(-2px);
  box-shadow:var(--epo-amb-red-lift)}
/* the ribbon is a tab that meets the card's top edge, not a floating pill */
body:has(.hero) .tier__flag{top:-27px;border-radius:var(--epo-rb) var(--epo-rb) 0 0;
  box-shadow:0 -10px 26px rgba(23,19,22,.10)}
body:has(.hero) .tier--feature .tier__flag{
  background:linear-gradient(135deg,#d4334c,var(--accent) 55%,var(--accent-deep))}
body:has(.hero) .tier__rows li{border-bottom:1px dashed var(--accent-line)}
body:has(.hero) .tier__rows li:last-child{border-bottom:0}
body:has(.hero) .tier__ship{border-radius:var(--epo-rb)}
body:has(.hero) .guarantee{border-radius:var(--epo-rc);box-shadow:var(--epo-amb)}

/* ---- everything switches off -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::before,
  body:has(.hero) .hero__media::after{animation:none}
  body:has(.hero) main .btn,
  body:has(.hero) .tier{transition:none}
  body:has(.hero) main .btn:hover,
  body:has(.hero) .tier:hover,
  body:has(.hero) .tier--feature: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{font-size:16px}
footer ul a{font-size:16px}
footer .fnap{font-size:16px}
footer .fnap b{font-size:16px}
footer .fpay span{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 42 box-shadow declaration(s)
   and 0 of them layered, so every panel read flat however generous
   the radius was. Two stops -- a tight contact shadow and a wide
   ambient one -- is what makes a surface look raised. The tint is
   this site's own ink (28,24,27), 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(28,24,27,.06), 0 6px 18px rgba(28,24,27,.07);
  --lift:0 2px 6px rgba(28,24,27,.09), 0 16px 34px rgba(28,24,27,.14);
}

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

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.keypoints,
.badgewall figure,
.tablewrap,
.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,
.posts h3 a{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,
.posts h3 a: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,
.posts h3 a:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}