/* ==========================================================================
   American BioLabs — Brand Overrides
   Mobile-first | Navy/Blue palette | Cabinet Grotesk (display) + General Sans (body)
   ========================================================================== */

/* Brand fonts (Cabinet Grotesk, General Sans) are loaded via a preconnected
   Fontshare <link> in layout/theme.liquid <head>. */

/* --- Design Tokens --- */
:root {
  --brand-dark: #0A1628;
  --brand-medium: #102A4C;
  --brand-accent: #2B5E8C;

  --accent: #00AAFF;
  --accent-hover: #0088CC;
  --accent-bright: #33CCFF;
  --primary-light: #00AAFF;

  --bg-base: #FFFFFF;
  --bg-subtle: #F7F8FA;
  --bg-muted: #EDF0F5;
  --bg-warm: #EDF0F5;
  --bg-inactive: #D5DAE1;
  --bg-dark: #0A1628;
  --bg-darkest: #060E1A;

  --text-primary: #2C3340;
  --text-secondary: #5D6773;
  --text-tertiary: #8E96A0;
  --text-disabled: #BFC6CE;
  --text-inverse: #FFFFFF;

  --border-light: #E0E3E8;
  --border-dark: #C0C6CE;

  /* Fonts — brand stacks only (12 Aug 2026). Previously DM Sans / Playfair / Space Mono,
     which leaked monospace and serif type into every component reading these tokens. */
  --font-primary: 'General Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Cabinet Grotesk', sans-serif;
  --font-mono: 'General Sans', sans-serif;
  --font-serif: 'Cabinet Grotesk', sans-serif;

  --max-width: 1440px;
  --px-mobile: 16px;
  --px-tablet: 24px;
  --px-desktop: 48px;

  --py-sm: 48px;
  --py-md: 64px;
  --py-lg: 80px;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
}

@media (min-width: 750px) {
  :root {
    --py-sm: 56px;
    --py-md: 72px;
    --py-lg: 96px;
  }
}

/* --- Prevent horizontal overflow --- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* --- Global Typography --- */
body {
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 4vw, 40px); }
h3 { font-size: clamp(22px, 3vw, 32px); }

/* --- Tags / Badges --- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.tag--fill { background: var(--brand-medium); color: var(--text-inverse); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: 1px solid transparent;
  line-height: 1;
  letter-spacing: 0.04em;
}

.btn--light { background: var(--bg-base); color: var(--text-primary); border-color: var(--bg-base); }
.btn--light:hover { background: rgba(255,255,255,0.85); }

/* --- Section Containers --- */
.section-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--px-mobile);
  padding-right: var(--px-mobile);
}
@media (min-width: 750px) {
  .section-wrap { padding-left: var(--px-tablet); padding-right: var(--px-tablet); }
}
@media (min-width: 990px) {
  .section-wrap { padding-left: var(--px-desktop); padding-right: var(--px-desktop); }
}

/* --- Marquee --- */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- Rounded inset pattern (hero + footer) --- */
@media (min-width: 990px) {
  .inset-rounded { padding: 8px; }
  .inset-rounded > * { border-radius: 12px; overflow: hidden; }
}

/* --- Mobile-first fixes --- */
* { box-sizing: border-box; }
img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 749px) {
  .btn { min-height: 44px; }
  a, button { -webkit-tap-highlight-color: transparent; }
}

/* ==========================================================================
   Homepage banner — artwork fill (19 Aug 2026)

   The banner is a single-cell grid: a ratio spacer sets the minimum height,
   and the overlay copy can push the row taller on narrow screens. The <img>
   is already height:100%, but a <picture> element is inline by default with
   auto height, so the image had nothing to stretch against and the artwork
   stopped short of the grown row. Making the wrapper and the <picture> full
   height lets object-fit: cover do its job.
   ========================================================================== */
.abl-banner__media,
.abl-banner__link {
  height: 100%;
  min-height: 100%;
}

/* ==========================================================================
   PDP gallery thumbnails (14 Aug 2026)

   pdp-main.liquid sets .pmg__thumb to 28px and .pmg__thumbs to 6px/10px
   padding in an inline <style>. That inline block is later in the document
   than this stylesheet, so a matching single-class selector would lose on
   source order. Every rule below is therefore scoped through the parent
   (.pmg) for a 0,2,0 specificity that wins outright — no !important.

   Every breakpoint must remain a single row. Each thumbnail shares the
   available width and is capped per breakpoint, so adding product media makes
   the thumbnails progressively smaller instead of creating a second row.

   IMPORTANT: the desktop grid row below is sized from these numbers. Any
   change to thumb size, row padding or gap must be mirrored there, or the
   secondary column will slide under the gallery.
   ========================================================================== */
.pmg .pmg__thumbs {
  flex-wrap: nowrap;
  justify-content: center;
}

/* Mobile */
@media (max-width: 749px) {
  .pmg .pmg__thumbs {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    width: 100%;
    max-width: 100%;
  }

  .pmg .pmg__thumbs .pmg__thumb {
    flex: 1 1 0;
    min-width: 0;
    max-width: 58px;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
  }
}

/* Tablet and small desktop — gallery column is ~427px at 990px (ceiling ~59px) */
@media (min-width: 750px) {
  .pmg .pmg__thumbs {
    gap: 8px;
    padding: 8px 10px;
  }

  .pmg .pmg__thumbs .pmg__thumb {
    flex: 1 1 0;
    min-width: 0;
    max-width: 58px;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 9px;
  }
}

/* Large desktop — gallery column widens to ~552px (ceiling ~80px) */
@media (min-width: 1200px) {
  .pmg .pmg__thumbs {
    gap: 10px;
    padding: 10px;
  }

  .pmg .pmg__thumbs .pmg__thumb {
    max-width: 76px;
    border-radius: 10px;
  }
}

/* ==========================================================================
   PDP desktop grid — gallery row height (14 Aug 2026)

   pdp-main.liquid sizes the first grid row as
     calc((min(100vw, 1240px) - 136px) / 2 + 52px)
   i.e. the square slide plus a hardcoded 52px allowance for the thumbnail
   rail (28px thumb + 12px padding + 12px margin-top). That allowance no
   longer matches the enlarged thumbnails, so the gallery overflowed its
   track and the secondary column (tabs) rendered underneath it.

   Rail height = thumb + vertical row padding + the rail's 12px margin-top:
     990–1199px : 58 + 16 + 12 =  86px
     1200px+    : 76 + 20 + 12 = 108px

   Doubling the class keeps specificity at 0,2,0 so this beats the section's
   inline rule without !important. Mobile stacks and is unaffected.
   ========================================================================== */
@media (min-width: 990px) {
  .pdp-layout.pdp-layout {
    grid-template-rows: calc((min(100vw, 1240px) - 136px) / 2 + 86px) auto;
  }
}

@media (min-width: 1200px) {
  .pdp-layout.pdp-layout {
    grid-template-rows: calc((min(100vw, 1240px) - 136px) / 2 + 108px) auto;
  }
}

/* Lock touch scaling on phones/tablets. The viewport tag carries the primary
   instruction; touch-action also removes Safari's temporary pinch-out bounce. */
@media (pointer: coarse) {
  html,
  body {
    touch-action: pan-x pan-y;
  }
}

  :root {
    --brand-dark: #0A1628;
    --brand-medium: #102A4C;
    --brand-accent: #2B5E8C;
    --accent: #00AAFF;
    --accent-hover: #0088CC;
    --accent-bright: #33CCFF;
    --primary-light: #00AAFF;
    --bg-base: #FFFFFF;
    --bg-subtle: #F7F8FA;
    --bg-muted: #E8ECF1;
    --bg-warm: #E8ECF1;
    --text-primary: #2C3340;
    --text-secondary: #6B7280;

    /* Typography aliases — point the ABL sections at the brand fonts.
       12 Aug 2026: --font-mono previously resolved to a system monospace stack, which is
       why the footer / header nav / announcement bar (all reading var(--font-mono))
       rendered in monospace no matter what settings were changed. All aliases now land
       on the brand stacks: body 'General Sans', display 'Cabinet Grotesk'. */
    --font-primary: var(--font-body--family, 'General Sans', sans-serif);
    --font-display: var(--font-heading--family, 'Cabinet Grotesk', sans-serif);
    --font-subheading: var(--font-subheading--family, 'General Sans', sans-serif);
    --font-serif: var(--font-heading--family, 'Cabinet Grotesk', sans-serif);
    --font-mono: 'General Sans', sans-serif;

    /* Horizontal page padding used by the ABL sections. */
    --px-mobile: 16px;
    --px-tablet: 24px;
    --px-desktop: 48px;

    /* Vertical section padding — ingredients + faq had none because these were undefined. */
    --py-md: 56px;
    --py-sm: 36px;

    /* Borders referenced by the before/after carousel. */
    --border-light: rgba(10, 22, 40, 0.10);
    --border-dark: rgba(10, 22, 40, 0.18);
  }

