/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Young Serif Fallback";src:local("Georgia");font-weight:400;size-adjust:114.79%;ascent-override:91.13%;descent-override:31.89%;line-gap-override:0.00%}
@font-face{font-family:"Nunito Fallback";src:local("Arial");font-weight:400;size-adjust:101.91%;ascent-override:99.21%;descent-override:34.64%;line-gap-override:0.00%}
@font-face{font-family:"Nunito Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:97.85%;ascent-override:103.32%;descent-override:36.08%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  /* ---- ground: apricot cream, from the warm botanical fan at the tub's base ---- */
  --paper:#fdf4ea;
  --paper-tint:#eaf0e2;          /* the sage band */
  --paper-card:#fffaf3;
  --paper-deep:#f2e2cd;
  --paper-warm:#f8e9d8;

  /* ---- ink: warm, so the cool navy accent reads as the product's own ---- */
  --ink:#2b2117;
  --ink-dk:#1d160f;
  --ink-soft:#40342a;
  --muted:#574739;
  --faint:#6d5c4b;
  --line:#e6d4bf;
  --line-soft:#f1e3d3;

  /* ---- accent, sampled from the navy band on the Finessa tub ----
     The band is a gradient: #0b143e at the left edge, #1a5993 at the right. */
  --accent:#1a5993;
  --accent-deep:#0b2c5e;
  --accent-tint:#e4ecf6;
  --accent-line:#b7cde6;
  --accent-glow:rgba(26,89,147,.22);

  /* ---- night: the deep end of the same band, used for dark slabs ---- */
  --night:#0b143e;
  --night-2:#16406f;
  --night-ink:#cfdcee;

  /* ---- secondary ramp: sage, the band the product stands on ----
     The house token names are kept so the shared tools and validate.py keep
     working; only the values move. There is no metal on this label. */
  --gold:#8fa07e;
  --gold-deep:#4d6042;
  --gold-soft:#eaf0e3;
  --gold-line:#c5d3b6;

  /* ---- type: Young Serif has ONE weight (400). Headings are sized and
     spaced, never bolded, and Nunito carries every bold on the page. ---- */
  --display:'Young Serif','Young Serif Fallback',Georgia,'Times New Roman',serif;
  --serif:'Young Serif','Young Serif Fallback',Georgia,'Times New Roman',serif;
  --sans:'Nunito','Nunito Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --r:10px;
  --r-s:6px;
  --r-l:18px;
  --radius:10px;
  --shadow:0 14px 34px rgba(43,33,23,.10);
  --shadow-sm:0 2px 12px rgba(43,33,23,.06);
  --shadow-lg:0 26px 58px rgba(11,20,62,.16);
}

/* ==========================================================================
   Getfinessa - getfinessa.com
   Design slot: batch5_assignments.py row 28.

   GROUND      apricot cream, sage bands behind the product
   ACCENT      the navy band on the Finessa tub (assets/finessa-product-1-bottles.webp)
   TYPE        Young Serif (display, one weight) / Nunito (body and every bold)
   HEADER      two rows - an ingredient ticker above, wordmark left and a wide
               CTA right beneath
   HERO        copy LEFT, tub RIGHT inside an open ring with ingredient thumbs
               on the rim, standing on a low sage disc
   FOOTER      stacked bands - bonus recap, five short link columns, NAP last

   The component system is the estate's; the arrangement, the chrome and the
   palette are this site's. Colour is taken from the product tub, never from
   the UI reference. Finessa is a POWDER in a 3.38 oz (96 g) tub with a scoop,
   so nothing here is written in capsules: the pack panel, the buy cards and
   the hero all say tubs, scoops and servings.
   ========================================================================== */

/* ---- 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:1.0625rem}
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:400;letter-spacing:-.006em}
b,strong{color:var(--ink-soft);font-weight:800}

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

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

/* ---- 0. THE TOPLINE TRUST STRIP (house .util component) ------------------
   Role, lot, dose and count, guarantee, order phone. Five facts above
   everything else so the masthead does not have to carry them (hero.md).
   It must stay ABOVE the CRITICAL-END marker: it is the first thing painted,
   and appended to the end of the sheet it would load async and flash
   unstyled at the very top of the page.

   It is NOT getexitide's strip recoloured. The ground is the navy band cut
   from the Finessa tub -- the same --night the footer's bonus band stands on,
   the deep end of the gradient --accent is sampled from -- so the page opens
   on the product's own colour. The separators are the round sage dots the
   ingredient ticker already sets after every name, which makes the two rails
   read as one pair of header rows rather than as a borrowed component sitting
   on top of a native one.

   The sage dot lives on ::after of every item and is suppressed on the
   guarantee, which is the last item at every width -- so shedding items 2 and
   3 on a narrow screen can never leave a dot pointing at nothing. */
.util{background:var(--night);color:var(--night-ink);font-size:.9063rem;
  border-bottom:1px solid var(--night-2)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:0;
  padding-block:9px}
/* The items are flex CHILDREN, never flex containers. An inline-flex item
   with a gap turns "Lot" and the lot code into two flex items and opens the
   gap between them as well, which reads as a typo. The dot is an inline-block
   ::after with a margin instead. */
.util__item{white-space:nowrap;padding-right:15px}
.util__item::after{content:"";display:inline-block;width:5px;height:5px;
  border-radius:50%;background:var(--gold);margin-left:15px;
  vertical-align:.14em}
