/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Petrona Fallback";src:local("Georgia");font-weight:400;size-adjust:98.06%;ascent-override:87.50%;descent-override:27.53%;line-gap-override:0.00%}
@font-face{font-family:"Petrona Fallback";src:local("Georgia Bold");font-weight:600 900;size-adjust:89.12%;ascent-override:96.28%;descent-override:30.30%;line-gap-override:0.00%}
@font-face{font-family:"Figtree Fallback";src:local("Arial");font-weight:400;size-adjust:101.52%;ascent-override:93.58%;descent-override:24.63%;line-gap-override:0.00%}
@font-face{font-family:"Figtree Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:96.56%;ascent-override:98.39%;descent-override:25.89%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   Cardioclear7s - cardioclear7s.com
   Component system taken from the UI reference at burntideweb.com: centred
   section heads, a radial hero ground, floating fact badges beside the shot,
   card grids at 3 and 4 up, a pill CTA, a dark closing band.
   Colour is NOT taken from that reference. It is derived from the product
   bottle in assets/: the navy label band #004076 and the Simple Promise
   shield gold #f0be06, on a pale slate ground.
   Type: Petrona (display serif) + Figtree (body sans).
   Chrome for this site: centred wordmark with the menu split either side of
   it, a nav that compacts to a slim bar on scroll, cards with a soft shadow
   and no border, 10px radii, and reveal-on-scroll motion.
   ========================================================================== */

/* ---- DESIGN TOKENS -------------------------------------------------------- */
:root{
  /* ---- ground: pale slate ---- */
  --paper:#eef1f5;
  --paper-tint:#e4e9f0;
  --paper-card:#ffffff;
  --paper-deep:#dde4ec;

  /* ---- ink ---- */
  --ink:#0e1a26;
  --ink-dk:#0e1a26;
  --ink-soft:#2b3a49;
  --muted:#3f5164;
  --faint:#55687c;
  --line:#cfd8e3;
  --line-soft:#e0e6ee;

  /* ---- accent, from the navy band on the bottle ---- */
  --accent:#004076;
  --accent-deep:#002c52;
  --accent-tint:#e5edf5;
  --accent-line:#b9cee1;
  --accent-glow:rgba(0,64,118,.16);

  /* ---- secondary, from the Simple Promise shield ---- */
  --gold:#f0be06;
  --gold-deep:#6b5401;
  --gold-soft:#fdf4d4;
  --gold-line:#e6cf7a;

  /* ---- type ---- */
  --display:'Petrona','Petrona Fallback',Georgia,'Times New Roman',serif;
  --serif:'Petrona','Petrona Fallback',Georgia,'Times New Roman',serif;
  --sans:'Figtree','Figtree Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1120px;
  --measure:760px;
  --measure-wide:980px;
  --r:10px;
  --r-s:6px;
  --r-l:16px;
  --radius:10px;
  --shadow:0 10px 30px rgba(14,26,38,.09);
  --shadow-sm:0 3px 12px rgba(14,26,38,.06);
  --shadow-lg:0 22px 54px rgba(14,26,38,.16);
}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:104px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.72;-webkit-font-smoothing:antialiased;font-size:1rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);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.2;
  font-weight:700;letter-spacing:-.005em}
b,strong{color:var(--ink-soft)}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:10px 16px;z-index:9999;border-radius:0 0 var(--r) 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,.84);font-size:0.9062rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;
  padding-block:8px}
.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: centred wordmark, menu split left and right ----------------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(238,241,245,.94);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transition:padding .25s ease,box-shadow .25s ease}
.nav__row{display:flex;align-items:center;justify-content:center;gap:24px;
  padding-block:14px;flex-wrap:nowrap;transition:padding .25s ease}
.nav.slim .nav__row{padding-block:6px}
.nav.slim{box-shadow:0 6px 22px rgba(14,26,38,.10)}
.navmenus{display:contents}
.menu{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;flex:1 1 0}
.menu--r{justify-content:flex-start}
.menu--l{justify-content:flex-end}
.menu a{font-family:var(--sans);font-size:.88rem;font-weight:600;
  color:var(--ink-soft);white-space:nowrap;position:relative;padding-block:4px}
.menu a:hover{color:var(--accent);text-decoration:none}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--accent);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;text-align:center;
  flex-direction:column}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;margin-bottom:3px;transition:width .25s ease,height .25s ease}