:root{--font-display:'Cabinet Grotesk',sans-serif;--font-body--family:'General Sans',sans-serif;--font-subheading--family:'General Sans',sans-serif;--font-heading--family:'Cabinet Grotesk',sans-serif;--font-accent--family:'General Sans',sans-serif;--abl-ink:#0A1628;--abl-hair:#E6E7E9;--abl-chip:#F6F6F5;}
    /* Recharge subscription widget (app block) injects its own styles with off-brand
       fonts. Scope it back to the brand type + ink without !important — the
       #MainContent id keeps specificity above the widget's class-based rules.

       .shopify-app-block is the wrapper Shopify puts around every app block, so this
       reaches the Recharge widget wherever it is placed (on the PDP it lands inside
       .pi__block in sections/pdp-main.liquid). It is deliberately NOT scoped to
       .pi__block or [id^="shopify-block-"] directly — those also wrap native theme
       blocks, and a (1,1,0) selector there would outrank the section's own
       .pi__title / .pi__chip-quote rules and strip their Cabinet Grotesk. */
    #MainContent .shopify-app-block, #MainContent .shopify-app-block *,
    #MainContent .rc_widget, #MainContent .rc_widget *,
    #MainContent .rc-widget, #MainContent .rc-widget *,
    #MainContent .rtx-widget, #MainContent .rtx-widget *,
    #MainContent [id*="recharge"], #MainContent [id*="recharge"] *,
    #MainContent [class*="recharge"], #MainContent [class*="recharge"] *,
    #MainContent [class*="rc_widget"], #MainContent [class*="rc_widget"] * {
      font-family: 'General Sans', sans-serif;
    }
    #MainContent .shopify-app-block,
    #MainContent .rc_widget, #MainContent .rc-widget,
    #MainContent .rtx-widget, #MainContent [id*="recharge"],
    #MainContent [class*="recharge"],
    #MainContent [class*="rc_widget"] {
      color: #1D2530;
    }

  .announcement-bar {
    background-color: #F7F8FA;
    color: #454e59;
    overflow: hidden;
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    max-width: 100vw;
  }

  @media (min-width: 990px) {
    .announcement-bar {
      height: 40px;
    }
  }

  .announcement-bar__track {
    display: flex;
    width: max-content;
    animation: marquee 45s linear infinite;
  }

  @media (min-width: 990px) {
    .announcement-bar__track {
      animation-duration: 55s;
    }
  }

  .announcement-bar:hover .announcement-bar__track {
    animation-play-state: paused;
  }

  /* Scroll performance: this bar sits at the very top of the page, so it is
     off-screen for effectively the whole session after the first scroll — yet the
     compositor kept running the translateX animation the entire time. The
     IntersectionObserver below toggles data-ab-paused so it stops when not visible. */
  .announcement-bar__track[data-ab-paused] {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .announcement-bar__track {
      animation: none !important;
    }
  }

  .announcement-bar__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 2;
    pointer-events: none;
  }

  @media (min-width: 990px) {
    .announcement-bar__fade {
      width: 32px;
    }
  }

  .announcement-bar__fade--left {
    left: 0;
    background: linear-gradient(to right, #F7F8FA, transparent);
  }

  .announcement-bar__fade--right {
    right: 0;
    background: linear-gradient(to left, #F7F8FA, transparent);
  }

  .announcement-bar__items {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
  }

  .announcement-bar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    white-space: nowrap;
    font-family: 'General Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #454e59;
  }

  @media (min-width: 990px) {
    .announcement-bar__item {
      padding: 0 48px;
    }
  }

  .announcement-bar__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .announcement-bar__icon svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #0A1628;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .pdp-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    max-width: var(--max-width);
    margin: 0 auto;
    align-items: start;
    padding-top: 40px;
    padding-bottom: 0px;
  }
  .pdp-layout__gallery { position: static; min-width: 0; }
  .pdp-layout__info    { min-width: 0; padding: 24px 20px 0; order: 2; }
  .pdp-layout__gallery { order: 1; }
  .pdp-layout__secondary { min-width: 0; padding: 18px 20px 24px; order: 3; }
  /* Header-to-gallery gap. The section wrapper is always flush, so the visible
     top spacing comes from .pdp-layout's own padding and pad_top stays in control.
     The .pdp-layout reset below is MOBILE-ONLY: left unscoped it also fired on
     desktop, where its !important cancelled the pad_top set in the 990px block. */
  #shopify-section-template--21378321940589__pdp_main { margin-block-start: 0 !important; padding-block-start: 0 !important; }
  .pdp-layout__gallery, .pdp-layout__gallery > .pmg { margin-top: 0 !important; padding-top: 0 !important; }
  @media (max-width: 989px) {
    #shopify-section-template--21378321940589__pdp_main > .pdp-layout { margin-top: 0 !important; padding-top: 0 !important; }
    .content-for-layout > .shopify-section:first-child { margin-top: 0 !important; padding-top: 0 !important; }
  }
  @media (min-width: 990px) {
    .pdp-layout {
      grid-template-columns: 1fr 1fr;
      /* The gallery is a square slide plus a 52px thumbnail rail. A fixed first
         track prevents a taller buy box from pushing the left details downward. */
      grid-template-rows: calc((min(100vw, 1240px) - 136px) / 2 + 52px) auto;
      column-gap: 56px;
      row-gap: 28px;
      padding: 40px var(--px-desktop) 0px;
    }
    .pdp-layout__gallery { position: static; grid-column: 1; grid-row: 1; }
    .pdp-layout__info { padding: 0; grid-column: 2; grid-row: 1 / span 2; }
    .pdp-layout__secondary { padding: 0; grid-column: 1; grid-row: 2; }
  }

  .pi { font-family: 'General Sans',sans-serif; color: #0A1628; }
  .pi__block { margin-bottom: calc(18px * 100 / 100); }
  .pi__block:last-child { margin-bottom: 0; }

  /* ---- Hero testimonial chip ---- */
  .pi__chip {
    position: relative;
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 13px 20px; background: #FFFFFF;
    border: 1px solid #E6E7E9; border-radius: 10px;
    margin-top: -8px; margin-bottom: calc(20px * 100 / 100);
  }
  .pi__chip-photo {
    width: 28px; height: 28px; border-radius: 50%;
    background: #EFF0EF; color: #0A1628;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .pi__chip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pi__chip-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
  .pi__chip-quote {
    font-family: 'General Sans',sans-serif; font-style: normal;
    font-size: 12.5px; font-weight: 500; line-height: 1.4; color: #1D2530; margin: 0;
  }
  .pi__chip-cite {
    font-family: 'General Sans',sans-serif; font-style: normal;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 11.5px; color: #66707B; line-height: 1.4;
  }
  .pi__chip-cite-name { font-weight: 500; color: #39424C; min-width: 0; }
  .pi__chip-verified {
    position: absolute; bottom: -8px; right: 12px;
    display: inline-flex; align-items: center; gap: 4px;
    background: #FFFFFF; border: 1px solid #E6E7E9; border-radius: 999px;
    padding: 2px 8px;
    font-family: 'General Sans',sans-serif; font-size: 10px; font-weight: 500; color: #66707B;
    line-height: 1.4; white-space: nowrap;
  }
  .pi__chip-verified svg { flex: none; display: block; }

  /* ---- Eyebrows / kicker row ---- */
  .pi__badges {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .13em;
    text-transform: uppercase; color: #555F6A;
  }
  .pi__badges-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #00AAFF; }
  .pi__tag { display: inline; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; }
  .pi__tag--fill    { background: none; color: inherit; }

  /* ---- Title / lead sentence ---- */
  .pi__title {
    font-family: 'Cabinet Grotesk',sans-serif; font-size: 27px;
    font-weight: 700; letter-spacing: -.015em; color: #0A1628; line-height: 1.08; margin: 0;
  }
  .pi__badges.pi__block, .pi__title.pi__block, .pi__rating.pi__block { margin-bottom: calc(9px * 100 / 100); }
  .pi__desc {
    font-family: 'General Sans',sans-serif; font-size: 14.5px;
    color: #454E59; line-height: 1.6; margin: 0;
  }
  .pi__desc p { margin: 0; }
  .pi__desc strong, .pi__desc b { color: #0A1628; font-weight: 500; }
  .pi__desc--lead { font-weight: 400; color: #454E59; }
  .pi__desc--lead p { margin: 0; }
  .pi__desc.pi__block { margin-bottom: calc(18px * 100 / 100); }

  /* ---- Rating row ---- */
  .pi__rating { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; }
  .pi__rating-stars { flex: none; display: block; }
  .pi__rating-value { font-weight: 600; font-size: 13.5px; color: #0A1628; }
  .pi__rating-count, .pi__rating a {
    color: #66707B; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: #CBD0D5;
  }

  /* ---- Hero benefit bullets ---- */
  .pi__hero-benefits { list-style: none; padding: 0; margin: 0; }
  /* Breathing room between the bullets and the next block */
  .pi__block.pi__hero-benefits { margin-bottom: calc(24px * 100 / 100); }
  .pi__hero-benefits li {
    position: relative; padding-left: 30px;
    font-family: 'General Sans',sans-serif; font-size: 14px; line-height: 1.5;
    color: #1D2530; margin-bottom: calc(10px * 100 / 100);
  }
  .pi__hero-benefits li:last-child { margin-bottom: 0; }
  .pi__hero-benefits li strong { font-weight: 600; color: #1D2530; }
  .pi__check {
    position: absolute; left: 0; top: 1px;
    width: 20px; height: 20px; flex-shrink: 0;
    background: #EFF0EF; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .pi__check svg { width: 11px; height: 11px; display: block; fill: none; stroke: #0A1628; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

  /* Every supply variant has exactly one eligible Recharge plan. Keep that plan
     selected for checkout, but do not show a redundant one-option frequency UI. */
  recharge-subscription-widget::part(rc-plans__label),
  recharge-subscription-widget::part(rc-plans-button-group),
  recharge-subscription-widget::part(rc-plans-button-list),
  recharge-subscription-widget::part(rc-plans-button),
  recharge-subscription-widget::part(rc-plans-button__selected),
  recharge-subscription-widget::part(rc-plans-radio-button),
  recharge-subscription-widget::part(rc-plans-dropdown),
  recharge-subscription-widget::part(rc-plans-select) {
    display: none !important;
  }

  /* ---- Ink primary CTA ---- */
  .pi__atc {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #0A1628; color: #FFFFFF; border: none;
    border-radius: 10px; cursor: pointer; padding: 18px;
    font-family: 'General Sans',sans-serif; font-size: 15.5px; font-weight: 600;
    transition: background var(--duration-fast) var(--ease);
    margin-bottom: 12px;
  }
  .pi__atc svg { width: 15px; height: 15px; flex-shrink: 0; }
  .pi__atc:hover { background: #132743; }
  .pi__atc:disabled { background: var(--border-dark); cursor: not-allowed; }

  /* ---- Under-CTA trust line (single dynamic line) ---- */
  .pi__trust-line {
    display: flex; flex-wrap: nowrap; white-space: nowrap; align-items: center; justify-content: center; gap: 10px;
    font-family: 'General Sans',sans-serif; font-size: 13px; font-weight: 500;
    line-height: 1.4; color: #454E59; opacity: 1; text-align: center;
  }
  @media (max-width: 380px) {
    .pi__trust-line { font-size: 12px; gap: 8px; }
  }

  /* ---- Tabs ---- */
  .pi__tabs { margin-top: 0; }
  .pi__tab-bar {
    display: grid;
    grid-template-columns: repeat(var(--pi-tab-count, 3), minmax(0, 1fr));
    min-height: 48px;
    border-bottom: 1px solid var(--abl-hair, #E6E7E9);
    gap: 0;
    overflow: visible;
  }
  .pi__tab-btn {
    background: none; border: none;
    border-bottom: 2px solid transparent; padding: 7px 8px;
    font-family: 'General Sans',sans-serif; font-size: 14px; font-weight: 500;
    color: var(--text-tertiary); cursor: pointer;
    margin-bottom: -1px; min-width: 0;
    white-space: normal; text-align: center; line-height: 1.25;
    transition: color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
    min-height: 48px; display: flex; align-items: center; justify-content: center;
  }
  @media (max-width: 749px) {
    .pi__tab-btn { font-size: 12px; padding: 7px 4px; letter-spacing: -0.01em; }
  }
  @media (max-width: 480px) {
    .pi__tab-btn { font-size: 11.5px; }
  }
  .pi__tab-btn.is-active { color: var(--text-primary); border-bottom-color: var(--brand-dark); }
  .pi__tab-panel { display: none; padding: 20px 0; font-size: 15px; line-height: 1.7; color: #1D2530; }
  .pi__tab-panel.is-active { display: block; }
  .pi__tab-panel ul { margin: 0 0 16px; padding-left: 20px; }
  .pi__tab-panel li { margin-bottom: 6px; }
  .pi__benefit-list {
    list-style: none; margin: 0; padding: 4px 0 0;
  }
  .pi__benefit-row {
    display: grid; grid-template-columns: calc(var(--pi-benefit-icon-size, 20px) + 16px) minmax(0, 1fr);
    gap: 12px; align-items: start; padding: 16px 2px;
  }
  .pi__benefit-list--dividers .pi__benefit-row + .pi__benefit-row { border-top: 1px solid #E6E7E9; }
  .pi__benefit-icon {
    width: calc(var(--pi-benefit-icon-size, 20px) + 16px);
    height: calc(var(--pi-benefit-icon-size, 20px) + 16px);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pi-benefit-icon-color, #0A1628);
    background: #EFF0EF; border-radius: 50%;
    transform: translateX(-4px);
  }
  .pi__benefit-icon svg {
    width: var(--pi-benefit-icon-size, 20px); height: var(--pi-benefit-icon-size, 20px); display: block;
  }
  .pi__benefit-title {
    margin: 0 0 3px; font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; color: #0A1628;
  }
  .pi__benefit-copy { margin: 0; font-size: 13.5px; line-height: 1.55; color: #555F6A; }
  .pi__benefit-copy strong { color: #0A1628; font-weight: 600; }
  @media (min-width: 990px) {
    .pi__benefit-title { font-size: 16px; }
    .pi__benefit-copy { font-size: 14px; }
  }
  @media (max-width: 479px) {
    .pi__benefit-row { gap: 10px; padding: 15px 0; }
  }
  .pi__jump-link {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
    margin-top: 14px; padding: 8px 11px;
    background: #FFFFFF; border: 1px solid #CFD3D7; border-radius: 6px;
    font-family: 'General Sans', sans-serif; color: #39424C; cursor: pointer;
    text-align: left; transition: border-color .15s ease, box-shadow .15s ease;
  }
  .pi__jump-link:hover { border-color: #00AAFF; box-shadow: 0 2px 8px rgba(0,170,255,.15); }
  .pi__jump-link:focus-visible { outline: 2px solid #0079B8; outline-offset: 2px; }
  .pi__jump-kicker { flex: none; font-size: 10px; font-weight: 700; color: #0079B8; letter-spacing: .02em; }
  .pi__jump-divider { width: 1px; height: 12px; flex: none; background: #E1E3E5; }
  .pi__jump-label { min-width: 0; font-size: 11.5px; font-weight: 500; line-height: 1.35; }
  .pi__jump-link svg { width: 11px; height: 11px; flex: none; transition: transform .15s ease; }
  .pi__jump-link:hover svg { transform: translateY(2px); }

  /* ---- Will-it-work card ---- */
  .pi__wiw {
    background: var(--abl-chip, #F6F6F5); border: 1px solid var(--abl-hair, #E6E7E9);
    border-radius: 10px; padding: 16px;
  }
  .pi__wiw-title { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
  .pi__wiw-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 12px; }
  .pi__wiw-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'General Sans',sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--brand-dark); background: none; border: none; cursor: pointer; padding: 0;
    text-decoration: underline; text-underline-offset: 3px;
  }

  /* ============================================================
     DESKTOP COMPOSITION PASS — 990px and up.
     Appended last so it wins on source order at matching
     specificity. No !important and no copy changes.
     ============================================================ */
  @media (min-width: 990px) {
    /* Container: 1240px max-width, centred, 40px side padding.
       Vertical padding is deliberately left under the merchant's
       pad_top / pad_bottom section settings. */
    .pdp-layout {
      max-width: 1240px;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: calc((min(100vw, 1240px) - 136px) / 2 + 52px) auto;
      column-gap: 56px;
      row-gap: 28px;
      align-items: start;
      padding-left: 40px;
      padding-right: 40px;
    }

    /* Gallery/details column: one calm reading rail with no nested sticky trap. */
    .pdp-layout__gallery {
      width: 100%;
      max-width: 572px;
    }

    .pdp-layout__secondary .pi__tabs {
      background: #FFFFFF;
      border: 1px solid #E6E7E9;
      border-radius: 14px;
      padding: 8px 20px 4px;
    }

    /* Buy box (right): a contained surface, aligned with the gallery. */
    .pdp-layout__info {
      width: 100%;
      max-width: 572px;
    }
    .pdp-layout__info > .pi {
      background: #FFFFFF;
      border: 1px solid #E6E7E9;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 12px 36px rgba(10, 22, 40, 0.05);
    }

    /* Headings scale up and are actually reached at 990px+ */
    .pi__title { font-size: 36px; line-height: 1.06; letter-spacing: -.02em; }
    .pi__badges.pi__block, .pi__title.pi__block, .pi__rating.pi__block { margin-bottom: calc(12px * 100 / 100); }
    .pi__wiw-title { font-size: 19px; line-height: 1.3; }

    /* Body copy: 16px / 1.65, paragraph blocks capped near 68ch */
    .pi__desc { font-size: 16px; line-height: 1.65; max-width: 68ch; }
    .pi__tab-panel { font-size: 16px; line-height: 1.65; }
    .pi__tab-panel p, .pi__tab-panel li { max-width: 68ch; }
    .pi__wiw-desc { font-size: 15px; line-height: 1.6; max-width: 68ch; }
    .pi__hero-benefits li { font-size: 15px; line-height: 1.6; }
    .pi__urgency-text, .pi__recurring { font-size: 13.5px; line-height: 1.6; }

    /* Variant swatches: true equal-width grid, heights from the grid */
    .pi__vimages-row {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
    }
    .pi__vimage-img { max-width: 72px; }

  }

  @media (prefers-reduced-motion: reduce) {
    .pi__tab-btn,
    .pi__jump-link,
    .pi__jump-link svg { transition: none; }
  }

  /* ================================================================
     MOBILE-FIRST: Carousel (default)
     ================================================================ */
  .pmg { position: relative; }

  .pmg__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .pmg__track::-webkit-scrollbar { display: none; }

  .pmg__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--bg-subtle);
    overflow: hidden;
  }
  .pmg__slide img,
  .pmg__slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Badge overlay */
  .pmg__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--brand-medium);
    color: var(--text-inverse);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 4px;
  }

  /* Arrow buttons */
  .pmg__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(10, 22, 40, 0.16);
    box-shadow: 0 1px 5px rgba(10, 22, 40, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
    padding: 0;
  }
  .pmg__arrow:disabled {
    opacity: 0.28;
    cursor: default;
  }
  .pmg__arrow--prev { left: 10px; }
  .pmg__arrow--next { right: 10px; }
  .pmg__arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: #0A1628;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .pmg__arrow:focus-visible {
    outline: 2px solid rgba(10, 22, 40, 0.78);
    outline-offset: 3px;
  }
  .pmg__thumb:focus-visible {
    outline: 2px solid #00AAFF;
    outline-offset: 3px;
  }
  @media (hover: hover) {
    .pmg__arrow:not(:disabled):hover {
      background: rgba(255, 255, 255, 0.26);
      border-color: rgba(10, 22, 40, 0.28);
      box-shadow: 0 3px 12px rgba(10, 22, 40, 0.12);
    }
  }

  /* Thumbnail pagination bar */
  .pmg__thumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 10px auto 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    width: fit-content;
  }
  .pmg__thumb {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: var(--bg-subtle);
    flex-shrink: 0;
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
  }
  .pmg__thumb.is-active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
  }
  .pmg__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Desktop retains the same carousel with mouse drag support. */
  @media (min-width: 990px) {
    /* NOTE: do NOT use the `overflow` shorthand here. It would reset
       overflow-x back to `hidden` and kill user swiping/scrolling on
       desktop — the track would only ever move via scrollTo(), which is
       why dragging appeared to snap back to the first image. */
    .pmg__track {
      border-radius: 12px;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .pmg__slide { border-radius: 12px; }
    .pmg__thumbs { margin-top: 12px; }

    /* Drag affordance — only applied when there's more than one slide */
    .pmg__track.is-swipeable { cursor: grab; }
    .pmg__track.is-dragging {
      cursor: grabbing;
      user-select: none;
      -webkit-user-select: none;
    }

  }

  @media (prefers-reduced-motion: reduce) {
    .pmg__arrow,
    .pmg__thumb,
    .pmg__video-btn { transition: none; }
  }

    .ban-template--21378321940589__batch_notice {
      position: relative;
      margin: -12px 0 4px;
      padding: 14px 14px 15px;
      background: #FFFFFF;
      border: 1px solid #E6E7E9;
      border-radius: 10px;
      font-family: 'General Sans', sans-serif;
      color: #454E59;
      -webkit-font-smoothing: antialiased;
    }
    @media (min-width: 750px) {
      .ban-template--21378321940589__batch_notice { padding: 18px 20px 19px; margin: -12px 0 4px; }
    }

    .ban-template--21378321940589__batch_notice__head {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: 0 0 6px;
    }
    .ban-template--21378321940589__batch_notice__eyebrow {
      font-family: 'General Sans', sans-serif;
      font-size: 10.5px;
      line-height: 1.25;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      font-weight: 600;
      color: #555F6A;
      margin: 0;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .ban-template--21378321940589__batch_notice__eyebrow::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00AAFF; flex: 0 0 6px;
    }

    .ban-template--21378321940589__batch_notice__heading {
      font-family: 'Cabinet Grotesk', sans-serif;
      font-size: 20px;
      line-height: 1.12;
      font-weight: 700;
      letter-spacing: -0.015em;
      color: #0a1628;
      margin: 0 0 7px;
    }
    @media (min-width: 750px) {
      .ban-template--21378321940589__batch_notice__heading { font-size: 22px; }
    }

    .ban-template--21378321940589__batch_notice__body {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
    }
    @media (min-width: 750px) {
      .ban-template--21378321940589__batch_notice__body { font-size: 15px; }
    }
    .ban-template--21378321940589__batch_notice__body p { margin: 0; }
    .ban-template--21378321940589__batch_notice__body p + p { margin-top: 8px; }
    .ban-template--21378321940589__batch_notice__body strong { color: #0a1628; font-weight: 600; }

    /* Checklist — replaces the old single ship-by bar */
    .ban-template--21378321940589__batch_notice__checks {
      list-style: none;
      margin: 13px 0 0;
      padding: 13px 0 0;
      border-top: 1px solid #E6E7E9;
    }
    @media (min-width: 750px) {
      .ban-template--21378321940589__batch_notice__checks { margin-top: 15px; padding-top: 15px; }
    }
    .ban-template--21378321940589__batch_notice__checks li {
      display: grid;
      grid-template-columns: 16px 1fr;
      gap: 9px;
      align-items: start;
      font-size: 14px;
      line-height: 1.45;
      color: #0a1628;
      font-weight: 500;
      margin-bottom: 8px;
    }
    .ban-template--21378321940589__batch_notice__checks li:last-child { margin-bottom: 0; }
    @media (min-width: 750px) {
      .ban-template--21378321940589__batch_notice__checks li { font-size: 15px; }
    }
    .ban-template--21378321940589__batch_notice__checks svg {
      width: 16px; height: 16px; flex: none; margin-top: 2px;
      fill: none; stroke: #0a1628; stroke-width: 2.2;
      stroke-linecap: round; stroke-linejoin: round;
    }

    /* Compact strip that sits directly above the add-to-cart button */
    .ban-template--21378321940589__batch_notice__strip {
      display: block;
      margin: 0 0 10px;
      padding: 9px 12px;
      background: #f6f6f5;
      border-radius: 6px;
      font-family: 'General Sans', sans-serif;
      font-size: 11.5px;
      line-height: 1.4;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      font-weight: 700;
      color: #0a1628;
      text-align: center;
      text-wrap: balance;
      -webkit-font-smoothing: antialiased;
    }
    @media (min-width: 750px) {
      .ban-template--21378321940589__batch_notice__strip { font-size: 13px; letter-spacing: 0.9px; padding: 10px 14px; margin-bottom: 12px; }
    }
  

  /* ================================================================
     PDP Before & After — Mobile-first
     Native CSS scroll-snap carousel with progress bar & arrows

     30 Jul 2026 fixes:
     - scroll-padding-inline added: scroll-snap ignores a scroller's `padding`,
       so the first card was snapping flush to the viewport edge on mobile
     - card width switched from calc(100vw - 52px) to calc(100% - 24px) so the
       vertical scrollbar can't skew it and the gutters stay even
     - --max-width given a fallback (it is not defined anywhere in the theme)

     12 Aug 2026 — assembly 02 restyle (visual treatment only):
     - section: 28px vertical padding, 1px #ECEDED top border, 14px rhythm
     - heading: 'Cabinet Grotesk' 24px/1.1 700 -.01em #0A1628
     - cards: 1px #E6E7E9 border, radius 10, overflow hidden, flush image pair
       on a 2-col grid with 2px #E6E7E9 gutter, overlaid BEFORE/AFTER tags
     - caption content inset 14px with small palette type

     12 Aug 2026 — desktop pass (>=990px CSS only, mobile untouched):
     - 1200px container, 40px gutters, 80px vertical padding
     - carousel becomes a static 3-up grid (overflow visible, snap off);
       arrows + progress bar are mobile-only affordances
     ================================================================ */
  .ba {
    padding: 28px 0;
    border-top: 1px solid #ECEDED;
    background: #ffffff;
    position: relative;
    font-family: 'General Sans', sans-serif;
  }

  /* The desktop buy box ends on the same visual baseline as this section. Its top
     hairline looked like an accidental rule attached to the box; keep the mobile
     divider, remove it only from the desktop composition. */
  @media (min-width: 990px) {
    .ba { border-top: 0; }
  }

  .ba__header {
    max-width: var(--max-width, 1440px);
    margin: 0 auto 14px;
    padding: 0 var(--px-mobile, 20px) 10px;
  }

  .ba__heading {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #0A1628;
    margin: 0;
  }

  /* --- Carousel wrapper (relative for arrows) --- */
  .ba__carousel {
    position: relative;
    max-width: var(--max-width, 1440px);
    margin: 0 auto;
  }

  /* --- Track --- */
  .ba__track {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 var(--px-mobile, 20px);
    scroll-padding-inline: var(--px-mobile, 20px);
  }
  .ba__track::-webkit-scrollbar { display: none; }

  /* --- Card --- */
  .ba__card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 min(88%, 344px);
    scroll-snap-align: start;
    border-radius: 10px;
    border: 1px solid #E6E7E9;
    overflow: hidden;
    padding: 0 0 34px;
    background: #fff;
  }

  /* --- Image pair container: 2-col grid, 2px gap, #E6E7E9 gutter --- */
  .ba__images {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px;
    background: #E6E7E9;
    overflow: hidden;
    border-radius: 9px 9px 0 0;
  }

  .ba__img-col {
    position: relative;
    min-width: 0;
  }

  .ba__img-wrap {
    width: 100%;
    aspect-ratio: 312 / 400;
    overflow: hidden;
    background: #fff;
  }
  .ba__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Overlaid BEFORE / AFTER tag */
  .ba__label {
    position: absolute;
    left: 8px;
    top: 8px;
    background: rgba(10, 22, 40, 0.75);
    color: #fff;
    font-family: 'General Sans', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    line-height: 1;
    margin: 0;
    text-align: left;
    pointer-events: none;
  }

  /* Composite before/after — single image with overlaid labels */
  .ba__composite {
    position: relative; width: 100%; aspect-ratio: 800 / 500;
    overflow: hidden; background: #fff; border-radius: 9px 9px 0 0;
  }
  .ba__composite img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ba__clabel {
    position: absolute; top: 8px; font-family: 'General Sans', sans-serif; font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(10, 22, 40, 0.75);
    padding: 3px 8px; border-radius: 4px; line-height: 1; pointer-events: none;
  }
  .ba__clabel--before { left: 8px; }
  .ba__clabel--after { right: 8px; }

  /* The composite assets contain both photos in one file. Keep the directional
     cue desktop-only so the existing mobile card composition remains untouched. */
  .ba__compare-arrow { display: none; }

  /* --- Quote --- */
  .ba__quote {
    font-family: 'General Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    font-style: normal;
    line-height: 1.5;
    color: #0A1628;
    margin: 12px 16px 0;
  }

  /* --- Attribution --- */
  .ba__attribution {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: auto 16px 0;
    padding-top: 10px;
    min-height: 38px;
    font-size: 12px;
    color: #66707B;
  }

  .ba__customer-name {
    font-size: 12px;
    font-weight: 500;
    color: #66707B;
    line-height: 1.3;
    min-width: 0;
  }

  .ba__verified {
    position: absolute;
    right: 12px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    background: #FFFFFF;
    border: 1px solid #E6E7E9;
    border-radius: 999px;
    padding: 2px 8px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 500;
    color: #66707B;
    line-height: 1.4;
  }
  .ba__verified svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    display: block;
  }

  /* --- Arrow buttons --- */
  .ba__arrow {
    display: flex;
    position: absolute;
    top: 32%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 5px rgba(10, 22, 40, 0.1);
    color: #0A1628;
    border: 1px solid rgba(10, 22, 40, 0.16);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: opacity 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
  }
  .ba__arrow:hover {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(10, 22, 40, 0.28);
    box-shadow: 0 3px 12px rgba(10, 22, 40, 0.12);
  }
  .ba__arrow svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ba__arrow--prev { left: 10px; }
  .ba__arrow--next { right: 10px; }
  .ba__arrow[aria-disabled="true"] {
    opacity: 0;
    pointer-events: none;
  }

  /* --- Progress bar --- */
  .ba__progress {
    max-width: var(--max-width, 1440px);
    margin: 14px auto 0;
    padding: 0 var(--px-mobile, 20px);
  }
  .ba__progress-track {
    width: 100%;
    height: 2px;
    background: #E6E7E9;
    border-radius: 1px;
    position: relative;
    overflow: hidden;
  }
  .ba__progress-thumb {
    height: 100%;
    background: #0A1628;
    border-radius: 1px;
    position: absolute;
    left: 0;
    top: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ba__arrow { transition: none; }
  }

  /* ---- V1.1 additions: bullets, subtitle, clinical backing ---- */
  .ba__bullets { margin: 10px 16px 0; }
  .ba__bullets ul { list-style: none; padding: 0; margin: 0; }
  .ba__bullets li {
    position: relative; padding-left: 18px;
    font-size: 14px; color: #454E59; line-height: 1.5; margin-bottom: 4px;
  }
  .ba__bullets li:before {
    content: "✓"; position: absolute; left: 0; top: 0;
    color: #1D2530; font-weight: 700;
  }
  .ba__subtitle {
    display: block; font-family: 'General Sans', sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
    color: #66707B; margin-top: 2px;
  }

  /* ================================================================
     TABLET (768px+)
     ================================================================ */
  @media (min-width: 768px) {
    .ba__header { padding: 0 var(--px-tablet, 24px); }
    .ba__track {
      padding: 0 var(--px-tablet, 24px) 10px;
      scroll-padding-inline: var(--px-tablet, 24px);
      gap: 20px;
    }
    .ba__card { flex: 0 0 300px; }
    .ba__progress { padding: 0 var(--px-tablet, 24px); }
    .ba__arrow { width: 34px; height: 34px; }
  }

  /* ================================================================
     DESKTOP (990px+)
     ================================================================ */
  @media (min-width: 990px) {
    .ba {
      padding: 80px 0;
    }
    .ba__header {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 28px;
      padding-left: 40px;
      padding-right: 40px;
      padding-bottom: 0;
    }
    .ba__heading {
      font-size: clamp(34px, 3.2vw, 38px);
    }
    .ba__carousel {
      max-width: 1200px;
    }

    /* Carousel -> static 3-up grid (3 result blocks) */
    .ba__track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
      align-items: stretch;
      overflow: visible;
      overflow-x: visible;
      scroll-snap-type: none;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 40px;
      padding-right: 40px;
      scroll-padding-inline: 0;
    }
    .ba__card {
      flex: 0 1 auto;
      width: auto;
      min-width: 0;
      height: 100%;
      scroll-snap-align: none;
      padding-bottom: 36px;
    }
    .ba__quote {
      font-size: 16px;
      line-height: 1.6;
      margin: 14px 20px 0;
    }
    .ba__bullets { margin: 12px 20px 0; }
    .ba__bullets li { font-size: 15px; line-height: 1.6; }
    .ba__attribution {
      margin: auto 20px 0;
      padding-top: 12px;
      min-height: 39px;
    }
    .ba__clinical { margin: 14px 20px 0; }

    /* One calm, non-interactive direction marker per result. It is centred on
       the composite seam and uses the same navy/white language as the section. */
    .ba__compare-arrow {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #E6E7E9;
      border-radius: 50%;
      background: rgba(255,255,255,.96);
      color: #0a1628;
      box-shadow: 0 3px 12px rgba(10,22,40,.14);
      pointer-events: none;
    }
    .ba__compare-arrow svg {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Arrows + progress bar are mobile carousel affordances only */
    .ba__arrow { display: none; }
    .ba__progress { display: none; }
  }

  .ssp-template--21378321940589__social_strip {
    background: #ffffff;
    color: #0a1628;
    font-family: 'General Sans',sans-serif;
    padding: 28px 16px 28px;
  }
  .ssp__inner {
    max-width: var(--max-width); margin: 0 auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 16px 40px; text-align: center;
  }
  .ssp__item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .ssp__big {
    font-family: 'Cabinet Grotesk',sans-serif; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
  }
  .ssp__label {
    font-family: 'General Sans',sans-serif; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.06em; opacity: 0.75;
  }
  .ssp__stars { display: inline-flex; gap: 2px; }
  .ssp__stars svg { width: 18px; height: 18px; fill: #0a1628; }
  .ssp__divider { width: 1px; height: 36px; background: currentColor; opacity: 0.15; }
  @media (max-width: 749px) { .ssp__divider { display: none; } }

  .ppr-template--21378321940589__problem {
    background: #f7f8fa;
    color: #454E59;
    font-family: 'General Sans',sans-serif;
    padding: 28px 0 24px;
  }
  .ppr__inner {
    max-width: var(--max-width); margin: 0 auto; padding: 0 var(--px-desktop);
    display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
  }
  /* Desktop (990px+): 1200px container, 40px gutters, 80px vertical rhythm.
     Vertical padding is overridden here so pad_top / pad_bottom still govern mobile. */
  @media (min-width: 990px) {
    .ppr-template--21378321940589__problem { padding-top: 80px; padding-bottom: 80px; }
    .ppr__inner {
      max-width: 1200px; margin-left: auto; margin-right: auto;
      padding-left: 40px; padding-right: 40px;
      grid-template-columns: 1.1fr 0.9fr; gap: 56px;
    }
    .ppr__heading { font-size: clamp(34px, 3.2vw, 38px); }
    .ppr__body { line-height: 1.65; }
    .ppr-template--21378321940589__problem.ppr--media-left .ppr__media { order: -1; }
  }
  @media (max-width: 749px) { .ppr__inner { padding: 0 16px; } }
  .ppr__eyebrow {
    font-family: 'General Sans',sans-serif; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.13em; color: #555F6A; margin: 0 0 14px;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .ppr__eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00AAFF;
  }
  .ppr__heading {
    font-family: 'Cabinet Grotesk',sans-serif; font-size: clamp(26px, 4vw, 40px);
    font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; color: #0A1628; margin: 0 0 18px;
  }
  .ppr__body { font-size: 16px; line-height: 1.7; color: #454E59; }
  .ppr__body p { margin: 0 0 14px; }
  .ppr__body p:last-child { margin-bottom: 0; }
  .ppr__media { border-radius: 10px; overflow: hidden; background: #F6F6F5; }
  .ppr__media img { width: 100%; height: auto; object-fit: contain; display: block; }

  /* ================================================================
     DESKTOP COMPOSITION PASS (990px+) — appended last on purpose.
     Media queries add no specificity, so the .ppr__heading and
     .ppr__body base rules declared AFTER the 990px block above were
     silently winning at desktop (heading stuck on the mobile clamp,
     body on 1.7 line-height). Re-asserted here from source order.
     ================================================================ */
  @media (min-width: 990px) {
    .ppr__heading { font-size: clamp(34px, 3.2vw, 38px); }
    .ppr__body { font-size: 16px; line-height: 1.65; max-width: 68ch; }
  }

  .pmech-template--21378321940589__mechanism {
    background: #ffffff;
    color: #454E59;
    font-family: 'General Sans',sans-serif;
    padding: 36px 16px 64px;
  }
  .pmech__inner { max-width: 1140px; margin: 0 auto; }
  .pmech__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 44px; }
  .pmech__eyebrow {
    font-family: 'General Sans',sans-serif; font-weight: 600; font-size: 10.5px;
    letter-spacing: 0.13em; text-transform: uppercase; color: #555F6A;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .pmech__eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00AAFF;
  }
  .pmech__heading {
    font-family: 'Cabinet Grotesk',sans-serif; font-weight: 700;
    font-size: clamp(26px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.01em;
    color: #0A1628; margin: 0; max-width: 24ch;
  }
  .pmech__lede { max-width: 680px; font-size: 17px; line-height: 1.65; color: #454E59; margin: 12px auto 0; }

  .pmech__phases { display: flex; align-items: flex-start; justify-content: center; gap: 8px; }
  .pmech__phase { flex: 1 1 0; max-width: 340px; text-align: center; padding: 0 16px; }
  .pmech__graphic {
    position: relative; width: 144px; height: 144px; border-radius: 50%;
    background: #F6F6F5; border: 1px solid #E6E7E9;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; overflow: visible;
  }
  .pmech__graphic img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .pmech__num {
    position: absolute; bottom: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%;
    background: #FFFFFF; color: #0A1628;
    font-family: 'General Sans',sans-serif; font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 1.5px solid #E6E7E9;
  }
  .pmech__title { font-family: 'Cabinet Grotesk',sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; font-size: 24px; color: #0A1628; margin: 0 0 12px; }
  .pmech__body { font-size: 15px; line-height: 1.6; color: #454E59; margin: 0; }
  .pmech__connector { flex: 0 0 40px; height: 2px; background: #ECEDED; margin-top: 72px; position: relative; }
  .pmech__connector::after {
    content: ""; position: absolute; top: 50%; right: -2px; transform: translateY(-50%);
    width: 0; height: 0; border-left: 8px solid #0079B8;
    border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  }

  /* Evidence filmstrip */
  .pmech__evidence { margin-top: 56px; }
  .pmech__evidence-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 760px; margin: 0 auto; }
  .pmech__fig { margin: 0; }
  .pmech__fig-img {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
    background: #F6F6F5; border: 1px solid #E6E7E9;
  }
  .pmech__fig-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  @media (max-width: 749px) {
    .pmech-template--21378321940589__mechanism { padding-left: 20px; padding-right: 20px; }
    .pmech__phases { flex-direction: column; align-items: center; gap: 36px; }
    .pmech__connector { display: none; }
    .pmech__heading { font-size: 26px; }
    .pmech__lede { font-size: 15px; }
    .pmech__evidence-track {
      grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%;
      overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      scrollbar-width: none; padding-bottom: 4px; margin: 0 -4px;
    }
    .pmech__evidence-track::-webkit-scrollbar { display: none; }
    .pmech__fig { scroll-snap-align: start; }
  }

  /* ================================================================
     DESKTOP COMPOSITION PASS (990px+) — appended last, mobile untouched.
     ================================================================ */
  @media (min-width: 990px) {
    .pmech-template--21378321940589__mechanism {
      padding-top: 80px;
      padding-bottom: 80px;
      padding-left: 0;
      padding-right: 0;
    }
    .pmech__inner {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 40px;
      padding-right: 40px;
    }
    .pmech__head { margin-bottom: 56px; }
    .pmech__heading { font-size: clamp(34px, 3.2vw, 38px); }
    .pmech__lede { line-height: 1.65; }
    .pmech__phases { gap: 16px; }
    .pmech__body { font-size: 16px; line-height: 1.65; }
    .pmech__evidence { margin-top: 64px; }
  }

  .phow-template--21378321940589__how_to {
    background: #f7f8fa;
    font-family: 'General Sans',sans-serif;
    padding: 32px 0 64px;
  }
  .phow__inner { max-width: 1140px; margin: 0 auto; padding: 0 16px; }
  .phow__head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 40px; }
  .phow__eyebrow {
    font-family: 'General Sans',sans-serif; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: #555F6A;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .phow__eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00AAFF;
  }
  .phow__heading {
    font-family: 'Cabinet Grotesk',sans-serif; font-weight: 700;
    font-size: clamp(26px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.01em;
    color: #0A1628; margin: 0; max-width: 22ch;
  }
  .phow__lede { max-width: 620px; font-size: 16px; line-height: 1.6; color: #454E59; margin: 6px 0 0; }

  .phow__steps { display: grid; grid-template-columns: 1fr; gap: 36px; }
  .phow__step { text-align: left; }
  .phow__img {
    width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
    background: #F6F6F5; border: 1px solid #E6E7E9; margin-bottom: 16px;
  }
  .phow__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .phow__num {
    font-family: 'General Sans',sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: #0079B8; display: block; margin-bottom: 6px;
  }
  .phow__title { font-family: 'Cabinet Grotesk',sans-serif; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; font-size: 22px; color: #0A1628; margin: 0 0 8px; }
  .phow__body { font-size: 15px; line-height: 1.6; color: #454E59; margin: 0; }

  @media (min-width: 768px) {
    .phow__inner { padding: 0 var(--px-tablet, 32px); }
    .phow__steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  }
  @media (min-width: 990px) {
    .phow-template--21378321940589__how_to { padding-top: 96px; padding-bottom: 96px; }
    .phow__inner { padding: 0 48px; }
    .phow__steps { gap: 40px; }
  }

  /* ================================================================
     DESKTOP COMPOSITION PASS (990px+) — appended last, mobile untouched.
     - 1200px container with 40px gutters (was 1140 / 48)
     - 80px top and bottom to match the other PDP sections (was 96)
     - heading clamp raised to a 38px cap that is actually reached
     - 3 steps as an explicit equal-width 3-up grid, 24px gutter
     - step + lede copy to 16px / 1.65
     ================================================================ */
  @media (min-width: 990px) {
    .phow-template--21378321940589__how_to {
      padding-top: 80px;
      padding-bottom: 80px;
    }
    .phow__inner {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 40px;
      padding-right: 40px;
    }
    .phow__head { margin-bottom: 48px; }
    .phow__heading { font-size: clamp(34px, 3.2vw, 38px); }
    .phow__lede { font-size: 16px; line-height: 1.65; }
    .phow__steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
    .phow__body { font-size: 16px; line-height: 1.65; }
  }

  /* ---- Dialog shell ---- */
  .wiw-modal {
    width: min(520px, calc(100vw - 32px));
    max-width: 520px;
    max-height: min(86vh, 760px);
    max-height: min(86dvh, 760px);
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #FFFFFF;
    color: #0A1628;
    font-family: 'General Sans', sans-serif;
    box-shadow: 0 18px 48px rgba(10, 22, 40, 0.18);
    overflow: hidden;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  .wiw-modal::backdrop {
    background: rgba(10, 22, 40, 0.5);
    opacity: 0;
    transition: opacity 180ms ease;
  }

  .wiw-modal[open] {
    display: flex;
    flex-direction: column;
  }

  .wiw-modal[open].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .wiw-modal[open].is-visible::backdrop {
    opacity: 1;
  }

  /* Fallback for engines without showModal(): the section script adds .is-open and
     positions the dialog itself. */
  .wiw-modal.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 10px)) scale(0.985);
    z-index: 10001;
  }

  .wiw-modal.is-open.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .wiw-modal__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(10, 22, 40, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 0s linear 180ms;
  }

  .wiw-modal__scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .wiw-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(86vh, 760px);
    max-height: min(86dvh, 760px);
    min-height: 0;
    padding: 26px;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* ---- Close ---- */
  .wiw-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    color: #0A1628;
    transition: background 150ms ease;
  }

  .wiw-modal__close:hover {
    background: #F6F6F5;
  }

  .wiw-modal__close svg {
    display: block;
  }

  /* ---- Heading ---- */
  .wiw-modal__heading {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #0A1628;
    margin: 0 0 18px;
    padding-right: 40px;
  }

  /* ---- Topic rows ---- */
  .wiw-modal__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    border-top: 1px solid #E6E7E9;
    border-bottom: 1px solid #E6E7E9;
    overscroll-behavior: contain;
  }

  .wiw-row + .wiw-row {
    border-top: 1px solid #E6E7E9;
  }

  .wiw-row__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 0;
    margin: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: 'General Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #0A1628;
  }

  .wiw-row__chev {
    flex: 0 0 auto;
    transition: transform 260ms ease;
  }

  .wiw-row__trigger[aria-expanded='true'] .wiw-row__chev {
    transform: rotate(90deg);
  }

  .wiw-row__body {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .wiw-row__trigger[aria-expanded='true'] + .wiw-row__body {
    grid-template-rows: 1fr;
  }

  .wiw-row__clip {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .wiw-row__trigger[aria-expanded='true'] + .wiw-row__body .wiw-row__clip {
    opacity: 1;
    transform: translateY(0);
  }

  .wiw-row__inner {
    padding: 0 0 16px;
  }

  .wiw-row__text,
  .wiw-row__text p {
    font-family: 'General Sans', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #454E59;
    margin: 0;
  }

  .wiw-row__text p + p {
    margin-top: 10px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wiw-modal,
    .wiw-modal::backdrop,
    .wiw-modal__scrim,
    .wiw-row__body,
    .wiw-row__chev,
    .wiw-row__clip {
      transition: none;
    }
  }

  @media (max-width: 559px) {
    .wiw-modal {
      width: calc(100vw - 24px);
      border-radius: 12px;
    }

    .wiw-modal__panel {
      padding: 22px 20px 20px;
    }

    .wiw-modal__close {
      top: 14px;
      right: 14px;
    }
  }

  .ing-dive {
    padding: var(--py-md) 0;
    background: #ffffff;
    font-family: 'General Sans',sans-serif;
    color: #0A1628;
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 749px) { .ing-dive { padding: var(--py-sm) 0; } }

  .ing-dive__inner {
    max-width: var(--max-width); margin: 0 auto;
    padding: 0 var(--px-desktop);
    display: flex; flex-direction: column; gap: 32px;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 990px) {
    .ing-dive__inner { flex-direction: row; gap: 32px; }
  }
  @media (max-width: 749px) { .ing-dive__inner { padding: 0 var(--px-mobile); } }

  /* ---- Right: content ---- */
  .ing-dive__content {
    flex: 1; max-width: 608px; min-width: 0;
  }
  @media (max-width: 989px) { .ing-dive__content { max-width: none; } }
  .ing-dive--no-media .ing-dive__content { max-width: none; }

  .ing-dive__heading {
    font-family: 'Cabinet Grotesk',sans-serif;
    font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
    color: #0A1628; margin: 0 0 9px; line-height: 1.08;
  }
  .ing-dive__subtext {
    font-size: 13px; color: #454E59; line-height: 1.6;
    margin: 0 0 16px;
  }

  /* ---- Accordion: separate bordered cards ---- */
  .ing-dive__accordion {
    display: flex; flex-direction: column; gap: 16px;
  }

  .ing-dive__item {
    border: 1px solid #E6E7E9;
    border-radius: 10px;
    background: #FFFFFF;
    overflow: hidden;
  }

  .ing-dive__trigger {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px; background: transparent; border: none; cursor: pointer;
    font-family: 'General Sans',sans-serif; text-align: left;
    -webkit-tap-highlight-color: transparent;
  }

  /* No state paints the trigger. A hover/tap tint here sat directly on top of the
     dose panel's #F6F6F5 and read as one muddy block, and on touch the :hover state
     sticks after a tap. The card hairline (#E6E7E9) and the chevron rotation are the
     only open-state signals. */
  .ing-dive__trigger:hover,
  .ing-dive__trigger:active,
  .ing-dive__trigger:focus,
  .ing-dive__trigger:focus-visible,
  .ing-dive__item.is-open .ing-dive__trigger,
  .ing-dive__item.is-open .ing-dive__trigger:hover {
    background: transparent;
  }

  /* Keyboard-only affordance: an outline, never a fill. */
  .ing-dive__trigger:focus-visible {
    outline: 2px solid #0079B8;
    outline-offset: -2px;
  }

  .ing-dive__trigger-img {
    width: 54px; height: 54px; border-radius: 8px; overflow: hidden;
    background: #F6F6F5; flex-shrink: 0;
  }
  .ing-dive__trigger-img img { width: 100%; height: 100%; object-fit: cover; }

  .ing-dive__trigger-name {
    flex: 1; min-width: 0;
    font-family: 'Cabinet Grotesk',sans-serif;
    font-size: 17px; font-weight: 700; color: #0A1628;
  }

  .ing-dive__trigger-dose {
    flex: none;
    font-family: 'Cabinet Grotesk',sans-serif;
    font-size: 22px; font-weight: 700; color: #0A1628;
  }

  .ing-dive__trigger-icon {
    width: 14px; height: 14px; flex-shrink: 0; position: relative;
    color: #9AA1A9;
    transition: transform .2s;
  }
  .ing-dive__trigger-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
  .ing-dive__item.is-open .ing-dive__trigger-icon { transform: rotate(180deg); }

  .ing-dive__panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 240ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 160ms ease,
                visibility 0s linear 240ms;
  }
  .ing-dive__panel[hidden] { display: none; }
  .ing-dive__item.is-open .ing-dive__panel {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .ing-dive__panel-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 16px;
    background: transparent;
    display: flex; flex-direction: column; gap: 12px;
    transform: translateY(-5px);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
                padding-bottom 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .ing-dive__item.is-open .ing-dive__panel-inner { transform: translateY(0); padding-bottom: 16px; }
  .ing-dive__panel-desc {
    font-size: 12.5px; color: #454E59; line-height: 1.6; margin: 0;
  }
  .ing-dive__panel-desc p { margin: 0 0 8px; }
  .ing-dive__panel-desc p:last-child { margin-bottom: 0; }
  .ing-dive__panel-desc strong { color: #0A1628; font-weight: 600; }
  .ing-dive__panel-chip { margin: 0; }

  /* ---- Big-number stat row ---- */
  .ingd-stat { margin: 0; }
  .ingd-stat__big {
    display: block;
    font-family: 'Cabinet Grotesk',sans-serif;
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1;
    color: #0A1628;
  }
  .ingd-stat__sub { display: block; font-size: 11.5px; color: #66707B; margin-top: 3px; line-height: 1.45; }

  /* ---- Dose bar (assembly 03 treatment) ---- */
  .ingd-dose {
    margin: 0;
    background: #F6F6F5; border-radius: 8px; padding: 12px;
    display: flex; flex-direction: column; gap: 9px;
  }
  /* The "trial concentration" marker is pinned to the right end of THIS bar's fill,
     so every bar reads: our dose = the trial dose. The label is anchored to the
     triangle and clamped so it never overflows the track. */
  .ingd-dose__top { position: relative; height: 12px; }
  .ingd-marker {
    position: absolute; top: 0;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9.5px; font-weight: 600; color: #0079B8; white-space: nowrap; line-height: 1;
    transform: translateX(-4px);
  }
  .ingd-marker--end { transform: translateX(calc(-100% + 4px)); }
  .ingd-marker--end .ingd-marker__tri { order: 2; }
  .ingd-dose__row { display: flex; flex-direction: column; gap: 4px; }
  .ingd-dose__track {
    position: relative; height: 8px; border-radius: 4px;
    background: #E9EAEC;
  }
  .ingd-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0; border-radius: 4px;
    background: #0A1628;
    transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .ing-dive__item.is-open .ingd-fill { width: var(--fill, 100%); }
  .ingd-dose__left {
    font-size: 9.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #66707B;
  }
  .ingd-dose__competitor {
    height: 8px; border-radius: 4px;
    background: repeating-linear-gradient(90deg,#E1E3E5 0 6px,#ECEDED 6px 12px);
  }
  .ingd-dose__competitor-label {
    font-size: 9.5px; font-style: italic; color: #9AA1A9;
  }

  /* ---- Desktop pass (>=990px) ---- */
  @media (min-width: 990px) {
    .ing-dive { padding: 80px 0; }
    .ing-dive__inner {
      max-width: 1200px; margin-left: auto; margin-right: auto;
      padding-left: 40px; padding-right: 40px;
      gap: 40px; align-items: flex-start;
    }

    .ing-dive__heading { font-size: clamp(30px, 3.4vw, 38px); line-height: 1.1; margin: 0 0 12px; }
    .ing-dive__subtext { font-size: 16px; line-height: 1.65; max-width: 68ch; margin: 0 0 24px; }

    .ing-dive__trigger { padding: 18px 20px 15px; gap: 16px; }
    .ing-dive__trigger-img { width: 64px; height: 64px; border-radius: 10px; }
    .ing-dive__trigger-name { font-size: 21px; }
    .ing-dive__trigger-dose { font-size: 24px; }
    .ing-dive__trigger-icon { width: 16px; height: 16px; }
    .ing-dive__trigger-icon svg { width: 16px; height: 16px; }

    .ing-dive__panel-inner { padding: 0 20px; gap: 16px; }
    .ing-dive__item.is-open .ing-dive__panel-inner { padding-bottom: 20px; }
    .ing-dive__panel-desc { font-size: 16px; line-height: 1.65; }
    .ing-dive__panel-benefits ul { gap: 10px; }
    .ing-dive__panel-benefits li { font-size: 16px; line-height: 1.55; padding-left: 30px; }
    .ing-dive__panel-benefits li::before { width: 20px; height: 20px; top: 3px; background-size: 11px 11px; }

    .ingd-stat__big { font-size: 26px; }
    .ingd-stat__sub { font-size: 14px; margin-top: 5px; }

    .ingd-dose { padding: 16px; gap: 12px; }
    .ingd-dose__top { height: 14px; }
    .ingd-marker { font-size: 11px; }
    .ingd-dose__left { font-size: 12px; }
    .ingd-dose__competitor-label { font-size: 12px; }
  }

  /* ---- Desktop composition pass: ingredient cards as an equal-width grid (>=990px) ----
     Without a left media column the accordion was one 1120px-wide stack, which left the
     panel copy running far past a readable measure. Grid it into equal-width columns;
     align-items:start keeps closed cards from stretching to the open card's height. */
  @media (min-width: 990px) {
    .ing-dive--no-media .ing-dive__accordion {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px;
      align-items: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ing-dive__panel,
    .ing-dive__panel-inner,
    .ing-dive__trigger-icon,
    .ingd-fill { transition: none; }
  }

  .ablpm-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #CFD3D7; border-radius: 6px; padding: 7px 11px; cursor: pointer; font-family: 'General Sans', sans-serif; text-align: left; transition: border-color .15s, box-shadow .15s; }
  .ablpm-chip:hover { border-color: #00AAFF; box-shadow: 0 2px 8px rgba(0,170,255,.15); }
  .ablpm-logo { font-size: 10px; font-weight: 700; }
  .ablpm-logo .pm-a { color: #0A1628; }
  .ablpm-logo .pm-b { color: #0079B8; }
  .ablpm-div { width: 1px; height: 12px; background: #E1E3E5; flex: 0 0 auto; }
  .ablpm-lab { font-size: 11.5px; font-weight: 500; color: #39424C; }
  .ablpm-chip svg.ablpm-arr { width: 10px; height: 10px; flex: 0 0 auto; }
  .ablpm-dialog { border: none; border-radius: 12px; padding: 0; max-width: 360px; width: calc(100vw - 28px); box-shadow: 0 24px 60px rgba(10,22,40,.3); font-family: 'General Sans', sans-serif; color: #0A1628; }
  .ablpm-dialog::backdrop { background: rgba(10,22,40,.45); }
  .ablpm-dialog .ablpm-pad { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .ablpm-dialog .ablpm-head { display: flex; justify-content: space-between; align-items: center; }
  .ablpm-dialog .ablpm-minichip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #CFD3D7; border-radius: 6px; padding: 6px 10px; }
  .ablpm-dialog .ablpm-minilab { font-size: 11px; font-weight: 500; color: #39424C; }
  .ablpm-dialog .ablpm-close { border: none; background: none; cursor: pointer; font-size: 18px; color: #9AA1A9; line-height: 1; padding: 4px; }
  .ablpm-dialog h4 { margin: 0; font-family: 'General Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; color: #0A1628; letter-spacing: 0; }
  .ablpm-dialog .ablpm-meta { margin: 0; background: #F6F6F5; border-radius: 6px; padding: 9px 11px; font-size: 11.5px; color: #66707B; }
  .ablpm-dialog .ablpm-sublab { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
  .ablpm-dialog .ablpm-sublab--find { color: #0079B8; }
  .ablpm-dialog .ablpm-sublab--limit { color: #9AA1A9; }
  .ablpm-dialog .ablpm-finding { margin: 0; font-size: 13px; line-height: 1.55; color: #1D2530; }
  .ablpm-dialog .ablpm-limit { margin: 0; font-size: 12px; line-height: 1.55; color: #66707B; }
  .ablpm-dialog .ablpm-link { font-size: 13px; font-weight: 600; color: #0079B8; text-decoration: none; text-align: left; }
  .ablpm-dialog .ablpm-link:hover { text-decoration: underline; }

  .ablpm-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #CFD3D7; border-radius: 6px; padding: 7px 11px; cursor: pointer; font-family: 'General Sans', sans-serif; text-align: left; transition: border-color .15s, box-shadow .15s; }
  .ablpm-chip:hover { border-color: #00AAFF; box-shadow: 0 2px 8px rgba(0,170,255,.15); }
  .ablpm-logo { font-size: 10px; font-weight: 700; }
  .ablpm-logo .pm-a { color: #0A1628; }
  .ablpm-logo .pm-b { color: #0079B8; }
  .ablpm-div { width: 1px; height: 12px; background: #E1E3E5; flex: 0 0 auto; }
  .ablpm-lab { font-size: 11.5px; font-weight: 500; color: #39424C; }
  .ablpm-chip svg.ablpm-arr { width: 10px; height: 10px; flex: 0 0 auto; }
  .ablpm-dialog { border: none; border-radius: 12px; padding: 0; max-width: 360px; width: calc(100vw - 28px); box-shadow: 0 24px 60px rgba(10,22,40,.3); font-family: 'General Sans', sans-serif; color: #0A1628; }
  .ablpm-dialog::backdrop { background: rgba(10,22,40,.45); }
  .ablpm-dialog .ablpm-pad { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .ablpm-dialog .ablpm-head { display: flex; justify-content: space-between; align-items: center; }
  .ablpm-dialog .ablpm-minichip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #CFD3D7; border-radius: 6px; padding: 6px 10px; }
  .ablpm-dialog .ablpm-minilab { font-size: 11px; font-weight: 500; color: #39424C; }
  .ablpm-dialog .ablpm-close { border: none; background: none; cursor: pointer; font-size: 18px; color: #9AA1A9; line-height: 1; padding: 4px; }
  .ablpm-dialog h4 { margin: 0; font-family: 'General Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; color: #0A1628; letter-spacing: 0; }
  .ablpm-dialog .ablpm-meta { margin: 0; background: #F6F6F5; border-radius: 6px; padding: 9px 11px; font-size: 11.5px; color: #66707B; }
  .ablpm-dialog .ablpm-sublab { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
  .ablpm-dialog .ablpm-sublab--find { color: #0079B8; }
  .ablpm-dialog .ablpm-sublab--limit { color: #9AA1A9; }
  .ablpm-dialog .ablpm-finding { margin: 0; font-size: 13px; line-height: 1.55; color: #1D2530; }
  .ablpm-dialog .ablpm-limit { margin: 0; font-size: 12px; line-height: 1.55; color: #66707B; }
  .ablpm-dialog .ablpm-link { font-size: 13px; font-weight: 600; color: #0079B8; text-decoration: none; text-align: left; }
  .ablpm-dialog .ablpm-link:hover { text-decoration: underline; }

  .ablpm-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #CFD3D7; border-radius: 6px; padding: 7px 11px; cursor: pointer; font-family: 'General Sans', sans-serif; text-align: left; transition: border-color .15s, box-shadow .15s; }
  .ablpm-chip:hover { border-color: #00AAFF; box-shadow: 0 2px 8px rgba(0,170,255,.15); }
  .ablpm-logo { font-size: 10px; font-weight: 700; }
  .ablpm-logo .pm-a { color: #0A1628; }
  .ablpm-logo .pm-b { color: #0079B8; }
  .ablpm-div { width: 1px; height: 12px; background: #E1E3E5; flex: 0 0 auto; }
  .ablpm-lab { font-size: 11.5px; font-weight: 500; color: #39424C; }
  .ablpm-chip svg.ablpm-arr { width: 10px; height: 10px; flex: 0 0 auto; }
  .ablpm-dialog { border: none; border-radius: 12px; padding: 0; max-width: 360px; width: calc(100vw - 28px); box-shadow: 0 24px 60px rgba(10,22,40,.3); font-family: 'General Sans', sans-serif; color: #0A1628; }
  .ablpm-dialog::backdrop { background: rgba(10,22,40,.45); }
  .ablpm-dialog .ablpm-pad { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .ablpm-dialog .ablpm-head { display: flex; justify-content: space-between; align-items: center; }
  .ablpm-dialog .ablpm-minichip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #CFD3D7; border-radius: 6px; padding: 6px 10px; }
  .ablpm-dialog .ablpm-minilab { font-size: 11px; font-weight: 500; color: #39424C; }
  .ablpm-dialog .ablpm-close { border: none; background: none; cursor: pointer; font-size: 18px; color: #9AA1A9; line-height: 1; padding: 4px; }
  .ablpm-dialog h4 { margin: 0; font-family: 'General Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.4; color: #0A1628; letter-spacing: 0; }
  .ablpm-dialog .ablpm-meta { margin: 0; background: #F6F6F5; border-radius: 6px; padding: 9px 11px; font-size: 11.5px; color: #66707B; }
  .ablpm-dialog .ablpm-sublab { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; }
  .ablpm-dialog .ablpm-sublab--find { color: #0079B8; }
  .ablpm-dialog .ablpm-sublab--limit { color: #9AA1A9; }
  .ablpm-dialog .ablpm-finding { margin: 0; font-size: 13px; line-height: 1.55; color: #1D2530; }
  .ablpm-dialog .ablpm-limit { margin: 0; font-size: 12px; line-height: 1.55; color: #66707B; }
  .ablpm-dialog .ablpm-link { font-size: 13px; font-weight: 600; color: #0079B8; text-decoration: none; text-align: left; }
  .ablpm-dialog .ablpm-link:hover { text-decoration: underline; }

  .ct-section {
    background: #f7f8fa;
    padding: 28px 14px;
    border-top: 1px solid #ECEDED;
    font-family: 'General Sans', sans-serif;
  }
  .ct-wrap { max-width: var(--max-width); margin: 0 auto; }

  .ct-eyebrow {
    display: block;
    font-family: 'General Sans', sans-serif; font-size: 10.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.13em;
    color: #555F6A; margin: 0; padding: 0 6px;
  }
  .ct-heading {
    font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700;
    font-size: 21px; line-height: 1.12;
    color: #0A1628; margin: 6px 0 14px; padding: 0 6px; max-width: 28ch;
  }

  /* ---- Horizontal-slide table: sticky row labels + pinned ABL column ---- */
  .ct-scroller { position: relative; }
  .ct-viewport { position: relative; }
  .ct-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border: 1px solid #E6E7E9;
    border-radius: 12px;
    background: #FFFFFF;
  }
  .ct-scroll::-webkit-scrollbar { display: none; }
  .ct-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    background: #FFFFFF;
  }
  .ct-table th, .ct-table td {
    min-width: 88px;
    padding: 11px 12px;
    vertical-align: top;
    text-align: left;
    font-size: 12.5px;
    line-height: 1.4;
    color: #454E59;
    font-weight: 400;
    border-bottom: 1px solid #E6E7E9;
  }
  .ct-table tr:last-child th, .ct-table tr:last-child td { border-bottom: none; }
  .ct-table thead th {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #0A1628;
    vertical-align: bottom;
    background: #F7F8FA;
  }
  .ct-table .ct-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 96px;
    min-width: 96px;
    max-width: 96px;
    background: #FFFFFF;
    font-family: 'General Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #0A1628;
    box-shadow: inset -1px 0 0 #E6E7E9;
  }
  .ct-table .ct-abl {
    position: sticky;
    left: 96px;
    z-index: 2;
    background: #F7F8FA;
    color: #0A1628;
    font-weight: 600;
    border-left: 1px solid #E1E4E7;
    border-right: 1px solid #E1E4E7;
  }
  .ct-table thead th.ct-abl {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    background: #0A1628;
    border: 0;
  }
  .ct-table tbody tr:last-child .ct-abl { border-bottom: 0; }

  /* Explicit mobile navigation replaces the ambiguous free-swipe affordance. */
  .ct-mobile__controls { display: none; }
  .ct-nav-btn {
    min-width: 0; min-height: 38px; padding: 9px 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid #CFD3D7; border-radius: 999px; background: #FFFFFF;
    color: #0A1628; font-family: 'General Sans', sans-serif;
    font-size: 11.5px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
  }
  .ct-nav-btn--next { background: #0A1628; border-color: #0A1628; color: #FFFFFF; }
  .ct-nav-btn:hover:not(:disabled) { border-color: #8B949E; box-shadow: 0 3px 10px rgba(10,22,40,.1); transform: translateY(-1px); }
  .ct-nav-btn:focus-visible { outline: 2px solid #0079B8; outline-offset: 2px; }
  .ct-nav-btn:disabled { opacity: .32; cursor: default; box-shadow: none; }
  .ct-nav-btn svg { width: 13px; height: 13px; flex: none; }
  .ct-position { min-width: 0; margin: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
  .ct-position__label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 11.5px; font-weight: 600; line-height: 1.25; color: #0A1628;
  }
  .ct-position__count { font-size: 9.5px; font-weight: 500; line-height: 1.2; color: #9AA1A9; letter-spacing: .06em; text-transform: uppercase; }
  .ct-position__dots { display: flex; justify-content: center; align-items: center; gap: 4px; }
  .ct-position__dot {
    width: 4px; height: 4px; border-radius: 999px; background: #D5DAE1;
    transition: width .18s ease, background .18s ease;
  }
  .ct-position__dot.is-active { width: 12px; background: #0A1628; }

  /* ---- Purpose-built mobile comparison card ---- */
  .ct-mobile { display: none; }

  /* Tablets retain the complete semantic table and may scroll naturally if needed. */
  @media (min-width: 750px) and (max-width: 989px) {
    .ct-table { min-width: 700px; }
    .ct-table th, .ct-table td { min-width: 110px; padding: 11px 10px; font-size: 12.5px; }
    .ct-table thead th { font-size: 13.5px; }
    .ct-table .ct-sticky { width: 130px; min-width: 130px; max-width: 130px; font-size: 12px; }
    .ct-table .ct-abl { left: 130px; }
  }

  /* Phones keep ABL and one competitor visible in one compact scan matrix. */
  @media (max-width: 749px) {
    .ct-section { padding: 36px 16px; }
    .ct-eyebrow, .ct-heading { padding-left: 0; padding-right: 0; }
    .ct-heading { font-size: 23px; line-height: 1.12; margin: 5px 0 18px; }
    .ct-scroller { display: none; }
    .ct-mobile {
      display: block;
      overflow: hidden;
      border: 1px solid #E6E7E9;
      border-radius: 10px;
      background: #FFFFFF;
    }
    .ct-mobile__panel[hidden] { display: none; }
    .ct-mobile__panel { background: #FFFFFF; }
    .ct-mobile__head {
      display: grid;
      grid-template-columns: minmax(0, 42%) repeat(2, minmax(0, 29%));
      border-bottom: 1px solid #DDE2E6;
      background: #F7F8FA;
    }
    .ct-mobile__corner {
      min-width: 0;
      padding: 9px 10px;
      display: flex;
      align-items: center;
      font-size: 8.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #8B949E;
    }
    .ct-mobile__brand {
      min-width: 0;
      min-height: 44px;
      padding: 8px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow-wrap: break-word;
      font-family: 'Cabinet Grotesk', sans-serif;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.15;
      color: #0A1628;
      background: #F7F8FA;
      border-left: 1px solid #E1E4E7;
    }
    .ct-mobile__brand--abl {
      color: #FFFFFF;
      background: #0A1628;
    }
    .ct-mobile__row {
      display: grid;
      grid-template-columns: minmax(0, 42%) repeat(2, minmax(0, 29%));
      border-bottom: 1px solid #ECEEEF;
    }
    .ct-mobile__row:last-child { border-bottom: 0; }
    .ct-mobile__label {
      min-width: 0;
      min-height: 44px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      font-size: 10.5px;
      font-weight: 600;
      line-height: 1.22;
      color: #0A1628;
      background: #FFFFFF;
    }
    .ct-mobile__value {
      min-width: 0;
      min-height: 44px;
      padding: 8px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow-wrap: break-word;
      font-size: 10.5px;
      line-height: 1.22;
      color: #454E59;
      background: #FFFFFF;
      border-left: 1px solid #ECEEEF;
    }
    .ct-mobile__value--abl {
      color: #0A1628;
      font-weight: 600;
      background: #F7F8FA;
    }
    .ct-mobile__controls {
      display: grid;
      grid-template-columns: minmax(70px, 1fr) minmax(42px, .6fr) minmax(70px, 1fr);
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-top: 1px solid #E6E7E9;
      background: #FFFFFF;
    }
    .ct-nav-btn { min-height: 36px; padding: 7px 11px; font-size: 10.5px; }
    .ct-position__label { display: none; }
    .ct-position__count { font-size: 9px; }
    .ct-footnote { margin-top: 14px; padding: 0; font-size: 11px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ct-nav-btn { transition: none; }
    .ct-position__dot { transition: none; }
  }

  /* ---- Desktop: same emphasis structure, proportionally larger type ---- */
  @media (min-width: 990px) {
    .ct-section { padding: 60px 0; border-top: 0; }
    .ct-wrap { padding: 0 var(--px-desktop); }
    .ct-eyebrow { font-size: 11px; padding: 0; margin: 0 0 8px; }
    .ct-heading { font-size: clamp(28px, 3vw, 34px); letter-spacing: -0.015em; padding: 0; margin: 0 0 26px; }
    .ct-table { min-width: 900px; }
    .ct-table th, .ct-table td { min-width: 128px; padding: 11px 13px; font-size: 12.5px; line-height: 1.4; }
    .ct-table thead th { font-size: 15px; }
    .ct-table thead th.ct-abl { font-size: 15px; }
    .ct-table .ct-sticky { width: 174px; min-width: 174px; max-width: 174px; font-size: 12.5px; }
    .ct-table .ct-abl { left: 174px; }
    .ct-footnote { margin-top: 24px; padding: 0; font-size: 14px; }
  }

  /* ---- Desktop composition pass (>=990px) ----
     At 990px+ the whole table fits inside the 1200px content column, so the horizontal
     scroller and its two sticky columns are neutralised and the
     table is laid out on a real fixed grid: 190px label rail + five equal-width data
     columns, headers aligned to their cells, hairline #E6E7E9 row separators. */
  @media (min-width: 990px) {
    .ct-section { padding: 60px 0; }
    .ct-wrap {
      max-width: 1200px; margin-left: auto; margin-right: auto;
      padding-left: 40px; padding-right: 40px;
    }
    .ct-scroll { overflow: hidden; }
    .ct-table { table-layout: fixed; width: 100%; min-width: 0; }
    .ct-table th, .ct-table td { min-width: 0; overflow-wrap: break-word; }
    .ct-table .ct-sticky { position: static; }
    .ct-table .ct-abl { position: static; }
  }

  .results-timeline {
    background: #ffffff;
    font-family: 'General Sans', sans-serif;
  }

  .results-timeline .section-wrap {
    max-width: var(--max-width, 1440px);
    margin: 0 auto;
    padding-left: var(--px-mobile, 16px);
    padding-right: var(--px-mobile, 16px);
  }

  @media (min-width: 750px) {
    .results-timeline .section-wrap {
      padding-left: var(--px-tablet, 24px);
      padding-right: var(--px-tablet, 24px);
    }
  }

  @media (min-width: 990px) {
    .results-timeline .section-wrap {
      padding-left: var(--px-desktop, 48px);
      padding-right: var(--px-desktop, 48px);
    }
  }

  /* Shared homepage rhythm: 56px mobile / 80px desktop */
  .results-timeline__wrap {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  @media (min-width: 750px) {
    .results-timeline__wrap {
      padding-top: 80px;
      padding-bottom: 80px;
    }
  }

  .results-timeline__heading {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 32px;
    color: #0a1628;
  }

  .results-timeline__grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  @media (max-width: 989px) {
    .results-timeline__milestones {
      order: 1;
    }

    .results-timeline__image {
      order: 2;
    }
  }

  @media (min-width: 990px) {
    .results-timeline__grid {
      flex-direction: row;
      gap: 64px;
      align-items: flex-start;
    }
  }

  .results-timeline__milestones {
    flex: 1;
    position: relative;
    min-width: 0;
  }

  /* Milestone rail: 10px ink dots + hairline connector */
  .results-timeline__step {
    position: relative;
    padding-left: 30px;
    padding-bottom: 28px;
  }

  /* Scroll-reveal is armed by JS, so a morph re-render can never leave steps hidden */
  .results-timeline[data-rt-armed] .results-timeline__step {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s ease, transform 0.45s ease;
  }

  .results-timeline[data-rt-armed] .results-timeline__step.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .results-timeline[data-rt-armed] .results-timeline__step {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .results-timeline__step:last-child {
    padding-bottom: 0;
  }

  /* 10px ink dot */
  .results-timeline__step::after {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0A1628;
  }

  /* Hairline connector */
  .results-timeline__step::before {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 16px;
    bottom: 3px;
    width: 1px;
    background: #E6E7E9;
  }

  .results-timeline__step:last-child::before {
    display: none;
  }

  .results-timeline__badge {
    display: block;
    font-family: 'General Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    background: none;
    padding: 0;
    color: #555F6A;
    line-height: 1.3;
    margin: 0 0 5px;
  }

  .results-timeline__step-title {
    font-family: 'General Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #0A1628;
    line-height: 1.35;
    margin: 0 0 4px;
  }

  .results-timeline__step-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #454E59;
    margin: 0;
  }

  /* Milestone copy is stored as rich text, so unwrap its inner paragraphs cleanly */
  .results-timeline__step-desc > p {
    margin: 0;
  }

  .results-timeline__step-desc > p + p {
    margin-top: 8px;
  }

  .results-timeline__image {
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
  }

  @media (max-width: 989px) {
    .results-timeline__image {
      width: 100%;
      aspect-ratio: var(--rt-ratio, 16 / 10);
    }
  }

  @media (min-width: 990px) {
    .results-timeline__image {
      width: min(608px, 48%);
      aspect-ratio: var(--rt-ratio, 608 / 560);
    }
  }

  .results-timeline__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---- Desktop composition pass (>=990px) ----
     Content column capped at 1200px with 40px gutters (was the 1440px theme default with
     48px gutters, which ran the section edge-to-edge on wide screens), and the milestone
     copy scaled to the desktop body size with a capped measure. The two-column layout
     (milestone rail beside the hero image) is this section's designed desktop
     composition and is intentionally preserved. */
  @media (min-width: 990px) {
    .results-timeline .section-wrap {
      max-width: 1200px;
      padding-left: 40px;
      padding-right: 40px;
    }

    .results-timeline__heading { margin: 0 0 40px; }

    .results-timeline__step { padding-bottom: 36px; }
    .results-timeline__badge { font-size: 12px; margin: 0 0 7px; }
    .results-timeline__step-title { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
    .results-timeline__step-desc { font-size: 16px; line-height: 1.65; max-width: 68ch; }
  }

  .prv-template--21378321940589__reviews_grid {
    background: #ffffff;
    padding: 28px 0;
    border-top: 1px solid #ECEDED;
    font-family: 'General Sans', sans-serif;
    scroll-margin-top: 96px;
  }
  .prv__inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
  .prv__head { display: flex; flex-direction: column; align-items: flex-start; text-align: left; margin-bottom: 14px; }
  .prv__eyebrow {
    font-family: 'General Sans', sans-serif; font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: #555F6A;
    margin: 0 0 6px;
  }
  .prv__heading {
    font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700;
    font-size: 24px; line-height: 1.1; letter-spacing: -0.01em;
    color: #0A1628; margin: 0; max-width: 22ch;
  }
  .prv__summary {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 5px;
    font-size: 12.5px; color: #66707B;
  }
  .prv__summary-stars { display: none; }
  .prv__summary-stars svg { width: 16px; height: 16px; fill: #0A1628; }

  .prv__grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }

  .prv__card {
    background: #FFFFFF; border: 1px solid #E6E7E9;
    border-radius: 10px; padding: 16px; display: flex; flex-direction: column;
  }
  .prv__top { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
  .prv__avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none;
    background: #EFF0EF; color: #0A1628;
    display: flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 600;
  }
  .prv__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .prv__id { min-width: 0; flex: 1; }
  .prv__name {
    display: flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: #0A1628; line-height: 1.2;
  }
  /* Verified rosette: fixed 12px, baseline-aligned with the text — never oversized */
  .prv__name svg { flex: none; width: 12px; height: 12px; vertical-align: -1px; }
  .prv__meta {
    font-family: 'General Sans', sans-serif; font-size: 11px; color: #66707B;
    text-transform: none; letter-spacing: 0; margin-top: 1px;
  }
  .prv__stars { margin-left: auto; flex: none; width: 70px; height: 12px; }
  .prv__quote { font-size: 14px; font-weight: 600; line-height: 1.5; color: #0A1628; margin: 0; }

  .prv__story { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .prv__story p { font-size: 12.5px; line-height: 1.65; color: #454E59; margin: 10px 0 0; }
  .prv__toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; align-self: flex-start;
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: 'General Sans', sans-serif; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: #0A1628;
  }
  .prv__toggle:hover { color: #0079B8; }
  .prv__chevron {
    width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s ease;
  }
  .prv__card.is-open .prv__chevron { transform: rotate(180deg); }

  @media (min-width: 768px) {
    .prv__inner { padding: 0 var(--px-tablet, 32px); }
    .prv__grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  }
  @media (min-width: 990px) {
    .prv-template--21378321940589__reviews_grid { padding: 64px 0 64px; }
    .prv__inner { padding: 0 48px; }
    .prv__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .prv__head { align-items: center; text-align: center; margin-bottom: 32px; }
    .prv__eyebrow { margin-bottom: 8px; }
    .prv__heading { font-size: clamp(26px, 4vw, 36px); }
    .prv__summary { font-size: 14px; margin-top: 8px; }
    .prv__summary-stars { display: inline-flex; gap: 2px; }
  }

  /* ---- Desktop composition pass (>=990px) ----
     1200px content column with 40px gutters (was 1140px inside 48px gutters, i.e. only a
     1044px content width), review cards equalised by the grid instead of top-aligned, and
     card typography lifted to the desktop body scale. Section vertical padding is left on
     the pad_top / pad_bottom section settings so the client's controls keep working. */
  @media (min-width: 990px) {
    .prv__inner { max-width: 1200px; padding-left: 40px; padding-right: 40px; }
    .prv__head { margin-bottom: 40px; }

    .prv__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }

    .prv__card { padding: 20px; }
    .prv__top { gap: 12px; margin-bottom: 14px; }
    .prv__avatar { width: 44px; height: 44px; font-size: 14px; }
    .prv__name { font-size: 15px; gap: 6px; }
    .prv__name svg { width: 14px; height: 14px; }
    .prv__meta { font-size: 13px; margin-top: 2px; }
    .prv__stars { width: 84px; height: 14px; }
    .prv__quote { font-size: 17px; line-height: 1.5; }
    .prv__story p { font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .prv__toggle { font-size: 12px; margin-top: 14px; }
  }

  .pem-template--21378321940589__emotional {
    background: #FFFFFF;
    color: #ffffff;
    font-family: 'General Sans', sans-serif;
    padding: 12px var(--px-mobile, 20px) 12px;
  }
  .pem-template--21378321940589__emotional .pem__card {
    max-width: 1080px;
    margin: 0 auto;
    background: #0a1628;
    border-radius: 14px;
    padding: 44px 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    overflow: hidden;
  }
  .pem__content { min-width: 0; flex: 1 1 auto; text-align: center; }
  @media (min-width: 990px) {
    .pem-template--21378321940589__emotional .pem__card {
      flex-direction: row;
      align-items: center;
      gap: 48px;
      padding: 64px;
    }
    .pem__content { flex: 1 1 60%; }
  }
  .pem__eyebrow {
    font-family: 'General Sans', sans-serif; font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.13em; color: #9AA1A9; margin: 0 0 18px;
    display: inline-flex; align-items: center; gap: 7px;
  }
  .pem__eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #00AAFF; }
  .pem__heading {
    font-family: 'Cabinet Grotesk', sans-serif; font-size: clamp(24px, 3.5vw, 34px);
    font-weight: 700; letter-spacing: -0.01em; line-height: 1.12; margin: 0 0 18px;
    color: #ffffff;
  }
  .pem__body {
    font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.82);
    max-width: 520px; margin-left: auto; margin-right: auto;
  }
  .pem__body p { margin: 0 0 14px; }
  .pem__body p:last-child { margin-bottom: 0; }
  .pem__cta {
    display: inline-flex; align-items: center; justify-content: center; margin-top: 28px;
    height: 52px; padding: 0 30px; border-radius: 10px;
    background: #FFFFFF; color: #0A1628; text-decoration: none;
    font-family: 'General Sans', sans-serif; font-size: 15px; font-weight: 600;
    transition: background 0.15s ease;
  }
  .pem__cta:hover { background: #F6F6F5; }

  /* ================================================================
     DESKTOP COMPOSITION PASS (990px+) — appended last, mobile untouched.
     - 80px top/bottom to match the other PDP sections, plus 40px side
       gutters so the card never runs to the viewport edge between
       990px and 1160px
     - heading clamp cap raised from 34px to 36px (still reached at
       desktop widths); kept modest because the content column is only
       ~60% of the card when a side image is set
     - body copy to 16px / 1.65 (the 520px measure is already well
       inside a 68ch line and is left as-is)
     The 1080px card, its 64px inset and the 60/40 split are deliberate
     assembly-pass design decisions and are left untouched.
     ================================================================ */
  @media (min-width: 990px) {
    .pem-template--21378321940589__emotional {
      padding-top: 80px;
      padding-bottom: 80px;
      padding-left: 40px;
      padding-right: 40px;
    }
    .pem__heading { font-size: clamp(34px, 3.2vw, 36px); }
    .pem__body { font-size: 16px; line-height: 1.65; }
  }

  .faq {
    padding: var(--py-md) 0;
    background: #ffffff;
    font-family: 'General Sans',sans-serif;
  }
  @media (max-width: 749px) { .faq { padding: var(--py-sm) 0; } }

  .faq__inner {
    max-width: var(--max-width); margin: 0 auto;
    padding: 0 var(--px-desktop);
    display: flex; flex-direction: column; gap: 32px;
  }
  @media (min-width: 990px) {
    .faq__inner {
      flex-direction: column;
      max-width: 720px;
      margin-left: auto; margin-right: auto;
      padding-left: 40px; padding-right: 40px;
      gap: 32px;
    }
  }
  @media (max-width: 749px) { .faq__inner { padding: 0 var(--px-mobile); } }

  /* ---- Left column ---- */
  .faq__left { flex: 1; min-width: 0; }
  @media (min-width: 990px) {
    .faq__left { flex: 0 0 auto; max-width: 68ch; }
  }

  .faq__heading {
    font-family: 'Cabinet Grotesk',sans-serif;
    font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; letter-spacing: -0.01em;
    color: #0A1628; margin: 0 0 12px; line-height: 1.1;
  }
  .faq__support {
    font-size: 15px; color: #66707B; line-height: 1.6; margin: 0;
  }
  .faq__support a { color: #0A1628; text-decoration: underline; text-underline-offset: 3px; }

  /* ---- Right column ---- */
  .faq__right { flex: 1; max-width: 608px; min-width: 0; }
  @media (max-width: 989px) { .faq__right { max-width: none; } }

  /* ---- Items ---- */
  .faq__item { border-bottom: 1px solid #E6E7E9; }

  .faq__question {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; background: none; border: none; cursor: pointer;
    font-family: 'General Sans',sans-serif; font-size: 17px; font-weight: 500;
    color: #1D2530; text-align: left;
    transition: color var(--duration-fast) var(--ease);
  }
  .faq__question:hover { color: #0079B8; }

  .faq__icon {
    width: 24px; height: 24px; flex-shrink: 0; margin-left: 16px;
  }
  .faq__icon svg {
    width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5;
  }

  .faq__answer {
    max-height: 0; overflow: hidden;
    transition: max-height var(--duration-base) var(--ease);
  }
  .faq__item.is-open .faq__answer { max-height: 600px; }

  .faq__answer-inner {
    padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: #66707B;
  }
  .faq__answer-inner p { margin: 0 0 12px; }
  .faq__answer-inner p:last-child { margin-bottom: 0; }

  /* ---- Show more / Show less ---- */
  .faq__item.is-hidden { display: none; }
  .faq__toggle-more {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid #E6E7E9; border-radius: 6px;
    padding: 10px 20px; margin-top: 16px; cursor: pointer;
    font-family: 'General Sans',sans-serif; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: #454E59;
    transition: background var(--duration-fast) var(--ease);
  }
  .faq__toggle-more:hover { background: #F6F6F5; }

  /* ---- Desktop refinements (>=990px) ---- */
  @media (min-width: 990px) {
    .faq { padding: 80px 0; }
    .faq__heading { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 14px; }
    .faq__support { font-size: 16px; line-height: 1.65; }
    .faq__right { flex: 0 0 auto; max-width: none; }
    .faq__question { padding: 22px 0; font-size: 18px; }
    .faq__answer-inner { padding-bottom: 22px; font-size: 16px; line-height: 1.65; }
    .faq__toggle-more { margin-top: 20px; }
  }

  /* ---- Desktop composition pass (>=990px) ----
     Text-led section: 720px column already set above.
     Fix: heading clamp middle term never reached its 38px max until 1188px,
     so the desktop size sat below the 34-40px target across most of the range.
     Also caps answer paragraphs to ~68ch. */
  @media (min-width: 990px) {
    .faq__heading { font-size: clamp(34px, 3.2vw, 38px); }
    .faq__answer-inner { max-width: 68ch; }
  }

  /* Product-page desktop ending: FAQ and guarantee share one balanced row. The
     section keys in templates/product.json are stable, and dense placement lets the
     adjacent final_cta fill the FAQ row's right column while every other PDP section
     continues to span the full page. DOM order and the mobile stack are unchanged. */
  @media (min-width: 990px) {
    main[data-template="product"] {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-auto-flow: row dense;
    }
    main[data-template="product"] > .shopify-section {
      grid-column: 1 / -1;
      min-width: 0;
    }
    main[data-template="product"] > [id$="__faq"] {
      grid-column: 1;
    }
    main[data-template="product"] > [id$="__final_cta"] {
      grid-column: 2;
    }
    main[data-template="product"] > [id$="__faq"] .faq,
    main[data-template="product"] > [id$="__final_cta"] .fcg-section {
      height: 100%;
      box-sizing: border-box;
    }
    main[data-template="product"] > [id$="__faq"] .faq__inner {
      box-sizing: border-box;
      width: 100%;
      max-width: 600px;
      margin-left: auto;
      margin-right: 0;
      padding-left: 40px;
      padding-right: 40px;
    }
    main[data-template="product"] > [id$="__final_cta"] .fcg-wrap {
      box-sizing: border-box;
      width: 100%;
      max-width: 600px;
      margin-left: 0;
      margin-right: auto;
      padding-left: 40px;
      padding-right: 40px;
    }
  }

  .fcg-section {
    background: #ffffff;
    padding: 32px 0;
    border-top: 1px solid #ECEDED;
    font-family: 'General Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
  }
  /* The schema class duplicates .fcg-section on the Shopify wrapper — collapse the inner one */
  .fcg-section .fcg-section { padding: 0; border-top: 0; background: transparent; }
  .fcg-wrap {
    max-width: var(--max-width, 1440px);
    margin: 0 auto;
    padding: 0 var(--px-mobile, 16px);
    text-align: left;
  }
  @media (min-width: 990px) {
    .fcg-section { padding: 64px 0; }
    .fcg-wrap { padding: 0 var(--px-desktop, 48px); }
  }

  /* ---- Guarantee card: contained and centered — page background stays visible ---- */
  .fcg-inner {
    max-width: 660px;
    margin: 0 auto;
    background: #F4F4F3;
    border-radius: 12px;
    padding: 28px 24px;
    color: #0a1628;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 990px) {
    .fcg-inner { padding: 40px 44px 36px; }
  }

  /* ---- Top row: number block left, shield right ---- */
  .fcg-lockup {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin: 0;
  }
  .fcg-lock-text { min-width: 0; }

  .fcg-num {
    display: block;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -0.015em;
    font-variant-numeric: lining-nums;
    margin: 0;
  }
  .fcg-lab {
    display: block;
    font-family: 'General Sans', sans-serif;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #0079B8;
    margin: 9px 0 0;
  }
  .fcg-bar {
    display: block;
    width: 44px;
    height: 2px;
    background: #00AAFF;
    margin-top: 15px;
  }

  .fcg-shield { flex: none; display: block; width: 38px; height: 38px; margin-top: 4px; }
  .fcg-shield svg { width: 100%; height: 100%; display: block; }
  .fcg-shield img { width: 100%; height: 100%; object-fit: contain; display: block; }

  /* ---- Body ---- */
  .fcg-body {
    margin: 16px 0 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: #454E59;
  }
  .fcg-body p { margin: 0 0 10px; }
  .fcg-body p:last-child { margin-bottom: 0; }

  /* ---- In-card product image slot (assembly 08: ~130px, right side of the card) ---- */
  .fcg-slot {
    height: 130px;
    margin: 16px 0 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  /* ---- Checks ---- */
  .fcg-checks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 18px 0 0;
  }
  .fcg-check {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13.5px;
    font-weight: 600;
  }
  .fcg-check-ic {
    width: 20px;
    height: 20px;
    flex: none;
    border-radius: 50%;
    background: rgba(0, 170, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fcg-check-ic svg { width: 11px; height: 11px; display: block; }

  /* ---- CTA + fineprint ---- */
  .fcg-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    background: #0A1628;
    color: #fff;
    border-radius: 10px;
    padding: 15px;
    font-family: 'General Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin-top: 22px;
    text-align: center;
    text-decoration: none;
    transition: background 0.15s;
  }
  .fcg-cta:hover { background: #132743; }
  .fcg-fineprint {
    text-align: center;
    font-size: 11.5px;
    color: #9AA1A9;
    margin: 12px 0 0;
  }

  /* ---- Desktop refinements (>=990px) ---- */
  @media (min-width: 990px) {
    .fcg-section { padding: 80px 0; }
    .fcg-wrap { max-width: 1200px; padding: 0 40px; }
    .fcg-body { font-size: 16px; line-height: 1.65; margin-top: 18px; }
    .fcg-checks {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      gap: 24px;
      margin-top: 22px;
    }
    .fcg-check { font-size: 15px; }
    .fcg-cta {
      display: inline-flex;
      align-self: center;
      min-width: 280px;
      margin-top: 26px;
      padding: 16px 40px;
      font-size: 16px;
    }
    .fcg-fineprint { font-size: 13px; margin-top: 14px; }
  }

  html.ablrv-modal-open { overflow: hidden; }

  #pdp-reviews-feed { scroll-margin-top: calc(var(--header-height, 50px) + 12px); }

  #abl-reviews-template--21378321940589__reviews_feed {
    position: relative;
    overflow: hidden;
    scroll-margin-top: calc(var(--header-height, 50px) + 12px);
    padding: 72px 0 72px;
    color: #2C3340;
    background: #ffffff;
    border-top: 1px solid #E8ECF1;
    font-family: 'General Sans', sans-serif;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__inner {
    position: relative;
    z-index: 1;
  }

  #abl-reviews-template--21378321940589__reviews_feed * { box-sizing: border-box; }
  #abl-reviews-template--21378321940589__reviews_feed [hidden] { display: none !important; }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__inner {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 40px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #555F6A;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__eyebrow::before {
    width: 6px;
    height: 6px;
    flex: none;
    background: #00AAFF;
    border-radius: 50%;
    content: '';
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__heading {
    max-width: 760px;
    margin: 0;
    color: #0A1628;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__summary {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    margin-top: 30px;
    border-top: 1px solid #E1E6EB;
    border-bottom: 1px solid #E1E6EB;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 150px;
    padding-right: 26px;
    border-right: 1px solid #E1E6EB;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__score-line {
    display: flex;
    align-items: baseline;
    gap: 9px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__score-number {
    color: #0A1628;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__stars {
    display: inline-flex;
    gap: 1px;
    color: #0A1628;
    font-size: 15px;
    letter-spacing: -.02em;
    line-height: 1;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__score-count {
    margin-top: 8px;
    color: #66707B;
    font-size: 12px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__breakdown {
    display: grid;
    align-content: center;
    gap: 9px;
    min-width: 0;
    padding: 22px 0 22px 32px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__bar-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    color: #4C5662;
    font-size: 11px;
    line-height: 1;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__bar-track {
    height: 7px;
    overflow: hidden;
    background: #E5E9EE;
    border-radius: 999px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__bar-fill {
    display: block;
    width: var(--ablrv-share);
    min-width: 3px;
    height: 100%;
    background: #0A1628;
    border-radius: inherit;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__bar-count { text-align: right; }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 16px;
    color: #66707B;
    font-size: 12px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__order strong {
    color: #0A1628;
    font-weight: 600;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 1px;
    gap: 0 14px;
    align-items: start;
    overflow-anchor: none;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__card,
  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo {
    min-width: 0;
    margin: 0 0 14px;
    border-radius: 12px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    color: #2C3340;
    background: #FFFFFF;
    border: 1px solid #E1E6EB;
    font: inherit;
    text-align: left;
  }

  #abl-reviews-template--21378321940589__reviews_feed button.ablrv__card {
    appearance: none;
    cursor: pointer;
    transition: border-color 160ms ease;
  }

  #abl-reviews-template--21378321940589__reviews_feed button.ablrv__card:hover {
    border-color: #C7D0DA;
  }

  #abl-reviews-template--21378321940589__reviews_feed button.ablrv__card:focus-visible,
  #abl-reviews-template--21378321940589__reviews_feed .ablrv__more:focus-visible,
  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-link:focus-visible,
  #abl-reviews-template--21378321940589__reviews_feed .ablrv__dialog-close:focus-visible {
    outline: 2px solid #0088CC;
    outline-offset: 3px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__photos[data-count='1'] {
    grid-template-columns: 1fr;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__photos img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    display: block;
    object-fit: cover;
    background: #EEF1F4;
    border-radius: 8px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__photos[data-count='1'] img {
    aspect-ratio: 16 / 10;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__card-stars {
    display: inline-flex;
    gap: 1px;
    color: #0A1628;
    font-size: 13px;
    line-height: 1;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__star-off { color: #C9D0D8; }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__date {
    flex: none;
    color: #7A8490;
    font-size: 11px;
    white-space: nowrap;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__title {
    display: -webkit-box;
    overflow: hidden;
    color: #0A1628;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__excerpt {
    color: #39424C;
    font-size: 13px;
    line-height: 1.55;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__read {
    color: #0079B8;
    font-size: 12px;
    font-weight: 600;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px;
    padding-top: 10px;
    color: #66707B;
    border-top: 1px solid #E8ECF1;
    font-size: 11px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__person {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__person strong {
    color: #0A1628;
    font-weight: 600;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: none;
    padding: 2px 7px;
    color: #66707B;
    background: #FFFFFF;
    border: 1px solid #E1E6EB;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__verified svg {
    width: 11px;
    height: 11px;
    display: block;
    flex: none;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo {
    min-height: 310px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: #FFFFFF;
    background-color: #0A1628;
    background-position: center;
    background-size: cover;
    border: 1px solid rgba(10, 22, 40, .16);
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(5, 17, 32, .62);
    content: '';
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-copy { padding: 28px; }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-kicker {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-title {
    margin: 0 0 8px;
    color: #FFFFFF;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.05;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-text {
    max-width: 32ch;
    margin: 0 0 15px;
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    line-height: 1.45;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    color: #FFFFFF;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(8px);
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 22px;
  }

  #abl-reviews-template--21378321940589__reviews_feed .ablrv__more {
    appearance: none;
    min-width: 210px;
    padding: 12px 20px;
    color: #0A1628;
    background: #FFFFFF;
    border: 1px solid #0A1628;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  #abl-review-dialog-template--21378321940589__reviews_feed {
    position: fixed;
    inset: 0;
    z-index: 9999;
    box-sizing: border-box;
    width: min(650px, calc(100% - 28px));
    max-height: 88vh;
    margin: auto;
    padding: 0;
    overflow: hidden;
    color: #2C3340;
    background: #FFFFFF;
    border: 1px solid #E1E6EB;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(10, 22, 40, .2);
    outline: none;
  }

  #abl-review-dialog-template--21378321940589__reviews_feed::backdrop { background: rgba(10, 22, 40, .48); }

  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__dialog-inner {
    position: relative;
    max-height: 88vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 28px;
  }

  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__dialog-close {
    appearance: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0A1628;
    background: #FFFFFF;
    border: 1px solid #D9E0E7;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(10, 22, 40, .08);
    cursor: pointer;
  }

  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__dialog-close svg {
    display: block;
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-stars {
    gap: 2px;
    margin: 4px 48px 10px 0;
    font-size: 19px;
  }
  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-title {
    margin: 0 44px 8px 0;
    color: #0A1628;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
  }
  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
    color: #66707B;
    font-size: 12px;
  }
  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-meta strong { color: #0A1628; }
  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-photos { margin: 0 0 18px; }
  #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-body {
    color: #2C3340;
    font-size: 15px;
    line-height: 1.7;
  }
  @media (max-width: 760px) {
    #pdp-reviews-feed { scroll-margin-top: calc(var(--header-height, 50px) + 12px); }
    #abl-reviews-template--21378321940589__reviews_feed {
      padding: 44px 0 44px;
      scroll-margin-top: calc(var(--header-height, 50px) + 12px);
    }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__inner { padding: 0 16px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__eyebrow { margin-bottom: 9px; font-size: 10px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__heading { max-width: 13ch; font-size: 28px; line-height: 1.04; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__summary { grid-template-columns: 130px minmax(0, 1fr); margin-top: 24px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__score { min-height: 116px; padding-right: 16px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__score-line { display: block; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__score-number { display: block; font-size: 34px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__stars { margin-top: 4px; font-size: 13px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__score-count { margin-top: 6px; font-size: 10px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__breakdown { gap: 7px; padding: 16px 0 16px 14px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__bar-row { grid-template-columns: 10px minmax(0, 1fr) 30px; gap: 8px; font-size: 9px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__bar-track { height: 4px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__order { margin: 20px 0 13px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__card,
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo { margin-bottom: 8px; border-radius: 10px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__card { gap: 8px; padding: 10px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__photos { gap: 4px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__photos img { border-radius: 6px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__card-head { display: block; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__card-stars { display: flex; font-size: 11px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__date { display: block; margin-top: 4px; font-size: 9px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__title { font-size: 13px; line-height: 1.22; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__excerpt { font-size: 10.5px; line-height: 1.5; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__read { font-size: 10px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__footer { align-items: flex-start; font-size: 9px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__verified { padding: 2px 6px; font-size: 8.5px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__verified svg { width: 9px; height: 9px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo { min-height: 292px; background-position: center; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-copy { padding: 17px 13px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-kicker { font-size: 10px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-title { font-size: 25px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-text { font-size: 13px; }
    #abl-reviews-template--21378321940589__reviews_feed .ablrv__promo-link { padding: 7px 9px; font-size: 10px; }

    #abl-review-dialog-template--21378321940589__reviews_feed {
      width: 100%;
      max-width: none;
      max-height: 86svh;
      margin: auto 0 0;
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      border-radius: 16px 16px 0 0;
    }
    #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__dialog-inner { max-height: 86svh; padding: 22px 18px calc(44px + env(safe-area-inset-bottom)); }
    #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__dialog-close { top: 16px; right: 16px; }
    #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-stars { font-size: 18px; }
    #abl-review-dialog-template--21378321940589__reviews_feed .ablrv__modal-title { font-size: 23px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #abl-reviews-template--21378321940589__reviews_feed button.ablrv__card { transition: none; }
  }