/* ═══════════════════════════════════════════════════════════════════
   Product landing page. Loaded only on is_product().
   Every colour derives from --accent, set inline per product in wp_head.
   ═══════════════════════════════════════════════════════════════════ */

.bm-pdp { padding-block: 0 0; }

/* Section rhythm (.bm-sec, .bm-sec__h, .bm-narrow) moved to main.css — the home
   page uses the same rhythm and does not load this file. */

/* ── hero ── */
.bm-hero { padding-block: clamp(26px, 4vw, 48px) clamp(34px, 5vw, 60px); }
.bm-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
/* Sticky on desktop so the pack stays in view while the copy scrolls. `top` is only
   ever set while this is sticky — see the narrow-viewport override below, which must
   reset it: on a relatively-positioned box `top` shifts the element visually while
   leaving its space in flow, which drops the thumbnail strip on top of the title. */
.bm-hero__media { position: sticky; top: 96px; }
.bm-hero__eyebrow {
  font-size: var(--t-eye); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  /* --accent is tuned for a filled button, not for small text on white. The deep
     pair is the same hue at a contrast ratio that actually passes. */
  color: var(--accent-deep);
}
.bm-hero__title { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.1rem); margin-top: 10px; }
.bm-hero__promise { margin-top: 14px; font-size: var(--t-lead); line-height: 1.58; color: var(--ink-soft); max-width: 46ch; text-wrap: pretty; }