.nav.slim .brand svg{width:26px;height:26px}
.brand__firm{display:block;font-family:var(--sans);font-size:.6rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.brand__prod{display:block;font-family:var(--display);font-size:1.3rem;font-weight:700;
  color:var(--ink);line-height:1.1;letter-spacing:.01em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.nav__cta{flex:none}
.nav__tel{flex:none;font-weight:700;font-size:.86rem;color:var(--accent-deep);
  white-space:nowrap;border:1px solid var(--accent-line);border-radius:999px;
  padding:6px 14px;background:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;width:40px;height:34px;
  padding:6px;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 ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:.95rem;line-height:1.2;
  padding:13px 26px;border-radius:999px;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 8px 22px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);box-shadow:0 14px 30px var(--accent-glow)}
.btn--ghost{background:#fff;color:var(--accent-deep);border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent)}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:#d9ab04}
.btn--lg{padding:16px 32px;font-size:1.02rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: slate with a large soft radial ----------------------------- */
.hero{position:relative;background:
  radial-gradient(900px 620px at 76% -8%,rgba(0,64,118,.16),transparent 62%),
  radial-gradient(700px 520px at 6% 104%,rgba(240,190,6,.16),transparent 60%),
  var(--paper);
  border-bottom:1px solid var(--line);overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:46px;
  align-items:start;padding-block:52px 66px}
.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:0.8438rem;padding:7px 16px;border-radius:999px;box-shadow:var(--shadow-sm);
  letter-spacing:.02em}
.hero h1{font-size:clamp(2.05rem,4.3vw,3.15rem);margin:18px 0 0;font-weight:700;
  line-height:1.1}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:.94rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.hero__sub{margin:18px 0 0;font-size:1.02rem;max-width:58ch}

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

.pay{display:flex;align-items:center;gap:12px;margin:18px 0 0;
  font-size:0.9062rem;color:var(--faint)}
.pay img{width:220px;height:39px;object-fit:contain}

.factpills{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0}
.factpills li{background:#fff;border-radius:999px;padding:7px 15px;font-size:0.9062rem;
  color:var(--faint);box-shadow:var(--shadow-sm)}
.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;box-shadow:var(--shadow-sm)}
.figures div{padding:16px 18px}
.figures div+div{border-left:1px solid var(--line-soft)}
.figures b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1;
  color:var(--accent-deep)}
.figures span{display:block;margin-top:5px;font-size:0.9062rem;color:var(--faint)}

.hero__media{position:relative}
.hero__stick{position:relative;display:block}
.hero__card{background:#fff;border-radius:var(--r-l);padding:22px 26px;
  box-shadow:var(--shadow-lg);text-align:center}
.hero__card img{margin-inline:auto;max-width:100%}
.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:7px 16px;border-radius:999px;white-space:nowrap}
.floaty{position:absolute;background:#fff;border-radius:var(--r);padding:11px 15px;
  box-shadow:var(--shadow-lg);font-size:.95rem;font-weight:700;color:var(--ink);
  z-index:2;line-height:1.2}
.floaty small{display:block;color:var(--accent);font-size:0.9062rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:800;margin-top:4px}
.floaty--tl{top:10px;left:-14px}
.floaty--br{bottom:24px;right:-14px}

/* The hero copy column runs past 1,300px, so a statically placed shot ends up
   stranded beside the bottom of it. A sticky rail keeps the bottle next to
   whatever the reader is on. Offset by the header rather than by 0, and capped
   by height so it SCALES on a short laptop screen instead of being switched
   off by a min-height media query, which is the mistake that made this feature
   silently disappear on a previous build (pitfalls #4 and #15). */
@media(min-width:1025px){
  /* The card aligns to the TOP of the rail, not its centre. Centring it in a
     full-height rail that starts 261px down the page pushed the bottom of the
     card below the fold on a 650px-high laptop viewport at scroll 0, which is
     the same defect the header offset exists to prevent. Top-aligned, the
     bottle sits beside the H1 before any scrolling and pins 118px from the top
     afterwards. */
  .hero__media{position:sticky;top:118px;align-self:start;
    height:calc(100vh - 132px);min-height:340px;
    display:flex;align-items:flex-start;justify-content:center}
  .hero__stick{max-height:calc(100vh - 168px)}
  .hero__stick img{max-height:calc(100vh - 330px);min-height:180px;
    width:auto;object-fit:contain}
}

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

