/* ==========================================================================
   BLOCKS.CSS — the section set added 22 Sep 2026

   Section order, block anatomy and BREAKPOINTS are modelled on the Tryalmape
   funnel, which the brand asked to have rebuilt section by section. The copy,
   the palette and every claim are Featherwipes' own: their page sells an
   ingested gut supplement, so nothing below is a wording swap of theirs.

   ⚠ THE BREAKPOINTS ARE THEIRS AND THEY ARE NOT THE PROJECT'S USUAL ONES.
   This file uses 481 / 601 / 750 / 761 / 991 / 1051 / 1081 / 1351 / 1700 to
   reproduce their responsive behaviour step for step. The rest of the site
   uses 750 / 990 / 1200. Do not "tidy" these into the house set: several
   blocks change column count twice on the way up (the mission stats go
   1 -> 2 -> 1 -> 2) and collapsing the scale flattens that.

   Mobile-first throughout, like the rest of the site: the base rule is the
   phone and every query is min-width. Their sheet is written the other way
   round, max-width off a desktop base, which is why the numbers here are one
   higher than theirs in places (their 749 ceiling is this file's 750 floor).
   ========================================================================== */

/* ==========================================================================
   5. VOICES — the quote carousel
   Their §5: a 2-col slide, photograph beside the quote, rating line above,
   CTA and trust icons below. Stacked on a phone -> 2-col at 750 -> their wider
   fixed-width 2-col at 990.

   ⚠ THESE ARE NOT CUSTOMER TESTIMONIALS AND MUST NOT BE RELABELLED AS ANY.
   They are dated public forum and retail posts about the PROBLEM, quoted with
   their year, by people who have never heard of this brand. That framing is
   the only thing that makes them usable: the store has zero orders, and a
   named face with a star rating beside it is a fabricated endorsement under
   16 CFR 465. No stars, no "Verified" badge, no wording implying a purchase.
   ========================================================================== */
.voices{background:var(--bg-1);padding:28px 15px 26px;overflow:hidden}
.voices__inner{max-width:1180px;margin:0 auto;text-align:center}
.voices__eyebrow{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--accent-2);margin:0 0 12px}
.voices__heading{font-size:23px;line-height:1.16;letter-spacing:var(--ls-h2);color:var(--heading);
  font-weight:700;margin:0 auto 14px;max-width:820px}
.voices__sub{font-size:14.5px;line-height:1.5;color:var(--text-60);margin:0 auto 22px;max-width:60ch}

.voices__wrap{position:relative;margin-bottom:22px}
.voices__window{overflow:hidden}
.voices__track{display:flex;width:100%;transition:transform .45s ease;will-change:transform}
.voices__slide{min-width:100%;display:grid;grid-template-columns:1fr;gap:18px;
  align-items:center;justify-content:center;text-align:left;box-sizing:border-box}

.voices__photo{position:relative;aspect-ratio:1/1.03;border-radius:var(--media-radius);overflow:hidden;
  background:var(--surface-quiet)}
.voices__photo img{width:100%;height:100%;object-fit:cover;display:block}
/* The year sits ON the photograph, because the year IS the argument here:
   sixteen years of owners saying the same three things is the evidence that
   the category never solved this. Hide the date and these read as scraped
   noise, which was the fair objection to an earlier version of this block. */
.voices__year{position:absolute;left:12px;bottom:12px;background:rgba(19,61,38,.92);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 11px;border-radius:40px}

.voices__content{display:flex;flex-direction:column;justify-content:center;min-height:auto;padding:0 4px}
.voices__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:14px;width:100%}
.voices__source{font-size:12.5px;font-weight:600;color:var(--ink-muted);letter-spacing:.01em}
.voices__badge{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent-2);border:1px solid rgba(12,132,128,.32);border-radius:40px;padding:4px 9px;
  white-space:nowrap}
.voices__quote{font-size:14.5px;line-height:1.62;color:var(--text);margin:0 0 14px;font-style:normal}
.voices__quote p{margin:0 0 9px}
.voices__quote p:last-child{margin-bottom:0}
.voices__attr{font-size:12.5px;color:var(--ink-muted);margin:0}

.voices__arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border:none;
  background:transparent;color:var(--heading);cursor:pointer;display:none;align-items:center;
  justify-content:center;padding:0;z-index:4}
.voices__arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.voices__arrow:focus-visible{outline:2px solid var(--accent-1);outline-offset:3px;border-radius:50%}
.voices__arrow--prev{left:-24px}
.voices__arrow--next{right:-24px}

.voices__dots{display:flex;gap:7px;justify-content:center;margin-bottom:18px}
.voices__dots button{width:7px;height:7px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:var(--line-strong);transition:background .2s,width .2s}
.voices__dots button[aria-current="true"]{background:var(--heading);width:20px;border-radius:40px}

.voices__cta{width:100%;max-width:500px;margin:0 auto 16px}
.voices__icons{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--heading);padding:0;margin:0}
.voices__icons li{display:flex;align-items:center;gap:7px;list-style:none}
.voices__icons .ico{width:17px;height:17px;flex:0 0 17px;color:var(--accent-2)}

/* The honest close on the block. This admission has been recorded on this page
   as doing more persuasive work than a review wall would, so it is part of the
   section, not a disclaimer bolted under it. */
.voices__note{margin:20px auto 0;max-width:64ch;font-size:13.5px;line-height:1.6;
  color:var(--ink-muted);border-top:1px solid var(--line);padding-top:16px;text-align:left}

