:root{
  /* ---- ground: graphite near-black, from the ExiTide label field ---- */
  --paper:#0f1216;
  --paper-tint:#14181e;
  --paper-card:#1a1f27;
  --paper-deep:#0a0c0f;
  --dark:#0f1216;
  --dark-2:#1b222b;
  --on-dark:#f4efe6;

  /* ---- bone: the panels the long-form copy sits on ---- */
  --bone:#f2ede5;
  --bone-2:#e7e0d3;
  --bone-card:#fbf9f5;

  /* ---- ink: the DEFAULT set is the one that reads on graphite.
         .sec--bone re-points every one of these; see the note below. ---- */
  --ink:#f4efe6;
  --ink-soft:#ded8cc;
  --muted:#b3aca1;
  --faint:#9a9388;
  --line:#2a323d;
  --line-soft:#1f252d;
  --panel:#1a1f27;
  --panel-2:#212833;

  /* ---- accent, from the orange on the ExiTide bottle label (#ea5128) ---- */
  --accent:#ea5128;
  --accent-deep:#c8390f;
  --accent-on:#ff7f52;
  --accent-tint:#241811;
  --accent-edge:#4d2716;
  --accent-glow:rgba(234,81,40,.30);

  /* ---- ember, from the amber icon row under the wordmark ----
     --ember is the GRAPHIC shade: rules, borders, gradients. --ember-on is
     the shade that reads as TEXT on the current ground, and .sec--bone
     re-points it. The two are separate because #f0a03a on a bone panel is
     1.95:1 -- readable as a hairline and not as a word. */
  --ember:#f0a03a;
  --ember-on:#f0a03a;
  --ember-deep:#8a5411;
  --ember-soft:#261d11;
  --ember-line:#4a3418;

  /* ---- type ---- */
  --display:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Albert Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ---- metrics ---- */
  --wrap:1160px;
  --banner:1420px;
  --measure:760px;
  --measure-wide:980px;
  --r:10px;
  --r-s:6px;
  --r-l:20px;
  --radius:10px;
  --figw:440px;
  --navh:88px;
  --shadow:0 18px 44px rgba(0,0,0,.46);
  --shadow-sm:0 4px 16px rgba(0,0,0,.34);
  --shadow-lg:0 30px 70px rgba(0,0,0,.58);
}

/* ==========================================================================
   Getexitide - getexitide.com                     design slot: batch 5, row 27

   THE ONLY DARK-FIRST SITE ON THE ESTATE. The page ground is graphite
   near-black and the long-form reading sections sit on bone panels, so the
   separation from the three sister builds in this batch is carried by the
   GROUND and the CHROME rather than by the accent.

   Component system taken from the UI reference at alkatidde.com: a single
   sticky bar, a Quick Answer card with an accent edge, alternating section
   bands, a dark closing band, plain card grids. The ARRANGEMENT is not the
   reference's: alkatidde puts the product on the right of a pale curved
   band; this site runs a full-bleed BOTTLE BANNER across the top with the
   Quick Answer card overlapping its lower edge.

   Colour is not taken from the reference either. It is derived from the
   product bottle in assets/: the label field is near-black and the wordmark,
   the rule under it and the three icons are #ea5128, sampled from
   exitide-wide-blue-product-label.webp. The ember ramp is the amber in the
   icon row.

   Type: Unbounded (display) + Albert Sans (body).

   ONE RULE MAKES THE TWO GROUNDS WORK, AND IT IS WORTH READING
   ------------------------------------------------------------
   No component rule below carries a literal colour. Every one of them reads
   a token. A region that changes ground - `.sec--bone`, `.final`, `.promo`,
   `.stats`, `.buy__head`, `footer`, `.buybar` - RE-POINTS those tokens on
   itself, so a card inside a bone section resolves bone values and the same
   card on the graphite ground resolves graphite ones, with no per-component
   override anywhere.

   Pitfall 57 records that re-pointing tokens on a container was tried on the
   estate and reverted. It failed there because it was retrofitted onto sites
   whose component rules were full of literal colours, so most of the failing
   text never read the token at all. Here the stylesheet is authored that way
   from the first line, which is the condition that made it fail before.
   ========================================================================== */

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

.skip{position:absolute;left:-9999px;top:0;background:var(--accent-deep);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. NAV: a segmented pill bar ----------------------------------------
   The seven menu items are SEGMENTS inside one outlined track, divided by
   hairlines rather than by gaps, with the lot chip sealed onto the right end
   of the same track. No top strip: the role line is the hero eyebrow and the
   guarantee is in the hero ticks.

   THE BAR USES THE BANNER WIDTH, NOT THE CONTENT WRAP. A wordmark with a
   sub-label, seven segments, a lot chip and a block CTA need about 1,140px.
   `.wrap` caps at 1,160 and gives back 22px of gutter each side, so inside
   the content wrap the row has 1,116px however wide the screen is -- and it
   would wrap at every desktop width, which is exactly the failure pitfall 16
   describes and which is easy to miss because it happens ABOVE the burger
   breakpoint. Aligning the bar with the hero banner beneath it both fixes
   that and is the arrangement this site wants anyway.

   Nothing in the row may wrap. It sheds instead: the segments tighten at
   1400, the lot chip goes at 1280, the track collapses to a dropdown at
   1180, the CTA at 430. Measure the row height at 1180/1260/1360/1500: a
   single row is ~68px, and 100px+ means it has wrapped. */
.nav{position:sticky;top:0;z-index:900;background:var(--paper-deep);
  border-bottom:1px solid var(--line)}
.nav .wrap{max-width:var(--banner)}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:13px;flex-wrap:nowrap;position:relative}
.brand{display:inline-flex;align-items:center;gap:0;flex:none;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand svg{width:34px;height:34px;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.34rem;font-weight:800;
  color:var(--ink);letter-spacing:-.03em;white-space:nowrap}
.brand__prod span{color:var(--accent-on)}
.brand__firm{font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:4px;
  white-space:nowrap}
.navmenus{display:flex;align-items:center;flex-wrap:nowrap}
.nav__track{display:flex;align-items:stretch;flex-wrap:nowrap;
  border:1px solid var(--line);border-radius:999px;background:var(--panel);
  padding:4px;overflow:hidden}
.menu{display:flex;align-items:stretch;flex-wrap:nowrap}
.menu li{flex:none;display:flex}
.menu li+li{border-left:1px solid var(--line-soft)}
.menu a{display:flex;align-items:center;font-family:var(--sans);font-size:.9rem;
  font-weight:600;color:var(--ink-soft);white-space:nowrap;padding:7px 15px;
  border-radius:999px}
.menu a:hover,.menu a[aria-current]{color:var(--paper-deep);
  background:var(--accent-on);text-decoration:none}
.nav__lot{display:flex;align-items:center;margin-left:4px;padding:7px 14px;
  border-radius:999px;background:var(--accent-tint);border:1px solid var(--accent-edge);
  color:var(--accent-on);font-size:.8438rem;font-weight:700;letter-spacing:.06em;
  white-space:nowrap}
.nav__cta{flex:none}
.burger{display:none;background:var(--panel);border:1px solid var(--line);cursor:pointer;
  width:44px;height:44px;padding:10px;flex:none;border-radius:999px}
.burger span{display:block;height:2px;background:var(--ink);margin:4px 0;border-radius:2px}

/* ---- 2. BUTTONS: square-shouldered block, uppercase ---------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:14px 24px;border-radius:var(--r-s);border:2px solid transparent;
  cursor:pointer;text-align:center;letter-spacing:.04em;text-transform:uppercase;
  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-deep);color:#fff;box-shadow:0 10px 26px var(--accent-glow)}
.btn--cta:hover{background:var(--accent);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--accent-on);color:var(--accent-on)}
.btn--ember{background:var(--ember-soft);color:var(--ink);border-color:var(--ember-line)}
.btn--ember:hover{border-color:var(--ember)}
.btn--lg{padding:17px 30px;font-size:1.05rem}
.btn--block{display:flex;width:100%}

/* ---- 3. HERO: a bottle banner across the top ------------------------------
   The banner is full-bleed graphite: eyebrow, H1 and the CTA pair on the
   left, the bottle standing free on the right with a warm rim glow and no
   card behind it -- the vendor shot ships with a transparent background, so
   it can stand directly on the page.

   The Quick Answer card then OVERLAPS the banner's lower edge. The hero is
   therefore genuinely stacked, and hero_sticky.py correctly skips it: there
   is no taller copy sibling for a sticky product column to travel against.
   The H1 sits inside the banner precisely so it is above the fold at
   1440x900 (pitfall 86, where a stacked hero buried it at y=796). */
.hero{position:relative;overflow-x:clip;overflow-y:visible;color:var(--on-dark);
  background:var(--paper)}
.hero__banner{position:relative;padding-block:38px 96px;
  border-bottom:1px solid var(--accent-edge)}
.hero__banner-in{max-width:var(--banner);margin-inline:auto;padding-inline:22px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,810px);
  gap:30px;align-items:center;position:relative;z-index:2}