/* ---- 5. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);
  padding:20px 24px;margin:22px 0 0}
/* In the hero the answer is not a card: the reference layout runs it as two
   flowing paragraphs under the H1. The wrapper stays because it is the
   speakable selector and the AEO block, but the card styling comes off. */
.hero .answer{background:none;box-shadow:none;padding:0;margin:18px 0 0}
.hero .answer .qtag{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(--ink-dk)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:0.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:.55em}
.answer p{margin:0;font-size:1.062rem}

/* ---- 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:26px 40px;padding-block:20px}
.trust__row figure{text-align:center;max-width:132px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:0.9062rem;color:var(--faint);margin-top:7px;
  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. Leaving them below it meant a phone painted the hero in DOM order
   until the async stylesheet landed, which is a visible jump on the one screen
   that matters most. Everything else responsive is at the foot of this file. */
@media(max-width:1340px){.menu{gap:15px}.menu a{font-size:.85rem}}
@media(max-width:1200px){.nav__tel{display:none}}
@media(max-width:1024px){
  .nav__row{justify-content:space-between;gap:14px}
  .navmenus{display:block;position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
    background:#fff;padding:84px 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;
    justify-content:flex-start}
  .menu a{font-size:1rem;padding-block:11px;width:100%}
  .menu a::after{display:none}
  .burger{display:block;order:3}
  .brand{flex-direction:row;gap:10px;align-items:center;text-align:left}
  .brand svg{margin-bottom:0}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:24px;padding-block:34px 52px}
  /* 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:18px 20px}
  .hero__card img{max-width:224px}
  .floaty{display:none}
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2rem}
  .figures{grid-template-columns:1fr}
  .figures div+div{border-left:0;border-top:1px solid var(--line-soft)}
}
@media(max-width:430px){
  .nav__cta .btn{display:none}
  .util__item:nth-child(2){display:none}
}


/* ---- hero motif -- beat-pulse ---------------------------------------- */
.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(105% 80% at 50% 6%,#eee8ca,#eef1f5 58%,#eef1f5)}.hero__media::before{content:'';position:absolute;left:50%;top:0;width:150%;aspect-ratio:1;translate:-50% -24%;border-radius:50%;background:radial-gradient(closest-side,rgba(240,190,6,0.30),transparent 70%);animation:btBeat 2.6s cubic-bezier(.35,0,.25,1) infinite;z-index:1}@keyframes btBeat{0%,100%{scale:.96;opacity:.5}18%{scale:1.07;opacity:.9}32%{scale:1;opacity:.65}48%{scale:1.05;opacity:.85}64%{scale:.98;opacity:.55}}
@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 hero: the buy button belongs on the first screen ---------------
   Measured at 1440x900 before this block: the hero CTA row opened at y=845
   and the button's last two pixels sat on the fold, so the first screen of
   the money page had nothing you could click. The copy column becomes a flex
   column on DESKTOP ONLY and the buttons move above the evidence rows, so the
   reading order is eyebrow, headline, quick answer, buttons, payment line,
   then the proof. The phone order is composed separately with display:contents
   under 981px and is left exactly as it was.
   This moves boxes, so it lives above the critical marker and the site is
   rebuilt: a restamp alone would leave the old order inlined in every page. */
@media(min-width:981px){
  .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  /* the eyebrow is an inline-flex chip: stretched it would become a bar */
  .hero__copy>.pill{order:1;align-self:flex-start}
  .hero__copy>h1{order:2}
  .hero__copy>.answer{order:3}
  .hero__copy>.hero__cta{order:4}
  .hero__copy>.pay{order:5}
  .hero__copy>.hero__rating{order:6}
  .hero__copy>.ticks{order:7}
  .hero__copy>.factpills{order:8}
  .hero__copy>.figures{order:9}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:64px}
.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:0.8438rem;font-weight:800;
  letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.rule{display:block;width:52px;height:3px;background:var(--gold);border-radius:2px;
  margin-bottom:14px}
.sec--center .rule{margin-inline:auto}
.sec h2{font-size:clamp(1.62rem,3vw,2.3rem);margin-bottom:12px}
.sec h3{font-size:1.2rem;margin-bottom:8px}
.lead{font-size:1.07rem;color:var(--muted)}
.note{font-size:0.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>.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:34px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:50%;background:var(--accent-tint);
  color:var(--accent-deep);font-size:1.062rem;font-weight:800;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.4rem;
  line-height:.86;font-weight:700;color:var(--accent);padding:6px 12px 0 0}

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

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

/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:20px}
.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-radius:var(--r);padding:26px 24px;
  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.14rem}