.bm-hero__pricing { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.bm-hero__price {
  font-family: var(--disp); font-variation-settings: var(--soft); font-weight: 600;
  font-size: clamp(1.75rem, 1.5rem + 1.1vw, 2.2rem); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.bm-hero__price .amount { font-family: inherit; }
.bm-hero__pack {
  font-size: .75rem; letter-spacing: .06em; color: var(--ink-mute);
  background: var(--surface-2); border: 1px solid var(--hair); padding: 5px 11px; border-radius: 99px;
}

/* ── buy row ── */
.bm-buy { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.bm-buy__submit { flex: 1 1 200px; }
.bm-qty { display: flex; align-items: center; border: 1px solid var(--hair); border-radius: 100px; background: var(--surface); overflow: hidden; flex: none; }
.bm-qty__btn { width: 42px; height: 48px; border: 0; background: none; cursor: pointer; font-size: 1.1rem; color: var(--ink-soft); }
.bm-qty__btn:hover { background: var(--surface-2); color: var(--ink); }
.bm-qty input {
  width: 46px; height: 48px; border: 0; text-align: center; font: inherit;
  font-weight: 600; background: none; color: var(--ink); -moz-appearance: textfield;
}
.bm-qty input::-webkit-outer-spin-button, .bm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── WhatsApp disclosure ── */
.bm-wa-toggle { margin-top: 12px; }
.bm-wa-toggle > summary { list-style: none; width: 100%; }
.bm-wa-toggle > summary::-webkit-details-marker { display: none; }
.bm-wa-toggle[open] > summary { border-radius: var(--r) var(--r) 0 0; }
.bm-wa-toggle[open] .bm-wa-form { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

.bm-hero__trust { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.bm-hero__trust li { display: flex; align-items: center; gap: 10px; font-size: .875rem; color: var(--ink-soft); }
.bm-hero__trust .bm-ico { color: var(--accent); }
.bm-hero__reg { margin-top: 16px; font-size: .75rem; letter-spacing: .04em; color: var(--ink-mute); }
.bm-hero__oos { margin-top: 20px; padding: 14px 18px; background: var(--surface-2); border-radius: var(--r); color: var(--ink-soft); }

@media (max-width: 900px) {
  .bm-hero__grid { grid-template-columns: 1fr; }
  /* relative, not static: the accent glow below is an ::after that needs a positioned
     ancestor. `top: auto` is the part that matters — without it the sticky offset
     survives and shifts the whole media column down over the heading. */
  .bm-hero__media { position: relative; top: auto; }
  /* A phone screen that shows nothing but a photograph is a phone screen with no
     price and no button on it. Cap the pack so the title, the price and the CTA
     are all reachable in the first screen and a half. */
  .bm-gal__stage { aspect-ratio: 1 / 1; max-height: 44vh; }
  .bm-gal__img { padding: 10px; }
  .bm-gal__thumbs { margin-top: 12px; }
  .bm-gal__thumb { width: 56px; height: 56px; }
  .bm-hero__trust { gap: 9px; margin-top: 22px; }
}

/* ── gallery ── */
.bm-gal__stage {
  position: relative; background: var(--surface-2);
  border: 1px solid var(--hair-soft); border-radius: var(--r-lg);
  aspect-ratio: 18/25; max-height: 620px; overflow: hidden;
}
.bm-gal__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 18px; opacity: 0; transition: opacity .3s ease;
}
.bm-gal__img.is-active { opacity: 1; }
.bm-gal__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.bm-gal__thumb {
  width: 66px; height: 66px; padding: 5px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--hair-soft);
  border-radius: var(--r-sm); transition: border-color .2s ease;
}
.bm-gal__thumb img { width: 100%; height: 100%; object-fit: contain; }
.bm-gal__thumb.is-active { border-color: var(--accent); }

/* ── proof bar ── */
.bm-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.bm-proof__item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .813rem; font-weight: 600;
  padding: 9px 16px 9px 13px; border-radius: 99px;
  background: var(--accent-tint); color: var(--accent-deep);
}
.bm-proof__item .bm-ico { width: 15px; height: 15px; color: var(--accent); }

/* ── actives ── */
.bm-actives { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--hair-soft); border: 1px solid var(--hair-soft); border-radius: var(--r-lg); overflow: hidden; }
.bm-active { background: var(--surface); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 9px; transition: background .25s ease; }
.bm-active:hover { background: var(--surface-2); }
.bm-active__ico { color: var(--accent); margin-bottom: 4px; }
.bm-active__name { font-size: 1.08rem; line-height: 1.26; }
.bm-active__str { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 600; color: var(--accent); }
.bm-active__do { font-size: .875rem; color: var(--ink-soft); line-height: 1.58; }

.bm-inci { margin-top: 24px; border-top: 1px solid var(--hair); padding-top: 18px; max-width: 80ch; }
.bm-inci summary { cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.bm-inci summary:hover { color: var(--accent); }
.bm-inci p { margin-top: 12px; font-size: .813rem; line-height: 1.7; color: var(--ink-mute); }

/* ── pathway figure ── */
.bm-fig { margin: 0; }
.bm-fig__frame { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: clamp(16px, 3vw, 32px); box-shadow: var(--shadow); }
.bm-path { display: block; width: 100%; height: auto; color: var(--ink); }
.bm-fig figcaption { margin-top: 16px; font-size: .813rem; line-height: 1.6; color: var(--ink-mute); max-width: 76ch; }

.bm-path-list { display: none; list-style: none; margin: 0; padding: 0; flex-direction: column; gap: 12px; }
.bm-pstep { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r); padding: 16px 18px 18px; }
.bm-pstep__n { font-size: .625rem; letter-spacing: .12em; color: var(--ink-mute); }
.bm-pstep h3 { font-size: 1rem; margin-top: 6px; }
.bm-pstep__sub { font-size: .813rem; color: var(--ink-soft); margin-top: 3px; }
.bm-pstep__block { margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--hair); display: flex; gap: 10px; align-items: flex-start; }
.bm-pstep__block p { font-size: .813rem; line-height: 1.5; }
.bm-pstep__block b { display: block; color: var(--accent); font-size: .875rem; }
.bm-pstep__bar { flex: none; width: 14px; height: 14px; margin-top: 3px; position: relative; }
.bm-pstep__bar::before { content: ""; position: absolute; left: 6px; top: 0; width: 2px; height: 9px; background: var(--accent); }
.bm-pstep__bar::after  { content: ""; position: absolute; left: 0; bottom: 2px; width: 14px; height: 2px; background: var(--accent); }

@media (max-width: 780px) {
  .bm-fig__frame { display: none; }
  .bm-path-list { display: flex; }
}

/* ── steps ── */
.bm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 26px; counter-reset: bm; }
.bm-step__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.bm-step__n { font-size: .75rem; letter-spacing: .1em; font-weight: 700; color: var(--accent); }
.bm-step__top .bm-ico { color: var(--accent); opacity: .5; }
.bm-step__t { font-size: 1rem; margin-top: 14px; }
.bm-step__b { font-size: .875rem; color: var(--ink-soft); line-height: 1.58; margin-top: 7px; }

/* ── comparison ──
   One argument, three stagings (split / rows / stack) chosen per product so the
   same section does not read as the same table on five landing pages. Shared
   chrome first, then the parts unique to each. */