.hero__lede{position:relative;z-index:3}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--accent-tint);
  border:1px solid var(--accent-edge);color:var(--accent-on);font-weight:700;
  font-size:.8438rem;padding:7px 16px;border-radius:999px;letter-spacing:.06em;
  text-transform:uppercase}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.hero h1{font-size:clamp(2rem,3.7vw,3.05rem);margin:16px 0 0;font-weight:800;
  line-height:1.08;letter-spacing:-.032em;color:var(--ink)}
.hero h1 span{color:var(--accent-on)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0}
.hero__media{position:relative;display:flex;align-items:center;justify-content:center}
.hero__stick{position:relative;display:block;width:100%}
.hero__card{position:relative;text-align:center;padding:0}
.hero__card::after{content:"";position:absolute;left:50%;top:50%;width:46%;
  aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;
  background:radial-gradient(closest-side,var(--accent-glow),transparent 70%)}
.hero__card img{margin-inline:auto;max-width:100%;position:relative;z-index:3;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.hero__tag{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);z-index:4;
  background:var(--panel);color:var(--ink-soft);font-size:.9063rem;font-weight:700;
  letter-spacing:.06em;padding:7px 16px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line)}

/* The overlap zone. The grid is deliberately ONE column: the banner above it
   already carries the split, and a second two-column hero grid would make
   hero_sticky.py treat this as a side-by-side hero and pin the banner open
   to a full screen. */
.hero__grid{display:grid;grid-template-columns:1fr;position:relative;z-index:3;
  padding-block:0 52px}
.hero__copy{display:block}
.hero .answer{margin-top:-64px}
.ticks{margin:26px 0 0;display:grid;gap:10px;max-width:var(--measure-wide)}
.ticks li{display:flex;gap:12px;align-items:flex-start;font-size:.9688rem;
  color:var(--ink-soft)}
.ck{flex:none;width:22px;height:22px;border-radius:var(--r-s);background:var(--accent-deep);
  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:20px 0 0;
  font-size:.9063rem;color:var(--faint)}
.pay img{width:214px;height:28px;object-fit:contain}
.hero__sub{margin:18px 0 0;font-size:.9688rem;color:var(--muted)}
.factpills{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.factpills li{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:.9063rem;color:var(--muted)}
.factpills li b{color:var(--ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin:20px 0 0;max-width:640px}
.figures div{background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-s);padding:14px 16px}
.figures b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:800;
  color:var(--ink);line-height:1}
.figures span{display:block;margin-top:6px;font-size:.9063rem;color:var(--faint)}
.floaty{position:absolute;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 15px;box-shadow:var(--shadow-lg);
  font-family:var(--display);font-size:1rem;font-weight:700;color:var(--ink);z-index:5;
  line-height:1.15;display:flex;align-items:center;gap:10px}
.floaty small{display:block;color:var(--accent-on);font-family:var(--sans);
  font-size:.9063rem;font-weight:700;margin-top:3px}
.floaty--tl{top:16px;left:0}
.floaty--br{bottom:24px;right:0}

/* ---- 4. QUICK ANSWER (AEO): a bone card with an accent edge --------------
   The Quick Answer is bone on BOTH grounds -- it is the one component that
   does not follow its section -- so it re-points its own tokens rather than
   carrying literal colours. On the home page it overlaps the banner's lower
   edge, which is why it is a card with a shadow rather than a tint band. */
.answer{background:var(--bone-card);border-left:5px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;box-shadow:var(--shadow);padding:22px 26px;
  margin:22px 0 0;max-width:var(--measure-wide);
  --ink:#14181d;--ink-soft:#2a3038;--muted:#4a5159;--faint:#5c636b;
  --accent-on:#b33a12;color:var(--muted)}
.answer .qtag{display:block;font-family:var(--sans);font-weight:800;font-size:.8438rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on);margin-bottom:.5em}
.answer p{margin:0;font-size:1.0625rem;color:var(--ink-soft)}
.answer a{color:var(--accent-on)}
.hero .answer p{font-size:1.1rem;line-height:1.66}

/* ---- 5. TRUST ROW -------------------------------------------------------- */
.trust{background:var(--paper-tint);border-block: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:22px}
.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 shed and the hero's phone stacking decide the first paint, so they
   sit above the critical marker and are inlined into every page head. */