.util__item:nth-child(4)::after{display:none}
.util__item b{color:#fff;font-weight:800}
.util__tel{margin-left:auto;color:#fff;font-weight:800;white-space:nowrap;
  padding-left:15px}
.util__tel:hover{color:var(--gold-soft)}
/* The five facts measure 1,092px and the row is 1,132px from 1180 up, so they
   hold one line on a desktop. Below that the strip sheds, and each breakpoint
   is the MEASURED width at which the remaining facts stop fitting, not a
   round number: the lot at 1160 (it is printed again on batch-verify.html and
   on the tag under the hero), the dose at 970 (the Quick Answer opens with
   it). The role and the 180 days -- the two longest-lived reasons to trust
   the page -- and the order line survive to 390, where the strip settles into
   two CENTRED rows rather than a ragged wrap: the role on its own line, the
   guarantee and the phone beneath it. */
@media(max-width:1160px){.util__item:nth-child(2){display:none}}
@media(max-width:970px){.util__item:nth-child(3){display:none}}
@media(max-width:700px){
  .util__row{justify-content:center;padding-block:7px}
  .util__item:first-child{flex:0 0 100%;text-align:center;padding-right:0}
  .util__item:first-child::after{display:none}
  .util__item:nth-child(4){padding-right:13px}
  .util__item:nth-child(4)::after{display:inline-block;margin-left:13px}
  .util__tel{margin-left:0;padding-left:0}
}
/* "180-day money-back guarantee" plus the order line is 381px of text in a
   342px row at 390, so the guarantee and the phone landed on two rows of
   their own. `money-back` is the one word in the strip that carries no fact
   the rest of the line does not: it goes, and the two sit on one row. */
@media(max-width:470px){.util__long{display:none}}

/* ---- 1. HEADER, ROW ONE: the ingredient ticker ---------------------------
   A sage rail above the masthead naming what is actually in the tub. It is
   decoration for a sighted reader and duplicated markup for a seamless loop,
   so the whole rail is hidden from assistive technology; the same names are
   printed as text on the ingredients page. */
.topline{background:var(--gold-soft);border-bottom:1px solid var(--gold-line);
  overflow:hidden}
.topline .ticker{display:flex;width:max-content;align-items:center;
  animation:fnTick 44s linear infinite}
.topline .ticker ul{display:flex;align-items:center;gap:0;flex:none}
/* Scoped under .topline on purpose. type_floor.py keys its floors on the
   SELECTOR, and a bare `.ticker li` reads as a body-copy list item and gets
   raised to 17px -- which makes a decorative marquee the loudest type on the
   page. Under .topline it takes the utility-bar floor of 14.5px, which is the
   right family for an uppercase, letter-spaced rail. */
.topline .ticker li{font-family:var(--sans);font-size:.9063rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);
  white-space:nowrap;padding:8px 20px;display:flex;align-items:center;gap:20px}
.topline .ticker li::after{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--gold);flex:none}
@keyframes fnTick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- 2. HEADER, ROW TWO: wordmark left, wide CTA right ------------------- */
.nav{position:sticky;top:0;z-index:900;background:rgba(253,244,234,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding-block:14px;flex-wrap:nowrap;position:relative}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:38px;height:38px;margin-right:12px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.02}
.brand__prod{font-family:var(--display);font-size:1.62rem;font-weight:400;
  color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:4px;
  white-space:nowrap}
.navmenus{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.menu{display:flex;align-items:center;gap:24px;flex-wrap:nowrap}
.menu li{flex:none}
.menu a{font-family:var(--sans);font-size:.95rem;font-weight:700;
  color:var(--ink-soft);white-space:nowrap;padding-block:7px;
  border-bottom:2px solid transparent}
.menu a:hover,.menu a[aria-current]{color:var(--accent);text-decoration:none;
  border-bottom-color:var(--accent)}
.nav__cta{flex:none}
/* "Wide" is the point of this masthead: the order button is a broad slab, not
   a pill, and it keeps a minimum width so it reads as the row's anchor. */
.nav__cta .btn{min-width:212px}
.burger{display:none;background:var(--paper-card);border:1px solid var(--line);
  cursor:pointer;width:46px;height:46px;padding:11px;flex:none;
  border-radius:var(--r-s)}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;
  border-radius:2px}

/* ---- 3. BUTTONS: square-shouldered slabs, no icon ------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:800;font-size:1rem;line-height:1.2;
  padding:14px 28px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn--cta{background:var(--accent);color:#fff;box-shadow:0 10px 24px var(--accent-glow)}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:var(--paper-card);color:var(--accent-deep);
  border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--gold-soft);color:var(--gold-deep);
  border-color:var(--gold-line)}
.btn--gold:hover{border-color:var(--gold)}
.btn--lg{padding:17px 32px;font-size:1.06rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: copy LEFT, tub RIGHT in an open ring ----------------------- */
.hero{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible;
  border-bottom:1px solid var(--line)}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:54px;
  align-items:start;padding-block:52px 68px}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--paper-card);
  border:1px solid var(--accent-line);color:var(--accent-deep);font-weight:800;
  font-size:.8438rem;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 16px;border-radius:999px;box-shadow:var(--shadow-sm)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)}
.hero h1{font-size:clamp(2.1rem,4.1vw,3.2rem);margin:20px 0 0;font-weight:400;
  line-height:1.08;letter-spacing:-.012em}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:1rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero__sub{margin:16px 0 0;font-size:1.0625rem}

.ticks{margin:22px 0 0;display:grid;gap:11px}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;
  color:var(--ink-soft)}
.ck{flex:none;width:22px;height:22px;border-radius:var(--r-s);background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:800;margin-top:3px}

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

.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.factpills li{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-s);padding:6px 13px;font-size:.9063rem;color:var(--faint)}
.factpills li b{color:var(--ink)}

.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:22px 0 0;max-width:520px}
.figures div{background:var(--gold-soft);border:1px solid var(--gold-line);
  border-radius:var(--r);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.62rem;
  font-weight:400;color:var(--ink);line-height:1.05}
.figures span{display:block;margin-top:5px;font-size:.9063rem;color:var(--faint)}

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

/* The product column. An open ring sits BEHIND the tub and is deliberately
   wider than the card, or it would be invisible behind an opaque panel
   (design-system.md, motif rule 4). The tub stands on a low sage disc. */
.hero__media{position:relative}
.hero__stick{position:relative;display:block;padding-block:30px 52px}
.hero__ring{position:absolute;left:50%;top:46%;width:104%;aspect-ratio:1;
  translate:-50% -50%;border-radius:50%;border:2px solid var(--accent-line);
  z-index:0;pointer-events:none}
.hero__ring::after{content:"";position:absolute;left:50%;bottom:8%;
  width:64%;height:13%;translate:-50% 0;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--gold) 0%,rgba(143,160,126,.42) 58%,transparent 72%)}
.hero__card{background:transparent;text-align:center;padding:10px;
  position:relative;z-index:2}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 22px 30px rgba(43,33,23,.26))}
/* Ingredient thumbs sitting ON the ring's rim. Absolute on the rail, so they
   travel with the sticky column. */
.ringthumbs{position:absolute;inset:0;z-index:3;pointer-events:none}
.ringthumbs img{position:absolute;width:74px;height:74px;border-radius:50%;
  background:var(--paper-card);border:2px solid var(--paper-card);
  box-shadow:var(--shadow);object-fit:cover}