.bm-cmp__head { max-width: 46ch; margin-bottom: clamp(26px, 3.5vw, 40px); }
.bm-cmp__h { font-size: var(--t-sec); margin-top: 12px; }
.bm-cmp__stand { margin-top: 14px; font-size: var(--t-lead); line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }

.bm-cmp__verdict {
  display: flex; align-items: flex-start; gap: 13px;
  margin-top: 26px; padding: 17px 22px;
  background: var(--accent-tint); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--accent-deep);
}
.bm-cmp__verdict .bm-ico { color: var(--accent); flex: none; margin-top: 3px; }

/* ── split: two panels, ours lit ── */

.bm-cmp2 { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(14px, 2vw, 22px); align-items: start; }

.bm-cmp2__panel { border-radius: var(--r-lg); padding: clamp(22px, 3vw, 30px); position: relative; overflow: hidden; }

/* Ours carries the product's own colour and a lift; theirs is deliberately flat
   and cool. The hierarchy does the arguing before a word is read. */
.bm-cmp2__panel--ours {
  background: var(--surface); border: 1.5px solid var(--accent-line);
  box-shadow: 0 2px 4px rgba(10,34,51,.04), 0 24px 48px -28px color-mix(in srgb, var(--accent) 55%, transparent);
}
.bm-cmp2__panel--ours::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, var(--accent)));
}
.bm-cmp2__panel--theirs { background: var(--surface-2); border: 1px solid var(--hair); }

.bm-cmp2__top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px dashed var(--hair); }
.bm-cmp2__badge {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-deep);
}
.bm-cmp2__badge--warn {
  background: #FBEFE0; color: var(--warn);
  font-family: var(--disp); font-variation-settings: var(--soft); font-weight: 700; font-size: 1.2rem;
}
.bm-cmp2__lab { font-size: 1.02rem; font-weight: 700; line-height: 1.25; }
.bm-cmp2__sub { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.bm-cmp2__panel--theirs .bm-cmp2__lab { color: var(--ink-soft); }

.bm-cmp2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.bm-cmp2__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.bm-cmp2__list b { display: block; font-size: .938rem; font-weight: 600; line-height: 1.4; }
.bm-cmp2__list small { display: block; margin-top: 4px; font-size: .813rem; line-height: 1.5; color: var(--ink-mute); }
.bm-cmp2__panel--theirs b { font-weight: 500; color: var(--ink-soft); }

.bm-cmp2__tick {
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: var(--ok-tint); color: var(--ok);
}
.bm-cmp2__tick .bm-ico { width: 13px; height: 13px; stroke-width: 2.4; }
.bm-cmp2__x {
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; background: #F0E4E3; color: #A5453C; font-size: .9rem; line-height: 1;
}

@media (max-width: 800px) { .bm-cmp2 { grid-template-columns: 1fr; } }

/* ── rows: one claim per line, read as a test report ── */

.bm-cmpr { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); overflow: hidden; }

.bm-cmpr__head { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); }
.bm-cmpr__lab {
  display: flex; align-items: center; gap: 9px; padding: 15px 22px;
  font-size: .688rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff;
}
.bm-cmpr__lab--ours { background: var(--accent-deep); }
.bm-cmpr__lab--ours .bm-ico { width: 15px; height: 15px; }
.bm-cmpr__lab--theirs { opacity: .62; }

.bm-cmpr__row { display: grid; grid-template-columns: 1fr 1fr; }
.bm-cmpr__row:nth-child(even) { background: var(--surface-2); }
.bm-cmpr__cell {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  padding: 17px 22px; border-top: 1px solid var(--hair-soft);
}
.bm-cmpr__cell--ours { border-right: 1px solid var(--hair-soft); }
.bm-cmpr__cell b { display: block; font-size: .9rem; font-weight: 600; line-height: 1.42; }
.bm-cmpr__cell small { display: block; margin-top: 4px; font-size: .78rem; line-height: 1.5; color: var(--ink-mute); }
.bm-cmpr__cell--theirs b { font-weight: 500; color: var(--ink-soft); }

