/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial");font-weight:400;size-adjust:99.42%;ascent-override:102.40%;descent-override:30.68%;line-gap-override:0.00%}
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:96.62%;ascent-override:105.37%;descent-override:31.57%;line-gap-override:0.00%}
@font-face{font-family:"Red Hat Text Fallback";src:local("Arial");font-weight:400;size-adjust:100.44%;ascent-override:101.35%;descent-override:30.37%;line-gap-override:0.00%}
@font-face{font-family:"Red Hat Text Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:102.99%;ascent-override:98.85%;descent-override:29.62%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
:root{
  /* ---- ground: mint-white, from the white bottle body ---- */
  --paper:#f3f8f7;
  --paper-tint:#e7f1f0;
  --paper-card:#ffffff;
  --paper-deep:#d9e8e6;

  /* ---- ink ---- */
  --ink:#0b2227;
  --ink-dk:#0b2227;
  --ink-soft:#1f3b41;
  --muted:#35525a;
  --faint:#4b666d;
  --line:#cfe0de;
  --line-soft:#e2eeec;

  /* ---- accent, from the teal label band on the GLPro bottle ---- */
  --accent:#0a7588;
  --accent-deep:#064d5a;
  --accent-tint:#e0f0f1;
  --accent-line:#b3d6da;
  --accent-glow:rgba(10,117,136,.20);

  /* ---- night: the dark panel the bottles stand on ---- */
  --night:#06343d;
  --night-2:#0a4d59;
  --night-ink:#d5eaec;

  /* ---- secondary, from the thin gold rule under the label band ---- */
  --gold:#b39a5e;
  --gold-deep:#6e5a2a;
  --gold-soft:#f5efdf;
  --gold-line:#dccba0;

  /* ---- type ---- */
  --display:'Red Hat Display','Red Hat Display Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Red Hat Display','Red Hat Display Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Red Hat Text','Red Hat Text Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1160px;
  --measure:760px;
  --measure-wide:980px;
  --r:14px;
  --r-s:9px;
  --r-l:24px;
  --radius:14px;
  --shadow:0 12px 32px rgba(6,52,61,.10);
  --shadow-sm:0 3px 14px rgba(6,52,61,.07);
  --shadow-lg:0 24px 60px rgba(6,52,61,.18);
}

/* ==========================================================================
   Glprodaily - glprodaily.com
   Component system taken from the UI reference at alkatidde.com: a single
   sans family set heavy for headings, a sticky blurred nav under a thin
   centred strip, a hero built on a two-tone ground with a curved band, a
   Quick Answer card with an accent edge, alternating tinted sections and a
   dark closing band.
   The arrangement is NOT the reference's. The reference puts the product on
   the right over a pale curved band; this site stands the bottles on the
   LEFT, on a dark teal panel with a rounded right edge, with the copy on the
   light ground to its right.
   Colour is NOT taken from the reference. It is derived from the product
   bottle in assets/: the teal label band and the thin gold rule under it,
   on a mint-white ground.
   Type: Red Hat Display (headings) + Red Hat Text (body), one superfamily,
   which keeps the reference's single-family register without its font.
   ========================================================================== */

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:96px}
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.18;
  font-weight:800;letter-spacing:-.012em}
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-2. NAV: one floating capsule, inset from the page edges -----------
   No top strip and no full-width bar. The capsule itself carries the ground,
   the blur and the shadow; the sticky wrapper around it is transparent, so
   the page shows through the gap above and beside it. */