@media (min-width:750px){
  .voices{padding:40px 20px 52px}
  .voices__heading{font-size:26px;max-width:780px}
  .voices__sub{font-size:15px;margin-bottom:26px}
  .voices__slide{grid-template-columns:minmax(260px,1fr) minmax(260px,1fr);gap:30px}
  .voices__photo{aspect-ratio:1/1}
  .voices__content{min-height:330px}
  .voices__meta{gap:18px;margin-bottom:22px}
  .voices__arrow{display:flex}
  .voices__icons{gap:28px;font-size:13px}
  .voices__note{text-align:center}
}
@media (min-width:990px){
  .voices__heading{font-size:var(--fs-h2);max-width:820px}
  .voices__slide{grid-template-columns:minmax(320px,445px) minmax(300px,390px);gap:46px;
    justify-content:center}
  .voices__quote{font-size:15.5px}
}
@media (min-width:1101px){
  .voices__arrow--prev{left:-40px}
  .voices__arrow--next{right:-40px}
}

/* ==========================================================================
   6. ONE ROUTINE — the stat slab
   Their §6: a full-bleed coloured panel, 2-col, a 2x2 stat grid on one side
   and the argument plus CTA on the other. 1-col below 1051. The stats STAY
   2-col on a phone, which is their behaviour and the right one: four one-line
   stats in a single column is a tall thin ladder nobody reads.

   Navy rather than their green, because navy is this page's structure colour
   and this is a slab. Per the dark-section rules already set for this site:
   headings pure white, body at .78, and proof accents lift from teal to sky,
   which is the only one of the three that clears AA on #16305C.
   ========================================================================== */
.oneroutine{position:relative;background:var(--heading);color:#fff;overflow:hidden}
/* Solid forest ground. The template's texture photo (ugc-36.jpg) was never
   shipped with this funnel and 404'd, so it is gone. */
.oneroutine::before{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(19,61,38,.965),rgba(19,61,38,.982));z-index:1}
.oneroutine__inner{position:relative;z-index:2;max-width:1480px;margin:0 auto;display:grid;
  grid-template-columns:1fr;gap:38px;padding:38px 18px 42px;align-items:center}

.oneroutine__stats{display:grid;grid-template-columns:repeat(2,1fr);padding:0;margin:0}
.oneroutine__stat{min-height:auto;padding:16px 16px 16px 0;display:flex;flex-direction:column;
  justify-content:center;border-bottom:1px solid rgba(255,255,255,.16);list-style:none}
.oneroutine__stat:nth-child(odd){border-right:1px solid rgba(255,255,255,.16)}
.oneroutine__stat:nth-last-child(-n+2){border-bottom:none}
.oneroutine__num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:6px}
.oneroutine__num i{font-size:.52em;font-style:normal;font-weight:700;letter-spacing:0;
  color:var(--accent-1);margin-left:2px}
.oneroutine__lbl{font-size:13px;line-height:1.42;color:rgba(255,255,255,.78)}

.oneroutine__content{max-width:700px;width:100%;margin:0 auto}
.oneroutine__eyebrow{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-1);margin:0 0 12px}
.oneroutine__eyebrow span{width:22px;height:2px;background:var(--accent-1);border-radius:2px;
  flex:0 0 22px}