@media(max-width:1400px){.menu a{padding-inline:12px;font-size:.875rem}
  .nav__lot{padding-inline:11px;font-size:.8438rem}}
@media(max-width:1280px){.nav__lot{display:none}}
@media(max-width:1180px){
  .burger{display:block}
  .navmenus{display:none;position:absolute;top:calc(100% + 12px);left:0;right:0;
    flex-direction:column;align-items:stretch;background:var(--panel);
    border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;
    box-shadow:var(--shadow);max-height:76vh;overflow-y:auto;z-index:20}
  .navmenus.open{display:flex}
  .nav__track{flex-direction:column;border:0;border-radius:0;background:transparent;
    padding:6px 0 10px;overflow:visible}
  .menu{flex-direction:column;align-items:stretch}
  .menu li+li{border-left:0}
  .menu a{display:block;padding:13px 22px;border-radius:0;font-size:1rem;
    border-bottom:1px solid var(--line-soft)}
  .nav__lot{display:flex;margin:10px 22px 0;justify-content:center}
  .nav__row .brand{margin-right:auto}
}
@media(max-width:1024px){
  .hero__banner-in{grid-template-columns:1fr;gap:16px;text-align:left}
  .hero__banner{padding-block:26px 84px}
  .hero__media{order:2}
  .hero__cta{order:3}
  /* display:contents promotes the lede's children to grid items so the phone
     order can be set one by one. DOM order is untouched: the Quick Answer
     still follows the H1 for parsers and for the speakable selector. */
  .hero__lede{display:contents}
  .hero__lede>.eyebrow{order:0;justify-self:start}
  .hero__lede>.pill{order:0;justify-self:start}
  .hero__lede>h1{order:1}
  .hero__lede>.hero__cta{order:3}
  .hero__card img{max-width:520px;margin-inline:auto}
  .floaty{display:none}
}
@media(max-width:700px){
  .hero h1{font-size:2rem}
  .hero__card img{max-width:400px}
  .hero .answer{margin-top:-52px}
  .figures{grid-template-columns:1fr}
}
@media(max-width:480px){
  .nav__cta .btn{padding:11px 14px;font-size:.9rem}
  .brand__firm{display:none}
  .hero__card img{max-width:330px}
}
@media(max-width:430px){.nav__cta .btn{display:none}}


/* ---- hero motif -- tide-lift ---------------------------------------- */
.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(182deg,#55261c,#0f1216 62%,#0f1216)}.hero__media::before{content:'';position:absolute;left:50%;bottom:-6%;width:150%;height:62%;translate:-50% 0;background:radial-gradient(120% 100% at 50% 100%,rgba(234,81,40,0.38),transparent 70%);animation:xtLift 11s ease-in-out infinite;z-index:1;pointer-events:none}.hero__media::after{content:'';position:absolute;left:50%;bottom:18%;width:132%;height:2px;translate:-50% 0;background:linear-gradient(90deg,transparent,rgba(234,81,40,0.55),transparent);animation:xtLine 11s ease-in-out infinite;z-index:1;pointer-events:none}@keyframes xtLift{0%,100%{transform:translateY(6%);opacity:.55}50%{transform:translateY(-4%);opacity:.95}}@keyframes xtLine{0%,100%{transform:translateY(14%);opacity:.25}50%{transform:translateY(-10%);opacity:.7}}
@media(prefers-reduced-motion:reduce){.hero__card,.hero__media::before,.hero__media::after{animation:none!important}}

/* ---- hero stage: what the product is FOR, moving around the bottle ----
   The motif above paints the GROUND. This paints the air around the product:
   a warm updraught rising off the bottle and a field of embers carried up
   through it, for a capsule whose whole subject is metabolic rate. Both
   layers hang off .hero__stick, which has no pseudo-elements of its own --
   .hero__media's two belong to hero_motifs.py and .hero__card::after is the
   glow disc. Nothing here sets position on .hero__media and nothing makes an
   ancestor a scroll container, because either one silently kills a sticky
   product column (pitfall 65).
   Transform and opacity only, so it composites on the GPU and never
   triggers layout. Both layers are pointer-events:none and sit under the
   bottle's own z-index:3. */
.hero__stick{isolation:isolate}
.hero__stick::before{content:"";position:absolute;left:50%;bottom:2%;width:64%;
  height:92%;translate:-50% 0;z-index:0;pointer-events:none;
  border-radius:50% 50% 44% 44%/62% 62% 38% 38%;
  background:radial-gradient(62% 74% at 50% 100%,var(--accent),transparent 72%);
  filter:blur(20px);opacity:.2;animation:xtUpdraught 9s ease-in-out infinite}
.hero__stick::after{content:"";position:absolute;inset:-4% 2% 0;z-index:1;
  pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,var(--accent) 1.7px,transparent 2.2px),
    radial-gradient(circle,var(--ember) 1.2px,transparent 1.7px);
  background-size:128px 172px,94px 136px;background-position:0 0,46px 62px;
  -webkit-mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.55) 46%,transparent 88%);
  mask-image:linear-gradient(to top,#000 4%,rgba(0,0,0,.55) 46%,transparent 88%);
  animation:xtEmbers 19s linear infinite}
/* The float goes on the CARD, never on the <img>. The image is the LCP
   element and is preloaded, and hero_motifs.py states the rule in its own
   docstring: motion belongs on the card and the media column. The glow disc
   is .hero__card::after, so it travels with the bottle, which is what a
   shadow and a glow would actually do. */
.hero__card{animation:xtBottleRise 8s ease-in-out infinite}
@keyframes xtUpdraught{0%,100%{transform:translateY(5%) scaleY(.94);opacity:.14}
  50%{transform:translateY(-4%) scaleY(1.06);opacity:.3}}
@keyframes xtEmbers{to{background-position:0 -344px,46px -274px}}
@keyframes xtBottleRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){
  .hero__stick::before,.hero__stick::after,.hero__card{animation:none!important}}

/* --- .util topline ------------------------------------------------------
   Role, lot, dose, guarantee and the order phone, above the header. This site
   shipped without it and had pushed the lot into the nav as a chip, which
   crowded the menu and still left the other four facts off the page.
   Coloured for this site's dark ground rather than copied from a light
   sister. */
.util{background:var(--dark-2);color:var(--ink-soft);font-size:.91rem;
  border-bottom:1px solid var(--line)}
.util__row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;
  padding-block:8px}
.util__item{white-space:nowrap;padding-inline:16px;
  border-left:1px solid var(--line)}
.util__item:first-child{padding-left:0;border-left:0}
.util__item b{color:var(--ink);font-weight:700}
.util__tel{margin-left:auto;color:var(--ink);font-weight:700;
  white-space:nowrap;padding-left:16px}