.nav{position:sticky;top:0;z-index:900;background:transparent;
  padding:10px 12px 0;pointer-events:none}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:10px;flex-wrap:nowrap;position:relative;pointer-events:auto;
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:20px;box-shadow:0 10px 30px rgba(6,52,61,.10)}
.menu li{flex:none}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:36px;height:36px;margin-right:11px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1.05}
.brand__prod{font-family:var(--display);font-size:1.5rem;font-weight:900;
  color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.brand__prod span{color:var(--accent)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:3px;
  white-space:nowrap}
.navmenus{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.menu{display:flex;align-items:center;gap:22px;flex-wrap:nowrap}
.menu a{font-family:var(--sans);font-size:.93rem;font-weight:700;color:var(--ink-soft);
  white-space:nowrap;padding-block:6px;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}
.burger{display:none;background:#fff;border:1px solid var(--line);cursor:pointer;
  width:44px;height:44px;padding:10px;flex:none;border-radius:var(--r-s)}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---- 3. BUTTONS: solid block, trailing arrow ----------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:800;font-size:1rem;line-height:1.2;
  padding:14px 26px;border-radius:12px;border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.005em;
  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::after{content:"\2192";font-weight:700}
.btn--cta:hover{background:var(--accent-deep);color:#fff}
.btn--ghost{background:#fff;color:var(--accent-deep);border-color:var(--accent-line)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn--gold{background:var(--gold-soft);color:var(--ink);border-color:var(--gold-line)}
.btn--gold:hover{border-color:var(--gold)}
.btn--lg{padding:16px 30px;font-size:1.05rem}
.btn--block{display:flex;width:100%}

/* ---- 4. HERO: bottles LEFT on a dark rounded panel, copy right ---------- */
.hero{position:relative;background:var(--paper);overflow-x:clip;overflow-y:visible;
  border-bottom:1px solid var(--line)}
.hero__band{position:absolute;left:0;top:0;bottom:0;z-index:0;
  width:calc((100% - min(1160px,100%)) / 2 + 22px + (min(1160px,100%) - 100px) * .47 + 40px);
  background:linear-gradient(165deg,var(--night) 0%,var(--night-2) 100%);
  border-radius:0 220px 220px 0}
.hero__band::after{content:"";position:absolute;right:26px;top:12%;bottom:12%;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
  opacity:.55}
.hero__grid{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:56px;
  align-items:start;padding-block:48px 64px}
.hero__media{;order:3;margin:4px 0 18px}
  /* mobile hero order: eyebrow, H1, product shot, Quick Answer, CTA, rest.
     display:contents promotes the copy column's children to hero-grid items,
     so the shot can be placed between the H1 and the answer. */
  .hero__copy{display:contents}
  .hero .pill{order:1}
  .hero h1{order:2}
  .hero__media{order:3;margin:4px 0 18px}
  .hero .answer{order:4}
  .hero .hero__cta{order:5}
  .hero .hero__sub{order:6}
  .hero .ticks{order:7}
  .hero .pay{order:8}

.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:.875rem;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.2rem,4.4vw,3.35rem);margin:18px 0 0;font-weight:900;
  line-height:1.04;letter-spacing:-.025em}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:1rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:14px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__sub{margin:16px 0 0;font-size:1.0625rem}

.ticks{margin:22px 0 0;display:grid;gap:10px}
.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:6px;background:var(--accent);
  color:#fff;display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;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:31px;object-fit:contain}

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

.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}

.hero__media{position:relative}
.hero__stick{position:relative;display:block;padding-block:26px 34px}
.hero__card{background:transparent;text-align:center;padding:10px}
.hero__card img{margin-inline:auto;max-width:100%;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.38))}
.hero__tag{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:4;
  background:var(--gold-soft);color:var(--ink);font-size:.9063rem;font-weight:700;
  letter-spacing:.06em;padding:7px 16px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--gold-line)}
.floaty{position:absolute;background:#fff;border-radius:var(--r);padding:11px 15px;
  box-shadow:var(--shadow-lg);font-family:var(--display);font-size:1.02rem;font-weight:800;
  color:var(--ink);z-index:4;line-height:1.15;display:flex;align-items:center;gap:10px}
.floaty img{width:46px;height:46px;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:34px;left:-6px}
.floaty--br{bottom:52px;right:-6px}

/* The copy column is well over a screen tall, so a static shot ends up
   stranded beside the bottom of it. A sticky rail keeps the bottles beside
   whatever the reader is on. Offset by the header, capped by height so it
   SCALES on a short laptop rather than being switched off by a min-height
   query (pitfalls #4 and #15). */
@media(min-width:1025px){
  .hero__media{position:sticky;top:104px;align-self:start;
    height:calc(100vh - 124px);min-height:360px;
    display:flex;align-items:flex-start;justify-content:center}
  .hero__stick{max-height:calc(100vh - 140px)}
  .hero__stick .hero__card img{max-height:calc(100vh - 300px);min-height:200px;
    width:auto;object-fit:contain}
}