.oneroutine__heading{font-size:27px;line-height:1.14;letter-spacing:var(--ls-h2);font-weight:700;
  color:#fff;margin:0 0 14px}
.oneroutine__heading em{font-style:normal;color:var(--accent-1)}
.oneroutine__body{font-size:15px;line-height:1.62;color:rgba(255,255,255,.78);margin:0 0 20px;
  max-width:var(--measure)}
.oneroutine__body strong{color:#fff;font-weight:600}
/* ⚠ INVERTED, WHITE GROUND AND A NAVY LABEL, for the same reason the closing CTA
   is. The page's primary button is navy, and a navy button on a navy slab is
   invisible: it reads as an empty outlined box. This was shipped wrong once here
   and caught in a screenshot, not in review. Any button added to this section, or
   to any other navy ground, has to invert the same way. */
.oneroutine__button{width:100%;min-height:58px;display:flex;align-items:center;justify-content:center}
.oneroutine__button .btn{display:inline-flex;width:100%;background:#fff;color:var(--heading)}
.oneroutine__button .btn:hover{background:#fff;filter:brightness(.94)}
.oneroutine__guarantee{margin:13px 0 0;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13px;color:rgba(255,255,255,.78)}
.oneroutine__guarantee .ico{width:18px;height:18px;flex:0 0 18px;color:var(--accent-1)}

@media (min-width:750px){
  .oneroutine__inner{padding:52px 30px 56px;gap:46px;max-width:900px}
  .oneroutine__stat{min-height:130px;padding:22px 30px 22px 0}
  .oneroutine__num{font-size:40px}
  .oneroutine__lbl{font-size:13.5px}
  .oneroutine__heading{font-size:31px}
  .oneroutine__body{font-size:15.5px}
  .oneroutine__button{min-height:64px}
}
@media (min-width:1051px){
  .oneroutine__inner{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,86px);max-width:1480px;
    padding:clamp(56px,5vw,84px) clamp(30px,4vw,64px)}
  .oneroutine__stat{min-height:145px;padding:25px 34px 25px 0}
  .oneroutine__heading{font-size:34px}
  .oneroutine__content{margin:0}
  .oneroutine__button{min-height:72px}
}

/* ==========================================================================
   7. THE FOUR THINGS — check row + icon cards
   Their §7: a row of short checks above a 2x2 card grid, each card an icon box
   beside its text. Checks 1-col -> 3-col at 750. Cards 1-col -> 2-col at 750.
   The icon box grows 46 -> 52 with the card.

   This replaces the previous flat `.quad` list with the same four claims.
   Every one is checkable, which is the only reason they can sit this loud: no
   antibiotics (formula), the frequency claim, US shipping (⚠ must be TRUE
   before traffic, see the launch blockers) and the guarantee. Not here, and
   not to be added: "100% natural", "clinically proven", "FDA approved", or any
   efficacy wording. A tick beside an unverifiable claim is worse than no tick,
   because it asserts that someone checked.
   ========================================================================== */
.formula{background:var(--bg-2);padding:38px 15px 44px}
.formula__heading{font-size:23px;line-height:1.24;letter-spacing:var(--ls-h2);font-weight:700;
  color:var(--heading);text-align:center;margin:0 auto 24px;max-width:820px}

.formula__checks{display:grid;grid-template-columns:1fr;gap:11px;margin:0 auto 25px;max-width:100%;
  padding:0}
.formula__check{display:flex;align-items:center;justify-content:flex-start;gap:9px;font-size:14px;
  line-height:1.35;font-weight:500;color:var(--heading);text-align:left;list-style:none}
.formula__check .ico{width:19px;height:19px;flex:0 0 19px;color:var(--accent-2)}

.formula__grid{display:grid;grid-template-columns:1fr;gap:14px;max-width:1040px;margin:0 auto;padding:0}
.formula__card{background:#fff;border-radius:13px;padding:16px 14px;min-height:auto;display:grid;
  grid-template-columns:46px 1fr;gap:12px;align-items:start;list-style:none;
  border:1px solid var(--line)}
.formula__icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(180deg,var(--tint-chip) 0%,var(--surface-quiet) 100%);
  color:var(--heading)}
.formula__icon .ico{width:25px;height:25px}
.formula__card-title{font-size:15px;font-weight:700;color:var(--heading);margin:0 0 5px;line-height:1.3}
.formula__card-text{font-size:13.5px;line-height:1.55;color:var(--text-60);margin:0}

@media (min-width:750px){
  .formula{padding:44px 16px 52px}
  .formula__heading{font-size:28px;margin-bottom:28px}
  .formula__checks{grid-template-columns:repeat(3,1fr);gap:22px;max-width:900px}
  .formula__check{justify-content:center;font-size:15.5px}
  .formula__check .ico{width:21px;height:21px;flex:0 0 21px}
  .formula__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .formula__card{padding:18px;grid-template-columns:52px 1fr;gap:14px;border-radius:16px;
    min-height:120px;align-items:center}
  .formula__icon{width:52px;height:52px;border-radius:14px}
  .formula__icon .ico{width:28px;height:28px}
  .formula__card-title{font-size:15.5px}
  .formula__card-text{font-size:14px}
}
@media (min-width:990px){
  .formula{padding:64px 20px 72px}
  .formula__heading{font-size:var(--fs-h2);margin-bottom:34px}
  .formula__grid{gap:20px}
  .formula__card{padding:21px 24px}
}

/* ==========================================================================
   8. WHAT IS ON THE PAD — the ingredient rail
   Their §8: a horizontal scroll-snap rail of ingredient cards with arrows.
   An 86%-width swipe rail on a phone, where the window stays `overflow:visible`
   so the next card peeks -> 2-up at 750 -> 3-up at 1051.

   Finger swipe is the browser's. Mouse drag comes from funnel.js module 13,
   which binds to pointerType === 'mouse' only, so touch keeps native momentum,
   rubber-banding and snap physics. `overscroll-behavior-x:contain` stops a
   swipe past the end being handed to the browser as a back-navigation gesture,
   which on a phone reads as the rail being stuck at the moment the thumb
   pushes hardest.

   ⚠ CLAIM RULE FOR EVERY CARD HERE, no exceptions.
   These are cosmetic ingredient descriptions, not actions on the body.
   "Soothes", "conditions", "cleanses", "binds moisture" and "keeps the formula
   stable" are fine. "Anti-inflammatory", "strengthens", "heals",
   "antibacterial", "kills" and "treats" are not: a structure/function claim
   makes this an unapproved new animal drug under FDCA 201(g), which is close
   to verbatim what the 2014 and 2017 FDA warning letters to this category
   cited. Two such claims (chamomile "anti-inflammatory", vitamin E
   "strengthens") were already stripped from this page once. Do not write them
   back in here just because the card looks thin without them.
   ========================================================================== */
.pad-rail{background:var(--bg-1);padding:42px 0 50px;overflow:hidden}
.pad-rail__heading{padding:0 20px;font-size:28px;line-height:1.14;letter-spacing:var(--ls-h2);
  font-weight:700;color:var(--heading);text-align:center;margin:0 auto 10px;max-width:820px}
.pad-rail__sub{padding:0 20px;font-size:14.5px;line-height:1.55;color:var(--text-60);text-align:center;
  margin:0 auto 25px;max-width:60ch}
.pad-rail__window{position:relative;overflow:visible;max-width:1180px;margin:0 auto}
/* ⚠ NO `scroll-behavior:smooth` ON THIS RULE, and the other rails do not have it
   either. It makes EVERY scroll of this element animate, including the direct
   `scrollLeft` assignments module 13 uses on each pointermove to drag the rail with a
   mouse: every one of those would queue its own 300ms animation and the drag becomes
   laggy and fights the cursor. The arrows pass `behavior:'smooth'` per call instead,
   which is the pattern the routine carousel and the gallery already use.
   It also makes the rail untestable headless, because a headless browser does not
   advance the animation, so a scroll that works looks dead. */
.pad-rail__track{display:flex;gap:14px;padding:2px 18px 14px;margin:0;overflow-x:auto;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pad-rail__track::-webkit-scrollbar{display:none}
.pad-rail__card{flex:0 0 86%;scroll-snap-align:center;background:var(--surface-quiet);
  border:1px solid var(--line);border-radius:16px;padding:18px;list-style:none}
.pad-rail__media{aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--tint-chip);
  margin-bottom:14px;display:flex;align-items:center;justify-content:center;color:var(--heading)}
.pad-rail__media img{width:100%;height:100%;object-fit:cover;display:block}
.pad-rail__media .ico{width:44%;height:44%}
.pad-rail__name{font-size:16px;font-weight:700;color:var(--heading);margin:0 0 3px;line-height:1.28}
.pad-rail__latin{font-size:12px;font-style:italic;color:var(--ink-faint);margin:0 0 8px}
.pad-rail__text{font-size:13.5px;line-height:1.58;color:var(--text-60);margin:0}
.pad-rail__arrow{position:absolute;top:46%;transform:translateY(-50%);z-index:10;width:46px;height:46px;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--heading);cursor:pointer;
  display:none;align-items:center;justify-content:center;padding:0;
  box-shadow:0 2px 10px rgba(19,61,38,.08)}
.pad-rail__arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pad-rail__arrow:focus-visible{outline:2px solid var(--accent-1);outline-offset:3px}
.pad-rail__arrow--prev{left:-20px}
.pad-rail__arrow--next{right:-20px}
/* The formula line under the rail, so the spec sits with the ingredients
   rather than only in a buy-box accordion four screens up. */
.pad-rail__spec{margin:20px auto 0;padding:0 20px;text-align:center;font-size:13px;
  color:var(--ink-muted);max-width:64ch}

@media (min-width:750px){
  .pad-rail{padding:56px 28px 64px}
  .pad-rail__heading{font-size:32px;margin-bottom:12px}
  .pad-rail__sub{margin-bottom:30px;font-size:15px}
  .pad-rail__window{overflow:hidden}
  .pad-rail__track{gap:20px;padding:2px 2px 14px}
  .pad-rail__card{flex:0 0 calc((100% - 20px) / 2)}
  .pad-rail__arrow{display:flex}
}
@media (min-width:1051px){
  .pad-rail{padding:64px 20px 76px}
  .pad-rail__heading{font-size:35px}
  .pad-rail__track{gap:26px}
  .pad-rail__card{flex:0 0 calc((100% - 52px) / 3);padding:20px}
  .pad-rail__arrow--prev{left:-26px}
  .pad-rail__arrow--next{right:-26px}
}

/* ==========================================================================
   9. MISSION — the photo wall and the rings
   Their §9, the most responsive block on their page: a 2-col shell, photo
   gallery and an avatar pill on one side, headline and stat rings on the
   other. It changes shape four times (480 / 760 / 1080 / 1350) and the stat
   grid goes 1 -> 2 -> 1 -> 2 on the way up. That ladder is reproduced.

   ⚠ RECORD OF A DECISION, not a nag. The customer count in the pill is the
   brand's own figure, reaffirmed over a written objection on three separate
   occasions: the store has zero orders, so it is not substantiated, and an
   unsubstantiated count is FTC Act s.5 / 16 CFR 465 exposure in this market.
   It ships because the brand says so. It uses the SAME number as the routine
   section rather than a second one, because two different counts on one page
   is the thing a checking buyer actually catches, and this page has had that
   bug (23,000 in one place, 10,000 in another) flagged and unfixed before.
   THE LIMIT THAT STILL HOLDS: no names, no quotes and no stars on any of these
   faces. A synthetic face beside a round number is a stylised trust mark; the
   same face with a name and a sentence in quotes is a fabricated testimonial,
   which is a different and worse order of thing. Do not caption them.

   The rings are drawn with conic-gradient off a `--pct` custom property, so
   the number printed in the markup and the arc drawn behind it are the same
   value and cannot drift apart.
   ========================================================================== */
.mission{background:var(--bg-1);padding:22px 10px}
.mission__shell{width:100%;max-width:1540px;margin:0 auto;display:grid;grid-template-columns:1fr;
  border-radius:20px;overflow:hidden;background:var(--surface-quiet);border:1px solid var(--line)}
.mission__left{padding:20px 15px 23px;background:var(--bg-2)}
.mission__left-top{display:flex;flex-direction:column;align-items:flex-start;gap:13px;
  width:100%;margin-bottom:14px}
.mission__pill{padding:8px 12px;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--heading);background:#fff;border-radius:40px;
  border:1px solid var(--line);white-space:nowrap}