.card p{font-size:1.062rem;color:var(--faint)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:16px;counter-reset:s}
.step{background:#fff;border-radius:var(--r);padding:24px 26px 24px 70px;
  position:relative;box-shadow:var(--shadow-sm);counter-increment:s}
.step__n{position:absolute;left:22px;top:24px;width:34px;height:34px;border-radius:50%;
  background:var(--accent);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:700;font-size:1rem}
.step__n::before{content:counter(s)}
.step h3{font-size:1.1rem}
.step p{font-size:1.062rem;color:var(--faint)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:0.9688rem}
.chips .ck{background:var(--gold);color:var(--ink);font-size:0.8125rem}

.callout{background:var(--accent-tint);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:24px auto;
  font-size:.97rem}
.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:18px 22px;margin:24px auto;
  font-size:.96rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold);color:var(--ink);font-size:0.8438rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;
  border-radius:999px}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:#fff;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:16px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.02rem}
.dtable th,.dtable td{padding:12px 20px;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:0.9062rem;letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  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:42px;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-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:0.9062rem;color:var(--faint)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.05rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. FACES: the seller's testimonial portraits ----------------------- */
.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:10px}
.faces figure{text-align:center}
.faces img{width:100%;border-radius:50%;box-shadow:var(--shadow-sm)}
.faces figcaption{font-size:0.9062rem;color:var(--faint);margin-top:8px;font-weight:600}

/* ---- 13. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--accent-deep);color:rgba(255,255,255,.85);
  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:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.1rem;color:#fff;
  line-height:1}
.stats span{display:block;margin-top:7px;font-size:0.9062rem;color:rgba(255,255,255,.72)}
/* A link injected into the dark stats band must not keep the light-theme
   accent: rgb(0,64,118) on rgb(0,44,82) is 1.35:1 and invisible. */
.stats a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.badgewall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px}
.badgewall figure{background:#fff;border-radius:var(--r);padding:20px 14px;
  text-align:center;box-shadow:var(--shadow-sm)}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:0.8438rem;color:var(--faint)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.88rem;
  margin-bottom:4px;font-family:var(--display)}

/* ---- 14. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.whycard{background:#fff;border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--shadow-sm);border-top:3px solid var(--accent)}
.whycard h3{font-size:1.1rem}
.whycard p{font-size:1.062rem;color:var(--faint)}
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.forlist{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.1rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.062rem;margin-bottom:9px}
.forlist li::before{content:"\2022";color:var(--accent);font-weight:700}

/* ---- 15. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm);
  position:relative}
.ingcard h3{font-size:1.24rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);font-weight:800;margin-bottom:12px;display:block}
.ingcard p{font-size:1.062rem}
.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-radius:var(--r);box-shadow:var(--shadow-sm);
  overflow:hidden;max-width:560px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--display);
  font-size:1.16rem;font-weight:700}
.facttab{width:100%;border-collapse:collapse;font-size:.92rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.facttab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

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

/* ---- 17. PRICING --------------------------------------------------------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{background:#fff;border-radius:var(--r);padding:30px 24px;text-align:center;
  position:relative;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tier--feature{box-shadow:var(--shadow-lg);transform:scale(1.03)}
.tier__flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:var(--ink);font-size:0.8438rem;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 14px;border-radius:999px;
  white-space:nowrap}
.tier h3{font-size:1.36rem;margin-bottom:2px}
.tier__supply{font-size:0.8438rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:14px}
.tier img{margin:0 auto 14px}
.tier__price{font-family:var(--display);font-size:1.6rem;font-weight:700;
  color:var(--accent-deep);line-height:1.2;margin-bottom:6px}
.tier__rows{font-size:.88rem;color:var(--faint);margin-bottom:18px;display:grid;gap:5px}
.tier .btn{margin-top:auto}
.guarantee{display:grid;grid-template-columns:.62fr 1.38fr;gap:32px;align-items:center;
  background:#fff;border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.4rem;margin-bottom:12px}

/* ---- 18. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tcard{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:.92rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.04rem;
  color:var(--ink)}
.tcard span{font-size:0.9062rem;color:var(--faint)}
.tcard p{font-size:1.062rem;margin-top:10px}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tlife figure{background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm)}
.tlife figcaption{padding:14px 16px;font-size:0.9062rem;color:var(--faint)}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:52px 1fr 52px;gap:12px;align-items:center;
  font-size:0.9062rem;color:var(--faint)}
.bar__t{height:9px;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:30px;align-items:center;
  background:#fff;border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}

/* ---- 19. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:11px;text-align:left}
.faq details{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);
  overflow:hidden}
.faq summary{padding:16px 22px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.04rem;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(--accent);font-size:1.4rem;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 22px 18px;font-size:.95rem}
.faq__b p+p{margin-top:.8em}

/* ---- 20. REFS, BYLINE ---------------------------------------------------- */
.refs{background:#fff;border-radius:var(--r);padding:24px 26px;box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.16rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:28px;font-size:1.062rem;
  color:var(--faint);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:800;
  color:var(--accent)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;background:#fff;
  border-radius:var(--r);padding:24px 26px;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.06rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:0.9062rem;color:var(--faint)}