/* ---- 5. QUICK ANSWER (AEO): a card with an accent edge, as the reference ---- */
.answer{background:#fff;border-left:5px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  box-shadow:var(--shadow-sm);padding:18px 24px;margin:22px 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}
.hero .answer::before{content:"Quick answer";display:block;font-family:var(--sans);
  font-weight:800;font-size:.8438rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:.45em}

/* ---- 6. TRUST ROW -------------------------------------------------------- */
.trust{background:#fff;border-bottom:1px solid var(--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 nav collapse and the hero's phone ordering decide the first paint, so
   they sit above the critical marker and are inlined into every page head. */
@media(max-width:1280px){.menu{gap:16px}.menu a{font-size:.9rem}.navmenus{gap:16px}}
@media(max-width:1120px){
  .burger{display:block}
  .navmenus{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;
    overflow:hidden;box-shadow:var(--shadow);padding-block:6px 10px;max-height:76vh;overflow-y:auto}
  .navmenus.open{display:flex}
  .menu{flex-direction:column;align-items:stretch;gap:0}
  .menu a{display:block;padding:13px 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__band{display:none}
  .hero__grid{grid-template-columns:1fr;gap:22px;padding-block:28px 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 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;background:linear-gradient(165deg,var(--night),var(--night-2));
    border-radius:var(--r-l);overflow:hidden;padding-inline:12px}
  .hero__copy>.answer{order:4}
  /* The ticks follow the Quick Answer, per the hero build order in
     references/hero.md: eyebrow, H1, Quick Answer, ticks, seal row, CTA. */
  .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}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.15rem}
  .hero__card img{max-width:240px}
}
@media(max-width:480px){
  .nav__cta .btn{padding:11px 14px;font-size:.92rem}
  .nav{padding:8px 8px 0}
  .brand__firm{display:none}
}
@media(max-width:380px){.nav__cta .btn{display:none}}


/* ---- hero motif -- level-arc ---------------------------------------- */
.hero{position:relative;overflow-x:clip;overflow-y:visible}
:where(.hero__media){position:relative}
.hero__card{position:relative;z-index:2}
.hero__card img{position:relative;z-index:3}
.hero{background:linear-gradient(180deg,#f3f8f7,#dcebec)}.hero__media::before{content:'';position:absolute;left:50%;top:4%;width:124%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(96,165,178,0.30),transparent 72%);z-index:1}.hero__media::after{content:'';position:absolute;left:50%;top:1%;width:112%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:conic-gradient(from 214deg,transparent 0deg 10deg,rgba(162,203,210,0.70) 10deg 146deg,transparent 146deg 360deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(closest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:btLevel 14s ease-in-out infinite;z-index:1}@keyframes btLevel{0%,100%{rotate:-7deg}50%{rotate:7deg}}
@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: desktop reading order and column widths ------------------
   `.hero` is on index.html and on no other page of this site, so every
   selector below is home-only by construction.

   MEASURED BEFORE (headless Chromium, 1440x900): `.hero__copy{display:contents}`
   was declared globally, not only inside the phone query, so the copy column's
   eight children were promoted into the TWO-COLUMN hero grid and flowed in
   pairs. The page read: rating | eyebrow / headline | bottles / quick answer |
   BUY BUTTON / ticks | payment line -- the eyebrow on the right of the
   headline, and the buy button at y=1155 on a 900px screen, 255px below the
   fold, with nothing to click on the first screen of the money page.

   Above 921px the copy is one flex column again and the order is the one the
   brief asks for: eyebrow, headline, quick answer, BUTTONS, payment line, then
   the evidence. Below 921px the phone composition is the display:contents one
   declared in the max-width:920px query and is not touched here.

   Geometry, so this block is above the critical marker and is inlined into
   every page by tpl.py at build time. */
@media(min-width:921px){
  .hero .hero__copy{display:flex;flex-direction:column;align-items:stretch}
  .hero .hero__copy>.pill{order:1;align-self:flex-start}
  .hero .hero__copy>h1{order:2}
  .hero .hero__copy>.answer{order:3}
  .hero .hero__copy>.hero__cta{order:4}
  .hero .hero__copy>.pay{order:5}
  .hero .hero__copy>.ticks{order:6}
  .hero .hero__copy>.hero__rating{order:7}
  /* No slot for .hero__sub, .factpills or .figures: the global block below
     orders all three and this hero carries none of them. Asked the browser --
     querySelectorAll returns 0 for each -- rather than copying the list. */
  /* The copy is the money column. Widened so the headline sets in four lines
     instead of five and the two hero buttons sit on one row instead of
     stacking past the fold. The dark band is drawn from the same fraction, so
     it has to move with the column or the copy walks off it. */
  .hero__grid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
    padding-block:34px 64px}
  .hero__band{width:calc((100% - min(1160px,100%)) / 2 + 22px
    + (min(1160px,100%) - 100px) * .57 + 40px)}
  .hero .hero__cta .btn--lg{padding:14px 20px}
}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:70px}
.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}
.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(--accent-deep);margin-bottom:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold)}
.rule{display:none}
.sec h2{font-size:clamp(1.7rem,3.1vw,2.35rem);margin-bottom:12px}
.sec h3{font-size:1.22rem;margin-bottom:8px}
.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(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-.022em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li{padding-left:22px;margin-bottom:.45em}
.sec>.wrap>ul>li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--accent)}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:36px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:7px;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(--display)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.5rem;
  line-height:.84;font-weight:900;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:700;color:var(--ink);
  line-height:1.42}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.8438rem;
  color:var(--faint);letter-spacing:.08em;text-transform:uppercase;font-weight:700}

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