.bm-cmpr__mark { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; }
.bm-cmpr__mark--yes { background: var(--ok-tint); color: var(--ok); }
.bm-cmpr__mark--yes .bm-ico { width: 13px; height: 13px; stroke-width: 2.4; }
.bm-cmpr__mark--no { background: #F0E4E3; color: #A5453C; font-size: .9rem; line-height: 1; }

@media (max-width: 720px) {
  /* Two columns of prose do not fit a phone. Each claim becomes one card with
     our verdict above theirs, which is also the order the argument wants. */
  .bm-cmpr__head { display: none; }
  .bm-cmpr { border: 0; background: none; display: grid; gap: 12px; }
  .bm-cmpr__row {
    grid-template-columns: 1fr; background: var(--surface) !important;
    border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden;
  }
  .bm-cmpr__cell { border-right: 0; border-top: 0; }
  .bm-cmpr__cell--theirs { background: var(--surface-2); border-top: 1px solid var(--hair-soft); }
  .bm-cmpr__cell:empty { display: none; }
}

/* ── stack: ours as cards, theirs as a footnote ── */

.bm-cmps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.bm-cmps__card {
  background: var(--surface); border: 1px solid var(--hair-soft); border-radius: var(--r-lg);
  padding: 24px 22px 26px; position: relative; overflow: hidden;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.bm-cmps__card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.bm-cmps__card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--accent); opacity: 0; transition: opacity .25s ease;
}
.bm-cmps__card:hover::after { opacity: .7; }
.bm-cmps__ico {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px;
  border-radius: 12px; background: var(--accent-tint); color: var(--accent-deep);
}
.bm-cmps__t { font-size: 1.02rem; line-height: 1.3; }
.bm-cmps__n { margin-top: 9px; font-size: .875rem; line-height: 1.55; color: var(--ink-soft); }

.bm-cmps__foot { margin-top: 20px; border: 1px dashed var(--hair); border-radius: var(--r); background: var(--surface-2); }
.bm-cmps__foot > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 15px 20px; font-size: .875rem; font-weight: 600; color: var(--ink-soft);
}
.bm-cmps__foot > summary::-webkit-details-marker { display: none; }
.bm-cmps__foot .bm-ico { color: var(--ink-mute); }
.bm-cmps__caret {
  margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s ease;
}
.bm-cmps__foot[open] .bm-cmps__caret { transform: rotate(-135deg) translate(-2px, -2px); }
.bm-cmps__foot ul { list-style: none; margin: 0; padding: 0 20px 20px; display: grid; gap: 12px; }
.bm-cmps__foot li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.bm-cmps__foot small { display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-mute); }
.bm-cmps__x { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #F0E4E3; color: #A5453C; font-size: .8rem; line-height: 1; }

/* ── bundle ── */
.bm-bundle { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.bm-bundle__item {
  position: relative; background: var(--surface); border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg); padding: 18px; text-decoration: none; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease;
}
.bm-bundle__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.bm-bundle__rail { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--card-accent, var(--accent)); }
.bm-bundle__item img { width: 100%; aspect-ratio: 18/25; object-fit: contain; background: var(--surface-2); border-radius: var(--r-sm); margin-bottom: 12px; }
.bm-bundle__name { font-family: var(--disp); font-variation-settings: var(--soft); font-weight: 600; font-size: 1rem; line-height: 1.28; }
.bm-bundle__pack { font-size: .75rem; color: var(--ink-mute); }
.bm-bundle__price { font-family: var(--disp); font-weight: 600; margin-top: 6px; }
.bm-bundle__nudge {
  margin-top: 20px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent-tint); border: 1px dashed var(--accent-line);
  border-radius: var(--r); padding: 12px 18px; font-size: .875rem;
}
.bm-bundle__nudge .bm-ico { color: var(--accent); }

/* ── faq ── */
.bm-faq { border-top: 1px solid var(--hair); }
.bm-faq__item { border-bottom: 1px solid var(--hair); }
.bm-faq__item summary {
  cursor: pointer; list-style: none; padding: 22px 42px 22px 0; position: relative;
  font-family: var(--disp); font-variation-settings: var(--soft); font-weight: 600; font-size: 1.08rem; line-height: 1.34;
}
.bm-faq__item summary::-webkit-details-marker { display: none; }
.bm-faq__item summary:hover { color: var(--accent); }
.bm-faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 28px; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.bm-faq__item[open] summary::after { transform: rotate(-135deg); }
.bm-faq__a { padding: 0 42px 24px 0; color: var(--ink-soft); font-size: .938rem; line-height: 1.65; }