@media(max-width:920px){
  .util__item:nth-child(3),.util__item:nth-child(4){display:none}
}
@media(max-width:430px){.util__item:nth-child(2){display:none}}

/*!SITE-HOME-CRIT-START*/
/* ---- home page: the pack label becomes a tab on the card's top edge -------
   The label leaves the flow (its paint is in the SITE-HOME-PAINT block at the
   end of this file). The head then reserves exactly what the label used to
   occupy in flow -- 16px of padding + a 31px label + its 8px margin = 55px --
   so every head stays 150px tall and the three Add To Cart buttons keep the
   single baseline .buy__body was engineered around. Measured before and after.

   This is the ONLY geometry this pass changes, and it is above the critical
   marker because that block is inlined into every page at build time; a
   restamp alone would leave the old copy in ~34 heads.

   Scoped with body:has(.hero) because .buy__card is also on pricing.html and
   this pass is the home page only. Where :has is unsupported the rule simply
   drops and the label stays in flow, which is today's layout. */
body:has(.hero) .buy__head{padding-top:55px}
body:has(.hero) .buy__flag{position:absolute;top:0;left:0;margin-bottom:0;padding:7px 16px}
/*!SITE-HOME-CRIT-END*/

/*!CRITICAL-END*/

/* ---- 6. SECTIONS AND THE TWO GROUNDS ------------------------------------- */
.sec{padding-block:72px}
.sec--tight{padding-block:40px}
.sec--slab{background:var(--paper-tint)}
.sec--center .sec__head{text-align:center;margin-inline:auto}

/* The bone panel. Every token a component reads is re-pointed here, so the
   components themselves need no bone variant. */
.sec--bone{
  background:var(--bone);
  --ink:#14181d;
  --ink-soft:#2a3038;
  --muted:#4a5159;
  --faint:#5c636b;
  --line:#ddd5c6;
  --line-soft:#eae3d7;
  --panel:#fbf9f5;
  --panel-2:#f0eade;
  --accent-on:#b33a12;
  --accent-tint:#fbeae3;
  --accent-edge:#eccbb9;
  --ember-on:#8a5411;
  --ember-soft:#fdf2df;
  --ember-line:#e8d0a4;
  --shadow:0 14px 34px rgba(26,20,14,.10);
  --shadow-sm:0 3px 12px rgba(26,20,14,.07);
  --shadow-lg:0 26px 56px rgba(26,20,14,.16);
  color:var(--muted);
}

.sec__head{max-width:var(--measure-wide);margin-bottom:34px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.8438rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-on);margin-bottom:10px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--accent)}
.sec h2{font-size:clamp(1.6rem,2.9vw,2.2rem);margin-bottom:12px}
.sec h3{font-size:1.16rem;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,.sec>.wrap>.preclist{
  max-width:var(--measure-wide);margin-inline:auto}
.sec>.wrap>h1{max-width:var(--measure);margin-inline:auto;
  font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:800;letter-spacing:-.03em}
.sec>.wrap>.eyebrow{display:flex;max-width:var(--measure);margin-inline:auto}
.sec ul li{position:relative}
.sec>.wrap>ul>li,.preclist li{padding-left:24px;margin-bottom:.5em}
.sec>.wrap>ul>li::before,.preclist li::before{content:"";position:absolute;left:2px;
  top:.66em;width:8px;height:2px;background:var(--accent)}
.preclist li{position:relative;font-size:1.0625rem}
.sec ol{counter-reset:n;display:grid;gap:11px}
.sec>.wrap>ol>li{position:relative;padding-left:38px;counter-increment:n}
.sec>.wrap>ol>li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;
  top:1px;width:28px;height:26px;color:var(--accent-on);font-size:1.062rem;
  font-weight:800;display:flex;align-items:center;font-family:var(--display)}
.dropcap::first-letter{float:left;font-family:var(--display);font-size:3.4rem;
  line-height:.86;font-weight:800;color:var(--accent-on);padding:8px 14px 0 0}

.pullquote{border-left:3px solid var(--accent);padding:8px 0 8px 22px;margin:26px auto}
.pullquote p{font-family:var(--display);font-size:1.24rem;font-weight:700;color:var(--ink);
  line-height:1.44}
.pullquote cite{display:block;margin-top:9px;font-style:normal;font-size:.8438rem;
  color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-weight:700}

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

/* ---- 7. 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:var(--panel);border:1px solid var(--line);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-edge)}
.card h3{font-size:1.12rem}
.card p{font-size:1.0625rem;color:var(--muted)}
.card p+p{margin-top:.8em}

.steps{display:grid;gap:14px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--line);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:var(--r-s);
  background:var(--accent-deep);color:#fff;display:flex;align-items:center;
  justify-content:center;font-family:var(--display);font-weight:800;font-size:.95rem}
.step__n::before{content:counter(s,decimal-leading-zero)}
.step h3{font-size:1.1rem}
.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:.9688rem}
.chips .ck{background:var(--ember-soft);color:var(--ember-on);border:1px solid var(--ember-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(--ember-soft);border-left:5px solid var(--ember);
  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(--ember-soft);color:var(--ember-on);font-size:.8438rem;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;
  border-radius:999px;border:1px solid var(--ember-line)}

/* ---- 8. TABLES ----------------------------------------------------------- */
.tablewrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);margin:22px auto}
table.dtable{width:100%;border-collapse:collapse;font-size:1rem;min-width:520px}
.dtable caption{text-align:left;padding:16px 20px 0;font-family:var(--display);
  font-weight:700;color:var(--ink);font-size:1.02rem}
.dtable th,.dtable td{padding:12px 20px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);color:var(--muted)}
.dtable thead th{background:var(--paper-deep);color:var(--on-dark);
  font-size:.9063rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  font-family:var(--sans)}
.dtable tbody tr:nth-child(even) td{background:var(--panel-2)}
.dtable tbody tr:last-child td{border-bottom:0}
.dtable td b,.dtable th b{color:var(--ink)}
.dtable tbody th{font-weight:700;color:var(--ink-soft)}

/* ---- 9. SPLIT AND SHOTS -------------------------------------------------- */
.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)}

.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:8px}
.shots--wide{grid-template-columns:repeat(3,minmax(0,1fr))}
.shots figure{background:var(--panel);border:1px solid var(--line);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.04rem;
  color:var(--ink);margin-bottom:6px}