/* ---- 8. CARDS, GRIDS ----------------------------------------------------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent-line)}
.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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px 26px 24px 78px;position:relative;box-shadow:var(--shadow-sm);
  counter-increment:s}
.step__n{position:absolute;left:22px;top:22px;width:38px;height:38px;border-radius:10px;
  background:var(--night);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:900;font-size:1.05rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.12rem}
.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 11px;
  border-radius:999px;border:1px solid var(--gold-line)}

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--line-soft);
  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:800;color:var(--ink);font-size:1.05rem}
.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:#f8fbfb}
.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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm)}
.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.08rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. PROMO / STATS / BADGEWALL: the night band ----------------------- */
.promo{background:linear-gradient(135deg,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(135deg,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:900;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:#fff;border:1px solid var(--line-soft);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:.9063rem;color:var(--muted)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.98rem;
  margin-bottom:4px;font-family:var(--display)}

/* ---- 13. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px 24px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.whycard::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.14rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:8px;height:8px;margin-top:.6em;
  border-radius:2px;background:var(--accent)}
.forlist--no li::before{background:var(--gold)}

/* ---- 14. LABEL PANEL ----------------------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm);position:relative}
.ingcard h3{font-size:1.26rem;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}
.facts{background:#fff;border:2px solid var(--ink);border-radius:6px;
  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:900}
.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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--night);color:#fff;padding:16px 24px;font-family:var(--display);
  font-weight:800;font-size:1.08rem}
.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, each with a coloured head band, the pack shot, the price
   per bottle, the total against the seller's struck comparison price, four
   perks, the Add To Cart button and the card marks. The featured pack is
   raised on desktop and moved to the top 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:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-sm);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(135deg,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.7rem;font-weight:900;margin:0;letter-spacing:-.01em}
.buy__supply{color:var(--night-ink);font-size:.9063rem;font-weight:700;margin-top:2px}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
/* One box for every pack shot: the six-bottle image is 1.84:1 where the
   others are square, and at a shared width it sat half as tall as its
   neighbours. A fixed box with object-fit keeps the three cards level. */
.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:3.2rem;font-weight:900;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}
.buy__add{margin-top:auto;font-size:1.08rem;padding-block:15px;text-transform:uppercase;
  letter-spacing:.04em}
.buy__add::after{content:none}
.buy__cart{flex:none}
.buy__card--feature .buy__add{background:var(--night);box-shadow:0 12px 26px rgba(6,52,61,.28)}
.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:#fff;border:1px solid var(--line-soft);
  border-radius:var(--r-l);padding:32px;box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.4rem;margin-bottom:12px}

