/* ==== font fallback metrics (fix_font_shift.py) ==== */
@font-face{font-family:"Anton Fallback";src:local("Arial");font-weight:400;size-adjust:92.31%;ascent-override:127.43%;descent-override:35.65%;line-gap-override:0.00%}
@font-face{font-family:"Commissioner Fallback";src:local("Arial");font-weight:400;size-adjust:101.57%;ascent-override:100.13%;descent-override:20.28%;line-gap-override:0.00%}
@font-face{font-family:"Commissioner Fallback";src:local("Arial Bold");font-weight:600 900;size-adjust:95.28%;ascent-override:106.74%;descent-override:21.62%;line-gap-override:0.00%}
/* ==== end font fallback metrics ==== */
/* ==========================================================================
   Gelatidefit - gelatidefit.com
   Component system taken from the UI reference at en-digestflow.com: a
   condensed heavy display face over a neutral body sans, 4px square-cut
   buttons with generous padding, and full-bleed tinted image bands
   alternating with flat content bands.
   Colour is NOT taken from that reference (which is green). It is derived
   from the product bottle in assets/: the GELATIDE wordmark violet #5b21b6
   with its deep #2c0f5e, on a SAND-GREY ground, plus the gold #f0c030 taken
   from the money-back roundel the vendor ships.
   Type: Anton (display) + Commissioner (body).
   ANTON IS DISPLAY ONLY. It is a heavy condensed face with no lowercase
   personality below about 22px, so it is confined to h1 and h2, the footer
   CTA line, the wordmark and the big statistic numerals. Every h3, h4,
   caption, label, table header and summary uses Commissioner. Letting Anton
   near body-scale text is the single easiest way to make this site unreadable.

   CHROME FOR THIS SITE (corrected slot, batch 4):
     ground  sand-grey #ece8e0, tint band #e1dcd1
     header  THREE ZONES ON ONE ROW - inline menu left, wordmark centred in a
             1fr/auto/1fr grid, CTA pill right, with a gold hairline under the
             active item and nothing under the rest
     footer  ONE full-width CTA slab with every site link set inline INSIDE it,
             on rules, rather than in a column grid beneath it
     hero    product LEFT in a full-bleed tinted panel, cropped by the panel
             edge, copy right
     cards   flat, hairline, gold rule under the heading
     buttons square-cut with a hard offset shadow; the masthead CTA is the one
             pill on the site
   ========================================================================== */

/* ---- DESIGN TOKENS --------------------------------------------------------

   TWO NOTES BEFORE CHANGING THE GROUND, both kept OUTSIDE the token block on
   purpose -- see the second one for why.

   1. hero_motifs.py finds the page ground by scanning the token block for the
      first name matching paper|card|ground|bg|surface whose (max+min)/510
      lightness exceeds 0.9. Sand-grey #ece8e0 computes to 0.902, so --paper is
      picked. Darken it past that and the scan falls through to --paper-card
      (white) and the hero gradient stops matching the page.

   2. Both hero_motifs.py and brand_marks.py locate the token block by
      splitting the stylesheet on the literal selector text. Writing that
      selector inside the block's own comment therefore truncates what they
      parse to nothing, and BOTH tools fall back to default colours without
      reporting anything. That happened here once. It is pitfalls.md #44 --
      never write a parseable example of a thing inside the file that holds the
      real thing -- so this note names the tools and not the selector.
   -------------------------------------------------------------------------- */
:root{
  /* ---- ground: sand-grey. Warm-neutral, not a tinted white ---- */
  --paper:#ece8e0;
  --paper-tint:#e1dcd1;
  --paper-card:#ffffff;
  --paper-deep:#d4cec1;

  /* ---- ink: graphite, kept against the warmer ground for the contrast ---- */
  --ink:#17161d;
  --ink-dk:#17161d;
  --ink-soft:#2f2d3a;
  --muted:#403e4d;
  --faint:#555265;
  --line:#cdc6b8;
  --line-soft:#e0dbd1;

  /* ---- accent, from the GELATIDE wordmark violet on the bottle ---- */
  --accent:#5b21b6;
  --accent-deep:#2c0f5e;
  --accent-tint:#f2ecfd;
  --accent-line:#cdbaf0;
  --accent-glow:rgba(91,33,182,.20);

  /* ---- secondary, from the money-back roundel gold ---- */
  --gold:#f0c030;
  --gold-deep:#6b4e05;
  --gold-soft:#fdf5dd;
  --gold-line:#e5cb80;

  /* ---- type ---- */
  --display:'Anton','Anton Fallback',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --serif:'Commissioner','Commissioner Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Commissioner','Commissioner Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1180px;
  --measure:760px;
  --measure-wide:980px;
  --r:4px;
  --r-s:3px;
  --r-l:6px;
  --radius:4px;
  --shadow:0 6px 0 rgba(23,22,29,.07);
  --shadow-sm:0 1px 0 rgba(23,22,29,.05);
  --shadow-lg:0 14px 34px rgba(23,22,29,.14);
  --stamp:3px 3px 0 var(--accent-deep);
}

/* ---- RESET AND BASE ------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;min-width:0}
html{scroll-behavior:smooth;font-size:16px;scroll-padding-top:100px}
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--muted);
  line-height:1.7;-webkit-font-smoothing:antialiased;font-size:1.0625rem}
img,svg,table,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
h1,h2{font-family:var(--display);color:var(--ink);line-height:1.06;
  font-weight:400;letter-spacing:.006em}
h3,h4,h5{font-family:var(--sans);color:var(--ink);line-height:1.3;
  font-weight:700;letter-spacing:-.006em}
b,strong{color:var(--ink-soft);font-weight:700}

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

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

/* ---- 1. UTILITY BAR ------------------------------------------------------ */
/* A single graphite line above the masthead. Flat, no gradient, uppercase
   micro-labels in Commissioner -- Anton at this size is a solid block. */
.util{background:var(--ink);color:rgba(255,255,255,.78);font-size:0.9062rem}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:5px 24px;
  padding-block:7px}
.util__item{white-space:nowrap;letter-spacing:.02em}
.util__item b{color:#fff;font-weight:700}
.util__tel{margin-left:auto;color:var(--gold);font-weight:700;white-space:nowrap}

/* ---- 2. NAV: three zones on one row - menu left, wordmark CENTRED, CTA right
   The row is a 1fr/auto/1fr grid, so the wordmark is optically centred on the
   page rather than centred in whatever space the menu leaves over. The active
   page carries a hairline under its link and nothing else does.

   The left zone shows FIVE primary links. The site has thirteen destinations,
   so the remaining eight live in the slide-out panel behind the overflow
   button -- that button is an overflow affordance beside the CTA, not the
   site's only menu.

   NOTHING IN THIS ROW MAY WRAP (pitfall 16). It sheds instead: gaps tighten at
   1180, the second link goes at 1080, the whole inline menu goes at 1000 and
   the grid collapses to two zones, and the CTA goes at 430. The row height is
   66px at every one of those widths. */
.nav{position:sticky;top:0;z-index:900;background:rgba(236,232,224,.95);
  backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
.nav__row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:20px;padding-block:11px}

/* -- zone 1: the inline menu -- */
.menu--main{display:flex;flex-wrap:nowrap;align-items:center;gap:20px;
  justify-self:start}
.menu--main li{white-space:nowrap}
.menu--main a{position:relative;font-family:var(--sans);font-size:.875rem;
  font-weight:600;color:var(--ink-soft);white-space:nowrap;padding-block:6px;
  display:inline-block}
.menu--main a:hover{color:var(--accent);text-decoration:none}
.menu--main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;
  height:2px;background:var(--accent);transition:right .2s ease}
