/* =================================================================
   PRIME WATER — MOCKUP PRO V6
   Tourze Lite hero style + Life Ionizers polish + Prime Water content.
   Full-bleed dark navy hero. Floating white pill nav. Massive centered
   display type. Bottom trust row with icon chips. Blue palette across.
   ================================================================= */

:root{
  /* Paper / surfaces */
  --paper:#FAFAFA;
  --paper-2:#F2F4F7;
  --paper-3:#E6EAF2;

  /* Ink */
  --ink:#0A1626;
  --ink-2:#2C3E5C;
  --ink-soft:#5A6B7E;
  --ink-faint:#8C9AAA;
  --line:#E2E6ED;
  --line-soft:#EEF1F6;

  /* Brand blue family */
  --night:#061029;
  --navy:#0A2540;
  --navy-2:#133458;
  --blue:#1E5BA8;
  --blue-2:#2D70BD;
  --blue-light:#6FB1E0;
  --blue-soft:#BBD6EE;
  --blue-pale:#E3EFF9;

  /* Type */
  --display:'Inter Tight','Inter',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',monospace;

  /* Sizing */
  --container:1280px;
  --container-narrow:980px;
  --gutter:24px;
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-xl:32px;

  /* Shadow */
  --sh-sm:0 1px 2px rgba(10,22,38,0.05);
  --sh:0 12px 32px rgba(10,22,38,0.10);
  --sh-lg:0 30px 80px rgba(10,22,38,0.20);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;line-height:1.6;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.wrap-narrow{max-width:var(--container-narrow)}

/* ---------- Type primitives ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--blue);font-weight:500;
  display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 4px rgba(30,91,168,0.15);
}
.eyebrow--light{color:var(--blue-light)}
.eyebrow--light::before{background:var(--blue-light);box-shadow:0 0 0 4px rgba(111,177,224,0.20)}

.h-section{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(38px,5.4vw,72px);
  letter-spacing:-0.035em;line-height:1.04;
  margin:0 0 24px;color:var(--navy);
}
.lede{
  font-size:clamp(16px,1.2vw,18px);
  color:var(--ink-2);max-width:62ch;line-height:1.65;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);
  font-size:14px;font-weight:600;letter-spacing:-0.005em;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform 200ms,box-shadow 200ms,background 200ms,border-color 200ms;
  white-space:nowrap;
}
.btn--blue{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(30,91,168,0.30)}
.btn--blue:hover{background:var(--navy-2);transform:translateY(-1px);box-shadow:0 12px 28px rgba(30,91,168,0.40)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--ink);transform:translateY(-1px)}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{background:var(--blue-pale)}
.btn--ghost-white{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,0.32);
}
.btn--ghost-white:hover{
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.55);
}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink-2)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,0.35)}
.btn--ghost-light:hover{background:rgba(255,255,255,0.15);border-color:#fff}
.btn--whatsapp{
  background:#25D366;color:#fff;
  box-shadow:0 8px 20px rgba(37,211,102,0.30);
}
.btn--whatsapp:hover{
  background:#1DA851;transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(37,211,102,0.40);
}
.btn--whatsapp svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.btn--whatsapp-outline{
  background:transparent;color:#25D366;
  border-color:#25D366;
}
.btn--whatsapp-outline:hover{background:#25D366;color:#fff}
.btn--whatsapp-outline svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.btn--lg{padding:16px 30px;font-size:15px}
.btn .arr{transition:transform 200ms}
.btn:hover .arr{transform:translateX(2px)}

/* =================================================================
   HERO — full-bleed dark, floating pill nav, massive centered type
   ================================================================= */
.hero{
  position:relative;
  min-height:680px;
  background:
    linear-gradient(180deg, rgba(6,16,41,0.78) 0%, rgba(10,37,64,0.62) 45%, rgba(6,16,41,0.92) 100%),
    url('../assets/img/Prime-R_with_kitchen_photo.jpg') center 30% / cover no-repeat,
    linear-gradient(180deg,var(--night) 0%,var(--navy) 50%,var(--night) 100%);
  color:#fff;
  overflow:hidden;
  display:flex;flex-direction:column;
  padding:60px 0 0;
}
@media(max-width:880px){
  .hero{padding:40px 0 0}
  .pagehero{padding:40px 0 60px}
}
@media(max-width:680px){
  .hero{padding:30px 0 0}
  .pagehero{padding:30px 0 50px}
}
/* Subtle moving shimmer (water feel) */
.hero::before{
  content:'';position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 30% 50%,rgba(111,177,224,0.10) 0%,transparent 40%),
    radial-gradient(circle at 70% 30%,rgba(30,91,168,0.18) 0%,transparent 45%);
  filter:blur(30px);
  animation:hero-drift 28s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes hero-drift{
  0%{transform:translate(0,0) rotate(0)}
  100%{transform:translate(-3%,3%) rotate(8deg)}
}
/* Subtle dot grid (premium texture) */
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  opacity:0.5;
}
.hero > *{position:relative;z-index:2}

/* Floating white pill nav */
.nav-pill{
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:999px;
  padding:8px 8px 8px 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:24px;
  max-width:1100px;margin:0 auto;
  box-shadow:0 12px 40px rgba(6,16,41,0.30);
}
.nav-pill__brand{display:flex;align-items:center;gap:10px}
.nav-pill__brand img{height:28px}
.nav-pill__menu{
  display:none;
  list-style:none;margin:0;padding:0;
  justify-content:center;gap:32px;
}
.nav-pill__menu a{
  font-family:var(--display);
  font-size:14px;font-weight:500;color:var(--ink-2);
  position:relative;padding:8px 0;
  transition:color 200ms;
}
.nav-pill__menu a:hover,.nav-pill__menu a.is-active{color:var(--navy)}
.nav-pill__menu a.is-active::after{
  content:'';position:absolute;left:50%;bottom:0;
  transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}
.nav-pill__cta{display:flex;align-items:center;gap:6px}
.nav-pill__toggle{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;
  background:transparent;border:none;border-radius:50%;
  color:var(--navy);
}
.nav-pill__toggle svg{width:18px;height:18px}
@media(min-width:1024px){
  .nav-pill__menu{display:flex}
  .nav-pill__toggle{display:none}
}

/* ===== Nav dropdown (Ionizers) ===== */
/* CRITICAL: lift the nav wrapper above the hero content so the dropdown
   panel can paint over the h1/eyebrow. Without this, .hero > * gives the
   nav wrap and .hero__content the same z-index:2 — and source order makes
   .hero__content win, hiding our absolute-positioned dropdown. */
.hero > .wrap:has(.nav-pill),
.hero > .pagehero__nav,
.pagehero > .pagehero__nav,
.pagehero > .wrap:has(.nav-pill){
  position:relative;
  z-index:50 !important;
}

.nav-pill__menu .has-dropdown{position:relative !important}
/* Keep the trigger as a plain inline anchor (matches sibling baselines).
   The chevron is an inline SVG — no flexbox, so "Ionizers" stays on the
   same baseline as Home / Technology / Research / etc. */
.nav-pill__menu .has-dropdown > a{
  white-space:nowrap;
}
/* Suppress active-dot on the dropdown trigger — keeps state clean even
   when filter-replacements / products marks Ionizers as active. */
.nav-pill__menu .has-dropdown > a.is-active::after{display:none !important}

.nav-chev{
  display:inline-block;
  width:10px;height:10px;
  vertical-align:-1px;          /* visual baseline tweak, not layout shift */
  margin-left:4px;
  stroke-width:2.4;
  opacity:0.6;
  transition:transform 220ms ease,opacity 200ms ease,color 200ms ease;
}
.nav-pill__menu .has-dropdown:hover .nav-chev,
.nav-pill__menu .has-dropdown:focus-within .nav-chev{
  transform:rotate(180deg);
  opacity:1;
  color:var(--blue);
}
.nav-pill__menu .has-dropdown:hover > a,
.nav-pill__menu .has-dropdown:focus-within > a{
  color:var(--navy);
}

.nav-dropdown{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%) translateY(-8px);
  min-width:300px;
  padding:8px;
  background:#fff;
  border:1px solid rgba(15,42,79,0.06);
  border-radius:18px;
  box-shadow:
    0 24px 60px rgba(15,42,79,0.16),
    0 8px 16px rgba(15,42,79,0.06),
    0 0 0 1px rgba(15,42,79,0.02);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 220ms ease,transform 220ms cubic-bezier(.22,.9,.32,1.2),visibility 220ms;
  z-index:60;
}
/* Little arrow tip pointing up at the trigger */
.nav-dropdown::after{
  content:'';
  position:absolute;
  top:-6px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;
  background:#fff;
  border-left:1px solid rgba(15,42,79,0.06);
  border-top:1px solid rgba(15,42,79,0.06);
  border-top-left-radius:3px;
}
/* Invisible hover bridge so cursor can travel from li to panel without dropping */
.nav-dropdown::before{
  content:'';
  position:absolute;
  top:-18px;left:-12px;right:-12px;height:20px;
}
.nav-pill__menu .has-dropdown:hover .nav-dropdown,
.nav-pill__menu .has-dropdown:focus-within .nav-dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-dropdown__item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 14px;
  border-radius:11px;
  text-decoration:none;
  transition:background 160ms ease,transform 160ms ease;
  min-height:auto;
  position:relative;
}
.nav-dropdown__item:hover{
  background:linear-gradient(180deg,rgba(36,107,179,0.07),rgba(36,107,179,0.04));
}
.nav-dropdown__item:active{transform:scale(0.98)}
.nav-dropdown__item .nav-dropdown__title{
  font-family:var(--display);
  font-size:14px;
  font-weight:600;
  color:var(--navy);
  line-height:1.25;
  letter-spacing:-0.005em;
}
.nav-dropdown__item .nav-dropdown__sub{
  font-size:11.5px;
  color:var(--ink-2);
  line-height:1.35;
  opacity:0.78;
  font-weight:400;
}
.nav-dropdown__item:hover .nav-dropdown__title{color:var(--blue)}
.nav-dropdown__sep{
  height:1px;
  background:rgba(15,42,79,0.08);
  margin:4px 10px;
}
/* Hide dropdown panel on tablet/mobile — drawer handles those routes */
@media(max-width:1023px){
  .nav-dropdown{display:none !important}
  .nav-chev{display:none !important}
}

/* Hero center content */
.hero__content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;
  padding:48px 24px 36px;
}
.hero__eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--blue-light);
  margin-bottom:22px;
  display:inline-flex;align-items:center;gap:12px;
}
.hero__eyebrow::before,.hero__eyebrow::after{
  content:'';width:30px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,177,224,0.6),transparent);
}
.hero h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(48px,6.5vw,88px);
  line-height:0.98;letter-spacing:-0.035em;
  margin:0 0 22px;
  max-width:14ch;
  color:#fff;
}
.hero h1 .soft{
  color:rgba(255,255,255,0.55);
  font-weight:500;
}
.hero__lede{
  font-size:clamp(15px,1.15vw,17px);
  color:rgba(255,255,255,0.78);
  max-width:54ch;
  margin:0 auto 28px;
  line-height:1.6;
}
.hero__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero__sublink{
  margin:18px 0 0;text-align:center;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
}
.hero__sublink a{
  color:rgba(255,255,255,0.6);
  border-bottom:1px solid rgba(255,255,255,0.2);
  padding-bottom:2px;
  transition:color 200ms,border-color 200ms;
}
.hero__sublink a:hover{color:#fff;border-color:#fff}

/* Hero bottom trust row */
.hero__trust{
  display:flex;justify-content:center;align-items:center;
  gap:48px;
  padding:28px 24px 40px;
  flex-wrap:wrap;
}
.trust-item{
  display:flex;align-items:center;gap:14px;
  color:rgba(255,255,255,0.85);
}
.trust-item__icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 8px 24px rgba(30,91,168,0.40);
}
.trust-item__icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.trust-item__text strong{
  display:block;
  font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:-0.01em;
  color:#fff;line-height:1.2;margin-bottom:2px;
}
.trust-item__text span{
  display:block;
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}

@media(max-width:880px){
  .hero{min-height:auto;padding:18px 0 0}
  .hero__content{padding:60px 24px 40px}
  .hero__trust{gap:30px;padding:30px 24px 50px}
  .trust-item{gap:10px}
  .trust-item__icon{width:42px;height:42px}
  .trust-item__icon svg{width:18px;height:18px}
}
@media(max-width:520px){
  .hero h1{font-size:48px;letter-spacing:-0.035em}
  .nav-pill{padding:6px 6px 6px 16px;gap:8px}
  .nav-pill__brand img{height:24px}
  .hero__trust{flex-direction:column;align-items:flex-start;gap:18px;max-width:380px;margin:0 auto}
}

/* ---------- DRAWER ---------- */
.drawer{
  position:fixed;inset:0;background:rgba(6,16,41,0.97);
  z-index:200;
  display:flex;flex-direction:column;
  padding:30px;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 400ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 400ms;
  backdrop-filter:blur(8px);
}
.drawer.is-open{visibility:visible;transition:transform 400ms cubic-bezier(.2,.8,.2,1),visibility 0s}
.drawer.is-open{transform:translateY(0)}
/* second is-open rule above sets visibility */
.drawer__top{display:flex;justify-content:space-between;align-items:center;color:#fff}
.drawer__close{
  background:transparent;border:1px solid rgba(255,255,255,0.2);
  color:#fff;width:42px;height:42px;border-radius:50%;font-size:20px;
}
.drawer__menu{
  list-style:none;margin:60px 0 0;padding:0;
  display:flex;flex-direction:column;gap:6px;
}
.drawer__menu a{
  display:block;
  font-family:var(--display);font-weight:600;
  font-size:36px;letter-spacing:-0.03em;
  color:#fff;padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.drawer__cta{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.drawer__cta .btn{width:100%}

/* =================================================================
   STAT BAND — directly under hero, sits on cream
   ================================================================= */
.statband{
  padding:60px 0;border-bottom:1px solid var(--line);
}
.statband__row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
}
.statband__item{
  text-align:center;padding:14px 18px;
  border-left:1px solid var(--line);
}
.statband__item:first-child{border-left:none}
.statband__item.is-highlight{background:rgba(30,91,168,0.04)}
.statband__item.is-highlight .v{color:var(--blue)}
.statband__item .v{
  font-family:var(--display);font-weight:600;
  font-size:clamp(36px,4.5vw,60px);
  letter-spacing:-0.045em;line-height:1;
  color:var(--navy);margin:0 0 8px;
}
.statband__item .v .u{
  font-family:var(--display);font-size:0.42em;
  color:var(--ink-faint);font-weight:500;
  margin-left:3px;letter-spacing:0;
}
.statband__item .l{
  font-family:var(--mono);
  font-size:10px;text-transform:uppercase;letter-spacing:0.16em;
  color:var(--ink-faint);margin:0;
}
@media(max-width:780px){
  .statband__row{grid-template-columns:repeat(2,1fr)}
  .statband__item{border-left:none;border-top:1px solid var(--line);padding:24px 14px}
  .statband__item:first-child,.statband__item:nth-child(2){border-top:none}
  .statband__item:nth-child(odd){border-right:1px solid var(--line)}
}
@media(max-width:420px){
  .statband__row{grid-template-columns:1fr}
  .statband__item{border-right:none !important}
}

/* =================================================================
   STORY (intro)
   ================================================================= */
.story{padding:120px 0;border-bottom:1px solid var(--line)}
.story__inner{
  display:grid;grid-template-columns:1fr 1.3fr;gap:80px;align-items:start;
}
.story__head{position:sticky;top:120px}
.story__head .eyebrow{margin-bottom:18px}
.story__head h2{margin:0}
.story__copy p{font-size:18px;line-height:1.7;color:var(--ink-2);margin:0 0 22px;max-width:60ch}
.story__copy p:first-child{font-size:21px;color:var(--ink)}
.story__copy .stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  margin-top:36px;padding-top:36px;border-top:1px solid var(--line);
}
.story__copy .stat-row .v{
  font-family:var(--display);font-weight:600;
  font-size:32px;letter-spacing:-0.025em;color:var(--blue);
  display:block;margin:0 0 4px;
}
.story__copy .stat-row .l{
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-faint);
}
@media(max-width:980px){
  .story{padding:80px 0}
  .story__inner{grid-template-columns:1fr;gap:30px}
  .story__head{position:relative;top:auto}
  .story__copy .stat-row{grid-template-columns:1fr;gap:16px}
}

/* =================================================================
   PRODUCT GRID — clean cards, photo-card vibes
   ================================================================= */
.products{padding:120px 0;background:var(--paper-2);border-bottom:1px solid var(--line)}
.products__head{margin-bottom:60px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.products__head h2{margin:0}
.products__head .lede{margin:0;flex:1;min-width:280px;max-width:50ch}

.products__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
.product-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;
  transition:transform 250ms,box-shadow 250ms,border-color 250ms;
}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--blue-soft)}
.product-card.is-popular{
  background:var(--navy);color:#fff;border-color:var(--navy);
  position:relative;overflow:hidden;
}
.product-card.is-popular::before{
  content:'';position:absolute;inset:-30%;
  background:radial-gradient(circle at 30% 30%,rgba(111,177,224,0.20) 0%,transparent 50%);
  pointer-events:none;
}
.product-card.is-popular > *{position:relative;z-index:1}
.product-card .badge{
  position:absolute;top:18px;right:18px;
  font-family:var(--mono);
  font-size:9px;letter-spacing:0.18em;text-transform:uppercase;
  background:var(--blue);color:#fff;
  padding:5px 10px;border-radius:999px;font-weight:600;
}
.product-card .pname{
  font-family:var(--display);font-weight:600;
  font-size:24px;letter-spacing:-0.02em;
  margin:0 0 4px;color:var(--navy);
}
.product-card.is-popular .pname{color:#fff}
.product-card .who{
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:0.16em;
  color:var(--ink-faint);margin:0 0 24px;
}
.product-card.is-popular .who{color:rgba(255,255,255,0.6)}
.product-card .pic{
  height:260px;display:flex;align-items:center;justify-content:center;
  position:relative;margin-bottom:24px;
  border-radius:var(--r);
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-soft));
}
.product-card.is-popular .pic{background:rgba(255,255,255,0.08)}
.product-card .pic::before{
  content:'';position:absolute;inset:20%;border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,168,0.18) 0%,transparent 70%);
  filter:blur(14px);
}
.product-card .pic img{position:relative;z-index:1;width:auto;height:88%;max-height:220px;max-width:84%;object-fit:contain;filter:drop-shadow(0 14px 28px rgba(10,37,64,0.24))}
/* ────────────────────────────────────────────────────────────
   DUAL-IMAGE pattern — main black unit + small silver corner inset.
   Sites: product-card .pic, sidedock__pic, undercounter__photo.
   Mirrors the LC-11 commercial card on prime_rent.html.
   ──────────────────────────────────────────────────────────── */
.product-card .pic .pic__main{
  /* Main image — same sizing as the original single img */
  position:relative;z-index:1;
  width:auto;height:88%;max-height:220px;max-width:78%;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(10,37,64,0.24));
  /* Offset to the left so the corner inset never overlaps */
  margin-left:-12%;
}
.product-card .pic .pic__inset{
  position:absolute;
  right:14px;bottom:14px;
  width:34%;aspect-ratio:1/1;
  background:#fff;
  border:1px solid rgba(10,21,48,0.10);
  border-radius:10px;
  box-shadow:0 6px 14px rgba(10,21,48,0.14);
  display:flex;align-items:center;justify-content:center;
  padding:8px;
  z-index:2;
  overflow:hidden;
}
.product-card .pic .pic__inset img{
  /* Override the parent rules — inset image is its own size */
  width:100%;height:100%;max-height:none;max-width:none;
  margin-left:0;
  filter:drop-shadow(0 3px 6px rgba(10,37,64,0.20));
}
/* On the .is-popular (navy) variant — inset stays clean white */
.product-card.is-popular .pic .pic__inset{
  background:#fff;
  border-color:rgba(255,255,255,0.30);
}

/* ────────────────────────────────────────────────────────────
   HOME PRODUCT CARD — interactive 3-colour picker
   Replaces the single .pic__inset with .pic__swatches (a stack of
   2 clickable thumbnails). Clicking a swatch swaps its image with
   the main — so all 3 colours (black / silver / white) are reachable
   while keeping only 1 main + 2 alts visible at any time.
   Scoped to .product-card .pic so other surfaces stay unchanged.
   ──────────────────────────────────────────────────────────── */
.product-card .pic .pic__swatches{
  position:absolute;
  right:12px;bottom:12px;
  display:flex;flex-direction:column;
  gap:8px;
  z-index:2;
}
.product-card .pic .pic__swatch{
  width:62px;height:62px;
  padding:7px;
  background:#fff;
  border:1.5px solid rgba(10,21,48,0.10);
  border-radius:9px;
  box-shadow:0 4px 10px rgba(10,21,48,0.14);
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-card .pic .pic__swatch:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 18px rgba(10,21,48,0.20);
  border-color:var(--blue);
}
.product-card .pic .pic__swatch:active{transform:translateY(0) scale(0.98)}
.product-card .pic .pic__swatch:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}
.product-card .pic .pic__swatch img{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(10,37,64,0.18));
  display:block;
  /* Override the main img rules that .product-card .pic img inherits */
  max-width:none;max-height:none;
  margin:0;
}
/* Main image swap transition — soft fade so it doesn't feel jarring */
.product-card .pic .pic__main{
  transition:opacity 200ms ease;
}
.product-card .pic .pic__main.is-swapping{opacity:0}

/* On the .is-popular (navy) variant — swatches keep clean white */
.product-card.is-popular .pic .pic__swatch{
  background:#fff;
  border-color:rgba(255,255,255,0.30);
}
.product-card.is-popular .pic .pic__swatch:hover{
  border-color:#fff;
}

@media(max-width:520px){
  .product-card .pic .pic__swatches{right:10px;bottom:10px;gap:6px}
  .product-card .pic .pic__swatch{width:54px;height:54px;padding:5px}
}

/* Sidedock dual-image */
.sidedock__pic .pic__main{
  position:relative;z-index:1;
  width:auto;height:92%;max-height:180px;max-width:78%;
  object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(10,37,64,0.24));
  margin-left:-10%;
}
.sidedock__pic .pic__inset{
  position:absolute;
  right:10px;bottom:10px;
  width:36%;aspect-ratio:1/1;
  background:#fff;
  border:1px solid rgba(10,21,48,0.10);
  border-radius:8px;
  box-shadow:0 4px 10px rgba(10,21,48,0.14);
  display:flex;align-items:center;justify-content:center;
  padding:6px;
  z-index:2;
  overflow:hidden;
}
.sidedock__pic .pic__inset img{
  width:100%;height:100%;max-height:none;max-width:none;
  margin-left:0;
  filter:drop-shadow(0 2px 5px rgba(10,37,64,0.20));
}

/* Undercounter hero card dual-image (l-r-series + lv-rv-series heroes) */
.undercounter__photo .pic__main{
  display:block;width:auto;
  max-width:75%;max-height:100%;
  object-fit:contain;
  margin-left:-10%;
  filter:drop-shadow(0 8px 18px rgba(10,22,38,0.15));
}
.undercounter__photo .pic__inset{
  position:absolute;
  right:10px;bottom:10px;
  width:34%;aspect-ratio:1/1;
  background:#fff;
  border:1px solid rgba(10,21,48,0.10);
  border-radius:10px;
  box-shadow:0 4px 12px rgba(10,21,48,0.14);
  display:flex;align-items:center;justify-content:center;
  padding:8px;
  z-index:2;
  overflow:hidden;
}
.undercounter__photo .pic__inset img{
  width:100%;height:100%;max-height:none;max-width:none;
  margin-left:0;
  filter:none;
}

@media(max-width:520px){
  .product-card .pic .pic__main{max-width:74%;margin-left:-10%}
  .product-card .pic .pic__inset{width:32%;right:10px;bottom:10px}
  .sidedock__pic .pic__main{max-width:74%}
  .sidedock__pic .pic__inset{width:34%}
}
.product-card .price{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.product-card .price .strike{font-size:13px;color:var(--ink-faint);text-decoration:line-through}
.product-card.is-popular .price .strike{color:rgba(255,255,255,0.55)}
.product-card .price .promo{
  font-family:var(--display);font-weight:600;font-size:26px;
  letter-spacing:-0.025em;color:var(--navy);
}
.product-card.is-popular .price .promo{color:#fff}
.product-card .save{
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:0.14em;color:var(--blue);
  margin-bottom:18px;
}
.product-card.is-popular .save{color:var(--blue-light)}
.product-card .btn{width:100%;margin-top:auto}

@media(max-width:880px){
  .products{padding:80px 0}
  .products__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){.products__grid{grid-template-columns:1fr}}

/* =================================================================
   FEATURE STRIP — life-ionizers style: 4 features w/ icons
   ================================================================= */
.features{padding:120px 0;border-bottom:1px solid var(--line)}
.features__head{text-align:center;margin-bottom:60px;max-width:740px;margin-left:auto;margin-right:auto}
.features__head h2{margin:0}
.features__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.feature-card{
  text-align:left;padding:0;
}
.feature-card__icon{
  width:54px;height:54px;border-radius:14px;
  background:var(--blue-pale);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  transition:transform 250ms,background 250ms;
}
.feature-card:hover .feature-card__icon{transform:translateY(-2px) rotate(-3deg);background:var(--blue-soft)}
.feature-card__icon svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.8}
.feature-card h3{
  font-family:var(--display);font-weight:600;
  font-size:20px;letter-spacing:-0.02em;line-height:1.2;
  color:var(--navy);margin:0 0 12px;
}
.feature-card p{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0}

/* ── Casing colour cards (products.html) ─────────────────────── */
.colour-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  max-width:1080px;
  margin:48px auto 0;
}
.colour-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(10,22,38,0.05);
  transition:transform 280ms ease, box-shadow 280ms ease;
  display:flex;
  flex-direction:column;
}
.colour-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(10,22,38,0.12);
}
.colour-card__swatch{
  height:100px;
  width:100%;
  position:relative;
}
.colour-card--black .colour-card__swatch{
  background:linear-gradient(135deg,#1a1a1a 0%,#0a0a0a 60%,#000 100%);
}
.colour-card--white .colour-card__swatch{
  background:linear-gradient(135deg,#ffffff 0%,#f3f5f8 100%);
  border-bottom:1px solid var(--line);
}
.colour-card--silver .colour-card__swatch{
  background:linear-gradient(135deg,#e6e6e6 0%,#b5b5b5 50%,#9c9c9c 100%);
}
.colour-card__title{
  font-family:var(--display);
  font-size:18px;
  font-weight:500;
  color:var(--navy);
  margin:0;
  padding:22px 24px 8px;
  letter-spacing:-0.005em;
  line-height:1.3;
}
.colour-card__title strong{
  font-weight:700;
}
.colour-card__list{
  margin:0;
  padding:8px 24px 24px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}
.colour-card__row{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-top:12px;
  border-top:1px solid var(--line-soft, #eef1f5);
}
.colour-card__row:first-child{
  border-top:none;
  padding-top:0;
}
.colour-card__row dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
}
.colour-card__row dd{
  font-family:var(--body);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  margin:0;
}

@media(max-width:880px){
  .colour-grid{grid-template-columns:1fr;max-width:560px;gap:20px}
  .colour-card__swatch{height:80px}
}

@media(max-width:880px){
  .features{padding:80px 0}
  .features__grid{grid-template-columns:repeat(2,1fr);gap:30px}
}
@media(max-width:520px){.features__grid{grid-template-columns:1fr}}

/* =================================================================
   COMPARE TABLE
   ================================================================= */
.compare{padding:120px 0;background:var(--paper-2);border-bottom:1px solid var(--line)}
.compare__head{text-align:center;margin-bottom:50px;max-width:680px;margin-left:auto;margin-right:auto}
.compare__head h2{margin:0 0 16px}

.compare__table{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
}
.compare__row{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;
  align-items:center;border-top:1px solid var(--line);
}
.compare__row:first-child{border-top:none;background:var(--navy);color:#fff}
.compare__row > *{padding:22px 24px}
.compare__cell{font-size:14px;color:var(--ink-2)}
.compare__cell--label{
  font-family:var(--display);font-weight:600;
  font-size:15px;color:var(--navy);
}
.compare__cell--head{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);text-align:center;
}
.compare__cell--head.is-us{color:var(--blue-light);font-weight:600}
.compare__cell--value{text-align:center;font-size:14px}
.compare__cell--value.yes{color:var(--blue);font-weight:500}
.compare__cell--value.no{color:var(--ink-faint)}
.compare__cell--us{background:rgba(30,91,168,0.05)}
@media(max-width:780px){
  .compare{padding:80px 0}
  .compare__row{grid-template-columns:1fr 1fr}
  .compare__row:first-child{display:none}
  .compare__row > *{padding:8px}
  .compare__cell--label{grid-column:span 2;font-size:17px;border-bottom:1px solid var(--line);padding:0 0 14px;margin-bottom:6px}
}

/* =================================================================
   PITCH BAND
   ================================================================= */
.pitch{
  padding:140px 0;
  background:linear-gradient(180deg,var(--navy) 0%,var(--night) 100%);
  color:#fff;position:relative;overflow:hidden;
  text-align:center;
}
.pitch::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:1400px;height:1400px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,168,0.20) 0%,transparent 60%);
}
.pitch > *{position:relative;z-index:1}
.pitch h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(60px,12vw,200px);
  line-height:0.92;letter-spacing:-0.05em;
  color:#fff;margin:0 auto 28px;max-width:14ch;
}
.pitch h2 .accent{
  background:linear-gradient(180deg,var(--blue-light) 0%,var(--blue) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pitch .lede{color:rgba(255,255,255,0.70);max-width:60ch;margin:0 auto 60px}
.pitch__row{display:grid;grid-template-columns:repeat(4,auto);gap:60px;justify-content:center}
.pitch__row-item .v{
  font-family:var(--display);font-weight:600;
  font-size:clamp(32px,4vw,52px);letter-spacing:-0.03em;
  color:#fff;margin:0 0 8px;line-height:1;
}
.pitch__row-item .l{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);margin:0;
}
@media(max-width:780px){
  .pitch{padding:90px 0}
  .pitch__row{grid-template-columns:repeat(2,1fr);gap:30px}
}

/* =================================================================
   VOICES (testimonial cards)
   ================================================================= */
.voices{padding:120px 0;border-bottom:1px solid var(--line)}
.voices__head{text-align:center;margin-bottom:60px;max-width:680px;margin-left:auto;margin-right:auto}
.voices__head h2{margin:0}
.voices__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.voice{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:32px;display:flex;flex-direction:column;
  transition:transform 200ms,box-shadow 200ms,border-color 200ms;
}
.voice:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--blue-soft)}
.voice .stars{color:var(--blue);font-size:14px;letter-spacing:2px;margin-bottom:14px}
.voice p{
  font-family:var(--display);font-weight:500;
  font-size:18px;line-height:1.45;letter-spacing:-0.005em;
  color:var(--navy);margin:0 0 24px;flex:1;
}
.voice .who{
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-soft);
  padding-top:18px;border-top:1px solid var(--line);
}
.voice .who strong{color:var(--navy);font-weight:600}
@media(max-width:880px){
  .voices{padding:80px 0}
  .voices__grid{grid-template-columns:1fr 1fr;gap:14px}
  .voice{padding:24px}
}
@media(max-width:520px){.voices__grid{grid-template-columns:1fr}}

/* =================================================================
   CTA
   ================================================================= */
.cta{padding:140px 0;text-align:center;background:var(--paper);position:relative;overflow:hidden}
.cta::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:1100px;height:1100px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,168,0.06) 0%,transparent 60%);
}
.cta > *{position:relative;z-index:1}
.cta .eyebrow{margin-bottom:24px}
.cta h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(48px,7vw,100px);line-height:0.95;
  letter-spacing:-0.04em;
  margin:0 auto 28px;max-width:18ch;color:var(--navy);
}
.cta .lede{margin:0 auto 40px}
.cta__btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* =================================================================
   NEWSLETTER STRIP — sits above the footer on marketing pages
   Two-column on desktop (image left, form right), stacks on mobile.
   Writes to public.newsletter_subs via app.js handler.
   ================================================================= */
.newsletter{
  background:linear-gradient(180deg, var(--paper) 0%, #e6efff 100%);
  padding:72px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.newsletter__inner{
  display:grid;
  grid-template-columns:minmax(0, 460px) 1fr;
  gap:48px;
  align-items:center;
  max-width:1080px;
  margin:0 auto;
}
.newsletter__img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:320px;
  margin:0 auto;
  object-fit:contain;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 12px 28px rgba(10,22,38,0.18));
}
/* Wrap the newsletter image in a rounded blue-gradient backdrop so
   the silver / black unit feels framed instead of floating on the
   section's flat surface. Same spotlight treatment as the product
   cards and hero. */
.newsletter__pic{
  position:relative;
  background:linear-gradient(135deg, var(--blue-pale) 0%, var(--blue-soft) 100%);
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / 1;
  max-width:380px;
  margin:0 auto;
  overflow:hidden;
}
.newsletter__pic::before{
  content:'';
  position:absolute;
  inset:16%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,91,168,0.20) 0%, transparent 70%);
  filter:blur(24px);
  pointer-events:none;
  z-index:0;
}
.newsletter__body{min-width:0}
.newsletter__eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0 0 12px;
}
.newsletter__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(22px, 2.4vw, 30px);
  letter-spacing:-0.025em;
  line-height:1.15;
  color:var(--navy);
  margin:0 0 14px;
}
.newsletter__lede{
  font-family:var(--body);
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-2);
  margin:0 0 22px;
  max-width:46ch;
}
.newsletter__form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:stretch;
  max-width:520px;
}
.newsletter__input{
  flex:1 1 240px;
  min-width:0;
  font-family:var(--body);
  font-size:14.5px;
  color:var(--navy);
  background:#fff;
  border:1.5px solid var(--line-2);
  border-radius:999px;
  padding:13px 18px;
  outline:none;
  transition:border-color 160ms, box-shadow 160ms;
}
.newsletter__input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(94,184,255,0.22);
}
.newsletter__btn{
  flex:0 0 auto;
  font-family:var(--display);
  font-weight:600;
  font-size:14.5px;
  background:var(--navy);
  color:#fff;
  border:1.5px solid var(--navy);
  border-radius:999px;
  padding:13px 22px;
  cursor:pointer;
  transition:transform 140ms, box-shadow 140ms, background 140ms;
  white-space:nowrap;
}
.newsletter__btn:hover{
  background:var(--blue);
  border-color:var(--blue);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(36,107,179,0.25);
}
.newsletter__btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.newsletter__note{
  margin:14px 0 0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-faint);
}
.newsletter__status{
  margin:14px 0 0;
  font-family:var(--body);
  font-size:13.5px;
  line-height:1.5;
  padding:10px 14px;
  border-radius:8px;
  display:none;
}
.newsletter__status.is-ok{
  display:block;
  background:rgba(22,163,74,0.10);
  border:1px solid rgba(22,163,74,0.30);
  color:#14532d;
}
.newsletter__status.is-err{
  display:block;
  background:rgba(220,38,38,0.08);
  border:1px solid rgba(220,38,38,0.25);
  color:#7f1d1d;
}
.newsletter__status.is-warn{
  display:block;
  background:rgba(245,158,11,0.10);
  border:1px solid rgba(245,158,11,0.30);
  color:#78350f;
}

@media (max-width: 860px){
  .newsletter{padding:48px 0}
  .newsletter__inner{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }
  .newsletter__img{max-width:420px;margin:0 auto}
  .newsletter__form{margin:0 auto}
  .newsletter__lede{margin-left:auto;margin-right:auto}
}


/* =================================================================
   NEWSLETTER POPUP — homepage only (HTML only present in index.html)
   Hidden by default, shown by JS after a delay with localStorage
   memory so it doesn't re-pester users who already saw it.
   ================================================================= */