.ringthumbs img:nth-child(1){left:-2%;top:22%}
.ringthumbs img:nth-child(2){right:-2%;top:22%}
.ringthumbs img:nth-child(3){left:6%;bottom:16%}
.ringthumbs img:nth-child(4){right:6%;bottom:16%}
.hero__tag{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);z-index:4;
  background:var(--gold-soft);color:var(--gold-deep);font-size:.9063rem;font-weight:800;
  letter-spacing:.06em;padding:7px 16px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--gold-line)}
.floaty{position:absolute;background:var(--paper-card);border-radius:var(--r);
  padding:11px 15px;box-shadow:var(--shadow-lg);font-family:var(--sans);
  font-size:1rem;font-weight:800;color:var(--ink);z-index:5;line-height:1.2;
  display:flex;align-items:center;gap:10px}
.floaty img{width:44px;height:44px;flex:none}
.floaty small{display:block;color:var(--accent-deep);font-family:var(--sans);
  font-size:.9063rem;font-weight:700;margin-top:3px}
.floaty--tl{top:22px;left:-10px}
.floaty--br{bottom:64px;right:-10px}

@media(min-width:1025px){
  .hero__media{position:sticky;top:96px;align-self:start;
    height:calc(100vh - 116px);min-height:380px;
    display:flex;align-items:center;justify-content:center}
  .hero__stick{max-height:calc(100vh - 132px)}
  .hero__stick .hero__card img{max-height:calc(100vh - 300px);min-height:190px;
    width:auto;object-fit:contain}
}

/* ---- 5. QUICK ANSWER (AEO) ----------------------------------------------- */
.answer{background:var(--paper-card);border:1px solid var(--line-soft);
  border-left:5px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow-sm);padding:20px 26px;margin:24px 0 0}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;
  font-size:.8438rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.hero .answer p{font-size:1.1rem;line-height:1.66}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-tint);border-bottom:1px solid var(--gold-line)}
.trust__note{max-width:300px;font-size:.9063rem;line-height:1.5;color:var(--faint)}
.trust__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:22px 38px;padding-block:20px}
.trust__row figure{text-align:center;max-width:128px}
.trust__row img{margin-inline:auto}
.trust__row figcaption{font-size:.9063rem;color:var(--faint);margin-top:7px;
  font-weight:700}

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The header sheds rather than wraps (design-system.md). Two rows means the
   masthead is already ~110px tall, so a wrap would be visible for half a
   screen: the phone number is not in the row at all, the menu collapses into
   the burger at 1140px, and the wide CTA narrows before it goes. */
@media(max-width:1340px){.menu{gap:18px}.menu a{font-size:.9rem}.navmenus{gap:18px}
  .nav__cta .btn{min-width:186px}}