/* ---- 10. PROMO / STATS / BADGEWALL --------------------------------------- */
.promo{background:var(--paper-deep);border:1px solid var(--accent-edge);
  border-radius:var(--r-l);padding:32px 36px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  --ink:#ffffff;--ink-soft:#ffffff;--muted:#c9c2b6;--faint:#a8a196;
  --panel:#1a1f27;--line:#2a323d;--accent-on:#ff7f52;color:var(--muted)}
.promo p{margin:0}
.stats{background:var(--paper-deep);border:1px solid var(--accent-edge);
  border-radius:var(--r-l);padding:34px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;text-align:center;
  --ink:#ffffff;--faint:#a8a196;--muted:#c9c2b6;color:var(--muted)}
.stats b{display:block;font-family:var(--display);font-size:2.1rem;font-weight:800;
  color:var(--ink);line-height:1}
.stats span{display:block;margin-top:8px;font-size:.9063rem;color:var(--faint)}
.badgewall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.badgewall figure{background:var(--panel);border:1px solid var(--line);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)}

/* ---- 11. WHY / WHOFOR ---------------------------------------------------- */
.whygrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.whycard{background:var(--panel);border:1px solid var(--line);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:3px;
  background:linear-gradient(90deg,var(--accent),var(--ember))}
.whycard h3{font-size:1.1rem}
.whycard p{font-size:1.0625rem;color:var(--muted)}
.whofor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.forlist{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.forlist h3{font-size:1.1rem;margin-bottom:12px}
.forlist li{display:flex;gap:10px;font-size:1.0625rem;margin-bottom:9px}
.forlist li::before{content:"";flex:none;width:8px;height:2px;margin-top:.86em;
  background:var(--accent)}
.forlist--no li::before{background:var(--ember-on)}

/* ---- 12. THE LABEL PANEL ------------------------------------------------- */
.ing{display:grid;gap:22px}
.ingcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;box-shadow:var(--shadow-sm);position:relative}
.ingcard h3{font-size:1.2rem;margin-bottom:4px}
.ingcard .ingsub{font-size:0.9062rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-on);font-weight:800;margin-bottom:12px;display:block}
.ingcard p{font-size:1.0625rem}
.ingcard p+p{margin-top:.85em}
.ing__dose{font-weight:700;color:var(--ink);white-space:nowrap}
.facts{background:var(--panel);border:2px solid var(--accent);border-radius:var(--r-s);
  overflow:hidden;max-width:640px;margin-inline:auto}
.facts__h{background:var(--accent-deep);color:#fff;padding:14px 22px;
  font-family:var(--display);font-size:1.1rem;font-weight:800}
.facts__serve{padding:12px 22px 0;font-size:.9688rem;color:var(--muted)}
.facts__foot{padding:12px 22px 18px;font-size:.9063rem;color:var(--faint)}
.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;color:var(--muted)}
.facttab thead th{font-size:.9063rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-family:var(--sans)}
.facttab tbody th{font-weight:600;color:var(--ink-soft);font-size:1rem}
.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}

/* ---- 13. QA RECORD SHEET ------------------------------------------------- */
.qa{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;max-width:920px;margin-inline:auto}
.qa__h{background:var(--paper-deep);color:var(--on-dark);padding:16px 24px;
  font-family:var(--display);font-weight:700;font-size:1.04rem}
.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:.08em;
  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}

/* ---- 14. ADD-TO-CART PANEL ------------------------------------------------
   Three pack cards sharing one image slot and one button baseline. There is
   no struck comparison price anywhere in here, because the seller prints
   none (data.py, NO_WAS_NOTE). The featured pack is raised on desktop with a
   negative margin rather than a transform: the rise-on-entry pass sets
   transform:none on a revealed card and would cancel a translate. */
.buy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-top:8px}
.buy__card{background:var(--panel);border:2px solid var(--line);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  text-align:center}
.buy__card--feature{border-color:var(--accent);box-shadow:var(--shadow-lg);margin-top:-12px}
.buy__head{background:var(--paper-deep);padding:16px 18px 14px;position:relative;
  --ink:#ffffff;--muted:#c9c2b6}
.buy__card--feature .buy__head{background:var(--accent-deep)}
.buy__flag{display:inline-block;background:var(--ember-soft);color:var(--ember-on);
  font-size:.8438rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 12px;border-radius:999px;margin-bottom:8px;border:1px solid var(--ember-line)}
.buy__card--feature .buy__flag{background:rgba(0,0,0,.28);color:#fff;
  border-color:rgba(255,255,255,.4)}
.sec .buy__name{color:var(--ink);font-size:1.5rem;font-weight:800;margin:0;
  letter-spacing:-.02em}
.buy__supply{color:var(--muted);font-size:.9063rem;font-weight:700;margin-top:4px;min-height:3.3em}
.buy__body{padding:18px 22px 22px;display:flex;flex-direction:column;flex:1}
/* One box for every pack shot: the six-bottle image is 1.96:1 where the
   two-bottle one is 1.5:1, and at a shared width it sat half as tall. */
.buy__img{display:block;width:100%;max-width:240px;height:170px;object-fit:contain;
  margin:0 auto 10px}
.buy__price{font-family:var(--display);font-size:2.9rem;font-weight:800;color:var(--ink);
  line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:2px}
.buy__cur{font-size:1.3rem;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.18rem}
.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-on);
  font-size:1.062rem;font-weight:800;display:flex;align-items:center;justify-content:center}
/* Pack-card alignment, fixed by measurement 18 Sep 2026. Two separate
   causes, both invisible to every automated check:
   1. The Add To Cart button is NOT the last element in a card -- payment
      art and a note follow it -- so `margin-top:auto` absorbed whatever
      space those trailing blocks left over, which differs per card. The
      buttons landed on three different baselines. The body now packs from
      the top, and min-height keeps a two-line label level with a one-line
      one.
   2. The supply line wraps to two lines on the larger packs at some widths,
      which pushed the whole card body down on those cards only. It now
      reserves two lines at every width.
   pack_cards.py is the tool that should guarantee this and cannot: its
   matcher is `\bcard`, which cannot match `buy__card`, because an
   underscore is a word character. */
.buy__add{font-size:.98rem;padding-block:15px;margin-top:14px;min-height:73px;display:flex;align-items:center;justify-content:center}
.buy__cart{flex:none}
.buy__pay{display:block;width:180px;height:auto;margin:12px auto 0;opacity:.85}
.buy__why{font-size:.9375rem;color:var(--faint);text-align:left;margin-top:14px;
  padding-top:12px;border-top:1px dashed var(--line)}
.buy__foot{max-width:var(--measure-wide);margin:26px auto 0;text-align:center}
.guarantee{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);gap:34px;
  align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-l);padding:32px;box-shadow:var(--shadow-sm)}
.guarantee img{margin-inline:auto}
.guarantee h3{font-size:1.34rem;margin-bottom:12px}

