/* Pixel review 2026-10-16: self-hosted Inter (rsms/inter v4.1, SIL OFL 1.1 — see assets/fonts/Inter-LICENSE.txt) */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/InterVariable.woff2) format("woff2")} /* Karen 2026-10-16: Inter variable site-wide (replaces static 400/600/800; files kept for easy revert) */
/* ============================================================================
   Biodegree — site stylesheet. Philips-inspired: clean white, generous space,
   card grids, light gray bands; ALPRO water blue #08A0E5 as the one website accent (2026-27 program).
   ========================================================================== */
:root{
  /* ALPRO water blue is the ONE website accent (overrides parent green #08A0E5) */
  --green:#08A0E5; --green-dark:#067EB4; --green-soft:#E6F5FC;
  --accent:#08A0E5; --accent-dark:#067EB4; --accent-soft:#E6F5FC;
  --water:#08A0E5; --water-dark:#067EB4; --water-soft:#E6F5FC;
  /* No red in the UI — neutral charcoal for former contact/emphasis roles */
  --bd-red:#334155; --contact-red:var(--accent); --bd-red-dark:#1E293B; --bd-red-soft:#F1F5F9;
  --alpro-red:#334155;
  --ink:#0F172A; --ink-2:#334155; --ink-3:#64748B;
  --line:#E2E8F0; --band:#F8FAFC; --white:#fff;
  --amber:#B45309; --amber-bg:#FDF3E3;
  --hazard-bg:#F1F5F9; --hazard-ink:#334155;
  --shadow:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.08);
  --shadow-lg:0 2px 6px rgba(15,23,42,.08),0 20px 48px rgba(15,23,42,.12);
  --r:14px; --r-sm:10px;
  --wrap:1200px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --disp:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; /* Pixel 2026-10-16: no Arial Black fallback */
  /* Program category tiles (icon / label / tint only — never buttons) */
  --tax-hands:#EE4398; --tax-mouth:#F49AC1; --tax-cleaning:#60B0E2;
  --tax-surfaces:#1EAA4A; --tax-manual:#0072BC; --tax-mechanical:#0072BC;
  --tax-special:#FFCB04; --tax-water:#00A0E3;
  /* Biodegree logo greens (sampled from assets/logo-header.png) — brand accent for the name only */
  --bd-green-dark:#5AB952; /* darker: wordmark ink + dark leaf (≈ Karen crop #52B04C) */
  --bd-green-light:#8AC541; /* lighter: icon ring + light leaves — hero "degree" */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--white);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
svg{width:1.15em;height:1.15em;vertical-align:-.2em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:64px 24px}
.band{background:var(--band)}
.band>.wrap{padding-top:64px;padding-bottom:64px}
h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;font-weight:750}
h2{font-size:clamp(23px,2.8vw,34px);line-height:1.15;letter-spacing:-.015em;font-weight:700}
h3{font-size:18px;font-weight:700}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.eyebrow.light{color:#9AD9C5}
.lead{font-size:clamp(16px,1.8vw,20px);color:var(--ink-2);max-width:720px;margin-top:14px}
.count{color:var(--ink-3);font-weight:500;font-size:.65em}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--green);color:#fff;border:0;border-radius:999px;
  padding:13px 24px;font:600 15px/1 var(--font);cursor:pointer;transition:background .15s}
.btn:hover{background:var(--green-dark);text-decoration:none}
.btn-ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-ghost:hover{background:var(--green-soft)}
.btn-light{background:#fff;color:var(--green)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:18px}
.icon-btn:hover{background:var(--band)}

/* ------------------------------------------------------------ promo + header */
.promo-strip{background:var(--accent);color:#E8F7FD;text-align:center;font-size:12.5px;font-weight:600;
  letter-spacing:.04em;padding:8px 16px;box-sizing:border-box;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.trust-strip{background:#fff;color:var(--ink-2);text-align:center;font-size:12px;font-weight:600;
  letter-spacing:.02em;padding:6px 16px;border-bottom:1px solid var(--line);box-sizing:border-box;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.hdr-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 24px;min-height:64px;height:64px}
.logo{display:flex;align-items:center;flex:none;overflow:visible}
.logo:hover{text-decoration:none}
.logo-img{height:52px;max-height:52px;width:auto;object-fit:contain;display:block}
.nav{display:flex;align-items:stretch;height:64px;gap:2px;flex:1;min-width:0;flex-wrap:nowrap}
.nav-item{display:flex;flex:none}
.nav-tab{display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:600 14.5px var(--font);
  color:var(--ink);padding:0 9px;cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap}
.nav-tab svg{width:.8em;height:.8em;transition:transform .15s;flex:none}
.nav-item.on .nav-tab,.nav-tab:hover{color:var(--green);border-bottom-color:var(--green)}
.nav-item.open .nav-tab svg{transform:rotate(90deg)}
.nav-link{display:inline-flex;align-items:center;padding:0 8px;font:600 14.5px var(--font);color:var(--ink);
  border-bottom:2.5px solid transparent;white-space:nowrap;flex:none}
.nav-link:hover{color:var(--green);text-decoration:none}
.hdr-tools{display:flex;align-items:center;gap:8px;flex:none}
.hamburger{display:none}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 24px 48px rgba(15,23,42,.12)}
.mega.open{display:block}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:30px 24px 36px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.mm-umb{display:block;font-size:17px;font-weight:750;color:var(--ink);padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.mm-umb:hover{color:var(--green);text-decoration:none}
.mm-cats{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.mm-cat-h{display:block;font:700 12.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin-bottom:7px}
.mm-cat ul{list-style:none}
.mm-cat li a{display:block;padding:3px 0;font-size:14px;color:var(--ink-2)}
.mm-cat li a:hover{color:var(--green)}
.mobile-menu{display:none;position:fixed;inset:0;z-index:80;background:#fff;padding:22px 24px;overflow:auto}
.mobile-menu.open{display:block}
.mm-close{position:absolute;top:16px;right:16px}
.mml{display:block;padding:13px 0;border-bottom:1px solid var(--line);font:600 16px var(--font);color:var(--ink)}
.mm-acc{border-bottom:1px solid var(--line)}
.mm-acc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:13px 0;background:none;border:0;font:600 16px var(--font);color:var(--ink);cursor:pointer;text-align:left}
.mm-acc-ic{display:inline-flex;color:var(--ink-2);transition:transform .2s ease}
.mm-acc-ic svg{width:18px;height:18px}
.mm-acc.open .mm-acc-ic{transform:rotate(90deg)}
.mm-acc-p{display:none;padding:0 0 12px}
.mm-acc.open .mm-acc-p{display:block}
.mml-p{display:block;padding:9px 0 9px 16px;font:500 15px var(--font);color:var(--ink-2)}
.mml-all{font-weight:600;color:var(--green)}
.mml-umb{padding:20px 0 8px;border-bottom:2px solid var(--ink);font:700 13px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.mml-umb:first-of-type{padding-top:8px}
.search-overlay{display:none;position:fixed;inset:0;z-index:90;background:rgba(15,23,42,.45);padding:80px 20px}
.search-overlay.open{display:block}
.so-box{max-width:640px;margin:0 auto;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-lg);overflow:hidden}
.so-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink-3)}
.so-bar input{flex:1;border:0;outline:0;font:400 17px var(--font);color:var(--ink)}
.so-results{max-height:56vh;overflow:auto}
.so-hit{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line)}
.so-hit:hover{background:var(--band);text-decoration:none}
.so-hit img{width:44px;height:44px;object-fit:contain}
.so-hit b{display:block;color:var(--ink);font-size:15px}
.so-hit span{font-size:12.5px;color:var(--ink-3)}
.so-section{padding:10px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a8a84}.so-empty{padding:22px 18px;color:var(--ink-3);font-size:14.5px}

/* ------------------------------------------------------------------ crumbs */
.crumbs{padding-top:18px;font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.crumbs .sep{opacity:.55}
.crumbs .cur{color:var(--ink)}
.crumbs .crumb-plain{color:var(--ink-3)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--green)}

/* --------------------------------------------------------- category icon bar */
.catbar{background:#fff;border-bottom:1px solid var(--line)}
.catbar-in{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:center;
  gap:clamp(20px,4.5vw,64px);padding:20px 24px 22px;overflow-x:auto}
.catbar-item{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:84px;
  font:600 12.5px var(--font);color:var(--ink);text-align:center;line-height:1.3}
.catbar-item svg{width:27px;height:27px;color:var(--ink);transition:color .15s}
.catbar-item:hover{color:var(--green);text-decoration:none}
.catbar-item:hover svg{color:var(--green)}

/* ------------------------------------------------------------- promo links */
.promo-links{border-bottom:1px solid var(--line);background:#fff}
.promo-links-in{max-width:var(--wrap);margin:0 auto;display:flex;justify-content:center;
  gap:clamp(16px,3vw,44px);flex-wrap:wrap;padding:12px 24px}
.promo-links a{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--font);color:var(--green)}
.promo-links a svg{width:16px;height:16px}

/* --------------------------------------------------------------------- hero */
.hero-carousel{position:relative;height:min(88vh,760px);min-height:520px;overflow:hidden;background:#0C1F19}
.hc-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.hc-slide.on{opacity:1;pointer-events:auto}
.hc-bg{position:absolute;inset:0}
.hc-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hc-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,23,42,.72) 0%,rgba(15,23,42,.5) 40%,rgba(15,23,42,.18) 66%,rgba(15,23,42,0) 84%)}
.hc-txt{position:relative;max-width:var(--wrap);margin:0 auto;padding:clamp(48px,7vh,84px) 24px 0;color:#fff}
.hc-eyebrow{font:700 13px var(--font);letter-spacing:.12em;text-transform:uppercase;color:#E4F4ED;
  margin-bottom:10px;text-shadow:0 1px 12px rgba(15,23,42,.5)}
.hc-txt h1{max-width:600px;text-shadow:0 2px 18px rgba(15,23,42,.55);margin-bottom:24px}
.hc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--shadow-lg);transition:background .15s}
.hc-arrow:hover{background:#fff}
.hc-arrow svg{width:20px;height:20px}
.hc-arrow.prev{left:18px}
.hc-arrow.next{right:18px}
.hc-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:3}
.hc-dots button{width:36px;height:4px;border-radius:2px;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.hc-dots button.on{background:#fff}

/* ------------------------------------------------- Philips-style home cards */
.ph-eyebrow{font-size:14px;color:var(--ink-2);margin-bottom:6px}
.ph-h{font-size:clamp(24px,3vw,34px);font-weight:750;letter-spacing:-.02em;margin-bottom:26px}
.ph-h.center{text-align:center}
.ph-sub{color:var(--ink-2);margin:-16px 0 24px}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ph-card{position:relative;display:flex;flex-direction:column;background:var(--band);border-radius:var(--r);
  overflow:hidden;padding:26px 28px 0;color:var(--ink);text-align:center;transition:box-shadow .2s}
.ph-card:hover{box-shadow:var(--shadow-lg);text-decoration:none}
.ph-cap{font-size:13.5px;color:var(--ink-2)}
.ph-card h3{font-size:21px;font-weight:750;margin:6px 0 16px}
.ph-img{display:flex;align-items:flex-end;justify-content:center;height:272px}
.ph-img img{max-height:100%;max-width:92%;object-fit:contain}
.ph-go{position:absolute;right:18px;bottom:18px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center}
.ph-go svg{width:18px;height:18px}
.ph-card.photo{padding:0;min-height:330px;text-align:left}
.ph-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph-card.photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,23,42,.58) 0%,rgba(15,23,42,.14) 55%,rgba(15,23,42,.32) 100%)}
.ph-overlay{position:relative;z-index:1;padding:24px 26px;color:#fff}
.ph-overlay .ph-cap{color:#D8E9E2}
.ph-overlay h3{color:#fff;max-width:26ch;text-shadow:0 1px 12px rgba(15,23,42,.4)}

/* ---------------------------------------------------------------- big cards */
.big-card{display:grid;grid-template-columns:1.1fr 1fr;background:linear-gradient(135deg,#046A9A,var(--accent));
  border-radius:var(--r);overflow:hidden;color:#fff;margin-top:8px}
.big-card:hover{text-decoration:none}
.bc-txt{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.bc-txt .ph-cap{color:#BFE6D9}
.bc-txt h3{font-size:clamp(22px,2.6vw,32px);font-weight:750;letter-spacing:-.02em;margin:6px 0}
.bc-txt p{color:#E4F4ED;margin:10px 0 20px}
.bc-img{display:flex;align-items:center;justify-content:center;padding:34px}
.bc-img img{max-width:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(15,23,42,.3))}
.big-card.photo{position:relative;display:block;min-height:420px;margin-top:22px}
.big-card.photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,.78) 0%,rgba(15,23,42,.42) 55%,rgba(15,23,42,.18) 100%)}
.bc-overlay{position:absolute;left:0;bottom:0;z-index:1;padding:clamp(26px,4vw,52px);color:#fff;max-width:640px}
.bc-overlay .ph-cap{color:#D8E9E2}
.bc-overlay h3{font-size:clamp(24px,3vw,38px);font-weight:750;margin:6px 0 10px;text-shadow:0 1px 14px rgba(15,23,42,.45)}
.bc-overlay p{color:#E4F4ED;margin-bottom:18px;text-shadow:0 1px 10px rgba(15,23,42,.5)}

/* --------------------------------------------------------------- bleed band */
.bleed-band{position:relative;min-height:440px;display:flex;align-items:center;color:#fff;margin-top:64px}
.bleed-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,23,42,.68) 0%,rgba(15,23,42,.28) 60%,rgba(15,23,42,.1) 100%)}
.bleed-band .ph-photo{z-index:0}
.bleed-txt{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;padding:64px 24px;width:100%}
.bleed-txt .ph-cap{color:#D8E9E2}
.bleed-txt h2{font-size:clamp(26px,3.4vw,40px);font-weight:750;letter-spacing:-.02em;max-width:20ch;margin:6px 0 12px}
.bleed-txt p{max-width:54ch;color:#E4F4ED}

/* ------------------------------------------------------------------ mission */
.mission{text-align:center;padding-top:72px;padding-bottom:72px}
.mission-line{font-size:clamp(26px,3.6vw,42px);font-weight:750;letter-spacing:-.02em;color:var(--green)}
.mission-sub{max-width:760px;margin:16px auto 0;color:var(--ink-2);font-size:17px}

/* -------------------------------------------------------------- split tiles */
.split-tiles{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:0}
.split-tile{display:flex;flex-direction:column;background:var(--band);border-radius:var(--r);overflow:hidden;
  transition:box-shadow .2s,transform .2s;color:var(--ink)}
.split-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.st-img{background:var(--green-soft);display:flex;align-items:center;justify-content:center;height:260px;padding:30px}
.st-img img{max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(15,23,42,.14))}
.st-txt{padding:26px 28px 30px}
.st-word{display:inline-block;font:800 12.5px var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--green);
  background:var(--green-soft);border-radius:999px;padding:5px 13px;margin-bottom:14px}
.st-word.big{font-size:13px;margin-bottom:16px}
.st-txt h2{margin-bottom:10px}
.st-txt p{color:var(--ink-2);margin-bottom:14px}
.pcard-link{display:inline-flex;align-items:center;gap:7px;font:650 14px var(--font);color:var(--green)}

/* --------------------------------------------------------------- sec / grid */
.sec-head{margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.sec-more{white-space:nowrap;font-weight:650;font-size:14.5px}
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* -------------------------------------------------------------- product card */
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:var(--ink);transition:box-shadow .2s,transform .2s;min-width:0;cursor:pointer}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
/* Compact cards: height fits content; do not stretch to row tallest */
.grid>.pcard,.carousel>.pcard{align-self:start;height:auto}
.pcard{height:auto}
.pcard-hit{position:absolute;inset:0;z-index:1}
.pcard-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.pcard-qv{position:relative;z-index:2;border:1px solid var(--line);background:#fff;color:var(--ink-2);font:650 13px var(--font);padding:8px 13px;border-radius:8px;cursor:pointer;white-space:nowrap}
.pcard-qv:hover{border-color:var(--green);color:var(--green)}
.pcard-img{background:#fff;display:flex;align-items:center;justify-content:center;height:210px;padding:22px;border-bottom:1px solid var(--line)}
.pcard-img > img:not(.pcard-tax){max-height:100%;width:auto;object-fit:contain}
.pcard-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.pcard-cat{font:700 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pcard-word{display:inline-block;align-self:flex-start;font:800 10.5px var(--font);letter-spacing:.2em;text-transform:uppercase;
  color:var(--green);background:var(--green-soft);border-radius:999px;padding:3px 10px}
.pcard-ref{font-size:12px;color:var(--ink-3);font-weight:600}
.pcard-body p{font-size:13.5px;color:var(--ink-2);margin:0}
.pcard .pcard-link{margin-top:6px}

/* ---------------------------------------------------------------- carousel */
.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:min(280px,78vw);gap:18px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding:4px 4px 18px}
.carousel>*{scroll-snap-align:start}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

/* --------------------------------------------------------------- compliance */
.band-green{background:var(--green);color:#fff}
.comp-block{display:grid;grid-template-columns:minmax(280px,1fr) 1.4fr;gap:44px;align-items:start}
.comp-intro p{color:var(--ink-2);margin:14px 0 22px}
.comp-pillars{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pillar{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.pillar b{font:700 11.5px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.pillar h3{margin:8px 0 8px}
.pillar p{font-size:14px;color:var(--ink-2)}
.verify-note{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:13.5px;color:var(--ink-3)}
.verify-note svg{color:var(--amber);flex-shrink:0;margin-top:2px}

/* -------------------------------------------------------------- newsletter */
.nl-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:44px;align-items:center}
.band-green h2{color:#fff}
.ticks{list-style:none;margin-top:18px;display:grid;gap:9px}
.ticks li{display:flex;gap:10px;align-items:center;color:#DDF2EA;font-size:15px}
.nl-form{background:#fff;border-radius:var(--r);padding:26px;display:grid;gap:14px;box-shadow:var(--shadow-lg)}
.nl-form input[type=email]{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;font:400 15px var(--font);color:var(--ink)}
.nl-form input[type=email]:focus{outline:2px solid var(--green);border-color:transparent}
.consent{display:flex;gap:9px;font-size:13px;color:var(--ink-2);align-items:flex-start}
.nl-msg{color:var(--green);font-weight:600;font-size:14px}
.nl-right{display:grid;gap:16px;align-content:center}
.portal-card{display:flex;align-items:center;gap:20px;background:rgba(255,255,255,.08);
  border:1.5px solid rgba(255,255,255,.35);border-radius:var(--r);padding:20px 24px;color:#fff;transition:background .15s,border-color .15s}
.portal-card:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.6);text-decoration:none}
.portal-card-arrow{width:64px;height:64px;flex:none;border-radius:50%;background:#fff;color:var(--green);
  display:grid;place-items:center;box-shadow:var(--shadow)}
.portal-card-arrow svg{width:26px;height:26px}
.portal-card-txt b{display:block;font-size:17px;font-weight:700;color:#fff}
.portal-card-txt span{font-size:13.5px;color:#DDF2EA}

/* --------------------------------------------------------------- page hero */
.page-hero{background:var(--band);padding:80px 0}
.page-hero.slim{padding:60px 0}
.page-hero .lead{margin-top:16px}
.cat-hero{position:relative;min-height:520px;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.ch-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,23,42,.78) 0%,rgba(15,23,42,.28) 60%,rgba(15,23,42,.12) 100%)}
.ch-txt{position:relative;padding-top:120px;padding-bottom:52px}
.ch-txt .lead{color:#E4F4ED}

/* -------------------------------------------------------------- category page */
.cat-tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);transition:box-shadow .2s}
.cat-tile:hover{box-shadow:var(--shadow-lg);text-decoration:none}
.ct-img{height:230px;overflow:hidden}
.ct-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cat-tile:hover .ct-img img{transform:scale(1.04)}
.ct-txt{padding:22px 24px 26px;display:grid;gap:8px}
.ct-txt p{color:var(--ink-2);font-size:14.5px}
.ct-sub{font-size:12.5px;color:var(--ink-3);font-weight:600}
.alt-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.alt-row.flip .alt-img{order:2}
.alt-txt p{color:var(--ink-2);margin-top:14px}
.alt-img{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.alt-img img{width:100%;height:100%;object-fit:cover}
/* media-row: pair a bullet section with a supporting image, image height tracks the text block */
.media-row{align-items:stretch;gap:44px}
.media-row .alt-img{min-height:300px}
.media-row .alt-txt{align-self:center}
/* prog-banner: full-width supporting photo under a section header */
.prog-banner{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0 0 34px;max-width:900px}
.prog-banner img{width:100%;height:300px;object-fit:cover;display:block}
/* ===== Philips-style product sections (key message + linked docs, airy) ===== */
.pw-sec{padding:clamp(48px,6vw,84px) 0}
.pw-sechead{margin-bottom:40px}
.pw-sechead .sec-typo{margin:8px 0 0}
/* section Typo headers take the category accent (per-zone colour series), matching the hero */
.pw-sec .sec-typo{color:var(--accent,var(--green))}
.pdp-page .sec-typo{color:var(--accent,var(--green))}
/* alternating-syllable Typo on product headers: base = zone accent, .g syllables = ink (per the ALPRO typo mockup).
   display:inline overrides the `.sec-typo span{display:block}` rule so colour-spans don't force a line break per syllable. */
.pdp-page .sec-typo .g{color:var(--ink);display:inline}
.pw-img{border-radius:var(--r);overflow:hidden;background:var(--band);border:1px solid var(--line)}
.pw-img img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px}
/* alternating text/image rows (numbered use-cases) */
.pw-rows{display:flex;flex-direction:column;gap:clamp(28px,4vw,52px)}
.pw-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}
.pw-row.flip .rtxt{order:2}
.pw-rh{display:flex;align-items:center;gap:12px;font-family:var(--disp);font-weight:900;text-transform:lowercase;font-size:clamp(22px,2.6vw,32px);line-height:1;color:var(--ink);margin-bottom:14px}
.pw-rn{flex:none;width:38px;height:38px;border-radius:50%;background:var(--green-soft);color:var(--green);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font);font-weight:800;font-size:17px}
.pw-row .rtxt p{color:var(--ink-2);max-width:46ch;font-size:15.5px}
/* key-word highlight cards (uses without images) */
.pw-keys{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(28px,4vw,44px)}
.pw-key{background:var(--band);border-radius:var(--r);padding:24px 26px;border-left:3px solid var(--green)}
.pw-key b{display:block;font-family:var(--disp);font-weight:900;text-transform:lowercase;font-size:20px;color:var(--ink);margin-bottom:8px}
.pw-key p{color:var(--ink-2);font-size:14.5px}
/* feature (text + image) for the "how it works" block */
.pw-feature{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,56px);align-items:center}
.pw-feature.pw-solo{grid-template-columns:1fr;max-width:840px}
.pw-banner{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);margin:0 0 34px}
.pw-banner img{width:100%;height:clamp(240px,30vw,380px);object-fit:cover;display:block}
.pw-banner-lede{aspect-ratio:2/1}
.pw-banner-lede img{height:100%;object-position:center}
.pw-abc{display:flex;flex-direction:column;gap:16px;margin-top:4px}
.pw-abc-i{display:flex;gap:12px}
.pw-abc-i b{flex:none;font-family:var(--disp);font-weight:900;text-transform:lowercase;color:var(--green);min-width:104px;font-size:16px}
.pw-abc-i p{color:var(--ink-2);font-size:15px}
.pw-more{margin-top:clamp(34px,4vw,52px)}
.pw-more-i h3{font-family:var(--disp);font-weight:900;text-transform:lowercase;font-size:clamp(18px,2vw,22px);color:var(--ink);margin-bottom:10px}
.pw-more-i p{color:var(--ink-2);font-size:15px;max-width:52ch}
/* key-message → doc link + linked superscript references */
.pw-link{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:700 13.5px var(--font);color:var(--green)}
.pw-link:hover{color:var(--green-dark)}
.reg-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.reg-pill{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font:800 12.5px/1 var(--font);letter-spacing:.01em;padding:10px 16px;border-radius:999px}
a.reg-pill{text-decoration:none;color:#fff}
a.reg-pill:hover{filter:brightness(1.06)}
.reg-pill svg{width:15px;height:15px;flex:none}
.pw-sup{font-size:.62em;font-weight:700;color:var(--green);vertical-align:super;margin-left:1px}
.pw-sup:hover{text-decoration:underline}
.pw-refs{border-top:1px solid var(--line);margin:34px 0 0;padding-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 30px}
.pw-refs .rh{grid-column:1/-1;font:800 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.pw-refs a{display:flex;gap:9px;font-size:13.5px;color:var(--ink-2);align-items:baseline}
.pw-refs a:hover{color:var(--green)}
.pw-refs .n{font-weight:800;color:var(--green);min-width:12px}
/* how-to highlight — 3 concise steps, full detail linked to the IFU */
.pw-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pw-steps li{display:flex;gap:14px;align-items:flex-start;color:var(--ink-2);font-size:15px;line-height:1.5}
.pw-sn{flex:none;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
@media(max-width:820px){.pw-steps{grid-template-columns:1fr}}
@media(max-width:820px){
  .pw-row,.pw-keys,.pw-feature,.pw-more{grid-template-columns:1fr}
  .pw-row.flip .rtxt{order:0}
}
.alpro-logo{height:46px;width:auto;display:block;margin-bottom:16px}
.role-list{list-style:none;margin-top:18px;display:grid;gap:8px}
.role-list li{font-size:14.5px;color:var(--ink-2);padding-left:16px;position:relative}
.role-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--green)}
.role-list b{color:var(--ink)}
.tag-line{margin-top:18px;font:750 15px var(--font);color:var(--green)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;font:700 14px var(--font);margin-bottom:12px}
.step b{display:block;margin-bottom:6px}
.step p{font-size:13.5px;color:var(--ink-2)}
.sibling-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.sib-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink)}
.sib-card:hover{box-shadow:var(--shadow-lg);text-decoration:none}
.sib-card img{height:130px;width:100%;object-fit:cover}
.sib-card div{padding:14px 16px 18px;display:grid;gap:5px}

/* --------------------------------------------------------------- support strip */
.support-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ss-cell{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;min-width:0}
.ss-cell>svg{color:var(--green);width:28px;height:28px;font-size:22px;flex-shrink:0}
.ss-cell>.ss-tile-ic{width:28px;height:28px;flex-shrink:0;object-fit:contain;display:block;border-radius:6px}
.ss-cell div{flex:1;min-width:0}
.ss-cell b{display:block;font-size:15px}
.ss-cell span{font-size:13px;color:var(--ink-3)}
.ss-cell a{white-space:nowrap;font:650 13.5px var(--font);flex-shrink:0}
@media(max-width:980px){.support-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:560px){.support-strip{grid-template-columns:1fr}}

/* --------------------------------------------------------------------- PDP */
.pdp-head{display:grid;grid-template-columns:minmax(320px,1fr) 1.1fr;gap:48px;align-items:start;padding-top:34px}
.pdp-main{background:#fff;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;height:420px;padding:34px}
.pdp-main img{max-height:100%;object-fit:contain}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumb{width:74px;height:74px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
  display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer}
.pdp-thumb.on{border-color:var(--green)}
.pdp-thumb img{max-height:100%;object-fit:cover;border-radius:6px}
.pdp-oneliner{font-size:17px;color:var(--green);font-weight:650;margin-top:10px}
.variants{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.variant{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;font:650 13px var(--font);
  color:var(--ink-2);cursor:pointer}
.variant.on{border-color:var(--green);color:var(--green);background:var(--green-soft)}
.variant-pack{margin-top:9px;font-size:13.5px;color:var(--ink-3)}
.variant-pack.single{margin-top:18px;font-weight:650;color:var(--ink-2)}
.pdp-value{margin-top:18px;color:var(--ink-2);font-size:15.5px}
.see-benefits{margin-top:16px}
.see-benefits summary{font:650 14px var(--font);color:var(--green);cursor:pointer}
.pdp-ctas{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.trust-strip{display:flex;gap:12px;flex-wrap:wrap;padding-top:0;padding-bottom:8px}
.trust{display:inline-flex;align-items:center;gap:8px;background:var(--green-soft);color:var(--green-dark);
  border-radius:999px;padding:8px 15px;font:650 13px var(--font)}
.benefit-list{list-style:none;display:grid;gap:12px;margin-top:14px}
.benefit-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink)}
.benefit-list.big{grid-template-columns:1fr 1fr;font-size:16px}
.benefit-list li>svg{color:var(--green);flex-shrink:0;margin-top:3px}
.fn{color:var(--green);font-weight:700;margin-left:2px}
.spec-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-table th,.spec-table td{padding:13px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
.spec-table th{width:220px;background:var(--band);font-weight:650;color:var(--ink-2);vertical-align:top}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.haz-box{display:flex;gap:16px;align-items:flex-start;background:var(--amber-bg);border:1px solid #F2DFC0;
  border-radius:var(--r);padding:20px 22px}
.haz-box>svg{color:var(--amber);font-size:22px;flex-shrink:0;margin-top:2px}
.haz-box b{display:block;margin-bottom:4px}
.haz-box p{font-size:14.5px;color:var(--ink-2)}
.haz-box.calm{background:var(--green-soft);border-color:#CBE7DD}
.haz-box.calm>svg{color:var(--green)}
/* Documents page "Can't find what you need?" — plain blue info box (not hazard styling; Karen approved 2026-10-05) */
.docs-help-box{background:#E8F5FB;border:1px solid #BFE3F5;border-left:4px solid #08A0E5;border-radius:var(--r);padding:20px 22px}
.docs-help-box b{display:block;margin-bottom:4px;color:var(--ink)}
.docs-help-box p{font-size:14.5px;color:var(--ink-2)}
.docs-help-box a{color:#0072A8;font-weight:600}
.haz-signal{font-size:14.5px;color:var(--ink);margin-bottom:6px}
.haz-note{font-size:13px;color:var(--ink-2)}
/* PDP evidence table — labelled manufacturer/EU test data (Karen, 6 Sep) */
.ev-note{font-size:14px;color:var(--ink-2);max-width:74ch;margin-bottom:18px}
.ev-wrap{overflow-x:auto}
.ev-table{width:100%;border-collapse:collapse;font-size:14px}
.ev-table th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--green);
  font-weight:800;border-bottom:2px solid var(--line);padding:0 16px 8px 0;white-space:nowrap}
.ev-table td{border-bottom:1px solid var(--line);padding:10px 16px 10px 0;color:var(--ink);vertical-align:top}
.ev-table tr:last-child td{border-bottom:0}
/* adapter reference table (WL-Series) */
.adapter-table td.ad-code{white-space:nowrap;font-weight:700;color:var(--ink)}
.adapter-table td:nth-child(2){white-space:nowrap;color:var(--ink-2);font-variant-numeric:tabular-nums}
.adapter-table td:last-child{color:var(--ink-2)}
.doc-list{display:grid;gap:10px}
.doc-row{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 18px;color:var(--ink)}
.doc-row:hover:not(.pending){border-color:var(--green);text-decoration:none;box-shadow:var(--shadow)}
.doc-type{flex-shrink:0;width:84px;text-align:center;font:800 11px var(--font);letter-spacing:.08em;color:var(--green);
  background:var(--green-soft);border-radius:7px;padding:6px 4px}
.doc-row.pending .doc-type{color:var(--ink-3);background:var(--band)}
.doc-b{flex:1;min-width:0}
.doc-b b{display:block;font-size:14.5px}
.doc-b span{font-size:12.5px;color:var(--ink-3);word-break:break-all}
.doc-dl{color:var(--green);font-size:19px}
.doc-req{white-space:nowrap;font:650 13px var(--font)}
.doc-na{color:var(--ink-3)}
.docs-note{background:var(--amber-bg);border:1px solid #F2DFC0;border-radius:var(--r-sm);padding:14px 18px;
  font-size:14.5px;color:var(--ink-2);margin-bottom:18px}
.docs-fallback{margin-top:18px;font-size:14px;color:var(--ink-3)}

/* -------------------------------------------------------------- disclaimers */
.disclaimers{padding-top:44px;padding-bottom:70px}
.disclaimers h4{font:700 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.disclaimers ol{padding-left:20px;display:grid;gap:7px}
.disclaimers li{font-size:12.5px;color:var(--ink-3)}

/* ------------------------------------------------------------------ support */
.sup-filter{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:12px 20px;color:var(--ink-3);margin-bottom:26px;max-width:560px}
.sup-filter input{flex:1;border:0;outline:0;font:400 15.5px var(--font);color:var(--ink)}
.sup-group{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:18px;background:#fff}
.sup-group.hide{display:none}
.sup-group-h{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--band);border-bottom:1px solid var(--line)}
.sup-group-h img{width:46px;height:46px;object-fit:contain}
.sup-group-h div{flex:1}
.sup-group-h span{font-size:12.5px;color:var(--ink-3)}
.sup-open{white-space:nowrap;font:650 13px var(--font)}
.sup-group .doc-list{padding:14px 16px}
.sup-none{color:var(--ink-2);margin-bottom:20px}
.howto-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.howto-card ol{padding-left:18px;margin:12px 0;display:grid;gap:8px}
.howto-card li{font-size:13.5px;color:var(--ink-2)}

/* ----------------------------------------------------------------- evidence */
.study-list{display:grid;gap:16px}
.study-card{display:flex;gap:22px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px}
.study-yr{font:800 26px var(--font);color:var(--green);min-width:80px}
.study-body{flex:1}
.study-where{font-size:13px;color:var(--ink-3);font-weight:600;margin:4px 0 8px}
.study-body p{font-size:14.5px;color:var(--ink-2)}
.study-note{font-size:12.5px;color:var(--amber);margin-top:8px}
.faq-list{display:grid;gap:10px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 20px}
.faq summary{font:650 15px var(--font);cursor:pointer;color:var(--ink)}
.faq p{margin-top:10px;color:var(--ink-2);font-size:14.5px}
.faq-src{display:block;margin-top:9px;font-size:12px;color:var(--ink-3)}

/* ------------------------------------------------------------- about/contact */
.value-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px}
.value-card svg{color:var(--green);font-size:22px}
.value-card h3{margin:12px 0 8px}
.value-card p{font-size:14.5px;color:var(--ink-2)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.stat b{display:block;font-size:clamp(30px,4vw,44px);font-weight:800;color:var(--green);letter-spacing:-.02em}
.stat span{font-size:14px;color:var(--ink-2)}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.contact-cards{display:grid;gap:14px}
.contact-card{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;color:var(--ink)}
.contact-card:hover{text-decoration:none}
.contact-card>svg{color:var(--green);font-size:20px;flex-shrink:0}
.contact-card b{display:block;font-size:15px}
.contact-card span{font-size:13.5px;color:var(--ink-3)}
.contact-form{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:grid;gap:16px}
.contact-form label{display:grid;gap:6px;font:600 13.5px var(--font);color:var(--ink-2)}
.contact-form input,.contact-form select,.contact-form textarea{border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font:400 15px var(--font);color:var(--ink);background:#fff}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--green);border-color:transparent}

/* -------------------------------------------------------------------- legal */
.draft-note{display:inline-block;background:var(--amber-bg);border:1px solid #F2DFC0;color:var(--amber);
  font:700 12px var(--font);letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.legal-date{font-size:13px;color:var(--ink-3);margin-top:14px}
.legal-body{max-width:820px}
.legal-body h2{font-size:21px;margin:34px 0 12px}
.legal-body p{color:var(--ink-2);font-size:15px;margin-bottom:12px}
.legal-contact{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px}

/* ------------------------------------------------------------------- footer */
.ftr{background:#0E1A2B;color:#D7E0EA;margin-top:0}
.ftr-brand{max-width:var(--wrap);margin:0 auto;padding:40px 24px 0}
.ftr-logo{height:64px;width:auto;display:block}
.ftr-grid{max-width:var(--wrap);margin:0 auto;padding:40px 24px 40px;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
.fcol h4{font:700 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:#9AA8B8;margin-bottom:14px}
.fcol a{display:block;padding:4px 0;font-size:13.5px;color:#D7E0EA}
.fcol a:hover{color:#fff}
.fcol-note{font-size:12.5px;color:#9AA8B8;display:block;padding:3px 0}
.newsletter{display:flex;gap:8px;margin-top:10px}
.newsletter input{flex:1;min-width:0;background:#122B23;border:1px solid #2A4A40;border-radius:var(--r-sm);
  padding:10px 12px;font:400 13.5px var(--font);color:#fff}
.newsletter input::placeholder{color:#7FA89B}
.newsletter button{border:0;border-radius:var(--r-sm);background:var(--green);color:#fff;padding:0 14px;cursor:pointer;font-size:15px}
.fcol .nl-msg{color:#9AD9C5;margin-top:8px}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fcol .social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  padding:0;border-radius:50%;background:#fff;color:var(--green);transition:transform .15s,background .15s}
.fcol .social a:hover{transform:translateY(-2px);color:var(--green);background:#EAF6F1}
.social svg{width:18px;height:18px;fill:currentColor}
.ftr-bar{border-top:1px solid #243247;padding:18px 24px;display:flex;flex-wrap:wrap;gap:8px 26px;
  align-items:center;justify-content:center;font-size:12.5px;color:#9AA8B8}
.ftr-bar a{color:#9AA8B8}
.ftr-bar a:hover{color:#fff}
.ftr-bar .locale{font-weight:650;color:#D7E0EA}
.ftr-bar .copy{margin-left:auto}

/* ------------------------------------------------------------ cookie banner */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#0C1F19;color:#E4F4ED;
  display:flex;align-items:center;justify-content:center;gap:22px;padding:16px 22px;flex-wrap:wrap;
  box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.cookie-bar p{font-size:13.5px;max-width:640px}
.cookie-bar a{color:#9AD9C5;text-decoration:underline}
.cb-actions{display:flex;gap:10px}
.cookie-bar .btn-ghost{color:#9AD9C5;box-shadow:inset 0 0 0 1.5px #2A4A40}
.cookie-bar .btn-ghost:hover{background:#122B23}

/* ------------------------------------------------------------------ chatbot */
[hidden]{display:none!important}
.chat-fab{position:fixed;right:22px;bottom:112px;z-index:75;display:inline-flex;align-items:center;gap:10px;
  background:var(--green);color:#fff;border:0;border-radius:999px;padding:15px 24px;font:700 15px var(--font);
  cursor:pointer;box-shadow:var(--shadow-lg);transition:background .15s,transform .15s}
.chat-fab:hover{background:var(--green-dark);transform:translateY(-2px)}
.chat-fab .chat-fab-dot{display:inline-flex}
.chat-fab .chat-fab-dot svg{width:20px;height:20px}
.chat-fab::before{content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;animation:fabpulse 2.6s ease-out infinite}
@keyframes fabpulse{0%{box-shadow:0 0 0 0 rgba(15,122,96,.5)}70%{box-shadow:0 0 0 15px rgba(15,122,96,0)}100%{box-shadow:0 0 0 0 rgba(15,122,96,0)}}
/* Proactive greeting bubble — "Biodegree is always there" */
.chat-greet{position:fixed;right:22px;bottom:86px;z-index:75;width:min(300px,calc(100vw - 44px));
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:18px 18px 16px;cursor:pointer;animation:greetin .4s ease-out}
@keyframes greetin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.chat-greet:hover{border-color:var(--green)}
.chat-greet-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border:0;background:none;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-greet-x svg{width:16px;height:16px}
.chat-greet-h{font:800 14px var(--font);color:var(--ink);margin:0 0 5px}
.chat-greet-t{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 12px;max-width:32ch}
.chat-greet-cta{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--font);color:var(--green)}
.chat-greet-cta svg{width:14px;height:14px}
@media(prefers-reduced-motion:reduce){.chat-fab::before{animation:none}.chat-greet{animation:none}}
.chat-panel{position:fixed;right:22px;bottom:22px;z-index:76;width:min(400px,calc(100vw - 32px));
  height:min(600px,calc(100vh - 60px));background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  background:var(--green);color:#fff}
.chat-title{display:flex;gap:11px;align-items:center;font-size:15px}
.chat-title span{display:block;font-size:11.5px;color:#BFE6D9;font-weight:400}
.chat-head .icon-btn{color:#fff}
.chat-head .icon-btn:hover{background:rgba(255,255,255,.14)}
.chat-log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--band)}
.msg{align-self:flex-end;background:var(--green);color:#fff;border-radius:14px 14px 4px 14px;
  padding:10px 14px;font-size:14px;max-width:85%}
.ans{align-self:stretch;background:#fff;border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:13px 15px}
.ans .who{display:flex;gap:8px;align-items:center;font:700 12px var(--font);color:var(--green);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ans.no .who{color:var(--amber)}
.ans p{font-size:14px;color:var(--ink)}
.ans ul{margin:8px 0 0 18px;display:grid;gap:6px}
.ans li{font-size:13.5px;color:var(--ink-2)}
.ans .chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;font:650 11.5px var(--font);border-radius:999px;padding:4px 10px}
.chip.ok{background:var(--green-soft);color:var(--green-dark)}
.chip.src{background:var(--band);color:var(--ink-2);border:1px solid var(--line)}
.chip.no{background:var(--amber-bg);color:var(--amber)}
.ans-more{margin-top:10px}
.ans-more a{font:650 13px var(--font)}
.ans-act{display:flex;gap:8px;margin-top:10px}
.mini{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 11px;font:600 11.5px var(--font);color:var(--ink-2);cursor:pointer}
.mini:hover{border-color:var(--green);color:var(--green)}
.chat-suggs{display:flex;gap:8px;padding:10px 14px 0;flex-wrap:wrap}
.chat-suggs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;
  font:600 12px var(--font);color:var(--green);cursor:pointer}
.chat-suggs button:hover{border-color:var(--green)}
.chat-priv{padding:10px 14px 0;font-size:11.5px;color:var(--ink-2);line-height:1.45}
.chat-priv b{color:var(--amber)}
.chat-form{display:flex;gap:10px;padding:12px 14px;border-top:1px solid var(--line)}
.chat-form input{flex:1;border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;font:400 14px var(--font);color:var(--ink)}
.chat-form input:focus{outline:2px solid var(--green);border-color:transparent}
.chat-form button{border:0;border-radius:50%;width:42px;height:42px;background:var(--green);color:#fff;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.chat-form button svg{width:19px;height:19px}
.chat-form .mic{background:#fff;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
.chat-form .mic.rec{background:#64748B;color:#fff;box-shadow:none;animation:micpulse 1.1s infinite}
@keyframes micpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:repeat(3,1fr)}
  .comp-block{grid-template-columns:1fr}
  .mega-in{grid-template-columns:1fr;gap:26px}
}
@media (max-width:820px){
  .nav{display:none}
  .hero-carousel{height:76vh;min-height:480px}
  .hc-arrow{display:none}
  .hc-txt{padding-top:40px}
  .ph-grid{grid-template-columns:1fr}
  .big-card{grid-template-columns:1fr}
  .bc-img{padding:24px}
  .bc-img img{max-height:220px}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;
    background:none;color:var(--ink);cursor:pointer;font-size:20px;flex:none}
  .hdr-in{padding:0 12px;gap:8px;min-width:0}
  .logo{min-width:0;max-width:calc(100% - 120px)}
  .logo-img{height:40px;max-height:40px;max-width:100%}
  .hdr-tools{gap:4px;flex:none;min-width:0}
  .hdr-tools .btn{display:none}
  .hdr-search,.portal-link{flex:none}
  .split-tiles,.grid-2,.grid-3,.contact-grid,.nl-cta,.pdp-head,.alt-row{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .alt-row.flip .alt-img{order:0}
  .benefit-list.big{grid-template-columns:1fr}
  /* support-strip: phone stack handled at 560px */
  .study-card{flex-direction:column;align-items:flex-start;gap:12px}
  .hc-txt h1{font-size:30px}
  .wrap{padding:44px 18px}
  .comp-pillars{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:repeat(2,1fr)}
  .ftr-bar .copy{margin-left:0}
  .pdp-main{height:320px}
  .spec-table th{width:140px}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .chat-fab span{display:none}
  .chat-fab{padding:15px}
}

/* ============================================================================
   Homepage v2 — prototype-flow sections (5 Sep 2026)
   ========================================================================== */
/* --- 1 · category photo cards --- */
.home-cats{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:36px}
.hc-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.hc-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.hc-img{aspect-ratio:4/3;overflow:hidden;background:var(--band)}
.hc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.hc-card:hover .hc-img img{transform:scale(1.05)}
.hc-body{padding:18px 20px 22px}
.hc-body h3{font-size:16.5px}
.hc-body p{font-size:13.5px;color:var(--ink-3);margin-top:5px}
.hc-go{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
  color:var(--green);transition:background .2s,color .2s}
.hc-card:hover .hc-go{background:var(--green);color:#fff}

/* --- 2 · i3 range cards --- */
.home-i3{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.i3-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 20px 22px;
  text-align:center;color:var(--ink);display:flex;flex-direction:column;align-items:center;
  transition:box-shadow .2s,transform .2s}
.i3-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.i3-card img{height:150px;width:auto;max-width:100%;object-fit:contain;margin-bottom:18px}
.i3-card h3{font-size:16.5px}
.i3-card span{font-size:13px;color:var(--ink-3);margin-top:4px}

/* --- 3 · featured product banners --- */
.feat-stack{display:flex;flex-direction:column;gap:24px;margin-top:36px}
.wide-feat{display:grid;grid-template-columns:1.05fr .95fr;border-radius:var(--r);overflow:hidden;
  background:var(--green-soft);min-height:340px}
.wide-feat.dark{background:var(--green-dark)}
.wf-img{overflow:hidden}
.wf-img img{width:100%;height:100%;object-fit:cover}
.wf-txt{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.wf-k{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.wide-feat.dark .wf-k{color:#9AD9C5}
.wf-txt h3{font-size:clamp(21px,2.4vw,29px);line-height:1.18;letter-spacing:-.01em}
.wf-txt p{font-size:15px;color:var(--ink-2);max-width:420px}
.wide-feat.dark .wf-txt h3{color:#fff}
.wide-feat.dark .wf-txt p{color:#CBE7DC}
.wide-feat:nth-child(even) .wf-img{order:2}

/* --- 4 · support pathway cards --- */
.path-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.path-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;color:var(--ink);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.path-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.pc-img{aspect-ratio:4/3;overflow:hidden;background:var(--band)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.path-card:hover .pc-img img{transform:scale(1.05)}
.pc-body{padding:18px 20px 22px}
.pc-k{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.pc-body h3{font-size:16px;line-height:1.3}

/* --- 5 · support story band --- */
.story{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:var(--r);overflow:hidden;
  background:var(--green-soft)}
.story-img{overflow:hidden;min-height:320px}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-txt{padding:52px 56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px}
.story-txt p{font-size:15.5px;color:var(--ink-2);max-width:440px}

@media (max-width:1000px){
  .home-cats,.home-i3,.path-grid{grid-template-columns:repeat(2,1fr)}
  .wide-feat{grid-template-columns:1fr;min-height:0}
  .wide-feat:nth-child(even) .wf-img{order:0}
  .wf-img img{max-height:300px}
  .story{grid-template-columns:1fr}
  .story-img img{max-height:300px}
  .story-txt{padding:36px 28px}
  .wf-txt{padding:32px 28px}
}
@media (max-width:560px){
  .home-cats,.home-i3,.path-grid{grid-template-columns:1fr}
}


/* ============================================================================
   Document library (portal-style, /support/) + Product quick-view panel
   ========================================================================== */
/* --- document library --- */
.sup-pills{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 24px}
.sup-pill{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:8px 16px;
  font:600 13.5px var(--font);color:var(--ink-2);cursor:pointer;transition:all .15s}
.sup-pill:hover{border-color:var(--green);color:var(--green)}
.sup-pill.on{background:var(--green);border-color:var(--green);color:#fff}
.sup-card{display:flex;align-items:center;gap:16px;width:100%;padding:18px 20px;background:#fff;
  border:0;font:inherit;text-align:left;cursor:pointer}
.sup-card img{width:52px;height:52px;object-fit:contain;flex:none}
.sup-meta{flex:1;min-width:0}
.sup-meta h3{font-size:17px}
.sup-meta>span{font-size:12.5px;color:var(--ink-3)}
.sup-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.chip{font:800 10.5px var(--font);letter-spacing:.07em;padding:3px 9px;border-radius:6px;
  background:var(--green-soft);color:var(--green)}
.chip-sds{background:var(--amber-bg);color:var(--amber)}
.chip-evid{background:#EDF2FA;color:#36527E}
.sup-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.sup-current{font:700 10.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.sup-current::before{content:'●';margin-right:5px;font-size:8px}
.sup-current.pending{color:var(--amber)}
.sup-verified{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.sup-verified svg{color:var(--green)}
.sup-chev{color:var(--ink-3);transition:transform .2s;flex:none}
.sup-group.open .sup-chev{transform:rotate(90deg);color:var(--green)}
.sup-group.open{border-color:var(--green)}
.sup-group .doc-list{border-top:1px solid var(--line)}
.sup-foot{padding:4px 16px 16px}
@media (max-width:760px){
  .sup-card{flex-wrap:wrap}
  .sup-right{flex-direction:row;align-items:center;gap:12px;width:100%}
}

/* --- product quick-view slide-out --- */
.qv-lock{overflow:hidden}
.qv-overlay{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:88;opacity:0;transition:opacity .25s}
.qv-overlay.on{opacity:1}
.qv-panel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:#fff;z-index:89;
  box-shadow:var(--shadow-lg);transform:translateX(103%);transition:transform .28s ease;
  display:flex;flex-direction:column}
.qv-panel.on{transform:none}
.qv-top{display:flex;align-items:center;justify-content:space-between;flex:none;
  padding:13px 18px;border-bottom:1px solid var(--line)}
.qv-tag{font:800 11px var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.qv-body{overflow-y:auto;padding:22px 24px 42px}
.qv-img{background:var(--band);border-radius:var(--r);padding:20px;display:flex;justify-content:center;margin-bottom:18px}
.qv-img img{max-height:190px;width:auto;object-fit:contain}
.qv-body .eyebrow{margin-bottom:2px}
.qv-name{font-size:30px;line-height:1.1;letter-spacing:-.02em;color:var(--green);font-weight:800}
.qv-ref{font:600 13px var(--font);color:var(--ink-3);margin-top:3px}
.qv-badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.qv-pdp-link{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--green);color:#fff;font-weight:700;
  font-size:16px;text-decoration:none;margin:14px 0 16px;padding:14px 18px;border-radius:9px}
.qv-pdp-link:hover{background:#067EB4;color:#fff}
.qv-pdp-link svg{width:16px;height:16px}
.qv-badge{display:inline-flex;align-items:center;gap:6px;font:650 12px var(--font);color:var(--ink-2);
  background:var(--band);border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.qv-badge svg{color:var(--green);width:1em;height:1em}
.qv-badge.warn{color:var(--amber);background:var(--amber-bg);border-color:#F3DFC0}
.qv-badge.warn svg{color:var(--amber)}
.qv-oneliner{font:700 15.5px/1.4 var(--font);color:var(--ink);margin-bottom:4px}
.qv-body h4{font:800 11.5px var(--font);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:22px 0 8px}
.qv-body>p{font-size:14.5px;color:var(--ink-2)}
.qv-body .doc-list{display:flex;flex-direction:column;gap:10px}
.qv-note{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);
  background:var(--amber-bg);border-radius:var(--r-sm);padding:12px 14px;margin-top:16px}
.qv-note svg{flex:none;color:var(--amber);margin-top:1px}
.qv-rels{display:flex;flex-direction:column;gap:10px}
.qv-rel{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 16px;color:var(--ink);transition:border-color .15s}
.qv-rel:hover{border-color:var(--green);text-decoration:none}
.qv-rel-t{flex:1;min-width:0}
.qv-rel-t b{font-size:14px;display:block}
.qv-rel-t span{font-size:12px;color:var(--ink-3);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qv-rel svg{color:var(--green);flex:none}
.qv-ctas{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.qv-ctas .btn{justify-content:center}
.qv-help{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:18px;background:var(--band)}
.qv-help b{font-size:14px;display:block}
.qv-help span{font-size:12px;color:var(--ink-3)}


/* ============================================================================
   PDP — brochure v16 style (5 Sep night): category photo band with an
   overlapping lowercase slogan block, genuine packshot on white below,
   then name → bold descriptor → short intro → REF → chips → CTAs.
   ========================================================================== */
.pdp-band{position:relative;height:clamp(380px,38vw,680px)}
.pdp-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pdp-band-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.74) 34%,rgba(255,255,255,0) 62%)}
/* dark product banners (e.g. i3 FOUR product shot on black, manifest "dark":true) — white scrim would look like a gray wedge; use a dark scrim and lighten the ghost button */
.pdp-band-dark .pdp-band-shade{background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 34%,rgba(0,0,0,0) 62%)}
.pdp-band-dark .pdp-hero-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.pdp-band-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:0;padding-bottom:0;max-width:var(--wrap)}
.pdp-hero-cta{margin-top:clamp(20px,3vw,32px);display:flex;gap:12px;flex-wrap:wrap}
.pdp-typo{position:relative;z-index:2;font-family:var(--disp);font-weight:900;
  text-transform:lowercase;font-size:clamp(60px,9vw,132px);line-height:.80;letter-spacing:-.03em}
.pdp-typo span{display:block}
.pdp-intro{background:#fff}
/* tighter section rhythm on PDPs — text-heavy sections read better at 40px (Karen, 6 Sep) */
.pdp-page section.wrap, .pdp-page > div.wrap{padding-top:40px;padding-bottom:40px}
.pdp-page section.band>.wrap{padding-top:40px;padding-bottom:40px}
/* PDP grids — compact Philips-style cards (Karen, 6 Sep): tighter images/body,
   More products runs 4-across via grid-4, descriptions clamped to 2 lines */
.pdp-page .pcard-img{height:150px;padding:14px}
/* product-card hero variant — full-bleed Codex hero instead of a padded pack shot */
.pcard-img.hero{padding:0;background:#eef2f0}
.pcard-img.hero > img:not(.pcard-tax){width:100%;height:100%;object-fit:cover;object-position:center right}
/* About page — manufacturer message pull-quote */
.about-quote{font-family:var(--disp);font-weight:900;font-size:clamp(22px,2.6vw,32px);line-height:1.15;letter-spacing:-.02em;color:var(--green);border-left:4px solid var(--green);padding:6px 0 6px 22px;margin:0}
.about-quote span{display:block;margin-top:16px;font-family:var(--font);font-weight:700;font-size:14px;color:var(--ink-2);letter-spacing:0}
.alfred-band{margin:6px 0 2px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.alfred-band img{display:block;width:100%;height:auto}
/* mid-scale lowercase Typo section header (home + About) — sits between .pdp-typo hero and .pdp-claim */
.sec-typo{font-family:var(--disp);font-weight:900;text-transform:lowercase;font-size:clamp(30px,4vw,52px);line-height:.92;letter-spacing:-.03em;color:var(--green);margin:0}
.sec-typo span{display:block}
/* card-scale ALPRO Typo header (value-card titles on About "why Alpro") */
.vc-typo{font-family:var(--disp);font-weight:900;text-transform:lowercase;letter-spacing:-.02em;color:var(--green);font-size:clamp(21px,2.1vw,27px);line-height:1;margin:8px 0 10px}
/* "Choosing a product" decision helper on category pages */
.chooser-card{align-items:flex-start}
.chooser-card .eyebrow{display:block;margin-bottom:8px}
.chooser-pick{margin-top:12px;font-weight:600;display:flex;align-items:flex-start;gap:7px}
.chooser-pick svg{width:16px;height:16px;color:var(--green);flex:0 0 auto;margin-top:3px}
.chooser-pick a{color:var(--green)}
.chooser-note{margin-top:8px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
/* Product-family "available as" formats strip (PDP intro) */
.fmt-strip{display:flex;flex-wrap:wrap;align-items:center;gap:9px 12px;margin:20px 0 4px;padding:13px 16px;background:var(--green-soft);border-radius:12px}
.fmt-label{font:700 12px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--green-dark)}
.fmt-chips{display:flex;flex-wrap:wrap;gap:8px}
.fmt-chip{display:inline-flex;align-items:center;gap:4px;font:600 13.5px var(--font);padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--green)}
.fmt-chip svg{width:13px;height:13px}
.fmt-chip.on{background:var(--green);color:#fff;border-color:var(--green);cursor:default}
a.fmt-chip:hover{border-color:var(--green);background:#fff;text-decoration:none}
/* Step-by-step protocols (product pages) */
.protocol{margin-bottom:34px}
.protocol:last-child{margin-bottom:0}
.protocol-h{font-size:clamp(16px,1.6vw,19px);font-weight:600;color:var(--ink);margin-bottom:16px}
/* Home value statement — Philips-style key-message headline under the banner */
.value-statement{text-align:center;padding-top:64px;padding-bottom:52px}
.vs-line{font-family:var(--disp);font-weight:900;letter-spacing:-.02em;line-height:1.08;font-size:clamp(26px,3.7vw,46px);color:var(--ink);max-width:20ch;margin:0 auto}
.vs-em{color:var(--green)}
.vs-sub{margin:20px auto 0;max-width:62ch;color:var(--ink-2);font-size:clamp(15px,1.4vw,17px);line-height:1.6}

/* ================= HOME — Andreas concept sections (2026-09-07) ================= */
/* Choice router — Philips-style "what are you looking for?" wayfinding */
.choice-wrap{padding-top:40px;padding-bottom:8px}
.choice-q{text-align:center;font-size:clamp(18px,2vw,22px);font-weight:750;color:var(--ink);letter-spacing:-.01em;margin-bottom:22px}
.choice-router{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:repeat(3,1fr);background:#fff}
.choice-card{display:flex;align-items:center;gap:16px;padding:26px 28px;color:var(--ink);border-left:1px solid var(--line)}
.choice-card:first-child{border-left:0}
.choice-card:hover{background:var(--band);text-decoration:none}
.choice-ico{flex:none;display:flex;align-items:center;justify-content:center;color:var(--green)}
.choice-ico svg{width:30px;height:30px}
.choice-txt{flex:1}
.choice-txt b{display:block;font-size:16.5px;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.choice-txt span{font-size:13px;color:var(--ink-3)}
.choice-card .chev{color:var(--ink-3);flex:none}
.choice-card .chev svg{width:18px;height:18px}
@media(max-width:760px){.choice-router{grid-template-columns:1fr}.choice-card{border-left:0;border-top:1px solid var(--line)}.choice-card:first-child{border-top:0}}

/* Single-source-of-truth — giant broken-letter Typo brand statement → portal */
.ssot-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ssot-word{font-family:var(--disp);font-weight:900;text-transform:lowercase;letter-spacing:-.04em;line-height:.86;font-size:clamp(48px,8vw,112px);margin:8px 0 0}
.ssot-word span{display:block}
.ssot-word .g{color:var(--green)}
.ssot-word span:not(.g){color:var(--ink)}
.ssot-statement{max-width:44ch}
.ssot-lead{color:var(--ink-2);font-size:clamp(16px,1.5vw,18px);line-height:1.6;margin:0 0 24px}
@media(max-width:1000px){.ssot-grid{grid-template-columns:1fr}}
.ssot-cards .grid-3{gap:16px}
.ssot-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 22px;display:flex;flex-direction:column}
.ssot-card svg{color:var(--green);width:22px;height:22px}
.ssot-card .eo-k{margin:12px 0 4px}
.ssot-card h3{font-size:15.5px;margin:0 0 6px}
.ssot-card p{font-size:13px;color:var(--ink-2);line-height:1.5;margin:0 0 16px}
.ssot-btn{display:inline-flex;align-items:center;align-self:flex-start;margin-top:auto;gap:6px;font:650 12.5px var(--font);background:var(--green);color:#fff;border:0;border-radius:8px;padding:9px 14px;cursor:pointer}
.ssot-btn:hover{background:var(--green-dark);text-decoration:none;color:#fff}
@media(max-width:1000px){.ssot-grid{grid-template-columns:1fr;gap:26px}}
@media(max-width:820px){.ssot-cards .grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ssot-cards .grid-3{grid-template-columns:1fr}}

/* Dark "information behind your care" strip (Sample-2, compact) */
.info-dark{background:linear-gradient(165deg,#0d2c22,#0a2019)}
.info-head{margin-bottom:34px}
.info-head .sec-typo{color:#fff}
.info-cols{display:grid;grid-template-columns:repeat(4,1fr)}
.info-col{display:block;padding:4px 26px;color:#fff;border-left:1px solid rgba(255,255,255,.14)}
.info-col:first-child{padding-left:0;border-left:0}
.info-col:hover{text-decoration:none}
.info-col:hover b{color:#9AD9C5}
.info-col svg{width:26px;height:26px;color:#9AD9C5;margin-bottom:14px}
.info-col b{display:block;font-size:16px;font-weight:600;color:#fff;margin-bottom:6px}
.info-col>span:not(.info-go){display:block;font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.5;margin-bottom:14px}
.info-go{display:inline-flex;align-items:center;gap:6px;font:650 13.5px var(--font);color:#9AD9C5}
.info-go svg{width:15px;height:15px;color:#9AD9C5;margin:0}
@media(max-width:860px){.info-cols{grid-template-columns:1fr 1fr;row-gap:26px}.info-col{border-left:0;padding:4px 22px}.info-col:nth-child(odd){padding-left:0}}
@media(max-width:520px){.info-cols{grid-template-columns:1fr}.info-col{padding:18px 0;border-top:1px solid rgba(255,255,255,.14)}.info-col:first-child{border-top:0}}

/* card kicker (single source of truth + moat pillars) */
.eo-k{display:block;font:800 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.eo-head{text-align:center;margin-bottom:36px}
.eo-head .lead{margin-left:auto;margin-right:auto}
.value-card .eo-k{margin:14px 0 6px}
.value-card .eo-k + h3{margin-top:0}
button.pcard-link{border:0;background:none;cursor:pointer;padding:0;font:inherit}

/* four-zone cards — ALPRO coined word overlaid on the image (broken Typo, zone colour) + name row */
.home-cats .hc-img{position:relative}
.hc-word{position:absolute;left:0;right:0;bottom:0;margin:0;padding:34px 14px 12px;font-family:var(--disp);font-weight:900;font-size:clamp(13px,1.45vw,19px);line-height:.95;letter-spacing:-.03em;text-transform:lowercase;white-space:nowrap;background:linear-gradient(to top,rgba(255,255,255,.96),rgba(255,255,255,.74) 52%,rgba(255,255,255,0))}
@media(max-width:1000px){.hc-word{font-size:clamp(16px,3vw,22px)}}
.home-cats .hc-body{display:flex;align-items:center;gap:12px;padding:16px 18px;position:static}
.home-cats .hc-num{font-family:var(--disp);font-weight:900;font-size:15px;color:var(--ink-3);letter-spacing:.02em;line-height:1;flex:none}
.home-cats .hc-body h3{margin:0;font-size:14.5px;color:var(--ink);font-weight:650;flex:1}
.home-cats .hc-go{position:static;top:auto;right:auto;width:32px;height:32px;flex:none}

/* moat + compliance */
.comp-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:start}
/* compliance "what audit-readiness means": fix heading→text rhythm + give the
   checklist visual weight so the two columns balance (sec-typo has margin:0 base). */
.comp-hero-txt .sec-typo{margin-bottom:20px}
.comp-hero-txt>p{max-width:52ch}
.comp-lede{padding-top:clamp(80px,8vw,116px)}
.comp-hero-aside .eyebrow{margin-bottom:16px}
.comp-hero-aside .check{background:var(--band);border:1px solid var(--line);border-radius:16px;padding:10px 22px}

/* compliance hero band — photo on the right, Typo on the tinted left;
   degrades to a clean tint if the photo is absent (onerror removes the img) */
.comp-hero-band{position:relative;background:var(--green-soft);overflow:hidden}
.comp-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* word sits ON the photo: white scrim lightens the left so the green Typo stays crisp,
   fading to clear over the people on the right */
.comp-hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 30%,rgba(255,255,255,.62) 52%,rgba(255,255,255,.22) 70%,rgba(255,255,255,0) 84%)}
.comp-hero-band-in{position:relative;z-index:2;padding:clamp(64px,7vw,96px) 0}
.comp-hero-band .comp-typo{margin-top:4px}
@media(max-width:820px){
  .comp-hero-scrim{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.8) 54%,rgba(255,255,255,.5) 100%)}
}

/* ---- evidence dossier (reuses .moat-dark section theme + .value-card tiles) ---- */
.dossier-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,52px);align-items:center}
.dh-typo{font-size:clamp(44px,8vw,92px);margin:6px 0 16px}
.dh-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.dh-note{display:inline-flex;align-items:center;gap:7px;font:600 13.5px var(--font);color:var(--ink-3)}
.dh-note svg{width:15px;height:15px;color:var(--green)}
.ev-glance{background:linear-gradient(165deg,#0d2c22,#0a2019);color:#fff;border-radius:20px;padding:30px 30px 26px;box-shadow:var(--shadow-lg)}
.ev-glance-k{font:800 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:#9AD9C5;margin-bottom:18px}
.ev-glance-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.ev-glance-grid b{font-family:var(--disp);font-weight:900;font-size:clamp(30px,3.4vw,40px);color:#fff;display:block;line-height:1;letter-spacing:-.02em}
.ev-glance-grid span{display:block;margin-top:7px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.72)}
.ev-glance-foot{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.6)}
.stat-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:center}
.ev-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ev-pill{background:var(--green);color:#fff;font:700 12.5px var(--font);padding:7px 14px;border-radius:999px}
.stat-tiles .value-card{padding:22px}
.stat-num{font-family:var(--disp);font-weight:900;font-size:clamp(30px,4vw,46px);color:#fff;display:block;line-height:1;letter-spacing:-.02em;margin-bottom:8px}
.stat-tiles .value-card span{color:rgba(255,255,255,.72);font-size:13px;line-height:1.45}
.ev-compliance{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;background:var(--green-soft);border-radius:20px;padding:clamp(28px,3.4vw,40px)}
.ev-compliance h2{margin:6px 0 8px}
.ev-compliance p{max-width:60ch;color:var(--ink-2)}

/* ---- image-led zone cards (compliance "audit readiness, zone by zone") ---- */
.zone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.zcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.zcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--band)}
.zcard-img img{width:100%;height:100%;object-fit:cover;display:block}
.zcard-body{display:flex;flex-direction:column;flex:1;padding:20px 20px 22px}
.zcard-body h3{margin:2px 0 8px}
.zcard-body p{color:var(--ink-2);font-size:14.5px}
.zcard-body .pcard-link{margin-top:auto;padding-top:16px}
@media(max-width:980px){.zone-grid{grid-template-columns:1fr 1fr}.dossier-hero{grid-template-columns:1fr;gap:30px}.stat-band{grid-template-columns:1fr;gap:26px}}
@media(max-width:560px){.zone-grid{grid-template-columns:1fr}}
.badge{display:inline-flex;align-items:center;gap:7px;margin-top:24px;padding:9px 17px;background:var(--ink);color:#fff;border-radius:999px;font:600 13px/1 var(--font);letter-spacing:.02em}
.badge b{color:#9AD9C5;font-weight:800}
.check{list-style:none;margin:0;padding:0}
.check li{display:flex;align-items:flex-start;gap:12px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink)}
.check li:first-child{padding-top:0}
.check li:last-child{padding-bottom:0;border-bottom:0}
.check li svg{color:var(--green);flex:none;width:1.2em;height:1.2em;margin-top:.15em}

/* nav active link + compliance page */
.nav-link.on{color:var(--green)}
.support-line{margin-top:22px;padding:15px 18px;background:var(--green-soft);border-left:3px solid var(--green);
  border-radius:0 12px 12px 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.support-line b{color:var(--ink)}
.comp-page-hero{padding-bottom:8px}
.comp-typo{font-family:var(--disp);font-weight:900;line-height:.95;letter-spacing:-.02em;text-transform:lowercase;
  font-size:clamp(46px,9.5vw,116px);color:var(--ink);margin:8px 0 20px}
.comp-typo .g{color:var(--green)}
.doc-grid .value-card svg{color:var(--green);width:26px;height:26px;margin-bottom:10px}
/* "the document set" — soft paper-stack photo as a light branded background */
.docset-bg{background-color:var(--green-soft);
  background-image:linear-gradient(180deg,rgba(231,243,239,.72) 0%,rgba(231,243,239,.86) 55%,rgba(231,243,239,.93) 100%),url('/assets/compliance/docset-bg.png');
  background-size:cover;background-position:center;background-repeat:no-repeat}
.docset-bg .value-card{background:#fff;box-shadow:var(--shadow)}

/* /compliance/ — water headings + light-blue links + blue Ask; do not strip site green elsewhere */
.page-compliance{--accent:var(--water)}
.page-compliance .nav-link.on,.page-compliance .nav-item.on .nav-tab,.page-compliance .nav-tab:hover{color:var(--water);border-bottom-color:var(--water)}
.page-research .nav-link.on{color:var(--green);border-bottom-color:var(--green)}

/* ALPRO official training badge — keep original colours (same exception as ALPRO logo) */
.tc-hub-title{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tc-hub-ic{flex:none;width:48px;height:48px;object-fit:contain;display:block}
.tc-eyebrow-train{display:inline-flex;align-items:center;gap:8px}
.tc-eyebrow-ic{width:18px;height:18px;object-fit:contain;flex:none}
.rc-tile-ic img{width:48px;height:48px;object-fit:contain;display:block}

.study-products{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.study-prod-tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:var(--green-soft, #e8f6ef);color:var(--green);font:600 12px var(--font)}

.page-compliance .eyebrow:not(.light){color:var(--water)}
.page-compliance .pdp-typo,
.page-compliance .pdp-claim,
.page-compliance .comp-typo,
.page-compliance .sec-typo,
.page-compliance .sec-typo span,
.page-compliance h1,
.page-compliance h2,
.page-compliance h3{color:var(--water)}
.page-compliance .train-typo{color:var(--water)}
.page-compliance .eo-k,.page-compliance .moat-pillars-k{color:var(--water)}
.page-compliance .check li svg{color:var(--water)}
.page-compliance .comp-typo .g{color:var(--water)}
.page-compliance .support-line{background:var(--water-soft);border-left-color:var(--water)}
.page-compliance .badge b{color:#7DD3F0}
.page-compliance .btn{background:var(--water)}
.page-compliance .btn:hover{background:var(--water-dark)}
.page-compliance .btn-light{background:#fff;color:var(--water)}
.page-compliance .btn-ghost{color:var(--water);box-shadow:inset 0 0 0 1.5px var(--water)}
.page-compliance .btn-ghost:hover{background:var(--water-soft)}
/* sales/specialist band — water, not forest green */
.page-compliance .band-green,
.page-compliance .sales-band{background:var(--water);color:#fff}
.page-compliance .band-green .sec-typo,
.page-compliance .sales-band .sec-typo,
.page-compliance .sales-band h2{color:#fff}
.page-compliance .sales-trust li svg{color:#7DD3F0}
.page-compliance .portal-card-arrow{color:var(--water)}
.page-compliance .comp-hero-band{background:var(--water-soft)}
.page-compliance .docset-bg{
  background-color:var(--water-soft);
  background-image:linear-gradient(180deg,rgba(224,243,249,.72) 0%,rgba(224,243,249,.86) 55%,rgba(224,243,249,.93) 100%),url('/assets/compliance/docset-bg.png');
}
/* links + Ask Biodegree — light blue / water (karen: not red) */
.page-compliance{--comp-link:#08A0E5}
.page-compliance a:not(.btn):not(.nav-link):not(.nav-tab):not(.mm-umb):not(.mm-cat-h):not(.mml-all):not(.catbar-item){color:var(--comp-link)}
.page-compliance a:not(.btn):not(.nav-link):not(.nav-tab):not(.mm-umb):not(.mm-cat-h):not(.mml-all):not(.catbar-item):hover{color:var(--water)}
.page-compliance .btn{color:#fff}
.page-compliance .btn-light{color:var(--water)}
.page-compliance .btn-ghost{color:var(--water)}
.page-compliance .nav-link{color:inherit}
.page-compliance .nav-link:hover{color:var(--water)}
.page-compliance .pcard-link,
.page-compliance .doc-dl,
.page-compliance .doc-req,
.page-compliance .sup-open,
.page-compliance .ans-more a{color:var(--water)}
.page-compliance .pcard-link:hover,
.page-compliance .doc-req:hover,
.page-compliance .sup-open:hover{color:var(--water-dark)}
.page-compliance .doc-type{color:var(--water);background:var(--water-soft)}
.page-compliance .doc-row:hover:not(.pending){border-color:var(--water)}
.page-compliance .crumbs a:hover{color:var(--water)}
/* footer links — light blue on dark (not red) */
.page-compliance .fcol a{color:var(--comp-link)}
.page-compliance .fcol a:hover{color:#fff}
.page-compliance .ftr-bar a{color:var(--comp-link)}
.page-compliance .ftr-bar a:hover{color:#fff}
/* Ask Biodegree — water blue */
.page-compliance .chat-fab{background:var(--water)}
.page-compliance .chat-fab:hover{background:var(--water-dark)}
.page-compliance .chat-fab::before{animation:fabpulse-water 2.6s ease-out infinite}
@keyframes fabpulse-water{0%{box-shadow:0 0 0 0 rgba(0,157,207,.5)}70%{box-shadow:0 0 0 15px rgba(0,157,207,0)}100%{box-shadow:0 0 0 0 rgba(0,157,207,0)}}
.page-compliance .chat-greet:hover{border-color:var(--water)}
.page-compliance .chat-greet-cta{color:var(--water)}
.page-compliance .chat-head{background:var(--water)}
.page-compliance .chat-title span{color:#B8E6F5}
.page-compliance .msg{background:var(--water)}
.page-compliance .ans .who{color:var(--water)}
.page-compliance .chip.ok{background:var(--water-soft);color:var(--water-dark)}
.page-compliance .mini:hover{border-color:var(--water);color:var(--water)}
.page-compliance .chat-suggs button{color:var(--water)}
.page-compliance .chat-suggs button:hover{border-color:var(--water)}
.page-compliance .chat-form input:focus{outline-color:var(--water)}
.page-compliance .chat-form button{background:var(--water)}
.page-compliance .chat-form .mic{color:var(--water);box-shadow:inset 0 0 0 1.5px var(--water)}
.page-compliance .assistant-contact-grid a{color:var(--water);border-color:#b8e0ef}
.page-compliance .assistant-contact-grid a:hover{background:var(--water-soft);border-color:var(--water)}
.page-compliance .assistant-contact-grid a:focus-visible{outline-color:var(--water)}



/* training & competency — team photo + stacked text (training + regulatory) */
.train-row{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,4vw,52px);align-items:center}
.train-media{border-radius:28px;overflow:hidden;background:var(--band);aspect-ratio:4/5;max-width:400px}
.train-media img{width:100%;height:100%;object-fit:cover;display:block}
.train-div{border:0;border-top:1px solid var(--line);margin:28px 0}
/* training headings in lowercase green Typo (phrases, not per-word syllable breaks) */
.train-typo{font-size:clamp(24px,2.6vw,34px);margin:0 0 12px}

/* evidence "spectrum & standards" matrix (scrolls on narrow screens) */
.ev-matrix-wrap{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch}
.ev-matrix{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.ev-matrix th{text-align:left;font:800 11px var(--font);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:15px 18px;border-bottom:1px solid var(--line);background:var(--band);white-space:nowrap}
.ev-matrix td{padding:16px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.45}
.ev-matrix tbody tr:last-child td{border-bottom:0}
.ev-matrix td b{color:var(--ink);display:block}
.evm-zone{display:block;font-size:11px;color:var(--green);font-weight:700;margin-top:3px;text-transform:uppercase;letter-spacing:.05em}
.evm-norm{font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:13px}
.evm-status{display:inline-block;font:700 12px var(--font);padding:4px 11px;border-radius:999px;white-space:nowrap}
.evm-status.reg{background:var(--green-soft);color:var(--green-dark)}
.evm-status.pending{background:#F4F0E4;color:#8A6D1E}
@media(max-width:860px){.train-row{grid-template-columns:1fr;gap:26px}.train-media{aspect-ratio:16/10;max-width:none}}
.moat-pillars-k{margin-top:56px}
.moat-pillars{margin-top:20px}
.moat-pillars .value-card{display:flex;flex-direction:column}
.moat-pillars .value-card h3{margin-top:0}
.moat-pillars .value-card .pcard-link{margin-top:auto;padding-top:16px}
.bigstat{text-align:center;margin-top:64px;padding-top:56px;border-top:1px solid var(--line)}
.bs-num{font-family:var(--disp);font-weight:900;font-size:clamp(56px,11vw,150px);line-height:.95;letter-spacing:-.03em}
.bs-num span{display:block}
.bs-num .pct{color:var(--green)}
.bs-num .lbl{color:var(--ink)}
.bs-cap{max-width:62ch;margin:20px auto 0;color:var(--ink-2);font-size:14.5px;line-height:1.6}
@media (max-width:900px){.comp-hero{grid-template-columns:1fr;gap:28px}}
@media (max-width:380px){.bs-num{font-size:clamp(40px,13vw,56px)}}

/* DARK moat variant — the one grip dark section */
.moat-dark{background:linear-gradient(165deg,#0a2e22,#08211a)}
.moat-dark .eyebrow{color:#9AD9C5}
.moat-dark .sec-typo{color:#fff}
.moat-dark .lead{color:rgba(255,255,255,.82)}
.moat-dark .badge{background:rgba(255,255,255,.12);color:#fff}
.moat-dark .check li{color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.14)}
.moat-dark .moat-pillars-k{color:#9AD9C5}
.moat-dark .value-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.moat-dark .value-card h3{color:#fff}
.moat-dark .value-card p{color:rgba(255,255,255,.72)}
.moat-dark .bigstat{border-color:rgba(255,255,255,.14)}
.moat-dark .bs-num .lbl{color:#fff}
.moat-dark .bs-cap{color:rgba(255,255,255,.66)}
.moat-dark .pcard-link{color:#9AD9C5}

/* ---- about: purpose block · keyword highlight · global-reach band · closing (2026-09-08 blend) ---- */
.hl{background:linear-gradient(transparent 58%,var(--green-soft) 58%);padding:0 .06em;border-radius:2px}
.reach-band .hl{background:none;color:#9AD9C5;font-weight:600;padding:0}
.about-purpose .pw-feature{align-items:center}
.purpose-quote{border-left:3px solid var(--green);padding-left:clamp(20px,3vw,30px)}
.purpose-quote blockquote{margin:0 0 18px;font-family:var(--disp);font-weight:800;font-size:clamp(20px,2.4vw,27px);line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.purpose-quote>p{color:var(--ink-2);font-size:15.5px;line-height:1.72}
.purpose-by{margin-top:16px;font-size:14px;color:var(--ink-3);letter-spacing:.01em}
.purpose-by b{color:var(--ink)}
.reach-band .alt-txt .lead{color:rgba(255,255,255,.86)}
.reach-band .alt-img img{border-radius:var(--r);box-shadow:var(--shadow-lg);display:block;width:100%}

/* About: ALPRO world map on blue reach band */
.reach-band .map-card{background:#fff;border-radius:18px;padding:14px 14px 10px;box-shadow:var(--shadow-lg)}
.reach-band .map-card img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:none}
.reach-band .map-caption{margin:10px 2px 2px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:#52627a;text-align:center}

/* About: Alfred Hogeback quote */
.alfred-quote{background:#fff;padding:clamp(36px,5vw,64px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.alfred-quote-row{display:grid;grid-template-columns:minmax(200px,.9fr) minmax(0,1.2fr);gap:clamp(22px,4vw,48px);align-items:center}
.alfred-photo{margin:0}
.alfred-photo img{display:block;width:100%;height:auto;border-radius:18px;object-fit:cover;aspect-ratio:4/3;background:#e8eef3}
.alfred-words{margin:0;position:relative;padding:8px 0 0}
.alfred-marks{position:absolute;left:-6px;top:-18px;font-family:var(--disp);font-size:clamp(64px,8vw,96px);line-height:1;color:#08A0E5;opacity:.35;font-weight:900}
.alfred-q{margin:0;font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,42px);line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.alfred-words footer{margin-top:18px;font-size:15px;color:#52627a}
.alfred-words cite{font-style:normal;font-weight:700;color:var(--ink)}
@media (max-width:700px){
  .alfred-quote-row{grid-template-columns:1fr}
  .alfred-photo img{max-height:320px;width:100%;object-position:center top}
  .alfred-marks{left:0;top:-10px}
}

.close-cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.close-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:640px){.close-actions{width:100%}.close-actions .btn{flex:1}}

/* ---- about: tech cards — scene+logos lead card, composed image cards (2026-09-08) ---- */
.tech-lead{padding:0;overflow:hidden;display:flex;flex-direction:column}
.tech-scene{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.tech-body{padding:22px 22px 22px;display:flex;flex-direction:column;flex:1}
.tech-logos{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.tech-logos img{height:24px;width:auto;max-width:94px;object-fit:contain}
/* ---- PDP: official recommendations / endorsements (2026-09-09) ---- */
.pdp-endorse-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px;margin-top:26px}
.pdp-endorse-logos img{height:40px;width:auto;max-width:170px;object-fit:contain}
.endorse-name{font:600 20px/1 var(--font-head,inherit);color:var(--ink);letter-spacing:.02em}
/* ---- PDP: program-section image row (2026-09-09) ---- */
.prog-imgs{display:flex;gap:22px;flex-wrap:wrap;margin:28px 0 4px}
.prog-imgs figure{flex:1 1 260px;margin:0}
.prog-imgs img{width:100%;height:auto;display:block;border-radius:14px}
.prog-imgs figcaption{font-size:13px;color:var(--mut);margin-top:8px}
.pdp-video{max-width:920px;margin:8px 0 0}
.pdp-video video{width:100%;height:auto;display:block;border-radius:14px;background:#0b1a22}
.tech-composed{padding:0;overflow:hidden}
.tech-composed img{width:100%;height:auto;display:block}
/* masonry: why-alpro cards flow up to fill gaps instead of a rigid row grid (2026-09-08) */
.tech-grid{column-count:3;column-gap:22px}
.tech-grid>.value-card{break-inside:avoid;margin:0 0 22px;width:100%}
@media(max-width:900px){.tech-grid{column-count:2}}
@media(max-width:620px){.tech-grid{column-count:1}}
.oem-strip{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px}
.oem-strip span{color:var(--ink-2);font-size:14px;line-height:1.55;max-width:48ch}

/* ---- about: try Biodegree green + Alpro red in the broken-Typo headers (2026-09-08) ---- */
:root{--alpro-red:#334155} /* Neutral charcoal — no red UI (ALPRO redesign) */
/* About emphasis colour system (2026-09-08): key words = Alpro red · Biodegree = green · zones = zone colours */
.about-red .sec-typo span[style*="var(--ink)"]{color:var(--alpro-red)!important}
.about-red .hl{background:none;color:var(--alpro-red);font-weight:600;padding:0}
.about-red p b,.about-red li b,.about-red blockquote b{color:var(--alpro-red)}
.about-red .bd{color:var(--green)!important}
.about-red .reach-band .hl{color:#B8E0F5}
.about-red .reach-band .bd{color:#B8E0F5!important}

/* Magda 2026-10-04: restore first-green About hero (dark green photo band) */
.about-hero-dark{background:linear-gradient(160deg,rgba(9,66,52,.80),rgba(5,32,26,.90)),url(/assets/about/about-hero-v2.jpg) center/cover;text-align:center;padding:clamp(56px,8vw,116px) 0}
.about-hero-dark{background-image:linear-gradient(160deg,rgba(9,66,52,.80),rgba(5,32,26,.90)),-webkit-image-set(url(/assets/about/about-hero-v2.webp) type("image/webp"),url(/assets/about/about-hero-v2.jpg) type("image/jpeg"));background-image:linear-gradient(160deg,rgba(9,66,52,.80),rgba(5,32,26,.90)),image-set(url(/assets/about/about-hero-v2.webp) type("image/webp"),url(/assets/about/about-hero-v2.jpg) type("image/jpeg"));background-position:center;background-size:cover}
.about-hero-dark .hero-typo{color:#fff}
.about-hero-dark .hero-sub{color:rgba(255,255,255,.82);margin-left:auto;margin-right:auto}
.about-hero-dark .about-meta{color:rgba(255,255,255,.55);margin-top:24px}
.about-hero-dark .about-hero-claim{font-size:clamp(28px,4.6vw,56px);line-height:1.05;text-transform:none;letter-spacing:-.015em;max-width:18ch;margin-left:auto;margin-right:auto;color:#fff}
.about-hero-dark .btn-light{background:#fff;color:var(--green)}
.about-red .about-hero-dark{--alpro-red:#e10017}
.about-red .about-hero-dark .hl{color:var(--alpro-red)}
.about-why-6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.about-why-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.about-why-6{grid-template-columns:1fr}.about-hero-dark .about-hero-claim{font-size:clamp(26px,8.2vw,36px);max-width:20ch}}

/* ---- about: Philips-straight opening — comprehensive Typo hero, photo band, driven, strategy (2026-09-08) ---- */
.about-hero{text-align:center;padding-top:clamp(28px,4vw,54px);padding-bottom:clamp(14px,2.2vw,26px)}
.hero-typo{font-family:var(--disp);font-weight:900;text-transform:lowercase;line-height:.94;letter-spacing:-.02em;font-size:clamp(40px,7vw,104px);color:var(--green);margin:.06em 0 0}
/* About hero — ALPRO world map, light treatment (no blue overlay) */
.about-hero-map{position:relative;overflow:hidden;background:#fff;padding:clamp(48px,7vw,96px) 0;min-height:clamp(340px,40vw,460px)}
.about-hero-map-bg{position:absolute;top:0;right:0;bottom:0;width:min(62%,920px);z-index:0;pointer-events:none}
.about-hero-map-bg img{width:100%;height:100%;object-fit:cover;object-position:left 42%;display:block}
.about-hero-map-fade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.92) 44%,rgba(255,255,255,.55) 54%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 78%)}
.about-hero-map-copy{position:relative;z-index:2;max-width:34rem;text-align:left;padding-top:8px;padding-bottom:8px}
.about-hero-map .eyebrow{color:var(--green)}
.about-hero-map .hero-typo{color:var(--ink);font-size:clamp(36px,5.6vw,72px);line-height:.96;margin:4px 0 0}
.about-hero-map .hero-accent{color:#08A0E5}
.about-hero-map .hero-sub{color:var(--ink-2);margin:18px 0 0;max-width:38ch;margin-left:0;margin-right:0}
.about-hero-map .hero-sub b{color:var(--ink)}
.about-hero-map .hero-cta{justify-content:flex-start;margin-top:22px;display:flex}
.about-hero-map .about-meta{color:var(--ink-3);margin-top:22px;font-size:12.5px;letter-spacing:.02em}
@media (max-width:700px){
  .about-hero-map{min-height:0;padding:36px 0 28px}
  .about-hero-map-bg{width:100%;opacity:1}
  .about-hero-map-bg img{object-position:70% 40%;opacity:.28}
  .about-hero-map-fade{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.82) 100%)}
  .about-hero-map-copy{max-width:none}
  .about-hero-map .hero-typo{font-size:clamp(32px,10vw,44px)}
}
.hero-typo .tone-red{color:var(--alpro-red)}
.hero-sub{max-width:62ch;margin:24px auto 0;font-size:clamp(15px,1.35vw,18px);line-height:1.62;color:var(--ink-2)}
.about-hero .about-meta{text-align:center}
.about-hero-band{max-width:var(--wrap);margin:8px auto 0;padding:0 24px}
.about-hero-band img{width:100%;height:clamp(230px,30vw,400px);object-fit:cover;object-position:center 62%;border-radius:var(--r);display:block;box-shadow:var(--shadow-lg)}

/* ---- about v3: route hero + audit backbone ---- */

.about-duo{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(28px,4vw,48px)}
.about-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.about-duo-card{display:flex;flex-direction:column}
.about-duo-logo{display:block;height:36px;width:auto;margin-bottom:14px;object-fit:contain;object-position:left center}
.about-duo-logo-bd{height:42px}
.about-duo-list{margin-top:16px}
.about-duo-list li{font-size:14.5px;color:var(--ink-2)}
.alfred-words footer{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.alfred-words cite{font-style:normal;font-weight:750;color:var(--ink);font-size:16px}
.alfred-role{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.alfred-note{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.about-audit-card .eo-k{margin:0 0 6px;color:var(--accent)}
@media (max-width:860px){
  .about-duo-grid{grid-template-columns:1fr}
}
.about-hero-route{background:#fff;padding:clamp(36px,5vw,72px) 0 clamp(28px,4vw,48px);overflow:hidden}
.about-hero-route-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(24px,4vw,48px);align-items:center}
.about-hero-route-copy{max-width:34rem;text-align:left;position:relative;z-index:2}
.about-hero-route .eyebrow{color:var(--accent)}
.about-hero-route .hero-typo{color:var(--ink);font-size:clamp(36px,5.6vw,72px);line-height:.96;margin:4px 0 0}
.about-hero-route .hero-accent{color:#08A0E5}
.about-hero-route .hero-sub{color:var(--ink-2);margin:18px 0 0;max-width:38ch}
.about-hero-route .hero-sub b{color:var(--ink)}
.about-hero-route .hero-cta{justify-content:flex-start;margin-top:22px;display:flex}
.about-hero-route .about-meta{color:var(--ink-3);margin-top:22px;font-size:12.5px;letter-spacing:.02em;line-height:1.55}
.about-hero-route-map{position:relative;min-width:0}
.about-hero-route-map img{display:block;width:100%;height:auto}
.about-hero-route-map .about-hero-route-phone{display:none}
.about-card-ic{display:block;margin-bottom:10px}
.about-audit{background:var(--accent-soft);padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(48px,6vw,80px)}
.about-audit-lead{max-width:68ch;margin:0 0 28px}
.about-audit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:28px}
.about-audit-card{display:flex;flex-direction:column;height:100%}
.about-audit-card .pcard-link{margin-top:auto;padding-top:14px}
.about-audit-stats{margin-top:8px}
.about-audit .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 14px;box-shadow:var(--shadow)}
.about-audit .stat b{display:block;font-size:clamp(22px,2.4vw,28px);color:var(--ink);letter-spacing:-.02em}
.about-audit .stat span{display:block;margin-top:6px;font-size:13px;color:var(--ink-2);line-height:1.4}
.about-why-grid{align-items:stretch}
.about-why-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent)}
.about-why-ic svg{width:24px;height:24px;color:var(--accent)}
.about-why-grid .value-card{display:flex;flex-direction:column}
.about-teaser-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.about-teaser{text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease}
.about-teaser:hover{border-color:var(--accent);box-shadow:var(--shadow-lg)}
.about-teaser .pcard-link{margin-top:auto;padding-top:14px;color:var(--accent)}
.about-resp-img img{width:100%;height:100%;min-height:280px;object-fit:cover;border-radius:var(--r);display:block;box-shadow:var(--shadow-lg)}
@media (max-width:1024px){
  .about-hero-route-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .about-hero-route .hero-typo{font-size:clamp(32px,4.8vw,52px)}
}
@media (max-width:860px){
  .about-audit-grid{grid-template-columns:1fr}
  .about-teaser-row{grid-template-columns:1fr}
  .about-audit-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .about-hero-route{padding:28px 0 20px}
  .about-hero-route-inner{grid-template-columns:1fr;gap:18px}
  .about-hero-route-copy{max-width:none;order:1}
  .about-hero-route-map{order:2}
  .about-hero-route-map .about-hero-route-desk{display:none}
  .about-hero-route-map .about-hero-route-phone{display:block;max-width:420px;margin:0 auto}
  .about-hero-route .hero-typo{font-size:clamp(32px,10vw,44px)}
}
.about-driven{text-align:center;padding-top:clamp(50px,6.5vw,88px);padding-bottom:6px}
.about-driven .sec-typo{margin-bottom:14px}
.driven-quote{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.2vw,26px);line-height:1.34;letter-spacing:-.01em;color:var(--ink);max-width:24ch;margin:0 auto 18px}
.about-driven .lead{max-width:68ch;margin-left:auto;margin-right:auto}
.about-driven .purpose-by{margin-top:14px}
.about-strategy{padding-top:clamp(38px,5vw,64px)}
.moat-dark .eo-k{color:#9AD9C5}

/* owner's maths */
.roi-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;background:var(--green-soft);border-radius:20px;padding:clamp(36px,4vw,48px)}
.roi-band .lead{max-width:46ch}
.roi-points{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.roi-points li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow)}
.roi-points b{display:block;font-size:16px;font-weight:750;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.roi-points span{display:block;font-size:14.5px;color:var(--ink-2);line-height:1.55}
@media (max-width:860px){.roi-band{grid-template-columns:1fr;gap:26px;padding:30px 22px}}

/* training */
.train-chips{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 28px}
.train-chip{display:inline-flex;align-items:center;white-space:nowrap;font:600 13.5px var(--font);color:var(--ink-2);background:var(--white);border:1px solid var(--line);border-radius:999px;padding:8px 16px}
.train-chip.on{background:var(--green);border-color:var(--green);color:#fff}
.sop-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.sop-tag{display:inline-block;font:800 11px var(--font);letter-spacing:.04em;color:var(--green);background:var(--green-soft);border-radius:999px;padding:4px 11px;margin-bottom:14px}
.sop-card h4{font-size:17px;font-weight:750;color:var(--ink);margin-bottom:16px}
.sop-card ol{list-style:none;counter-reset:sop;display:grid;gap:13px;margin:0;padding:0}
.sop-card ol li{counter-increment:sop;position:relative;padding-left:40px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.sop-card ol li::before{content:counter(sop);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);font:800 13px/27px var(--font);text-align:center}
.train-note{max-width:70ch;margin:22px 0 26px;font-style:italic;font-size:13px;color:var(--ink-3)}
@media (max-width:520px){.sop-card{padding:22px 20px}.sop-card ol li{padding-left:36px}}

/* ask */
.ask-center{text-align:center}
.ask-center .lead{margin-left:auto;margin-right:auto}
.ask-suggs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.ask-sugg{display:inline-flex;align-items:center;background:var(--band);border:1px solid var(--line);border-radius:999px;padding:11px 18px;font:600 14px var(--font);color:var(--ink-2);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.ask-sugg:hover{border-color:var(--green);background:var(--green-soft);color:var(--green-dark)}
.ask-suggs + .btn{margin-top:22px}
.ask-priv{margin-top:18px;font-size:13px;color:var(--ink-3)}
/* Home story — inline "search / ask" field that opens the assistant */
.home-ask{display:flex;align-items:center;gap:10px;width:100%;max-width:430px;margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:13px 18px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s}
.home-ask:hover{border-color:var(--green);box-shadow:var(--shadow)}
.home-ask svg{width:18px;height:18px;color:var(--green);flex:none}
.home-ask span{color:var(--ink-3);font:500 14.5px var(--font)}
@media (max-width:520px){.ask-suggs{gap:9px}.ask-sugg{padding:10px 15px;font-size:13px}}
/* Home hero — ALPRO broken-letter Typo (syllable-hyphenated word) + supporting line */
.home-type .hc-txt h1{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;text-transform:lowercase;font-size:clamp(46px,7.4vw,104px);line-height:.9;margin-bottom:12px}
.home-type .hc-sub{max-width:460px;font-size:clamp(16px,1.5vw,19px);color:#fff;font-weight:500;line-height:1.4;margin-bottom:22px;text-shadow:0 2px 14px rgba(15,23,42,.55)}
.home-type section.wrap>.sec-typo,.home-type .band .sec-typo{margin-bottom:14px}
.home-type .sec-typo.ph-h{margin-bottom:18px}
.home-type .ph-sub{margin-top:0}
/* About certification meta-strip */
.about-meta{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:14px;margin:0}
/* About heritage brand band — Black Forest / St. Georgen photo under a deep-green wash */
.heritage-band{position:relative;overflow:hidden;background:#0a3a2a}
.heritage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.heritage-shade{position:absolute;inset:0;background:linear-gradient(120deg,rgba(6,38,27,.92) 0%,rgba(9,54,39,.78) 52%,rgba(18,121,90,.55) 100%)}
.heritage-in{position:relative;padding-top:60px;padding-bottom:60px}
/* Home hero — single stacked Typo statement + trust pills (replaces the 4-slide carousel) */
.pdp-band.home-hero{height:auto;min-height:clamp(480px,46vw,660px)}
.pdp-band.home-hero .pdp-band-in{padding-top:40px;padding-bottom:48px}
.home-hero-copy{max-width:660px}
/* mobile: the horizontal scrim fades before the copy ends — switch to a vertical white scrim so body copy stays legible over the product image */
@media(max-width:820px){
  .pdp-band.home-hero .pdp-band-shade{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 60%,rgba(255,255,255,.66) 100%)}
}
.home-hero-copy .pdp-typo{margin:8px 0 0}
.hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero-pill{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font);letter-spacing:.01em;
  background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--ink-2);border-radius:999px;padding:6px 13px}
.hero-pill svg{width:14px;height:14px;color:var(--green);flex-shrink:0}
.home-hero-copy .pdp-lead{margin-top:16px}
.home-hero-copy .hero-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
/* Home section Typo header spacing */
.home-sec-head{margin-bottom:8px}
.home-sec-head .sec-typo span{display:block}
/* Prominent header search — a visible field, not just an icon */
.hdr-search{display:inline-flex;align-items:center;gap:7px;background:var(--band);border:1px solid var(--line);border-radius:999px;padding:8px 12px 8px 11px;cursor:pointer;transition:border-color .15s,background .15s;max-width:168px}
.hdr-search:hover{border-color:var(--green);background:#fff}
.hdr-search-ic{display:inline-flex;flex:none}
.hdr-search-ic svg{width:16px;height:16px;color:var(--green)}
.hdr-search-t{font:500 12.5px var(--font);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media(max-width:980px){.hdr-search-t{display:none}.hdr-search{padding:10px;border-radius:50%}}
/* Customer-portal access link in the header tools (labelled, not a bare icon) */
.portal-link{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;font:600 13.5px var(--font);color:var(--ink);border:1px solid var(--line);white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
.portal-link:hover{border-color:var(--green);color:var(--green);background:var(--green-soft);text-decoration:none}
.portal-link .portal-ic{display:inline-flex}
.portal-link svg{width:17px;height:17px}
@media(max-width:980px){.portal-link .portal-lbl{display:none}.portal-link{padding:10px;border-radius:50%}}

/* B2B conversion band — "talk to a specialist" */
.sales-band .wrap.sales-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.sales-txt p{color:rgba(255,255,255,.9);font-size:15.5px;line-height:1.6;max-width:48ch;margin-top:10px}
.sales-cta{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.sales-trust{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sales-trust li{display:flex;align-items:center;gap:8px;font:600 13.5px var(--font);color:rgba(255,255,255,.88)}
.sales-trust li svg{width:16px;height:16px;color:#9AD9C5;flex:none}
@media(max-width:860px){.sales-band .wrap.sales-in{grid-template-columns:1fr;gap:24px}}

/* stat-grid inverted on the green feature band */
.band-green .sec-typo{color:#fff}
.band-green .stat b{color:#fff}
.band-green .stat span{color:rgba(255,255,255,.82)}
.pdp-page .pcard-body{padding:14px 16px 16px;gap:4px}
.pdp-page .ct-img{height:140px}
.pdp-page .ct-txt{padding:14px 16px 16px;gap:6px}
.pdp-page .ct-txt h3{font-size:16px}
.pdp-page .ct-txt p{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* sustainability banner — Philips forest-band pattern (6 Sep) */
.sus-band{position:relative;overflow:hidden;color:#fff}
.sus-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sus-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,32,24,.72) 0%,rgba(8,32,24,.42) 55%,rgba(8,32,24,.15) 100%)}
.sus-in{position:relative;padding-top:clamp(64px,8vw,110px);padding-bottom:clamp(64px,8vw,110px)}
.sus-in h2{color:#fff;font-size:clamp(28px,3.6vw,46px);max-width:20ch}
.sus-in p{color:rgba(255,255,255,.92);max-width:52ch;margin-top:16px;font-size:16px;line-height:1.65}
.sus-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;margin-top:24px;
  border-bottom:2px solid rgba(255,255,255,.4);padding-bottom:3px}
.sus-link:hover{text-decoration:none;border-bottom-color:#fff}

/* PDP customer-service cards — Philips pattern: icon top-left, circular arrow bottom-right */
.cs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cs-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px 24px 72px;text-decoration:none;color:inherit;transition:box-shadow .2s}
.cs-card:hover{box-shadow:var(--shadow);text-decoration:none}
.cs-ico{width:84px;height:84px;border-radius:22px;background:var(--green-soft);display:flex;align-items:center;
  justify-content:center;color:var(--green);margin-bottom:20px}
.cs-ico svg{width:42px;height:42px}
.cs-card h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.cs-card p{font-size:14px;color:var(--ink-2);margin-top:8px;line-height:1.55}

/* --- mobile display-heading scaling (keep the big "Typo" headings proportional on phones) --- */
@media (max-width:600px){
  body .home-type .hc-txt h1{font-size:clamp(30px,8.8vw,40px);line-height:1.03}
  body .ssot-word{font-size:clamp(32px,10vw,44px);line-height:.96}
  body .sec-typo{font-size:clamp(24px,6.6vw,32px)}
  body .ph-h,body .sec-typo.ph-h{font-size:clamp(21px,5.4vw,26px)}
  body .mission-line{font-size:clamp(24px,6.4vw,30px)}
  body .bleed-txt h2{font-size:clamp(24px,6.2vw,30px)}
  body .pdp-typo{font-size:clamp(32px,10.5vw,46px)}
  body .pdp-name{font-size:clamp(26px,7vw,34px)}
}

/* --- mobile hero: keep the desktop OVERLAY look — Typo sits on the banner, image behind --- */
@media (max-width:760px){
  .pdp-band{height:clamp(400px,116vw,520px) !important;position:relative}
  .pdp-band-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .pdp-band-shade{display:block;background:linear-gradient(180deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.55) 26%,rgba(255,255,255,.10) 52%,rgba(255,255,255,0) 72%)}
  .pdp-band-in{position:relative;z-index:2;height:100%;max-width:none;padding:0 18px;justify-content:flex-start;padding-top:26px}
  .pdp-band-in .pdp-hero-cta{margin-top:18px}
  /* home-hero can carry a longer subtitle across carousel slides — let it grow, never clip */
  .pdp-band.home-hero{height:auto !important;min-height:clamp(420px,118vw,560px)}
  .pdp-band.home-hero .pdp-band-in{height:auto;padding-top:30px;padding-bottom:34px}
}
.cs-go{position:absolute;bottom:20px;right:22px;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:background .2s,color .2s,border-color .2s}
.cs-card:hover .cs-go{background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:900px){.cs-cards{grid-template-columns:1fr}}
.pdp-intro-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;
  padding-top:44px}
.pdp-name{font-family:var(--disp);font-size:clamp(32px,3.6vw,46px);line-height:1.0;font-weight:900;letter-spacing:-.025em}
.pdp-claim{font-family:var(--disp);font-size:clamp(22px,2.4vw,30px);font-weight:900;color:var(--ink);letter-spacing:-.02em;
  line-height:1.1;margin-top:10px}
.pdp-lead{margin-top:14px;color:var(--ink-2);font-size:16px;line-height:1.6;max-width:56ch}
/* ALPRO Typo campaign — heavy display type carried beyond the hero into the PDP body
   (Karen, 6 Sep). Brand casing preserved (no lowercase) so PlastiSept eco / BIB forte / i3 ONE stay intact. */
.pdp-page h2{font-family:var(--disp);font-weight:900;letter-spacing:-.02em}
.pdp-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pdp-awmf{display:flex;align-items:center;gap:12px;margin-top:16px}
.pdp-awmf img{width:64px;height:64px;flex:none;filter:drop-shadow(0 2px 6px rgba(15,40,60,.22))}
.pdp-awmf span{font-size:12px;line-height:1.45;color:var(--ink-2,#4a5a66);max-width:34ch}
.pdp-pack{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow)}
.pdp-pack .pdp-main{border:0;border-radius:0;height:auto;min-height:0;padding:0}
.pdp-pack .pdp-main img{max-height:300px;width:auto;max-width:100%}
/* i3 point-of-use filters — circular product presentation (ref: Biodegree i3 ONE page) */
.pdp-pack.round{background:transparent;border:0;box-shadow:none;padding:0}
.pdp-pack.round .pdp-main{width:min(100%,440px);aspect-ratio:1;height:auto;margin:0 auto;border-radius:50%;overflow:hidden;padding:0;display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 36%,#fff 0%,#fff 58%,#e9f1f2 100%);box-shadow:0 22px 55px -24px rgba(14,142,128,.4),inset 0 0 0 1px var(--line)}
.pdp-pack.round .pdp-main img{width:78%;height:78%;max-height:none;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(0,0,0,.12))}
/* Product-information panel — canonical 8-section PI block (highlight + link to docs) */
.pinfo-grid{margin:0 0 24px;border-top:1px solid var(--line)}
.pinfo-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:12px 30px;padding:17px 2px;border-bottom:1px solid var(--line);align-items:baseline}
.pinfo-row dt{margin:0;font-weight:800;color:var(--ink);font-size:14.5px;letter-spacing:.005em}
.pinfo-row dd{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:72ch}
.pinfo-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:22px}
.pinfo-lbl{font-weight:800;color:var(--ink);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px}
ul.benefit-list.pinfo-feats{margin:0 0 30px;max-width:80ch}
.pinfo-note{margin-top:22px;font-size:13.5px;line-height:1.55;color:var(--ink-2);max-width:76ch}
/* §4 reference — standing "read before use" + AI-assistant caveat (every product page) */
.use-notice{margin-top:26px;padding:20px 22px;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:0 12px 12px 0;background:var(--bg-soft,#f4f8f6);max-width:82ch}
.use-notice p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.use-notice p b{color:var(--ink)}
.use-notice .ai-note{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-3)}
.use-notice .ai-note svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px;color:var(--green)}
@media(max-width:760px){.pinfo-row{grid-template-columns:1fr;gap:4px;padding:13px 2px}.pinfo-row dt{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--green)}}
.pdp-strip{display:flex;gap:10px;margin-top:16px;justify-content:center}
.alt-solo{max-width:840px}
@media (max-width:1000px){
  .pdp-intro-in{grid-template-columns:1fr;gap:30px;padding-top:30px}
  .pdp-pack{max-width:420px}
  .pdp-pack .pdp-main img{max-height:240px}
  .pdp-slogan{min-width:0}
}

/* type-led PDP band — mirrors brochure typography pages (p3/p10/p12/p13/p14):
   giant lowercase slogan in the category colour on white, no photo */
.pdp-type .wrap{padding-top:26px;padding-bottom:0}
.pdp-big{font-weight:900;font-family:var(--disp);text-transform:lowercase;letter-spacing:-.03em;
  line-height:.82;font-size:clamp(56px,9.5vw,130px)}
.pdp-big span{display:block}
.pdp-type + .pdp-intro .pdp-intro-in{padding-top:36px}
@media (max-width:1000px){
  .pdp-type + .pdp-intro .pdp-intro-in{padding-top:26px}
}

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

/* AlproJet weekly-schedule circles (2026-09-09) — recreated from the ALPRO application sheet */
.sched-legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-bottom:24px}
.sched-leg{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.sched-chip{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em;flex:0 0 auto;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.sched-chip.w{background:#EC8A2D}
.sched-chip.d{background:#2E9BD6}
.sched-chip.dd{background:#16375F}
.sched-slash{color:#9aa3ad;font-weight:700}
.sched-plan{margin-top:22px}
.sched-h{font-size:15px;font-weight:700;margin:0 0 14px}
.sched-row{display:flex;flex-wrap:wrap;gap:18px}
.sched-col{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:60px}
.sched-day{font-size:12px;font-weight:600;opacity:.72}
.sched-chips{display:flex;align-items:center;gap:5px}
/* AlproJet application-chart figure */
.pw-diagram{margin:0;border:1px solid rgba(0,0,0,.10);border-radius:14px;overflow:hidden;background:#fff;max-width:820px}
/* narrow = small source graphic (e.g. Alpron before/after, 231px wide) — show near natural size,
   matching its proportion in the ALPRO catalogue (small inset beside the text, not a banner) */
.pw-diagram.narrow{max-width:260px}
/* medium = mid-size inset (e.g. Biotesters CFU scale) — smaller than the 820px card, labels still legible */
.pw-diagram.medium{max-width:460px}
.pw-diagram img{display:block;width:100%;height:auto}
.pw-diagram figcaption{padding:13px 18px;font-size:13px;line-height:1.5;opacity:.72;border-top:1px solid rgba(0,0,0,.07)}
/* AlproJet-W different-application diagrams — uniform 2×2 frame grid */
.appmode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:22px;grid-auto-rows:1fr}
.appmode{margin:0;border:1px solid rgba(0,0,0,.12);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column;height:100%}
.appmode-cap{padding:14px 16px}
.appmode-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.appmode-name{font-weight:800;font-size:15px}
.appmode-dose{font-size:11.5px;font-weight:700;color:#EC8A2D;white-space:nowrap}
.appmode-purpose{margin:0;font-size:13px;line-height:1.5;opacity:.8}
@media(max-width:720px){.appmode-grid{grid-template-columns:1fr}}
/* Crop the tall leaflet diagrams down to just the yellow circle; uniform bottom border on every frame */
.circle-crop{width:100%;aspect-ratio:100/82;overflow:hidden;background:#fff}
.pw-diagram .circle-crop{aspect-ratio:100/88;position:relative}
/* page-1 chart bakes its step-text beside the circle; the circle sits on white,
   so a white patch over the top-left corner hides the text without touching the circle */
.pw-diagram .circle-crop::after{content:"";position:absolute;top:0;left:0;width:39%;height:15%;background:#fff;pointer-events:none}
.appmode .circle-crop{border-bottom:1px solid rgba(0,0,0,.08)}
.pw-diagram .circle-crop img,.appmode .circle-crop img{width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
/* clean = a pre-cropped square circle (Adobe Express): show it whole, no leaflet-crop */
.appmode .circle-crop.clean img{object-fit:contain;object-position:center;padding:8px;box-sizing:border-box}
/* clean full-method chart (Adobe Express, no leaflet text): show whole, drop the crop + white patch */
.pw-diagram .circle-crop.clean{aspect-ratio:auto;position:static}
.pw-diagram .circle-crop.clean::after{content:none}
.pw-diagram .circle-crop.clean img{position:static;width:100%;height:auto;object-fit:contain;padding:10px;box-sizing:border-box}

/* Assistant contact actions: labelled icons and touch-size targets. */
.assistant-contact{padding:10px 14px 0;color:#175c49;flex-shrink:0}
.assistant-contact>strong{display:block;font-size:12px;margin-bottom:7px}
.assistant-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px;max-width:280px}
.assistant-contact-grid a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;min-width:0;padding:7px 3px;border:1px solid #cbded7;border-radius:10px;background:#fff;color:#067EB4;text-decoration:none;font-size:11px;font-weight:600;line-height:1.2;text-align:center;cursor:pointer}
.assistant-contact-grid svg{width:21px;height:21px;flex:none}
.assistant-contact-grid a:hover{background:#eaf5ef;border-color:#08A0E5}
.assistant-contact-grid a:focus-visible{outline:2px solid #08A0E5;outline-offset:2px}
.assistant-contact>p{margin:7px 0 0;font-size:10.5px;line-height:1.4;color:#52625b}.assistant-contact>p:empty{display:none}

/* BRS Magda: claim + a–c under Why practices */
.benefit-list.big li.benefit-claim { align-items: flex-start; }
.benefit-claim-t { display: block; font-weight: 700; margin-bottom: 8px; }
.benefit-claim-t.mixed { font-weight: 400; }
.benefit-claim-t.mixed strong { font-weight: 700; }
.benefit-sub { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.benefit-sub li { padding-left: 0; font-weight: 400; opacity: 0.92; }
/* Compliance colour guard: headings water; links light blue; Ask water (karen). */
.page-compliance .pdp-typo,
.page-compliance .pdp-claim,
.page-compliance .comp-typo,
.page-compliance .sec-typo,
.page-compliance .sec-typo span,
.page-compliance h1,
.page-compliance h2,
.page-compliance h3,
.page-compliance .train-typo,
.page-compliance .eyebrow:not(.light),
.page-compliance .eo-k,
.page-compliance .moat-pillars-k,
.page-compliance .check li svg,
.page-compliance .doc-grid .value-card svg{color:var(--water)!important}
.page-compliance .band-green,
.page-compliance .sales-band{background:var(--water)!important}
.page-compliance .sales-band h2,
.page-compliance .sales-band .sec-typo{color:#fff!important}
.page-compliance .btn-light{color:var(--water)!important}
.page-compliance a:not(.btn):not(.nav-link):not(.nav-tab),
.page-compliance .pcard-link,
.page-compliance .doc-type,
.page-compliance .doc-dl,
.page-compliance .doc-req,
.page-compliance .sup-open,
.page-compliance .chat-greet-cta,
.page-compliance .ans .who,
.page-compliance .chat-suggs button,
.page-compliance .fcol a,
.page-compliance .ftr-bar a{color:var(--comp-link,#08A0E5)!important}
.page-compliance .fcol a:hover,
.page-compliance .ftr-bar a:hover{color:#fff!important}
.page-compliance .btn:not(.btn-light):not(.btn-ghost){color:#fff!important}
.page-compliance .btn-light{color:var(--water)!important}
.page-compliance .nav-link.on{color:var(--water)!important}
.page-compliance .chat-fab,
.page-compliance .chat-head,
.page-compliance .msg,
.page-compliance .chat-form button:not(.mic){background:var(--water)!important}
.page-compliance .chat-fab:hover{background:var(--water-dark)!important}

/* COMPLIANCE HEADINGS FORCE WATER — karen 2026-09-23 */
.page-compliance .sec-typo,
.page-compliance .sec-typo span,
.page-compliance .pdp-typo,
.page-compliance .pdp-typo span,
.page-compliance .pdp-claim,
.page-compliance .comp-typo,
.page-compliance .comp-typo span,
.page-compliance .train-typo,
.page-compliance h1,
.page-compliance h2:not(.sales-band h2),
.page-compliance h3,
.page-compliance .eyebrow:not(.light),
.page-compliance .eo-k,
.page-compliance .moat-pillars-k{
  color:var(--water)!important;
}
.page-compliance .band-green .sec-typo,
.page-compliance .sales-band .sec-typo,
.page-compliance .sales-band h2{
  color:#fff!important;
}

/* COMPLIANCE INTRO RHYTHM — karen 2026-09-23 */
.page-compliance .comp-intro{
  padding-top:clamp(48px,5.5vw,72px);
  padding-bottom:clamp(36px,4vw,52px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
}
.page-compliance .comp-intro .pdp-claim{
  margin:0;
  max-width:min(46ch,100%);
  font-size:clamp(26px,3vw,36px);
  line-height:1.2;
  color:var(--water);
}
.page-compliance .comp-intro .pdp-lead{
  margin:18px 0 0;
  max-width:52ch;
  font-size:16px;
  line-height:1.55;
  color:var(--ink-2);
}
.page-compliance .comp-intro .badge{
  margin:22px 0 0 !important;
}
.page-compliance .comp-intro .support-line{
  margin:28px 0 0;
  max-width:58ch;
  padding:18px 20px;
  font-size:15.5px;
  line-height:1.55;
}
.page-compliance .comp-intro .support-line-k{
  display:block;
  font:700 11px/1.2 var(--font);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--water);
  margin:0 0 8px;
}
.page-compliance .comp-intro .support-line b{
  display:inline;
}
.page-compliance .comp-guides{
  padding-top:clamp(28px,3.5vw,40px);
  padding-bottom:clamp(48px,5vw,64px);
}
.page-compliance .comp-guides .comp-hero{
  gap:clamp(28px,4vw,48px);
  align-items:start;
}
.page-compliance .comp-guides .comp-hero-aside{
  /* align checklist with body copy under the display heading */
  padding-top:clamp(52px,6.5vw,72px);
}
.page-compliance .comp-guides .comp-hero-txt .sec-typo{
  margin-top:6px;
  margin-bottom:16px;
}
.page-compliance .comp-guides .comp-hero-txt>p{
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
}

/* Magda Alpron email: REF + ARTG line next to the product picture; multi-paragraph lead; studies link */
a.artg-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
a.artg-link:hover{color:var(--water)}
.pdp-refline{margin:6px 0 10px;font:700 13px/1.4 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pdp-lead + .pdp-lead{margin-top:12px}
.benefit-link{font-weight:650;color:var(--water,#08A0E5);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Magda Alpron email: bolded key phrases inside the lead */
.pdp-lead strong { font-weight: 700; color: inherit; }


/* Magda Bilpron email — calm info note under Why-practices (not hazard amber) */
.benefits-callout-h{display:block;font-size:15px;font-weight:700;margin:0 0 6px;color:var(--ink)}
.benefits-callout p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pdp-info-note{margin-top:22px;padding:14px 18px;background:#EAF6FB;border-left:3px solid #0F97BC;
  font-size:13.5px;line-height:1.55;color:var(--ink-2,#4a5a66);max-width:76ch;border-radius:2px}


/* ============================================================ ALPRO redesign */
.ftr-trust{margin-top:10px;font-size:13.5px;color:#C5D0DC;max-width:36ch;line-height:1.45}
.mm-tax-icon{width:20px;height:20px;max-width:20px;max-height:20px;border-radius:4px;margin-right:8px;vertical-align:middle;display:inline-block;object-fit:contain;flex:none}
.mm-cat li a{display:flex;align-items:center;gap:0}

/* Product card category icon */
.pcard-img{position:relative}
/* Category badge — must NOT inherit .pcard-img > img media rules */
.pcard-tax{
  position:absolute;top:8px;right:8px;z-index:3;
  width:30px!important;height:30px!important;max-width:30px!important;max-height:30px!important;
  border-radius:7px;object-fit:contain;object-position:center;
  box-shadow:0 2px 8px rgba(15,23,42,.16);background:#fff;pointer-events:none;
}

/* Homepage water hero */
.water-hero{position:relative;min-height:620px;display:flex;align-items:center;overflow:hidden;background:#0B3A52}
.water-hero picture,.water-hero-img{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.water-hero-img{object-fit:cover;object-position:center 40%}
.water-hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(5,24,36,.92) 0%,rgba(5,24,36,.82) 32%,rgba(5,24,36,.55) 55%,rgba(5,24,36,.22) 75%,rgba(5,24,36,.05) 100%)}
/* Same horizontal container as .hdr-in / .wrap — left edge aligns with Biodegree logo */
.water-hero-in{position:relative;z-index:2;box-sizing:border-box;width:100%;max-width:var(--wrap);margin:0 auto;padding:56px 24px;color:#fff}
.water-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;
  font:700 13px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#E8F7FD;
  text-shadow:0 1px 10px rgba(5,24,36,.55)}
.water-hero-eyebrow-chip{margin:0;padding:4px 8px;border-radius:7px;flex-shrink:0;line-height:0}
.water-hero-eyebrow .alpro-logo-link img.alpro-logo-eyebrow{height:30px;width:auto;max-height:30px}
.water-hero-eyebrow-sep{opacity:.9;letter-spacing:0;font-weight:700;color:#E8F7FD}
.water-hero-eyebrow-label{color:#E8F7FD;letter-spacing:.16em}
.water-hero h1,.water-hero-title{font-size:clamp(56px,8.2vw,104px);font-weight:800;letter-spacing:-.035em;line-height:.95;margin:0 0 16px;
  text-shadow:0 2px 22px rgba(5,24,36,.55)}
/* Two-tone like the logo: Bio = dark wordmark ink, degree = light icon green (both ≥3:1 on #051824) */
.water-hero-title .bd-name-bio{color:var(--bd-green-dark,#5AB952)} /* 7.3:1 large */
.water-hero-title .bd-name-degree{color:var(--bd-green-light,#8AC541)} /* 8.7:1 large */
.water-hero-trust{font:650 20px/1.35 var(--font);color:#E8F7FD;margin:0 0 16px;max-width:none;
  display:flex;align-items:center;flex-wrap:nowrap;gap:8px;white-space:nowrap;
  text-shadow:0 1px 12px rgba(5,24,36,.55)}
.water-hero-lead{font-size:19px;color:#fff;max-width:560px;margin:0 0 28px;line-height:1.55;
  text-shadow:0 1px 14px rgba(5,24,36,.65)}
.water-hero .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.water-hero .hero-cta .btn{font-size:16px;padding:14px 22px}
@media (max-width:640px){
  .water-hero{min-height:520px;align-items:flex-end}
  .water-hero-shade{
    background:linear-gradient(180deg,rgba(5,24,36,.35) 0%,rgba(5,24,36,.78) 32%,rgba(5,24,36,.92) 62%,rgba(5,24,36,.95) 100%);
  }
  .water-hero-in{padding:40px 18px 44px}
  .water-hero-eyebrow{gap:8px;font-size:12px}
  .water-hero-eyebrow .alpro-logo-link img.alpro-logo-eyebrow{height:28px;max-height:28px}
  .water-hero-eyebrow-chip{padding:3px 7px;border-radius:6px}
  .water-hero h1{font-size:clamp(56px,14vw,64px);line-height:.98;margin-bottom:12px}
  .water-hero-trust{font-size:15px;flex-wrap:wrap;white-space:normal;gap:6px;margin-bottom:12px}
  .water-hero-lead{font-size:16px;max-width:36ch;margin-bottom:22px}
  .water-hero .hero-cta{flex-direction:column;align-items:stretch;width:100%;max-width:100%}
  .water-hero .hero-cta .btn{font-size:15px;padding:12px 18px;width:100%;box-sizing:border-box;justify-content:center;white-space:normal;text-align:center}
}


/* Home hero — Magda layered wording (2026-10-05, Karen approved): eyebrow · H1 · subline · body · badges · CTA · footer line.
   ALPRO = .brand-alpro #e10017 (on a white chip for contrast); badges = site blue #08A0E5; Biodegree = .brand-bd #5AB952. */
.water-hero:has(.wh-layers){min-height:660px}
.wh-layers{padding-top:48px;padding-bottom:48px}
.wh-layers>*{max-width:700px}
.wh-eyebrow{margin:0 0 16px;line-height:0}
.wh-eyebrow-chip{display:inline-block;background:#fff;color:#0F2A44;border-radius:6px;padding:6px 10px;
  font:700 13px/1 var(--font);letter-spacing:.02em;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.water-hero h1.wh-title{font-size:clamp(34px,4.4vw,56px);line-height:1.06;letter-spacing:-.025em;color:#fff;margin:0 0 14px;max-width:760px}
.wh-sub{font:650 clamp(18px,1.7vw,22px)/1.35 var(--font);color:#E8F7FD;margin:0 0 16px;text-shadow:0 1px 12px rgba(5,24,36,.55)}
.wh-body p{font-size:16.5px;line-height:1.55;color:#fff;margin:0 0 8px;max-width:620px;text-shadow:0 1px 14px rgba(5,24,36,.65)}
.wh-body{margin:0 0 18px}
.wh-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0}
.wh-badges li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  background:rgba(8,160,229,.18);border:1px solid rgba(8,160,229,.85);color:#fff;font:600 12.5px/1.2 var(--font);white-space:nowrap}
.wh-badges li::before{content:"";width:7px;height:7px;border-radius:50%;background:#08A0E5;box-shadow:0 0 0 2px rgba(255,255,255,.25);flex-shrink:0}
.wh-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:22px 0 0;font:500 13px/1.4 var(--font);color:#D7E6EF;
  text-shadow:0 1px 10px rgba(5,24,36,.6)}
.wh-foot .brand-bd{font-weight:700}
.wh-foot-sep{opacity:.7}
@media (max-width:640px){
  .water-hero:has(.wh-layers){min-height:0}
  .wh-layers{padding-top:36px;padding-bottom:36px}
  .wh-eyebrow{margin-bottom:12px}
  .wh-eyebrow-chip{font-size:11.5px;padding:5px 8px}
  .water-hero h1.wh-title{font-size:clamp(28px,8.4vw,36px);line-height:1.1;margin-bottom:10px}
  .wh-sub{font-size:17px;margin-bottom:12px}
  .wh-body p{font-size:15px}
  .wh-badges{gap:6px;margin-bottom:20px}
  .wh-badges li{font-size:11.5px;padding:5px 10px}
  .wh-foot{font-size:12.5px;flex-direction:column;align-items:flex-start;gap:2px}
  .wh-foot-sep{display:none}
}

.btn-on-dark{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.btn-on-dark:hover{background:rgba(255,255,255,.12);text-decoration:none}

/* Category taxonomy grid */
.tax-grid-wrap{padding:56px 0 24px;background:#fff;border-bottom:1px solid var(--line)}
.tax-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.tax-card{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:20px 18px 18px;
  background:var(--band);border-radius:var(--r);border:1px solid var(--line);transition:box-shadow .2s,transform .15s;
  position:relative;min-height:148px}
.tax-card:hover{box-shadow:var(--shadow-lg);text-decoration:none;transform:translateY(-2px)}
.tax-card-icon{width:56px;height:56px;max-width:56px;max-height:56px;border-radius:12px;object-fit:contain;flex:none}
.tax-card-name{font:700 15px/1.25 var(--font);letter-spacing:-.01em}
.tax-card-go{margin-top:auto;color:var(--ink-3)}
.tax-card-go svg{width:18px;height:18px}

/* Program-page product hero */
.prog-hero{padding:28px 0 12px;background:#fff}
.prog-hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:start}
.prog-cat{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.prog-cat-icon{width:48px;height:48px;max-width:48px;max-height:48px;border-radius:10px;flex:none;object-fit:contain}
.prog-cat-name{font:700 13px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase}
.prog-name{font-size:clamp(26px,3.2vw,38px);font-weight:650;letter-spacing:-.015em;line-height:1.12;
  color:var(--ink);margin:0 0 8px} /* Magda 2026-09-25: smaller, less prominent product title */
.prog-claim{font-size:clamp(15px,1.5vw,18px);font-weight:600;color:var(--ink-2);margin:0 0 14px;line-height:1.35} /* Magda 2026-09-25: slightly quieter under title */


/* Magda/Karen 2026-09-24: photo-band slogan — soft left wash so dark green text hits ≥3:1 on the light wall */
.pdp-band-slogan .pdp-band-shade-soft{
  background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 28%,rgba(255,255,255,.28) 48%,rgba(255,255,255,0) 68%);
}
.pdp-band-slogan-text{color:inherit} /* colour: shared hero-heading rule at end of file (Karen 2026-10-16) */
.pdp-band-slogan .pdp-typo{text-shadow:0 1px 0 rgba(255,255,255,.35)}
/* Magda CleanWipes 2026-10-05: verbatim phrase replaces the one-word slogan — smaller than the Typo word, her casing kept */
/* Magda "Maxi wipes" 2026-10-05: all slogans → phrases, "Smaller font please" — phrase size reduced again (was clamp(30px,3.6vw,52px) / 12em) */
.pdp-band-slogan .pdp-typo.pdp-band-slogan-phrase{text-transform:none;font-weight:800;font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:-.015em;max-width:16em}
.prog-slogan.prog-slogan-phrase{text-transform:none;font-size:clamp(17px,4.8vw,20px);line-height:1.2}
/* Desktop: slogan lives on the band only — hide under-name duplicate */
.prog-slogan-mobile{display:none}



@media (max-width:600px){
  /* Karen 2026-09-24: hide PDP photo band on phone — first screen = category + name */
  section.pdp-band.pdp-band-slogan{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }
  .prog-slogan-mobile{display:block}
  .series-top{padding-top:22px !important}
}

/* Pixel/Magda follow-up 2026-09-24: slogan under product name (readable, category text colour) */
.prog-slogan{
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(26px,3.1vw,40px);
  line-height:1.15;
  letter-spacing:-.02em;
  text-transform:lowercase;
  margin:8px 0 16px;
}
@media (max-width:420px){
  .prog-slogan{font-size:clamp(26px,7vw,28px)}
}

/* AlproJet MixCup chart overlays — numbers in yellow dots, dose in centre, time by clock.
   Stage must size to the PNG (not the generic circle-crop aspect-ratio) so % positions match. */
.pw-diagram.mixcup .circle-crop.mixcup-stage{
  position:relative;
  aspect-ratio:auto;
  height:auto;
  overflow:visible;
  background:#fff;
}
.pw-diagram.mixcup .circle-crop.mixcup-stage::after{display:none} /* no baked-text mask on blank chart */
.mixcup-stage img{width:100%;height:auto;display:block;vertical-align:top}
.mixcup-dots{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none;z-index:2}
.mixcup-dot{
  position:absolute;transform:translate(-50%,-50%);
  width:clamp(22px,3.2vw,34px);height:clamp(22px,3.2vw,34px);
  display:flex;align-items:center;justify-content:center;
  font:700 clamp(11px,1.5vw,15px)/1 var(--font);color:#1A1A1A;
}
.mixcup-dot span{display:block;margin-top:1px}
.mixcup-dose{
  position:absolute;left:47.8%;top:50.9%;transform:translate(-50%,-50%);
  width:clamp(88px,16%,130px);text-align:center;pointer-events:none;z-index:2;
  font:700 clamp(9px,1.35vw,13px)/1.2 var(--font);color:#1A1A1A;
  display:flex;flex-direction:column;gap:1px;
}
.mixcup-time{
  position:absolute;left:20.5%;top:24.5%;transform:translate(-50%,-50%);
  pointer-events:none;white-space:nowrap;z-index:2;
  font:700 clamp(10px,1.5vw,14px)/1.1 var(--font);color:#1A1A1A;
  background:rgba(255,255,255,.88);padding:3px 7px;border-radius:999px;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}
.mixcup-steps{
  list-style:none;margin:22px 0 0;padding:0;max-width:64ch;
  display:grid;gap:10px;
}
.mixcup-steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink)}
.mixcup-n{
  flex:none;width:28px;height:28px;border-radius:50%;
  background:#F5C400;color:#1A1A1A;
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--font);
}
@media (max-width:520px){
  .mixcup-dose{width:30%;font-size:clamp(8px,2.8vw,11px)}
  .mixcup-time{font-size:clamp(9px,2.6vw,12px);padding:2px 5px}
}

.prog-hero-media .pdp-pack{margin:0}
.prog-hero-media .pdp-main{background:var(--band);border-radius:var(--r);padding:24px;min-height:280px;
  display:flex;align-items:center;justify-content:center}
.prog-hero-media .pdp-main img{max-height:360px;width:auto;max-width:100%;object-fit:contain}

/* Key facts panel — category tint only */
.prog-facts{padding:8px 0 40px}
.prog-facts-panel{position:relative;border-radius:var(--r);border:1px solid transparent;padding:28px 28px 28px 32px;overflow:hidden}
.prog-facts-accent{position:absolute;left:0;top:0;bottom:0;width:4px}
.prog-facts-h{font-size:clamp(20px,2.2vw,26px);font-weight:700;letter-spacing:-.015em;margin:0 0 16px;color:var(--ink)}
.prog-facts-h + .prog-facts-lead{margin-top:-8px}
.prog-facts-lead{font-size:clamp(15px,1.4vw,17px);font-weight:600;letter-spacing:-.01em;margin:0 0 16px;color:var(--ink)}

/* Hazard — neutral grey only (no red UI) */
.hazard,.hazard-box,.ghs-box,.pdp-hazard{background:var(--hazard-bg)!important;color:var(--hazard-ink)!important;
  border:1px solid var(--line)!important}
.hazard a,.hazard-box a{color:var(--accent)}

@media (max-width:960px){
  .prog-hero-in{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .tax-grid{grid-template-columns:repeat(2,1fr)}
  /* water-hero min-height set above */
  .promo-strip{font-size:11px;letter-spacing:.02em;padding:7px 12px}
  .trust-strip{font-size:11px;padding:6px 12px;letter-spacing:0}
  /* audit fix #1 (2026-10-02): overflow-x:hidden on BOTH html and body made <body> a scroll container,
     which silently disabled the sticky header on phones. html keeps the guard; body uses clip (no scroller). */
  html{overflow-x:hidden}
  body{overflow-x:clip;max-width:100%}
  .hdr-in{padding:0 10px;gap:6px}
  .logo-img{height:36px;max-height:36px}
}


/* Display headings — never mid-word hyphenate / break */
.sec-typo,.ssot-word,.hero-typo,.pdp-typo,.prog-facts-h,.prog-name,.water-hero h1,h1,h2{
  hyphens:none;-webkit-hyphens:none;
  overflow-wrap:normal;word-break:normal;word-wrap:normal;
}

/* i3 series highlight above the four category tiles */
.tax-i3{display:grid;grid-template-columns:160px 1fr auto;gap:22px;align-items:center;
  margin:28px 0 8px;padding:18px 22px;background:linear-gradient(105deg,#E6F5FC 0%,#F8FAFC 70%);
  border:1px solid var(--line);border-radius:var(--r);transition:box-shadow .2s,transform .15s}
.tax-i3:hover{box-shadow:var(--shadow-lg);text-decoration:none;transform:translateY(-1px)}
.tax-i3-img{width:140px;height:88px;object-fit:contain;justify-self:center}
.tax-i3-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.tax-i3-k{font:700 11.5px/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tax-i3-name{font:750 22px/1.2 var(--font);letter-spacing:-.02em;color:var(--ink)}
.tax-i3-blurb{font-size:14.5px;color:var(--ink-2);max-width:52ch}
.tax-i3-go{color:var(--accent)}
.tax-i3-go svg{width:22px;height:22px}
@media (max-width:960px){
  .tax-grid{grid-template-columns:repeat(2,1fr)}
  .tax-i3{grid-template-columns:100px 1fr auto;gap:14px;padding:14px 16px}
  .tax-i3-img{width:96px;height:64px}
  .tax-i3-name{font-size:18px}
}
@media (max-width:640px){
  .tax-i3{grid-template-columns:1fr;text-align:left}
  .tax-i3-go{justify-self:start}
}


.tax-icon{width:30px;height:30px;max-width:30px;max-height:30px;object-fit:contain;border-radius:7px}


/* ================================================================ home v2 */
.home-band{background:var(--tax-tint,#E6F5FC);padding:32px 0;border-top:1px solid rgba(15,23,42,.06)}
#range{scroll-margin-top:calc(var(--hdr-h,76px) + 8px)}
.home-band-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px 36px;align-items:center}
.home-band-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.home-band-head{display:flex;gap:14px;align-items:flex-start}
.home-band-head .tax-card-icon{flex:0 0 auto;width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important}
.home-band-cat{font:700 12px var(--font);letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.home-band-h{font-family:var(--font);font-weight:600;font-size:clamp(15px,1.3vw,17px);line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px;hyphens:none;overflow-wrap:normal;word-break:normal}
.home-band-intro{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}
.home-band-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.home-band-photo{margin:0;border-radius:16px;overflow:hidden;box-shadow:0 10px 28px rgba(15,23,42,.10);aspect-ratio:4/3;background:#fff}
.home-band-photo img{width:100%;height:100%;object-fit:cover;display:block}
.home-mini{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:var(--ink);text-decoration:none;transition:box-shadow .2s,transform .2s;height:auto;align-self:start}
.home-mini:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);text-decoration:none}
.home-mini-img{position:relative;display:flex;align-items:center;justify-content:center;height:140px;padding:14px;background:#fff;border-bottom:1px solid var(--line);flex:0 0 auto}
.home-mini-img>img:not(.pcard-tax){max-height:112px;width:auto;max-width:100%;object-fit:contain}
.home-mini-name{padding:12px 14px 14px;font:650 15px var(--font);margin:0}
.home-band-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

.home-comp{position:relative;color:#fff;overflow:hidden;padding:64px 0}
.home-comp-bg{position:absolute;inset:0;display:block;margin:0}
.home-comp-bg img{width:100%;height:100%;object-fit:cover;display:block}
.home-comp-shade{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,28,48,.88) 0%,rgba(8,28,48,.72) 45%,rgba(8,160,229,.45) 100%)}
.home-comp-in{position:relative;z-index:1}
.home-comp-h{font-family:var(--disp);font-weight:800;font-size:clamp(26px,3.4vw,40px);letter-spacing:-.02em;margin:0 0 22px;hyphens:none}
.home-comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:22px}
.home-comp-card{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:var(--r);padding:18px 18px 16px;backdrop-filter:blur(6px)}
.home-comp-card h3{margin:0 0 8px;font-size:16px;color:#fff}
.home-comp-card p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.home-comp-links{display:flex;flex-wrap:wrap;gap:10px 14px;margin-bottom:18px}
.home-comp-links a{color:#fff;font:650 13.5px var(--font);text-decoration:underline;text-underline-offset:3px}
.home-comp-links a:hover{color:#E6F5FC}
.home-comp-search{display:flex;gap:10px;flex-wrap:wrap;max-width:560px;margin-bottom:18px}
.home-comp-search input{flex:1;min-width:200px;border:0;border-radius:999px;padding:12px 18px;font:400 15px var(--font)}
.home-comp-more{margin:0}

.home-docs{padding-top:56px;padding-bottom:40px}
.home-sec-h{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;color:var(--ink);margin:0 0 12px;hyphens:none}

.home-support{background:var(--band)}
.home-support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.home-support-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px}
.home-support-train-ic{width:48px;height:48px;object-fit:contain;display:block;flex:none}
.home-support-card h3{margin:0;font-size:17px}
.home-support-card p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.55;flex:1}
.home-support-card .btn,.home-support-card .pcard-link{align-self:flex-start;margin-top:6px}

.home-all{padding:20px 0 36px;text-align:center}
.home-all-link{display:inline-flex;align-items:center;gap:8px;font:700 16px var(--font);color:var(--accent);text-decoration:none;padding:14px 22px;border:1.5px solid var(--accent);border-radius:999px}
.home-all-link:hover{background:var(--accent);color:#fff}
.home-all-link svg{width:18px;height:18px}
/* task cards directly above "care by category." (Karen 2026-10-02): normal section spacing between them */
.choice-wrap+.tax-grid-wrap{padding-top:0}

.ftr-sitemap{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:28px 22px}
.ftr-sitemap .fcol h4 a{color:inherit;text-decoration:none}
.ftr-sitemap .fcol h4 a:hover{color:var(--accent)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:960px){
  .home-band-in{grid-template-columns:1fr;gap:18px}
  .home-band-photo{max-height:220px;aspect-ratio:16/9;order:-1}
  .home-band-cards{grid-template-columns:1fr 1fr}
  .home-comp-grid,.home-support-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .home-band{padding:26px 0}
  .home-band-head{flex-direction:column;gap:10px}
  .home-band-cards{grid-template-columns:1fr}
  .home-band-photo{display:none} /* keep mobile tidy — photo on tablet+ */
  .home-comp{padding:48px 0}
  .home-comp-search{flex-direction:column}
  .home-comp-search .btn{width:100%}
}


/* ---- ALPRO logo + homepage document type tiles (v128) ---- */
.alpro-logo-link{display:inline-flex;align-items:center;vertical-align:middle;line-height:0}
.alpro-logo-link img{display:block;object-fit:contain}
.alpro-logo-link img.alpro-logo-strip{height:22px;width:auto;max-height:22px}
.alpro-logo-link img.alpro-logo-hero{height:24px;width:auto;max-height:24px}
.alpro-logo-link img.alpro-logo-eyebrow{height:30px;width:auto;max-height:30px}
.alpro-logo-link img.alpro-logo-ftr{height:28px;width:auto;max-height:28px}
.alpro-logo-chip{display:inline-flex;align-items:center;background:#fff;border-radius:6px;padding:3px 7px;margin:0 4px;vertical-align:middle;box-shadow:0 1px 2px rgba(0,0,0,.12);line-height:0}
.trust-strip{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:8px 16px;line-height:1.3;max-width:100%;box-sizing:border-box}
.trust-strip .alpro-logo-link{margin:0 2px}
/* water-hero-trust flex set in hero block */
.ftr-alpro{margin:10px 0 0;font-size:13px;line-height:1.4}
.ftr-alpro a{color:#D7E0EA;text-decoration:underline;text-underline-offset:2px}
.ftr-alpro a:hover{color:#fff}
.ftr-trust .alpro-logo-link{margin:0 4px}

.home-doc-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 24px}
.home-doc-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;border:1px solid var(--line,#E2E8F0);background:#fff;font:600 13px/1.2 var(--font);color:var(--ink,#0E1A2B);text-decoration:none;transition:border-color .15s,background .15s,color .15s}
.home-doc-chip:hover{border-color:var(--accent,#08A0E5);color:var(--accent,#08A0E5)}
.home-doc-chip-hi{border-color:#8ECFF0;background:#F0F9FD;color:var(--ink,#0E1A2B);font-size:13.5px;padding:8px 16px}
.home-doc-chip-hi:hover{border-color:var(--accent,#08A0E5);background:#E5F5FC;color:var(--accent,#08A0E5)}
@media (max-width:640px){
  .home-doc-chips{gap:6px}
  .home-doc-chip{padding:6px 12px;font-size:12.5px}
  .home-doc-chip-hi{padding:7px 13px;font-size:13px}
  .alpro-logo-link img.alpro-logo-strip{height:18px;max-height:18px}
}


.alpro-text-link{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.alpro-text-link:hover{color:inherit;text-decoration-thickness:2px}
/* AA-safe ALPRO brand red for the word (hero distributor line) — not for UI chrome */
.alpro-word-red{color:#FE0E25;font-weight:700;text-decoration:none}
.alpro-word-red:hover{color:#FE0E25;text-decoration:underline;text-underline-offset:3px}
.water-hero-trust .alpro-word-red{text-shadow:none}


/* ===== Resource centre (/resources/) ===== */
.rc-banner{background:var(--water-soft,#E6F5FC);border-bottom:1px solid #b8e0ef;font-size:14px}
.rc-banner-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px 0}
.rc-banner a{color:var(--water,#08A0E5);font-weight:600}
.rc-banner-go{white-space:nowrap}
.rc-overview .rc-hero.page-hero{padding:20px 0 8px;background:transparent}
.rc-overview .rc-hero .crumbs{padding-top:0;padding-bottom:10px;font-size:12.5px}
.rc-overview .rc-hero .eyebrow{margin:0 0 6px}
.rc-overview .rc-hero h1{font-size:clamp(28px,3.2vw,36px);margin:0 0 8px;line-height:1.15}
.rc-overview .rc-hero .lead{margin:0;max-width:62ch;font-size:15.5px;line-height:1.45}
.rc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:16px 0 40px;align-items:stretch}
.rc-tile{display:flex;align-items:flex-start;gap:14px;text-align:left;padding:22px 18px;border:1px solid #d7e4ee;border-radius:16px;background:#fff;cursor:pointer;color:inherit;font:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;min-width:0;height:100%;min-height:132px;box-sizing:border-box}
.rc-tile:hover,.rc-tile:focus-visible{border-color:var(--water,#08A0E5);box-shadow:0 10px 28px rgba(8,160,229,.14);outline:none;transform:translateY(-1px)}
.rc-tile-ic{flex:none;width:64px;height:64px;border-radius:14px;background:var(--water-soft,#E6F5FC);color:var(--water,#08A0E5);display:grid;place-items:center}
.rc-tile-ic svg{width:42px;height:42px}
.rc-tile-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;justify-content:center}
.rc-tile-txt b{font-size:18px;font-weight:650;color:var(--ink,#122);line-height:1.25}
.rc-tile-txt span{font-size:14px;line-height:1.45;color:#52625b}
.rc-tile-go{flex:none;color:var(--water,#08A0E5);align-self:center}
.rc-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--water,#08A0E5);font:inherit;font-weight:600;font-size:14px;cursor:pointer;padding:0;margin:0 0 12px}
.rc-back:hover{text-decoration:underline}
.rc-lib-head{padding-top:28px;padding-bottom:8px}
.rc-tools{display:flex;flex-direction:column;gap:14px;margin:22px 0 10px}
.rc-search{display:flex;align-items:center;gap:10px;border:1px solid #c9d7e0;border-radius:12px;padding:10px 14px;background:#fff}
.rc-search input{flex:1;border:0;outline:none;font:inherit;font-size:15px;min-width:0;background:transparent}
.rc-filter-lbl{display:block;font-size:12px;font-weight:650;color:#52625b;margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.rc-pills{display:flex;flex-wrap:wrap;gap:8px}
.rc-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid #c9d7e0;background:#fff;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--ink,#122)}
.rc-pill.on{border-color:var(--water,#08A0E5);background:var(--water-soft,#E6F5FC);color:#067EB4}
.rc-pill-n{font-weight:500;opacity:.7;font-size:12px}
.rc-pill-cat img{flex:none}
.rc-lib-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 8px;font-size:14px;color:#52625b}
.rc-list{padding-bottom:80px;display:flex;flex-direction:column;gap:10px}
.rc-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px 12px;align-items:center;padding:14px 16px;border:1px solid #d7e4ee;border-radius:14px;background:#fff;min-width:0}
.rc-pick{display:grid;place-items:center;cursor:pointer}
.rc-pick input{width:18px;height:18px;accent-color:var(--water,#08A0E5)}
.rc-row-icon{flex:none;display:grid;place-items:center;width:36px;height:36px}
.rc-cat-ic{width:28px;height:28px;display:block}
.rc-doc-ic{color:var(--water,#08A0E5);display:block}
.rc-row-main{min-width:0}
.rc-title{margin:0;font-size:16px;font-weight:400;line-height:1.35;color:var(--ink,#122)}
.rc-title .rc-prod{font-weight:700}
.rc-title .rc-sep{font-weight:400;color:#7a8a84}
.rc-title .rc-dtype{font-weight:500;color:#334}
.rc-meta{margin:3px 0 0;font-size:12.5px;color:#7a8a84;font-weight:500}
.rc-row-act{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.rc-open,.rc-dl{font-size:13px;font-weight:650;color:#fff;text-decoration:none;padding:7px 12px;border-radius:8px;border:1px solid var(--water,#08A0E5);background:var(--water,#08A0E5)}
.rc-open:hover,.rc-dl:hover{filter:brightness(0.95)}.rc-dl{background:#fff;color:var(--water,#08A0E5)}
.rc-open-muted,.rc-open.rc-open-muted{border-style:dashed;border-color:#c9d7e0;background:#f5f8fa;color:#7a8a84;cursor:default;font-weight:600}
.rc-empty{padding:28px 8px;color:#52625b}
.rc-sel-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid #d7e4ee;box-shadow:0 -6px 24px rgba(8,40,60,.08)}
.rc-sel-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.rc-help-in{padding:28px 0 72px;max-width:820px}
.rc-help-block{margin:24px 0;padding:18px;border:1px solid #d7e4ee;border-radius:14px;background:#f8fbfd}
.rc-help-block h2{margin:0 0 12px;font-size:16px}
.rc-sel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rc-sel-list li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid #e3edf3}
.rc-sel-list li:last-child{border-bottom:0}
.rc-sel-list small{display:block;color:#52625b;margin-top:2px}
.rc-remove{background:none;border:0;color:#067EB4;font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:0}
.rc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rc-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#334}
.rc-form input,.rc-form textarea{font:inherit;font-weight:400;padding:10px 12px;border:1px solid #c9d7e0;border-radius:10px;width:100%;box-sizing:border-box}
.rc-span2{grid-column:1 / -1}
.rc-form-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.rc-form-note{margin-top:12px;font-size:13px;color:#52625b;line-height:1.45}
.rc-review{margin-top:18px;padding:14px;border-radius:12px;background:#f3f8fb;border:1px solid #d7e4ee}
.rc-review-pre{white-space:pre-wrap;word-break:break-word;font:inherit;font-size:13px;margin:8px 0 0;color:#334}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:900px){
  .rc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .rc-tiles{grid-template-columns:1fr;gap:12px;padding:0 0 32px}
  .rc-tile{padding:18px 16px;min-height:0}
  .rc-tile-ic{width:56px;height:56px;border-radius:14px}
  .rc-tile-ic svg{width:36px;height:36px}
  .rc-row{grid-template-columns:auto auto 1fr;gap:8px 10px}
  .rc-row-act{grid-column:2 / -1;justify-content:flex-start;padding-left:28px}
  .rc-title{font-size:15px}
  .rc-form-grid{grid-template-columns:1fr}
  .rc-banner-in{flex-direction:column;align-items:flex-start}
  .rc-lib-status{align-items:flex-start}
}


/* ===== Training centre ===== */
.rc-tile{text-decoration:none;color:inherit}
a.rc-tile:hover{text-decoration:none}
.rc-train-band{padding:8px 0 48px}
.rc-train-band-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;border:1px solid #d7e4ee;border-radius:16px;background:linear-gradient(180deg,#f7fbfe,#fff)}
.rc-train-band-in h2{margin:0 0 6px;font-size:clamp(22px,2.4vw,28px)}
.rc-train-band-in .lead{margin:0;max-width:52ch;font-size:15px;color:#52625b}
.rc-train-band-in .btn{flex:none}
@media (max-width:700px){
  .rc-train-band-in{flex-direction:column;align-items:flex-start}
}



/* ---- Training centre banner (ALPRO program-style split) ---- */
.tc-banner{position:relative;background:#fff;border-bottom:1px solid var(--line,#e6edf2);overflow:hidden}
.tc-banner-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;position:relative;height:clamp(250px,26vw,300px)}
.tc-banner-copy{background:#fff;display:flex;align-items:center}
.tc-banner-copy-in{width:100%;max-width:calc(var(--wrap)/2);margin-left:auto;padding:clamp(18px,2.4vw,28px) clamp(18px,2.5vw,36px) clamp(18px,2.4vw,28px) 24px;box-sizing:border-box}
.tc-banner-title{margin:6px 0 8px;font-size:clamp(26px,3vw,36px);line-height:1.12;letter-spacing:-.02em}
.tc-banner-copy .lead{margin:0;max-width:40ch;font-size:15px;line-height:1.45;color:#52625b}
.tc-banner-copy .crumbs{padding:0 0 6px;font-size:12.5px}
/* Panel colour runs to the right edge; person is anchored near the ring (panel left), not the viewport edge. */
.tc-banner-panel{background:#cad8f3;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden;position:relative;padding-left:clamp(28px,3.5vw,56px)}
.tc-banner-person{display:block;height:100%;width:auto;max-width:min(460px,88%);object-fit:contain;object-position:left bottom;align-self:flex-end}
.tc-banner-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:clamp(76px,7.5vw,92px);height:clamp(76px,7.5vw,92px);border-radius:50%;background:#fff;border:3.5px solid #e10017;box-shadow:0 6px 22px rgba(15,40,70,.14);display:grid;place-items:center;pointer-events:none}
.tc-banner-badge img{width:58%;height:58%;object-fit:contain;display:block}
@media (max-width:900px){
  .tc-banner-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);height:230px}
  .tc-banner-copy-in{max-width:none;margin-left:0;padding-left:20px;padding-right:14px}
  .tc-banner-panel{padding-left:22px}
  .tc-banner-person{max-width:min(360px,92%)}
  .tc-banner-badge{width:70px;height:70px;border-width:3px}
}
@media (max-width:600px){
  .tc-banner-grid{grid-template-columns:1fr;height:auto}
  .tc-banner-panel,.tc-banner-badge{display:none}
  .tc-banner-copy-in{padding:16px 20px 12px;max-width:none}
  .tc-banner-title{font-size:26px;margin-top:2px}
}


.tc-hero.page-hero{padding:10px 0 6px;background:transparent}
.tc-hero-compact.page-hero{padding:8px 0 4px}
.tc-hero h1{margin:0 0 6px;font-size:clamp(26px,3vw,34px);line-height:1.15}
.tc-hero .lead{margin:0;max-width:62ch;font-size:15px;line-height:1.45;color:#52625b}

.tc-hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,42%);align-items:center;gap:clamp(12px,3vw,36px)}
.tc-hero-copy{min-width:0}
.tc-hero-visual{justify-self:end;align-self:center;max-width:380px;width:100%;margin-top:-4px;margin-bottom:-8px;line-height:0}
.tc-hero-visual picture,.tc-hero-visual img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover;object-position:center right;border-radius:18px;background:#d6e4ee;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 16%,#000 100%)}
@media (max-width:900px){
  .tc-hero-row{grid-template-columns:minmax(0,1fr) minmax(180px,38%)}
  .tc-hero-visual{max-width:300px}
}
@media (max-width:600px){
  .tc-hero-row{grid-template-columns:1fr}
  .tc-hero-visual{display:none}
}

.tc-hero .crumbs{padding-top:0;padding-bottom:8px;font-size:12.5px}
.tc-area-head{display:flex;align-items:flex-start;gap:14px;margin-top:2px}
.tc-area-head h1{margin:0}
.tc-area-head .eyebrow{margin:0 0 2px}
.tc-area-title-row{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px}
.tc-prog-line{display:flex;align-items:center;gap:12px;margin-top:0;max-width:420px;font-size:13.5px;color:#52625b}
.tc-prog-inline{margin-top:0;min-width:200px;flex:1}
.tc-prog-track{flex:1;height:8px;border-radius:999px;background:#e6eef4;overflow:hidden}
.tc-prog-bar{display:block;height:100%;width:0;background:var(--tc,var(--water,#08A0E5));border-radius:999px;transition:width .25s ease}

.tc-how{padding:4px 0 16px}
.tc-how-line{margin:0;max-width:72ch;font-size:15px;line-height:1.45;color:#334;font-weight:550}
.tc-how-note{margin:8px 0 0;max-width:72ch;font-size:13.5px;line-height:1.45;color:#52625b}

.tc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 0 40px}
body.tc-page{padding-bottom:88px}
body.tc-page .chat-fab{bottom:24px}
.tc-card-continue{margin:0;font-size:13px;color:#52625b;line-height:1.35}
.tc-group-tick{color:var(--tc,#08A0E5);font-weight:700;font-size:13px}
.tc-step-num-muted{background:transparent!important;border:1px dashed #c9d7e2;color:transparent!important}
.tc-back-link{appearance:none;border:0;background:none;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:#52625b;text-decoration:underline;cursor:pointer}
.tc-back-muted{opacity:.45;cursor:default;text-decoration:none}
.tc-panel-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
.rc-train-areas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.rc-train-area{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid #d7e4ee;border-radius:12px;background:#fff;text-decoration:none;color:inherit}
.rc-train-area:hover{border-color:#08A0E5;background:#f7fbfe}
.rc-train-area b{display:block;font-size:14.5px}
.rc-train-area small{display:block;font-size:12.5px;color:#7a8a84;margin-top:2px}
.rc-train-area-go{margin-left:auto;font-size:13px;font-weight:700;color:#08A0E5;white-space:nowrap}
.tc-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid #d7e4ee;border-radius:16px;background:#fff;border-top:3px solid var(--tc,#08A0E5)}
.tc-card-head{display:flex;align-items:center;gap:14px;padding:12px 12px;margin:-6px -6px 0;border-radius:12px;background:var(--tc-tint,#E6F5FC)}
.tc-card-head h2{margin:0;font-size:18px;color:var(--tc,#08A0E5)}
.tc-card-meta{margin:2px 0 0;font-size:13px;color:#52625b}
.tc-card-prog{display:flex;flex-direction:column;gap:8px}
.tc-card-status{margin:0;font-size:13.5px;font-weight:600;color:#334}
.tc-card .btn{align-self:flex-start}

.tc-mobile-bar{display:none;align-items:center;gap:12px;padding-top:10px;padding-bottom:8px;font-size:13.5px;font-weight:600}
.tc-mobile-bar select{flex:1;width:100%;min-width:0;font:inherit;padding:8px 10px;border:1px solid #c9d7e2;border-radius:10px;background:#fff}

.tc-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:22px;padding:18px 0 64px;align-items:start}
.tc-sidebar{position:sticky;top:88px;border:1px solid #d7e4ee;border-radius:14px;background:#fff;padding:14px 10px 16px;max-height:calc(100vh - 110px);overflow:auto}
.tc-side-label{margin:0 0 10px;padding:0 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#7a8a84}
.tc-groups{display:flex;flex-direction:column;gap:6px}
.tc-group{border:1px solid #e6eef4;border-radius:12px;background:#fafcfd;overflow:hidden}
.tc-group-h{width:100%;display:grid;grid-template-columns:22px 1fr auto 14px;gap:8px;align-items:center;text-align:left;padding:10px 10px;border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ink,#122)}
.tc-group-h:hover{background:#f0f7fb}
.tc-group-name{font-size:13.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-group-count{font-size:12px;font-weight:600;color:#7a8a84}
.tc-group-chev{width:8px;height:8px;border-right:2px solid #7a8a84;border-bottom:2px solid #7a8a84;transform:rotate(-45deg);transition:transform .15s ease;justify-self:end}
.tc-group.is-open .tc-group-chev{transform:rotate(45deg)}
.tc-group .tc-steps{display:none;list-style:none;margin:0;padding:0 6px 8px;flex-direction:column;gap:2px}
.tc-group.is-open .tc-steps{display:flex}
.tc-step-btn{width:100%;display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;text-align:left;padding:8px 6px;border:0;border-radius:10px;background:transparent;cursor:pointer;font:inherit;color:inherit}
.tc-step-btn:hover{background:#f5fafc}
.tc-step.is-on .tc-step-btn{background:var(--tc-tint,#E6F5FC)}
.tc-step-num{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--tc-tint,#E6F5FC);color:var(--tc,#08A0E5)}
.tc-step.is-done .tc-step-num{background:var(--tc,#08A0E5);color:#fff}
.tc-step.is-optional .tc-step-num{background:#eef2f5;color:#9aa7b0;font-size:12px;font-weight:600}
.tc-step-title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;min-width:0}
.tc-onreq-tag{font-size:11px;font-weight:600;color:#8a969e;letter-spacing:.01em;white-space:nowrap}
.tc-step-label{font-size:13px;line-height:1.35;min-width:0;display:flex;flex-direction:column;gap:1px}
.tc-step-label .rc-dtype{font-weight:550;color:#334}
.tc-step-sub{font-size:11.5px;color:#7a8a84}
.tc-optional-badge{margin:0;font-size:12.5px;font-weight:700;color:#7a8a84;letter-spacing:.02em}
.tc-badge{display:inline-block;margin:0;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.01em;line-height:1.3}
.tc-badge-start{background:#E6F5FC;color:#0878ad}
.tc-badge-sds{background:#FBF3E0;color:#8A6A1A;border:1px solid #E6D4A8}
.tc-badge-ifu{background:#EAF7EB;color:#2a7a32;border:1px solid #c5e5c8}
.tc-badge-check{background:#EEF2F5;color:#44555f}
.tc-step-label .tc-badge{margin-top:4px;font-size:11px;padding:2px 8px}
.tc-panel-in > .tc-badge{margin-top:2px}


.tc-panel{border:1px solid #d7e4ee;border-radius:16px;background:#fff;min-height:280px}
.tc-panel-in{padding:28px 28px 32px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tc-panel-ic{width:48px;height:48px}
.tc-panel-title{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:400;line-height:1.25}
.tc-panel-title .rc-prod{font-weight:700}
.tc-panel-title .rc-sep{color:#7a8a84}
.tc-panel-title .rc-dtype{font-weight:500;color:#334}
.tc-ref{margin:0;font-size:13px;color:#7a8a84}
.tc-blurb{margin:0;max-width:62ch;font-size:15.5px;line-height:1.5;color:#334}
.tc-why{margin:0;max-width:62ch;font-size:14px;line-height:1.45;color:#52625b}
.tc-panel-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;align-items:center}
.tc-marked{font-size:13.5px;font-weight:700;color:var(--tc,#08A0E5)}

.tc-complete{border:1px solid #d7e4ee;border-radius:16px;background:#fff;padding:32px 28px}
.tc-complete h2{margin:0 0 10px;font-size:clamp(22px,2.4vw,28px)}
.tc-complete p{margin:0 0 18px;max-width:62ch;color:#52625b;line-height:1.5}
.tc-complete-actions{display:flex;flex-wrap:wrap;gap:10px}

.tc-print{display:none}
@media print{
  header,.ftr,.widgets,.ask-fab,.cookie,.mobile-menu,.search-overlay,.tc-mobile-bar,.tc-sidebar,.tc-panel,.tc-complete,.tc-hero,.page-hero,nav.crumbs{display:none!important}
  .tc-print{display:block!important;padding:24px}
  .tc-print h1{font-size:22px;margin:0 0 8px}
  .tc-print-note{font-size:12px;color:#555;margin:0 0 16px}
  .tc-print ol{padding-left:20px}
  .tc-print li{margin:0 0 18px;font-size:14px}
  .tc-sign{margin-top:8px;font-size:12px;color:#333}
  .tc-print-why{margin-top:4px;font-size:11.5px;color:#666;font-weight:400}
  .tc-print-signoff{margin-top:28px;padding-top:16px;border-top:1px solid #ccc}
  .tc-print-signoff h2{font-size:16px;margin:0 0 12px}
  .tc-print-signoff p{margin:0 0 10px;font-size:13px}
}

@media (max-width:900px){
  .tc-grid{grid-template-columns:1fr;padding-bottom:40px}
  .tc-layout{grid-template-columns:1fr;padding-top:8px}
  .tc-sidebar{display:none}
  .tc-mobile-bar{display:flex}
  .tc-panel-in{padding:20px 18px 24px}
  .rc-train-band{padding-bottom:36px}
}


@media (max-width:900px){
  body.tc-page.tc-has-actions{padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px))}
  body.tc-page .chat-fab{bottom:calc(96px + env(safe-area-inset-bottom, 0px))}
  body.tc-page .chat-fab span:not(.chat-fab-dot){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  body.tc-page .chat-fab{width:48px;height:48px;border-radius:999px;padding:0;justify-content:center}
  #tc-actions.tc-panel-actions{
    position:sticky;bottom:0;z-index:30;
    margin:16px -18px -24px;padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.96);border-top:1px solid #d7e4ee;
    backdrop-filter:blur(8px);box-shadow:0 -6px 20px rgba(18,34,40,.06)
  }
  .rc-train-areas{grid-template-columns:1fr}
}


/* Research page — normal hero H1 + glance card */
.research-hero{background:var(--band);padding:48px 0 36px}
.research-hero h1{margin:0}
.research-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);gap:28px;align-items:start}
.research-hero-lead .lead{margin:0 0 18px;max-width:62ch}
.research-hero .dh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
@media(max-width:860px){.research-hero-grid{grid-template-columns:1fr}}

/* Resource centre — 5 tiles: Get help spans two columns on row 2 */
.rc-tile-span2{grid-column:span 2}
@media(max-width:900px){.rc-tile-span2{grid-column:span 1}}


/* Staff training tile — ALPRO badge without tinted icon square */
.rc-tile-ic-badge,.rc-tile-ic-tile{background:transparent;border-radius:0;padding:0;width:64px;height:64px}
.rc-tile-ic-badge img,.rc-tile-ic-tile img{width:64px;height:64px;object-fit:contain;display:block;border-radius:12px}


/* Research hero — evidence-01 category tile */
.research-eyebrow{display:inline-flex;align-items:center;gap:8px}
.research-eyebrow-ic{width:22px;height:22px;object-fit:contain;flex:none;border-radius:4px}
.research-hero-title{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.research-hero-title h1{margin:0}
.research-hero-ic{flex:none;width:56px;height:56px;object-fit:contain;display:block;border-radius:10px}


/* Study cards — title + visible source link */
.study-title-link{color:inherit;text-decoration:none}
.study-title-link:hover{color:var(--green);text-decoration:underline}
.study-link{margin:0 0 10px;font-size:13px}
.study-link a{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:650;text-decoration:none;word-break:break-all}
.study-link a:hover{text-decoration:underline}
.study-link-ic{display:inline-flex;flex:none}
.study-link-ic svg{width:14px;height:14px}
.study-src-btn{position:relative;z-index:2;flex:none}
.study-card{position:relative}

.study-citation{font-size:12.5px;line-height:1.45;color:var(--ink-3);margin:4px 0 8px;max-width:72ch}
.study-citation em{font-style:italic}

/* Resource centre overview — keep How-to-use reachable */
.rc-howto-note{font:500 14px/1.45 var(--font);color:var(--ink-3);margin:-4px auto 28px;max-width:var(--wrap);padding:0 24px;box-sizing:border-box}
.rc-howto-note a{color:var(--accent-dark,#067EB4);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.rc-howto-note a:hover{color:var(--accent)}

@media (max-width:600px){
  .series-top .alt-row{display:flex;flex-direction:column;gap:22px}
  .series-top .alt-img{order:2}
  .series-top .alt-img img{width:100%;height:auto;border-radius:12px}
}

/* more products row: reuse homepage tax-cards on category + PDP */
.band .tax-grid{margin-top:8px}
.band .tax-card{background:#f7fafc;border:1px solid var(--line,#e6eef4);border-radius:14px;min-height:132px}

 /* keep last when the row wraps on tablet/phone */

/* Karen 2026-09-24: more-products row — stretch 3 (or 4) category cards full width; homepage .tax-grid unchanged */
.band.more-products .tax-grid-more,
.band .tax-grid-more{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.band.more-products .tax-grid-more:has(> :nth-child(4)),
.band .tax-grid-more:has(> :nth-child(4)){
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:640px){
  .band.more-products .tax-grid-more,
  .band .tax-grid-more{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  /* 3 cards → 2+1 with full-width last; 4 cards → 2×2 */
  .band.more-products .tax-grid-more > :last-child:nth-child(odd),
  .band .tax-grid-more > :last-child:nth-child(odd){
    grid-column:1 / -1;
  }
}

/* About page: align leftover mint/forest accents to ALPRO water blue (site/DESIGN.md).
   Surfaces category green (#1E8E3E) in zone list kept. Homepage/product pages untouched. */
.about-red .eyebrow.light,
.about-red .band-green .eyebrow.light{color:#B8E0F5}
.about-red .reach-band .hl{color:#B8E0F5}
.about-red .reach-band .bd{color:#B8E0F5!important}

/* ---- About v4: "two brands as one" (scoped to body.page-about only) ----
   Blue #08A0E5 stays the only accent; brands blend only in the thin blue→green
   hairline/route. Biodegree green #5AB952 sampled from assets/logo-header.png. */
.page-about .about-red{--ink:#0F2A44;--about-grad:linear-gradient(90deg,#08A0E5 0%,#31AC9B 55%,#5AB952 100%);--about-link:#0072A8;--about-line:#DCE5EC}
.page-about .about-red .sec-typo span[style*="var(--ink)"]{color:#0F2A44!important}
.page-about .about-red .hl{color:#0F2A44;font-weight:600}
.page-about .about-red .about-hero-dark{--alpro-red:#e10017}
.page-about .about-red .about-hero-dark .hl{color:var(--alpro-red)}
.page-about .about-red p a:not(.btn),.page-about .about-red .pcard-link{color:var(--about-link)}
.page-about .about-red .eo-k{color:var(--about-link)}
.page-about .about-hairline{position:relative}
.page-about .about-hairline::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--about-grad)}
/* intro cards */
.page-about .about-duo-grid{grid-template-columns:1fr auto 1fr;align-items:center;gap:18px}
.page-about .about-duo-card{background:#fff;border:1px solid var(--about-line);box-shadow:none;align-self:stretch}
.page-about .about-duo-card h3{color:#0F2A44}
.page-about .about-duo-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid #31AC9B;color:#31AC9B;background:#fff;font:700 20px/1 var(--font)}
/* together section */
.page-about .about-audit{background:#E8F5FB}
.page-about .about-audit .value-card,.page-about .about-audit .stat{border-color:var(--about-line);box-shadow:none}
.page-about .about-why-ic{background:#E8F5FB;color:#0072A8}
.page-about .about-why-ic svg{color:#0072A8}
/* story on white */
.page-about .about-story{background:#fff;border-top:1px solid var(--about-line)}
.page-about .about-story .eyebrow{color:var(--accent)}
.page-about .about-story .sec-typo{color:var(--accent)}
.page-about .about-story .alt-txt .lead{color:var(--ink-2)}
.page-about .about-red .about-story .hl{color:#0F2A44}
.page-about .about-red .about-story .bd{color:var(--accent)!important}
.page-about .about-story .map-card{border:1px solid var(--about-line);box-shadow:none}
.page-about .about-map-wrap{position:relative}
.page-about .about-map-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* founder quote */
.page-about .alfred-quote{background:#fff}
.page-about .alfred-marks{color:#08A0E5;opacity:1}
.page-about .alfred-q,.page-about .alfred-words cite{color:#0F2A44}
/* why alpro */
.page-about .about-why{background:#fff;border-top:1px solid var(--about-line)}
.page-about .about-why .value-card{border-color:var(--about-line)}
.page-about .about-why .value-card b{color:#0F2A44}
/* teasers */
.page-about .about-teasers{background:#fff}
.page-about .about-teaser{border-color:transparent}
.page-about .about-teaser-research{background:#E8F5FB}
.page-about .about-teaser-training{background:#cad8f3}
/* responsibility: one small green leaf (environment copy) */
.page-about .benefit-list li.about-leaf>svg{color:#5AB952}
/* closing CTA */
.page-about .about-close{background:#E8F5FB}
@media (max-width:860px){
  .page-about .about-duo-grid{grid-template-columns:1fr;justify-items:stretch}
  .page-about .about-duo-link{justify-self:center;margin:-4px 0}
}
.page-about .alfred-marks{position:static;display:block;height:.5em;line-height:1;margin:0 0 8px -4px}
.page-about .about-duo-logo,.page-about .about-duo-logo-bd{height:40px;width:auto;max-width:170px;object-fit:contain;object-position:left center}

/* ---- Brand names (Karen's rule): when shown as coloured labels, eyebrows or accents,
   ALPRO = ALPRO red #e10017, Biodegree = Biodegree logo green #5AB952 — never site blue. */
.brand-alpro{color:#e10017!important}
.brand-bd{color:#5AB952!important}
.page-about .about-red .bd,.page-about .about-red .about-story .bd{color:#5AB952!important}

/* ---- About v6: one job per section ---- */
.page-about .about-why-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.page-about .about-why-4 .value-card .pcard-link{margin-top:auto;padding-top:14px}
.page-about .about-why-ic-leaf,.page-about .about-why-ic-leaf svg{color:#5AB952}
.page-about .about-audit-stats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.page-about .about-duo-card h3{margin-top:4px}
@media (max-width:860px){.page-about .about-why-4{grid-template-columns:1fr}}
.page-about .sec-typo .about-inline{display:inline}
/* About v6.1: equal-height audit cards, link pinned to the bottom */
.page-about .about-audit-grid{align-items:stretch}
.page-about .about-audit-card{display:flex;flex-direction:column;height:100%}
.page-about .about-audit-card .pcard-link{margin-top:auto;padding-top:14px}
@media (min-width:861px){.page-about .about-audit-card h3{min-height:2lh}}
/* About v7: origin close-up map (Germany / Black Forest), rounded card like before */
.page-about .about-origin-card{padding:0;overflow:hidden;border-radius:18px;border:1px solid #E3EAF0;background:#F4F8FB}
.page-about .about-origin-map{display:block;width:100%;height:auto}
/* About v8: origin globe sits on the page, no card fill/frame */
.page-about .about-story .map-card.about-origin-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0}
.page-about .about-origin-globe{max-width:560px;margin:0 auto}
/* Resource centre library: "By product" | "By document type" toggle + grouped view */
.rc-libview{display:inline-flex;gap:0;margin:18px 0 6px;border:1px solid #CFE3F0;border-radius:999px;padding:3px;background:#fff}
.rc-libview-btn{appearance:none;border:0;background:transparent;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer;line-height:1.1}
.rc-libview-btn.on{background:var(--accent);color:#fff}
.rc-libview-btn:not(.on):hover{background:#EAF6FD}
.rc-libview-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rc-list-grouped{display:block}
.rc-cgroup{margin:34px 0 8px}
.rc-cgroup:first-child{margin-top:10px}
.rc-cgroup-h{display:flex;align-items:center;gap:10px;font-size:1.25rem;line-height:1.2;margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--rc-cat,#08A0E5);color:var(--ink)}
.rc-cgroup-h img{flex:0 0 auto}
.rc-cgroup-general .rc-cgroup-h{border-bottom-color:var(--ink)}
.rc-pgroup{margin:16px 0 4px}
.rc-pgroup-h{display:flex;align-items:baseline;gap:10px;font-size:1.02rem;margin:0 0 8px}
.rc-pgroup-h a{color:var(--ink);text-decoration:none}
.rc-pgroup-h a:hover{color:var(--accent);text-decoration:underline}
.rc-pgroup-n{font-size:.8rem;font-weight:600;color:#5B6B7B;background:#EEF3F7;border-radius:999px;padding:2px 8px}
.rc-pgroup .rc-row+.rc-row{margin-top:8px}
@media (max-width:600px){.rc-libview{display:flex;width:100%}.rc-libview-btn{flex:1;padding:10px 8px;font-size:.9rem}.rc-cgroup-h{font-size:1.1rem}}
/* About v9: photoreal night globe in a dark rounded panel (panel colours baked into the image) */
.page-about .about-origin-text{max-width:760px;margin:0 auto;text-align:center}
.page-about .about-origin-text .sec-typo{margin-left:auto;margin-right:auto}
.page-about .about-origin-text .lead{max-width:62ch;margin-left:auto;margin-right:auto}

/* Karen 2026-10-02 nav fixes */
.crumbs-full{display:contents}
.crumbs-m{display:none}
@media (max-width:640px){.crumbs-full{display:none}.crumbs-m{display:inline}}
.pdp-backcat{margin:10px 0 0;font-size:14px}
.pdp-backcat a{color:var(--green);font-weight:600}
.pdp-evlinks .pinfo-links{display:flex;flex-wrap:wrap;gap:12px 28px}
.doc-prods{margin:6px 0 14px 14px;font-size:13.5px;color:var(--ink-3)}
.doc-prods a{color:var(--green);font-weight:600}
.study-products a.study-prod-tag{text-decoration:none}
.study-products a.study-prod-tag:hover{text-decoration:underline}
.tc-back-hub{margin:8px 0 0;font-size:14px}
.tc-back-hub a{font-weight:600}
.tc-panel-title .rc-prod a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.mobile-menu a.is-current{color:var(--green);font-weight:700}
.mobile-menu .mml.is-current{box-shadow:inset 3px 0 0 var(--green);padding-left:10px}
.mobile-menu .mm-acc.is-current-cat>.mm-acc-h{color:var(--green)}
.mega a.is-current{color:var(--green);font-weight:700}
.mega .mm-cat-h.is-current-cat{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* ============================================================================
   MOBILE AUDIT FIXES #1–#9 (Karen approved 2026-10-02) — phones / touch only.
   Design-only: no copy, no content removed. Desktop (fine pointer, >820px) unchanged.
   ========================================================================== */

/* #1 sticky header — subtle lift once the page scrolls under it (class set by main.js) */
@media (max-width:820px){
  .hdr{transition:box-shadow .2s ease}
  .hdr.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 24px rgba(15,23,42,.07)}
}

/* #3 category heroes — cap at ~42svh on phones so the category name + intro show in the first screen */
@media (max-width:640px){
  .pdp-band.cat-hero-band{height:clamp(250px,42vh,360px) !important;height:clamp(250px,42svh,360px) !important}
  .pdp-band.cat-hero-band .pdp-band-in{padding-top:22px}
  .pdp-band.cat-hero-band .pdp-typo{font-size:clamp(34px,10.5vw,44px);line-height:.98}
  .pdp-band.cat-hero-band .pdp-band-shade{background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.62) 30%,rgba(255,255,255,.12) 60%,rgba(255,255,255,0) 78%)}
}

/* PDP hero sits closer to the breadcrumb on phones (less dead space above the product name) */
@media (max-width:640px){.pdp-page .prog-hero{padding-top:4px}.pdp-page .prog-hero-in{padding-top:18px}}

/* #4 PDP sticky action bar — phones only; slides in after the hero buttons scroll away */
.pdp-actionbar{display:none}
@media (max-width:640px){
  .pdp-actionbar{display:grid;grid-template-columns:1.22fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:72;
    padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
    border-top:1px solid rgba(15,23,42,.08);box-shadow:0 -10px 30px rgba(15,23,42,.08);
    transform:translateY(calc(100% + 12px));visibility:hidden;
    transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s linear .32s}
  .pdp-actionbar.show{transform:none;visibility:visible;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .pdp-actionbar .btn{min-height:48px;padding:6px 12px;justify-content:center;text-align:center;gap:7px;
    font:650 14px/1.15 var(--font);letter-spacing:-.005em;white-space:normal;border-radius:14px}
  .pdp-actionbar .btn svg{width:17px;height:17px;flex:none}
  .pdp-actionbar .btn-ghost{background:#fff}
  body.has-actionbar .ftr{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  .pdp-actionbar{grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
  .pdp-actionbar .btn{white-space:nowrap}
}
@media (max-width:400px){
  .pdp-actionbar .btn svg{display:none} /* icon drops on narrow phones so both labels stay on one line */
  .pdp-actionbar .btn{padding:6px 8px;font-size:14px}
}
@media (max-width:360px){
  .pdp-actionbar{gap:8px;padding-left:10px;padding-right:10px}
  .pdp-actionbar .btn{font-size:13.5px;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.pdp-actionbar,.pdp-actionbar.show{transition:none}}

/* #5 tap targets ≥44–48px on touch */
@media (pointer:coarse), (max-width:640px){
  .hamburger{width:44px;height:44px}
  .hdr-search{width:44px;height:44px;justify-content:center}
  .mm-close{top:10px;right:10px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
    border:0;border-radius:50%;background:var(--band);color:var(--ink);cursor:pointer}
  .mm-close svg{width:22px;height:22px}
  .mobile-menu{padding-top:64px}
  .mml-p{padding-top:12px;padding-bottom:12px}
  .crumbs{padding-top:4px;gap:4px 7px}
  .crumbs a,.crumbs-m{display:inline-flex;align-items:center;min-height:44px}
  .pdp-backcat{margin:0}
  .pdp-backcat a{display:inline-flex;align-items:center;min-height:44px}
  .faq{padding:0 18px}
  .faq summary{padding:14px 0;min-height:48px;line-height:1.35}
  .faq[open]{padding-bottom:16px}
  .faq p{margin-top:0}
  .doc-dl{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-8px -10px -8px 0;border-radius:50%;flex:none}
  .pw-link{min-height:44px;margin-top:6px}
  .pcard-link,.study-prod-tag,.study-title-link,.rc-banner-go{display:inline-flex;align-items:center;min-height:44px}
  .chat-suggs button,.sup-pill,.fmt-chip,.pcard-qv,.ask-sugg,.home-doc-chip,.mini{min-height:44px;display:inline-flex;align-items:center}
  .btn{min-height:48px}
  .btn-sm{min-height:44px}
  .icon-btn{width:44px;height:44px}
  .chat-priv summary{padding:10px 0;cursor:pointer}
  .sup-filter input{min-height:44px}
  .ftr-sitemap .fcol h4 a{display:inline-flex;align-items:center;min-height:44px}
  .ftr-sitemap .fcol>a{display:flex;align-items:center;min-height:44px;padding:4px 0;line-height:1.3}
  .ftr-bar a{display:inline-flex;align-items:center;min-height:44px}
  .ss-cell a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin-right:-6px}
  .sus-link{min-height:44px}
  a.reg-pill{min-height:44px}
  .home-comp-links{row-gap:0}
  .home-comp-links a{display:inline-flex;align-items:center;min-height:44px}
  .home-doc-chip{min-width:44px;justify-content:center}
  .logo{min-height:44px}
}
@media (max-width:640px){
  /* footer link groups flow in two columns so 44px rows don't double the footer height */
  .ftr-sitemap .fcol{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;align-content:start}
  .ftr-sitemap .fcol h4{grid-column:1/-1;margin-bottom:4px}
  .ftr-sitemap .fcol>a[href^="mailto:"]{grid-column:1/-1}
}

/* #6 contact — cards and form fit the column (no clipped right edge) */
@media (max-width:820px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-cards{grid-template-columns:minmax(0,1fr)}
  .contact-card,.contact-form{min-width:0}
  .contact-card span{overflow-wrap:anywhere}
  .contact-form input,.contact-form select,.contact-form textarea{width:100%;min-width:0}
}
@media (max-width:640px){.contact-form{padding:22px 18px}}

/* #7 form fields 16px so iOS Safari never zooms on focus */
@media (pointer:coarse), (max-width:820px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px !important}
  .so-bar input{font-size:17px !important}
  .contact-form input,.contact-form select{min-height:48px}
}

/* #8 assistant — full-width bottom sheet on phones, Send always visible */
@media (max-width:480px){
  body.chat-open::after{content:"";position:fixed;inset:0;z-index:75;background:rgba(15,23,42,.38);animation:bdfade .2s ease-out}
  .chat-panel{left:0;right:0;bottom:0;width:100%;max-width:none;height:min(86vh,calc(100vh - 24px));height:min(86dvh,calc(100dvh - 24px));
    border-radius:22px 22px 0 0;border:0;box-shadow:0 -18px 50px rgba(15,23,42,.28);animation:bdsheet .3s cubic-bezier(.2,.8,.2,1)}
  .chat-head{position:relative;padding:20px 12px 12px 18px}
  .chat-head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:4px;background:rgba(255,255,255,.55)}
  .chat-head .icon-btn{width:44px;height:44px}
  .chat-suggs{gap:8px;padding:10px 14px 2px}
  .chat-suggs button{padding:10px 15px;font-size:14px}
  .chat-form{gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))}
  .chat-form input{min-width:0;width:100%;min-height:44px}
  .chat-form button{width:44px;height:44px}
}
@keyframes bdsheet{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
@keyframes bdfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.chat-panel,body.chat-open::after{animation:none}}

/* #9 assistant button — tucked into the corner, out of the reading column; hides while scrolling down */
@media (max-width:640px){
  /* lifts use transform (not bottom) so moving above the cookie bar / action bar never counts as layout shift */
  body:not(.tc-page) .chat-fab{right:max(14px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
    width:52px;height:52px;padding:0;justify-content:center;transform:translateY(calc(-1 * var(--fab-lift,0px)));
    transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease,background .15s}
  body.cookie-open:not(.tc-page){--fab-lift:max(0px,calc(var(--cb-h,120px) - 4px - env(safe-area-inset-bottom,0px)))}
  body.actionbar-on:not(.tc-page){--fab-lift:64px}
  body.fab-away:not(.tc-page) .chat-fab{transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none}
  body.actionbar-on:not(.tc-page).fab-away .chat-fab{transform:translateY(-48px) scale(.6)}
  body:not(.tc-page) .chat-greet{bottom:calc(80px + env(safe-area-inset-bottom,0px));right:14px}
  body.fab-away .chat-greet{display:none}
  .cookie-bar{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){body .chat-fab{transition:none}}

/* ===== Home task bar (Karen 2026-10-02) — the "What are you looking for?" tasks in a slim bar docked under the
   sticky header once the task cards have scrolled past (main.js secnav). Below header z60 / mega menu / overlays. ===== */
.sn-dock{position:fixed;left:0;right:0;top:var(--sn-top,65px);z-index:59;height:50px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);box-shadow:0 6px 18px -10px rgba(15,23,42,.22);
  transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease,visibility 0s linear .26s}
body.sn-on .sn-dock{transform:none;opacity:1;visibility:visible;transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
body.sn-on .hdr,body.sn-on .hdr.is-stuck{box-shadow:none}
.sn-row{list-style:none;margin:0 auto;max-width:var(--wrap);height:100%;padding:0 24px;display:flex;justify-content:center;align-items:stretch;gap:4px}
.sn-row li{display:flex}
.sn-row li.sn-q{align-self:center;align-items:center;height:22px;margin-right:10px;padding-right:18px;border-right:1px solid var(--line);font:600 13px/1 var(--font);color:var(--ink-3)}
.sn-dock a,.sn-dock button{position:relative;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;margin:0;background:none;border:0;border-radius:0;
  font:600 13.5px/1.1 var(--font);color:var(--ink-2);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .18s ease}
.sn-ic{display:flex;color:var(--accent)}
.sn-ic svg{width:19px;height:19px}
.sn-short{display:none}
.sn-dock a:hover,.sn-dock button:hover{color:var(--ink);text-decoration:none}
.sn-dock a:focus-visible,.sn-dock button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:8px}
.sn-dock a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--accent);transform:scaleX(0);transition:transform .22s ease}
.sn-dock a.is-active{color:var(--accent-dark)}
.sn-dock a.is-active::after{transform:scaleX(1)}
.home-alpro [id]:is(.tax-grid-wrap,.home-band,.home-comp,.home-docs,.home-support){scroll-margin-top:126px}
@media (max-width:1023px){.sn-row li.sn-q{display:none}}
/* phones / small tablets: four equal tabs (icon over short label), no swiping; the bar carries Ask, so the
   floating assistant button steps away while the bar is docked */
@media (max-width:820px){
  .sn-row{padding:0 4px;gap:0;justify-content:space-between}
  .sn-row li{flex:1 1 0;min-width:0}
  .sn-dock a,.sn-dock button{width:100%;flex-direction:column;justify-content:center;gap:4px;padding:4px 2px 5px;font-size:11.5px;letter-spacing:.005em}
  .sn-full{display:none}.sn-short{display:inline}
  .sn-ic svg{width:20px;height:20px}
  .sn-dock a::after{left:26%;right:26%}
  body.sn-on.sn-has-ask:not(.tc-page) .chat-fab,body.sn-on.sn-has-ask .chat-greet{opacity:0;pointer-events:none;transform:translateY(calc(100% + 28px))}
  .home-alpro [id]:is(.tax-grid-wrap,.home-band,.home-comp,.home-docs,.home-support){scroll-margin-top:122px}
}
/* 4-card bands (Instruments with AlproZyme, i3): one row of four on desktop */
@media (min-width:961px) and (max-width:1099px){.home-band-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.home-band-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}.home-band-cards-4 .home-mini-img{height:124px;padding:12px}.home-band-cards-4 .home-mini-img>img:not(.pcard-tax){max-height:100px}.home-band-cards-4 .home-mini-name{font-size:14.5px;padding:11px 12px 13px}}
/* About: in-page section nav in the same bar (Karen 2026-10-02) — text items from the section headings;
   phones: one swipeable row of pill chips with fade edges, 46px hit areas */
.sn-dock-sections .sn-scroll{height:100%}
.page-about section[id]{scroll-margin-top:126px}
@media (max-width:820px){
  .sn-dock-sections .sn-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,28px)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl,0px),#000 calc(100% - var(--fr,28px)),transparent 100%)}
  .sn-dock-sections .sn-scroll::-webkit-scrollbar{display:none}
  .sn-dock-sections .sn-row{width:max-content;max-width:none;justify-content:flex-start;align-items:center;padding:0 10px;gap:4px}
  .sn-dock-sections .sn-row li{flex:0 0 auto}
  .sn-dock-sections a{flex-direction:row;width:auto;height:36px;padding:0 14px;border-radius:999px;font-size:13px;white-space:nowrap}
  .sn-dock-sections a::after{display:none}
  .sn-dock-sections a::before{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
  .sn-dock-sections a.is-active{background:var(--accent-soft);color:var(--accent-dark);box-shadow:inset 0 0 0 1px rgba(8,160,229,.18)}
  .page-about section[id]{scroll-margin-top:122px}
}
@media (prefers-reduced-motion:reduce){.sn-dock,.sn-dock a,.sn-dock a::after{transition:none}}
@media print{.sn-dock{display:none!important}}


/* Magda 2026-10-04 About: green Black Forest + biodegrade; blue Why / Audit / Next */
.page-about .about-story-green{background:linear-gradient(180deg,#0A5A47,#083f33)!important;border-top:0}
.page-about .about-story-green .eyebrow{color:#9AD9C5!important}
.page-about .about-story-green .sec-typo{color:#fff!important}
.page-about .about-story-green .sec-typo span:not(.brand-alpro){color:#9AD9C5!important}
.page-about .about-story-green .sec-typo span.brand-alpro{color:#e10017!important}
.page-about .about-red .about-story-green .hl{color:#9AD9C5!important}
.page-about .about-red .about-story-green .bd{color:#9AD9C5!important}
.page-about .about-story-green .alt-txt .lead{color:rgba(255,255,255,.86)!important}
.page-about .about-biodegrade .eyebrow{color:var(--green)}
.page-about .about-audit{background:#E8F5FB}
.page-about .about-why .eyebrow,.page-about .about-close .eyebrow,.page-about .about-audit .eyebrow{color:var(--accent)}

/* ---- Gutachten / Scientific Data (catalogue pp.70–71, AU/NZ) — Karen 2026-10-05 ---- */
.gutachten-sec{padding-top:clamp(36px,5vw,56px);padding-bottom:clamp(28px,4vw,48px)}
.gutachten-sec .sec-head{margin-bottom:14px}
.gut-source{max-width:72ch;margin:10px 0 28px;font-size:14px;color:var(--ink-2);line-height:1.55;padding:14px 18px;background:var(--band);border-left:3px solid var(--accent);border-radius:0 10px 10px 0}
.gut-group{margin-top:32px}
.gut-cat{font:800 13px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.gut-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.gut-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:var(--shadow-sm,0 1px 2px rgba(15,23,42,.04))}
.gut-prod{margin:0 0 6px;font-size:17px;line-height:1.3;color:var(--ink)}
.gut-prod a{color:var(--ink);text-decoration:none;font-weight:700}
.gut-prod a:hover{color:var(--accent)}
.gut-sep{color:var(--ink-3);font-weight:500}
.gut-as{margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}
.gut-lab{margin-top:12px}
.gut-lab + .gut-lab{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.gut-lab-name{margin:0 0 6px;font:650 13.5px/1.35 var(--font);color:var(--ink)}
.gut-lab ul{margin:0;padding:0 0 0 1.1em;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.gut-lab li{margin:3px 0}
@media (max-width:560px){.gut-grid{grid-template-columns:1fr}}

/* Homepage phone layout: compact category cards, with approved copy fully visible. */
@media (max-width:640px){
  .home-alpro .home-band{padding:20px 0}
  .home-alpro .home-band-main{gap:12px}
  .home-alpro .home-band-head{flex-direction:row;gap:10px}
  .home-alpro .home-band-head>div{min-width:0}
  .home-alpro .home-band-head .tax-card-icon{width:32px!important;height:32px!important;max-width:32px!important;max-height:32px!important}
  .home-alpro .home-band-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-alpro .home-mini{min-width:0;align-self:stretch}
  .home-alpro .home-mini-img{height:96px;padding:10px}
  .home-alpro .home-mini-img>img:not(.pcard-tax){max-height:76px}
  .home-alpro .home-mini-name{padding:10px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  .home-alpro .home-band-links{gap:8px}
  .home-alpro .wh-badges li{max-width:100%;white-space:normal}
}

/* Karen 2026-10-06: cleaner assistant (Microsoft-style) — greeting bubble + one quiet safety line under the input */
.chat-panel>.chat-priv{padding:0 16px 10px;font-size:11px;line-height:1.45;color:#64748B;text-align:center}
.chat-panel>.chat-priv b{color:#64748B;font-weight:600}
.chat-panel>.chat-priv details{display:inline}
.chat-panel>.chat-priv summary{display:inline;cursor:pointer;color:#067EB4;list-style:none;margin-left:4px}
.chat-panel>.chat-priv summary::-webkit-details-marker{display:none}
.chat-panel>.chat-priv details[open] p{text-align:left;margin-top:6px}
.chat-panel>.chat-form{border-top:1px solid var(--line);padding-bottom:8px}
.ans-greet p{line-height:1.55}
.chat-suggs a.sugg-link{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:600 12px var(--font);color:var(--green);text-decoration:none;display:inline-flex;align-items:center}
.chat-suggs a.sugg-link:hover{border-color:var(--green)}
@media (max-width:640px){.chat-suggs a.sugg-link{min-height:44px;padding:10px 15px;font-size:14px}}
.page-compliance .chat-suggs a.sugg-link{color:var(--water)}
.page-compliance .chat-suggs a.sugg-link:hover{border-color:var(--water)}

/* ---- Karen 2026-10-06 menu audit: one order everywhere (phone menu + footer groups) ---- */
/* phone menu: nested accordions — only the direct panel opens, only the own chevron turns */
.mobile-menu .mm-acc .mm-acc-p{display:none}
.mobile-menu .mm-acc.open>.mm-acc-p{display:block}
.mobile-menu .mm-acc .mm-acc-ic{transform:none}
.mobile-menu .mm-acc.open>.mm-acc-h .mm-acc-ic{transform:rotate(90deg)}
.mobile-menu .mml,.mobile-menu .mm-acc-h{min-height:48px;display:flex;align-items:center}
.mobile-menu .mml-p{display:flex;align-items:center;min-height:44px;padding-top:10px;padding-bottom:10px;line-height:1.3}
/* Products panel: indented one level; umbrella slogans as clear subheads (still links to their pages) */
.mobile-menu .mm-prod-p{padding:0 0 10px 14px;border-left:2px solid var(--line);margin-left:2px}
.mobile-menu .mm-prod-p .mm-acc:last-child{border-bottom:0}
.mobile-menu .mm-prod-p .mm-acc-h{font:600 15.5px var(--font)}
.mobile-menu .mml-sub{display:flex;align-items:flex-end;min-height:44px;padding:16px 0 8px;border-bottom:1px solid var(--line);
  font:700 12px/1.35 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.mobile-menu .mml-sub:first-child{padding-top:6px}
.mobile-menu a.mml-sub.is-current{color:var(--green)}
/* divider between Products and the rest of the menu */
.mobile-menu .mm-sep{height:0;margin:14px 0 0;border-top:2px solid var(--ink)}
.mobile-menu .mm-sep+.mml{border-top:0}
/* Documents / Training centre sit under Resource centre */
.mobile-menu .mml-child{padding-left:18px;font:500 15px var(--font);color:var(--ink-2)}
.mobile-menu .mml.mml-child.is-current{padding-left:24px}

/* footer: Products | Resources & compliance | Company | Legal, then locale + © */
.ftr-grid.ftr-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 40px;padding-top:32px}
.ftr-groups .fgroup-products{grid-column:1/-1}
.ftr-groups .fgroup-h{font:700 12.5px var(--font);letter-spacing:.1em;text-transform:uppercase;color:#fff;
  margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #243247}
.ftr-groups .fprod-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 22px}
.ftr-groups .fprod-col h4{margin-bottom:10px}
.ftr-groups .fprod-col h4 a{color:inherit;text-decoration:none}
.ftr-groups .fprod-col h4 a:hover{color:#fff}
.ftr-groups .ftr-mail{overflow-wrap:anywhere}
.ftr-groups .ftr-trust{margin-top:14px;font-size:13px}
.fcol .ftr-trust .alpro-logo-link{display:inline-flex;padding:0}
.ftr-groups .ftr-alpro{margin-top:8px}
.ftr-groups .ftr-alpro a{display:inline;padding:0}
.ftr-bar{justify-content:space-between}
.ftr-bar .copy{margin-left:0}
@media (max-width:1020px){
  .ftr-groups .fprod-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  /* phones: one tidy column; Products = the five area links only (every product is in the menu) */
  .ftr-grid.ftr-groups{grid-template-columns:minmax(0,1fr);gap:28px;padding:24px 24px 28px}
  .ftr-brand{padding-top:32px}
  .ftr-logo{height:52px}
  .ftr-groups .fprod-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .ftr-groups .fprod-col .fp-link{display:none}
  .ftr-groups .fprod-col h4{margin:0;font:400 14.5px var(--font);letter-spacing:0;text-transform:none;color:#D7E0EA}
  .ftr-groups .fprod-col h4 a{display:flex;align-items:center;min-height:44px}
  .ftr-groups .fcol>a{display:flex;align-items:center;min-height:44px;padding:0;font-size:14.5px;line-height:1.3}
  .ftr-groups .ftr-alpro a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
  .fcol .ftr-trust .alpro-logo-link{min-height:44px;vertical-align:middle}
  .ftr-groups .ftr-trust{line-height:1.6}
  .ftr-bar{flex-direction:column;align-items:flex-start;gap:6px;padding:18px 24px 22px}
}
.page-compliance .ftr-groups .fgroup-h{color:#fff!important} /* group headings stay white (compliance page tints h1–h3) */

/* ---- Karen 2026-10-06 (2): phone-menu typography — calm, footer-like links; clear hierarchy
   top level 16/600 ink  >  group subhead 12/600 caps ink  >  area + Resource-centre children 15/400 slate  >  products 14/400 lighter slate */
.mobile-menu .mml,.mobile-menu .mm-acc-h-top{font:600 16px/1.3 var(--font);color:var(--ink)}
.mobile-menu .mml-sub{font:600 12px/1.35 var(--font);letter-spacing:.08em;color:var(--ink)}
.mobile-menu .mm-prod-p .mm-acc-h{font:400 15px/1.3 var(--font);color:#334155}
.mobile-menu .mml.mml-child{font:400 15px/1.3 var(--font);color:#334155}
.mobile-menu .mml-p{font:400 14px/1.3 var(--font);color:#475569}
.mobile-menu .mml-p.mml-all{font-weight:500;color:var(--green)}
/* current page: colour + left bar stay; nested items get a gentler weight */
.mobile-menu a.is-current{color:var(--green)}
.mobile-menu .mml-p.is-current,.mobile-menu .mml.mml-child.is-current,.mobile-menu a.mml-sub.is-current{font-weight:600}
.mobile-menu .mm-prod-p .mm-acc.is-current-cat>.mm-acc-h{color:var(--green);font-weight:500}
.mobile-menu .mm-prod-p .mm-acc-ic{color:#64748B}

/* ---- Karen 2026-10-07: phone footer (<=768px) matches the phone menu — light surface, same type scale.
   top level 16/600 ink  >  group subhead 12/600 caps #0F172A .08em  >  children 15/400 #334155  >  secondary 14/400 #475569.
   Layout/typography only; desktop footer unchanged. */
@media (max-width:768px){
  .ftr{background:#F8FAFC;color:#475569;border-top:1px solid #E2E8F0}
  .ftr-brand{padding:32px 24px 0}
  .ftr-logo{height:48px}
  .ftr-grid.ftr-groups{grid-template-columns:minmax(0,1fr);gap:0;padding:8px 24px 24px}
  .ftr-groups .fgroup{padding:24px 0 16px;border-bottom:1px solid #E2E8F0}
  .ftr-groups .fgroup:last-child{border-bottom:0}
  .ftr-groups .fgroup-h,.page-compliance .ftr-groups .fgroup-h{font:600 12px/1.35 var(--font)!important;letter-spacing:.08em;text-transform:uppercase;
    color:#0F172A!important;margin:0 0 6px;padding:0;border:0}
  .ftr-groups .fprod-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .ftr-groups .fprod-col .fp-link{display:none}
  .ftr-groups .fprod-col h4{margin:0;font:400 15px/1.3 var(--font);letter-spacing:0;text-transform:none;color:#334155}
  .ftr-groups .fprod-col h4 a,.page-compliance .ftr-groups .fprod-col h4 a{display:flex;align-items:center;min-height:44px;padding:0;font:400 15px/1.3 var(--font);color:#334155}
  .ftr-groups .fcol{display:block}
  .ftr-groups .fcol>a,.page-compliance .ftr-groups .fcol>a{display:flex;align-items:center;min-height:44px;padding:0;
    font:600 16px/1.3 var(--font);color:#0F172A}
  .ftr-groups .fcol>a.fchild,.page-compliance .ftr-groups .fcol>a.fchild{font:400 15px/1.3 var(--font);color:#334155;padding-left:16px}
  .ftr-groups .fcol>a.ftr-mail,.page-compliance .ftr-groups .fcol>a.ftr-mail{font:400 14px/1.3 var(--font);color:#475569}
  .ftr-groups .fgroup:last-child .fcol>a,.ftr-groups .fgroup:last-child>a,.page-compliance .ftr-groups .fgroup:last-child>a{font:400 14px/1.3 var(--font);color:#475569}
  .ftr-groups .ftr-trust{margin-top:8px;font:400 14px/1.6 var(--font);color:#475569}
  .ftr-groups .ftr-alpro{margin-top:0}
  .ftr-groups .ftr-alpro a,.page-compliance .ftr-groups .ftr-alpro a{display:inline-flex;align-items:center;min-height:44px;font:400 14px/1.3 var(--font);color:#475569;text-decoration:underline;text-underline-offset:3px}
  .ftr .fcol a:hover,.ftr .ftr-bar a:hover{color:var(--green)}
  .ftr-bar{flex-direction:column;align-items:flex-start;gap:4px;padding:18px 24px 24px;border-top:1px solid #E2E8F0;
    font:400 14px/1.4 var(--font);color:#475569}
  .ftr-bar .locale{font-weight:600;color:#0F172A}
}

/* Karen 2026-10-16: AlproZyme hero readability — text block on a semi-opaque white panel (only pages with bandPanel) */
.pdp-band-panel-box{padding:24px 30px;max-width:760px} /* Karen 2026-10-16: white panel box removed (background/blur/radius/shadow) */
.pdp-band-panel-box .pdp-band-slogan-sub{color:#1a3d22 !important}
@media (max-width:600px){.pdp-band-panel-box{padding:16px 18px;max-width:none}}
.pdp-band-panel-box .pdp-band-panel-body{margin-top:6px} /* Karen 2026-10-16: body lines use the standard .pdp-lead style */
/* Karen 2026-10-16: every page's hero heading in brand blue (var(--accent)), EXCEPT About (stays green, red "alpro." untouched).
   Covers: product hero slogans (.pdp-band-slogan-text), category/compliance/support typo words (.pdp-typo + spans),
   and page h1s (home, contact, legal, research, resources, training …). Product-name h1 (.prog-name) and the
   category sub-claim h1 (.pdp-claim) are not hero headings and keep their colour. */
body:not(.page-about) main h1:not(.prog-name):not(.pdp-claim),
body:not(.page-about) .pdp-typo,
body:not(.page-about) .pdp-typo span{color:var(--accent) !important}
/* Karen 2026-10-16: Water management category hero — the 5-line "wa/ter/qual/i/ty." typo is taller than the band
   on desktop, so "ty." was clipped. Scoped to category bands whose typo has 5+ lines (only Water management today);
   slightly smaller type so all lines fit. Words, colour and photo unchanged. */
@media (min-width:641px){
  .pdp-band.cat-hero-band:has(.pdp-typo span:nth-child(5)) .pdp-typo{font-size:clamp(52px,6.6vw,108px);line-height:.84}
}

/* ===== Pixel review 2026-10-16 (Karen OK) — 1) heading sizes ===== */
:root{--h1-hero:clamp(2rem, 1.2rem + 2.6vw, 3.25rem)}
.prog-name,.pdp-claim,.page-hero h1{font-size:var(--h1-hero);font-weight:800}
h2{font-size:34px;font-weight:800}
.pdp-page h2:not(.sec-typo){font-weight:800}
.sec-typo{line-height:1.0}
@media (max-width:600px){
  h2{font-size:26px}
  body .sec-typo{font-size:28px;line-height:1.05}
}

/* ===== Pixel review 2026-10-16 (Karen OK) — 2) spacing ===== */
:root{--section-y:96px;--section-y-tight:64px}
section.wrap,.band>.wrap{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.pdp-page section.wrap{padding-top:var(--section-y-tight);padding-bottom:var(--section-y-tight)}
.prog-hero{padding:40px 32px}
.wh-eyebrow{line-height:1.4}
@media (max-width:600px){
  :root{--section-y:56px;--section-y-tight:40px}
  .prog-hero,.pdp-page .prog-hero{padding:20px 24px}
  .page-hero{padding:40px 32px}
}

/* (AlproZyme-only InterVar trial removed 2026-10-16 — Inter variable is now site-wide via the @font-face at the top) */

/* Karen 2026-10-16: all small eyebrow / kicker / category labels in brand blue (var(--accent) #08A0E5), one shared rule.
   Excludes About (its own red/alpro styling) and .eyebrow.light (light labels on dark bands). Colour only. */
body:not(.page-about) :is(.eyebrow:not(.light), .prog-cat-name){color:var(--accent) !important}

@media (max-width:600px){br.br-desk{display:none}} /* Karen 2026-10-16: desktop-only heading break */

/* ===== Karen 2026-10-16: product heroes — ONE headline style (desktop photo-band heading + phone heading) =====
   Same family, weight, size token, line-height, letter-spacing and colour on every product page. Replaces the
   per-page inline colours on the phone heading and the i3 one-word "typo" style (stacked spans, 900, lowercase, huge).
   Sub-lines (body text) keep their own colour. */
:root{--hero-headline:clamp(22px, 1rem + 1.6vw, 38px)}
html body .pdp-band-slogan .pdp-typo.pdp-band-slogan-text,
html body .prog-slogan.prog-slogan-mobile{
  font-family:var(--disp);font-weight:800;font-size:var(--hero-headline);line-height:1.12;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--accent) !important;text-shadow:none;max-width:16em /* uppercase: Karen 2026-10-16, match Alpron */
}
html body .pdp-band-slogan .pdp-band-slogan-text span{display:inline;color:inherit !important}

/* Karen 2026-10-16: product hero headline clearly bigger than the product name (.prog-name = var(--h1-hero): 52px desktop / 32px phone).
   Headline: 56px desktop (1440) / 36px phone (390). */
:root{--hero-headline:clamp(36px, 1.3rem + 2.6vw, 56px)}
html body .pdp-band-slogan .pdp-typo.pdp-band-slogan-text{max-width:15em}
/* phone sub-lines keep their previous size (body text unchanged) */
html body .prog-slogan.prog-slogan-mobile .prog-slogan-sub{font-size:clamp(17px,4.8vw,20px);line-height:1.2;letter-spacing:0;display:inline-block;margin-top:4px}

/* Karen 2026-10-16 fix 1: wider product hero headline box + balanced wrapping (all 20 product pages, AlproZyme included) */
html body .pdp-band-slogan .pdp-typo.pdp-band-slogan-text,
html body .prog-slogan.prog-slogan-mobile{max-width:20em;text-wrap:balance}

/* Karen 2026-10-16 fix 2: slightly smaller phone headline (36px -> 33px at 390), still > product name (32px). Desktop 56px unchanged. */
:root{--hero-headline:clamp(33px, 1.3rem + 2.6vw, 56px)}

/* Karen 2026-10-16 fix 3: ONE shared soft white left fade (no box) on every product hero photo, generalised from the
   AlproZyme-only rule (removed). Desktop only (photo band hidden on phone); right side of the photo stays clear. */
@media (min-width:601px){
  html body .pdp-band-slogan .pdp-band-shade-soft{
    background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 50%,rgba(255,255,255,.72) 60%,rgba(255,255,255,.25) 70%,rgba(255,255,255,0) 78%);
  }
}

/* Karen 2026-10-16 fix 4: phone-only hero headline above the series section (AlproJet-D/W) */
.prog-slogan-top{display:none}
@media (max-width:600px){.prog-slogan-top{display:block;padding-top:20px}.prog-slogan-top .prog-slogan-mobile{display:block;margin:0}}

/* Karen 2026-10-16 fix 1 (cont.): AlproZyme's panel wrapper capped the headline at 760px; let the shared 20em box apply */
html body .pdp-band-slogan .pdp-band-panel-box{max-width:none}

/* Karen 2026-10-16: phone (<=480px) product heroes — headline 26px, product name 22px (product pages only); desktop unchanged */
@media (max-width:480px){
  html:has(.pdp-band-slogan) body .prog-slogan.prog-slogan-mobile{font-size:26px}
  html:has(.pdp-band-slogan) body .prog-hero .prog-name{font-size:22px}
}

/* =====================================================================================================
   Design audit v5.1 (branch design-audit, 2026-10-16). Design only: no wording, codes, ARTG numbers or claims
   changed. Kept: product hero headline (uppercase, Inter, #08A0E5, 56px desktop / 26px phone), About hero,
   brand blue #08A0E5 for large fills and hero headlines, category colours.
   ===================================================================================================== */

/* --- Fix 1: contrast (WCAG AA 4.5:1 for small text, 3:1 for large text / UI) ----------------------------
   #08A0E5 is 2.93:1 on white, so small blue text and white-on-blue buttons failed AA.
   Small coloured text now uses a darker shade of the SAME hue (70% of the section accent: #08A0E5 -> #0670A0,
   4.86:1 or better on white and on every tint). Buttons use #097DB6 (white text 4.54:1). Large brand-blue
   bands keep #08A0E5 and switch their text to ink (6.1:1). */
:root{--accent-text:color-mix(in srgb,var(--accent,#08A0E5) 70%,#000);--btn-blue:#097DB6;--btn-blue-hover:#0670A0}
:where(body:not(.page-about)) a{color:var(--accent-text)} /* zero-specificity: replaces only the default link colour */
html body:not(.page-about) :is(.eyebrow:not(.light),.prog-cat-name,.pw-link,.pcard-link,.benefit-link,.doc-type,.artg-link,.pinfo-links a){color:var(--accent-text) !important}
html body:not(.page-about) .btn:not(.btn-ghost):not(.btn-light),
html body:not(.page-about) .reg-pill{background:var(--btn-blue) !important;color:#fff !important}
html body:not(.page-about) .btn:not(.btn-ghost):not(.btn-light):hover,
html body:not(.page-about) a.reg-pill:hover{background:var(--btn-blue-hover) !important;filter:none}
html body:not(.page-about) .btn-ghost{color:var(--btn-blue-hover) !important;box-shadow:inset 0 0 0 1.5px var(--btn-blue) !important;background:transparent}
html body:not(.page-about) .btn-ghost:hover{background:#E6F5FC}
/* brand-blue bands: keep #08A0E5, text in ink */
html body:not(.page-about) :is(.band-green,.sales-band){color:#0F172A}
html body:not(.page-about) :is(.band-green,.sales-band) :is(h2,h3,p,li,b,strong,span:not(.chev),.sec-typo,.eyebrow,.eyebrow.light,a:not(.btn)){color:#0F172A !important}
html body:not(.page-about) :is(.band-green,.sales-band) .stat span{color:#0F172A !important;opacity:.85}
/* chat button (fixed, outside main) and the top promo strip: same rule */
html body:not(.page-about) .chat-fab{background:var(--btn-blue) !important;color:#fff}
html body:not(.page-about) .chat-fab:hover{background:var(--btn-blue-hover) !important}
html body .promo-strip{color:#0F172A}
/* remaining small/medium text that used #08A0E5 directly */
html body:not(.page-about) :is(.nav-item.on .nav-tab,.nav-tab:hover){color:var(--btn-blue-hover)}
html body:not(.page-about) .btn-light{color:var(--btn-blue-hover) !important}
html body:not(.page-about) :is(.pdp-backcat a,.fn,.pw-rn,.variant.on,.fmt-label,a.fmt-chip,.ev-table th,.pw-abc-i b,.pinfo-row dt){color:var(--accent-text) !important}
html body:not(.page-about) :is(.pw-sn,.fmt-chip.on){background:var(--btn-blue) !important;border-color:var(--btn-blue) !important;color:#fff !important}
html body:not(.page-about) .variant.on{border-color:var(--btn-blue)}
html body:not(.page-about) .why-use-h:is([style*="08A0E5" i],[style*="00A0E3" i]){color:var(--accent-text) !important}
html body:not(.page-about) .verify-note{color:#475569}
/* category-coloured labels: keep the category hue, darken it for text (70%, same as above) */
html body:not(.page-about) :is(.pcard-cat,.tax-card-name,.why-use-h):is([style*="08A0E5" i],[style*="00A0E3" i]){color:#00709F !important}
html body:not(.page-about) :is(.pcard-cat,.tax-card-name,.why-use-h)[style*="1EAA4A" i]{color:#157734 !important} /* Surfaces green, darker shade */
html body:not(.page-about) :is(.pcard-cat,.tax-card-name,.why-use-h)[style*="2B78B0" i]{color:#1E5F8E !important}
html body:not(.page-about) .pcard-cat{font-size:12px}
/* AlproJet D / W schedule chips: same hues, deep enough for white text */
html body .sched-chip.d{background:#1F6E9A !important}
html body .sched-chip.w{background:#B4561A !important}
/* large section headings (sec-typo, 28-52px): 3:1 needed; #08A0E5 is 2.93 on white / 2.80 on the light band.
   92% of the same blue (#0793D3) reaches 3.2+ and is visually the same colour. Product hero headlines keep #08A0E5. */
html body:not(.page-about) .sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo){color:color-mix(in srgb,var(--accent,#08A0E5) 92%,#000)}
html body:not(.page-about) .pdp-page .sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo),
html body:not(.page-about) .pw-sec .sec-typo{color:color-mix(in srgb,var(--accent,#08A0E5) 92%,#000)}
html body:not(.page-about) main h3[style*="color:var(--green)"]{color:var(--accent-text) !important} /* AlproJet use-case headings */

/* --- Fix 2: green only on About us (Karen's rule). Logo, the green "Biodegree" name and category colours are
   exempt. Everything else that rendered green / mint outside About is mapped to the blue/ink system. -------- */
/* product hero sub-lines: were green (#1F7A2E, #298931, #1a3d22) on water / instruments / surfaces pages,
   blue on others — one colour on every product page, desktop and phone */
html body:not(.page-about) :is(.pdp-band-slogan-sub,.prog-slogan-sub,.pdp-band-panel-box .pdp-band-slogan-sub){color:var(--accent-text) !important}
/* mint labels on dark grounds -> light blue (same value About already uses on dark bands) */
html body:not(.page-about) :is(.eyebrow.light,.fcol .nl-msg,.cookie-bar a,.wide-feat.dark .wf-k,.info-col:hover b,.info-col svg,.info-go,.info-go svg,.ev-glance-k,.badge b,.moat-dark .eyebrow,.moat-dark .moat-pillars-k,.moat-dark .pcard-link,.reach-band .hl,.moat-dark .eo-k,.sales-trust li svg,.chat-title span,.bc-txt .ph-cap){color:#B8E0F5 !important}
/* mint-white body text on dark grounds -> neutral near-white */
html body:not(.page-about) :is(.hc-eyebrow,.bc-txt p,.bc-overlay p,.bleed-txt p,.ticks li,.portal-card-txt span,.ch-txt .lead){color:#E2E8F0}
/* dark-green grounds -> navy ink */
html body:not(.page-about) :is(.cookie-bar,.hero-carousel){background:#0F172A}
html body:not(.page-about) .cookie-bar{color:#E2E8F0}
html body:not(.page-about) .cookie-bar .btn-ghost{color:#B8E0F5 !important;box-shadow:inset 0 0 0 1.5px #475569 !important}
html body:not(.page-about) .newsletter input{background:#1E293B;border-color:#334155}
html body:not(.page-about) .sus-shade{background:linear-gradient(90deg,rgba(15,23,42,.74) 0%,rgba(15,23,42,.45) 55%,rgba(15,23,42,.15) 100%)}
/* green-grey text (#52625B) -> slate */
html body:not(.page-about) :is(.assistant-contact>p,.rc-tile-txt span,.rc-filter-lbl,.rc-lib-status,.rc-empty,.rc-sel-list small,.rc-form-note,.rc-train-band-in .lead,.tc-banner-copy .lead){color:#475569}
/* chat button pulse ring: was green rgba(15,122,96) */
@keyframes fabpulse{0%{box-shadow:0 0 0 0 rgba(8,160,229,.45)}70%{box-shadow:0 0 0 15px rgba(8,160,229,0)}100%{box-shadow:0 0 0 0 rgba(8,160,229,0)}}

/* --- Fix 3: one left edge per breakpoint --------------------------------------------------------------
   Desktop: header, breadcrumb, product hero and footer text start at 144px (1200 wrap + 24 gutter), but the
   body sections (.pw-sec: key facts, essentials, docs, FAQ, related, help & support) started at 120px.
   Phone (390): body sections start at 18px but the product hero block started at 42px. */
@media (min-width:721px){section.wrap.pw-sec{padding-left:24px;padding-right:24px}} /* banded .pw-sec already has an inner .wrap */
html body .prog-hero,html body .pdp-page .prog-hero{padding-left:0;padding-right:0} /* centred .wrap inside already gives the gutter */

/* --- Fix 4: type scale on product pages ------------------------------------------------------------------
   Product pages used 20 font sizes, with 55-104 text elements under 14px per page (11, 11.5, 12, 12.5, 13,
   13.5). Two small tiers now: readable copy and links >= 14px; uppercase labels 13px (in-card meta 12px). */
html body :is(.pdp-page,main) :is(.pw-link,.pinfo-note,.ev-note,.ev-note a,.pcard-body>p,.pcard-qv,.sales-trust li,.portal-card-txt span,.verify-note,.pdp-info-note p,.variant,.variant-pack,figcaption,.doc-req,.fmt-chip){font-size:14px}
html body:not(.page-about) :is(.pdp-page,.pdp-crumbs,main) .crumbs :is(a,.cur,.crumb-plain,.crumbs-m){font-size:14px} /* About keeps its approved hero position */
html body .pdp-page :is(.eyebrow,.prog-cat-name,.pinfo-lbl,.ev-table th,.reg-pill,.pdp-refline){font-size:13px}
@media (max-width:760px){html body .pdp-page .pinfo-row dt{font-size:13px}} /* phone: uppercase label; desktop keeps 14.5px */
html body .pdp-page :is(.doc-type,.pcard-cat,.pcard-ref){font-size:12px}
html body .pdp-page .doc-b span{font-size:13px}
html body .pdp-page section.wrap > ol li{font-size:13px;line-height:1.5}

/* --- Fix 5: heading order. "Disclaimers" was an h4 directly after h2 sections (skipped h3) on every product
   page; it is its own section, so it is now an h2 — same small uppercase look as before. */
html body .disclaimers h2.disclaimers-h,html body .pdp-page .disclaimers h2.disclaimers-h{font:700 13px/1.4 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}

/* --- Fix 6: phone (<=600px) product hero order. The pack shot sat after all the copy and buttons
   (800-1900px down, 5800px+ on AlproJet). It now follows the category, product name, REF line and hero
   headline, so the product is visible in the first screen. Same elements, same text; order only. */
@media (max-width:600px){
  html body .prog-hero-in{row-gap:0}
  html body .prog-hero-copy{display:contents}
  html body .prog-hero-copy > *{order:6}
  html body .prog-hero-copy > .prog-cat{order:1}
  html body .prog-hero-copy > .prog-name{order:2}
  html body .prog-hero-copy > .pdp-refline{order:3}
  html body .prog-hero-copy > .prog-slogan-mobile{order:4}
  html body .prog-hero-media{order:5;margin:18px 0 22px}
}

/* --- Fix 7: vertical rhythm on product pages. Section gaps were 90-104px desktop / 80px phone except around
   the key-facts panel (205 / 197px desktop, 153px phone: the panel's .wrap added a second 64px / 44px).
   On phone the breadcrumb block also added 40px under the back link before the hero. */
html body .prog-facts > .wrap{padding-top:0;padding-bottom:0}
@media (max-width:600px){
  html body .pdp-page > .wrap:has(> .crumbs),html body main > .wrap:has(> .crumbs){padding-bottom:4px}
  html body .pdp-page .prog-hero-in{padding-top:8px}
}

/* --- Fix 8: pack shot panel. Product photos are white-background JPEGs (house rule: white, 40px margin) but sat
   on a light-grey #F8FAFC panel inside the white card, so every photo showed as a white box on grey. */
html body .prog-hero-media .pdp-pack .pdp-main{background:#fff}

/* --- Fix 9: keyboard focus. Links and buttons showed only the browser's thin default ring, and three search
   bars removed the outline (outline:0) with no replacement. One visible ring everywhere: 2px deep blue, 2px gap. */
html body :is(a,button,summary,[tabindex],input,select,textarea):focus-visible{outline:2px solid #0670A0;outline-offset:2px}
html body :is(.so-bar,.sup-filter,.rc-search,.hdr-search,.search-box):focus-within{outline:2px solid #0670A0;outline-offset:2px}
html body :is(.so-bar,.sup-filter,.rc-search) input:focus-visible{outline:0} /* the bar shows the ring */

/* Review follow-up: browsers without color-mix() (pre-2023) fall back to the fixed deep blues */
@supports not (color: color-mix(in srgb, red 50%, blue)){
  :root{--accent-text:#0670A0}
  html body:not(.page-about) .sec-typo{color:#0793D3}
}

/* --- Fix 12 (Karen 2026-10-16): homepage hero badge shows the official ALPRO logo (assets/brand/alpro-logo.png,
   unaltered) instead of the typed "ALPRO Medical GmbH" chip. Same white chip; alt text keeps the words. */
html body .wh-eyebrow-chip.wh-eyebrow-logo{padding:8px 12px;border-radius:8px;line-height:0}
html body .wh-alpro-logo{display:block;height:52px;width:auto}
@media (max-width:600px){html body .wh-eyebrow-chip.wh-eyebrow-logo{padding:6px 10px}html body .wh-alpro-logo{height:40px}}

/* --- Fix 13 (regression from fix 1): outline buttons on dark grounds keep white text and a white outline.
   Fix 1 forced every .btn-ghost to deep blue, which made "Compliance & audit" on the homepage hero
   (and ghost buttons on dark product bands) dark-on-dark. */
html body:not(.page-about) :is(.btn-on-dark,.pdp-band-dark .pdp-hero-cta .btn-ghost){color:#fff !important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85) !important;background:transparent}
html body:not(.page-about) :is(.btn-on-dark,.pdp-band-dark .pdp-hero-cta .btn-ghost):hover{background:rgba(255,255,255,.12) !important}

/* --- Fix 14 (Karen 2026-10-16, option A "Spotlight"): calmer homepage hero, same words.
   Order is now logo, headline, sub-line, buttons, body copy, credentials, footer line (buttons rise from about 630px
   to about 385px on desktop). The 7 credentials stay visible as one quiet row instead of 7 bordered chips; one at a
   time lights up (main.js, 2.2s each). No animation for reduced-motion users. */
html body .water-hero h1.wh-title{font-size:clamp(32px,3.9vw,52px);max-width:680px}
html body .water-hero .hero-cta{margin:6px 0 28px}
html body .water-hero .wh-body{margin:0 0 26px}
html body .water-hero .wh-body p{font-size:15.5px;max-width:560px;margin:0 0 4px;color:#E2EEF4}
html body .water-hero .wh-body p:has(strong:only-child){font-size:14.5px;color:#D5E6EF}
html body .water-hero .wh-cred{border-top:1px solid rgba(255,255,255,.22);padding:16px 0 6px;max-width:760px;width:100%}
html body .water-hero .wh-badges{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0;padding:0;max-width:none}
html body .water-hero .wh-badges li{padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  font:500 14px/1.9 var(--font);color:#C9DCE6;display:inline-flex;align-items:center;gap:8px;transition:color .5s ease}
html body .water-hero .wh-badges li::before{width:6px;height:6px;background:#7FB9D6;box-shadow:none;transition:background-color .5s ease,transform .5s ease}
html body .water-hero .wh-badges li.is-on{color:#fff}
html body .water-hero .wh-badges li.is-on::before{background:#08A0E5;transform:scale(1.5)}
html body .water-hero .wh-foot{font-size:12.5px;opacity:.85;margin:0 0 24px}
html body .wh-layers{padding-bottom:0}
@media (max-width:600px){
  html body .water-hero h1.wh-title{font-size:30px}
  html body .water-hero .hero-cta{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){html body .water-hero .wh-badges li,html body .water-hero .wh-badges li::before{transition:none}}

/* --- Fix 15 (Karen 2026-10-16): "on this page" section menu on product pages, decodedai.co style (main.js pdpRail).
   >=1280px: fixed left rail beside the content; the product block and everything after it move right to make room
   (content 912px wide at 1440). <1280px: slim sticky bar under the header that scrolls sideways; it appears only
   once the product name has scrolled past, so it never covers it. */
.pdp-rail,.pdp-topbar{display:none}
@media (min-width:1280px){
  html body .rail-zone .wrap,html body .rail-zone.wrap{padding-left:264px !important}
  .pdp-rail{display:block;position:fixed;top:104px;left:calc(50vw - 576px);width:200px;z-index:40;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
  body.rail-on .pdp-rail{opacity:1;visibility:visible}
  .pdp-rail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--line);max-height:calc(100vh - 140px);overflow-y:auto;scrollbar-width:thin}
  .pdp-rail a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;font:500 14px/1.35 var(--font);color:#64748B;text-decoration:none;transition:color .2s,border-color .2s}
  .pdp-rail a:hover{color:var(--ink);text-decoration:none}
  .pdp-rail a.on{color:var(--ink);font-weight:700;border-left-color:var(--ink)}
}
@media (max-width:1279px){
  .pdp-topbar{display:block;position:fixed;left:0;right:0;top:64px;z-index:55;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);
    transform:translateY(-6px);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s}
  body.rail-on .pdp-topbar{transform:none;opacity:1;visibility:visible}
  .pdp-topbar ul{list-style:none;margin:0;padding:0 18px;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .pdp-topbar ul::-webkit-scrollbar{display:none}
  .pdp-topbar a{display:inline-flex;align-items:center;min-height:44px;font:600 14px var(--font);color:#64748B;text-decoration:none;border-bottom:2px solid transparent}
  .pdp-topbar a.on{color:var(--ink);border-bottom-color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.pdp-rail,.pdp-topbar,.pdp-rail a{transition:none}}

/* Fix 15 (cont.): Home keeps its own top section bar on phones; on desktop the side rail replaces it */
@media (min-width:1280px){body.has-rail #secnav-dock{display:none !important}}
/* Fix 16 (cont.): with the side rail the content is 912px wide, so 4-across rows became too tight (cards 212px).
   Only while the rail is in use (>=1280px): 4-column card grids go 3 across, the support strip and protocol steps
   go 2 x 2, and text + image rows give the text more room. */
@media (min-width:1280px){
  body.has-rail .rail-zone .grid-4{grid-template-columns:repeat(3,1fr)}
  body.has-rail .rail-zone .support-strip,body.has-rail .rail-zone .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.has-rail .rail-zone.alt-row,body.has-rail .rail-zone .alt-row{grid-template-columns:1.35fr 1fr;gap:36px}
}

/* --- Fix 17 (Karen 2026-10-16): section menu in the brand colours instead of black.
   Active: bar in brand blue #08A0E5, label bold in deep blue #0670A0 (4.86:1); hover deep blue; others stay grey.
   Same on the phone bar (blue underline). */
@media (min-width:1280px){
  html body .pdp-rail a:hover{color:#0670A0}
  html body .pdp-rail a.on{color:#0670A0;border-left-color:#08A0E5}
}
@media (max-width:1279px){
  html body .pdp-topbar a.on{color:#0670A0;border-bottom-color:#08A0E5}
}
/* Compliance has its own high-specificity link colours (.page-compliance a:not(...)); keep the menu colours there too */
html body :is(.pdp-rail,.pdp-topbar) a:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x){color:#64748B !important}
html body :is(.pdp-rail,.pdp-topbar) a:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x):hover,
html body :is(.pdp-rail,.pdp-topbar) a.on:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x){color:#0670A0 !important}

/* --- Fix 20 (Andreas 2026-10-19): the side rail never sits over content. main.js hides it while the hero band,
   disclaimers or footer (which do not move right for it) are behind it; over dark or blue full-bleed bands it gets
   a white card so it no longer shows through on top of the band. */
@media (min-width:1280px){
  .pdp-rail ul{transition:background-color .2s ease,box-shadow .2s ease}
  body.rail-solid .pdp-rail ul{background:#fff;border-left-color:transparent;border-radius:10px;box-shadow:0 6px 24px rgba(15,23,42,.18);padding:6px 12px 6px 0}
}
@media (prefers-reduced-motion:reduce){.pdp-rail ul{transition:none}}

/* --- Fix 21 (Andreas 2026-10-19): BRS Kit "In practice" pictures. With the side rail the content is 912px, so the
   4 pictures wrap 3 + 1 and the last one (before/after tubing) stretched to the full 912px width - a 231px picture
   blown up ~4x (~8x on 2x screens), hence blurry. Equal columns instead: the last picture keeps the size of the
   others (4 across when there is room, 3 with the rail, 1 on phones). Same pictures, same order. */
/* 2026-10-19 (dr eggbot): scoped to the BRS Kit picture row only (.prog-imgs-grid); every other .prog-imgs keeps the original flex row. */
.prog-imgs.prog-imgs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.prog-imgs-grid figure{min-width:0}

/* --- Andreas 2026-10-19 (WL-clean "In practice"): his how-to-use, adapters and WL-Blow screenshots one per row,
   at a readable size; his notes sit above each picture as its label. */
.prog-imgs.prog-imgs-stack{display:grid;grid-template-columns:1fr;gap:34px;max-width:960px}
.prog-imgs-stack figure{margin:0}
.prog-imgs-stack figcaption{margin:0 0 10px;text-transform:none} /* consistency pass 2026-10-19: same caption style as the other picture captions (was 15px bold) */
.prog-imgs-stack img{width:auto;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}

/* --- Karen 2026-10-19 (WL-clean key facts): Andreas's repair calculator, live instead of his still picture.
   Same look as the picture (white card, grey tracks, white thumbs, savings in WL-clean green); built with plain
   range inputs. Engaging touches: the track fills to the thumb in the brand blue, figures count to their new value,
   a slim bar shows savings against remaining costs. Motion off for reduced-motion users. */
.rcalc{max-width:843px;background:#FCFCFC;border:1px solid var(--line);border-radius:10px;padding:20px 22px 22px;font-family:var(--font);color:#111}
.rcalc-h{margin:0 0 16px;font-size:16px;font-weight:600;line-height:1.35;color:#111}
.rcalc-card{background:#FCFCFC;border:1px solid #E2E2E2;border-radius:12px;padding:16px 14px 16px}
.rcalc-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.rcalc-row label{font-size:16px;font-weight:600;line-height:1.3;color:#111}
.rcalc-val{font-size:16px;font-weight:500;color:#111;white-space:nowrap;font-variant-numeric:tabular-nums}
.rcalc-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0 0 20px;background:transparent;cursor:pointer;touch-action:pan-y}
.rcalc-range::-webkit-slider-runnable-track{height:22px;border-radius:11px;background:linear-gradient(90deg,rgba(8,160,229,.22) 0 var(--fill,0%),#F2F2F2 var(--fill,0%) 100%)}
.rcalc-range::-moz-range-track{height:22px;border-radius:11px;background:#F2F2F2}
.rcalc-range::-moz-range-progress{height:22px;border-radius:11px;background:rgba(8,160,229,.22)}
.rcalc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px rgba(15,23,42,.28),0 0 0 1px rgba(15,23,42,.06);transition:transform .15s ease,box-shadow .15s ease}
.rcalc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 3px rgba(15,23,42,.28),0 0 0 1px rgba(15,23,42,.06);transition:transform .15s ease,box-shadow .15s ease}
.rcalc-range:hover::-webkit-slider-thumb,.rcalc-range:active::-webkit-slider-thumb{transform:scale(1.15);box-shadow:0 2px 8px rgba(8,160,229,.35),0 0 0 1px rgba(8,160,229,.35)}
.rcalc-range:hover::-moz-range-thumb,.rcalc-range:active::-moz-range-thumb{transform:scale(1.15);box-shadow:0 2px 8px rgba(8,160,229,.35),0 0 0 1px rgba(8,160,229,.35)}
.rcalc-range:focus{outline:none}
.rcalc-range:focus-visible{outline:2px solid #08A0E5;outline-offset:3px;border-radius:12px}
.rcalc-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px #08A0E5}
.rcalc-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px #08A0E5}
.rcalc-res{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;border-top:1px solid #EFEFEF;padding-top:18px;margin-top:4px}
.rcalc-lbl{margin:0 0 6px;font-size:12px;line-height:1.35;color:#555}
.rcalc-num{margin:0;font-size:20px;font-weight:600;line-height:1.2;color:#111;font-variant-numeric:tabular-nums}
.rcalc-save{font-size:24px;font-weight:700;color:#2BA240}
.rcalc-split{height:6px;margin:16px 0 0;border-radius:3px;background:#E9E9E9;overflow:hidden}
.rcalc-split span{display:block;height:100%;border-radius:3px;background:#2BA240;transition:width .35s ease}
.rcalc-note{margin:12px 0 0;font-size:14px;line-height:1.45;color:#444}
@media (pointer:coarse){
  .rcalc-range{height:30px}
  .rcalc-range::-webkit-slider-thumb{width:26px;height:26px;margin-top:-2px}
  .rcalc-range::-moz-range-thumb{width:26px;height:26px}
}
@media (max-width:600px){
  .rcalc{padding:16px 14px 18px}
  .rcalc-card{padding:14px 12px}
  .rcalc-row label{font-size:15px}
  .rcalc-res{gap:12px 14px}
  .rcalc-save{font-size:22px}
  .rcalc-num{font-size:18px}
  .rcalc-save.rcalc-num{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.rcalc-range::-webkit-slider-thumb,.rcalc-range::-moz-range-thumb,.rcalc-split span{transition:none}}
/* Karen 2026-10-19: the A$ amount can be typed. Reads as the same figure; "A$" stays in front while typing; a dotted
   underline shows it is editable, blue on hover, solid dark blue while typing (the focus mark). 16px so phones do not
   zoom in on it. */
.rcalc-amt{display:inline-flex;align-items:baseline;border-bottom:1px dashed #A7B2BF;padding:0 1px 1px;cursor:text;transition:border-color .15s ease}
.rcalc-amt:hover{border-bottom-color:#08A0E5}
.rcalc-amt:focus-within{border-bottom:2px solid #0670A0;padding-bottom:0;background:#fff}
.rcalc-type{width:6.5ch;min-width:1.5ch;max-width:12ch;padding:0 0 0 2px;margin:0;font:inherit;font-size:16px;font-weight:500;color:#111;text-align:left;background:transparent;border:0;border-radius:0}
html body .rcalc .rcalc-type:focus,html body .rcalc .rcalc-type:focus-visible{outline:none}

/* --- Consistency pass 2026-10-19 (Karen): buttons and form fields use Inter like the rest of the site.
   Browsers default them to a system font (the header "Search products" button showed Arial). Family only; sizes unchanged. */
button,input,select,textarea{font-family:inherit}

/* --- Consistency pass 2026-10-19: the "Sustainability" label on the dark band picked up the band's body-text size
   (.sus-in p = 16px / 1.65), so on the category pages it was 16px instead of the 12.5px label size used everywhere else
   (product pages are kept at 13px by the .pdp-page rule). */
.sus-in p.eyebrow{font-size:12.5px;line-height:1.55}

/* Karen 2026-10-21 WL-clean step 1 (scoped by site-data pageMod): banner headline clearly larger than the product name,
   slogan lines in Instruments blue. Sizes reused from existing rules: .water-hero h1 (phone) clamp(56px,14vw,64px), .hc-txt h1 30px. */
html body .pdp-page.pdp-mod-wl-clean .pdp-band-slogan .pdp-typo.pdp-band-slogan-text{font-size:clamp(56px,14vw,64px)}
html body .pdp-page.pdp-mod-wl-clean :is(.pdp-band-slogan-sub,.prog-slogan-sub),html body .pdp-page.pdp-mod-wl-clean :is(.pdp-band-slogan-sub,.prog-slogan-sub) *{color:#0072BC !important}
@media (max-width:600px){html:has(.pdp-band-slogan) body .pdp-page.pdp-mod-wl-clean .prog-slogan.prog-slogan-mobile{font-size:30px}}

/* ===== Design experiment "D: area light + glass chrome" (Karen 2026-10-21, branch design/experiments; NOT for the live
   site until Karen approves). Product pages only. Design only: no text, REF or ARTG change.
   - A faint wash of the area colour (--tax, the exact catalogue colour) at the top of the product block, fading to white.
   - The pack shot sits on a pure white card, so the product is shown exactly as photographed; the area colour is a soft
     light AROUND the card, never over the product (Karen: the product must be clearly visible).
   - Key facts: the per-area tinted card (as before) with the area-colour edge and a soft area-coloured light below.
   - Glass only on the chrome: header, "On this page" menu (desktop) and its top bar (phone).
   Hero headings (#08A0E5) and buttons (#097DB6) unchanged. Remove this block to undo. */
.pdp-page{--glow:10%}
.pdp-page .prog-hero{background:linear-gradient(180deg,color-mix(in srgb,var(--tax) var(--glow),#fff) 0,#fff 78%)}
html body .pdp-page .prog-hero-media .pdp-pack{background:#fff;border:1px solid color-mix(in srgb,var(--tax) 14%,#E2E8F0);border-radius:20px;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--tax) 6%,transparent),0 28px 60px -28px color-mix(in srgb,var(--tax) 55%,transparent)}
html body .pdp-page .prog-hero-media .pdp-pack .pdp-main{background:#fff}
/* fix 3 (Grok review): no white override, so the per-area Key facts tint Andreas asked for shows again (set inline by build.js) */
.pdp-page .prog-facts-panel{border:1px solid color-mix(in srgb,var(--tax) 18%,#E2E8F0) !important;border-radius:20px;
  box-shadow:0 24px 60px -34px color-mix(in srgb,var(--tax) 55%,transparent)}
body:has(.pdp-page) .hdr{background:rgba(255,255,255,.94); /* fix 1 (Grok review): .74 let dark sections drop nav links to ~3.1:1 */border-bottom-color:rgba(226,232,240,.7);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
@media (min-width:1280px){
  body:has(.pdp-page) .pdp-rail ul,body.rail-solid:has(.pdp-page) .pdp-rail ul{background:rgba(255,255,255,.94); /* fix 1: was .62, grey links fell to ~2:1 over dark bands */border-radius:14px;padding:8px 14px 8px 0;
    border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 30px -16px rgba(15,23,42,.28);
    -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
  /* fix 1: menu links one step darker (#64748B -> #475569) so they stay above 4.5:1 even over a dark section */
  html body:has(.pdp-page) .pdp-rail a:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x):not(.on):not(:hover){color:#475569 !important}
}
@media (max-width:1279px){
  body:has(.pdp-page) .pdp-topbar{background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
}
/* fix 4 (Grok review): on phones the light around the pack shot is smaller and softer */
@media (max-width:600px){
  html body .pdp-page .prog-hero-media .pdp-pack{box-shadow:0 0 0 5px color-mix(in srgb,var(--tax) 5%,transparent),0 16px 34px -22px color-mix(in srgb,var(--tax) 40%,transparent)}
}
@media (prefers-reduced-transparency:reduce){
  body:has(.pdp-page) .hdr,body:has(.pdp-page) .pdp-rail ul,body:has(.pdp-page) .pdp-topbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* fix 5 (Andreas 21 Oct design guideline: "alpron correct blue", "plastisept eco green, correct", "But suction should be
   yellow text square" + PS "AlproJet D and W needs realignment"): the AlproJet (special applications) Key facts panel uses
   its area yellow the way Alpron uses blue and PlastiSept green. Big sub-headings and tick marks in a readable deep
   yellow #B38A00 (3.6:1 on the cream panel; large text and icons need 3:1 - pure #FFCB04 is 1.5:1); small text stays
   #856A00; squares, bar and wash stay #FFCB04. The two light-blue note boxes inside the yellow panel become white with
   a yellow edge. Colours only, no wording. */
html body:not(.page-about) .pdp-area-special .prog-facts h3[style*="color:var(--green)"]{color:#B38A00 !important}
.pdp-area-special .prog-facts .benefit-list li>svg{color:#B38A00 !important}
.pdp-area-special .prog-facts .pdp-info-note{background:rgba(255,255,255,.75);border-left-color:#FFCB04}

/* ===== Design trial "flowing water" (Karen 2026-10-21, branch design/experiments; NOT for the live site until Karen
   approves). Home page, Aspiration band photo only: main.js (tubeFlow) draws light glints and small bubbles moving
   along the water inside the tube, on a canvas over the unchanged photo. Content and order unchanged.
   Static for reduced-motion users; runs only while the photo is on screen. Remove this block + tubeFlow to undo. */
.home-band-photo[data-flow]{position:relative}
.home-band-photo .tube-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* Instruments band photo (same trial, Karen 21 Oct): when the band scrolls into view the camera moves slowly closer to the
   mirror and a soft light sweeps across the mirror glass (main.js mirrorShine sets the mirror position --mx/--my/--mw/--mh
   and the class is-live). Reverses when scrolled away. Off for reduced-motion users. */
.home-band-photo[data-flow="mirror"]{position:relative}
.home-band-photo[data-flow="mirror"] img{transform-origin:var(--mx,58%) var(--my,49%);transition:transform 2.4s cubic-bezier(.22,.61,.36,1)}
.home-band-photo[data-flow="mirror"].is-live img{transform:scale(1.09)}
.home-band-photo[data-flow="mirror"].is-live.is-hover img{transform:scale(1.15)}
.mirror-glint{position:absolute;left:var(--mx,58%);top:var(--my,49%);width:var(--mw,17%);height:var(--mh,21%);transform:translate(-50%,-50%);
  border-radius:50%;overflow:hidden;pointer-events:none;transform-origin:center;transition:transform 2.4s cubic-bezier(.22,.61,.36,1)}
.mirror-glint::after{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-70%);opacity:0;mix-blend-mode:screen}
.home-band-photo.shine .mirror-glint::after{animation:mirrorSweep 1.5s ease-in-out}
@keyframes mirrorSweep{0%{transform:translateX(-70%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateX(70%);opacity:0}}
@media (prefers-reduced-motion:reduce){.home-band-photo[data-flow="mirror"] img,.mirror-glint{transition:none}.home-band-photo[data-flow="mirror"].is-live img{transform:none}.home-band-photo.shine .mirror-glint::after{animation:none}}

/* Philips fonts change (AlproJet-D trial, round 4, Karen 2026-10-23) - NOT for live yet. Scoped to body.type-trial (site-data.js typeTrial:true on AlproJet-D only). */
html body.type-trial main .prog-name{font-size:32px !important;font-weight:700 !important;line-height:36px !important}
html body.type-trial main :is(.pdp-band-slogan-text,.pdp-band-slogan-text *,.prog-slogan,.prog-slogan *){font-size:48px !important;font-weight:700 !important;line-height:1.05 !important}
html body.type-trial main :is(.pdp-band-slogan-text,.prog-slogan){margin-top:40px !important;margin-bottom:40px !important;max-width:none !important} /* round 3: slogan 48/700 */
html body.type-trial main :is(h2:not(.disclaimers-h),.prog-claim){font-size:22px !important;font-weight:700 !important;line-height:1.3 !important;text-transform:none !important}
html body.type-trial main :is(h3,h4){font-size:16px !important;font-weight:600 !important;line-height:1.5 !important}
html body.type-trial main :is(p.lead,p.pdp-lead,dd,p:not([class])){font-size:16px !important;font-weight:400 !important;line-height:1.5 !important;max-width:60ch}
html body.type-trial main :is(.benefit-list li,.pinfo-feats li){font-size:16px !important;font-weight:400 !important;line-height:1.5 !important} /* round 3: checkmark feature list; <strong> spans keep their own weight */
html body.type-trial main .btn:not(.btn-sm){font-size:16px !important;font-weight:600 !important}
html body.type-trial main :is(.pinfo-lbl,.sched-chip,dt,.reg-pill,.doc-type,b,strong,th){font-weight:700 !important}
@media (max-width:760px){
html body.type-trial main .prog-name{font-size:26px !important;line-height:30px !important}
html body.type-trial main :is(.pdp-band-slogan-text,.pdp-band-slogan-text *,.prog-slogan,.prog-slogan *){font-size:36px !important;line-height:1.05 !important}
html body.type-trial main :is(.pdp-band-slogan-text,.prog-slogan){margin-top:28px !important;margin-bottom:28px !important}
html body.type-trial main :is(h2:not(.disclaimers-h),.prog-claim){font-size:19px !important}
}
/* Karen 2026-10-23: AlproJet-D "two phases." heading uses the section-heading case (lowercase via CSS, as .sec-typo elsewhere) also inside the type trial */
html body.type-trial main h2.sec-typo-series{text-transform:none !important} /* Karen 2026-10-23 11:57: capitals as Andreas typed */
/* Karen 2026-10-23: darker gold heading accent for readability, AlproJet-D (type trial) only. #8F6C00 = >=4.5:1 on white, #F8FAFC and the cream panel #FFFAE6. Shared rule (.sec-typo = accent 92%) unchanged elsewhere. */
/* Karen 2026-10-23: AlproJet-D pastel per Pixel colour system (type trial only). Tint #FFF8E1 on hero + Key facts band only; other bands white; panels/cards white + 1px #E5E7EB; AlproJet accent text #8A6A00 (replaces #856A00 / #8F6C00 / #B38A00 text on this page). */
html body.type-trial:not(.ff-keep) main :is(.prog-hero,section.prog-facts){background:var(--ff-tint) !important}
html body.type-trial:not(.ff-keep) main section.band:not(.band-green):not(.sales-band){background:#fff !important}
html body.type-trial:not(.ff-keep) main :is(.prog-facts-panel,.pdp-info-note){background:#fff !important;border:1px solid #E5E7EB !important}
html body.type-trial:not(.ff-keep) main .prog-facts-accent{height:3px !important;background:var(--ff-text) !important}
html body.type-trial:not(.ff-keep) main :is(.pdp-pack,.alt-img,.doc-row,details.faq,.pcard,.cs-card,.tax-card,.pw-diagram){background:#fff !important;border:1px solid #E5E7EB !important}
html body.type-trial:not(.ff-keep) main .pdp-pack{box-shadow:none !important}
html body.type-trial:not(.ff-keep) .pdp-page{--accent-text:var(--ff-text) !important}
html body.type-trial:not(.ff-keep) main :is(.eyebrow:not(.light),.prog-cat-name,.pw-link,.doc-type,.pcard-cat,.pcard-link,.pcard-hit,.tax-card,.tax-card-name,.pdp-backcat,.pdp-backcat a,.variant.on,.prog-facts-panel h3){color:var(--ff-text) !important}
html body.type-trial:not(.ff-keep) main .sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo):not([style*="color"]){color:var(--ff-text) !important}
html body.type-trial:not(.ff-keep) .pdp-page .prog-facts h3[style*="color:var(--green)"]{color:var(--ff-text) !important}
html body.type-trial:not(.ff-keep) .pdp-page .prog-facts .benefit-list li>svg{color:var(--ff-text) !important}
html body.type-trial:not(.ff-keep) main .prog-facts-panel{box-shadow:none !important}
html body.type-trial:not(.ff-keep) main .prog-hero .variant-pack{color:#475569 !important} /* #64748B was 4.48:1 on var(--ff-tint) */
/* Karen 2026-10-23: AlproJet-D mobile slogan deeper blue for contrast (#0878B2: 4.55:1 on #FFF8E1, 4.84:1 on white); desktop banner slogan keeps #08A0E5 */
@media (max-width:760px){html body.type-trial:not(.ff-keep) main .prog-slogan{color:#0878B2 !important}}
/* Karen 2026-10-23: AlproJet-W darker gold heading accent (#8A6A00, same as AlproJet-D); page-scoped via body.gold-dark (site-data.js bodyClass) */
html body.gold-dark main .sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo):not([style*="color"]){color:#8A6A00 !important}
/* Karen 2026-10-23: AlproJet-D tidy of the aspiration hygiene section (type trial). Second heading uses the section-heading style; treatment items = white cards, 1px #E5E7EB, 3px #8A6A00 top rule. */
html body.type-trial:not(.ff-keep) main h3.sec-typo-h3{font-size:22px !important;font-weight:700 !important;line-height:1.3 !important;text-transform:none !important;color:var(--ff-text) !important;letter-spacing:-.02em}
html body.type-trial main h3.sec-typo-h3 .g{color:var(--ink) !important}
html body.type-trial:not(.ff-keep) main .series-use{background:#fff;border:1px solid #E5E7EB;border-top:3px solid var(--ff-text);border-radius:12px;padding:18px 20px}
@media (max-width:760px){html body.type-trial:not(.ff-keep) main h3.sec-typo-h3{font-size:19px !important}}
/* Karen 2026-10-23 12:00: AlproJet-W pastel per Pixel colour system (colour only, same values as AlproJet-D; scoped body.gold-dark = W only) */
html body.gold-dark main :is(.prog-hero,section.prog-facts){background:#FFF8E1 !important}
html body.gold-dark main section.band:not(.band-green):not(.sales-band){background:#fff !important}
html body.gold-dark main :is(.prog-facts-panel,.pdp-info-note){background:#fff !important;border:1px solid #E5E7EB !important}
html body.gold-dark main .prog-facts-accent{height:3px !important;background:#8A6A00 !important}
html body.gold-dark main :is(.pdp-pack,.alt-img,.doc-row,details.faq,.pcard,.cs-card,.tax-card,.pw-diagram){background:#fff !important;border:1px solid #E5E7EB !important}
html body.gold-dark main .pdp-pack{box-shadow:none !important}
html body.gold-dark .pdp-page{--accent-text:#8A6A00 !important}
html body.gold-dark main :is(.eyebrow:not(.light),.prog-cat-name,.pw-link,.doc-type,.pcard-cat,.pcard-link,.pcard-hit,.tax-card,.tax-card-name,.pdp-backcat,.pdp-backcat a,.variant.on,.prog-facts-panel h3){color:#8A6A00 !important}
html body.gold-dark main .sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo):not([style*="color"]){color:#8A6A00 !important}
html body.gold-dark .pdp-area-special .prog-facts h3[style*="color:var(--green)"]{color:#8A6A00 !important}
html body.gold-dark .pdp-area-special .prog-facts .benefit-list li>svg{color:#8A6A00 !important}
html body.gold-dark main .prog-facts-panel{box-shadow:none !important}
html body.gold-dark main .prog-hero .variant-pack{color:#475569 !important} /* #64748B was 4.48:1 on #FFF8E1 */
@media (max-width:760px){html body.gold-dark main .prog-slogan{color:#0878B2 !important}}
/* Karen 2026-10-23 12:13: AlproJet-D/W restore live v5 hero glass look (values copied from live computed styles). body.type-trial = D + W only */
html body.type-trial:not(.ff-keep) main section.prog-hero.rail-zone{background:linear-gradient(var(--ff-hero) 0px,#FFFFFF 78%) !important}
html body.type-trial:not(.ff-keep) main section.prog-hero .pdp-pack{border:1px solid var(--ff-border) !important;box-shadow:0 0 0 8px rgba(var(--ff-glow),.06),0 28px 60px -28px rgba(var(--ff-glow),.55) !important}
/* Karen 2026-10-23 12:15: AlproJet-W REF line regular, capitals as typed (source is already caps) */
html body.gold-dark main .pdp-refline{font-weight:400 !important;text-transform:none !important}
/* Karen 2026-10-23 12:19: Philips type + Pixel colours rolled out per field. Colour rules above use these vars; defaults = AlproJet-D/W gold (unchanged). body.ff-<field> set by build.js; body.ff-keep = two-colour pages (IC-100, BC-San): type rules only, colours untouched. */
html body.type-trial{--ff-text:#8A6A00;--ff-tint:#FFF8E1;--ff-hero:#FFFAE6;--ff-border:rgb(230,228,207);--ff-glow:255,203,4}
html body.type-trial.ff-hands{--ff-text:#C2185B;--ff-tint:#FDF1F7;--ff-hero:#FDF1F7;--ff-border:#E6CEDF;--ff-glow:238,67,152} /* glow/border from catalogue colour #EE4398 */
html body.type-trial.ff-mouth{--ff-text:#B0306E;--ff-tint:#FDF3F8;--ff-hero:#FDF3F8;--ff-border:#E7DBE5;--ff-glow:244,154,193} /* glow/border from catalogue colour #F49AC1 */
html body.type-trial.ff-cleaning{--ff-text:#1F6FA8;--ff-tint:#F0F7FC;--ff-hero:#F0F7FC;--ff-border:#D1DFEA;--ff-glow:96,176,226} /* glow/border from catalogue colour #60B0E2 */
html body.type-trial.ff-surfaces{--ff-text:#177A36;--ff-tint:#EFF8F1;--ff-hero:#EFF8F1;--ff-border:#C7DED3;--ff-glow:30,170,74} /* glow/border from catalogue colour #1EAA4A */
html body.type-trial.ff-manual{--ff-text:#0072BC;--ff-tint:#EEF4FA;--ff-hero:#EEF4FA;--ff-border:#C3D5E4;--ff-glow:0,114,188} /* glow/border from catalogue colour #0072BC */
html body.type-trial.ff-mechanical{--ff-text:#0072BC;--ff-tint:#EEF4FA;--ff-hero:#EEF4FA;--ff-border:#C3D5E4;--ff-glow:0,114,188} /* glow/border from catalogue colour #0072BC */
html body.type-trial.ff-water{--ff-text:#00759F;--ff-tint:#EDF7FC;--ff-hero:#EDF7FC;--ff-border:#C3DCEA;--ff-glow:0,160,227} /* glow/border from catalogue colour #00A0E3 */
html body.type-trial main [style*="font-weight:800"],html body.type-trial main [style*="font-weight:900"]{font-weight:700 !important} /* max weight 700 */
html body.type-trial main :is(h3,h4,.pw-rh){text-transform:none !important} /* capitals as typed (rollout) */
html body.type-trial main .pw-rh{font-weight:700 !important}
html body.type-trial main :is(.pw-key,.pw-abc-i) b{font-weight:400 !important} /* bold only on product names (IC-100 key phrases) */
html body.type-trial main :is(.pw-rn,.pw-rh){font-weight:700 !important} /* max weight 700 */
/* rollout-only (body has an ff-* class; AlproJet-D/W do not) */
html body.type-trial[class*=" ff-"] main :is(.pw-key b,.pw-abc-i b,b a,.pw-rh *){text-transform:none !important} /* capitals as typed */
html body.type-trial[class*=" ff-"] main :is(.pw-sn,.reg-pill,.pdp-typo,.pdp-typo *){font-weight:700 !important} /* max weight 700 */
html body.type-trial[class*=" ff-"] main .pdp-refline{font-weight:400 !important;text-transform:none !important} /* as AlproJet-W */
@media (max-width:760px){html body.type-trial.ff-keep main .prog-slogan{color:#0878B2 !important}} /* mobile slogan deeper blue also on two-colour pages */
/* Karen 2026-10-23 12:39: IC-100/BC-San (two-colour pages, body.ff-keep) failing labels darkened for AA. Text colour only. */
html body.ff-keep main .pdp-arealinks a[style*="#1EAA4A"]{color:#177A36 !important}
html body.ff-keep main .pdp-arealinks a[style*="#00A0E3"]{color:#00759F !important}
html body.ff-keep main .prog-cat-name[style*="#0072BC"]{color:#00669F !important}
html body.ff-keep main .pdp-arealinks a[style*="#0072BC"]{color:#00669F !important}
/* Karen 2026-10-23 12:41: IC-100 ARTG link darkened for AA (colour only) */
html body.ff-keep.page-products main .pdp-refline .artg-link{color:#00669F !important}
/* Karen 2026-10-23 12:44: CleanWipes layout trial - body.cw-layout = CleanWipes only. Layout only: card grid, accordions, ~70ch lines, more spacing. */
html body.cw-layout main .why-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
@media (max-width:1100px){html body.cw-layout main .why-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){html body.cw-layout main .why-uses{grid-template-columns:1fr;gap:16px}}
html body.cw-layout main .why-use{margin:0 !important;background:#fff;border:1px solid #E5E7EB;border-top:3px solid #1F6FA8;border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
html body.cw-layout main .why-use .why-use-h{color:#1F6FA8 !important;margin:0 !important}
html body.cw-layout main .why-use p{margin:0 !important;font-size:16px !important;font-weight:400 !important;line-height:1.5 !important}
html body.cw-layout main .cw-lbl{display:block;color:#475569;font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:2px}
html body.cw-layout main .why-uses > .prog-imgs{grid-column:1/-1;margin-top:20px !important}
html body.cw-layout main .prog-imgs-stack figure{margin:0 0 20px}
html body.cw-layout main details.cw-acc{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:0}
html body.cw-layout main details.cw-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px}
html body.cw-layout main details.cw-acc > summary::-webkit-details-marker{display:none}
html body.cw-layout main details.cw-acc > summary::after{content:"";flex:0 0 12px;width:12px;height:12px;border-right:2px solid #1F6FA8;border-bottom:2px solid #1F6FA8;transform:rotate(45deg);transition:transform .2s;margin-top:-6px}
html body.cw-layout main details.cw-acc[open] > summary::after{transform:rotate(-135deg);margin-top:6px}
html body.cw-layout main details.cw-acc > summary h3{margin:0 !important;color:#1F6FA8 !important}
html body.cw-layout main details.cw-acc > summary:focus-visible{outline:2px solid #1F6FA8;outline-offset:2px;border-radius:12px}
html body.cw-layout main .cw-acc-body{padding:0 22px 20px}
html body.cw-layout main .cw-acc-body > *{margin:0 0 14px !important}
html body.cw-layout main :is(p,li,dd,.cw-acc-body > *){max-width:70ch}
html body.cw-layout main .why-use p{max-width:none}
html body.cw-layout main :is(.benefit-list li,.pinfo-row){margin-bottom:12px}
/* Karen 2026-10-23 12:48: CleanWipes layout trial 2 - lower sections as cards + key-fact icons (body.cw-layout only, layout only) */
html body.cw-layout main .why-use .cw-ico{display:block;width:28px;height:28px}
html body.cw-layout main #sec-4 .grid{gap:20px !important}
html body.cw-layout main :is(#sec-4 .pw-key,#sec-10 .pcard){background:#fff !important;border:1px solid #E5E7EB !important;border-top:3px solid #1F6FA8 !important;border-radius:12px !important;padding:20px 22px;box-shadow:none !important}
html body.cw-layout main #sec-10 .pcard{padding:0;overflow:hidden}
html body.cw-layout main #sec-4 .pw-key b{display:block;margin-bottom:8px;color:#1F6FA8}
html body.cw-layout main #sec-5 :is(.pinfo-feats,.pinfo-grid){background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:20px 24px;margin:16px 0 24px !important}
html body.cw-layout main #sec-5 .pinfo-feats li{margin-bottom:12px}
html body.cw-layout main #sec-5 .pinfo-row{padding:14px 0 !important;border-bottom:1px solid #E5E7EB}
html body.cw-layout main #sec-5 .pinfo-row:last-child{border-bottom:0}
html body.cw-layout main #sec-5 .lead{margin-bottom:14px}
html body.cw-layout main #pdp-docs .doc-list{display:grid;gap:12px}
html body.cw-layout main #pdp-docs .doc-row{border:1px solid #E5E7EB !important;border-radius:12px;background:#fff !important;padding:16px 20px}
@media (max-width:700px){html body.cw-layout main #sec-5 .pinfo-row{display:block}html body.cw-layout main #sec-5 .pinfo-row dt{margin-bottom:4px}}
/* Karen 2026-10-23 13:06: CleanWipes layout rolled out - body.lr-layout (per-field accent via --lr on .pdp-page). Same rules as cw-layout, class-based selectors; CleanWipes rules above untouched. */
html body.lr-layout main .why-uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
@media (max-width:1100px){html body.lr-layout main .why-uses{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){html body.lr-layout main .why-uses{grid-template-columns:1fr;gap:16px}}
html body.lr-layout main .why-use{margin:0 !important;background:#fff;border:1px solid #E5E7EB;border-top:3px solid var(--lr,#1F6FA8);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
html body.lr-layout main .why-use .why-use-h{color:var(--lr,#1F6FA8) !important;margin:0 !important}
html body.lr-layout main .why-use p{margin:0 !important;font-size:16px !important;font-weight:400 !important;line-height:1.5 !important}
html body.lr-layout main .cw-lbl{display:block;color:#475569;font-size:13px;font-weight:600;letter-spacing:.04em;margin-bottom:2px}
html body.lr-layout main .why-uses > .prog-imgs{grid-column:1/-1;margin-top:20px !important}
html body.lr-layout main .why-uses > .why-uses-note{grid-column:1/-1}
html body.lr-layout main .prog-imgs-stack figure{margin:0 0 20px}
html body.lr-layout main details.cw-acc{background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:0}
html body.lr-layout main details.cw-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px}
html body.lr-layout main details.cw-acc > summary::-webkit-details-marker{display:none}
html body.lr-layout main details.cw-acc > summary::after{content:"";flex:0 0 12px;width:12px;height:12px;border-right:2px solid var(--lr,#1F6FA8);border-bottom:2px solid var(--lr,#1F6FA8);transform:rotate(45deg);transition:transform .2s;margin-top:-6px}
html body.lr-layout main details.cw-acc[open] > summary::after{transform:rotate(-135deg);margin-top:6px}
html body.lr-layout main details.cw-acc > summary h3{margin:0 !important;color:var(--lr,#1F6FA8) !important}
html body.lr-layout main details.cw-acc > summary:focus-visible{outline:2px solid var(--lr,#1F6FA8);outline-offset:2px;border-radius:12px}
html body.lr-layout main .cw-acc-body{padding:0 22px 20px}
html body.lr-layout main .cw-acc-body > *{margin:0 0 14px !important}
html body.lr-layout main :is(p,li,dd,.cw-acc-body > *){max-width:70ch}
html body.lr-layout main .why-use p{max-width:none}
html body.lr-layout main :is(.benefit-list li,.pinfo-row){margin-bottom:12px}
html body.lr-layout main .why-use .cw-ico{display:block;width:28px;height:28px}
html body.lr-layout main .pw-sec .grid:has(> .pw-key){gap:20px !important}
html body.lr-layout main :is(.pw-sec .pw-key,section.wrap .pcard){background:#fff !important;border:1px solid #E5E7EB !important;border-top:3px solid var(--lr,#1F6FA8) !important;border-radius:12px !important;padding:20px 22px;box-shadow:none !important}
html body.lr-layout main section.wrap .pcard{padding:0;overflow:hidden}
html body.lr-layout main .pw-sec .pw-key b{display:block;margin-bottom:8px;color:var(--lr,#1F6FA8)}
html body.lr-layout main section.pw-sec:has(.pinfo-grid) :is(.pinfo-feats,.pinfo-grid){background:#fff;border:1px solid #E5E7EB;border-radius:12px;padding:20px 24px;margin:16px 0 24px !important}
html body.lr-layout main section.pw-sec:has(.pinfo-grid) .pinfo-feats li{margin-bottom:12px}
html body.lr-layout main section.pw-sec:has(.pinfo-grid) .pinfo-row{padding:14px 0 !important;border-bottom:1px solid #E5E7EB}
html body.lr-layout main section.pw-sec:has(.pinfo-grid) .pinfo-row:last-child{border-bottom:0}
html body.lr-layout main section.pw-sec:has(.pinfo-grid) .lead{margin-bottom:14px}
html body.lr-layout main #pdp-docs .doc-list{display:grid;gap:12px}
html body.lr-layout main #pdp-docs .doc-row{border:1px solid #E5E7EB !important;border-radius:12px;background:#fff !important;padding:16px 20px}
@media (max-width:700px){html body.lr-layout main section.pw-sec:has(.pinfo-grid) .pinfo-row{display:block}html body.lr-layout main section.pw-sec:has(.pinfo-grid) .pinfo-row dt{margin-bottom:4px}}
html body.lr-layout main .why-use .cw-ico{color:var(--lr,#1F6FA8)}
html body.lr-layout main .prog-facts .benefit-list:not(.why-use-list){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
html body.lr-layout main .prog-facts .benefit-list:not(.why-use-list) li{margin:0 !important;background:#fff;border:1px solid #E5E7EB;border-top:3px solid var(--lr,#1F6FA8);border-radius:12px;padding:18px 20px;max-width:none}
@media (max-width:700px){html body.lr-layout main .prog-facts .benefit-list:not(.why-use-list){grid-template-columns:1fr}}

/* Karen 2026-10-23 (A): non-product pages on the product-page type scale. Size, weight and colour only; no text-transform, wording untouched. */
html body:not(.type-trial) main h2:not(.disclaimers-h),
html body:not(.type-trial) main .sec-typo,
html body:not(.type-trial) main .home-sec-h,
html body:not(.type-trial) main .home-comp-h{font-size:22px !important;font-weight:700 !important;line-height:1.3 !important}
html body:not(.type-trial) main h2.sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo):not(.moat-dark .sec-typo):not(.info-head .sec-typo):not([style*="color"]){color:#8A6A00 !important}
html body:not(.type-trial) main h2.sec-typo:not(.band-green .sec-typo):not(.sales-band .sec-typo):not(.moat-dark .sec-typo):not(.info-head .sec-typo) .g{color:var(--ink) !important}
html body:not(.type-trial) main :is(h3,h4){font-size:16px !important;font-weight:600 !important;line-height:1.35 !important}
html body.page-products:not(.type-trial) main .why-use-h[style*="1E8E3E" i]{color:#177A36 !important}
html body:not(.type-trial) main :is(p:not([class]),li:not([class]),.lead,.hero-sub,.tag-line,.support-line,.tc-blurb,.tc-how-line,.tc-why,.study-where,.docs-fallback,.doc-prods,.gut-source){font-size:16px !important;font-weight:400 !important;line-height:1.5 !important}
html body:not(.type-trial) main .disclaimers li,html body:not(.type-trial) main li:is([class*=fine],[class*=disc]){font-size:13px !important;line-height:1.5 !important}
@media (max-width:760px){
html body:not(.type-trial) main h2:not(.disclaimers-h),
html body:not(.type-trial) main .sec-typo,
html body:not(.type-trial) main .home-sec-h,
html body:not(.type-trial) main .home-comp-h{font-size:19px !important}
}

/* Karen 2026-10-23 (B): no label under 13px; darken labels that failed AA; product fold-out questions 16/600. Size, weight and colour only. */
html body :is(.fgroup-h,.eyebrow,.about-meta,.draft-note,.gut-as,.home-band-cat,.rcalc-lbl,.tc-badge,.tc-side-label,.copy,.fmt-label,.hdr-search-t,.locale,.sn-short,.tax-i3-k,.evm-zone,.evm-status,.tc-step-num,.disclaimers li){font-size:13px !important}
html body .tc-badge{color:#0670A0 !important}
html body .tc-side-label{color:#5B6B65 !important}
html body .home-band-cat[style*="00A0E3" i],html body .home-band-cat[style*="0,160,227" i]{color:#00759F !important}
html body .home-band-cat[style*="1EAA4A" i],html body .home-band-cat[style*="30,170,74" i]{color:#177A36 !important}
html body.type-trial main details > summary{font-size:16px !important;font-weight:600 !important}
html body .assistant-contact-grid a{font-size:13px !important}
@media (max-width:760px){html body main th{font-size:13px !important}}
html body .ftr-groups .fgroup-h,html body.page-compliance .ftr-groups .fgroup-h{font-size:13px !important}
html body .ev-matrix th{font-size:13px !important}
html body .home-band-cat[style*="0072BC" i]{color:#00669F !important}

/* Karen 2026-10-23 (C): text that used bright blue #08A0E5 (2.8-2.9:1) now #0878B2 (4.8:1). Fills, borders, focus rings, icons, dots and progress bars keep #08A0E5. */
html body .pdp-typo{color:#0878B2 !important}
html body:not(.type-trial) main :is(h1,.tc-banner-title):not(.water-hero-title):not(.hero-typo){color:#0878B2 !important}
html body.page-compliance{--comp-link:#0878B2}
html body.page-compliance main :is(h2,h3,.pdp-claim,.sec-typo):not(.band-green *):not([style*="color"]){color:#0878B2 !important}
html body.page-compliance main h2.sec-typo .g{color:var(--ink) !important}
html body .gut-cat,html body .tax-i3-k,html body .benefit-link,html body .rc-banner a,html body .rc-tile-go,html body .rc-back,html body .rc-doc-ic,html body .rc-dl,html body .tc-group-tick,html body .rc-train-area-go,html body .tc-card-head h2,html body .tc-marked{color:#0878B2 !important}
html body .about-hero-map .hero-accent,html body .about-hero-route .hero-accent{color:#0878B2 !important}
html body .pdp-typo[style*="#08A0E5" i]{--accent:#0878B2 !important}
html body:not(.type-trial) main h1:not(.water-hero-title):not(.hero-typo){--accent:#0878B2 !important}
html body main [style*="var(--water)"]{--water:#0878B2 !important}
html body header .nav-link.on{--water:#0878B2 !important;--green:#0878B2 !important;--accent:#0878B2 !important}
html body.page-about main :is(.eyebrow,.sec-typo):not([style*="color"]){--green:#0878B2 !important}
html body.page-about main .eyebrow{--accent:#0878B2 !important;--green:#0878B2 !important}
/* compliance footer: desktop footer is dark, bright blue reads 5.97:1 there and stays; the mobile footer is light, so links go deeper blue */
@media (max-width:760px){html body.page-compliance.page-compliance footer a:not(.btn),html body.page-compliance.page-compliance footer a:not(.btn) *{--comp-link:#00669F !important;color:#00669F !important}}
@media (min-width:761px){html body.page-compliance footer{--comp-link:#08A0E5 !important}}

/* ==== Karen 2026-10-23 HOME DECLUTTER TRIAL (layout/spacing only, no wording). Revert = revert this one commit. ==== */
/* 1. Hero: calmer reading block, shorter line length, more air between groups */
html body .home-alpro .water-hero-in{padding-top:88px;padding-bottom:88px}
html body .home-alpro .wh-sub{max-width:60ch;margin-bottom:28px}
html body .home-alpro .hero-cta{margin-bottom:36px}
html body .home-alpro .wh-body{max-width:62ch;margin:0 0 28px;padding:18px 22px;border-left:3px solid rgba(255,255,255,.55);background:rgba(5,24,36,.28);border-radius:0 12px 12px 0}
html body .home-alpro .wh-body p{margin:0 0 10px}
html body .home-alpro .wh-body p:last-child{margin-bottom:0}
html body .home-alpro .wh-badges{gap:10px 12px;margin-bottom:28px}
/* 2. Clear section rhythm: more white space, alternating white / pale bands */
html body .home-alpro .choice-wrap{padding-top:56px;padding-bottom:56px}
html body .home-alpro .tax-grid-wrap{padding:24px 0 72px}
html body .home-alpro .home-band{padding:80px 0;border-top:0}
html body .home-alpro .home-band:nth-of-type(odd){background:#fff}
html body .home-alpro .home-band:nth-of-type(even){background:var(--tax-tint,#F5F8FA)}
html body .home-alpro .home-band-in{gap:40px 64px}
html body .home-alpro .home-band-main{gap:24px}
/* 3. Line length ~65-75 characters for headings and intros */
html body .home-alpro :is(.home-band-h,.home-band-intro,.home-docs .lead,.home-support .lead){max-width:62ch}
html body .home-alpro .home-band-intro{font-size:16px;line-height:1.5;margin-top:10px}
/* 4. Key points as tidy cards (CleanWipes key-fact style: white card, 3px top rule) */
html body .home-alpro .home-mini{border-top:3px solid var(--tax,#0878B2);border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
html body .home-alpro .home-band-links{gap:12px 16px;margin-top:4px}
html body .home-alpro .home-comp{padding:96px 0}
html body .home-alpro .home-comp-grid{gap:20px}
html body .home-alpro .home-comp-card{padding:24px 24px 22px;border-top:3px solid rgba(255,255,255,.7);border-radius:12px}
html body .home-alpro .home-comp-card p{line-height:1.6}
html body .home-alpro .home-comp-links{margin-top:28px;gap:10px 18px}
html body .home-alpro .home-docs{padding-top:88px;padding-bottom:88px}
html body .home-alpro .home-doc-chips{gap:10px;margin:24px 0 28px}
html body .home-alpro .home-support{padding:88px 0;background:#F7F9FB}
html body .home-alpro .home-support .lead{margin-bottom:32px}
html body .home-alpro .home-support-grid{gap:24px}
html body .home-alpro .home-support-card{border-top:3px solid #0878B2;border-radius:12px;padding:26px 24px 24px;gap:12px}
@media (max-width:760px){
html body .home-alpro .water-hero-in{padding-top:48px;padding-bottom:48px}
html body .home-alpro .wh-body{padding:14px 16px}
html body .home-alpro .home-band{padding:52px 0}
html body .home-alpro .tax-grid-wrap{padding-bottom:48px}
html body .home-alpro :is(.home-comp,.home-docs,.home-support){padding-top:56px;padding-bottom:56px}
html body .home-alpro .home-band-in{gap:28px}
}

/* Karen 2026-10-23: About hero "Alpro reports" strip clearly readable (was 55% white, faint and below the first screen on desktop). Wording/capitals unchanged. */
html body.page-about .about-hero-dark .about-meta{color:rgba(255,255,255,.9) !important;font-size:13px !important;font-weight:700;letter-spacing:.07em}
@media (min-width:761px){html body.page-about .about-hero-dark{padding-top:72px;padding-bottom:72px}}

/* ==== Karen 2026-10-23 ABOUT US GLASS TRIAL (AlproJet-D glass look). Background, cards, shadows only; no wording. Revert = revert this commit. ==== */
html body.page-about main{background:linear-gradient(180deg,#FFFAE6 0,#FFFDF5 40%,#fff 100%)}
html body.page-about main :is(.about-why,.about-audit,.about-close){background:transparent !important;border:0 !important;padding:28px 0 !important}
html body.page-about main :is(.about-why,.about-audit,.about-close)>.wrap,
html body.page-about main section.about-biodegrade{background:#fff;border:1px solid rgb(230,228,207);border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 48px -28px rgba(15,23,42,.22);padding:48px clamp(20px,4vw,56px);max-width:calc(var(--wrap,1200px) - 48px)}
html body.page-about main section.about-biodegrade{margin:28px auto}
html body.page-about main :is(.about-why,.about-audit,.about-biodegrade,.about-close) :is(img,picture,figure):not(.alpro-logo-strip):not([class*=logo]){border-radius:16px;border:1px solid rgb(230,228,207);box-shadow:0 0 0 8px rgba(255,203,4,.06),0 28px 60px -28px rgba(255,203,4,.55)}
html body.page-about main :is(.about-why,.about-audit,.about-biodegrade,.about-close) picture img{border:0;box-shadow:none}
@media (max-width:760px){
html body.page-about main :is(.about-why,.about-audit,.about-close){padding:16px 0 !important}
html body.page-about main :is(.about-why,.about-audit,.about-close)>.wrap,html body.page-about main section.about-biodegrade{margin-left:12px;margin-right:12px;padding:28px 18px;border-radius:16px}
}

/* Karen 2026-10-23: About us section headings bigger again to balance the 56px hero (About page only; wording/capitals unchanged) */
html body.page-about main .sec-typo{font-size:40px !important;font-weight:800 !important;line-height:1.05 !important}
@media (max-width:760px){html body.page-about main .sec-typo{font-size:28px !important}}

/* Karen 2026-10-23 16:59: side menu readable over the dark compliance photo on Home (a.on-dark set per item by main.js). Light sections unchanged. */
html body .pdp-rail a.on-dark:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x){color:rgba(255,255,255,.78) !important}
html body .pdp-rail a.on-dark:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x):hover{color:#fff !important}
html body .pdp-rail a.on.on-dark:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x){color:#7DD3FC !important;border-left-color:#7DD3FC}
/* Karen 2026-10-23 17:19 TRIAL: Home Compliance banner cards as frosted glass (colour/effects only, no wording). */
html body main .home-comp .home-comp-card{background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)),rgba(6,22,40,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.25);border-top:1px solid rgba(255,255,255,.25);border-radius:16px;box-shadow:0 10px 30px rgba(2,12,24,.28),inset 0 1px 0 rgba(255,255,255,.18)}
/* Karen 2026-10-23 17:27: Compliance hero 'audit-ready.' at the standard hero heading size (var(--h1-hero) 52px desktop / 32px phone, 800, lh 1.1, as .pdp-claim on category pages) and shown in capitals via CSS; source text unchanged, colour unchanged. */
html body.page-compliance .pdp-band .pdp-typo,
html body.page-compliance .pdp-band .pdp-typo span{font-size:var(--h1-hero) !important;font-weight:800 !important;line-height:1.1 !important;letter-spacing:-.02em !important;text-transform:uppercase !important}
/* Karen 2026-10-23 17:31: same standard size + capitals for the other hero words (Support, category pages) and all 7 in the darker blue #0878B2. Product-page slogan bands are not affected. */
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo,
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo span{font-size:var(--h1-hero) !important;font-weight:800 !important;line-height:1.1 !important;letter-spacing:-.02em !important;text-transform:uppercase !important;color:#0878B2 !important}
/* Karen 2026-10-23 17:33: About hero heading shown in capitals (CSS only; source text and size unchanged). */
html body.page-about main .about-hero-claim{text-transform:uppercase !important}
/* Karen 2026-10-23 18:02: hero words keep words whole (layout only). The old forced line-per-span breaks are neutralised (spans inline), so the
   words wrap naturally after the hyphen or between words. Word gaps (KEEP IT FLOWING., WATER QUALITY.) are a margin plus a zero-width break
   opportunity: no letters added or moved. */
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo > span{display:inline !important}
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo[style*="#3E7CA6"] > span:nth-child(-n+2),
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo[style*="#0F97BC"] > span:nth-child(2){margin-right:.26em}
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo[style*="#3E7CA6"] > span:nth-child(-n+2)::after,
html body main .pdp-band:not(.pdp-band-slogan) .pdp-typo[style*="#0F97BC"] > span:nth-child(2)::after{content:"\200B"}
/* ===== Karen 2026-10-24: heading + mobile consistency; slogan 36/700 desktop, 24 phone (Karen 2026-10-24 00:52) (one shared scale for every product page, incl. ff-keep). Size/weight/spacing/layout only; per-area colours and all capitals unchanged. ===== */
html body.page-products main .prog-name{font-size:32px !important;font-weight:700 !important;line-height:1.15 !important}
html body.page-products main :is(.pdp-band-slogan-text,.pdp-band-slogan-text *,.prog-slogan,.prog-slogan *){font-size:36px !important;font-weight:700 !important;line-height:1.05 !important}
html body.page-products main :is(.pdp-band-slogan-sub,.pdp-band-slogan-sub *,.prog-slogan .prog-slogan-sub,.prog-slogan .prog-slogan-sub *){font-size:16px !important;font-weight:500 !important;line-height:1.5 !important;letter-spacing:0 !important}
html body.page-products main .prog-slogan .prog-slogan-sub strong,html body.page-products main .pdp-band-slogan-sub strong{font-weight:700 !important}
html body.page-products main :is(h2,.prog-claim,.prog-facts-h,h3.sec-typo-h3){font-size:22px !important;font-weight:700 !important;line-height:1.25 !important}
html body.page-products main :is(h3:not(.sec-typo-h3),h4){font-size:16px !important;font-weight:600 !important;line-height:1.35 !important}
html body.page-products main :is(p.lead,p.pdp-lead,dd,p:not([class])){font-size:16px !important;line-height:1.5 !important}
html body :is(.pdp-page,main) :is(.pw-link,.pinfo-note,.ev-note,.ev-note a){font-size:16px !important;line-height:1.5 !important}
@media (max-width:760px){
  html body.page-products main .prog-name{font-size:26px !important;line-height:1.15 !important}
  html body.page-products main :is(.pdp-band-slogan-text,.pdp-band-slogan-text *,.prog-slogan,.prog-slogan *){font-size:36px !important}
  html body.page-products main :is(.pdp-band-slogan-sub,.pdp-band-slogan-sub *,.prog-slogan .prog-slogan-sub,.prog-slogan .prog-slogan-sub *){font-size:16px !important}
  html body.page-products main :is(.prog-slogan,.pdp-band-slogan-text){margin-top:20px !important;margin-bottom:20px !important}
  html body.page-products main :is(h2,.prog-claim,.prog-facts-h,h3.sec-typo-h3){font-size:19px !important}
  /* top gap + one back link */
  html body main .wrap:has(> nav.crumbs){padding-top:12px !important;padding-bottom:4px !important}
  html body.page-products main .wrap:has(> .pdp-backcat) > nav.crumbs{display:none !important}
  /* 18px side margins */
  html body main section > .wrap{padding-left:18px !important;padding-right:18px !important}
  /* About hero */
  html body.page-about main .about-hero-claim{font-size:28px !important;font-weight:800 !important;line-height:1.1 !important}
  /* Home hero title readable on the dark photo */
  /* chat button 44px, clear of text */
  html body:not(.tc-page) .chat-fab{width:44px !important;height:44px !important;padding:0 !important;justify-content:center !important;right:10px !important}
  /* cookie bar ~90px */
  html body .cookie-bar{padding:10px 16px !important}
  html body .cookie-bar p{margin:0 0 8px !important;font-size:13px !important;line-height:1.35 !important}
  html body .cookie-bar :is(.btn,button){min-height:44px !important;padding:8px 14px !important}
  /* 44px tap targets */
  html body main :is(.pw-link,.doc-row a,.pcard-link,.pdp-arealinks a,.tax-card a,.crumbs-m,.pdp-backcat a,a.cat-chip,.doc-open) {display:inline-flex;align-items:center;min-height:44px}
  html body footer a{display:inline-flex;align-items:center;min-height:44px}
}
/* Karen 2026-10-24 00:49: compact phone scale (<=480px) so the page reads as a whole. Size/spacing only; wording and capitals unchanged. Order kept: slogan 24 > name 22 > headings 18 > body 15. */
@media (max-width:480px){
  html body.page-products main :is(.pdp-band-slogan-text,.pdp-band-slogan-text *,.prog-slogan,.prog-slogan *){font-size:24px !important;line-height:1.15 !important}
  html body.page-products main :is(.pdp-band-slogan-sub,.pdp-band-slogan-sub *,.prog-slogan .prog-slogan-sub,.prog-slogan .prog-slogan-sub *){font-size:15px !important;line-height:1.5 !important}
  html body.page-products main :is(.prog-slogan,.pdp-band-slogan-text){margin-top:12px !important;margin-bottom:12px !important}
  html body.page-products main .prog-name{font-size:22px !important;line-height:1.15 !important}
  html body main :is(h1:not(.prog-name),.hero-typo,.pdp-band:not(.pdp-band-slogan) .pdp-typo,.pdp-band:not(.pdp-band-slogan) .pdp-typo *,.pdp-claim){font-size:27px !important;line-height:1.1 !important}
  html body .water-hero h1.wh-title{font-size:26px !important;line-height:1.12 !important}
  html body main :is(h2,.prog-claim,.prog-facts-h,h3.sec-typo-h3,.sec-typo){font-size:18px !important;font-weight:700 !important;line-height:1.25 !important}
  html body main :is(h3:not(.sec-typo-h3),h4){font-size:15px !important;font-weight:600 !important;line-height:1.35 !important}
  html body main :is(p,li,dd,summary,.lead,.pdp-lead,.pw-link,.pinfo-note,.ev-note):not(.eyebrow):not(.pinfo-lbl):not(.prog-cat-name):not(.prog-slogan){font-size:15px !important;line-height:1.5 !important}
  html body main summary{font-weight:600 !important}
  html body main :is(.eyebrow,.pinfo-lbl,.prog-cat-name,.fgroup-h){font-size:12.5px !important}
  html body main section{padding-top:28px !important;padding-bottom:28px !important}
  html body main :is(.pdp-band:not(.pdp-band-slogan),.water-hero,.about-hero-dark,.tc-banner){min-height:0 !important}
  html body main :is(.pdp-band:not(.pdp-band-slogan),.tc-banner) :is(img,picture,.pdp-band-media){max-height:35vh !important;object-fit:cover}
  html body main .pdp-pack img{max-height:35vh !important;width:auto !important;margin-inline:auto;object-fit:contain}
}
/* Best-practice phone chrome (HIG/Material/WCAG 2.2): compact header, small cookie sheet, chat button clear, tab-strip scroll cue */
@media (max-width:480px){
  html body .trust-strip{display:none !important}
  html body .promo-strip{font-size:12px !important;padding:6px 12px !important;line-height:1.3 !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html body .hdr .hdr-in{min-height:56px !important;height:56px !important;padding-top:6px !important;padding-bottom:6px !important}
  html body .cookie-bar{display:flex !important;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)) !important;border-radius:14px 14px 0 0}
  html body .cookie-bar p{flex:1;margin:0 !important;font-size:12.5px !important;line-height:1.35 !important}
  html body .cookie-bar .cb-actions{display:flex;flex-direction:column;gap:8px;margin:0 !important}
  html body .cookie-bar .cb-actions .btn{min-height:44px !important;padding:6px 12px !important;font-size:14px !important;white-space:nowrap}
  html body:not(.tc-page) .chat-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;opacity:.92}
  html body .pdp-topbar ul{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:28px}
  html body main a{min-height:24px}
}
/* Karen 2026-10-24 00:54: phone polish round 2 (<=480px). Size/spacing/layout only. */
@media (max-width:480px){
  html body .cookie-bar{display:flex !important;flex-direction:row !important;align-items:center !important;gap:8px !important;min-height:0 !important;height:auto !important;max-height:none !important;flex-wrap:nowrap !important;padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px)) !important;border-radius:0 !important}
  html body .cookie-bar p{flex:1 1 0 !important;min-width:0 !important;max-width:none !important;margin:0 !important;font-size:11.5px !important;line-height:1.3 !important}
  html body .cookie-bar .cb-actions{display:flex !important;flex-direction:row !important;gap:6px !important;margin:0 !important;flex:0 0 auto}
  html body .cookie-bar .cb-actions .btn{min-height:40px !important;height:40px !important;padding:0 9px !important;font-size:13px !important;white-space:nowrap}
  html body:not(.tc-page) .chat-fab{width:40px !important;height:40px !important;min-width:0 !important;right:16px !important;bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important;padding:0 !important;box-shadow:0 4px 12px rgba(0,0,0,.25) !important}
  html body:has(#cookie-bar:not([hidden])) .chat-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important}
  html body main{padding-bottom:72px !important}
  html body main :is(.pdp-band:not(.pdp-band-slogan) .pdp-typo,.pdp-band:not(.pdp-band-slogan) .pdp-typo *,.pdp-claim,.tc-banner-title,.hero-typo:not(.about-hero-claim)){font-size:26px !important;line-height:1.1 !important}
  html body main .water-hero h1.wh-title{font-size:24px !important;line-height:1.15 !important}
  html body main .water-hero{position:relative}
  html body.page-about main .about-hero-claim{font-size:23px !important;line-height:1.12 !important}
  html body main .wrap{padding-left:16px !important;padding-right:16px !important}
  html body main .wrap:has(> nav.crumbs),html body main .wrap:has(> .pdp-backcat){padding-top:8px !important;padding-bottom:0 !important;min-height:0 !important}
  html body main :is(.crumbs-m,.pdp-backcat,.pdp-backcat a){font-size:13px !important;min-height:32px !important;margin:0 !important}
  html body main :is(nav.crumbs,.pdp-backcat){padding:0 !important;margin:0 !important}
  html body main :is(section,div):has(> .wrap > nav.crumbs):not(main){padding-top:0 !important;padding-bottom:0 !important;min-height:0 !important;}
  html body .promo-strip{font-size:11px !important;padding:4px 8px !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  html body .hdr .hdr-in{min-height:52px !important;height:52px !important;padding-top:4px !important;padding-bottom:4px !important}
  html body .hdr .logo img,html body .hdr .logo svg{max-height:30px !important;width:auto !important}
  html body main :is(.pdp-band:not(.pdp-band-slogan),.tc-banner) :is(img,picture,.pdp-band-media),html body main .pdp-band:not(.pdp-band-slogan){max-height:30vh !important}
  html body main .pdp-band:not(.pdp-band-slogan){overflow:hidden}
  html body main .pdp-pack img{max-height:30vh !important}
  html body main .rc-banner{padding-left:16px !important;padding-right:16px !important}
}
/* Karen 2026-10-24 01:00: Philips phone patterns (<=480px). Size/layout only; words and capitals unchanged. */
@media (max-width:480px){
  /* 1 hero = rounded photo card, heading overlaid white, centred */
  html body main section.pdp-band:not(.pdp-band-slogan){position:relative !important;margin:8px 16px 16px !important;border-radius:16px !important;overflow:hidden !important;height:62vh !important;max-height:none !important;min-height:0 !important;padding:0 !important}
  html body main section.pdp-band:not(.pdp-band-slogan) .pdp-band-img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-height:none !important;object-fit:cover !important}
  html body main section.pdp-band:not(.pdp-band-slogan) .pdp-band-shade{position:absolute !important;inset:0 !important;display:block !important}
  html body main section.pdp-band:not(.pdp-band-slogan) .pdp-band-in{position:absolute !important;top:28px !important;left:0 !important;right:0 !important;padding:0 20px !important;text-align:center !important}
  html body main section.pdp-band:not(.pdp-band-slogan) :is(.pdp-typo,.pdp-typo *){font-size:23px !important;font-weight:600 !important;line-height:1.2 !important;letter-spacing:0 !important;text-align:center !important;display:inline !important}
  html body main section.pdp-band:not(.pdp-band-slogan) .pdp-typo{display:-webkit-box !important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 auto !important;max-width:none !important}
  html body main section.pdp-band:not(.pdp-band-slogan) .pdp-band-in :is(p,.pdp-band-sub){font-size:13px !important;margin-top:6px !important}
  html body main .water-hero{margin:8px 16px 16px !important;border-radius:16px !important;overflow:hidden !important;min-height:0 !important}
  html body main .water-hero .wh-layers{text-align:center !important;padding:28px 18px !important}
  html body:not(.page-about) main .water-hero h1.wh-title{font-size:23px !important;font-weight:600 !important;line-height:1.2 !important;margin-inline:auto !important}
  html body main .water-hero :is(.wh-eyebrow,.wh-sub){text-align:center !important;justify-content:center !important;margin-inline:auto !important}
  html body main .water-hero .wh-sub{font-size:14px !important;font-weight:500 !important}
  html body main .about-hero-dark{margin:8px 16px 16px !important;border-radius:16px !important;overflow:hidden !important;padding:24px 0 !important}
  html body.page-about main .about-hero-claim{font-size:22px !important;font-weight:600 !important;line-height:1.2 !important}
  html body.page-about main .about-hero-dark :is(.hero-sub,.about-meta){font-size:13px !important}
  html body.page-about main .about-hero-dark .hero-cta{margin-top:14px !important}
  /* 2 link lists = thin divider rows with icon + chevron */
  html body main .doc-list{gap:0 !important;border-top:1px solid #E5E7EB}
  html body main .doc-row{display:flex !important;align-items:center !important;gap:10px !important;border:0 !important;border-bottom:1px solid #E5E7EB !important;border-radius:0 !important;box-shadow:none !important;padding:10px 2px !important;min-height:48px !important}
  html body main .doc-row .doc-type{font-size:11px !important;flex:0 0 auto}
  html body main .doc-row .doc-b{flex:1 1 auto;min-width:0}
  html body main .doc-row .doc-b b{font-size:14px !important;font-weight:600 !important;display:block}
  html body main .doc-row .doc-b span{font-size:12px !important}
  html body main .doc-row .doc-dl{flex:0 0 auto;font-size:12px !important;min-height:44px;display:inline-flex !important;align-items:center}
  /* 3 product / category groups = horizontal swipe rows */
  html body main :is(.tax-grid,.grid.grid-3:has(> .pcard)){display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;scroll-snap-type:x mandatory;gap:10px !important;padding:2px 16px 10px !important;margin-inline:-16px !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body main :is(.tax-grid,.grid.grid-3:has(> .pcard)) > *{flex:0 0 38% !important;scroll-snap-align:start;min-width:0 !important;margin:0 !important}
  html body main .tax-card{padding:12px 10px !important;min-height:0 !important;gap:6px !important;flex-direction:column !important;align-items:flex-start !important}
  html body main .tax-card .tax-card-icon{width:36px !important;height:36px !important}
  html body main .tax-card :is(.tax-card-name){font-size:13px !important;line-height:1.25 !important}
  html body main .tax-card :is(.tax-card-desc,p){display:none !important}
  html body main .pcard{padding:8px !important}
  html body main .pcard .pcard-img{height:110px !important;min-height:0 !important}
  html body main .pcard .pcard-img img{max-height:100px !important;width:auto !important;object-fit:contain}
  html body main .pcard :is(.pcard-body > p,.pcard-qv,.pcard-cat){display:none !important}
  html body main .pcard :is(h3,.pcard-name){font-size:13px !important}
  /* 5 show-more folds (assets/js/phone-fold.js adds the toggle) */
  html body main .pf-fold{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  html body main .pf-btn{background:none;color:#0878B2;display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;font-weight:600;font-size:14px}
  /* chat button clear of cards */
  html body:not(.tc-page) .chat-fab{right:12px !important;width:40px !important;height:40px !important}
  html body main .pdp-pack{margin-right:0 !important}
}
@media (min-width:481px){html body .pf-btn{display:none !important}}
/* Karen 2026-10-24 01:07: chat button tidy on phones - no pulse ring, stays inside the screen edge */
@media (max-width:480px){
  html body:not(.tc-page) .chat-fab{right:14px !important;box-shadow:0 2px 8px rgba(0,0,0,.22) !important;opacity:1 !important}
  html body:not(.tc-page) .chat-fab::before,html body:not(.tc-page) .chat-fab::after{display:none !important;animation:none !important}
  html body .chat-greet{display:none !important}
}
/* phone scale wins over the 760px product rules (same specificity, later in file) */
@media (max-width:480px){
  html body[class] main :is(h2,.prog-claim,.prog-facts-h,.disclaimers-h,h3.sec-typo-h3,.sec-typo){font-size:18px !important;font-weight:700 !important;line-height:1.25 !important}
  html body[class] main :is(h3:not(.sec-typo-h3):not(.sec-typo),h4){font-size:15px !important;font-weight:600 !important;line-height:1.35 !important}
  html body[class] main summary{font-size:15px !important;font-weight:600 !important}
}
@media (max-width:480px){
  html body[class] main p.prog-claim.prog-claim{font-size:18px !important;font-weight:700 !important;line-height:1.25 !important}
  html body[class] main :is(h2,h3).sec-typo.sec-typo-series{font-size:18px !important}
}
html body[class] main details > summary{font-size:16px !important;font-weight:600 !important}
@media (max-width:480px){html body[class] main details > summary{font-size:15px !important}}
/* Karen 2026-10-24 01:11: Home hero fits one phone screen (logo -> trust badges), cookie bar included. Size/spacing only. */
@media (max-width:480px){
  html body main .water-hero{margin:6px 12px 12px !important;min-height:0 !important;height:auto !important}
  html body main .water-hero .wh-layers{padding:14px 14px 12px !important;min-height:0 !important}
  html body main .water-hero .wh-eyebrow{margin:0 0 8px !important;min-height:0 !important}
  html body main .water-hero .wh-eyebrow-chip{padding:3px 6px !important;min-height:0 !important}
  html body main .water-hero .wh-alpro-logo{height:26px !important;width:auto !important}
  html body:not(.page-about) main .water-hero h1.wh-title{font-size:20px !important;line-height:1.2 !important;margin:0 0 6px !important}
  html body main .water-hero .wh-sub{font-size:13px !important;line-height:1.35 !important;margin:0 0 10px !important}
  html body main .water-hero .hero-cta{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px !important;margin:0 0 10px !important;justify-content:center !important}
  html body main .water-hero .hero-cta .btn{flex:1 1 0 !important;min-width:0 !important;width:auto !important;min-height:40px !important;height:40px !important;padding:0 8px !important;font-size:13px !important;white-space:nowrap !important;justify-content:center !important}
  html body main .water-hero .hero-cta .btn svg{width:14px !important;height:14px !important}
  html body main .water-hero .wh-body{margin:0 0 8px !important;padding:8px 10px !important;border-width:2px !important}
  html body main .water-hero .wh-body p{font-size:13px !important;line-height:1.4 !important;margin:0 0 4px !important}
  html body main .water-hero .wh-body p:last-child{margin-bottom:0 !important}
  html body main .water-hero .wh-cred{margin:0 !important;padding:6px 0 0 !important;border-top-width:1px !important}
  html body main .water-hero .wh-badges{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;gap:2px 10px !important;margin:0 !important;padding:0 !important}
  html body main .water-hero .wh-badges li{font-size:11px !important;line-height:1.35 !important;margin:0 !important;padding:0 0 0 9px !important}
  html body main .water-hero .wh-badges li::before{width:4px !important;height:4px !important}
  html body main .water-hero .wh-foot{padding-right:40px !important;font-size:11px !important;margin:6px 0 0 !important;line-height:1.3 !important}
}
/* Karen 2026-10-24 01:30: Home phone hero - reserve paragraph height so the Inter font swap does not shift the hero (CLS). Size only. */
@media (max-width:480px){
  html body main .water-hero .wh-body p:first-child{min-height:136px !important}
  html body main .water-hero .wh-alpro-logo{aspect-ratio:145/52}
}
/* Andreas 2026-10-26 'Fwd: webpage': his AlproJet-D + W system copy on the Aspiration systems care category page. Same look as the
   D/W product pages (gold top line, dark second line, capitals exactly as typed - no CSS lowercase). Colour/case only. */
html body.page-products main .cat-series .sec-typo-series{text-transform:none !important;color:#8A6A00 !important}
html body.page-products main .cat-series .sec-typo-series .g{color:var(--ink) !important}
/* Karen 2026-10-29 call: home hero text panel gets the About-us glass recipe (AlproJet-D glass look). Background/border/shadow only; no wording or palette change. */
html body .home-alpro .wh-body{background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)),rgba(6,22,40,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.25);border-left:1px solid rgba(255,255,255,.25);border-radius:16px;box-shadow:0 10px 30px rgba(2,12,24,.28),inset 0 1px 0 rgba(255,255,255,.18)}
/* Karen 2026-10-29 call: desktop only - category band photo spans exactly the product-card rows (top of first card row to bottom of last card). All home category bands share this layout. Phone/tablet stacking unchanged. */
@media (min-width:961px){html body .home-alpro .home-band-in{row-gap:24px;align-items:start}html body .home-alpro .home-band-main{display:contents}html body .home-alpro .home-band-head{grid-column:1;grid-row:1}html body .home-alpro .home-band-cards{grid-column:1;grid-row:2}html body .home-alpro .home-band-links{grid-column:1;grid-row:3}html body .home-alpro .home-band-photo{grid-column:2;grid-row:2;align-self:stretch;aspect-ratio:auto;height:auto;min-height:0}html body .home-alpro .home-band-photo img{position:absolute;inset:0}html body .home-alpro .home-band-photo{position:relative}}
/* Karen 2026-10-29 call: Aspiration home band has no photo; content takes the full width. */
html body .home-band-in.home-band-nophoto{grid-template-columns:minmax(0,1fr)}
/* Karen 2026-10-29 call: REF line under every home product card. */
html body .home-mini-ref{display:block;padding:0 14px 12px;margin-top:-8px;font:400 12.5px/1.35 var(--font);color:var(--ink-2)}
@media (max-width:760px){html body .home-alpro .home-mini-ref{padding:0 10px 10px;margin-top:-6px;font-size:12px}}
/* Karen 2026-10-29 call: bigger product images in all product cards (contain-fit, no crop). */
html body .home-alpro .home-mini-img,html body .home-band-cards-4 .home-mini-img{height:172px;padding:8px}
html body .home-alpro .home-mini-img>img:not(.pcard-tax),html body .home-band-cards-4 .home-mini-img>img:not(.pcard-tax){max-height:156px;max-width:100%;width:auto;object-fit:contain}
html body .pcard-img:not(.hero){height:240px;padding:12px}html body .pdp-page .pcard-img:not(.hero){height:190px;padding:10px}
@media (max-width:640px){html body .home-alpro .home-mini-img,html body .home-band-cards-4 .home-mini-img{height:136px;padding:6px}html body .home-alpro .home-mini-img>img:not(.pcard-tax),html body .home-band-cards-4 .home-mini-img>img:not(.pcard-tax){max-height:124px}html body main .pcard .pcard-img:not(.hero){height:160px !important;padding:8px}html body main .pcard .pcard-img:not(.hero) img{max-height:144px !important}}
/* Karen 2026-10-29 call: expandable key-fact cards (details/summary). Colours unchanged; headline uses panel accent. */
html body .benefit-list li.kf-acc{align-items:flex-start}
html body .kf-d{flex:1;min-width:0}
html body .kf-s{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-weight:700}
html body .kf-s::-webkit-details-marker{display:none}
html body .kf-s:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
html body .kf-chev{flex:none;display:inline-flex;transition:transform .2s}html body .kf-chev svg{width:18px;height:18px;transform:rotate(90deg)}
html body .kf-d[open] .kf-chev{transform:rotate(180deg)}
html body .kf-d .benefit-link{display:inline-block;margin-top:8px}
/* Karen 2026-10-29 call (Bilpron, opt-in p.pinfoSticky): glass Key Features box + sticky product image (desktop only). Wording/colours unchanged. */
html body .pinfo-feats-glass{margin:0 0 24px;padding:18px 22px;border-radius:16px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.35)),rgba(230,246,252,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(2,12,24,.10),inset 0 1px 0 rgba(255,255,255,.9)}
html body .pinfo-feats-glass .pinfo-feats{margin-bottom:0}
html body .pinfo-aside{display:none}
@media (min-width:961px){html body .pinfo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:48px;align-items:start}html body .pinfo-aside{display:block;align-self:stretch}html body .pinfo-sticky{position:sticky;top:calc(var(--hdr-h,76px) + 72px);background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 10px 28px rgba(15,23,42,.08);display:flex;justify-content:center}html body .pinfo-sticky img{max-width:100%;max-height:360px;width:auto;object-fit:contain}}
/* Karen 2026-10-29 call: open key-fact card stands out (frosted glass, soft glow, slightly raised); nested sub-steps tidy inside. */
html body .benefit-list li.kf-acc{transition:box-shadow .2s,transform .2s,background .2s}
html body .benefit-list li.kf-acc:has(.kf-d[open]){background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.55));-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);box-shadow:0 14px 34px rgba(0,160,227,.18),0 0 0 1px rgba(0,160,227,.25),inset 0 1px 0 rgba(255,255,255,.9);transform:translateY(-2px);position:relative;z-index:1}
html body .kf-d .kf-t .benefit-claim-t,html body .kf-d .kf-t.benefit-claim-t{margin:0;color:inherit}
html body .kf-d .benefit-sub{margin:10px 0 0;padding-left:0;list-style:none}html body .kf-d .benefit-sub li{margin:0 0 6px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid rgba(0,160,227,.15)}
@media (prefers-reduced-motion:reduce){html body .benefit-list li.kf-acc{transition:none}html body .benefit-list li.kf-acc:has(.kf-d[open]){transform:none}}
/* Karen 2026-10-29 call: Biotesters reading chart spans the full main area (no crop); next-step block (water management sequence). */
html body .pw-diagram.wide{max-width:none !important;width:100%}
html body .pw-diagram.wide .circle-crop.clean img{width:100%;height:auto;object-fit:contain}
html body .pw-sec:has(.pw-diagram.wide){max-width:none}
html body .next-step{margin-top:clamp(32px,4vw,56px);margin-bottom:clamp(24px,3vw,40px)}
html body .next-step-in{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px 40px;align-items:center;padding:24px 28px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.06)}
html body .next-step-b{margin:8px 0 0;color:var(--ink-2)}
@media (max-width:640px){html body .next-step-in{grid-template-columns:1fr;padding:18px}html body .next-step-card{max-width:240px}}
/* Karen 2026-10-29 call: protocol step line icons beside the number badge. */
html body .step-ic{display:inline-flex;vertical-align:middle;margin-left:10px;color:var(--tax,var(--accent,#0072BC))}html body .step-ic svg{width:28px;height:28px}
/* Karen 2026-10-29 call: IC-100 hero sublines recede (muted blue-grey #4F6B80, regular weight; AA on the light hero). */
html body.page-products main :is(.pdp-band-slogan-sub.sub-muted,.pdp-band-slogan-sub.sub-muted *,.prog-slogan .prog-slogan-sub.sub-muted,.prog-slogan .prog-slogan-sub.sub-muted *){color:#4F6B80 !important;font-weight:400 !important}
/* Karen 2026-10-29 (t2193u): IC-100 "Why clean first" cards get the Bilpron key-features glass. */
html body .pw-keys-glass>.pw-key{padding:18px 22px;border-radius:16px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.35)),rgba(230,246,252,.6);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(2,12,24,.10),inset 0 1px 0 rgba(255,255,255,.9)}
/* Karen t2193u: specificity fix — layout rules (lr-layout) forced white/no-shadow; blue top rule kept. */
html body main .pw-sec .grid.pw-keys-glass>.pw-key{background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.35)),rgba(230,246,252,.6) !important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-left:1px solid rgba(255,255,255,.8) !important;border-right:1px solid rgba(255,255,255,.8) !important;border-bottom:1px solid rgba(255,255,255,.8) !important;box-shadow:0 10px 30px rgba(2,12,24,.10),inset 0 1px 0 rgba(255,255,255,.9) !important}
/* Karen 2026-10-29 (t2197u): all-caps intro lines in the category colour, semi-bold (class from build.js). */
html body main p.pdp-lead.pdp-lead-caps,html body main p.pdp-lead.pdp-lead-caps :is(strong,b,em){color:var(--lead-caps) !important;font-weight:600 !important}
/* Karen 2026-10-29 (t2198u): motto step chips (class from build.js). Colour follows the line (category colour in slogans / caps leads), else the page accent. */
html body main .motto-chips{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0;color:var(--lead-caps,var(--accent-text))}
html body main .motto-chips .motto-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);background:color-mix(in srgb,currentColor 9%,#fff);color:inherit;font-weight:600 !important;font-size:.92em;letter-spacing:.04em;line-height:1.3;white-space:nowrap;text-transform:none}
html body main .motto-chips .motto-sep{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;flex:none}
html body main .motto-chips .motto-dot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html body main :is(.pdp-band-slogan-sub,.prog-slogan-sub) .motto-chips{color:inherit}
html body main :is(.pdp-band-slogan-sub,.prog-slogan-sub) .motto-chips{color:inherit}
/* Karen 2026-10-29 (t2199u): AlproZyme video poster overlay. */
html body .pdp-video.has-ov{position:relative}
html body .pdp-video-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .25s}
html body .pdp-video-ov-in{max-width:min(80%,640px);text-align:center;color:#fff;padding:18px 26px;border-radius:16px;background:rgba(8,20,34,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(2,12,24,.25)}
html body .pdp-video-ov-in b{display:block;font-weight:700;font-size:clamp(17px,1.6vw,22px);letter-spacing:.02em;margin-bottom:6px;color:#fff}
html body .pdp-video-ov-in span{display:block;font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:#fff}
html body .pdp-video.is-playing .pdp-video-ov{opacity:0}
html body .pdp-video-ov-top{display:none;text-align:center;margin:0 auto 14px;max-width:44ch}
html body .pdp-video-ov-top b{color:var(--accent-text)}
@media (max-width:640px){html body .pdp-video-ov{display:none}html body .pdp-video-ov-top{display:block}}
/* Karen 2026-10-29 (t2201u): ^^accent^^ phrase in intro text: theme colour, semi-bold, upright. */
html body main .pdp-lead .lead-accent{color:var(--lead-accent) !important;font-weight:600 !important;font-style:normal !important}
/* Karen 2026-10-29 (t2202u): "Make the difference visible" overflowed its key-fact card. Root cause: a fixed 2-column .grid-2 inside a narrow card (3-up at 1280, 2-up at 1024); grid items default to min-width:auto, so the letter-spaced eyebrows and "CLEAN + DISINFECT" pushed the right column past the card edge. Fix: columns of at least 180px that stack when the card is narrower, and items allowed to shrink. */
html body main .why-compare>.grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)) !important;gap:18px 20px !important}
html body main .why-compare>.grid>*{min-width:0}
html body main .why-compare :is(.eyebrow,strong){overflow-wrap:anywhere}
/* Karen 2026-10-29 (t2209u): AlproJet-D + AlproJet-W photos side by side between the intro and the use columns. */
html body .series-pair{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,5vw,72px);margin:clamp(20px,3vw,36px) 0 4px}
html body .series-pair-i{display:block;line-height:0}
html body .series-pair-i img{height:clamp(200px,26vw,360px);width:auto;max-width:42vw;object-fit:contain}
/* Karen 2026-10-29 (t2208u): Aspiration category page - light yellow page with frosted glass panels (home-hero glass recipe, light variant). Wording unchanged; same on phone. */
html body.cat-glass-yellow{background:linear-gradient(180deg,#FFF4CC 0%,#FFF0BF 55%,#FFF4CC 100%) !important} /* t2211u: one step deeper, matches the AlproJet pages */
html body.cat-glass-yellow main :is(.band:not(.band-green),section.wrap,.pdp-series){background:transparent !important}
html body.cat-glass-yellow main :is(.cat-series .alt-row,.series-use,.pdp-info-note,.more-products .wrap>*,section.wrap:not(.disclaimers)>*){background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.42)),rgba(255,248,214,.35) !important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.85) !important;border-radius:16px !important;box-shadow:0 10px 30px rgba(60,48,0,.10),inset 0 1px 0 rgba(255,255,255,.9) !important}
html body.cat-glass-yellow main .cat-series .alt-row{padding:clamp(18px,2.4vw,32px) !important}
html body.cat-glass-yellow main :is(.series-use,.pdp-info-note,section.wrap:not(.disclaimers)>*){padding:clamp(16px,2vw,24px) clamp(18px,2.2vw,28px) !important}
/* Karen 2026-10-29 (t2211u): AlproJet-D/-W yellow one small step deeper (#FFF8E1 -> #FFF2C6, hero #FFFAE6 -> #FFF4CC). Contrast: #8A6A00 4.53:1, body text 13:1; phone slogan #0878B2 would drop to 4.32:1, so it moves to #0A6FA3 (4.92:1). */
html body.type-trial:not([class*=" ff-"]){--ff-tint:#FFF2C6;--ff-hero:#FFF4CC}
html body.type-trial:not([class*=" ff-"]) main section.prog-facts{background:#FFF2C6 !important}
html body.gold-dark.type-trial main .prog-hero{background:#FFF2C6 !important}
@media (max-width:760px){html body.type-trial:not([class*=" ff-"]):not(.ff-keep) main .prog-slogan{color:#0A6FA3 !important}}
/* Karen 2026-10-29 (t2218u): Surfaces category page - light green page (its own #1E8E3E theme) with frosted glass panels, same recipe as the Aspiration yellow. Wording unchanged; same on phone. */
html body.cat-glass-green{background:linear-gradient(180deg,#EAF6EE 0%,#DCF0E2 55%,#EAF6EE 100%) !important}
html body.cat-glass-green main .band:not(.band-green){background:transparent !important}
html body.cat-glass-green main :is(section.wrap:not(.disclaimers),.band:not(.band-green):not(.more-products):not(.sus-band)>.wrap,.more-products .wrap>*){background:linear-gradient(rgba(255,255,255,.62),rgba(255,255,255,.42)),rgba(220,240,226,.35) !important;-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.85) !important;border-radius:16px !important;box-shadow:0 10px 30px rgba(10,60,30,.10),inset 0 1px 0 rgba(255,255,255,.9) !important;padding:clamp(16px,2vw,28px) clamp(18px,2.2vw,30px) !important}
html body.cat-glass-green main section.wrap:not(.disclaimers){margin-top:24px;margin-bottom:24px;max-width:min(1200px,calc(100% - 32px))}
/* Karen 2026-10-29 (t2220u): THE BENEFIT line in the card-heading green (class + colour set in build.js). */
html body main p.benefit-line,html body main p.benefit-line :is(strong,.cw-lbl){color:inherit !important}
/* Karen 2026-10-29 t2231u/t2233u: THE BENEFIT follows the visible card-heading theme colour; open key-fact cards + the Friday routine box get the open-card glass (page theme). */
html body.cw-layout{--kf-t:#1F6FA8}html body.lr-layout main{--kf-t:var(--lr,#1F6FA8)}html body.cw-layout main .benefit-line,html body.lr-layout main .benefit-line{color:var(--kf-t) !important}
html body main details.cw-acc{transition:box-shadow .2s,transform .2s,background .2s}html body main details.cw-acc[open],html body main figure:has(>img[src*="friday-routine"]){background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.55)) !important;-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);box-shadow:0 14px 34px color-mix(in srgb,var(--kf-t,#00A0E3) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--kf-t,#00A0E3) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.9);border-color:transparent !important;transform:translateY(-2px);position:relative;z-index:1}
html body main figure:has(>img[src*="friday-routine"]){border-radius:16px;padding:14px}
@media (prefers-reduced-motion:reduce){html body main details.cw-acc{transition:none}html body main details.cw-acc[open],html body main figure:has(>img[src*="friday-routine"]){transform:none}}
/* Karen 2026-10-29 t2247u: Compliance 'Use them for' box top aligns with the 'How the guides are used' eyebrow on desktop (phone unchanged). */
@media (min-width:901px){html body.page-compliance .comp-guides .comp-hero-aside{padding-top:0}}
/* Karen 2026-10-29 t2249u IC-100 design pilot (.ds-pilot, --ds = exact Medical-Programm 2026-2027 category colour): theme-glass ground, white cards, light theme tint inside the white. */
html body .pdp-page.ds-pilot{--lr:var(--ds);--kf-t:var(--ds);--lead-caps:var(--ds);--ds-ground:color-mix(in srgb,var(--ds) 16%,#fff);--ds-tint:color-mix(in srgb,var(--ds) 7%,#fff);--ds-line:color-mix(in srgb,var(--ds) 28%,#fff);background:linear-gradient(180deg,var(--ds-ground),color-mix(in srgb,var(--ds) 9%,#fff) 60%,var(--ds-ground))}
html body .pdp-page.ds-pilot :is(section.wrap.pw-sec,section.prog-facts,section.pdp-docs,section.ds-incat,section.wrap:has(.faq-list),section.wrap:has(.grid .pcard)){background:linear-gradient(rgba(255,255,255,.78),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border:1px solid rgba(255,255,255,.85);border-radius:22px;box-shadow:0 10px 30px color-mix(in srgb,var(--ds) 14%,transparent);padding:clamp(22px,3vw,40px);margin:clamp(18px,2.4vw,28px) auto}
html body .pdp-page.ds-pilot :is(.band.pw-sec,.band.more-products){background:transparent}
html body .pdp-page.ds-pilot :is(.why-use,.pw-key,details.cw-acc,.pcard,.faq,.grid-2>*:not(figure)){background:var(--ds-tint) !important;border:1px solid var(--ds-line) !important;border-radius:14px}
html body .pdp-page.ds-pilot .why-use{border-top:3px solid var(--ds) !important;padding:20px 22px}
html body .pdp-page.ds-pilot :is(.why-use-h,.cw-ico,.cw-lbl,.pw-key b){color:var(--ds) !important}
html body .pdp-page.ds-pilot .why-use .cw-ico{display:block;width:30px;height:30px;margin:0 0 10px;stroke:var(--ds)}
html body .pdp-page.ds-pilot :is(.ds-caps,.pdp-lead-caps,.benefit-line){color:var(--ds) !important;font-weight:600}
html body .pdp-page.ds-pilot .prog-imgs figure:has(>img[src*="friday-routine"]){background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
html body .pdp-page.ds-pilot .prog-imgs figure:has(>img[src*="friday-routine"])>img{border:0 !important;box-shadow:none !important;padding:0 !important;background:none !important}
@media (max-width:640px){html body .pdp-page.ds-pilot :is(section.wrap.pw-sec,section.prog-facts,section.pdp-docs,section.ds-incat,section.wrap:has(.faq-list),section.wrap:has(.grid .pcard)){border-radius:16px;padding:18px 16px;margin:14px 10px}}
html body .pdp-page.ds-pilot .ds-incat .grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* Karen 2026-10-29 t2251u IC-100 pilot pass 2: layered everywhere (theme glass ground → white → light theme glass inside the white). */
html body:has(.ds-pilot.pdp-area-surfaces){--dsb:#1EAA4A}html body:has(.ds-pilot.pdp-area-manual){--dsb:#0072BC}
@media (min-width:1180px){html body:has(.ds-pilot) .pdp-rail ul{border:1px solid color-mix(in srgb,var(--dsb) 28%,#fff);border-radius:16px;padding:44px 10px 12px;background:linear-gradient(color-mix(in srgb,var(--dsb) 7%,rgba(255,255,255,.9)),color-mix(in srgb,var(--dsb) 12%,rgba(255,255,255,.75)));-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);box-shadow:0 10px 26px color-mix(in srgb,var(--dsb) 16%,transparent);position:relative}
  html body:has(.ds-pilot) .pdp-rail::before{content:"On this page";position:absolute;top:14px;left:20px;z-index:1;font:700 11px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--dsb)}
  html body:has(.ds-pilot) .pdp-rail a{border-left:3px solid transparent;border-radius:0 8px 8px 0;padding:7px 10px 7px 12px;margin:1px 0}
  html body:has(.ds-pilot) .pdp-rail a:hover{color:var(--dsb);background:rgba(255,255,255,.6)}
  html body:has(.ds-pilot) .pdp-rail a.on{color:var(--dsb);font-weight:700;border-left-color:var(--dsb);background:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--dsb) 14%,transparent)}}
html body .pdp-page.ds-pilot :is(.ds-caps,p.pdp-lead-caps){font-size:1.12em;font-weight:600;line-height:1.35;letter-spacing:.01em}
html body .pdp-page.ds-pilot details.ds-kf-d>summary{list-style:none;cursor:pointer;display:block;position:relative;padding-right:26px}
html body .pdp-page.ds-pilot details.ds-kf-d>summary::-webkit-details-marker{display:none}
html body .pdp-page.ds-pilot details.ds-kf-d>summary:focus-visible{outline:2px solid var(--ds);outline-offset:4px;border-radius:8px}
html body .pdp-page.ds-pilot .ds-more{position:absolute;right:2px;top:4px;width:10px;height:10px;border-right:2px solid var(--ds);border-bottom:2px solid var(--ds);transform:rotate(45deg);transition:transform .2s}
html body .pdp-page.ds-pilot details.ds-kf-d[open] .ds-more{transform:rotate(-135deg);top:9px}
html body .pdp-page.ds-pilot .ds-why{display:block;margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink,#1f2937);padding:8px 10px;border-radius:10px;background:linear-gradient(color-mix(in srgb,var(--ds) 9%,rgba(255,255,255,.7)),color-mix(in srgb,var(--ds) 5%,rgba(255,255,255,.7)))}
html body .pdp-page.ds-pilot .ds-kf-body{margin-top:12px}html body .pdp-page.ds-pilot .ds-kf-body>p{margin:0 0 8px !important}
html body .pdp-page.ds-pilot .why-use{background:linear-gradient(color-mix(in srgb,var(--ds) 6%,rgba(255,255,255,.9)),color-mix(in srgb,var(--ds) 10%,rgba(255,255,255,.8))),#fff !important}
html body main .pdp-page.ds-pilot .prog-imgs figure:has(>img[src*="friday-routine"]){background:linear-gradient(color-mix(in srgb,var(--ds) 7%,rgba(255,255,255,.7)),color-mix(in srgb,var(--ds) 13%,rgba(255,255,255,.6))),#fff !important;border-radius:12px;box-shadow:0 8px 22px color-mix(in srgb,var(--ds) 12%,transparent) !important}
html body main .pdp-page.ds-pilot .pw-sec .grid.pw-keys-glass>.pw-key,html body main .pdp-page.ds-pilot .pw-keys>.pw-key{background:linear-gradient(color-mix(in srgb,var(--ds) 6%,rgba(255,255,255,.85)),color-mix(in srgb,var(--ds) 12%,rgba(255,255,255,.7))),#fff !important;-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--ds-line) !important;border-top:3px solid var(--ds) !important;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
html body .pdp-page.ds-pilot .pw-key b{display:block;font-size:17px !important;font-weight:600 !important;line-height:1.35 !important;color:var(--ds) !important;margin:0 0 6px}
html body .pdp-page.ds-pilot .pw-rows .pw-rh{font-size:20px !important;font-weight:700 !important;line-height:1.3 !important;letter-spacing:-.01em;color:var(--ds) !important;display:flex;align-items:center;gap:10px}
html body .pdp-page.ds-pilot .pw-rows .pw-rn{font-size:14px !important;width:30px;height:30px;flex:0 0 30px;display:inline-grid;place-items:center;border-radius:50%;background:var(--ds);color:#fff !important}
html body .pdp-page.ds-pilot .ds-next .grid{grid-template-columns:minmax(0,340px)}
html body main .pdp-page.ds-pilot :is(p.ds-caps,p.pdp-lead-caps){font-size:1.12em !important;font-weight:600 !important}html body .pdp-page.ds-pilot .ds-why{font-weight:400;max-width:none;width:auto;box-sizing:border-box}html body .pdp-page.ds-pilot .ds-why .cw-lbl{font-weight:700}
html body main .pdp-page.ds-pilot section.pw-sec:has(.pinfo-lbl) :is(.pinfo-feats-glass,ul.pinfo-feats,.pinfo-grid,.pinfo-sticky,.pinfo-split>div:not(.pinfo-aside)>dl){background:linear-gradient(color-mix(in srgb,var(--ds) 6%,rgba(255,255,255,.85)),color-mix(in srgb,var(--ds) 12%,rgba(255,255,255,.7))),#fff !important;-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--ds-line) !important;border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);padding:16px 20px}
html body main .pdp-page.ds-pilot ol.pw-steps{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:8px 0 22px}html body main .pdp-page.ds-pilot ol.pw-steps>li{display:flex !important;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 18px;border-radius:16px;border:1px solid var(--ds-line);background:linear-gradient(color-mix(in srgb,var(--ds) 6%,rgba(255,255,255,.85)),color-mix(in srgb,var(--ds) 12%,rgba(255,255,255,.7))),#fff}html body main .pdp-page.ds-pilot ol.pw-steps .pw-sn{width:72px !important;height:72px !important;flex:0 0 72px;display:grid !important;place-items:center;border-radius:50% !important;background:var(--ds) !important;color:#fff !important;font:800 32px/1 var(--font) !important;border:0 !important;box-shadow:0 8px 18px color-mix(in srgb,var(--ds) 30%,transparent)}@media (max-width:640px){html body main .pdp-page.ds-pilot ol.pw-steps{grid-template-columns:1fr;gap:14px}html body main .pdp-page.ds-pilot ol.pw-steps .pw-sn{width:60px !important;height:60px !important;flex-basis:60px;font-size:26px !important}}
@media (min-width:1180px){html body:has(.ds-pilot) .pdp-rail a.on,html body:has(.ds-pilot) .pdp-rail a:hover{color:var(--dsb) !important}}
html body:has(.ds-pilot) :is(.pdp-rail) a.on:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x):not(.on-dark){color:var(--dsb) !important}
/* Karen 2026-10-29 t2258u: motto step pills site-wide = theme-colour glass (light translucent tint, blur, inner highlight, theme border/text/dots). */
html body main .motto-chips,html body main :is(.pdp-band-slogan-sub,.prog-slogan-sub) .motto-chips{--mc:var(--ds,var(--lead-caps,var(--accent,#08A0E5)));color:color-mix(in srgb,var(--mc) 82%,#0b2a1a)}
html body main .motto-chips .motto-chip{border:1px solid color-mix(in srgb,var(--mc) 55%,transparent) !important;background:linear-gradient(180deg,color-mix(in srgb,var(--mc) 10%,rgba(255,255,255,.72)),color-mix(in srgb,var(--mc) 18%,rgba(255,255,255,.5))) !important;-webkit-backdrop-filter:blur(10px) saturate(150%);backdrop-filter:blur(10px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 2px 8px color-mix(in srgb,var(--mc) 16%,transparent);color:inherit !important;font-weight:600}
html body main .motto-chips .motto-sep{background:var(--mc) !important;opacity:.85}
/* Karen 2026-10-29 t2258u steering: all-caps statements + motto pills keep the theme colour inside the grey .sub-muted slogan lines */
html body.page-products main :is(.pdp-band-slogan-sub,.prog-slogan-sub,.pdp-page,.prog-hero,section,div,p,li,h1,h2,h3,h4,span).sub-muted .caps-theme,html body main .caps-theme.caps-theme{color:var(--ct) !important}html body.page-products main :is(.pdp-band-slogan-sub,.prog-slogan-sub).sub-muted .motto-chips .motto-chip.motto-chip{color:color-mix(in srgb,var(--mc) 82%,#0b2a1a) !important}

/* 29 Oct call (Karen + Grok Bot), item 1: the ALPRO logo without a white box, the Biodegree logo beside it (not on top),
   in the home hero and the footer. */
html body .home-alpro .water-hero .wh-logos:not(#_h){display:flex;align-items:center;gap:22px;margin:0 0 26px;line-height:0}
html body .home-alpro .water-hero .wh-logos .wh-bd-logo{height:52px;width:auto;display:block}
html body .home-alpro .water-hero .wh-logos .wh-alpro-logo{height:46px;width:auto;display:block}
html body .home-alpro .water-hero .wh-logos-sep{width:1px;height:40px;background:rgba(255,255,255,.35)}
html body .ftr .ftr-brand:not(#_h){display:flex;align-items:center;gap:26px;flex-wrap:wrap}
html body .ftr .ftr-brand .ftr-brand-sep{width:1px;height:44px;background:rgba(255,255,255,.25)}
html body .ftr .ftr-brand .alpro-logo-link{display:inline-flex;line-height:0}
html body .ftr .ftr-brand img.ftr-alpro-logo{height:48px;width:auto;display:block;background:none}
html body .ftr .ftr-trust img.alpro-logo-ftr{background:none!important}
@media (max-width:600px){html body .home-alpro .water-hero .wh-logos:not(#_h){justify-content:center;gap:14px}html body .home-alpro .water-hero .wh-logos .wh-bd-logo{height:38px}html body .home-alpro .water-hero .wh-logos .wh-alpro-logo{height:34px}html body .ftr .ftr-brand img.ftr-alpro-logo{height:38px}}

/* H-2 (29 Oct call 00:06:27; Karen 1 Nov): home hero left side slightly brighter only — same navy shade, a little less dense; water image unchanged */
html body .water-hero .water-hero-shade{background:linear-gradient(105deg,rgba(5,24,36,.80) 0%,rgba(5,24,36,.68) 32%,rgba(5,24,36,.45) 55%,rgba(5,24,36,.18) 75%,rgba(5,24,36,.04) 100%)}
@media (max-width:640px){html body .water-hero .water-hero-shade{background:linear-gradient(180deg,rgba(5,24,36,.45) 0%,rgba(5,24,36,.70) 32%,rgba(5,24,36,.86) 62%,rgba(5,24,36,.90) 100%)}}

/* H-4 (29 Oct call 00:15:38/00:18:54): multi-pack home cards — every pack side by side, images 50% bigger; card spans two columns */
html body .home-alpro .home-pack-multi:not(#_c){grid-column:span 2}
html body .home-alpro .home-pack .home-mini-img.home-packs:not(#_c){height:258px!important;padding:12px!important;display:flex;align-items:center;justify-content:center;gap:10px}
html body .home-alpro .home-pack .home-pack-fig{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
html body .home-alpro .home-pack .home-pack-pic{height:234px;width:100%;display:flex;align-items:center;justify-content:center}
html body .home-alpro .home-pack .home-pack-pic img:not(#_c){width:100%!important;height:100%!important;max-height:234px!important;max-width:100%!important;object-fit:contain}
@media (max-width:640px){html body .home-alpro .home-pack-multi:not(#_c){grid-column:1 / -1}html body .home-alpro .home-pack .home-mini-img.home-packs:not(#_c){height:220px!important}html body .home-alpro .home-pack .home-pack-pic{height:196px}html body .home-alpro .home-pack .home-pack-pic img:not(#_c){max-height:196px!important}}
html body .home-alpro .home-mini:not(.home-pack) .home-mini-img:not(#_c){height:258px;padding:12px}
html body .home-alpro .home-mini:not(.home-pack) .home-mini-img>img:not(.pcard-tax):not(#_c){max-height:234px}
@media (max-width:640px){html body .home-alpro .home-mini:not(.home-pack) .home-mini-img:not(#_c){height:204px;padding:8px}html body .home-alpro .home-mini:not(.home-pack) .home-mini-img>img:not(.pcard-tax):not(#_c){max-height:196px}}

/* H-5 (29 Oct call 00:13:09/00:15:38): Aspiration home block without a picture; AlproJet-D and -W across the band, 5 L given more room */
html body .home-alpro .home-band-nophoto{grid-template-columns:minmax(0,1fr)!important}
html body .home-alpro .home-band-nophoto .home-band-cards:not(#_c){grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body .home-alpro .home-band-nophoto .home-pack-multi:not(#_c){grid-column:auto}
html body .home-alpro .home-band-nophoto .home-pack .home-mini-img.home-packs:not(#_c){height:340px!important;gap:24px}
html body .home-alpro .home-band-nophoto .home-pack .home-pack-pic{height:310px}
html body .home-alpro .home-band-nophoto .home-pack .home-pack-pic img:not(#_c){max-height:310px!important}
html body .home-alpro .home-band-nophoto .home-pack-multi .home-pack-fig:nth-child(2){flex-grow:1.5}
@media (max-width:640px){html body .home-alpro .home-band-nophoto .home-band-cards:not(#_c){grid-template-columns:minmax(0,1fr)!important}html body .home-alpro .home-band-nophoto .home-pack .home-mini-img.home-packs:not(#_c){height:240px!important}html body .home-alpro .home-band-nophoto .home-pack .home-pack-pic{height:216px}html body .home-alpro .home-band-nophoto .home-pack .home-pack-pic img:not(#_c){max-height:216px!important}}

/* H-6 (29 Oct call 00:16:33/00:17:52): REF (and its pack words) directly under each pack picture on the home cards */
html body .home-alpro .home-pack .home-mini-img.home-packs:not(#_c):not(#_d){height:auto!important;align-items:stretch}
html body .home-alpro .home-pack .home-pack-fig{flex-direction:column;justify-content:flex-start;gap:8px;height:auto}
html body .home-alpro .home-pack .home-pack-ref{display:block;text-align:center;padding:0;margin:0}
/* H-9 (Karen 1 Nov, replaces first H-9): home blocks with cards + photo: photo spans the full block (top of header to bottom of the cards), ~48% of the row; cover, subject kept in frame; phone: photo stacks under the cards */
@media (min-width:961px){html body .home-alpro .home-band-in:not(.home-band-nophoto){grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}html body .home-alpro .home-band-in:not(.home-band-nophoto) .home-band-photo{grid-column:2;grid-row:1 / 3;align-self:stretch;margin:0;max-height:none;aspect-ratio:auto;min-height:0}html body .home-alpro .home-band-in:not(.home-band-nophoto) .home-band-photo img{object-fit:cover;object-position:50% 35%}html body .home-alpro .home-band-in:not(.home-band-nophoto) .home-band-cards{align-self:start}}
@media (max-width:960px){html body .home-alpro .home-band-in:not(.home-band-nophoto) .home-band-photo{display:block;order:0;aspect-ratio:4/3;max-height:none;height:auto}html body .home-alpro .home-band-in:not(.home-band-nophoto) .home-band-photo img{object-fit:cover;object-position:50% 35%}}
/* H-10 (Karen 1 Nov): footer a little less dark: same navy hue (#0E1A2B -> #172941), text stays AA */
html body footer.ftr{background-color:#172941}
/* BRS-4: Your Recovery Journey under the system box; layered: area tint frame, white graphic */
html body main .brs-journey{margin:20px 0 0;padding:16px;max-width:760px;background:var(--tax-tint,#E6F6FC);border:1px solid color-mix(in srgb,var(--tax,#00A0E3) 22%,transparent);border-radius:18px}html body main .brs-journey img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}@media (max-width:640px){html body main .brs-journey{padding:10px}}
/* AL-1 (call 00:23:22-00:25:23): Alpron key-fact capital headlines always visible, bold, Alpron blue (same blue as the studies); bodies stay collapsed */
html:has(link[rel=canonical][href$="/alpron/"]) body main .kf-t .caps-theme{font-weight:800 !important;color:#00A0E3 !important}
/* BP-2 (call 00:40:07): Bilpron Key features box aligned with the essentials grid (same edges, same inner padding) */
html:has(link[rel=canonical][href$="/bilpron/"]) body main .pinfo-main>.lead,html:has(link[rel=canonical][href$="/bilpron/"]) body main .pinfo-feats-glass,html:has(link[rel=canonical][href$="/bilpron/"]) body main .pinfo-grid{width:100%;max-width:none;box-sizing:border-box;margin-left:0;margin-right:0}
html:has(link[rel=canonical][href$="/bilpron/"]) body main .pinfo-feats-glass{padding:18px 22px}html:has(link[rel=canonical][href$="/bilpron/"]) body main .pinfo-feats-glass .pinfo-feats{margin:0;width:100%;box-sizing:border-box}
/* BRS-2 (call 00:42:41): BRS step boxes 1-3 layered: white card -> light tint of the call Water blue inside (paper on paper) */
html:has(link[rel=canonical][href$="/brs-kit/"]) body main .prog-imgs-grid figure{background:linear-gradient(color-mix(in srgb,#00A0E3 7%,#fff),color-mix(in srgb,#00A0E3 12%,#fff)) !important;border:1px solid color-mix(in srgb,#00A0E3 22%,transparent) !important;border-radius:14px;padding:10px;box-shadow:0 8px 22px color-mix(in srgb,#00A0E3 12%,transparent),inset 0 1px 0 rgba(255,255,255,.9)}
html:has(link[rel=canonical][href$="/brs-kit/"]) body main .prog-imgs-grid figure img{border-radius:10px;background:#fff}
/* BCS-1 (call 00:49:39-00:50:41): BC-San 100: light-blue panel kept; soft tint of the same blue inside the white cards (white -> blue -> white) */
html:has(link[rel=canonical][href$="/bc-san-100/"]) body main .prog-facts .why-use,html:has(link[rel=canonical][href$="/bc-san-100/"]) body main .prog-facts .benefit-list.big>li{background:linear-gradient(color-mix(in srgb,#00A0E3 5%,#fff),color-mix(in srgb,#00A0E3 10%,#fff)) !important;box-shadow:0 6px 18px color-mix(in srgb,#00A0E3 10%,transparent),inset 0 1px 0 rgba(255,255,255,.9)}
/* IC-1 / AZ-3 / AZ-5 (call 00:54:47, 01:07:28-01:08:56; Karen 1 Nov frame): IC-100 hero: CLEAN · CARE · PROTECT bolder in the theme colour, row centred under the slogan lines */
html:has(link[rel=canonical][href$="/ic-100/"]) body .pdp-band-slogan .pdp-band-slogan-sub{display:inline-block;max-width:100%}
html:has(link[rel=canonical][href$="/ic-100/"]) body .pdp-band-slogan .motto-chips{display:flex !important;flex-wrap:wrap;justify-content:center;align-items:center;width:100%}
html:has(link[rel=canonical][href$="/ic-100/"]) body .pdp-band-slogan .motto-chips .motto-chip.motto-chip{font-weight:800 !important;color:var(--ct,#0072BC) !important;border-color:color-mix(in srgb,var(--ct,#0072BC) 45%,transparent) !important}
/* AZ-1 / AZ-4 (call 01:05:05, 01:06:15, 01:11:08; Karen 1 Nov): Andreas's capital lines bold in the product theme colour on all products; same words, same place */
html body.page-products main .caps-theme.caps-theme{font-weight:800 !important}
/* IC-3 (call 01:00:57): card headlines highlighted the same way on every product (theme colour, bold, one size) */
html body.page-products main .why-use .why-use-h.why-use-h{font-size:17px !important;line-height:1.3 !important;font-weight:800 !important}
html body.page-products main .why-use .why-use-h .caps-theme{font-size:inherit !important}
/* AZ-6 / BIB-2 (call 01:09:58, 01:13:00): card grids layered with depth: white card, soft tint of the page's own area colour inside, raised shadow in that colour */
html body.page-products main .prog-facts .why-use{background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--kf-t,var(--lr,#0072BC)) 7%,#fff)) !important;box-shadow:0 10px 26px color-mix(in srgb,var(--kf-t,var(--lr,#0072BC)) 13%,transparent),0 2px 6px rgba(15,23,42,.05),inset 0 1px 0 #fff !important;transform:translateZ(0)}
/* BIB-3 (call 01:13:00): 'Make the difference visible' comparison sits inside its card: one column, labels wrap inside */
html:has(link[rel=canonical][href$="/bib-forte/"]) body main .why-compare{max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
html:has(link[rel=canonical][href$="/bib-forte/"]) body main .why-compare .grid-2{grid-template-columns:minmax(0,1fr) !important;gap:16px !important}
html:has(link[rel=canonical][href$="/bib-forte/"]) body main .why-compare .eyebrow{letter-spacing:.06em;white-space:normal}
/* WL-1 (call 01:17:56): WL-clean: the green numbers/bar in the savings box in Instruments blue */
html:has(link[rel=canonical][href$="/wl-clean/"]) body main .rcalc-save{color:#0072BC !important}html:has(link[rel=canonical][href$="/wl-clean/"]) body main .rcalc-split span{background:#0072BC !important}
/* AJD-5 / AJW-4 (call 01:27:26, 01:30:02): AlproJet 4-card grid: white boxes get a subtle yellow glass inside (yellow page -> white card -> yellow glass), call Aspiration yellow #FFCB04 only */
html:has(link[rel=canonical][href*="/aspiration-systems/"]) body main .series-use{background:linear-gradient(180deg,color-mix(in srgb,#FFCB04 6%,rgba(255,255,255,.92)),color-mix(in srgb,#FFCB04 13%,rgba(255,255,255,.85))),#fff !important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 10px 26px color-mix(in srgb,#FFCB04 18%,transparent),inset 0 1px 0 rgba(255,255,255,.95) !important}
/* AJD-6 (call 01:28:06; Karen 1 Nov): Daily ROUTINE box centred and more visible, calm; no timeline */
html:has(link[rel=canonical][href*="/aspiration-systems/"]) body main .pdp-series .pdp-info-note:has(.sec-typo-series){margin-left:auto !important;margin-right:auto !important;max-width:760px;text-align:center;background:linear-gradient(180deg,#fff,color-mix(in srgb,#FFCB04 10%,#fff)) !important;border:1px solid color-mix(in srgb,#FFCB04 45%,transparent) !important;border-left-width:1px !important;border-radius:16px;box-shadow:0 12px 30px color-mix(in srgb,#FFCB04 22%,transparent);padding:24px 28px !important}
/* IC-7 (call 01:36:56): Surfaces category: the IC-100 / CleanWipes and PlastiSept eco boxes on the Surfaces green (call green #1EAA4A tint #E8F6ED), not white */
html:has(link[rel=canonical][href$="/products/surfaces/"]) body main .cat-why .value-card{background:linear-gradient(180deg,#E8F6ED,color-mix(in srgb,#1EAA4A 13%,#fff)) !important;border:1px solid color-mix(in srgb,#1EAA4A 30%,transparent) !important;box-shadow:0 10px 24px color-mix(in srgb,#1EAA4A 14%,transparent),inset 0 1px 0 rgba(255,255,255,.9) !important}
/* PS-1 / JW-1 (call 01:40:26): PlastiSept eco + Jumbo Wipe: THE BENEFIT label + text bold, on a darker inner tile of the Surfaces green (layering) */
html:is(:has(link[rel=canonical][href$="/plastisept-eco/"]),:has(link[rel=canonical][href$="/plastisept-eco-jumbowipes/"])) body main .why-use .benefit-line{font-weight:700 !important;background:color-mix(in srgb,#1EAA4A 11%,#fff);border:1px solid color-mix(in srgb,#1EAA4A 22%,transparent);border-radius:10px;padding:10px 12px !important;margin-top:4px !important;color:#177A36 !important}
html:is(:has(link[rel=canonical][href$="/plastisept-eco/"]),:has(link[rel=canonical][href$="/plastisept-eco-jumbowipes/"])) body main .why-use .benefit-line .cw-lbl,html:is(:has(link[rel=canonical][href$="/plastisept-eco/"]),:has(link[rel=canonical][href$="/plastisept-eco-jumbowipes/"])) body main .why-use .benefit-line .cw-lbl .caps-theme{font-weight:800 !important;color:#177A36 !important}
/* PS-3 / JW-2 / CW-10 (call 01:43:38, 01:46:05, 02:00:23): Friday routine: one frame only (the routine graphic carries its own frame) */
html body.page-products main :is(figure,div,p):has(>img[src*="friday-routine"]){border:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;transform:none !important}
/* CW-5 (call 01:56:16; Karen 1 Nov): CleanWipes Key facts: THE BENEFIT label + text bold and highlighted; soft glass inside the white cards; words unchanged */
html:has(link[rel=canonical][href$="/cleanwipes/"]) body main .prog-facts .why-use{background:linear-gradient(180deg,rgba(255,255,255,.95),color-mix(in srgb,#60B0E2 9%,rgba(255,255,255,.85))),#fff !important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 10px 26px color-mix(in srgb,#60B0E2 16%,transparent),inset 0 1px 0 #fff !important}
html:has(link[rel=canonical][href$="/cleanwipes/"]) body main .why-use .benefit-line{font-weight:700 !important;background:color-mix(in srgb,#60B0E2 13%,#fff);border:1px solid color-mix(in srgb,#60B0E2 28%,transparent);border-radius:10px;padding:10px 12px !important;margin-top:4px !important}
html:has(link[rel=canonical][href$="/cleanwipes/"]) body main .why-use .benefit-line .cw-lbl,html:has(link[rel=canonical][href$="/cleanwipes/"]) body main .why-use .benefit-line .cw-lbl .caps-theme{font-weight:800 !important;color:#2F6E96 !important}
/* CW-8 (call 01:59:09): CleanWipes How-to blocks all in the same frame as the other boxes (1px line, 12px radius, white) */
html:has(link[rel=canonical][href$="/cleanwipes/"]) body main figure:has(>.kf-img-after>h3.why-use-h){border:1px solid #E5E7EB;border-radius:12px;background:#fff;padding:20px 22px;margin-left:0;margin-right:0}
/* NEW-1: 'More <Area> products' tab + panel, call-version area colour and its tint only */
html body main .more-area{margin:40px auto 8px}
html body main .more-area-tab{border:0}
html body main .more-area-h{display:inline-flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:12px 20px;border-radius:14px 14px 0 0;background:var(--tax-tint);border:1px solid color-mix(in srgb,var(--tax) 30%,transparent);border-bottom:0;color:color-mix(in srgb,var(--tax) 70%,#0b2a1a);font-weight:700;font-size:17px}
html body main .more-area-h::-webkit-details-marker{display:none}
html body main .more-area-h svg{width:18px;height:18px;transform:rotate(90deg);transition:transform .2s}
html body main .more-area-tab:not([open]) .more-area-h{border-radius:14px;border-bottom:1px solid color-mix(in srgb,var(--tax) 30%,transparent)}
html body main .more-area-tab:not([open]) .more-area-h svg{transform:none}
html body main .more-area-panel{padding:20px;border-radius:0 16px 16px 16px;background:linear-gradient(180deg,var(--tax-tint),color-mix(in srgb,var(--tax) 4%,#fff));border:1px solid color-mix(in srgb,var(--tax) 30%,transparent);box-shadow:0 10px 26px color-mix(in srgb,var(--tax) 12%,transparent)}
html body main .more-area-panel .home-band-cards{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
@media (prefers-reduced-motion:reduce){html body main .more-area-h svg{transition:none}}
/* GAP-2 (call 00:09:42): home area blocks in their area colour: Water bluish, Instruments light blue (call-version tints; Aspiration yellow + Surfaces green already) */
html body .home-alpro #range.home-band,html body .home-alpro #instruments.home-band{background:var(--tax-tint) !important}
/* AJ-Y (Karen 1 Nov): Aspiration pages (AlproJet-D/W, Aspiration category, home Aspiration block): all headings, section titles, eyebrows, capital lines and text links in the site's standard dark text (--ink #0F172A); no yellow or olive text; yellow stays for bars, borders, glass tints, icons. Words unchanged */
html:has(link[rel=canonical][href*="/aspiration-systems/"]) body main :is(h1,h2,h3,h4,h5,.eyebrow,.sec-typo,.pw-link,.kf-t,.kf-t strong,.caps-theme,.more-area-h,.home-mini-name,a:not(.btn):not(.tax-card):not(.home-mini):not(.pcard-link),[style*="#FFCB04"],[style*="#ffcb04"],[style*="#FBC707"],[style*="#856A00"],[style*="#8A6A00"],[style*="#7A6000"],[style*="#7a6000"]):not(.btn):not(.btn *):not(.tax-card *),
html body .home-alpro #aspiration :is(h2,h3,.home-band-cat,.home-band-h,.eyebrow,.caps-theme,[style*="#FFCB04"],[style*="#856A00"],[style*="#8A6A00"],a:not(.btn):not(.home-mini)){color:var(--ink,#0F172A) !important;--ct:#0F172A;--accent:#0F172A;--lead-caps:#0F172A;--kf-t:#0F172A}
html:has(link[rel=canonical][href*="/aspiration-systems/"]) body main .pdp-page,html:has(link[rel=canonical][href*="/aspiration-systems/"]) body main{--green:#0F172A}
/* AJ-Y follow-up: same dark text on the Aspiration category page (no canonical there: scoped by its body class) and on the remaining olive text bits of AlproJet-D/W (REF chips, document badges, card links, area card names) */
html body.cat-glass-yellow main :is(h1,h2,h3,h4,h5,.eyebrow,.sec-typo,.pw-link,.kf-t,.kf-t strong,.caps-theme,.more-area-h,a:not(.btn):not(.tax-card):not(.home-mini):not(.pcard-link),[style*="#FFCB04"],[style*="#FBC707"],[style*="#856A00"],[style*="#8A6A00"],[style*="#00A0E3"]):not(.btn):not(.btn *):not(.tax-card *),
html:has(link[rel=canonical][href*="/aspiration-systems/"]) body main :is(.variant,.doc-type,.pcard-link,.tax-card-name,.pdp-backcat a),
html body.cat-glass-yellow main :is(.variant,.doc-type,.pcard-link,.tax-card-name){color:var(--ink,#0F172A) !important;--ct:#0F172A;--accent:#0F172A;--kf-t:#0F172A}
html body.cat-glass-yellow main{--green:#0F172A}
/* IC-7 follow-up: the Surfaces category page has no canonical link, so scope by its body class */
html body.cat-glass-green main .cat-why .value-card{background:linear-gradient(180deg,#E8F6ED,color-mix(in srgb,#1EAA4A 13%,#fff)) !important;border:1px solid color-mix(in srgb,#1EAA4A 30%,transparent) !important;box-shadow:0 10px 24px color-mix(in srgb,#1EAA4A 14%,transparent),inset 0 1px 0 rgba(255,255,255,.9) !important}
/* AJ-Y refine (Karen 1 Nov): Aspiration pages: every heading, hero banner line, eyebrow, capital line, text link, REF chip, document badge and area-card name in the site's dark navy text (--ink #0F172A); AlproJet-D and -W identical; yellow only as non-text accents. Raised specificity so it wins over the older page rules. Words unchanged */
:is(html:has(link[rel=canonical][href*="/aspiration-systems/"]) body,html body.cat-glass-yellow) :is(main,.pdp-band-slogan) :is(h1,h2,h3,h4,h5,.pdp-band-slogan-text,.pdp-band-slogan-sub,.prog-slogan,.prog-slogan-sub,.eyebrow,.sec-typo,.pw-link,.kf-t,.kf-t strong,.caps-theme,.more-area-h,.variant,.doc-type,.pcard-link,.tax-card-name,.motto-chip,a:not(.btn):not(.tax-card):not(.home-mini)):not(.btn):not(.btn *):not(#_a):not(#_b):not(#_c){color:var(--ink,#0F172A) !important;--ct:#0F172A;--accent:#0F172A;--kf-t:#0F172A}
/* NEW-1 port: tc-rail v2 (edge icon + slide-out panel) in the call-version area colour (--tax) and its tint; dark navy text; replaces the inline tab block */
html body main .more-area{display:none}
.tc-fab{position:fixed;z-index:65;right:0;top:46%;width:60px;height:60px;padding:0 0 0 6px;border:1px solid color-mix(in srgb,var(--tax) 35%,#fff);border-right:0;border-radius:30px 0 0 30px;background:linear-gradient(160deg,#fff,var(--tax-tint));box-shadow:inset 3px 0 0 var(--tax),0 8px 22px rgba(15,23,42,.14);color:#0F172A;cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity .25s,transform .25s,visibility .25s}
.tc-fab.on{opacity:1;visibility:visible;transform:none}
.tc-fab svg{color:color-mix(in srgb,var(--tax) 75%,#0F172A)}
.tc-fab-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tc-fab:hover .tc-fab-l,.tc-fab:focus-visible .tc-fab-l{position:absolute;right:66px;top:50%;transform:translateY(-50%);width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap;padding:6px 10px;border-radius:10px;background:#fff;color:#0F172A;font-size:12px;font-weight:700;line-height:1.2;text-align:right;box-shadow:0 4px 14px rgba(15,23,42,.14)}
.tc-fab:focus-visible,.tc-x:focus-visible,.tc-rail-list a:focus-visible{outline:3px solid #0F172A;outline-offset:2px}
.tc-fab.act{box-shadow:inset 4px 0 0 var(--tax),0 10px 26px rgba(15,23,42,.18)}
.tc-rail{position:fixed;z-index:66;top:50%;right:68px;width:240px;max-width:calc(100vw - 84px);max-height:calc(100vh - 140px);overflow:auto;box-sizing:border-box;padding:16px;border-radius:20px;background:linear-gradient(160deg,#fff,var(--tax-tint));border:1px solid color-mix(in srgb,var(--tax) 30%,#fff);box-shadow:inset 4px 0 0 var(--tax),0 14px 34px rgba(15,23,42,.16);transform:translate(24px,-50%);opacity:0;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .3s}
.tc-rail.open{transform:translate(0,-50%);opacity:1}
.tc-rail[hidden]{display:none}
.tc-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;border:1px solid color-mix(in srgb,var(--tax) 30%,#fff);background:#fff;color:#0F172A;font-size:20px;line-height:1;cursor:pointer}
.tc-rail-id img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:12px;box-shadow:0 2px 6px rgba(15,23,42,.10)}
.tc-rail-name{margin:10px 0 0;font-size:20px;font-weight:800;color:#0F172A}
.tc-rail-h{margin:12px 0 6px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--tax) 30%,#fff);color:#0F172A;font-size:12px;font-weight:700;letter-spacing:.06em}
.tc-rail-list{list-style:none;margin:0;padding:0}
.tc-rail-list a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;color:#0F172A;text-decoration:none;font-size:14px;font-weight:600;line-height:1.25}
.tc-rail-list a:hover{background:#fff;box-shadow:inset 3px 0 0 var(--tax)}
.tc-rail-list img{width:40px;height:40px;flex:none;object-fit:contain;background:#fff;border-radius:10px}
@media (max-width:640px){.tc-fab{width:52px;height:52px;top:42%}.tc-rail{right:60px;width:220px}.tc-rail-id img{width:120px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){.tc-fab,.tc-rail{transition:none !important}.tc-rail{transform:translate(0,-50%) !important}}
/* WN-1: What's next? block: call-version look, area colour accents only (--tax / --tax-tint), dark navy text */
html body main .wn-next .eyebrow,html body main .wn-next .sec-typo{color:#0F172A !important}
html body main .wn-next .pw-sechead .eyebrow{display:inline-flex;align-items:center;gap:8px}
html body main .wn-next .pw-sechead .eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--tax)}
html body main .wn-next .dx-chain{list-style:none;margin:8px 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:12px;counter-reset:none}
html body main .wn-next .dx-step{flex:1 1 150px;max-width:220px;position:relative}
html body main .wn-next .dx-step+.dx-step::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:2px;background:color-mix(in srgb,var(--tax) 45%,#fff)}
html body main .wn-next .dx-step-in{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;padding:12px 10px;border-radius:14px;background:#fff;border:1px solid color-mix(in srgb,var(--tax) 22%,#E2E8F0);color:#0F172A;text-decoration:none;text-align:center;box-sizing:border-box}
html body main .wn-next a.dx-step-in:hover{box-shadow:0 8px 20px color-mix(in srgb,var(--tax) 16%,transparent);border-color:color-mix(in srgb,var(--tax) 45%,#fff)}
html body main .wn-next a.dx-step-in:focus-visible{outline:3px solid #0F172A;outline-offset:2px}
html body main .wn-next .dx-step.is-current .dx-step-in{background:linear-gradient(180deg,#fff,var(--tax-tint));border:2px solid var(--tax)}
html body main .wn-next .dx-step-in img{width:56px;height:56px;object-fit:contain}
html body main .wn-next .dx-step-name{font-weight:700;font-size:14px;line-height:1.25;color:#0F172A}
html body main .wn-next .dx-step-ref{font-size:12px;color:#334155;line-height:1.3}
html body main .wn-next .pcard-claim{margin:6px 0 0;font-weight:800;font-size:13px;color:#0F172A}
@media (max-width:640px){html body main .wn-next .dx-chain{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}html body main .wn-next .dx-step{flex:0 0 140px;scroll-snap-align:start}}

/* DF-1 (Karen 1 Nov): no double frames - keep one frame, drop the inner one. */
.prog-facts-panel .prog-imgs img{border:0!important;border-radius:0!important} /* routine/claim artwork carries its own frame (e.g. THE FRIDAY END OF DAY CLEANING ROUTINE) */
.grid-2 > div > .pw-img{border-color:transparent!important} /* IC-100 image inside its tinted frame */
.rcalc .rcalc-card{border-color:transparent!important} /* WL-clean calculator card inside the calculator box */
.pinfo-feats-glass > ul.pinfo-feats{border:0!important;background:transparent!important;box-shadow:none!important} /* Bilpron key-features list inside its glass box */
@media (max-width:700px){section.prog-facts.rail-zone:has(> .prog-facts-panel){border-color:transparent!important;box-shadow:none!important}} /* IC-100 mobile: outer frame around the facts panel */

/* DF-1b: remaining double frames */
.alt-img > img{box-shadow:none!important} /* About: photo shadow inside its bordered box */
@media (max-width:700px){html body section.prog-facts.rail-zone:not(#_a):not(#_b){border-color:transparent!important;box-shadow:none!important}} /* IC-100 mobile: outer frame around the facts panel */

/* GL-1 (Karen 1 Nov): very light glass on product-page boxes/cards incl. Product information (key-features list + spec table), tinted with the page's call-version area colour. Step sequences untouched. */
html:has(link[rel=canonical][href*="/products/surfaces/"]) body.page-products{--gl:#1EAA4A}
html:has(link[rel=canonical][href*="/products/water-management/"]) body.page-products{--gl:#00A0E3}
html:has(link[rel=canonical][href*="/products/aspiration-systems/"]) body.page-products{--gl:#FFCB04}
html:has(link[rel=canonical][href*="/products/instruments/"]) body.page-products{--gl:#0072BC}
html:has(link[rel=canonical][href*="/products/i3/"]) body.page-products{--gl:#00A0E3} /* GL-1b: i3 pages use #00A0E3 on prev */
html:has(link[rel=canonical][href*="/products/"]) body.page-products:not(#_a):not(#_b):not(#_c) main :is(.pcard,.prog-facts-panel,.pdp-pack,.doc-row,details.faq,.pinfo-feats-glass,ul.pinfo-feats:not(.pinfo-feats-glass > ul),.pinfo-grid,.rcalc,.cs-card,.pw-diagram,.next-step-in){background:linear-gradient(160deg,rgba(255,255,255,.86) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,rgba(255,255,255,.72)) 100%)!important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 10px 28px -18px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent)!important}
html:has(link[rel=canonical][href*="/products/"]) body.page-products:not(#_a):not(#_b):not(#_c) main .pinfo-grid .pinfo-row{border-color:color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;background:transparent!important}
@supports not (background:color-mix(in srgb,red 5%,white)){html:has(link[rel=canonical][href*="/products/"]) body.page-products:not(#_a):not(#_b):not(#_c) main :is(.pcard,.prog-facts-panel,.pdp-pack,.doc-row,details.faq,.pinfo-feats-glass,ul.pinfo-feats:not(.pinfo-feats-glass > ul),.pinfo-grid,.rcalc,.cs-card,.pw-diagram,.next-step-in){background:rgba(255,255,255,.85)!important;border-color:#E5E7EB!important}}

/* OTP-1 (Karen 1 Nov): 'On this page' label must never overlap the items. The label sat in the scrolling list's top padding,
   so when the list scrolled (long menus, active item kept in view) the first items slid under it. The label band is now a
   thick top border: the list clips its scrolled content below it. Same look, label above the items with a proper gap. */
@media (min-width:1180px){html body:has(.ds-pilot) .pdp-rail:not(#_a) ul{padding-top:6px;border-top:38px solid color-mix(in srgb,var(--dsb) 7%,#fff);background-clip:padding-box;box-shadow:0 10px 26px color-mix(in srgb,var(--dsb) 16%,transparent),inset 0 0 0 0 transparent}}

/* GL-2 (Karen 1 Nov): long prose/statement panels get the light area glass PLUS 3D depth: one light source top-left,
   three colour-matched shadow layers falling down-right, a bright top/left highlight edge, a faint lower edge. Lift is done
   with shadow only (no transform) so nothing moves. One frame only (DF-1): applied to the outer panel, never to boxes inside it. */
body.area-surfaces{--gl:#1EAA4A}
body.area-water-management{--gl:#00A0E3}
body.area-aspiration-systems{--gl:#FFCB04}
body.area-instruments{--gl:#0072BC}
body.area-i3{--gl:#00A0E3}
html body.page-products:not(#_a):not(#_b):not(#_c) main :is(.prog-facts-panel,section.pw-sec.rail-zone,figure.pw-diagram,ul.pinfo-feats:not(.pinfo-feats-glass > ul),.pinfo-feats-glass){background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,color-mix(in srgb,var(--gl,#0072BC) 2%,rgba(255,255,255,.78)) 55%,color-mix(in srgb,var(--gl,#0072BC) 4%,rgba(255,255,255,.7)) 100%)!important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 color-mix(in srgb,var(--gl,#0072BC) 6%,transparent),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 11%,transparent),6px 12px 24px -10px color-mix(in srgb,var(--gl,#0072BC) 14%,transparent),16px 30px 56px -26px color-mix(in srgb,var(--gl,#0072BC) 17%,transparent)!important}
html body.page-products:is(.cat-glass-green,.cat-glass-yellow):not(#_a):not(#_b):not(#_c) main :is(section.wrap.rail-zone,div.wrap.alt-row){background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,color-mix(in srgb,var(--gl,#0072BC) 2%,rgba(255,255,255,.78)) 55%,color-mix(in srgb,var(--gl,#0072BC) 4%,rgba(255,255,255,.7)) 100%)!important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);border:1px solid color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 color-mix(in srgb,var(--gl,#0072BC) 6%,transparent),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 11%,transparent),6px 12px 24px -10px color-mix(in srgb,var(--gl,#0072BC) 14%,transparent),16px 30px 56px -26px color-mix(in srgb,var(--gl,#0072BC) 17%,transparent)!important}

/* GL-3 (Karen 1 Nov): small white feature cards with a coloured top edge get a VERY slight area glass inside.
   Only the fill changes (borders/top edge, text, layout untouched); area colour from --gl (GL-1/GL-2, prev values). */
html body.page-products:not(#_a):not(#_b):not(#_c) main :is(.pw-key,.why-use,.series-use,ul.benefit-list > li.kf-acc,li.benefit-claim){background:linear-gradient(160deg,rgba(255,255,255,.94) 0%,color-mix(in srgb,var(--gl,#0072BC) 2%,rgba(255,255,255,.86)) 100%)!important;-webkit-backdrop-filter:blur(6px) saturate(130%);backdrop-filter:blur(6px) saturate(130%)}

/* GL-4 (Karen 1 Nov): product hero image frame (.pdp-pack, incl. the thumbnail row) = IC-100-style frosted glass on ALL product
   pages: area-colour tint on the outer frame, thin light highlight edge, soft colour-matched layered shadow (light top-left).
   Inner photo tile and thumbnails stay white. One frame only. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .prog-hero-media .pdp-pack{background:linear-gradient(155deg,color-mix(in srgb,var(--gl,#0072BC) 3%,rgba(255,255,255,.88)) 0%,color-mix(in srgb,var(--gl,#0072BC) 6%,rgba(255,255,255,.74)) 100%)!important;-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border:1px solid color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 12%,transparent),6px 14px 28px -12px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent),16px 32px 60px -28px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .prog-hero-media .pdp-pack :is(.pdp-main,.pdp-thumb){background:#fff!important}

/* GL-3b (Karen 1 Nov): THE BENEFIT boxes inside Key Facts cards = a slightly deeper glass layer (area tint, light top edge,
   soft colour-matched shadow). Its outline is dropped so the card keeps the only frame (DF-1). All product pages. */
html body.page-products:not(#_a):not(#_b):not(#_c) main p.benefit-line{background:linear-gradient(160deg,color-mix(in srgb,var(--gl,#0072BC) 3%,rgba(255,255,255,.85)) 0%,color-mix(in srgb,var(--gl,#0072BC) 5%,rgba(255,255,255,.72)) 100%)!important;-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);border:1px solid transparent!important;border-top-color:rgba(255,255,255,.95)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 3px -1px color-mix(in srgb,var(--gl,#0072BC) 11%,transparent),0 8px 18px -12px color-mix(in srgb,var(--gl,#0072BC) 17%,transparent)!important}

/* GL-5 (Karen 1 Nov): every remaining white framed text box on product pages (inventory: inv.js, 1440+390, all 21 pages)
   gets the area 3D glass, one layer deeper because each sits inside a framed panel: CleanWipes/PlastiSept text figures
   (HOW TO USE, refill), weekly-care accordions (details.cw-acc), Bilpron/BRS benefits callouts, BRS protocol block,
   Biotesters next-step card. Photo tiles stay white. Frame kept single (the box's own thin edge; no extra outline). */
html body.page-products:not(#_a):not(#_b):not(#_c) main :is(.prog-imgs figure:not(:has(img)),details.cw-acc,.pdp-info-note.benefits-callout,.pdp-info-note.protocol-block,.next-step-card a.home-mini){background:linear-gradient(155deg,color-mix(in srgb,var(--gl,#0072BC) 2%,rgba(255,255,255,.9)) 0%,color-mix(in srgb,var(--gl,#0072BC) 5%,rgba(255,255,255,.76)) 100%)!important;-webkit-backdrop-filter:blur(8px) saturate(140%);backdrop-filter:blur(8px) saturate(140%);border-color:color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 11%,transparent),5px 10px 22px -12px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent)!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .next-step-card a.home-mini :is(img,picture,[class*="img"]){background:#fff!important}

/* GL-6 (Karen 1 Nov, Magda disliked the bright type-c version): all GL-1..GL-5 glass softened - fill tint ~40% of before (max 6%), edges max 14%, shadows half strength. Prev colours only. */
/* LAY-1 (Karen 1 Nov): home area blocks with photo: all product cards in ONE row on desktop (5-card Water/Surfaces wrapped to
   2 rows and made the photo narrow and very tall). Photo column narrowed (~30%) to give the row width; product images stay
   large (<=15% smaller); photo cover, spans the block height. Text unchanged. Phone/tablet (<=960px) keep current stacking. */
@media (min-width:961px){
html body .home-alpro .home-band-in:not(.home-band-nophoto):not(#_a){grid-template-columns:minmax(0,2.7fr) minmax(0,1fr)}
html body .home-alpro .home-band-in:not(.home-band-nophoto):not(#_a) .home-band-cards{grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:12px}
html body .home-alpro .home-band-in:not(.home-band-nophoto):not(#_a) .home-band-photo{height:100%}
}

/* GL-7 (Karen 1 Nov): IC-100 key-facts cards (.why-use.ds-kf) get the same very soft glass as GL-3; their WHY IT MATTERS boxes
   (.ds-why) are the one-layer-deeper soft glass like THE BENEFIT boxes. No outline added (one frame). Very soft (GL-6 levels). */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .why-use.ds-kf{background:linear-gradient(160deg,rgba(255,255,255,.95) 0%,color-mix(in srgb,var(--gl,#0072BC) 2%,rgba(255,255,255,.88)) 100%)!important;-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%)}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .ds-why{background:linear-gradient(160deg,color-mix(in srgb,var(--gl,#0072BC) 3%,rgba(255,255,255,.9)) 0%,color-mix(in srgb,var(--gl,#0072BC) 5%,rgba(255,255,255,.8)) 100%)!important;-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 3px -1px color-mix(in srgb,var(--gl,#0072BC) 11%,transparent),0 6px 14px -10px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent)!important}

/* KF-1 (Karen 1 Nov): IC-100 key-facts card headings wrap exactly as on prev. Cause: IC-3 (17px/800 card headlines) + AZ-1/AZ-4
   (caps lines 800) made them 17px/800 vs prev 16px/600 in the same 195px column. IC-100 ds-kf cards only: prev size/weight back. */
html body.page-products:not(#_a):not(#_b):not(#_c) main .why-use.ds-kf .why-use-h,html body.page-products:not(#_a):not(#_b):not(#_c) main .why-use.ds-kf .why-use-h .caps-theme{font-size:16px!important;font-weight:600!important}
@media (max-width:640px){html body.page-products:not(#_a):not(#_b):not(#_c) main .why-use.ds-kf .why-use-h,html body.page-products:not(#_a):not(#_b):not(#_c) main .why-use.ds-kf .why-use-h .caps-theme{font-size:15px!important}} /* KF-1b: prev mobile size */

/* GL-8 (Karen 1 Nov): Key Facts cards (accordion rows li.kf-acc with check icon + chevron, .why-use, .ds-kf, .pw-key, .series-use)
   were near-white after GL-6. Now a visible but soft area glass on all product pages: ~6% prev area colour top-left -> white,
   light top-edge highlight, soft colour-matched shadow. Borders/top bar, text and layout unchanged; nested boxes stay one layer deeper. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main :is(ul.benefit-list > li.kf-acc,li.benefit-claim,.why-use,.why-use.ds-kf,.pw-key,.series-use){background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 6%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,#fff) 45%,#fff 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 3px -1px color-mix(in srgb,var(--gl,#0072BC) 14%,transparent),0 10px 24px -16px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent)!important}

/* GL-8b: other white text boxes that GL-6 left near 0% tint brought to the GL-8 level (one layer deeper where nested):
   GL-5 boxes (text figures, weekly-care accordions, benefits callouts, BRS protocol block, next-step card) + WL-clean calculator card. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main :is(.prog-imgs figure:not(:has(img)),details.cw-acc,.pdp-info-note.benefits-callout,.pdp-info-note.protocol-block,.next-step-card a.home-mini,.rcalc .rcalc-card){background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 7%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,#fff) 50%,#fff 100%)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .rcalc .rcalc-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 16px -12px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent)!important}

/* GL-9 (Karen 1 Nov, Bilpron examples): visible soft 3D glass, area colour, all product pages, one light source top-left:
   Key Facts cards, KEY FEATURES check-list panel, spec table panel (rows keep light dividers), small product image frame
   beside the description (image tile white), test-results table panel (Activity / Tested to). Tint 7%->white from top-left,
   inner top/left highlight, 3-layer colour-matched shadow down-right. No padding/size change; one frame each. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main :is(ul.benefit-list > li.kf-acc,li.benefit-claim,.why-use,.pw-key,.series-use){background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 7%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,#fff) 50%,#fff 100%)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent),5px 10px 22px -12px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent),12px 24px 48px -28px color-mix(in srgb,var(--gl,#0072BC) 24%,transparent)!important} /* cards: own borders + coloured top bar kept */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main :is(ul.pinfo-feats:not(.pinfo-feats-glass > ul),.pinfo-feats-glass,.pinfo-grid,.pinfo-aside .pinfo-sticky,.ev-wrap){background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 7%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,#fff) 50%,#fff 100%)!important;border:1px solid color-mix(in srgb,var(--gl,#0072BC) 18%,#fff)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent),5px 10px 22px -12px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent),12px 24px 48px -28px color-mix(in srgb,var(--gl,#0072BC) 24%,transparent)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .ev-wrap{border-radius:14px;overflow:hidden}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .ev-wrap :is(table,tbody,thead,tr,td,th){background:transparent!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .ev-wrap :is(td,th){border-color:color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pinfo-grid .pinfo-row{border-color:color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)!important;background:transparent!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pinfo-aside .pinfo-sticky img{background:#fff;border-radius:10px}

/* GL-9b (Karen 1 Nov): THE BENEFIT boxes = one layer deeper than the GL-9 Key Facts card glass, all areas (was ~3-5% after GL-6). */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main p.benefit-line{background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 12%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 7%,#fff) 100%)!important;border:1px solid transparent!important;border-top-color:rgba(255,255,255,.95)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent),4px 8px 16px -10px color-mix(in srgb,var(--gl,#0072BC) 26%,transparent)!important}

/* GL-10 (Karen 1 Nov): THE FRIDAY END OF DAY CLEANING ROUTINE (and other routine artwork) is a white PNG: its figure gets the
   area 3D glass and the image is multiplied onto it, so the white panel takes the soft tint while text/lines stay as drawn. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main figure:has(> img[src*="routine"]){background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 8%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,#fff) 55%,#fff 100%)!important;border-radius:12px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent),5px 10px 22px -12px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent),12px 24px 48px -28px color-mix(in srgb,var(--gl,#0072BC) 24%,transparent)!important;overflow:hidden}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main figure:has(> img[src*="routine"]) > img{mix-blend-mode:multiply;display:block}

/* GL-11 (Karen 1 Nov): ONE shared glassmorphism + elevation token set for every white text panel on product pages.
   Frosted area tint fading from top-left, thin light top/left highlight edge, 2-3 layered colour-matched soft shadows (light top-left).
   Depth: L1 outer panels, L2 boxes inside them, L3 boxes inside those (each level a clearly perceptible step deeper). Soft. */
html body.page-products{--g1-bg:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 7%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 2.5%,#fff) 55%,#fff 100%);--g2-bg:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 10%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 4.5%,#fff) 60%,color-mix(in srgb,var(--gl,#0072BC) 2%,#fff) 100%);--g3-bg:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 14%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 8%,#fff) 100%);--g-edge:inset 1px 1px 0 rgba(255,255,255,.95);--g1-sh:var(--g-edge),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 14%,transparent),6px 12px 26px -14px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent),14px 28px 56px -30px color-mix(in srgb,var(--gl,#0072BC) 24%,transparent);--g2-sh:var(--g-edge),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent),4px 9px 20px -11px color-mix(in srgb,var(--gl,#0072BC) 24%,transparent),10px 20px 40px -24px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent);--g3-sh:inset 1px 1px 0 rgba(255,255,255,.85),1px 2px 3px -1px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent),3px 6px 14px -8px color-mix(in srgb,var(--gl,#0072BC) 26%,transparent);--g-border:color-mix(in srgb,var(--gl,#0072BC) 18%,#fff)}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(.prog-facts-panel,section.pw-sec.rail-zone,figure.pw-diagram,.next-step-in,.pdp-pack,.pcard,.doc-row,details.faq,.cs-card,.rcalc,.pinfo-grid,ul.pinfo-feats:not(.pinfo-feats-glass > ul),.pinfo-feats-glass,.pinfo-aside .pinfo-sticky,.ev-wrap,.brs-journey){background:var(--g1-bg)!important;box-shadow:var(--g1-sh)!important;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(.pinfo-grid,ul.pinfo-feats:not(.pinfo-feats-glass > ul),.pinfo-feats-glass,.pinfo-aside .pinfo-sticky,.ev-wrap,.prog-facts-panel,.pdp-pack,.doc-row,details.faq,.rcalc){border:1px solid var(--g-border)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(ul.benefit-list > li.kf-acc,li.benefit-claim,.why-use,.pw-key,.series-use,.prog-imgs figure,details.cw-acc,.pdp-info-note.benefits-callout,.pdp-info-note.protocol-block,.next-step-card a.home-mini,.rcalc .rcalc-card,.prog-imgs-grid figure){background:var(--g2-bg)!important;box-shadow:var(--g2-sh)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(.prog-imgs figure,details.cw-acc){border-radius:12px;overflow:hidden}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(.prog-imgs figure) > img[src*=".png"]{mix-blend-mode:multiply;display:block} /* white artwork panels take the tint */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(p.benefit-line,.ds-why,.cw-acc-body .cw-box){background:var(--g3-bg)!important;box-shadow:var(--g3-sh)!important;border-color:transparent!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .pdp-pack :is(.pdp-main,.pdp-thumb),html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .pcard .pcard-img{background:#fff!important} /* photo tiles stay white */

/* GL-11b: scan leftovers on the shared token set - Resource-centre portal cards (L1), AlproZyme kf-blocks (L2),
   BIB forte compare tiles + WL-clean calculator result (L3). Diagram figcaptions keep their divider line (not panels). */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main a.portal-card{background:var(--g1-bg)!important;box-shadow:var(--g1-sh)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .prog-facts-panel .kf-block{background:var(--g2-bg)!important;box-shadow:var(--g2-sh)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main :is(.why-compare .grid > div > div[style*="border-radius"],.rcalc-card .rcalc-res){background:var(--g3-bg)!important;box-shadow:var(--g3-sh)!important}

/* WR-1 (Karen 1 Nov): spec-table line wraps back to prev. Cause: GL-2/GL-11 gave every section.pw-sec a 1px border, so the
   content (spec table etc.) became 2px narrower than prev and some lines broke one word earlier. Where prev had no section
   border (all but the IC-100 design pilot) the border width is 0 again and the edge is drawn as an inset ring (no size change). */
html body.page-products:not(:has(.ds-pilot)):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main section.pw-sec{border-width:0!important;box-shadow:inset 0 0 0 1px var(--g-border),var(--g1-sh)!important}

/* GL-12 (Karen 1 Nov): inner glass fill VERY light. Shared tokens re-set: L1 ~2.5% top-left (about 6-12 levels off white),
   L2 ~3.5%, L3 ~5%, so depth still reads; highlight edge, layered soft shadows and depth steps kept, slightly softer. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g){--g1-bg:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 2.5%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 1%,#fff) 55%,#fff 100%);--g2-bg:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 3.5%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 1.5%,#fff) 60%,#fff 100%);--g3-bg:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 5%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 3%,#fff) 100%);--g1-sh:var(--g-edge),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 12%,transparent),6px 12px 26px -14px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent),14px 28px 56px -30px color-mix(in srgb,var(--gl,#0072BC) 20%,transparent);--g2-sh:var(--g-edge),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 14%,transparent),4px 9px 20px -11px color-mix(in srgb,var(--gl,#0072BC) 20%,transparent),10px 20px 40px -24px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent);--g3-sh:inset 1px 1px 0 rgba(255,255,255,.85),1px 2px 3px -1px color-mix(in srgb,var(--gl,#0072BC) 16%,transparent),3px 6px 14px -8px color-mix(in srgb,var(--gl,#0072BC) 22%,transparent)}

/* WR-2 (Karen 1 Nov): remaining glass/border-caused wrap drift vs prev (wr2.js, 3343 text blocks, 21 pages, 1440+390):
   - test-results tables (.ev-wrap): GL-9/GL-11 border made the table 2px narrower -> border width 0, edge drawn as inset ring.
   - Bilpron KEY FEATURES list inside its glass box: DF-1 removed the list's 1px border -> 2px wider; transparent 1px border back. */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .ev-wrap{border-width:0!important;box-shadow:inset 0 0 0 1px var(--g-border),var(--g1-sh)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .pinfo-feats-glass > ul.pinfo-feats{border:1px solid transparent!important}

/* H-5 (2 Nov call, Andreas): home hero light, like his reference — white wash over the water from the left instead of the
   navy shade; navy headline, dark text, white glass text box with a blue left edge, navy outline button, ALPRO logo with
   dark lettering (build.js). Same words, sizes and layout. */
html body .home-alpro .water-hero:not(#_h){background:#EEF4F8}
html body .home-alpro .water-hero:not(#_h) .water-hero-shade{background:linear-gradient(105deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.80) 34%,rgba(255,255,255,.52) 58%,rgba(255,255,255,.28) 80%,rgba(255,255,255,.18) 100%)}
@media (max-width:640px){html body .home-alpro .water-hero:not(#_h) .water-hero-shade{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.82) 30%,rgba(255,255,255,.92) 60%,rgba(255,255,255,.95) 100%)}}
html body .home-alpro .water-hero:not(#_h) .water-hero-in{color:var(--ink)}
html body .home-alpro .water-hero:not(#_h) h1.wh-title{color:#0B3A5C !important;text-shadow:none}
html body .home-alpro .water-hero:not(#_h) .wh-sub{color:var(--ink);text-shadow:none}
html body .home-alpro .water-hero:not(#_h) .wh-body{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.9);border-left:3px solid #08A0E5;border-radius:4px 16px 16px 4px;box-shadow:0 10px 30px rgba(11,58,92,.10),inset 0 1px 0 #fff}
html body .home-alpro .water-hero:not(#_h) .wh-body p{color:var(--ink-2);text-shadow:none}
html body .home-alpro .water-hero:not(#_h) .wh-body p strong,html body .home-alpro .water-hero:not(#_h) .wh-body p:has(strong:only-child){color:var(--ink)}
html body .home-alpro .water-hero:not(#_h) .wh-cred{border-top-color:rgba(11,58,92,.18)}
html body .home-alpro .water-hero:not(#_h) .wh-badges li{color:var(--ink-2)}
html body .home-alpro .water-hero:not(#_h) .wh-badges li::before{background:#7FB9D6}
html body .home-alpro .water-hero:not(#_h) .wh-badges li.is-on{color:#0B3A5C}
html body .home-alpro .water-hero:not(#_h) .wh-badges li.is-on::before{background:#08A0E5}
html body .home-alpro .water-hero:not(#_h) .wh-foot{color:var(--ink-2);opacity:1;text-shadow:none}
html body .home-alpro .water-hero:not(#_h) .wh-foot *,html body .home-alpro .water-hero:not(#_h) .wh-badges li{text-shadow:none}
html body .home-alpro .water-hero:not(#_h) .wh-foot .brand-bd{color:#2E8B3A}
html body .home-alpro .water-hero:not(#_h) .wh-logos-sep{background:rgba(11,58,92,.25)}
html body:not(.page-about) .home-alpro .water-hero:not(#_h) .btn-on-dark{color:#0B3A5C !important;box-shadow:inset 0 0 0 1.5px #0B3A5C !important;background:rgba(255,255,255,.6)}
html body:not(.page-about) .home-alpro .water-hero:not(#_h) .btn-on-dark:hover{background:#fff !important}

/* H-6 (2 Nov call, Andreas): home "On file for audit readiness" band light too, like his reference — white wash over the
   water instead of the navy shade; dark text; white glass cards with a blue top edge; navy links and outline button. */
html body .home-alpro .home-comp:not(#_h){color:var(--ink)}
html body .home-alpro .home-comp:not(#_h) .home-comp-shade{background:linear-gradient(105deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.74) 45%,rgba(255,255,255,.55) 100%)}
html body .home-alpro .home-comp:not(#_h) .eyebrow.light{color:#0B5A8A !important}
html body .home-alpro .home-comp:not(#_h) .home-comp-h{color:var(--ink) !important}
html body main .home-alpro .home-comp:not(#_h) .home-comp-card{background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.9);border-top:2px solid #08A0E5;border-radius:16px;box-shadow:0 10px 30px rgba(11,58,92,.10),inset 0 1px 0 #fff}
html body .home-alpro .home-comp:not(#_h) .home-comp-card h3{color:var(--ink) !important}
html body .home-alpro .home-comp:not(#_h) .home-comp-card p{color:var(--ink-2) !important}
html body .home-alpro .home-comp:not(#_h) .home-comp-links a{color:#0B3A5C}
html body .home-alpro .home-comp:not(#_h) .home-comp-links a:hover{color:#08A0E5}
html body .home-alpro .home-comp:not(#_h) .home-comp-search input{box-shadow:inset 0 0 0 1px rgba(11,58,92,.18);background:#fff}
html body .home-alpro .home-comp:not(#_h) .home-comp-search .btn{box-shadow:inset 0 0 0 1px rgba(11,58,92,.18)}
html body:not(.page-about) .home-alpro .home-comp:not(#_h) .btn-on-dark{color:#0B3A5C !important;box-shadow:inset 0 0 0 1.5px #0B3A5C !important;background:rgba(255,255,255,.6)}
html body:not(.page-about) .home-alpro .home-comp:not(#_h) .btn-on-dark:hover{background:#fff !important}

/* H-7 (2 Nov call, Andreas): footer light, like his reference — pale mint-to-blue surface instead of navy; green
   group and area headings, dark links, light dividers, ALPRO logos with dark lettering (build.js + all pages).
   Phone footer keeps its own type scale (Karen 2026-10-07); only the surface colour is shared. */
html body footer.ftr:not(#_h){background:linear-gradient(180deg,#EEF6F2 0%,#F1F7F9 100%)!important;background-color:#EEF6F2!important;color:var(--ink-2);border-top:1px solid #E2E8F0}
html body footer.ftr:not(#_h) a{color:var(--ink-2)}
html body footer.ftr:not(#_h) a:hover{color:#2E7D3A}
html body footer.ftr:not(#_h) .ftr-brand .ftr-brand-sep{background:rgba(15,23,42,.18)}
html body footer.ftr:not(#_h) .ftr-trust,html body footer.ftr:not(#_h) .ftr-alpro a{color:var(--ink-2)}
html body footer.ftr:not(#_h) .ftr-bar{border-top-color:#DCE5E1;color:var(--ink-3)}
html body footer.ftr:not(#_h) .ftr-bar a{color:var(--ink-3)!important}
html body footer.ftr:not(#_h) .ftr-bar a:hover{color:#2E7D3A!important}
html body footer.ftr:not(#_h) .ftr-bar .locale{color:var(--ink)}
@media (min-width:769px){
  html body footer.ftr:not(#_h) .ftr-groups .fgroup-h{color:#2E7D3A!important;border-bottom-color:#D5DFDB}
  html body footer.ftr:not(#_h) .ftr-groups .fprod-col h4,html body footer.ftr:not(#_h) .ftr-groups .fprod-col h4 a{color:#2E7D3A}
}
html body.page-compliance footer.ftr:not(#_h) .fcol a{color:var(--ink-2)!important} /* compliance page tints links blue; footer stays like the others */

/* MOCK-PILOT (2 Nov, Karen + Andreas, NOT COMMITTED — mockup for review): Water management category page is the pilot.
   Instruments / Surfaces / Aspiration category pages take its techniques — white page, no glass, nothing collapsed, plain
   white cards with a thin border, numbered step cards — each in its own area colour (--pa accent, --pt text shade).
   Words and sections unchanged. */
html body.area-instruments:has(.cat-hero-band){--pa:#0072BC;--pt:#0072BC}
html body.area-surfaces:has(.cat-hero-band){--pa:#1EAA4A;--pt:#177A36}
html body.area-aspiration-systems:has(.cat-hero-band){--pa:#FFCB04;--pt:#0B3A5C}
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band):not(.type-trial) main :is(h1,h1 .caps-theme,.eyebrow,.eyebrow .caps-theme,.caps-theme,.why-use-h,.why-use-h .caps-theme,.pcard-cat){color:var(--pt)!important;--ct:var(--pt)}
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) main .step-num{background:var(--pa)!important;color:#fff}
html body.area-aspiration-systems:has(.cat-hero-band) main .step-num{color:#0B3A5C!important}
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) main :is(.role-list li,ul.role-list li)::before{background:var(--pa)!important}

/* plain white cards on every category page, as on the live pilot (local GL-11 glass off here only) */
html body.page-products:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main :is(.pcard,.step,.value-card,.why-use,.series-use,.pdp-info-note,li.kf-acc){background:#fff!important;border:1px solid #E2E8F0!important;border-radius:14px!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body.page-products:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pcard:hover{box-shadow:var(--shadow-lg)!important}
html body.page-products:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main :is(section.wrap,.band>.wrap,.alt-row,.more-products .wrap>*,.why-uses,.role-list,.pdp-lead,h1,.eyebrow,.sec-head,.tax-grid){background:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-color:transparent!important}

/* Surfaces "Your cleaning agent…" 8 points (R-3, Andreas): collapsing key-fact rows, same component and look as the
   Alpron "Why practices choose ALPRON." key facts — tick, capitals heading, chevron; two columns; text + THE BENEFIT inside. */
html body.area-surfaces:has(.cat-hero-band) main .cat-why ul.cat-why-kf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:24px 0 0;padding:0;list-style:none;max-width:none}
/* row spacing measured from Alpron key facts: 18px 20px padding, 12px radius, 3px top edge in the area's darker shade */
html body.page-products:is(.area-surfaces,.area-aspiration-systems):has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main ul.benefit-list.big > li.kf-acc{margin:0!important;padding:18px 20px!important;border-radius:12px!important;border-top:3px solid var(--pt)!important;box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px rgba(15,23,42,.05)!important}
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) main ul.benefit-list.big > li.kf-acc{border-top-color:#FFCB04!important}
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) main ul.benefit-list.big > li.kf-acc > svg{color:#8A6A00!important}
html body.area-surfaces:has(.cat-hero-band) main .cat-why ul.cat-why-kf li.kf-acc > svg{color:var(--pt)}
html body.area-surfaces:has(.cat-hero-band) main .cat-why ul.cat-why-kf .benefit-more p{margin:0 0 8px}
html body.page-products.area-surfaces:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .cat-why .benefit-line{background:none!important;box-shadow:none!important;border:0!important;border-top:1px solid #E2E8F0!important;border-radius:0!important;padding:10px 0 0!important;margin:10px 0 0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line strong{color:var(--pt)!important}
html body.area-surfaces:has(.cat-hero-band) main .value-card{padding:20px 22px!important}
@media (max-width:760px){html body.area-surfaces:has(.cat-hero-band) main .cat-why ul.cat-why-kf{grid-template-columns:minmax(0,1fr)}}

/* Aspiration "Why practices choose ALPROJET-D + ALPROJET-W": rows stay collapsing (R-3, Andreas: collapsing, consistent) */
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) main :is(.value-card a,.why-use a,.series-use a){color:var(--pt)!important}
html body.area-aspiration-systems:has(.cat-hero-band) main li.kf-acc svg{color:#8A6A00!important;stroke:currentColor}
html body:is(.area-instruments,.area-surfaces):has(.cat-hero-band) .cat-hero-band :is(.pdp-typo,.pdp-typo span){color:var(--pt)!important}
html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* MOCK R-4 minimal (2 Nov, Karen: "minor changes that make it perfect"): Andreas's two cards unchanged; one slim row of
   product links under his sentence (small pack photo + name + arrow), thin line above, no boxes. */
html body.area-surfaces main .value-card .card-prod-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;padding-top:14px;border-top:1px solid #E2E8F0}
html body.area-surfaces main .value-card .card-prod-links a{display:inline-flex;align-items:center;gap:8px;font:600 14.5px var(--font);color:var(--pt,#177A36)!important;text-decoration:none}
html body.area-surfaces main .value-card .card-prod-links a:hover span:not(.cpl-arrow){text-decoration:underline;text-underline-offset:3px}
html body.area-surfaces main .value-card .card-prod-links img{width:auto;height:48px;mix-blend-mode:multiply}
html body.area-surfaces main .value-card .card-prod-links .cpl-arrow{transition:transform .2s}
html body.area-surfaces main .value-card .card-prod-links a:hover .cpl-arrow{transform:translateX(3px)}

/* MOCK R-6 (2 Nov, Karen): Surfaces "Which product?" uses the Water pilot's techniques — section head stacked left like
   Alpron's "What's next?" (eyebrow, then title, area colour); the two cards fill the width; product links use the same slim row as
   R-4 just above (small pack photo, name, arrow; thin line above); no REF text here, REFs live at the product image (R-5). */
html body.area-surfaces main section.wrap:has(.chooser-card) .sec-head{display:block!important;margin:0 0 10px}
html body.area-surfaces main section.wrap:has(.chooser-card) .sec-head .eyebrow{color:var(--pt)!important;margin:0 0 6px}
html body.area-surfaces main section.wrap:has(.chooser-card) .sec-head h2{font-size:19px!important;font-weight:700!important;color:var(--pt)!important;margin:0!important;text-align:left!important}
html body.area-surfaces main .chooser-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 24px!important}
html body.area-surfaces main .chooser-card .eyebrow{color:var(--pt)!important}

@media (max-width:760px){html body.area-surfaces main .chooser-grid{grid-template-columns:minmax(0,1fr)!important}}

/* R-6 v3 (Karen: "as a web designer — how would Water management do it?"): Water's own techniques. Text sections name
   products in bold inline (Why band: "Alpron: …"), never with thumbnails; one body size; cards stay minimal like the
   protocol cards. So: no image row, the product names inside Andreas's sentence become bold green links, the sentence is
   body size (was smaller), the footnote loses its icon and reads like Water's closing line. Words unchanged. */
html body.area-surfaces main .chooser-card{padding:24px 26px!important}
html body.area-surfaces main .chooser-card .chooser-note{font-size:inherit!important;color:var(--ink-2)!important;margin:12px 0 0!important;padding-top:12px;border-top:1px solid #E2E8F0}
html body.area-surfaces main .chooser-card a.wm-prod{font-weight:700;color:var(--pt,#177A36)!important;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--pa,#1EAA4A) 45%,transparent)}
html body.area-surfaces main .chooser-card a.wm-prod:hover{border-bottom-color:currentColor}
html body.area-surfaces main section.wrap:has(.chooser-card) .verify-note{font-size:15px!important;color:var(--ink-2)!important;padding-left:0!important}
html body.area-surfaces main section.wrap:has(.chooser-card) .verify-note svg{display:none!important}

/* R-6: section title in dark ink, label in the area colour (two colours, as on the Water pilot). */
html body.area-surfaces main section.wrap:has(.chooser-card) .sec-head h2{color:var(--ink,#0F172A)!important}

/* Band labels (2 Nov): labels on the dark Sustainability band and the blue Resource-centre band stay the light tint #B8E0F5
   they have on the Water pilot (the pilot colour rule had turned them dark area colour). Instruments, Surfaces, Aspiration. */
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band):not(.type-trial) main :is(.sus-band,.band-green) :is(.eyebrow,.eyebrow .caps-theme){color:#B8E0F5!important;--ct:#B8E0F5}
/* Type scale = Water pilot (measured 2 Nov): label 13/700 caps · section title 22/700 · body 16/400 · bold line 16/700.
   On the area category pages: "Which product?" title 19px -> 22px; capital statements (titles + green lines) 800 -> 700
   like every Water title; footnote 15px -> 16px body. */
html body.area-surfaces main section.wrap:has(.chooser-card) .sec-head h2{font-size:22px!important;font-weight:700!important;letter-spacing:-.015em!important}
html body.page-products:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band):not(#_a):not(#_b):not(#_c) main .caps-theme.caps-theme{font-weight:700!important}
html body.area-surfaces main section.wrap:has(.chooser-card) .verify-note{font-size:16px!important;line-height:1.5!important}
/* Type levels = Water (measured 2 Nov): page title 52/800 (the caps-weight rule above must not lower H1);
   THE BENEFIT lines are body level 16 (label 16/700); stand-alone product links are link level 14/650 like "Learn more". */
html body.page-products:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d) main h1 .caps-theme.caps-theme,html body.page-products:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) main h1.pdp-claim{font-weight:800!important}
html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line,html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line *{font-size:16px!important}
html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line{font-weight:400!important}
html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line strong,html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line strong *{font-weight:700!important}
html body.area-surfaces main .value-card .card-prod-links a{font-size:14px!important;font-weight:650!important}
/* Phone levels = Water on phone (measured at 390 px): section title 18/700 · body 15 · bold line 15/700. */
@media (max-width:640px){
  html body.area-surfaces main section.wrap:has(.chooser-card) .sec-head h2{font-size:18px!important}
  html body.area-surfaces main section.wrap:has(.chooser-card) .verify-note,html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line,html body.area-surfaces:has(.cat-hero-band) main .cat-why .benefit-line *{font-size:15px!important}
}

/* Side menu (Water check 2 Nov): on Water the active "On this page" link + bar are Water's own colour; on each area page they take
   that area's colour (other links stay grey). Instruments, Surfaces, Aspiration. */
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) :is(.pdp-rail,.pdp-topbar) a.on:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x),html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) :is(.pdp-rail,.pdp-topbar) a:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x):hover{color:var(--pt)!important;border-left-color:var(--pa)!important;border-bottom-color:var(--pa)!important}

/* Product-card "Learn more" (Water check 2 Nov): in the area's colour, as Water's are in Water blue. Instruments, Surfaces, Aspiration. */
html body:is(.area-instruments,.area-surfaces,.area-aspiration-systems):has(.cat-hero-band) main .pcard :is(.pcard-link,.pcard-link svg){color:var(--pt)!important}

/* Surfaces "Protect your patients" band white (Water check 2 Nov): Water never stacks two grey bands. */
html body.area-surfaces:has(.cat-hero-band) main section.band.cat-close{background:#fff!important}

/* Surfaces: stray inline green border (#1E8E3E) takes the area colour #1EAA4A. */
html body.area-surfaces:has(.cat-hero-band) main [style*="#1E8E3E"]{border-color:var(--pa,#1EAA4A)!important}

/* ASPIRATION REDESIGN MOCKUP (2 Nov, Andreas not satisfied; Karen: consistent with Water, clean + professional; expert review).
   Water order: intro -> 2-product grid -> "Two phases" why band (photo right) -> 4 use-cases as plain cards -> D/W routine as
   numbered protocol steps -> 10 collapsing rows -> D vs W flat comparison. Andreas's words unchanged; capitals kept but at
   Water's levels (section title 22/700, card title 16/700, bold line 16/700). Yellow only as accent. NOT COMMITTED. */
html body.area-aspiration-systems:has(.cat-hero-band) main :is(.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) h2{font-size:22px!important;font-weight:700!important;line-height:1.25!important;letter-spacing:-.01em!important;margin:0 0 6px!important;max-width:34ch;text-transform:none}
html body.area-aspiration-systems:has(.cat-hero-band) main :is(.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) h2 *{font-size:inherit!important;font-weight:inherit!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-use-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-use h3{font-size:16px!important;font-weight:700!important;line-height:1.35!important;margin:0 0 8px!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-use h3 *{font-size:inherit!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-steps{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin-top:24px}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-steps .step p{margin:8px 0 0}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-steps .step p strong{font-weight:700}
html body.area-aspiration-systems:has(.cat-hero-band) main p.asp-close{font-size:16px!important;font-weight:700!important;line-height:1.5!important;letter-spacing:0!important;margin:22px 0 0!important;text-transform:none}
html body.area-aspiration-systems:has(.cat-hero-band) main p.asp-close *{font-size:inherit!important;font-weight:inherit!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-kf ul.benefit-list.big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;list-style:none;padding:0;margin:24px 0 0;max-width:none}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px 32px;align-items:center;max-width:760px;margin:24px 0 0;padding:22px 0;border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-grid p{margin:2px 0 0}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-grid p:first-child{margin:0 0 4px}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-grid p:nth-child(2){font:700 13px/1.4 var(--font);letter-spacing:.12em;color:var(--pt,#0B3A5C)}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-plus{font:800 28px/1 var(--font);color:#CFA406}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs .btn{margin-top:18px}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-grid .pcard-cat{color:var(--pt,#0B3A5C)!important}
@media (max-width:760px){
  html body.area-aspiration-systems:has(.cat-hero-band) main :is(.asp-use-grid,.asp-steps,.asp-kf ul.benefit-list.big){grid-template-columns:minmax(0,1fr)!important}
  html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-grid{grid-template-columns:minmax(0,1fr);text-align:left}
  html body.area-aspiration-systems:has(.cat-hero-band) main :is(.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) h2{font-size:18px!important}
  html body.area-aspiration-systems:has(.cat-hero-band) main p.asp-close{font-size:15px!important}
}
/* Aspiration mockup, two-colour headings as on Water: label in Aspiration navy #0B3A5C (Karen: gold letters do not look nice;
   yellow itself is unreadable on white), section title in dark ink; closing capital lines one calm colour (navy). */
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main :is(.asp-intro,.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) .eyebrow,html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main :is(.asp-intro,.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) .eyebrow *{color:#0B3A5C!important;--ct:#0B3A5C}
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main :is(.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) h2,html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main :is(.asp-why,.asp-uses,.asp-protocol,.asp-kf,.asp-vs) h2 *{color:var(--ink,#0F172A)!important;--ct:var(--ink,#0F172A)}
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main p.asp-close,html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main p.asp-close *{color:#0B3A5C!important;--ct:#0B3A5C}
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c) main .asp-kf :is(.benefit-more,.benefit-more *){font-size:16px!important;line-height:1.5}
@media (max-width:640px){html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c) main .asp-kf :is(.benefit-more,.benefit-more *){font-size:15px!important}}

/* R-9 Aspiration: light-yellow strip above the hero only (#FFF9E4, programme Aspiration opener p.47). */
html body.area-aspiration-systems:has(.cat-hero-band) main > div.wrap:first-child{background:#FFF9E4;box-shadow:0 0 0 100vmax #FFF9E4;clip-path:inset(0 -100vmax)}

/* R-9 Aspiration: white glass panels only for the Aspiration-only parts (4 use-cases, D-vs-W), one frame each, yellow ring icons. */
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main :is(.asp-use-grid,.asp-vs-panel){background:linear-gradient(160deg,rgba(255,253,244,.96) 0%,#fff 55%)!important;border:1px solid rgba(255,255,255,.95)!important;border-radius:20px!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(207,164,6,.12),0 2px 8px rgba(207,164,6,.08)!important;padding:28px 30px!important}
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .asp-use-grid .asp-use{background:none!important;border:0!important;box-shadow:none!important;padding:0 0 0 30px!important;position:relative}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-use-grid{gap:26px 40px!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-use::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;border:2px solid #FFCB04;box-sizing:border-box;background:radial-gradient(circle,#FFCB04 0 3.5px,transparent 4px)}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs .asp-vs-grid{border:0!important;padding:0!important;margin:0!important;max-width:none}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-panel{margin-top:22px;max-width:820px}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-vs-panel .asp-close{margin-top:20px!important}
@media (max-width:760px){html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main :is(.asp-use-grid,.asp-vs-panel){padding:22px 20px!important}}

/* R-9 Aspiration: the 2 product cards fill the row. */
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-cards .pcard-img{height:280px!important}
@media (max-width:760px){html body.area-aspiration-systems:has(.cat-hero-band) main .asp-cards{grid-template-columns:minmax(0,1fr)!important}}

/* Aspiration product pages (AlproJet-W, AlproJet-D; Karen 2 Nov "this one should have glass effect like others"): the breadcrumb
   strip above the product band gets the same light-yellow glass strip as the Aspiration category page (#FFF9E4, programme p.47). */
html body .pdp-page.pdp-area-special > div.wrap:first-child{background:#FFF9E4;box-shadow:0 0 0 100vmax #FFF9E4;clip-path:inset(0 -100vmax)}

/* R-9 Aspiration "Two phases" band layout: text + photo sit in an inner panel (two columns), so the band keeps its own
   spacing beside the side menu. */
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-why .alt-row{display:block!important}
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-why-panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:center}
@media (max-width:760px){html body.area-aspiration-systems:has(.cat-hero-band) main .asp-why-panel{grid-template-columns:minmax(0,1fr);gap:20px}}

/* R-9 Aspiration "Two phases" band (Karen 2 Nov): very slight transparent white glass on that inner panel. */
html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .asp-why-panel{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(10px) saturate(120%);backdrop-filter:blur(10px) saturate(120%);border:1px solid rgba(255,255,255,.85);border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);padding:30px 34px}
@media (max-width:760px){html body.page-products.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .asp-why-panel{padding:20px 18px}}

/* R-10 AlproZyme card (2 Nov, Karen: "the same like the others, with a clinic background"). No real AlproZyme scene photo exists,
   so the REAL AlproZyme pack photo is cut out of its white background (assets/products/alprozyme-cutout.png, a mask of the real
   photo, nothing generated) and stands, solid and unblended, on the counter of the real CleanWipes clinic photo (not used on the
   Instruments page), framed on its empty left side (dental unit, counter) so no other product shows. Soft contact shadow underneath. Replace with a real AlproZyme
   scene photo from Magda/ALPRO when available. Mockup only. */
html body main .pcard-img.hero.az-scene{position:relative;overflow:hidden}
html body main .pcard-img.hero.az-scene > img.az-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 62%;transform:scale(1.6);transform-origin:0% 72%}
html body main .pcard-img.hero.az-scene::after{content:"";position:absolute;left:14%;right:14%;bottom:7%;height:9%;background:radial-gradient(ellipse at center,rgba(15,23,42,.28) 0%,rgba(15,23,42,.10) 45%,transparent 72%);z-index:1;pointer-events:none}
html body main .pcard-img.hero.az-scene > img.az-pack{position:absolute!important;left:50%;bottom:9%;transform:translateX(-50%);width:76%!important;height:auto!important;object-fit:contain!important;z-index:2;filter:drop-shadow(0 6px 8px rgba(15,23,42,.18))}
/* R-11 (2 Nov, Karen) Aspiration "The protocol" = the Surfaces "Not every surface…" treatment: two plain cards (label · title · line · product link with pack) + motto line */
html body.area-aspiration-systems:has(.cat-hero-band) main .asp-pcards .value-card{padding:20px 22px!important}
html body.area-aspiration-systems main .value-card .card-prod-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:16px 0 0;padding-top:14px;border-top:1px solid #E2E8F0}
html body.area-aspiration-systems main .value-card .card-prod-links a{display:inline-flex;align-items:center;gap:8px;font:650 14px var(--font);color:var(--pt,#0B3A5C)!important;text-decoration:none}
html body.area-aspiration-systems main .value-card .card-prod-links a:hover span:not(.cpl-arrow){text-decoration:underline;text-underline-offset:3px}
html body.area-aspiration-systems main .value-card .card-prod-links img{width:auto;height:48px;mix-blend-mode:multiply}
html body.area-aspiration-systems main .value-card .card-prod-links .cpl-arrow{transition:transform .2s}
html body.area-aspiration-systems main .value-card .card-prod-links a:hover .cpl-arrow{transform:translateX(3px)}
/* R-13 (2 Nov, Karen: Andreas does not like gold text): two-tone heading first line in the area colour the product pages already use, instead of gold #8A6A00 */
html body:is(.area-water-management,.area-i3):not(#_a):not(#_b):not(#_c) main h2.sec-typo:not([style*="color"]){color:#00759F!important}
html body.area-instruments:not(#_a):not(#_b):not(#_c) main h2.sec-typo:not([style*="color"]){color:#0069AD!important}
html body.area-surfaces:not(#_a):not(#_b):not(#_c) main h2.sec-typo:not([style*="color"]){color:#177A36!important}
html body.area-aspiration-systems:not(#_a):not(#_b):not(#_c) main h2.sec-typo:not([style*="color"]){color:#0F172A!important}
html body:has(main .home-alpro):not(#_a):not(#_b):not(#_c) main h2.sec-typo:not([style*="color"]){color:#0878B2!important}
/* R-14 (2 Nov, Karen): strip above the hero white on the Aspiration pages, like Water, i3, Instruments and Surfaces (replaces the light-yellow strip of 44b34d59 / 4f362a67) */
html body.area-aspiration-systems:has(.cat-hero-band):not(#_a) main > div.wrap:first-child,html body:not(#_a) .pdp-page.pdp-area-special > div.wrap:first-child{background:transparent;box-shadow:none;clip-path:none}
/* R-15 (2 Nov, Karen): Aspiration intro gets a very light warm glass — the i3 band recipe at the same strength, in Aspiration yellow — because yellow cannot carry the title the way the other areas' colours do. Accepted exception: Aspiration category page only. */
html body.area-aspiration-systems:has(.cat-hero-band) main section.asp-intro{position:relative;isolation:isolate}
html body.area-aspiration-systems:has(.cat-hero-band) main section.asp-intro::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:linear-gradient(150deg,color-mix(in srgb,#FFCB04 2%,#fff) 0%,color-mix(in srgb,#FFCB04 .8%,#fff) 55%,#fff 100%);box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px rgba(255,203,4,.06),6px 12px 26px -14px rgba(255,203,4,.09),14px 28px 56px -30px rgba(255,203,4,.10)}
/* R-17 (2 Nov, Karen): "the evidence." section only (section.band with .ev-wrap; NOT the WL-clean adapter or MaxiWipes comparison tables) — (1) no second "Evidence" label above "the evidence."; (2) table in the format of "the essentials" table: same panel, rows, lines, text size. Short first column (e.g. BC-San 100: VIRUCIDAL) = the essentials' blue label column (.ev-short); long first column (Alpron, Bilpron, BRS, Jumbo Wipe) = calm variant, both columns normal text, blue header as the label. Words unchanged. */
html body.page-products main section.band:has(.ev-wrap) .pw-sechead > p.eyebrow{display:none}
html body.page-products:not(#_a):not(#_b) main section.band .ev-wrap{border-radius:12px!important;padding:20px 24px!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#00A0E3) 12%,transparent),6px 12px 26px -14px color-mix(in srgb,var(--gl,#00A0E3) 18%,transparent),14px 28px 56px -30px color-mix(in srgb,var(--gl,#00A0E3) 20%,transparent)!important;border-top:1px solid rgba(255,255,255,.95)}
html body.page-products:not(#_a):not(#_b) main section.band .ev-table{width:100%;border-collapse:collapse}
html body.page-products:not(#_a):not(#_b) main section.band .ev-table th{font-size:13px;font-weight:700;padding:0 24px 10px 0;border-bottom:1px solid color-mix(in srgb,var(--gl,#00A0E3) 14%,#fff)!important;text-align:left}
html body.page-products:not(#_a):not(#_b) main section.band .ev-table td{padding:14px 24px 14px 0!important;border-bottom:1px solid color-mix(in srgb,var(--gl,#00A0E3) 14%,#fff)!important;vertical-align:top;font-size:16px!important;font-weight:400!important;line-height:24px;color:#334155!important}
html body.page-products:not(#_a):not(#_b) main section.band .ev-table tr:last-child td{border-bottom:0!important}
html body.page-products:not(#_a):not(#_b) main section.band .ev-table.ev-short :is(th,td):first-child{width:210px;padding-right:30px!important}
html body.page-products:not(#_a):not(#_b) main section.band .ev-table.ev-short td:first-child{font-size:14.5px!important;font-weight:700!important;letter-spacing:.005em;color:var(--accent-text)!important}
@media(max-width:760px){html body.page-products:not(#_a):not(#_b) main section.band .ev-table td{font-size:15px!important;line-height:22.5px}html body.page-products:not(#_a):not(#_b) main section.band .ev-table.ev-short :is(th,td):first-child{width:auto;padding-right:14px!important}html body.page-products:not(#_a):not(#_b) main section.band .ev-table.ev-short td:first-child{font-size:13px!important}}
/* R-18 (2 Nov, Karen): Biotesters "reading the slide." chart — stays inside the content column like every other section (was full page width, so the fixed side menu covered it on screens wider than ~1300 px) */
html body .pw-sec:has(.pw-diagram.wide){max-width:var(--max,1200px)!important}
/* R-19 (2 Nov, Karen): product-page key-fact row titles one weight like Alpron (600) — the all-caps colour span made most Surfaces titles 800 while titles with small letters (IIb, QACs) stayed 600; BRS kit row 4 sat in a .benefit-claim-t wrapper at 400 */
html body.page-products:not(#_a):not(#_b) main li.kf-acc .kf-t :is(.caps-theme,.benefit-claim-t){font-weight:inherit!important}
/* R-20 (2 Nov, Karen): Aspiration category key-fact titles one look — "TWO-PHASE CLEANING — BECAUSE ONE pH CAN'T DO EVERYTHING" skipped the all-caps navy span (small "pH") and showed ink 600 among nine navy 700 titles */
html body.area-aspiration-systems:has(.cat-hero-band):not(#_a):not(#_b) main li.kf-acc .kf-t{color:#0B3A5C!important;font-weight:700!important}
/* R-5 v3 (2 Nov, Karen): REF rows under the product photo (bold REF + pack) AND the REF line under the product name; every REF is a quiet button that shows its own pack photo; the REFs of the photo on show are highlighted (main.js .ref-pick) */
html body main .pdp-refline .ref-pick{all:unset;cursor:pointer;color:inherit;font:inherit;text-decoration:underline dotted;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
html body main .pdp-refline .ref-pick:hover,html body main .pdp-refline .ref-pick.on{color:var(--accent-text);text-decoration-style:solid}
html body main .pdp-refline .ref-pick:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:3px}
html body main .prog-hero-media ul.pack-refs{list-style:none;margin:12px 0 0;padding:10px 16px;background:#fff;border:1px solid #E2E8F0;border-radius:12px;display:grid;gap:4px}
html body main .prog-hero-media ul.pack-refs .ref-pick{all:unset;cursor:pointer;display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:#334155;padding:2px 0}
html body main .prog-hero-media ul.pack-refs .ref-pick b{font-weight:700;color:#0F172A;min-width:84px}
html body main .prog-hero-media ul.pack-refs .ref-pick:hover,html body main .prog-hero-media ul.pack-refs .ref-pick.on,html body main .prog-hero-media ul.pack-refs .ref-pick.on b{color:var(--accent-text)}
html body main .prog-hero-media ul.pack-refs .ref-pick:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-radius:3px}
html body.page-products:not(#_a) main .pdp-refline{font-weight:400!important;text-transform:none!important;letter-spacing:normal!important} /* R-5: one REF line look on every product page (AlproJet-D fell back to bold capitals) */
html body main .pdp-page.pdp-area-special :is(.pdp-refline .ref-pick,ul.pack-refs .ref-pick):is(:hover,.on),html body main .pdp-page.pdp-area-special ul.pack-refs .ref-pick.on b{color:#0B3A5C!important} /* R-5: Aspiration pages highlight in navy, not gold (Andreas: no gold text) */
html body main .prog-hero-media ul.pack-refs .ref-row{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:#334155;padding:2px 0} /* R-5: rows for packs without their own photo (same look, not clickable) */
html body main .prog-hero-media ul.pack-refs .ref-row b{font-weight:700;color:#0F172A;min-width:84px}
/* R-23 (2 Nov, Karen): key facts one look on every product page — open cards (AlproZyme, BIB forte, WL-clean, CleanWipes, MaxiWipes, Jumbo Wipe) and IC-100's other collapsing style became Alpron's collapsing rows (words unchanged); inside the rows the benefit / why-it-matters line is the area's readable text colour at one weight (was a fixed blue #1F6FA8 on every area) */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main li.kf-acc .benefit-line{color:var(--accent-text)!important;font-weight:600!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main li.kf-acc .benefit-line .cw-lbl .caps-theme{font-weight:800!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .pdp-area-surfaces li.kf-acc .benefit-line{color:#177A36!important} /* R-23: one Surfaces green for benefit lines (IC-100 Surfaces had #157734) */
/* R-22 (2 Nov, Karen): Friday end-of-day cleaning routine as real text in the same card as the "Key features" list (glass panel, white top edge, soft area-colour shadow, 16 px text) instead of a picture of text. Words = the routine's text version (164 words, identical on all 5 pages). */
html body.page-products:not(#_a):not(#_b):not(#_c) main .routine-card{background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 2.5%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 1%,#fff) 55%,#fff 100%);border-top:1px solid rgba(255,255,255,.95);border-radius:12px;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 12%,transparent),6px 12px 26px -14px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent),14px 28px 56px -30px color-mix(in srgb,var(--gl,#0072BC) 20%,transparent);padding:20px 24px;margin:16px 0 24px;text-align:left}
html body.page-products main .routine-card .routine-h{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink,#0F172A);margin:0 0 14px}
html body.page-products main .routine-card .routine-steps{list-style:none;margin:0;padding:0}
html body.page-products main .routine-card .routine-steps li{display:flex;gap:11px;margin:0 0 14px}
html body.page-products main .routine-card .routine-n{flex:0 0 auto;min-width:18px;font-size:16px;line-height:24px;font-weight:700;color:var(--accent-text)}
html body.page-products main .routine-card .routine-t{margin:0 0 2px;font-size:16px;line-height:24px;font-weight:600;color:#0F172A}
html body.page-products main .routine-card .routine-d{margin:0;font-size:16px;line-height:24px;color:#334155}
html body.page-products main .routine-card .routine-rule{margin:6px 0 0;padding-top:14px;border-top:1px solid color-mix(in srgb,var(--gl,#0072BC) 14%,#fff);font-size:15px;font-weight:700;line-height:22px}
@media(max-width:760px){html body.page-products main .routine-card{padding:16px 18px}html body.page-products main .routine-card :is(.routine-t,.routine-d,.routine-n){font-size:15px;line-height:22.5px}}
/* R-22b (2 Nov, Karen): routine card title one look on all 5 pages — the area's text colour (IC-100 pages styled headings dark) */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .routine-card .routine-h{color:var(--accent-text)!important}
html body main .pdp-page.pdp-area-surfaces.ds-pilot{--accent-text:#177A36!important} /* R-22b: IC-100 (Surfaces) uses the same Surfaces text green as the other Surfaces pages (#157734 -> #177A36) */
/* R-25 (2 Nov, Karen): CleanWipes in Surfaces green like the other Surfaces products (page settings + inline colours switched from the Cleaning blues); every "THE BENEFIT" line on product pages in the area's text colour at one weight (lines outside the key-fact rows were still the fixed blue #1F6FA8) */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .pdp-page .benefit-line{color:var(--accent-text)!important;font-weight:600!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .pdp-page.pdp-area-surfaces .benefit-line{color:#177A36!important}
/* R-26 (2 Nov, Karen): PlastiSept eco cleaner like Alpron — the extra panels leave the key-facts panel and stand in their own section below it, each one glass card (routine-card style); the two pictures of text (scientific advantage; equipment protection + commercial benefit) are real text; tiles become rows like the essentials table. Words unchanged. */
html body.page-products main section.adv-sec .adv-stack{display:grid;gap:22px;max-width:860px}
html body.page-products main .adv-card{margin:0!important}
html body.page-products main .adv-card .adv-statement{margin:0 0 12px;font-size:16px;line-height:24px;font-weight:700;color:#0F172A}
html body.page-products main .adv-card .adv-p{margin:0 0 10px;font-size:16px;line-height:24px;color:#334155}
html body.page-products main .adv-card .adv-rows{margin:0}
html body.page-products main .adv-card .adv-rows > div{display:grid;grid-template-columns:210px 1fr;column-gap:30px;padding:12px 0;border-bottom:1px solid color-mix(in srgb,var(--gl,#0072BC) 14%,#fff)}
html body.page-products main .adv-card .adv-rows > div:last-child{border-bottom:0}
html body.page-products main .adv-card .adv-rows dt{margin:0;font-size:14.5px;font-weight:700;letter-spacing:.005em;color:var(--accent-text)}
html body.page-products main .adv-card .adv-rows dd{margin:0;font-size:16px;line-height:24px;color:#334155}
@media(max-width:760px){html body.page-products main .adv-card .adv-rows > div{grid-template-columns:1fr;row-gap:2px}html body.page-products main .adv-card :is(.adv-statement,.adv-p,.adv-rows dd){font-size:15px;line-height:22.5px}}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main li.kf-acc .benefit-line{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:10px 0 0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} /* R-26: "THE BENEFIT" inside a key-fact row is a plain line, not a box inside the row (Alpron rows have no inner boxes) */
/* R-27 (2 Nov, Karen): PlastiSept eco long panels get the real clinic photo of the product beside them (the page's own photo: 5 L canister on a clinic counter), cropped to the product; it stays in view while scrolling (desktop); above the cards on phone */
html body.page-products main section.adv-sec .adv-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
html body.page-products main section.adv-sec .adv-stack{max-width:none}
html body.page-products main .adv-photo{position:sticky;top:96px;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--gl,#1EAA4A) 14%,transparent),0 16px 32px -14px color-mix(in srgb,var(--gl,#1EAA4A) 22%,transparent)}
html body.page-products main .adv-photo img{display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;object-position:74% 55%}
@media(max-width:960px){html body.page-products main section.adv-sec .adv-grid{grid-template-columns:1fr}html body.page-products main .adv-photo{position:static;order:-1}html body.page-products main .adv-photo img{aspect-ratio:16/10}}
/* R-27b (2 Nov, Karen + designer): two packs, one photo at a time — 5 L (real clinic photo) by default, 500 mL (real bottle on the real clinic counter) on its tab; REF rows under the photo pick the pack (R-27c), two-way with the pack switch at the top; 180 ms fade, none for reduced motion */
html body.page-products main .adv-photo{box-shadow:none;border-radius:0;overflow:visible}
html body.page-products main .adv-frame{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--gl,#1EAA4A) 14%,transparent),0 16px 32px -14px color-mix(in srgb,var(--gl,#1EAA4A) 22%,transparent)}
html body.page-products main .adv-frame img.pk{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;opacity:0;transition:opacity .18s ease-out}
html body.page-products main .adv-frame img.pk-5l{object-position:74% 55%}
html body.page-products main .adv-frame img.pk-500{object-position:50% 60%}
html body.page-products main .adv-photo[data-pack="5l"] img.pk-5l,html body.page-products main .adv-photo[data-pack="500"] img.pk-500{opacity:1}
@media(prefers-reduced-motion:reduce){html body.page-products main .adv-frame img.pk,html body.page-products main .adv-tabs [role="tab"]{transition:none}}
@media(max-width:960px){html body.page-products main .adv-frame{aspect-ratio:1/1}html body.page-products main .adv-frame img.pk-500{object-position:50% 85%}html body.page-products main .adv-frame img.pk-5l{object-position:72% 50%}}
/* R-27c (2 Nov, Karen): wherever a product photo shows, its REF shows with it — the tabs under the photo are the same REF rows as under the hero photo (bold REF + pack), the pack on show highlighted */
html body.page-products main .adv-tabs{display:flex;flex-direction:column;align-items:stretch;gap:2px;margin:12px 4px 0}
html body.page-products main .adv-tabs [role="tab"]{all:unset;cursor:pointer;display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:#334155;padding:2px 0;transition:color .12s}
html body.page-products main .adv-tabs [role="tab"] b{font-weight:700;color:#0F172A;min-width:84px;transition:color .12s}
html body.page-products main .adv-tabs [role="tab"]:hover,html body.page-products main .adv-tabs [role="tab"][aria-selected="true"],html body.page-products main .adv-tabs [role="tab"][aria-selected="true"] b{color:var(--accent-text,#177A36)}
html body.page-products main .adv-tabs [role="tab"]:focus-visible{outline:2px solid var(--accent-text,#177A36);outline-offset:2px;border-radius:3px}
/* R-28 (2 Nov, Karen): the sticky photo + REF rows run on beside "the essentials" (Product information + Key features) and stop at its end — both sections sit in one see-through wrapper (.rail-pass, side menu unchanged); the photo lives in a right-hand column spanning both; the text of both sections uses the same column width */
@media(min-width:961px){
html body.page-products main .adv-run{position:relative}
html body.page-products main .adv-run > .adv-col{position:absolute;top:64px;bottom:64px;right:max(24px,calc((100% - 1200px) / 2 + 24px));width:300px;z-index:1}
html body.page-products main .adv-run > .adv-col > .adv-photo{position:sticky;top:96px}
html body.page-products:not(#_a):not(#_b) main .adv-run > section{padding-right:352px}
html body.page-products main .adv-run section.adv-sec .adv-grid{display:block}
}
@media(max-width:960px){
html body.page-products main .adv-run > .adv-col{padding:32px 16px 0;max-width:560px;margin:0 auto}
html body.page-products main .adv-run section.adv-sec .adv-grid{display:block}
}
/* R-29 (2 Nov, Karen): key-facts background = gradient glass — the same fade as the hero (area tint at the top, white by 78%) instead of a flat tint; every product page in its own area colour (IC-100's older design untouched, still open) */
html body.type-trial:not(.ff-keep):not(#_a) main section.prog-facts{background:linear-gradient(var(--ff-tint) 0px,#FFFFFF 78%) !important}
html body.type-trial:not([class*=" ff-"]):not(#_a) main section.prog-facts{background:linear-gradient(#FFF2C6 0px,#FFFFFF 78%) !important}
/* R-30 (2 Nov, Karen): sustainability forest band — trees stand out: the photo a little brighter and greener, the dark cover only as a soft patch behind the text (none over the rest of the trees). Measured text contrast stays ≥ 8.4 (phone) / ≥ 10 (desktop), above the 7 AAA level. All pages with the band; words unchanged */
html body .sus-band .sus-img{filter:brightness(1.22) saturate(1.3) contrast(1.05)}
html body:not(.page-about) .sus-band .sus-shade{background:radial-gradient(ellipse 34% 75% at 38% 50%,rgba(15,23,42,.62) 0%,rgba(15,23,42,.42) 55%,rgba(15,23,42,0) 100%)}
/* R-31 (2 Nov, Karen): side menu + phone top bar highlight (current section, hover, its line) in the area colour, not site blue — Surfaces green, Water/i3 blue (unchanged look), Instruments blue, Aspiration navy text with a yellow line (no gold text). Area from the page address (main.js data-nav-area) */
html body[data-nav-area="surfaces"]{--nav-on:#177A36;--nav-line:#1EAA4A}
html body[data-nav-area="water-management"],html body[data-nav-area="i3"]{--nav-on:#00759F;--nav-line:#00A0E3}
html body[data-nav-area="instruments"]{--nav-on:#0072BC;--nav-line:#0072BC}
html body[data-nav-area="aspiration-systems"]{--nav-on:#0B3A5C;--nav-line:#FFCB04}
html body[data-nav-area] :is(.pdp-rail,.pdp-topbar) a:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x):hover,
html body[data-nav-area] :is(.pdp-rail,.pdp-topbar) a.on:not(.btn):not(.nav-link):not(.nav-tab):not(.rail-x){color:var(--nav-on) !important}
html body[data-nav-area] :is(.pdp-rail,.pdp-topbar) a.on{border-left-color:var(--nav-line) !important;border-bottom-color:var(--nav-line) !important}
/* R-32 (2 Nov, Karen): the PlastiSept eco design on the other Surfaces product pages — key facts = rows only; the extra panels as one glass card each beside a sticky clinic photo (the page's own photo) with the REF rows under it, running on beside "the essentials". Pages with one photo: the photo shows, REF rows in the same look as under the top photo (not clickable). Pictures of text become real text, word for word */
html body.page-products main .adv-photo:not([data-pack]) .adv-frame img.pk{opacity:1}
html body.page-products main .adv-frame img.pk-one{object-position:79% 55%}
html body.page-products main .adv-photo ul.adv-refs{list-style:none;margin:12px 4px 0;padding:0}
html body.page-products main .adv-photo ul.adv-refs .ref-row{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:#334155;padding:2px 0}
html body.page-products main .adv-photo ul.adv-refs .ref-row b{font-weight:700;color:#0F172A;min-width:84px}
html body.page-products main .adv-card .adv-lead{margin:0 0 12px;font-size:17px;line-height:25px;font-weight:700;color:#0F172A}
html body.page-products main .adv-card .routine-t-lead{text-transform:none}
html body.page-products main .adv-card .adv-note{margin:14px 0 0;font-size:14px;line-height:21px;color:#64748B}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .adv-card p.benefit-line{background:none !important;box-shadow:none !important;border:0 !important;padding:0 !important;margin:10px 0 0 !important}
/* R-33 (2 Nov, Karen — MaxiWipes): the photo-band slogan in the area colour on every product page. Slogans whose source text is not in capitals miss the all-caps colour span and fell back to site blue at 700 (MaxiWipes, AlproZyme, BIB forte, WL-clean, Bilpron, Biotesters, BRS kit; AlproJet-W navy at 700) — now the same as the spanned ones: area colour, 800; Aspiration stays navy (no gold text). Words + case unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .pdp-band-slogan .pdp-band-slogan-text:not(:has(.caps-theme)){color:var(--gl) !important;font-weight:800 !important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d) main .pdp-page.pdp-area-special .pdp-band-slogan .pdp-band-slogan-text:not(:has(.caps-theme)){color:#0F172A !important}
/* R-32 page 2 (MaxiWipes): "One system. Two chemistries." as real text — two option cards with the two product photos in identical white frames (same size, products filling the same height); "How MaxiWipes work" as numbered rows like the Friday routine; "Which wipe system" table in the format of the essentials table (rows, thin area lines, 16 px, area-colour labels) inside the card, no inner box */
html body.page-products main .adv-card .opt-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:4px}
html body.page-products main .adv-card .opt-card{display:flex;flex-direction:column;padding:12px 12px 16px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid color-mix(in srgb,var(--gl,#1EAA4A) 14%,#fff)}
html body.page-products main .adv-card .opt-img{aspect-ratio:4/3;border-radius:8px;background:#fff;overflow:hidden;margin:0 0 12px}
html body.page-products main .adv-card .opt-img img{display:block;width:100%;height:100%;object-fit:contain}
html body.page-products main .adv-card .opt-n{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.06em;color:#64748B}
html body.page-products main .adv-card .opt-name{margin:0 0 8px;font-size:18px;line-height:24px;font-weight:700;color:#0F172A}
html body.page-products main .adv-card .opt-tag{align-self:flex-start;margin:0 0 10px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.04em;background:#F1F5F9;color:#334155}
html body.page-products main .adv-card .opt-tag.opt-tag-g{background:color-mix(in srgb,#1EAA4A 12%,#fff);color:#177A36}
html body.page-products main .adv-card .opt-card .adv-note{margin:6px 0 12px}
html body.page-products main .adv-card .opt-link{margin-top:auto;font-size:14px;font-weight:600;color:#0F172A;text-decoration:none;border-bottom:1px dotted color-mix(in srgb,currentColor 45%,transparent);align-self:flex-start}
html body.page-products main .adv-card .opt-link:hover{color:var(--accent-text,#177A36)}
html body.page-products main .adv-card .adv-chips{margin:0 0 14px}
html body.page-products main .adv-card .adv-statement-after{margin-top:18px}
html body.page-products main .adv-card table.adv-table{width:100%;border-collapse:collapse;margin:4px 0 0}
html body.page-products main .adv-card table.adv-table th{font-size:13px;font-weight:700;padding:0 18px 10px 0;border-bottom:1px solid color-mix(in srgb,var(--gl,#1EAA4A) 14%,#fff);text-align:left;color:#0F172A;text-transform:none;letter-spacing:0;background:none}
html body.page-products main .adv-card table.adv-table td{padding:12px 18px 12px 0;border-bottom:1px solid color-mix(in srgb,var(--gl,#1EAA4A) 14%,#fff);vertical-align:top;font-size:16px;line-height:24px;color:#334155;background:none}
html body.page-products main .adv-card table.adv-table tr:last-child td{border-bottom:0}
html body.page-products main .adv-card table.adv-table :is(th,td):first-child{width:150px;padding-right:22px}
html body.page-products main .adv-card table.adv-table td:first-child{font-size:14.5px;font-weight:700;letter-spacing:.005em;color:var(--accent-text,#177A36)}
html body.page-products main .adv-frame img.pk-maxi{object-position:78% 50%}
@media(max-width:760px){html body.page-products main .adv-card .opt-grid{grid-template-columns:1fr}html body.page-products main .adv-card table.adv-table td{font-size:15px;line-height:22.5px}html body.page-products main .adv-card table.adv-table :is(th,td):first-child{width:auto;padding-right:12px}html body.page-products main .adv-card table.adv-table td:first-child{font-size:13px}}
html body.page-products main section.adv-sec .adv-stack{grid-template-columns:minmax(0,1fr)}
@media(max-width:760px){html body.page-products main .adv-card table.adv-table{table-layout:fixed}html body.page-products main .adv-card table.adv-table :is(th,td){overflow-wrap:anywhere}html body.page-products main .adv-card table.adv-table :is(th,td):first-child{width:30%}}
@media(max-width:760px){html body.page-products main .adv-card table.adv-table :is(th,td){overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}html body.page-products main .adv-card table.adv-table td{font-size:14px;line-height:21px}html body.page-products main .adv-card table.adv-table td:first-child{font-size:12.5px}}
html body.page-products:not(#_a):not(#_b) main .adv-card table.adv-table th{white-space:normal !important}
/* R-34 (2 Nov, Karen — "this text's format"): "Applications & features" (MaxiWipes, i3 one, i3 four) in the format of the "Key features" list on every product page — each list in the same glass box (measured: gradient, 1 px edge, soft shadow, radius 12, padding 20/24), list labels in the Key-features label style (13 px, 700, 0.78 px spacing, dark) instead of green with wide spacing; both boxes the same height. Text, ticks and words unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .prog-grid > div{display:flex;flex-direction:column}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .prog-grid > div > ul.benefit-list{flex:1;margin:0;background:linear-gradient(150deg,color-mix(in srgb,var(--gl,#0072BC) 2.5%,#fff) 0%,color-mix(in srgb,var(--gl,#0072BC) 1%,#fff) 55%,#fff 100%)!important;border:1px solid color-mix(in srgb,var(--gl,#0072BC) 18%,#fff)!important;border-top-color:rgba(255,255,255,.95)!important;border-left-color:rgba(255,255,255,.9)!important;border-radius:12px!important;padding:20px 24px!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),1px 2px 4px -1px color-mix(in srgb,var(--gl,#0072BC) 12%,transparent),6px 12px 26px -14px color-mix(in srgb,var(--gl,#0072BC) 18%,transparent),14px 28px 56px -30px color-mix(in srgb,var(--gl,#0072BC) 20%,transparent)!important;-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .prog-grid > div > p.eyebrow{font-size:13px!important;font-weight:700!important;letter-spacing:.78px!important;text-transform:uppercase;color:#0F172A!important;margin:0 0 14px!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .prog-grid > div > ul.benefit-list{align-content:start}
/* R-32 page 3 (CleanWipes): own clinic photo (tub + refill bag) in the sticky column; "What makes it unique" built as a centred panel like its neighbours (a full-width band broke the run of panels); point tiles one size site-wide ("Why clean first" on CleanWipes was 14 px / 24·26, every other set 12 px / 20·22) */
html body.page-products main .adv-frame img.pk-cw{object-position:77% 60%}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .grid > .pw-key{border-radius:12px!important;padding:20px 22px!important}
html body.page-products main .adv-card .opt-grid-text .opt-name{margin-top:2px}
html body.page-products:not(.ff-keep):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .grid > .pw-key > b:first-child{font-size:17px!important;font-weight:600!important;line-height:1.35!important;color:var(--gl,#0072BC)!important}
@media(min-width:961px){html body.page-products main .adv-run .grid:has(> .pw-key){grid-template-columns:repeat(2,minmax(0,1fr))!important}}
html body.page-products:not(.ff-keep):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .grid > .pw-key{border-top:3px solid var(--gl,#0072BC)!important}
/* R-32 (found by the whole-page check): a card heading that is an all-caps statement keeps the card-heading colour, not the brighter all-caps span green (MaxiWipes "WHICH WIPE SYSTEM SUITS YOUR PRACTICE?") */
html body.page-products:not(#_a):not(#_b):not(#_c) main .adv-card > h3.routine-h .caps-theme{color:inherit!important;font-weight:inherit!important}
/* R-35 (2 Nov, Karen: "check if they are consistent" — Friday routine vs CleanWipes How to use): all-caps statement lines inside cards follow the site standard for all-caps statements (area colour, 16 px, 800 — as CleanWipes' own lines, weekly care, AlproZyme). The dark 700 statements came from picture-to-text conversions (PlastiSept ×3, Jumbo, CleanWipes) and missed that rule. Closing "golden rule" lines (15 px with a thin line above, R-22) unchanged. Words unchanged */
html body.page-products:not(.ff-keep):not(#_a):not(#_b):not(#_c) main .adv-card .adv-statement{color:var(--gl,#1EAA4A)!important;font-weight:800!important;font-size:16px!important;line-height:24px!important}
/* R-36 (2 Nov, Karen: "the glass effect takes the /products/aspiration-systems/"): AlproJet-D + AlproJet-W hero and key-facts band in the Aspiration category page's very light warm glass (R-15 recipe: yellow 2% → 0.8% → white, 150°) instead of the heavier cream fade (#FFF4CC / #FFF2C6) — yellow cannot carry a band the way the other area colours do. Aspiration product pages only */
html body.page-products:has(.pdp-page.pdp-area-special):not(#_a):not(#_b):not(#_c) main :is(section.prog-hero,section.prog-facts){background:linear-gradient(150deg,color-mix(in srgb,#FFCB04 2%,#fff) 0%,color-mix(in srgb,#FFCB04 .8%,#fff) 55%,#fff 100%)!important}
/* R-36: a "Key Features" list in the hero (AlproJet-D) gets the same box as every Key features list (radius 12, padding 20/24) — it had the glass but no padding, so the text sat on the edge */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .prog-hero-copy ul.pinfo-feats{border-radius:12px!important;padding:20px 24px!important}
/* R-36: AlproJet "Everyday dentistry / Prophylaxis" cards (.series-use) — same content as the category page's "Complete aspiration system hygiene", so the same type: title navy 700, text #334155; card top line yellow #FFCB04 like the key-fact rows on the category page instead of gold #8A6A00 (yellow only as a line, never as text) */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .series-use{border-top-color:#FFCB04!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .series-use > h3,html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .series-use > h3 .caps-theme{color:#0B3A5C!important;font-weight:700!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .series-use > p{color:#334155!important}
/* R-37 (2 Nov, Karen: "the image should be a bit obvious, now it is too white" + "on its category page it is blue, i think blue looks nicer"): AlproJet-D/-W photo band = the Aspiration category band — same lighter white cover (96% → 74% at 34% → clear from 62%; product bands were 97/93/72/25 → clear from 78%) so the photo shows, and the slogan in the site text blue #0670A0 instead of near-black (measured over the photo: worst contrast 3.3–3.7 at 1280/1440/1900, above the 3.0 needed for large bold text; #0878B2 dipped to 2.9). Aspiration product pages only; words unchanged */
html body.page-products:has(.pdp-page.pdp-area-special):not(#_a):not(#_b):not(#_c) main .pdp-band-slogan .pdp-band-shade{background:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.74) 34%,rgba(255,255,255,0) 62%)!important}
html body.page-products:has(.pdp-page.pdp-area-special):not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .pdp-band-slogan :is(.pdp-band-slogan-text,.pdp-band-slogan-text .caps-theme){color:#0670A0!important}
/* R-38 (2 Nov, Karen: "how should you format this, have you found similar?"): the AlproJet key-facts intro ("COMPLETE SUCTION SYSTEM HYGIENE" / "COMPLETE ASPIRATION SYSTEM HYGIENE") is the same text as two sections on the Aspiration category page → same format: labels navy 700 (were near-black 800), titles 22 px / 27.5 px, letter-spacing -0.22 px (were -0.44, 28.6), and no empty line inside "DIFFERENT TREATMENTS. DIFFERENT RESIDUES. / ONE ASPIRATION CLEANING SYSTEM." (the colour span was a block, so the line break added a blank line). Words unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .pdp-area-special section.prog-facts .alt-txt > p.eyebrow,html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .pdp-area-special section.prog-facts .alt-txt > p.eyebrow .caps-theme{color:#0B3A5C!important;font-weight:700!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .pdp-area-special section.prog-facts .alt-txt > .sec-typo{font-size:22px!important;line-height:27.5px!important;letter-spacing:-.22px!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .pdp-area-special section.prog-facts .alt-txt > .sec-typo .caps-theme{display:inline!important}
/* R-38: AlproJet key-fact rows in the colours of the same rows on the Aspiration category page ("Why practices choose ALPROJET-D + ALPROJET-W"): title navy #0B3A5C (was near-black), top line yellow #FFCB04 (was navy); weight stays 600 like every product page (R-19) */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .pdp-area-special li.kf-acc{border-top-color:#FFCB04!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .pdp-area-special li.kf-acc .kf-t,html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h) main .pdp-area-special li.kf-acc .kf-t .caps-theme{color:#0B3A5C!important}
/* R-38 (found by the new "same text, same look" check against the category page): titles inside the AlproJet key facts at the category weight 700 (the colour span made them 800); the D/W summary lines in the category colours — "DAILY · ALKALINE · pH 11.5" / "ACIDIC · pH <2" navy, "Clean · Disinfect · Neutralise" / "Counter-clean · Dissolve · Descale" near-black (were grey) */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special section.prog-facts .sec-typo .caps-theme{font-weight:inherit!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special section.prog-facts .sec-typo{font-weight:700!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .pdp-info-note > div > div > p:nth-child(2){color:#0B3A5C!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .pdp-info-note > div > div > p:nth-child(3){color:#0F172A!important}
/* R-39 (2 Nov, Karen: "too crowded … after the AlproJet D + W, may be good to have those two product images with clinic background"): after the AlproJet intro text, the two real clinic photos (AlproJet-D blue, AlproJet-W orange — the pages' own photos) side by side in identical frames, each with its REF rows underneath in the hero REF-row look (every product photo has its REF). AlproJet-D and -W pages */
html body.page-products main .pdp-area-special .aj-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0 4px}
html body.page-products main .pdp-area-special .aj-ph{margin:0}
html body.page-products main .pdp-area-special .aj-frame{aspect-ratio:16/10;border-radius:14px;overflow:hidden;box-shadow:0 2px 6px -1px color-mix(in srgb,#0B3A5C 10%,transparent),0 16px 32px -14px color-mix(in srgb,#0B3A5C 18%,transparent)}
html body.page-products main .pdp-area-special .aj-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
html body.page-products main .pdp-area-special ul.aj-refs{list-style:none;margin:12px 4px 0;padding:0}
html body.page-products main .pdp-area-special ul.aj-refs .ref-row{display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.5;color:#334155;padding:2px 0}
html body.page-products main .pdp-area-special ul.aj-refs .ref-row b{font-weight:700;color:#0F172A;min-width:84px}
@media(max-width:560px){html body.page-products main .pdp-area-special .aj-duo{grid-template-columns:1fr;gap:20px}}
/* R-40 (2 Nov, Karen: "for this one, how would you suggest to improve the formatting?"): the AlproJet "Daily ROUTINE for PROPHYLAXIS, SURGERY & INTENSIVE CLEANING" panel = the same content as the category page's "The protocol" (R-11) → same format: left-aligned title (22 px), D and W as two white cards side by side (bold navy title line, grey text; measured from the category cards: white, 1 px #E2E8F0, radius 14, padding 20/22, gap 18/28), closing pair as navy 16/700 lines (were centred 22 px headings). Words + punctuation unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .aj-protocol{text-align:left!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .aj-protocol > h3.sec-typo{text-align:left!important;margin:0 0 4px!important}
html body.page-products main .pdp-area-special .aj-pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin:22px 0 0}
html body.page-products main .pdp-area-special .aj-pcard{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:20px 22px}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .aj-pcard-t,html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .aj-pcard-t :is(strong,.caps-theme){margin:0 0 8px;font-size:16px!important;line-height:24px;font-weight:700!important;color:#0B3A5C!important}
html body.page-products main .pdp-area-special .aj-pcard-l{margin:0;font-size:16px;line-height:24px;color:#334155}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .aj-motto,html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) main .pdp-area-special .aj-motto .caps-theme{margin:24px 0 0;font-size:16px!important;line-height:24px!important;font-weight:700!important;color:#0B3A5C!important;text-align:left}
@media(max-width:760px){html body.page-products main .pdp-area-special .aj-pcards{grid-template-columns:1fr}}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .pdp-area-special .aj-pcard-l{color:#334155!important}
/* R-40 (same text, same look): the closing "TWO pH WORLDS. / ONE COMPLETE SUCTION HYGIENE SYSTEM." in the AlproJet "What goes down shouldn't stay there" panel as on the category page — navy 16 px / 700 line pair, not a 22 px heading */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .pdp-area-special .pdp-info-note:not(.aj-protocol) > h3.sec-typo:last-of-type,html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g) main .pdp-area-special .pdp-info-note:not(.aj-protocol) > h3.sec-typo:last-of-type .caps-theme{font-size:16px!important;line-height:24px!important;letter-spacing:normal!important;color:#0B3A5C!important;font-weight:700!important}
/* R-44 base (from the R-42 mockup, 2 Nov): AlproJet centred sections paint no glass of their own (2 Nov, Karen: "try pale and yellow glassy" → A; then "check on the vertical … like broken" + "try like this" = the Aspiration category page): the AlproJet sections no longer paint glass edge-to-edge in a 1200 px column (two long vertical edges + a seam at each section). Like the category page ("Complete suction system hygiene": full-width section, rounded glass card on the content only — radius 20, thin white edge, soft shadow): each centred section on AlproJet-D/-W gets a rounded pale yellow glass card (yellow 7% → 3% → 1%) behind its content only, with space between the cards; a thin warm edge (yellow 40%) on all four sides and an even soft shadow, because a white edge disappears on the white page and the frame looked open on the left. Text unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pdp-area-special section.wrap.pw-sec{background:none!important;box-shadow:none!important;border:0!important;position:relative;isolation:isolate}
/* R-44 (2 Nov, Karen: "the product page should follow the category page, very clear and clean"): AlproJet-D/-W surfaces = the Aspiration category page's (measured): sections after key facts plain white; the key-facts area a light grey band (#F8FAFC) with the category's "Complete suction system hygiene" glass panel (white 55%, blur, white edge, radius 20, padding 30/34, soft shadow); the D+W protocol cards sit straight on that panel (no extra box); "What goes down shouldn't stay there" = the category's panel (160° warm white, radius 20, padding 28/30); (boxes that exist only on product pages — essentials table, key features, documents, FAQ, packs, product + support cards — keep the product-page glass, same as PlastiSept: R-46). Replaces the R-42/R-43 glass cards. Text unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pdp-area-special section.prog-facts{background:#F8FAFC!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pdp-area-special .prog-facts-panel{background:rgba(255,255,255,.55)!important;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2);border:1px solid rgba(255,255,255,.85)!important;border-radius:20px!important;padding:30px 34px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05)!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pdp-area-special .pdp-info-note.aj-protocol{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pdp-area-special .pdp-info-note:not(.aj-protocol){background:linear-gradient(160deg,rgba(255,253,244,.96) 0%,#fff 55%)!important;border:1px solid rgba(255,255,255,.95)!important;border-radius:20px!important;padding:28px 30px!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.05),0 10px 28px rgba(207,164,6,.12),0 2px 8px rgba(207,164,6,.08)!important}
/* R-46 (2 Nov, Karen, PlastiSept "the essentials" screenshot: "make sure those table and box apply effect like this"): R-44 had wrongly flattened the product-page-only boxes (essentials table, key features, documents, FAQ, packs, product + support cards) into the category page's plain cards; they are back on the product-page glass (same recipe as PlastiSept, measured: 150° area-tint gradient, white edge, inset highlight + 3 tinted shadows, blur 10 px, radius 12 / FAQ 10 / packs 20 / support 14) in the Aspiration tint. Essentials labels in the area text colour like PlastiSept's green ones: navy #0B3A5C (were button blue). Text unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i) main .pdp-area-special .pinfo-grid dt{color:#0B3A5C!important}
/* R-47 (2 Nov, Karen: "a little too big, should start from the weekly routine carried on to essentials"): replaces R-45. The clinic photo now runs beside "The weekly routine", "The routine, at a glance" and "the essentials" in the standard product photo column (same as PlastiSept / CleanWipes: 300 px wide, 3:4 frame, stays in view while the three sections scroll past, REF rows underneath); the R-45 large photo beside the chart is gone. Crop on the bottle. Text unchanged */
html body.page-products main .adv-frame img.pk-aj{object-position:96% 55%}
/* R-50 (3 Nov, Karen: "now start to change this one" — IC-100 Surfaces in the PlastiSept eco design, all four steps): (1) page on the standard Surfaces layout (ff-surfaces, no old "ds-pilot" box-per-section design) — sections plain like PlastiSept; (2) "How it works" + "How to use" centred sections instead of full-width bands; (3) the IC-100 clinic photo (500 mL foam spray) in the standard photo column beside "How it works" → "the essentials" (Karen: "nice to start from How it works"), REF rows underneath; (4) boxes, titles and card edges in Surfaces green like PlastiSept: the glass tint followed the canonical link (Instruments blue), now the page's own area. Text unchanged */
html body.page-products:not(#_a):has(.pdp-page.pdp-area-surfaces){--gl:#1EAA4A}
html body.page-products main .adv-frame img.pk-ic{object-position:50% 50%} /* R-50: the real IC-100 500 mL bottle cut out of its studio photo, standing unblended on the empty counter of the real IC-100 clinic photo — same method and bottle size as the PlastiSept eco 500 mL photo (Karen: "may be too big, check the consistency of other pages") */
/* R-50 (part): "Where IC-100 is used" numbered rows (only on IC-100): title in the same look as the tile headings on this page and on CleanWipes (17 px / 600, Surfaces green #1EAA4A, Karen: "may be too big, check the consistency of other pages"), number in a small filled green circle — without the old design they fell back to 22–32 px black and broke over three lines */
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces .pw-rows .pw-rh{font-size:17px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:0;color:#1EAA4A!important;display:flex;align-items:center;gap:10px;text-wrap:balance}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces .pw-rows .pw-rn{font-size:13px!important;width:26px;height:26px;flex:0 0 26px;display:inline-grid;place-items:center;border-radius:50%;background:#1EAA4A;color:#fff!important}
/* R-50 (part): "How to use" steps (only on IC-100) keep their own look from the old design in Surfaces green: three step cards in the product-page glass (as PlastiSept's boxes), centred, big filled green number — without the old design they fell back to small blue number chips */
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces ol.pw-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:8px 0 22px}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces ol.pw-steps>li{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 18px;border-radius:12px;background:var(--g1-bg);box-shadow:var(--g1-sh);border-top:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces ol.pw-steps .pw-sn{width:72px!important;height:72px!important;flex:0 0 72px;display:grid!important;place-items:center;border-radius:50%!important;background:#1EAA4A!important;border-color:#1EAA4A!important;color:#fff!important;font-size:28px!important}
@media(max-width:760px){html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces ol.pw-steps{grid-template-columns:minmax(0,1fr);gap:14px}html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces ol.pw-steps .pw-sn{width:60px!important;height:60px!important;flex-basis:60px;font-size:26px!important}}
/* R-50 (part, Karen: "at the beginning you placed it just below better access, I think that is good"): "How it works" image stays centred against its text; the clinic photo column starts just below the heading "better wetting. better access.", level with the first paragraph */
@media(min-width:961px){html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces .adv-run:has(.pw-feature) > .adv-col{top:165px}}
/* R-51 (3 Nov, Karen: "check this one Clean, care and protect, other pages are not like that, please correct to be consistent"): IC-100 Surfaces "CLEAN · CARE · PROTECT" chips = the site's motto pills as on MaxiWipes (measured: Surfaces green text + green glass edge, weight 600, 14.72 px, left-aligned with the lines above) — an old IC-100-only rule made them Instruments blue, 800 and centred. Words unchanged */
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces .pdp-band-slogan .motto-chips{display:inline-flex!important;justify-content:flex-start;width:auto;--mc:#1EAA4A}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-surfaces .pdp-band-slogan .motto-chips .motto-chip.motto-chip{font-weight:600!important;font-size:14.72px!important;color:color-mix(in srgb,var(--mc) 82%,#0b2a1a)!important;border-color:color-mix(in srgb,var(--mc) 55%,transparent)!important}
/* R-52 (3 Nov, Karen: "/products/instruments/ic-100/ is exactly like /products/surfaces/ic-100/ but the colour scheme is different, make changes accordingly"): R-50 + R-51 on the Instruments IC-100 page in Instruments blue #0072BC — standard Instruments layout (ff-manual, no old box-per-section design), centred "How it works" / "How to use", the same clinic photo column (just below "better access" → the essentials, REF 4658 / 4659), numbered rows + step cards + motto chips in the page's own colour. Text unchanged */
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual .pw-rows .pw-rh{font-size:17px!important;font-weight:600!important;line-height:1.35!important;letter-spacing:0;color:#0072BC!important;display:flex;align-items:center;gap:10px;text-wrap:balance}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual .pw-rows .pw-rn{font-size:13px!important;width:26px;height:26px;flex:0 0 26px;display:inline-grid;place-items:center;border-radius:50%;background:#0072BC;color:#fff!important}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual ol.pw-steps{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:8px 0 22px}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual ol.pw-steps>li{display:flex!important;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 18px;border-radius:12px;background:var(--g1-bg);box-shadow:var(--g1-sh);border-top:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual ol.pw-steps .pw-sn{width:72px!important;height:72px!important;flex:0 0 72px;display:grid!important;place-items:center;border-radius:50%!important;background:#0072BC!important;border-color:#0072BC!important;color:#fff!important;font-size:28px!important}
@media(max-width:760px){html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual ol.pw-steps{grid-template-columns:minmax(0,1fr);gap:14px}html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual ol.pw-steps .pw-sn{width:60px!important;height:60px!important;flex-basis:60px;font-size:26px!important}}
@media(min-width:961px){html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual .adv-run:has(.pw-feature) > .adv-col{top:165px}}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual .pdp-band-slogan .motto-chips{display:inline-flex!important;justify-content:flex-start;width:auto;--mc:#0072BC}
html body.page-products:not(#_a):not(#_b) main .pdp-page.pdp-area-manual .pdp-band-slogan .motto-chips .motto-chip.motto-chip{font-weight:600!important;font-size:14.72px!important;color:color-mix(in srgb,var(--mc) 82%,#0b2a1a)!important;border-color:color-mix(in srgb,var(--mc) 55%,transparent)!important}
/* R-53 (3 Nov, Karen, AlproZyme "the essentials" screenshot: "maybe in the empty space put the product image there in clinic background"): the standard product photo column (as PlastiSept / IC-100) beside "the essentials" — the real AlproZyme pack (cut out of its studio photo, the same cut-out as the category card, R-10) standing unblended on the empty counter of a real Instruments clinic photo (autoclave + instrument box); REF 3753 underneath (every product photo shows its REF). Text unchanged */
html body.page-products main .adv-frame img.pk-az{object-position:50% 50%}
/* R-55 (3 Nov, Karen: "now bib forte, check its consistency"): checks found no differences in the parts BIB forte has; like AlproZyme (R-53) it lacked the standard photo column — added beside "the essentials": the real BIB forte 1 L bottle cut out of its studio photo, standing unblended on the empty counter of its own real clinic photo (window + autoclave + instrument box), REF 3024 underneath. Text unchanged */
html body.page-products main .adv-frame img.pk-bib{object-position:50% 50%}
/* R-56 (3 Nov, Karen: "now continue to check the consistency of WL-clean"): (1) WL-Series adapters table in the same look as the other product-page tables (MaxiWipes, measured): glass box padding 20/24, radius 12; header 13/700 area colour over a 1 px line; first column (adapter code) 14.5/700 in the area colour, other cells 16/400 grey, rows 12 px tall padding with 1 px lines — it had no inner padding, radius 14, a 2 px header line and 14 px text; (2) the CLEAN · PROTECT · … chips in the phone-only top copy = the desktop motto pills (area colour, weight 600, 14.72 px) on every product page — they were site blue, 400/500 (WL-clean, both IC-100s); (3) the standard clinic photo column beside "the essentials", as AlproZyme / BIB forte. Text unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page .ev-wrap:has(> table.adapter-table){padding:20px 24px!important;border-radius:12px!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page table.adapter-table th{font-size:13px!important;font-weight:700!important;color:var(--accent-text)!important;padding:0 22px 10px 0!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,#fff)!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page table.adapter-table td{font-size:16px!important;font-weight:400!important;color:#334155!important;padding:12px 18px 12px 0!important;border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,#fff)!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page table.adapter-table td:first-child{font-size:14.5px!important;font-weight:700!important;color:var(--accent-text)!important;padding-right:22px!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page .prog-hero .motto-chips{--mc:var(--tax,var(--accent));color:color-mix(in srgb,var(--mc) 82%,#0b2a1a)}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page .prog-hero .motto-chips .motto-chip.motto-chip{font-weight:600!important;font-size:14.72px!important;color:color-mix(in srgb,var(--mc) 82%,#0b2a1a)!important;border-color:color-mix(in srgb,var(--mc) 55%,transparent)!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page .prog-hero .motto-chips .motto-sep{background:var(--mc)!important}
html body.page-products main .adv-frame img.pk-wl{object-position:100% 50%}
/* R-56 (part, Karen: "recommended BLOW … maybe the product image start from there"): on WL-clean the photo column starts beside the "recommended BLOW" picture — that picture now opens the run (no heading, same gap as before: the stack's 34 px), the two wide diagrams above keep their full width */
html body.page-products:not(#_a):not(#_b) main .pdp-page section.wrap.pw-sec:has(+ .adv-run > .adv-col + section.pw-sec-cont){padding-bottom:0!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page .adv-run > section.pw-sec-cont{padding-top:34px!important}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page .adv-run:has(> section.pw-sec-cont) > .adv-col{top:34px}
/* R-56 (part, Karen: "have double how to use" + "needed adapters may need to have heading? check the consistent treatment"): WL-clean picture captions take the site's in-section label (as IC-100's "CHOOSE HOW YOU CLEAN", measured: 13/700, area colour, capitals, 1.82 px spacing, 14 px below) instead of 14 px plain text; the first caption "how to use" sits right under the heading "how to use." and repeats it, so it is visually hidden (kept for screen readers). Words unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-mod-wl-clean .prog-imgs figcaption{font-size:13px!important;font-weight:700!important;color:var(--accent-text)!important;text-transform:uppercase;letter-spacing:1.82px;margin:0 0 14px!important;line-height:1.4}
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-mod-wl-clean section:has(> .pw-sechead) > .prog-imgs > figure:first-child > figcaption{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important}
/* R-57 (3 Nov, Karen, Water pages: "for these product pages we just need to add the product images in the clinic background; Bilpron has, but not the product image in the background of clinic"): Alpron, Bilpron, BRS kit, Biotesters, BC-San 100 get the standard photo column beside "the essentials" (as PlastiSept / IC-100 / AlproZyme / BIB forte): the real pack cut out of its studio photo standing unblended on the empty counter of its own real clinic photo (Biotesters: its own clinic photo of the dip slide in a gloved hand, cropped), REF row underneath. Bilpron's white side photo is replaced by the column (same place, one treatment). Text unchanged */
html body.page-products main .adv-frame img.pk-water{object-position:50% 50%}
/* R-58 (3 Nov, Karen: "check for these three" — BRS kit, Biotesters, BC-San 100): Biotesters was the only product page without the standard product layout (body class lr-layout) — its essentials table had no padding or rounding, tighter rows, smaller document rows and rounder product cards; now on the standard layout like Alpron / Bilpron (measured). BC-San 100 evidence table: cell spacing 30 px → 24 px as on Alpron's table. Text unchanged */
html body.page-products:not(#_a):not(#_b):not(#_c) main .pdp-page.pdp-area-water table.ev-table :is(th,td){padding-right:24px!important}
/* R-59 (3 Nov, Karen: "/resources/ these boxes are lifting up, 3D, but for /compliance/ boxes are all flat" → "Yes, mouse-over lift"): the clickable boxes on Compliance (the four practical-guide PDF rows) get the same mouse-over lift as the Resources tiles (measured): line turns water blue, soft blue shadow 0 10 28 / 14 %, rises 1 px, 0.15 s. Only whole-box links — the large cards with links inside the text stay still. Text unchanged */
html body.page-compliance:not(#_a):not(#_b) main a.doc-row{transition:border-color .15s,box-shadow .15s,transform .15s}
html body.page-compliance:not(#_a):not(#_b) main a.doc-row:is(:hover,:focus-visible):not(.pending){border-color:var(--water,#08A0E5)!important;box-shadow:0 10px 28px rgba(8,160,229,.14)!important;transform:translateY(-1px);outline:none}
/* R-59 (part, Karen: "these all" + "this too" — the ARTG register table, the "Use them for" checklist, the three "Compliance party" cards, the auditor checklist and the two guide / training cards): the same mouse-over lift as the Resources tiles on every box of the Compliance page */
html body.page-compliance:not(#_a):not(#_b) main :is(ul.check,.value-card,table.artg-table){transition:border-color .15s,box-shadow .15s,transform .15s}
html body.page-compliance:not(#_a):not(#_b) main :is(ul.check,.value-card,table.artg-table):hover{border-color:var(--water,#08A0E5)!important;box-shadow:0 10px 28px rgba(8,160,229,.14)!important;transform:translateY(-1px)}
/* R-60 (3 Nov, Karen, /research/: "should you think each surface products should also have their colours and lift up"): the test-report cards and their area headings in each area's own colours (as on the product pages: Water #00A0E3 / text #00759F, Aspiration line #FFCB04 / text navy #0B3A5C, Instruments #0072BC, Surfaces #1EAA4A / text #177A36): 3 px top line in the area colour (like the key-fact rows), product name and area heading in the area text colour, and the Resources mouse-over lift in the area colour; the area labels in the evidence table too. Matched by each card's own product link, so no page markup changes. Text unchanged */
html body.page-research:not(#_a):not(#_b) main article.gut-card{transition:border-color .15s,box-shadow .15s,transform .15s}
html body.page-research:not(#_a):not(#_b) main article.gut-card:hover{transform:translateY(-1px)}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/water-management/"]){border-top:3px solid #00A0E3!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/water-management/"]) > :first-child, html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/water-management/"]) > :first-child a{color:#00759F!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/water-management/"]):hover{border-color:#00A0E3!important;box-shadow:0 10px 28px color-mix(in srgb,#00A0E3 16%,transparent)!important}
html body.page-research:not(#_a):not(#_b) main h3.gut-cat:has(+ .gut-grid a[href*="/products/water-management/"]){color:#00759F!important}
html body.page-research:not(#_a):not(#_b) main td:has(a[href*="/products/water-management/"]) .evm-zone{color:#00759F!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/aspiration-systems/"]){border-top:3px solid #FFCB04!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/aspiration-systems/"]) > :first-child, html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/aspiration-systems/"]) > :first-child a{color:#0B3A5C!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/aspiration-systems/"]):hover{border-color:#FFCB04!important;box-shadow:0 10px 28px color-mix(in srgb,#FFCB04 16%,transparent)!important}
html body.page-research:not(#_a):not(#_b) main h3.gut-cat:has(+ .gut-grid a[href*="/products/aspiration-systems/"]){color:#0B3A5C!important}
html body.page-research:not(#_a):not(#_b) main td:has(a[href*="/products/aspiration-systems/"]) .evm-zone{color:#0B3A5C!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/instruments/"]){border-top:3px solid #0072BC!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/instruments/"]) > :first-child, html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/instruments/"]) > :first-child a{color:#0072BC!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/instruments/"]):hover{border-color:#0072BC!important;box-shadow:0 10px 28px color-mix(in srgb,#0072BC 16%,transparent)!important}
html body.page-research:not(#_a):not(#_b) main h3.gut-cat:has(+ .gut-grid a[href*="/products/instruments/"]){color:#0072BC!important}
html body.page-research:not(#_a):not(#_b) main td:has(a[href*="/products/instruments/"]) .evm-zone{color:#0072BC!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/surfaces/"]){border-top:3px solid #1EAA4A!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/surfaces/"]) > :first-child, html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/surfaces/"]) > :first-child a{color:#177A36!important}
html body.page-research:not(#_a):not(#_b) main article.gut-card:has(a[href*="/products/surfaces/"]):hover{border-color:#1EAA4A!important;box-shadow:0 10px 28px color-mix(in srgb,#1EAA4A 16%,transparent)!important}
html body.page-research:not(#_a):not(#_b) main h3.gut-cat:has(+ .gut-grid a[href*="/products/surfaces/"]){color:#177A36!important}
html body.page-research:not(#_a):not(#_b) main td:has(a[href*="/products/surfaces/"]) .evm-zone{color:#177A36!important}
/* R-60 (part, Karen: "how about this" — the peer-reviewed study cards): the same treatment as the test-report cards: 3 px top line, year and product tags in the area colour, area-colour mouse-over lift. Area from the card's product tags; the two cards without a tag ("Alpron eliminates contamination", "NHS adoption") are dental-unit-waterline studies and take Water, like the rest of that list */
html body.page-research:not(#_a):not(#_b) main article.study-card{transition:border-color .15s,box-shadow .15s,transform .15s;--sa:#00A0E3;--st:#00759F}
html body.page-research:not(#_a):not(#_b) main article.study-card:has(a.study-prod-tag[href*="/products/aspiration-systems/"]){--sa:#FFCB04;--st:#0B3A5C}
html body.page-research:not(#_a):not(#_b) main article.study-card:has(a.study-prod-tag[href*="/products/instruments/"]){--sa:#0072BC;--st:#0072BC}
html body.page-research:not(#_a):not(#_b) main article.study-card:has(a.study-prod-tag[href*="/products/surfaces/"]){--sa:#1EAA4A;--st:#177A36}
html body.page-research:not(#_a):not(#_b) main article.study-card{border-top:3px solid var(--sa)!important}
html body.page-research:not(#_a):not(#_b):not(#_c):not(#_d) main article.study-card .study-yr.study-yr{color:var(--st)!important}
html body.page-research:not(#_a):not(#_b) main article.study-card a.study-prod-tag{color:var(--st)!important;background:color-mix(in srgb,var(--sa) 12%,#fff)!important}
html body.page-research:not(#_a):not(#_b) main article.study-card:hover{border-color:var(--sa)!important;box-shadow:0 10px 28px color-mix(in srgb,var(--sa) 16%,transparent)!important;transform:translateY(-1px)}
/* R-60 (part, Karen: "this too" — Spectrum & standards table): product names in their area text colour (were all one blue), matching the area labels under them; the table box gets the same mouse-over lift as the other boxes (water blue, the table mixes areas) */
html body.page-research:not(#_a):not(#_b):not(#_c) main table.ev-matrix td a[href*="/products/water-management/"]{color:#00759F!important}
html body.page-research:not(#_a):not(#_b):not(#_c) main table.ev-matrix td a[href*="/products/aspiration-systems/"]{color:#0B3A5C!important}
html body.page-research:not(#_a):not(#_b):not(#_c) main table.ev-matrix td a[href*="/products/instruments/"]{color:#0072BC!important}
html body.page-research:not(#_a):not(#_b):not(#_c) main table.ev-matrix td a[href*="/products/surfaces/"]{color:#177A36!important}
html body.page-research:not(#_a):not(#_b):not(#_c) main .ev-matrix-wrap{transition:border-color .15s,box-shadow .15s,transform .15s}
html body.page-research:not(#_a):not(#_b):not(#_c) main .ev-matrix-wrap:hover{border-color:var(--water,#08A0E5)!important;box-shadow:0 10px 28px rgba(8,160,229,.14)!important;transform:translateY(-1px)}
/* R-61 (3 Nov, Karen, Research "How this evidence supports AS 5369" box: "this should mouse to lift"): the same mouse-over lift as the other boxes (soft water-blue shadow, rise 1 px, 0.15 s); it has no line, so only the shadow and rise. Text unchanged */
html body.page-research:not(#_a):not(#_b) main .ev-compliance{transition:box-shadow .15s,transform .15s}
html body.page-research:not(#_a):not(#_b) main .ev-compliance:hover{box-shadow:0 10px 28px rgba(8,160,229,.14)!important;transform:translateY(-1px)}
/* R-62 (3 Nov, Karen, phone: sticky tab bar "IC-100 · Key facts · Choose how you clean": text showed through it): on phones and tablets the product-page tab bar is solid white, no blur - the same as on desktop */
@media (max-width:1279px){html body:has(.pdp-page) .pdp-topbar{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* R-63 (3 Nov, Karen: "On mobile version accept all cookies does not disappear"): the phone cookie-sheet rules force display:flex and beat [hidden]; a hidden cookie bar now really hides */
html body .cookie-bar[hidden]{display:none !important}
/* R-64 (3 Nov, phone: the chat button sat over "Accept all"): while scrolling down the chat button slides away; the 24 Oct opacity:1 rule kept it visible (and not tappable) over the cookie bar - keep it invisible while away, it returns on scroll up */
@media (max-width:480px){html body.fab-away:not(.tc-page) .chat-fab{opacity:0 !important}}
/* R-65 (3 Nov, Karen approved "Approve all four", phone polish 1/4): product-page REF line as tappable chips on phones (selected pack in the area colour); the " | " separators are hidden by size only, words unchanged */
@media (max-width:480px){
html body:not(#_a):not(#_b) main .pdp-refline{font-size:0!important;display:flex!important;flex-wrap:wrap;gap:8px;margin-top:10px!important}
html body:not(#_a):not(#_b) main .pdp-refline>*{font-size:13px!important;line-height:1!important;white-space:nowrap!important;flex:none!important;width:auto!important;padding:9px 12px!important;border-radius:999px!important;border:1px solid color-mix(in srgb,var(--tax,#08A0E5) 35%,transparent)!important;background:#fff!important;text-decoration:none!important;color:#0F172A!important;font-weight:600!important}
html body:not(#_a):not(#_b) main .pdp-refline>.ref-pick.on{background:var(--tax-tint,#EAF6FD)!important;border-color:var(--tax,#08A0E5)!important}
html body:not(#_a):not(#_b) main .pdp-refline>.artg-link{color:#475569!important;font-weight:500!important}
}
/* R-66 (3 Nov, Karen chose phone C "i like this": phone as close to desktop as possible): Key facts on phones keep the desktop's glass cards but almost full width (panel padding 28/32 -> 12 px, cards 277 -> 313 px); heading text keeps 20 px inset */
@media (max-width:480px){
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j):not(#_k) main .pdp-page .prog-facts-panel{padding:22px 12px 14px!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j):not(#_k) main .pdp-page .prog-facts-panel > :not(ul):not(.prog-facts-accent){padding-left:8px!important;padding-right:8px!important}
html body.page-products:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j):not(#_k) main .pdp-page .prog-facts-panel ul.benefit-list.big{gap:12px!important}
}
/* R-67 (3 Nov, phone polish 3/4): FAQ questions on phones show a round + / - in the area colour instead of the browser's triangle */
@media (max-width:480px){
html body .faq-list details.faq summary{list-style:none!important;position:relative;padding-right:44px!important}
html body .faq-list details.faq summary::-webkit-details-marker{display:none}
html body .faq-list details.faq summary::after{content:"+";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,#08A0E5) 14%,#fff);color:var(--accent-text,var(--accent,#0A66A8));font:600 18px/1 var(--font,Inter,sans-serif)}
html body .faq-list details.faq[open] summary::after{content:"\2212"}
}
/* R-68 (3 Nov, phone polish 4/4): product-page bottom buttons as a frosted sheet; rounded 46 px buttons, both labels on one line */
@media (max-width:480px){
html body .pdp-actionbar{background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(15,23,42,.08)!important;box-shadow:0 -10px 28px -20px rgba(15,23,42,.45)!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))!important;gap:10px!important}
html body:not(#_a):not(#_b) .pdp-actionbar .btn{min-height:46px!important;height:46px!important;border-radius:14px!important;font-size:14.5px!important;font-weight:600!important;white-space:nowrap!important;padding:0 10px!important}
}
/* R-69 (3 Nov, Karen chose phone C "i like this"; replaces the 24 Sep phone rule "hide PDP photo band, first screen = category + name"): the desktop hero photo band shows on phones too, headline on the photo over a soft white fade as on desktop; the phone-only copy of the same headline is hidden so it shows once. Pages: the 600 px blank-image <source> removed from the band picture */
@media (max-width:600px){
html body:not(#_a):not(#_b):not(#_c) section.pdp-band.pdp-band-slogan{display:flex!important;align-items:flex-end;height:auto!important;min-height:330px!important;overflow:hidden!important;margin:0!important;padding:0 0 26px!important}
html body:not(#_a):not(#_b):not(#_c) section.pdp-band.pdp-band-slogan .pdp-typo{font-size:26px!important;line-height:1.1!important}
html body:not(#_a):not(#_b):not(#_c) .prog-slogan.prog-slogan-mobile{display:none!important}
html body:not(#_a):not(#_b):not(#_c) section.pdp-band.pdp-band-slogan .pdp-band-shade{display:block!important;position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 34%,rgba(255,255,255,0) 66%)!important}
html body:not(#_a):not(#_b):not(#_c) section.pdp-band.pdp-band-slogan .pdp-band-in{position:relative;z-index:2}
}
/* R-70 (3 Nov, Karen chose option B "product on the photo"; asked "see almost the whole of the product image"): on phones the white product card overlaps the bottom of the hero photo (headline moves to the top of the photo, white fade from the top), so the whole product photo shows on the first screen (card first, then category line, name, REF); REF chips fill their row (max-width:none fixes the 0-width line from R-65's font-size:0); less padding around the pack shot. The photo keeps 110 px free at the bottom so the card never covers the headline. Words unchanged. */
@media (max-width:600px){
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) section.pdp-band.pdp-band-slogan{min-height:250px!important;align-items:flex-start!important;padding:18px 0 110px!important}
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) section.pdp-band.pdp-band-slogan .pdp-band-shade{background:linear-gradient(to bottom,rgba(255,255,255,.93) 0%,rgba(255,255,255,.72) 32%,rgba(255,255,255,0) 60%)!important}
}
@media (max-width:480px){
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .pdp-refline{width:100%!important;max-width:none!important;grid-column:1/-1!important;justify-self:stretch!important;margin-bottom:4px!important}
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .prog-hero-in > .prog-hero-media{order:-1!important;margin-top:-92px!important;position:relative;z-index:5}
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .prog-hero-in > .prog-hero-media .pdp-pack{padding:10px!important;box-shadow:0 22px 44px -22px rgba(15,23,42,.42),0 2px 8px -4px rgba(15,23,42,.18)!important}
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .prog-hero-in > .prog-hero-media .pdp-pack .pdp-main{padding:6px!important}
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .prog-hero-in > .prog-hero-media .pdp-pack img{max-height:200px!important}
html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e) main .prog-hero-in > .prog-name{margin-top:6px!important}
}
/* R-78 (3 Nov, Karen's phone screenshot: "the text touching the edge"): between 1000 and 1279 px (phones now lay out at 1220, small laptops) the 1200 px content boxes left only 10 px at the sides; keep 40 px each side, the same as at 1280 (Karen: "i do not like the edge is too narrow"). Wider boxes stay capped by their own max-width; desktop at 1280+ untouched. */
@media (min-width:1000px) and (max-width:1279px){
html body main :is(section,aside,nav,div) > .wrap, html body main > .wrap, html body main section.wrap, html body main aside.wrap{width:calc(100% - 80px)!important;box-sizing:border-box}
}
/* R-79 (4 Nov, Karen picked the "top right option"): on phones the desktop page is shown shrunk to fit (viewport 1220), which made the top menu and the Products drop-down too small to find or tap (Andreas: menu too small). Phones only: same menu items and the same drop-down layout, drawn about 1.5x (menu) and 1.9x (Products list) bigger. Header stays 64 px tall, so everything that sticks under it stays put. Desktop computers and tablets untouched. */
/* R-80 (4 Nov, Karen: "Yes, 11% bigger"): phones now lay out at 1100 (was 1220), so the menu is set to 20 px and the Products drop-down to zoom 1.71; on the phone they stay the same size as R-79 (menu about 7 pt) and still fit on one line. */
/* R-81 (4 Nov, Karen on her phone: "it looks good. but it could be slightly bigger"): phones now lay out at 1060 (15% bigger than 1220); menu padding 7 px and Products drop-down zoom 1.65 so both still fit; the first screen still ends at the i3 card (about 609 pt).  Then (Karen: "this also needs to slightly bigger"): menu 22 px (about 7.8 pt on the phone), room made by a slightly smaller logo (150 px wide, was 170) and tighter header side space (16 px). */
@media (hover:none) and (pointer:coarse) and (max-device-width:767px){
html body header.hdr .hdr-in{max-width:none!important;padding:0 16px!important;gap:8px!important}
html body header.hdr .logo-img{width:150px!important;height:auto!important}
html body header.hdr .hdr-tools{gap:8px!important}
html body header.hdr .nav{gap:4px!important}
html body header.hdr .nav-link, html body header.hdr .nav-tab{font-size:22px!important;white-space:nowrap!important;padding:10px 6px!important}
html body header.hdr .hdr-search-t{display:none!important}
html body header.hdr .hdr-search{width:48px!important;min-width:0!important;height:48px!important;padding:0!important;justify-content:center}
html body header.hdr .hdr-search-ic svg{width:24px;height:24px}
html body header.hdr .hdr-tools .btn-sm{font-size:22px!important;padding:10px 14px!important;white-space:nowrap}
html body header.hdr #mega-products{zoom:1.65;width:642px!important;max-width:642px!important;left:0!important;right:auto!important}
html body header.hdr #mega-products *{max-width:100%}
}