.menu--main a:hover::after{right:0}
/* the hairline under the active item -- the one piece of state this row shows */
.menu--main a[aria-current]{color:var(--accent-deep)}
.menu--main a[aria-current]::after{right:0;background:var(--gold);height:3px}

/* -- zone 2: the centred wordmark -- */
.brand{display:inline-flex;align-items:center;gap:0;justify-self:center}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;margin-right:10px;flex:none}
.brand__t{display:flex;flex-direction:column;line-height:1}
.brand__firm{display:block;font-family:var(--sans);font-size:.625rem;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:2px}
.brand__prod{display:block;font-family:var(--display);font-size:1.4rem;font-weight:400;
  color:var(--ink);line-height:1;letter-spacing:.02em;white-space:nowrap}
.brand__prod span{color:var(--accent)}

/* -- zone 3: the CTA, with the overflow button beside it -- */
.nav__end{display:flex;align-items:center;gap:12px;justify-self:end}
.nav__cta{flex:none}
.nav__tel{flex:none;font-weight:700;font-size:.9375rem;color:var(--ink);
  white-space:nowrap;padding:6px 0;border-bottom:2px solid var(--gold)}
.burger{background:none;border:2px solid var(--ink);cursor:pointer;width:46px;
  height:44px;padding:10px 9px;flex:none;border-radius:var(--r-s);display:block}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;
  border-radius:1px;transition:transform .2s ease,opacity .2s ease}

/* -- the overflow panel. position:fixed takes it out of flow, so it never
   becomes a fourth grid track. -- */