.popup-news{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(10,21,48,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  transition:opacity 280ms ease;
  cursor:default; /* backdrop is not clickable — only the X closes */
}
.popup-news.is-open{
  display:flex;
  opacity:1;
}
.popup-news__card{
  background:#fff;
  border-radius:16px;
  width:100%;
  max-width:680px;
  box-shadow:0 24px 60px rgba(10,22,38,0.30);
  display:grid;
  grid-template-columns:230px 1fr;
  overflow:hidden;
  position:relative;
  transform:translateY(12px) scale(0.98);
  transition:transform 280ms ease;
}
.popup-news.is-open .popup-news__card{
  transform:translateY(0) scale(1);
}
.popup-news__img{
  background:linear-gradient(180deg, var(--paper) 0%, #dce8fb 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.popup-news__img img{
  display:block;
  width:auto;
  height:auto;
  max-width:190px;
  max-height:220px;
  margin:0 auto;
  object-fit:contain;
  /* Product cut-out PNG — no border / shadow so it sits cleanly on
     the gradient backdrop rather than looking like a framed photo. */
}
.popup-news__body{
  padding:30px 30px 26px;
  min-width:0;
}
.popup-news__close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:rgba(10,21,48,0.06);
  color:var(--navy);
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 160ms, transform 160ms;
}
.popup-news__close:hover{
  background:rgba(10,21,48,0.14);
  transform:rotate(90deg);
}
.popup-news__eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0 0 10px;
}
.popup-news__title{
  font-family:var(--display);
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.02em;
  line-height:1.18;
  color:var(--navy);
  margin:0 0 10px;
}
.popup-news__lede{
  font-family:var(--body);
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 16px;
}
.popup-news__form{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.popup-news__input{
  font-family:var(--body);
  font-size:14px;
  color:var(--navy);
  background:#f4f7fc;
  border:1.5px solid transparent;
  border-radius:999px;
  padding:11px 16px;
  outline:none;
  transition:border-color 160ms, box-shadow 160ms, background 160ms;
}
.popup-news__input:focus{
  background:#fff;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(94,184,255,0.22);
}
.popup-news__btn{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  background:var(--navy);
  color:#fff;
  border:1.5px solid var(--navy);
  border-radius:999px;
  padding:11px 22px;
  margin-top:4px;
  cursor:pointer;
  transition:background 140ms, transform 140ms, box-shadow 140ms;
  align-self:flex-start;
}
.popup-news__btn:hover{
  background:var(--blue);
  border-color:var(--blue);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(36,107,179,0.25);
}
.popup-news__btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.popup-news__note{
  margin:10px 0 0;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.04em;
  color:var(--ink-faint);
}
.popup-news__status{
  margin:10px 0 0;
  font-family:var(--body);
  font-size:13px;
  line-height:1.5;
  padding:9px 12px;
  border-radius:8px;
  display:none;
}
.popup-news__status.is-ok{
  display:block;
  background:rgba(22,163,74,0.10);
  border:1px solid rgba(22,163,74,0.30);
  color:#14532d;
}
.popup-news__status.is-err{
  display:block;
  background:rgba(220,38,38,0.08);
  border:1px solid rgba(220,38,38,0.25);
  color:#7f1d1d;
}

@media (max-width: 560px){
  .popup-news__card{
    grid-template-columns:1fr;
    max-width:420px;
  }
  .popup-news__img{
    padding:18px 18px 0;
  }
  .popup-news__img img{
    max-width:160px;
  }
  .popup-news__body{
    padding:18px 22px 22px;
  }
  .popup-news__title{font-size:19px}
}


/* =================================================================
   FOOTER
   ================================================================= */
.footer{
  background:var(--night);color:rgba(255,255,255,0.7);
  padding:80px 0 40px;position:relative;overflow:hidden;
}
.footer::before{
  content:'';position:absolute;
  top:-100px;right:-100px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,168,0.10) 0%,transparent 60%);
  pointer-events:none;
}
.footer > *{position:relative;z-index:1}
.footer__top{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:60px;
  padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,0.10);
}
.footer__brand img{height:36px;margin-bottom:20px}
.footer__brand p{font-size:13px;color:rgba(255,255,255,0.55);max-width:34ch;line-height:1.6}
.footer__col h4{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.4);
  margin:0 0 18px;font-weight:500;
}
.footer__col ul{list-style:none;margin:0;padding:0}
.footer__col li{margin-bottom:10px}
.footer__col a{font-size:14px;color:rgba(255,255,255,0.7);transition:color 200ms}
.footer__col a:hover{color:var(--blue-light)}
.footer__bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:30px;font-family:var(--mono);
  font-size:11px;color:rgba(255,255,255,0.4);
  letter-spacing:0.06em;flex-wrap:wrap;gap:14px;
}
@media(max-width:780px){.footer__top{grid-template-columns:1fr 1fr;gap:40px}}
@media(max-width:480px){.footer__top{grid-template-columns:1fr}}

/* =================================================================
   STICKY MOBILE BAR
   ================================================================= */
.mobar{
  position:fixed !important;
  bottom:0 !important;
  top:auto !important;
  left:0;right:0;
  background:#fff;
  border-top:1px solid var(--line);
  padding:12px 14px env(safe-area-inset-bottom);
  display:none;z-index:40;
  box-shadow:0 -8px 30px rgba(10,22,38,0.10);
}
.mobar__inner{
  display:flex;gap:10px;
  max-width:600px;margin:0 auto;
  align-items:center;
}
.mobar .btn{
  padding:12px 16px;font-size:13px;
  height:44px;
}
.mobar .btn--whatsapp-outline{
  width:44px;flex:0 0 44px;
  padding:0;
  display:flex;align-items:center;justify-content:center;
}
.mobar .btn--whatsapp-outline svg{width:20px;height:20px}
.mobar .btn--whatsapp-outline span{display:none}
.mobar .btn--blue{flex:1}
@media(max-width:880px){
  .mobar{display:block}
  body{padding-bottom:0}
}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 700ms,transform 700ms}
.reveal.is-in{opacity:1;transform:translateY(0)}


/* =================================================================
   INNER PAGE HEADERS + UTILITIES
   ================================================================= */
.pagehero{
  background:
    radial-gradient(ellipse at top right,rgba(111,177,224,0.16) 0%,transparent 50%),
    radial-gradient(ellipse at bottom left,rgba(30,91,168,0.20) 0%,transparent 55%),
    linear-gradient(180deg,var(--night) 0%,var(--navy) 100%);
  color:#fff;
  padding:60px 0 80px;
  position:relative;overflow:hidden;
}
.pagehero::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
}
.pagehero > *{position:relative;z-index:1}
.pagehero__nav{margin-bottom:80px}
.pagehero__inner{
  max-width:900px;margin:0 auto;padding:0 var(--gutter);
  text-align:center;
}
.pagehero__crumb{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--blue-light);margin-bottom:24px;
  display:inline-flex;align-items:center;gap:10px;
}
.pagehero__crumb a{color:var(--blue-light);opacity:0.7;transition:opacity 200ms}
.pagehero__crumb a:hover{opacity:1}
.pagehero__crumb .sep{opacity:0.4}
.pagehero h1{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(44px,7vw,96px);
  line-height:0.95;letter-spacing:-0.04em;
  color:#fff;margin:0 auto 24px;max-width:18ch;
}
.pagehero h1 .soft{color:rgba(255,255,255,0.55);font-weight:500}
.pagehero__lede{
  font-size:clamp(16px,1.3vw,19px);
  color:rgba(255,255,255,0.7);
  max-width:60ch;margin:0 auto;line-height:1.65;
}
@media(max-width:680px){
  .pagehero{padding:30px 0 60px}
  .pagehero__nav{margin-bottom:50px}
}

/* Generic content sections */
.section{padding:100px 0;border-bottom:1px solid var(--line)}
.section--soft{background:var(--paper-2)}
.section--dark{background:var(--navy);color:#fff}
.section__head{max-width:740px;margin:0 0 50px}
.section__head--center{margin-left:auto;margin-right:auto;text-align:center}
.section__head h2{margin:0 0 16px}
.section__head .lede{margin:0;color:var(--ink-2)}
.section--dark .section__head h2{color:#fff}
.section--dark .section__head .lede{color:rgba(255,255,255,0.7)}
@media(max-width:680px){.section{padding:70px 0}}

/* Two-column splits */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--40-60{grid-template-columns:0.7fr 1fr}
.split--60-40{grid-template-columns:1fr 0.7fr}
@media(max-width:880px){.split,.split--40-60,.split--60-40{grid-template-columns:1fr;gap:40px}}

/* Prose */
.prose p{font-size:17px;line-height:1.7;color:var(--ink-2);margin:0 0 22px;max-width:65ch}
.prose p:first-child{font-size:20px;color:var(--ink)}
.prose h3{
  font-family:var(--display);font-weight:600;
  font-size:24px;letter-spacing:-0.02em;
  color:var(--navy);margin:32px 0 14px;
}
.prose ul{padding:0;margin:0 0 22px;list-style:none}
.prose ul li{
  position:relative;padding:0 0 0 28px;margin-bottom:12px;
  font-size:16px;color:var(--ink-2);line-height:1.6;
}
.prose ul li::before{
  content:'';position:absolute;left:0;top:9px;
  width:14px;height:1.5px;background:var(--blue);
}

/* Spec card visual */
.specvis{
  aspect-ratio:1;
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-soft));
  border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.specvis::before{
  content:'';position:absolute;inset:-30%;
  background:radial-gradient(circle at 30% 40%,rgba(30,91,168,0.20) 0%,transparent 60%);
  filter:blur(20px);
}
.specvis img{position:relative;z-index:1;width:55%;max-width:280px;filter:drop-shadow(0 20px 50px rgba(10,37,64,0.25))}
.specvis .stamp{
  position:absolute;bottom:18px;left:18px;
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:0.16em;
  color:var(--navy);background:rgba(255,255,255,0.9);
  padding:6px 12px;border-radius:999px;
}

/* Numbered tech steps */
.techstep{
  display:grid;grid-template-columns:auto 1fr;gap:24px;
  padding:32px 0;border-bottom:1px solid var(--line);
}
.techstep:last-child{border-bottom:none}
.techstep__num{
  font-family:var(--display);font-weight:600;
  font-size:60px;letter-spacing:-0.04em;line-height:0.85;
  color:var(--blue);min-width:80px;
}
.techstep h3{
  font-family:var(--display);font-weight:600;
  font-size:26px;letter-spacing:-0.025em;
  color:var(--navy);margin:0 0 12px;
}
.techstep p{font-size:16px;color:var(--ink-2);line-height:1.65;margin:0 0 14px}
.techstep__specs{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.techstep__spec{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.12em;text-transform:uppercase;
  background:var(--blue-pale);color:var(--blue);
  padding:6px 12px;border-radius:999px;font-weight:600;
}
@media(max-width:680px){
  .techstep{grid-template-columns:1fr;gap:14px}
  .techstep__num{font-size:42px}
}

/* Spec table */
.spectable{
  width:100%;border-collapse:collapse;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.spectable th,.spectable td{
  padding:18px 24px;text-align:left;border-top:1px solid var(--line);
  font-size:14px;
}
.spectable tr:first-child th,.spectable tr:first-child td{border-top:none}
.spectable th{
  font-family:var(--mono);font-weight:500;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-faint);width:40%;
}
.spectable td{color:var(--navy);font-weight:500}
@media(max-width:680px){.spectable th,.spectable td{padding:12px 16px;font-size:13px}}

/* Blog */
.postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0;overflow:hidden;
  transition:transform 200ms,box-shadow 200ms;
  display:flex;flex-direction:column;
}
.post:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.post__pic{
  aspect-ratio:1.6;
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-soft));
  position:relative;overflow:hidden;
}
.post__pic::before{
  content:'';position:absolute;inset:-30%;
  background:radial-gradient(circle at 40% 40%,rgba(30,91,168,0.20),transparent 60%);
  filter:blur(20px);
}
.post__cat{
  position:absolute;top:18px;left:18px;z-index:1;
  font-family:var(--mono);font-size:10px;
  text-transform:uppercase;letter-spacing:0.16em;
  background:rgba(255,255,255,0.9);color:var(--blue);
  padding:5px 10px;border-radius:999px;font-weight:600;
}
.post__body{padding:24px;display:flex;flex-direction:column;flex:1}
.post__date{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 12px;
}
.post h3{
  font-family:var(--display);font-weight:600;
  font-size:20px;letter-spacing:-0.02em;line-height:1.25;
  color:var(--navy);margin:0 0 14px;
}
.post p{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 18px;flex:1}
.post__more{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--blue);font-weight:600;
}
.post__more--muted{color:var(--ink-faint);text-transform:none;letter-spacing:0.02em;font-style:italic;font-size:11.5px}

/* Live article — pops with stronger hover; clickable link wraps the card */
.post--live{border-color:#5eb8ff;box-shadow:0 8px 24px rgba(36,107,179,0.10)}
.post--live:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(36,107,179,0.18)}
.post--live a{display:contents}

/* Draft cards — slightly muted, no hover lift (signals not clickable) */
.post--draft{opacity:0.72;cursor:default}
.post--draft:hover{transform:none;box-shadow:none}
.post--draft .post__pic{filter:saturate(0.7)}

@media(max-width:880px){.postgrid{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:520px){.postgrid{grid-template-columns:1fr}}

/* ── Flagship pillar card (Buyer's Guide on blog index) ──────────────
   Wide horizontal hero card. Sits above the 9-card grid as a clear
   visual hierarchy: this is the pillar editorial piece, separate from
   the standard articles below. */
.pillar-card{
  display:grid;
  grid-template-columns:minmax(280px,42%) 1fr;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:transform 240ms cubic-bezier(.3,.7,.2,1),box-shadow 240ms;
  box-shadow:0 1px 3px rgba(10,21,48,0.04);
}
.pillar-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 40px -16px rgba(10,21,48,0.22);
  text-decoration:none;
}
.pillar-card__pic{
  position:relative;
  /* Spectral Cartography image — gradient + 9-plate marks + pH levels.
     Source: assets/img/blog-pillar-buyer-guide.png (1400x800, 2x retina).
     The image already carries the navy → brand-blue gradient, so the
     gradient fallback below is only used if the image fails to load. */
  background:
    url("../assets/img/blog-pillar-buyer-guide.png") center/cover no-repeat,
    linear-gradient(135deg,#0a2540 0%,#246bb3 55%,#5eb8ff 100%);
  min-height:300px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 24px;
}
/* Pic-deco kept as a no-op now — the image carries its own atmosphere.
   We leave the element in the HTML and the rule here so removing the
   image is a one-line CSS change. */
.pillar-card__pic-deco{display:none}
.pillar-card__cat{
  position:relative;
  background:rgba(255,255,255,0.20);
  color:#fff;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:6px 14px;
  border-radius:24px;
  backdrop-filter:blur(4px);
  z-index:1;
}
.pillar-card__badge{
  position:relative;
  background:#fff;
  color:#246bb3;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.14em;
  padding:5px 12px;
  border-radius:24px;
  z-index:1;
  box-shadow:0 2px 8px rgba(0,0,0,0.10);
}
.pillar-card__body{
  padding:36px 40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pillar-card__meta{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 14px;
  font-weight:500;
}
.pillar-card__title{
  font-family:var(--display);
  font-size:clamp(20px,2.4vw,28px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.018em;
  color:var(--navy);
  margin:0 0 14px;
}
.pillar-card__lede{
  font-size:15px;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 20px;
}
.pillar-card__cta{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--blue);
  letter-spacing:-0.005em;
  align-self:flex-start;
}
.pillar-card:hover .pillar-card__cta{color:var(--navy)}

@media (max-width:760px){
  .pillar-card{grid-template-columns:1fr}
  .pillar-card__pic{min-height:180px}
  .pillar-card__body{padding:26px 24px}
}

/* Cert tile */
.certgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.certile{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px 24px;text-align:center;
  transition:transform 200ms,border-color 200ms;
}
.certile:hover{transform:translateY(-2px);border-color:var(--blue-soft)}
.certile__seal{
  width:64px;height:64px;border-radius:50%;
  background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;
  font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-0.02em;
}
.certile h3{
  font-family:var(--display);font-weight:600;font-size:16px;
  color:var(--navy);margin:0 0 6px;letter-spacing:-0.015em;
}
.certile p{font-size:12px;color:var(--ink-2);margin:0;line-height:1.5}
@media(max-width:880px){.certgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.certgrid{grid-template-columns:1fr}}

/* Doctor card */
.docgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.doc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;display:flex;gap:20px;align-items:flex-start;
}
.doc__avatar{
  width:64px;height:64px;border-radius:50%;
  background:var(--blue-pale);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--display);font-weight:600;font-size:22px;
  color:var(--blue);
}
.doc h3{
  font-family:var(--display);font-weight:600;
  font-size:18px;letter-spacing:-0.015em;
  color:var(--navy);margin:0 0 4px;
}
.doc__role{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.doc p{font-size:14px;color:var(--ink-2);line-height:1.6;margin:0}
@media(max-width:680px){.docgrid{grid-template-columns:1fr}}

/* Form */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-grid .full{grid-column:span 2}
.field{display:flex;flex-direction:column;gap:8px}
.field label{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-2);font-weight:500;
}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:15px;
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;
  color:var(--ink);
  transition:border-color 200ms,box-shadow 200ms;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(30,91,168,0.12);
}
.field textarea{min-height:140px;resize:vertical}
@media(max-width:680px){.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:span 1}}

/* Configurator */
.cfg{display:grid;grid-template-columns:1fr 0.85fr;gap:48px;align-items:start}
.cfg__form .step{padding:24px 0;border-top:1px solid var(--line)}
.cfg__form .step:first-child{border-top:none;padding-top:0}
.cfg__form .step__head{display:flex;align-items:baseline;gap:16px;margin-bottom:16px}
.cfg__form .step__num{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);font-weight:600;
}
.cfg__form .step__title{
  font-family:var(--display);font-weight:600;
  font-size:18px;letter-spacing:-0.015em;color:var(--navy);margin:0;
}
.cfg__opts{display:flex;flex-wrap:wrap;gap:8px}
.cfg__opt{
  font-family:var(--display);font-weight:500;font-size:13px;
  background:#fff;border:1.5px solid var(--line);
  padding:10px 16px;border-radius:999px;
  color:var(--ink-2);cursor:pointer;
  transition:all 200ms;
}
.cfg__opt:hover{border-color:var(--blue-light)}
.cfg__opt.is-selected{background:var(--blue);color:#fff;border-color:var(--blue)}
.cfg__opts.swatch-row{gap:14px}
.cfg__swatch{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--line);cursor:pointer;
  background:transparent;
  transition:transform 200ms,border-color 200ms;
}
.cfg__swatch:hover{transform:scale(1.05)}
.cfg__swatch.is-selected{border-color:var(--blue);transform:scale(1.1);box-shadow:0 0 0 4px rgba(30,91,168,0.15)}
.cfg__swatch--white{background:linear-gradient(135deg,#fff,#f0f0f0)}
.cfg__swatch--silver{background:linear-gradient(135deg,#d8d8d8,#a0a0a0)}
.cfg__swatch--black{background:linear-gradient(135deg,#2a2a2a,#0a0a0a)}

.cfg__summary{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;position:sticky;top:120px;
}
.cfg__summary h3{
  font-family:var(--mono);font-size:11px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 18px;font-weight:500;
}
.cfg__pic{
  aspect-ratio:1.1;
  background:linear-gradient(135deg,var(--blue-pale),var(--blue-soft));
  border-radius:var(--r);margin-bottom:24px;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.cfg__pic::before{
  content:'';position:absolute;inset:-30%;
  background:radial-gradient(circle,rgba(30,91,168,0.20),transparent 60%);
  filter:blur(20px);
}
.cfg__pic img{position:relative;z-index:1;width:55%;max-width:160px;filter:drop-shadow(0 16px 30px rgba(10,37,64,0.25))}

/* Plate-chamber floating preview — bottom-right of the product image area */
.cfg__pic__plates{
  position:absolute;
  bottom:14px;right:14px;
  z-index:3;
  width:96px;height:96px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 6px 18px rgba(10,37,64,0.14);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:transform 220ms ease, box-shadow 220ms ease;
}
.cfg__pic__plates:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,37,64,0.18)}
.cfg__pic__plates img{
  position:absolute !important;
  width:82% !important;
  max-width:none !important;
  filter:none !important;
  z-index:1;
}
.cfg__pic__plates-num{
  position:absolute;
  top:5px;left:7px;
  z-index:2;
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  letter-spacing:-0.02em;
  color:var(--navy);
  background:rgba(255,255,255,0.92);
  padding:1px 7px;
  border-radius:6px;
  line-height:1.1;
}
.cfg__pic__plates-lbl{
  position:absolute;
  bottom:4px;right:6px;
  z-index:2;
  font-family:var(--mono);
  font-weight:600;
  font-size:8.5px;
  letter-spacing:0.16em;
  color:var(--ink-faint);
  background:rgba(255,255,255,0.88);
  padding:1px 5px;
  border-radius:4px;
}
@media(max-width:720px){
  .cfg__pic__plates{width:78px;height:78px;bottom:10px;right:10px}
  .cfg__pic__plates-num{font-size:15px;padding:1px 5px}
  .cfg__pic__plates-lbl{font-size:7.5px}
}
.cfg__model{
  font-family:var(--display);font-weight:600;
  font-size:24px;letter-spacing:-0.02em;color:var(--navy);
  margin:0 0 4px;
}
.cfg__sub{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 24px;
}
.cfg__price{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.cfg__price .strike{font-size:14px;color:var(--ink-faint);text-decoration:line-through}
.cfg__price .promo{
  font-family:var(--display);font-weight:600;
  font-size:32px;letter-spacing:-0.025em;color:var(--blue);
}
@media(max-width:880px){
  .cfg{grid-template-columns:1fr;gap:40px}
  .cfg__summary{position:relative;top:auto}
}

/* Info card */
.infocard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:32px;display:flex;flex-direction:column;gap:14px;
}
.infocard__icon{
  width:48px;height:48px;border-radius:14px;
  background:var(--blue-pale);
  display:flex;align-items:center;justify-content:center;
}
.infocard__icon svg{width:22px;height:22px;stroke:var(--blue);fill:none;stroke-width:1.8}
.infocard h3{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-faint);margin:0;font-weight:500;
}
.infocard p{
  font-family:var(--display);font-weight:500;
  font-size:18px;color:var(--navy);margin:0;line-height:1.4;
}
.infocard a{color:var(--blue)}
.infocard a:hover{text-decoration:underline}

/* CTA mini-band reusable */
.cta-mini{
  background:var(--navy);color:#fff;
  padding:80px 0;text-align:center;
}
.cta-mini h2{
  font-family:var(--display);font-weight:600;
  font-size:clamp(36px,5vw,60px);letter-spacing:-0.03em;line-height:1.05;
  color:#fff;margin:0 0 18px;
}
.cta-mini p{color:rgba(255,255,255,0.7);margin:0 auto 30px;max-width:48ch}
.cta-mini__btns{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}


/* =================================================================
   MOBILE BULLETPROOFING
   Last-line-of-defense rules so nothing overflows or breaks on
   small viewports. !important used sparingly to win cascade.
   ================================================================= */

/* Universal overflow + image scaling */
html,body{max-width:100vw;overflow-x:hidden}
img,svg,video,iframe{max-width:100%;height:auto}
table{max-width:100%}
pre,code{overflow-x:auto;max-width:100%}

/* Touch-friendly minimum sizes */
.btn{min-height:44px}
.cfg__opt,.cfg__swatch,.nav-pill__menu a{min-height:38px}

/* Tablet (≤880px) — generic safeties */
@media(max-width:880px){
  /* Hero — ensure content fits, no horizontal overflow */
  .hero{min-height:auto !important;padding:40px 0 0}
  .hero__content{padding:50px 24px 30px}
  .hero h1{font-size:clamp(40px,9vw,72px) !important;line-height:0.95;letter-spacing:-0.035em}
  .hero__lede{font-size:16px;margin-bottom:30px}
  .hero__ctas{gap:10px}
  .hero__ctas .btn{flex:1 1 auto}
  .hero__sublink{margin-top:18px;font-size:10px}
  .hero__trust{flex-direction:column;align-items:flex-start;gap:18px;padding:30px 24px 40px;max-width:420px;margin:0 auto}
  .trust-item__icon{width:42px;height:42px}
  .trust-item__icon svg{width:18px;height:18px}

  /* Inner page hero */
  .pagehero h1{font-size:clamp(36px,7vw,64px) !important}
  .pagehero__lede{font-size:16px}

  /* Section paddings */
  .section{padding:70px 0}
  .h-section{font-size:clamp(30px,5vw,48px) !important}
  .lede{font-size:16px}

  /* Compare table cells need a clear label/value */
  .compare__cell--head{display:none}
  .compare__row{padding:16px;background:#fff !important;color:var(--ink) !important}
  .compare__row:nth-child(even){background:var(--paper-2) !important}
  .compare__cell--label{display:block;width:100%}

  /* Products grid */
  .products__grid{gap:14px}
  .product-card{padding:24px}

  /* Cert grid */
  .certgrid{gap:14px}
  .certile{padding:24px 18px}

  /* Spec table — scrollable */
  .spectable{display:block;overflow-x:auto}

  /* Stat band */
  .statband__item .v{font-size:32px}

  /* Footer */
  .footer{padding:60px 0 30px}
  .footer__top{gap:30px}

  /* Pitch band */
  .pitch{padding:80px 0}
  .pitch__row{gap:20px;flex-wrap:wrap}

  /* CTA mini */
  .cta-mini{padding:60px 0}
  .cta-mini h2{font-size:clamp(28px,5vw,40px)}

  /* Configurator */
  .cfg__form .step{padding:20px 0}
  .cfg__opt{font-size:12px;padding:9px 12px}
  .cfg__summary{padding:24px}
  .cfg__model{font-size:22px}
  .cfg__price .promo{font-size:28px}

  /* Story stat row */
  .story__copy .stat-row{grid-template-columns:1fr;gap:14px}

  /* Tech step */
  .techstep{padding:24px 0;gap:14px}

  /* Sticky elements that shouldn't be sticky on mobile */
  .editorial__num,.story__head,.cfg__summary{position:relative !important;top:auto !important}
}

/* Phone (≤520px) — tighter spacing */
@media(max-width:520px){
  :root{--gutter:18px}
  .wrap{padding:0 var(--gutter)}

  /* Hero CTAs — stack vertically with full width */
  .hero__ctas{flex-direction:column;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
  .hero__ctas .btn{width:100%}

  /* Hero h1 */
  .hero h1{font-size:clamp(36px,11vw,52px) !important;max-width:14ch}

  /* Pill nav — even tighter */
  .nav-pill{padding:6px 6px 6px 14px;gap:6px}
  .nav-pill__brand img{height:22px}
  .nav-pill__cta .btn{padding:9px 14px;font-size:12px}
  .nav-pill__cta .btn .arr{display:none}

  /* Buttons — ensure visible on small */
  .btn--lg{padding:14px 22px;font-size:14px}

  /* Mobile bar — squish for small screens */
  .mobar__inner{gap:8px}
  .mobar .btn{font-size:12px;padding:10px 12px;min-height:40px}
  .mobar .btn--blue{padding:10px 14px}
  .mobar .btn .arr{display:none}

  /* Eyebrow */
  .eyebrow{font-size:10px;letter-spacing:0.18em}

  /* Cards */
  .product-card,.feature-card,.voice,.certile,.doc{padding:22px}
  .product-card .pic{height:140px}
  .product-card .pname{font-size:20px}
  .product-card .price .promo{font-size:22px}

  /* Drawer menu items — slightly smaller */
  .drawer__menu a{font-size:30px;padding:12px 0}

  /* CTA section */
  .cta{padding:80px 0}
  .cta h2{font-size:clamp(36px,7vw,52px)}

  /* Pitch */
  .pitch h2{font-size:clamp(48px,12vw,80px)}

  /* Stat band */
  .statband__row{grid-template-columns:repeat(2,1fr)}
  .statband__item{padding:18px 12px}
  .statband__item .v{font-size:28px}
  .statband__item .l{font-size:9px}
}

/* Very small phone (≤380px) — final squeeze */
@media(max-width:380px){
  :root{--gutter:14px}
  .hero h1{font-size:34px !important;letter-spacing:-0.025em}
  .hero__lede{font-size:14px}
  .pagehero h1{font-size:32px !important}
  .h-section{font-size:28px !important}
  .nav-pill__cta .btn{padding:8px 11px;font-size:11px}
  .nav-pill__brand img{height:20px}
  .mobar .btn{font-size:11px;padding:9px 8px}
  .pitch h2{font-size:42px !important}
  .cta h2{font-size:32px !important}
  .product-card .pname{font-size:18px}
  .trust-item__text strong{font-size:14px}
}


/* =================================================================
   NAV PILL — final mobile spacing fix
   The Configure button was kissing the pill's right edge. Now it
   has comfortable breathing room inside the pill, and the pill
   itself is centered with margin from viewport edges.
   ================================================================= */
.nav-pill{
  padding-right:6px !important;
}
@media(max-width:1024px){
  .nav-pill{
    padding:6px 8px 6px 18px !important;
    gap:8px !important;
    max-width:calc(100% - 4px);
  }
  .nav-pill__cta{gap:6px !important}
  .nav-pill__cta .btn{padding:10px 16px !important;font-size:13px !important}
}
@media(max-width:520px){
  .nav-pill{padding:5px 6px 5px 14px !important;gap:6px !important}
  .nav-pill__cta{gap:4px !important}
  .nav-pill__cta .btn{padding:9px 14px !important;font-size:12px !important;letter-spacing:0 !important}
  .nav-pill__cta .btn .arr{display:none !important}
  .nav-pill__brand img{height:22px !important}
}
@media(max-width:380px){
  .nav-pill{padding:4px 5px 4px 11px !important;gap:4px !important}
  .nav-pill__brand img{height:19px !important}
  .nav-pill__toggle{width:34px !important;height:34px !important}
  .nav-pill__toggle svg{width:16px !important;height:16px !important}
  .nav-pill__cta .btn{padding:7px 11px !important;font-size:11px !important}
}


/* =================================================================
   NAV PILL — final layout: hamburger LEFT, logo CENTER, Configure RIGHT (mobile)
                            logo LEFT, menu CENTER, Configure RIGHT (desktop)
   Uses grid-template-areas for clean swap between viewports.
   Overrides earlier nav-pill rules with !important.
   ================================================================= */
.nav-pill{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  grid-template-areas:"toggle brand cta" !important;
  align-items:center !important;
  gap:8px !important;
  max-width:1100px;
  margin:0 auto;
  padding:8px 8px 8px 8px !important;
  background:rgba(255,255,255,0.95);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:999px;
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 12px 40px rgba(6,16,41,0.30);
}

.nav-pill__toggle{
  grid-area:toggle !important;
  display:flex !important;
  align-items:center;justify-content:center;
  width:42px;height:42px;
  background:transparent;border:none;border-radius:50%;
  color:var(--navy);cursor:pointer;
}
.nav-pill__toggle:hover{background:var(--blue-pale)}
.nav-pill__toggle svg{width:20px;height:20px}

.nav-pill__brand{
  grid-area:brand !important;
  justify-self:center !important;
  display:flex;align-items:center;gap:10px;
}
.nav-pill__brand img{height:26px}

.nav-pill__menu{
  grid-area:menu !important;
  display:none !important;
  list-style:none;margin:0;padding:0;
}

.nav-pill__cta{
  grid-area:cta !important;
  justify-self:end !important;
}

/* DESKTOP — logo LEFT, menu CENTER, Configure RIGHT, hamburger HIDDEN */
@media(min-width:1024px){
  .nav-pill{
    grid-template-areas:"brand menu cta" !important;
    padding:8px 8px 8px 24px !important;
    gap:24px !important;
  }
  .nav-pill__toggle{display:none !important}
  .nav-pill__brand{justify-self:start !important}
  .nav-pill__brand img{height:28px}
  .nav-pill__menu{
    display:flex !important;
    justify-self:center !important;
    gap:32px;
  }
  .nav-pill__menu a{
    font-family:var(--display);font-size:14px;font-weight:500;
    color:var(--ink-2);position:relative;padding:8px 0;
    transition:color 200ms;
  }
  .nav-pill__menu a:hover,.nav-pill__menu a.is-active{color:var(--navy)}
  .nav-pill__menu a.is-active::after{
    content:'';position:absolute;left:50%;bottom:0;
    transform:translateX(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--blue);
  }
}

/* MOBILE refinements */
@media(max-width:1024px){
  .nav-pill{padding:6px !important;gap:6px !important}
  .nav-pill__toggle{width:40px;height:40px}
  .nav-pill__brand img{height:24px}
  .nav-pill__cta{padding:10px 16px !important;font-size:13px !important}
  .nav-pill__cta .arr{display:none}
}
@media(max-width:520px){
  .nav-pill{padding:5px !important;gap:4px !important}
  .nav-pill__toggle{width:36px;height:36px}
  .nav-pill__toggle svg{width:18px;height:18px}
  .nav-pill__brand img{height:22px}
  .nav-pill__cta{padding:9px 14px !important;font-size:12px !important;letter-spacing:0 !important}
}
@media(max-width:380px){
  .nav-pill{padding:4px !important;gap:3px !important}
  .nav-pill__toggle{width:32px;height:32px}
  .nav-pill__toggle svg{width:16px;height:16px}
  .nav-pill__brand img{height:20px}
  .nav-pill__cta{padding:7px 11px !important;font-size:11px !important}
}


/* =================================================================
   DRAWER — full reformat: bigger logo, eyebrow sections, menu items
   with arrows, contact rows, sticky CTAs at bottom.
   Overrides earlier .drawer rules.
   ================================================================= */

/* Bigger hamburger button on mobile */
@media(max-width:1024px){
  .nav-pill__toggle{
    width:46px !important;height:46px !important;
    background:rgba(30,91,168,0.08) !important;
  }
  .nav-pill__toggle:hover{background:rgba(30,91,168,0.16) !important}
  .nav-pill__toggle svg{width:22px !important;height:22px !important;stroke:var(--navy) !important;stroke-width:2.2 !important}
}
@media(max-width:520px){
  .nav-pill__toggle{width:42px !important;height:42px !important}
  .nav-pill__toggle svg{width:20px !important;height:20px !important}
}
@media(max-width:380px){
  .nav-pill__toggle{width:38px !important;height:38px !important}
  .nav-pill__toggle svg{width:18px !important;height:18px !important}
}

/* Drawer container */
.drawer{
  position:fixed !important;
  inset:0 !important;
  background:linear-gradient(180deg,var(--navy) 0%,var(--night) 100%);
  z-index:200;
  display:flex;flex-direction:column;
  padding:0;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 400ms cubic-bezier(.2,.8,.2,1),visibility 0s linear 400ms;
  backdrop-filter:blur(8px);
  overflow:hidden;
}
.drawer.is-open{
  transform:translateY(0);
  visibility:visible;
  transition:transform 400ms cubic-bezier(.2,.8,.2,1),visibility 0s;
}
.drawer::before{
  content:'';position:absolute;
  top:-200px;right:-200px;
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,168,0.20) 0%,transparent 60%);
  pointer-events:none;
}

/* Drawer head — logo + close, fixed to top */
.drawer__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  flex-shrink:0;
  position:relative;z-index:1;
}
.drawer__brand img{
  height:30px;
  filter:brightness(0) invert(1);
}
.drawer__close{
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background 200ms,transform 200ms;
}
.drawer__close:hover{background:rgba(255,255,255,0.18);transform:rotate(90deg)}
.drawer__close svg{width:18px;height:18px}

/* Drawer body — scrollable middle */
.drawer__body{
  flex:1;
  overflow-y:auto;
  padding:24px 24px 16px;
  position:relative;z-index:1;
}

.drawer__eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(111,177,224,0.7);
  margin:0 0 12px;font-weight:500;
}

/* Menu list */
.drawer__menu{
  list-style:none;margin:0 0 32px;padding:0;
}
.drawer__menu li{
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.drawer__menu li:last-child{border-bottom:none}
.drawer__menu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 4px;
  font-family:var(--display);font-weight:600;
  font-size:22px;letter-spacing:-0.025em;line-height:1;
  color:#fff;
  transition:color 200ms,padding 200ms;
}
.drawer__menu a span{transition:transform 200ms}
.drawer__menu a svg{
  width:18px;height:18px;
  color:rgba(255,255,255,0.3);
  transition:color 200ms,transform 200ms;
}
.drawer__menu a:hover,.drawer__menu a:active{
  color:var(--blue-light);
  padding-left:8px;
}
.drawer__menu a:hover span{transform:translateX(2px)}
.drawer__menu a:hover svg{
  color:var(--blue-light);
  transform:translateX(4px);
}

/* Contact rows */
.drawer__contact{
  margin-bottom:24px;
}
.drawer__contact-item{
  display:flex;align-items:center;gap:14px;
  padding:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;
  margin-bottom:10px;
  transition:background 200ms,border-color 200ms;
}
.drawer__contact-item:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(111,177,224,0.4);
}
.drawer__contact-item svg{
  width:22px;height:22px;
  color:var(--blue-light);flex-shrink:0;
}
.drawer__contact-item div{display:flex;flex-direction:column;gap:2px;min-width:0}
.drawer__contact-item strong{
  font-family:var(--display);font-weight:600;
  font-size:14px;color:#fff;letter-spacing:-0.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.drawer__contact-item span{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}

/* Sticky CTA footer — pinned at bottom */
.drawer__cta{
  flex-shrink:0;
  padding:16px 24px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(6,16,41,0.6);
  backdrop-filter:blur(20px);
  display:flex;flex-direction:column;gap:10px;
  position:relative;z-index:1;
}
.drawer__cta .btn{width:100%;padding:14px 20px;font-size:14px}

/* Tiny phone */
@media(max-width:380px){
  .drawer__head{padding:16px 18px}
  .drawer__body{padding:18px 18px 12px}
  .drawer__menu a{font-size:19px;padding:15px 4px}
  .drawer__contact-item{padding:12px}
  .drawer__contact-item strong{font-size:13px}
  .drawer__cta{padding:14px 18px calc(18px + env(safe-area-inset-bottom))}
}

/* =================================================================
   MOBILE BAR — balanced 50/50 split, both buttons text+icon
   Overrides earlier .mobar rules.
   ================================================================= */
.mobar{
  position:fixed !important;
  bottom:0 !important;top:auto !important;
  left:0;right:0;
  background:rgba(255,255,255,0.96);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid var(--line);
  padding:12px 14px env(safe-area-inset-bottom);
  display:none;z-index:40;
  box-shadow:0 -8px 30px rgba(10,22,38,0.10);
}
.mobar__inner{
  display:grid !important;
  grid-template-columns:1fr 1.3fr !important;
  gap:10px;
  max-width:600px;margin:0 auto;
}
.mobar .btn{
  width:100%;
  height:48px;
  padding:0 14px !important;
  font-size:13px !important;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;
}
.mobar .btn--whatsapp{
  background:#25D366 !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 4px 14px rgba(37,211,102,0.35) !important;
}
.mobar .btn--whatsapp:hover{background:#1DA851 !important}
.mobar .btn--whatsapp svg{width:18px;height:18px;fill:currentColor}
.mobar .btn--whatsapp span{display:inline !important}
.mobar .btn--blue{
  background:var(--blue) !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(30,91,168,0.35) !important;
}
.mobar .btn--blue:hover{background:var(--navy-2) !important}
.mobar .btn .arr{display:inline}

@media(max-width:880px){
  .mobar{display:block}
  /* Body has NO bottom padding — the mobar floats over the bottom
     of the footer (covers the copyright line, which is fine). The
     old `padding-bottom:84px` was the source of the white gap on
     every customer page: 84px reserved, but the mobar's actual
     rendered height was only ~58-64px, so 20-26px of body
     background showed through as a white strip below the footer. */
  body{padding-bottom:0}
}
@media(max-width:380px){
  .mobar__inner{grid-template-columns:1fr 1.4fr}
  .mobar .btn{font-size:12px !important;padding:0 10px !important}
  .mobar .btn--whatsapp svg{width:16px;height:16px}
}

/* =================================================================
   MOBILE BAR — final tight padding, no dead space at bottom
   ================================================================= */
.mobar{
  padding:10px 14px 10px !important;
  padding-bottom:max(10px,env(safe-area-inset-bottom)) !important;
}
.mobar .btn{
  height:46px !important;
  font-size:13px !important;
}
.mobar__inner{gap:10px}
@media(max-width:880px){
  body{padding-bottom:0 !important}
}
@media(max-width:380px){
  .mobar{padding:8px 12px !important;padding-bottom:max(8px,env(safe-area-inset-bottom)) !important}
  .mobar .btn{height:42px !important;font-size:12px !important}
  body{padding-bottom:0 !important}
}


/* =================================================================
   POST-DEPLOY FIXES (v1.1)
   ================================================================= */

/* Home page: float the pill nav OVER the dark hero (was sitting above it) */
body.is-home{position:relative}
body.is-home .primewater-nav-wrap{
  position:absolute !important;
  top:0;left:0;right:0;
  z-index:50;
  padding-top:24px;
  pointer-events:none;
}
body.is-home .primewater-nav-wrap > .wrap{
  pointer-events:auto;
  padding-top:0 !important;
}
body.is-home .hero{padding-top:24px}

/* Inner pages: tighten pagehero excerpt readability */
.pagehero__inner > .pagehero__lede{
  font-style:normal;
  max-width:60ch;
}

/* Hide any scroll-to-top widgets from Astra / Hostinger / plugins */
.ast-scroll-top,
#ast-scroll-top,
.astra-scroll-top,
[class*="scroll-to-top"],
[class*="back-to-top"],
[class*="scrolltotop"],
[id*="scroll-top"],
[id*="scrollToTop"],
.scroll-to-top-wrap,
.menu-toggle-wrap,
#scroll-to-top{
  display:none !important;
}

/* Astra parent-theme leftovers we want hidden */
#page > .ast-mobile-header-wrap,
#masthead.site-header,
.site-header,
#colophon{
  display:none !important;
}


/* =================================================================
   POST-DEPLOY FIXES v1.2
   - Force home page background to dark navy so nav floats on dark
   - Make hamburger button OBVIOUSLY visible (navy circle, white icon)
   ================================================================= */

/* Home: lock the entire top-of-page area to dark navy */
body.is-home,
html:has(body.is-home){
  background:#061029 !important;
}
body.is-home .primewater-nav-wrap{
  background:transparent !important;
}
/* Force hero to start at the very top, no gap */
body.is-home main.primewater-content,
body.is-home .primewater-content{
  margin-top:0 !important;
  padding-top:0 !important;
}
body.is-home .hero{
  margin-top:0 !important;
}

/* Hamburger button — high-contrast, visible at every viewport */
.nav-pill__toggle{
  background:#0A2540 !important;
  color:#fff !important;
  border:none !important;
}
.nav-pill__toggle:hover,.nav-pill__toggle:active{
  background:#1E5BA8 !important;
  transform:scale(1.05);
}
.nav-pill__toggle svg{
  stroke:#fff !important;
  stroke-width:2.4 !important;
  width:20px !important;
  height:20px !important;
}
.nav-pill__toggle svg line{stroke:#fff !important}

/* Make sure the toggle stays sized properly across breakpoints */
@media(max-width:1024px){
  .nav-pill__toggle{width:42px !important;height:42px !important}
  .nav-pill__toggle svg{width:20px !important;height:20px !important}
}
@media(max-width:520px){
  .nav-pill__toggle{width:38px !important;height:38px !important}
  .nav-pill__toggle svg{width:18px !important;height:18px !important}
}
@media(max-width:380px){
  .nav-pill__toggle{width:34px !important;height:34px !important}
  .nav-pill__toggle svg{width:16px !important;height:16px !important;stroke-width:2.6 !important}
}


/* =================================================================
   PRODUCT CARDS v1.4 — make the photo the hero
   The blue gradient + tiny floating photo looked lazy. Fix:
   - Photo fills 90% of the card area (height-based, not width)
   - Soft cream background, not aggressive blue
   - Subtle radial glow + drop shadow under the unit
   - Popular card keeps navy bg but photo is also bigger
   ================================================================= */
.product-card .pic{
  height:280px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  position:relative;
  margin-bottom:24px;
  border-radius:var(--r);
  background:linear-gradient(180deg,#F8FAFC,#F2F4F7) !important;
  overflow:hidden;
}
.product-card .pic::before{
  content:'';position:absolute;
  top:55%;left:50%;transform:translate(-50%,-50%);
  width:65%;height:25%;
  background:radial-gradient(ellipse,rgba(10,37,64,0.18) 0%,transparent 70%);
  filter:blur(14px);
  z-index:0;
}
.product-card .pic img{
  position:relative;z-index:1 !important;
  width:auto !important;
  height:88% !important;
  max-height:240px !important;
  max-width:88% !important;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(10,37,64,0.22));
}

/* Popular card (Prime 901) on navy background */
.product-card.is-popular .pic{
  background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.04)) !important;
  border:1px solid rgba(111,177,224,0.15);
}
.product-card.is-popular .pic::before{
  background:radial-gradient(ellipse,rgba(111,177,224,0.30) 0%,transparent 70%);
}