/* ---- 15. REVIEWS --------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-sm)}
.tcard .stars,.rev__stars{color:var(--ember-on);letter-spacing:1px;font-size:1rem}
.tcard b{display:block;margin-top:8px;font-family:var(--display);font-size:1.02rem;
  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(--line-soft);border-radius:5px;overflow:hidden}
.bar__f{display:block;height:100%;background:var(--accent);border-radius:5px}
.dist{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;
  align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:28px;box-shadow:var(--shadow-sm)}
.bigscore{font-family:var(--display);font-size:2.6rem;font-weight:800;color:var(--ink);
  line-height:1}
.bigscore small{font-size:1rem;color:var(--faint);font-weight:700}
.hero__rating{display:flex;align-items:center;gap:9px;margin:16px 0 0;
  font-size:.9688rem;color:var(--faint);flex-wrap:wrap}
.hero__rating b{color:var(--ink-soft)}

/* ---- 16. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:10px;text-align:left}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden}
.faq details[open]{border-color:var(--accent-edge)}
.faq summary{padding:17px 22px;font-family:var(--display);font-weight:700;
  color:var(--ink);cursor:pointer;font-size:1.02rem;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:var(--r-s);
  background:var(--accent-tint);color:var(--accent-on);font-size:1.2rem;
  display:flex;align-items:center;justify-content:center}
.faq details[open] summary::after{content:"\2013";background:var(--accent-deep);color:#fff}
.faq__b{padding:0 22px 18px;font-size:1.0625rem}
.faq__b p+p{margin-top:.8em}

/* ---- 17. REFS, BYLINE ---------------------------------------------------- */
.refs{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-sm)}
.refs h2{font-size:1.16rem;margin-bottom:12px}
.refs ol{counter-reset:r;display:grid;gap:9px}
.refs li{counter-increment:r;position:relative;padding-left:32px;font-size:1.062rem;
  color:var(--muted);line-height:1.6}
.refs li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;
  font-weight:800;color:var(--accent-on);font-family:var(--display);font-size:1.062rem}
.refs a{word-break:break-word}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;box-shadow:var(--shadow-sm);margin:26px auto 0}
.byline img{border-radius:var(--r-s);flex:none}
.byline svg{width:64px;height:64px;flex:none}
.byline b{font-family:var(--display);font-size:1.04rem;color:var(--ink);display:block;
  margin-bottom:7px}
.byline p{font-size:.9688rem;color:var(--muted)}

/* ---- 18. FORMS ----------------------------------------------------------- */
.form{display:grid;gap:22px;grid-template-columns:repeat(2,minmax(0,1fr))}
.formcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow-sm)}
.formcard h3{font-size:1.12rem;margin-bottom:6px}
.formcard label{display:block;font-size:.9063rem;font-weight:700;color:var(--ink-soft);
  margin:14px 0 5px}
/* 16px minimum, or iOS Safari zooms the page on focus and never zooms back
   (pitfall 86). */
.formcard input,.formcard textarea,.formcard select{width:100%;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-s);font-family:var(--sans);
  font-size:1rem;color:var(--ink);background:var(--paper-tint)}
.formcard textarea{min-height:120px;resize:vertical}
.formcard .btn{margin-top:18px}

/* ---- 19. FINAL CTA / RELATED --------------------------------------------- */
.final{background:var(--paper-deep);border:1px solid var(--accent-edge);
  border-radius:var(--r-l);padding:40px 42px;position:relative;overflow:hidden;
  --ink:#ffffff;--ink-soft:#ffffff;--muted:#c9c2b6;--faint:#a8a196;
  --accent-on:#ff9a72;color:var(--muted)}
.final::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;border:2px solid var(--accent-edge)}
.final h2{color:var(--ink);font-size:clamp(1.5rem,2.9vw,2.1rem);margin-bottom:12px}
.final--media{display:grid;grid-template-columns:320px 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,.6))}
.final__body{position:relative;z-index:2}
.final__price{font-family:var(--display);font-size:1.2rem;font-weight:700;color:var(--ink);
  margin:14px 0 18px}
.final p,.article .final p,.sec--bone .final p{color:var(--muted)}
.final__price,.article .final .final__price,.sec--bone .final .final__price{color:var(--ink)}
.final a:not(.btn),.sec--bone .final a:not(.btn){color:var(--accent-on);
  text-decoration:underline}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;text-align:left}
.rel a{background:var(--panel);border:1px solid var(--line);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.04rem;color:var(--ink);
  margin-bottom:6px}
.rel span{font-size:.9688rem;color:var(--muted)}

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

/* ---- 21. FOOTER: a dark slab, the site map set as a numbered index --------
   Three RAGGED columns of nine, six and twelve entries, numbered 01 to 27
   straight through so the columns end at three different depths. The numbers
   are literal text rather than CSS counters: a counter does not follow an
   <ol start> attribute, and an index whose numbers restart in every column
   is not an index. */
.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:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow-sm)}
.fdesk__card b{display:block;font-family:var(--display);font-size:1rem;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(--paper-deep);color:var(--muted);padding-block:46px 24px;
  font-size:.9375rem;border-top:3px solid var(--accent)}
footer a{color:var(--ink-soft)}
footer a:hover{color:var(--accent-on)}
.fhead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 34px;
  align-items:start;padding-bottom:28px;border-bottom:1px solid var(--line)}
.fbrand{font-family:var(--display);font-size:1.7rem;font-weight:800;color:var(--ink);
  letter-spacing:-.03em;grid-column:1}
.fbrand span{color:var(--accent-on)}
.fhead p{grid-column:1;font-size:1.062rem;line-height:1.6}
.fbadges{display:flex;flex-wrap:wrap;gap:10px;grid-column:2;grid-row:1 / span 2;
  justify-content:flex-end;align-content:start}
.fbadges img{background:var(--panel);border:1px solid var(--line);border-radius:50%;
  padding:3px}
.findex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 34px;
  padding-block:30px;border-bottom:1px solid var(--line);align-items:start}
.findex h4{color:var(--accent-on);font-family:var(--sans);font-size:.8438rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.findex ol{display:grid;gap:2px}
.findex li{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;
  font-size:1.062rem;line-height:1.5}
.findex__n{font-family:var(--display);font-size:.75rem;font-weight:700;color:var(--faint)}
/* The anchor takes the padding and gives the space straight back as margin,
   so the tap target grows to ~33px and the rendered footer does not move. */
footer li a{display:inline-block;padding-block:4px;margin-block:-4px}
.fnap{padding-block:24px;border-bottom:1px solid var(--line);font-size:.9375rem;
  line-height:1.75}
.fnap strong{color:var(--ink)}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:20px;
  font-size:.9063rem}