/* ── sticky buy bar ── */
.bm-sticky {
  position: fixed; inset: auto 0 0 0; z-index: 65;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.bm-sticky[data-show="true"] { transform: translateY(0); }
.bm-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 11px; }
.bm-sticky__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bm-sticky__img { width: 42px; height: 42px; object-fit: contain; background: var(--surface-2); border-radius: var(--r-sm); flex: none; }
.bm-sticky__name { display: block; font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.bm-sticky__price { display: block; font-size: .813rem; color: var(--ink-soft); }
.bm-sticky__actions { display: flex; gap: 8px; align-items: center; flex: none; }
.bm-btn--sm { padding: 10px 18px; font-size: .875rem; }
@media (max-width: 560px) {
  .bm-sticky__price { display: none; }
  .bm-sticky__walabel { display: none; }
  .bm-btn--sm { padding: 10px 14px; }
}
/* The floating bubble would sit on top of the bar. */
.bm-sticky[data-show="true"] ~ .bm-wa-float { opacity: 0; pointer-events: none; }

/* ── results timeline ── */
.bm-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 20px; margin-top: 30px; }
.bm-result {
  position: relative; background: var(--surface); border: 1px solid var(--hair-soft);
  border-radius: var(--r-lg); padding: 26px 24px 28px; overflow: hidden;
}
.bm-result::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); opacity: .55; }
.bm-result__ico { position: absolute; top: 22px; right: 22px; color: var(--accent); opacity: .32; }
.bm-result__fig {
  font-family: var(--disp); font-variation-settings: var(--soft); font-weight: 600;
  font-size: clamp(2.1rem, 1.7rem + 1.5vw, 2.7rem); line-height: 1; letter-spacing: -.035em;
  color: var(--accent-deep); font-variant-numeric: tabular-nums;
}
.bm-result__unit { font-size: .688rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; }
.bm-result__d { font-size: .875rem; color: var(--ink-soft); line-height: 1.58; margin-top: 12px; }

/* ── audience ── */
.bm-aud { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bm-aud__col { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-lg); padding: 24px 26px 28px; }
.bm-aud__col--no { background: var(--surface-2); }
.bm-aud__t { display: flex; align-items: center; gap: 9px; font-size: .688rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px dashed var(--hair); }
.bm-aud__col--yes .bm-aud__t { color: var(--ok); }
.bm-aud__col--no .bm-aud__t { color: var(--ink-mute); }
.bm-aud__col--no .bm-aud__t span { width: 16px; text-align: center; font-size: 1.1rem; line-height: 1; }
.bm-aud ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bm-aud li { font-size: .938rem; line-height: 1.5; padding-left: 16px; position: relative; }
.bm-aud li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .45; }
.bm-aud__col--no li { color: var(--ink-mute); }
.bm-aud__col--no li::before { background: var(--ink-mute); opacity: .35; }
@media (max-width: 660px) { .bm-aud { grid-template-columns: 1fr; } }

/* ── risk reversal ── */
.bm-guar {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px);
  align-items: center; background: var(--accent-deep); color: #fff;
  border-radius: var(--r-xl); padding: clamp(30px, 4vw, 52px);
  position: relative; overflow: hidden;
}
.bm-guar::before {
  content: ""; position: absolute; right: -12%; top: -55%;
  width: min(460px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 68%); pointer-events: none;
}
.bm-guar__h { font-size: var(--t-sec); position: relative; }
.bm-guar__body p { margin-top: 14px; opacity: .82; font-size: 1rem; line-height: 1.6; max-width: 46ch; position: relative; }
.bm-guar__pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.bm-guar__pts li { display: flex; align-items: center; gap: 13px; font-size: .938rem; font-weight: 500; }
.bm-guar__pts .bm-ico { flex: none; opacity: .85; }
@media (max-width: 760px) { .bm-guar { grid-template-columns: 1fr; } }

/* ── lifestyle band ──
   The one section that carries photography of the product in use. Alternating sides
   keeps consecutive bands from reading as a list. */
.bm-life { overflow: hidden; }
.bm-life__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.bm-life--flip .bm-life__grid { grid-template-columns: 1.15fr .85fr; }
.bm-life--flip .bm-life__media { order: 2; }

.bm-life__media { position: relative; margin: 0; }
.bm-life__media img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border-radius: var(--r-xl); position: relative; z-index: 1;
}
/* Accent halo behind the portrait, so each product's band reads in its own colour. */
.bm-life__glow {
  position: absolute; inset: -8% -10% -6% -10%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, var(--accent-tint) 0%, transparent 68%);
}

