/** Shopify CDN: Minification failed

Line 59:50 Unexpected bad string token
Line 59:73 Unterminated string token

**/
/* ▼▼▼ BAND A REGION — hero, cert strip, science, numbers, comparison ▼▼▼ */
/* ---- §01 hero: copy left, video panel right ---- */
.home .hh { padding-top: clamp(40px, 5vw, 72px); }
.home .hh__grid { display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.home .hh__grid > * { min-width: 0; }
.home .hh__ctas { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.home .hh__micro { display: flex; gap: var(--s-5); flex-wrap: wrap;
  font-family: var(--font-data); font-size: var(--t-xs); color: var(--ink-500); }
.home .hh__micro span { display: inline-flex; align-items: center; gap: var(--s-2); }
.home .hh__micro svg { width: 16px; height: 16px; color: var(--blue-600); }
.home .hh__media { border-radius: var(--r-lg); overflow: hidden; background: var(--ink-900);
  aspect-ratio: 4 / 4.6; box-shadow: var(--shadow-card); }
.home .hh__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 940px) {.home .hh__grid { grid-template-columns: 1fr; }
.home .hh__media { aspect-ratio: 4 / 4.2; }}
/* ---- §03 the equation ----
   Display type, not data type: this is the page slogan written in chemistry,
   so it gets the headline face at headline tracking. The reaction arrow steps
   to blue-200 so the aqua product stays the single brightest thing. */
.home .eq { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 6vw, 4.25rem); letter-spacing: -.03em; line-height: 1.05;
  color: #fff; white-space: nowrap; }
.home .eq .eq__arw { color: var(--blue-200); font-weight: 400; padding-inline: .08em; }
@media (max-width: 480px) {.home .eq { white-space: normal; }}
/* ---- §05 comparison cards ---- */
.home .h2o__card { display: flex; flex-direction: column; align-items: flex-start; }
.home .h2o__card > * + * { margin-top: 0; }
.home .h2o__rows { width: 100%; display: grid; }
.home .h2o__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-block: var(--s-3); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.home .h2o__rows li:last-child { border-bottom: 0; }
.home .h2o__rows span { color: var(--ink-300); font-family: var(--font-data); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase; }
.home .h2o__rows b { font-family: var(--font-data); font-weight: 600; color: var(--ink-700); }
.home .h2o__rows b.hi { color: var(--blue-600); }
.home .h2o__card--win { border: 1.5px solid var(--blue-600); background: var(--paper); box-shadow: var(--shadow-card); }
/* ---- shared chrome carried from hydromax-A band regions ---- */
/* ---- §02 .marquee · heading out of the band, band pulled in ----
   .mqsec is the new outer section on paper; .marquee is now only the tinted
   strip. The base rule still owns the tint, the border and the edge fades —
   this only changes the box the heading sits in and how tall the strip is. */
/* The heading left the band, so its own bottom margin is now the gap between
   paper and tint, and --s-5 read as a gap rather than a label attached to the
   strip below it.

   The base sets --ink-300 on it, which is #8AA3AC on white: 2.65:1, under the
   4.5:1 AA needs for text this size. It was faint inside the tinted band and
   fainter once it moved onto paper. --ink-700 is 12.18:1, and the extra step
   in size and weight is what actually makes it read as the strip's heading
   rather than a caption floating above it. */
.home :not(:hover) rather than a flat override on .marquee:hover .mk — an
   identical selector later in the sheet would also win against
   .marquee .mk:hover and flatten the hovered mark's opacity to .72 while
   leaving its colour change behind, which is half a state. Excluding the
   hovered mark leaves the base highlight intact and untouched. */
.marquee:hover .mk:not(:hover) { opacity: .72; }

 
.mqsec { background: var(--paper); padding-top: var(--s-6); }
 
.mqsec .marquee__head {
  margin-bottom: var(--s-4);
  color: var(--ink-700);
  font-size: 0.8125rem;
  font-weight: 600;
}
/* 32px → 16px. With the heading gone the band carries one 44px row of marks,
   so the old padding was more air than content: 108px of strip for 44px of
   logo. 76px sits the marks in the band without the band becoming a slab. */
.home .mqsec .marquee { padding-block: var(--s-4); }
/* ---- §02 .marquee · put the marks on one line ----
   The track already centres itself in the band — measured on the live page, the
   air above and below it is 17px either side, so the band was never the problem.
   What is off is inside each mark. .mk is a centred column of logo + caption,
   and .mk--tall bumps the logo 26px → 36px for the round marks. Centring the
   whole column means the extra 10px is split 5 above and 5 below, so the tall
   marks' captions sit 5px lower than the short ones and the row of captions
   zigzags: Recognized at y1432, Certified at y1437, Recognized again at y1432.

   Fixing it by centring harder cannot work — every column is already centred.
   The logo has to stop changing the column's height. A fixed 36px logo row does
   that: both sizes centre inside the tallest one, so the logos keep the common
   optical centre they already had (measured: both at y1412.2) and every caption
   now starts at the same y. Grid rather than flex because the row height is the
   whole mechanism; row-gap restates the base rule's 7px, which grid does not
   inherit from the flex declaration it is replacing. */
.home .mk {
  display: grid;
  grid-template-rows: 36px auto;
  row-gap: 7px;
  justify-items: center;
  align-items: center;
}
.home .frail {
  position: fixed; right: clamp(14px, 1.8vw, 26px);
  /* 84 = ChQMe's 16px resting bottom + its 54px circle + the rail's own 14px
     gap, so ChQMe reads as this rail's second button rather than a separate
     widget parked underneath (the rail offers chat, ChQMe offers video; the
     16px pin is Band D's `.hm ~ #chqme-widget-btn` rule). One value at every
     width: the sticky buy bar the rail once lifted 148px to clear is vaulted,
     so the whole stack sits just above the viewport bottom on phone and
     desktop alike. If the buy bar returns, re-raise both (see the vault
     file's restore recipe). */
  bottom: 84px;
  z-index: 60;   /* under the mobile drawer (90) and the cart drawer (95) */
  display: grid; gap: 14px; justify-items: end;
  transition: opacity 220ms var(--ease-ui), visibility 220ms var(--ease-ui);
}
/* Set by band-a.js once the footer comes into view. A plain fade — the rail
   leaving is not an event worth staging. */
.home .frail.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.home .frail__btn {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; text-decoration: none;
  /* Three layers: a contact shadow to seat it, a mid shadow for weight, and a
     wide soft one for lift. One flat shadow is what makes a floating button
     look pasted on. */
  box-shadow:
    0 1px 2px rgba(6,34,44,.16),
    0 6px 14px -6px rgba(6,34,44,.28),
    0 22px 40px -22px rgba(6,34,44,.45);
}
/* ~60% of the button, which is where WhatsApp's own floating button sits.
   The glyph is still the unmodified sprite — only the box it is drawn in
   changed. The video mark is a stroked outline against a solid one, and a
   stroked icon reads lighter at the same box size, so it takes a little more
   to look like the same weight. */
.home .frail__ico { width: 32px; height: 32px; }
.home .frail__btn--wa { background: #25D366; color: #fff; }
/* .frail__btn--vid removed with its button — it was a WhatsApp deep link
   dressed as a video call. ChQMe, restyled at the foot of this region to match
   .frail__btn, is the real one. */
.home .frail__btn:focus-visible { outline: 2px solid var(--blue-900); outline-offset: 3px; }
/* ▼▼▼ BAND A REGION — SESSION 1 ONLY ▼▼▼
   Sections 01–05: hero, cert strip, gap, problem, science */
/* ---- nav · cart count + mini cart ----
   Header extensions. They live HERE and not with the nav rules above the
   PARALLEL banner because everything above the banner builds into the shared
   hm-base.css, which no seat pushes — this region ships in hm-1.css, which
   Band A does. Same page, different deploy unit.

   The scroll lock is set inline from band-a.js and predates the porter's
   html.-passthrough fix; it works, so it stays. band-a.js ALSO sets
   html.cartd-open now — not for the lock, just as the CSS hook below for
   hiding the ChQMe embed while the drawer is open. */
.home .nav__icon--cart { position: relative; }
.home .nav__count {
  position: absolute; top: 2px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  font-family: var(--font-data); font-size: 10px; font-weight: 600; line-height: 1;
  color: #fff; background: var(--blue-600);
  border-radius: var(--r-pill);
}
/* display:grid on the class outranks the UA's [hidden]{display:none} —
   without this the empty badge renders as a bare dot. */
.home .nav__count[hidden] { display: none; }
.home .cartd { position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.home .cartd.open { visibility: visible; }
/* Same bug as the mobile menu (see the shared layer's drawer-open rule): the
   ChQMe button's ~2^31 z-index floats over this drawer's scrim too, so it is
   hidden while the cart is open. */
html.cartd-open #chqme-widget-btn { visibility: hidden !important; }
.home .cartd__scrim {
  position: absolute; inset: 0; background: rgba(2, 26, 34, .45);
  opacity: 0; transition: opacity var(--dur-ui) var(--ease-ui);
}
.home .cartd.open .cartd__scrim { opacity: 1; }
.home .cartd__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: var(--paper); box-shadow: var(--shadow-lift);
  transform: translateX(100%);
  transition: transform var(--dur-water) var(--ease-water);
}
.home .cartd.open .cartd__panel { transform: none; }
@media (prefers-reduced-motion: reduce) {.home .cartd__scrim, .home .cartd__panel { transition: none; }}
.home .cartd__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line);
}
.home .cartd__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; }
.home .cartd__n { color: var(--ink-500); font-weight: 500; }
.home .cartd__close {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ink-700); cursor: pointer;
  transition: background var(--dur-ui) var(--ease-ui), color var(--dur-ui) var(--ease-ui);
}
.home .cartd__close svg { width: 20px; height: 20px; }
.home .cartd__close:hover { background: var(--blue-50); color: var(--blue-600); }
.home .cartd__close:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.home .cartd__body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-6); }
.home .cartd__empty { padding: var(--s-6) 0; color: var(--ink-500); font-size: var(--t-sm); text-align: center; }
.home .cartd__item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-4);
  align-items: center;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line);
}
.home .cartd__img {
  width: 64px; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-sm); background: var(--paper-tint); display: block;
}
.home .cartd__name { font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.home .cartd__variant { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-500); }
.home .cartd__price { font-family: var(--font-data); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.home .cartd__qty {
  margin-top: var(--s-2);
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill);
}
.home .cartd__qty button {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%;
  font-family: var(--font-data); font-size: .95rem; color: var(--ink-700); cursor: pointer;
}
.home .cartd__qty button:hover { color: var(--blue-600); background: var(--blue-50); }
.home .cartd__qty button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.home .cartd__qty span { min-width: 20px; text-align: center; font-family: var(--font-data); font-size: var(--t-sm); }
.home .cartd__rm {
  margin-top: var(--s-1); padding: 0;
  background: transparent; border: 0; cursor: pointer;
  font-size: var(--t-xs); color: var(--ink-500); text-decoration: underline;
  text-underline-offset: 2px;
}
.home .cartd__rm:hover { color: var(--negative); }
.home .cartd__rm:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
.home .cartd__foot { padding: var(--s-5) var(--s-6); border-top: 1px solid var(--line); }
.home .cartd__row { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-body); }
.home .cartd__row strong { font-family: var(--font-data); font-weight: 600; }
.home .cartd__note { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--ink-500); }
.home .cartd__checkout { width: 100%; margin-top: var(--s-4); justify-content: center; }
/* The drawer is busy while a quantity call is in flight — double-clicking a
   stepper twice otherwise fires two writes against the same line. */