/* Mobile — slightly shorter but still photo-led */
@media(max-width:880px){
  .product-card .pic{height:240px !important}
  .product-card .pic img{max-height:200px !important}
}
@media(max-width:520px){
  .product-card .pic{height:220px !important}
  .product-card .pic img{max-height:180px !important}
}

/* Configurator preview image — same treatment */
.cfg__pic{
  aspect-ratio:1 !important;
  background:linear-gradient(180deg,#F8FAFC,#F2F4F7) !important;
}
.cfg__pic::before{
  content:'';position:absolute;
  top:55%;left:50%;transform:translate(-50%,-50%);
  width:65%;height:25%;
  background:radial-gradient(ellipse,rgba(10,37,64,0.18) 0%,transparent 70%);
  filter:blur(14px);
  z-index:0;
}
.cfg__pic img{
  width:auto !important;
  height:85% !important;
  max-height:280px !important;
  max-width:85% !important;
  object-fit:contain;
  filter:drop-shadow(0 20px 30px rgba(10,37,64,0.22));
}

/* Spec visual on Technology page — let the photo breathe too */
.specvis{aspect-ratio:auto !important;min-height:380px}
.specvis img{
  width:auto !important;
  height:80% !important;
  max-height:340px !important;
  max-width:75% !important;
  object-fit:contain;
}
@media(max-width:880px){.specvis{min-height:300px}.specvis img{max-height:260px !important}}


/* =================================================================
   v1.5 — readability fix + left-side back-to-top CTA dock
   ================================================================= */

/* The body-dark trick was over-broad. The hero is already dark, so the
   nav floats over it. Body returns to paper so subsequent sections
   (story, products, features) read with proper contrast. */
body.is-home,
html:has(body.is-home){
  background:var(--paper) !important;
}

/* Story section explicitly has paper background so we don't depend on body */
.story{background:var(--paper) !important}
.story__copy h2,
.story__copy p,
.story__head h2{color:var(--ink-2)}
.story__copy p:first-child{color:var(--ink) !important}
.story__head .eyebrow{color:var(--blue) !important}

/* Force light bg on these sections (any page) */
.section,
.products,
.features,
.voices,
.cta{background-color:var(--paper) !important}
.section--soft,.products{background-color:var(--paper-2) !important}
.section--dark{background-color:var(--navy) !important;color:#fff}




/* =================================================================
   v1.6 — proper floating product dock (matches v2 mockup design)
   Two states:
   - Collapsed FAB:  small circle with cube icon, bottom-left
   - Expanded card:  full Prime 901-L preview with badge, photo,
                     price, chips, Configure button, WhatsApp link
   + Separate back-to-top circle button at bottom-right
   ================================================================= */

/* ---- Expanded card ---- */
.sidedock{
  position:fixed;
  left:24px;bottom:24px;
  z-index:45;
  width:280px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 24px 60px rgba(10,22,38,0.20),0 8px 24px rgba(10,22,38,0.10);
  overflow:hidden;
  display:flex;flex-direction:column;
  transform-origin:bottom left;
  transition:transform 320ms cubic-bezier(.2,.8,.2,1),opacity 280ms;
}
.sidedock.is-collapsed{
  transform:scale(0.4) translate(-30%,30%);
  opacity:0;pointer-events:none;
}

.sidedock__badge{
  position:absolute;top:18px;left:18px;
  z-index:2;
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  font-weight:600;
  color:#fff;
  background:#0E5759;
  padding:6px 12px;border-radius:999px;
}
.sidedock__close{
  position:absolute;top:14px;right:14px;
  z-index:2;
  width:32px;height:32px;
  background:rgba(255,255,255,0.85);
  border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);
  cursor:pointer;
  transition:background 200ms,transform 200ms;
}
.sidedock__close:hover{background:#fff;transform:rotate(90deg);color:var(--ink)}
.sidedock__close svg{width:14px;height:14px}

/* Top photo block */
.sidedock__pic{
  position:relative;
  height:210px;
  background:linear-gradient(180deg,#E3EFF9 0%,#D6E4F2 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.sidedock__pic::before{
  content:'';position:absolute;
  top:55%;left:50%;transform:translate(-50%,-50%);
  width:60%;height:30%;
  background:radial-gradient(ellipse,rgba(10,37,64,0.18) 0%,transparent 70%);
  filter:blur(12px);
}
.sidedock__pic img{
  position:relative;z-index:1;
  width:auto;height:92%;
  max-height:180px;max-width:86%;
  object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(10,37,64,0.24));
}

/* Body (white area below photo) */
.sidedock__body{
  padding:18px 20px 20px;
  display:flex;flex-direction:column;
}
.sidedock__eyebrow{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
  margin:0 0 6px;
}
.sidedock__title{
  font-family:var(--display);
  font-weight:600;font-size:22px;letter-spacing:-0.02em;line-height:1.1;
  color:var(--navy);
  margin:0 0 12px;
}
.sidedock__price{
  display:flex;align-items:baseline;gap:10px;
  margin-bottom:16px;
}
.sidedock__price .strike{
  font-family:var(--display);
  font-size:13px;color:var(--ink-faint);
  text-decoration:line-through;
}
.sidedock__price .promo{
  font-family:var(--display);
  font-weight:600;font-size:24px;
  color:#E8743C;letter-spacing:-0.02em;
}
.sidedock__chips{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:16px;
}
.sidedock__chip{
  font-family:var(--mono);
  font-size:10px;letter-spacing:0.10em;
  padding:5px 10px;border-radius:999px;
  background:#F2F4F7;color:var(--ink-2);
  font-weight:500;
}
.sidedock__cta{
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:var(--navy);color:#fff !important;
  font-family:var(--display);font-weight:600;font-size:14px;
  padding:12px 18px;
  border-radius:999px;
  text-decoration:none !important;
  margin-bottom:10px;
  transition:background 200ms,transform 200ms;
}
.sidedock__cta:hover{background:var(--ink);transform:translateY(-1px)}
.sidedock__cta .arr{transition:transform 200ms}
.sidedock__cta:hover .arr{transform:translateX(2px)}

.sidedock__wa{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--display);font-weight:500;font-size:13px;
  color:var(--ink-2) !important;
  text-decoration:none !important;
  padding:8px 0;
  transition:color 200ms;
}
.sidedock__wa:hover{color:var(--navy) !important}
.sidedock__wa svg{
  width:16px;height:16px;
  fill:#25D366;
}

/* ---- Collapsed FAB ---- */
.sidedock-fab{
  position:fixed;
  left:24px;bottom:24px;
  z-index:44;
  width:54px;height:54px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--navy);
  box-shadow:0 12px 30px rgba(10,22,38,0.18);
  opacity:0;transform:scale(0.5);
  transition:opacity 280ms,transform 320ms cubic-bezier(.2,.8,.2,1),background 200ms;
  pointer-events:none;
}
.sidedock-fab.is-visible{
  opacity:1;transform:scale(1);
  pointer-events:auto;
}
.sidedock-fab:hover{background:var(--navy);color:#fff;transform:scale(1.06)}
.sidedock-fab svg{width:22px;height:22px;stroke:currentColor}

/* ---- Back-to-top button (bottom-right) ---- */
.totop{
  position:fixed;
  right:24px;bottom:24px;
  z-index:44;
  width:46px;height:46px;
  background:rgba(10,37,64,0.92);
  border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;
  box-shadow:0 12px 30px rgba(10,22,38,0.25);
  opacity:0;transform:translateY(20px);
  transition:opacity 280ms,transform 280ms,background 200ms;
  pointer-events:none;
  backdrop-filter:blur(12px);
}
.totop.is-visible{
  opacity:1;transform:translateY(0);
  pointer-events:auto;
}
.totop:hover{background:var(--blue);transform:translateY(-3px)}
.totop svg{width:18px;height:18px}

/* ---- Mobile: hide everything (mobile bar covers CTAs) ---- */
@media(max-width:880px){
  .sidedock,.sidedock-fab{display:none !important}
  /* Back-to-top sits above the mobile sticky bar */
  .totop{
    right:14px;bottom:114px;       /* clears the mobile sticky bar */
    width:42px;height:42px;
  }
  .totop svg{width:16px;height:16px}
}


/* =================================================================
   v1.7 — bulletproof reset on dock buttons
   Astra parent theme adds default button padding/sizing that warped
   the close (×), FAB, and back-to-top into ovals and hid their icons.
   This forces strict dimensions and SVG visibility.
   ================================================================= */

.sidedock__close,
.sidedock-fab,
.totop{
  /* kill inherited padding / line-height / sizing from Astra */
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-family:inherit !important;
  /* lock dimensions */
  flex-shrink:0;
  flex-grow:0;
  /* center icon */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.sidedock__close{
  width:32px !important;height:32px !important;
  background:rgba(255,255,255,0.92) !important;
  border:1px solid var(--line) !important;
  border-radius:50% !important;
  color:#0A1626 !important;
  cursor:pointer !important;
}
.sidedock__close:hover{
  background:#fff !important;
  transform:rotate(90deg);
  color:#0A1626 !important;
}

.sidedock-fab{
  width:54px !important;height:54px !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:50% !important;
  color:#0A2540 !important;
  cursor:pointer !important;
}
.sidedock-fab:hover{
  background:#0A2540 !important;
  color:#fff !important;
  transform:scale(1.06);
}

.totop{
  width:46px !important;height:46px !important;
  background:rgba(10,37,64,0.95) !important;
  border:none !important;
  border-radius:50% !important;
  color:#fff !important;
  cursor:pointer !important;
}
.totop:hover{
  background:#1E5BA8 !important;
  transform:translateY(-3px) !important;
}

/* SVG visibility — force every dock SVG to render */
.sidedock__close svg,
.sidedock-fab svg,
.totop svg{
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  flex-shrink:0;
  pointer-events:none;
}
.sidedock__close svg{
  width:14px !important;height:14px !important;
  stroke-width:2.4 !important;
}
.sidedock__close svg line{stroke:#0A1626 !important;stroke-width:2.4 !important}
.sidedock-fab svg{
  width:22px !important;height:22px !important;
  stroke-width:2 !important;
}
.sidedock-fab svg path{stroke:currentColor !important}
.totop svg{
  width:18px !important;height:18px !important;
  stroke-width:2.4 !important;
}
.totop svg path{stroke:#fff !important;stroke-width:2.4 !important;fill:none !important}

/* Mobile: back-to-top sits above the mobile sticky bar (mobar) */
@media(max-width:880px){
  .sidedock,.sidedock-fab{display:none !important}
  .totop{
    right:14px !important;bottom:114px !important;
    width:42px !important;height:42px !important;
  }
  .totop svg{width:16px !important;height:16px !important}
}


/* =================================================================
   v1.8 — extend the bulletproof button reset to nav hamburger
   and drawer close (×). Same root cause as v1.7: Astra's default
   button padding/font hides the SVG icons.
   ================================================================= */

.nav-pill__toggle,
.drawer__close{
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-family:inherit !important;
  font-size:0 !important;
  flex-shrink:0;flex-grow:0;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  border-radius:50% !important;
}

/* Hamburger button — solid navy circle with white icon */
.nav-pill__toggle{
  background:#0A2540 !important;
  color:#fff !important;
  border:none !important;
}
.nav-pill__toggle:hover,
.nav-pill__toggle:active,
.nav-pill__toggle:focus{
  background:#1E5BA8 !important;
  outline:none !important;
}

/* Drawer close (×) — visible on dark drawer overlay */
.drawer__close{
  background:rgba(255,255,255,0.10) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  width:46px !important;height:46px !important;
}
.drawer__close:hover{
  background:rgba(255,255,255,0.20) !important;
  transform:rotate(90deg);
}

/* Force the SVGs to render — fill:none + stroke:currentColor with white stroke */
.nav-pill__toggle svg,
.drawer__close svg{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  fill:none !important;
  stroke:#fff !important;
  flex-shrink:0;
  pointer-events:none;
  stroke-width:2.4 !important;
  stroke-linecap:round !important;
}
.nav-pill__toggle svg line,
.nav-pill__toggle svg path,
.drawer__close svg line,
.drawer__close svg path{
  stroke:#fff !important;
  fill:none !important;
}

/* Hamburger sizing per breakpoint */
.nav-pill__toggle{width:42px !important;height:42px !important}
.nav-pill__toggle svg{width:20px !important;height:20px !important}
@media(max-width:520px){
  .nav-pill__toggle{width:38px !important;height:38px !important}
  .nav-pill__toggle svg{width:18px !important;height:18px !important}
}
@media(max-width:380px){
  .nav-pill__toggle{width:34px !important;height:34px !important}
  .nav-pill__toggle svg{width:16px !important;height:16px !important;stroke-width:2.6 !important}
}

/* Drawer close icon size */
.drawer__close svg{width:18px !important;height:18px !important}

/* Belt-and-suspenders: every button anywhere in our scope strips Astra defaults */
.nav-pill button,
.sidedock button,
.drawer button{
  background-image:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
}


/* =================================================================
   v1.9 — mobile hero typography + spacing
   The eyebrow line was wrapping awkwardly with "2018" alone on
   line two. Tighten letter-spacing + shrink the decorative side
   lines + ensure single-line on every mobile viewport.
   ================================================================= */

@media(max-width:880px){
  .hero{padding-top:40px !important}
  .hero__content{
    padding:60px 24px 30px !important;
  }
  .hero__eyebrow{
    font-size:10px !important;
    letter-spacing:0.18em !important;
    gap:10px !important;
    margin-bottom:26px !important;
    white-space:nowrap;
    flex-wrap:nowrap;
  }
  .hero__eyebrow::before,
  .hero__eyebrow::after{
    width:18px !important;
    flex-shrink:0;
  }
}

@media(max-width:520px){
  .hero__content{padding:84px 18px 24px !important}
  .hero__eyebrow{
    font-size:9px !important;
    letter-spacing:0.14em !important;
    gap:8px !important;
    margin-bottom:22px !important;
  }
  .hero__eyebrow::before,
  .hero__eyebrow::after{
    width:14px !important;
  }
  .hero h1{margin-bottom:22px !important}
  .hero__lede{margin-bottom:28px !important}
}

@media(max-width:380px){
  .hero__content{padding:76px 16px 20px !important}
  .hero__eyebrow{
    font-size:8.5px !important;
    letter-spacing:0.12em !important;
  }
  /* hide the decorative side lines on tiniest screens — pure text */
  .hero__eyebrow::before,
  .hero__eyebrow::after{
    display:none !important;
  }
}

/* Hero trust row: also tighten on mobile */
@media(max-width:880px){
  .hero__trust{
    padding:20px 18px 30px !important;
    gap:14px !important;
  }
  .trust-item{gap:10px}
  .trust-item__text strong{font-size:13px}
  .trust-item__text span{font-size:9px;letter-spacing:0.14em}
}


/* =================================================================
   v2.0 — fix: hide hamburger on desktop (regression from v1.8)
   v1.8's button reset added `display:flex !important` to the toggle
   which overrode the desktop hide. The toggle was rendering on
   desktop, getting placed outside the grid template, and stretching
   the pill to fit. This rule goes AFTER everything so it wins.
   ================================================================= */
@media(min-width:1024px){
  .nav-pill__toggle{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .nav-pill{
    grid-template-areas:"brand menu cta" !important;
    grid-template-columns:auto 1fr auto !important;
  }
}


/* =================================================================
   v2.1 — Configure page (order-form) standalone design
   No dark pagehero. Clean white experience with sticky preview.
   ================================================================= */

/* Page-level: light bg, no border under nav-wrap */
body.is-page-order-form,
body.is-config-page{
  background:var(--paper) !important;
}
.config-nav-wrap{
  background:transparent;
  position:relative;
  z-index:30;
}
.config-page{
  margin-top:-72px; /* pull content up so the pill nav floats over the hero */
  padding-top:72px;
}

/* Configure hero (replaces dark pagehero) */
.config-hero{
  padding:80px 0 50px;
  background:linear-gradient(180deg,var(--paper) 0%,#FFFFFF 100%);
  text-align:center;
}
.config-hero__eyebrow{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.20em;text-transform:uppercase;
  color:var(--blue);font-weight:600;
  margin:0 0 24px;
  display:inline-flex;align-items:center;gap:10px;
}
.config-hero__eyebrow::before,.config-hero__eyebrow::after{
  content:'';width:30px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(30,91,168,0.4),transparent);
}
.config-hero__h1{
  font-family:var(--display);font-weight:600;
  font-size:clamp(44px,6vw,84px);letter-spacing:-0.04em;line-height:0.95;
  color:var(--navy);
  margin:0 auto 24px;
  max-width:14ch;
}
.config-hero__h1 .accent{color:var(--blue)}
.config-hero__lede{
  font-size:clamp(15px,1.2vw,18px);
  color:var(--ink-2);max-width:60ch;
  margin:0 auto;line-height:1.65;
}
@media(max-width:680px){
  .config-hero{padding:60px 0 30px}
  .config-hero__h1{font-size:38px}
}

/* Main configure section */
.config-main{
  padding:30px 0 100px;
  background:var(--paper);
}
.config-main .cfg{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px;
  display:grid !important;
  grid-template-columns:1fr 380px !important;
  gap:48px !important;
  align-items:start;
  box-shadow:0 12px 40px rgba(10,22,38,0.05);
}
@media(max-width:980px){
  .config-main .cfg{
    grid-template-columns:1fr !important;
    gap:30px !important;
    padding:24px;
  }
}
@media(max-width:520px){
  .config-main .cfg{padding:20px;border-radius:18px}
}

/* Step blocks — taller, more breathing room */
.cfg__form .step{padding:22px 0 !important;border-top:1px solid var(--line) !important}
.cfg__form .step:first-child{border-top:none !important;padding-top:0 !important}
.step__head{display:flex;align-items:baseline;gap:14px;margin-bottom:8px !important}
.step__num{
  font-family:var(--mono);font-size:11px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--blue);font-weight:600;
}
.step__title{
  font-family:var(--display);font-weight:600;font-size:20px;
  letter-spacing:-0.02em;color:var(--navy);margin:0;
}
.step__hint{
  font-size:14px;color:var(--ink-2);margin:0 0 16px;line-height:1.5;
  max-width:48ch;
}

/* Option chips — bigger, more tactile */
.cfg__opts{display:flex;flex-wrap:wrap;gap:10px}
.cfg__opt{
  font-family:var(--display);font-weight:600;font-size:13px;
  background:#fff;border:1.5px solid var(--line);
  padding:11px 18px;border-radius:999px;
  color:var(--ink-2);cursor:pointer;
  transition:all 200ms;
}
.cfg__opt:hover{border-color:var(--blue);color:var(--navy)}
.cfg__opt.is-selected{
  background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:0 6px 16px rgba(30,91,168,0.30);
}

/* Sticky summary — premium card */
.cfg__summary{
  background:linear-gradient(180deg,#FAFCFF 0%,#F2F4F7 100%) !important;
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px !important;
  position:sticky;top:96px;
}
.cfg__summary h3{
  font-family:var(--mono);font-size:10px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 16px !important;font-weight:600;
}
.cfg__pic{
  aspect-ratio:1 !important;
  background:#fff !important;
  border:1px solid var(--line);
  border-radius:14px;margin-bottom:18px !important;
}
.cfg__model{
  font-family:var(--display);font-weight:600;
  font-size:24px !important;letter-spacing:-0.02em;color:var(--navy);
  margin:0 0 4px !important;
}
.cfg__sub{
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 18px !important;
}
.cfg__price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px !important}
.cfg__price .strike{
  font-family:var(--display);font-size:14px;
  color:var(--ink-faint);text-decoration:line-through;
}
.cfg__price .promo{
  font-family:var(--display);font-weight:700;font-size:32px;
  letter-spacing:-0.025em;color:#E8743C;
}
.cfg__perday{
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 18px;
}
.cfg__submit{width:100%;margin-bottom:10px}
.cfg__wa{width:100%}
.cfg__trust{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
}
.cfg__trust span{
  font-family:var(--mono);font-size:9px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--ink-2);
  background:#fff;padding:5px 9px;border-radius:999px;
  border:1px solid var(--line);
}

/* Configure-next — what happens after */
.config-next{
  padding:80px 0 100px;
  background:var(--navy);color:#fff;
}
.config-next__head{
  text-align:center;margin-bottom:50px;
  max-width:720px;margin-left:auto;margin-right:auto;
}
.config-next__head .eyebrow{color:var(--blue-light) !important;justify-content:center}
.config-next__head .eyebrow::before{background:var(--blue-light)}
.config-next__head h2{color:#fff;margin:0}
.config-next__steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.config-next__step{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:18px;padding:28px;
}
.config-next__step .num{
  font-family:var(--display);font-weight:600;font-size:42px;
  letter-spacing:-0.04em;line-height:1;
  color:var(--blue-light);
  display:block;margin-bottom:14px;
}
.config-next__step h3{
  font-family:var(--display);font-weight:600;font-size:18px;
  letter-spacing:-0.015em;color:#fff;margin:0 0 10px;
}
.config-next__step p{font-size:14px;color:rgba(255,255,255,0.7);line-height:1.6;margin:0}
@media(max-width:880px){
  .config-next{padding:60px 0 80px}
  .config-next__steps{grid-template-columns:1fr;gap:14px}
}


/* =================================================================
   v2.3 — About page: video embed + mission/vision cards
   ================================================================= */

/* Responsive YouTube embed */
.video-block{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(135deg,#0A2540,#061029);
  box-shadow:0 30px 80px rgba(10,22,38,0.18),0 12px 28px rgba(10,22,38,0.10);
  border:1px solid var(--line);
}
.video-block iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
@media(max-width:680px){
  .video-block{border-radius:18px}
}

/* Mission / Vision two-column */
.mission-vision{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.mv-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:40px 36px;
  transition:transform 250ms,box-shadow 250ms,border-color 250ms;
  position:relative;
  overflow:hidden;
}
.mv-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sh);
  border-color:var(--blue-soft);
}
.mv-card::before{
  content:'';position:absolute;
  top:-100px;right:-100px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,91,168,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.mv-card > *{position:relative;z-index:1}
.mv-card__icon{
  width:56px;height:56px;
  border-radius:16px;
  background:var(--blue-pale);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.mv-card__icon svg{
  width:26px;height:26px;
  stroke:var(--blue);
  fill:none;
}
.mv-card__label{
  font-family:var(--mono);
  font-size:11px;letter-spacing:0.20em;text-transform:uppercase;
  color:var(--blue);font-weight:600;
  margin:0 0 14px;
}
.mv-card h3{
  font-family:var(--display);font-weight:600;
  font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-0.025em;line-height:1.2;
  color:var(--navy);margin:0 0 18px;
  max-width:22ch;
}
.mv-card__body{
  font-size:15px;
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
  max-width:42ch;
}

/* Vision card variant — sage-blue accent for visual difference */
.mission-vision .mv-card:nth-child(2)::before{
  background:radial-gradient(circle,rgba(111,177,224,0.10) 0%,transparent 70%);
}
.mission-vision .mv-card:nth-child(2) .mv-card__icon{
  background:rgba(111,177,224,0.18);
}
.mission-vision .mv-card:nth-child(2) .mv-card__icon svg{
  stroke:var(--blue);
}

@media(max-width:880px){
  .mission-vision{grid-template-columns:1fr;gap:16px}
  .mv-card{padding:32px 28px}
}
@media(max-width:520px){
  .mv-card{padding:28px 24px;border-radius:18px}
  .mv-card__icon{width:48px;height:48px}
  .mv-card__icon svg{width:22px;height:22px}
}


/* =================================================================
   v2.4 — colour swatches as perfect circles + remove footer gap
   ================================================================= */

/* Colour swatches — same Astra reset as other circular buttons */
.cfg__swatch,
.cfg__opts.swatch-row .cfg__swatch{
  padding:0 !important;
  margin:0 !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  font-family:inherit !important;
  font-size:0 !important;
  flex-shrink:0;flex-grow:0;
  cursor:pointer !important;
  display:inline-block !important;
  /* perfect circle */
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  border:2px solid var(--line) !important;
  background-image:none;
  vertical-align:middle;
}
.cfg__swatch:hover{transform:scale(1.05)}
.cfg__swatch.is-selected{
  border-color:var(--blue) !important;
  transform:scale(1.10);
  box-shadow:0 0 0 4px rgba(30,91,168,0.18);
}
.cfg__swatch--white{background:linear-gradient(135deg,#fff,#f0f0f0) !important}
.cfg__swatch--silver{background:linear-gradient(135deg,#e2e2e2,#9a9a9a) !important}
.cfg__swatch--black{background:linear-gradient(135deg,#3a3a3a,#0a0a0a) !important;border-color:var(--ink) !important}

/* Larger swatches for better tactile feel */
@media(min-width:520px){
  .cfg__swatch{width:42px !important;height:42px !important}
}

/* Spacing between swatches */
.cfg__opts.swatch-row{gap:14px !important;align-items:center}

/* =================================================================
   FOOTER GAP — eliminate any whitespace between last section and footer
   The configure page (and some others) showed a faint light strip just
   before the footer. Fix: zero out trailing margins on main/sections.
   ================================================================= */
.primewater-content{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  background:transparent;
}
.primewater-content > *:last-child{margin-bottom:0 !important}
.config-next,
.cta-mini{margin-bottom:0 !important}
.footer{margin-top:0 !important}

/* Astra parent might add default body padding — strip on every page */
body:not(.is-mobile-bar) {padding-bottom:0}
@media(min-width:881px){
  body{padding-bottom:0 !important}
}

/* Make sure no rogue paragraphs add gaps */
.primewater-content > p:empty,
.primewater-content > br{display:none !important}

/* Some inner pages (about, technology, etc.) end with cta-mini directly
   above footer. Ensure no double-padding. */
.cta-mini + .footer,
.config-next + .footer,
.section + .footer{
  border-top:none !important;
  margin-top:0 !important;
}


/* =================================================================
   v2.6 — Philosophy bullet list inside mv-card
   ================================================================= */
.mv-card__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:42ch;
}
.mv-card__list li{
  position:relative;
  padding-left:28px;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
}
.mv-card__list li::before{
  content:'';
  position:absolute;
  left:0;top:9px;
  width:14px;height:1.5px;
  background:var(--blue);
}
.mv-card__list li strong{color:var(--navy);font-weight:600}


/* =================================================================
   v2.7 — Mission / Philosophy stacked layout (exact match to source)
   No cards, no extra headlines. Just centered all-caps section heads
   with paragraph body.
   ================================================================= */
.mv-stack{
  text-align:center;
  max-width:780px;
  margin:0 auto;
}
.mv-stack__h{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(20px,2.4vw,26px);
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 22px;
}
.mv-stack__body{
  font-family:var(--body);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 8px;
  max-width:780px;
}
.mv-stack__body + .mv-stack__body{margin-top:0}

@media(max-width:680px){
  .mv-stack__h{font-size:18px;letter-spacing:0.08em;margin-bottom:18px}
  .mv-stack__body{font-size:14px;line-height:1.65}
}





/* =================================================================
   v7 — Research page banner (image background + dark overlay)
   ================================================================= */

body.is-page-research-summary .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.72) 0%, rgba(6,16,41,0.85) 100%),
    url('../assets/img/research-team.jpg') center 30% / cover no-repeat !important;
  min-height:560px;
  padding-bottom:100px;
  display:flex;
  flex-direction:column;
}
body.is-page-research-summary .pagehero::after{
  display:none !important;
}
body.is-page-research-summary .pagehero__nav{
  margin-bottom:auto;
}
body.is-page-research-summary .pagehero__inner{
  margin-top:60px;
  margin-bottom:40px;
}
body.is-page-research-summary .pagehero h1{
  font-size:clamp(44px,7vw,84px) !important;
  letter-spacing:-0.03em !important;
  line-height:0.95 !important;
  margin-bottom:24px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.30);
}
body.is-page-research-summary .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.is-page-research-summary .pagehero__lede{
  font-size:clamp(15px,1.25vw,17px);
  color:rgba(255,255,255,0.92);
  max-width:62ch;
  margin:0 auto;
  line-height:1.65;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-research-summary .pagehero{min-height:440px;padding-bottom:60px}
  body.is-page-research-summary .pagehero h1{font-size:42px !important}
  body.is-page-research-summary .pagehero__inner{margin-top:30px}
}




/* =================================================================
   v7 — Researchers gallery (visual cards with avatar + numeral)
   Two-column: meta (left) + bio body (right) on desktop.
   Stacked on mobile. Each entry is a standalone card with subtle
   border, soft shadow, and alternating accent color on the avatar.
   ================================================================= */
.researchers{
  padding:80px 0 100px;
  background:var(--paper);
}
.researcher{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:48px;
  padding:48px;
  margin-bottom:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 8px 30px rgba(10,22,38,0.04);
  position:relative;
  overflow:hidden;
}
.researcher::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:6px;height:100%;
  background:linear-gradient(180deg, #1E5BA8 0%, #6FB1E0 100%);
}
.researcher:nth-child(2)::before{background:linear-gradient(180deg, #2E7D32 0%, #66BB6A 100%)}
.researcher:nth-child(3)::before{background:linear-gradient(180deg, #B45309 0%, #F59E0B 100%)}
.researcher:nth-child(4)::before{background:linear-gradient(180deg, #6B21A8 0%, #A855F7 100%)}
.researcher:nth-child(5)::before{background:linear-gradient(180deg, #9F1239 0%, #F472B6 100%)}
.researcher:nth-child(6)::before{background:linear-gradient(180deg, #134E4A 0%, #2DD4BF 100%)}
.researcher:nth-child(7)::before{background:linear-gradient(180deg, #1E5BA8 0%, #6FB1E0 100%)}

.researcher__meta{
  position:sticky;
  top:120px;
  align-self:start;
}
.researcher__num{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:80px;
  line-height:1;
  letter-spacing:-0.04em;
  color:var(--blue);
  display:block;
  margin-bottom:24px;
  opacity:0.65;
}
.researcher:nth-child(2) .researcher__num{color:#2E7D32}
.researcher:nth-child(3) .researcher__num{color:#B45309}
.researcher:nth-child(4) .researcher__num{color:#6B21A8}
.researcher:nth-child(5) .researcher__num{color:#9F1239}
.researcher:nth-child(6) .researcher__num{color:#134E4A}
.researcher:nth-child(7) .researcher__num{color:var(--blue)}

.researcher__avatar{
  width:84px;height:84px;
  border-radius:50%;
  background:linear-gradient(135deg, #1E5BA8 0%, #6FB1E0 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-weight:700;
  font-size:28px;
  letter-spacing:0.02em;
  margin-bottom:20px;
  box-shadow:0 8px 20px rgba(30,91,168,0.30);
  border:3px solid #fff;
  outline:1px solid var(--line);
}
.researcher:nth-child(2) .researcher__avatar{background:linear-gradient(135deg, #2E7D32 0%, #66BB6A 100%);box-shadow:0 8px 20px rgba(46,125,50,0.30)}
.researcher:nth-child(3) .researcher__avatar{background:linear-gradient(135deg, #B45309 0%, #F59E0B 100%);box-shadow:0 8px 20px rgba(180,83,9,0.30)}
.researcher:nth-child(4) .researcher__avatar{background:linear-gradient(135deg, #6B21A8 0%, #A855F7 100%);box-shadow:0 8px 20px rgba(107,33,168,0.30)}
.researcher:nth-child(5) .researcher__avatar{background:linear-gradient(135deg, #9F1239 0%, #F472B6 100%);box-shadow:0 8px 20px rgba(159,18,57,0.30)}
.researcher:nth-child(6) .researcher__avatar{background:linear-gradient(135deg, #134E4A 0%, #2DD4BF 100%);box-shadow:0 8px 20px rgba(19,78,74,0.30)}

.researcher__name{
  font-family:var(--display);
  font-weight:700;
  font-size:24px;
  letter-spacing:-0.02em;
  line-height:1.2;
  color:var(--ink);
  margin:0 0 8px;
}
.researcher__role{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 24px;
  line-height:1.5;
  font-weight:500;
}
.researcher__fact{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px 16px;
  background:linear-gradient(135deg, rgba(30,91,168,0.04), rgba(111,177,224,0.08));
  border-left:3px solid var(--blue);
  border-radius:6px;
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  letter-spacing:-0.005em;
  line-height:1.4;
  color:var(--navy);
}
.researcher__fact-mark{
  color:var(--blue);
  font-size:14px;
  flex-shrink:0;
}

.researcher__body p{
  font-family:var(--body);
  font-size:16px;
  line-height:1.75;
  color:var(--ink-2);
  margin:0 0 18px;
  max-width:65ch;
}
.researcher__body p:first-child{
  font-size:18px;
  color:var(--ink);
  font-weight:500;
}
.researcher__body p:last-child{margin-bottom:0}

@media(max-width:980px){
  .researcher{
    grid-template-columns:1fr;
    gap:24px;
    padding:32px;
  }
  .researcher__meta{
    position:relative;
    top:auto;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .researcher__num{font-size:60px;margin-bottom:14px}
  .researcher__avatar{width:64px;height:64px;font-size:22px;margin-bottom:14px}
  .researcher__name{font-size:22px}
}
@media(max-width:520px){
  .researchers{padding:50px 0 70px}
  .researcher{padding:24px;border-radius:18px;margin-bottom:18px}
  .researcher__num{font-size:48px}
  .researcher__name{font-size:20px}
  .researcher__body p{font-size:15px;line-height:1.7}
  .researcher__body p:first-child{font-size:16px}
}


/* =================================================================
   v7 — About page banner (lifestyle image background)
   Same treatment pattern as research-summary banner.
   ================================================================= */
body.is-page-about .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.55) 0%, rgba(6,16,41,0.78) 100%),
    url('../assets/img/alkaline-water-with-ng-of-pw-img.gif') center 35% / cover no-repeat !important;
  min-height:560px;
  padding-bottom:100px;
  display:flex;
  flex-direction:column;
}
body.is-page-about .pagehero::after{
  display:none !important;
}
body.is-page-about .pagehero__nav{
  margin-bottom:auto;
}
body.is-page-about .pagehero__inner{
  margin-top:60px;
  margin-bottom:40px;
}
body.is-page-about .pagehero h1{
  font-size:clamp(48px,7.5vw,96px) !important;
  letter-spacing:-0.035em !important;
  line-height:0.95 !important;
  margin-bottom:24px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.35);
  max-width:18ch;
}
body.is-page-about .pagehero h1 .soft{
  color:rgba(255,255,255,0.65) !important;
}
body.is-page-about .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.is-page-about .pagehero__lede{
  font-size:clamp(15px,1.25vw,17px);
  color:rgba(255,255,255,0.92);
  max-width:62ch;
  margin:0 auto;
  line-height:1.65;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-about .pagehero{min-height:440px;padding-bottom:60px}
  body.is-page-about .pagehero h1{font-size:42px !important}
  body.is-page-about .pagehero__inner{margin-top:30px}
}


/* =================================================================
   v7 — About chapters (visual cards with numeral + icon + heading)
   Same pattern as research cards but adapted for company narrative.
   ================================================================= */
.aboutdoc-intro{
  padding:80px 0 30px;
  background:var(--paper);
}
.aboutdoc-intro__h{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(24px,3vw,32px);
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 18px;
}
.aboutdoc-intro__sub{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(20px,2.4vw,30px);
  letter-spacing:-0.02em;
  color:var(--navy);
  margin:0;line-height:1.3;
  max-width:38ch;margin:0 auto;
}

.aboutchaps{
  padding:30px 0 100px;
  background:var(--paper);
}
.aboutchap{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:48px;
  padding:48px;
  margin-bottom:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:0 8px 30px rgba(10,22,38,0.04);
  position:relative;
  overflow:hidden;
}
.aboutchap::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:6px;height:100%;
}
.aboutchap--blue::before{background:linear-gradient(180deg, #1E5BA8 0%, #6FB1E0 100%)}
.aboutchap--green::before{background:linear-gradient(180deg, #2E7D32 0%, #66BB6A 100%)}
.aboutchap--amber::before{background:linear-gradient(180deg, #B45309 0%, #F59E0B 100%)}
.aboutchap--purple::before{background:linear-gradient(180deg, #6B21A8 0%, #A855F7 100%)}
.aboutchap--rose::before{background:linear-gradient(180deg, #9F1239 0%, #F472B6 100%)}
.aboutchap--teal::before{background:linear-gradient(180deg, #134E4A 0%, #2DD4BF 100%)}

.aboutchap__meta{
  position:sticky;
  top:120px;
  align-self:start;
}

.aboutchap__num{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:80px;
  line-height:1;
  letter-spacing:-0.04em;
  display:block;
  margin-bottom:24px;
  opacity:0.65;
}
.aboutchap--blue .aboutchap__num{color:var(--blue)}
.aboutchap--green .aboutchap__num{color:#2E7D32}
.aboutchap--amber .aboutchap__num{color:#B45309}
.aboutchap--purple .aboutchap__num{color:#6B21A8}
.aboutchap--rose .aboutchap__num{color:#9F1239}
.aboutchap--teal .aboutchap__num{color:#134E4A}

.aboutchap__icon{
  width:64px;height:64px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  margin-bottom:24px;
  box-shadow:0 8px 20px rgba(10,22,38,0.18);
}
.aboutchap--blue .aboutchap__icon{background:linear-gradient(135deg, #1E5BA8 0%, #6FB1E0 100%);box-shadow:0 8px 20px rgba(30,91,168,0.30)}
.aboutchap--green .aboutchap__icon{background:linear-gradient(135deg, #2E7D32 0%, #66BB6A 100%);box-shadow:0 8px 20px rgba(46,125,50,0.30)}
.aboutchap--amber .aboutchap__icon{background:linear-gradient(135deg, #B45309 0%, #F59E0B 100%);box-shadow:0 8px 20px rgba(180,83,9,0.30)}
.aboutchap--purple .aboutchap__icon{background:linear-gradient(135deg, #6B21A8 0%, #A855F7 100%);box-shadow:0 8px 20px rgba(107,33,168,0.30)}
.aboutchap--rose .aboutchap__icon{background:linear-gradient(135deg, #9F1239 0%, #F472B6 100%);box-shadow:0 8px 20px rgba(159,18,57,0.30)}
.aboutchap--teal .aboutchap__icon{background:linear-gradient(135deg, #134E4A 0%, #2DD4BF 100%);box-shadow:0 8px 20px rgba(19,78,74,0.30)}
.aboutchap__icon svg{width:30px;height:30px}

.aboutchap__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(20px,1.8vw,26px);
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--ink);
  margin:0;
  max-width:22ch;
}

.aboutchap__body p{
  font-family:var(--body);
  font-size:16px;
  line-height:1.78;
  color:var(--ink-2);
  margin:0 0 18px;
  max-width:65ch;
}
.aboutchap__body p:first-child{
  font-size:18px;
  color:var(--ink);
  font-weight:500;
}
.aboutchap__body p:last-child{margin-bottom:0}

@media(max-width:980px){
  .aboutchap{
    grid-template-columns:1fr;
    gap:24px;
    padding:32px;
  }
  .aboutchap__meta{
    position:relative;
    top:auto;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
  }
  .aboutchap__num{font-size:60px;margin-bottom:14px}
  .aboutchap__icon{width:54px;height:54px;margin-bottom:14px}
  .aboutchap__icon svg{width:26px;height:26px}
  .aboutchap__title{font-size:20px}
}
@media(max-width:520px){
  .aboutdoc-intro{padding:50px 0 20px}
  .aboutchaps{padding:20px 0 70px}
  .aboutchap{padding:24px;border-radius:18px;margin-bottom:18px}
  .aboutchap__num{font-size:48px}
  .aboutchap__title{font-size:18px}
  .aboutchap__body p{font-size:15px;line-height:1.7}
  .aboutchap__body p:first-child{font-size:16px}
}


/* =================================================================
   v7 — Mission / Philosophy as two side-by-side feature cards
   Bigger typography, colored icons, gradient-tinted card backgrounds.
   Replaces the old centered .mv-stack treatment.
   ================================================================= */
.aboutmanifesto{
  padding:80px 0 100px;
  background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
}
.aboutmanifesto__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}
.aboutmanifesto__card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  padding:48px;
  position:relative;
  box-shadow:0 12px 36px rgba(10,22,38,0.05);
  overflow:hidden;
  transition:transform 250ms,box-shadow 250ms,border-color 250ms;
}
.aboutmanifesto__card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 50px rgba(10,22,38,0.10);
}
.aboutmanifesto__card::before{
  content:'';
  position:absolute;
  top:-100px;right:-100px;
  width:280px;height:280px;
  border-radius:50%;
  pointer-events:none;
}
.aboutmanifesto__card--mission{
  background:linear-gradient(135deg, #fff 0%, rgba(30,91,168,0.04) 100%);
  border-color:rgba(30,91,168,0.18);
}
.aboutmanifesto__card--mission::before{
  background:radial-gradient(circle, rgba(30,91,168,0.12) 0%, transparent 70%);
}
.aboutmanifesto__card--mission:hover{border-color:rgba(30,91,168,0.40)}

.aboutmanifesto__card--philosophy{
  background:linear-gradient(135deg, #fff 0%, rgba(46,125,50,0.04) 100%);
  border-color:rgba(46,125,50,0.18);
}
.aboutmanifesto__card--philosophy::before{
  background:radial-gradient(circle, rgba(46,125,50,0.12) 0%, transparent 70%);
}
.aboutmanifesto__card--philosophy:hover{border-color:rgba(46,125,50,0.40)}

.aboutmanifesto__card > *{position:relative;z-index:1}

.aboutmanifesto__icon{
  width:64px;height:64px;
  border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  margin-bottom:28px;
}
.aboutmanifesto__card--mission .aboutmanifesto__icon{
  background:linear-gradient(135deg, #1E5BA8 0%, #6FB1E0 100%);
  box-shadow:0 8px 20px rgba(30,91,168,0.30);
}
.aboutmanifesto__card--philosophy .aboutmanifesto__icon{
  background:linear-gradient(135deg, #2E7D32 0%, #66BB6A 100%);
  box-shadow:0 8px 20px rgba(46,125,50,0.30);
}
.aboutmanifesto__icon svg{width:30px;height:30px}

.aboutmanifesto__h{
  font-family:var(--display);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 20px;
}

.aboutmanifesto__body{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.55;
  color:var(--ink);
  margin:0;
  letter-spacing:-0.01em;
}

.aboutmanifesto__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.aboutmanifesto__list li{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(16px,1.3vw,18px);
  line-height:1.55;
  color:var(--ink);
  position:relative;
  padding-left:30px;
  letter-spacing:-0.005em;
}
.aboutmanifesto__list li::before{
  content:'';
  position:absolute;
  left:0;top:13px;
  width:18px;height:2px;
  background:#2E7D32;
  border-radius:2px;
}

@media(max-width:880px){
  .aboutmanifesto{padding:60px 0 80px}
  .aboutmanifesto__grid{grid-template-columns:1fr;gap:18px}
  .aboutmanifesto__card{padding:32px}
  .aboutmanifesto__icon{width:54px;height:54px;margin-bottom:22px}
  .aboutmanifesto__icon svg{width:26px;height:26px}
}
@media(max-width:520px){
  .aboutmanifesto__card{padding:28px;border-radius:18px}
}


/* =================================================================
   v7 — About page neutral styling override
   Strip the colored rails / gradients from chapter cards + manifesto.
   Keep the card layout, but use a clean monochrome treatment.
   ================================================================= */

/* Chapter cards — neutral */
.aboutchap{
  border:1px solid var(--line) !important;
  background:#fff !important;
  box-shadow:0 4px 18px rgba(10,22,38,0.04) !important;
}
.aboutchap::before{
  background:var(--line) !important;
  width:3px !important;
}
.aboutchap--blue::before,
.aboutchap--green::before,
.aboutchap--amber::before,
.aboutchap--purple::before,
.aboutchap--rose::before,
.aboutchap--teal::before{
  background:var(--line) !important;
}

.aboutchap__num,
.aboutchap--blue .aboutchap__num,
.aboutchap--green .aboutchap__num,
.aboutchap--amber .aboutchap__num,
.aboutchap--purple .aboutchap__num,
.aboutchap--rose .aboutchap__num,
.aboutchap--teal .aboutchap__num{
  color:var(--ink-faint) !important;
  opacity:1;
}

.aboutchap__icon,
.aboutchap--blue .aboutchap__icon,
.aboutchap--green .aboutchap__icon,
.aboutchap--amber .aboutchap__icon,
.aboutchap--purple .aboutchap__icon,
.aboutchap--rose .aboutchap__icon,
.aboutchap--teal .aboutchap__icon{
  background:var(--paper-2) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  border:1px solid var(--line);
}

/* Mission / Philosophy cards — neutral */
.aboutmanifesto{
  background:var(--paper) !important;
}
.aboutmanifesto__card,
.aboutmanifesto__card--mission,
.aboutmanifesto__card--philosophy{
  background:#fff !important;
  border:1px solid var(--line) !important;
  box-shadow:0 4px 18px rgba(10,22,38,0.04) !important;
}
.aboutmanifesto__card:hover,
.aboutmanifesto__card--mission:hover,
.aboutmanifesto__card--philosophy:hover{
  border-color:var(--ink-mute,#D1D5DB) !important;
  box-shadow:0 8px 28px rgba(10,22,38,0.07) !important;
}
.aboutmanifesto__card::before,
.aboutmanifesto__card--mission::before,
.aboutmanifesto__card--philosophy::before{
  background:none !important;
}

.aboutmanifesto__card--mission .aboutmanifesto__icon,
.aboutmanifesto__card--philosophy .aboutmanifesto__icon{
  background:var(--paper-2) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
  border:1px solid var(--line);
}

.aboutmanifesto__list li::before{
  background:var(--ink-faint) !important;
}


/* =================================================================
   v7 — About page clean editorial format
   No cards, no numbers, no icons. Just clean stacked headings
   and body paragraphs separated by thin dividers.
   ================================================================= */
.aboutread{
  padding:60px 0 80px;
  background:var(--paper);
}
.aboutread__entry{
  padding:40px 0;
  border-bottom:1px solid var(--line);
}
.aboutread__entry:first-child{padding-top:20px}
.aboutread__entry:last-child{border-bottom:none;padding-bottom:0}

.aboutread__h{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-0.015em;
  line-height:1.3;
  color:var(--ink);
  margin:0 0 20px;
}

.aboutread__p{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
  margin:0;
}

@media(max-width:680px){
  .aboutread{padding:40px 0 60px}
  .aboutread__entry{padding:32px 0}
  .aboutread__h{font-size:19px;margin-bottom:16px}
  .aboutread__p{font-size:15px;line-height:1.72}
}


/* =================================================================
   v7 — About page: subtle blue accents (minimal color)
   Just enough to give the editorial document visual rhythm —
   navy headings + a small blue marker before each section.
   ================================================================= */

/* Headings in navy blue, with a small blue accent bar */
.aboutread__h{
  color:var(--navy) !important;
  position:relative;
  padding-top:18px;
}
.aboutread__h::before{
  content:'';
  display:block;
  width:36px;
  height:3px;
  background:var(--blue);
  border-radius:2px;
  margin-bottom:14px;
  position:absolute;
  top:0;
  left:0;
}

/* First entry: no top padding artifact */
.aboutread__entry:first-child .aboutread__h{padding-top:0}
.aboutread__entry:first-child .aboutread__h::before{position:relative;margin-bottom:18px}

/* About intro section header gets a subtle blue accent on the subtitle */
.aboutdoc-intro__sub{
  color:var(--navy) !important;
  position:relative;
}
.aboutdoc-intro__h{color:var(--blue) !important;letter-spacing:0.12em}

/* Mission / Philosophy icons — subtle blue/teal tint instead of cream */
.aboutmanifesto__card--mission .aboutmanifesto__icon{
  background:rgba(30,91,168,0.10) !important;
  color:var(--blue) !important;
  border:1px solid rgba(30,91,168,0.20) !important;
}
.aboutmanifesto__card--philosophy .aboutmanifesto__icon{
  background:rgba(46,125,50,0.10) !important;
  color:#2E7D32 !important;
  border:1px solid rgba(46,125,50,0.20) !important;
}
.aboutmanifesto__h{color:var(--ink-faint) !important}
.aboutmanifesto__list li::before{background:var(--blue) !important}


/* =================================================================
   v7 — Research page clean editorial format (matches About page)
   No cards, no big numerals, no avatars, no key-fact callouts.
   Just heading + role line + body paragraphs with subtle blue accent.
   ================================================================= */
.researchread{
  padding:60px 0 80px;
  background:var(--paper);
}
.researchread__entry{
  padding:48px 0;
  border-bottom:1px solid var(--line);
}
.researchread__entry:first-child{padding-top:20px}
.researchread__entry:last-child{border-bottom:none;padding-bottom:0}

.researchread__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(22px,2.4vw,28px);
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--navy);
  margin:0 0 6px;
  position:relative;
  padding-top:18px;
}
.researchread__name::before{
  content:'';
  display:block;
  width:36px;
  height:3px;
  background:var(--blue);
  border-radius:2px;
  position:absolute;
  top:0;left:0;
}
.researchread__entry:first-child .researchread__name{padding-top:0}
.researchread__entry:first-child .researchread__name::before{position:relative;margin-bottom:14px}

.researchread__role{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  margin:0 0 22px;
  line-height:1.5;
  max-width:60ch;
}

.researchread__p{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
  margin:0 0 18px;
  max-width:65ch;
}
.researchread__p:last-child{margin-bottom:0}

@media(max-width:680px){
  .researchread{padding:40px 0 60px}
  .researchread__entry{padding:36px 0}
  .researchread__name{font-size:20px}
  .researchread__role{font-size:10px;letter-spacing:0.14em;margin-bottom:18px}
  .researchread__p{font-size:15px;line-height:1.72}
}


/* =================================================================
   v7 — Research mini-nav (quick-jump, true-stick via JS)
   Initial: in flow under the banner. Once scrolled past, sticks to
   the top of the viewport via .is-stuck class (fixed positioning).
   ================================================================= */
.researchnav{
  background:rgba(250,247,240,0.96);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  position:relative;
  z-index:35;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:box-shadow 200ms;
}
.researchnav.is-stuck{
  position:fixed !important;
  top:0;left:0;right:0;
  box-shadow:0 6px 20px rgba(10,22,38,0.10);
  animation:researchnav-slide 240ms cubic-bezier(.2,.8,.2,1);
}
@keyframes researchnav-slide{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}
/* Spacer to prevent layout jump when nav becomes fixed */
.researchnav-spacer{display:none;height:60px}
.researchnav-spacer.is-active{display:block}

.researchnav .wrap{
  display:flex;
  align-items:center;
  gap:18px;
}
.researchnav__label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
  flex-shrink:0;
  font-weight:500;
}
.researchnav__scroller{
  display:flex;
  gap:8px;
  overflow-x:auto;
  flex:1;
  scrollbar-width:none;
  -ms-overflow-style:none;
  scroll-behavior:smooth;
  padding:2px 0;
}
.researchnav__scroller::-webkit-scrollbar{display:none}
.researchnav__link{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:-0.005em;
  color:var(--ink-2);
  background:#fff;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap;
  flex-shrink:0;
  transition:all 200ms;
  text-decoration:none !important;
}
.researchnav__link:hover,
.researchnav__link.is-active{
  background:var(--blue);
  color:#fff !important;
  border-color:var(--blue);
  transform:translateY(-1px);
}

.researchread__entry{scroll-margin-top:90px}

@media(max-width:680px){
  .researchnav{padding:12px 0}
  .researchnav .wrap{gap:12px;flex-direction:column;align-items:flex-start}
  .researchnav__label{padding-left:4px}
  .researchnav__scroller{width:100%}
  .researchnav__link{font-size:12px;padding:7px 12px}
  .researchnav-spacer{height:78px}
}


/* =================================================================
   v7 — Technology page banner (skyscrapers background)
   Same banner pattern as research and about.
   ================================================================= */
body.is-page-technology .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.65) 0%, rgba(6,16,41,0.85) 100%),
    url('../assets/img/Skyscrapers.jpg') center 30% / cover no-repeat !important;
  min-height:560px;
  padding-bottom:100px;
  display:flex;
  flex-direction:column;
}
body.is-page-technology .pagehero::after{
  display:none !important;
}
body.is-page-technology .pagehero__nav{
  margin-bottom:auto;
}
body.is-page-technology .pagehero__inner{
  margin-top:60px;
  margin-bottom:40px;
}
body.is-page-technology .pagehero h1{
  font-size:clamp(56px,9vw,128px) !important;
  letter-spacing:-0.04em !important;
  line-height:0.95 !important;
  margin-bottom:24px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.40);
}
body.is-page-technology .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.is-page-technology .pagehero__lede{
  font-size:clamp(15px,1.25vw,17px);
  color:rgba(255,255,255,0.92);
  max-width:62ch;
  margin:0 auto;
  line-height:1.65;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-technology .pagehero{min-height:440px;padding-bottom:60px}
  body.is-page-technology .pagehero h1{font-size:48px !important}
  body.is-page-technology .pagehero__inner{margin-top:30px}
}


/* =================================================================
   v7 — Products / Ionizers page banner
   Same banner pattern as research / about / technology, using
   the "Prime Water pic.jpg" hero image (wide horizontal product shot).
   ================================================================= */
body.is-page-products .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.55) 0%, rgba(6,16,41,0.85) 100%),
    url('../assets/img/Prime%20Water%20pic.jpg') center 35% / cover no-repeat !important;
  min-height:560px;
  padding-bottom:100px;
  display:flex;
  flex-direction:column;
}
body.is-page-products .pagehero::after{
  display:none !important;
}
body.is-page-products .pagehero__nav{
  margin-bottom:auto;
}
body.is-page-products .pagehero__inner{
  margin-top:60px;
  margin-bottom:40px;
}
body.is-page-products .pagehero h1{
  font-size:clamp(56px,9vw,128px) !important;
  letter-spacing:-0.04em !important;
  line-height:0.95 !important;
  margin-bottom:24px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.40);
}
body.is-page-products .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.is-page-products .pagehero__lede{
  font-size:clamp(15px,1.25vw,17px);
  color:rgba(255,255,255,0.92);
  max-width:62ch;
  margin:0 auto;
  line-height:1.65;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-products .pagehero{min-height:440px;padding-bottom:60px}
  body.is-page-products .pagehero h1{font-size:48px !important}
  body.is-page-products .pagehero__inner{margin-top:30px}
}


/* =================================================================
   v7 — Ionizers-section hero (consistent across products / l-r /
   lv-rv / faucet / filter-replacements pages).
   Uses the same Prime Water pic.jpg backdrop as the products
   overview, with a navy gradient overlay so the H1 + lede sit
   cleanly on top. This gives all 5 pages a unified look.
   ================================================================= */
body.has-banner .pagehero,
body.is-page-lr .pagehero,
body.is-page-lvrv .pagehero,
body.is-page-faucet .pagehero,
body.is-page-filter .pagehero{
  /* Default backdrop = Prime Water pic for products overview.
     Per-page rules below swap in the cleaned 1.png / 2.png / 3.png / 4.png
     banners (no burned-in text, just products on a blue gradient).
     Height tuned to ~420px — feels compact, not page-dominating. */
  background:
    linear-gradient(180deg, rgba(10,37,64,0.55) 0%, rgba(6,16,41,0.85) 100%),
    url('../assets/img/Prime%20Water%20pic.jpg') center 35% / cover no-repeat !important;
  min-height:420px;
  padding-bottom:64px;
  display:flex;
  flex-direction:column;
}

/* Per-page banner backdrops — clean Canva exports, no text burned in.
   Lighter overlay (0.35→0.70) so the products on the banner stay
   visible while keeping the centered H1 + lede readable. */
body.is-page-lr .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.35) 0%, rgba(6,16,41,0.70) 100%),
    url('../assets/img/1.png') center center / cover no-repeat !important;
}
body.is-page-lvrv .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.35) 0%, rgba(6,16,41,0.70) 100%),
    url('../assets/img/2.png') center center / cover no-repeat !important;
}
body.is-page-faucet .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.35) 0%, rgba(6,16,41,0.70) 100%),
    url('../assets/img/3.png') center center / cover no-repeat !important;
}
body.is-page-filter .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.35) 0%, rgba(6,16,41,0.70) 100%),
    url('../assets/img/4.png') center center / cover no-repeat !important;
}
body.has-banner .pagehero::after,
body.is-page-lr .pagehero::after,
body.is-page-lvrv .pagehero::after,
body.is-page-faucet .pagehero::after,
body.is-page-filter .pagehero::after{display:none !important}
body.has-banner .pagehero__nav,
body.is-page-lr .pagehero__nav,
body.is-page-lvrv .pagehero__nav,
body.is-page-faucet .pagehero__nav,
body.is-page-filter .pagehero__nav{margin-bottom:auto}
body.has-banner .pagehero__inner,
body.is-page-lr .pagehero__inner,
body.is-page-lvrv .pagehero__inner,
body.is-page-faucet .pagehero__inner,
body.is-page-filter .pagehero__inner{
  margin-top:32px;
  margin-bottom:20px;
}
body.has-banner .pagehero h1,
body.is-page-lr .pagehero h1,
body.is-page-lvrv .pagehero h1,
body.is-page-faucet .pagehero h1,
body.is-page-filter .pagehero h1{
  font-size:clamp(40px,5.5vw,72px) !important;
  letter-spacing:-0.035em !important;
  line-height:1 !important;
  margin-bottom:16px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.40);
  display:block !important;
}
body.has-banner .pagehero__crumb,
body.is-page-lr .pagehero__crumb,
body.is-page-lvrv .pagehero__crumb,
body.is-page-faucet .pagehero__crumb,
body.is-page-filter .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.has-banner .pagehero__crumb a,
body.is-page-lr .pagehero__crumb a,
body.is-page-lvrv .pagehero__crumb a,
body.is-page-faucet .pagehero__crumb a,
body.is-page-filter .pagehero__crumb a{color:rgba(255,255,255,0.85)}
body.has-banner .pagehero__crumb .sep,
body.is-page-lr .pagehero__crumb .sep,
body.is-page-lvrv .pagehero__crumb .sep,
body.is-page-faucet .pagehero__crumb .sep,
body.is-page-filter .pagehero__crumb .sep{opacity:0.5}
body.has-banner .pagehero__lede,
body.is-page-lr .pagehero__lede,
body.is-page-lvrv .pagehero__lede,
body.is-page-faucet .pagehero__lede,
body.is-page-filter .pagehero__lede{
  font-size:clamp(14px,1.1vw,15.5px);
  color:rgba(255,255,255,0.92);
  max-width:60ch;
  margin:0 auto;
  line-height:1.55;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
  display:block !important;
}
/* Legacy inline banner element (no longer used) */
body.has-banner .page-banner,
body.is-page-lr .page-banner,
body.is-page-lvrv .page-banner,
body.is-page-faucet .page-banner,
body.is-page-filter .page-banner{display:none !important}

@media(max-width:680px){
  body.has-banner .pagehero,
  body.is-page-lr .pagehero,
  body.is-page-lvrv .pagehero,
  body.is-page-faucet .pagehero,
  body.is-page-filter .pagehero{min-height:340px;padding-bottom:40px}
  body.has-banner .pagehero h1,
  body.is-page-lr .pagehero h1,
  body.is-page-lvrv .pagehero h1,
  body.is-page-faucet .pagehero h1,
  body.is-page-filter .pagehero h1{font-size:38px !important;margin-bottom:12px !important}
  body.has-banner .pagehero__inner,
  body.is-page-lr .pagehero__inner,
  body.is-page-lvrv .pagehero__inner,
  body.is-page-faucet .pagehero__inner,
  body.is-page-filter .pagehero__inner{margin-top:20px}
}


/* =================================================================
   v7 — Certifications page banner
   Same pattern as products / technology / about / research, using
   the "cert.jpg" image (medical icons + stethoscope).
   ================================================================= */
body.is-page-certifications .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.62) 0%, rgba(6,16,41,0.88) 100%),
    url('../assets/img/cert.jpg') center 40% / cover no-repeat !important;
  min-height:560px;
  padding-bottom:100px;
  display:flex;
  flex-direction:column;
}
body.is-page-certifications .pagehero::after{
  display:none !important;
}
body.is-page-certifications .pagehero__nav{
  margin-bottom:auto;
}
body.is-page-certifications .pagehero__inner{
  margin-top:60px;
  margin-bottom:40px;
}
body.is-page-certifications .pagehero h1{
  font-size:clamp(56px,9vw,128px) !important;
  letter-spacing:-0.04em !important;
  line-height:0.95 !important;
  margin-bottom:24px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.40);
}
body.is-page-certifications .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.is-page-certifications .pagehero__lede{
  font-size:clamp(15px,1.25vw,17px);
  color:rgba(255,255,255,0.92);
  max-width:62ch;
  margin:0 auto;
  line-height:1.65;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-certifications .pagehero{min-height:440px;padding-bottom:60px}
  body.is-page-certifications .pagehero h1{font-size:48px !important}
  body.is-page-certifications .pagehero__inner{margin-top:30px}
}


/* =================================================================
   v7 — Book Demo page banner
   Kitchen photo (Prime-R_with_kitchen_photo.jpg) — same pattern as
   products / technology / about / research / certifications.
   ================================================================= */
body.is-page-book-demo .pagehero{
  background:
    linear-gradient(180deg, rgba(10,37,64,0.62) 0%, rgba(6,16,41,0.88) 100%),
    url('../assets/img/Prime-R_with_kitchen_photo.jpg') center 35% / cover no-repeat !important;
  min-height:560px;
  padding-bottom:100px;
  display:flex;
  flex-direction:column;
}
body.is-page-book-demo .pagehero::after{
  display:none !important;
}
body.is-page-book-demo .pagehero__nav{
  margin-bottom:auto;
}
body.is-page-book-demo .pagehero__inner{
  margin-top:60px;
  margin-bottom:40px;
}
body.is-page-book-demo .pagehero h1{
  font-size:clamp(56px,9vw,128px) !important;
  letter-spacing:-0.04em !important;
  line-height:0.95 !important;
  margin-bottom:24px !important;
  color:#fff !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.40);
}
body.is-page-book-demo .pagehero__crumb{
  margin-bottom:28px;
  color:rgba(255,255,255,0.85);
}
body.is-page-book-demo .pagehero__lede{
  font-size:clamp(15px,1.25vw,17px);
  color:rgba(255,255,255,0.92);
  max-width:62ch;
  margin:0 auto;
  line-height:1.65;
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-book-demo .pagehero{min-height:440px;padding-bottom:60px}
  body.is-page-book-demo .pagehero h1{font-size:48px !important}
  body.is-page-book-demo .pagehero__inner{margin-top:30px}
}


/* =================================================================
   v7 — Technology mini-nav (quick-jump, true-stick via JS)
   Mirror of .researchnav — sticky pill nav under banner.
   ================================================================= */
.technav{
  background:rgba(250,247,240,0.96);
  border-bottom:1px solid var(--line);
  padding:18px 0;
  position:relative;
  z-index:35;
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  transition:box-shadow 200ms;
}
.technav.is-stuck{
  position:fixed !important;
  top:0;left:0;right:0;
  box-shadow:0 6px 20px rgba(10,22,38,0.10);
  animation:technav-slide 240ms cubic-bezier(.2,.8,.2,1);
}
@keyframes technav-slide{
  from{transform:translateY(-100%)}
  to{transform:translateY(0)}
}
.technav-spacer{display:none;height:60px}
.technav-spacer.is-active{display:block}

.technav .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.technav__label{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.technav__arrow{
  color:var(--blue);
  font-size:14px;
  font-weight:400;
  transform:translateY(-1px);
}
.technav__list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
  list-style:none;
  margin:0;
  padding:0;
}
.technav__link{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  letter-spacing:-0.005em;
  color:var(--ink-2);
  background:#fff;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:999px;
  white-space:nowrap;
  transition:all 200ms;
  text-decoration:none !important;
  display:inline-block;
}
.technav__link:hover,
.technav__link.is-active{
  background:var(--blue);
  color:#fff !important;
  border-color:var(--blue);
  transform:translateY(-1px);
}

@media(max-width:680px){
  .technav{padding:12px 0}
  .technav__list{gap:6px}
  .technav__link{font-size:12px;padding:7px 12px}
  .technav-spacer{height:78px}
  .technav__label{display:none}
}


/* =================================================================
   v7 — Technology editorial body (.techread)
   Clean stacked document layout matching .aboutread / .researchread.
   Subtle blue accent bar above each entry title.
   ================================================================= */
.techread{
  padding:60px 0 80px;
  background:var(--paper);
}
.techread__entry{
  padding:52px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:90px;
}
.techread__entry:first-child{padding-top:24px}
.techread__entry:last-child{border-bottom:none;padding-bottom:0}

.techread__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(26px,3vw,36px);
  letter-spacing:-0.02em;
  line-height:1.18;
  color:var(--navy);
  margin:0 0 20px;
  position:relative;
  padding-top:18px;
}
.techread__title::before{
  content:'';
  display:block;
  width:36px;
  height:3px;
  background:var(--blue);
  border-radius:2px;
  position:absolute;
  top:0;left:0;
}
.techread__entry:first-child .techread__title{padding-top:0}
.techread__entry:first-child .techread__title::before{position:relative;margin-bottom:14px}

.techread__sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  margin:0 0 18px;
  line-height:1.5;
}
.techread__entry > p{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
  margin:0 0 20px;
  max-width:68ch;
}
.techread__close{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
  margin:24px 0 0;
  max-width:68ch;
  font-style:italic;
  padding-left:16px;
  border-left:3px solid var(--blue);
}

.techread__list{
  margin:0 0 22px;
  padding-left:24px;
  max-width:72ch;
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
}
.techread__list li{
  margin-bottom:14px;
  padding-left:6px;
}
.techread__list li:last-child{margin-bottom:0}
.techread__list li strong{
  color:var(--navy);
  font-weight:600;
}
.techread__list--bullet{
  list-style:disc;
}
.techread__list--bullet li::marker{color:var(--blue)}

ol.techread__list{
  list-style:decimal;
}
ol.techread__list li::marker{
  color:var(--blue);
  font-weight:600;
  font-family:var(--display);
}

@media(max-width:680px){
  .techread{padding:40px 0 60px}
  .techread__entry{padding:36px 0}
  .techread__title{font-size:22px}
  .techread__sub{font-size:10px;letter-spacing:0.14em;margin-bottom:14px}
  .techread__entry > p,
  .techread__list,
  .techread__close{font-size:15px;line-height:1.72}
  .techread__list{padding-left:20px}
}

/* ── Plates Chamber overview (top of Water Cell Chamber section) ── */
.plate-chamber{
  margin:0 0 44px;
  padding:0;
}
.plate-chamber__eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0 0 10px;
}
.plate-chamber__lede{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 28px;
  max-width:68ch;
}
.plate-gallery{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.plate-gallery__item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:18px 10px 16px;
  background:linear-gradient(180deg,#f5fbff 0%,#eaf3fb 100%);
  border:1px solid #dce6f0;
  border-radius:12px;
  transition:transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.plate-gallery__item:hover{
  transform:translateY(-3px);
  border-color:var(--blue);
  box-shadow:0 10px 28px rgba(36,107,179,0.14);
}
.plate-gallery__item img{
  display:block;
  width:100%;
  max-width:140px;
  height:auto;
  object-fit:contain;
}
.plate-gallery__count{
  font-family:var(--display);
  font-size:30px;
  font-weight:700;
  color:var(--navy);
  line-height:1;
  letter-spacing:-0.02em;
  margin-top:6px;
}
.plate-gallery__label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
}

/* Solid vs Mesh comparison strip */
.electrode-compare{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin:0;
}
.electrode-compare__item{
  margin:0;
  position:relative;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 12px rgba(10,22,38,0.04);
  transition:transform 280ms ease, box-shadow 280ms ease;
}
.electrode-compare__item:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,22,38,0.10);
}
.electrode-compare__item img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.electrode-compare__item figcaption{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:#fafcff;
}
.electrode-compare__tag{
  font-family:var(--display);
  font-size:18px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:0.04em;
}
.electrode-compare__name{
  font-family:var(--body);
  font-size:13px;
  font-weight:500;
  color:var(--ink-2);
  line-height:1.4;
}

@media(max-width:880px){
  .plate-gallery{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:560px){
  .plate-gallery{grid-template-columns:repeat(2, 1fr); gap:10px}
  .plate-gallery__item{padding:14px 8px 12px}
  .plate-gallery__count{font-size:24px}
  .electrode-compare{grid-template-columns:1fr}
  .electrode-compare__item figcaption{padding:12px 14px; gap:10px}
  .electrode-compare__tag{font-size:16px}
}

/* Inline figures from the PDF — visuals/diagrams that go with each section */
.techread__figs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
  margin:0 0 32px;
  max-width:none;
}
.techread__figs--single{
  grid-template-columns:1fr;
  max-width:760px;
}
.techread__fig{
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(10,22,38,0.04);
  transition:transform 280ms ease, box-shadow 280ms ease;
}
.techread__fig:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,22,38,0.10);
}
.techread__fig img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}
@media(max-width:680px){
  .techread__figs{grid-template-columns:1fr;gap:12px;margin-bottom:24px}
  .techread__fig{border-radius:8px}
}

/* Cleaning filter intro: bottle photo + warning text side by side */
.techread__intro{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:28px;
  align-items:start;
  margin:0 0 36px;
  padding:24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 2px 12px rgba(10,22,38,0.04);
}
.techread__fig--inline{
  margin:0;
  background:transparent;
  border:none;
  box-shadow:none;
}
.techread__fig--inline img{background:transparent}
.techread__intro-body p{
  margin:0 0 12px;
  font-family:var(--body);
  font-size:clamp(15px,1.1vw,16px);
  line-height:1.7;
  color:var(--ink-2);
}
.techread__intro-body p:last-child{margin-bottom:0}
.techread__heads-up{
  font-family:var(--display) !important;
  font-weight:700 !important;
  font-size:clamp(15px,1.2vw,17px) !important;
  letter-spacing:0.01em;
  color:#c0252e !important;
  text-transform:uppercase;
  margin:0 0 12px !important;
  line-height:1.35 !important;
}
.techread__heads-up--alt{margin-top:18px !important}

/* Diagram with caption */
.techread__fig--diagram{
  margin:0 0 28px;
  max-width:760px;
}
.techread__fig--diagram figcaption{
  padding:14px 18px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--ink-soft);
  background:#fafafa;
  border-top:1px solid var(--line);
  text-transform:uppercase;
  line-height:1.6;
}

/* Numbered cleaning steps — slightly emphasised */
.techread__list--steps{
  counter-reset:step;
  list-style:none;
  padding-left:0;
  max-width:72ch;
}
.techread__list--steps li{
  position:relative;
  padding:14px 0 14px 56px;
  margin-bottom:0;
  border-bottom:1px solid var(--line);
  counter-increment:step;
}
.techread__list--steps li:last-child{border-bottom:none}
.techread__list--steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:14px;
  width:36px;
  height:36px;
  background:var(--blue);
  color:#fff;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  line-height:1;
}

@media(max-width:680px){
  .techread__intro{
    grid-template-columns:1fr;
    gap:18px;
    padding:18px;
  }
  .techread__fig--inline{max-width:160px;margin:0 auto}
  .techread__list--steps li{padding-left:48px}
  .techread__list--steps li::before{width:32px;height:32px;font-size:13px}
}


/* =================================================================
   v7 — Technology feature cards (.techfeat)
   Photo on one side, big stat callout + heading + body text on other.
   Replaces the old image-with-text-overlay banners.
   ================================================================= */
.techfeat{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin:0 0 48px;
  padding:32px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 2px 14px rgba(10,22,38,0.05);
  transition:transform 280ms ease, box-shadow 280ms ease;
}
.techfeat:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(10,22,38,0.10);
}
/* Reverse modifier kept for backward-compat but is now a no-op:
   image always stacks on top, body below, matching the source brief. */
.techfeat--reverse .techfeat__photo,
.techfeat--reverse .techfeat__body{order:initial}

.techfeat--dark{
  background:linear-gradient(135deg, #0a2540 0%, #061029 100%);
  border-color:#0a2540;
  color:#fff;
}
.techfeat--dark .techfeat__eyebrow{color:rgba(255,255,255,0.65)}
.techfeat--dark .techfeat__num{color:#5eb8ff}
.techfeat--dark .techfeat__unit,
.techfeat--dark .techfeat__tag,
.techfeat--dark .techfeat__body p{color:rgba(255,255,255,0.92)}

.techfeat__photo{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  background:#f5f3ee;
  border:1px solid var(--line);
  width:100%;
  max-height:420px;
}
.techfeat--dark .techfeat__photo{border-color:rgba(255,255,255,0.12)}
.techfeat__photo img{
  display:block;
  width:100%;
  height:100%;
  max-height:420px;
  object-fit:cover;
}

.techfeat__body{min-width:0}
.techfeat__eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  margin:0 0 14px;
  line-height:1.4;
}
.techfeat__stat{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--navy);
  margin:0 0 10px;
  font-size:clamp(20px,2vw,24px);
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.techfeat__num{
  font-size:clamp(48px,6vw,76px);
  color:var(--blue);
  letter-spacing:-0.04em;
  line-height:0.9;
}
.techfeat__num--word{
  font-size:clamp(36px,4.5vw,56px);
  color:var(--blue);
}
.techfeat__pct{font-size:0.6em;margin-left:2px}
.techfeat__unit{
  font-size:clamp(15px,1.4vw,20px);
  color:var(--ink-2);
  font-weight:500;
}
.techfeat__tag{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(13px,1.05vw,15px);
  color:var(--ink-soft);
  letter-spacing:0.005em;
  margin:0 0 18px;
}
.techfeat__body p{
  font-family:var(--body);
  font-size:clamp(14px,1.05vw,15px);
  line-height:1.74;
  color:var(--ink-2);
  margin:0 0 14px;
}
.techfeat__body p:last-child{margin-bottom:0}

.techfeat__certs{
  list-style:none;
  padding:0;
  margin:0;
}
.techfeat__certs li{
  font-family:var(--body);
  font-size:14px;
  line-height:1.65;
  color:var(--ink-2);
  padding:10px 0;
  border-bottom:1px dashed var(--line);
}
.techfeat__certs li:last-child{border-bottom:none}
.techfeat__certs li strong{color:var(--navy);font-weight:600;display:block;margin-bottom:2px}

@media(max-width:880px){
  .techfeat,
  .techfeat--reverse{
    grid-template-columns:1fr;
    gap:24px;
    padding:24px;
  }
  .techfeat--reverse .techfeat__photo{order:1}
  .techfeat--reverse .techfeat__body{order:2}
}
@media(max-width:680px){
  .techfeat{margin-bottom:32px;padding:20px;border-radius:10px}
  .techfeat__num{font-size:48px}
  .techfeat__num--word{font-size:32px}
}


/* =================================================================
   v7 — Filter cartridge diagram (HTML labels around photo)
   ================================================================= */
.filterdiagram{
  display:grid;
  grid-template-columns:200px 1fr 200px;
  gap:24px;
  align-items:center;
  margin:0 0 32px;
  padding:32px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
}
.filterdiagram__cart{}
.filterdiagram__name{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.02em;
  color:var(--navy);
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:2px solid var(--blue);
  text-transform:uppercase;
}
.filterdiagram__layers{
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:layer;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.04em;
}
.filterdiagram__layers li{
  counter-increment:layer;
  position:relative;
  padding:6px 0 6px 24px;
  color:var(--ink-2);
  border-bottom:1px dashed var(--line);
  line-height:1.4;
}
.filterdiagram__layers li:last-child{border-bottom:none}
.filterdiagram__layers li::before{
  content:counter(layer);
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:18px;height:18px;
  background:var(--blue);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:600;
}
.filterdiagram__photo{
  margin:0;
  background:#f5f3ee;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--line);
}
.filterdiagram__photo img{
  display:block;
  width:100%;
  height:auto;
}

/* Standalone tech-photo (UV Light section etc.) — image floated on its own,
   not paired with a body grid like the .techfeat blocks */
.techfeat__photo--standalone{
  margin:0 0 28px;
  padding:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 14px rgba(10,22,38,0.05);
  max-width:760px;
}
.techfeat__photo--standalone img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:cover;
}

/* Order-form right-rail: dual CTA pattern (Reserve primary + Submit secondary) */
.cfg__btn-sub{
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink-faint);
  margin:0 0 14px;
  text-align:center;
  line-height:1.4;
}
.cfg__or{
  display:flex;
  align-items:center;
  gap:12px;
  margin:6px 0 14px;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.18em;
}
.cfg__or::before, .cfg__or::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}
.cfg__submit-btn{
  width:100%;
  background:transparent;
  border:1.5px solid var(--navy);
  color:var(--navy);
  padding:14px 22px;
  border-radius:999px;
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.005em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:6px;
  transition:all 200ms ease;
}
.cfg__submit-btn:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-1px);
}
.cfg__field-error{
  outline:2px solid #e53935 !important;
  outline-offset:2px;
}

/* Compact bullet list for technology section copy (Drainage, Self-Cleaning, Auto-Diagnosis) */
.tech-list{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  background:#fff;
  border:1px solid #e6ebf3;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(10,22,38,0.04);
}
.tech-list__item{
  padding:18px 24px;
  border-bottom:1px solid #f1f4f9;
}
.tech-list__item:last-child{border-bottom:none}
.tech-list__title{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  color:var(--navy);
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:-0.005em;
}
.tech-list__title::before{
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--blue);
  flex-shrink:0;
}
.tech-list__body{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.65;
  margin:0 0 0 16px;
}
@media(max-width:560px){
  .tech-list__item{padding:14px 18px}
  .tech-list__body{margin-left:14px}
}

/* Premium filtration system hero diagram (replaces the old custom layered cartridge HTML) */
.filter-hero{
  margin:0 0 36px;
  padding:24px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 2px 14px rgba(10,22,38,0.05);
}
.filter-hero img{
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  margin:0 auto;
  object-fit:contain;
}
@media(max-width:560px){
  .filter-hero{padding:16px 14px}
}

.filterintro{
  margin:0 0 36px;
  max-width:78ch;
}
.filterintro p{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
  margin:0 0 16px;
}

@media(max-width:880px){
  .filterdiagram{
    grid-template-columns:1fr;
    gap:20px;
    padding:20px;
  }
}


/* =================================================================
   v7 — Filter media rows (GAC, Tourmaline, Vitamin Ball)
   ================================================================= */
.filtermedia{margin:0 0 36px}
.filtermedia__row{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:24px;
  align-items:start;
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.filtermedia__row:last-child{border-bottom:none}
.filtermedia__photo{
  margin:0;
  border-radius:10px;
  overflow:hidden;
  background:#f5f3ee;
  border:1px solid var(--line);
}
.filtermedia__photo img{display:block;width:100%;height:auto}
.filtermedia__body h4{
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
  color:var(--blue);
  margin:0 0 12px;
}
.filtermedia__body p{
  font-family:var(--body);
  font-size:clamp(14px,1.05vw,15px);
  line-height:1.74;
  color:var(--ink-2);
  margin:0 0 12px;
  max-width:62ch;
}
.filtermedia__body p:last-child{margin-bottom:0}

@media(max-width:680px){
  .filtermedia__row{grid-template-columns:1fr;gap:14px}
  .filtermedia__photo{max-width:140px}
}


/* =================================================================
   v7 — Cleaning procedure phase strip (pure CSS, no images)
   ================================================================= */
.phasestrip{
  list-style:none;
  padding:0;
  margin:0 0 36px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  counter-reset:phase;
}
.phasestrip__item{
  position:relative;
  padding:18px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:transform 200ms;
}
.phasestrip__item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,22,38,0.08)}
.phasestrip__item:not(:last-child)::after{
  content:'';
  position:absolute;
  right:-12px;
  top:50%;
  width:14px;
  height:2px;
  background:var(--blue);
  z-index:1;
}
.phasestrip__phase{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
}
.phasestrip__label{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  letter-spacing:-0.005em;
  color:var(--navy);
  line-height:1.35;
}
.phasestrip__time{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin-top:auto;
  padding-top:6px;
  border-top:1px dashed var(--line);
}

@media(max-width:880px){
  .phasestrip{grid-template-columns:repeat(2, 1fr);gap:8px}
  .phasestrip__item:not(:last-child)::after{display:none}
}
@media(max-width:480px){
  .phasestrip{grid-template-columns:1fr}
}


/* =================================================================
   v7 — Under-counter install feature row (Products page)
   Twin-spout faucet photo + text describing the optional install.
   ================================================================= */
.undercounter{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:48px;
  align-items:center;
  margin:60px 0 0;
  padding:36px;
  background:linear-gradient(135deg, #f7faff 0%, #fafafa 100%);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 2px 14px rgba(10,22,38,0.04);
  transition:box-shadow 280ms ease;
}
.undercounter:hover{
  box-shadow:0 10px 28px rgba(10,22,38,0.08);
}

.undercounter__photo{
  position:relative;
  margin:0;
  /* Blue-gradient backdrop matches the .product-card .pic pattern so
     the chrome / black / silver unit pops with proper contrast instead
     of fading into a flat white card. */
  background:linear-gradient(135deg, var(--blue-pale) 0%, var(--blue-soft) 100%);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:1 / 1.1;
  overflow:hidden;
}
.undercounter__photo::before{
  /* Soft radial halo behind the unit — the "spotlight" effect that
     makes the product look hero. */
  content:'';
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,91,168,0.20) 0%, transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:0;
}
.undercounter__photo > *{position:relative;z-index:1}
.undercounter__photo img{
  display:block;
  width:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(10,22,38,0.15));
}
.undercounter__chip{
  position:absolute;
  top:14px;
  left:14px;
  padding:6px 10px;
  background:var(--blue);
  color:#fff;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:999px;
}

.undercounter__body{min-width:0}
.undercounter__eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  margin:0 0 12px;
}
.undercounter__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(24px,2.4vw,32px);
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--navy);
  margin:0 0 6px;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
}
.undercounter__price{
  font-family:var(--mono);
  font-weight:600;
  font-size:14px;
  color:var(--blue);
  background:rgba(20,103,236,0.08);
  padding:5px 11px;
  border-radius:6px;
  letter-spacing:0.01em;
  white-space:nowrap;
}
.undercounter__sub{
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  color:var(--ink-soft);
  margin:0 0 18px;
}
.undercounter__body > p{
  font-family:var(--body);
  font-size:clamp(14px,1.05vw,15px);
  line-height:1.74;
  color:var(--ink-2);
  margin:0 0 18px;
  max-width:60ch;
}
.undercounter__list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}
.undercounter__list li{
  font-family:var(--body);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  padding-left:24px;
  position:relative;
}
.undercounter__list li::before{
  content:'';
  position:absolute;
  left:0;top:8px;
  width:8px;height:8px;
  background:var(--blue);
  border-radius:50%;
}
.undercounter__list li strong{
  color:var(--navy);
  font-weight:600;
}

@media(max-width:880px){
  .undercounter{
    grid-template-columns:1fr;
    gap:28px;
    padding:24px;
  }
  .undercounter__photo{
    max-width:280px;
    margin:0 auto;
    aspect-ratio:1 / 1;
  }
}
@media(max-width:480px){
  .undercounter{margin-top:40px;padding:18px}
  .undercounter__title{font-size:22px}
}


/* =================================================================
   v7 — Full specifications grid (Products page)
   Three side-by-side spec blocks, each with its own table.
   Clean editorial table style — thin row dividers, mono labels.
   ================================================================= */
.specgrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:0 0 28px;
}
.specblock{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 24px;
  box-shadow:0 2px 12px rgba(10,22,38,0.04);
  transition:box-shadow 280ms ease, transform 280ms ease;
}
.specblock:hover{
  box-shadow:0 8px 22px rgba(10,22,38,0.08);
  transform:translateY(-2px);
}
.specblock__title{
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  letter-spacing:0.005em;
  color:var(--navy);
  margin:0 0 18px;
  padding-bottom:14px;
  border-bottom:2px solid var(--blue);
  text-transform:uppercase;
  position:relative;
}
.specblock__title::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:36px;height:2px;
  background:var(--navy);
}

.specsheet{
  width:100%;
  border-collapse:collapse;
  font-family:var(--body);
  font-size:13px;
  line-height:1.55;
}
.specsheet th{
  text-align:left;
  font-family:var(--mono);
  font-weight:500;
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding:11px 12px 11px 0;
  vertical-align:top;
  width:48%;
  border-bottom:1px dashed var(--line);
}
.specsheet td{
  padding:11px 0 11px 12px;
  color:var(--ink-2);
  vertical-align:top;
  border-bottom:1px dashed var(--line);
  font-weight:500;
}
.specsheet tr:last-child th,
.specsheet tr:last-child td{border-bottom:none}

.specfoot{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--ink-faint);
  text-align:center;
  text-transform:uppercase;
  margin:24px 0 0;
  padding-top:20px;
  border-top:1px solid var(--line);
}

@media(max-width:1024px){
  .specgrid{grid-template-columns:repeat(2, 1fr)}
  .specblock:nth-child(3){grid-column:1 / -1;max-width:520px;margin:0 auto;width:100%}
}
@media(max-width:680px){
  .specgrid{grid-template-columns:1fr;gap:16px}
  .specblock{padding:22px 18px}
  .specblock:nth-child(3){max-width:none}
  .specsheet{font-size:13px}
  .specsheet th{font-size:10px;width:auto}
  .specsheet th, .specsheet td{display:block;padding:6px 0}
  .specsheet tr{display:block;padding:10px 0;border-bottom:1px dashed var(--line)}
  .specsheet tr:last-child{border-bottom:none}
  .specsheet tr th, .specsheet tr td{border-bottom:none}
}


/* =================================================================
   v7 — Home page · NEW sections built from founder's docs
   Order: Korean story → Ionized water → pH guide → Why us → Doctors → Certs
   ================================================================= */

/* Shared utility — secondary ghost-blue button */
.btn--ghost-blue{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:1.5px solid var(--blue);
  color:var(--blue);
  padding:11px 22px;
  border-radius:999px;
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  letter-spacing:-0.005em;
  text-decoration:none !important;
  transition:all 220ms;
}
.btn--ghost-blue:hover{
  background:var(--blue);
  color:#fff !important;
  transform:translateY(-1px);
}


/* ----------- Korean innovation story ----------- */
.korean-story{
  padding:90px 0;
  background:var(--paper);
}
.korean-story__inner{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:64px;
  align-items:center;
}
.korean-story__media{
  position:relative;
  /* Pumped from the previous near-white gradient to the same blue
     gradient used on product cards so the hero unit feels staged
     instead of floating on a flat surface. */
  background:linear-gradient(135deg, var(--blue-pale) 0%, var(--blue-soft) 100%);
  border-radius:20px;
  border:1px solid var(--line);
  aspect-ratio:1 / 1.05;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.korean-story__media::before{
  /* Soft radial halo behind the unit — same spotlight treatment as
     .undercounter__photo and .product-card .pic. */
  content:'';
  position:absolute;
  inset:14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(30,91,168,0.22) 0%, transparent 70%);
  filter:blur(28px);
  pointer-events:none;
  z-index:0;
}
.korean-story__media > *{position:relative;z-index:1}
.korean-story__media img{
  display:block;
  max-width:80%;
  max-height:85%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 14px 32px rgba(10,22,38,0.15));
}
.korean-story__chip{
  position:absolute;
  bottom:18px;
  left:18px;
  padding:7px 14px;
  background:#fff;
  border:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-radius:999px;
  font-weight:600;
}
.korean-story__copy h2{margin:14px 0 24px}
.korean-story__copy p{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,16px);
  line-height:1.78;
  color:var(--ink-2);
  margin:0 0 18px;
  max-width:58ch;
}
.korean-story__copy .btn--ghost-blue{margin-top:14px}

@media(max-width:880px){
  .korean-story{padding:60px 0}
  .korean-story__inner{grid-template-columns:1fr;gap:36px}
  .korean-story__media{aspect-ratio:1 / 0.85;max-width:520px;margin:0 auto}
}


/* ----------- The Power of Ionized Water — 4 cards ----------- */
.ionized{
  padding:90px 0;
  background:var(--paper-2, #f5f3ee);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ionized__head{
  text-align:center;
  margin:0 auto 56px;
  max-width:760px;
}
.ionized__head h2{margin:14px 0 18px}
.ionized__head .lede{
  font-family:var(--body);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}
.ionized__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.ionized-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:32px 26px;
  transition:transform 280ms, box-shadow 280ms;
  position:relative;
  overflow:hidden;
}
.ionized-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 28px rgba(10,22,38,0.08);
}
.ionized-card__num{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  font-weight:600;
  color:var(--blue);
  background:rgba(20,103,236,0.08);
  padding:5px 11px;
  border-radius:6px;
  margin:0 0 18px;
}
.ionized-card h3{
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0 0 14px;
  line-height:1.3;
}
.ionized-card p{
  font-family:var(--body);
  font-size:14px;
  line-height:1.72;
  color:var(--ink-2);
  margin:0;
}
.ionized__foot{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-align:center;
  margin:40px 0 0;
}

@media(max-width:1024px){
  .ionized__grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:560px){
  .ionized{padding:60px 0}
  .ionized__grid{grid-template-columns:1fr}
}


/* ----------- pH guide · 5 tiers ----------- */
.phguide{
  padding:100px 0;
  background:var(--paper);
}
.phguide__head{
  text-align:center;
  margin:0 auto 60px;
  max-width:780px;
}
.phguide__head h2{margin:14px 0 18px}
.phguide__head .lede{
  font-family:var(--body);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}

.phguide__list{
  list-style:none;
  padding:0;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
  max-width:1280px;
}
.phguide-item{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;
  transition:box-shadow 280ms, transform 280ms;
  position:relative;
  overflow:hidden;
}
.phguide-item::before{
  content:'';
  position:absolute;
  left:0;top:0;right:0;
  height:5px;
  background:var(--ph-color, var(--blue));
}
.phguide-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 28px rgba(10,22,38,0.10);
}
.phguide-item--alk-strong{--ph-color:#0a4d8c}
.phguide-item--alk-drink{--ph-color:#1e5ba8}
.phguide-item--pure{--ph-color:#5b9dd9}
.phguide-item--acid{--ph-color:#d99a4f}
.phguide-item--acid-strong{--ph-color:#c0252e}

.phguide-item__num{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:30px 24px 22px;
  text-align:center;
  border-bottom:1px dashed var(--line);
  background:linear-gradient(180deg, rgba(20,103,236,0.03) 0%, transparent 100%);
}
.phguide-item__ph{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,2.6vw,36px);
  letter-spacing:-0.02em;
  line-height:1;
  color:var(--ph-color, var(--navy));
}
.phguide-item__label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  line-height:1.4;
}
.phguide-item__body{
  padding:22px 24px 28px;
  flex:1;
}
.phguide-item__body h3{
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.005em;
  color:var(--navy);
  margin:0 0 12px;
  line-height:1.35;
}
.phguide-item__body p{
  font-family:var(--body);
  font-size:14px;
  line-height:1.66;
  color:var(--ink-2);
  margin:0;
}

@media(max-width:1280px){
  .phguide__list{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:760px){
  .phguide__list{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:480px){
  .phguide{padding:60px 0}
  .phguide__list{grid-template-columns:1fr;gap:14px}
}


/* ----------- Why Prime Water · stat cards ----------- */
.whyus{
  padding:100px 0;
  background:linear-gradient(180deg, #061029 0%, #0a2540 100%);
  color:#fff;
  text-align:center;
}
.whyus__head{
  max-width:780px;
  margin:0 auto 56px;
}
.whyus__head .eyebrow{color:rgba(94,184,255,0.85)}
.whyus__head h2{
  color:#fff !important;
  margin:14px 0 18px;
  font-size:clamp(36px,4.5vw,56px) !important;
  line-height:1.05 !important;
}
.whyus__head h2 .accent{color:#5eb8ff}
.whyus__head .lede{
  font-family:var(--body);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  color:rgba(255,255,255,0.85);
  margin:0;
}
.whyus__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.whyus-card{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding:32px 26px;
  text-align:left;
  transition:background 280ms, transform 280ms;
}
.whyus-card:hover{
  background:rgba(255,255,255,0.08);
  transform:translateY(-3px);
}
.whyus-card__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(36px,4vw,48px);
  letter-spacing:-0.03em;
  line-height:1;
  color:#5eb8ff;
  margin:0 0 4px;
}
.whyus-card__label{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  color:rgba(255,255,255,0.6);
  margin:0 0 18px;
}
.whyus-card p{
  font-family:var(--body);
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,0.85);
  margin:0;
}
.whyus__foot{
  font-family:var(--body);
  font-size:14px;
  color:rgba(255,255,255,0.65);
  text-align:center;
  margin:40px auto 0;
  max-width:62ch;
  line-height:1.6;
}

@media(max-width:1024px){
  .whyus__grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:560px){
  .whyus{padding:60px 0}
  .whyus__grid{grid-template-columns:1fr}
}


/* ----------- Doctors quotes — 6 cards ----------- */
.doctors{
  padding:100px 0;
  background:var(--paper);
}
.doctors__head{
  text-align:center;
  max-width:780px;
  margin:0 auto 56px;
}
.doctors__head h2{margin:14px 0 18px}
.doctors__head .lede{
  font-family:var(--body);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}
.doctors__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.doctor-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:32px 28px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform 280ms, box-shadow 280ms;
}
.doctor-card::before{
  content:'\201C';
  position:absolute;
  top:14px;left:24px;
  font-family:Georgia, serif;
  font-size:64px;
  line-height:1;
  color:rgba(20,103,236,0.16);
  font-weight:700;
}
.doctor-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(10,22,38,0.08);
}
.doctor-card__quote{
  font-family:var(--body);
  font-size:15px;
  line-height:1.72;
  color:var(--ink-2);
  margin:36px 0 24px;
  font-style:italic;
  position:relative;
  z-index:1;
}
.doctor-card__by{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.doctor-card__by strong{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  color:var(--navy);
  letter-spacing:-0.005em;
}
.doctor-card__by span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  line-height:1.4;
}
.doctors__more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:48px auto 0;
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--blue);
  text-decoration:none !important;
  text-align:center;
  width:max-content;
  padding:10px 18px;
  border-radius:999px;
  border:1.5px solid var(--blue);
  transition:all 220ms;
}
.doctors__more:hover{
  background:var(--blue);
  color:#fff !important;
}

@media(max-width:1024px){
  .doctors__grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:680px){
  .doctors{padding:60px 0}
  .doctors__grid{grid-template-columns:1fr}
}


/* ----------- Customer testimonials ----------- */
.testimonials{
  padding:100px 0;
  background:linear-gradient(180deg, #fff 0%, var(--paper) 100%);
}
.testimonials__head{
  text-align:center;
  max-width:780px;
  margin:0 auto 48px;
}
.testimonials__head h2{margin:14px 0 18px}
.testimonials__head .lede{
  font-family:var(--body);
  font-size:clamp(15px,1.2vw,17px);
  line-height:1.65;
  color:var(--ink-2);
  margin:0;
}
.testimonials__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.testimonial-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 26px 24px;
  display:flex;
  flex-direction:column;
  transition:transform 280ms, box-shadow 280ms;
}
.testimonial-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(10,22,38,0.08);
}
.testimonial-card__stars{
  color:#f5a623;
  font-size:15px;
  letter-spacing:2px;
  margin-bottom:14px;
  line-height:1;
}
.testimonial-card__quote{
  font-family:var(--body);
  font-size:14.5px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0 0 22px;
}
.testimonial-card__by{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.testimonial-card__by strong{
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  color:var(--navy);
  letter-spacing:-0.005em;
}
.testimonial-card__by span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  line-height:1.45;
}
.testimonials__note{
  margin:42px auto 0;
  max-width:680px;
  text-align:center;
  font-family:var(--body);
  font-size:13px;
  line-height:1.6;
  color:var(--ink-faint);
  font-style:italic;
}

@media(max-width:1024px){
  .testimonials__grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:680px){
  .testimonials{padding:60px 0}
  .testimonials__grid{grid-template-columns:1fr}
}


/* ----------- Certifications strip ----------- */
.certstrip{
  padding:90px 0;
  background:var(--paper-2, #f5f3ee);
  border-top:1px solid var(--line);
}
.certstrip__head{
  text-align:center;
  margin:0 auto 48px;
  max-width:680px;
}
.certstrip__head h2{margin:14px 0 0}

.certstrip__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.cert-pill{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px 24px;
  text-align:center;
  transition:transform 280ms, box-shadow 280ms;
}
.cert-pill:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(10,22,38,0.08);
}
.cert-pill__icon{
  width:56px;
  height:56px;
  margin:0 auto 16px;
  background:rgba(20,103,236,0.08);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
}
.cert-pill__icon svg{width:28px;height:28px}
.cert-pill__title{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  color:var(--navy);
  margin:0 0 6px;
  letter-spacing:-0.01em;
}
.cert-pill__sub{
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-2);
  line-height:1.5;
  margin:0 0 10px;
}
.cert-pill__num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0;
  padding-top:10px;
  border-top:1px dashed var(--line);
}

.certstrip__more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:36px auto 0;
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--blue);
  text-decoration:none !important;
  width:max-content;
  padding:10px 18px;
  border-radius:999px;
  border:1.5px solid var(--blue);
  transition:all 220ms;
}
.certstrip__more:hover{
  background:var(--blue);
  color:#fff !important;
}