.fpay img{background:var(--panel);border-radius:var(--r-s);padding:5px 8px}
.disc{padding-top:18px;font-size:.9063rem;line-height:1.68;color:var(--faint)}
.disc p{margin-bottom:.9em}
.disc b{color:var(--ink-soft)}
.disc .copy{margin-top:16px}

/* ---- 22. BUY BAR --------------------------------------------------------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:950;background:var(--paper-deep);
  transform:translateY(110%);transition:transform .3s ease;
  border-top:2px solid var(--accent);--ink:#ffffff;--muted:#c9c2b6;color:var(--muted)}
.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:var(--ink)}
.buybar .from{color:var(--accent-on)}
.buybar .btn{padding:10px 20px}

/* ---- 23. BLOG ------------------------------------------------------------ */
.article{max-width:780px;margin-inline:auto}
.article h1{font-size:clamp(1.85rem,3.6vw,2.6rem);margin-bottom:14px;font-weight:800}
.article h2{font-size:1.5rem;margin:1.9em 0 .6em;scroll-margin-top:118px}
.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:"";position:absolute;left:3px;top:.66em;width:8px;height:2px;
  background:var(--accent)}
.article ol{counter-reset:ai}
.article ol li{position:relative;padding-left:32px;margin-bottom:8px;counter-increment:ai}
.article ol li::before{content:counter(ai,decimal-leading-zero);position:absolute;left:0;
  color:var(--accent-on);font-weight:800;font-family:var(--display);font-size:1.062rem}
.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);margin-inline:auto}
.article figcaption{font-size:.9375rem;color:var(--faint);margin-top:9px;
  border-left:3px solid var(--ember);padding-inline-start:12px}
.postmeta{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:.9063rem;color:var(--faint);
  padding-block:12px;border-block:1px solid var(--line);margin-bottom:26px}
.postmeta b{color:var(--ink-soft)}
.postmeta .sep{color:var(--line)}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 24px;margin-bottom:26px;box-shadow:var(--shadow-sm)}
.toc h2{font-size:.8438rem;letter-spacing:.2em;text-transform:uppercase;
  font-family:var(--sans);color:var(--accent-on);margin:0 0 10px}
.toc ol{counter-reset:t;display:grid;gap:6px}
.toc li{counter-increment:t;position:relative;padding-left:30px;font-size:1.062rem}
.toc li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;
  color:var(--faint);font-weight:700;font-family:var(--display);font-size:1.062rem}
.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:.2em;
  text-transform:uppercase;color:var(--accent-on);margin-bottom:10px}
