/* =================================================================
   BETTER TAP — Shared Design System
   Brand: YJC Trade LLC · Built from BetterTap Handoff + Brand Guide
   Fonts: Aeonik (display) + Neue Haas Grotesk (body)
          rendered via free matches General Sans + Inter.
          Drop licensed files into assets/fonts/ and the @font-face
          blocks below pick them up automatically.
   Palette: Navy #141937 · Green #213E3C · Cream #F9F3E7 ·
            Grey #F4F4F4 · Black #000 · Blue #1E6BE6 (primary UI)
   ================================================================= */

/* ---- Licensed brand fonts (optional drop-in) ----
   When you have the Aeonik + Neue Haas Grotesk web licenses, add the .woff2
   files to assets/fonts/ and UNCOMMENT the @font-face blocks below — the font
   stack already prefers them. Left commented so there are no 404s until then.
@font-face{font-family:'Aeonik';src:url('../fonts/Aeonik-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Aeonik';src:url('../fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('../fonts/NeueHaasGroteskDisplayPro-55Roman.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('../fonts/NeueHaasGroteskDisplayPro-65Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Neue Haas Grotesk';src:url('../fonts/NeueHaasGroteskDisplayPro-75Bold.woff2') format('woff2');font-weight:700;font-display:swap}
*/

:root{
  --navy:#141937; --navy-600:#222a52;
  --green:#213E3C; --cream:#F9F3E7;
  --grey:#F4F4F4; --grey-200:#e9eaee; --black:#000;
  --white:#fff;
  /* Primary blue sampled directly from the handoff (#4D97DB) */
  --blue:#4D97DB; --blue-600:#3B82C9; --blue-700:#2C6EAE; --blue-050:#EAF3FB; --blue-100:#D6E8F8;
  --blue-bright:#5AA8E8; --blue-soft:#A9D3F2;
  --yellow:#FBF49B;

  --ink:#141937;                 /* default text — headlines, where to look */
  --ink-60:rgba(20,25,55,.70);   /* body — readable, clearly below headlines */
  --ink-40:rgba(20,25,55,.50);   /* captions / tertiary */
  --line:rgba(20,25,55,.12);
  --line-soft:rgba(20,25,55,.07);

  --display:'Aeonik','General Sans','Neue Haas Grotesk','Inter','Helvetica Neue',Arial,sans-serif;
  --sans:'Neue Haas Grotesk','Inter','Helvetica Neue',Arial,sans-serif;

  --step--2:clamp(.72rem,.7rem + .1vw,.8rem);
  --step--1:clamp(.84rem,.8rem + .2vw,.94rem);
  --step-0 :clamp(1rem,.96rem + .25vw,1.12rem);
  --step-1 :clamp(1.2rem,1.05rem + .7vw,1.5rem);
  --step-2 :clamp(1.6rem,1.25rem + 1.6vw,2.5rem);
  --step-3 :clamp(2.1rem,1.5rem + 3vw,3.75rem);
  --step-4 :clamp(2.8rem,1.7rem + 5.2vw,5.75rem);
  --step-5 :clamp(3.4rem,1.8rem + 8vw,8rem);

  --maxw:1240px;
  --gutter:clamp(18px,4.5vw,64px);
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:22px;
  /* unified elevation scale (shared across site + all portals) */
  --shadow-sm:0 1px 2px rgba(20,25,55,.05), 0 2px 6px -2px rgba(20,25,55,.08);
  --shadow-md:0 10px 30px -14px rgba(20,25,55,.18);
  --shadow-lg:0 24px 60px -24px rgba(20,25,55,.24);
  --shadow:var(--shadow-md);   /* legacy alias = card elevation */
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-h:72px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);background:var(--white);color:var(--ink);
  font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
input,textarea,select{font:inherit}
::selection{background:var(--yellow);color:var(--navy)}

h1,h2,h3,h4,h5{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.025em;color:var(--navy)}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1)}
p{text-wrap:pretty}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:clamp(38px,5.5vw,76px) 0}
.section--tight{padding:clamp(44px,6vw,80px) 0}
.center{text-align:center}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:var(--step--1);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-600)}
.lede{font-size:var(--step-1);color:var(--ink-60);line-height:1.45}
.accent{color:var(--blue)}

/* section schemes */
.sec-dark{background:var(--navy);color:var(--cream)}
.sec-dark h1,.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lede{color:rgba(249,243,231,.7)}
.sec-blue{background:var(--blue);color:#fff}
.sec-blue h2,.sec-blue h3{color:#fff}
.sec-blue .eyebrow{color:rgba(255,255,255,.85)}
.sec-green{background:var(--green);color:var(--cream)}
.sec-green h2,.sec-green h3{color:#fff}
.sec-cream{background:var(--cream)}
.sec-grey{background:var(--grey)}
.sec-bluelight{background:var(--blue-050)}

/* =================================================================
   Announcement bar
   ================================================================= */
.topbar{background:var(--navy);color:#fff;text-align:center;font-size:var(--step--2);
  letter-spacing:.14em;text-transform:uppercase;padding:9px 16px;font-weight:500}
.topbar b{color:var(--yellow);font-weight:700}

/* =================================================================
   Navigation
   ================================================================= */
.nav{position:sticky;top:0;z-index:800;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);transition:box-shadow .3s,background .3s}
.nav.scrolled{box-shadow:0 6px 24px -16px rgba(20,25,55,.35)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--nav-h);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.nav__brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.3rem;color:var(--navy)}
.nav__brand img{width:30px;height:30px}
.nav__links{display:flex;gap:30px}
.nav__links a{font-size:var(--step--1);font-weight:500;color:var(--ink);position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--blue);transition:width .35s var(--ease)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:14px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--navy);transition:background .25s}
.icon-btn:hover{background:var(--grey)}
.icon-btn svg{width:20px;height:20px}
.cart-dot{position:relative}
.cart-dot b{position:absolute;top:2px;right:2px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-family:var(--sans)}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px}
.nav__burger span{width:24px;height:2px;background:var(--navy);transition:.3s var(--ease)}
body.menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav__burger span:nth-child(2){opacity:0}
body.menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{position:fixed;inset:var(--nav-h) 0 0;background:var(--navy);z-index:790;
  transform:translateX(100%);transition:transform .45s var(--ease);padding:40px var(--gutter);display:flex;flex-direction:column;gap:8px}
body.menu-open .mobile-menu{transform:translateX(0)}
.mobile-menu a{font-family:var(--display);font-weight:700;font-size:2rem;color:#fff;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu .btn{margin-top:24px}

/* =================================================================
   Buttons
   ================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sans);
  font-weight:700;font-size:var(--step--1);letter-spacing:.005em;border-radius:100px;padding:15px 28px;
  position:relative;overflow:hidden;transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .3s;white-space:nowrap}
.btn>*{position:relative;z-index:2}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--blue-600);color:#fff;box-shadow:0 12px 28px -12px rgba(30,107,230,.8)}
.btn--primary:hover{background:var(--blue-700);transform:translateY(-2px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{transform:translateY(-2px);background:var(--navy-600)}
.btn--yellow{background:var(--yellow);color:var(--navy)}
.btn--yellow:hover{transform:translateY(-2px)}
.btn--ghost{border:1.5px solid var(--line);color:var(--navy);background:transparent}
.btn--ghost:hover{border-color:var(--navy)}
.btn--ghost-light{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn--ghost-light:hover{background:#fff;color:var(--navy)}
.btn--lg{padding:18px 36px;font-size:var(--step-0)}
.btn--block{display:flex;width:100%}

/* =================================================================
   Hero (overlay on image / colour)
   ================================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,25,55,.82) 0%,rgba(20,25,55,.45) 45%,rgba(20,25,55,0) 75%)}
.hero__orbs{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.7}
.hero__orb--1{width:42vw;height:42vw;left:-6vw;top:-8vw;background:radial-gradient(circle,rgba(62,139,255,.55),transparent 70%)}
.hero__orb--2{width:38vw;height:38vw;right:-6vw;bottom:-10vw;background:radial-gradient(circle,rgba(33,62,60,.8),transparent 70%)}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding:60px var(--gutter)}
.hero__content{max-width:620px;color:#fff}
.hero h1{color:#fff;font-size:var(--step-5);line-height:.95;margin:18px 0 22px}
.hero .lede{color:rgba(255,255,255,.82);max-width:46ch}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

/* trust badges strip */
.badges{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);justify-content:space-between;
  padding:22px var(--gutter);max-width:var(--maxw);margin-inline:auto}
.badge{display:flex;align-items:center;gap:10px;font-size:var(--step--1);font-weight:500;color:var(--ink-60)}
.badge svg{width:26px;height:26px;color:var(--blue);flex:none}
.badge b{color:var(--navy);font-weight:600}

/* =================================================================
   Comparison table (You've been choosing between bad options)
   ================================================================= */
.compare-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:clamp(30px,4vw,50px)}
.compare-table th,.compare-table td{padding:16px 14px;text-align:center;font-size:var(--step--1)}
.compare-table thead th{font-family:var(--display);font-weight:700;color:var(--navy);font-size:var(--step-0);vertical-align:bottom}
.compare-table tbody th{text-align:left;font-weight:500;color:var(--ink-60);font-family:var(--sans)}
.compare-table tbody tr+tr td,.compare-table tbody tr+tr th{border-top:1px solid var(--line-soft)}
.compare-table .col-bt{background:var(--blue);color:#fff;border-radius:18px 18px 0 0}
.compare-table tbody .col-bt{background:var(--blue)}
.compare-table tbody tr:last-child .col-bt{border-radius:0 0 18px 18px}
.compare-table .col-bt b{color:#fff}
.ic-yes{color:var(--blue)}.col-bt .ic-yes{color:#fff}
.ic-no{color:rgba(20,25,55,.55);font-weight:700}
.compare-table .col-bt .brandhead{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:8px}
.compare-table .col-bt .brandhead img{width:30px}

/* =================================================================
   Feature cards
   ================================================================= */
.fgrid{display:grid;gap:18px}
.fgrid--5{grid-template-columns:repeat(5,1fr)}
.fgrid--4{grid-template-columns:repeat(4,1fr)}
.fgrid--3{grid-template-columns:repeat(3,1fr)}
.fgrid--2{grid-template-columns:repeat(2,1fr)}
.fcard{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);padding:clamp(20px,2.4vw,30px);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.fcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.fcard__ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--blue-050);color:var(--blue);margin-bottom:16px}
.fcard__ic svg{width:26px;height:26px}
.fcard h3{margin-bottom:8px}
.fcard p{color:var(--ink-60);font-size:var(--step--1)}
.sec-grey .fcard,.sec-cream .fcard{background:#fff}

/* media feature cards (image top) */
.mcard{border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line-soft)}
.mcard__img{aspect-ratio:4/3;background:var(--grey-200);overflow:hidden}
.mcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.mcard:hover .mcard__img img{transform:scale(1.06)}
.mcard__body{padding:20px}
.mcard__body h3{font-size:var(--step-0);margin-bottom:4px}
.mcard__body p{font-size:var(--step--1);color:var(--ink-60)}

/* =================================================================
   "Replaces all this" cluster
   ================================================================= */
.replaces{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,40px);flex-wrap:wrap}
.replaces__old{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;flex:1;min-width:300px}
.repl-item{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:18px;text-align:center;font-size:var(--step--2);color:var(--ink-60)}
.repl-item .ph{aspect-ratio:1;display:grid;place-items:center;color:var(--ink-40);margin-bottom:10px;overflow:hidden;border-radius:10px;background:var(--grey)}
.repl-item .ph svg{width:46px;height:46px}
.repl-item .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) opacity(.92)}
.replaces__eq{font-family:var(--display);font-weight:700;font-size:var(--step-3);color:var(--navy)}
.replaces__new{flex:none;text-align:center}