.navmenus{position:fixed;inset:0 0 0 auto;width:min(360px,88vw);
  background:var(--paper-card);padding:92px 30px 30px;transform:translateX(102%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:940;
  box-shadow:var(--shadow-lg);overflow-y:auto;border-left:3px solid var(--accent)}
.navmenus.open{transform:translateX(0)}
/* SCOPED to .navmenus on purpose. These were written as bare `.menu` rules and
   the inline `.menu menu--main` row carries the same class, so at equal
   specificity the later block won and flex-direction:column plus width:100%
   turned the masthead row into a 291px stack of links. Same shape as
   pitfall 35: a later section cancelling an earlier component rule, invisible
   in a diff and obvious the moment the row height is measured. */
.navmenus .menu{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.navmenus .menu a{font-family:var(--sans);font-size:1.0625rem;font-weight:600;
  color:var(--ink-soft);padding-block:12px;width:100%;
  border-bottom:1px solid var(--line-soft)}
.navmenus .menu a:hover{color:var(--accent);text-decoration:none}
.navmenus .menu a[aria-current]{color:var(--accent)}
.navmenus .menu--r{margin-top:0}

/* ---- 3. BUTTONS: square-cut with a hard offset shadow -------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:.96rem;line-height:1.2;
  padding:13px 26px;border-radius:var(--r);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.01em;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,
  color .16s ease}
.btn:hover{text-decoration:none;transform:translate(-2px,-2px)}
.btn--cta{background:var(--accent);color:#fff;border-color:var(--accent-deep);
  box-shadow:var(--stamp)}
.btn--cta:hover{background:var(--accent-deep);box-shadow:5px 5px 0 var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--accent-deep);
  border-color:var(--accent-deep)}
.btn--ghost:hover{background:var(--accent-tint);box-shadow:3px 3px 0 var(--accent-line)}
.btn--gold{background:var(--gold);color:var(--ink);border-color:var(--ink);
  box-shadow:3px 3px 0 var(--ink)}
.btn--gold:hover{background:#e0af1d;box-shadow:5px 5px 0 var(--ink)}
.btn--lg{padding:17px 34px;font-size:1.06rem}
.btn--block{display:flex;width:100%}
/* The CTA pill in the masthead is the one round thing on the site, so it
   reads as the button rather than as another square panel. min-height is 44px
   unconditionally: 11px of padding either side of a 44px box is exactly the
   66px row, so the tap target is met at every width without the row growing. */
.nav__cta .btn{border-radius:999px;box-shadow:none;padding:9px 22px;
  min-height:44px}
.nav__cta .btn:hover{transform:none;box-shadow:0 0 0 3px var(--accent-tint)}

/* ---- 4. HERO: product LEFT in a full-bleed tinted panel, copy RIGHT ------- */
/* The panel is deliberately NOT inside .wrap: it runs to the left edge of the
   viewport and crops the bottle row, which is the arrangement this site was
   assigned and the thing that makes it unmistakable beside its sisters. */
.hero{position:relative;background:var(--paper);
  border-bottom:2px solid var(--ink);overflow-x:clip;overflow-y:visible}
.hero__grid{display:grid;grid-template-columns:minmax(0,43%) minmax(0,57%);
  align-items:stretch;gap:0}
/* TOP-aligned, not centred. The copy column runs past 1,400px, so a shot
   centred in a stretched panel lands at y=498 on a 1440x900 desktop and the
   product is not recognisable in the first screenful -- which is pitfall 19 in
   spirit even though the filename check passes. Top-aligning puts the labels at
   about y=480 and leaves the lower half of the panel to the heat-column motif,
   which is anchored to this element and rises through exactly that space.
   Sticky is deliberately NOT used here: hero_motifs sets overflow:hidden on
   .hero, which creates a scroll container and silently disables every
   position:sticky descendant (pitfall 5). */
.hero__media{position:relative;background:var(--accent-tint);
  border-right:2px solid var(--ink);display:flex;align-items:flex-start;
  justify-content:center;overflow:hidden;padding-block:38px}
.hero__stick{position:relative;display:block}
/* Was width:126%;margin-left:-13%, an intentional bleed that .hero__media
   clips. At 1440px it cut 119px off the LEFT of the product and 38px off
   the right -- a lopsided crop through the bottles, which reads as broken
   rather than as a bleed. Both sister sites keep the shot inside the
   panel and so does the rest of the estate. */
.hero__card{padding:0;text-align:center;background:none;box-shadow:none}
.hero__card img{margin-inline:auto;max-width:100%;width:100%}
.hero__tag{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:0.9062rem;font-weight:700;
  letter-spacing:.09em;padding:7px 16px;border-radius:var(--r-s);
  white-space:nowrap;z-index:4;font-family:var(--sans)}
.hero__copy{padding:48px 22px 60px 52px;max-width:700px}

.pill{display:inline-flex;align-items:center;gap:8px;background:var(--ink);
  border:2px solid var(--ink);color:#fff;font-weight:700;
  font-size:.875rem;padding:6px 15px;border-radius:var(--r-s);
  letter-spacing:.06em;text-transform:uppercase;font-family:var(--sans)}
.hero h1{font-size:clamp(2.3rem,4.9vw,3.7rem);margin:16px 0 0;font-weight:400;
  line-height:1.02;text-transform:none}
.hero h1 span{color:var(--accent)}
.hero h1 small{display:block;font-family:var(--sans);font-size:.9375rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);margin-top:14px;line-height:1.4}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
.hero__sub{margin:18px 0 0;font-size:1.0625rem;max-width:56ch}

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

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

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

.figures{display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 0;
  border:2px solid var(--ink);background:var(--paper-card);overflow:hidden;
  border-radius:var(--r)}
.figures div{padding:15px 17px}
.figures div+div{border-left:1px solid var(--line)}
.figures b{display:block;font-family:var(--display);font-size:1.95rem;line-height:1;
  color:var(--accent-deep);font-weight:400}
.figures span{display:block;margin-top:6px;font-size:.90625rem;color:var(--faint);
  line-height:1.4}

.floaty{position:absolute;background:var(--paper-card);border:2px solid var(--ink);
  border-radius:var(--r);padding:10px 14px;font-size:.95rem;font-weight:700;
  color:var(--ink);z-index:5;line-height:1.2;box-shadow:3px 3px 0 var(--accent)}
.floaty small{display:block;color:var(--accent);font-size:0.9062rem;letter-spacing:.08em;
  text-transform:uppercase;font-weight:800;margin-top:4px}
/* Anchored to the top of the panel rather than to its bottom: the panel is as
   tall as the copy column, so a bottom-anchored chip sits hundreds of pixels
   below the fold where nobody sees it. */
.floaty--tl{top:26px;left:20px}
.floaty--br{top:132px;right:20px}

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

/* ---- 5. QUICK ANSWER (AEO) ---------------------------------------------- */
.answer{background:var(--paper-card);border:2px solid var(--ink);
  border-radius:var(--r);padding:20px 24px;margin:22px 0 0}
/* In the hero the answer is not a box: the panel already supplies the frame,
   so it runs as flowing paragraphs with a gold rule at the left. */
.hero .answer{background:none;border:0;border-left:4px solid var(--gold);
  padding:2px 0 2px 20px;margin:20px 0 0;border-radius:0}
.hero .answer .qtag{display:none}
.hero .answer p{font-size:1.0625rem;color:var(--muted);margin:0 0 .8em;max-width:56ch}
.hero .answer p:last-child{margin-bottom:0}
.hero .answer p b{color:var(--ink-dk)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:.84375rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.55em}
.answer p{margin:0;font-size:1.0625rem}

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

/* ---- ABOVE-THE-FOLD RESPONSIVE -------------------------------------------
   The nav collapse and the hero's phone ordering decide what the first paint
   looks like, so they sit ABOVE the critical marker and are inlined into every
   page head. Leaving them below it meant a phone painted the hero in DOM order
   until the async stylesheet landed, which is a visible jump on the one screen
   that matters most.

   The nav sheds in four steps and never wraps. Measured row height is 66px at
   1500 / 1360 / 1260 / 1180 / 1080 / 1000 / 768 / 390. */
@media(max-width:1180px){.menu--main{gap:15px}.menu--main a{font-size:.85rem}}
@media(max-width:1080px){.menu--main li:nth-child(2){display:none}}
@media(max-width:1000px){
  /* the inline menu goes; with it out of flow the wordmark is the first grid
     item, so two tracks put it left and the CTA plus overflow button right */
  .menu--main{display:none}
  .nav__row{grid-template-columns:1fr auto}
  .brand{justify-self:start}
}
@media(max-width:920px){
  .hero__grid{grid-template-columns:1fr;gap:0}
  /* 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;margin:32px 22px 0}
  .hero__copy>h1{order:2;margin:14px 22px 0}
  /* The lot tag hangs 18px below the shot, and .hero__media clips. Without
     room for it in the bottom padding the chip is sliced in half by the panel
     edge -- which reads as a rendering bug rather than as a design. */
  .hero__media{order:3;border-right:0;border-block:2px solid var(--ink);
    margin-top:22px;padding:24px 0 76px}
  .hero__copy>.answer{order:4;margin:24px 22px 0}
  /* 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;margin:18px 22px 0}
  .hero__copy>.hero__cta{order:6;margin:20px 22px 0}
  .hero__copy>.hero__rating{order:7;margin:14px 22px 0}
  .hero__copy>.pay{order:8;margin:16px 22px 0}
  .hero__copy>.hero__sub{order:9;margin:16px 22px 0}
  .hero__copy>.factpills{order:10;margin:20px 22px 0}
  .hero__copy>.figures{order:11;margin:22px 22px 40px}
  .hero__stick{width:100%;margin-left:0}
  .hero__card img{max-width:330px}
  .floaty{display:none}
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2.15rem}
  .figures{grid-template-columns:1fr}
  .figures div+div{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:430px){
  .nav__cta .btn{display:none}
  .util__item:nth-child(2){display:none}
}


/* ---- hero motif -- heat-column ---------------------------------------- */
.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(90deg,#ede1c0,#ece8e0 42%,#ece8e0)}.hero__media::before{content:'';position:absolute;left:34%;top:0;width:46%;height:150%;translate:-50% -18%;background:linear-gradient(0deg,rgba(240,192,48,0.50),transparent 74%);filter:blur(16px);transform-origin:50% 100%;animation:gfColumn 9s ease-in-out infinite;z-index:1}@keyframes gfColumn{0%,100%{transform:scaleY(.9);opacity:.45}50%{transform:scaleY(1.08);opacity:.8}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* --- hero responsive rules, copied into the critical block
   A phone painted the desktop hero from the inline block and then
   jumped when the async sheet arrived -- 692px on one site, CLS 0.95.
   These are COPIES: the originals stay below, so the cascade is
   unchanged and the first paint is already correct. */
@media (min-width: 981px){
  .hero__media{position: sticky; top: calc(var(--navh, 88px) + 14px); align-self: start; min-height: calc(100vh - var(--navh, 88px) - 28px); min-height: calc(100svh - var(--navh, 88px) - 28px); display: flex; flex-direction: column; align-items: center; justify-content: center;}
}
@media (prefers-reduced-motion: reduce){
  .hero__media{position: relative; top: 0; min-height: 0;}
}

/*!SITE-HOME-CRIT-START*/
/* ---- HOME PAGE LAYOUT ------------------------------------------------------
   class="hero" is on index.html and on no other page of this site, so every
   selector below is home-only even though this block is inlined into all 31
   pages. Layout only: the paint for the same components is below the marker.
   -------------------------------------------------------------------------- */
@media(min-width:921px){
  /* THE BUY BUTTON ON THE FIRST SCREEN. Desktop reading order becomes
     eyebrow, headline, Quick Answer, BUTTONS, the payment line, then the
     evidence. DOM order is untouched -- the Quick Answer still follows the
     H1 for parsers and for the speakable selector -- and the phone order,
     which is composed separately with display:contents at 920, is below
     this query and never reached by it. */
  .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;margin-top:26px}
  .hero .hero__copy>.pay{order:5}
  .hero .hero__copy>.hero__rating{order:6}
  .hero .hero__copy>.ticks{order:7;margin-top:26px}
  .hero .hero__copy>.hero__sub{order:8}
  .hero .hero__copy>.factpills{order:9}
  .hero .hero__copy>.figures{order:10}
  /* The recommended pack stands up out of the row on MARGIN, never on
     transform: the reveal pass sets transform:none the moment the card
     arrives and would cancel it. The row still stretches and every
     Add To Cart is still margin-top:auto, so the three buttons keep the
     one baseline they were engineered to share. */
  body:has(.hero) .tier--feature{margin-top:-18px}
}
/* The corner flag is pinned to the card's top-left corner instead of being
   centred on its top edge. It is out of flow, so it reflows nothing; only
   its own box moves, and transform:none is what cancels the centring
   translate rather than decoration. Its colour and its fold are below. */
body:has(.hero) .tier__flag{left:-9px;right:auto;top:-13px;padding:7px 16px;
  transform:none}
/*!SITE-HOME-CRIT-END*/
/*!CRITICAL-END*/

/* ---- 7. SECTIONS --------------------------------------------------------- */
.sec{padding-block:62px}
.sec--tight{padding-block:38px}
.sec--tint{background:var(--paper-tint)}
.sec--white{background:var(--paper-card)}
.sec--center .sec__head{text-align:center;margin-inline:auto}
.sec__head{max-width:var(--measure-wide);margin-bottom:32px}
.eyebrow{display:inline-block;font-family:var(--sans);font-size:.84375rem;
  font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  margin-bottom:10px}
.rule{display:block;width:64px;height:4px;background:var(--gold);border-radius:0;
  margin-bottom:14px}
.sec--center .rule{margin-inline:auto}
.sec h2{font-size:clamp(1.75rem,3.2vw,2.6rem);margin-bottom:14px;line-height:1.06}
.sec h3{font-size:1.1875rem;margin-bottom:8px}
.lead{font-size:1.09375rem;color:var(--muted)}
.note{font-size:.90625rem;color:var(--faint)}
.sec p+p,.sec p+ul,.sec p+ol,.sec ul+p,.sec ol+p{margin-top:1em}
.sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
.sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
.sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
.sec>.wrap>.pullquote,.sec>.wrap>blockquote{max-width:var(--measure);
  margin-inline:auto}
.sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:var(--measure-wide);
  margin-inline:auto}
.sec>.wrap>ul,.sec>.wrap>ol{padding-left:0}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:36px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n);position:absolute;left:0;top:3px;
  width:25px;height:25px;border-radius:var(--r-s);background:var(--accent);
  color:#fff;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.6rem;
  line-height:.82;font-weight:400;color:var(--accent);padding:8px 13px 0 0}