.home .cartd.is-busy .cartd__body { opacity: .55; pointer-events: none; }
/* ---- ChQMe widget · position + paint ----
   Third-party app embed injected as a direct child of <body>, OUTSIDE the
   .home wrapper — hence the sibling combinator, the one selector form that
   survives the porter's scoping (see hydromax-A's annotated original; do not
   "simplify" to a bare id). Without the pin it parks at the rail's own spot
   and sits ON TOP of the WhatsApp button. The rail rests at bottom: 84px =
   ChQMe's 16px + its 54px circle + the rail's 14px gap, so ChQMe reads as
   the rail's second button: WhatsApp on top, video call under it. */
.home ~ #chqme-widget-btn {
  bottom: 16px !important;
  right: clamp(14px, 1.8vw, 26px) !important;
  left: auto !important;
  width: 54px !important;
  height: 54px !important;
  background: var(--blue-600) !important;
  border: 0 !important;
  box-shadow:
    0 1px 2px rgba(6,34,44,.16),
    0 6px 14px -6px rgba(6,34,44,.28),
    0 22px 40px -22px rgba(6,34,44,.45) !important;
  transition: background var(--dur-ui) var(--ease-ui), transform var(--dur-ui) var(--ease-ui);
  --chqme-widget-btn-color: var(--aqua);
}
.home ~ #chqme-widget-btn:hover { background: var(--blue-700) !important; transform: translateY(-2px); }
.home ~ #chqme-widget-btn:focus-visible { outline: 2px solid var(--blue-900) !important; outline-offset: 3px !important; }
.home ~ #chqme-widget-btn .chqme-widget-notification-dot { background: var(--amber) !important; }
@media (prefers-reduced-motion: reduce) {.home ~ #chqme-widget-btn:hover { transform: none; }}
/* Stands down with the rail while the footer is on screen (band-d.js). */
.home ~ #chqme-widget-btn.home-at-foot { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* ▲▲▲ BAND A REGION END ▲▲▲ */