.mission__customers{width:100%;display:flex;align-items:center;gap:10px}
.mission__avatars{flex:0 0 auto;display:flex;padding-left:9px}
.mission__avatars img{width:28px;height:28px;border-radius:50%;object-fit:cover;margin-left:-9px;
  border:2px solid #fff;display:block}
.mission__customers-copy{min-width:0;display:flex;flex-direction:column;line-height:1.15}
.mission__customers-copy strong{font-size:12px;font-weight:700;color:var(--heading)}
.mission__customers-copy span{font-size:10px;color:var(--ink-muted)}

.mission__gallery{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto;gap:8px;height:auto;padding:0;margin:0}
.mission__photo{border-radius:12px;overflow:hidden;background:var(--surface-quiet-2);aspect-ratio:1/1;
  list-style:none}
.mission__photo img{width:100%;height:100%;object-fit:cover;display:block}

.mission__left-bottom{width:100%;margin-top:18px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.mission__real-copy{flex:0 1 auto;display:flex;flex-direction:column}
.mission__real-copy strong{font-size:13px;color:var(--heading);font-weight:700}
.mission__real-copy span{font-size:11.5px;color:var(--ink-muted)}
.mission__benefits{flex:0 0 auto;display:flex;align-items:stretch;padding:0;margin:0}
.mission__benefit{min-width:82px;padding:0 10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;border-left:1px solid var(--line);list-style:none}
.mission__benefit:first-child{border-left:none}
.mission__benefit b{font-size:15px;font-weight:800;color:var(--heading);
  font-variant-numeric:tabular-nums;line-height:1}
.mission__benefit span{font-size:9.5px;color:var(--ink-muted);margin-top:3px;line-height:1.25}

.mission__right{padding:24px 16px 26px}
.mission__label{display:flex;align-items:center;gap:9px;margin:0 0 12px;font-size:11px;
  font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-2)}
.mission__label span{width:22px;height:2px;background:var(--accent-2);border-radius:2px;flex:0 0 22px}
.mission__headline{font-size:clamp(28px,7.6vw,40px);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;color:var(--heading);margin:0 0 16px;max-width:610px}
.mission__headline em{font-style:normal;color:var(--accent-1);display:block;margin-top:2px}
.mission__blurb{font-size:14.5px;line-height:1.6;color:var(--text-60);margin:0 0 22px;
  max-width:var(--measure)}

.mission__stats{width:100%;display:grid;grid-template-columns:1fr;gap:12px;padding:0;margin:0}
.mission__stat{position:relative;width:100%;min-width:0;min-height:150px;overflow:hidden;
  padding:17px 15px 40px;display:grid;grid-template-columns:82px minmax(0,1fr);gap:13px;
  align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;list-style:none}
.mission__ring{width:100%;max-width:82px;aspect-ratio:1/1;border-radius:50%;
  background:conic-gradient(var(--accent-1) calc(var(--pct) * 1%),var(--surface-quiet-2) 0);
  display:flex;align-items:center;justify-content:center;padding:7px;box-sizing:border-box}
.mission__ring-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;font-size:20px;font-weight:800;color:var(--heading);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mission__stat-copy h4{font-size:17px;font-weight:700;color:var(--heading);margin:0 0 4px;
  line-height:1.24}
.mission__stat-copy p{font-size:13px;line-height:1.5;color:var(--text-60);margin:0}
/* ⚠ The source line is REQUIRED on any figure in this block and must name the
   method, the n and the date. An unsourced percentage on a page built on
   admitted limits reads as the exact moment the honesty stopped, which is
   almost verbatim why an unsourced "92%" was deleted from this page before. */
.mission__source{position:absolute;left:15px;right:15px;bottom:13px;font-size:10.5px;line-height:1.35;
  color:var(--ink-faint);margin:0}

@media (min-width:481px){
  .mission__pill{font-size:10px}
  .mission__avatars img{width:34px;height:34px}
  .mission__customers-copy strong{font-size:13px}
  .mission__customers-copy span{font-size:11px}
  .mission__gallery{gap:10px}
}
@media (min-width:761px){
  .mission{padding:34px 16px}
  .mission__left{padding:30px 28px 28px}
  .mission__left-top{flex-direction:row;align-items:center;justify-content:space-between}
  .mission__customers{width:auto}
  .mission__gallery{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:1fr 1fr;height:550px;gap:10px}
  .mission__photo{aspect-ratio:auto}
  /* The hero photo spans the tall left column; the last spans two across the
     bottom. Both are pinned to :first-child / :last-child so adding or removing
     a middle frame keeps the shape rather than orphaning a half cell. */
  .mission__photo:first-child{grid-row:span 2}
  .mission__photo:last-child{grid-column:span 2}
  .mission__right{padding:46px 38px 38px}
  .mission__headline{max-width:650px;font-size:clamp(40px,6.2vw,54px)}
  .mission__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mission__stat{min-height:190px;padding:16px 16px 40px;
    grid-template-columns:minmax(76px,96px) minmax(0,1fr);gap:13px}
  .mission__ring{max-width:96px}
  .mission__ring-inner{font-size:24px}
  .mission__benefit{min-width:clamp(82px,7vw,110px);padding:0 clamp(10px,1.3vw,20px)}
  .mission__benefit b{font-size:17px}
  .mission__benefit span{font-size:10px}
}
@media (min-width:1081px){
  .mission__shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1540px}
  .mission__right{padding:clamp(28px,2.6vw,42px) clamp(24px,3vw,46px) clamp(24px,2.4vw,36px)}
  .mission__gallery{height:455px}
  .mission__headline{font-size:clamp(34px,2.7vw,53px);line-height:.98;letter-spacing:-.04em;
    max-width:610px}
  .mission__headline em{margin-top:2px}
  .mission__stats{grid-template-columns:1fr;gap:10px}
  .mission__stat{min-height:168px;grid-template-columns:110px minmax(0,1fr);padding-bottom:44px}
  .mission__ring{max-width:110px}
  .mission__ring-inner{font-size:28px}
  .mission__stat-copy h4{font-size:20px}
}
@media (min-width:1351px){
  .mission__gallery{height:500px}
  .mission__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1vw,16px)}
  .mission__stat{min-height:245px;grid-template-columns:1fr;
    padding:clamp(20px,1.7vw,28px) clamp(18px,1.6vw,26px) 44px;align-content:center;gap:16px}
  .mission__ring{max-width:120px}
  .mission__ring-inner{font-size:30px}
  .mission__stat-copy h4{font-size:26px}
  .mission__stat-copy p{font-size:14px}
}
@media (min-width:1700px){
  .mission__shell{max-width:1600px}
  .mission__gallery{height:575px}
}