/* =================================================================
   Reviews
   ================================================================= */
.reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.review{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:24px}
.stars{color:var(--blue);letter-spacing:2px;margin-bottom:12px}
.sec-cream .review,.sec-grey .review{background:#fff}
.review p{font-size:var(--step-0);margin-bottom:18px}
.review__who{display:flex;align-items:center;gap:10px;font-size:var(--step--1)}
.review__who .av{width:38px;height:38px;border-radius:50%;background:var(--blue-100);display:grid;place-items:center;font-weight:700;color:var(--blue);font-family:var(--display)}
.review__who b{display:block;color:var(--navy)}
.review__who small{color:var(--ink-40)}

/* =================================================================
   Zip / water checker
   ================================================================= */
.zipbox{display:flex;gap:10px;max-width:420px}
.zipbox input{flex:1;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;
  border-radius:100px;padding:15px 22px}
.zipbox input::placeholder{color:rgba(255,255,255,.6)}
.chiprow{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.chip{border:1px solid rgba(255,255,255,.35);border-radius:100px;padding:8px 16px;font-size:var(--step--1);font-weight:500}
.sec-blue .chip{background:rgba(255,255,255,.12)}

/* =================================================================
   Forms
   ================================================================= */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:var(--step--1);font-weight:600;color:var(--navy)}
.input,.textarea,select.input{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;color:var(--navy);transition:border-color .25s,box-shadow .25s}
.input:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.textarea{min-height:130px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* newsletter */
.subscribe{display:flex;gap:10px;max-width:420px}
.subscribe input{flex:1;border:1px solid var(--line);border-radius:100px;padding:13px 20px;background:#fff}

/* =================================================================
   Accordion (FAQ)
   ================================================================= */
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:22px 0;text-align:left;font-family:var(--display);font-weight:700;font-size:var(--step-1);color:var(--navy)}
.acc__q .pm{flex:none;width:26px;height:26px;position:relative;transition:transform .3s}
.acc__q .pm::before,.acc__q .pm::after{content:"";position:absolute;inset:50% 0;height:2px;background:var(--blue);transition:.3s}
.acc__q .pm::after{transform:rotate(90deg)}
.acc__item.open .pm::after{transform:rotate(0)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc__a p{padding-bottom:22px;color:var(--ink-60);max-width:70ch}

/* =================================================================
   Product page
   ================================================================= */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:start}
.pdp__gallery{position:sticky;top:calc(var(--nav-h) + 20px)}
.pdp__main{aspect-ratio:1;background:var(--grey);border-radius:var(--radius-lg);overflow:hidden;display:grid;place-items:center}
.pdp__main img{width:78%;object-fit:contain}
.pdp__thumbs{display:flex;gap:10px;margin-top:12px}
.pdp__thumbs button{width:74px;height:74px;border-radius:12px;background:var(--grey);border:2px solid transparent;overflow:hidden;display:grid;place-items:center;padding:8px}
.pdp__thumbs button.active{border-color:var(--blue)}
.pdp__tag{display:inline-block;background:var(--blue);color:#fff;font-size:var(--step--2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px;margin-bottom:12px}
.pdp__price{font-family:var(--display);font-weight:700;font-size:var(--step-2);color:var(--navy);margin:8px 0}
.pdp__rating{display:flex;align-items:center;gap:8px;color:var(--ink-60);font-size:var(--step--1)}
.pdp__list{margin:22px 0}
.pdp__list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:var(--ink)}
.pdp__list li svg{width:20px;height:20px;color:var(--blue);flex:none;margin-top:3px}
.pdp__swatches{display:flex;gap:10px;margin:16px 0}
.swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer}
.swatch.active{outline:2px solid var(--blue);outline-offset:2px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.qty button{padding:12px 16px;font-size:1.1rem}
.qty span{padding:0 8px;min-width:34px;text-align:center;font-weight:600}
.pdp__buy{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.pdp__fine{margin-top:14px;font-size:var(--step--2);color:var(--ink-40)}

/* pricing plans */
.plans{margin:14px 0 4px}
.plan-tabs{display:inline-flex;background:var(--grey);border-radius:100px;padding:4px;gap:4px}
.plan-tab{padding:9px 18px;border-radius:100px;font-size:var(--step--1);font-weight:600;color:var(--ink-60);transition:.25s}
.plan-tab.active{background:var(--blue);color:#fff;box-shadow:0 6px 16px -8px rgba(77,151,219,.8)}
.plan-terms{display:flex;gap:8px;margin:14px 0 4px}
.plan-terms[hidden]{display:none}
.term{padding:8px 16px;border:1.5px solid var(--line);border-radius:100px;font-size:var(--step--1);font-weight:600;color:var(--ink);transition:.25s}
.term.active{border-color:var(--blue);background:var(--blue-050);color:var(--blue-600)}
.plans .pdp__price{margin:14px 0 2px;display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.plan-unit{font-family:var(--sans);font-size:var(--step-1);font-weight:600;color:var(--ink-60);letter-spacing:0}
.plan-note{font-size:var(--step--1);color:var(--ink-60);margin:0}

/* temperature scale */
.tempscale{height:8px;border-radius:8px;background:linear-gradient(90deg,#3E8BFF,#9FD0FF,#F9F3E7,#FBC15B,#E2452F);position:relative;margin:30px 0 8px}
.tempscale span{position:absolute;top:-26px;transform:translateX(-50%);font-size:var(--step--2);color:var(--ink-60)}

/* =================================================================
   Filtration / process steps
   ================================================================= */
.steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;counter-reset:s}
.pstep{position:relative}
.pstep .n{font-family:var(--display);font-weight:700;color:var(--blue);font-size:var(--step-1);margin-bottom:10px}
.pstep h3{font-size:var(--step-0);margin-bottom:6px}
.pstep p{font-size:var(--step--1);color:var(--ink-60)}
.mineral{background:#fff;border-radius:var(--radius);padding:24px;text-align:center}
.mineral .sym{font-family:var(--display);font-weight:700;font-size:var(--step-2);color:var(--navy)}
.mineral .amt{font-size:var(--step--2);color:var(--ink-40)}

/* contaminant pills grid */
.pills{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.pill{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:14px;font-size:var(--step--1);font-weight:500}
.pill svg{width:20px;height:20px;color:var(--blue);flex:none}
.sec-grey .pill,.sec-cream .pill{background:#fff}

/* =================================================================
   Footer
   ================================================================= */
.footer{background:var(--blue);color:#fff;padding:clamp(50px,7vw,84px) 0 30px}
.footer a{color:rgba(255,255,255,.85)}
.footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
.footer__brand img{width:34px;margin-bottom:14px}
.footer__brand .name{font-family:var(--display);font-weight:700;font-size:1.4rem;display:flex;align-items:center;gap:10px;margin-bottom:14px}
.footer__brand p{color:rgba(255,255,255,.8);max-width:24ch}
.footer__social{display:flex;gap:12px;margin-top:18px}
.footer__social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.footer__social a:hover{background:rgba(255,255,255,.28)}
.footer col,.footer__col h4{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;font-weight:700;font-family:var(--sans)}
.footer__col a{display:block;padding:5px 0;font-size:var(--step--1)}
.footer__news{grid-column:span 2}
.footer__news h4{font-family:var(--display);font-size:var(--step-0);text-transform:none;letter-spacing:-.01em;color:#fff;margin-bottom:6px}
.footer__news p{color:rgba(255,255,255,.8);font-size:var(--step--1);margin-bottom:14px}
.footer__news .subscribe input{border:none}
.footer__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;
  margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);font-size:var(--step--2);color:rgba(255,255,255,.75)}
.footer__bottom a{color:rgba(255,255,255,.75)}

/* =================================================================
   Reveal animations
   ================================================================= */
html.io [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.io [data-rise].in{opacity:1;transform:none}
[data-rise-d="1"]{transition-delay:.08s}
[data-rise-d="2"]{transition-delay:.16s}
[data-rise-d="3"]{transition-delay:.24s}
[data-rise-d="4"]{transition-delay:.32s}

/* marquee */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0}
.marquee__t{display:flex;width:max-content;gap:0;animation:marq 30s linear infinite}
.marquee:hover .marquee__t{animation-play-state:paused}
.marquee__t span{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3.4vw,2.6rem);color:var(--navy);padding:0 .5em;white-space:nowrap}
.marquee__t i{color:var(--blue);font-style:normal}
@keyframes marq{to{transform:translateX(-50%)}}

/* Footer legal row + Admin login button */
.footer__legal{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.footer__admin{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);
  color:#fff;font-weight:700;font-size:var(--step--2);letter-spacing:.04em;text-transform:uppercase;
  padding:8px 14px;border-radius:100px;transition:background .25s,transform .25s}
.footer__admin::before{content:"";width:13px;height:13px;border-radius:3px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Crect x='4' y='10' width='16' height='10' rx='2' stroke='white' stroke-width='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' stroke='white' stroke-width='2'/%3E%3C/svg%3E")}
.footer__admin:hover{background:rgba(255,255,255,.3);transform:translateY(-1px);color:#fff}

/* helpers */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.stack-sm>*+*{margin-top:12px}
.mt-s{margin-top:18px}.mt-m{margin-top:32px}.mt-l{margin-top:56px}
.maxw-prose{max-width:62ch}

/* =================================================================
   Responsive
   ================================================================= */
@media (max-width:1024px){
  .fgrid--5{grid-template-columns:repeat(3,1fr)}
  .fgrid--4{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:repeat(2,1fr)}
  .steps-row,.pills{grid-template-columns:repeat(3,1fr)}
  .pdp{grid-template-columns:1fr}
  .pdp__gallery{position:static}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__news{grid-column:span 3}
}
@media (max-width:760px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .grid-2{grid-template-columns:1fr}
  .fgrid--5,.fgrid--4,.fgrid--3,.fgrid--2{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .steps-row,.pills{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .replaces__old{grid-template-columns:repeat(3,1fr);min-width:0}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__news{grid-column:span 2}
  .compare-table{font-size:var(--step--2)}
  .compare-table th,.compare-table td{padding:10px 6px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html.io [data-rise],html.io [data-flow]{opacity:1;transform:none;clip-path:none}
  .marquee__t{animation:none}
}

/* =================================================================
   WATER FLOW — make the page feel like one continuous surface
   ================================================================= */

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Continuous flowing backdrop behind all default (white) sections.
   Unclassed sections are transparent, so this gradient shows through
   and the page reads as one surface instead of separate cubes. */
body{
  background:
    radial-gradient(60vw 40vw at 85% 8%, rgba(77,151,219,.06), transparent 60%),
    radial-gradient(55vw 45vw at 10% 55%, rgba(77,151,219,.05), transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#f3f8fe 22%,#ffffff 45%,#eef5fd 68%,#ffffff 100%);
  background-attachment:fixed;
}
/* ONE CONTINUOUS FLOW — no boxed sections.
   Light/neutral sections become transparent and merge into the flowing
   backdrop; only the strong colour bands (blue/green/dark) keep a fill,
   and even those dissolve at top/bottom so there are no hard edges. */
/* light/neutral bands disappear into the flowing backdrop */
.sec-grey,.sec-cream,.sec-bluelight{background:transparent !important}

/* strong colour bands emerge from and melt back into the flow (soft vertical fade) */
/* BLUE -> WHITE: a deep on-brand blue with a soft top glow that melts to white
   at both edges. Content lives in the 8–80% blue band so white text stays AA. */
section.sec-blue{background:
  radial-gradient(120% 75% at 50% 0%, rgba(255,255,255,.18), transparent 58%),
  linear-gradient(180deg, rgba(47,124,198,0) 0%, #2f7cc6 8%, var(--blue) 50%, #6fb0e4 86%, rgba(255,255,255,0) 100%) !important}
section.sec-green{background:linear-gradient(180deg,rgba(33,62,60,0) 0%,var(--green) 9%,var(--green) 91%,rgba(33,62,60,0) 100%) !important}
section.sec-dark{background:linear-gradient(180deg,rgba(20,25,55,0) 0%,var(--navy) 9%,var(--navy) 91%,rgba(20,25,55,0) 100%) !important}

@media (prefers-reduced-motion:reduce){
  body{background-attachment:scroll}
}

/* =================================================================
   Creative side element — a glass of water that fills up (decorative)
   ================================================================= */
.waterflow{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;pointer-events:none;opacity:.96}
/* SIGNATURE: this glass fills as you scroll DOWN and empties as you scroll UP.
   JS sets --fill (8–92%) from scroll progress, rAF-smoothed. Water is the
   site's living material — the scroll indicator IS a glass being poured. */
.glass{position:relative;width:46px;height:64px;border:2.5px solid var(--blue);border-top:none;
  border-radius:6px 6px 15px 15px;overflow:hidden;
  background:linear-gradient(180deg,rgba(77,151,219,.05),rgba(77,151,219,.12));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 6px rgba(77,151,219,.06),0 12px 26px -12px rgba(30,107,230,.55)}
/* glass rim */
.glass::after{content:"";position:absolute;top:0;left:-3px;right:-3px;height:3px;border-radius:3px;background:var(--blue)}
/* the water — height is scroll-bound via --fill */
.glass__water{position:absolute;left:0;right:0;bottom:0;height:var(--fill,10%);
  background:linear-gradient(180deg,#7fc0f0,var(--blue));will-change:height}
/* wavy meniscus on top of the water (the only looping motion) */
.glass__water::before{content:"";position:absolute;top:-5px;left:-10%;width:120%;height:10px;border-radius:50%;
  background:#9bd0f5;animation:glassWave 2.4s linear infinite}
/* rising bubbles */
.glass__water .b{position:absolute;bottom:8%;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75);animation:glassBubble 2.8s ease-in infinite}
.glass__water .b1{left:28%;animation-delay:.2s}
.glass__water .b2{left:54%;width:3px;height:3px;animation-delay:1.1s}
.glass__water .b3{left:70%;animation-delay:1.9s}
@keyframes glassWave{0%{transform:translateX(0) rotate(0)}50%{transform:translateX(-6%) rotate(3deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes glassBubble{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(-34px);opacity:0}}
@media (max-width:1100px){.waterflow{display:none}}
/* reduced motion: a calm, static half-full glass; no wave/bubbles, no scroll bind */
@media (prefers-reduced-motion:reduce){.glass__water,.glass__water::before,.glass__water .b{animation:none}.glass__water{height:55%}}

/* =================================================================
   Persistent "Buy" button (every page, always visible)
   ================================================================= */
/* shaped like the BetterTap unit: domed top, tapered base, blue gradient + white gloss */
.buybar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:700;
  display:inline-flex;align-items:center;gap:11px;color:#fff;font-weight:700;
  padding:14px 24px 12px;border-radius:26px 26px 12px 12px;
  background:linear-gradient(158deg,var(--blue-bright) 0%,var(--blue) 52%,var(--blue-600) 100%);
  box-shadow:0 18px 44px -14px rgba(30,107,230,.85),inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 8px rgba(20,25,55,.2);
  transition:transform .3s var(--ease),box-shadow .3s,filter .3s;font-size:var(--step--1);overflow:hidden}
.buybar::before{content:"";position:absolute;top:0;left:8%;right:8%;height:34%;border-radius:0 0 60% 60%;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0));pointer-events:none}
.buybar>*{position:relative;z-index:1}
.buybar:hover{transform:translateX(-50%) translateY(-3px);filter:brightness(1.05);box-shadow:0 22px 50px -14px rgba(30,107,230,.9),inset 0 2px 0 rgba(255,255,255,.6)}
.buybar svg{width:18px;height:20px}
.buybar b{background:rgba(255,255,255,.26);padding:3px 10px;border-radius:100px;font-size:var(--step--2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
@media (max-width:560px){.buybar{left:12px;right:12px;transform:none;justify-content:center}.buybar:hover{transform:translateY(-3px)}}

/* =================================================================
   Payment method icons (generic — replace with official badges)
   ================================================================= */
.paymethods{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.paymethods .pm{height:30px;width:44px;border-radius:7px;background:#fff;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--navy)}
.paymethods .pm svg{width:30px;height:20px}
.paymethods .lbl{font-size:var(--step--2);color:var(--ink-40);width:100%;margin-bottom:2px}

/* product (refill/add-on) price + buy row */
.prod-buy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.prod-price{font-family:var(--display);font-weight:700;font-size:var(--step-1);color:var(--navy);white-space:nowrap}
.prod-price small{font-weight:600;font-size:.6em;color:var(--blue);margin-left:4px}

/* Ask Better Tap — FAQ assistant widget */
.faq-ask{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.faq-ask__head{display:flex;align-items:center;gap:12px;padding:15px 18px;background:var(--navy);color:#fff}
.faq-ask__avatar{width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.8rem;flex:none}
.faq-ask__head b{display:block;font-family:var(--display);color:#fff}
.faq-ask__head small{color:rgba(255,255,255,.7);font-size:var(--step--2)}
.faq-ask__log{padding:18px;display:flex;flex-direction:column;gap:10px;max-height:340px;overflow-y:auto;background:var(--grey)}
.faq-msg{max-width:85%;padding:11px 15px;border-radius:14px;font-size:var(--step--1);line-height:1.5}
.faq-msg--bot{background:#fff;color:var(--navy);border:1px solid var(--line-soft);border-bottom-left-radius:4px;align-self:flex-start}
.faq-msg--user{background:var(--blue);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.faq-msg a{color:inherit;text-decoration:underline}
.faq-typing{opacity:.55;letter-spacing:2px}
.faq-ask__form{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line-soft)}
.faq-ask__form input{flex:1;border:1px solid var(--line);border-radius:999px;padding:12px 16px;font:inherit}
.faq-ask__form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.faq-ask__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 16px}
.faq-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font-size:var(--step--2);font-weight:500;color:var(--navy);transition:.2s;cursor:pointer}
.faq-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}

/* =================================================================
   Early-bird promo popup
   ================================================================= */
.promo{position:fixed;inset:0;z-index:1100;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,25,55,.62);backdrop-filter:blur(6px)}
.promo.open{display:flex;animation:promoFade .4s var(--ease)}
@keyframes promoFade{from{opacity:0}to{opacity:1}}
.promo__card{position:relative;width:min(560px,100%);background:#fff;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(20,25,55,.6);animation:promoPop .5s var(--ease)}
@keyframes promoPop{from{transform:translateY(24px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.promo__top{background:linear-gradient(135deg,var(--blue),var(--navy));color:#fff;padding:clamp(28px,5vw,44px);text-align:center}
.promo__badge{display:inline-block;background:var(--yellow);color:var(--navy);font-weight:700;font-size:var(--step--2);
  letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:14px}
.promo__top h2{color:#fff;font-size:clamp(2rem,6vw,3.2rem);line-height:1}
.promo__top .big{display:block;color:var(--yellow);font-size:clamp(2.6rem,9vw,4.6rem)}
.promo__body{padding:clamp(22px,4vw,32px);text-align:center}
.promo__body p{color:var(--ink-60)}
.promo__form{display:flex;gap:10px;margin:18px 0 8px}
.promo__form input{flex:1;border:1px solid var(--line);border-radius:100px;padding:13px 18px}
.promo__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-size:1.2rem;display:grid;place-items:center;z-index:2}
.promo__close:hover{background:rgba(255,255,255,.35)}
.promo__fine{font-size:var(--step--2);color:var(--ink-40);margin-top:10px}

/* =================================================================
   Mobile polish pass
   - No input zoom-jump on iOS (inputs ≥16px)
   - 44px tap targets, thumb-friendly stacked CTAs
   - Fixed buy bar clears content + respects the notch (safe-area)
   - Less motion/jank on phones
   ================================================================= */
/* iOS treats font-size <16px as a cue to zoom on focus — keep all inputs ≥16px */
input,textarea,select{font-size:max(16px,1em)}

@media (max-width:760px){
  /* background-attachment:fixed is janky / often broken on mobile browsers */
  body{background-attachment:scroll}
}

@media (max-width:560px){
  /* Declutter the header — the persistent buy bar + mobile menu cover purchase */
  .nav__actions .btn--primary{display:none}
  .nav__burger{padding:10px;min-height:44px;justify-content:center}

  /* 44×44 minimum tap targets */
  .icon-btn{width:44px;height:44px}
  .footer__social a{width:44px;height:44px}
  .promo__close{width:44px;height:44px}
  .faq-chip,.term,.plan-tab{min-height:44px;display:inline-flex;align-items:center}
  .swatch{width:44px;height:44px}

  /* Comfortable, full-width CTAs and input rows stack so nothing clips */
  .hero__actions .btn{width:100%}
  .promo__form,.zipbox,.subscribe{flex-direction:column;max-width:none}
  .promo__form .btn,.zipbox .btn,.subscribe .btn{width:100%}

  /* lighten heavy hero blur for smoother scrolling */
  .hero__orb{filter:blur(44px)}

  /* keep the fixed buy bar from sitting under the notch */
  .buybar{bottom:calc(12px + env(safe-area-inset-bottom))}
  /* and from permanently covering the end-of-page footer content */
  .footer{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* =================================================================
   Visual-first toolkit — icons, image+caption, equal-height tiles.
   Used to swap text-heavy blocks for scannable, image-led layouts.
   Icons:  <svg class="ic"><use href="assets/img/icons.svg#uv"/></svg>
   ================================================================= */
.ic{width:1.4em;height:1.4em;display:inline-block;color:inherit;flex:none;fill:none;stroke:currentColor}

/* icon feature tiles — equal height (grid stretch), auto-fit, editorial */
.icontiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.icontile{display:flex;flex-direction:column;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line-soft);
  border-radius:var(--radius);padding:clamp(22px,2.2vw,30px);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.icontile:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.icontile h3{font-size:var(--step-0);margin:0}
.icontile p{font-size:var(--step--1);color:var(--ink-60);margin:0}
.icontile__ic{width:56px;height:56px;border-radius:15px;background:var(--blue-050);color:var(--blue);display:grid;place-items:center;flex:none}
.icontile__ic .ic{width:30px;height:30px}
.sec-cream .icontile,.sec-grey .icontile{background:#fff}
/* on dark/blue bands the tiles invert to translucent glass */
.sec-blue .icontile,.sec-dark .icontile,.sec-green .icontile{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.sec-blue .icontile h3,.sec-dark .icontile h3,.sec-green .icontile h3{color:#fff}
.sec-blue .icontile p,.sec-dark .icontile p,.sec-green .icontile p{color:rgba(255,255,255,.82)}
.sec-blue .icontile__ic,.sec-dark .icontile__ic,.sec-green .icontile__ic{background:rgba(255,255,255,.16);color:#fff}

/* compact inline icon chips (e.g. the 4 water temperatures) */
.iconchips{display:flex;flex-wrap:wrap;gap:12px}
.iconchip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line-soft);
  border-radius:100px;padding:11px 18px;font-weight:600;font-size:var(--step--1);color:var(--navy)}
.iconchip .ic{width:22px;height:22px;color:var(--blue)}
.sec-blue .iconchip{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.sec-blue .iconchip .ic{color:#fff}

/* editorial image + caption */
.figure{margin:0}
.figure img{width:100%;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);display:block}
.figure figcaption{margin-top:12px;font-size:var(--step--1);color:var(--ink-60);max-width:60ch}

/* clearly-labelled placeholder where a clean asset is still needed */
.assetph{display:grid;place-items:center;text-align:center;gap:8px;
  background:repeating-linear-gradient(45deg,var(--grey) 0 14px,#eef2f7 14px 28px);
  border:1.5px dashed var(--line);border-radius:var(--radius-lg);color:var(--ink-40);padding:30px;min-height:220px}
.assetph b{color:var(--ink-60);font-size:var(--step--1);font-family:var(--display)}
.assetph small{font-size:var(--step--2)}

/* =================================================================
   Award craft layer — focus states, magnetic cursor, ripple,
   alternating media/text rhythm, droplet hover. All additive and
   reduced-motion / touch aware.
   ================================================================= */

/* --- Accessible focus (WCAG 2.1 AA): visible, on-brand, never on mouse --- */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.sec-blue :focus-visible,.sec-dark :focus-visible,.sec-green :focus-visible,.footer :focus-visible{outline-color:#fff}
.btn:focus-visible{outline-offset:4px}

/* --- Button ripple (droplet) on click --- */
.btn{position:relative}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);
  pointer-events:none;width:0;height:0;opacity:.5;z-index:0}
.btn--ghost .ripple,.btn--yellow .ripple{background:rgba(77,151,219,.3)}
.btn.rippling .ripple{animation:btnRipple .6s var(--ease) forwards}
@keyframes btnRipple{to{width:320px;height:320px;opacity:0}}
@media (prefers-reduced-motion:reduce){.btn.rippling .ripple{animation:none;opacity:0}}

/* --- Droplet/ripple hover on icon tiles (signature water language) --- */
.icontile__ic{position:relative;overflow:hidden}
.icontile__ic::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 120%, rgba(255,255,255,.5), transparent 60%);
  opacity:0;transition:opacity .4s var(--ease)}
.icontile:hover .icontile__ic::after{opacity:1}

/* --- Alternating media/text rhythm (ceevue-style zig-zag) --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.split > *{min-width:0}
.split--rev > :first-child{order:2}
.split__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)}
.split__media img,.split__media video{width:100%;height:100%;object-fit:cover;display:block}
.split__media::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(77,151,219,.16),transparent 55%);pointer-events:none}
.split__body{max-width:46ch}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:28px}.split--rev > :first-child{order:0}}

/* reuse: flip any existing two-column grid for alternation */
.grid-2--rev > :first-child{order:2}
@media (max-width:760px){.grid-2--rev > :first-child{order:0}}

/* --- Loading skeleton + lazy-image fade-in (no layout shift) --- */
.skeleton{background:linear-gradient(100deg,var(--grey) 30%,#fdfdfd 50%,var(--grey) 70%);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite;border-radius:var(--radius)}
@keyframes shimmer{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}

/* =================================================================
   Installation process — cards shaped like the BetterTap machine:
   a dark control-panel "screen" up top (step number), a round dispense
   nozzle holding the step icon, and a rounded-top unit body.
   ================================================================= */
.machines{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.machine{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#eaf3fb 100%);border:1px solid var(--line-soft);
  border-radius:30px 30px 16px 16px;overflow:hidden;padding-bottom:clamp(26px,3vw,38px);
  box-shadow:var(--shadow);transition:transform .45s var(--ease),box-shadow .45s}
.machine:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
/* top control panel / screen */
.machine__head{width:100%;padding:22px;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-600) 100%)}
.machine__step{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
  background:linear-gradient(155deg,var(--blue-bright) 0%,var(--blue) 45%,var(--blue-600) 100%);color:#fff;
  font-family:var(--display);font-weight:700;font-size:var(--step-1);line-height:1;
  box-shadow:0 8px 18px -8px rgba(30,107,230,.75),inset 0 0 0 3px rgba(255,255,255,.2)}
/* the spout above the dispense bay */
.machine__bay{position:relative;margin:clamp(28px,3.4vw,42px) 0 4px;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 50% 32%, #ffffff, var(--blue-050) 78%);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line-soft),0 16px 28px -18px rgba(30,107,230,.55)}
.machine__bay::before{content:"";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:16px;height:18px;border-radius:0 0 8px 8px;background:var(--navy)}
.machine__bay .ic{width:48px;height:48px;color:var(--blue)}
.machine h3{font-size:var(--step-1);margin:16px 18px 6px}
.machine p{color:var(--ink-60);font-size:var(--step-0);margin:0 22px;max-width:26ch}
@media (max-width:760px){.machines{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

/* =================================================================
   BLOG — index filter chips, post-card grid, pagination, post body.
   Reuses brand tokens only (--blue, --navy, --radius-lg, --shadow, --step-*).
   ================================================================= */

/* --- Category filter chips --- */
.blogfilters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.blogfilter{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;
  font-size:var(--step--1);letter-spacing:.01em;padding:10px 20px;border-radius:999px;
  border:1.5px solid var(--line);color:var(--navy);background:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.blogfilter:hover{border-color:var(--blue);transform:translateY(-2px)}
.blogfilter.is-active{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 10px 26px -12px rgba(30,107,230,.7)}

/* --- Post-card grid (equal-height) --- */
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);align-items:stretch}
.postcard{display:flex;flex-direction:column;height:100%;background:#fff;border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line-soft);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.postcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.postcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--grey)}
.postcard__media img{width:100%;height:100%;object-fit:cover}
.postcard__tag{position:absolute;top:14px;left:14px;font-family:var(--sans);font-weight:600;
  font-size:var(--step--2);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:rgba(20,25,55,.78);padding:6px 12px;border-radius:999px}
.postcard__body{display:flex;flex-direction:column;flex:1;padding:clamp(20px,2.4vw,28px)}
.postcard__title{font-size:var(--step-1);line-height:1.12;color:var(--navy)}
.postcard__excerpt{margin-top:10px;color:var(--ink-60);font-size:var(--step-0);line-height:1.5}
.postcard__more{margin-top:auto;padding-top:18px;font-weight:600;color:var(--blue);
  display:inline-flex;align-items:center;gap:.4em}
.postcard__more::after{content:"\2192";transition:transform .25s var(--ease)}
.postcard:hover .postcard__more::after{transform:translateX(4px)}

/* --- Pagination --- */
.blogpager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:clamp(40px,5vw,64px)}
.blogpager button{min-width:44px;height:44px;padding:0 14px;border-radius:12px;font-weight:600;
  font-size:var(--step--1);border:1.5px solid var(--line);color:var(--navy);background:#fff;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.blogpager button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.blogpager button.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.blogpager button:disabled{opacity:.4;cursor:not-allowed}

/* --- Article body typography --- */
.postbody{max-width:65ch;margin-inline:auto}
.postbody h2{font-size:var(--step-2);margin-top:clamp(34px,4vw,52px)}
.postbody p{margin-top:18px;color:var(--ink-60);font-size:var(--step-0);line-height:1.7}
.postbody ul{margin-top:18px;padding-left:0;display:grid;gap:12px}
.postbody ul li{position:relative;padding-left:30px;color:var(--ink-60);line-height:1.6}
.postbody ul li::before{content:"";position:absolute;left:6px;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 0 4px var(--blue-050)}
.postbody a:not(.btn){color:var(--blue-600);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.postmeta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 20px;color:var(--ink-60);font-size:var(--step--1);font-weight:500}
.postmeta .dot{color:var(--blue)}

/* --- Related posts --- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px);align-items:stretch}

@media (max-width:920px){.bloggrid,.related-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.bloggrid,.related-grid{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}

/* =================================================================
   Product hero — the machine is the focal point (home).
   ================================================================= */
.phero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center;
  background:radial-gradient(125% 90% at 50% 10%, #eaf3fb 0%, #f6fafe 42%, #ffffff 72%);
  padding:calc(var(--nav-h) + clamp(6px,2vh,22px)) var(--gutter) clamp(26px,5vh,54px)}
.phero__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  gap:clamp(10px,1.7vh,20px);max-width:860px;margin-inline:auto}
.phero__eyebrow{color:var(--blue)}
.phero__title{font-size:clamp(2.3rem,6.6vw,5rem);line-height:.98;letter-spacing:-.03em;color:var(--navy)}
.phero__lede{max-width:42ch;font-size:var(--step-0);color:var(--ink-60)}
.phero__stage{position:relative;display:grid;place-items:center;width:100%;
  animation:pheroReveal 1.1s var(--ease) both, pheroFloat 6.5s ease-in-out 1.1s infinite}
.phero__glow{position:absolute;z-index:0;width:min(86vw,540px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(77,151,219,.34) 0%, rgba(33,62,60,.12) 42%, transparent 70%);
  filter:blur(8px);animation:pheroGlow 8s ease-in-out infinite alternate}
.phero__img{position:relative;z-index:1;display:block;width:auto;height:min(54vh,580px);max-width:90vw;object-fit:contain;
  filter:drop-shadow(0 38px 56px rgba(20,25,55,.24));transition:transform .25s var(--ease);will-change:transform}
.phero__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:4px}
@keyframes pheroReveal{from{opacity:0;transform:translateY(42px) scale(.93)}to{opacity:1;transform:none}}
@keyframes pheroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes pheroGlow{from{transform:scale(.9);opacity:.78}to{transform:scale(1.07);opacity:1}}
@media (max-width:760px){
  .phero{min-height:92svh}
  .phero__title{font-size:clamp(2.2rem,9vw,3.2rem)}
  .phero__img{height:auto;width:min(74vw,360px)}
  .phero__actions .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .phero__stage,.phero__glow,.phero__img{animation:none}
  .phero__img{transform:none!important}
}


/* product hero — two-machine pairing (front + side profile) */
.phero__stage--pair{display:flex;align-items:center;justify-content:center;gap:clamp(4px,1.5vw,28px)}
.phero__stage--pair .phero__img{height:min(50vh,540px)}
.phero__img--side{height:min(40vh,420px);opacity:.97;filter:drop-shadow(0 30px 46px rgba(20,25,55,.2))}
@media (max-width:760px){
  .phero__stage--pair{gap:2px}
  .phero__stage--pair .phero__img{height:auto;width:min(50vw,260px)}
  .phero__img--side{height:auto;width:min(46vw,240px)}
}

/* brand trademark mark */
.nav__brand .brand-tm{font-size:.42em;font-weight:600;vertical-align:super;line-height:0;margin-left:1px;opacity:.8;letter-spacing:0}

/* "We Remove" efficacy stats */
.removestats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(22px,3vw,44px);max-width:1040px;margin-inline:auto}
.rstat{text-align:center}
.rstat__n{position:relative;font-family:var(--display);font-weight:700;color:var(--navy);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.rstat__n small{position:absolute;bottom:100%;left:0;right:0;font-size:.26em;font-weight:600;color:var(--ink-40);letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px;white-space:nowrap}
.rstat p{margin-top:12px;color:var(--ink-60);font-size:var(--step--1);max-width:24ch;margin-inline:auto}
@media (max-width:760px){.removestats{grid-template-columns:1fr 1fr;gap:30px 16px}}

/* MAZE stage accordion — icon + title */
.acc-stage{display:inline-flex;align-items:center;gap:12px;text-align:left}
.acc-stage .ic{width:24px;height:24px;color:var(--blue);flex:none}
.acc__a .iconchips{margin-top:14px}

/* Technology pros/cons — image-anchored comparison */
.proscons{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,4vw,56px);align-items:center;max-width:1120px;margin-inline:auto}
.proscons__title{display:flex;align-items:center;gap:10px;font-size:var(--step-1);margin-bottom:10px}
.proscons__title svg{width:30px;height:30px;flex:none}
.pclist li{display:flex;gap:11px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-60);font-size:var(--step--1)}
.pclist li::before{content:"✓";color:var(--blue);font-weight:800;flex:none;line-height:1.4}
.pclist--con li::before{content:"–";color:var(--ink-40)}
.proscons__media img{width:min(240px,26vw);filter:drop-shadow(0 26px 40px rgba(20,25,55,.22))}
@media (max-width:860px){.proscons{grid-template-columns:1fr;gap:8px}.proscons__media{order:-1;text-align:center;margin-bottom:18px}.proscons__media img{width:min(60vw,220px);margin-inline:auto}}

/* Tabbed full comparison */
.cmptabs{display:inline-flex;background:var(--grey);border-radius:100px;padding:4px;gap:4px}
.cmptab{padding:10px 22px;border-radius:100px;font-weight:600;font-size:var(--step--1);color:var(--ink-60);transition:.25s}
.cmptab.active{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-scroll .compare-table{min-width:620px}
.table-scroll[hidden]{display:none}

/* price reassurance line */
.price-incl{display:inline-flex;align-items:center;gap:9px;margin:14px 0 4px;font-weight:600;color:var(--navy);font-size:var(--step--1);background:var(--blue-050);border:1px solid var(--blue-100);border-radius:100px;padding:9px 16px}
.price-incl svg{width:20px;height:20px;color:var(--blue);flex:none}

/* Shop "reduce" benefits band */
.reduce-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px)}
.reduce{display:flex;flex-direction:column;align-items:center;gap:16px}
.reduce__ic{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:#fff}
.reduce__ic svg,.reduce__ic .ic{width:32px;height:32px;color:#fff}
.reduce h3{color:#fff;font-size:var(--step-1)}
@media (max-width:760px){.reduce-grid{grid-template-columns:1fr 1fr;gap:30px 16px}}

/* Specifications table inside the dropdown */
.spectable{display:grid;gap:0}
.specrow{display:flex;justify-content:space-between;gap:20px;padding:13px 2px;border-bottom:1px solid var(--line-soft);font-size:var(--step--1)}
.specrow:last-child{border-bottom:0}
.specrow span{color:var(--ink-60)}
.specrow b{color:var(--navy);text-align:right;font-weight:600}

/* =================================================================
   Express checkout
   ================================================================= */
.co-body{background:linear-gradient(180deg,#f3f8fe,#fff 40%)}
.co-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(18px,4vw,48px);border-bottom:1px solid var(--line-soft);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:50}
.co-secure{display:inline-flex;align-items:center;gap:8px;font-size:var(--step--1);font-weight:600;color:var(--ink-60)}
.co-secure svg{width:18px;height:18px;color:var(--blue)}
.co-wrap{max-width:1080px;margin-inline:auto;padding:clamp(24px,4vw,52px) clamp(18px,4vw,48px);display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,4vw,56px);align-items:start}
.co-back{font-size:var(--step--1);color:var(--ink-60);font-weight:600}
.co-title{font-size:var(--step-3);margin:14px 0 4px}
.co-sub{color:var(--ink-60);margin-bottom:22px}
.co-express{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-wallet{height:52px;border-radius:12px;font-weight:700;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;gap:4px;transition:transform .25s var(--ease),box-shadow .25s;border:1px solid transparent}
.co-wallet:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.co-wallet svg{width:20px;height:20px}
.co-wallet--apple{background:#000;color:#fff}
.co-wallet--gpay{background:#fff;color:#3c4043;border-color:var(--line)}
.co-wallet--shop{background:#5a31f4;color:#fff;font-style:normal}.co-wallet--shop span{font-weight:800}
.co-wallet--paypal{background:#ffc439;color:#003087}.co-wallet--paypal i{font-style:italic;font-weight:800}.co-wallet--paypal i:last-child{color:#0070ba}
.co-or{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ink-40);font-size:var(--step--1)}
.co-or::before,.co-or::after{content:"";flex:1;height:1px;background:var(--line)}
.co-form{display:flex;flex-direction:column;gap:14px}
.co-field{display:flex;flex-direction:column;gap:6px}
.co-field span{font-size:var(--step--1);font-weight:600;color:var(--navy)}
.co-field input{width:100%;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;font-size:16px;transition:border-color .2s,box-shadow .2s}
.co-field input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co-place{margin-top:8px}
.co-trust{display:flex;align-items:center;gap:8px;justify-content:center;font-size:var(--step--2);color:var(--ink-60);margin-top:4px;flex-wrap:wrap}
.co-trust svg{width:16px;height:16px;color:var(--blue);flex:none}
.co-demo{font-size:var(--step--2);color:var(--ink-40);text-align:center}
/* summary */
.co-summary{position:sticky;top:96px}
.co-card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-md)}
.co-prod{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line-soft)}
.co-prod img{width:64px;height:64px;object-fit:contain;background:var(--grey);border-radius:12px;padding:6px}
.co-prod b{display:block;color:var(--navy)}.co-prod small{color:var(--ink-60);font-size:var(--step--2)}
.co-prod__price{font-weight:700;color:var(--navy);white-space:nowrap}
.co-incl{display:flex;flex-direction:column;gap:9px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.co-incl span{display:flex;align-items:center;gap:9px;font-size:var(--step--1);color:var(--ink-60)}
.co-incl svg{width:18px;height:18px;color:var(--blue);flex:none}
.co-totals{padding-top:16px;display:flex;flex-direction:column;gap:10px}
.co-totals>div{display:flex;justify-content:space-between;font-size:var(--step--1);color:var(--ink-60)}
.co-total{font-size:var(--step-0)!important;font-weight:700;color:var(--navy)!important;padding-top:10px;border-top:1px solid var(--line-soft)}
/* success */
.co-done[hidden]{display:none}
.co-done{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px;background:rgba(20,25,55,.6);backdrop-filter:blur(8px)}
.co-done__card{background:#fff;border-radius:var(--radius-lg);padding:clamp(30px,5vw,52px);text-align:center;max-width:440px;box-shadow:0 40px 90px -30px rgba(20,25,55,.6);animation:promoPop .5s var(--ease)}
.co-done__tick{width:72px;height:72px;border-radius:50%;background:var(--blue-050);color:var(--blue);display:grid;place-items:center;margin:0 auto 18px}
.co-done__tick svg{width:38px;height:38px}
.co-done h2{margin-bottom:10px}.co-done p{color:var(--ink-60);margin-bottom:22px}
@media (max-width:860px){
  .co-wrap{grid-template-columns:1fr;gap:24px}
  .co-summary{position:static;order:-1}
}
@media (max-width:440px){.co-express{grid-template-columns:1fr}.co-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.co-wallet:hover{transform:none}.co-done__card{animation:none}}

/* tighter vertical rhythm where sections should sit closer (keeps gradient flow) */
.section--snug{padding-top:clamp(30px,4vw,56px);padding-bottom:clamp(30px,4vw,56px)}

/* 6 icon tiles: one row on desktop, two rows (3-up) on tablet/mobile */
.icontiles--6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){.icontiles--6{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){
  .icontiles--6{grid-template-columns:repeat(3,1fr);gap:10px}
  .icontiles--6 .icontile{padding:14px 10px;gap:8px}
  .icontiles--6 .icontile h3{font-size:var(--step--1)}
  .icontiles--6 .icontile p{font-size:var(--step--2)}
  .icontiles--6 .icontile__ic{width:40px;height:40px}
  .icontiles--6 .icontile__ic .ic{width:22px;height:22px}
}

/* MAZE step: number + descriptive icon side by side */
.pstep__top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pstep__top .n{margin-bottom:0}
.pstep__ic{width:34px;height:34px;border-radius:9px;background:var(--blue-050);display:grid;place-items:center;flex:none}
.pstep__ic .ic{width:20px;height:20px;color:var(--blue)}

/* checkout address autocomplete + scheduler */
.co-addr{position:relative}
.co-row-3{display:grid;grid-template-columns:2fr 1fr 1.2fr;gap:14px}
.co-suggest{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);max-height:240px;overflow-y:auto;list-style:none;padding:6px}
.co-suggest li{padding:10px 12px;border-radius:8px;font-size:var(--step--1);color:var(--navy);cursor:pointer;line-height:1.35}
.co-suggest li:hover{background:var(--blue-050)}
.sched-windows{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sched-win{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1.5px solid var(--line);border-radius:12px;font-weight:600;font-size:var(--step--1);color:var(--navy);transition:.2s}
.sched-win small{font-weight:500;color:var(--ink-40);font-size:var(--step--2)}
.sched-win.active{border-color:var(--blue);background:var(--blue-050);color:var(--blue-600)}
@media (max-width:440px){.co-row-3{grid-template-columns:1fr}}

/* MAZE 'how it works' — 70% content / 30% image */
.maze-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:clamp(24px,3vw,52px);align-items:center}
.maze-grid__media img{width:100%;border-radius:18px;background:#fff;box-shadow:var(--shadow);display:block}
.steps-row.maze-steps{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.maze-grid{grid-template-columns:1fr}.maze-grid__media{max-width:340px;margin-inline:auto}.steps-row.maze-steps{grid-template-columns:repeat(2,1fr)}}

/* hero: continuous pour illusion on the front machine */
.phero__machine{position:relative;display:inline-flex}
.phero__pour{position:absolute;left:49.5%;top:39%;transform:translateX(-50%);width:5px;height:15%;z-index:2;pointer-events:none;
  border-radius:3px;overflow:hidden;opacity:.8;filter:blur(.4px);
  background:linear-gradient(180deg,rgba(175,214,247,.95),rgba(130,190,238,.55));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.phero__pour::after{content:"";position:absolute;inset:-6px 0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.7) 0 2px,transparent 2px 7px);animation:pourFlow .45s linear infinite}
.phero__splash{position:absolute;left:49.5%;top:52%;transform:translateX(-50%);width:13%;height:3.4%;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.75),rgba(175,214,247,.2) 55%,transparent 72%);animation:pourSplash 1.5s ease-in-out infinite}
@keyframes pourFlow{to{transform:translateY(7px)}}
@keyframes pourSplash{0%,100%{transform:translateX(-50%) scale(.85);opacity:.45}50%{transform:translateX(-50%) scale(1.12);opacity:.85}}
@media (max-width:760px){.phero__pour,.phero__splash{display:none}}
@media (prefers-reduced-motion:reduce){.phero__pour::after,.phero__splash{animation:none}}

/* certification PDF viewer */
.cert-body{background:var(--grey);overflow:hidden}
.cert-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:11px clamp(14px,4vw,40px);background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.cert-bar__title{font-family:var(--display);font-weight:700;color:var(--navy);font-size:var(--step-0)}
.cert-main{height:calc(100vh - 62px)}
.cert-frame{width:100%;height:100%;border:0;display:block}
.cert-float{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;background:var(--navy);color:#fff;font-weight:700;
  padding:11px 20px;border-radius:100px;font-size:var(--step--1);box-shadow:var(--shadow-lg)}
@media (min-width:561px){.cert-float{display:none}}
@media (max-width:560px){.cert-bar__title{display:none}}

/* ===== batch: tighter section rhythm, centered tiles, 3-plan grid, MAZE 3-col ===== */
.icontiles--center .icontile{align-items:center;text-align:center}
.plans-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,30px);align-items:stretch;text-align:left}
.plans-3 .icontile{height:100%}
@media(max-width:900px){.plans-3{grid-template-columns:1fr}}
.maze-3{display:grid;gap:clamp(22px,4vw,52px);align-items:center;grid-template-columns:1fr}
.maze-3__side{margin:0;background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:20px}
.maze-3__side img{width:100%;height:auto;object-fit:contain;display:block}
.maze-3__side figcaption{margin-top:10px;font-size:var(--step--1);color:var(--ink-60);text-align:center}
@media(min-width:861px){.maze-3{grid-template-columns:1.05fr 1fr .9fr}}
@media(max-width:860px){.maze-3__side{display:none}}

/* ===== batch 2: membership 3-mid-3 layout, larger eyebrow, cubes one-row ===== */
.membership-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.membership-col{display:flex;flex-direction:column;gap:16px}
.membership-mid{padding:6px 0}
.eyebrow--xl{font-size:clamp(1rem,2.4vw,1.6rem);letter-spacing:.16em;line-height:1.2}
@media(min-width:901px){
  .membership-grid{grid-template-columns:1fr 1.05fr 1fr;gap:clamp(24px,3vw,46px)}
  .membership-col--l{grid-column:1;grid-row:1}
  .membership-mid{grid-column:2;grid-row:1}
  .membership-col--r{grid-column:3;grid-row:1}
  .replaces__old{grid-template-columns:repeat(5,1fr)}
}

/* smaller FAQ questions in the "Why we do subscriptions" section only */
#why-subscribe .acc__q{font-size:var(--step-0);padding:18px 0}
#why-subscribe .acc__q .pm{width:22px;height:22px}

/* ===== checkout: compact so it fits in 1–2 scrolls ===== */
.co-head{padding:10px clamp(18px,4vw,48px)}
.co-wrap{padding:clamp(14px,2.4vw,26px) clamp(16px,4vw,40px);gap:clamp(20px,3vw,40px)}
.co-title{font-size:var(--step-2);margin:8px 0 2px}
.co-sub{margin-bottom:12px;font-size:var(--step--1)}
.co-express{gap:10px}
.co-wallet{height:46px}
.co-or{margin:12px 0}
.co-form{gap:9px}
.co-field{gap:4px}
.co-field input{padding:10px 14px}
.co-row,.co-row-3{gap:10px}
.co-place{margin-top:2px}
.co-card{padding:18px}
.co-prod{padding-bottom:12px}
.co-incl{padding:12px 0;gap:6px}
.co-totals{padding-top:12px;gap:7px}

/* center icontile grids incl. the orphan last row (flex-wrap centered) */
.icontiles--center{display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.icontiles--center .icontile{flex:1 1 190px;max-width:240px}

/* "One system. Replaces all this." — larger, clearer item labels */
.replaces .repl-item{font-size:var(--step--1);color:var(--navy);font-weight:600}

/* "Confidence in every glass" — ~40% more compact + 3 tiles in one row */
#confidence.section{padding-block:clamp(22px,3.2vw,46px)}
#confidence h2{font-size:clamp(1.5rem,3vw,2.05rem)}
#confidence .lede{font-size:var(--step--1);margin-top:8px}
#confidence .figure img{max-height:300px;width:100%;object-fit:cover}
#confidence .icontiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
#confidence .icontile{padding:13px 11px;gap:7px}
#confidence .icontile__ic{width:36px;height:36px;border-radius:11px}
#confidence .icontile__ic .ic{width:19px;height:19px}
#confidence .icontile h3{font-size:var(--step--1)}
#confidence .icontile p{font-size:var(--step--2)}
@media (max-width:560px){#confidence .icontiles{grid-template-columns:1fr}}

/* ===== footer restyle: light blue->white gradient, dominant logo, bigger socials ===== */
.footer{background:linear-gradient(180deg,#c4d9fb 0%,#e7f1ff 48%,#ffffff 100%);color:var(--navy)}
.footer a{color:var(--ink-60)}
.footer a:hover{color:var(--navy)}
.footer__brand .name{font-size:1.95rem;color:var(--navy);gap:12px}
.footer__brand img{width:56px;margin-bottom:16px}
.footer__brand p{color:var(--ink-60)}
.footer__col h4,.footer__news h4{color:var(--navy)}
.footer__news p{color:var(--ink-60)}
.footer__news .subscribe input{border:1px solid var(--line)}
.footer__social{gap:14px;margin-top:20px}
.footer__social a{width:50px;height:50px;background:var(--blue);color:#fff}
.footer__social a:hover{background:var(--blue-600,#2f5fd0)}
.footer__social a svg{width:24px;height:24px}
.footer__bottom{border-top-color:var(--line)}
.footer__bottom span,.footer__bottom a{color:var(--ink-60)}
.footer__admin{background:var(--blue-050);color:var(--navy)}
.footer__admin:hover{background:var(--blue);color:#fff}
.footer :focus-visible{outline-color:var(--blue)}

/* raise the filter-stages infographic ~20% inside any cropped box */
img[src*="filter-stages"]{object-position:center 70%}

/* checkout: billing-same-as-delivery checkbox + reveal block */
.co-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--step--1);color:var(--navy);font-weight:600;margin-top:2px}
.co-check input{width:18px;height:18px;accent-color:var(--blue);flex:none;cursor:pointer}
#billingFields{display:flex;flex-direction:column;gap:9px}
#billingFields[hidden]{display:none}

/* =================================================================
   MOBILE ALIGNMENT PASS — center & simplify on phones (≤760px)
   ================================================================= */
@media (max-width:760px){
  /* --- center marketing text --- */
  .section h1,.section h2,.eyebrow,.lede{text-align:center}
  .lede,.maxw-prose{margin-inline:auto}
  .grid-2>div,.split>div,.maze-grid__main,.proscons__col,
  .membership-mid,.membership-col,.mineral,.fcard,.icontile,
  .pstep,.repl-item,.review,.mcard__body,.stat,.feature,
  .pdp>div{text-align:center}

  /* --- center images, figures & media --- */
  figure,.figure{text-align:center}
  figure img,.figure img,.grid-2 img,.split img,.mineral img,
  .maze-grid__media img,.proscons__media img,.pdp__main img,
  .mcard__img img,.replaces__new img,.feature img{margin-inline:auto}
  .pdp__main img{width:auto;max-width:100%;max-height:62vh}
  .maze-grid__media,.proscons__media{max-width:360px;margin-inline:auto}

  /* --- center chip rows, badges, buttons, swatches --- */
  .iconchips,.badges,.chiprow,.pills,.pdp__swatches,.pdp__thumbs,
  .iconchips--center,.replaces,.price-incl{justify-content:center}
  .iconchips,.badges,.chiprow,.pills{display:flex;flex-wrap:wrap}
  .pdp__list{display:inline-block;text-align:left;margin-inline:auto}
  .btn--block{width:100%}

  /* --- minimise oversized text on phones --- */
  h1,.hero h1{font-size:clamp(2rem,8.4vw,2.7rem);line-height:1.06}
  h2{font-size:clamp(1.55rem,6.4vw,2.05rem);line-height:1.14}
  h3{font-size:var(--step-1)}
  .lede{font-size:var(--step-0);line-height:1.5}
  .eyebrow{font-size:var(--step--2);letter-spacing:.14em}

  /* --- tighter vertical rhythm --- */
  .section{padding:clamp(34px,8vw,54px) 0}
  .mt-l{margin-top:36px}.mt-m{margin-top:24px}

  /* --- KEEP these left-aligned / functional (readability) --- */
  .postbody,.postbody h1,.postbody h2,.postbody h3,.postbody h4,.postbody p,.postbody li,.postbody blockquote,
  .tbl,.tbl th,.tbl td,.compare-table,.compare-table th,.compare-table td,
  .acc__q,.acc__a,.acc__a p,.acc__a li,
  form,.form-grid,.form-grid *,.card-form,.card-form *,.co-form,.co-field,.co-field *,
  .footer,.footer__col,.footer__col *,.footer__news,.footer__news *,.footer__brand,
  .crumb,.topbar,.nav,.nav *{text-align:left}
}

/* ===== MOBILE: kill horizontal overflow + fix heroes (≤760px) ===== */
@media (max-width:760px){
  html,body{overflow-x:clip;max-width:100%}
  h1,h2,h3,.phero__title{overflow-wrap:break-word;word-break:normal}
  /* home hero (phero): one centered machine, title that fits */
  .phero__title{font-size:clamp(1.7rem,7.4vw,2.5rem);line-height:1.06}
  .phero__stage--pair{justify-content:center;gap:0}
  .phero__img--side{display:none}
  .phero__stage--pair .phero__img{width:min(72vw,300px);height:auto}
  .phero__lede{font-size:var(--step-0);margin-inline:auto}
  .phero__actions{width:100%;justify-content:center}
  /* navy hero headline fits the screen */
  .hero h1{font-size:clamp(1.7rem,7.2vw,2.5rem);line-height:1.08}
  .hero .lede{margin-inline:auto}
}

/* ===== MOBILE: hide "Backed by Science" + clean single-column footer (≤760px) ===== */
@media (max-width:760px){
  /* remove the Backed by Science / Built for Trust band on phones */
  #certified{display:none}

  /* footer: single centered column, properly aligned */
  .footer__top{grid-template-columns:1fr!important;text-align:center;gap:26px}
  .footer__news{grid-column:auto!important}
  .footer__brand{display:flex;flex-direction:column;align-items:center}
  .footer__brand .name{justify-content:center}
  .footer__brand p{max-width:32ch;margin-inline:auto;text-align:center}
  .footer__social{justify-content:center;margin-top:14px}
  .footer__col,.footer__col h4,.footer__col a{text-align:center}
  .footer__news,.footer__news h4,.footer__news p{text-align:center}
  .footer__news .subscribe{max-width:360px;margin-inline:auto;justify-content:center}
  .footer__bottom{flex-direction:column;text-align:center;align-items:center;gap:10px}
  .footer__legal{justify-content:center;flex-wrap:wrap}
}

/* ===== nav "Log in" link (Shopify hosted accounts) — on-brand navy pill ===== */
.nav__login{width:auto;height:auto;display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:999px;color:var(--navy);font-family:var(--sans);font-weight:600;font-size:var(--step--1);border:1.5px solid var(--line);background:transparent;transition:background .2s,border-color .2s,color .2s}
.nav__login svg{width:18px;height:18px}
.nav__login:hover{border-color:var(--navy);background:var(--navy);color:#fff}
@media (max-width:760px){.nav__login{padding:9px;gap:0}.nav__login-txt{display:none}}

/* footer: "by Strauss Water" line under the logo */
.footer__by{font-size:var(--step--2);color:var(--ink-60);font-weight:500;letter-spacing:.02em;margin:-10px 0 14px 2px}
@media (max-width:760px){.footer__by{margin:-6px auto 14px;text-align:center}}

[data-parallax]{will-change:transform}

/* ===== MOBILE DENSITY — balanced rows, no orphan "single under", less scroll ===== */
@media (max-width:760px){
  .icontiles, .fgrid--3, .fgrid--4, .fgrid--5{ grid-template-columns:repeat(2,1fr)!important; gap:12px; }
  .icontiles--6{ grid-template-columns:repeat(3,1fr)!important; gap:10px; }
  /* a lone last item centers instead of sitting alone on the left */
  .icontiles:not(.icontiles--6) > :last-child:nth-child(odd),
  .fgrid--3 > :last-child:nth-child(odd),
  .fgrid--5 > :last-child:nth-child(odd){ grid-column:1 / -1; max-width:calc(50% - 6px); margin-inline:auto; }
  /* chip rows pack into one/few rows (kills the 3-then-1 wrap) */
  .iconchips, .pills, .chiprow{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; }
  .iconchip, .pill, .chip{ font-size:var(--step--2); padding:7px 10px; }
  .iconchip .ic, .pill svg{ width:15px; height:15px; }
  /* compact tile internals so 2-up isn't cramped */
  .icontile{ padding:14px 12px; gap:8px; }
  .icontile h3{ font-size:var(--step--1); }
  .icontile p{ font-size:var(--step--2); }
  .fcard{ padding:18px 14px; }
}
/* nav becomes more translucent once you scroll */
.nav.scrolled{ background:rgba(255,255,255,.58); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }

/* ============================================================================
   MOTION WITH PURPOSE — animation that clarifies, guides & reinforces meaning
   (home + technology). Decorative-free: each effect maps to what it shows.
   ============================================================================ */
/* Directional flow-reveal: filtration diagrams wipe left→right to read as
   water FLOWING THROUGH the stages (in one side → out clean). */
html.io [data-flow]{opacity:0;clip-path:inset(0 100% 0 0);
  transition:opacity .5s var(--ease),clip-path 1.15s var(--ease)}
html.io [data-flow].in{opacity:1;clip-path:inset(0 0 0 0)}

/* Count-up numbers: keep digits from reflowing as they climb (reinforces
   magnitude without the layout jittering). */
.rstat__n,.amt{font-variant-numeric:tabular-nums}

/* Sequential cascade: contaminant pills tick in one-by-one like a checklist
   being cleared. Per-item delay is set inline by JS (data-seq). The eye is
   guided down the list — "all of these, gone." */
html.io [data-seq] [data-rise]{will-change:opacity,transform}

/* =================================================================
   DESIGN PRINCIPLES POLISH  (Marcelo Design X — 4 tenets)
   The site already does the heavy lifting; this block sharpens the
   four ideas without adding clutter (Simplicity = restraint).
   1 Motion With Purpose · 2 Contrast Creates Clarity
   3 Emotion Shapes Experience · 4 Simplicity Takes Discipline
   ================================================================= */

/* 1 — MOTION WITH PURPOSE: a click should answer back. Buttons lift on
   hover (intent) and press down on :active (confirmation) — motion that
   reinforces the action, not decorates it. */
.btn{transition:transform .25s var(--ease),background .3s,color .3s,box-shadow .3s,filter .3s}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primary:active{box-shadow:0 6px 16px -10px rgba(30,107,230,.8)}

/* 2 — CONTRAST CREATES CLARITY: the primary CTA is the one thing the eye
   should land on. Give it a touch more presence on hover so "what to do"
   is unmistakable, and keep focus rings high-contrast for keyboard users. */
.btn--primary:hover{box-shadow:0 16px 34px -12px rgba(30,107,230,.9);filter:saturate(1.06)}
:focus-visible{outline-width:3px}
.btn--primary:focus-visible{outline-color:var(--navy);outline-offset:4px}

/* 3 — EMOTION SHAPES EXPERIENCE: cards settle, they don't snap. A slightly
   longer, eased lift on interactive cards reads as calm and considered —
   the mood the brand wants around clean water. */
.mcard:hover,.prod-card:hover{transform:translateY(-4px)}
@media (hover:hover){
  .mcard,.prod-card{transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
}

/* 4 — SIMPLICITY TAKES DISCIPLINE: when the reader has chosen to reduce
   motion, honour it completely — strip every transform/animation added
   above so only the essential content remains. */
@media (prefers-reduced-motion:reduce){
  .btn,.btn:active,.mcard,.prod-card,.mcard:hover,.prod-card:hover{
    transition:none;transform:none}
}

/* contaminant chem grid */
.chemgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;max-width:1040px;margin-inline:auto;text-align:left}
.chem{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--line-soft,rgba(20,25,55,.07));border-radius:12px;padding:9px 13px}
.chem__sym{flex:none;min-width:38px;height:38px;padding:0 6px;border-radius:9px;background:#eaf3fb;color:#2f6cc0;font-family:var(--display);font-weight:700;font-size:14px;display:grid;place-items:center;letter-spacing:-.02em}
.chem__name{font-size:var(--step--1);font-weight:500;color:var(--navy);line-height:1.2}

/* contaminant dropdown (technology) */
.chemdrop{max-width:1040px;margin:18px auto 0;border:1px solid var(--line-soft,rgba(20,25,55,.07));border-radius:14px;background:#fff;overflow:hidden}
.chemdrop>summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:var(--display);font-weight:600;font-size:var(--step-0);color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:10px}
.chemdrop>summary::-webkit-details-marker{display:none}
.chemdrop>summary::after{content:"\25BE";color:var(--blue,#4D97DB);transition:transform .25s ease}
.chemdrop[open]>summary::after{transform:rotate(180deg)}
.chemdrop .chemgrid{padding:4px 16px 18px;margin-top:0}

/* plan picker (Buy / Subscribe / Lease) */
.planpick{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin-inline:auto}
.planpick__box{display:flex;flex-direction:column;align-items:center;gap:5px;padding:26px 18px;border-radius:18px;background:linear-gradient(160deg,#4D97DB 0%,#3B82C9 100%);color:#fff;border:3px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,opacity .2s;box-shadow:0 14px 32px -16px rgba(77,151,219,.9)}
.planpick__box .planpick__ic{width:40px;height:40px;margin-bottom:4px}
.planpick__box .planpick__ic .ic{width:30px;height:30px;color:#fff}
.planpick__box b{font-family:var(--display);font-size:1.55rem;line-height:1}
.planpick__box span{font-size:var(--step--1);opacity:.92}
.planpick__box:hover{transform:translateY(-3px);box-shadow:0 18px 38px -16px rgba(77,151,219,1)}
.planpick__box:not(.active){opacity:.66}
.planpick__box.active{border-color:var(--navy);opacity:1}
.planpanel{max-width:1000px;margin:26px auto 0;background:#fff;border:1px solid var(--line-soft,rgba(20,25,55,.07));border-radius:18px;padding:clamp(24px,3vw,38px);box-shadow:var(--shadow-sm,0 2px 6px -2px rgba(20,25,55,.08));animation:fadeup .3s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.planpanel__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;text-align:left}
.planfeat__ic{display:block;width:44px;height:44px;color:var(--blue,#4D97DB)}
.planfeat__ic .ic{width:34px;height:34px}
.planfeat h4{font-family:var(--display);color:var(--navy);font-size:var(--step-0);margin:12px 0 6px}
.planfeat p{font-size:var(--step--1);color:var(--ink-60)}
@media(max-width:760px){.planpick{grid-template-columns:1fr}.planpanel__grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.planpanel__grid{grid-template-columns:1fr}}

/* comparison dropdowns + tree */
.cmp-part{font-size:var(--step--2);font-weight:600;color:var(--ink-40);text-transform:uppercase;letter-spacing:.04em}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.compare-table--multi{min-width:880px;margin-top:0}
.compare-table--multi th,.compare-table--multi td{padding:11px 8px;font-size:var(--step--2)}
.compare-table--multi thead th{font-size:var(--step--1)}
.cmp-drop{max-width:1120px;margin:14px auto 0;border:1px solid var(--line-soft,rgba(20,25,55,.07));border-radius:14px;background:#fff;overflow:hidden}
.cmp-drop>summary{cursor:pointer;list-style:none;padding:15px 20px;font-family:var(--display);font-weight:600;font-size:var(--step-0);color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:10px}
.cmp-drop>summary::-webkit-details-marker{display:none}
.cmp-drop>summary::after{content:"\25BE";color:var(--blue,#4D97DB);font-size:1.1em;transition:transform .25s ease}
.cmp-drop[open]>summary::after{transform:rotate(180deg)}
.cmp-drop .table-scroll{padding:0 14px 16px}
.ctree{padding:8px 4px 18px}
.ctree__root{display:inline-block;font-family:var(--display);font-weight:700;color:#fff;background:linear-gradient(160deg,#4D97DB,#3B82C9);padding:8px 18px;border-radius:999px;box-shadow:0 8px 20px -10px rgba(77,151,219,.9)}
.ctree__branch{padding-left:22px;border-left:2px solid #D6E8F8;margin-left:16px;padding-top:16px}
.ctree__cat{font-family:var(--display);font-weight:700;color:var(--navy);font-size:var(--step--1);margin-bottom:9px;position:relative;letter-spacing:.02em}
.ctree__cat::before{content:"";position:absolute;left:-23px;top:.6em;width:18px;height:2px;background:#D6E8F8}
.ctree__leaves{display:flex;flex-wrap:wrap;gap:8px}
.ctree__leaf{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line-soft,rgba(20,25,55,.07));border-radius:10px;padding:6px 11px;font-size:var(--step--1);color:var(--navy)}
.ctree__leaf .sym{flex:none;min-width:30px;height:26px;padding:0 5px;border-radius:7px;background:#eaf3fb;color:#2f6cc0;font-family:var(--display);font-weight:700;font-size:12px;display:grid;place-items:center}

/* light-blue gradient + animated waves */
.sec-wave{position:relative;overflow:hidden;background:linear-gradient(180deg,#e6f2fd 0%,#f2f9ff 52%,#ffffff 100%)}
.sec-wave>.wrap{position:relative;z-index:2}
.sec-wave::before,.sec-wave::after{content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:150px;background-repeat:repeat-x;background-size:1200px 120px;pointer-events:none;z-index:1}
.sec-wave::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C300,100 900,0 1200,50 L1200,120 L0,120 Z' fill='%23d6e8f8'/%3E%3C/svg%3E");opacity:.7;animation:wavemove 16s linear infinite}
.sec-wave::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C350,10 850,110 1200,60 L1200,120 L0,120 Z' fill='%23bcdcf5'/%3E%3C/svg%3E");opacity:.5;animation:wavemove 11s linear infinite reverse}
@keyframes wavemove{from{transform:translateX(0)}to{transform:translateX(33.33%)}}
@media (prefers-reduced-motion:reduce){.sec-wave::before,.sec-wave::after{animation:none}}
/* 5-up grid */
.fgrid--5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1024px){.fgrid--5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.fgrid--5{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.fgrid--5{grid-template-columns:1fr}}

/* dominant blue gradient section with waves + bubbles */
.sec-pop{position:relative;overflow:hidden;background:linear-gradient(165deg,#c4e0fa 0%,#dcecfb 46%,#f3f9ff 100%)}
.sec-pop>.wrap{position:relative;z-index:3}
.sec-pop::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.8;background-image:radial-gradient(circle,rgba(255,255,255,.78) 4px,transparent 5px),radial-gradient(circle,rgba(255,255,255,.5) 6px,transparent 7px),radial-gradient(circle,rgba(126,209,214,.45) 3px,transparent 4px);background-size:150px 150px,215px 215px,95px 95px;background-position:10px 0,95px 120px,40px 60px;animation:bubdrift 22s linear infinite}
.sec-pop::after{content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:160px;z-index:2;pointer-events:none;background-repeat:repeat-x;background-size:1200px 120px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,55 C300,105 900,5 1200,55 L1200,120 L0,120 Z' fill='%23bcdcf5'/%3E%3C/svg%3E");opacity:.7;animation:wavemove 13s linear infinite}
@keyframes bubdrift{from{background-position:10px 0,95px 120px,40px 60px}to{background-position:10px -460px,95px -360px,40px -500px}}
@media (prefers-reduced-motion:reduce){.sec-pop::before,.sec-pop::after{animation:none}}

/* chemdrop: big blue, expands to the right */
.chemdrop{max-width:1100px;margin:20px auto 0;border:none;background:none;overflow:visible}
.chemdrop>summary{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,1rem+1.9vw,2.2rem);color:#fff;background:linear-gradient(135deg,#4D97DB 0%,#3B82C9 100%);padding:18px 30px;border-radius:16px;box-shadow:0 16px 34px -16px rgba(77,151,219,.95);cursor:pointer;list-style:none;white-space:nowrap}
.chemdrop>summary::-webkit-details-marker{display:none}
.chemdrop>summary::after{content:"\25B8";color:#fff;font-size:.8em;transition:transform .25s ease}
.chemdrop[open]>summary::after{transform:rotate(90deg)}
.chemdrop[open]{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap}
.chemdrop[open]>summary{flex:none}
.chemdrop[open] .ctree{flex:1;min-width:300px;background:#fff;border:1px solid var(--line-soft,rgba(20,25,55,.07));border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm,0 2px 6px -2px rgba(20,25,55,.08))}
@media(max-width:760px){.chemdrop[open]{flex-direction:column}.chemdrop[open] .ctree{width:100%}}

/* trust badges one row */
.badges{flex-wrap:nowrap}
@media(max-width:820px){.badges{flex-wrap:wrap}}

/* responsive fixes (QA pass) */
.iconchips--row{flex-wrap:nowrap}
@media(max-width:640px){.iconchips--row{flex-wrap:wrap}}
@media(max-width:600px){
  .chemdrop>summary{white-space:normal;font-size:1.35rem;padding:14px 18px}
  .chemdrop[open]{flex-direction:column}
  .chemdrop[open] .ctree{width:100%}
  .ctree__leaves{gap:6px}
  .planpick__box b{font-size:1.3rem}
}

/* contaminant symbols as glossy water-drop beads */
.chem__sym{
  flex:none;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#fff 0%,#bfe0fb 26%,#4D97DB 78%,#3b82c9 100%);
  color:#0c2c4d;font-weight:800;font-size:11px;line-height:1;text-align:center;letter-spacing:-.02em;
  display:grid;place-items:center;
  box-shadow:inset -3px -4px 7px rgba(35,85,135,.4),inset 2px 3px 6px rgba(255,255,255,.65),0 5px 10px rgba(77,151,219,.3);
  text-shadow:0 1px 1px rgba(255,255,255,.55)
}
.chem{background:rgba(255,255,255,.7);backdrop-filter:blur(2px)}

/* 4 large water-drop contaminant groups (home) */
.dropgroups{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;max-width:1120px;margin-inline:auto}
.dropgroup{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:288px;padding:38px 26px;color:#fff;
  background:radial-gradient(130% 115% at 32% 16%, #93c6ef 0%, #4D97DB 44%, #2f64bb 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow:0 20px 40px rgba(47,104,189,.34), inset 0 10px 22px rgba(255,255,255,.32), inset 0 -16px 30px rgba(18,52,108,.4)}
.dropgroup::before{content:"";position:absolute;top:7%;left:16%;width:40%;height:24%;background:radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));border-radius:50%;pointer-events:none}
.dropgroup__std{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(255,255,255,.22);color:#fff;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.dropgroup__title{font-size:clamp(1.4rem,1.05rem+1.2vw,1.85rem);font-weight:800;line-height:1.12;margin:0 0 12px}
.dropgroup__items{font-size:clamp(1.02rem,.92rem+.5vw,1.22rem);line-height:1.55;color:#fff;margin:0;max-width:24ch}
@media(max-width:900px){.dropgroups{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.dropgroups{grid-template-columns:1fr;max-width:360px}.dropgroup{min-height:220px}}

/* home full-width family banner */
.home-banner{display:block;margin:0}
.home-banner img{display:block;width:100%;height:auto;max-height:clamp(280px,40vw,520px);object-fit:cover;object-position:center}

/* topbar 3-part message fits small screens */
@media(max-width:600px){.topbar{font-size:10px;letter-spacing:.04em;padding:7px 10px;line-height:1.35}}

/* === MOBILE OPTIMIZATION PASS === */
/* clearance so the persistent Shop bar never covers footer/content */
.footer{padding-bottom:104px}
@media (max-width:760px){
  /* images: always fit, centered, no overflow */
  main img{max-width:100%;height:auto}
  main figure{margin-inline:auto;text-align:center}
  /* shorter, easier scroll */
  .section{padding:clamp(28px,6.5vw,46px) 0}
  /* buy bar full-width & thumb-friendly */
  .buybar{padding:15px 20px 13px;font-size:var(--step-0)}
}