@media(max-width:880px){
  .certstrip__grid{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:480px){
  .certstrip{padding:60px 0}
  .certstrip__grid{grid-template-columns:1fr}
}


/* =================================================================
   v7 — BOOK A DEMO page
   Slim nav band → full-bleed banner image → flow → form → bring → FAQ → trust
   ================================================================= */

/* Slim cream nav band so the pill nav doesn't fight the colourful banner */
body.is-page-book-demo{background:var(--paper)}
.navband{
  background:#f4f8fd;
  padding:24px 0 16px;
  position:relative;
  z-index:5;
}

/* Two side-by-side CTAs in the pill nav */
.nav-pill__ctas{
  display:flex;
  gap:8px;
  align-items:center;
}
.nav-pill__ctas .nav-pill__cta{margin:0}
.nav-pill__ctas .btn--ghost-blue{
  background:transparent;
  border:1.5px solid var(--blue);
  color:var(--blue);
  padding:10px 18px;
  font-size:13px;
}
.nav-pill__ctas .btn--ghost-blue:hover,
.nav-pill__ctas .btn--ghost-blue.is-active{
  background:var(--blue);
  color:#fff !important;
}
@media(max-width:880px){
  .nav-pill__ctas .btn--ghost-blue{display:none}
}

/* Hero banner — full-bleed image */
.bookhero{
  position:relative;
  width:100%;
  background:#f4f8fd;
  overflow:hidden;
}
.bookhero img{
  display:block;
  width:100%;
  height:auto;
  max-height:780px;
  object-fit:cover;
  object-position:center top;
}
@media(max-width:680px){
  .bookhero img{max-height:520px}
}


/* ----------- 4-step flow ----------- */
.bookflow{
  padding:90px 0 70px;
  background:var(--paper);
}
.bookflow__list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  list-style:none;
  padding:0;
  margin:48px 0 0;
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
}
.bookflow__list li{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:32px 26px;
  position:relative;
  transition:transform 280ms, box-shadow 280ms;
}
.bookflow__list li:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(10,22,38,0.07);
}
.bookflow__num{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  font-weight:600;
  color:var(--blue);
  background:rgba(20,103,236,0.08);
  padding:5px 11px;
  border-radius:6px;
  margin:0 0 18px;
}
.bookflow__list h3{
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0 0 12px;
}
.bookflow__list p{
  font-family:var(--body);
  font-size:14px;
  line-height:1.7;
  color:var(--ink-2);
  margin:0;
}
@media(max-width:1024px){
  .bookflow__list{grid-template-columns:repeat(2, 1fr)}
}
@media(max-width:560px){
  .bookflow{padding:60px 0 50px}
  .bookflow__list{grid-template-columns:1fr;gap:14px}
  .bookflow__list li{padding:24px}
}