@media(max-width:1140px){
  .burger{display:block}
  .navmenus{display:none;position:absolute;top:calc(100% + 13px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;background:var(--paper-card);
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    box-shadow:var(--shadow);padding-block:6px 10px;max-height:74vh;overflow-y:auto}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a{display:block;padding:14px 22px;border-bottom:1px solid var(--line-soft);
    font-size:1rem}
  .menu a:hover,.menu a[aria-current]{border-bottom-color:var(--line-soft);
    background:var(--accent-tint)}
  .nav__row .brand{margin-right:auto}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:24px;padding-block:30px 48px}
  /* 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 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>.ticks{order:5}
  .hero__copy>.hero__cta{order:6}
  .hero__copy>.hero__rating{order:7}
  .hero__copy>.pay{order:8}
  .hero__copy>.hero__sub{order:9}
  .hero__copy>.factpills{order:10}
  .hero__copy>.figures{order:11}
  .hero__card img{max-width:300px}
  .ringthumbs img{width:56px;height:56px}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.05rem}
  .hero__card img{max-width:236px}
  .hero__ring{width:118%}
  .ringthumbs{display:none}
  .figures{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav__cta .btn{padding:12px 16px;font-size:.93rem;min-width:0}
  .brand__firm{display:none}
  .topline .ticker li{font-size:.9063rem;padding:7px 14px;gap:14px}
}
@media(max-width:380px){.nav__cta .btn{display:none}}
@media(prefers-reduced-motion:reduce){.topline .ticker{animation:none}}


/* ---- hero motif -- scoop-swirl ---------------------------------------- */
.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(115% 90% at 72% 18%,#d4d8da,#fdf4ea 52%,#fdf4ea)}.hero__media::before{content:'';position:absolute;left:50%;top:50%;width:136%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 58%,rgba(26,89,147,0.40) 76%,transparent 92%);filter:blur(16px);animation:fnSwirl 26s linear infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(26,89,147,0.30);animation:fnRim 34s linear infinite reverse;z-index:1;pointer-events:none}@keyframes fnSwirl{to{transform:rotate(360deg)}}@keyframes fnRim{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* ---- hero stage: what the product is FOR, moving around the tub -------
   This one is a POWDER stirred into water, so the air around the tub is a
   slow stir rather than a rise: a dotted orbit of powder turning around the
   tub, a second slower counter-orbit so it never reads as one rigid wheel,
   and a travelling highlight on the ring already drawn in the design, as if
   the stir were catching the light on one side.
   .hero__ring::after is the shadow ellipse the design already uses, so the
   highlight takes ::before. .hero__media's two pseudo-elements belong to
   hero_motifs.py and are untouched (pitfall 65: a motif that wrote to the
   media column removed the sticky product column on 14 sites).
   Transform and opacity only; nothing sets position on .hero__media and no
   ancestor becomes a scroll container. */
.hero__ring::before{content:"";position:absolute;inset:-1px;border-radius:50%;
  pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 62%,var(--accent-line) 80%,transparent 94%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:fnRingLight 24s linear infinite}
.hero__stick::before{content:"";position:absolute;left:50%;top:46%;width:104%;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle,var(--accent) 2.2px,transparent 2.8px),
    radial-gradient(circle,var(--gold-deep) 1.6px,transparent 2.1px);
  background-size:78px 78px,116px 116px;background-position:0 0,30px 44px;
  -webkit-mask-image:radial-gradient(farthest-side,transparent 58%,#000 76%,transparent 99%);
  mask-image:radial-gradient(farthest-side,transparent 58%,#000 76%,transparent 99%);
  animation:fnStir 38s linear infinite}
.hero__stick::after{content:"";position:absolute;left:50%;top:46%;width:82%;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:0;
  pointer-events:none;opacity:.4;
  background-image:radial-gradient(circle,var(--gold) 1.8px,transparent 2.3px);
  background-size:94px 94px;background-position:18px 26px;
  -webkit-mask-image:radial-gradient(farthest-side,transparent 52%,#000 74%,transparent 98%);
  mask-image:radial-gradient(farthest-side,transparent 52%,#000 74%,transparent 98%);
  animation:fnStir 52s linear infinite reverse}
.hero__card{animation:fnSettle 10s ease-in-out infinite}
@keyframes fnRingLight{to{transform:rotate(360deg)}}
@keyframes fnStir{to{transform:rotate(360deg)}}
@keyframes fnSettle{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){
  .hero__ring::before,.hero__stick::before,.hero__stick::after,
  .hero__card{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.
   REGENERATED ON EVERY BUILD from the rules below the marker. Edit
   the originals; never this copy, which is overwritten. */
@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;}
}
@media (max-width:480px){
  .hero__ring{width:92%}
}
@media (max-width:920px){
  .hero .hero__media::before{width:108%}
  .hero .hero__media::after{width:88%}
}
/* --- end of the copied hero responsive rules --- */

/*!SITE-HOME-CRIT-START*/
/* ---- home hero: the buy button on the first screen -----------------------
   Measured at 1440x900 before this block: the hero CTA sat at y=1131, which
   is 231px below the fold, so the money page opened with nothing to click.

   The copy column becomes a flex column on DESKTOP ONLY and its children are
   re-ordered to eyebrow, headline, Quick Answer, BUTTONS, payment line, then
   the evidence blocks. DOM order is untouched, so the Quick Answer still
   follows the H1 for parsers and for the speakable selector.

   The phone order is composed separately under max-width:920px with
   display:contents; that query and this one are disjoint, and the phone
   ordering is deliberately left exactly as it was.

   This moves boxes, so it lives ABOVE the critical marker and is inlined
   into every page on the next build. */
@media(min-width:921px){
  .hero__copy{display:flex;flex-direction:column}
  /* inline-flex shrank the eyebrow to its text in block flow; as a flex item
     it would stretch the full column. Only this one child opts out. */
  .hero__copy>.pill{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>.ticks{order:6}
  .hero__copy>.hero__rating{order:7}
  .hero__copy>.hero__sub{order:8}
  .hero__copy>.factpills{order:9}
  .hero__copy>.figures{order:10}
  /* Re-ordering alone left the pair of buttons at y=900, exactly on the fold.
     The headline held five lines at 3.2rem and drops to four at 2.8rem; the
     Quick Answer gives back the rest. Measured, not guessed: the buttons now
     sit at 743-802 and 814-872 on a 900px screen. */
  .hero__grid{padding-block:34px 62px}
  .hero h1{font-size:clamp(2.05rem,3.3vw,2.8rem);line-height:1.06;margin-top:16px}
  .hero .answer{margin-top:20px;padding:18px 24px}
  .hero .answer p{font-size:1.09rem;line-height:1.62}
  .hero__copy>.hero__cta{margin-top:20px}
  .hero__copy>.ticks{margin-top:30px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS: flat bands, a hairline, no shadow between them --------- */
.sec{padding-block:74px}
.sec--tight{padding-block:42px}
.sec--tint{background:var(--paper-tint);border-block:1px solid var(--gold-line)}
.sec--white{background:var(--paper-card)}
.sec--warm{background:var(--paper-warm)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:34px}
.sec__head--center{text-align:center;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.8438rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:12px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold)}
.rule{display:none}
.sec h2{font-size:clamp(1.62rem,3vw,2.24rem);margin-bottom:12px;font-weight:400}
.sec h3{font-size:1.24rem;margin-bottom:8px;font-weight:400}
.lead{font-size:1.12rem;color:var(--muted)}
.note{font-size:.9063rem;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>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(1.95rem,3.8vw,2.8rem);font-weight:400;letter-spacing:-.01em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li{padding-left:24px;margin-bottom:.45em}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:2px;top:.66em;
  width:9px;height:9px;border-radius:50%;background:var(--gold)}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:1px;
  width:27px;height:27px;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:400;color:var(--accent);padding:6px 12px 0 0}

.pullquote{border-left:4px solid var(--gold);padding:8px 0 8px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.3rem;font-weight:400;
  color:var(--ink);line-height:1.44}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.9063rem;
  color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:800}

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

/* ---- 8. CARDS, GRIDS: flat, warm border, sage top edge ------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:var(--gold);opacity:0;transition:opacity .2s ease}
.card:hover{transform:translateY(-3px);border-color:var(--gold-line)}
.card:hover::before{opacity:1}
.card h3{font-size:1.16rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px 24px 80px;position:relative;
  counter-increment:s}
.step__n{position:absolute;left:22px;top:22px;width:40px;height:40px;
  border-radius:50%;background:var(--accent);color:#fff;display:flex;
  align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:800;font-size:1.02rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.14rem}
.step p{font-size:1.0625rem;color:var(--muted)}

.chips{display:grid;gap:10px;margin:18px 0 0}
.chips li{display:flex;gap:11px;align-items:flex-start;font-size:1.0625rem}
.chips .ck{background:var(--gold-soft);color:var(--gold-deep);
  border:1px solid var(--gold-line)}

.callout{background:var(--accent-tint);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:18px 24px;margin:24px auto;
  font-size:1.0625rem}
.callout p+p{margin-top:.8em}
.alert{background:var(--gold-soft);border-left:5px solid var(--gold);
  border-radius:0 var(--r) var(--r) 0;padding:18px 24px;margin:24px auto;
  font-size:1.0625rem}
.alert p+p{margin-top:.8em}
.flag{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  font-size:.8438rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:999px;border:1px solid var(--gold-line)}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);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:400;color:var(--ink);font-size:1.08rem}
.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(--night);color:#fff;font-size:.9063rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:800;
  font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:var(--paper)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

/* ---- 10. SPLIT ----------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:44px;align-items:center}
.split--rev{grid-template-columns:minmax(0,.95fr) minmax(0,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,minmax(0,1fr));gap:24px;
  margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.shots img{width:100%}
.shots figcaption{padding:18px 20px;font-size:.9688rem;color:var(--muted)}
.shots figcaption b{display:block;font-family:var(--display);font-size:1.1rem;
  font-weight:400;color:var(--ink);margin-bottom:6px}

/* ---- 12. PROMO / STATS / BADGEWALL: the navy slab ------------------------ */
.promo{background:linear-gradient(120deg,var(--night),var(--night-2));
  color:var(--night-ink);border-radius:var(--r-l);padding:32px 36px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:linear-gradient(120deg,var(--night),var(--night-2));
  border-radius:var(--r-l);padding:34px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.3rem;font-weight:400;
  color:#fff;line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9063rem;color:var(--night-ink)}
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.badgewall figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 14px;text-align:center}
.badgewall img{margin:0 auto 10px}
.badgewall figcaption{font-size:.9063rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.98rem;
  margin-bottom:4px;font-family:var(--display);font-weight:400}

/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--accent),var(--gold))}
.whycard h3{font-size:1.14rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.forlist h3{font-size:1.16rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:9px;height:9px;margin-top:.6em;
  border-radius:50%;background:var(--accent)}
.forlist--no li::before{background:var(--gold)}

/* ---- 14. THE LABEL PANEL AND THE INGREDIENT CARDS ------------------------
   Finessa's panel is four PROPRIETARY BLENDS, each with one total weight and
   no per-name milligram. `.ing__dose` therefore carries a blend total, not an
   individual amount, and the cards say which blend each name sits in. */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;position:relative}
.ingcard h3{font-size:1.28rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:800;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ing__dose{display:inline-block;background:var(--accent-tint);
  border:1px solid var(--accent-line);color:var(--accent-deep);border-radius:var(--r-s);
  padding:3px 11px;font-size:.9063rem;font-weight:800;margin-bottom:10px}
.ingthumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ingthumbs figure{text-align:center}
.ingthumbs img{margin-inline:auto;border-radius:50%;background:var(--paper-card);
  border:1px solid var(--line)}
.ingthumbs figcaption{margin-top:9px;font-size:.9063rem;color:var(--muted);
  font-weight:700}
.facts{background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--r-s);
  overflow:hidden;max-width:580px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;
  font-family:var(--display);font-size:1.2rem;font-weight:400}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line);
  text-align:left}