.pullquote{border-left:4px solid var(--gold);padding:8px 0 8px 24px;margin:26px auto}
.pullquote p{font-family:var(--sans);font-weight:600;font-size:1.22rem;
  color:var(--ink);line-height:1.5}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.90625rem;
  color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-weight:700}

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

/* ---- 8. CARDS, GRIDS: flat, hairline, gold rule under the heading -------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;transition:border-color .2s ease,
  box-shadow .2s ease}
.card:hover{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent-tint)}
.card h3{font-size:1.125rem;padding-bottom:9px;margin-bottom:10px;
  border-bottom:3px solid var(--gold);display:inline-block}
.card p{font-size:1.0625rem;color:var(--faint)}
.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 72px;position:relative;
  counter-increment:s}
.step__n{position:absolute;left:22px;top:24px;width:36px;height:36px;
  border-radius:var(--r-s);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)}
.step h3{font-size:1.09rem}
.step p{font-size:1.0625rem;color:var(--faint)}

.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);color:var(--ink);font-size:.8125rem}

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

/* ---- 9. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--paper-card);border:2px solid var(--ink);
  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(--sans);
  font-weight:700;color:var(--ink);font-size:1.03rem}
.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(--ink);color:#fff;font-size:.90625rem;
  letter-spacing:.09em;text-transform:uppercase;font-weight:800;
  font-family:var(--sans)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b{color:var(--ink)}

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

/* ---- 11. SHOTS: images that carry content -------------------------------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,1fr)}
.shots figure{background: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:.90625rem;color:var(--faint);
  border-top:3px solid var(--gold)}
.shots figcaption b{display:block;font-family:var(--sans);font-size:1.03rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 12. SEAL WALL ------------------------------------------------------- */
.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:10px}
.faces figure{text-align:center}
.faces img{width:100%;border-radius:50%}
.faces figcaption{font-size:.90625rem;color:var(--faint);margin-top:8px;font-weight:600}