/* ==========================================================================
   10. AUTHORITY — the expert block
   Their §10: a 2-col block, argument and signed quote on one side, portrait on
   the other, collapsing to 1-col WITH THE PHOTO ABOVE THE COPY (order 1 / 2).
   That swap is deliberate on their page and it is correct: on a phone the face
   is what earns the paragraph underneath it.

   ⚠ WHO IS QUOTED HERE MATTERS MORE THAN ANYTHING ELSE IN THIS FILE.
   The speaker is a named certified GROOMER, not a veterinarian, and that is a
   considered choice: groomers see this problem daily and carry real authority
   with this buyer, and because they are not medical there is no medicinal-claim
   exposure and no expert-endorsement problem of the kind that sinks an invented
   DVM. A "Dr. Laura Hartley" testimonial was built for this page once and
   pulled for exactly that (ASA + Meta risk, 16 CFR 255.0(b)).
   The words are a SCRIPT drawn from the research for a real groomer to
   deliver, and the portrait is a stand-in. Before traffic: a real person,
   their own words, written consent, and a paid-consultant disclosure if she is
   compensated (16 CFR 255.5). Do not ship it attributed to someone who does
   not exist.
   ========================================================================== */
.authority{background:var(--bg-2);padding:34px 15px 38px}
.authority__inner{max-width:1360px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:28px;
  align-items:center}
.authority__media{order:1;margin:0}
.authority__copy{order:2;max-width:100%}
.authority__img{width:100%;aspect-ratio:1.08/1;object-fit:cover;object-position:center top;
  border-radius:12px;display:block}
.authority__date{font-size:13px;font-weight:600;color:var(--accent-2);margin:0 0 10px;
  letter-spacing:.01em}