/* ----------- Booking form ----------- */
.bookform-section{
  padding:80px 0 100px;
  background:#f4f8fd;
}
.bookform{
  margin:48px 0 0;
  display:grid;
  gap:40px;
}
.bookstep{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:36px 32px;
  box-shadow:0 2px 14px rgba(10,22,38,0.04);
}
.bookstep__head{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin:0 0 28px;
}
.bookstep__num{
  font-family:var(--mono);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.14em;
  color:#fff;
  background:var(--blue);
  padding:8px 12px;
  border-radius:8px;
  flex-shrink:0;
}
.bookstep__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(20px,1.8vw,24px);
  letter-spacing:-0.01em;
  color:var(--navy);
  margin:0 0 6px;
  line-height:1.2;
}
.bookstep__hint{
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.5;
}

/* 7-day calendar grid */
.bookcal{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:10px;
}
.bookday{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:18px 8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  transition:all 200ms;
  font-family:var(--display);
  text-align:center;
}
.bookday:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
}
.bookday.is-selected{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.bookday.is-selected .bookday__name,
.bookday.is-selected .bookday__month{color:rgba(255,255,255,0.85)}
.bookday__name{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
}
.bookday__num{
  font-family:var(--display);
  font-weight:700;
  font-size:28px;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1;
}
.bookday.is-selected .bookday__num{color:#fff}
.bookday__month{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
}

@media(max-width:880px){
  .bookcal{grid-template-columns:repeat(4, 1fr)}
}
@media(max-width:480px){
  .bookcal{grid-template-columns:repeat(2, 1fr);gap:8px}
  .bookday{padding:14px 8px}
  .bookday__num{font-size:22px}
}

/* 3 time-slot buttons */
.booktimes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.booktime{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:22px 18px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transition:all 200ms;
  font-family:var(--display);
}
.booktime:hover{
  border-color:var(--blue);
  transform:translateY(-2px);
}
.booktime.is-selected{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.booktime__icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  margin-bottom:4px;
}
.booktime.is-selected .booktime__icon{color:#fff}
.booktime__icon svg{width:24px;height:24px}
.booktime strong{
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  color:var(--navy);
}
.booktime.is-selected strong{color:#fff}
.booktime__range{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.booktime.is-selected .booktime__range{color:rgba(255,255,255,0.85)}

@media(max-width:560px){
  .booktimes{grid-template-columns:1fr;gap:10px}
  .booktime{flex-direction:row;justify-content:flex-start;text-align:left;padding:16px 18px}
  .booktime__icon{margin-bottom:0;margin-right:6px}
}

/* Submit button (WhatsApp green) */
.bookform__submit-wrap{
  text-align:center;
  padding:8px 0 0;
}
.bookform__submit{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#25D366;
  color:#fff;
  border:none;
  padding:18px 42px;
  border-radius:999px;
  font-family:var(--display);
  font-weight:600;
  font-size:18px;
  letter-spacing:-0.005em;
  cursor:pointer;
  transition:all 220ms;
  box-shadow:0 8px 22px rgba(37,211,102,0.28);
}
.bookform__submit:hover{
  background:#1ebe5a;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,211,102,0.36);
}

/* Primary "Submit booking" button — solid navy/blue (separate from WA green) */
.bookform__submit--primary{
  background:#246bb3;
  box-shadow:0 8px 22px rgba(36,107,179,0.28);
}
.bookform__submit--primary:hover{
  background:#1d5896;
  box-shadow:0 12px 28px rgba(36,107,179,0.36);
}

/* Divider between Submit + secondary WhatsApp question link */
.bookform__divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:24px auto 18px;
  max-width:280px;
  color:#aab2c2;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
}
.bookform__divider::before,
.bookform__divider::after{
  content:'';
  flex:1;
  height:1px;
  background:#e6ebf3;
}

/* Smaller "Just have a question? WhatsApp us" link */
.bookform__wa-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#25D366;
  text-decoration:none;
  font-family:'Inter Tight',sans-serif;
  font-size:14px;
  font-weight:600;
  padding:10px 18px;
  border:1.5px solid #25D366;
  border-radius:999px;
  transition:all 200ms;
}
.bookform__wa-link:hover{
  background:#25D366;
  color:#fff;
}
.bookform__wa-link svg{
  width:16px;
  height:16px;
  fill:currentColor;
}
.bookform__wa{
  width:22px;
  height:22px;
  fill:#fff;
}
.bookform__submit .arr{
  display:inline-block;
  margin-left:4px;
  transition:transform 220ms;
}
.bookform__submit:hover .arr{transform:translateX(4px)}
.bookform__note{
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-soft);
  margin:18px auto 0;
  max-width:48ch;
  line-height:1.6;
}

@media(max-width:680px){
  .bookform-section{padding:60px 0 80px}
  .bookform{gap:24px}
  .bookstep{padding:24px 20px}
  .bookform__submit{padding:16px 32px;font-size:16px}
}


/* ----------- What we bring ----------- */
.bookbring{
  padding:90px 0;
  background:var(--paper);
}
.bookbring__list{
  list-style:none;
  padding:0;
  margin:48px 0 0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px 32px;
}
.bookbring__list li{
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.bookbring__check{
  flex-shrink:0;
  width:32px;
  height:32px;
  background:rgba(20,103,236,0.08);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
}
.bookbring__check svg{width:18px;height:18px}
.bookbring__list li > div{flex:1}
.bookbring__list strong{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  color:var(--navy);
  margin:0 0 4px;
  line-height:1.3;
}
.bookbring__list span{
  font-family:var(--body);
  font-size:14px;
  color:var(--ink-2);
  line-height:1.6;
}
@media(max-width:760px){
  .bookbring__list{grid-template-columns:1fr;gap:0}
}


/* ----------- FAQ accordion ----------- */
.bookfaq{
  padding:80px 0 100px;
  background:#f4f8fd;
}
.bookfaq__list{
  margin:48px 0 0;
  display:grid;
  gap:12px;
}
.bookfaq details{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  transition:box-shadow 200ms;
}
.bookfaq details[open]{
  box-shadow:0 8px 22px rgba(10,22,38,0.06);
}
.bookfaq summary{
  cursor:pointer;
  padding:22px 26px;
  font-family:var(--display);
  font-weight:600;
  font-size:16px;
  color:var(--navy);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  transition:color 200ms;
}
.bookfaq summary::-webkit-details-marker{display:none}
.bookfaq summary::after{
  content:'+';
  font-family:var(--mono);
  font-size:24px;
  font-weight:300;
  color:var(--blue);
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  flex-shrink:0;
  transition:transform 220ms, background 220ms;
}
.bookfaq details[open] summary::after{
  content:'−';
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  transform:rotate(180deg);
}
.bookfaq summary:hover{color:var(--blue)}
.bookfaq details p{
  margin:0;
  padding:0 26px 24px;
  font-family:var(--body);
  font-size:15px;
  line-height:1.74;
  color:var(--ink-2);
}


/* ----------- Bottom trust strip ----------- */
.booktrust{
  padding:60px 0;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.booktrust__row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  text-align:center;
}
.booktrust__item{
  padding:14px 16px;
}
.booktrust__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3vw,38px);
  letter-spacing:-0.02em;
  color:var(--blue);
  margin:0 0 6px;
  line-height:1;
}
.booktrust__lbl{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:500;
  margin:0;
}
@media(max-width:680px){
  .booktrust__row{grid-template-columns:repeat(2, 1fr);gap:14px}
}


/* =================================================================
   v7 — ACCOUNT page (mockup dashboard)
   Sidebar nav + main content area with tab switching.
   Cards, stats, tables, progress bars, toggles.
   ================================================================= */

/* Banner — image background with dark navy gradient overlay */
body.is-page-account .pagehero{
  background:
    linear-gradient(180deg, rgba(6,16,41,0.78) 0%, rgba(10,37,64,0.62) 45%, rgba(6,16,41,0.92) 100%),
    url('../assets/img/acc-bac.avif') center 30% / cover no-repeat,
    linear-gradient(180deg, var(--night) 0%, var(--navy) 100%) !important;
  min-height:380px;
  padding-bottom:60px;
}
body.is-page-account .pagehero::after{
  display:none !important;
}
body.is-page-account .pagehero h1{
  font-size:clamp(48px,7vw,88px) !important;
  letter-spacing:-0.03em !important;
  margin-bottom:20px !important;
  text-shadow:0 4px 24px rgba(0,0,0,0.40);
}
body.is-page-account .pagehero__crumb{
  text-shadow:0 2px 12px rgba(0,0,0,0.40);
}
body.is-page-account .pagehero__lede{
  text-shadow:0 2px 12px rgba(0,0,0,0.30);
}
@media(max-width:680px){
  body.is-page-account .pagehero{min-height:320px;padding-bottom:40px}
}

.account{
  padding:60px 0 100px;
  background:var(--paper);
  min-height:100vh;
}
.account__grid{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:36px;
  align-items:flex-start;
  position:relative;
}

/* ---------- Sidebar ---------- */
.acc-side{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:0 8px 32px rgba(10,22,38,0.08);
  position:sticky;
  top:24px;
  margin-top:-90px; /* tuck only the sidebar card up under the banner */
}

.acc-user{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.acc-user__avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--blue) 0%, #0a4d8c 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.005em;
  flex-shrink:0;
}
.acc-user__name{
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  color:var(--navy);
  margin:0 0 2px;
  letter-spacing:-0.01em;
}
.acc-user__since{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0;
  font-weight:500;
}