/* ---- 13. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--ink);color:rgba(255,255,255,.84);
  border-radius:var(--r);padding:30px 34px;display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center;
  border-left:6px solid var(--gold)}
.promo p{margin:0}
.promo b{color:#fff}
.stats{background:var(--accent-deep);border-radius:var(--r);padding:34px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stats b{display:block;font-family:var(--display);font-size:2.3rem;color:#fff;
  line-height:1;font-weight:400}
.stats span{display:block;margin-top:8px;font-size:.90625rem;
  color:rgba(255,255,255,.78);line-height:1.45}
.badgewall{display:grid;grid-template-columns:repeat(5,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:.84375rem;color:var(--faint)}
.badgewall figcaption b{display:block;color:var(--ink);font-size:.9rem;
  margin-bottom:4px;font-family:var(--sans)}

/* ---- 14. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.whycard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px;border-bottom:4px solid var(--accent)}
.whycard h3{font-size:1.09rem}
.whycard p{font-size:1.0625rem;color:var(--faint)}
.whofor{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.forlist{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.forlist h3{font-size:1.09rem;margin-bottom:12px;padding-bottom:9px;
  border-bottom:3px solid var(--gold)}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"\25AA";color:var(--accent);font-weight:700}

/* ---- 15. INGREDIENTS / FACTS PANEL --------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;position:relative;
  border-left:5px solid var(--accent)}
.ingcard h3{font-size:1.22rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);font-weight:800;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ingthumbs{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px}
.ingthumbs img{border-radius:var(--r-s);border:1px solid var(--line)}
.facts{background:var(--paper-card);border:2px solid var(--ink);
  border-radius:var(--r);overflow:hidden;max-width:560px;margin-inline:auto}
.facts__h{background:var(--ink);color:#fff;padding:14px 22px;font-family:var(--sans);
  font-size:1.14rem;font-weight:800;letter-spacing:.04em}
.facttab{width:100%;border-collapse:collapse;font-size:1rem}
.facttab th,.facttab td{padding:11px 22px;border-bottom:1px solid var(--line-soft);
  text-align:left}
.facttab td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.facttab tr:last-child th,.facttab tr:last-child td{border-bottom:0}

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

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

/* ---- 18. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,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:.95rem}
.tcard b{display:block;margin-top:8px;font-family:var(--sans);font-size:1.04rem;
  color:var(--ink)}
.tcard span{font-size:0.9062rem;color:var(--faint)}
.tcard p{font-size:1.0625rem;margin-top:10px}
.tlife{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tlife figure{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden}
.tlife figcaption{padding:14px 16px;font-size:.90625rem;color:var(--faint)}
.bars{display:grid;gap:9px;max-width:460px}
.bar{display:grid;grid-template-columns:54px 1fr 54px;gap:12px;align-items:center;
  font-size:.90625rem;color:var(--faint)}
.bar__t{height:10px;background:var(--paper-deep);border-radius:0;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:0}
.dist{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--r);
  padding:28px}

/* ---- 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)}
.faq summary{padding:16px 22px;font-family:var(--sans);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.04rem;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.5rem;flex:none;
  line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq__b{padding:0 22px 18px;font-size:1rem}
.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.16rem;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(--faint);line-height:1.6}
.refs li::before{content:counter(r) ".";position:absolute;left:0;font-weight:800;
  color:var(--accent)}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto 1fr;gap:20px;
  background:var(--paper-card);border:2px solid var(--ink);border-radius:var(--r);
  padding:24px 26px;margin:26px auto 0}
.byline img{border-radius:50%;flex:none}
.byline b{font-family:var(--sans);font-size:1.06rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:.9375rem;color:var(--faint)}

/* ---- 21. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,1fr)}
.formcard{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:26px}
.formcard h3{font-size:1.12rem;margin-bottom:6px}
.formcard label{display:block;font-size:.875rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
.formcard input,.formcard textarea,.formcard select{width:100%;padding:11px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 22. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--accent-deep);border-radius:var(--r);padding:38px 40px;
  color:rgba(255,255,255,.84);border-left:8px solid var(--gold)}
.final h2{color:#fff;font-size:clamp(1.65rem,3.2vw,2.4rem);margin-bottom:12px;
  line-height:1.06}
.final p{color:rgba(255,255,255,.84)}
.final--media{display:grid;grid-template-columns:300px minmax(0,1fr);gap:34px;
  align-items:center}
.final--media .final__img img{width:100%;height:auto;margin-inline:auto}
.final__price{font-family:var(--sans);font-weight:800;font-size:1.22rem;color:#fff;
  margin:14px 0 18px}
.final .btn--cta{background:var(--gold);color:var(--ink);border-color:#fff;
  box-shadow:3px 3px 0 rgba(255,255,255,.35)}
.final .btn--cta:hover{background:#e0af1d;box-shadow:5px 5px 0 rgba(255,255,255,.45)}
.rel{display:grid;grid-template-columns:repeat(3,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:border-color .2s ease,box-shadow .2s ease}
.rel a:hover{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent-tint);
  text-decoration:none}
.rel b{display:block;font-family:var(--sans);font-size:1.06rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9375rem;color:var(--faint)}

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

/* ---- 24. FOOTER: ONE full-width CTA slab, links set inline INSIDE it -----
   There is no separate CTA band and no link grid. The whole footer is a single
   slab: the oversized order line, the button, then every destination on the
   site as inline runs on rules inside the same block, then the contact card,
   the NAP and the disclaimers. The links live in the CTA rather than beneath
   it, which is the thing that makes this footer recognisable.

   .fcta__h is a <p>, not a heading. It repeats site-wide, and a heading in the
   chrome would add one H2 to all 32 pages and change the outline (pitfall 14).
   The <b> labels inside .flinks are the same: styled eyebrows, not headings. */
footer.fslab{background:var(--accent-deep);color:rgba(255,255,255,.70);
  border-top:8px solid var(--gold);padding-block:58px 22px;text-align:center;
  font-size:.9375rem}