.facttab th{font-weight:700;color:var(--ink-soft);font-size:1rem}
.facttab td:last-child{text-align:right;font-weight:800;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

/* ---- 15. QA record sheet ------------------------------------------------- */
.qa{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--night);color:#fff;padding:16px 24px;
  font-family:var(--display);font-weight:400;font-size:1.12rem}
.qa dl{margin:0;display:grid;grid-template-columns:32% minmax(0,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:.06em;
  text-transform:uppercase;font-family:var(--sans)}
.qa dd{color:var(--muted);font-size:1.0625rem}
.qa dl>:nth-last-child(-n+2){border-bottom:0}

/* ---- 16. ADD-TO-CART PANEL ------------------------------------------------
   Three pack cards: a head band with the flag, the pack name and the supply,
   the tub shot in a fixed box, the price per tub, the total against the
   seller's struck comparison price, four perks, Add To Cart and the card
   marks. Featured pack raised on desktop, first on a phone. */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;display:flex;flex-direction:column;
  text-align:center}
/* Raised with a negative margin, not a transform: the rise-on-entry pass sets
   transform:none on every revealed card and would cancel a translate. */
.buy__card--feature{border:2px solid var(--accent);box-shadow:var(--shadow-lg);
  margin-top:-12px}
.buy__head{background:var(--night);color:#fff;padding:16px 18px 14px;
  position:relative}
.buy__card--feature .buy__head{background:linear-gradient(120deg,var(--accent),var(--accent-deep))}
.buy__flag{display:inline-block;background:var(--gold-soft);color:var(--gold-deep);
  font-size:.8438rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px;border-radius:999px;margin-bottom:8px}
.sec .buy__name{color:#fff;font-size:1.62rem;font-weight:400;margin:0;
  font-family:var(--display)}
.buy__supply{color:var(--night-ink);font-size:.9063rem;font-weight:700;margin-top:4px;min-height:3.3em}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
/* One box for every pack shot: the six-tub image is 4:1 where the single tub
   is square, and at a shared width it sat a quarter as tall as its neighbours. */
.buy__img{display:block;width:100%;max-width:230px;height:180px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:3rem;font-weight:400;
  color:var(--ink);line-height:1;display:flex;align-items:flex-start;
  justify-content:center;gap:2px}
.buy__cur{font-size:1.4rem;margin-top:6px}
.buy__per{font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--faint);
  align-self:flex-end;margin:0 0 6px 6px}
.buy__total{font-size:1.0625rem;color:var(--muted);margin:10px 0 14px}
.buy__total b{color:var(--ink);font-size:1.2rem}
.buy__total s{color:var(--faint);margin-left:6px}
.buy__perks{display:grid;gap:7px;text-align:left;margin:0 auto 18px;font-size:1rem;
  color:var(--ink-soft)}
.buy__perks li{position:relative;padding-left:26px}
.buy__perks li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;
  height:19px;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}
/* Pack-card alignment, fixed by measurement 18 Sep 2026. Two separate
   causes, both invisible to every automated check:
   1. The Add To Cart button is NOT the last element in a card -- payment
      art and a note follow it -- so `margin-top:auto` absorbed whatever
      space those trailing blocks left over, which differs per card. The
      buttons landed on three different baselines. The body now packs from
      the top, and min-height keeps a two-line label level with a one-line
      one.
   2. The supply line wraps to two lines on the larger packs at some widths,
      which pushed the whole card body down on those cards only. It now
      reserves two lines at every width.
   pack_cards.py is the tool that should guarantee this and cannot: its
   matcher is `\bcard`, which cannot match `buy__card`, because an
   underscore is a word character. */
.buy__add{font-size:1.06rem;padding-block:15px;text-transform:uppercase;
  letter-spacing:.04em;margin-top:14px;min-height:73px;display:flex;align-items:center;justify-content:center}
.buy__cart{flex:none}
.buy__card--feature .buy__add{background:var(--night)}
.buy__card--feature .buy__add:hover{background:var(--accent-deep)}
.buy__pay{display:block;width:180px;height:auto;margin:12px auto 0;opacity:.9}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);
  gap:34px;align-items:center;background:var(--paper-card);
  border:1px solid var(--line);border-radius:var(--r-l);padding:32px}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.42rem;margin-bottom:12px}

/* ---- 17. BONUSES: the three e-books -------------------------------------- */
.bonus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bonus figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 22px 24px;text-align:center}
.bonus img{margin:0 auto 14px;max-width:190px}
.bonus figcaption{text-align:left;font-size:1rem;color:var(--muted)}
.bonus figcaption b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.14rem;color:var(--ink);margin-bottom:6px}

