/* Zela — product page.
   Layout follows docs/teardown.md; palette and type are Zela's own.
   Clash Grotesk headings, Satoshi body — the reference's pairing, both
   Fontshare faces. Pill buttons, 12px cards, rounded badges. */

:root {
  --accent: #7A1020;   /* the logo mark and the reference footer are this */
  --rust:   #B23A22;   /* previously documented accent, kept for hovers */
  --dark:   #4E0A14;
  --tint: #FBF3F2;
  --panel: #F7F5F4;
  --text: #16191D;
  --muted: #4A4644;
  --line: #E6E1DE;
  --shell: 1180px;
  --shadow: 0 8px 30px rgba(22,25,29,.07);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Satoshi-Variable', 'Satoshi', system-ui, sans-serif;
  font-size: 18px; line-height: 1.65; color: var(--text); background: #fff;
  -webkit-font-smoothing: antialiased;
  /* Backstop against sideways scroll: any element wider than the viewport
     would otherwise let the page pan into empty space. clip rather than
     hidden — hidden makes body a scroll container and kills position:sticky
     inside it. */
  overflow-x: clip;
}
h1, h2, h3, h4 {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', system-ui, sans-serif;
  font-weight: 700; line-height: 1.14; margin: 0 0 12px; letter-spacing: -.01em;
}
h1 { font-size: 34px; }
h2 { font-size: 32px; }
h3 { font-size: 18px; }
p { margin: 0 0 16px; }
a { color: inherit; }
i { font-style: italic; }
sup { font-size: .65em; line-height: 0; }
img, svg { max-width: 100%; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 22px; }
.sect { padding: 50px 0; }
.sect--tint  { background: var(--tint); }
.sect--panel { background: var(--panel); }
.ctr { text-align: center; }
.sub { font-size: 19px; color: var(--muted); max-width: 62ch; margin-inline: auto; }
.link { color: var(--accent); font-weight: 600; text-decoration: none; }
.link:hover { text-decoration: underline; }
.pill {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 999px; margin-bottom: 12px;
}

/* ── images ─────────────────────────────────────────────────────────
   Drop a file into public/images/ and it appears; no code change.

   The placeholder is painted by the container and the image sits on top of
   it, opaque, so a real file simply covers the label with no flash. Three
   details keep this honest:
     - never display:none on the img — an out-of-layout image is never
       fetched by loading="lazy", so it could never load at all;
     - color:transparent so a failed image never draws its alt text;
     - .has-img, set once the image actually decodes, drops the dashed frame.
   ------------------------------------------------------------------ */
.ph {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 12px; background: var(--panel);
  border: 2px dashed var(--line);
  display: grid; place-content: center; gap: 4px;
  text-align: center; padding: 14px;
}
.ph::before {
  content: attr(data-name);
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  color: var(--accent); letter-spacing: .03em;
}
.ph::after {
  content: attr(data-spec);
  font-size: 12px; color: var(--muted); line-height: 1.45; max-width: 40ch;
}
.ph img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
  color: transparent;
}
.ph:not(.has-img) img { opacity: 0; }
.ph.has-img { border-color: transparent; padding: 0; }
.ph.has-img::before, .ph.has-img::after { content: none; }

.slot--main  { aspect-ratio: 1/1; }
.slot--thumb { aspect-ratio: 1/1; border-radius: 10px; padding: 6px; }
.slot--thumb::before { font-size: 10px; }
.slot--card  { aspect-ratio: 4/3; margin-bottom: 14px; }
.slot--tall  { aspect-ratio: 4/5; }