footer a{color:rgba(255,255,255,.88)}
footer a:hover{color:#fff}
.fcta__h{font-family:var(--display);font-size:clamp(2.1rem,5.4vw,3.6rem);color:#fff;
  line-height:1.02;font-weight:400;margin-bottom:12px;letter-spacing:.01em}
.fcta__p{color:rgba(255,255,255,.76);max-width:640px;margin:0 auto 24px;
  font-size:1.0625rem}
footer .btn--cta{background:var(--gold);color:var(--ink);border-color:#fff;
  box-shadow:4px 4px 0 rgba(255,255,255,.3)}
footer .btn--cta:hover{background:#e0af1d;box-shadow:6px 6px 0 rgba(255,255,255,.4)}
.fcta__note{font-size:.90625rem;color:rgba(255,255,255,.62);margin-top:18px}

/* the links, inline, inside the slab */
.flinks{margin:38px auto 0;max-width:var(--measure-wide);padding-block:26px;
  border-top:1px solid rgba(255,255,255,.20);
  border-bottom:1px solid rgba(255,255,255,.20);
  display:grid;gap:15px}
.flinks__g{font-size:.9375rem;line-height:2}
.flinks__g>b{display:inline-block;color:var(--gold);font-family:var(--sans);
  font-size:.84375rem;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  margin-right:12px;vertical-align:baseline}
.flinks a{white-space:nowrap}
.flinks .sep{color:rgba(255,255,255,.32);padding:0 8px;user-select:none}

.fbrand{font-family:var(--display);font-size:1.9rem;color:#fff;
  margin:34px 0 10px;font-weight:400;letter-spacing:.02em}
.fbrand span{color:var(--gold)}
.fbadges{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.fcontact{display:grid;grid-template-columns:auto 1fr auto;gap:26px;
  align-items:center;background:rgba(255,255,255,.07);border-radius:var(--r);
  padding:22px 26px;margin:30px auto 0;text-align:left;max-width:var(--measure-wide)}
.fcontact img{flex:none}
.fcontact__t b{display:block;font-family:var(--sans);font-size:1.12rem;color:#fff;
  margin-bottom:5px}
.fcontact__t p{font-size:1.062rem;color:rgba(255,255,255,.76)}
.fnap{padding-block:24px;margin-top:26px;
  border-top:1px solid rgba(255,255,255,.20);
  border-bottom:1px solid rgba(255,255,255,.20);
  font-size:.90625rem;line-height:1.8}
.fnap strong{color:#fff}
.fpay{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;
  padding-block:20px;font-size:.90625rem}
.disc{padding-top:18px;font-size:.90625rem;line-height:1.7;
  color:rgba(255,255,255,.70);text-align:left;max-width:var(--measure-wide);
  margin-inline:auto}
.disc p{margin-bottom:.9em}
.disc b{color:rgba(255,255,255,.92)}
.disc .copy{margin-top:16px;color:rgba(255,255,255,.60);text-align:center}

/* ---- 25. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--ink);
  color:#fff;transform:translateY(110%);transition:transform .3s ease;
  border-top:3px 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:.90625rem}
.buybar__t b{color:#fff}
.buybar .from{color:var(--gold)}
.buybar .btn{padding:10px 22px}

/* ---- 26. BLOG ------------------------------------------------------------ */
.article{max-width:768px}
.article h1{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:14px;line-height:1.04}
.article h2{font-size:1.65rem;margin:1.9em 0 .6em;scroll-margin-top:110px;
  line-height:1.1}
.article h3{font-size:1.16rem;margin:1.5em 0 .5em}
.article p{margin-bottom:1em}
.article ul,.article ol{margin:0 0 1.2em}
.article ul li{position:relative;padding-left:22px;margin-bottom:8px}
.article ul li::before{content:"\25AA";position:absolute;left:4px;
  color:var(--accent);font-weight:700}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:30px;margin-bottom:8px;
  counter-increment:ai}
.article ol li::before{content:counter(ai) ".";position:absolute;left:0;
  color:var(--accent);font-weight:800}
.article figure{margin:1.6em 0}
.article figure img{width:100%;border-radius:var(--r);border:1px solid var(--line)}
.article figure.portrait img{width:100%;max-width:var(--figw,440px);
  margin-inline:auto}
.article figcaption{font-size:.90625rem;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:0.9062rem;
  color:var(--faint);padding-block:12px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 24px;margin-bottom:26px;
  border-left:5px solid var(--gold)}
.toc h2{font-size:.84375rem;letter-spacing:.18em;text-transform:uppercase;
  font-family:var(--sans);font-weight:800;color:var(--accent);margin:0 0 10px;
  line-height:1.4}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:26px;font-size:1.062rem}
.toc li::before{content:counter(t) ".";position:absolute;left:0;color:var(--faint);
  font-weight:700}
.keypoints{background:var(--accent-tint);border-left: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:.84375rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);
  margin-bottom:10px}
.keypoints li b{color:var(--accent-deep)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.posts article{background:var(--paper-card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s ease,
  box-shadow .2s ease}
.posts article:hover{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent-tint)}
.posts img{width:100%}
.posts .pbody{padding:20px 22px}
.posts h3{font-size:1.1rem;margin-bottom:8px}
.posts p{font-size:1.062rem;color:var(--faint)}
.posts .pmeta{font-size:0.9062rem;color:var(--faint);margin-top:12px;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}
/* A shared component in a narrower column is a new component (pitfall 24).
   The prose column is 768px where the page wrap is 1180px, so the closing CTA
   needs its own geometry here, and a third set again on a phone. */
.article .final--media{grid-template-columns:168px minmax(0,1fr);gap:24px;
  padding:30px 28px}
.article .final--media .final__img img{max-width:168px}
.article .final--media h2{font-size:1.6rem;line-height:1.1;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.32rem}
  .article .final--media .btn{width:100%}
}
.final p,.article .final p{color:rgba(255,255,255,.84)}
.final__price,.article .final .final__price{color:#fff}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 27. MOTION: the panel slide, plus a rule that draws in -------------- */
[data-reveal]{opacity:0;transform:translateY(14px)}
[data-reveal].in{opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s ease}
.sec__head .rule{transform-origin:left center}
.sec--center .sec__head .rule{transform-origin:center}
[data-reveal] .rule{transform:scaleX(0)}
[data-reveal].in .rule{transform:scaleX(1);transition:transform .55s ease .12s}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in,[data-reveal] .rule,[data-reveal].in .rule{
    opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.rel a:hover,.posts article:hover{transform:none}
  html{scroll-behavior:auto}
  .navmenus{transition:none}
}

/* ---- 28. RESPONSIVE ------------------------------------------------------ */
@media(max-width:1060px){
  .sec>.wrap>p,.sec>.wrap>h2,.sec>.wrap>h3,.sec>.wrap>h4,
  .sec>.wrap>ul,.sec>.wrap>ol,.sec>.wrap>.sec__head,.sec>.wrap>.callout,
  .sec>.wrap>.alert,.sec>.wrap>.byline,.sec>.wrap>.refs,.sec>.wrap>.answer,
  .sec>.wrap>.pullquote,.sec>.wrap>blockquote,
  .sec>.wrap>.tablewrap,.sec>.wrap>.faq,.sec>.wrap>.steps{max-width:none}
}
@media(max-width:1024px){
  .badgewall{grid-template-columns:repeat(3,1fr)}
  .faces{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:920px){
  .split,.split--rev,.guarantee,.dist,.form{grid-template-columns:1fr;gap:26px}
  .promo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g3,.g4,.whygrid,.tgrid,.tlife,.rel,.posts{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:1fr;max-width:430px;margin-inline:auto}
  .pricing .tier:nth-child(1){order:3}
  .pricing .tier:nth-child(2){order:1}
  .pricing .tier:nth-child(3){order:2}
  .tier--feature{box-shadow:none}
  .final--media{grid-template-columns:1fr;gap:22px}
  .fcontact{grid-template-columns:1fr;text-align:left}
}
@media(max-width:700px){
  .sec{padding-block:46px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.tlife,.rel,.posts,.shots,.shots--wide,
  .badgewall{grid-template-columns:1fr}
  .faces{grid-template-columns:repeat(3,1fr)}
  .qa dl{grid-template-columns:1fr}
  .qa dt{padding-bottom:0;border-bottom:0}
  .qa dd{padding-top:4px}
  .stats{grid-template-columns:1fr}
  .final{padding:28px 24px}
  footer.fslab{padding-block:42px 22px}
  .flinks__g>b{display:block;margin:0 0 2px}
}
/* Tap target: a button on a phone must be reachable with a thumb. */
@media(max-width:600px){.btn{min-height:44px}}


/* ---- hero: sticky, centred product column ------------------------------
   The product column holds its place, vertically centred, until the hero has
   fully scrolled past.

   --navh is measured and published by site.js: nav heights run 66-99px across
   the estate and change when a bar compacts, and a hardcoded offset tucks the
   product under the bar on the taller ones.

   min-height makes the sticky box a full screen tall so the shot can be
   CENTRED inside it. Without it the box is only as tall as the image and
   `top` merely pins it under the header, which is what the old house rule did.

   Requires .hero NOT to clip on the block axis -- any non-visible overflow on
   an ancestor becomes the scrollport sticky resolves against. See pitfall 65,
   whose first fix got this wrong. */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__media {
    position: sticky;
    top: calc(var(--navh, 88px) + 14px);
    align-self: start;
    min-height: calc(100vh - var(--navh, 88px) - 28px);
    min-height: calc(100svh - var(--navh, 88px) - 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Cancelling the sticky column must NOT cancel the containing block. Every
   hero motif sizes its .hero__media pseudo-elements in PERCENT, so they
   resolve against the nearest positioned ancestor; `static` re-parents them to
   a box several times wider -- measured at 1800px against a 523px column --
   and the ring lands across the headline. Worse, the same query stops it
   animating, so it SITS there: ask for less motion, get the one broken hero.

   `relative` lays out identically to `static` and keeps the containing block.
   `top:0` is not decoration: the rule above sets a top offset of one nav height
   plus 14px, which a relative box would apply for real and push the plate
   ~110px down the page (pitfall 65). Written WITHOUT naming that custom
   property in the usual var() form on purpose -- preflight's undefined-variable
   check reads comments too, so a property named here is a property it believes
   the sheet uses. Measured on 7 sites before and after (pitfall 107). */
@media (prefers-reduced-motion: reduce) {
  .hero__media { position: relative; top: 0; min-height: 0; }
}

/* --- pack cards read as one repeated object ----------------------------
   A pricing row is three cards that have to share their edges, their image
   slot and their button baseline. The vendor product shots are different
   shapes (one site shipped 200x243, 200x105 and 200x65 side by side) and the
   blurbs are different lengths, so without these three rules the images
   render at three sizes and the three CTAs sit at three heights.

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

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

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

/* ==== directional chrome (fix_chrome_scroll.py) ==== */
.nav,#nav{transition:transform .28s ease}
@media(prefers-reduced-motion:reduce){.nav,#nav{transition:none}}
.nav--away{transform:translateY(-100%)}
html.chrome-up .buybar{transform:translateY(110%)}
/* ==== end directional chrome ==== */
/* ==== tables never fade (reveal_skip_tables.py) ==== */
/* A comparison table is reference content the reader scrolled to on
   purpose. Fading it in leaves it illegible for half a second at exactly
   that moment, which reads as broken text rather than as motion. The
   reveal stays on cards and callouts, which are decorative arrivals. */
.tablewrap[data-reveal],.tablewrap.reveal{opacity:1;transform:none;transition:none}
/* ==== end tables never fade ==== */
/*!SITE-HOME-PAINT-START*/
/* ---- HOME PAGE PAINT: modern surface + the trace motif ---------------------
   Slot for this site: 28px cards, 18px controls, an architectural depth of
   one short hard offset plus one wide ambient stop, a corner-flag ribbon and
   a TRACE hero motif.

   Paint only -- border-radius, box-shadow, background, colour, transform,
   transition, animation. Nothing here moves a box, so it lives below the
   critical marker and needs restamp_assets.py rather than a rebuild.

   Every selector is scoped with body:has(.hero). That is what keeps the
   block on the home page, and it is also what makes it win: modern_surface.py
   and footer_type.py re-append their own blocks AFTER this one on every
   build, and their selectors are bare .card / .tier / footer. One extra
   class beats them wherever they land. Specificity, never source order.

   The shadow is tinted with this site's own inks -- the wordmark violet
   (44,15,94) and the graphite (23,22,29) -- and never neutral black.
   -------------------------------------------------------------------------- */
body:has(.hero){
  --home-r-card:28px;
  --home-r-ctl:18px;
  --home-shadow:0 3px 0 rgba(44,15,94,.14),0 14px 24px rgba(23,22,29,.10);
  --home-shadow-sm:0 2px 0 rgba(44,15,94,.12),0 8px 16px rgba(23,22,29,.07);
  --home-lift:0 5px 0 rgba(44,15,94,.20),0 22px 34px rgba(23,22,29,.16);
}

/* -- panels: the slot's card curve, and a depth with two stops -- */
body:has(.hero) .card,
body:has(.hero) .whycard,
body:has(.hero) .forlist,
body:has(.hero) .step,
body:has(.hero) .tier,
body:has(.hero) .tablewrap,
body:has(.hero) .faq details,
body:has(.hero) .qa,
body:has(.hero) .facts,
body:has(.hero) .byline,
body:has(.hero) .refs,
body:has(.hero) .final,
body:has(.hero) .promo,
body:has(.hero) .stats,
body:has(.hero) .dist,
body:has(.hero) .rel a,
body:has(.hero) .shots figure{border-radius:var(--home-r-card);
  box-shadow:var(--home-shadow)}
/* The two flag panels keep a square left edge: the colour bar IS the
   component, and rounding it turns the bar into a sliver. */
body:has(.hero) .callout,
body:has(.hero) .alert{border-radius:0 var(--home-r-card) var(--home-r-card) 0;
  box-shadow:var(--home-shadow-sm)}

/* -- controls: the slot's control curve. The masthead pill stays a pill,
   because it is the one round thing the site was given. -- */
body:has(.hero) .btn{border-radius:var(--home-r-ctl);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,
  color .18s ease}
body:has(.hero) .nav__cta .btn{border-radius:999px}
body:has(.hero) .pill,
body:has(.hero) .hero__tag,
body:has(.hero) .factpills li,
body:has(.hero) .rule,
body:has(.hero) .bar__t,
body:has(.hero) .bar__f{border-radius:999px}
body:has(.hero) .ck{border-radius:50%}
body:has(.hero) .burger{border-radius:14px}
body:has(.hero) .figures{border-radius:var(--home-r-ctl)}
body:has(.hero) .floaty{border-radius:var(--home-r-ctl);
  box-shadow:0 3px 0 rgba(44,15,94,.22),0 14px 24px rgba(23,22,29,.14)}

/* -- the buying CTA is the only gradient on the page, and the secondary
   button stays solid, so the pair reads as two weights rather than as two
   buttons of equal claim. -- */
body:has(.hero) main .btn--cta,
body:has(.hero) .nav__cta .btn{
  background:linear-gradient(135deg,#7331d8 0,var(--accent) 46%,
  var(--accent-deep) 100%);border-color:var(--accent-deep);color:#fff}
body:has(.hero) main .btn--cta{
  box-shadow:0 3px 0 rgba(44,15,94,.55),0 14px 24px rgba(91,33,182,.26)}
body:has(.hero) main .btn--cta:hover{
  background:linear-gradient(135deg,var(--accent) 0,var(--accent-deep) 78%);
  box-shadow:0 5px 0 rgba(44,15,94,.60),0 20px 30px rgba(91,33,182,.32)}
body:has(.hero) .nav__cta .btn{
  box-shadow:0 2px 0 rgba(44,15,94,.45),0 8px 16px rgba(91,33,182,.22)}
body:has(.hero) .nav__cta .btn:hover{transform:translateY(-2px);
  box-shadow:0 4px 0 rgba(44,15,94,.50),0 14px 22px rgba(91,33,182,.30)}
body:has(.hero) .btn--ghost{background:var(--paper-card);
  color:var(--accent-deep);border-color:var(--accent-deep);
  box-shadow:var(--home-shadow-sm)}
body:has(.hero) .btn--ghost:hover{background:var(--accent-tint);
  box-shadow:var(--home-shadow)}
/* A violet gradient disappears on the two violet slabs. Those two keep the
   gold they were given, in the same two-stop language. */
body:has(.hero) .final .btn--cta,
body:has(.hero) footer .btn--cta{
  background:linear-gradient(135deg,#ffdc74 0,var(--gold) 52%,#d7a418 100%);
  color:var(--ink);border-color:#fff;
  box-shadow:0 3px 0 rgba(255,255,255,.32),0 14px 24px rgba(23,22,29,.30)}
body:has(.hero) .final .btn--cta:hover,
body:has(.hero) footer .btn--cta:hover{
  background:linear-gradient(135deg,var(--gold) 0,#d7a418 100%);
  box-shadow:0 5px 0 rgba(255,255,255,.40),0 20px 30px rgba(23,22,29,.36)}
/* The lift is vertical now, to match a shadow that sits under the box
   rather than beside it. */
body:has(.hero) .btn:hover{transform:translateY(-2px)}

/* -- anything clickable answers the pointer, and the keyboard -- */
body:has(.hero) .card,
body:has(.hero) .whycard,
body:has(.hero) .rel a,
body:has(.hero) .tier,
body:has(.hero) .shots figure,
body:has(.hero) .faq details{transition:box-shadow .25s ease,
  transform .25s ease,border-color .25s ease}
body:has(.hero) .card:hover,
body:has(.hero) .whycard:hover,
body:has(.hero) .rel a:hover,
body:has(.hero) .tier:hover,
body:has(.hero) .shots figure:hover{box-shadow:var(--home-lift);
  transform:translateY(-2px);border-color:var(--accent-line)}
body:has(.hero) .faq details[open]{box-shadow:var(--home-lift)}
body:has(.hero) a:focus-visible,
body:has(.hero) .btn:focus-visible,
body:has(.hero) button:focus-visible,
body:has(.hero) summary:focus-visible{outline:3px solid var(--gold);
  outline-offset:3px}

/* -- pricing: a corner flag, a raised and differently-coloured recommended
   tier, and dashed separators between the feature rows. The shared button
   baseline is not disturbed: the raise is a margin above the marker, the
   fixed image box and the per-card flex are exactly as they were, and the
   separators are drawn as a BACKGROUND so no row changes height. -- */
body:has(.hero) .tier{border:2px solid var(--line-soft);
  background:var(--paper-card)}
body:has(.hero) .tier--feature{border-color:var(--accent);
  background:linear-gradient(180deg,#f7f1ff 0,var(--paper-card) 46%);
  box-shadow:0 4px 0 rgba(44,15,94,.30),0 26px 44px rgba(44,15,94,.20)}
body:has(.hero) .tier--feature:hover{
  box-shadow:0 6px 0 rgba(44,15,94,.34),0 32px 52px rgba(44,15,94,.26)}
body:has(.hero) .tier--feature .tier__price{color:var(--accent)}
body:has(.hero) .tier__rows span+span{
  background-image:linear-gradient(90deg,var(--line) 0 5px,
  transparent 5px 10px);background-repeat:repeat-x;background-size:10px 1px;
  background-position:left top}
body:has(.hero) .tier__flag{border:0;border-radius:0 999px 999px 0;
  background:var(--accent);color:#fff;
  box-shadow:0 3px 0 rgba(44,15,94,.45),0 10px 18px rgba(23,22,29,.16)}
body:has(.hero) .tier--feature .tier__flag{
  background:linear-gradient(90deg,var(--gold) 0,#ffd977 100%);
  color:var(--ink);
  box-shadow:0 3px 0 rgba(107,78,5,.35),0 10px 18px rgba(23,22,29,.16)}
/* the fold under the overhang -- what makes it a flag and not a label */
body:has(.hero) .tier__flag::after{content:"";position:absolute;left:0;
  top:100%;width:0;height:0;border-style:solid;border-width:9px 9px 0 0;
  border-color:var(--accent-deep) transparent transparent transparent}
body:has(.hero) .tier--feature .tier__flag::after{
  border-top-color:var(--gold-deep)}

/* -- THE HERO MOTIF: trace. A single line travels the silhouette of the
   product column and then releases, over 26 seconds -- this is a supplement
   taken daily for weeks, not an energy drink.

   It is drawn on a pseudo-element of the media column's inner wrapper, so
   it is anchored to the product at every width, and NEVER on the <img>,
   which is the LCP element and is preloaded. It is sized larger than the
   product card, so it reads outside it rather than inside an opaque box.
   Only transform and opacity animate. gdTrace is a new keyframe name; the
   only other one in this sheet is gfColumn. -- */
body:has(.hero) .hero__stick::after{content:"";position:absolute;left:50%;
  top:50%;width:min(128%,790px);aspect-ratio:1;translate:-50% -50%;
  border:2px solid var(--accent);border-radius:50%;z-index:1;
  pointer-events:none;
  -webkit-mask-image:conic-gradient(from 0deg,#000 0 6%,rgba(0,0,0,.34) 16%,
  transparent 29% 100%);
  mask-image:conic-gradient(from 0deg,#000 0 6%,rgba(0,0,0,.34) 16%,
  transparent 29% 100%);
  animation:gdTrace 26s cubic-bezier(.5,.06,.5,.94) infinite}
@keyframes gdTrace{
  0%{transform:rotate(0deg);opacity:0}
  7%{opacity:.85}
  60%{opacity:.85}
  84%{opacity:0}
  100%{transform:rotate(360deg);opacity:0}}

/* The six bottles fill the product box edge to edge, so the ring is sized to
   clear them ABOVE and BELOW: the two visible arcs are the ones outside the
   silhouette, and the line slips behind the bottles at the sides rather than
   being cut by the panel edge. Measured at 1920 / 1440 / 1200 / 981. On a
   phone the column is narrower than the shot's own margin, so the ring is
   sized to the shot instead of over-running the panel. */
@media(max-width:920px){
  body:has(.hero) .hero__stick::after{width:min(100%,370px)}
}

@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__stick::after{animation:none;opacity:0}
  body:has(.hero) .btn:hover,
  body:has(.hero) .nav__cta .btn:hover,
  body:has(.hero) .card:hover,
  body:has(.hero) .whycard:hover,
  body:has(.hero) .rel a:hover,
  body:has(.hero) .tier:hover,
  body:has(.hero) .shots figure:hover{transform:none}
}
/*!SITE-HOME-PAINT-END*/

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

   Dropping the filter below 1025px hands the drawer back to the viewport and
   it becomes the full-height panel it was written to be. Desktop keeps the
   glass, where there is no drawer to break. It is also the cheaper choice on
   a phone: a full-width backdrop-filter on a sticky header is re-sampled on
   every scroll frame.
   ========================================================================== */
@media (max-width:1024px){
  header.nav{-webkit-backdrop-filter:none;backdrop-filter:none}
  /* belt and braces: even if some other ancestor ever traps it again, the
     drawer still gets a real height and can scroll to its last link. */
  .navmenus{max-height:100svh;overflow-y:auto;overscroll-behavior:contain}
}
/*!MOBILE-MENU-FIX-END*/
/* ==== footer type floor (footer_type.py) ==== */
/* The footer carried the smallest text on the page -- the legal pages,
   the guarantee and the contact routes, set as fine print. Running text
   and links sit at 16px, column headings at 15px (uppercase and
   letter-spaced, so they read larger than the number). Last in the file
   on purpose: it outranks the phone breakpoints that shrank them. */
footer.fslab{font-size:16px}
footer .btn{font-size:16px}
footer .disc{font-size:16px}
footer .fcta__note{font-size:16px}
footer .flinks__g{font-size:16px}
footer .flinks__g>b{font-size:16px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */

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

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

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