.acc-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.acc-nav__btn{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  background:transparent;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  letter-spacing:-0.005em;
  color:var(--ink-2);
  text-align:left;
  transition:background 180ms, color 180ms;
  width:100%;
}
.acc-nav__btn svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:var(--ink-soft);
  transition:color 180ms;
}
.acc-nav__btn span:not(.acc-nav__badge){flex:1}
.acc-nav__btn:hover{
  background:rgba(20,103,236,0.06);
  color:var(--navy);
}
.acc-nav__btn.is-active{
  background:rgba(20,103,236,0.10);
  color:var(--blue);
  font-weight:600;
}
.acc-nav__btn.is-active svg{color:var(--blue)}
.acc-nav__btn--out{
  margin-top:8px;
  border-top:1px solid var(--line);
  padding-top:18px;
  border-radius:0;
  color:var(--ink-soft);
}
.acc-nav__btn--out:hover{background:transparent;color:#c0252e}
.acc-nav__btn--out:hover svg{color:#c0252e}
.acc-nav__badge{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.06em;
  font-weight:600;
  color:#fff;
  background:#7a3f9c;
  padding:3px 8px;
  border-radius:6px;
}

.acc-side__foot{
  margin:24px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  font-weight:500;
  text-align:center;
}

/* Section labels in the admin sidebar.
   Quietly group related tabs so father can scan by category instead
   of reading 12 items linearly every time. */
.acc-side__section{
  display:block;
  margin:14px 14px 6px;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint);
  user-select:none;
}
.acc-side__section:first-of-type{margin-top:6px}

/* Sub-nav strip — appears at the top of merged tab panes (Demos has
   "Requests / My calendar" toggle; Filters has "Reminders / Inventory"
   toggle; Referrals has "Signups / Payouts" toggle). */
.acc-subnav{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0 0 22px;
  padding:5px;
  background:#fafcff;
  border:1px solid #e6ebf3;
  border-radius:10px;
  width:fit-content;
  max-width:100%;
}
.acc-subnav button{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  padding:8px 16px;
  border-radius:7px;
  font-family:var(--display);
  font-weight:600;
  font-size:13.5px;
  color:var(--ink-2);
  cursor:pointer;
  transition:background 160ms,color 160ms,box-shadow 160ms;
  white-space:nowrap;
}
.acc-subnav button:hover{background:rgba(94,184,255,0.08);color:var(--navy)}
.acc-subnav button.is-active{
  background:#fff;
  color:var(--navy);
  box-shadow:0 1px 4px rgba(10,21,48,0.10);
}

/* Inbox cards — the unified to-do list. Each row shows what needs
   father's attention with action buttons inline. */
.inbox-empty{
  text-align:center;
  padding:60px 24px;
  background:linear-gradient(180deg,rgba(94,184,255,0.05),transparent);
  border:1px dashed #d2dae5;
  border-radius:14px;
}
.inbox-empty__emoji{font-size:48px;margin-bottom:8px}
.inbox-empty h3{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  color:var(--navy);
  margin:0 0 6px;
  letter-spacing:-0.01em;
}
.inbox-empty p{
  font-size:14px;
  color:var(--ink-2);
  max-width:42ch;
  margin:0 auto;
  line-height:1.55;
}

.inbox-section{
  margin-bottom:28px;
}
.inbox-section__head{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:10px;
}
.inbox-section__head h3{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--navy);
  letter-spacing:-0.005em;
  margin:0;
}
.inbox-section__head__count{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  color:var(--ink-faint);
}

/* Weekly briefing card — written by pg_cron each Sunday */
.inbox-briefing__card{
  background:linear-gradient(180deg, #fffaf0 0%, #fff5e0 100%);
  border:1px solid #f5d68e;
  border-radius:12px;
  padding:18px 20px 16px;
  transition:opacity 220ms, transform 220ms;
}
.inbox-briefing__body{
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.75;
  color:#5c4400;
  white-space:pre-wrap;
  margin:0 0 14px;
  font-weight:500;
}
.inbox-briefing__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:14px;
  border-top:1px solid #f5d68e;
}
.inbox-briefing__actions .btn--sm{
  padding:8px 14px;
  font-size:12.5px;
}

/* Review-queue card — surfaces customers ready for the Google review ask */
.inbox-reviewqueue__card{
  background:linear-gradient(180deg, #fef9c3 0%, #fef3c7 100%);
  border:1px solid #f6d76b;
  border-radius:12px;
  padding:18px 20px 14px;
}
.inbox-reviewqueue__lede{
  margin:0 0 14px;
  font-size:13px;
  line-height:1.55;
  color:#6b5712;
}
.inbox-reviewqueue__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.inbox-review__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid rgba(246,215,107,0.45);
  border-radius:10px;
  padding:12px 14px;
  flex-wrap:wrap;
}
.inbox-review__meta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:200px;
  flex:1;
}
.inbox-review__meta strong{
  font-size:14px;
  color:var(--ink);
  font-weight:600;
}
.inbox-review__sub{
  font-size:12px;
  color:var(--ink-faint);
}
.inbox-review__phone{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-faint);
  margin-top:1px;
}
.inbox-review__actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.inbox-review__actions .btn--sm{
  padding:7px 12px;
  font-size:12.5px;
}