.authority__heading{font-size:26px;line-height:1.14;letter-spacing:var(--ls-h2);font-weight:700;
  color:var(--heading);margin:0 0 18px}
.authority__heading br{display:none}
.authority__quote{padding-left:15px;border-left:3px solid var(--accent-1);margin:0 0 18px}
.authority__quote p{font-size:14.5px;line-height:1.55;color:var(--text);margin:0 0 10px}
.authority__quote p:last-child{margin-bottom:0}
.authority__signature{display:flex;align-items:flex-start;gap:10px;margin-bottom:22px;
  font-size:11.5px;color:var(--ink-muted)}
.authority__signature img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 40px}
.authority__signature strong{display:block;font-size:13.5px;color:var(--heading);font-weight:700}
.authority__button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px}
.authority__trust{margin:13px 0 0;padding:0;display:flex;align-items:center;gap:14px 22px;
  flex-wrap:wrap;justify-content:center;font-size:12.5px;font-weight:600;color:var(--heading)}
.authority__trust li{display:flex;align-items:center;gap:7px;list-style:none}
.authority__trust .ico{width:17px;height:17px;flex:0 0 17px;color:var(--accent-2)}

@media (min-width:601px){
  .authority{padding:40px 17px 44px}
  .authority__heading{font-size:29px;margin-bottom:20px}
  .authority__quote{padding-left:18px}
  .authority__quote p{font-size:15px;line-height:1.6}
  .authority__signature{align-items:center;font-size:12px}
  .authority__trust{font-size:13px}
}
@media (min-width:991px){
  .authority{padding:64px 20px 72px}
  .authority__inner{grid-template-columns:minmax(0,1fr) minmax(400px,.85fr);gap:clamp(36px,4vw,64px)}
  .authority__media{order:2}
  .authority__copy{order:1;max-width:640px}
  .authority__heading{font-size:var(--fs-h2)}
  .authority__heading br{display:block}
  .authority__img{aspect-ratio:1/1.05}
  .authority__button{min-height:58px}
  .authority__trust{justify-content:flex-start;gap:30px;flex-wrap:nowrap}
}

/* ==========================================================================
   12. REVIEWS — the aggregate block
   Their §12 is a Trustpilot badge over a five-bar star-distribution chart and
   a review-submission form.

   ⚠ THE DISTRIBUTION CHART IS DELIBERATELY NOT BUILT, and this is the one
   place the clone stops. Their chart lists per-star integers: how many fives,
   how many fours, how many threes. There is no review export behind this
   store, so every one of those numbers would have to be invented, and a
   fabricated dataset is materially worse than a rounded badge. It is specific,
   it looks audited, and it is disproved by opening the profile it claims.
   The aggregate the brand already ships stays; what sits where the chart would
   go is the admission, which has been recorded on this page as doing more
   persuasive work than a review wall did.
   When there are real orders and a real profile, the chart belongs here and
   the markup below is shaped to take it without a rewrite.
   ========================================================================== */
.reviews{background:var(--bg-1);padding:38px 15px 44px}
.reviews__inner{max-width:900px;margin:0 auto;text-align:center}
.reviews__heading{font-size:23px;line-height:1.2;letter-spacing:var(--ls-h2);font-weight:700;
  color:var(--heading);margin:0 0 18px}
.reviews__badge{display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--surface-quiet);border:1px solid var(--line);border-radius:16px;
  padding:18px 22px;margin-bottom:22px}
.reviews__badge img{display:block;height:28px;width:auto}
.reviews__score{font-size:15px;color:var(--heading);font-variant-numeric:tabular-nums}
.reviews__score strong{font-size:20px;font-weight:800}
.reviews__empty{text-align:left;background:var(--surface-quiet);border:1px solid var(--line);
  border-radius:16px;padding:20px 18px}
.reviews__empty h3{font-size:17px;font-weight:700;color:var(--heading);margin:0 0 10px;line-height:1.3}
.reviews__empty p{font-size:14px;line-height:1.62;color:var(--text-60);margin:0 0 10px}
.reviews__empty p:last-child{margin-bottom:0}

@media (min-width:750px){
  .reviews{padding:56px 20px 64px}
  .reviews__heading{font-size:28px;margin-bottom:22px}
  .reviews__empty{padding:26px 28px}
  .reviews__empty h3{font-size:19px}
  .reviews__empty p{font-size:15px}
}

/* ==========================================================================
   16. EMAIL CAPTURE
   Their §16: an inline email field offering a first-order discount.

   ⚠ NOT WIRED, AND IT MUST NOT BE SWITCHED ON AS IT STANDS. The form has no
   action and no submit handler, so nothing is collected and nothing is sent.
   Before it goes live: a real list to post to, a privacy policy that names the
   processor, express consent for marketing email (the checkbox below, which is
   NOT pre-ticked, for the same reason the subscription toggle is not), and a
   working unsubscribe. Collecting an email address with no privacy notice
   behind it is the CCPA/CPRA problem the footer link already flags, and it
   makes that link a legal requirement rather than a placeholder.
   ========================================================================== */
.signup{background:var(--bg-1);color:var(--text);padding:34px 15px 38px;
  border-top:1px solid var(--line)}
.signup__inner{max-width:620px;margin:0 auto;text-align:center}
.signup__heading{font-size:23px;line-height:1.18;letter-spacing:var(--ls-h2);font-weight:700;
  color:var(--heading);margin:0 0 10px}