/* ---- 17. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-sm)}
.tcard .stars{color:var(--gold-deep);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.06rem;
  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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);padding:28px;
  box-shadow:var(--shadow-sm)}
.bigscore{font-family:var(--display);font-size:2.8rem;font-weight:900;color:var(--ink);
  line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:700}

/* ---- 18. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq details[open]{border-color:var(--accent-line)}
.faq summary{padding:17px 22px;font-family:var(--display);font-weight:800;
  color:var(--ink);cursor:pointer;font-size:1.06rem;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:8px;
  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}

/* ---- 19. REFS, BYLINE ---------------------------------------------------- */
.refs{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-sm)}
.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:#fff;
  border:1px solid var(--line-soft);border-radius:var(--r);padding:24px 26px;
  box-shadow:var(--shadow-sm);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-size:1.08rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:.9688rem;color:var(--muted)}

/* ---- 20. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.formcard h3{font-size:1.16rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9063rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
.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}

/* ---- 21. FINAL CTA / RELATED --------------------------------------------- */
.final{background:linear-gradient(135deg,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:-80px;top:-80px;width:260px;height:260px;
  border-radius:50%;border:2px solid rgba(179,154,94,.35)}
.final h2{color:#fff;font-size:clamp(1.55rem,3vw,2.2rem);margin-bottom:12px}
.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:800;color:#fff;margin:14px 0 18px}
.final .btn--cta{background:#fff;color:var(--night)}
.final .btn--cta:hover{background:var(--gold-soft);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:#fff;border:1px solid var(--line-soft);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(-3px);box-shadow:var(--shadow);text-decoration:none}
.rel b{display:block;font-family:var(--display);font-size:1.08rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9688rem;color:var(--muted)}

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

/* ---- 23. FOOTER: a desk-card row on mint, then the night link wall ------- */
.fdesk{background:var(--paper-tint);border-top:1px solid var(--line);padding-block:34px}
.fdesk__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fdesk__card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.fdesk__card b{display:block;font-family:var(--display);font-size:1.06rem;color:var(--ink);
  margin-bottom:4px}
.fdesk__card p{font-size:1.062rem;color:var(--muted)}
.fdesk__card .flag{margin-bottom:10px}
footer{background:var(--night);color:rgba(213,234,236,.78);padding-block:46px 24px;
  font-size:.9375rem}
footer a{color:#fff}
footer a:hover{color:var(--gold-line)}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:30px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.12)}
.fgrid h4{color:var(--gold-line);font-family:var(--sans);font-size:.8438rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:12px}
.fgrid li{margin-bottom:7px;font-size:1.062rem;line-height:1.5}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:900;color:#fff;margin-bottom:10px;
  letter-spacing:-.02em}
.fbrand span{color:#7fc6cf}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fbadges img{background:#fff;border-radius:50%;padding:2px}
.fnap{padding-block:22px;border-bottom:1px solid rgba(255,255,255,.12);font-size:.9375rem;
  line-height:1.75}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:18px;
  font-size:.9063rem}
.fpay img{background:#fff;border-radius:6px;padding:4px 6px}
.disc{padding-top:18px;font-size:.9063rem;line-height:1.65;color:rgba(213,234,236,.72)}
.disc p{margin-bottom:.9em}
.disc b{color:#fff}
.disc .copy{margin-top:16px;color:rgba(213,234,236,.6)}

/* ---- 24. 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 22px;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}

/* ---- 25. BLOG ------------------------------------------------------------ */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.95rem,3.8vw,2.75rem);margin-bottom:14px;font-weight:900}
.article h2{font-size:1.55rem;margin:1.9em 0 .6em;scroll-margin-top:110px}
.article h3{font-size:1.2rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:22px;margin-bottom:8px}
.article ul li::before{content:"";position:absolute;left:3px;top:.62em;width:8px;height:8px;
  border-radius:2px;background:var(--accent)}
.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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  padding:20px 24px;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.8438rem;letter-spacing:.17em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-deep);margin:0 0 10px}
.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:#fff;border:1px solid var(--line-soft);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.posts article:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.14rem;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:700}
/* 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.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.34rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

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

/* ---- 27. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.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))}
}
@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,.fdesk__grid{grid-template-columns:repeat(2,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}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .sec{padding-block:48px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fdesk__grid,.fgrid{grid-template-columns:1fr}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 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}

/* --- text sitting on .hero__band ---------------------------------------
   `.hero__band` is a dark panel behind the hero COPY (not behind the
   product: the band spans x 0-773 and the bottle starts at 789). The panel
   shipped and the copy colours never changed with it, so at 1600x900 the H1
   sat on it at 1.23:1, the four tick lines at 1.12:1 and the rating line at
   2.18:1. WCAG AA wants 4.5:1, or 3:1 for large text. 1.12:1 is invisible.

   The palette already defined --night-ink for text on the night colours and
   nothing had ever used it here. Measured against both gradient stops
   (#06343d and #0a4d59): --night-ink 10.73 / 7.58, --accent-line 8.65 / 6.11,
   white 13.41 / 9.46. All clear AA for body text.

   Scoped to the width where the band is actually painted -- it is
   display:none below 920px, where the copy is back on the light ground. */