/* ticker */
.ticker { background: var(--dark); color: #fff; overflow: hidden; padding: 8px 0; }
.ticker__track {
  display: flex; gap: 14px; align-items: center; white-space: nowrap;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  animation: slide 28s linear infinite; width: max-content;
}
.ticker__track i { opacity: .5; font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── announcement bar ────────────────────────────────────────────────────
   The store's version, rebuilt on this page's type. Sticky, so the offer and
   its clock stay in view as the page is read. */
.ab {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 40px);
  background: var(--accent); color: #fff; text-decoration: none;
  padding: 8px 16px; line-height: 1.2;
}
.ab:hover { color: #fff; }
.ab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.ab[hidden] { display: none; }

.ab__copy { text-align: center; }
.ab__copy b {
  display: block; font-weight: 600;
  font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: .06em; text-transform: uppercase;
}
.ab__copy > span {
  display: block; margin-top: 2px;
  font-size: clamp(13px, .9vw, 15px);
  letter-spacing: .01em; opacity: .92;
  /* it wraps on a phone at this size; balance stops it orphaning "off" on a
     line of its own */
  text-wrap: balance;
}

.ab__clock { display: flex; align-items: flex-start; gap: clamp(6px, .9vw, 12px); }
.ab__unit { text-align: center; min-width: clamp(26px, 2.4vw, 34px); }
.ab__unit b {
  display: block; font-weight: 600;
  font-size: clamp(19px, 1.8vw, 24px); letter-spacing: .05em;
  /* tabular figures, or the digits jitter the layout once a second */
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.ab__unit span {
  display: block; margin-top: 2px;
  font-size: clamp(11px, .7vw, 12.5px); letter-spacing: .02em; opacity: .9;
}
.ab__sep {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding-top: clamp(6px, .7vw, 9px);
}
.ab__sep i { display: block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .85; }

@media (max-width: 749px) {
  .ab { gap: 12px; padding: 6px 12px; }
  .ab__copy b { letter-spacing: .04em; }
}
@media (max-width: 359px) {
  .ab { gap: 9px; padding: 6px 8px; }
  .ab__copy b { font-size: 15px; }
  .ab__copy > span { font-size: 12px; }
  .ab__unit { min-width: 22px; }
}

/* nav */
.nav { border-bottom: 1px solid var(--line); background: #fff; }
.nav__row { display: flex; align-items: center; justify-content: center; padding-block: 14px; }
.nav__brand {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 19px;
  letter-spacing: .16em; text-decoration: none; color: var(--accent);
  display: flex; align-items: center; background: none; border-radius: 0;
}
/* The mark is a real asset, so it stays out of the .ph placeholder system —
   .ph img forces width/height:100% and would blow the logo up to its natural
   317px. The source is 317x90, so 36px tall renders it at ~2.5x: sharp on a
   retina screen without shipping a second file. */
.nav__brand, .foot__logo { display: inline-flex; align-items: center; }
.nav__logo, .foot__logoimg { display: block; width: auto; object-fit: contain; }
.nav__logo { height: 36px; }
.foot__logoimg { height: 32px; }


/* hero */
.hero { padding: 32px 0 44px; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* Nine slides do not fit a five-column grid without wrapping to a ragged
   second row, so the strip is a rail: swipe on a phone, arrows on a pointer.
   It reuses the review carousel's behaviour — same markup contract. */
.gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; }
/* A grid item defaults to min-width:auto, so the rail sizes to its content
   and grows past the viewport instead of scrolling inside it. */
.gallery, .carousel--thumbs { min-width: 0; }
/* .carousel sets margin-bottom:30px and is declared later in this file, so
   this needs a selector that outranks it rather than one that merely comes
   first — otherwise the rail keeps a 30px skirt under the thumbnails. */
.gallery .carousel--thumbs { margin-bottom: 0; }
/* align-items defaults to stretch, which overrides the thumbnails'
   aspect-ratio height and collapses them to slivers. */
.carousel--thumbs .carousel__rail { padding: 2px 2px 6px; align-items: flex-start; }
.carousel--thumbs .slot--thumb { flex: 0 0 88px; scroll-snap-align: start; }
.carousel--thumbs .carousel__btn { width: 34px; height: 34px; }
.carousel--thumbs .carousel__btn::before { width: 8px; height: 8px; margin: -4.5px 0 0 -3px; border-width: 2px; }
.carousel--thumbs .carousel__btn--prev { left: -10px; }
.carousel--thumbs .carousel__btn--next { right: -10px; }
@media (max-width: 760px) {
  /* the review rail hides its arrows on a phone; this one keeps them */
  .carousel--thumbs .carousel__btn { display: block; }
  .carousel--thumbs .carousel__btn--prev { left: 2px; }
  .carousel--thumbs .carousel__btn--next { right: 2px; }
  .carousel--thumbs .slot--thumb { flex-basis: 76px; }
}
.gallery__note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }

/* buy box */
.buybox--flat { max-width: 620px; margin: 26px auto 0; }

.ratingslot {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 12px;
  border: 1px dashed var(--accent); border-radius: 999px; padding: 4px 13px;
  background: var(--tint); width: fit-content;
}
.ratingslot__stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.ratingslot__label {
  font-size: 10px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent);
}

.buybox__sub { font-size: 17px; color: var(--muted); }

.feats { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
.feats li { position: relative; padding-left: 25px; font-size: 14px; }
.feats li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 9px; height: 5px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}

.purchase { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 20px 0 14px; }
.purchase__opt {
  font: 600 14px/1.2 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; color: var(--text);
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 12px 10px; cursor: pointer;
}
.purchase__opt.is-on { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.purchase__opt:disabled { opacity: .45; cursor: not-allowed; }

.packs { display: grid; gap: 11px; }
.pack {
  display: grid; grid-template-columns: auto 72px 1fr auto; align-items: center; gap: 14px;
  border: 2px solid var(--line); border-radius: 12px; padding: 18px 16px;
  background: #fff; cursor: pointer; position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.pack:hover { border-color: var(--accent); }
.pack input { position: absolute; opacity: 0; pointer-events: none; }
.pack__mark {
  width: 24px; height: 24px; border: 2px solid var(--line); border-radius: 50%;
  display: block; position: relative;
}
.pack:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.pack:has(input:checked) .pack__mark { border-color: var(--accent); }
.pack:has(input:checked) .pack__mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--accent);
}
.pack__thumb { display: block; aspect-ratio: 1/1; border-radius: 9px; overflow: hidden; background: var(--panel); }

.pack__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pack__name { font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 17px; }
.pack__meta { font-size: 14px; color: var(--muted); }
.pack__ship { font-size: 11px; color: var(--accent); font-weight: 600; }
.pack__price { text-align: right; white-space: nowrap; }
.pack__now { display: block; font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 20px; }
.pack__was { font-size: 14px; color: var(--muted); }
.pack__badge {
  position: absolute; top: -10px; right: 12px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.pack__badge--alt { background: var(--dark); }

/* ── add to cart ──────────────────────────────────────────────────────────
   The button carries its own proof: what the pack was, what it costs now, and
   the guarantee — so the last thing read before the click answers the last
   objection. Desktop runs it as one line; the phone stacks the label over the
   meta rather than shrinking type nobody over 45 can read. */
.atc {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  text-decoration: none; margin-top: 16px;
  background: var(--accent); color: #fff;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
  padding: 18px 24px; border-radius: 14px;
  transition: background .16s ease;
}
/* Hover inverts to white with a burgundy rule. inset box-shadow rather than a
   border, so nothing reflows on the way in. */
.atc:hover, .atc:focus-visible {
  background: #fff; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent);
}
.atc:hover .atc__meta, .atc:focus-visible .atc__meta { border-color: rgba(122,16,32,.4); }
.atc:hover .atc__was, .atc:focus-visible .atc__was { color: rgba(122,16,32,.55); }
.atc:hover .atc__sep, .atc:focus-visible .atc__sep { background: rgba(122,16,32,.4); }
.atc__label { font-size: 21px; letter-spacing: .01em; white-space: nowrap; }
.atc__meta {
  display: inline-flex; align-items: center; gap: 11px;
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px;
  padding: 8px 18px; font-size: 17px; white-space: nowrap;
}
.atc__was { color: rgba(255,255,255,.6); font-weight: 500; }
.atc__now { font-weight: 700; }
.atc__sep { width: 1px; height: 19px; background: rgba(255,255,255,.34); }
.atc__gtee { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.atc__gtee::before {
  content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.9' fill='none' stroke='black' stroke-width='1.3'/><path d='M5.2 8.2l2 2 3.6-4.1' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.9' fill='none' stroke='black' stroke-width='1.3'/><path d='M5.2 8.2l2 2 3.6-4.1' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.atc__arrow {
  width: 30px; height: 13px; flex: none; margin-left: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 13'><path d='M1 6.5h26M21.6 1.4l5.4 5.1-5.4 5.1' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 13'><path d='M1 6.5h26M21.6 1.4l5.4 5.1-5.4 5.1' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition: transform .16s ease;
}
.atc:hover .atc__arrow { transform: translateX(4px); }

/* The offer column is narrower than the hero's, and the full meta pill was
   pushing the label off the left edge there. The guarantee drops out rather
   than the price — the refund panel sits directly beneath it. */
#offer .atc__sep, #offer .atc__gtee { display: none; }

/* One line does not survive a 390px screen: the label and arrow take the top
   row, the meta pill spans the full width beneath. */
/* One line on a phone too. The guarantee drops out rather than the price —
   the refund panel directly beneath already carries it, and two lines made
   the button a third of the screen. */
@media (max-width: 860px) {
  .atc { flex-wrap: nowrap; gap: 10px; padding: 15px 14px; }
  .atc__label { font-size: 17px; }
  .atc__meta { font-size: 15px; padding: 6px 14px; gap: 8px; }
  .atc__sep, .atc__gtee { display: none; }
  .atc__arrow { width: 24px; margin-left: 2px; }
}
@media (max-width: 360px) {
  .atc { gap: 7px; padding: 14px 10px; }
  .atc__label { font-size: 15.5px; }
  .atc__meta { font-size: 13.5px; padding: 6px 10px; gap: 6px; }
  .atc__arrow { width: 20px; margin-left: 0; }
}
/* ── customer video rail ────────────────────────────────────────────────
   Six vertical videos on a scroll-snap rail. Portrait because that is how
   customers film; the rail is the same component the reviews and the
   gallery thumbnails use. */
/* A grid item defaults to min-width:auto, so the rail sizes to six videos and
   crushes the copy beside it. Same trap as the gallery thumbnails. */
/* The rail runs the full shell rather than sharing a split with the copy —
   two videos beside a paragraph is not a showcase. */
.carousel.vids { margin: 0 0 0; min-width: 0; }
.vids__intro { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.vids__intro p { color: var(--muted); }
.split > * { min-width: 0; }
/* Centre a short set, but never with justify-content: in an overflowing
   scroller that pushes the first item past the left edge where scrollLeft
   cannot reach it. width:fit-content + auto margins centres only while the
   content fits; past that the box is full width and scrolls from item one. */
/* .carousel__rail sets margin:0 and is declared later in this file, so the
   auto margins need a selector that outranks it rather than one that merely
   comes first. */
.vids .vids__rail {
  gap: 14px; list-style: none; padding: 2px 2px 14px;
  align-items: flex-start; justify-content: flex-start;
  width: fit-content; max-width: 100%; margin: 0 auto;
}
.vid {
  /* explicit width rather than flex-basis alone: flex sizing on a scroll
     container resolves inconsistently across engines, and when it collapses
     the card becomes a narrow vertical slit with object-fit cropping through
     the middle of someone's face. width wins everywhere. */
  flex: 0 0 auto; width: 232px; scroll-snap-align: start;
  aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: var(--panel); box-shadow: var(--shadow); padding: 14px;
}
/* aspect-ratio is unsupported below Safari 15; without a height the card
   collapses, so give it one explicitly there. */
@supports not (aspect-ratio: 1 / 1) {
  .vid { height: 412px; }
}
.vid video {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; background: #000;
}
/* Same contract as .ph img: the player only appears once it has real media,
   so an empty slot shows its label rather than a broken control bar. */
.vid:not(.has-img) video { opacity: 0; pointer-events: none; }
.vid.has-img { padding: 0; background: #000; }

@media (max-width: 760px) {
  .vids .carousel__btn { display: block; }
  .vids .carousel__btn--prev { left: 2px; }
  .vids .carousel__btn--next { right: 2px; }
  .vid { width: min(62vw, 260px); }
  @supports not (aspect-ratio: 1 / 1) {
    .vid { height: calc(min(62vw, 260px) * 16 / 9); }
  }
}

/* ── customer collage ────────────────────────────────────────────────────
   Six real customers holding the product, laid out as a grid so it stays
   sharp at any size. The tint shows through the gaps and reads as the mount
   the reference prints around each photo. */
.collage {
  margin: 0; display: grid; gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  background: #F3D9D5; padding: 8px; border-radius: 14px;
  box-shadow: var(--shadow);
}
.collage img {
  display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 6px;
}
/* The first frame carries the grid: two columns wide, so the set reads as an
   arrangement rather than six identical tiles. */
.collage img:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }

@media (max-width: 560px) {
  .collage { gap: 6px; padding: 6px; }
}

/* ── customer reviews ────────────────────────────────────────────────────
   Real photographs and real words, both lifted from the store. The strip
   loops by translating one of two identical tracks; a copy carries
   aria-hidden so a screen reader hears each photo once. */
/* overflow:hidden, exactly as .ticker does it — .revs__strip is twice the
   width of its photo set and would otherwise let the whole page scroll
   sideways into empty space. */
.revs { padding-bottom: 72px; overflow: hidden; }
.revs .eyebrow { margin-bottom: 10px; }

.revs__strip {
  display: flex; gap: 14px; width: max-content;
  margin: 30px 0 40px; animation: revslide 46s linear infinite;
}
.revs__track { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.revs__track li { flex: none; }
.revs__track img {
  display: block; width: 232px; height: 232px; object-fit: cover;
  border-radius: 14px; box-shadow: var(--shadow);
}
@keyframes revslide { to { transform: translateX(calc(-50% - 7px)); } }

/* Motion is decoration here — without it the strip becomes an ordinary
   swipeable row rather than disappearing. */
@media (prefers-reduced-motion: reduce) {
  .revs__strip {
    animation: none; width: auto; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px;
  }
  .revs__strip > [aria-hidden="true"] { display: none; }
  .revs__track li { scroll-snap-align: start; }
}

/* A rail rather than a grid: seven reviews stacked vertically cost most of a
   screen for something nobody reads end to end. Native scroll-snap does the
   work — the buttons only nudge it, so touch, trackpad and keyboard all keep
   working if the script never runs. */
.carousel { position: relative; margin-bottom: 30px; }
.carousel__rail {
  display: flex; gap: 20px; list-style: none; margin: 0; padding: 4px 2px 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carousel__rail::-webkit-scrollbar { display: none; }
.carousel__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; }
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(22,25,29,.14);
  transition: background .16s ease, opacity .16s ease;
}
.carousel__btn::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -6px 0 0 -4px;
  border-top: 2px solid var(--accent); border-right: 2px solid var(--accent);
}
.carousel__btn--prev { left: -21px; }
.carousel__btn--prev::before { transform: rotate(-135deg); margin-left: -7px; }
.carousel__btn--next { right: -21px; }
.carousel__btn--next::before { transform: rotate(45deg); }
.carousel__btn:hover { background: var(--tint); }
.carousel__btn[disabled] { opacity: 0; pointer-events: none; }

.rev {
  flex: 0 0 336px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 22px 18px; box-shadow: var(--shadow);
}
.rev cite { margin-top: auto; }
.rev__stars { display: block; color: #E8A33D; font-size: 16px; letter-spacing: .12em; margin-bottom: 10px; }
.rev p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.55; color: var(--text); }
.rev cite {
  font-style: normal; font-size: 14.5px; color: var(--muted);
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
}

/* No room for buttons beside the rail once the shell hits its gutters —
   swipe is the better affordance on a phone anyway. */
@media (max-width: 1240px) {
  .carousel__btn--prev { left: 6px; }
  .carousel__btn--next { right: 6px; }
}
@media (max-width: 760px) {
  .carousel__btn { display: none; }
  .rev { flex-basis: 78vw; max-width: 340px; }
}
@media (max-width: 620px) {
  .revs__track img { width: 168px; height: 168px; }
}

/* ── single customer review ─────────────────────────────────────────────
   One named review carries further than a customer count nobody can check. */
.crev {
  margin: 14px 0 0; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.crev__stars { display: block; color: #E8A33D; font-size: 17px; letter-spacing: .14em; margin-bottom: 9px; }
.crev blockquote { margin: 0 0 13px; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.crev figcaption { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* The file exists, so this is a plain image — no placeholder gating. The
   earlier version hid the slot with display:none until the image decoded,
   which cannot work: an out-of-layout image is never fetched by
   loading="lazy", so it never loaded and never revealed itself. */
.crev__face {
  width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  flex: none; background: var(--panel); display: block;
}
.crev__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crev cite {
  font-style: normal; color: var(--accent);
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 15px;
}
.crev__verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.crev__verified::before {
  content: ""; width: 17px; height: 17px; border-radius: 50%; background: #3FAE5A;
  flex: none; position: relative;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><circle cx='8.5' cy='8.5' r='8.5' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><circle cx='8.5' cy='8.5' r='8.5' fill='black'/></svg>") center/contain no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'><circle cx='8.5' cy='8.5' r='8.5' fill='%233FAE5A'/><path d='M5 8.7l2.3 2.3L12 6.4' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}
@media (max-width: 420px) {
  .crev { padding: 14px; }
  .crev blockquote { font-size: 14.5px; }
}

/* ── rating row ──────────────────────────────────────────────────────────
   Sits above the headline so the first thing read is other people's verdict.
   Faces are the same customers as the reviews section. */
.rrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--panel); border-radius: 999px;
  padding: 9px 14px; margin: 0 0 16px; width: fit-content;
}
.rrow__stars { display: block; flex: none; }
.rrow__txt {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 600;
  font-size: 16px; color: var(--text); white-space: nowrap;
}
.rrow__faces { display: inline-flex; align-items: center; flex: none; margin-left: 2px; }
.rrow__face {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; background: var(--tint); display: block; flex: none;
}
.rrow__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rrow__face + .rrow__face { margin-left: -11px; }

/* The faces come off on a phone. With them the row wrapped to two lines and
   the avatars sat on their own centred row, which read as a mistake; without
   them the stars and the rating sit on one tidy line. */
@media (max-width: 520px) {
  .rrow { gap: 9px; padding: 9px 14px; width: fit-content; justify-content: center; flex-wrap: nowrap; }
  .rrow__faces { display: none; }
  .rrow__stars { width: 88px; height: 17px; }
  .rrow__txt { font-size: 14px; white-space: normal; }
  .rrow__face { width: 27px; height: 27px; }
  .rrow__face + .rrow__face { margin-left: -9px; }
}
/* At 360px the line still broke; the stars and the text give up a little so
   it stays one line on the narrowest phones in use. */
@media (max-width: 380px) {
  .rrow { gap: 7px; padding: 8px 11px; }
  .rrow__stars { width: 74px; height: 14px; }
  .rrow__txt { font-size: 12.5px; white-space: nowrap; }
}

.offerprice {
  text-align: center; margin: 18px 0 4px;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
  font-size: 20px; color: var(--text);
}
.offerprice b { font-size: 30px; color: var(--accent); }
.offerprice s { font-size: 19px; color: var(--muted); font-weight: 500; margin-left: 6px; }

/* ── payment strip and trust bar ─────────────────────────────────────────
   The card marks are the canonical Shopify set, each drawn with its own card
   ground, so they only need laying out — no wrapper chrome. PayPal is absent
   deliberately: the store does not take it. */
.pay {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pay li { display: block; }
.pay img {
  display: block; width: 52px; height: auto; border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(22,25,29,.08);
}

.tbar {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 12px;
  margin: 14px 0 0; padding: 10px 22px 10px 16px;
  background: var(--panel); border-radius: 999px; width: fit-content;
  margin-inline: auto;
}
.tbar__txt { font-size: 14px; color: var(--muted); line-height: 1.35; }
.tbar__txt strong {
  display: block; color: var(--text); font-size: 17px;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
}
.tbar__badge {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: #3FAE5A;
  position: relative;
}
.tbar__badge::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 6px; margin: -4.5px 0 0 -5.5px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}

/* overlapping customer faces, with the badge riding the last one */
.tbar__faces { display: inline-flex; align-items: center; flex: none; position: relative; padding-right: 8px; }
.tbar__face {
  width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
  border: 2px solid #fff; background: var(--tint); display: block; flex: none;
}
.tbar__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tbar__face + .tbar__face { margin-left: -14px; }
.tbar__badge--onfaces {
  width: 20px; height: 20px; border: 2px solid #fff;
  position: absolute; right: 0; top: -2px;
}
.tbar__badge--onfaces::before { width: 8px; height: 4.5px; margin: -3.5px 0 0 -4px; border-width: 1.6px; }

/* One row, whatever the width: the eight marks share the line equally and
   scale down together, so every card keeps the same height. Wrapping them
   into a second row reads as an accident however it breaks. */
@media (max-width: 620px) {
  .pay { flex-wrap: nowrap; gap: 5px; }
  .pay li { flex: 1 1 0; min-width: 0; }
  .pay img { width: 100%; }
}
@media (max-width: 420px) {
  .tbar { gap: 10px; padding: 9px 16px 9px 12px; width: auto; }
  .tbar__txt { font-size: 13px; }
  .tbar__txt strong { font-size: 15.5px; }
}

.buybox__under { text-align: center; font-size: 13px; color: var(--muted); margin: 12px 0 0; line-height: 2; }
.shieldline {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 15px; color: var(--accent);
}

.badges {
  list-style: none; padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center;
}
.badges li { font-size: 11px; color: var(--muted); line-height: 1.35; }
/* display:block matters — a span defaults to inline and would ignore width. */
.badges__ic {
  display: block; aspect-ratio: 1/1; width: 40px; margin: 0 auto 6px;
  border-radius: 9px; overflow: hidden; background: none;
}
/* contain, not cover: these are line icons and cover would crop the strokes. */
.badges__ic img { object-fit: contain; }


/* band */
.band { background: var(--dark); color: #fff; padding: 48px 0; }
.band__grid { display: grid; grid-template-columns: 340px 1fr; gap: 48px; align-items: center; }
.band__stats { display: grid; gap: 12px; }
.bstat { background: rgba(255,255,255,.09); border-radius: 12px; padding: 16px 20px; }
.bstat__n { display: block; font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; }
.bstat__l { font-size: 13px; opacity: .8; }
.band__copy h2 { font-size: 34px; }
.band__copy p { opacity: .88; max-width: 60ch; }
.cta {
  display: inline-block; background: #fff; color: var(--accent); text-decoration: none;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 16px;
  padding: 15px 38px; border-radius: 999px; margin-top: 6px;
  letter-spacing: .05em; text-transform: uppercase;
}
.cta:hover { background: var(--tint); }
.cta--inline { background: var(--accent); color: #fff; }
.cta--inline:hover { background: var(--dark); }
.cta__note { font-size: 13px; opacity: .75; margin: 10px 0 0; }
.sect .cta__note { color: var(--muted); opacity: 1; }

/* card grids */
/* Before / after pairs. The split is legible on its own, but labelling it
   removes any doubt about which half is which — and the section carries the
   results caveat underneath, because a paired image implies causation the
   evidence does not support on its own. */
/* .ph.has-img::before/::after are set to content:none by the placeholder
   system, so these need to outrank it — hence the .ph in the selector. */
.qcard--ba figure.ph { position: relative; }
.qcard--ba figure.ph::before,
.qcard--ba figure.ph::after {
  position: absolute; bottom: 8px; z-index: 3;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; color: #fff; content: "";
}
.qcard--ba figure.ph::before { content: "Before"; left: 8px; background: rgba(22,25,29,.68); }
.qcard--ba figure.ph::after  { content: "After";  right: 8px; background: rgba(122,16,32,.9); }
.quad__note {
  grid-column: 1 / -1; margin: 4px 0 0; text-align: center;
  font-size: 13px; color: var(--muted); line-height: 1.5;
}
@media (max-width: 420px) {
  .qcard--ba figure.ph::before, .qcard--ba figure.ph::after { font-size: 9px; padding: 3px 7px; bottom: 6px; }
}

.quad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
/* Full width one under the other on a phone: the before/after pair needs the
   room to read as two halves rather than two thumbnails. */
@media (max-width: 760px) {
  .quad { grid-template-columns: 1fr; gap: 18px; }
  .qcard { padding: 14px; }
  .qcard h3 { font-size: 19px; }
  .qcard p { font-size: 16px; line-height: 1.5; }
}
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.qcard, .tcard, .rcard, .scard {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; box-shadow: var(--shadow);
}
.qcard p, .tcard p, .rcard p { font-size: 16px; color: var(--muted); margin: 0; }
.trio--plain { grid-template-columns: repeat(3, 1fr); }
.scard { text-align: center; }
.scard p { margin: 0; }
.scard a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* how to */
.howto { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; margin-top: 34px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.steps li { position: relative; padding-left: 58px; }
.steps__n {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 17px;
}
.steps p { font-size: 14px; color: var(--muted); margin: 0; }

/* in / out */
.inout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.inout__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ilist { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); }
.ilist__h { font-size: 13px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.ilist ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ilist li { font-size: 13px; position: relative; padding-left: 22px; }
.ilist li::before {
  content: ""; position: absolute; left: 1px; top: .45em; width: 8px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.ilist--not .ilist__h { color: var(--muted); }
.ilist--not li { color: var(--muted); }
.ilist--not li::before {
  border: 0; width: 9px; height: 9px; top: .4em;
  background:
    linear-gradient(currentColor, currentColor) center/9px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center/2px 9px no-repeat;
  transform: rotate(45deg);
}

/* reasons */
.reasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 30px 0; }
.rcard__n {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; background: var(--accent);
  padding: 2px 9px; border-radius: 999px; margin-bottom: 7px;
}
.rcard h3 { font-size: 15px; }

/* guarantee */
.guar { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; }
.seal {
  width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--accent);
  display: grid; place-content: center; text-align: center; margin-bottom: 18px; color: var(--accent);
}
.seal__n { font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; }
.seal__l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.mail { font-weight: 600; color: var(--accent); margin-bottom: 8px; }

/* faq */
/* Compact FAQ inside the buy box: the five questions a reader has with their
   card already out, answered without leaving the offer. */
.qbox { margin-top: 16px; border-top: 1px solid var(--line); }
.qbox .q summary { font-size: 16px; padding: 13px 30px 13px 0; }
.qbox .q p { font-size: 15px; line-height: 1.6; margin: 0 0 13px; }
.qbox .q:last-child { border-bottom: 0; }
.qbox .qh {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
  font-size: 15px; color: var(--accent); margin: 0 0 6px;
}
.qbox .qlist { list-style: none; padding: 0; margin: 0 0 13px; display: grid; gap: 8px; }
.qbox .qlist li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.qbox .qlist li::before {
  content: ""; position: absolute; left: 2px; top: .52em; width: 9px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 600px) {
  .qbox .q summary { font-size: 15px; padding: 12px 28px 12px 0; }
  .qbox .q p { font-size: 14.5px; }
}

.faqgrid { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.faqgrid__h { font-size: 38px; }
.q { border-bottom: 1px solid var(--line); }
.q summary {
  cursor: pointer; list-style: none; padding: 15px 34px 15px 0; position: relative;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 600; font-size: 18px;
}
.q summary::-webkit-details-marker { display: none; }
.q summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .15s ease;
}
.q[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.q p { font-size: 17px; color: var(--muted); margin: 0 0 15px; }

/* footer — matches the reference: curved top edge, logo / support / links,
   and an underlined email field rather than a boxed input. */
.foot { background: var(--accent); color: #fff; padding: 0 0 44px; }
.foot__wave { display: block; width: 100%; height: 54px; }
.foot__grid { display: grid; grid-template-columns: 1fr 1.5fr .9fr; gap: 44px; padding-top: 12px; }
.foot__logo {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: .16em; display: block; margin-bottom: 16px;
  background: none; border: 0; border-radius: 0; padding: 0; width: fit-content;
}

.foot__logo::before { color: #fff; }
.foot__support {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.75; margin-bottom: 16px;
}
.foot__support a { text-decoration: none; }
.foot__legal { font-size: 13px; opacity: .82; line-height: 1.75; }
.foot__sub {
  display: flex; align-items: center; gap: 10px; margin-top: 24px; max-width: 380px;
  border-bottom: 1px solid rgba(255,255,255,.42); padding-bottom: 8px;
}
.foot__sub input {
  flex: 1; border: 0; background: transparent; color: #fff;
  font: 400 15px 'Satoshi-Variable', 'Satoshi', sans-serif; padding: 4px 0;
}
.foot__sub input::placeholder { color: rgba(255,255,255,.6); }
.foot__sub input:focus { outline: none; }
.foot__sub button { border: 0; background: none; color: #fff; font-size: 19px; cursor: pointer; padding: 0 4px; }
.foot__cols { align-content: start; }
.foot__cols a { display: block; font-size: 15px; opacity: .92; text-decoration: none; margin-bottom: 13px; }
.foot__cols a:hover { opacity: 1; text-decoration: underline; }

/* sticky — mobile only; the reference has no desktop sticky bar */
.sticky { display: none; }
@media (max-width: 760px) { .sticky { display: block; } }
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(22,25,29,.1);
  transform: translateY(105%); transition: transform .22s ease;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
}
.sticky.is-on { transform: translateY(0); }
.sticky__in {
  max-width: var(--shell); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.sticky__txt { font-size: 13px; color: var(--muted); line-height: 1.3; display: block; }
.sticky__txt strong { display: block; color: var(--text); font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-size: 14px; }
.sticky__price { display: inline-flex; align-items: baseline; gap: 7px; }
.sticky__price s { color: var(--muted); }
.sticky__price b { color: var(--accent); font-size: 15px; }
/* Same shape and arrow as the in-page button, at bar scale. */
.sticky__cta {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--accent); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 16px;
  padding: 14px 22px; border-radius: 12px;
}
.sticky__cta .atc__arrow { width: 22px; height: 11px; margin-left: 6px; }
.sticky__cta:hover { background: var(--dark); }
.sticky__cta:hover .atc__arrow { transform: translateX(3px); }



/* ship-by row and sale strip */
.shipbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; font-size: 15px; margin: 16px 0 14px;
}
.shipbar__left, .shipbar__right { display: inline-flex; align-items: center; gap: 8px; }
.shipbar__date {
  background: var(--tint); color: var(--accent); font-weight: 600;
  padding: 4px 12px; border-radius: 8px;
}
.shipbar__right b { color: var(--accent); font-weight: 700; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #3FAE5A; display: inline-block; }
.flag { font-size: 17px; line-height: 1; }

.salestrip {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 18px; color: var(--accent);
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-style: italic;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
}
.salestrip::before, .salestrip::after {
  content: ""; flex: 1; height: 1px; background: rgba(122,16,32,.28);
}
.salestrip.is-slot {
  font-style: normal; font-size: 10px; letter-spacing: .06em;
}
.salestrip.is-slot::before, .salestrip.is-slot::after { background: rgba(122,16,32,.2); }

.thin { font-weight: 400; color: var(--muted); }

/* ── hero title section, to the reference ────────────────────────────── */

/* advisor bar */
.docbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.docbar__av {
  position: relative; flex: 0 0 46px; width: 46px; height: 46px;
  border-radius: 50%; overflow: visible; background: var(--panel);
  border: 2px dashed var(--line);
}
.docbar__av img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; position: static; }
.docbar__av::before { content: none; }
.docbar__av::after { content: none; }
.docbar__tick { position: absolute; right: -2px; bottom: -2px; line-height: 0; z-index: 2; }
.docbar__txt { margin: 0; font-size: 15px; line-height: 1.35; }
.docbar__txt strong { font-weight: 700; }
.docbar__sep { color: var(--line); margin: 0 4px; }
.docbar__role { color: var(--muted); }
.docbar.is-slot { border: 2px dashed var(--accent); border-radius: 12px; padding: 10px 12px; background: var(--tint); }
.docbar.is-slot .docbar__txt strong { color: var(--accent); }

/* headline — large, tight, black, as on the reference */
.buybox h1 {
  font-size: clamp(28px, 3.1vw, 40px);
  line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px;
}

/* rating row */
.ratingrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ratingrow__stars { color: #F5B301; font-size: 19px; letter-spacing: 2px; }
.ratingrow__txt { font-size: 14px; font-weight: 600; }
.ratingrow.is-slot { border: 1px dashed var(--accent); border-radius: 999px; padding: 5px 14px; background: var(--tint); width: fit-content; }
.ratingrow.is-slot .ratingrow__txt { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }

.rule { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.lede2 { font-size: 19px; line-height: 1.6; margin: 0 0 14px; }
.lede2 b { color: var(--accent); font-weight: 700; }

/* benefit list with line icons */
.benefits { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 4px; }
.benefits li {
  display: flex; align-items: center; gap: 15px;
  font-size: 18.5px; line-height: 1.35; padding: 7px 0;
}
.benefits__ic {
  flex: 0 0 46px; width: 46px; height: 46px;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.benefits__ic img { width: 100%; height: 100%; object-fit: contain; position: static; }
.benefits__ic::before, .benefits__ic::after { content: none; }

@media (max-width: 760px) {
  .buybox h1 { font-size: 27px; }
  .benefits li { font-size: 15px; gap: 11px; }
  .benefits__ic { flex: 0 0 32px; width: 32px; height: 32px; }
  .lede2 { font-size: 16px; }
}

/* ── gen3-5 sections ─────────────────────────────────────────────────── */

/* alternating copy / image bands */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split--flip > *:first-child { order: -1; }

.savetag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: #fff; font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 13px; border-radius: 999px;
}
.gallery { position: relative; }

/* buy box additions */
.trustlines { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 9px; }
.trustlines li { position: relative; padding-left: 27px; font-size: 16px; }
.trustlines li::before {
  content: ""; position: absolute; left: 3px; top: .52em; width: 9px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.gbox {
  display: flex; gap: 13px; align-items: flex-start; margin-top: 18px;
  background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 15px;
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
}
.gbox strong { display: block; color: var(--text); font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-size: 15px; margin-bottom: 3px; }
.gbox__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 8px; overflow: hidden; background: none; }
.gbox__ic img { width: 100%; height: 100%; object-fit: contain; }

/* one-ingredient band */
.band__lede { color: rgba(255,255,255,.85); font-size: 17px; max-width: 60ch; margin: 0 auto 32px; }
.fourbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.fbox { background: rgba(255,255,255,.1); border-radius: 12px; padding: 20px 18px; }
.fbox__n { display: block; font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.fbox h3 { font-size: 16px; margin-bottom: 6px; }
.fbox p { font-size: 13.5px; opacity: .85; margin: 0; }

/* statistics — deliberately unfilled */
.statpair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.quad--stats { grid-template-columns: repeat(4, 1fr); margin-bottom: 26px; }
.statbox {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 20px 16px; text-align: center; box-shadow: var(--shadow);
}
.statbox.is-slot { border: 2px dashed var(--line); box-shadow: none; background: var(--panel); }
.statbox__n { display: block; font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 30px; color: var(--accent); line-height: 1; }
.statbox__l { display: block; font-size: 11px; color: var(--muted); margin-top: 7px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }

.slotnote {
  border: 2px dashed var(--accent); background: var(--tint); border-radius: 12px;
  padding: 16px; font-size: 14px; color: var(--muted); line-height: 1.6;
}
.slotnote strong { color: var(--accent); }

/* promise row */
.promise {
  list-style: none; padding: 0; margin: 30px 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; text-align: center;
}
.promise li { font-size: 13px; color: var(--muted); }
.promise__ic { display: block; width: 46px; aspect-ratio: 1/1; margin: 0 auto 9px; background: none; overflow: hidden; }
.promise__ic img { width: 100%; height: 100%; object-fit: contain; }

/* timeline — icon row, a continuous rail with dots, pill label, then copy */
.tl {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px;
}
.tl__step { display: grid; grid-template-rows: auto auto auto 1fr; }
.tl__ic {
  aspect-ratio: 1/1; width: 100%; max-width: 150px; margin: 0 0 20px;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.tl__ic img { object-fit: contain; position: static; }
.tl__ic::before { font-size: 11px; }
.tl__ic::after { content: none; }

/* the rail is drawn on the row of dots rather than as a separate element, so
   it cannot drift out of alignment with them */
.tl__dot { position: relative; height: 22px; margin-bottom: 18px; }
.tl__dot::before {
  content: ""; position: absolute; top: 50%; left: -50%; right: -50%;
  height: 1px; background: var(--line);
}
.tl__step:first-child .tl__dot::before { left: 50%; }
.tl__step:last-child  .tl__dot::before { right: 50%; }
.tl__dot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%; background: #F3C9C2;
}
.tl__label {
  display: inline-block; justify-self: start; background: #FADDD8; color: var(--text);
  font-size: 14px; padding: 7px 14px; margin-bottom: 14px;
}
.tl p { font-size: 16.5px; line-height: 1.55; color: var(--text); margin: 0; }
.tl__note { font-size: 13px; color: var(--muted); margin-top: 28px; }

@media (max-width: 1000px) {
  .split, .split--flip { grid-template-columns: 1fr; gap: 30px; }
  .split--flip > *:first-child { order: 0; }
  .fourbox { grid-template-columns: 1fr 1fr; }
  .promise { grid-template-columns: repeat(3, 1fr); }
  .tl { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .tl__dot::before { display: none; }
  .quad--stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fourbox, .promise, .statpair { grid-template-columns: 1fr; }
  /* Stacked one under the other, but as compact rows rather than a
     full-width photo per step — that version ran 3460px, a sixth of the
     whole mobile page for one section. */
  .tl {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    overflow: visible; margin-inline: 0; padding: 0;
  }
  .tl__step {
    display: grid; grid-template-columns: 104px 1fr;
    column-gap: 14px; row-gap: 4px; align-items: start;
  }
  .tl__ic { grid-column: 1; grid-row: 1 / span 2; max-width: none; margin: 0; }
  .tl__dot { display: none; }
  .tl__label { grid-column: 2; grid-row: 1; margin: 0; }
  .tl p { grid-column: 2; grid-row: 2; font-size: 15.5px; }
  .quad--stats { grid-template-columns: 1fr 1fr; }
}

/* ── copy sections ──────────────────────────────────────────────────── */
.narrow { max-width: 760px; }
.narrow p { font-size: 16.5px; }
.lead-in { font-weight: 600; margin-bottom: 12px; }
.bigline { font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700; font-size: 24px; margin: 22px 0 14px; }

.checks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 11px; }
.checks li { position: relative; padding-left: 32px; font-size: 17.5px; line-height: 1.6; }
.checks li::before {
  content: ""; position: absolute; left: 4px; top: .42em; width: 11px; height: 6px;
  border-left: 2.4px solid #3FAE5A; border-bottom: 2.4px solid #3FAE5A; transform: rotate(-45deg);
}
.checks--x li::before {
  border: 0; transform: none; width: 13px; height: 13px; top: .38em; background: none;
  background-image:
    linear-gradient(45deg, transparent 44%, var(--accent) 44%, var(--accent) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--accent) 44%, var(--accent) 56%, transparent 56%);
}
.checks--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px; margin: 22px 0 30px; }
.checks--inline li { font-size: 15px; }
.band .checks li::before { border-color: #8FDCA3; }
.is-slot-li { border: 2px dashed var(--accent); border-radius: 12px; padding: 11px 11px 11px 32px; font-size: 14px; color: var(--muted); }
.is-slot-li::before { top: .95em !important; }
.is-slot-li b { color: var(--accent); }

/* what can it help with */
.helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.helpgrid article { background: var(--panel); border-radius: 12px; padding: 22px; }
.helpgrid h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 8px; }
.helpgrid h3 span { font-size: 21px; line-height: 1; }
.helpgrid p { font-size: 16.5px; color: var(--muted); margin: 0; line-height: 1.6; }

/* results phases */
.phase { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow); }
.phase h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.phase h3 span { font-size: 20px; line-height: 1; }
.phase p { font-size: 17px; color: var(--muted); margin: 0; }

/* expert quote */
.quote {
  margin: 0 0 16px; padding: 20px 22px; border-left: 4px solid var(--accent);
  background: var(--tint); border-radius: 0 14px 14px 0;
  font-size: 17px; line-height: 1.6; font-style: italic;
}

/* subscription note under the packs */
.subline { text-align: center; font-size: 14px; font-weight: 600; margin: 12px 0 0; }
.subline span { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.subline b { color: var(--accent); }

/* guarantee trust pair under add-to-cart */
.gtrust { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--line);
  display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
.gtrust li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.gtrust__ic { width: 26px; height: 26px; background: none; overflow: hidden; flex: 0 0 26px; }
.gtrust__ic img { width: 100%; height: 100%; object-fit: contain; }

/* light badge ticker */
.ticker--light { background: var(--tint); color: var(--accent); border-block: 1px solid var(--line); }

.band .fineprint, .fineprint { font-size: 13px; color: var(--muted); }
.band p { color: rgba(255,255,255,.9); }
.band .bigline { color: #fff; }

@media (max-width: 900px) { .helpgrid { grid-template-columns: 1fr; } }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* two-up on a tablet, but the phone rule at 760px below wins from there —
     this rule is later in the file, so it has to stop at 761px or it
     silently reinstates two columns. */
  .quad    { grid-template-columns: 1fr 1fr; }
  .reasons { grid-template-columns: repeat(3, 1fr); }
  .band__grid, .howto, .inout, .guar, .faqgrid, .foot__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 760px) {
  h1 { font-size: 28px; }
  h2 { font-size: 25px; }
  .sect { padding: 34px 0; }
  .hero { padding: 10px 0 30px; }
  .hero__grid { grid-template-columns: 1fr; gap: 14px; }
  .quad, .trio, .trio--plain, .reasons, .inout__lists, .foot__cols { grid-template-columns: 1fr; }
  .quad { gap: 18px; }

  /* Title, then the picture, then the argument. display:contents lifts the
     copy block's children into the grid so the heading can be ordered above
     the figure and everything else below it. */
  .split > div { display: contents; }
  .split > div > h2 { order: 1; }
  .split > figure { order: 2; margin-block: 4px 6px; }
  .split > div > *:not(h2) { order: 3; }
  .faqgrid__h { font-size: 30px; }
  .band__copy h2 { font-size: 27px; }
  .badges { grid-template-columns: repeat(2, 1fr); }
  .pack { grid-template-columns: auto 44px 1fr auto; gap: 9px; padding: 12px; }
  .pack__thumb { width: 44px; }
  .pack__name { font-size: 14px; }
  .feats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ── restored + new ──────────────────────────────────────────────────────
   .compare, .is-us and .tablewrap were dropped in the astx-comp rewrite and
   the comparison table has been rendering unstyled since. .eyebrow went the
   same way. Both are back below. */

.eyebrow {
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 10px;
}

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 26px; }
.compare {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow);
  font-size: 17px; min-width: 520px;
}
.compare th, .compare td {
  padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line);
}
.compare thead th {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-size: 16px; background: var(--panel); white-space: nowrap;
}
.compare tbody tr:last-child td { border-bottom: 0; }
.compare .is-us { background: var(--tint); font-weight: 600; }
.compare thead .is-us { background: var(--accent); color: #fff; }

/* icon spans that replaced the emoji in the help cards and result phases */
.hic { flex: 0 0 34px; width: 34px; height: 34px; display: inline-block; }
.hic img { width: 100%; height: 100%; object-fit: contain; }

/* Gallery follows the buy box instead of leaving half a screen of white
   beside it. The buy box is tall; the product should stay in view while the
   offer is read. */
@media (min-width: 1001px) {
  .gallery { position: sticky; top: 24px; align-self: start; }
}

/* Thumbnails swap the main image. */
.gallery__thumbs .ph { cursor: pointer; transition: border-color .15s ease; border: 2px solid transparent; }
.gallery__thumbs .ph:hover { border-color: var(--accent); }
.gallery__thumbs .ph.is-active { border-color: var(--accent); }

/* thumbnails are buttons now, so reset the UA chrome */
.gallery__thumbs button { padding: 0; background: var(--panel); font: inherit; }
.gallery__thumbs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.gallery__thumbs .ph { border: 2px solid var(--line); }
.slot--main { cursor: zoom-in; }

/* timeline steps now carry photographs rather than icons */
.tl__ic--photo { border-radius: 12px; overflow: hidden; max-width: none; background: var(--panel); }
.tl__ic--photo img { object-fit: cover; }

/* The one-ingredient band claims microalgae, so the surface should read as it:
   a dark algal texture under the burgundy, drifting slowly. Text sits on a
   solid colour layer, so contrast never depends on the image. */
.band { position: relative; overflow: hidden; isolation: isolate; }
.band::before {
  content: ""; position: absolute; inset: -8% -4%; z-index: -1;
  background: url("/images/algae-bg.jpg") center/cover no-repeat;
  opacity: .38; mix-blend-mode: screen;
  animation: drift 42s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1.06); }
  to   { transform: translate3d(1.5%, 1%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) { .band::before { animation: none; } }

/* six benefit rows, two columns — the reference's arrangement */
.benefits { grid-template-columns: 1fr 1fr; gap: 4px 22px; }
/* Two columns hold down to about 420px; one column just adds scroll. */
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr 1fr; gap: 4px 12px; } }
@media (max-width: 420px) {
  .benefits li { font-size: 14px; gap: 8px; padding: 5px 0; }
  .benefits__ic { flex-basis: 34px; width: 34px; height: 34px; }
}

/* money-back panel under each add-to-cart. The guarantee is the strongest
   asset on the page for this audience and was previously one line of grey
   text; it now gets a seal, a border and the mechanism spelled out. */
.mbg {
  display: flex; align-items: center; gap: 16px;
  background: var(--tint); border: 1px solid rgba(122,16,32,.18);
  border-radius: 12px; padding: 16px 18px; margin-top: 16px;
}
/* the seal is 196x155, so the slot is sized to that ratio rather than square */
.mbg__seal { flex: 0 0 104px; width: 104px; height: 82px; background: none; overflow: visible; }
.mbg__seal { position: relative; }
.mbg__seal img { width: 100%; height: 100%; object-fit: contain; }
.mbg__txt { font-size: 16px; line-height: 1.55; color: var(--text); }
.mbg__txt strong {
  display: block; color: var(--accent); font-size: 18px; margin-bottom: 4px;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
}
/* Seal left, copy right, at every width. Stacking it centred on a phone cost
   a whole extra row of height and pushed the promise below the fold. */
@media (max-width: 600px) {
  .mbg { gap: 12px; padding: 14px; }
  .mbg__seal { flex: 0 0 76px; width: 76px; height: 60px; }
  .mbg__txt { font-size: 14.5px; line-height: 1.5; }
  .mbg__txt strong { font-size: 16px; }
}

/* ── production vs debug ─────────────────────────────────────────────────
   Unfilled slots are invisible to visitors and appear only with ?debug=1.
   A placeholder that ships is worse than a missing section: this audience is
   heavily targeted by supplement scams and reads "PLACEHOLDER" on a checkout
   page exactly the way you would fear. */
.dev-only { display: none !important; }
html.debug .dev-only { display: revert !important; }
html.debug section.dev-only { display: block !important; }
/* display:revert reverts to the UA default (block for a <p>), not to the
   author's flex — so anything laid out with flex has to be named here. */
html.debug .vids.dev-only,
html.debug .docbar.dev-only,
html.debug .ratingrow.dev-only,
html.debug .tbar.dev-only,
html.debug .salestrip.dev-only { display: flex !important; }

/* An image with no file shows a plain panel, not its filename, unless debugging. */
.ph:not(.has-img)::before,
.ph:not(.has-img)::after { content: none; }
html.debug .ph:not(.has-img)::before { content: attr(data-name); }
html.debug .ph:not(.has-img)::after  { content: attr(data-spec); }
.ph:not(.has-img) { border-color: transparent; }
html.debug .ph:not(.has-img) { border-color: var(--line); }

/* per-day cost under each tier name */
.pack__day {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--accent);
  letter-spacing: .01em;
}


/* ── offer bundle, matched to the Kaching block on tryzela.co ─────────────
   Values taken from the store's own block config rather than a screenshot:
   background #F8F7F7, selected #FAE5E5, border #7C1621, label chip #D9D9D9,
   badge #9E3030, 16px corners, tier 3 preselected. */
.deal__head {
  display: flex; align-items: center; gap: 16px;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 400; font-size: 19px; color: var(--text); margin: 0 0 16px;
}
.deal__head::before, .deal__head::after {
  content: ""; flex: 1; height: 1px; background: rgba(124,22,33,.3);
}
.deal__head span { white-space: nowrap; }

/* The badge overhangs the top of its row, so the gap has to clear it or it
   lands on the pack image of the row above. */
.deals { display: grid; gap: 26px; }
.deal {
  position: relative; display: grid; align-items: center;
  grid-template-columns: auto 82px 1fr auto auto; gap: 14px;
  background: #F8F7F7; border: 1px solid rgba(0,0,0,.08); border-radius: 16px;
  padding: 14px 18px 14px 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.deal:hover { border-color: rgba(124,22,33,.45); }
.deal input { position: absolute; opacity: 0; pointer-events: none; }
.deal:has(input:checked) { background: #FAE5E5; border: 2px solid #7C1621; padding: 13px 17px 13px 13px; }

.deal__mark {
  width: 22px; height: 22px; border: 2px solid #C9C4C2; border-radius: 50%;
  display: block; position: relative; background: #fff;
}
.deal:has(input:checked) .deal__mark { border-color: #7C1621; }
.deal:has(input:checked) .deal__mark::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #7C1621;
}

.deal__pack { width: 82px; aspect-ratio: 320/220; background: none; border: 0; border-radius: 0; overflow: visible; }
.deal__pack img { object-fit: contain; }
.deal__pack::before, .deal__pack::after { content: none; }

.deal__name {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 700; font-size: 19px; color: #000; line-height: 1.15;
  justify-self: start;
}
.deal__label {
  justify-self: start; background: #D9D9D9; color: #000;
  font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; white-space: nowrap;
}
.deal__price { text-align: right; white-space: nowrap; }
.deal__now {
  display: block; font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 700; font-size: 21px; color: #000;
}
.deal__was { font-size: 15px; color: #555; }

/* ribbon badge, notched into the right edge as on the store */
.deal__badge {
  position: absolute; right: -2px; top: -15px; z-index: 2;
  background: #9E3030; color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 6px 6px 0 6px;
}
.deal:has(input:checked) .deal__badge { top: -16px; right: -3px; }

@media (max-width: 640px) {
  /* Two clean rows rather than a four-column squeeze: the mark and the pack
     span both rows, the name sits over its savings pill, and the price stacks
     against the right edge. Previously the pill dropped onto its own row and
     the was-price floated under the now-price with nothing beside it. */
  .deal {
    grid-template-columns: auto 58px 1fr auto;
    gap: 3px 10px; padding: 12px; align-items: center;
  }
  .deal__mark  { grid-column: 1; grid-row: 1 / span 2; }
  .deal__pack  { grid-column: 2; grid-row: 1 / span 2; width: 58px; }
  .deal__name  { grid-column: 3; grid-row: 1; font-size: 15.5px; }
  .deal__label { grid-column: 3; grid-row: 2; justify-self: start; font-size: 11.5px; padding: 3px 9px; }
  .deal__price { grid-column: 4; grid-row: 1 / span 2; }
  .deal__now   { display: block; font-size: 18px; }
  .deal__was   { display: block; font-size: 13px; }
  .deal__head { font-size: 16px; gap: 10px; }
}

/* ── research evidence cards ─────────────────────────────────────────── */
.ev .tcard { display: flex; flex-direction: column; }
.ev__tag {
  align-self: flex-start; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.ev .tcard h3 { font-size: 19px; margin-bottom: 10px; }
.ev .tcard p b { color: var(--text); font-weight: 700; }
.ev__src {
  margin-top: auto; padding-top: 12px; font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--line); font-style: italic;
}
.ev__note { font-size: 13.5px; color: var(--muted); margin-top: 22px; max-width: 70ch; margin-inline: auto; }

/* key phrase in a heading, so the eye lands on the payload rather than
   reading the whole line greyly */
.hi { color: var(--accent); }
.hi-lt { color: #F3C9C2; }        /* on the dark band, where burgundy would vanish */

/* ── comparison table ───────────────────────────────────────────────────
   Attribute down the middle, a mark for each brand either side. Stacking
   two lists made the section twice as long and asked the reader to hold
   one column in their head while reading the other. */
.vs { background: var(--tint); padding: 18px 0 48px; }

.vstable { position: relative; max-width: 760px; margin: 62px auto 0; }
/* the clip lives on the inner wrapper, so the pack, the badge and the bottle
   can overhang the top edge without being cut off by it */
.vstable__inner {
  border: 2px solid var(--accent); border-radius: 16px; overflow: hidden;
  background: #fff;
}
/* the pack and the VS badge sit above the table's top edge */
.vstable__pack {
  position: absolute; top: -58px; left: 8%; width: 92px; margin: 0; z-index: 2;
}
.vstable__pack img { width: 100%; height: auto; display: block; }
.vstable__badge {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); color: var(--accent);
  display: grid; place-items: center;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 700; font-size: 20px; letter-spacing: .04em;
}
/* an unbranded white pouch, sized so its base lines up with the Zela pack's.
   White on tint has almost no edge of its own, so the shadow does that work. */
.vstable__generic {
  position: absolute; top: -58px; right: 9%; width: 56px; margin: 0; z-index: 2;
}
.vstable__generic img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 3px 8px rgba(22,25,29,.16));
}

.vs__row {
  display: grid; grid-template-columns: 1fr 1.45fr 1fr; align-items: stretch;
  border-top: 1px solid rgba(122,16,32,.16);
}
.vs__row:first-of-type { border-top: 0; }
.vs__row > * { display: grid; place-items: center; padding: 14px 10px; text-align: center; }

/* the middle column is the coloured spine */
.vs__attr {
  background: var(--accent); color: #fff;
  font-size: 15.5px; line-height: 1.35;
}
.vs__row--head { border-top: 0; }
.vs__row--head .vs__attr {
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
  font-size: 18px; padding-top: 34px;
}
.vs__brand {
  color: var(--accent); font-size: 16px; line-height: 1.3;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif; font-weight: 700;
  padding-top: 34px;
}

.vs__mark { }
.vs__mark::before {
  content: ""; width: 26px; height: 26px; border-radius: 50%; display: block;
  background: no-repeat center/14px 14px;
}
.vs__mark--yes::before {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M2.4 7.3l3 3L11.6 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.vs__mark--no::before {
  background-color: #D64545;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M4 4l6 6M10 4l-6 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/></svg>");
}

.vs__copy { text-align: center; margin-top: 30px; }
.vs__cta {
  display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
  font-family: 'ClashGrotesk-Variable', 'Clash Grotesk', sans-serif;
  font-weight: 700; font-size: 19px;
  padding: 18px 44px; border-radius: 12px;
}
.vs__cta:hover { background: var(--dark); }
.vs__gtee {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  font-size: 15px; margin: 14px 0 0; color: var(--muted);
}
.vs__shield {
  width: 20px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'><path d='M10 1l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V4l8-3z' fill='none' stroke='black' stroke-width='1.6'/><path d='M6.4 11l2.6 2.6L14 8.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'><path d='M10 1l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V4l8-3z' fill='none' stroke='black' stroke-width='1.6'/><path d='M6.4 11l2.6 2.6L14 8.6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

@media (max-width: 560px) {
  .vs { padding: 12px 0 38px; }
  .vstable { margin-top: 54px; }
  .vs__row { grid-template-columns: 1fr 1.6fr 1fr; }
  .vs__row > * { padding: 11px 6px; }
  .vs__attr { font-size: 13.5px; }
  .vs__row--head .vs__attr { font-size: 15px; padding-top: 30px; }
  .vs__brand { font-size: 13.5px; padding-top: 30px; }
  .vs__mark::before { width: 22px; height: 22px; background-size: 12px 12px; }
  .vstable__pack { width: 68px; top: -46px; left: 5%; }
  .vstable__badge { width: 48px; height: 48px; font-size: 16px; top: -24px; }
  .vstable__generic { width: 42px; top: -47px; right: 6%; }
  .vs__cta { font-size: 17px; padding: 16px 30px; }
}