.inbox-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  background:#fff;
  border:1px solid #e6ebf3;
  border-radius:10px;
  margin-bottom:8px;
  transition:border-color 160ms,box-shadow 160ms;
}
.inbox-row:hover{border-color:#5eb8ff;box-shadow:0 4px 14px rgba(10,21,48,0.06)}
.inbox-row__dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.inbox-row__dot--orange{background:#c97a3a}
.inbox-row__dot--blue  {background:#246bb3}
.inbox-row__dot--green {background:#0a8c4a}
.inbox-row__dot--purple{background:#7a3f9c}
.inbox-row__dot--amber {background:#d49519}
.inbox-row__body{min-width:0}
.inbox-row__title{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:14.5px;
  color:var(--navy);
  letter-spacing:-0.005em;
  line-height:1.35;
  margin-bottom:2px;
}
.inbox-row__sub{
  display:block;
  font-size:13px;
  color:var(--ink-2);
  line-height:1.45;
}
.inbox-row__meta{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  letter-spacing:0.04em;
  margin-top:3px;
}
.inbox-row__actions{
  display:flex;
  gap:6px;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.inbox-row__actions .btn{font-size:12px;padding:6px 12px}
@media(max-width:720px){
  .inbox-row{grid-template-columns:auto 1fr;gap:10px}
  .inbox-row__actions{grid-column:1 / -1;justify-content:flex-start;margin-top:6px}
}

/* ---------- Mobile drawer for the admin sidebar ---------- */
/* Hamburger toggle visible only on small screens — on desktop the
   sidebar is permanently pinned. */
.acc-mobile-bar{
  display:none;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:30;
}
.acc-mobile-bar__burger{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:1px solid var(--line);
  width:38px;height:38px;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--navy);
  flex-shrink:0;
}
.acc-mobile-bar__burger svg{width:20px;height:20px}
.acc-mobile-bar__title{
  font-family:var(--display);
  font-weight:700;
  font-size:15.5px;
  color:var(--navy);
  letter-spacing:-0.005em;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.acc-mobile-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,21,48,0.45);
  z-index:90;
}
.acc-mobile-overlay.is-open{display:block}

@media (max-width: 960px){
  /* ─── GLOBAL mobile fix: kill the white gap below the footer ───
     The iOS/Android URL-bar collapse problem applied to EVERY page
     (customer + admin). Three things need to happen together:

     1. <html> background = footer's navy. If body comes up short,
        the area below it shows navy, not white.
     2. <body> at least 100dvh tall. 100dvh dynamically remeasures
        when the URL bar shows/hides — fixes the iOS Safari quirk.
     3. body becomes a flex column. <footer> with margin-top:auto
        gets pushed to the bottom of the viewport on short pages
        (e.g. login.html, register.html, an empty Inbox). On long
        pages (index.html, products.html) it just settles in
        natural flow. */
  html{background:var(--night)}
  body{
    min-height:100vh;
    min-height:100dvh;
    background:var(--paper);
    display:flex;
    flex-direction:column;
  }
  /* !important needed: line 3105 has `.footer{margin-top:0 !important}`
     left over from a WordPress theme override. Without !important here
     it would silently lose and the footer would never push to bottom. */
  body > footer.footer{margin-top:auto !important}

  .acc-mobile-bar{display:flex}
  .acc-side{
    position:fixed !important;
    top:0;left:0;
    height:100vh;
    width:280px;
    max-width:88vw;
    z-index:100;
    background:#fff;
    box-shadow:0 12px 30px rgba(10,21,48,0.18);
    transform:translateX(-100%);
    transition:transform 280ms ease;
    overflow-y:auto;
    padding:18px 14px 24px;
  }
  .acc-side.is-open{transform:translateX(0)}

  /* ─── Admin mobile: keep everything visible, just make it fit ─── */

  /* Navy "Admin dashboard" hero — KEEP it (you wanted it visible)
     but completely strip the customer-facing nav-pill (hamburger,
     menu, brand, admin CTAs) from inside it. Reason: that hamburger
     opens the CUSTOMER drawer with stale tab names ("Demo bookings"
     instead of "Demos" etc). One hamburger, one drawer = the white
     .acc-mobile-bar below. */
  .is-admin-mode .pagehero{
    padding:0 !important;
    background:#0a1530;
    min-height:auto !important;
  }
  .is-admin-mode .pagehero::after,
  .is-admin-mode .pagehero::before{display:none !important}
  .is-admin-mode .pagehero__nav,
  .is-admin-mode .pagehero .nav-pill{display:none !important}
  .is-admin-mode .pagehero__inner{
    padding:18px 16px 20px;
  }
  .is-admin-mode .pagehero__crumb{
    font-size:10px;
    margin-bottom:6px;
  }
  .is-admin-mode .pagehero h1{
    font-size:24px;
    line-height:1.15;
    margin:0 0 6px;
  }
  .is-admin-mode .pagehero__lede{
    font-size:13px;
    line-height:1.5;
    margin:0;
    color:rgba(255,255,255,0.7);
  }

  /* Customer-page slide-in drawer (<aside class="drawer">) is still
     in the DOM but it has the wrong nav items for admin (Demo bookings,
     Warranty registrations, Filter orders — old names) and would open
     when the customer hamburger was tapped. Hide it on admin entirely
     so there is only ONE drawer system: the proper admin sidebar. */
  .is-admin-mode .drawer{display:none !important}

  /* Customer mobar (bottom WhatsApp + Get Yours) and sidedock product chip
     are aimed at customers shopping the site — admin is doing work, not
     shopping, so these stay hidden in admin. */
  .is-admin-mode .mobar{display:none}
  .is-admin-mode .sidedock,
  .is-admin-mode .sidedock-fab{display:none !important}

  /* Admin footer — slim mono line, but READABLE (not white-on-white). */
  .is-admin-mode .footer{
    background:#0a1530;
    color:rgba(255,255,255,0.65);
    padding:14px 14px 22px;
  }
  .is-admin-mode .footer__bottom{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:0.10em;
    line-height:1.5;
    word-break:break-word;
    color:rgba(255,255,255,0.65);
    text-align:center;
  }
  .is-admin-mode .footer__bottom span{color:inherit}

  /* Red admin-strip — small, NOT sticky. Once father has seen the
     warning, it can scroll out of view. Keeping it sticky was eating
     ~30px from the visible content area on every scroll AND fighting
     with the mobile-bar's sticky position. */
  .is-admin-mode .admin-strip{
    padding:7px 0;
    font-size:10px;
    letter-spacing:0.12em;
    position:relative;       /* override the customer-page sticky default */
    top:auto;
  }
  .is-admin-mode .admin-strip__inner{
    flex-direction:column;
    gap:3px;
    padding:0 14px;
    align-items:center;
    text-align:center;
  }
  .is-admin-mode .admin-strip__msg{line-height:1.4}

  /* Mobile bar IS the persistent header. Sticks at top so the
     hamburger is always reachable as the page scrolls. */
  .is-admin-mode .acc-mobile-bar{
    position:sticky;
    top:0;
    z-index:30;
  }

  /* Admin-specific spacing — body flex layout is already handled by
     the global rule above, plus body > footer.footer{margin-top:auto}
     pushes the footer to the bottom regardless of content height. */
  .is-admin-mode .account{
    padding:0 0 24px;
    min-height:auto;
  }

  .is-admin-mode .account__grid{
    grid-template-columns:1fr;
    gap:0;
  }
  .is-admin-mode .acc-main{padding:30px 16px 24px}
  .is-admin-mode .wrap{padding:0}
  /* Force the active tab pane to be a clean block with explicit
     top space — protects against any leftover translateY clipping
     and ensures eyebrow + heading are never tucked under the bar. */
  .is-admin-mode .acc-tab.is-active{
    padding-top:6px;
    overflow:visible;
  }
  .is-admin-mode .acc-h{
    font-size:22px;
    line-height:1.3;             /* taller line — top of "I" not clipped */
    margin:6px 0 18px;
    padding-top:4px;             /* extra cap-height breathing room */
    scroll-margin-top:80px;
    overflow:visible;
  }
  .is-admin-mode .acc-eyebrow{
    font-size:10.5px;
    line-height:1.4;
    margin:0 0 8px;
    color:var(--blue);
    scroll-margin-top:80px;
    /* Make sure the eyebrow is fully visible even if a parent has
       overflow constraints. */
    display:block;
    overflow:visible;
  }
  .is-admin-mode .demoadmin__lead{
    font-size:13px;
    line-height:1.55;
    color:var(--ink-2);
  }

  /* ── Chat widget kill switch ──
     Catch-all: any iframe injected at body root is presumed a chat
     widget (admin doesn't legitimately use any). Also kill any
     fixed-position div at body root that ISN'T one of our own
     elements (the mobile overlay is excluded by class). */
  .is-admin-mode iframe[id*="tawk"i],
  .is-admin-mode iframe[src*="tawk"i],
  .is-admin-mode iframe[src*="chat"i],
  .is-admin-mode iframe[src*="messag"i],
  .is-admin-mode iframe[name*="tawk"i],
  .is-admin-mode iframe[title*="chat"i],
  .is-admin-mode iframe[id*="livechat"i],
  .is-admin-mode iframe[id*="crisp"i],
  .is-admin-mode iframe[id*="intercom"i],
  .is-admin-mode iframe[id*="hubspot"i],
  .is-admin-mode div[id*="tawk"i],
  .is-admin-mode div[id*="livechat"i],
  .is-admin-mode div[id*="chat-widget"i],
  .is-admin-mode div[class*="tawk"i],
  .is-admin-mode .tawk-min-container,
  .is-admin-mode #tawkchat-container,
  .is-admin-mode #crisp-chatbox,
  .is-admin-mode .intercom-launcher-frame,
  .is-admin-mode .intercom-lightweight-app,
  .is-admin-mode #hubspot-messages-iframe-container,
  body.is-admin-mode > iframe,
  body.is-admin-mode > div[style*="position: fixed"]:not([id^="acc-"]):not(.acc-mobile-overlay):not(.dbanner),
  body.is-admin-mode > div[style*="position:fixed"]:not([id^="acc-"]):not(.acc-mobile-overlay):not(.dbanner){
    display:none !important;
  }
}

/* ---------- Main content ---------- */
.acc-main{min-width:0;padding-top:28px}
@media (max-width: 880px){
  .acc-main{padding-top:20px}
}

.acc-tab{display:none}
.acc-tab.is-active{display:block;animation:acc-fade 280ms ease}
@keyframes acc-fade{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

.acc-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0 0 10px;
}
.acc-h{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--navy);
  margin:0 0 32px;
}

/* Stat row */
.acc-stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin:0 0 24px;
}
.acc-stats--3{grid-template-columns:repeat(3, 1fr)}
.acc-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px 22px;
  transition:box-shadow 220ms, transform 220ms;
}
.acc-stat:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(10,22,38,0.08);
}
.acc-stat--accent{
  background:linear-gradient(135deg, #1467ec 0%, #0a4d8c 100%);
  border-color:#0a4d8c;
}
.acc-stat--accent .acc-stat__num,
.acc-stat--accent .acc-stat__lbl,
.acc-stat--accent .acc-stat__sub{color:#fff}
.acc-stat--accent .acc-stat__lbl{color:rgba(255,255,255,0.85)}
.acc-stat--accent .acc-stat__sub{color:rgba(255,255,255,0.7)}

.acc-stat__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px;
  margin-bottom:14px;
}
.acc-stat__icon svg{width:20px;height:20px}
.acc-stat__num{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,2.6vw,34px);
  letter-spacing:-0.02em;
  color:var(--navy);
  line-height:1;
  margin:0 0 6px;
}
.acc-stat__unit{
  font-size:0.55em;
  color:var(--ink-soft);
  font-weight:500;
  margin-left:4px;
}
.acc-stat__lbl{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  margin:0 0 4px;
}
.acc-stat__sub{
  font-family:var(--body);
  font-size:12px;
  color:var(--ink-2);
  margin:0;
  line-height:1.4;
}

/* Cards */
.acc-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px;
  margin:0 0 28px;
  box-shadow:0 2px 12px rgba(10,22,38,0.04);
}
.acc-card + .acc-card{margin-top:0}
.acc-card .form-grid{margin-bottom:24px}
.acc-card .form-grid + .acc-actions,
.acc-card > .acc-actions{margin-top:8px}
.acc-card__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:0 0 18px;
  flex-wrap:wrap;
}
.acc-card__head h3{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  letter-spacing:-0.005em;
  color:var(--navy);
  margin:0;
}
.acc-card__note{
  font-family:var(--body);
  font-size:14px;
  line-height:1.7;
  color:var(--ink-2);
  margin:14px 0 0;
}
.acc-card--actions .acc-actions{margin-top:0}
.acc-card--danger{border-color:#f0d7d7;background:#fef9f9}
.acc-card--danger .acc-card__head h3{color:#c0252e}

/* Status pills */
.acc-pill{
  display:inline-block;
  padding:5px 11px;
  border-radius:6px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  white-space:nowrap;
}
.acc-pill--green{background:rgba(46,156,107,0.12);color:#1f7a4f}
.acc-pill--blue{background:rgba(20,103,236,0.10);color:var(--blue)}
.acc-pill--orange{background:rgba(217,154,79,0.16);color:#a35d22}
.acc-pill--amber{background:rgba(245,158,11,0.16);color:#9a6b00}
.acc-pill--grey{background:rgba(100,116,139,0.10);color:var(--ink-soft)}

/* ── Customer-side: Affiliate hero reward callout ── */
.aff-hero{
  display:flex;
  align-items:center;
  gap:28px;
  padding:24px 28px;
  background:linear-gradient(135deg,#0a2540 0%,#246bb3 100%);
  border-radius:14px;
  margin:0 0 22px;
  color:#fff;
  box-shadow:0 8px 24px rgba(10,37,64,0.18);
}
.aff-hero__amt{
  font-family:var(--display);
  font-size:54px;
  font-weight:700;
  line-height:1;
  letter-spacing:-0.02em;
  color:#fff;
  flex-shrink:0;
}
.aff-hero__body{flex:1;min-width:0}
.aff-hero__lbl{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
  margin:0 0 6px;
  font-weight:600;
}
.aff-hero__sub{
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,0.92);
  margin:0;
  max-width:60ch;
}

/* ── Customer-side: Next payout countdown card ── */
.aff-payout{
  display:flex;
  align-items:center;
  gap:24px;
  padding:22px 26px;
  background:linear-gradient(135deg,#f6fbff 0%,#eaf3fb 100%);
  border-color:#cfe5f7;
}
.aff-payout__amt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex-shrink:0;
  padding-right:24px;
  border-right:1px solid #cfe5f7;
}
.aff-payout__num{
  font-family:var(--display);
  font-size:28px;
  font-weight:700;
  color:#246bb3;
  line-height:1;
  letter-spacing:-0.01em;
}
.aff-payout__lbl{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:#5c7290;
  font-weight:600;
}
.aff-payout__body{flex:1;min-width:0}
.aff-payout__h{
  font-family:var(--display);
  font-size:14.5px;
  color:#0a1530;
  margin:0 0 4px;
  line-height:1.5;
}
.aff-payout__h strong{font-weight:700}
.aff-payout__sub{
  font-family:var(--body);
  font-size:13px;
  color:#5c7290;
  margin:0 0 12px;
  line-height:1.5;
}
.aff-payout__bar{
  height:6px;
  background:#dce6f0;
  border-radius:3px;
  overflow:hidden;
  margin:0 0 6px;
}
.aff-payout__bar-fill{
  height:100%;
  background:linear-gradient(90deg,#246bb3,#5eb8ff);
  border-radius:3px;
  transition:width 600ms ease;
}
.aff-payout__meta{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.10em;
  color:#7a8aa3;
  text-transform:uppercase;
  margin:0;
}
.aff-payout__meta span + span{margin-left:8px}

@media(max-width:560px){
  .aff-hero{flex-direction:column;align-items:flex-start;gap:14px;padding:22px}
  .aff-hero__amt{font-size:42px}
  .aff-payout{flex-direction:column;align-items:stretch;gap:18px;padding:20px}
  .aff-payout__amt{flex-direction:row;justify-content:space-between;border-right:none;border-bottom:1px solid #cfe5f7;padding:0 0 14px}
}

/* ── Customer-side: Service history timeline (account.html history tab) ── */
.chist{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.chist::before{
  content:'';
  position:absolute;
  left:23px;
  top:8px;
  bottom:8px;
  width:2px;
  background:linear-gradient(180deg,#cfe5f7 0%,#dce6f0 100%);
  border-radius:1px;
}
.chist__item{
  position:relative;
  padding:0 0 22px 64px;
  list-style:none;
}
.chist__item:last-child{padding-bottom:0}
.chist__dot{
  position:absolute;
  left:8px;
  top:6px;
  width:34px;
  height:34px;
  background:#fff;
  border:2px solid #cfe5f7;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
}
.chist__item--install .chist__dot{background:#e3f0fc;border-color:#246bb3}
.chist__item--filter  .chist__dot{background:#e6f7ed;border-color:#2e9c6b}
.chist__item--visit   .chist__dot{background:#fff4e0;border-color:#f59e0b}
.chist__item--warranty .chist__dot{background:#f0e8fd;border-color:#7c3aed}
.chist__icon{font-size:16px;line-height:1}
.chist__card{
  background:#fff;
  border:1px solid #e6ebf3;
  border-radius:10px;
  padding:14px 18px;
  transition:transform 200ms, box-shadow 200ms, border-color 200ms;
}
.chist__card:hover{
  border-color:#cdd9e6;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(10,21,48,0.06);
}
.chist__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 0 6px;
  flex-wrap:wrap;
}
.chist__tag{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#246bb3;
  font-weight:600;
}
.chist__date{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  color:#7a8aa3;
}
.chist__title{
  font-family:var(--display);
  font-size:14.5px;
  font-weight:600;
  color:#0a1530;
  margin:0 0 6px;
  line-height:1.4;
}
.chist__body{
  font-family:var(--body);
  font-size:13px;
  color:#5c7290;
  line-height:1.55;
  margin:0 0 8px;
}
.chist__author{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:#7a8aa3;
}
@media(max-width:560px){
  .chist::before{left:16px}
  .chist__item{padding:0 0 18px 50px}
  .chist__dot{left:0;width:28px;height:28px}
  .chist__icon{font-size:14px}
  .chist__card{padding:12px 14px}
}

/* ── Customer-side: Demo bookings cards (account.html demos tab) ── */
.cdemo{margin-bottom:14px}
.cdemo__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:6px;
}
.cdemo__when{
  font-family:var(--display);
  font-size:17px;
  color:#0a1530;
  margin:0 0 2px;
}
.cdemo__when strong{font-weight:700}
.cdemo__sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:#7a8aa3;
  margin:0;
}
.cdemo__addr{
  font-family:var(--body);
  font-size:13.5px;
  color:#5c7290;
  margin:8px 0 0;
}
.cdemo__notes{
  font-family:var(--body);
  font-size:13.5px;
  color:#5c7290;
  margin:10px 0 0;
  padding:10px 14px;
  background:#f6f9fd;
  border-radius:8px;
  border-left:3px solid #cdd9e6;
}
.cdemo__notes strong{color:#0a1530;font-weight:600}
.cdemo__hint{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:11px 14px;
  background:rgba(245,158,11,0.08);
  border-radius:8px;
  border-left:3px solid #f59e0b;
  font-size:13px;
  color:#5c7290;
  line-height:1.5;
}
.cdemo__hint--ok{
  background:rgba(46,156,107,0.08);
  border-left-color:#2e9c6b;
}
.cdemo__hint-icon{font-size:14px;flex-shrink:0}

/* ── Customer-side: Notifications inbox (account.html cnotifs tab) ── */
.cnotifs-toolbar{
  display:flex;
  gap:12px;
  margin:0 0 18px;
  align-items:center;
  flex-wrap:wrap;
}
.cnotifs-toolbar__search{
  flex:1 1 300px;
  padding:9px 14px;
  border:1.5px solid #d2dae5;
  border-radius:8px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:#0a1530;
  background:#fff;
  min-width:0;
}
.cnotifs-toolbar__search:focus{
  outline:none;
  border-color:#5eb8ff;
  box-shadow:0 0 0 3px rgba(94,184,255,0.15);
}
.cnotif{
  display:flex;
  gap:14px;
  padding:14px 18px;
  background:#fff;
  border:1px solid #e6ebf3;
  border-radius:10px;
  margin-bottom:8px;
  cursor:pointer;
  position:relative;
  transition:transform 200ms, box-shadow 200ms, border-color 200ms;
}
.cnotif:hover{
  transform:translateY(-1px);
  border-color:#cdd9e6;
  box-shadow:0 4px 14px rgba(10,21,48,0.06);
}
.cnotif.is-unread{
  background:#f6fbff;
  border-color:#cfe5f7;
}
.cnotif__icon{
  font-size:22px;
  line-height:1;
  flex-shrink:0;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f6f9fd;
  border-radius:50%;
}
.cnotif.is-unread .cnotif__icon{background:#e3f0fc}
.cnotif__body{flex:1;min-width:0}
.cnotif__title{
  font-family:var(--display);
  font-size:14.5px;
  font-weight:600;
  color:#0a1530;
  margin:0 0 3px;
}
.cnotif__text{
  font-family:var(--body);
  font-size:13px;
  color:#5c7290;
  line-height:1.5;
  margin:0 0 4px;
}
.cnotif__ts{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  color:#7a8aa3;
  margin:0;
  text-transform:uppercase;
}
.cnotif__dot{
  position:absolute;
  top:18px;
  right:18px;
  width:8px;
  height:8px;
  background:#246bb3;
  border-radius:50%;
  flex-shrink:0;
}

/* ── Customer-side: Documents grid (account.html documents tab) ── */
.docs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:14px;
}
.docs-card{
  display:flex;
  flex-direction:column;
  padding:22px 22px 18px;
  background:#fff;
  border:1px solid #e6ebf3;
  border-radius:12px;
  text-decoration:none !important;
  color:inherit;
  transition:transform 220ms, box-shadow 220ms, border-color 220ms;
  cursor:pointer;
}
.docs-card:hover{
  transform:translateY(-3px);
  border-color:#cdd9e6;
  box-shadow:0 12px 28px rgba(10,21,48,0.10);
}
.docs-card__icon{
  width:44px;
  height:44px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  color:#fff;
  flex-shrink:0;
}
.docs-card__icon svg{width:22px;height:22px}
.docs-card__icon--blue{background:linear-gradient(135deg,#246bb3,#1d4f8f)}
.docs-card__icon--green{background:linear-gradient(135deg,#2e9c6b,#1f7a4f)}
.docs-card__icon--purple{background:linear-gradient(135deg,#7c3aed,#5b21b6)}
.docs-card__icon--amber{background:linear-gradient(135deg,#f59e0b,#b45309)}
.docs-card__title{
  font-family:var(--display);
  font-size:15.5px;
  font-weight:600;
  color:#0a1530;
  margin:0 0 4px;
  line-height:1.35;
}
.docs-card__sub{
  font-family:var(--body);
  font-size:12.5px;
  color:#7a8aa3;
  margin:0 0 14px;
  line-height:1.5;
  flex:1;
}
.docs-card__cta{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:#246bb3;
  font-weight:600;
}

@media(max-width:560px){
  .docs-grid{grid-template-columns:1fr}
  .cnotif{padding:12px 14px;gap:10px}
  .cnotif__icon{width:34px;height:34px;font-size:18px}
}

/* Progress bar */
.acc-bar{margin:8px 0 0}
.acc-bar__track{
  position:relative;
  height:8px;
  background:rgba(20,103,236,0.10);
  border-radius:6px;
  overflow:visible;
  margin-bottom:14px;
}
.acc-bar__fill{
  position:absolute;
  inset:0 auto 0 0;
  background:linear-gradient(90deg, var(--blue) 0%, #5eb8ff 100%);
  border-radius:6px;
  transition:width 600ms ease;
}
.acc-bar__fill--warm{
  background:linear-gradient(90deg, #d99a4f 0%, #f0c483 100%);
}
.acc-bar__marker{
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
  width:14px;
  height:14px;
  background:#fff;
  border:2px solid var(--blue);
  border-radius:50%;
  box-shadow:0 2px 6px rgba(10,22,38,0.12);
}
.acc-bar__fill--warm + .acc-bar__marker{border-color:#c97a3a}
.acc-bar__legend{
  display:flex;
  justify-content:space-between;
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-2);
}
.acc-bar__legend strong{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  margin-bottom:2px;
}
.acc-bar__legend-end{text-align:right}

/* Activity feed */
.acc-feed{
  list-style:none;
  padding:0;
  margin:0;
}
.acc-feed li{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  align-items:flex-start;
}
.acc-feed li:last-child{border-bottom:none;padding-bottom:0}
.acc-feed li:first-child{padding-top:0}
.acc-feed__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
}
.acc-feed p{
  margin:0;
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  color:var(--ink-2);
}
.acc-feed p strong{color:var(--navy);font-weight:600}
.acc-feed__sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin-top:2px !important;
}

/* Quick action tiles */
.acc-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0;
}
.acc-action{
  flex:1 1 220px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:rgba(20,103,236,0.05);
  border:1px solid rgba(20,103,236,0.15);
  border-radius:10px;
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  color:var(--navy);
  text-decoration:none !important;
  transition:all 200ms;
}
.acc-action:hover{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff !important;
  transform:translateY(-1px);
}
.acc-action svg{width:18px;height:18px;flex-shrink:0}

/* Data table */
.acc-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--body);
  font-size:14px;
}
.acc-table th{
  text-align:left;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  padding:10px 14px 14px;
  border-bottom:1px solid var(--line);
}
.acc-table td{
  padding:14px;
  color:var(--ink-2);
  border-bottom:1px solid var(--line);
  vertical-align:top;
  line-height:1.5;
}
.acc-table tr:last-child td{border-bottom:none}
.acc-table td strong{color:var(--navy);font-weight:600;display:block}
.acc-table__sub{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin-top:3px;
}

/* Mobile (≤640px): tables become stacked cards.
   Each row turns into a self-contained card so phone columns don't
   break across lines and action buttons get full width. We don't
   need data-label pseudo-elements because the cells already include
   their own labels (strong + acc-table__sub structure). */
@media(max-width:640px){
  .acc-table{font-size:14px}
  .acc-table thead{
    /* visually hide but keep accessible */
    position:absolute;
    width:1px; height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .acc-table,
  .acc-table tbody,
  .acc-table tr,
  .acc-table td{
    display:block;
    width:100%;
  }
  .acc-table tr{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    margin-bottom:10px;
    box-shadow:0 1px 4px rgba(10,21,48,0.04);
  }
  .acc-table td{
    padding:4px 0;
    border-bottom:0;
    text-align:left !important;
    line-height:1.45;
  }
  /* Action column (last cell): full-width row of buttons under a divider */
  .acc-table td:last-child{
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed var(--line) !important;
  }
  .acc-table td:last-child > div,
  .acc-table td:last-child .admin-actions{
    display:flex !important;
    flex-wrap:wrap;
    gap:8px !important;
    justify-content:flex-start !important;
  }
  .acc-table td:last-child .btn{
    flex:1 1 calc(50% - 4px);
    justify-content:center;
    text-align:center;
    min-width:0;
  }
  .acc-table td:last-child a.btn,
  .acc-table td:last-child button.btn{font-size:13px;padding:9px 12px}
  /* Loading row spans the whole card */
  .acc-table tr td[colspan]{
    text-align:center !important;
    padding:30px 16px !important;
    border-top:0 !important;
    margin-top:0;
  }
}

/* Inline link */
.acc-link{
  font-family:var(--display);
  font-size:13px;
  font-weight:500;
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 180ms;
}
.acc-link:hover{border-color:var(--blue)}

/* Affiliate link copy row */
.acc-link-row{
  display:flex;
  gap:10px;
  align-items:stretch;
  flex-wrap:wrap;
  margin:0 0 4px;
}
.acc-link-input{
  flex:1 1 280px;
  padding:14px 18px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--navy);
  background:#fafafa;
  letter-spacing:0.01em;
  outline:none;
  transition:border-color 180ms;
}
.acc-link-input:focus{border-color:var(--blue);background:#fff}
.acc-link-row .btn{flex:0 0 auto}

/* Bullet list */
.acc-list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
}
.acc-list li{
  position:relative;
  padding:8px 0 8px 26px;
  font-family:var(--body);
  font-size:14px;
  color:var(--ink-2);
  line-height:1.6;
}
.acc-list li::before{
  content:'';
  position:absolute;
  left:6px;
  top:14px;
  width:8px;
  height:8px;
  background:var(--blue);
  border-radius:50%;
}

/* Notification preferences */
.acc-prefs{
  list-style:none;
  padding:0;
  margin:0;
}
.acc-prefs li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}
.acc-prefs li:first-child{padding-top:6px}
.acc-prefs li:last-child{border-bottom:none;padding-bottom:6px}
.acc-prefs strong{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  color:var(--navy);
  margin-bottom:2px;
}
.acc-prefs span{
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.5;
}

/* Toggle switch */
.acc-toggle{
  position:relative;
  display:inline-block;
  width:46px;
  height:26px;
  flex-shrink:0;
}
.acc-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.acc-toggle span{
  position:absolute;
  inset:0;
  background:var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:background 200ms;
}
.acc-toggle span::before{
  content:'';
  position:absolute;
  width:22px;
  height:22px;
  left:2px;
  top:2px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 2px 4px rgba(0,0,0,0.15);
  transition:transform 200ms;
}
.acc-toggle input:checked + span{background:var(--blue)}
.acc-toggle input:checked + span::before{transform:translateX(20px)}

/* Danger button */
.btn--danger{color:#c0252e}
.btn--danger:hover{background:#c0252e !important;color:#fff !important;border-color:#c0252e !important}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  .acc-stats{grid-template-columns:repeat(2, 1fr)}
  .acc-stats--3{grid-template-columns:repeat(3, 1fr)}
}
@media(max-width:880px){
  .account__grid{grid-template-columns:1fr;gap:20px;margin-top:-60px}
  .acc-side{position:static;margin-top:0}
  .acc-nav{flex-direction:row;flex-wrap:wrap;gap:6px}
  .acc-nav__btn{flex:1 1 auto;justify-content:center}
  .acc-nav__btn--out{width:100%;flex-basis:100%;border-top:none;padding-top:8px;margin-top:0}
  .acc-side__foot{display:none}
}
@media(max-width:680px){
  .acc-stats,
  .acc-stats--3{grid-template-columns:1fr}
  .acc-card{padding:22px 18px}
  .acc-card__head{flex-direction:column;align-items:flex-start;gap:8px}
  .acc-table{font-size:13px}
  .acc-table th, .acc-table td{padding:10px 8px}
  .acc-link-row .btn{flex:1 1 auto}
}


/* =================================================================
   v7 — Pill nav account icon (circular button next to Book Demo)
   ================================================================= */
.nav-pill__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1.5px solid var(--line);
  color:var(--ink-2);
  background:transparent;
  transition:all 200ms;
  flex-shrink:0;
  text-decoration:none !important;
}
.nav-pill__icon svg{width:18px;height:18px}
.nav-pill__icon:hover{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff !important;
  transform:translateY(-1px);
}
.nav-pill__icon.is-active{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
@media(max-width:880px){
  .nav-pill__icon{width:34px;height:34px}
  .nav-pill__icon svg{width:16px;height:16px}
}
@media(max-width:380px){
  .nav-pill__icon{width:30px;height:30px}
  .nav-pill__icon svg{width:14px;height:14px}
}


/* =================================================================
   v7 — Account page · Tier 3 additions
   Saved addresses · Manuals/docs list · Multi-link table cells
   ================================================================= */

/* Small button variant */
.btn--sm{
  padding:7px 14px !important;
  font-size:12px !important;
  letter-spacing:0.005em !important;
}

/* Multiple links in table cell */
.acc-table__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.acc-table__actions .acc-link{white-space:nowrap}

/* Muted link variant (Remove, etc.) */
.acc-link--muted{color:var(--ink-soft) !important}
.acc-link--muted:hover{color:#c0252e !important;border-color:#c0252e !important}

/* Saved addresses grid */
.acc-addrs{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.acc-addr{
  background:#fafafa;
  border:1.5px dashed var(--line);
  border-radius:12px;
  padding:18px 20px 20px;
  position:relative;
  transition:transform 220ms, box-shadow 220ms;
}
.acc-addr:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(10,22,38,0.06);
}
.acc-addr.is-default{
  background:#fff;
  border-style:solid;
  border-color:var(--blue);
  box-shadow:0 4px 14px rgba(20,103,236,0.08);
}
.acc-addr__pill{
  position:absolute;
  top:14px;
  right:14px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  color:#fff;
  background:var(--blue);
  padding:4px 9px;
  border-radius:4px;
}
.acc-addr h4{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:-0.005em;
  color:var(--navy);
  margin:0 0 8px;
}
.acc-addr.is-default h4{padding-right:80px}
.acc-addr p{
  font-family:var(--body);
  font-size:13px;
  line-height:1.55;
  color:var(--ink-2);
  margin:0 0 14px;
}
.acc-addr__actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:13px;
}
.acc-addr__actions .acc-link{font-size:13px}

@media(max-width:680px){
  .acc-addrs{grid-template-columns:1fr}
}


/* =================================================================
   Warranty registration form (Singapore-style) — sits inside
   .acc-card on the Filter & warranty tab. Reuses .form-grid +
   .field but adds section dividers, required-asterisk style,
   file-upload card, PDPA checkbox.
   ================================================================= */
.acc-card .form-grid select{
  width:100%;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-family:var(--body);
  font-size:14px;
  color:var(--navy);
  background:#fff;
  transition:border-color 180ms,box-shadow 180ms;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5ba8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px;
  padding-right:38px;
}
.acc-card .form-grid select:focus,
.acc-card .form-grid input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(30,91,168,0.12);
}

.form-section{
  grid-column:span 2;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:14px 0 -4px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.form-section:first-of-type{
  border-top:none;
  padding-top:0;
  margin-top:0;
}

.req{
  color:#c2410c;
  font-weight:500;
  margin-left:2px;
}

/* File upload card */
.acc-upload{
  position:relative;
}
.acc-upload input[type=file]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  z-index:1;
  width:100%;
  height:100%;
}
.acc-upload__label{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  background:var(--blue-pale);
  border:1.5px dashed rgba(30,91,168,0.35);
  border-radius:12px;
  cursor:pointer;
  transition:background 180ms,border-color 180ms;
}
.acc-upload:hover .acc-upload__label{
  background:rgba(30,91,168,0.1);
  border-color:var(--blue);
}
.acc-upload__label svg{
  width:22px;height:22px;
  stroke:var(--blue);
  flex-shrink:0;
}
.acc-upload__label span{
  font-size:14px;
  color:var(--ink-2);
  line-height:1.45;
}
.acc-upload__label strong{color:var(--navy);font-weight:600}
.acc-upload input[type=file]:focus + .acc-upload__label{
  border-color:var(--blue);
  background:rgba(30,91,168,0.1);
}

/* PDPA / consent checkboxes */
.acc-check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ink-2);
}
.acc-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.acc-check__box{
  flex-shrink:0;
  width:18px;
  height:18px;
  border:1.5px solid var(--line);
  border-radius:5px;
  background:#fff;
  transition:background 180ms,border-color 180ms;
  position:relative;
  margin-top:1px;
}
.acc-check input:checked + .acc-check__box{
  background:var(--blue);
  border-color:var(--blue);
}
.acc-check input:checked + .acc-check__box::after{
  content:'';
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
.acc-check.full{grid-column:span 2}
.acc-check strong{color:var(--navy);font-weight:600}

.form-foot{
  font-size:12px;
  color:var(--ink-faint);
  line-height:1.55;
  margin:6px 0 0;
}
.form-grid .acc-actions.full{grid-column:span 2;margin-top:6px}

@media(max-width:680px){
  .form-section{grid-column:span 1}
  .acc-check.full,
  .form-grid .acc-actions.full{grid-column:span 1}
}


/* Manuals & documentation list */
/* =================================================================
   Affiliate program — banner + 4-stage legend on account.html
   ================================================================= */
.acc-program-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:22px 26px;
  background:linear-gradient(135deg,rgba(30,91,168,0.08),rgba(30,91,168,0.04));
  border:1px solid rgba(30,91,168,0.18);
  border-radius:16px;
  margin:0 0 28px;
  flex-wrap:wrap;
}
.acc-program-banner__eyebrow{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 6px;
  font-weight:600;
}
.acc-program-banner__h{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  color:var(--navy);
  margin:0 0 4px;
  letter-spacing:-0.01em;
}
.acc-program-banner__sub{
  font-size:13.5px;
  color:var(--ink-2);
  margin:0;
  line-height:1.5;
}
.acc-program-banner > div{flex:1;min-width:240px}
.acc-program-banner .btn{flex-shrink:0}

.acc-stages{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.acc-stages__item{
  padding:16px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.acc-stages__item p{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.55;
  margin:0;
}
.acc-stages__item .acc-pill{align-self:flex-start}
@media(max-width:880px){
  .acc-stages{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .acc-stages{grid-template-columns:1fr}
}

/* =================================================================
   Referral program page — 4-stage timeline (numbered cards)
   ================================================================= */
.stages{
  list-style:none;
  padding:0;
  margin:48px 0 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  counter-reset:stage;
  position:relative;
}
.stages__item{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:32px 24px 24px;
  transition:transform 220ms,box-shadow 220ms;
}
.stages__item:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(15,42,79,0.08);
}
.stages__num{
  position:absolute;
  top:-16px;
  left:24px;
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  border-radius:10px;
  box-shadow:0 4px 10px rgba(15,42,79,0.18);
}
.stages__pill{
  display:inline-block;
  padding:5px 11px;
  border-radius:999px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:600;
  margin-bottom:14px;
}
.stages__pill--grey{background:rgba(15,42,79,0.08);color:var(--ink-2)}
.stages__pill--orange{background:rgba(234,88,12,0.10);color:#c2410c}
.stages__pill--blue{background:rgba(30,91,168,0.10);color:var(--blue)}
.stages__pill--green{background:rgba(16,128,80,0.10);color:#107050}
.stages__item h3{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  color:var(--navy);
  margin:0 0 10px;
  letter-spacing:-0.01em;
  line-height:1.25;
}
.stages__item p{
  font-size:13.5px;
  color:var(--ink-2);
  line-height:1.55;
  margin:0 0 12px;
}
.stages__meta{
  font-size:12px !important;
  color:var(--ink-faint) !important;
  font-family:var(--mono);
  border-top:1px solid var(--line);
  padding-top:10px;
  margin:auto 0 0 !important;
}
.stages__meta strong{color:var(--navy)}
@media(max-width:1023px){
  .stages{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:640px){
  .stages{grid-template-columns:1fr}
}


.acc-docs{
  list-style:none;
  padding:0;
  margin:0;
}
.acc-docs li{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
.acc-docs li:last-child{border-bottom:none;padding-bottom:4px}
.acc-docs li:first-child{padding-top:4px}
.acc-docs__icon{
  flex-shrink:0;
  width:42px;
  height:42px;
  border-radius:10px;
  background:rgba(20,103,236,0.08);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
}
.acc-docs__icon svg{width:20px;height:20px}
.acc-docs li > div{flex:1;min-width:0}
.acc-docs li strong{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--navy);
  margin-bottom:2px;
  letter-spacing:-0.005em;
}
.acc-docs li span{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-soft);
}
.acc-docs li > .btn{flex-shrink:0}

@media(max-width:560px){
  .acc-docs li{flex-wrap:wrap;gap:12px}
  .acc-docs li > .btn{width:100%}
}


/* =================================================================
   v7 — AUTH pages (login + register)
   Full-bleed ocean background · centered glass-morphism card
   ================================================================= */
body.is-page-auth{
  background:#020817;
  margin:0;
  min-height:100vh;
}

.auth{
  position:relative;
  min-height:100vh;
  background:
    linear-gradient(180deg, rgba(6,16,41,0.55) 0%, rgba(10,37,64,0.40) 50%, rgba(6,16,41,0.85) 100%),
    url('../assets/img/auth-bg.jpg') center / cover no-repeat fixed,
    linear-gradient(180deg, var(--night) 0%, var(--navy) 100%);
  padding:24px 0 60px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.auth__nav{
  position:relative;
  z-index:5;
}

/* Centered card stage */
.auth__stage{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 24px 40px;
  position:relative;
  z-index:2;
}

/* Glass card */
.auth-card{
  position:relative;
  width:100%;
  max-width:440px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:20px;
  padding:44px 40px 32px;
  box-shadow:
    0 24px 60px rgba(6,16,41,0.30),
    0 8px 24px rgba(6,16,41,0.18),
    inset 0 1px 0 rgba(255,255,255,0.7);
  animation:auth-rise 480ms cubic-bezier(.2,.8,.2,1);
}
.auth-card--wide{max-width:520px;padding:40px 40px 28px}

@keyframes auth-rise{
  from{opacity:0;transform:translateY(20px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.auth-card__close{
  position:absolute;
  top:16px;
  right:16px;
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  background:transparent;
  transition:all 200ms;
  text-decoration:none !important;
}
.auth-card__close svg{width:18px;height:18px}
.auth-card__close:hover{background:#f3f6fa;color:var(--navy)}

.auth-card__eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0 0 12px;
}
.auth-card__title{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,3.4vw,38px);
  letter-spacing:-0.02em;
  line-height:1.1;
  color:var(--navy);
  margin:0 0 12px;
}
.auth-card__sub{
  font-family:var(--body);
  font-size:14px;
  line-height:1.6;
  color:var(--ink-2);
  margin:0 0 28px;
  max-width:42ch;
}
.auth-card__foot{
  text-align:center;
  font-family:var(--body);
  font-size:14px;
  color:var(--ink-2);
  margin:24px 0 0;
}

/* Form */
.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
@media(max-width:480px){
  .auth-grid{grid-template-columns:1fr}
}

/* Field with floating icon + label above */
.auth-field{
  /* container: label + input row + optional strength meter */
}
.auth-field label{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:600;
  margin:0 0 8px;
}
/* Wrapper around the input + its icons — provides the positioning context
   so absolute icons center on the input row only, not the whole field. */
.auth-field__input{
  position:relative;
}
.auth-field__icon{
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  pointer-events:none;
}
.auth-field__icon svg{width:18px;height:18px}
.auth-field input{
  width:100%;
  padding:14px 14px 14px 44px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:var(--body);
  font-size:15px;
  color:var(--navy);
  background:#fff;
  outline:none;
  transition:border-color 180ms, box-shadow 180ms;
}
.auth-field input::placeholder{color:var(--ink-faint)}
.auth-field input:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(20,103,236,0.12);
}
.auth-field__toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 180ms, background 180ms;
}
.auth-field__toggle svg{width:18px;height:18px}
.auth-field__toggle:hover{color:var(--blue);background:rgba(20,103,236,0.06)}
.auth-field__toggle.is-revealed{color:var(--blue)}

/* Password strength meter */
.auth-strength{margin:8px 0 0}
.auth-strength__bars{
  display:flex;
  gap:4px;
  margin:0 0 6px;
}
.auth-strength__bars span{
  flex:1;
  height:4px;
  background:var(--line);
  border-radius:2px;
  transition:background 220ms;
}
.auth-strength[data-level="1"] .auth-strength__bars span.is-on{background:#c0252e}
.auth-strength[data-level="2"] .auth-strength__bars span.is-on{background:#d99a4f}
.auth-strength[data-level="3"] .auth-strength__bars span.is-on{background:#5b9dd9}
.auth-strength[data-level="4"] .auth-strength__bars span.is-on{background:#1f7a4f}
.auth-strength__label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--ink-soft);
  margin:0;
}
.auth-strength__label strong{color:var(--navy);text-transform:uppercase;font-size:10px}
.auth-strength[data-level="1"] strong{color:#c0252e}
.auth-strength[data-level="2"] strong{color:#a35d22}
.auth-strength[data-level="3"] strong{color:var(--blue)}
.auth-strength[data-level="4"] strong{color:#1f7a4f}

/* Row: remember me + forgot password */
.auth-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:4px 0;
}

/* Subtle hint line under .auth-row — used for the "No access to email →
   WhatsApp us" rescue path on login.html, so the fallback is visible
   from the same eyeline as "Forgot password?" without competing with it
   visually. Right-aligned to align with the Forgot link above. */
.auth-row-hint{
  margin:2px 0 6px;
  font-size:12px;
  line-height:1.4;
  color:rgba(58,74,100,0.65);
  text-align:right;
}
.auth-row-hint .auth-link{
  font-size:12px;
  color:rgba(58,74,100,0.9);
}

/* Custom checkbox */
.auth-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-2);
  line-height:1.55;
}
.auth-check input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.auth-check__box{
  flex-shrink:0;
  width:18px;
  height:18px;
  border:1.5px solid var(--line);
  border-radius:5px;
  background:#fff;
  position:relative;
  transition:all 180ms;
  margin-top:1px;
}
.auth-check__box::after{
  content:'';
  position:absolute;
  inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
  opacity:0;
  transition:opacity 180ms;
}
.auth-check input:checked + .auth-check__box{
  background:var(--blue);
  border-color:var(--blue);
}
.auth-check input:checked + .auth-check__box::after{opacity:1}
.auth-check:hover .auth-check__box{border-color:var(--blue)}
.auth-check--terms{align-items:flex-start;margin:6px 0 4px}

/* Auth links */
.auth-link{
  font-family:var(--display);
  font-weight:500;
  font-size:13px;
  color:var(--blue);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 180ms;
}
.auth-link:hover{border-color:var(--blue)}
.auth-link--strong{font-weight:600}

/* Submit button */
.auth-form__submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:15px 22px;
  background:var(--navy);
  color:#fff;
  border:none;
  border-radius:10px;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  letter-spacing:-0.005em;
  cursor:pointer;
  margin-top:6px;
  transition:all 220ms;
  box-shadow:0 6px 18px rgba(6,16,41,0.25);
}
.auth-form__submit:hover{
  background:var(--blue);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(20,103,236,0.35);
}
.auth-form__submit .arr{
  display:inline-block;
  transition:transform 220ms;
}
.auth-form__submit:hover .arr{transform:translateX(4px)}

/* "or" divider */
.auth-divider{
  display:flex;
  align-items:center;
  gap:14px;
  margin:8px 0;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.auth-divider::before,
.auth-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--line);
}

/* Alt button (WhatsApp) */
.auth-form__alt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 22px;
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-family:var(--display);
  font-weight:500;
  font-size:14px;
  color:var(--ink-2);
  text-decoration:none !important;
  transition:all 220ms;
}
.auth-form__alt:hover{
  background:#25D366;
  border-color:#25D366;
  color:#fff !important;
}
.auth-form__alt svg{
  width:18px;
  height:18px;
  fill:#25D366;
  transition:fill 220ms;
}
.auth-form__alt:hover svg{fill:#fff}

/* Trust line at bottom */
.auth__trust{
  text-align:center;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
  margin:20px 0 0;
  position:relative;
  z-index:2;
}

/* Responsive tweaks */
@media(max-width:520px){
  .auth__stage{padding:40px 16px 24px}
  .auth-card{padding:36px 24px 28px;border-radius:16px}
  .auth-card--wide{padding:32px 24px 24px}
  .auth-card__close{top:12px;right:12px}
}

/* Demo credentials hint (login page) */
.auth-hint{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:rgba(20,103,236,0.06);
  border:1px solid rgba(20,103,236,0.18);
  border-radius:10px;
  margin:0 0 18px;
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-2);
  line-height:1.5;
}
.auth-hint code{
  font-family:var(--mono);
  font-size:12px;
  background:rgba(20,103,236,0.10);
  color:var(--blue);
  padding:2px 6px;
  border-radius:4px;
  font-weight:600;
}
.auth-hint__tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  font-weight:600;
  color:#fff;
  background:var(--blue);
  padding:4px 9px;
  border-radius:5px;
  flex-shrink:0;
}

/* Login error banner */
.auth-error{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  background:rgba(192,37,46,0.08);
  border:1px solid rgba(192,37,46,0.25);
  border-radius:10px;
  margin:0 0 18px;
  font-family:var(--body);
  font-size:13px;
  color:#9f1f27;
  line-height:1.5;
  animation:auth-shake 360ms;
}
.auth-error svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  color:#c0252e;
}
.auth-error code{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  background:rgba(192,37,46,0.10);
  padding:2px 6px;
  border-radius:4px;
}
@keyframes auth-shake{
  0%, 100%{transform:translateX(0)}
  20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}
  60%{transform:translateX(-3px)}
  80%{transform:translateX(3px)}
}

/* Error state on inputs */
.auth-field input.is-error{
  border-color:#c0252e !important;
  box-shadow:0 0 0 3px rgba(192,37,46,0.10) !important;
}

/* Small "need help?" line under the card foot */
.auth-help{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:14px 0 0;
  padding:14px 12px 0;
  border-top:1px solid var(--line);
  font-family:var(--body);
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.5;
  text-align:center;
  flex-wrap:wrap;
}
.auth-help svg{
  width:14px;
  height:14px;
  fill:#25D366;
  flex-shrink:0;
}
.auth-help .auth-link{font-size:13px}


/* =================================================================
   ADMIN MODE — visual differentiator for /admin.html
   Red accent strip across the very top, shield-overlay avatar,
   search bar inside cards, activity feed, quick-action grid.
   In WordPress these are wrapped in a custom page template that
   only loads for users with the `manage_options` capability.
   ================================================================= */
.is-admin-mode .admin-strip{
  background:linear-gradient(90deg, #b91c1c 0%, #991b1b 100%);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  padding:9px 0;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:0 2px 12px rgba(185,28,28,0.25);
}
.is-admin-mode .admin-strip__inner{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}
.admin-strip__tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:700;
  text-transform:uppercase;
  background:rgba(255,255,255,0.18);
  padding:3px 10px;
  border-radius:999px;
}
.admin-strip__tag svg{width:12px;height:12px}
.admin-strip__msg{
  text-transform:uppercase;
  opacity:0.92;
}
@media(max-width:680px){
  .admin-strip{padding:8px 0;font-size:10px}
  .admin-strip__inner{flex-direction:column;gap:4px}
}

/* Admin avatar shield overlay */
.acc-user--admin .acc-user__avatar{
  background:linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
  position:relative;
}
.acc-user__avatar-shield{
  position:absolute;
  bottom:-3px;
  right:-3px;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#b91c1c;
  border:2px solid var(--paper);
}
.acc-user__avatar-shield svg{width:10px;height:10px}

/* Admin H2 — small count chip alongside the heading */
.acc-h__count{
  font-family:var(--mono);
  font-size:13px;
  font-weight:500;
  color:var(--ink-faint);
  letter-spacing:0.06em;
  margin-left:6px;
}

/* Search + filter row inside acc-card head */
.admin-search{
  display:flex;
  gap:8px;
  align-items:center;
}
.admin-search input[type=search]{
  width:240px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:13px;
  font-family:var(--body);
}
.admin-search select{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:13px;
  background:#fff;
}
@media(max-width:680px){
  .admin-search{width:100%;flex-direction:column;align-items:stretch}
  .admin-search input[type=search]{width:100%}
}

/* Inline action buttons inside table rows */
.admin-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.btn--sm{
  padding:6px 12px !important;
  font-size:12px !important;
  min-height:32px !important;
}

/* Activity feed (Overview tab) */
.acc-activity{
  list-style:none;
  padding:0;
  margin:0;
}
.acc-activity li{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.acc-activity li:last-child{border-bottom:none;padding-bottom:0}
.acc-activity li:first-child{padding-top:0}
.acc-activity__dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
  margin-top:6px;
  box-shadow:0 0 0 3px rgba(15,42,79,0.05);
}
.acc-activity li > div{flex:1;min-width:0}
.acc-activity p{
  font-size:14px;
  color:var(--navy);
  margin:0 0 2px;
  line-height:1.4;
}
.acc-activity p strong{color:var(--navy)}
.acc-activity span{
  font-size:12px;
  color:var(--ink-faint);
  font-family:var(--mono);
  letter-spacing:0.02em;
}

/* Quick-actions 2x2 grid (Overview tab) */
.admin-quick{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.admin-quick__btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  padding:18px 20px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  transition:background 180ms,border-color 180ms,transform 160ms;
}
.admin-quick__btn:hover{
  background:#fff;
  border-color:var(--blue);
  transform:translateY(-1px);
}
.admin-quick__btn strong{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--navy);
}
.admin-quick__btn span{
  font-size:12px;
  color:var(--ink-2);
  line-height:1.4;
}
@media(max-width:680px){
  .admin-quick{grid-template-columns:1fr}
}

/* Orange badge variant for admin nav (pending counts) */
.acc-nav__badge--orange{
  background:rgba(217,154,79,0.18) !important;
  color:#c97a3a !important;
}
.acc-pill--orange{
  background:rgba(217,154,79,0.14);
  color:#c97a3a;
}

/* Banner shown on customer account when admin is logged in */
.is-admin-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 22px;
  background:linear-gradient(90deg, rgba(185,28,28,0.08), rgba(185,28,28,0.04));
  border:1px solid rgba(185,28,28,0.20);
  border-radius:12px;
  margin:0 0 24px;
  flex-wrap:wrap;
}
/* Make the HTML [hidden] attribute actually hide the banner.
   The .is-admin-banner display:flex above had higher specificity
   than the browser's default [hidden]{display:none} rule, so the
   banner was ALWAYS visible regardless of the JS toggle —
   silently leaking the "admin previewing customer" message to
   every real customer. Caught by Ben while testing as bensonphuah.
   This rule (1 class + 1 attribute = 11 specificity > 1 class alone)
   correctly wins back from display:flex when hidden is set. */
.is-admin-banner[hidden]{display:none}
.is-admin-banner p{
  margin:0;
  font-size:13.5px;
  color:#7f1d1d;
}
.is-admin-banner strong{color:#7f1d1d}

/* ── Service history timeline (account.html → History tab) ── */
.cust-history__year{margin:0 0 28px}
.cust-history__year:last-child{margin-bottom:0}
.cust-history__year-h{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#7a8aa3;
  margin:0 0 12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
  font-weight:600;
}
.cust-history__list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.cust-history__list::before{
  content:'';
  position:absolute;
  left:18px;
  top:8px;
  bottom:8px;
  width:1px;
  background:var(--line);
  z-index:0;
}
.cust-history__row{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:14px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 14px 12px 10px;
  position:relative;
  z-index:1;
}
.cust-history__dot{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#f4f7fc;
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.cust-history__body{min-width:0}
.cust-history__title{
  font-family:var(--display);
  font-weight:600;
  font-size:14px;
  color:var(--navy);
  margin:0 0 3px;
  line-height:1.4;
}
.cust-history__sub{
  font-size:12.5px;
  color:var(--ink-2);
  margin:0 0 4px;
  line-height:1.45;
}
.cust-history__when{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  margin:0;
  letter-spacing:0.04em;
}


/* ── Documents tab — 6-card grid ─────────────────────────────────── */
.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;
  margin:0 0 6px;
}
.doc-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 18px 16px;
  transition:border-color 200ms,transform 200ms,box-shadow 200ms;
  min-height:180px;
}
.doc-card:hover{
  border-color:#cfdcef;
  transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(10,21,48,0.10);
}
.doc-card__icon{
  font-size:24px;
  line-height:1;
  margin-bottom:10px;
  opacity:0.9;
}
.doc-card__title{
  font-family:var(--display);
  font-size:14.5px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.012em;
  margin:0 0 5px;
  line-height:1.3;
}
.doc-card__desc{
  font-size:12.5px;
  color:var(--ink-2);
  margin:0 0 10px;
  line-height:1.45;
  flex:1;
}
.doc-card__state{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--ink-faint);
  margin:0 0 10px;
  line-height:1.4;
  letter-spacing:0.01em;
}
.doc-card__state.is-ok{color:#0a8c4a;font-weight:600}
.doc-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
  padding:9px 12px;
  font-family:var(--display);
  font-size:12.5px;
  font-weight:600;
  color:#fff;
  background:var(--blue);
  border:1px solid var(--blue);
  border-radius:7px;
  cursor:pointer;
  text-decoration:none;
  transition:all 180ms;
  margin-top:auto;
}
.doc-card__btn:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
  text-decoration:none;
}
.doc-card__btn--ghost{
  background:#fff;
  color:var(--ink-2);
  border-color:var(--line);
  margin-top:6px;
}
.doc-card__btn--ghost:hover{
  background:#f4f8fd;
  color:var(--blue);
  border-color:var(--blue);
}
.doc-card__gallery{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px;
}
.doc-card__thumb{
  width:48px;
  height:48px;
  border-radius:6px;
  background-size:cover;
  background-position:center;
  background-color:#f4f7fc;
  border:1px solid var(--line);
  transition:transform 160ms,border-color 160ms;
  display:block;
}
.doc-card__thumb:hover{
  transform:scale(1.08);
  border-color:var(--blue);
}

@media (max-width: 640px){
  .doc-grid{grid-template-columns:1fr;gap:12px}
  .doc-card{min-height:0;padding:16px}
}


/* =================================================================
   FINAL-REVIEW FIXES (13 May 2026) — accessibility + CLS + tap targets
   Addresses HIGH/MEDIUM findings from FINAL_REVIEW.md categories 7–9.
   ================================================================= */

/* ── 1. :focus-visible everywhere keyboard users need to know they're
      focused. Browsers default to outline:none on click but show
      outline on Tab — we make it explicit + on-brand. */
:where(button,a,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid #246BB3;
  outline-offset:2px;
  border-radius:4px;
}
.cfg__opt:focus-visible,
.cfg__swatch:focus-visible{
  outline:3px solid #246BB3;
  outline-offset:3px;
}

/* ── 2. Configurator swatches — bump to WCAG 44px tap target on
      pointer:coarse (touch) devices. Desktop keeps the prettier 38/42px. */
@media(pointer:coarse){
  .cfg__swatch,
  .cfg__opts.swatch-row .cfg__swatch{
    width:44px !important;
    height:44px !important;
  }
  .cfg__opt{
    min-height:44px !important;
    padding:11px 16px !important;
  }
}

/* ── 3. Hero CSS-background containers — reserve aspect-ratio so
      images loading don't shift layout. Targets the named heroes
      flagged in the review. */
.hero[style*="evolution-hero-banner"],
.pagehero[style*="evolution-hero-banner"],
.hero[style*="referral-bg"],
.pagehero[style*="referral-bg"]{
  aspect-ratio:1600 / 600;
  min-height:380px;
}
@media(max-width:720px){
  .hero[style*="evolution-hero-banner"],
  .pagehero[style*="evolution-hero-banner"],
  .hero[style*="referral-bg"],
  .pagehero[style*="referral-bg"]{
    aspect-ratio:9 / 14;
    min-height:520px;
  }
}

/* ── 4. Success modals — cap width so 375px phones don't overflow.
      Targets the booking/order confirmation modals from FINAL_REVIEW. */
.modal,
.modal__panel,
[class*="success-modal"],
[class*="booking-confirm"]{
  max-width:min(92vw, 520px);
  margin-left:auto;
  margin-right:auto;
  box-sizing:border-box;
}

/* ── 5. Password toggle on login/admin_login — ensure 44px tap area. */
.password-toggle,
.pw-toggle,
button[aria-label*="password" i]{
  min-width:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ── 6. Required field indicator — add visible asterisk to labels for
      inputs marked required (used on contact.html etc). */
label:has(+ input[required])::after,
label:has(+ textarea[required])::after,
label:has(+ select[required])::after,
label.required::after{
  content:" *";
  color:#C0392B;
  font-weight:600;
  margin-left:1px;
}

/* ── 7. Inline form error (replaces alert() on order/book pages). */
.field-error{
  color:#C0392B;
  font-size:13px;
  margin-top:4px;
  display:block;
  min-height:1.2em;
}
.field-error:empty{display:none}
.has-error input,
.has-error textarea,
.has-error select{
  border-color:#C0392B !important;
  outline-color:#C0392B !important;
}

/* ── 8. Slot picker empty state (book-demo.html). */
.slots-empty{
  padding:18px 16px;
  background:#F8FAFD;
  border:1px dashed #C8D5E5;
  border-radius:8px;
  color:#5C7290;
  font-size:14px;
  text-align:center;
  line-height:1.5;
}

/* ── 9. img tags without explicit dimensions — reserve a sane min so
      layout shift is bounded even before width/height attrs are added. */
img:not([width]):not([height]){
  min-height:20px;
}

/* ── 10. Referral country-code picker — don't cover the phone input
      on small viewports. Make it a native select on mobile. */
@media(max-width:520px){
  .cc-picker__menu,
  [data-cc-menu]{
    max-width:min(80vw, 240px) !important;
    left:0 !important;
    right:auto !important;
  }
}


/* =================================================================
   BLOG ARTICLE PAGES (blog-*.html) — added 15 May 2026
   Shared layout for the 9 long-form articles written by Father.
   Uses the same Inter Tight / Inter / JetBrains Mono stack as the
   rest of the site. Each article page renders an English + Chinese
   version of the body; a toggle button at the top swaps body class
   .show-zh between them. Static assets only — no per-page CSS.
   ================================================================= */
.bp-shell{max-width:880px;margin:0 auto;padding:32px 24px 0}
@media (max-width:640px){.bp-shell{padding:20px 16px 0}}

/* Blog-post pages: strip the .pagehero's own background + padding so
   the .bp-hero below shows through behind the nav, creating ONE
   continuous atmospheric banner from the top of the page. */
body.is-page-blog-post .pagehero{
  background:transparent;
  padding:0;
  position:relative;
  z-index:2;
}
body.is-page-blog-post .pagehero::after{display:none}
body.is-page-blog-post .pagehero__nav{margin-bottom:0;padding-top:32px}

/* Article page hero — Caustic Veil atmospheric background with the
   article title overlaid in white. Each of the 9 articles points
   at its own bg-blog-N-{slug}.png background via inline style.
   Pulled up under the nav with margin-top so it forms a single
   uninterrupted banner with the nav-pill floating on top. */
.bp-hero{
  width:100%;
  min-height:560px;
  background:#0a1530 center/cover no-repeat;
  position:relative;
  z-index:1;
  margin-top:-150px;       /* extend up behind the nav row */
  padding:200px 24px 80px; /* leave room for the nav above the title */
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  overflow:hidden;
}
.bp-hero::before{
  /* Soft radial darken — keeps title legible against busy caustics */
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,
    rgba(10,21,48,0.42) 0%,
    rgba(10,21,48,0.28) 45%,
    rgba(10,21,48,0.55) 100%);
  pointer-events:none;
}
.bp-hero__inner{
  position:relative;
  max-width:920px;
  text-align:center;
  z-index:1;
}
.bp-hero__eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.78);
  margin:0 0 24px;
  padding:7px 14px;
  background:rgba(94,184,255,0.10);
  border:1px solid rgba(94,184,255,0.32);
  border-radius:30px;
}
.bp-hero__title{
  font-family:var(--display);
  font-size:clamp(28px, 4.4vw, 50px);
  font-weight:700;
  letter-spacing:-0.022em;
  line-height:1.14;
  color:#fff;
  margin:0;
  text-shadow:0 2px 16px rgba(10,21,48,0.45);
}
@media (max-width:980px){
  .bp-hero{min-height:480px;margin-top:-130px;padding:170px 22px 60px}
}
@media (max-width:640px){
  .bp-hero{min-height:380px;margin-top:-110px;padding:140px 18px 50px}
  .bp-hero__eyebrow{font-size:10px;margin-bottom:16px;padding:6px 12px}
}

/* Article-num eyebrow */
.bp-eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  margin:0 0 14px;
}

/* H1 — article title */
.bp-title{
  font-family:var(--display);
  font-size:clamp(28px,4.2vw,40px);
  line-height:1.18;
  letter-spacing:-0.022em;
  font-weight:700;
  color:var(--navy);
  margin:0 0 18px;
}

/* Lede line under title (date + read time) */
.bp-lede{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-faint);
  letter-spacing:0.06em;
  margin:0 0 28px;
}

/* Lang toggle — sized to match the .bp-back pill so the two sit
   on the same baseline at the same height inside .bp-actions. */
.bp-lang{
  display:inline-flex;
  gap:2px;
  border:1px solid rgba(10,21,48,0.16);
  border-radius:999px;
  padding:3px;
  background:#fff;
  margin:0;
  /* Vertically align text the same way the back-pill does. */
  align-items:center;
}
.bp-lang button{
  background:transparent;
  border:none;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.10em;     /* match .bp-back letter-spacing */
  color:var(--ink-2);
  padding:8px 16px;          /* slightly tighter than .bp-back but
                                yields ~36px outer height once the
                                container's 3px padding is added,
                                matching the back pill */
  border-radius:999px;
  cursor:pointer;
  transition:all 160ms;
  line-height:1;
}
.bp-lang button.is-active{
  background:var(--navy);
  color:#fff;
}

/* GEO paragraph callout (AI-readable direct answer) */
.bp-geo{
  background:linear-gradient(180deg,#eff6ff,#dbeafe);
  border-left:4px solid var(--blue);
  border-radius:0 12px 12px 0;
  padding:20px 24px;
  margin:0 0 32px;
}
.bp-geo__label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
  display:block;
  margin-bottom:8px;
}
.bp-geo p{
  margin:0;
  font-size:15.5px;
  line-height:1.65;
  color:var(--navy);
  font-style:italic;
}

/* Article body content */
/* Blog tables wrapped in .bp-table-wrap get horizontal-scroll on mobile.
   Same pattern as .rent-compare-wrap on prime_rent.html. Min-width on
   the table keeps columns from collapsing — scroll instead. */
.bp-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:18px 0;
  border-radius:10px;
}
.bp-table-wrap table{
  min-width:600px;
  margin:0;
}
@media(max-width:720px){
  .bp-table-wrap table th{padding:10px 12px;font-size:12px}
  .bp-table-wrap table td{padding:10px 12px;font-size:13px}
}

.bp-body{
  font-family:'Inter',sans-serif;
  font-size:17px;
  line-height:1.72;
  color:#1a2740;
}
.bp-body h2{
  font-family:var(--display);
  font-size:24px;
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.018em;
  line-height:1.25;
  margin:40px 0 16px;
}
.bp-body h3{
  font-family:var(--display);
  font-size:18px;
  font-weight:600;
  color:var(--blue);
  letter-spacing:-0.012em;
  margin:28px 0 10px;
}
.bp-body p{margin:0 0 18px}
.bp-body strong{color:var(--navy);font-weight:600}
.bp-body em{font-style:italic;color:var(--ink-2)}
.bp-body ul,.bp-body ol{margin:0 0 20px;padding-left:28px}
.bp-body li{margin:0 0 8px;line-height:1.65}
.bp-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.bp-body a:hover{color:var(--navy)}

/* Tables — clean comparison tables */
.bp-body table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 28px;
  font-size:14.5px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.bp-body th{
  background:var(--navy);
  color:#fff;
  font-family:var(--display);
  font-weight:600;
  padding:12px 14px;
  text-align:left;
  font-size:13px;
  letter-spacing:-0.005em;
}
.bp-body td{
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  color:#1a2740;
  line-height:1.5;
}
.bp-body tr:last-child td{border-bottom:none}
.bp-body tr:nth-child(even) td{background:#fafcff}

/* FAQ block */
.bp-faq{
  background:#fafcff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px 30px;
  margin:36px 0 28px;
}
.bp-faq h2{
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  color:var(--navy);
  margin:0 0 20px;
  letter-spacing:-0.012em;
}
.bp-faq__q{
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  color:var(--navy);
  margin:18px 0 6px;
  line-height:1.4;
}
.bp-faq__q:first-of-type{margin-top:0}
.bp-faq__a{
  font-size:14.5px;
  line-height:1.65;
  color:#3a4a64;
  margin:0 0 4px;
  padding-left:14px;
  border-left:2px solid var(--blue);
}

/* CTA box */
.bp-cta{
  background:var(--navy);
  border-radius:14px;
  padding:32px 32px;
  margin:36px 0 24px;
  text-align:center;
}
.bp-cta h3{
  font-family:var(--display);
  font-size:20px;
  font-weight:700;
  color:#fff;
  margin:0 0 10px;
  letter-spacing:-0.012em;
  line-height:1.3;
}
.bp-cta p{
  font-size:14.5px;
  color:rgba(255,255,255,0.78);
  margin:0 0 20px;
  line-height:1.55;
}
.bp-cta a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  padding:12px 26px;
  border-radius:8px;
  font-family:var(--display);
  font-weight:600;
  font-size:14.5px;
  transition:transform 160ms,background 160ms;
}
.bp-cta a:hover{background:#1f5e9c;transform:translateY(-1px);text-decoration:none}

/* Health disclaimer */
.bp-disclaimer{
  font-size:12.5px;
  color:var(--ink-faint);
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:14px 18px;
  margin:0 0 36px;
  line-height:1.6;
}
.bp-disclaimer strong{color:var(--ink-2);font-weight:600}

/* Footnote under tables */
.bp-body .bp-fn{
  font-size:12.5px;
  color:var(--ink-faint);
  margin-top:-18px;
  margin-bottom:24px;
  line-height:1.5;
}

/* Row that holds the back link + lang toggle at the top of bp-shell. */
.bp-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin:0 0 28px;
}

/* In-flow back-to-blog pill — sits at the top-left of the bp-shell
   next to the EN/中文 toggle. Same dark-navy pill aesthetic as the
   buyers-guide's floating button but inline (not fixed). */
.bp-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  padding:8px 18px;
  border-radius:999px;
  border:1px solid rgba(10,21,48,0.10);
  background:rgba(12,35,64,0.92);
  transition:all 180ms;
  line-height:1;       /* match .bp-lang button metrics for equal heights */
}
.bp-back:hover{
  background:#246bb3;
  color:#fff;
  text-decoration:none;
}

/* EN/ZH visibility — default shows EN. The site-wide i18n.js sets
   document.documentElement.lang = 'zh-Hans' whenever the user picks
   中文 (either via the nav-pill toggle or the bp-lang toggle), so
   listening for that attribute keeps both toggles in sync.
   The legacy body.show-zh class is kept as a fallback for any
   pages that haven't been migrated yet. */
.bp-zh{display:none}
html[lang="zh-Hans"] .bp-en{display:none}
html[lang="zh-Hans"] .bp-zh{display:block}
body.show-zh .bp-en{display:none}
body.show-zh .bp-zh{display:block}

/* Larger spacing between articles' last footer and the cta-mini */
.bp-shell+.cta-mini{margin-top:48px}


/* =================================================================
   RENTAL VERTICAL TABS — homepage section after the product grid
   ================================================================= */
.renttabs{
  background:#fafcff;
  padding:88px 0 96px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.renttabs > .wrap{max-width:1180px;padding:0 24px}
.renttabs__head{text-align:center;max-width:740px;margin:0 auto 48px}
.renttabs__eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;
}
.renttabs__title{
  font-family:var(--display);
  font-size:clamp(28px, 4vw, 44px);
  font-weight:700;color:var(--navy);
  letter-spacing:-0.025em;line-height:1.14;margin:0 0 18px;
}
.renttabs__title em{color:var(--blue);font-style:normal}
.renttabs__lede{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:0}

.renttabs__split{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 48px -24px rgba(10,21,48,0.18);
}

.renttabs__rail{
  background:#f4f7fc;
  border-right:1px solid var(--line);
  padding:14px;
  display:flex;flex-direction:column;gap:4px;
}
.renttabs__tab{
  appearance:none;background:transparent;border:none;
  border-radius:10px;padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  text-align:left;cursor:pointer;position:relative;
  transition:background 160ms,transform 160ms;
}
.renttabs__tab:hover{background:rgba(36,107,179,0.06)}
.renttabs__tab.is-active{
  background:linear-gradient(135deg, var(--navy), var(--blue));
  color:#fff;
  box-shadow:0 8px 22px -10px rgba(36,107,179,0.55);
}
.renttabs__tab-num{
  width:38px;height:38px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:15px;
  background:#fff;color:var(--blue);flex-shrink:0;
  border:1px solid var(--line);transition:all 160ms;
}
.renttabs__tab-num--icon svg{width:16px;height:16px;display:block}
.renttabs__tab.is-active .renttabs__tab-num{
  background:rgba(255,255,255,0.16);color:#fff;border-color:rgba(255,255,255,0.22);
}
.renttabs__tab-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.renttabs__tab-label{
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:-0.012em;color:var(--navy);
}
.renttabs__tab.is-active .renttabs__tab-label{color:#fff}
.renttabs__tab-sub{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.04em;color:var(--ink-faint);
}
.renttabs__tab.is-active .renttabs__tab-sub{color:rgba(255,255,255,0.78)}
.renttabs__tab-pin{
  font-size:14px;color:#f6b23f;
  position:absolute;top:10px;right:14px;
}
.renttabs__tab.is-active .renttabs__tab-pin{color:#ffd96b}

.renttabs__divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 8px 6px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-faint);
}
.renttabs__divider::before,
.renttabs__divider::after{
  content:"";flex:1;height:1px;background:var(--line);
}

.renttabs__pane{padding:36px 38px 32px;min-height:480px}
.renttabs__content{display:none;animation:rentTabsFade 280ms ease}
.renttabs__content.is-active{display:block}
@keyframes rentTabsFade{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.renttabs__c-eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 10px;
}
.renttabs__c-title{
  font-family:var(--display);
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:700;color:var(--navy);
  letter-spacing:-0.02em;line-height:1.22;margin:0 0 14px;
}
.renttabs__c-lede{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 24px;max-width:62ch}

.renttabs__specs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:#f4f7fc;border:1px solid var(--line);border-radius:12px;
  overflow:hidden;margin:0 0 20px;
}
.renttabs__specs > div{
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  border-right:1px solid var(--line);
}
.renttabs__specs > div:last-child{border-right:none}
.renttabs__spec-label{
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-faint);
}
.renttabs__spec-val{
  font-family:var(--display);font-size:18px;font-weight:700;
  color:var(--navy);letter-spacing:-0.014em;
}

.renttabs__price-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 22px}
.renttabs__price-pill{
  display:inline-flex;align-items:baseline;gap:8px;
  background:linear-gradient(135deg, var(--navy), var(--blue));
  color:#fff;padding:12px 22px;border-radius:999px;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0.04em;
}
.renttabs__price-pill strong{
  font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-0.014em;
}
.renttabs__deposit-pill{
  font-family:var(--mono);font-size:11.5px;color:var(--ink-2);
  background:#fff;border:1px solid var(--line);
  padding:9px 14px;border-radius:999px;letter-spacing:0.02em;
}

.renttabs__features{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:9px}
.renttabs__features li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.renttabs__features li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}