/* ---- 18. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-weight:400;
  font-size:1.1rem;color:var(--ink)}
.tcard span{font-size:.9063rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;gap:12px;
  align-items:center;font-size:.9063rem;color:var(--faint)}
.bar__t{height:10px;background:var(--paper-deep);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px}
.bigscore{font-family:var(--display);font-size:2.8rem;font-weight:400;
  color:var(--ink);line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:700}
.tlife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tlife figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.tlife img{width:100%}
.tlife figcaption{padding:16px 18px;font-size:.9688rem;color:var(--muted)}
.tlife figcaption b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.06rem;color:var(--ink);margin-bottom:5px}

/* ---- 19. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{padding:18px 22px;font-family:var(--display);font-weight:400;
  color:var(--ink);cursor:pointer;font-size:1.1rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;
  border-radius:50%;background:var(--accent-tint);color:var(--accent-deep);
  font-size:1.2rem;display:flex;align-items:center;justify-content:center}
.faq details[open] summary::after{content:"\2013";background:var(--accent);color:#fff}
.faq__b{padding:0 22px 18px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 20. REFS, BYLINE ---------------------------------------------------- */
.refs{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px 26px}
.refs h2{font-size:1.2rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:30px;font-size:1.062rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:800;
  color:var(--accent-deep)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-weight:400;font-size:1.12rem;
  color:var(--ink);display:block;margin-bottom:7px}
.byline p{font-size:.9688rem;color:var(--muted)}

/* ---- 21. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.formcard h3{font-size:1.18rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9063rem;font-weight:800;
  color:var(--ink-soft);margin:14px 0 5px}
/* 16px minimum: anything smaller makes iOS Safari zoom on focus and never
   zoom back (pitfall 86). */
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 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:linear-gradient(120deg,var(--night),var(--night-2));
  border-radius:var(--r-l);padding:40px 42px;color:var(--night-ink);
  position:relative;overflow:hidden}
.final::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;
  height:280px;border-radius:50%;border:2px solid rgba(143,160,126,.38)}
.final h2{color:#fff;font-size:clamp(1.55rem,3vw,2.15rem);margin-bottom:12px;
  font-weight:400}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.35))}
.final__price{font-family:var(--display);font-size:1.3rem;font-weight:400;
  color:#fff;margin:14px 0 18px}
.final .btn--cta{background:var(--gold-soft);color:var(--night)}
.final .btn--cta:hover{background:#fff;color:var(--night)}
.final p,.article .final p{color:var(--night-ink)}
.final__price,.article .final .final__price{color:#fff}
.final a:not(.btn){color:#fff;text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
  text-align:left}
.rel a{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;display:block;
  transition:transform .2s ease,border-color .2s ease}
.rel a:hover{transform:translateY(-3px);border-color:var(--gold-line);
  text-decoration:none}
.rel b{display:block;font-family:var(--display);font-weight:400;font-size:1.1rem;
  color:var(--ink);margin-bottom:6px}
.rel span{font-size:.9688rem;color:var(--muted)}

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

/* ---- 24. FOOTER: stacked bands ------------------------------------------
   Band 1  the bonus recap, on the navy the tub's label band is cut from
   Band 2  five short link columns, on the sage
   Band 3  NAP, payment, the disclaimers and the copyright line, last
   No footer column grid is shared with any other site on the estate: the
   five-column band is this site's, and the bonus recap exists because this
   is one of the few packs that HAS bonuses. */
.fbonus{background:linear-gradient(120deg,var(--night),var(--night-2));
  color:var(--night-ink);padding-block:34px}
.fbonus__grid{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));
  gap:26px;align-items:center}
.fbonus__lead b{display:block;font-family:var(--display);font-weight:400;
  font-size:1.34rem;color:#fff;margin-bottom:6px}
.fbonus__lead{max-width:270px;font-size:.9688rem}
.fbonus figure{display:flex;align-items:center;gap:14px;font-size:.9688rem}
.fbonus figure img{width:62px;height:auto;flex:none;border-radius:4px}
.fbonus figcaption b{display:block;color:#fff;font-size:1rem;margin-bottom:3px}
footer{background:var(--paper-tint);color:var(--muted);font-size:.9688rem}
footer a{color:var(--accent-deep)}
footer a:hover{color:var(--accent)}
.fgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:26px;
  padding-block:42px 30px;border-bottom:1px solid var(--gold-line)}
.fgrid h4{color:var(--gold-deep);font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px;font-weight:800}
.fgrid li{margin-bottom:7px;font-size:1.062rem;line-height:1.5}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:400;
  color:var(--ink);margin-bottom:10px}
.fbrand span{color:var(--accent)}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fbadges img{background:var(--paper-card);border-radius:50%;padding:2px;
  border:1px solid var(--line)}
.fnap{background:var(--paper-warm);border-top:1px solid var(--line)}
.fnap__in{padding-block:26px;font-size:.9688rem;line-height:1.75}
.fnap strong{color:var(--ink)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:18px;
  font-size:.9063rem;border-top:1px solid var(--line)}
.fpay img{background:var(--paper-card);border-radius:4px;padding:4px 6px;
  border:1px solid var(--line)}
.disc{padding-block:18px 30px;font-size:.9063rem;line-height:1.68;
  color:var(--faint);border-top:1px solid var(--line)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--ink)}
.disc .copy{margin-top:16px}

/* ---- 25. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--night);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:2px solid var(--gold)}
.buybar.show{transform:translateY(0)}
.buybar__in{max-width:var(--wrap);margin-inline:auto;padding:11px 24px;display:flex;
  align-items:center;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:.9375rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--gold-line)}
.buybar .btn{padding:10px 22px}

/* ---- 26. BLOG ------------------------------------------------------------ */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:14px;font-weight:400}
.article h2{font-size:1.56rem;margin:1.9em 0 .6em;scroll-margin-top:114px;
  font-weight:400}
.article h3{font-size:1.2rem;margin:1.5em 0 .5em;font-weight:400}
.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:"";position:absolute;left:3px;top:.66em;width:9px;
  height:9px;border-radius:50%;background:var(--gold)}
.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-deep);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:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--gold);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9063rem;
  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:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;margin-bottom:26px}
.toc h2{font-size:.8438rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--gold-deep);margin:0 0 10px;font-weight:800}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:28px;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:5px 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:.8438rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent-deep);
  margin-bottom:10px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.posts article:hover{transform:translateY(-3px);border-color:var(--gold-line)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.16rem;margin-bottom:8px}