@media(min-width:921px){
  .hero h1{color:var(--night-ink)}
  .hero h1 span{color:var(--accent-line)}
  .hero .ticks li{color:var(--night-ink)}
  .hero .ticks li b,
  .hero .ticks li strong{color:#fff}
  .hero__rating{color:var(--night-ink)}
  .hero__rating b{color:#fff}
  .hero__rating a{color:var(--accent-line)}
  .hero .eyebrow{color:var(--accent-line)}
}

/* ==== 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{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 PAGE SURFACE -- glprodaily.com, design slot "orbit"
   radius_card 20 / radius_control 14 / depth: deep ambient only, very diffuse
   / ribbon: a tab above the card / motif: a thin ring with one bright arc
   travelling it, slow.

   Paint only -- radius, shadow, background, colour, transform, animation and
   transition. Nothing here moves a box, so it lives below the critical marker
   and a restamp is enough to ship it.

   Every rule is scoped with body:has(.hero). That is what keeps it on the home
   page, and it is also what keeps it winning: modern_surface.py and
   footer_type.py strip and re-APPEND their blocks to the end of this file on
   every build, so they always land after this one and have to be beaten on
   specificity rather than on source order.
   ========================================================================== */

body:has(.hero){
  /* Two ambient stops, both wide and soft, no tight contact stop -- that is
     this slot's depth language. Tinted with this site's own ink, 11 34 39,
     never neutral black. */
  --hm-shadow:0 10px 28px rgba(11,34,39,.06), 0 22px 60px rgba(11,34,39,.13);
  --hm-lift:0 14px 36px rgba(11,34,39,.09), 0 30px 76px rgba(11,34,39,.20);
  --hm-r-card:20px;
  --hm-r-ctl:14px;
  --hm-tr:box-shadow .24s ease,border-color .24s ease,background-color .24s ease,
    opacity .6s ease,transform .28s cubic-bezier(.2,.7,.2,1);
}

/* ---- controls: slot radius 14, one gradient, one flat -------------------- */
body:has(.hero) .btn{border-radius:var(--hm-r-ctl);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,
    background-color .22s ease,background-image .22s ease,color .22s ease,
    border-color .22s ease}
body:has(.hero) .btn:hover{transform:translateY(-2px)}
body:has(.hero) .burger{border-radius:var(--hm-r-ctl)}

/* The buying CTA is the only gradient on the page. The secondary button stays
   a flat white panel, so the pair in the hero reads as two weights rather than
   two buttons of the same rank. */
body:has(.hero) .btn--cta{
  background-image:linear-gradient(135deg,#128fa4 0%,var(--accent) 46%,var(--accent-deep) 100%);
  box-shadow:0 12px 30px rgba(11,34,39,.12), 0 22px 60px var(--accent-glow)}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(135deg,#0f8296 0%,var(--accent-deep) 58%,#053f4a 100%);
  box-shadow:0 16px 38px rgba(11,34,39,.16), 0 30px 76px var(--accent-glow)}
body:has(.hero) .btn--ghost{background-image:none;
  box-shadow:0 8px 24px rgba(11,34,39,.06)}
body:has(.hero) .btn--ghost:hover{box-shadow:0 12px 32px rgba(11,34,39,.10)}
/* The closing band inverts the CTA to white on the night panel; the gradient
   above would paint teal under its dark text. Put it back. */
body:has(.hero) .final .btn--cta{background-image:none;background-color:#fff;
  color:var(--night);box-shadow:0 14px 34px rgba(3,24,29,.34)}
body:has(.hero) .final .btn--cta:hover{background-image:none;
  background-color:var(--gold-soft);color:var(--night)}

/* A keyboard user gets the same affordance as the pointer. No border-radius
   here on purpose: an outline already follows the element's own corners, and
   setting one would snap .rel a from 20px to 14px on focus. */
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(--accent);
  outline-offset:3px}

/* ---- home surfaces: slot radius 20 on the panels ------------------------- */
body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .whycard,
body:has(.hero) .qa,
body:has(.hero) .faq details,
body:has(.hero) .shots figure,
body:has(.hero) .rel a,
body:has(.hero) .byline,
body:has(.hero) .fdesk__card,
body:has(.hero) .tablewrap,
body:has(.hero) .guarantee,
body:has(.hero) .dist,
body:has(.hero) .promo,
body:has(.hero) .stats,
body:has(.hero) .final,
body:has(.hero) .floaty{border-radius:var(--hm-r-card)}

body:has(.hero) .card,
body:has(.hero) .step,
body:has(.hero) .whycard,
body:has(.hero) .qa,
body:has(.hero) .faq details,
body:has(.hero) .shots figure,
body:has(.hero) .rel a,
body:has(.hero) .byline,
body:has(.hero) .fdesk__card,
body:has(.hero) .tablewrap,
body:has(.hero) .guarantee,
body:has(.hero) .floaty{box-shadow:var(--hm-shadow)}

/* The panels that carry a 5px accent or gold edge keep a square left side --
   modern_surface's radius floor had rounded all four corners and lost the
   edge. Same 20px on the three free corners. */
body:has(.hero) .hero .answer,
body:has(.hero) .callout,
body:has(.hero) .keypoints,
body:has(.hero) .alert{border-radius:0 var(--hm-r-card) var(--hm-r-card) 0}
body:has(.hero) .hero .answer{box-shadow:var(--hm-shadow)}

/* 2px, not 3px: the lift registers without the card shouldering the row.
   opacity and transform are named in the transition because the rise-on-entry
   pass sets its own transition on [data-reveal].in and this rule outranks it. */
body:has(.hero) .card,
body:has(.hero) .rel a,
body:has(.hero) .shots figure,
body:has(.hero) .whycard,
body:has(.hero) .fdesk__card{transition:var(--hm-tr)}
body:has(.hero) .card:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .shots figure:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .fdesk__card:hover{box-shadow:var(--hm-lift);
  transform:translateY(-2px)}

/* The payment line moves onto the dark band with the rest of the copy at
   921px and up. --faint on #06343d is 1.6:1; --night-ink is 10.7:1. */
@media(min-width:921px){
  body:has(.hero) .hero .pay{color:var(--night-ink)}
}

/* ---- HERO MOTIF -- slot family "orbit" -----------------------------------
   A thin ring with one bright arc travelling it once every 38 seconds. These
   are capsules taken daily for weeks; the motion is meant to be noticed on the
   second look, not the first.

   Both shapes are pseudo-elements of the MEDIA COLUMN. Nothing here touches
   the <img>: the bottle shot is the LCP element and is preloaded.

   The ring is 128% of the media column -- about 583px across a 456px product
   card at 1440 -- so it reads OUTSIDE the card instead of disappearing behind
   it. Centred with top:50% + translate, not a guessed percentage offset, so it
   stays on the bottles at every breakpoint and in reduced motion, where the
   column stops being a full-screen sticky box.

   One element carries both halves: the conic gradient holds a faint base all
   the way round (the ring) plus one bright segment (the arc), masked to 2px.
   Rotating it moves the arc and leaves the ring visually still.

   This replaces the level-arc that hero_motifs.py wrote above the critical
   marker. Both of its pseudo-elements are redeclared in full here, including
   the btLevel animation, which is switched off. */
body:has(.hero) .hero .hero__media::before{
  content:'';position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  width:118%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(10,117,136,.17),
    rgba(10,117,136,.05) 56%,transparent 74%);
  animation:none;z-index:1;pointer-events:none}
body:has(.hero) .hero .hero__media::after{
  content:'';position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  width:128%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(10,117,136,.22) 0deg,rgba(10,117,136,.22) 6deg,
    rgba(12,145,166,.80) 20deg,rgba(24,178,202,1) 34deg,
    rgba(96,196,210,.70) 58deg,rgba(10,117,136,.22) 92deg,
    rgba(10,117,136,.22) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  animation:glpOrbitRun 38s linear infinite;z-index:1;pointer-events:none}
@keyframes glpOrbitRun{from{rotate:0deg}to{rotate:360deg}}

/* ---- PRICING: slot ribbon = a tab above the card ------------------------- */
/* #pricing is also on pricing.html, so the body:has(.hero) scope is doing real
   work on every rule below. */
body:has(.hero) #pricing .buy__card{position:relative;
  border-radius:var(--hm-r-card);box-shadow:var(--hm-shadow);
  transition:var(--hm-tr)}