.renttabs__benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin:0 0 26px}
@media (max-width:720px){.renttabs__benefits{grid-template-columns:1fr}}
.renttabs__benefit{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.renttabs__benefit strong{color:var(--navy);font-weight:600}
.renttabs__check{
  width:24px;height:24px;border-radius:50%;
  background:rgba(36,107,179,0.10);color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;flex-shrink:0;margin-top:1px;
}

.renttabs__cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.renttabs__cta-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:14.5px;
  padding:12px 22px;border-radius:8px;transition:all 180ms;
}
.renttabs__cta-primary:hover{background:var(--navy);transform:translateY(-1px)}
.renttabs__cta-primary .arr{transition:transform 160ms}
.renttabs__cta-primary:hover .arr{transform:translateX(2px)}
.renttabs__cta-ghost{
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:0.08em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
  padding:6px 0;border-bottom:1px solid transparent;
  transition:border-color 160ms,color 160ms;
}
.renttabs__cta-ghost:hover{border-bottom-color:var(--blue);color:var(--navy)}

.renttabs__deeplink-row{text-align:center;margin:32px 0 0}
.renttabs__deeplink{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;
  padding:10px 18px;border:1px solid var(--line);border-radius:999px;
  background:#fff;transition:all 180ms;
}
.renttabs__deeplink:hover{border-color:var(--blue);color:var(--blue)}

@media (max-width:880px){
  .renttabs__split{grid-template-columns:1fr;gap:0}
  .renttabs__rail{
    flex-direction:column;
    border-right:none;border-bottom:1px solid var(--line);
    padding:8px;gap:0;
  }
  .renttabs__tab{padding:12px 14px}
  .renttabs__divider{margin:8px 6px 4px}
  .renttabs__pane{padding:24px 22px 22px;min-height:0}
  .renttabs__c-title{font-size:22px}
  .renttabs__price-row{gap:10px}
  .renttabs__price-pill{padding:10px 18px}
  .renttabs__price-pill strong{font-size:20px}
}

/* ======================================================
   PRODUCTS PAGE — Option B: inline rent hint under cards
   ====================================================== */
.rent-hint{
  margin:6px 0 14px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:0.04em;line-height:1.2;
}
.rent-hint a{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--blue);text-decoration:none;
  padding:5px 10px;border-radius:999px;
  background:rgba(36,107,179,0.06);
  border:1px solid rgba(36,107,179,0.18);
  transition:all 180ms ease;
}
.rent-hint a:hover{
  background:rgba(36,107,179,0.12);
  border-color:rgba(36,107,179,0.32);
  transform:translateX(2px);
}
.rent-hint__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(36,107,179,0.16);
}
/* On navy / blue-tinted cards (LV / RV "is-popular"), flip palette */
.product-card.is-popular .rent-hint a,
.rent-hint--onblue a{
  color:#fff;
  background:rgba(255,255,255,0.10);
  border-color:rgba(255,255,255,0.22);
}
.product-card.is-popular .rent-hint a:hover,
.rent-hint--onblue a:hover{
  background:rgba(255,255,255,0.18);
  border-color:rgba(255,255,255,0.40);
}
.product-card.is-popular .rent-hint__dot,
.rent-hint--onblue .rent-hint__dot{
  background:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,0.20);
}

/* ======================================================
   PRODUCTS PAGE — Option A: full-width rent band
   ====================================================== */
.prod-rentband{
  position:relative;padding:72px 0 80px;overflow:hidden;
  background:linear-gradient(135deg,#0A2540 0%,#143a64 56%,#1f5188 100%);
  color:#fff;
}
.prod-rentband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(640px 320px at 12% 0%, rgba(111,177,224,0.18), transparent 60%),
    radial-gradient(540px 360px at 92% 100%, rgba(36,107,179,0.32), transparent 60%);
}
.prod-rentband .wrap{position:relative;z-index:1}
.prod-rentband__inner{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;
}
.prod-rentband__copy{max-width:560px}
.prod-rentband__eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#6FB1E0;margin:0 0 16px;
}
.prod-rentband__title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(28px,3.4vw,40px);line-height:1.08;
  letter-spacing:-0.025em;margin:0 0 16px;color:#fff;
}
.prod-rentband__lede{
  font-size:15.5px;line-height:1.6;color:rgba(255,255,255,0.78);
  margin:0 0 22px;max-width:520px;
}
.prod-rentband__bullets{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:11px;
}
.prod-rentband__bullets li{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:rgba(255,255,255,0.88);
}
.prod-rentband__check{
  width:22px;height:22px;border-radius:50%;
  background:rgba(111,177,224,0.18);color:#6FB1E0;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.prod-rentband__check svg{width:12px;height:12px;display:block}

.prod-rentband__panel{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:20px;padding:28px 26px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.prod-rentband__pricerow{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-bottom:22px;
}
.prod-rentband__pricepill{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:14px;padding:14px 12px;
  text-align:center;transition:all 200ms ease;
}
.prod-rentband__pricepill--featured{
  background:rgba(111,177,224,0.14);
  border-color:rgba(111,177,224,0.42);
  box-shadow:0 8px 22px -10px rgba(111,177,224,0.55);
}
.prod-rentband__pricelabel{
  display:block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.62);margin-bottom:6px;
}
.prod-rentband__pricepill--featured .prod-rentband__pricelabel em{
  font-style:normal;color:#6FB1E0;
}
.prod-rentband__pricepill strong{
  display:block;font-family:var(--display);font-weight:700;
  font-size:22px;letter-spacing:-0.02em;color:#fff;line-height:1;
}
.prod-rentband__pricepill strong small{
  font-weight:500;font-size:11px;color:rgba(255,255,255,0.62);
  margin-left:1px;letter-spacing:0;
}
.prod-rentband__ctas{
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.prod-rentband__cta{
  width:100%;justify-content:center;
}
.prod-rentband__ghost{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:0.06em;color:rgba(255,255,255,0.72);
  text-decoration:none;transition:color 160ms;
}
.prod-rentband__ghost:hover{color:#fff}

@media (max-width:880px){
  .prod-rentband{padding:48px 0 52px}
  .prod-rentband__inner{grid-template-columns:1fr;gap:32px}
  .prod-rentband__panel{padding:22px 20px}
  .prod-rentband__pricerow{gap:8px}
  .prod-rentband__pricepill{padding:12px 8px}
  .prod-rentband__pricepill strong{font-size:18px}
  .prod-rentband__pricelabel{font-size:9px;letter-spacing:0.10em}
}

/* ======================================================
   ORDER FORM — Rent rescue strip (slim, above the form)
   ====================================================== */
.rent-rescue{
  position:relative;padding:36px 0;overflow:hidden;
  background:linear-gradient(110deg,#0A2540 0%,#143a64 60%,#1f5188 100%);
  color:#fff;border-top:1px solid rgba(255,255,255,0.06);
}
.rent-rescue::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(520px 220px at 8% -10%, rgba(111,177,224,0.20), transparent 60%),
    radial-gradient(420px 260px at 96% 110%, rgba(36,107,179,0.30), transparent 60%);
}
.rent-rescue .wrap{position:relative;z-index:1}
.rent-rescue__inner{
  display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
}
.rent-rescue__copy{max-width:680px}
.rent-rescue__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:#6FB1E0;margin:0 0 10px;
}
.rent-rescue__pulse{
  width:7px;height:7px;border-radius:50%;background:#6FB1E0;
  box-shadow:0 0 0 0 rgba(111,177,224,0.6);
  animation:rentRescuePulse 2.2s ease-out infinite;
}
@keyframes rentRescuePulse{
  0%{box-shadow:0 0 0 0 rgba(111,177,224,0.55)}
  70%{box-shadow:0 0 0 9px rgba(111,177,224,0)}
  100%{box-shadow:0 0 0 0 rgba(111,177,224,0)}
}
.rent-rescue__title{
  font-family:var(--display);font-weight:600;
  font-size:clamp(20px,2.1vw,26px);line-height:1.25;
  letter-spacing:-0.018em;margin:0 0 8px;color:#fff;
}
.rent-rescue__title strong{
  font-weight:700;color:#6FB1E0;letter-spacing:-0.02em;
}
.rent-rescue__lede{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:0.04em;color:rgba(255,255,255,0.66);
  margin:0;line-height:1.55;
}
.rent-rescue__ctas{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  flex-shrink:0;
}
.rent-rescue__cta{white-space:nowrap}
.rent-rescue__dismiss{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.06em;color:rgba(255,255,255,0.50);
  text-align:right;
}

@media (max-width:780px){
  .rent-rescue{padding:28px 0 32px}
  .rent-rescue__inner{grid-template-columns:1fr;gap:18px}
  .rent-rescue__ctas{align-items:stretch}
  .rent-rescue__cta{justify-content:center}
  .rent-rescue__dismiss{text-align:center}
}

/* ======================================================
   CONTACT PAGE — Rent infocard (featured/highlighted)
   ====================================================== */
.infocard--rent{
  display:block;text-decoration:none;
  background:linear-gradient(135deg,#0A2540 0%,#143a64 60%,#1f5188 100%);
  border-color:transparent;
  color:#fff;
  position:relative;overflow:hidden;
  transition:transform 200ms ease, box-shadow 200ms ease;
}
.infocard--rent::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(360px 200px at 100% 100%, rgba(111,177,224,0.20), transparent 60%);
}
.infocard--rent:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px -14px rgba(10,37,64,0.55);
}
.infocard--rent h3{color:#fff;position:relative;z-index:1}
.infocard--rent p{color:rgba(255,255,255,0.78);position:relative;z-index:1}
.infocard__icon--rent{
  background:rgba(111,177,224,0.18) !important;
  color:#6FB1E0 !important;
  position:relative;z-index:1;
}
.infocard__cta-line{
  display:inline-block;margin-top:8px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.10em;text-transform:uppercase;
  color:#6FB1E0;
}
.infocard--rent:hover .infocard__cta-line{color:#fff}

/* ======================================================
   RENT-FORM PAGE (rent-form.html)
   ====================================================== */
.rentform-section{padding:64px 0 80px}

.rentform{
  display:flex;flex-direction:column;gap:48px;
  max-width:980px;margin:0 auto;
}

/* ── Step header (01/02/03 numbers + title + hint) ── */
.rentform-step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:32px 36px 36px;
  box-shadow:0 6px 22px -16px rgba(10,37,64,0.18);
}
.rentform-step__head{
  display:flex;align-items:flex-start;gap:18px;margin-bottom:24px;
}
.rentform-step__num{
  flex-shrink:0;
  width:42px;height:42px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:0.04em;
}
.rentform-step__title{
  font-family:var(--display);font-weight:700;
  font-size:22px;letter-spacing:-0.018em;
  margin:0 0 4px;color:var(--navy);line-height:1.2;
}
.rentform-step__hint{
  font-size:13.5px;line-height:1.55;color:var(--ink-faint);
  margin:0;max-width:580px;
}

/* ── Plan picker tabs (Step 01) ── */
.rf-planpicker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:24px;
}
.rf-plan-tab{
  position:relative;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:18px 14px 16px;
  cursor:pointer;
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  transition:all 200ms ease;
  font-family:inherit;text-align:left;
}
.rf-plan-tab:hover{border-color:var(--blue);transform:translateY(-1px)}
.rf-plan-tab.is-active{
  border-color:var(--navy);
  background:linear-gradient(135deg, #0A2540 0%, #143a64 100%);
  color:#fff;
  box-shadow:0 10px 26px -14px rgba(10,37,64,0.55);
}
.rf-plan-tab__pin{
  position:absolute;top:10px;right:14px;
  color:#f6b23f;font-size:14px;
}
.rf-plan-tab.is-active .rf-plan-tab__pin{color:#ffd96b}
.rf-plan-tab__label{
  font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:-0.012em;color:var(--navy);
}
.rf-plan-tab.is-active .rf-plan-tab__label{color:#fff}
.rf-plan-tab__price{
  font-family:var(--display);font-weight:700;font-size:22px;
  letter-spacing:-0.022em;color:var(--blue);
  line-height:1;
}
.rf-plan-tab.is-active .rf-plan-tab__price{color:#6FB1E0}
.rf-plan-tab__price small{
  font-family:var(--mono);font-weight:500;font-size:11px;
  margin-left:2px;letter-spacing:0;color:var(--ink-faint);
}
.rf-plan-tab.is-active .rf-plan-tab__price small{color:rgba(255,255,255,0.55)}
.rf-plan-tab__tag{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.10em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:2px;
}
.rf-plan-tab.is-active .rf-plan-tab__tag{color:rgba(255,255,255,0.62)}

/* Commercial tab — subtle light-blue accent on the tag so the
   "Prime LC-11" label feels distinct from the residential plans */
.rf-plan-tab--biz .rf-plan-tab__tag{color:var(--blue)}
.rf-plan-tab--biz.is-active .rf-plan-tab__tag{color:#a0d4f5}

/* Summary card under the tabs */
.rf-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:18px 22px;
  background:linear-gradient(135deg, rgba(227,239,249,0.55), rgba(187,214,238,0.40));
  border:1px solid rgba(36,107,179,0.18);
  border-radius:12px;
}
.rf-summary__col{display:flex;flex-direction:column;gap:4px}
.rf-summary__label{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-faint);
}
.rf-summary__val{
  font-family:var(--display);font-weight:600;font-size:14px;
  letter-spacing:-0.012em;color:var(--navy);line-height:1.3;
}
.rf-summary__val--accent{color:var(--blue);font-weight:700;font-size:15px}

/* ── Config grid (Step 02) ── */
.rf-config-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}
.rf-fieldset{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 20px;
  margin:0;
}
.rf-fieldset__legend{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;padding:0;
}
.rf-fieldset__hint{
  font-size:11.5px;line-height:1.5;color:var(--ink-faint);
  margin:10px 0 0;font-family:var(--mono);
}
.rf-options{display:flex;flex-direction:column;gap:8px}
.rf-options--2col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rf-options--3col{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rf-options--4col{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}

.rf-radio{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:10px;
  cursor:pointer;transition:all 160ms;
  font-size:13.5px;
}
.rf-radio input{position:absolute;opacity:0;pointer-events:none}
.rf-radio:hover{border-color:var(--blue)}
.rf-radio:has(input:checked),
.rf-radio.is-checked{
  border-color:var(--blue);
  background:rgba(36,107,179,0.06);
  box-shadow:inset 0 0 0 1px var(--blue);
}
.rf-radio__swatch{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  box-shadow:0 2px 6px rgba(10,37,64,0.18);
}
.rf-radio__label{
  font-family:var(--display);font-weight:500;font-size:13.5px;
  letter-spacing:-0.005em;color:var(--navy);line-height:1.35;
}
.rf-radio__label strong{
  display:block;font-weight:700;color:var(--navy);
}
.rf-radio__label span{
  display:block;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:0.04em;color:var(--ink-faint);
  margin-top:2px;
}
.rf-radio--text{padding:12px 14px}

/* Commercial business panel */
.rf-biz-panel{
  margin-top:20px;
  padding:22px 24px;
  background:linear-gradient(135deg, rgba(227,239,249,0.55), rgba(187,214,238,0.30));
  border:1px solid rgba(36,107,179,0.18);
  border-radius:12px;
}

/* Commercial-only fieldset (LC-11 panel shown when business plan picked).
   Subtle blue accent so admin / customer sees it's the special commercial slot. */
.rf-fieldset--biz-only{
  background:linear-gradient(135deg, rgba(227,239,249,0.55), rgba(187,214,238,0.30));
  border-color:rgba(36,107,179,0.22);
}
.rf-biz-panel__title{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--navy);margin:0 0 14px;
}
.rf-biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── Contact grid (Step 03) ── */
.rf-contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.rf-field{display:flex;flex-direction:column;gap:6px}
.rf-field--full{grid-column:1 / -1}
.rf-field label{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.10em;text-transform:uppercase;
  color:var(--ink-2);
}
.rf-field__required::after{
  content:" *";color:#C0392B;font-weight:700;
}
.rf-field input,
.rf-field select,
.rf-field textarea{
  font-family:inherit;font-size:14.5px;
  padding:12px 14px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:10px;
  color:var(--navy);
  transition:border-color 160ms, box-shadow 160ms;
}
.rf-field input:focus,
.rf-field select:focus,
.rf-field textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(36,107,179,0.14);
}
.rf-field textarea{resize:vertical;min-height:80px;line-height:1.5}

/* ── Agreement checkbox ── */
.rf-agree{
  display:flex;align-items:flex-start;gap:12px;
  margin-top:22px;padding:14px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:13.5px;line-height:1.5;color:var(--ink);
  cursor:pointer;
}
.rf-agree input[type="checkbox"]{
  width:18px;height:18px;flex-shrink:0;margin-top:1px;
  accent-color:var(--blue);
}

/* ── Submit row ── */
.rentform-submit{
  text-align:center;
  padding:8px 0 0;
}
.rentform-submit__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--blue);color:#fff;
  border:none;border-radius:14px;
  padding:16px 36px;font-family:var(--display);font-weight:600;
  font-size:16px;letter-spacing:-0.012em;
  cursor:pointer;transition:all 200ms;
  box-shadow:0 14px 34px -16px rgba(36,107,179,0.55);
}
.rentform-submit__btn:hover{background:var(--navy);transform:translateY(-1px);box-shadow:0 18px 40px -18px rgba(10,37,64,0.55)}
.rentform-submit__btn .arr{transition:transform 200ms}
.rentform-submit__btn:hover .arr{transform:translateX(2px)}
.rentform-submit__btn:disabled{opacity:0.6;cursor:wait;transform:none}

.rentform-submit__note{
  font-size:12px;color:var(--ink-faint);
  margin:12px auto 0;max-width:520px;line-height:1.55;
}

.rentform-submit__divider{
  margin:28px auto 0;max-width:120px;
  display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-faint);
}
.rentform-submit__divider::before,
.rentform-submit__divider::after{
  content:"";flex:1;height:1px;background:var(--line);
}

.rentform-submit__wa{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;padding:11px 22px;
  background:#fff;border:1.5px solid #25D366;color:#1d8c44;
  border-radius:12px;font-family:var(--display);font-weight:600;
  font-size:14px;text-decoration:none;transition:all 160ms;
}
.rentform-submit__wa:hover{background:#25D366;color:#fff}
.rentform-submit__wa svg{width:16px;height:16px;fill:currentColor}

.rentform-submit__error{
  margin-top:16px;padding:12px 16px;
  background:rgba(192,57,43,0.08);
  border:1px solid rgba(192,57,43,0.30);
  border-radius:10px;
  font-size:13.5px;color:#C0392B;
}

/* ── Success state ── */
.rentform-success{
  max-width:680px;margin:0 auto;text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:48px 36px 40px;
  box-shadow:0 10px 30px -18px rgba(10,37,64,0.22);
}
.rentform-success__icon{
  width:64px;height:64px;
  margin:0 auto 18px;
  background:rgba(36,107,179,0.10);color:var(--blue);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.rentform-success__icon svg{width:38px;height:38px}
.rentform-success__title{
  font-family:var(--display);font-weight:700;
  font-size:26px;letter-spacing:-0.022em;
  color:var(--navy);margin:0 0 10px;
}
.rentform-success__lede{
  font-size:15px;line-height:1.55;color:var(--ink-2);
  margin:0 auto 26px;max-width:520px;
}
.rentform-success__summary{
  text-align:left;margin:0 auto 28px;max-width:480px;
  padding:18px 20px;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:12px;
}
.rentform-success__summary-head{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 10px;
}
.rentform-success__summary dl{
  display:grid;grid-template-columns:auto 1fr;gap:8px 18px;
  margin:0;
}
.rentform-success__summary dt{
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:0.06em;color:var(--ink-faint);
}
.rentform-success__summary dd{
  margin:0;font-size:13.5px;color:var(--navy);font-weight:500;
}
.rentform-success__ctas{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
}

/* ── Responsive ── */
@media(max-width:780px){
  .rentform-section{padding:40px 0 60px}
  .rentform-step{padding:24px 22px 26px}
  .rentform-step__title{font-size:19px}
  .rf-planpicker{grid-template-columns:1fr 1fr;gap:10px}
  .rf-summary{grid-template-columns:1fr 1fr;gap:14px;padding:16px 18px}
  .rf-config-grid{grid-template-columns:1fr;gap:14px}
  .rf-options--2col,.rf-options--3col,.rf-options--4col{grid-template-columns:1fr 1fr}
  .rf-biz-grid{grid-template-columns:1fr}
  .rf-contact-grid{grid-template-columns:1fr}
  .rentform-success{padding:36px 22px 28px}
  .rentform-success__title{font-size:22px}

  /* iOS Safari auto-zooms when a form input has font-size < 16px and
     the user taps to focus. Force 16px on mobile so the viewport
     stays put. Applies to every form-style input class we use. */
  .rf-field input,
  .rf-field select,
  .rf-field textarea,
  .field input,
  .field select,
  .field textarea,
  .form-grid input,
  .form-grid select,
  .form-grid textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input[type="url"],
  textarea,
  select{
    font-size:16px !important;
  }
}
@media(max-width:460px){
  .rf-planpicker{grid-template-columns:1fr;gap:8px}
  .rf-summary{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════════════════════════════
   Smart filter-order picker — shared between filter-replacements.html
   and account.html. Mounted by js/filter-order.js into any container.
   ════════════════════════════════════════════════════════════════════ */
.filt-picker{
  background:#fff;
  border:1px solid #d9e3f0;
  border-radius:14px;
  padding:22px 22px 18px;
  box-shadow:0 4px 18px rgba(10,21,48,0.05);
}
/* Reset — the picker can be mounted inside .cta-mini (which sets
   `color:#fff` + `.cta-mini p { color:rgba(255,255,255,0.7) }`).
   The picker must always render dark-on-white regardless of where
   it's dropped. Use !important + explicit hex on each text role —
   `color:inherit` was the wrong fix (inherits the white).
   Fixed 2026-05-19. */
.filt-picker,
.filt-picker *{text-align:left}
.filt-picker p{margin:0;max-width:none}
.filt-picker__head{color:#0a2540 !important}
.filt-picker__title{color:#0a2540 !important}
.filt-picker__sub{color:#5c7290 !important}
.filt-picker__foot{color:#7a8aa3 !important}
.filt-picker__nudge{color:#7a4a00 !important}
.filt-picker__renew{color:#5c7290 !important}
.filt-picker__val{color:#0a2540 !important}
.filt-picker__step{color:#246bb3 !important}
.filt-picker__head{
  font-size:15px;
  font-weight:700;
  color:#0a2540;
  margin:0 0 14px;
  letter-spacing:-0.01em;
}
.filt-picker__nudge{
  background:#fff7e6;
  border:1px solid #ffe6b3;
  color:#7a4a00;
  border-radius:9px;
  padding:9px 12px;
  font-size:13px;
  margin:0 0 14px;
  line-height:1.5;
}
.filt-picker__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
  border-top:1px solid #eef2f7;
}
.filt-picker__row:first-of-type{border-top:none;padding-top:4px}
.filt-picker__info{flex:1 1 auto;min-width:0}
.filt-picker__title{
  font-size:14px;
  font-weight:700;
  color:#0a2540;
  margin:0 0 3px;
  letter-spacing:-0.005em;
}
.filt-picker__sub{
  font-size:12.5px;
  color:#5c7290;
  margin:0;
  line-height:1.45;
}
.filt-picker__price{
  font-size:12px !important;
  color:#246bb3 !important;
  margin:4px 0 0 !important;
  font-weight:600;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:0.04em;
}
.filt-picker__subtotal{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0 0;
  border-top:1px solid #eef2f7;
  margin-top:6px;
  font-size:13.5px;
  color:#5c7290 !important;
}
.filt-picker__subtotal strong{
  font-size:17px;
  font-weight:700;
  color:#0a2540 !important;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.filt-picker__qty{
  display:inline-flex;
  align-items:center;
  gap:0;
  background:#f4f8fd;
  border:1px solid #cce0f4;
  border-radius:9px;
  overflow:hidden;
  flex:0 0 auto;
}
.filt-picker__step{
  width:36px;
  height:36px;
  background:transparent;
  border:none;
  color:#246bb3;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 120ms ease;
  font-family:inherit;
}
.filt-picker__step:hover{background:#e6efff}
.filt-picker__step:active{background:#cce0f4}
.filt-picker__val{
  min-width:36px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#0a2540;
  font-variant-numeric:tabular-nums;
}
.filt-picker__renew{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 0 4px;
  border-top:1px solid #eef2f7;
  margin-top:6px;
  font-size:13px;
  color:#5c7290;
  line-height:1.45;
  cursor:pointer;
}
.filt-picker__renew input{
  margin-top:2px;
  width:16px;
  height:16px;
  accent-color:#246bb3;
  cursor:pointer;
  flex:0 0 auto;
}
.filt-picker__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px 18px;
  border-radius:10px;
  background:#cdd5e0;
  color:#fff;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  margin:14px 0 10px;
  transition:background 140ms ease, transform 140ms ease;
  cursor:not-allowed;
  font-family:inherit;
}
.filt-picker__cta.is-ready{
  background:#25D366;
  cursor:pointer;
}
.filt-picker__cta.is-ready:hover{
  background:#1ebe57;
  transform:translateY(-1px);
}
.filt-picker__foot{
  margin:0;
  font-size:12px;
  color:#7a8aa3;
  text-align:center;
  line-height:1.5;
}
@media(max-width:460px){
  .filt-picker{padding:18px 16px 14px}
  .filt-picker__row{flex-direction:column;align-items:stretch;gap:10px}
  .filt-picker__qty{align-self:flex-start}
}


/* ════════════════════════════════════════════════════════════════════
   GLOBAL MOBILE IMPROVEMENTS — added 2026-05-19 during mobile audit.
   Defensive rules to keep every page friendly on small screens without
   per-page edits.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Never let any page scroll horizontally — protects against any
   stray fixed-width element from breaking the viewport. */
html,body{overflow-x:hidden;max-width:100%}

/* 2. Tables in blog body / prose containers — horizontal scroll on
   narrow screens instead of bleeding into the layout. Wraps the table
   in a scrollable container via CSS-only trick. */
@media(max-width:780px){
  .blogpost__body table,
  .researchread__entry table,
  .legal table,
  .prose table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
    white-space:nowrap;
    border-collapse:collapse;
    margin:14px 0;
  }
  /* When table scrolls, its inner cells need a sane min-width */
  .blogpost__body table th,
  .blogpost__body table td,
  .researchread__entry table th,
  .researchread__entry table td,
  .legal table th,
  .legal table td,
  .prose table th,
  .prose table td{padding:8px 12px;font-size:13px}
}

/* 3. Minimum touch target — 44×44 is the Apple HIG / WCAG AAA target.
   Apply only to obvious interactive elements; do not bloat tight UI
   like sidedock chips by widening them. */
@media(max-width:780px){
  a.btn,button.btn,.btn{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  /* Inputs — bump font-size to 16px so iOS does not auto-zoom on focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea{font-size:16px}
}

/* 4. Image containment — every image scales down, never overflows. */
img{max-width:100%;height:auto}

/* 5. Wrap long links/words so they break naturally instead of pushing
   the parent box wider on narrow screens. */
@media(max-width:540px){
  .acc-link-input,
  code,
  pre,
  .legal__contact a{
    word-break:break-word;
    overflow-wrap:anywhere;
  }
}

/* 6. Tap-highlight cleanup on iOS (subtle UX polish). */
a,button,[role="button"]{-webkit-tap-highlight-color:rgba(36,107,179,0.15)}



/* ════════════════════════════════════════════════════════════════════
   TABLET BREAKPOINTS — added 2026-05-19 for iPad portrait (768px) +
   small tablets (≤960px). The previous CSS jumped from 880px desktop
   straight to 640px phone — leaving iPad portrait with desktop layouts
   that were too cramped for tablet hands.
   ════════════════════════════════════════════════════════════════════ */

@media(max-width:960px) and (min-width:641px){
  /* 3-up product / feature / step grids → 2-up on tablet */
  .features__grid,
  .nine-grid,
  .rent-steps,
  .colour-grid,
  .specgrid,
  .doc-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:18px;
  }

  /* Order form preset row — 3 chips → 2 (last spans full) */
  .cfg-presets__row{
    grid-template-columns:repeat(2,1fr);
  }

  /* Newsletter strip — pic + body side-by-side, less padding */
  .newsletter__inner{
    gap:24px;
  }

  /* Hero stat strip — 3 stats fit comfortably */
  .hero-stats{
    gap:0;
  }

  /* Footer columns — 4 → 2 on tablet */
  .footer__top{
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
  }

  /* Section wraps — slightly less side padding */
  .wrap{padding-left:22px;padding-right:22px}

  /* H-section font ramps down a notch */
  .h-section{
    font-size:clamp(26px,4vw,40px);
  }
}

/* Larger tablet (e.g. iPad landscape ~1024px) — keep 3-up but
   tighten gaps so the layout doesn't feel stretched */
@media(max-width:1024px) and (min-width:961px){
  .features__grid,
  .nine-grid,
  .rent-steps,
  .specgrid,
  .doc-grid{
    gap:18px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   Filter catalogue (filter-replacements.html)
   Added 2026-05-21 with the 9-SKU rebuild from PW Filters.docx.
   3 groups: internal cartridges (4 cards), external pre-filters (3),
   and hardware brackets (2).

   Card layout: ALWAYS vertical (image top, text bottom). This works at
   every breakpoint, looks more like a proper e-commerce grid, and lets
   the price never wrap. Refined 2026-05-21 (round 2).
   ════════════════════════════════════════════════════════════════════ */
.filtcat{padding:72px 0 64px;background:var(--paper,#fafcff)}
.filtcat__group-label{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--blue,#246bb3);
  margin:42px 0 4px;
  text-align:left;
}
.filtcat__group-label:first-of-type{margin-top:48px}
.filtcat__group-sub{
  font-size:14px;
  color:var(--ink-2,#5c7290);
  margin:0 0 22px;
  max-width:64ch;
  line-height:1.6;
}

/* Grid breakpoints
   ≥1180px → 4-up (internal filters), 3-up (externals), 2-up (hardware)
   961–1179px → 3-up / 3-up / 2-up
   681–960px → 2-up everywhere
   ≤680px → 1-up everywhere */
.filtcat__grid,
.filtcat__hw{
  display:grid;
  gap:20px;
  margin-bottom:8px;
}
.filtcat__grid{grid-template-columns:repeat(2,1fr)}
.filtcat__hw  {grid-template-columns:repeat(2,1fr)}
@media(min-width:961px){
  .filtcat__grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1180px){
  .filtcat__grid--4{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:680px){
  .filtcat__grid,
  .filtcat__hw{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* ─── Individual filter card (VERTICAL layout) ─── */
.filtcard{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e3ebf5;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 12px rgba(10,21,48,0.04);
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.filtcard:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(10,21,48,0.09);
  border-color:#cdd9ec;
}

/* Image area — fixed height keeps every card aligned across the row */
.filtcard__pic{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#f6f9fd 0%,#eaf0f9 100%);
  border-bottom:1px solid #eef2f8;
  padding:22px 16px;
  height:220px;
}
.filtcard__pic img{
  max-width:90%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(10,21,48,0.10));
}

/* Body — flex column so meta sits at the bottom and all cards align */
.filtcard__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 18px 16px;
  min-width:0;
}
.filtcard__name{
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-size:17px;
  font-weight:700;
  letter-spacing:-0.015em;
  color:var(--navy,#0a2540);
  margin:0 0 6px;
  line-height:1.25;
}
.filtcard__role{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue,#246bb3);
  margin:0 0 12px;
  line-height:1.4;
}
.filtcard__desc{
  font-size:13.5px;
  color:var(--ink-2,#5c7290);
  line-height:1.6;
  margin:0 0 16px;
  /* Push the meta bar to the bottom of the card */
  flex:1;
}
.filtcard__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px;
  border-top:1px solid #eef2f8;
  flex-wrap:nowrap;
}
.filtcard__price{
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  font-size:20px;
  font-weight:700;
  color:var(--navy,#0a2540);
  letter-spacing:-0.015em;
  /* Never wrap — keeps "S$ 80" as one piece */
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.filtcard__cycle{
  font-size:11.5px;
  color:var(--ink-2,#5c7290);
  font-weight:500;
  text-align:right;
  line-height:1.35;
  white-space:nowrap;
}

/* ─── Hardware (bracket) variant — brackets render as wide landscape
       photos (red/yellow/green/blue colour-coded ports). They sit
       inside the same .filtcard__pic frame as the cartridges but want
       a touch more horizontal room since the product is wider than
       it is tall. ─── */
.filtcat__hw .filtcard__pic img{
  max-width:88%;
  max-height:160px;
}

/* ─── Mobile polish ─── */
@media(max-width:680px){
  .filtcat{padding:56px 0 48px}
  .filtcat__group-label,
  .filtcat__group-label:first-of-type{margin-top:36px}
  .filtcard__pic{height:200px;padding:18px 14px}
  .filtcard__body{padding:16px 16px 14px}
  .filtcard__name{font-size:16px}
  .filtcard__desc{font-size:13px}
  .filtcard__price{font-size:18px}
  .filtcat__hw .filtcard__pic img{max-height:140px}
}