.keypoints li b{color:var(--ink)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.posts article{background:var(--panel);border:1px solid var(--line);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.1rem;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:.06em;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.5rem;line-height:1.24;margin-top:0}
@media(max-width:760px){
  .article .final--media{grid-template-columns:1fr;gap:16px;padding:24px 22px;
    text-align:center}
  .article .final--media .final__img img{max-width:128px;margin-inline:auto}
  .article .final--media h2{font-size:1.3rem}
  .article .final--media .btn{width:100%}
}
.article .refs{margin-top:2em}
.article .refs h2{margin-top:0}

/* ---- 24. MOTION: rise on entry ------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(18px)}
[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}
}

/* ---- 25. 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,.sec>.wrap>.preclist{
    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))}
  .findex{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:260px}
}
@media(max-width:700px){
  .sec{padding-block:52px}
  .g2,.g3,.g4,.whygrid,.whofor,.tgrid,.rel,.posts,.shots,.shots--wide,
  .badgewall,.fdesk__grid,.findex,.fhead{grid-template-columns:1fr}
  .fbadges{grid-column:1;grid-row:auto;justify-content:flex-start}
  .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}
  .answer{padding:18px 20px}
}
/* Tap target: a button on a phone must be reachable with a thumb (44px). */
@media(max-width:600px){.btn{min-height:44px}}

/* ---- --navh publisher note ------------------------------------------------
   site.js measures the real header height and publishes it as --navh. It is
   declared in :root above so a page that loads before the script still has a
   sane value, and so validate.py sees every token declared. */

/* --- hero: give the copy its share back ---------------------------------
   `.hero__banner-in` split the hero 536px of copy against 810px of product,
   so the image took 60% of the row and the H1 wrapped to SEVEN lines at
   1600px -- the most in the estate, where the range is four to six. The
   headline, not the photograph, is what the first screen is for.

   Rebalanced to give the copy the larger share. The bottle keeps a 560px
   column, which is still wider than the 454-488px the two-column sites use. */
@media(min-width:1000px){
  .hero__banner-in{grid-template-columns:minmax(0,1fr) minmax(300px,560px)}
}
/* The lot code now rides in the topline strip above the header, where the
   rest of the estate keeps it, so the nav chip is redundant clutter. */
.nav__lot{display:none}

/* ==== 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}
.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*/
/* ==== ExiTide home page: modern surface + the rise motif ===================
   Slot: motif family "rise", 16px cards, 10px controls, one deep very
   diffuse ambient stop, and the pack label as a tab on the card's top edge.

   PAINT ONLY. Every declaration below is border-radius, box-shadow,
   background, colour, transform, transition, animation or outline, so it
   moves no box and belongs under the critical marker. The one geometry
   change this pass needed -- the head padding that holds the pack-card
   baselines while the label is lifted out of the flow -- is above the
   marker in the SITE-HOME-CRIT block.

   Scope: body:has(.hero). class="hero" is on index.html and on no other page
   of this site, while .btn, .answer, .buy__card, #pricing, the header and
   the footer are on all of them. The scope also buys the specificity this
   block needs: modern_surface.py and footer_type.py re-append their own
   blocks AFTER this one on every build, so a bare .card or .answer here
   would silently lose. Nothing below depends on source order.

   Depth is tinted with this site's own ink, never neutral black, and it is
   re-pointed wherever the surface underneath turns bone -- a 244,239,230
   shadow on a #f2ede5 ground is invisible, which is how a "modern" pass
   leaves half a page flat while every check still reads green. */

body:has(.hero){
  --xt-amb:0 22px 60px rgba(244,239,230,.10);
  --xt-amb-lift:0 30px 78px rgba(244,239,230,.17);
  --xt-key:0 18px 50px rgba(234,81,40,.30);
  --xt-key-lift:0 26px 68px rgba(234,81,40,.42);
}
body:has(.hero) .sec--bone,
body:has(.hero) .answer{
  --xt-amb:0 22px 60px rgba(26,20,14,.14);
  --xt-amb-lift:0 30px 78px rgba(26,20,14,.22);
  --xt-key:0 18px 50px rgba(200,57,15,.26);
  --xt-key-lift:0 26px 68px rgba(200,57,15,.36);
}

/* ---- 1. Controls: 10px, and two clearly different weights ----------------
   The buying button carries a gradient and the ambient key glow; the
   secondary stays a flat outline, so the pair reads as primary + secondary
   rather than as two buttons. .btn already lifts 2px on hover -- this only
   widens the transition to cover the gradient and adds the focus ring the
   keyboard reader never had. */
body:has(.hero) .btn{
  border-radius:10px;
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,
    background-image .2s ease,color .2s ease,border-color .2s ease;
}
body:has(.hero) .btn--cta{
  background-color:var(--accent-deep);
  background-image:linear-gradient(135deg,#f4663a 0%,#e04a1d 42%,#b7350d 100%);
  border-color:transparent;
  box-shadow:var(--xt-key);
}
body:has(.hero) .btn--cta:hover{
  background-image:linear-gradient(135deg,#ff7a4f 0%,#ef5626 42%,#c73c0f 100%);
  box-shadow:var(--xt-key-lift);
}
body:has(.hero) .btn--ghost{background-image:none}
body:has(.hero) .btn--ghost:hover{box-shadow:var(--xt-amb)}
body:has(.hero) a:focus-visible,
body:has(.hero) button:focus-visible{
  outline:2px solid var(--accent-on);outline-offset:3px;border-radius:10px;
}
body:has(.hero) .ck{border-radius:8px}

/* ---- 2. Panels: 16px, one deep ambient stop, 2px on hover --------------- */
body:has(.hero) .answer{border-radius:0 16px 16px 0;box-shadow:var(--xt-amb)}
body:has(.hero) .card{border-radius:16px;box-shadow:var(--xt-amb)}
body:has(.hero) .card:hover{transform:translateY(-2px);box-shadow:var(--xt-amb-lift)}
body:has(.hero) .figures div{border-radius:14px}
body:has(.hero) .guarantee{border-radius:16px;box-shadow:var(--xt-amb)}
body:has(.hero) .final{border-radius:16px;box-shadow:var(--xt-amb)}
body:has(.hero) .buybar{box-shadow:0 -22px 60px rgba(0,0,0,.55)}

/* ---- 3. Pack cards ------------------------------------------------------
   The recommended tier keeps its margin-top:-12px rise. It is NOT converted
   to a transform: the reveal pass sets transform:none on a revealed card and
   would cancel one. The hover translate is safe because it outranks that
   rule on specificity. */
body:has(.hero) .buy__card{
  border-radius:16px;
  box-shadow:var(--xt-amb);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
body:has(.hero) .buy__card:hover{transform:translateY(-2px);box-shadow:var(--xt-amb-lift)}
body:has(.hero) .buy__card--feature{border-color:var(--accent);box-shadow:var(--xt-key)}
body:has(.hero) .buy__card--feature:hover{transform:translateY(-2px);box-shadow:var(--xt-key-lift)}
body:has(.hero) .buy__head{background-image:linear-gradient(180deg,#161d27 0%,#0a0c0f 100%)}
body:has(.hero) .buy__card--feature .buy__head{
  background-color:var(--accent-deep);
  background-image:linear-gradient(140deg,#f4663a 0%,#d2410f 52%,#8f2a08 100%);
}
/* the tab itself -- squared into the card's top-left corner, rounded away
   from it, so it reads as a tab seated on the card rather than a pill */
body:has(.hero) .buy__flag{
  border-radius:0 0 14px 0;
  border-color:transparent;
  background-color:#c8791c;
  background-image:linear-gradient(135deg,#f0a03a 0%,#c8791c 100%);
  color:#1a1205;
  box-shadow:0 10px 24px rgba(0,0,0,.34);
}
body:has(.hero) .buy__card--feature .buy__flag{
  background-color:#ffe6cf;
  background-image:linear-gradient(135deg,#fff4e8 0%,#ffd9bb 100%);
  color:#8a2f0a;
}
/* dashed separators, drawn inside the 7px the perk grid already leaves
   between rows, so no row moves */
body:has(.hero) .buy__perks li+li::after{
  content:"";position:absolute;left:0;right:0;top:-4px;height:0;
  border-top:1px dashed rgba(244,239,230,.20);pointer-events:none;
}

/* ---- 4. The hero motif: warmth rising off the base of the bottle ---------
   Slot motif family "rise". It hangs off .hero__card::before, the only free
   pseudo-element in the media column: .hero__media's two and .hero__stick's
   two belong to hero_motifs.py and .hero__card::after is the glow disc.
   It is deliberately 132% x 168% of the card, so it reads OUTSIDE the
   product rather than disappearing behind it, and it sits at z-index 0,
   under the bottle's z-index 3. Transform and opacity only; nothing here
   touches the <img>, which is the preloaded LCP element. Twenty-two
   seconds, because this is a capsule taken once a day for weeks. */
body:has(.hero) .hero__card::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;bottom:-30%;width:132%;height:168%;translate:-50% 0;
  background:
    radial-gradient(44% 34% at 50% 100%,rgba(240,160,58,.42),transparent 70%),
    radial-gradient(64% 74% at 50% 98%,rgba(234,81,40,.30),transparent 74%);
  filter:blur(24px);
  animation:xtTideWarmth 22s ease-in-out infinite;
}
@keyframes xtTideWarmth{
  0%,100%{transform:translateY(5%) scale(.95);opacity:.34}
  50%{transform:translateY(-8%) scale(1.07);opacity:.66}
}
/* and the rest of the hero slows to match. 8s and 11s read as a fidget on a
   page about a change that takes four to eight weeks. */
body:has(.hero) .hero__card{animation-duration:15s}
body:has(.hero) .hero__media::before{animation-duration:19s}
body:has(.hero) .hero__media::after{animation-duration:19s}
body:has(.hero) .hero__stick::before{animation-duration:17s}
@media(prefers-reduced-motion:reduce){
  body:has(.hero) .hero__card::before{animation:none}
}
/*!SITE-HOME-PAINT-END*/

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

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

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

/* A surface a reader can click answers the pointer. 2px
   registers without reflowing the row beside it. */
.rel a,
.posts article,
.shots figure,
.badgewall figure{transition:box-shadow .2s ease, transform .2s ease}
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{box-shadow:var(--lift);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){
.rel a:hover,
.posts article:hover,
.shots figure:hover,
.badgewall figure:hover{transform:none}
}
/* ==== end modern surface ==== */

/* ==== 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 .findex h4{font-size:15px}
footer .findex__n{font-size:15px}
footer .fnap{font-size:16px}
footer .fpay{font-size:16px}
/* ==== end footer type floor ==== */