/* ---- 21. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.formcard{background:#fff;border-radius:var(--r);padding:26px;box-shadow:var(--shadow-sm)}
.formcard h3{font-size:1.14rem;margin-bottom:6px}
.formcard label{display:block;font-size:.8rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:11px 14px;
  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:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 22. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--accent-deep);border-radius:var(--r-l);padding:38px 40px;
  color:rgba(255,255,255,.82)}
.final h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px}
.final p{color:rgba(255,255,255,.82)}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto}
.final__price{font-family:var(--display);font-size:1.28rem;color:#fff;margin:14px 0 18px}
.final .btn--cta{background:var(--gold);color:var(--ink)}
.final .btn--cta:hover{background:#d9ab04}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.rel a{background:#fff;border-radius:var(--r);padding:22px;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.06rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.88rem;color:var(--faint)}

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

/* ---- 24. FOOTER: contact card spanning the top, then 4 dense columns ----- */
footer{background:var(--ink);color:rgba(255,255,255,.62);padding-block:44px 22px;
  font-size:.88rem}
footer a{color:rgba(255,255,255,.82)}
footer a:hover{color:#fff}
.fcontact{display:grid;grid-template-columns:auto 1fr auto;gap:26px;align-items:center;
  background:rgba(255,255,255,.055);border-radius:var(--r);padding:22px 26px;
  margin-bottom:34px}
.fcontact img{flex:none}
.fcontact__t b{display:block;font-family:var(--display);font-size:1.12rem;color:#fff;
  margin-bottom:5px}
.fcontact__t p{font-size:1.062rem;color:rgba(255,255,255,.66)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;
  padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.12)}
.fgrid h4{color:#fff;font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:12px}
.fgrid li{margin-bottom:6px;font-size:1.062rem;line-height:1.5}
.fbrand{font-family:var(--display);font-size:1.5rem;color:#fff;margin-bottom:10px}
.fbrand span{color:var(--gold)}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.fnap{padding-block:22px;border-bottom:1px solid rgba(255,255,255,.12);font-size:0.9062rem;
  line-height:1.75}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:18px;
  font-size:0.9062rem}
.disc{padding-top:18px;font-size:0.9062rem;line-height:1.65;color:rgba(255,255,255,.55)}
.disc p{margin-bottom:.9em}
.disc b{color:rgba(255,255,255,.86)}
.disc .copy{margin-top:16px;color:rgba(255,255,255,.44)}

/* ---- 25. 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:11px 22px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:0.9062rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--gold)}
.buybar .btn{padding:10px 22px}

/* ---- 26. BLOG ------------------------------------------------------------ */
.article{max-width:768px}
.article h1{font-size:clamp(1.9rem,3.8vw,2.7rem);margin-bottom:14px}
.article h2{font-size:1.5rem;margin:1.9em 0 .6em;scroll-margin-top:110px}
.article h3{font-size:1.16rem;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:22px;margin-bottom:8px}
.article ul li::before{content:"\2022";position:absolute;left:4px;color:var(--accent);
  font-weight:700}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:8px;counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent);font-weight:800}
