/* ==========================================================================
   CONTENT SECTIONS
   ========================================================================== */
.section{padding:52px 0}
.section--tint{background:var(--bg-2)}
.section--tight{padding:36px 0}
.section__head{max-width:760px;margin:0 auto 28px;text-align:center}
/* Replaces the second scrolling marquee. Static, plain, three lines: a sideways
   ticker is the furniture every fake-urgency page uses, so honest sentences
   inside one read as a technique rather than a commitment. */
/* Replaces the 6x5 comparison table. Three lines instead of a horizontal scroller. */
.shelf{list-style:none;margin:24px auto 0;padding:0;display:grid;gap:14px;max-width:var(--measure)}
.shelf li{font-size:var(--fs-body);line-height:1.55;color:var(--text);padding-left:16px;border-left:3px solid var(--line,#dbe6f2)}
.shelf strong{color:var(--heading)}
.creed{padding:26px 0;border-block:1px solid var(--line,#dbe6f2)}
.creed__list{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:center}
.creed__list li{font-size:var(--fs-small);color:var(--text-60);line-height:1.45}
@media (min-width:750px){.creed__list{grid-template-columns:repeat(3,1fr);gap:20px}}
.section__eyebrow{font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-2);margin-bottom:10px}
/* On the tinted ground (--bg-2 #d5f7ff) --accent-2 drops to 4.01:1, which fails AA
   for small uppercase text. #0A6C69 is 5.0:1 there. The only instance of this class
   in the markup is inside a .section--tint, so this is the case that matters. */
.section--tint .section__eyebrow{color:var(--accent-2)}
/* Was --accent-1 (#47b5e9): 2.4:1 on white, which theme.css itself flags as failing
   AA. This is small uppercase text carrying meaning, so it needs 4.5:1.
   --accent-2 (#0C8480) clears it. */
.section__title{margin-bottom:12px}
.section__sub{font-size:var(--fs-body);color:var(--text);margin:0 auto}
@media (min-width:990px){.section{padding:80px 0}.section--tight{padding:52px 0}}

/* -------- image + text (the repeated long-form block) -------- */
.feature{display:grid;gap:24px;align-items:center}
.feature__media{border-radius:var(--media-radius);overflow:hidden;background:var(--bg-2);aspect-ratio:4/3}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__text h2{margin-bottom:14px}
.feature__text p{font-size:var(--fs-body);color:var(--text)}
.feature__text p:last-of-type{margin-bottom:0}
.feature__text .lead{font-size:calc(var(--fs-body) + 2px);font-weight:600;color:var(--heading)}
.feature .btn{margin-top:22px;max-width:420px}
@media (min-width:990px){
  .feature{grid-template-columns:1fr 1fr;gap:56px}
  .feature--reverse .feature__media{order:2}
}

/* -------- benefit grid (4 icon cards) -------- */
.benefit-grid{display:grid;gap:14px;margin-top:26px}
@media (min-width:750px){.benefit-grid{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (min-width:1200px){.benefit-grid{grid-template-columns:repeat(4,1fr)}}
/* Compact variant: two across from the narrowest phone up, tighter padding, and a
   single short line per card. One-line facts do not need a full-width card each. */
.benefit-grid--compact{grid-template-columns:repeat(2,1fr);gap:10px}
.benefit-grid--compact .benefit-card{padding:16px 14px}
.benefit-grid--compact .benefit-card .ico{width:26px;height:26px;margin-bottom:9px}
.benefit-grid--compact .benefit-card h3{font-size:var(--fs-body);margin-bottom:5px}
@media (min-width:750px){.benefit-grid--compact{gap:14px}}
@media (min-width:1200px){.benefit-grid--compact{grid-template-columns:repeat(4,1fr)}}
.benefit-card{background:#fff;border-radius:var(--media-radius);padding:20px 18px;box-shadow:0 0 0 1px rgba(47,126,75,.22) inset}
.benefit-card .ico{width:30px;height:30px;color:var(--accent-1);margin-bottom:12px}
.benefit-card h3{margin-bottom:7px}
.benefit-card p{font-size:var(--fs-small);color:var(--text);margin:0}

/* ---- steps: the three-beat timeline ----
   A connecting rule runs behind the icons so the three read as one sequence rather
   than three unrelated cards. Vertical on mobile down the left of the icon column,
   horizontal across the top on desktop. The rule is drawn with a pseudo-element on
   the list, not per item, so it never gaps between them. */
.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:26px;position:relative}
.step{position:relative;padding-left:58px}
.step__icon{
  position:absolute;left:0;top:0;z-index:1;
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:50%;background:var(--tint-chip);
}
.step__icon .ico{width:24px;height:24px;color:var(--heading)}
/* the rule, mobile: down through the icon centres */
.steps::before{
  content:"";position:absolute;left:21px;top:44px;bottom:44px;width:2px;
  background:var(--line);
}
.step__when{
  display:inline-block;font-size:var(--fs-small);font-weight:700;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-2);
  margin-bottom:5px;
}
.step h3{margin-bottom:6px}
.step p{font-size:var(--fs-small);color:var(--text);margin:0;max-width:52ch}
@media (min-width:750px){
  .steps{grid-template-columns:repeat(3,1fr);gap:28px}
  .step{padding-left:0;padding-top:60px}
  .step__icon{top:0;left:0}
  /* desktop: the rule runs horizontally through the icon centres, inset so it does
     not stick out past the first and last icon */
  .steps::before{left:22px;right:22px;top:21px;bottom:auto;width:auto;height:2px}
}

/* ==========================================================================
   DARK SECTIONS
   The page alternates light and navy so the long scroll has a rhythm instead of
   reading as one undifferentiated column. Navy is --heading, the same token the
   headings use, so nothing new enters the palette.

   Rules for anything added later:
   - On navy, body text is rgba(255,255,255,.78), never pure white. Full white at
     17px across a paragraph vibrates against a saturated ground.
   - Headings ARE pure white.
   - Cards on navy go white. A "dark card on a dark ground" reads as a hole.
   - Accent for proof stays teal --accent-2 on light, but on navy it fails contrast,
     so it lifts to --accent-1 (sky), which clears AA against #16305C.
   ========================================================================== */
.section--dark{background:var(--heading);color:rgba(255,255,255,.78)}
.section--dark h2,
.section--dark h3,
.section--dark .section__title,
.section--dark strong,
.section--dark b{color:#fff}
.section--dark p,
.section--dark li,
.section--dark .section__sub,
.section--dark .lead{color:rgba(255,255,255,.78)}
.section--dark .section__eyebrow{color:var(--accent-1)}
.section--dark a{color:var(--accent-1)}
.section--dark .ico{color:var(--accent-1)}

/* Cards invert to white so they read as objects sitting on the ground. */
.section--dark .triage__item,
.section--dark .review,
.section--dark .step{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 30px rgba(0,0,0,.18)}
.section--dark .triage__item h3,
.section--dark .review h3,
.section--dark .step h3{color:var(--heading)}
.section--dark .triage__item p,
.section--dark .review p,
.section--dark .step p,
.section--dark .review__body{color:var(--text)}
.section--dark .triage__item .ico,
.section--dark .step__icon .ico{color:var(--heading)}
.section--dark .review__meta{color:var(--text-60)}

/* The navy alert card cannot be navy on navy: it flips to sky so it still reads as
   the loudest card in the set. */
.section--dark .triage__item--alert{background:var(--accent-1)}
.section--dark .triage__item--alert h3{color:#133D26}
.section--dark .triage__item--alert p{color:rgba(19,61,38,.86)}
.section--dark .triage__item--alert .ico{color:#133D26}

.section--dark .triage__note,
.section--dark .cmp__note{color:rgba(255,255,255,.62)}
.section--dark .shelf li{border-left-color:rgba(255,255,255,.3);color:rgba(255,255,255,.78)}
.section--dark .shelf strong{color:#fff}
.section--dark .steps::before{background:rgba(255,255,255,.22)}
.section--dark .step__when{color:var(--accent-1)}

/* Outline button needs a light edge on navy. */
.section--dark .btn--outline{border-color:rgba(255,255,255,.55);color:#fff}
.section--dark .btn--outline:hover{background:rgba(255,255,255,.1)}

/* A hairline seam between two adjacent light sections, so the rhythm still reads
   where two light blocks sit together. */
.section--seam{border-top:1px solid var(--line)}


/* ---- triage: what it usually is, what it sometimes is, when to stop and see a vet ----
   Three across at 750px rather than the benefit grid's four, because these are read
   as a sequence and a 3-up keeps them on one row instead of orphaning the last card.
   The alert card is filled navy: the most important card in this section is the one
   telling the reader not to buy yet, so it should be the one that stops the eye. */
.triage{display:grid;gap:14px;margin-top:26px}
@media (min-width:750px){.triage{grid-template-columns:repeat(3,1fr);gap:18px}}
/* The disqualifier section runs FOUR cards, not three. Two-up then four-up, so it
   never leaves a single orphan card alone on a second row at desktop widths. */
@media (min-width:750px){.triage--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.triage--4{grid-template-columns:repeat(4,1fr)}}
.triage__item{
  background:#fff;border-radius:var(--media-radius);padding:22px 20px;
  box-shadow:0 0 0 1px var(--line) inset;
}
.triage__item .ico{width:30px;height:30px;color:var(--heading);margin-bottom:12px}
.triage__item h3{margin-bottom:8px}
.triage__item p{font-size:var(--fs-small);color:var(--text);margin:0}
.triage__item--alert{background:var(--heading);box-shadow:none}
.triage__item--alert .ico{color:#fff}
.triage__item--alert h3{color:#fff}
.triage__item--alert p{color:rgba(255,255,255,.82)}
.triage__note{
  max-width:var(--measure);margin:22px auto 0;text-align:center;
  font-size:var(--fs-small);color:var(--text-60);
}

/* -------- timeline (week 1 / 2 / 3) -------- */
.timeline{display:grid;gap:14px;margin-top:24px}
@media (min-width:750px){.timeline{grid-template-columns:repeat(3,1fr)}}
.timeline__item{background:#fff;border-radius:var(--media-radius);padding:20px;box-shadow:0 0 0 1px rgba(47,126,75,.22) inset}
.timeline__week{font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.timeline__item p{font-size:var(--fs-small);margin:0;color:var(--text)}

/* -------- image slider / social proof strip -------- */
.slider{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.slider::-webkit-scrollbar{display:none}
.slider__slide{flex:0 0 78%;scroll-snap-align:center;border-radius:var(--media-radius);overflow:hidden;background:var(--bg-2);aspect-ratio:4/5}
.slider__slide img{width:100%;height:100%;object-fit:cover}
@media (min-width:750px){.slider__slide{flex:0 0 42%}}
@media (min-width:1200px){.slider__slide{flex:0 0 26%}}
.slider-dots{display:flex;justify-content:center;gap:12px;margin-top:16px}
.slider-dots button{width:6px;height:6px;border-radius:5px;background:rgba(18,18,18,.2);transition:transform var(--dur),background var(--dur)}
.slider-dots button[aria-current="true"]{background:var(--accent-1);transform:scale(1.5)}

/* -------- before / after -------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.ba__item{position:relative;border-radius:var(--media-radius);overflow:hidden;background:var(--bg-2);aspect-ratio:1/1}
.ba__item img{width:100%;height:100%;object-fit:cover}
.ba__tag{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.92);border-radius:99px;padding:5px 12px;font-size:var(--fs-small);font-weight:600;letter-spacing:var(--ls-label);color:var(--heading)}
.ba__item--after .ba__tag{background:var(--accent-2);color:#fff}

/* -------- testimonials -------- */
.reviews{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.reviews::-webkit-scrollbar{display:none}
.review{flex:0 0 84%;scroll-snap-align:center;background:#fff;border-radius:var(--media-radius);padding:20px;box-shadow:0 0 0 1px rgba(47,126,75,.22) inset;display:flex;flex-direction:column}
@media (min-width:750px){.review{flex:0 0 46%}}
@media (min-width:1200px){.review{flex:0 0 30%}}
.review__stars{color:var(--star);font-size:15px;letter-spacing:-1px;margin-bottom:10px}
.review__title{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--ls-h3);color:var(--heading);margin-bottom:8px}
.review__body{font-size:var(--fs-body);color:var(--text);margin:0 0 16px}
.review__meta{margin-top:auto;font-size:var(--fs-small);color:var(--text-60);display:flex;align-items:center;gap:8px}
.review__verified{display:inline-flex;align-items:center;gap:4px;color:var(--accent-2);font-weight:600}
.review__verified .ico{width:14px;height:14px}

/* -------- ingredient list -------- */
.ingredients{display:grid;gap:12px;margin-top:22px}
@media (min-width:750px){.ingredients{grid-template-columns:repeat(3,1fr)}}
.ingredient{background:#fff;border-radius:var(--media-radius);padding:18px;box-shadow:0 0 0 1px rgba(47,126,75,.22) inset}
.ingredient h3{margin-bottom:6px}
.ingredient p{font-size:var(--fs-small);color:var(--text);margin:0}
.claims{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.claims li{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:99px;padding:8px 15px;font-size:var(--fs-small);font-weight:600;color:var(--text);box-shadow:0 0 0 1px rgba(47,126,75,.3) inset}
.claims .ico{width:15px;height:15px;color:var(--accent-2)}

/* -------- icon bar (3 trust blocks) -------- */
.icon-bar{display:grid;gap:26px;text-align:center}
@media (min-width:750px){.icon-bar{grid-template-columns:repeat(3,1fr)}}
.icon-bar__item .ico{width:36px;height:36px;color:var(--accent-1);margin:0 auto 12px}
.icon-bar__item h3{font-size:var(--fs-label);font-weight:600;letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:8px}
.icon-bar__item p{font-size:var(--fs-small);color:var(--text);margin:0 auto}

/* -------- FAQ wrapper -------- */
.faq{max-width:860px;margin:0 auto}

/* -------- final CTA -------- */
.final-cta{text-align:center;max-width:560px;margin:0 auto}

/* ---- close: four brand-owned trust marks, 2x2 on a phone, 4 across at 750+ ---- */
.trustbar{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.trustbar li{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--media-radius);padding:16px 14px;text-align:center;
  display:grid;justify-items:center;gap:5px;
}
.trustbar .ico{width:28px;height:28px;color:var(--accent-1);margin-bottom:2px}
.trustbar b{font-size:14.5px;font-weight:700;color:#fff;line-height:1.25}
.trustbar span{font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.72)}
.close__cta{margin:26px 0 0;text-align:center}
/* The page's primary button is navy, which is invisible on a navy section - the old
   final CTA got away with it only because it carried .btn--outline. This is the last
   call to action on the page, so it inverts instead: white ground, navy label. */
.close__cta .btn{
  display:inline-flex;width:auto;min-width:260px;
  background:#fff;color:var(--heading);
}
.close__cta .btn:hover{background:#fff;filter:brightness(.94)}
@media (min-width:750px){
  .trustbar{grid-template-columns:repeat(4,1fr);gap:16px}
}
.final-cta .btn{margin-top:20px}

/* ==========================================================================
   FOOTER
   ========================================================================== */
/* Compacted 14 Sep 2026. The links were a one-per-row grid, so eight legal links cost
   eight rows and the footer ran most of a screen on a phone. They wrap inline now with
   a hairline separator, which is ~3 rows instead of 8 and loses nothing: nobody reads a
   footer link list top to bottom, they scan it for one word. */
.site-footer{background:var(--bg-2);padding:30px 0 0;margin-top:0}
.footer__grid{display:grid;gap:22px}
@media (min-width:750px){.footer__grid{grid-template-columns:1.5fr 1fr 1.2fr;gap:34px}}
.footer__block h3{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--heading);margin-bottom:9px}
.footer__block p{font-size:13.5px;line-height:1.5;color:var(--text);margin:0 0 7px}
.footer__block p:last-child{margin-bottom:0}
/* The separator belongs to the link BEFORE it, not the one after: as a ::before on a
   flex item it ended up at the start of every wrapped line. Glued on as an ::after it
   stays on the previous line and a wrapped row always begins with a link. */
.footer__links{display:block;font-size:13.5px;line-height:1.9}
.footer__links a{color:var(--text);white-space:nowrap}
.footer__links a:not(:last-child)::after{
  content:"";display:inline-block;width:1px;height:11px;vertical-align:-1px;
  background:var(--line);margin:0 9px;
}
.footer__links a:hover{color:var(--accent-1)}
.newsletter{display:flex;gap:8px;margin-top:12px}
.newsletter input{flex:1;min-width:0;height:46px;border-radius:var(--inputs-radius);padding:0 14px;font:inherit;font-size:var(--fs-small);background:#fff;border:1px solid rgba(18,18,18,.15)}
.newsletter input:focus{outline:none;border-color:var(--accent-1)}
.newsletter button{flex:0 0 auto;height:46px;padding:0 18px;border-radius:var(--inputs-radius);background:var(--accent-1);color:#fff;font-weight:600;font-size:var(--fs-small);letter-spacing:var(--ls-label)}
.footer__bottom{margin-top:22px;border-top:1px solid rgba(18,18,18,.1);padding:14px 0 20px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;text-align:center;font-size:12px;line-height:1.45;color:var(--text-60)}
.footer__bottom a:hover{color:var(--accent-1)}
body{padding-bottom:0}
.has-sticky-atc{padding-bottom:74px}

/* ---- cause cards: photos with the caption under them ----
   Three eye photos rendered as page content. They deliberately carry no card,
   border or band — the surrounding section already provides those, and stacking
   another set made the block look like a screenshot dropped into the page. */
.causes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
/* White card holding both the photo and its text. No border and only a whisper of
   shadow — on the tinted section the white alone separates it, and anything
   heavier made the row shout over the heading below it. */
.cause{
  margin:0;background:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 1px 3px rgba(19,61,38,.06);
  display:flex;flex-direction:column;
}
.cause img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 45%;
  display:block;background:var(--bg-2);border-radius:0;
}
.cause figcaption{padding:11px 11px 13px;margin-top:0}
.cause b{display:block;font-size:14px;font-weight:700;color:var(--heading);line-height:1.25;letter-spacing:-.012em}
.cause span{display:block;margin-top:4px;font-size:12.5px;line-height:1.38;color:var(--text-60)}
/* The three-stage sequence in the mechanism section. Cards stay WHITE on the dark
   ground, per the dark-section rule: a dark card on a dark ground reads as a hole.
   Below 750px they stay three across rather than stacking, because the whole point is
   reading them left to right as one sequence, and a stacked column reads as three
   separate claims. The captions shrink instead. */
@media (max-width:749px){
  .causes--stages{gap:6px}
  .causes--stages .cause figcaption{padding:8px 8px 10px}
  .causes--stages .cause b{font-size:11.5px;letter-spacing:-.01em}
  .causes--stages .cause span{margin-top:3px;font-size:10px;line-height:1.32}
}
@media (min-width:750px){
  .causes{gap:16px}
  .cause figcaption{padding:16px 16px 18px}
  .cause b{font-size:18px}
  .cause span{font-size:15px;margin-top:6px}
}

/* .feature__media is a fixed 4/3 media box whose img rule sets height:100%. That
   overrode the cards' own aspect-ratio and stretched each photo to 0.37:1. This
   modifier opts the container out so the cards control their own shape. */
.feature__media--plain{aspect-ratio:auto;overflow:visible;background:none;border-radius:0}
.feature__media--plain img{height:auto}

/* ---- comparison, side by side ----
   Sits directly under the problem section, because it is the proof of that section's
   closing line ("all of it was aimed at the wrong thing"). It is a LIGHT section: the
   problem block above it is tinted and the mechanism below it is dark, so a dark
   comparison here would put two dark sections back to back and flatten the rhythm.

   The previous version was a real <table> at min-width:660px inside a horizontal
   scroller, which the mobile reviewer named as the exact point attention died. This is
   a CSS grid: one stacked card per row below 750px with its own inline labels, three
   aligned columns above it. Nothing scrolls sideways at any width.

   No ticks and no red crosses, deliberately. The section above says "none of that was
   you doing it wrong" - these things failed because they were aimed at the wrong thing,
   not because they are frauds. A wall of red X's contradicts that and turns an honest
   comparison into competitor-bashing, which is what this buyer is primed to catch.
   Our row is a filled navy card; that is all the emphasis it needs. */
/* ---- two-column tick table ----
   Us against everything else, one row per claim. Every label is four or five words so
   that NO ROW WRAPS on a 390px phone: the previous version carried a second explanatory
   line under each claim and the whole thing became a wall of text on mobile, which is
   the one thing a tick table cannot be. The substantiation moved to the footnote.

   The right-hand column says "Everything else" rather than naming rivals: a cross
   against every competitor on every attribute is a comparative claim we cannot support,
   and each row here is one the research supports about the category as a whole. */
.tick{
  margin:22px auto 0;max-width:760px;background:#fff;border:1px solid var(--line,#dbe6f2);
  border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(19,61,38,.07);
}
/* The two right-hand columns are sized to their HEADER text, not to the 24px glyph.
   At 66px the word "Featherwipes" was wider than its own column and ran into the one
   beside it. 92px holds it on one line at 10.5px; "Others" is deliberately short so the
   second column can stay narrow. */
.tick__head,.tick__row{display:grid;grid-template-columns:1fr 104px 58px;align-items:center}
.tick__head{
  background:var(--surface-quiet,#f4f7fb);border-bottom:1px solid var(--line,#dbe6f2);
  padding:11px 14px;
}
.tick__us,.tick__them{
  text-align:center;font-size:10px;font-weight:800;letter-spacing:.01em;line-height:1.2;
  white-space:nowrap;
}
/* The brand lockup, set EXACTLY like .site-logo in theme.css: mark left, wordmark
   right, uppercase, .13em tracking, weight 600, navy on the word and --accent-1 on the
   mark. Only the scale differs. Same #i-mark symbol, so editing that one path updates
   header, favicon and this together. */
.tick__us{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  font-size:8px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--heading);
}
.tick__logo{width:13px;height:13px;flex:0 0 auto;color:var(--accent-1);margin-top:-1px}
.tick__them{color:var(--text-60)}
.tick__row{padding:15px 14px;border-top:1px solid var(--line,#dbe6f2)}
.tick__row:first-of-type{border-top:0}
.tick__claim{
  font-size:14px;font-weight:700;color:var(--heading);line-height:1.25;padding-right:6px;
}
.tick__cell{display:flex;justify-content:center}
.tick__cell .ico{width:24px;height:24px;border-radius:50%;padding:4px}
.tick__cell--yes .ico{color:#fff;background:#16964F}
.tick__cell--no  .ico{color:#fff;background:#CE322D}

.cmp__note{
  margin:14px auto 0;font-size:12.5px;line-height:1.5;color:var(--text-60);
  max-width:760px;text-align:center;
}
@media (min-width:750px){
  .tick{margin-top:28px}
  .tick__head,.tick__row{grid-template-columns:1fr 190px 130px}
  .tick__head{padding:15px 26px}
  .tick__row{padding:18px 26px}
  .tick__them{font-size:12.5px}
  .tick__us{font-size:11px;gap:8px}
  .tick__logo{width:18px;height:18px}
  .tick__claim{font-size:17px}
  .tick__cell .ico{width:28px;height:28px;padding:5px}
}

/* ---- compact mechanism steps ----
   Light by default now that the routine section they live in is white; the dark variant
   is kept because the same list may be reused on a navy section later. Numbered by CSS
   counter so the markup stays a plain <ol>. */
/* Three claims she is meant to be able to skim in four seconds, so they are set like
   headlines with one supporting line each, not like a spec list. Two things were wrong
   before: the bodies ran to three lines of --text-60, which turned the block grey and
   made the titles compete with their own explanations, and the markers were small sky
   discs on white, which is the weakest shape/colour pairing available here (the same
   mistake, in reverse, that slide-numbers had to fix by filling its markers navy).
   Markers are navy and 34px now, hairlines separate the rows, and every body is ONE
   line. If a body needs two lines, cut the body, not the type size. */
.mech{list-style:none;counter-reset:m;margin:28px 0 0;padding:0;display:grid;gap:0}
.mech li{counter-increment:m;position:relative;padding:18px 0 18px 50px;border-top:1px solid var(--line)}
.mech li:first-child{border-top:0;padding-top:4px}
.mech li::before{
  content:counter(m);position:absolute;left:0;top:16px;
  width:34px;height:34px;border-radius:50%;
  background:var(--heading);color:#fff;
  font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
}
.mech li:first-child::before{top:2px}
.mech b{display:block;font-size:19px;font-weight:800;color:var(--heading);line-height:1.25;letter-spacing:-.01em}
.mech span{display:block;margin-top:5px;font-size:15.5px;line-height:1.5;color:var(--text)}

/* ---- routine carousel ----
   Native scroll-snap, so the swipe is the browser's and there is no JS to keep alive.
   Slides are a fixed share of the viewport with the next one deliberately peeking, which
   is what tells a thumb it can be dragged without needing arrows or dots. */
.rcar__head{text-align:center}
.rcar__tp{display:block;height:22px;width:auto;margin:0 auto 12px}
.rcar__title{margin:0}
/* Two lines on a phone, one per half of the forced <br>. "Join 23,000+ Pet Owners" is
   the long half: 301px at the 26px H2 token, against a column of 265px at 320w and
   305px at 360w, so it broke to three and then four lines on narrow phones. It costs
   ~11.6px of width per px of font and the column runs ~viewport minus 55px, so
   8.46vw - 4.65px fits it with ~2% to spare and reaches the full 26px token by ~361px.
   Measured with _tools/measure.html. */
@media (max-width:749px){
  .rcar__title{font-size:clamp(21px,calc(8.46vw - 4.65px),26px)}
}
.rcar__title b{font-weight:800}
.rcar{
  list-style:none;margin:24px 0 0;padding:0 0 6px;display:flex;gap:12px;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.rcar::-webkit-scrollbar{display:none}
.rcar__slide{flex:0 0 68%;scroll-snap-align:center}
.rcar__slide img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border-radius:14px;background:var(--surface-quiet,#f4f7fb);
}
/* Dots. They are the only thing telling a thumb the strip moves: a peeking slide on its
   own gets read as a badly cropped photo. Hit area is 22px even though the dot is 7px. */
.rcar__dots{display:flex;justify-content:center;gap:4px;margin:12px 0 0}
.rcar__dot{
  appearance:none;border:0;padding:0;margin:0;background:none;cursor:pointer;
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
}
.rcar__dot::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--heading);opacity:.22;transition:opacity .18s,transform .18s;
}
.rcar__dot.is-on::before{opacity:1;background:var(--accent-1);transform:scale(1.25)}
.rcar__dot:hover::before{opacity:.55}
.section--dark .rcar__dot::before{background:#fff;opacity:.3}
.section--dark .rcar__dot.is-on::before{background:var(--accent-1);opacity:1}

.rcar__cta{margin:24px 0 0;text-align:center}
.rcar__cta .btn{display:inline-flex;width:auto}
@media (min-width:750px){
  .rcar__tp{height:26px;margin-bottom:14px}
  .rcar__slide{flex:0 0 31%}
  /* Three columns: the hairline that separates rows on a phone would draw a line
     across the top of all three cards, so it comes off and the gap does the work. */
  .mech{grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
  .mech li{border-top:0;padding:0 0 0 50px}
  .mech li::before,.mech li:first-child::before{top:0}
  .mech b{font-size:20px}
  .rcar__cta{margin-top:30px}
}

/* ---- the four things ----
   2x2 on a phone, 4 across from 990px. Centred icon over centred type, which only works
   because every label is short; anything longer than four words wraps to three lines in
   a half-width column and the grid stops reading as four equal things.
   Icons are outline at 1.7 on the shared 32 grid, sized up to 40px because at the usual
   21px a centred glyph above a heading looks like a bullet that lost its list. */
.quad{
  list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:34px 18px;text-align:center;
}
/* Every cell is a 3-row grid with FIXED icon and title rows, so the icons share one
   baseline and every body paragraph starts at the same height whether its title ran to
   one line or two. Left to auto heights, "No Antibiotics, Ever" sat on one line while
   "Free Shipping From Ohio" wrapped to two, and the four bodies started at four
   different places, which is what made the block look crooked. */
.quad li{display:grid;grid-template-rows:52px 2.6em auto;justify-items:center;align-items:start}
/* No stroke-width here: the four #i-q-* symbols set their own 1.3 on a 48 grid, and a
   blanket value would override it and put the bulk straight back. */
.quad .ico{width:44px;height:44px;color:var(--accent-1);align-self:center}
.quad b{
  display:block;font-size:16px;font-weight:800;color:#fff;line-height:1.3;
  letter-spacing:-.01em;max-width:15ch;
}
.quad span{
  display:block;font-size:13.5px;line-height:1.45;
  color:rgba(255,255,255,.78);max-width:28ch;
}
@media (min-width:750px){
  .quad{gap:40px 26px}
  .quad li{grid-template-rows:60px 2.6em auto}
  .quad .ico{width:50px;height:50px}
  .quad b{font-size:18px}
  .quad span{font-size:14.5px}
}
@media (min-width:990px){
  .quad{grid-template-columns:repeat(4,1fr);gap:30px}
}

/* One photograph, capped so it never becomes the biggest thing on the page: it is a
   qualifier, not an argument. Caption is small and muted for the same reason. */
.whoshot{margin:0;max-width:560px;margin-inline:auto}
.whoshot img{width:100%;height:auto;display:block;border-radius:var(--media-radius)}
/* Two columns, not centred prose: a centred list with a leading label leaves the
   overflow word stranded on its own line, and the three labels never line up. Grid
   puts the labels in a column she can run her eye down. */
.whoshot figcaption{
  margin:14px auto 0;max-width:390px;
  display:grid;gap:7px;font-size:13.5px;line-height:1.45;color:var(--text-60);
}
.whoshot figcaption span{
  display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline;text-align:left;
}
/* The bucket label carries the scan, the names carry the confirmation. */
.whoshot figcaption b{
  color:var(--heading);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;font-size:11px;text-align:right;
}

/* ---- spec ticker ----
   Same .marquee machinery as the header. Tinted ground rather than the header's navy so
   it reads as a quiet band between two sections instead of a third slab. Items are
   separated by a dot pseudo-element, not by padding alone, so the strip still parses as
   a list when it is mid-scroll. */
/* Navy, not tint. It sits between the white buy box and the tinted comparison section,
   and on the tint it was invisible: same ground as the section below, so it read as that
   section starting early rather than as its own band. Navy also gives the scroll a pulse
   right at the fold. */
.spec-ticker{background:var(--heading)}

/* Type: 15px, weight 600, +0.04em. It was 13px/700/+0.07em, which at that size is the
   setting every dropshipper trust-bar uses: small, heavy and stretched, so it reads as
   filler you are meant to skim past rather than a list of facts. Bigger and lighter with
   the tracking pulled back gives each item room to be read as a claim. */
.spec-ticker .marquee__group > span{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 0;margin:0 26px;white-space:nowrap;position:relative;
  font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;
}
/* A hairline divider between items instead of relying on gap alone. Mid-scroll the strip
   is read in fragments, and without a rule the fragments run together into one sentence. */
.spec-ticker .marquee__group > span::after{
  content:"";position:absolute;right:-26px;top:50%;transform:translateY(-50%);
  width:1px;height:15px;background:rgba(255,255,255,.22);
}
/* A green tick, not a dot. Green reads as verified rather than decorative, which is the
   whole job of this strip. Every item it sits beside is a checkable fact: a tick against
   an unverifiable claim is worse than no tick, because it asserts that someone checked. */
/* text-transform:uppercase turns pH into PH, which is simply the wrong word. This opts
   that one token out. Any future item with meaningful case (mL, pH, Rx) needs the same. */
/* The item is display:inline-flex with a gap, so an inline child becomes its own flex
   item and the gap opens up inside the word. The label is wrapped so it stays one item. */
.spec-ticker .lbl{display:inline}
.spec-ticker .kase{font-style:normal;text-transform:none}
.spec-ticker__tick{
  width:17px;height:17px;flex:none;color:#4FD48A;
  stroke:currentColor;stroke-width:3;fill:none;
  stroke-linecap:round;stroke-linejoin:round;
}
@media (min-width:750px){
  .spec-ticker .marquee__group > span{font-size:16px;padding:18px 0;margin:0 30px}
  .spec-ticker .marquee__group > span::after{right:-30px;height:16px}
  .spec-ticker__tick{width:18px;height:18px}
}

/* ==========================================================================
   SECTION RHYTHM (23 Sep 2026). The content sections had drifted to six
   different vertical paddings (22-52px on a phone) because each block was
   tuned alone. One token now sets them all: 48px on a phone, 64px on tablet,
   80px on desktop. Horizontal padding is left to each block.
   Authority moves from cream to white so it no longer runs straight into the
   cream FAQ. Mission stays white: its content sits in its own cream card.
   The `html` prefix outranks each block's own media-query padding rule.
   ========================================================================== */
:root{--section-y:48px}
@media (min-width:750px){:root{--section-y:64px}}
@media (min-width:990px){:root{--section-y:80px}}
html section.voices,
html section.formula,
html section.pad-rail,
html section.mission,
html section.authority,
html section.section--tint,
html section.signup,
html section.section--dark{padding-top:var(--section-y);padding-bottom:var(--section-y)}
html section.authority{background:var(--bg-1)}

/* SOCIAL PROOF, reference layout: rating line, bold centred headline, sub, then a
   swipeable photo rail with side arrows and a caption under each photo. */
.voices--ref .voices__inner{max-width:760px;margin:0 auto;padding:0 20px;text-align:center}
.voices__rating{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px;letter-spacing:.05em;color:#121212}
.voices__rating svg{width:20px;height:20px;color:var(--accent-2)}
.voices--ref .voices__heading{font-size:30px;line-height:1.1;font-weight:800;letter-spacing:-.03em;color:#121212;margin:0 0 12px}
.voices--ref .voices__sub{font-size:16px;line-height:1.55;letter-spacing:.05em;color:#121212;margin:0 auto 24px;max-width:560px}
.ugcrail{position:relative}
.ugcrail__track{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ugcrail__track::-webkit-scrollbar{display:none}
.ugcrail__slide{flex:0 0 100%;scroll-snap-align:center;text-align:left}
.ugcrail__slide img{width:100%;aspect-ratio:1/1.03;object-fit:cover;object-position:50% 30%;display:block}
.ugcrail__cap{margin:14px 4px 0;font-size:16px;line-height:1.45;letter-spacing:.03em;color:#121212}
.ugcrail__cap strong{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin-bottom:2px}
.ugcrail__btn{position:absolute;top:calc(50% - 40px);width:34px;height:44px;display:grid;place-items:center;font-size:22px;color:#121212;background:transparent}
.ugcrail__btn--prev{left:0}.ugcrail__btn--next{right:0}
.ugcrail__btn:disabled{opacity:.25}
.voices__note{margin:18px 0 0;font-size:12px;color:var(--text-60);letter-spacing:.02em}
@media (min-width:750px){.voices--ref .voices__heading{font-size:40px}.ugcrail__slide{flex-basis:50%;padding:0 8px}}

/* ==========================================================================
   REFERENCE SPACING (measured on tryalmape.com/products/papaya-seeds, 23 Sep 2026)
   Section order already matches theirs:
     product > ticker > social proof > green formula > benefits > ingredients >
     mission > expert/different > FAQ > footer.
   Values are their computed padding-top/bottom at 375px and 1440px.
   ========================================================================== */
html section.voices      {padding-top:30px;padding-bottom:40px}
html section.oneroutine  {padding-top:0;padding-bottom:0}
html section.oneroutine .oneroutine__inner{padding-top:40px;padding-bottom:44px}
html section.formula     {padding-top:38px;padding-bottom:44px}
html section.pad-rail    {padding-top:38px;padding-bottom:44px}
html section.mission     {padding-top:24px;padding-bottom:24px}
html section.authority   {padding-top:20px;padding-bottom:27px}
html section.section--tint{padding-top:38px;padding-bottom:45px}
@media (max-width:749px){
  html section.formula,html section.pad-rail{padding-left:15px;padding-right:15px}
  html section.mission,html section.authority,html section.section--tint,html section.voices{padding-left:10px;padding-right:10px}
  .page-width{padding-left:15px;padding-right:15px}
}
@media (min-width:990px){
  .page-width{max-width:1400px;padding-left:50px;padding-right:50px}
  html section.voices      {padding-top:40px;padding-bottom:52px}
  html section.oneroutine .oneroutine__inner{padding-top:62px;padding-bottom:66px}
  html section.formula     {padding-top:52px;padding-bottom:60px}
  html section.pad-rail    {padding-top:58px;padding-bottom:72px}
  html section.mission     {padding-top:68px;padding-bottom:68px}
  html section.authority   {padding-top:52px;padding-bottom:56px}
  html section.section--tint{padding-top:82px;padding-bottom:82px}
}
/* Their page goes FAQ -> footer; the email offer lives only in the popup. */
section.signup,section#close{display:none}

/* ---- Reference typography, 375px (measured on tryalmape.com, 23 Sep 2026) ---- */
@media (max-width:749px){
  .btn--atc{padding:12px 18px;line-height:1.2;min-height:49px;font-size:19px;font-weight:700}
  html section.voices .voices__inner{padding:0 5px}
  .voices--ref .voices__heading{font-size:23px;font-weight:900;line-height:1.2}
  .voices--ref .voices__sub{font-size:14.5px;line-height:1.5}
  .oneroutine--ref .oneroutine__heading{font-size:28px}
  .oneroutine--ref .oneroutine__body{font-size:15px;line-height:1.46}
  .benefit4 .formula__heading{font-weight:850}
  .inside .pad-rail__heading{font-weight:800}
  .inside .pad-rail__sub{font-size:15.5px}
  .mission__headline{font-size:28px!important;font-weight:850}
  .mission__blurb{font-size:13px!important;line-height:1.5!important}
  .diff .authority__heading{font-size:24px}
  .diff__text{font-size:13.5px;line-height:1.55}
  html section.section--tint .section__title{font-size:32px;font-weight:700}
  html section.section--tint .page-width{padding-left:10px;padding-right:10px}
  html section.section--tint .accordion__content p{font-size:13px;line-height:1.6}
}
@media (max-width:749px){
  html body .oneroutine--ref .oneroutine__heading{font-size:28px!important}
  html body .diff .authority__heading{font-size:24px!important}
  html body section.section--tint .page-width{padding-left:10px!important;padding-right:10px!important}
  html body section.section--tint .section__title{font-size:32px!important}
}

/* ---- Reference desktop, 1440px (tryalmape.com: gallery 585 / info 715, headings below) ---- */
@media (min-width:990px){
  html body .product__grid{grid-template-columns:minmax(0,585px) minmax(0,715px);gap:0;justify-content:center}
  html body .product__info-col{padding-left:50px}
  html body .voices--ref .voices__heading{font-size:29px!important}
  html body .oneroutine--ref .oneroutine__heading{font-size:38px!important}
  html body .benefit4 .formula__heading{font-size:33px!important}
  html body .inside .pad-rail__heading{font-size:41px!important}
  html body .mission__headline{font-size:43px!important}
  html body .diff .authority__heading{font-size:33px!important}
  html body section.section--tint .section__title{font-size:57.6px!important;font-weight:700}
}

/* ---- Ticker + accordions, matched to the reference screenshots (23 Sep 2026) ---- */
.spec-ticker{background:#2F7E4B}
.spec-ticker .marquee__group > span{font-size:17px;font-weight:800;letter-spacing:.07em;padding:17px 0;margin:0 22px;gap:9px}
.spec-ticker .marquee__group > span::after{display:none}
.spec-ticker__tick{width:22px;height:22px;color:#fff;stroke-width:2.6}
@media (min-width:750px){.spec-ticker .marquee__group > span{font-size:19px;padding:20px 0;margin:0 30px}}

/* Accordions: plain rows, thin black rule under each, regular 18px label, black plus. */
.accordion{border-top:0;border-bottom:1px solid #121212}
.accordion__trigger{padding:22px 0;font-size:18px;font-weight:400;letter-spacing:.02em;color:#121212}
.accordion__trigger::after{flex:0 0 17px;width:17px;height:17px;
  background:linear-gradient(#121212,#121212) center/17px 2px no-repeat,linear-gradient(#121212,#121212) center/2px 17px no-repeat}
.accordion.is-open .accordion__trigger::after{background:linear-gradient(#121212,#121212) center/17px 2px no-repeat}
.accordion__content{font-size:15px;line-height:1.6;color:#3E4540}
@media (min-width:750px){.accordion__trigger{font-size:20px}}