body:has(.hero) #pricing .buy__card:hover{box-shadow:var(--hm-lift)}
/* The recommended tier: raised by the margin-top the card already carries --
   NOT a transform, which the reveal pass would cancel -- and given its own
   ground and a deeper ambient so it reads as the different one. */
body:has(.hero) #pricing .buy__card--feature{overflow:visible;
  background:linear-gradient(180deg,#ffffff 0%,#f1fafa 100%);
  box-shadow:0 16px 42px rgba(11,34,39,.10), 0 34px 86px rgba(11,34,39,.22)}
/* overflow had been hidden to clip the head band into the card's corners; with
   it visible the band needs its own radius -- 18px, the card's 20 less its 2px
   accent border. */
body:has(.hero) #pricing .buy__card--feature .buy__head{border-radius:18px 18px 0 0}
/* The tab. No text in it: the label is the .buy__flag the card already
   carries, and no copy is invented here. */
body:has(.hero) #pricing .buy__card--feature::before{
  content:'';position:absolute;left:50%;top:-15px;translate:-50% 0;
  width:56%;height:23px;border-radius:11px 11px 0 0;
  background:linear-gradient(135deg,var(--gold) 0%,#dcc894 52%,var(--gold) 100%);
  box-shadow:0 10px 26px rgba(11,34,39,.18);z-index:0}