.bm-life__h { font-size: var(--t-sec); max-width: 18ch; }
.bm-life__p { margin-top: 18px; font-size: var(--t-lead); line-height: 1.66; color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; }
.bm-life__pts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.bm-life__pts li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; line-height: 1.5; }
.bm-life__pts .bm-ico { color: var(--accent); margin-top: 3px; }

@media (max-width: 860px) {
  .bm-life__grid, .bm-life--flip .bm-life__grid { grid-template-columns: 1fr; }
  .bm-life--flip .bm-life__media { order: 0; }
  .bm-life__media { max-width: 420px; }
}

/* ── hero accent wash ──
   Gives each product page a different atmosphere rather than just a different button
   colour. Derived from --accent, so it costs nothing per product. */
.bm-hero { position: relative; }
.bm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -12%, var(--accent-tint) 0%, transparent 62%),
    radial-gradient(760px 500px at 6% 108%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 60%);
}
/* Soft contact shadow under the pack. Deliberately NOT a `position` declaration on
   .bm-hero__media — that element's positioning is settled above and must stay there. */
.bm-hero__media::after {
  content: ""; position: absolute; inset: auto 8% -14px 8%; height: 34px; z-index: -1;
  border-radius: 50%; filter: blur(22px);
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* ZAC and anything else with no lifestyle photography leans on the numbers instead. */
.bm-result--stat .bm-result__fig { font-size: clamp(2.4rem, 2rem + 1.8vw, 3.1rem); }

/* ── closing band ──
   The product's own footer. It carries --accent, so every product ends on a
   different colour, and it is the last chance the page gets. */

.bm-close {
  position: relative; overflow: hidden;
  background: var(--accent-deep); color: #fff;
  padding-block: clamp(44px, 6vw, 76px);
}
.bm-close__wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 480px at 88% -20%, color-mix(in srgb, var(--accent) 60%, transparent) 0%, transparent 62%),
    radial-gradient(620px 420px at -8% 112%, color-mix(in srgb, var(--accent-2, var(--accent)) 34%, transparent) 0%, transparent 60%);
}
.bm-close__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
  gap: clamp(28px, 4.5vw, 64px); align-items: start;
}

.bm-close__eyebrow {
  font-size: var(--t-eye); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
}
.bm-close__h { font-size: var(--t-sec); margin-top: 12px; max-width: 18ch; color: #fff; }
.bm-close__p {
  margin-top: 16px; font-size: var(--t-lead); line-height: 1.6;
  color: rgba(255,255,255,.82); max-width: 50ch; text-wrap: pretty;
}

.bm-close__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bm-close__actions form { margin: 0; }
.bm-close__price {
  margin-left: 10px; padding-left: 11px; border-left: 1px solid var(--hair);
  font-weight: 700; opacity: .75;
}
.bm-close__price .amount { font-family: inherit; }
.bm-close__note { margin-top: 14px; font-size: .813rem; color: rgba(255,255,255,.6); }

.bm-close__points {
  list-style: none; margin: 30px 0 0; padding: 26px 0 0;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 26px;
}
.bm-close__points li {
  display: flex; align-items: center; gap: 10px;
  font-size: .875rem; color: rgba(255,255,255,.86);
}
.bm-close__points .bm-ico { color: rgba(255,255,255,.55); }

.bm-close__aside { display: grid; gap: 26px; }
.bm-close__navh {
  font-size: .688rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 12px;
}
.bm-close__nav ul { list-style: none; margin: 0; padding: 0; display: grid; }
.bm-close__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; text-decoration: none; font-size: .938rem;
  color: rgba(255,255,255,.88); border-bottom: 1px solid rgba(255,255,255,.12);
  transition: color .18s ease, padding-left .18s ease;
}
.bm-close__nav a:hover { color: #fff; padding-left: 5px; }
.bm-close__nav .bm-ico { width: 15px; height: 15px; opacity: .45; }
.bm-close__nav a:hover .bm-ico { opacity: 1; }

.bm-close__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-close__chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 11px; border-radius: 99px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  font-size: .813rem; font-weight: 500; color: #fff; text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.bm-close__chip:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); }
.bm-close__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--card-accent, #fff); flex: none; }

@media (max-width: 860px) {
  .bm-close__grid { grid-template-columns: 1fr; }
  .bm-close__aside { padding-top: 6px; }
}
@media (max-width: 480px) {
  .bm-close__actions { flex-direction: column; align-items: stretch; }
  .bm-close__actions .bm-btn, .bm-close__actions form { width: 100%; }
}