.posts p{font-size:1.062rem;color:var(--muted)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:800}
/* A shared component in a narrower column is a new component (pitfall 24). */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.24;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%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 27. MOTION: rise on entry ------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px) scale(.985)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
@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:1080px){
  .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>h1,.sec>.wrap>.eyebrow,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
  .badgewall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fbonus__grid{grid-template-columns:repeat(2,minmax(0,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,minmax(0,1fr))}
  .g3,.g4,.whygrid,.tgrid,.rel,.posts,.bonus,.tlife{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ingthumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .buy{grid-template-columns:1fr;max-width:440px;margin-inline:auto;gap:18px}
  .buy .buy__card:nth-child(1){order:3}
  .buy .buy__card:nth-child(2){order:1}
  .buy .buy__card:nth-child(3){order:2}
  .buy__card--feature{margin-top:0}
  .final--media{grid-template-columns:1fr;gap:22px}
  .final--media .final__img img{max-width:240px}
}
@media(max-width:700px){
  .sec{padding-block:50px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fgrid,.bonus,.tlife,.fbonus__grid{grid-template-columns:1fr}
  .ingthumbs{grid-template-columns:repeat(2,minmax(0,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 22px}
  .step{padding:22px 20px 22px 70px}
  .step__n{left:16px}
  .promo{padding:26px 22px}
}
/* Tap target: a button on a phone must be reachable with a thumb (44px). */
@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; }
}

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

/* The stir ring is sized at 104% so it reads as bigger than the tub, but at
   390 that pushed its right edge 7px past the viewport. The hero clips
   overflow-x, so nothing scrolled and no automated check below the render
   sweep could see it -- the ring simply lost a slice of one side. It is
   brought inside the column on phones. */
@media(max-width:480px){.hero__ring{width:92%}}

/* ==== fix_layout_breaks.py ==== */
/* A figure alone on its row, and components whose own
   background fights the band they sit in. Appended: each
   rule below is correct in isolation and only their
   combination fails, so the originals stay as written. */
.shots>figure:last-child:nth-child(odd){grid-column:1/-1;max-width:calc((100% - 24px) / 2);margin-inline:auto}
/* ==== end fix_layout_breaks.py ==== */

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav,header.header{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav,header.header{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 PAGE SURFACE -- design slot "circulate"
   24px on cards and panels, 16px on controls, a two-stop crisp shadow tinted
   with this site's own warm ink, a gradient on the buying CTA only, and two
   slow counter-rotating arcs behind the tub.

   SCOPE. Every selector begins with .hero, which is on index.html and nowhere
   else on this site, or with body:has(.hero) for the shared components -- the
   buttons, the cards, the pack ladder -- that also render on the inner pages.

   ORDER. modern_surface.py and footer_type.py strip and re-append their own
   blocks on every build and land after this one. Nothing here relies on being
   last: body:has(.hero) .card is two classes and an element against their one
   class, so it outranks them wherever the two overlap.

   PAINT ONLY. Radius, shadow, background, transition, transform. No padding,
   no margin, no font-size, no grid -- nothing in this block moves a box, so
   it belongs below the critical marker and needs a restamp, not a rebuild.
   ========================================================================== */
:root{
  --fn-rc:24px;                 /* radius, cards and panels */
  --fn-rb:16px;                 /* radius, buttons and chips */
  --fn-d1:0 1px 1px rgba(43,33,23,.08),0 4px 10px rgba(43,33,23,.10);
  --fn-d2:0 1px 1px rgba(43,33,23,.11),0 8px 18px rgba(43,33,23,.15);
  --fn-dn:0 1px 2px rgba(11,20,62,.16),0 10px 26px rgba(11,20,62,.20);
}

/* ---- 1. curve ----------------------------------------------------------
   Only classes that are actually on this home page are listed. A rule that
   matches nothing is not a design decision, it is a claim. */
body:has(.hero) .card,
body:has(.hero) .faq,
body:has(.hero) .alert,
body:has(.hero) .byline,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .whycard,
body:has(.hero) .tablewrap,
body:has(.hero) .shots figure,
body:has(.hero) .guarantee,
body:has(.hero) .final,
body:has(.hero) .promo,
body:has(.hero) .stats,
body:has(.hero) .qa,
body:has(.hero) .refs,
body:has(.hero) .buy__card{border-radius:var(--fn-rc)}

body:has(.hero) .btn,
body:has(.hero) .figures div{border-radius:var(--fn-rb)}

/* The Quick Answer is a flagged panel, not a plain card: the accent bar down
   its left edge stays tight and the open side takes the card radius. */
.hero .answer{border-radius:8px var(--fn-rc) var(--fn-rc) 8px}

/* ---- 2. shade ----------------------------------------------------------
   Two tight stops -- a 1px contact shadow and a 4px ambient one -- tinted
   with this site's warm ink, 43 33 23, never neutral black. */
body:has(.hero) .card,
body:has(.hero) .faq,
body:has(.hero) .alert,
body:has(.hero) .byline,
body:has(.hero) .step,
body:has(.hero) .keypoints,
body:has(.hero) .whycard,
body:has(.hero) .tablewrap,
body:has(.hero) .shots figure,
body:has(.hero) .guarantee,
body:has(.hero) .final,
body:has(.hero) .figures div,
body:has(.hero) .buy__card{box-shadow:var(--fn-d1)}
.hero .answer,
.hero .pill{box-shadow:var(--fn-d1)}

/* ---- 3. two weights of button ------------------------------------------
   The gradient is on the buying CTA and on it alone; the secondary button
   stays a solid panel with a hairline, so the pair reads as two weights
   rather than as two colours. */
body:has(.hero) .btn--cta{
  background-image:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
  box-shadow:var(--fn-d1),0 10px 24px var(--accent-glow)}
body:has(.hero) .btn--cta:hover,
body:has(.hero) .btn--cta:focus-visible{
  background-image:linear-gradient(135deg,var(--accent-deep) 0%,var(--night) 100%);
  box-shadow:var(--fn-d2),0 14px 30px var(--accent-glow)}
body:has(.hero) .buy__card--feature .buy__add{
  background-image:linear-gradient(135deg,var(--night-2) 0%,var(--night) 100%)}
body:has(.hero) .buy__card--feature .buy__add:hover{
  background-image:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%)}
body:has(.hero) .btn--ghost{box-shadow:var(--fn-d1)}
body:has(.hero) .btn--ghost:hover{box-shadow:var(--fn-d2)}

/* ---- 4. anything clickable answers the pointer -------------------------
   2px, which registers without reflowing the row beside it. */
body:has(.hero) .card,
body:has(.hero) .buy__card,
body:has(.hero) .shots figure,
body:has(.hero) .rel a{
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,
    border-color .22s ease}
body:has(.hero) .card:hover,
body:has(.hero) .buy__card:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .rel a:hover{transform:translateY(-2px);box-shadow:var(--fn-d2)}
body:has(.hero) .buy__card--feature:hover{box-shadow:var(--fn-dn)}

/* ---- 5. keyboard focus -------------------------------------------------- */
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{
  outline:3px solid var(--accent-deep);outline-offset:3px}

/* ---- 6. the pack ladder: a tab above the recommended card --------------
   The alignment machinery is untouched: the fixed head min-height, the fixed
   image box, the per-item min-height on Add To Cart and the feature card
   raised with margin-top rather than transform are all left exactly as they
   were, and the three button offsets were re-measured afterwards.

   The separators between the perk rows are drawn on ::after inside the grid's
   existing 7px gap, so they add no height and cannot move a baseline. ::before
   on those items is the tick and stays as it is.

   overflow goes visible on the feature card alone so the tab can stand above
   it; its head takes the card's own radius back so the corners still clip. */
body:has(.hero) .buy__card--feature{
  position:relative;overflow:visible;
  background:linear-gradient(180deg,var(--accent-tint) 0,var(--paper-card) 42%);
  box-shadow:var(--fn-dn)}
body:has(.hero) .buy__card--feature .buy__head{
  border-radius:calc(var(--fn-rc) - 2px) calc(var(--fn-rc) - 2px) 0 0}
body:has(.hero) .buy__card--feature::before{
  content:"";position:absolute;left:50%;top:-11px;width:146px;height:14px;
  transform:translateX(-50%);border-radius:var(--fn-rb) var(--fn-rb) 0 0;
  background:linear-gradient(90deg,var(--accent),var(--accent-deep));
  box-shadow:0 -1px 2px rgba(11,20,62,.14);pointer-events:none}
body:has(.hero) .buy__perks li+li::after{
  content:"";position:absolute;left:0;right:0;top:-4px;
  border-top:1px dashed var(--line);pointer-events:none}

/* ---- 7. hero motif: two counter-rotating arcs --------------------------
   Slot family "circulate". Both arcs live on the media column's own
   pseudo-elements -- the product image is the LCP element, is preloaded, and
   is never touched -- and both are sized past the product card so they read
   outside it: 126% and 104% of a 507px column whose card is 466px wide.

   These two pseudo-elements previously carried a 16px-blurred conic blob and
   a dashed rim. The blur goes, which also takes a full-size filtered layer
   off the compositor, and what is left is transform only. Slow on purpose:
   64s and 44s, counter-rotating. This is a powder stirred into water every
   morning for weeks, not an energy drink.

   The reduced-motion query that already follows the old motif names both
   pseudo-elements with !important, so these stop with it. */
.hero .hero__media::before{
  content:"";position:absolute;left:50%;top:50%;width:126%;aspect-ratio:1;
  translate:-50% -50%;border:0;border-radius:50%;filter:none;
  background:conic-gradient(from 196deg,
    rgba(26,89,147,0) 0deg,rgba(26,89,147,.04) 14deg,
    rgba(26,89,147,.62) 78deg,rgba(26,89,147,.14) 136deg,
    rgba(26,89,147,0) 164deg,rgba(26,89,147,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 4px));
  animation:fnArcWide 64s linear infinite;z-index:1;pointer-events:none}
.hero .hero__media::after{
  content:"";position:absolute;left:50%;top:50%;width:104%;aspect-ratio:1;
  translate:-50% -50%;border:0;border-radius:50%;filter:none;
  background:conic-gradient(from 24deg,
    rgba(77,96,66,0) 0deg,rgba(77,96,66,.04) 16deg,
    rgba(77,96,66,.60) 66deg,rgba(77,96,66,.12) 112deg,
    rgba(77,96,66,0) 136deg,rgba(77,96,66,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:fnArcTight 44s linear infinite reverse;z-index:1;pointer-events:none}
@keyframes fnArcWide{to{transform:rotate(360deg)}}
@keyframes fnArcTight{to{transform:rotate(360deg)}}
/* Below 921 the product column drops between the headline and the Quick
   Answer with about 20px of air above and below it, and a ring drawn at the
   desktop size crosses both. Measured at 390: the band between the H1 at 516
   and the Quick Answer at 927 is 411px and the column's centre is at 709, so
   anything up to 113% fits without touching type. These are 108% and 88%,
   which still read outside a 236px product shot. */
@media(max-width:920px){
  .hero .hero__media::before{width:108%}
  .hero .hero__media::after{width:88%}
}

/* The dotted stir orbits already drawn on .hero__stick are dropped a little
   so the two arcs are the loudest thing in the air around the tub rather
   than the fifth ring competing with them. */
.hero .hero__stick::before{opacity:.34}
.hero .hero__stick::after{opacity:.26}

/* The ground behind the hero was a cool grey blob left by the motif pass,
   which is the one colour on the page taken from neither the tub nor the
   label. It is the site's own pale navy tint instead. */
.hero{background:radial-gradient(118% 92% at 70% 16%,
  var(--accent-tint),var(--paper) 54%,var(--paper))}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .card:hover,
  body:has(.hero) .buy__card:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .btn:hover{transform:none}
  .hero .hero__media::before,
  .hero .hero__media::after{animation: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 .disc{font-size:16px}
footer .fgrid h4{font-size:15px}
footer .fnap__in{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 18 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 (43,33,23), 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(43,33,23,.06), 0 6px 18px rgba(43,33,23,.07);
  --lift:0 2px 6px rgba(43,33,23,.09), 0 16px 34px rgba(43,33,23,.14);
}

.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.final,
.answer,
.whycard,
.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. */
.card,
.step,
.keypoints,
.callout,
.alert,
.toc,
.byline,
.posts article,
.shots figure,
.badgewall figure,
.tablewrap,
.faq,
.ingcard,
.answer,
.whycard,
.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,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */
.review-foot{margin:0;padding:.6rem 0;font-size:.92rem}.review-foot a{font-weight:600}