.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:0.9062rem;color:var(--faint);margin-top:9px;
  padding-left:2px;border-left:2px solid var(--gold);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:0.9062rem;color:var(--faint);
  padding-block:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:#fff;border-radius:var(--r);padding:20px 24px;margin-bottom:26px;
  box-shadow:var(--shadow-sm)}
.toc h2{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:26px;font-size:1.062rem}
.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:20px 24px;margin-bottom:24px}
.keypoints>b{display:block;font-family:var(--sans);font-size:0.8438rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.posts article{background:#fff;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:20px 22px}
.posts h3{font-size:1.1rem;margin-bottom:8px}
.posts p{font-size:1.062rem;color:var(--faint)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:12px;
  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: at 390px
   the two-column form left the display h2 in a 178px cell and the block
   rendered 1,111px tall, which is more than a screenful of interruption. */
.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:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
  .article .final--media .btn{width:100%}
}
.final p,.article .final p{color:rgba(255,255,255,.82)}
.final__price,.article .final .final__price{color:#fff}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 27. MOTION: reveal on scroll ---------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s 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}
}

/* ---- 28. 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>.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)}
  .faces{grid-template-columns:repeat(4,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}
  .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}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .fcontact{grid-template-columns:1fr;text-align:left}
}
@media(max-width:700px){
  .sec{padding-block:46px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall{grid-template-columns:1fr}
  .faces{grid-template-columns:repeat(3,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}
}
/* Tap target: a button on a phone must be reachable with a thumb. Four sites
   sat at 39-42px, which is under the 44px minimum. Applied at the mobile
   breakpoint only so desktop proportions are untouched. */
@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}

/* A <small> inside a table cell that no rule reaches inherits the browser
   default of ~0.83em = 13.3px, under the 14.5px caption floor, and
   type_floor.py cannot see it because there is no rule to raise.
   See pitfalls.md #97. */
td small,.dtable small{font-size:0.9062rem}

/* ==== 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*/
/* ==========================================================================
   HOME SURFACE - architectural depth, corner flag, tracing arc
   --------------------------------------------------------------------------
   Paint only: radius, shadow, background, colour, transform, transition and
   one keyframe. Nothing here moves a box in the critical block, so it sits
   below the critical marker.

   Everything is scoped with body:has(.hero). `class="hero"` is on index.html
   and on no other page of this site, so the scope is the home page and the
   specificity (0,2,x) beats modern_surface.py and footer_type.py, which
   re-append themselves after this block on every build.

   The depth language is a HARD short offset plus a wide ambient stop -- the
   card sits on the page like a printed panel rather than floating in a blur.
   Both stops are tinted with this site's own ink (14,26,38), never neutral
   black. Card corners 28px, controls 18px.
   ========================================================================== */
body:has(.hero){
  --cc-card:28px;
  --cc-ctl:18px;
  --cc-hard:0 3px 0 rgba(14,26,38,.07);
  --cc-depth:0 3px 0 rgba(14,26,38,.07),0 14px 24px rgba(14,26,38,.10);
  --cc-depth-sm:0 2px 0 rgba(14,26,38,.06),0 8px 14px rgba(14,26,38,.07);
  --cc-depth-lift:0 3px 0 rgba(14,26,38,.09),0 22px 34px rgba(14,26,38,.16);
  --cc-depth-tall:0 4px 0 rgba(14,26,38,.08),0 26px 40px rgba(14,26,38,.15);
  --cc-depth-dark:0 4px 0 rgba(14,26,38,.16),0 26px 44px rgba(14,26,38,.22);
}

/* ---- panels ------------------------------------------------------------- */
body:has(.hero) .card,
body:has(.hero) .tcard,
body:has(.hero) .ingcard,
body:has(.hero) .step,
body:has(.hero) .callout,
body:has(.hero) .alert,
body:has(.hero) .tablewrap,
body:has(.hero) .shots figure,
body:has(.hero) .byline,
body:has(.hero) .rel a,
body:has(.hero) .guarantee,
body:has(.hero) .tier{border-radius:var(--cc-card);box-shadow:var(--cc-depth)}

/* the three dark bands carry the same corner, with a deeper seat */
body:has(.hero) .promo,
body:has(.hero) .stats,
body:has(.hero) .final{border-radius:var(--cc-card);box-shadow:var(--cc-depth-dark)}

/* ---- hero furniture ------------------------------------------------------ */
body:has(.hero) .hero__card{border-radius:var(--cc-card);box-shadow:var(--cc-depth-tall)}
body:has(.hero) .floaty{border-radius:var(--cc-ctl);box-shadow:var(--cc-depth)}
body:has(.hero) .figures{border-radius:var(--cc-ctl);box-shadow:var(--cc-depth-sm)}
body:has(.hero) .pill{box-shadow:var(--cc-hard)}
/* the lot chip is drawn to straddle the bottom edge of the product card, but
   the card carries z-index:2 and the chip none, so 24 of its 39px were painted
   over. Paint, not geometry: the chip has not moved. */
body:has(.hero) .hero__tag{z-index:3;box-shadow:var(--cc-depth-sm)}
body:has(.hero) .factpills li{box-shadow:var(--cc-hard)}

/* ---- controls: the buying CTA carries the gradient, the second button
       stays solid, so the pair reads as two weights ---------------------- */
body:has(.hero) .btn{border-radius:var(--cc-ctl);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,
  background-color .22s ease,color .22s ease,border-color .22s ease}
body:has(.hero) .btn--cta{
  background:linear-gradient(135deg,#0a5b96 0%,#004076 52%,#00305c 100%);
  color:#fff;box-shadow:var(--cc-hard),0 12px 22px rgba(0,64,118,.26)}
body:has(.hero) .btn--cta:hover{
  background:linear-gradient(135deg,#0d63a8 0%,#0a4d86 52%,#003a6b 100%);
  box-shadow:0 3px 0 rgba(14,26,38,.10),0 18px 30px rgba(0,64,118,.30);
  transform:translateY(-2px)}
/* the closing band is navy, so its CTA is the gold one and keeps its colour */
body:has(.hero) .final .btn--cta{
  background:linear-gradient(135deg,#ffd75c 0%,#f0be06 54%,#d9a504 100%);
  color:var(--ink);box-shadow:var(--cc-hard),0 12px 22px rgba(0,0,0,.22)}
body:has(.hero) .final .btn--cta:hover{
  background:linear-gradient(135deg,#ffe07d 0%,#f7c81a 54%,#e0ad05 100%)}
body:has(.hero) .btn--ghost{background:#fff;border-color:var(--accent-line);
  box-shadow:var(--cc-hard)}
body:has(.hero) .btn--ghost:hover{background:var(--accent-tint);
  border-color:var(--accent);
  box-shadow:0 3px 0 rgba(14,26,38,.10),0 10px 18px rgba(14,26,38,.10);
  transform:translateY(-2px)}

/* a keyboard reader gets the same affordance the mouse does */
body:has(.hero) a:focus-visible,
body:has(.hero) .btn:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid var(--gold);
  outline-offset:3px}

/* ---- a surface you can click answers the pointer, 2px ------------------- */
body:has(.hero) .card,
body:has(.hero) .tcard,
body:has(.hero) .ingcard,
body:has(.hero) .shots figure,
body:has(.hero) .rel a,
body:has(.hero) .tier{transition:transform .24s cubic-bezier(.2,.7,.3,1),
  box-shadow .24s ease}
body:has(.hero) .card:hover,
body:has(.hero) .tcard:hover,
body:has(.hero) .ingcard:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .tier:hover{transform:translateY(-2px);
  box-shadow:var(--cc-depth-lift)}

/* ---- pricing: corner flag, a raised and differently-coloured recommendation,
       dashed separators between the rows.
       The three Add To Cart buttons share one baseline because every card is
       a stretched grid item and `.tier .btn` is pushed down with margin-top:
       auto. The recommendation is raised with a negative MARGIN, never with a
       transform: a stretched item's height grows by the margin, so its top
       rises while its bottom -- and the button on it -- stays on the shared
       baseline. A transform would also be cancelled by the reveal pass, which
       sets transform:none once a card is in view. Measured after the change:
       all three buttons at the same offset. ----------------------------- */
body:has(.hero) .pricing .tier__flag{left:auto;right:16px;top:-14px;
  transform:none;padding:7px 16px;
  border-radius:var(--cc-ctl) var(--cc-ctl) 0 var(--cc-ctl);
  background:var(--accent);color:#fff;box-shadow:0 3px 0 rgba(14,26,38,.10)}
body:has(.hero) .pricing .tier__flag::after{content:'';position:absolute;
  right:0;top:100%;width:0;height:0;border:7px solid transparent;
  border-right-width:0;border-top-color:#002c52}
body:has(.hero) .pricing .tier--feature .tier__flag{
  background:linear-gradient(135deg,#ffd75c 0%,#f0be06 55%,#e0ad05 100%);
  color:var(--ink)}
body:has(.hero) .pricing .tier--feature .tier__flag::after{
  border-top-color:#b98f04}
body:has(.hero) .pricing .tier--feature{margin-top:-14px;
  background:linear-gradient(180deg,#eff5fb 0%,#ffffff 46%);
  box-shadow:var(--cc-depth-tall),inset 0 0 0 2px rgba(0,64,118,.20)}
body:has(.hero) .pricing .tier--feature:hover{
  box-shadow:var(--cc-depth-lift),inset 0 0 0 2px rgba(0,64,118,.28)}
body:has(.hero) .pricing .tier__price{border-top:1px dashed var(--accent-line);
  padding-top:12px}
body:has(.hero) .pricing .tier__rows{border-top:1px dashed var(--accent-line);
  padding-top:12px}

/* ---- hero motif: one line traces the silhouette and releases ------------
   An arc on a pseudo-element of the MEDIA COLUMN -- never on the product
   image, which is the LCP element and is preloaded. The circle is sized
   larger than the product card in both axes, so what the reader sees is the
   part of the line that runs OUTSIDE the opaque card; a shape sized inside
   the card would render nothing at all. It travels once around in 19s and
   fades out before it restarts. transform and opacity only, so it stays on
   the compositor, and it is off entirely under reduced motion.
   Desktop only: on a phone the media column is only as tall as the card and
   a ring that big would sit over the copy. ----------------------------- */
@media(min-width:981px){
  body:has(.hero) .hero__media::after{content:'';position:absolute;
    left:50%;top:50%;width:min(calc(100% + 72px),84vh);aspect-ratio:1;
    translate:-50% -50%;border:2px solid transparent;
    border-top-color:rgba(0,64,118,.5);border-right-color:rgba(0,64,118,.18);
    border-radius:50%;opacity:.55;z-index:1;pointer-events:none;
    animation:ccTraceRelease 19s linear infinite}
}
@keyframes ccTraceRelease{
  0%{transform:rotate(-8deg);opacity:0}
  7%{opacity:.6}
  68%{opacity:.5}
  90%{transform:rotate(330deg);opacity:0}
  100%{transform:rotate(344deg);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__media::after{animation:none;opacity:.7;
    border-color:rgba(0,64,118,.16)}
  body:has(.hero) .card:hover,
  body:has(.hero) .tcard:hover,
  body:has(.hero) .ingcard:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .tier:hover,
  body:has(.hero) .btn:hover,
  body:has(.hero) .btn--cta:hover,
  body:has(.hero) .btn--ghost:hover{transform:none}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .tcard,
  body:has(.hero) .ingcard,
  body:has(.hero) .shots figure,
  body:has(.hero) .rel a,
  body:has(.hero) .tier{transition: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 412x68 box instead of the viewport, so it
   opened as a 320x110 stub with 342px of content inside it - two links of 8
   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 .btn{font-size:16px}
footer .disc{font-size:16px}
footer .fgrid h4{font-size:15px}
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 55 box-shadow declaration(s)
   and 2 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 (14,26,38), 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(14,26,38,.06), 0 6px 18px rgba(14,26,38,.07);
  --lift:0 2px 6px rgba(14,26,38,.09), 0 16px 34px rgba(14,26,38,.14);
}

/* These panels declared no radius of their own, so raising
   the token alone left them square. House rule 11 is a
   floor: it outranks a slot that chose square corners. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.answer,
.whycard,
.tier,
.article figure{border-radius:var(--radius)}

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.card--pack,
.badgewall figure,
.tier{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.card--pack:hover,
.badgewall figure:hover,
.tier:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}