.signup__heading em{font-style:normal;color:var(--accent-2)}
.signup__sub{font-size:14.5px;line-height:1.55;color:var(--text-60);margin:0 0 20px}
.signup__form{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.signup__field{width:100%;min-height:52px;border-radius:var(--buttons-radius);
  border:1px solid var(--line-strong);background:#fff;color:var(--text);padding:0 16px;
  font:inherit;font-size:15px}
.signup__field::placeholder{color:var(--ink-faint)}
.signup__field:focus{outline:2px solid var(--accent-1);outline-offset:2px}
.signup__consent{display:flex;align-items:flex-start;gap:9px;text-align:left;font-size:12px;
  line-height:1.5;color:var(--ink-muted)}
.signup__consent input{margin-top:2px;flex:0 0 auto;accent-color:var(--accent-2)}
.signup__consent a{color:var(--heading);text-decoration:underline}

@media (min-width:750px){
  .signup{padding:48px 20px 54px}
  .signup__heading{font-size:28px}
  .signup__form{flex-direction:row}
  .signup__field{flex:1 1 auto}
  .signup__form .btn{flex:0 0 auto;min-width:170px}
}

/* Screen-reader-only. The signup field has a visible placeholder but a placeholder
   is not a label: it disappears on focus and most screen readers do not announce it
   as the field's name. Added here rather than in theme.css because this file is the
   only thing that uses it. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ==========================================================================
   EMAIL POPUP
   Two panels on desktop (copy + form left, product right), stacked on a phone
   with the image on top, mirroring the layout convention this kind of modal
   uses everywhere.

   ⚠ THERE IS NO COUNTDOWN IN HERE, AND ONE MUST NOT BE ADDED.
   The funnel this page is modelled on runs a timer in its popup that restarts
   for every visitor while the discount never actually expires. That is
   deceptive urgency (FTC Act s.5, state UDAP), and on a supplement it sits
   next to claims that are already the most scrutinised thing on the page. If a
   real deadline ever exists, it has to be shared by every visitor and the offer
   has to genuinely end.

   ⚠ NOT WIRED. No action, no submit handler: nothing is collected or sent.
   Before switching it on you need a list endpoint, a privacy policy naming the
   processor, express consent (the checkbox is NOT pre-ticked and must stay
   that way) and a working unsubscribe.
   ========================================================================== */
.pop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px;
  visibility:hidden;pointer-events:none}
.pop.is-open{visibility:visible;pointer-events:auto}
.pop__overlay{position:absolute;inset:0;background:rgba(20,30,24,.55);opacity:0;
  transition:opacity .25s}
.pop.is-open .pop__overlay{opacity:1}
.pop__panel{position:relative;width:100%;max-width:880px;max-height:92vh;overflow:auto;
  background:#fff;border-radius:18px;display:grid;grid-template-columns:1fr;
  transform:translateY(14px) scale(.98);opacity:0;transition:transform .28s,opacity .28s;
  box-shadow:0 24px 60px rgba(20,30,24,.3)}
.pop.is-open .pop__panel{transform:none;opacity:1}
/* The image leads on a phone, because the panel's top is all anyone sees before
   deciding whether to dismiss it. */
.pop__media{order:-1;background:var(--bg-2);aspect-ratio:16/10;overflow:hidden}
.pop__media img{width:100%;height:100%;object-fit:cover;display:block}
.pop__body{padding:26px 22px 24px;text-align:center}
.pop__eyebrow{font-size:14px;font-weight:600;color:var(--text-60);margin:0 0 2px}
.pop__head{font-size:34px;line-height:1.05;letter-spacing:-.03em;font-weight:800;
  color:var(--heading);margin:0 0 12px}
.pop__sub{font-size:14.5px;line-height:1.55;color:var(--text-60);margin:0 0 18px}
.pop__form{display:flex;flex-direction:column;gap:10px}
.pop__field{width:100%;min-height:52px;border-radius:var(--buttons-radius);
  border:1px solid var(--line-strong);background:#fff;color:var(--text);padding:0 16px;
  font:inherit;font-size:15px}
.pop__field:focus{outline:2px solid var(--accent-1);outline-offset:2px}
.pop__consent{display:flex;align-items:flex-start;gap:9px;text-align:left;font-size:12px;
  line-height:1.5;color:var(--ink-muted);margin-top:4px}
.pop__consent input{margin-top:2px;flex:0 0 auto;accent-color:var(--accent-2)}
.pop__consent a{color:var(--heading);text-decoration:underline}
.pop__no{display:block;width:100%;margin-top:14px;background:none;border:0;padding:6px;
  font:inherit;font-size:14px;color:var(--ink-muted);text-decoration:underline;cursor:pointer}
.pop__close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--heading);cursor:pointer;
  display:grid;place-items:center;z-index:2;box-shadow:0 1px 6px rgba(20,30,24,.18)}
.pop__close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.pop__close:focus-visible{outline:2px solid var(--accent-1);outline-offset:2px}

@media (min-width:750px){
  .pop__panel{grid-template-columns:1fr 1fr;align-items:stretch}
  .pop__media{order:0;aspect-ratio:auto}
  .pop__body{padding:44px 38px;display:flex;flex-direction:column;justify-content:center}
  .pop__head{font-size:40px}
}
.pad-rail__swipe{display:inline-block;color:var(--accent-2);font-weight:700;white-space:nowrap}

/* ONE FORMULA, reference layout (23 Sep 2026): brand-green slab, a 2x2 grid of
   benefit cells split by hairlines, then a centred heading, body, cream pill CTA. */