body:has(.hero) #pricing .buy__card--feature .buy__flag{
  background:linear-gradient(135deg,var(--gold-soft),#fffaef);
  box-shadow:inset 0 0 0 1px var(--gold-line)}
body:has(.hero) #pricing .buy__card--feature .buy__add{
  background-image:linear-gradient(135deg,var(--night-2) 0%,var(--night) 100%)}
body:has(.hero) #pricing .buy__card--feature .buy__add:hover{
  background-image:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%)}
/* Dashed separators between the feature rows, drawn on an absolutely
   positioned ::after. A border on the <li> would have added 1px per row to the
   card, and the three Add To Cart buttons share one baseline that has to stay
   shared. This adds nothing to any box. */
body:has(.hero) #pricing .buy__perks li::after{content:'';position:absolute;
  left:0;right:0;bottom:-4px;border-top:1px dashed var(--line)}
body:has(.hero) #pricing .buy__perks li:last-child::after{content:none}

/* ---- everything above is switched off for a reader who asked for less ---- */
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero .hero__media::after{animation:none}
  body:has(.hero) .btn:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .shots figure:hover,
  body:has(.hero) .whycard:hover,
  body:has(.hero) .fdesk__card:hover{transform:none}
  body:has(.hero) .btn,
  body:has(.hero) .card,
  body:has(.hero) .rel a,
  body:has(.hero) .shots figure,
  body:has(.hero) .whycard,
  body:has(.hero) .fdesk__card,
  body:has(.hero) #pricing .buy__card{transition: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{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

/* ==== modern surface (modern_surface.py) ==== */
/* House rule 11. This stylesheet had 46 box-shadow declaration(s)
   and 1 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 (11,34,39), 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(11,34,39,.06), 0 6px 18px rgba(11,34,39,.07);
  --lift:0 2px 6px rgba(11,34,39,.09), 0 16px 34px rgba(11,34,39,.14);
}

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

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.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}