.oneroutine--ref{background:var(--accent-2)}
.oneroutine--ref::before{background:linear-gradient(rgba(47,126,75,.94),rgba(47,126,75,.97))}
.oneroutine--ref .oneroutine__inner{display:block;padding:40px 20px 44px;max-width:900px}
.oneroutine__grid{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:1fr 1fr}
.oneroutine__cell{padding:18px 14px 20px}
.oneroutine__cell:nth-child(odd){border-right:1px solid rgba(255,255,255,.22)}
.oneroutine__cell:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.22)}
.oneroutine__kicker{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:4px}
.oneroutine__cell h3{margin:0 0 6px;color:#fff;font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.oneroutine__cell p{margin:0;color:rgba(255,255,255,.9);font-size:14px;line-height:1.4;letter-spacing:.04em}
.oneroutine--ref .oneroutine__content{text-align:center;max-width:620px;margin:0 auto}
.oneroutine__kicker2{margin:0 0 6px;color:#fff;font-weight:700;font-size:18px;letter-spacing:.03em}
.oneroutine--ref .oneroutine__heading{color:#fff;font-size:32px;line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:0 0 14px}
.oneroutine--ref .oneroutine__body{color:#fff;font-size:16px;line-height:1.55;letter-spacing:.04em;margin:0 0 22px}
.oneroutine__cta{background:#FFF8E6;color:#121212;border-radius:999px;font-weight:700;font-size:18px;letter-spacing:.03em;padding:18px 24px;text-transform:none}
.oneroutine__cta:hover{background:#fff}
.oneroutine--ref .oneroutine__guarantee{display:flex;justify-content:center;align-items:center;gap:8px;color:#fff;font-size:15px;letter-spacing:.04em;margin-top:14px}
.oneroutine--ref .oneroutine__guarantee .ico{width:20px;height:20px;color:#fff}
@media (min-width:750px){
  .oneroutine__cell h3{font-size:30px}
  .oneroutine--ref .oneroutine__heading{font-size:46px}
}

/* WHAT'S INSIDE, compact (23 Sep 2026): the whole formula fits on one phone
   screen. 3x2 photo tiles with a name and a two-word role, the other three
   ingredients as chips, then a "free from" strip. */
.inside{padding-left:16px;padding-right:16px;text-align:center}
.inside .pad-rail__heading{margin-bottom:6px}
.inside .pad-rail__sub{margin:0 auto 18px;font-size:15px}
.inside__grid{list-style:none;margin:0 auto;padding:0;max-width:720px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.inside__item{background:#FFFCF3;border:1px solid rgba(19,61,38,.1);border-radius:14px;padding:8px 6px 10px;display:flex;flex-direction:column;align-items:center}
.inside__item img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;margin-bottom:7px}
.inside__name{font-size:13px;font-weight:700;color:var(--heading);line-height:1.2}
.inside__role{font-size:11.5px;color:var(--text-60);line-height:1.25;margin-top:2px}
.inside__more{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 0}
.inside__more span{font-size:13px;font-weight:600;color:var(--heading);background:var(--tint-chip);border-radius:40px;padding:6px 12px}
.inside__free{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px}
.inside__free li{font-size:13px;font-weight:600;color:var(--accent-2);display:inline-flex;align-items:center;gap:4px}
.inside__free li::before{content:"\2713";font-weight:800}
@media (min-width:750px){
  .inside__grid{grid-template-columns:repeat(6,1fr);max-width:1000px}
  .inside__name{font-size:15px}.inside__role{font-size:13px}
}

/* MISSION, unboxed (23 Sep 2026): no card shell or cream panel around the photos.
   The layout stays; the photos go edge to edge at a taller 4:5 so the people and
   the bottle read at a glance. */
html section.mission{padding-left:0;padding-right:0}
.mission__shell{background:none;border:0;box-shadow:none;border-radius:0}
.mission__left{background:none;padding:0 16px}
.mission__pill{background:none;border:0;padding:0 0 12px;font-size:12px;color:var(--accent-2)}
.mission__gallery{gap:6px}
.mission__photo{border-radius:10px;aspect-ratio:4/5}
.mission__photo img{object-position:50% 25%}
@media (min-width:750px){.mission__left{padding:0 28px}.mission__photo{aspect-ratio:auto}}

/* BENEFITS 2x2 (23 Sep 2026): readable in one glance. Icon from the hero-photo
   set, a bold 2-3 word benefit, one short supporting line. */
.benefit4 .formula__heading{margin-bottom:18px}
.benefit4__grid{list-style:none;margin:0 auto;padding:0 16px;max-width:760px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.benefit4__tile{background:#fff;border-radius:16px;padding:18px 12px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;
  box-shadow:0 2px 10px rgba(19,61,38,.06)}
.benefit4__ico{width:44px;height:44px;color:var(--heading);margin-bottom:10px}
.benefit4__title{font-size:16px;font-weight:800;color:var(--heading);line-height:1.15;letter-spacing:-.01em}
.benefit4__text{font-size:13px;color:var(--text-60);line-height:1.35;margin-top:5px}
.benefit4__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin:16px 16px 0;font-size:14px;font-weight:600;color:var(--accent-2)}
@media (min-width:750px){.benefit4__grid{grid-template-columns:repeat(4,1fr);max-width:1000px}.benefit4__title{font-size:18px}}

/* WHY IT'S DIFFERENT, in the reference expert-section layout (photo, heading,
   green quote rail, CTA). Section stays white per the rhythm rules. */
.diff .authority__img{aspect-ratio:4/3;border-radius:18px;box-shadow:0 8px 24px rgba(19,61,38,.12)}
.diff .authority__date{text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.diff .authority__heading{font-size:28px;font-weight:800;letter-spacing:-.02em;color:#121212}
.diff .authority__heading span{color:var(--accent-2)}
.diff__list{list-style:none;margin:18px 0 22px;padding:16px 16px 16px 18px;border-left:4px solid var(--accent-2);
  background:#F7FAF6;border-radius:0 14px 14px 0;display:grid;gap:14px}
.diff__item{display:flex;gap:12px;align-items:flex-start}
.diff__num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--accent-2);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center}
.diff__title{margin:0 0 2px;font-weight:700;font-size:16px;color:var(--accent-2)}
.diff__text{margin:0;font-size:14.5px;line-height:1.45;color:#2A2F2B}
.diff__note{margin:10px 0 0;font-size:12px;color:var(--text-60);text-align:center}
@media (min-width:990px){.diff .authority__heading{font-size:38px}}

/* Enzyme tiles (Gut Reset formula): no photo, a source chip on top. */
.inside__item--enz{padding:14px 8px 14px;justify-content:center;min-height:118px}
.inside__src{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;background:var(--accent-3);border-radius:40px;padding:3px 8px;margin-bottom:8px}
.inside__item--enz .inside__name{font-size:14px;overflow-wrap:anywhere}
@media (min-width:750px){.inside__item--enz .inside__name{font-size:16px}}